MaKeYOurOwN mkyoon

제가 다니고 있는 회사 WECON Communications에서

아이폰 어플리케이션 AppConnect를 출시했습니다.

단순히 세일하거나 인기있는 app의 목록을 보여주는 것에서 더 나아가

SNS을 통해서 사람들과 정보교환을 목적으로 하고 있습니다.^^

쏟아지고 있는 app중에서 보석을 잘 찾아내는 친구를 옆에 두었다면

아이폰, 아이팟 쓰는 맛이 제대로 나겠죠^^

자세한 설명은 아래 링크에서 확인하세요.

AppConnect 개발자 The eye님의 블로그

*MUST HAVE* 아이폰 어플리케이션 - AppConnect

http://theeye.pe.kr/entry/wecon-proudly-present-AppConnect-iPhone-MUST-HAVE-Application

AppConnect 공식 홈페이지

AppConnect - Open New world that is Connected by Applications

http://appconnect.starpl.com

Posted by mkyoon

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <title>테스트입니다</title> <link type="text/css" rel="stylesheet" href="lib/iui.css" /> <style type="text/css"> body { font: x-large Applegothic; text-align: center; } </style> </head> <body> 테스트입니다. </body> </html>

자원(Resource)	한계(Limitation)
다운로드 된 텍스트 자원(HTML, CSS, Javascript 파일)	10MB
JPEG 이미지	128MB (all JPEG images over 2MB are subsampled - decoding the image to 16x fewer pixels)
PNG, GIF, TIFF	8MB
움직이는 GIF	2MB를 넘지 않을 경우에만 움직임. 넘는 경우 첫 프레임만 보임.
스트리밍되지 않는 미디어 파일	10MB
PDF, Word, Excel 문서	30MB (넘는 경우 굉장히 느려짐)
자바스크립트 계층과 객체 할당(stack & object allocation)	10MB
자바스크립트 실행	5초 (최상위 함수의 실행 시간이 5초가 넘어갈 경우 try/catch 에서 catch가 호출됨)
Mobile Safari 새창열림	8페이지

자원(Resource)

한계(Limitation)

다운로드 된 텍스트 자원(HTML, CSS, Javascript 파일)

10MB

JPEG 이미지

128MB (all JPEG images over 2MB are subsampled - decoding the image to 16x fewer pixels)

PNG, GIF, TIFF

8MB

움직이는 GIF

2MB를 넘지 않을 경우에만 움직임. 넘는 경우 첫 프레임만 보임.

스트리밍되지 않는 미디어 파일

10MB

PDF, Word, Excel 문서

30MB (넘는 경우 굉장히 느려짐)

자바스크립트 계층과 객체 할당(stack & object allocation)

10MB

자바스크립트 실행

5초 (최상위 함수의 실행 시간이 5초가 넘어갈 경우 try/catch 에서 catch가 호출됨)

Mobile Safari 새창열림

8페이지

영역(Area)	지원되지 않는 기술
웹 기술	플래시, 자바 애플릿, SOAP, XSLT, SVG, 기타 플러그인 설치 등
모바일 기술	WML
파일 접근	로컬 파일 시스템 접근
텍스트 상호작용	텍스트 선택, 잘라내기, 복사, 붙여넣기(OS 3.0 에서는 가능)
embedded video	In-place video (tapping and embedded element will put iPhone/iPod touch into video playback mode)
보안	Diffie-Hellman protocol, DSA keys, self-signed certifications, custom x.509 certificates
자바스크립트 이벤트	마우스와 키보드에 관련된 몇가지 이벤트
자바스크립트 명령어	showModalDialog(), print()
북마크 아이콘	.ico 파일
HTML	input type="file", tool tips
CSS	Hover 스타일, position: fixed

영역(Area)

지원되지 않는 기술

웹 기술

플래시, 자바 애플릿, SOAP, XSLT, SVG, 기타 플러그인 설치 등

모바일 기술

WML

파일 접근

로컬 파일 시스템 접근

텍스트 상호작용

텍스트 선택, 잘라내기, 복사, 붙여넣기(OS 3.0 에서는 가능)

embedded video

In-place video (tapping and embedded element will put iPhone/iPod touch into video playback mode)

보안

Diffie-Hellman protocol, DSA keys, self-signed certifications, custom x.509 certificates

자바스크립트 이벤트

마우스와 키보드에 관련된 몇가지 이벤트

자바스크립트 명령어

showModalDialog(), print()

북마크 아이콘

.ico 파일

HTML

input type="file", tool tips

CSS

Hover 스타일, position: fixed

동작	결과	웹페이지	어플리케이션
누르기(Tap)	마우스 클릭과 일치합니다. 선택/실행입니다.	Yes	Yes
끌기(Drag)	화면이 Viewport 안에서 이동됩니다.	Yes	Yes
밀어치기(Flick)	드래그와 다른 점은 재빠른 '튕김'이라고 해야할까요. 스크롤이 생기는 페이지나 리스트를 빠르게 스크롤합니다.	Yes	Yes
두번 누르기(Double-tap)	중앙 부분으로 약간 확대합니다. 확대한 후 또 두번 누르면 약간 축소가 됩니다.	Yes	No
벌리기(Pinch Open)	두 손가락으로 벌려주면 그만큼 확대가 됩니다.	Yes	No
좁히기(Pinch Close)	두 손가락으로 좁혀주면 그만큼 축소가 됩니다.	Yes	No
길게 누르기(Touch and hold)	길게 누르면 표 아래 스크린샷과 같은 풍선이나 돋보기 등을 보여줍니다. 웹 페이지에 있는 그림일 경우 저장여부를 체크합니다.	Yes	No
두 손가락으로 스크롤(Two-finger scroll)	스크롤이 생기는(overflow: auto, scroll) 요소나 IFRAME 안에 있는 내용을 스크롤합니다.	Yes	Yes

