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

Search Results for 'CSS & Browsers/Mobile Safari'


5 POSTS

  1. 2010/08/23 모바일 웹페이지 Tip - Webkit 브라우저를 중심으로 by mkyoon
  2. 2009/05/21 내가 만든 HTML 파일을 iPhone/iPod touch에서 보자. by mkyoon
  3. 2009/05/20 Mobile Safari의 제약과 한계 by mkyoon
  4. 2009/05/09 Mobile Safari의 손가락 동작 by mkyoon
  5. 2009/05/07 Safari on iPhone / iPod touch (Mobile Safari) 시작합니다. by mkyoon (2)
« Previous : 1 : Next »

모바일 웹페이지 Tip - Webkit 브라우저를 중심으로

모바일 웹페이지를 만들면서 느꼈던 점과 기록하고 싶은 것들을
PPT로 정리해보았습니다.

http://mkyoon.tomeii.com/docs/iphone(webkit)mobile_mkyoon.pdf

  1. 모바일의 한계
    • 정말 중요한 컨텐츠만
    • 팝업은 최소한으로
    • 이미지는 최소한으로
    • 1px 차이는 여유롭게
  2. XHTML
    • 2.1 DTD
      • 국내외 모바일 서비스의 DTD
    • 2.2 해상도와 Viewport
      • 해상도의 차이
      • Viewport
      • 가로 세로 모드
    • 2.3 바로가기 아이콘
      • 홈 화면에 추가
      • Apple Touch Icon
    • 2.4 <link>
    • 2.5 <table>
    • 2.6 Link(anchor)
      • 전화번호
      • 메일주소
  3. CSS
    • 3.1 문서 너비는 100%로
    • 3.2 Image 최소화
      • CSS Sprite
      • CSS Sprite 부작용
      • 둥근 모서리
      • 그림자
    • 3.3 숨겼다 나타내기
      • visibility: hidden;
    • 3.4 텍스트
      • 텍스트 크기
  4. Javascript
    • 주소창 숨기기
  5. 유용한 도구
    • 시뮬레이터
    • 프레임워크


Posted by mkyoon

2010/08/23 02:01 2010/08/23 02:01
Tag
, , ,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/135

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

Leave a comment

내가 만든 HTML 파일을 iPhone/iPod touch에서 보자.

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
Tag
, , , , , ,
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


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


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


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


영역(Area)지원되지 않는 기술
웹 기술플래시, 자바 애플릿, SOAP, XSLT, SVG, 기타 플러그인 설치 등
모바일 기술WML
파일 접근로컬 파일 시스템 접근
텍스트 상호작용텍스트 선택, 잘라내기, 복사, 붙여넣기(OS 3.0 에서는 가능)
embedded videoIn-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 파일
HTMLinput type="file", tool tips
CSSHover 스타일, position: fixed

처음 들어보거나 모르는 기술들이 많네요.
지원되지 않는 마우스와 키보드에 관련된 이벤트는 Chapter 5에서 계속됩니다.


Posted by mkyoon

2009/05/20 23:45 2009/05/20 23:45
Tag
, , , , , ,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/126

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

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
Tag
, , , , , ,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/125

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

Leave a comment

Safari on iPhone / iPod touch (Mobile Safari) 시작합니다.

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
Tag
, , , , ,
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
« Previous : 1 : Next »