iPad에서 Portrait & Landscape 일때 적용 CSS 예제
http://catharsis.tumblr.com/post/50165 ··· -revised

iPad Orientation CSS (Revised)

It doesn’t take much foresight to anticipate that with the rise of Natural User Interfaces (NUIs) like the iPhone and iPad, UI designers will have a greater responsibility to optimize for orientation-based contexts. As such, it’s quite prescient that today, the folks at Cloud Four demonstrated how to serve up stylesheets based on device orientation.

Since I have a feeling I’ll be using this quite a bit in the future, I wanted to build on Cloud Four’s work and find a way to alleviate the following issues:

  1. Extra HTTP requests
  2. Not iPad-specific
  3. Lack of reusability

So, without further ado, here’s my proposed revision to the iPad orientation CSS:

<!-- css -->
@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
    .landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
    .portrait { display: none; }
}

<!-- example markup -->
<h1 class="portrait">Your device orientation is "portrait"<h1>
<h1 class="landscape">Your device orientation is "landscape"<h1>

As you can see, I’ve also changed the markup in a predictable way. An explanation of the changes and the reasoning behind them can be found below.

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/04/13 16:14 2011/04/13 16:14
, , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6083

HTML CSS JAVASCRIPT로 IPHONE APPS 개발하기
IPHONE APPS 개발하기
저자 조나단 스타크 | 역자 성윤정, 황연주 | 출판사 아이티씨

Online Book : http://ofps.oreilly.com/titles/9780596805784/index.html

책소개
Object-C 혹은 Cocoa 없이 앱스토어 애플리케이션 만들기『HTML, CSS, JavaScript로 iPhone Apps 개발하기』. 이 책은 웹 개발자라면 누구라도 쉽게 아이폰 애플리케이션 개발자가 될 수 있도록 도와주는 안내서다. Objective-C나 Cocoa를 사용하지 않고 플랫폼 위에서 아이폰과 아이팟 터치를 위한 애플리케이션을 디자인하고 작성할 수 있는 오픈 소스 웹 기술들을 사용하는 방법을 배울 수 있다.

목   차

1장 시작하기
Web Apps VS. Native Apps
Web Programming 특강

2장 기본 아이폰 스타일링
첫 번째 단계
아이폰 CSS 추가하기
아이폰에 모양과 느낌 추가하기
jQuery와 기본적인 동작 추가하기
이 장을 마치며

3장 향상된 아이폰 스타일링
Ajax의 터치 추가하기
교통경찰 역할을 하는 iphone.html 작성하기
간단한 부가기능 추가하기
‘back' 버튼으로 되돌리기
Home Screen에 Icon 추가하기
Full Screen Mode
이 장을 마치며

4장 Animation
친구로부터 약간의 도움을 얻다.
Dates 패널 추가하기
Date 패널 추가하기
New Entry 패널 추가하기
Settings 패널 추가하기
하나의 HTML로 완성하기
jQTouch 사용자 정의에 맞추기
이 장을 마치며

5장 Client-Side 데이터 기억장치
localStorage와 sessionStorage
사용자 설정을 localStorage에 저장하기
Client-Side Database
이 장을 마치며

6장 Offline
Offline Application Cache의 기본
Online Whitelist와 Fallback 옵션
동적 Manifest 파일 생성하기
Debugging
이 장을 마치며

7장 Native
PhoneGap 소개
아이폰에 우리가 만든 애플리케이션 인스톨하기
JavaScript로 아이폰 제어하기
이 장을 마치며

8장 iTunes에 애플리케이션 올리기
아이폰 Distribution Provisioning Profile 만들기
아이폰 Distribution Provisioning Profile 인스톨하기
프로젝트명 변경하기
애플리케이션 바이너리 준비하기
애플리케이션 올리기
기다리는 동안
참고할 사이트


테스트 주도 개발
테스트 주도 개발 (CD-ROM 포함)
저자 켄트 벡 | 역자 김창준 외 | 출판사 인사이트

책소개

최근 주목받고 있는 프로그래밍 방법인 테스트 주도 개발, 즉 TDD를 설명한 최초의 책이자, 가장 권위적인 책. 테스트 주도 개발을 퍼뜨린 장본인이며 객체 지향 프로그래밍의 선구자 중 한 사람인 켄트 벡이 직접 썼다.

