iPhone의 caching 한계값(25 Kbytes)을 넘는 치장 목적의 커다란 배경 그림은 필요 없겠지.

/* iPhone */
@media only screen and (max-device-width: 480px) {
    #page {background-image: none;}
}

정작, iPhone Simulator에서만 제대로 적용되는 것을 확인함. :twisted:
그나저나, CSS3의 Media Queries는 iPhone에 내장된 Safari 말고도, Opera Mobile v9 그리고 Opera Mini v4도 지원한다.
참고 – A List Apart: Articles: Return of the Mobile Style Sheet

iPhone SDK드디어 오늘 많은 사람들이 고대하던 iPhone SDK가 공개되었다. 키노트를 보고 있자니, 여기서 개발된 iPhone 어플리케이션들은 앞으로 App Store를 통해서 공식 배포될 예정이라고 하는데, 올 6월 있을 iPhone/iPod Touch Firmware Update 2.0을 통해 정식 3rd Party 어플리케이션들의 배포 창구가 열리는 것이다.

키노트를 보고 있노라니, 다시금 Objective-C와 Cocoa Touch를 파고 싶은 뜬금없는 욕구가 마구 샘솟는 것을 막을 길이 없구나.
iPod Touch도 없거니와 초창기 iPod로 연명하고 있는 주제에… :oops:

어쨌거나, iPhone SDK를 설치하고 나면, Developer/Platforms/AspenSimulator.platform/Developer/Applications/ 경로에 Aspen Simulator.app라는 어플리케이션이 자리잡고 있는데, Apple이 제공하는 공식 iPhone 시뮬레이터로, 실제 iPhone에서 웹 서핑을 하는 것처럼 여러 사이트들을 둘러볼 수가 있었다.

올 6월 쯤, 때맞춰 갱신된 iPhone/iPod Touch가 한국에도 상륙하길 기다리면서, 당분간 대리 시뮬레이션…

using a minifed version of the code is much faster than the packed one – even though its file size is quite larger.

JavaScript Library Loading Speed

The iPhone cache experiment suggests an additional performance rule specific for developing web sites for the iPhone: Reduce the size of each component to 25 Kbytes or less for optimal caching behavior.

Performance Research, Part 5: iPhone Cacheability – Making it Stick

잘게 자르는 것도 요령이 필요하군.

iPhone's Home Screen Icon for my site최근에 갱신된 iPhone 1.1.3 firmware update를 설치하면 새로 추가된 Safari의 WebClips 기능으로 iPhone의 Home Screen에 자주 가는 웹 사이트들을 등록해서 손쉽게 다시 꺼내볼 수 있게 되었다.
그런데, 이렇게 등록해고 iPhone의 Home Screen에서 보여지는 웹 사이트들의 아이콘들은 등록 당시의 웹 사이트 모습을 그대로 축소해 놓은 모양이다. 이렇게 되면 간혹 등록해 둔 다른 웹 사이트들과 비슷해져서 혼동을 일으킬 수 있는데, iPhone Dev Center 문서에 있는 Create a WebClip Bookmark Icon 단락에 가면 이 아이콘을 대체하는 방법이 소개되어 있다.

간단히, 보통 "favicon.ico"이 위치하는 웹 사이트의 root 디렉토리에 57X57 픽셀 크기의 "apple-touch-icon.png" 이름의 파일을 위치시켜 주면 된단다. 그리고, 만약 웹 사이트 전체를 위한 책갈피 아이콘 대신에 특정 웹 페이지의 책갈피 아이콘을 다르게 사용하려면, 해당 페이지의 <head> 부분에 다음과 같이 추가해줘도 됨.

<head>
    <link rel="apple-touch-icon" href="/customIcon.png" />
</head>

아이콘의 "반들거리는(glossy)" 효과는 iPhone 혹은 iPod touch가 알아서 처리해 준단다.

widget.onsync 이벤트가 도대체 무엇인지 알아보려다 우연하게 찾게된 글로, WWDC 07 중에 열렸던 Dashcode Widget Creation 세션과 Website development for the iPhone 세션에 관한 상세한 참석자의 노트 기록을 엿볼 수가 있다.

Dashcode Widget Creation Session

  • Widget 디자인에서 중요한 것은 일반 웹 페이지에 적용되는 링크 위주가 아닌 콘트롤 위주가 되어야 한다.
  • Leopard Widgets에서는 dotMac과의 동기화 기능을 제공하는데, 이것을 위해 widget.onsync 이벤트가 추가되었다.
  • Safari Webkit에 새로 추가된 CSS 속성: -webkit-border-radius, -webkit-box-shadow
  • Leopard Widgets은 이제 하나의 프로세스로 동작한다.
  • 아직은 Dashcode가 iPhone 어플리케이션 개발용으로 사용될 수는 없다.

Website development for the iPhone

  • iPhone Safari에서는 Page view가 tabs의 기능을 한다.
  • Safari 책갈피는 데스크탑에 설치된 Safari의 것과 동기화 될 수 있음.
  • WML은 지원되지 않지만, XHTML Mobile 문서는 사용 가능.
  • No Flash, no Java.
  • media type의 경우 iPhone을 위해 print 흑은 handheld 유형을 적용하지는 말것.
  • viewport 속성을 지정할 것. (모두 6개- width, height, initialscale, user – scalable…): <meta name="viewport" content="width=320" />
  • 더블 탭(double tap) 후 글자가 잘 보일 수 있도록 -webkit-text-size-adjust 속성을 사용: -webkit-text-size-adjust:none|auto|percentage
  • framesets 대신에 iframes 사용.
  • drag and drop과 부분 영역의 선택 불가.
  • form controls의 스타일 적용할 수 있게 됨 .
  • 파일 업로드 불가.
  • 전화 링크 tel:#-###-###-####, Google 지도 링크.
  • QuickTime Pro에 추가된 iPhone을 위한 새로운 export 형식: Movie to iPhone – 1 Mbit (wi-fi 용), Movie to iPhone (Cellular Edge 용)
  • 미디어 파일을 전송하는 서버는 byte-range 요청을 지원해야 함 (HTTP 1.1).
  • 음성/영상의 재생을 위해 JavaScript를 쓰지 말것.
  • Canvas 사용 가능.
  • 각 리소스(HTML, CSS, 그림, JS…)는 10 MB의 크기 제한이 있음.

Atomic Typewriter – Article Viewer

그리고, 그 동안 알려진 iPhone이 Flash를 지원하지 않는 이유는 높은 CPU 점유율로 인해 급속하게 배터리가 소모되는 문제가 있기 때문이라는 소식이다. 결국 iPhone에서 실행될 YouTub 동영상은 모조리 h.264 형식으로 인코딩 될 예정이라니, 과연 Apple과 Google이 손을 맞잡고 iPhone의 성공에 쏟아붓는 노력의 크기를 짐작하게 함.

이제 iPhone의 초기 화면을 채워줄 12개의 버튼이 공개되었으니, 나머지 버튼 4개의 정체는 9일 후에나 밝혀지려나? :roll: