http://www.w3c.or.kr/Translation/mwbp_flip_cards/

모바일웹
모범사례

머리말

"모바일웹 모범사례 1.0 (Mobile Web Best Practices 1.0)"은 모바일 장비에서 이용되는 컨텐츠를 보다 편리하게 설계하고 이용할 수 있도록 제정한 W3C의 웹표준입니다. 본 팜플렛에는 모바일웹 모범사례를 10가지 주제로 쉽게 설명하고 있습니다. 본 팜플렛의 가이드라인을 따르면 컨텐츠 제공자들은 더 많은 고객에게 컨텐츠를 제공할 수 있게되고, 효과적인 웹사이트와 어플리케이션을 구현할 수 있으며, 다양한 장비에서 웹을 편리하게 브라우징 할 수 있을 것입니다.

상세 내용 참조: http://www.w3.org/TR/mobile-bp/

하나의 웹을 위한 설계

다양한 장비를 고려하여 설계한 컨텐츠는 비용을 절감시키고, 유연성을 증대하며, 더 많은 사람들의 필요를 충족시킬 수 있다.

하나의 웹을 위한 설계

주제의 일관성: 다양한 장비에서 동일 URI에 접속했을 때 제공되는 정보와 기능은 일관성이 있어야 한다.

성능: 사용자에게 향상된 기능을 제공하기위해 장비 성능을 상세히 확인해야한다.

오작동: 다양한 장비가 각각 다르게 해석하여 발생할 수 있는 오작동을 염두에 두고 설계한다.

테스팅: 실제 장비와 에뮬레이터 상에서 테스트를 수행한다.

웹 표준 준수

세계 곳곳의 제각기 다른 장비와 브라우저의 호환을 위해서는 표준을 준수해야한다.

웹 표준의 준수

유효한 MARKUP: 표준 문법에 유효한 문서를 작성한다.

컨텐츠 포맷 지원: 장비가 지원하는 컨텐츠를 전송한다.

선호하는 컨텐츠 포맷 제공: 가능하면 장비가 선호하는 포멧으로 컨텐츠를 전송한다.

캐릭터 인코딩 지원: 장비가 지원하는 캐릭터 인코딩을 사용한 컨텐츠를 제공해야한다.

캐릭터 인코딩 정보 활용: 장비에서 사용되는 캐릭터 인코딩을 확인한다.

스타일 시트 사용: 장비가 지원하지 않는 경우를 제외하고, 레이아웃과 형식의 설계는 스타일 시트를 사용한다.

구성: 논리적인 문서 구성을 위해 마크업 언어(markup language) 기능을 사용한다.

오류 메시지: 발생한 오류 정보를 알 수 있는 메시지를 제공하고, 그러한 오류를 피해 브라우징을 계속할 수 있도록 한다.

유해요소 제거

모바일 장비의 제한 된 화면크기, 키보드, 기타 기능으로 발생하는 사용자의 문제를 고려하여 설계한다.

유해 요소의 제거

팝업창: 팝업창이나 새로운 창이 열리지 않도록 하고, 사용자에게 사전 정보없이 현재 창을 바꾸지 않는다.

테이블 속의 테이블: 테이블 내에 또 다른 테이블을 포함하지 않는다.

테이블 레이아웃: 테이블을 이용하여 레이아웃을 구성하지 않는다.

여백과 그래픽: 여백 공간에 그래픽을 사용하지 않는다.

프레임 비사용: 프레임을 사용하지 않는다.

이미지 맵(IMAGE MAPS): 이미지 맵은 장비에서 효과적으로 지원되지 않는 한 사용하지 않는다.

장비 제한 주의

특정 웹 기술을 사용하고자 할때는, 모바일 장비 성능이 제각기 다르다는 것을 염두해 두어야 한다.

장비 제한을 주의

쿠키(COOKIES): 이용 가능한 쿠키에 의존해서는 안된다.

객체나 스크립트: 임베드 되어 있는 객체나 스크립트에 의존해서는 안된다.