'테스트 주도 개발(Test-Driven Development)'은 테스트가 개발을 주도하는 방법이다. 테스트가 개발을 주도한다는 것은 테스트가 코딩의 방향을 이끌어 간다는 말이다. 테스트를 실패하는 코드가 없으면 코딩을 하지 않고, 코드 상에 중복이 있으면 제거한다는 간단한 규칙을 지켜나가면 자연스레 아름다운 코드가 천변만화 펼쳐진다. 덤으로 회귀 테스트도 생기고, 개발 과정 자체가 즐거워지는 보너스도 있다.

1부에서는 자바 언어를 사용해서 다중 화폐 코드를 작성하고, 2부에서는 파이썬 언어를 사용해서 단위 테스팅 프레임웍을 작성한다. 3부에는 이런 개발을 할 때 자주 등장하는 패턴들을 정리해 놓았다. 100여 개의 역주로 내용을 알기 쉽고 풍부하게 해설하고 있다. TDD를 국내에 처음 소개한 역자의 'TDD 수련법', '실전 TDD' 원고 추가했으며, 부록으로 TDD 시연 동영상 CD를 준다. 또한 한국어판 발간에 즈음한 켄트 벡 인터뷰를 수록했다.


저자 소개

<지은이>
켄트 벡(Kent Beck)
켄트 벡(Kent Beck)은 소프트웨어 패턴 운동의 선구자 중 한 명이며, CRC 카드와 HotDraw 드로잉 에디터 프레임워크, xUnit 유닛 테스팅 프레임워크를 개발했고, 리팩토링과 테스트 주도 개발을 소개했다. 또한 기민한 방법론(Agile Methodology) 중 가장 널리 알려진 익스트림 프로그래밍(Extreme Programming, XP)의 아버지다. 피플웨어로 유명한 톰 디마르코(Tom DeMarco)는 2001년 OOPSLA 컨퍼런스에서 "켄트 벡은 CMM 개발을 지휘한 와츠 험프리가 지난 10년 간 중요했던 것보다 더 중요해질 것"이라고 말했다. 켄트 벡은 현재 Three Rivers Institute 소속이다. 저술한 책으로는 Smalltalk Best Practice Patterns와 Kent Beck's Guide to Better Smalltalk 같은 스몰토크 패턴에 관련된 책들과 Extreme Programming Explained, Planning Extreme Programming(공저), Refactoring(공저), Contributing to Eclipse(공저) 등이 있고 현재도 여러 책을 집필 중에 있다.

< 옮긴이 >
김창준
현재 월간 마이크로소프트웨어 자문위원, 한국 XP 사용자 모임 설립자 및 코어그룹 멤버, XP 코치 팀 수석 코치.
다음커뮤니케이션, NHN, 한미 연합사령부, SKT, 삼성전자/전기 등에 XP 코칭, 교육, 컨설팅 등을 제공한 바 있다.
한국 XP 사용자 모임 http://xper.org 를 운영하고 있다.

강규영
현재 다음커뮤니케이션 R&D 센터에서 근무중. 한국 XP 사용자 모임 코어그룹 및 XP 코치 팀으로 활동하고 있으며 김창준씨를 도와 여러 XP 컨설팅에 참여.
개인위키 http://jania.pe.kr 을 운영하고 있다.

목  차

TDD 수련법 (by 김창준)
한국어판 인터뷰
 
1부 화폐(돈) 예제
 
1장 다중 통화를 지원하는 Money 객체
2장 타락한 객체
3장 모두를 위한 평등
4장 프라이버시
5장 솔직히 말하자면
6장 돌아온 ‘모두를 위한 평등’
7장 사과와 오렌지
8장 객체 만들기
9장 우리가 사는 시간(times)
10장 흥미로운 시간
11장 모든 악의 근원
12장 드디어, 더하기
13장 진짜로 만들기
14장 바꾸기
15장 서로 다른 통화끼리 더하기
16장 드디어, 추상화
17장 Money 회고
 
2부 XUnit 예시
 
18장 xUnit으로 가는 첫걸음
19장 테이블 차리기
20장 뒷정리하기
21장 셈하기
22장 실패 처리하기
23장 얼마나 달콤한지
24장 xUnit 회고
 
3부 테스트 주도 개발의 패턴
 
25장 테스트 주도 개발 패턴
26장 빨간 막대 패턴
27장 테스팅 패턴
28장 초록 막대 패턴
29장 xUnit 패턴
30장 디자인 패턴
31장 리팩토링
32장 TDD 마스터하기
 
부록 A 영향도
부록 B 피보나치
마치는 글 (by 마틴 파울러)
실전 TDD (by 김창준, 강석천)


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/29 10:00 2011/03/29 10:00
, , , , ,
Response
A trackback , a comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6008

[jQuery] jQuery란 무엇인가?

What is jQuery?

jQuery is a library of JavaScript Functions.

jQuery is a lightweight "write less, do more" JavaScript library.

The jQuery library contains the following features:

    * HTML element selections
    * HTML element manipulation
    * CSS manipulation
    * HTML event functions
    * JavaScript Effects and animations
    * HTML DOM traversal and modification
    * AJAX
    * Utilities
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/16 17:15 2011/03/16 17:15
, , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5941

iPad CSS Layout with landscape / portrait orientation modes

http://matthewjamestaylor.com/blog/ipa ··· it-modes
Free iPad CSS layout with landscape/portrait orientation modes

The iPad has finally launched in Australia today, hooray! I will probably get one soon so I can continue to optimise my CSS layouts for as many devices as possible. But in the mean-time I will continue using the iPad emulator that comes with the iPhone SDK.

To celebrate the launch of the iPad I have built a special iPad optimised website layout that uses pure CSS to change layouts in the portrait and landscape orientation modes. The layout can be downloaded for free at the bottom of this article or from my iPad demo page. Here is a basic diagram of how the two orientations look:

iPad CSS layout portrait / landscape designs

In Landscape mode the layout is in two columns. The main content is in a wide left column and three side sections are stacked vertically in a narrow right column. When you rotate the iPad to the portrait orientation the layout changes to a single column design. In portrait mode the main content fills the full width of the screen and the three side content areas are positioned horizontally as three columns under the main content.

In both orientations there is a header at the top and a footer at the bottom. These both change in width from 1024 pixels wide in landscape, and 768 pixels wide in portrait. See my demo page for a more detailed diagram with pixel dimensions. Below are screenshots of my demo layout in the iPad emulator:

iPad CSS layout in the iPad emulator

How does it work?

The first thing I do is lock the layout's resolution to a 1:1 ratio so that each pixel exactly lines up with the pixels in the iPad's screen. I do this with the following META tag:

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

Locking the layout to a 1:1 ratio will prevent the zooming-in and out that normally occurs when the iPad is rotated (normally, landscape mode is more zoomed-in because the width of the webpage is displayed across 1024 pixels, as opposed to portrait mode when there are only 768 pixels available).

Next I combine this with some CSS rules that change the layout in portrait and landscape modes. I do this by writing all my landscape styles normally then overwriting some of them with the @media rule at the bottom of the CSS file when the device is in portrait mode. Here is a cut-down version of the CSS:

/*normal styles here */
#wrap {
width:1024px;
}
@media only screen and (orientation:portrait){
/* portrait styles here */
#wrap {
width:768px;
}
}

The method above works beautifully for changing the layout for the two orientations without JavaScript. Check out my iPad layout demo or download the demo files and try it for yourself.


Demo Download (ipad-css-layout.zip - 41kb)


I hope you enjoyed this post. If you are reading this on your brand new iPad then... lucky you! :)


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2010/12/27 15:41 2010/12/27 15:41
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5763

http://www.w3schools.com/
html, css, xml, javascript, asp, php, sql, tutorials
사용자 삽입 이미지
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2010/08/04 09:56 2010/08/04 09:56
, , , , , , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5413

플러그인 기반의 RIA를 대체하라!

HTML5와 웹의 미래


애플의 아이폰과 아이패드가 플래시 지원을 하지 않기로 하면서 HTML5에 대한 관심이 폭발적으로 증가했다. HTML5가 화두가 되고 시간이 어느 정도 흘렀지만, 여전히 HTML5와 웹의 미래에 관한 의견들은 여러 갈래로 나뉘어져 있다. 앞으로 다가올 웹의 미래가 어떨지 아무도 정확히 알 수는 없다. 하지만 현재의 상황을 잘 파악한다면 좋은 예측은 가능할 것이다. 이 글에서는 HTML5와 웹의 미래에 대해 생각해 본다.

사실 웹에 관심을 가지고 있던 사람이 아니라면, HTML에 버전이 있었다는 사실에 당황했을지도 모른다. 그냥 간단한 태그로 이뤄진 언어 정도로만 생각하고 있었을 것이다. 그럼 HTML5에 대해 간략히 설명하기 위해 영문 위키피디아에 있는 HTML5의 정의를 인용해 보도록 하겠다.

‘HTML5는 현재 사용되고 있는 HTML 4.01과 XHTML 1.0의 다음 버전으로 사용될 예정으로 개발 진행 중이다. HTML5의 목적은 플러그인 기반의 RIA(Rich Internet Application) 사용을 줄이는 데 있다. 대표적인 예로는 어도비의 플래시, 마이크로소프트의 실버라이트가 있다. HTML5는 또한 CSS3의 추가적 사용도 포함되는데, 두 기술은 함께 개발 중인 상태다.’

여기에 HTML5의 특징을 한 가지 덧붙이자면, 강화된 자바스크립트 API를 꼽을 수 있다. 플러그인 기반의 RIA 기술을 대체하기 위한 가장 중요한 요소 중 하나이기도 하다. 그럼 HTML5의 새로운 기술들을 살펴보기 전에 먼저 HTML5의 기본이 되는 HTML과 CSS의 역사에 대해 간략히 살펴보자.

■ HTML과 CSS의 역사
HTML은 1989년 팀 버너스리(Tim Berners-Lee)라는 물리학자에 의해 시작되었다. 그 후 약 3년을 주기로 버전이 올라가다가 1999년 12월 마침내 HTML4.01이 W3C의 권고안(Recom mendation)을 받는다(W3C의 권고안을 받는다는 것은 최종 심사를 마치고 표준으로 인정받는 것을 뜻한다). HTML5는 2004년 6월 작업이 시작되었으며 현재 W3C에서 작업 초안 상태(Working Draft state)이다. CSS는 HTML과 XHTML은 물론이고 XML의 웹페이지 스타일을 표현하는 것도 가능한 언어다. CSS는 1996년 12월에 W3C의 권고안을 받아 CSS1이 공식적으로 나왔다. 그 후 1998년 5월에 다시 W3C 권고안을 받으며 CSS2가 나온다. 그리고 같은 해 CSS3의 개발에 들어갔지만 아직도 진행 중인 상태다.
HTML과 CSS의 발전 속도를 살펴보면 급변하는 웹의 발전 속도에 비해 더딘 편임을 알 수 있다. 물론 같은 수준으로 비교 할 수는 없겠으나, 웹의 일부라고 할 수 있는 어도비의 플래시의 경우 처음 출시된 이후 2~3년마다 한 번씩 새로운 버전이 출시되고 있으며, 마이크로소프트의 실버라이트 또한 2007년 출시된 후 벌써 네 번째 버전이 나온 상태이다.

■ HTML5의 소개

HTML5 표준의 범위를 정확히 구분하는 데에는 다소 애매한 부분이 없지 않다. 기존 HTML 표준의 한계를 극복하기 위한 차세대 표준으로서의 목적과 플러그인 없이 RIA를 제공하려는 목적을 동시에 가지고 있기 때문이다. HTML5의 새로운 부분들을 크게 HTML, CSS, 자바스크립트 API 이렇게 세 가지로 나눠 소개해 보도록 하겠다.

■ HTML의 변화

HTML5의 두드러진 변화로 먼저 새로운 태그들의 등장을 꼽을 수 있다. 기존의 웹페이지 레이아웃을 구성할 때는 각 부분의 특성과는 관계없이

태그를 이용해 나누는 방식이었다. 그리고 id 속성을 주어 각 부분을 구분했다. 이렇게 웹 개발자가 임의로 id를 넣는 방식을 취하다 보니 일관성이 없는 문제가 있었다. 예를 들어 각 메뉴들을 선택할 수 있는 내비게이션이 있는 영역의 id는 “nav”가 되기도 하고 “menu”가 되기도 하는 것이다. 그래서
,
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2010/07/16 13:38 2010/07/16 13:38
, , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5365


블로그 이미지

- 홍반장

Archives

Recent Trackbacks

Calendar

«   2024/04   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30        
Statistics Graph

Site Stats

Total hits:
182965
Today:
354
Yesterday:
607