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:
Extra HTTP requests
Not iPad-specific
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.
책소개 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 인스톨하기 프로젝트명 변경하기 애플리케이션 바이너리 준비하기 애플리케이션 올리기 기다리는 동안 참고할 사이트
테스트 주도 개발 저자 켄트 벡 | 역자 김창준 외 | 출판사 인사이트
책소개
최근 주목받고 있는 프로그래밍 방법인 테스트 주도 개발, 즉 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 김창준, 강석천)
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
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:
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:
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:
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.
애플의 아이폰과 아이패드가 플래시 지원을 하지 않기로 하면서 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”가 되기도 하는 것이다. 그래서 ,