동작

결과

웹페이지

어플리케이션

누르기(Tap)

마우스 클릭과 일치합니다. 선택/실행입니다.

Yes

끌기(Drag)

화면이 Viewport 안에서 이동됩니다.

Yes

밀어치기(Flick)

드래그와 다른 점은 재빠른 '튕김'이라고 해야할까요. 스크롤이 생기는 페이지나 리스트를 빠르게 스크롤합니다.

Yes

두번 누르기(Double-tap)

중앙 부분으로 약간 확대합니다. 확대한 후 또 두번 누르면 약간 축소가 됩니다.

Yes

벌리기(Pinch Open)

두 손가락으로 벌려주면 그만큼 확대가 됩니다.

Yes

좁히기(Pinch Close)

두 손가락으로 좁혀주면 그만큼 축소가 됩니다.

Yes

길게 누르기(Touch and hold)

길게 누르면 표 아래 스크린샷과 같은 풍선이나 돋보기 등을 보여줍니다. 웹 페이지에 있는 그림일 경우 저장여부를 체크합니다.

Yes

두 손가락으로 스크롤(Two-finger scroll)

스크롤이 생기는(overflow: auto, scroll) 요소나 IFRAME 안에 있는 내용을 스크롤합니다.

Yes

Professional iPhone and iPod touch Programming: Building Applications for Mobile Safari

1. Introducing the iPhone and iPod touch Development Platform

(X)HTML, CSS, 그리고 약간의 JavaScript를 할 수 있는 제 관점에서
위의 책을 바탕으로 앞으로 블로그에 정리하려고 합니다.

참고로 제가 가지고 있는 기기는 iPod touch 2세대 (버전: 2.2.1) 입니다.
혹시 iPhone을 사용하고 계신 분~ 싸게싸게 저에게 파는 것은 어떠신가요..-_-;쿨럭

사파리를 실행시키면 다음 화면을 볼 수 있습니다.

1. 생김새 (User Interface)

- Status bar : Wi-Fi, 시계, 배터리가 있는 부분입니다.
- URL bar : 웹페이지의 제목(TITLE), 웹페이지 주소, 검색창이 있는 부분입니다.
- Viewport : 웹페이지가 나오는 분입니다. 세로형(Portrait), 가로형(Landscape) 모드가 있습니다.
- Toolbar(Button bar) : 뒤로, 앞으로, 책갈피 추가, 책갈피 목록, 여러창 보기 버튼이 있는 부분입니다.

2. 설정 (Settings)

아이팟터치의 설정에서 사파리를 선택하면 다음과 같은 항목들을 볼 수 있습니다.

웹 관련 개발자나 맥과 윈도우즈용 Safari를 써보신 분이라면 아시겠지만,
Safari는 Webkit 엔진을 바탕으로 만들어진 브라우저입니다.
(구글 Chrome 브라우저도 똑같은 Webkit 엔진을 사용하고 있습니다.)

하지만 Mobile Safari는 같은 Safari 브라우저이기는 하지만 보통 PC에 깔리는 브라우저와는 조금 다릅니다.
모든 CSS와 JavaScript가 가능한 것 은 아니며,
사용자가 관리할 수 있는 설정 항목도 위의 4가지가 다 입니다.
(자바스크립트, 플러그인, 팝업차단, 쿠키허용)

재밌는 설정항목이 맨 마지막에 있네요.
이 '개발자용'을 누르면 '콘솔 디버그'를 킬 것인지 물어봅니다.

콘솔 디버그를 키면 사파리는 다음과 같은 모습을 보여줍니다.

웹페이지에 오류가 있는지, 있다면 어떠한 오류인지 알려주는 Console Debug bar 입니다.
이것도 Safari의 Web Inspector를 상상하시면 안됩니다.

오류가 있는 http://weconize.com 블로그에 들어가 보았습니다.

HTML, JavaScript, CSS 세가지 항목으로 몇번째 줄에 어떠한 오류가 있는지 알려줍니다.
이것도 오류메시지가 여러줄로 넘어가면 쩜쩜쩜(...)으로 생략하고선 더 자세하게 보여주지도 않습니다.-_-;
그래도 오류 없이 웹페이지를 만드는데에 도움이 되겠지요 ^^

Posted by mkyoon

Search Results for 'iPhone'

5 POSTS

Trackbacks List

Trackbacks List

[표] 자원의 제약 (Resource Constraints)

[표] 지원되지 않는 기술 (Technologies not Supported by iPhone/iPod touch)

1. 손가락 동작 (Finger Gestures)

2. 손가락은 마우스가 아니다.

1. 생김새 (User Interface)

2. 설정 (Settings)

Trackbacks List

Comments List

Notices

Categories

Tag Cloud

Recent Posts

Site Stats