테이블 지원: 장비에서 테이블을 지원하지 않는 경우 사용하지 않는다.

테이블 대체: 가능한 경우에는 테이블 형식을 대체할 수 있는 형식으로 작성한다.

스타일 시트 지원: 필요한 경우 스타일 시트 없이도 문서를 읽을 수 있도록 구성한다.

글꼴: 글꼴 관련 스타일링에는 의존하지 않는다.

색상 사용: 색상을 통해 얻을 수 있는 정보도 색상을 사용하지 않고 이용할 수 있게 한다.

웹 네비게이션 최적화

작은 화면과 키보드, 제한된 bandwidth에서는 단순한 네비게이션과 입력이 매우 중요하다.

웹 네비게이션(navigation)의 최적화

NAVBAR: 페이지 상단에는 최소의 네비게이션 메뉴바를 제공한다.

네비게이션: 일관된 네비게이션 메카니즘을 제공한다.

타겟 ID 링크: 각 링크의 타겟을 명확히한다.

파일 포멧: 이용되는 파일의 포멧이 장비에서 지원되는지 주의한다.

타겟의 접근: 네비게이션 메뉴와 자주 사용하는 기능에는 키보드 숏컷(shortcut)을 지정한다.

URI: URI를 짧게하여 입력을 쉽게한다.

균형: 사용자가 원하는 정보와 페이지에 제공되는 링크 수의 균형을 맞춰 원하는 정보를 쉽게 얻도록 한다.

그래픽과 색상 확인

이미지, 색상, 스타일은 컨텐츠를 빛나게하지만 지원되는 포맷과 저사양의 화면 등을 유의하여야 한다.

그래픽과 색상을 확인

이미지 크기 조절: 고유 크기가 있는 이미지는 서버에서 크기를 조절한다.

대용량 그래픽: 장비에서 제공할 수 없는 이미지는 사용하지 않는다. 정보제공을 위해 꼭 필요한 것이 아니면 고사양의 고해상도 이미지의 사용은 피한다.

이미지 크기 설정: 고유 크기가 있는 이미지는 마크업에 이미지 크기를 설정한다.

NON-TEXT 대체: 텍스트가 아닌 요소(이미지, 애니메이션, 동영상 등)에 대해서는 그에 상응하는 텍스트를 제공한다.

색상 명암: 전경과 배경의 색 조합은 적절한 명암 대비를 유지해야 한다.

배경 이미지 가독성: 배경에 이미지를 사용할 경우 컨텐츠 내용을 볼 수 있어야 한다.

측정: 마크업 언어 속성 값과 스타일 시트 속성 값에는 픽셀 측정과 절대 단위를 사용하지 않는다.

가볍고 간결한 사이트

가벼운 사이트는 시간과 비용을 절약하여 사용자를 즐겁게 한다.

가겹고 간결한 사이트

최소화: 간결하고 효율적인 마크업을 사용한다.

페이지 사이즈 제한: 장비의 메모리 한계를 고려한 페이지를 설계한다.

스타일 시트 크기: 스타일 시트의 크기를 최소화한다.

스크롤링: 추가적인 스크롤링을 사용해야 하는 경우가 아니라면, 한 방향으로 스크롤을 하도록 제한한다.

네트워크 자원 절약

웹 프로토콜 기능을 활용하면 네트워크 부하와 대기시간을 줄여 사용자 이용을 향상시킬 수 있다.

네트워크 자원을 절약

오토 리프레쉬: 사용자에게 사전에 알리거나 중지 방법을 제공하지 않는 한, 주기적인 페이지 오토 리프레시는 사용하지 않는다.

경로 변경: 마크업으로 자동 경로 변경(redirection)을 사용하지 않고, 서버 설정을 통한 HTTP 3xx code 경로 변경을 사용한다.

외부 자원: 외부 자원의 링크 활용을 최소화한다.

CACHING: HTTP 응답에는 캐쉬 정보를 제공한다.

사용자 입력 가이드

모바일 장비에서 키보드 및 각종 입력 방법은 비효율적일 수 있으며, 효과적인 설계는 이러한 입력을 최소화 할 수 있다.

사용자 입력 가이드

키입력 최소화: 키 입력 횟수를 최소화한다.

텍스트 입력 최소화: 가능하면 텍스트 입력을 피한다.

기본값(default) 제공: 가능하면 미리 선택된 기본값을 제공한다.

기본 입력 모드: 장비가 지원하는 기본 텍스트 입력 모드, 언어, 포멧을 설정한다.

탭 순서: 링크, 폼 컨트롤과 객체를 이용한 논리적 탭 순서를 생성한다.

라벨 컨트롤: 모든 폼 컨트롤에 적절한 라벨을 붙이고, 명시적으로 라벨과 폼 컨트롤을 연계시킨다.

위치 제어: 라벨과 연관된 폼 컨트롤이 서로 적절한 위치에 있도록 한다.

모바일 유저 배려

시간이 부족하고 번잡한 상황에 있는 모바일 사용자들은 간결한 정보를 얻고자 한다.

모바일 유저를 배려

페이지 제목: 간단 명료한 페이지 제목을 제공한다.

명확성: 명확하고 간단한 언어를 사용한다.

한 눈에 의미 파악: 페이지의 내용을 간단 명료하게 하여 다음 페이지의 내용까지 파악할 수 있도록 한다.

제한: 사용자가 요청한 범위로 컨텐츠를 제한한다.

적절: 모바일 환경 사용에 적절한 컨텐츠를 보장한다.

적절한 페이지 사이즈: 장비의 성능과 네트워크 부하 등을 고려하여 사용하기 편리하고 유용한 크기로 페이지 사이즈를 분할한다.


크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/29 10:22 2011/03/29 10:22
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/6007

모바일웹 모음 - http://m.xiles.net/
사용자 삽입 이미지

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/18 10:13 2011/03/18 10:13
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5955

국립중앙박물관 모바일웹 http://m.museum.go.kr/

사용자 삽입 이미지

크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2011/03/18 10:07 2011/03/18 10:07
,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5954

출처 : http://mrwebi.blog.me/70089919955

1. -webkit-text-size-adjust

페이지가 회전할때 폰트사이즈가 자동으로 변경되지 않도록 한다 그러나 안좋은 면이 있는데 보통 webkit 브라우저들에서는 적용안됨.

 

auto : default값, 화면의 폭에 맞추어서 텍스트 크기가 자동으로 조절된다.

none : 폰트의 자동크기변환을 막으며 모바일웹에서 일반적으로 설정한다.

n% : 폰트크기를 지정된 사이즈로 변경한다.

 

 html {

      -webkit-text-size-adjust:none;

  }

 
2. apple-mobile-web-app-capable

<meta name="apple-mobile-web-app-capable" content="yes">

content값이 yes로 지정하면 풀스크린모드로 자동하고 그렇지 않으면 일반모드로 작동한다.

window.navigator.standalone의 속성을 사용해서 풀스크린모드를 표시할수 있다.

content : yes|no


iphone os 2.1 이상


3. apple-mobile-web-app-status-bar-style

<meta name="apple-mobile-web-app-status-bar-style" content="black">

content : black | black-translucent | default


iphone os 2.1 이상


4. format-detection

<meta name="format-detection" content="telephone=no">

content : default | no

전화번호형식의 경우 자동으로 전화걸기로 연결되는데 no로 할 경우 불가능하도록 한다.


iphone os 1.0 이상


5. viewport

<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">

content : width [number | device-width], height [number | device-height], initial-scale [number], user-scalable [no | yes]

width : default 980, 범위 200 ~10,000 (숫자로 입력) 픽셀로 표시됨

height : width값에 따라 비유로 적용이 됨, 범위 223 ~ 10,000 (숫자로 입력) 픽셀로 표시됨

initial-scale : 웹페이지가 보일 때 최초 한번 적용되어서 보이는 비율, zoom in에 대한 범위를 다음 속성으로 지정할수 있다.

minimum-scale : default 0.25, 범위 0 ~ 10.0

maximun-scale : default 1.6, 범위 0 ~ 10.0

user-scalable : yes | no (no 속성은 스크롤 할때 input box에 enter가 입력 되는 것을 막음.

device-width : 기기 width 픽셀값

device-height : 기기 height 픽셀값

 

7.iphone safari Apple Touch Icon표시

Apple "favicon" 표시방법(WebClip Bookmark)

이미지 파일 사이즈 : 57 * 57

<link rel="apple-touch-icon" href=http://madebysquad.com/iphone/icon.png />


8.아이폰에서 동영상 재생은 MP4파일로 링크
 오페라 같은경우 아래와 할경우 파일이 다운이 됨. 옴니아2에서도 동작은 함.

    아이폰에서는 약간의 딜레이(곰티비, 다음TV팟 모두 그렇듯)를 거치면 영상이 아주 잘 재생됩니다.

 

<A HREF="AAAA.mp4"> 동영상보기 </A>

 

9.가장 상위 오브젝트는 수치로 가로를 넣어줘야함.

ex>  <div style="width=100%;">  --->   <div style="width=480px;">

 

10.작은 모바일 화면에 맞게 웹페이지 화면 맞추기

META 태그를 쓰면  화면이 모바일 화면에 딱 맞춰서 확대되어 보이게 됩니다. 
다른 플랫폼은 모르겠고 아이폰 같은 경우는 가로가 480px 이라 생각해서 화면을 맞추면 되더군요 

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />

 width=device-width
이 값은 페이지를 기기의 width에 맞도록 출력합니다. 아이폰은 320*480의 세로보기 모드와 480*320의 가로보기 모드를 가지고 있습니다. width=780 과 같이 특정 값을 정의할 수도 있지만, 가로, 세로보기 모드에 최적화 시키기 위해서 width=device-width로 설정하는 경우 기기의 width값에 맞춰서 페이지를 보여줍니다.

initial-scale=1.0
이것은 페이지가 로딩될때 확대비율을 정할수 있습니다. 값이 커질 수록 확대 비율된 모습으로 페이지가 나타납니다.

maximum-scale=1.0
허용가능한 확대비율의 최대치를 설정합니다.

user-scalable=0
사용자의 확대보기를 허용할지 여부를 설정합니다. 값은 0(허용하지 않음), 1(확대보기 허용함) 입니다.

 

11.모바일로 홈페이지 접속하는 사람들만 골라서 모바일홈페이지로이동시켜주기

 


 

12.모바일 사파리의 inputtype에 따른 키보드 레이아웃변화

 

1. <input type='text' /> 기본 텍스트 타입 입니다.

따로 변경된 부분은 없는 일반 적인 키보드 레이아웃이며 Form 요소로서 return 부분의 Text만 Go 로 변경됬습니다.

2. <input type='search' /> search 타입 입니다.
기본 text type과 동일하며 return 부분의 Text만 Search 로 변경됬습니다. Form 의 내부에 있을때만 적용됩니다.
3. <input type='tel' /> tel 타입 입니다.
제일 특이한 부분인데요 전화번호를 입력하기 위한 숫자 키보드가 나타납니다.

4. <input type='url' /> url 타입 입니다.
url 입력시 사용자 편의를 위해 하단에 "." , "/"  , ".com" 등의 국가코드에 대한 알리아스를 제공합니다. ".com" 버튼을 길게 탭하고 있으면 선택할수 있는 리스트가 나타납니다.
5. <input type='email' /> email 을 입력할수 있는 type 입니다.
위의 url 과 동일하세 입력편의를 위한, "@" , "." 을 기본 레이아웃으로 제공하여 줍니다.
6. <input type='password' /> 일반적으로 많이 쓰이는 password 타입입니다.
텍스트를 타이핑하면, 숨김문자로 표시됩니다. 한가지 단점으로, 영문키보드만 사용가능합니다.
7. <input type='number' /> 마지막으로 숫자 입력을위한 number 타입입니다.
이때 나타나는 레이아웃은 일반 키보드 레이아웃에서 "123" 숫자 키를 선택했을떄 나타나는 레이아웃과 동일합니다.

8.
사파리에서 검색에 히스토리 아이콘 표시하는 방법

<input type="text" />

사파리에서 검색에 히스토리 아이콘 표시하는 방법


<input type="search" results="5" />

다음 브라우저에서는 text field로 표시가 되는 것을 확인하였다고 하네요

Safari

Camino

Firefox

IE6

IE7

Opera 9


그러나 유효하지 않는 XHTML이 되버려서 safari만을 위한 자바스크립트를 사용하는 것이 더 좋을 것 같다.

스크립트 많이 쓰이는 구만...


safari ->사파리 브라우저 확인용 변수 사용자가 정의를 해야 되겠군요.

if (safari) {

  var s = $("#s"); // s라는 ID값을 가진 객체를 jquery로 선택

  s.attr("type", "search").attr("results", "5");

}


if (safari) {

  var s = document.getElementById("s");

  s.type = "search";

  s.setAttribute("results", "5");

}

 

13.아이폰 모바일 사파리에서 아이폰 기본어플 실행하기
1. 전화걸기
Anchor 태그에 "tel" 프로토콜을 사용하면 자동으로 전화 연결이 됩니다. 전화 기능이 없는 아이팟 터치 에서는 주소록에 등록하기 메뉴가 뜹니다. 또한 '&lt meta name = "format-detection" content = "telephone=no &gt' 태그 설정을 해주지 않으면 연속 되는 7자리 이상의 숫자나 특정 패턴의 숫자는 전화번호로 인식하기 때문에 주의 하여야 합니다.

<a href="tel:15880010">Show 고객센터 연결하기</a>


2. 문자보내기
Anchor 태그에 "sms"  프로토콜을 사용하면 문자보내기로 연결됩니다.
문자 보내기 어플은 아래와 같이 전화번호를 입력하여 받는사람을 지정할수 있습니다.

<a href="sms:">문자보내기 어플실행</a>
<a href="sms:1588-0010">Show 고객센터에 문자보내기 </a>


3. 메일보내기
Anchor 태그에 "mailto"  프로토콜을 사용하여 메일을 보낼수있습니다. 이는 모바일 사파리 뿐만 아니라 모든 브라우져에서 공통된 기능이구요, mailto 에는 받는사람, 메일제목, 참조자, 메일 내용까지 지정하여 어플을 실행시킬수 있습니다.
또한 메일보내기는 사파리를 종료하지 않고 메일보내기가 실행되므로, 사용자 관점에서는 참유용한 기능인듯 합니다.

mailto 에서사용 가능한 속성은 아래와 같습니다.
cc : 참조
bcc : 숨은 참조
subject : 메일제목
body : 메일본문

<a href="mailto:">메일보내기 실행</a>
<a href="mailto:sgb000@hanmail.net">bongdal 에게 메일보내기</a>
<a href="mailto:sgb000@hanmail.net?cc=sgb000@naver.com&bcc=sgb000@nate.com&subject=mailto test&body=mail send body">내용채워서 메일보내기</a>


4. 지도 어플 실행하기
조금 특이한 부분으로 애플과 구글의 제휴로 인해 실행되는부분인듯합니다.
그냥 Anchor 태그에 구글맵 주소를 입력하면 자동으로 구글 지도 어플을 실행시킵니다.


<a href="http://maps.google.com/maps?q=seoul&z=5">서울지도보기</a>
<a href="http://maps.google.com/maps?daddr=seoul&saddr=busan">서울-부산 길찾기</a>

Google Maps parameters
Table 1  Supported Google Maps parameters

Parameter

Notes

q=

The query parameter. This parameter is treated as if it had been typed into the query box by the user on the maps.google.com page. q=* is not supported

near=

The location part of the query.

ll=

The latitude and longitude points (in decimal format, comma separated, and in that order) for the map center point.

sll=

The latitude and longitude points from which a business search should be performed.

spn=

The approximate latitude and longitude span.

sspn=

A custom latitude and longitude span format used by Google.

t=

The type of map to display.

z=

The zoom level.

saddr=

The source address, which is used when generating driving directions

daddr=

The destination address, which is used when generating driving directions.

latlng=

A custom ID format that Google uses for identifying businesses.

cid=

A custom ID format that Google uses for identifying businesses.



5. YouTubu 어플 실행하기
역시, Anchor 에서 youtube와 연결된 링크가 있을경우 자동으로 내장된 YouTubu 어플이 실행됩니다.
웹상에서는 위의경로는 웹페이지에서 실행되며, 아래의 경로는 전체화면 플레이어가 실행됩니다.

<a href="http://www.youtube.com/watch?v=a_GaLdTbOG4">YouTube Play1</a>
<a href="http://www.youtube.com/v/a_GaLdTbOG4">YouTube Play2</a>



6. 아이튠즈 및 앱스토어 실행하기
아래의 URL로 앱스토어 및 아이튠즈 어플이 실행가능합니다.
한가지 주의 할점은 앱스토어의 경우 "http://itunes.apple.com/kr/app/id304608425?mt=8" 어플이 일반적인 경로(일반 web에서 사용)이나, 모바일 사파리에선 내부에서 자동으로 아래 패턴으로 변경하여 사용합니다. 하지만 어플위에 올라간 UIWebview 컨트롤상에서는 따로 구현해주지 않으면 앱스토어 넘어가지 않습니다.


<a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=304608425&cc=kr&mt=8&ign-iphone=1 ">지도어플(앱스토어 연결)</a>
<a href="http://phobos.apple.com/WebObjects/MZStore.woa/wa/viewAlbum?i=156093464&id=156093462&s=143441">Toy Story OST(itunes 연결)</a>
 
 
14.모바일 사파리에서 Geolocation 사용하기

Geolocation 객체는 모바일 사파리에서 위치 정보를 담고 있는 오브젝트로 OS3.0 이상에서 사용가능하며.
좌표체게는 위도와 경도를 이용하는 WGS84 좌표계를 쓰고 있다. 

"위치 정보는 확률적 추정에 의한 것으로 정확성을 보장하지 않는다"(
FF3.5 위치정보 도움말)

<script type="text/javascript">
   /* Mobile Browser UA 체크 */
   var ua = navigator.userAgent.toLowerCase();
    browser = {
                skt : /msie/.test( ua ) && /nate/.test( ua ),
                lgt : /msie/.test( ua ) && /([010|011|016|017|018|019]{3}\d{3,4}\d{4}$)/.test( ua ),
                opera : /opera/.test( ua ) || /opera mobi/.test( ua ),
                ipod : /webkit/.test( ua ) && /\(ipod/.test( ua ) ,
                iphone : /webkit/.test( ua ) && (/\(iphone/.test( ua ) || /\(device/.test( ua )),
                android : /webkit/.test( ua ) && /android/.test( ua )
    }

  /* OS version 체크 */
<PRE class=code-javascript>var version = (function(){ 
var retObj = {}
if(browser.ipod || browser.iphone){
var pattern = /(iphone|ipod)+\s+os+\s+(\d)_(\d)(?:_(\d))?/igm
var result = pattern.exec(ua); 

if(result != null && result.length > 0){
retObj.versionFull = result[0];
retObj.os = result[1];
retObj.major = result[2];
retObj.minor = result[3];
retObj.build = result[4] ? result[4] : 0;
} 
}

return retObj;
})()</PRE>

// 3.1.2 에서는 Geolocation이 제대로 동작하지 않음.
if((browser.ipod || browser.iphone) && (version.major > 2 &&  version.build < 2)){
    navigator.geolocation.getCurrentPosition(foundLoc);
}

function foundLoc(position){
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  alert("위도 : "+latitude +" , 경도 : "+longitude )
}

</script> 

 

16.기울기에 따라 css따로 불러오게 하기

 <script type="text/javascript">
  function orient()
  {
   switch(window.orientation){
     case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";
           break;

     case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
       break;

     case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
    break;

  }
}
 window.onload = orient();

  </script>

 

 <body onorientationchange="orient();">

 </body>
</html>

 

 

17.툴바 숨기기

사파리브라우저의 주소입력창과 검색창이 있는 툴바를 보이지 않는 상태로 변환합니다.
툴바가 사라지는 것이 아니라 스크립트를 통하여 스크롤을 아래로 내려 툴바 바로 아래에서부터 웹페이지가 보여질수 있도록 하는것입니다.
이 스크립트를 사용하는 경우 사용자에게 최초로 페이지를 보여줄때 툴바가 차지했던 부분까지 화면공간을 확보하여 보여줄 수 있습니다.

 <script type="text/javascript">

   window.addEventListener('load', function(){
   setTimeout(scrollTo, 0, 0, 1);

   }, false);

  </script>
 
 
18.콘텐츠 길이가 너무 짧아 툴바가 보여지지도 사라지지도 않은 반쯤 가려진 상태로 보이게 되는 경우
페이지 콘텐츠 길이가 너무 짧아서 스크롤할 내용이 없을때 이 스크립트는 우리가 원하는 기능을 수행하지 않을 수도 있습니다.
그리고 페이지 콘텐츠 길이가 스크롤을 내리기에 어정쩡한 길이라면 툴바가 보여지지도 사라지지도 않은 반쯤 가려진 상태로 보이게 되는 경우도 있습니다.
이런문제를 해결하기 위해서는 높이값을 최대사이즈로 지정하여 페이지가 스크롤될 수 있게 할 수 있습니다.
<meta name="viewport" content="height=device-height,width=device-width" />
 
19.라운드 박스
.box {  
  -webkit-border-radius: 5px;  /* safari */
  -moz-border-radius: 5px;  /* firefox */
  background: #ddd;  
  border: 1px solid #aaa;  
}
 
20.터치이벤트
touchstart
touchend
touchmove
touchcancel (시스템이 터치한 것을 취소하는 경우)


이벤트 발생시 event객체를 전달 받는데 다음과 같은 프로퍼티가 존재합니다.

touches : 복수로 화면에 터치되는 각 손가락들에 대한 터치 이벤트 모음들. 이 객체들은 페이지에 터치되는 좌표들의 값을 가지고 있습니다.
targetTouches : 터치할 때 발생합니다. 그러나 전체 페이지가 아닌 타깃 요소에만 반응합니다.


21. 제스쳐

gesturestart
gestureend
gesturechange

event 객체를 전달받으며 다음과 같은 프로퍼티가 존재합니다.

event.scale : 확대비율 값입니다. 값 1은 확대축소가 되지 않은 기본 상태 입니다. 값이 1보다 작을 때는 줌-아웃이며 줌-인일때는 1보다 값이 큽니다.
event.rotate - 회전 각도입니다.
 
크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2010/11/02 01:23 2010/11/02 01:23

PhoneGap - http://www.phonegap.com/

PhoneGap - http://www.phonegap.com/
사용자 삽입 이미지사용자 삽입 이미지




크리에이티브 커먼즈 라이센스
Creative Commons License
이올린에 북마크하기(0) 이올린에 추천하기(0)

Posted by 홍반장

2010/09/07 17:10 2010/09/07 17:10
, , , , ,
Response
No Trackback , No Comment
RSS :
http://tcbs17.cafe24.com/tc/rss/response/5501


블로그 이미지

- 홍반장

Archives

Recent Trackbacks

Calendar

«   2018/10   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31      
Statistics Graph

Site Stats

Total hits:
107250
Today:
1
Yesterday:
5