밤하늘의 실제별, 나도 가질 수 있다?!


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


1. Introducing the iPhone and iPod touch Development Platform


앞서 소개한 Mobile Safari의 제한과 한계  표에도 나와있듯이
아이폰/아이팟터치의 로컬파일 시스템은 접근 불가능합니다.

따라서 다른 컴퓨터에서 웹페이지를 작업할  수 밖에는 없는데요.
만들어낸 웹페이지를 아이팟터치에서 보려고
매번 수정할 때 마다 웹 호스팅 계정에 FTP로 올려서 본다면 골치아파지겠죠>_<.
이런 경우, 무선공유기를 이용하고 있다면 모든 것은 OK~

PC사용자라면 APM이나 Aptana 등을 설치하여 웹서버를 만들거나,
MAC사용자라면 간단한 클릭 몇 번으로 아이팟터치에서 접근할 수 있는 웹서버를 만들 수 있습니다.

시스템 환경설정 / 인터넷 & 네트워크 - 공유 / 웹 공유 항목에 체크




이렇게 같은 공유기 안에 있는 외부 기기로부터 내 컴퓨터에 접근할 수 있는 주소가 만들어졌습니다.

실제로 아이팟터치로 위의 주소를 들어가보니 다음과 같은 페이지가 열렸습니다.

http://192.168.0.7/


http://192.168.0.7/~mkyoon/



위의 페이지가 실제로 위치하고 있는 곳은 다음과 같습니다.

  • 사용자 컴퓨터의 웹사이트 (http://192.168.0.7/) : /라이브러리/WebServer/Documents
  • 개인 웹 사이트 (http://192.168.0.7/~mkyoon/) : /사용자/맥계정이름(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>


Posted by mkyoon

2009/05/21 01:20 2009/05/21 01:20
, , , , , ,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/127

Trackback URL : http://mkyoon.com/trackback/127

Leave a comment

Mobile Safari의 손가락 동작

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


1. Introducing the iPhone and iPod touch Development Platform



1. 손가락 동작 (Finger Gestures)


아이폰/아이팟터치에서 사용할 수 있는 손가락 동작은 다음과 같습니다.

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




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


저자는 위의 정의를
머릿 속에 잘 안들어가더라도 그냥 집어넣으라고(drill into your consciousness) 말하고 있습니다.
위의 손가락 동작(Finger Gestures) 표를 봐서도 알겠지만 마우스 이벤트와는 상당히 다른 점이 많습니다.
hover(마우스 오버) 동작이나 오른쪽 클릭도 불가능하죠.

손가락으론 정교한 마우스의 움직임을 기대하기가 어려운 것도
손가락과 마우스가 다를 수 밖에 없는 이유 중 하나겠지요.
발가락만한 손가락을 가진 사람도 쉽게 이용할 수 있는 인터페이스가 그래서 더욱 중요하겠습니다.


Posted by mkyoon

2009/05/09 14:58 2009/05/09 14:58
, , , , , ,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/125

Trackback URL : http://mkyoon.com/trackback/125

Leave a comment

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

2009/05/07 23:10 2009/05/07 23:10
, , , , ,
Response
No Trackback , 2 Comments
RSS :
http://mkyoon.com/rss/response/124

Trackback URL : http://mkyoon.com/trackback/124

Comments List

  1. 아이 2009/05/08 11:12 # M/D Reply Permalink

    와우! 정말 기대되네요~

    1. mkyoon 2009/05/09 15:21 # M/D Permalink

      app들과 비교를 종종하게 될 것 같은데
      아이폰 개발 능력자의 많은 조언 부탁해요 ^.~

Leave a comment

아이팟터치 iPod Touch 구입.


쫘잔~ //ㅂ//

역시나 맥북과 마찬가지로-_-
(살아있는 지름신)우람씨의 도움으로 멋지고 착한 매물을 찾을 수가 있었습니다.
무려 판매자 이름도 나랑 한글자 차이+_+
내이름 윤미경 : 판매자 윤미선


안에 들어있는 클리닝 천으로 닦아도 흠집이 나기 십상이라는
악명높은 후덜덜한 뒷면이
중고임에도 불구하고 엄청 깨끗합니다.+_+

제품 구성

  • iPod touch
  • 이어폰
  • USB 2.0 케이블
  • Dock 어댑터
  • 클리닝 천
  • 스탠드
  • 빠른 시작 가이드


크기 및 무게

  • 높이: 110mm
  • 너비: 61.8mm
  • 두께: 8mm
  • 무게: 120g

완소 악세사리 벨킨 가죽케이스까지 >ㅂ<
서울을 가로질러 사러 나갔다 온 보람이 있었습니다 캬캬

(이제부턴 나랑 함께 싸우자-_-요녀석 사퐈뤼~)

Posted by mkyoon

2008/07/28 14:43 2008/07/28 14:43
, , , , ,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/101

Trackback URL : http://mkyoon.com/trackback/101

Leave a comment