원래 아이폰은 http://icloud.com 에서 로긴한뒤 내아이폰 찾기로 위치 추적이 가능하다..

하지만 국내 지도정보를 해외서버에 보관할수 없다라는 법 때문에 아이폰의 이 서비스는 사용할수가 없다.

구글맵처럼 우리측(SK) 지도 데이터를 가져가 쓰도록 하면될거 같은데... 왜 이런걸 제휴를 안걸까...

올레kt에서 위치찾기가 가능하다.. 유료로;;

올레닷컴 메인에서 상품안내 > 모바일 > 위치/교통 으로 가면 친구 찾기란 서비스가있다.

바로가기 : http://mobile.olleh.com/index.asp?code=HFA0000

친구찾기 메인에 보면 My 친구찾기 란 부분에 현재 상태가 나오게 되어있다.

친구찾기 서비스 동의해서 가입했다면 가입중이라고 나올것이고 그렇지 않다면..
 
친구찾기 가입하기(무료) 버튼이 보일것이다. 일단 클릭해서 가입한다.~


유료서비스인 부분도 있지만 유료 정액제 가입할 필요는 전혀 없다.

체험을 원한다면 오른쪽하단에 1일 무료이용권 이용하기 로 시도 해보면 될듯~

일단 친구찾기 가입하기(무료) 클릭하면 뜨는 팝업창에서 약관 동의 해주고 비밀번호 설정해주면 가입완료.

친구찾기 홈 부분에서 새로고침 한번 해주고 나서 좌측메뉴중에 내 위치보기/전송 을 클릭하면 아래와 같은 화면이 나온다.


뭐 보이는데로 맨위에 내위치 보기 부분에 내위치 조회 버튼을 클릭~


100원의 정보 이용료를 받아 챙겨주신다;;;

몇초의 로딩 시간후 찾기 결과가 화면에 출력된다.

대도시인경우  1km  이내의 오차범위가 존재한다고 한다.



뭐니 뭐니 해도 잃어 버리지 않는게 최고~!! 겠지만;;;

이 글을 보시는 분들이 다 속쓰린 분들일거라 생각하며 꼭 찾기를 빌겠습니다!!


아이폰 분실시 행동강령~

http://icloud.com 에서 로긴 한뒤 내 아이폰 찾기 회면을 조회한뒤 사운드 재생 또는 메시지 보내기 를 클릭한뒤 메시지를 적고 보낸다. 보낼때 핸드폰 분실했으니 찾아달란 메시지와 함께 연락처를 적어두면 좋다.

이 작업전에 자동잠금 사용하지 않는사용자라면 원격 잠금을 먼저 실행하는게 좋고~
엄청나게 중요한 자료가 있고,유출되면 큰일나는 내용이 있다면 미리 삭제를 해버리는것도 좋을듯 싶다.. 메시지 보내고 나면 악의에찬 습득자는 핸펀을 아예 꺼버릴지도 모르니..(컴퓨터가 꺼져있다면 위치없음 메시지가 아닌 오프라인이란 메시지가 출력된다)




나의 장비부분을 자세히보면 위치 확인 중 상태 였다가 위치 없음으로 바뀔것이다.
만역 기기가 전원이 꺼져 있다면 오프 라인 이라고 표시된다.

딱보면 알겠지만 자신이 구매하고 소유하고 있는 기기가 다 출력된다. 하나의 애플 아이디에 묶여 있다면~

사용하던 3Gs , Macbook Air , 4s 까지 (심지어 교품받았던 장비까지목록에 나와 삭제 했.....)


얘기하던 메시지 보내기 ~ 보이는거 처럼 메시지 작성 칸이 나오고 사운드 재생 설정이 가능하다.
테스트 해봐서 느낀건데 .. 아마 제법 오랬동안 사운드가 울리는듯 하다... 소리도 그렇게 듣기 좋은 소리가 아닌듯;;



icloud 의 기능으로도 못찾고 있다면~ 통신사 측 위치찾기 서비스를 요청 해본다. sk는 신분증 들고 대리점을 찾아가야 하는듯 하다.

스티브 잡스
국내도서
저자 : 월터 아이작슨(Walter Isaacson) / 안진환역
출판 : 민음사 2011.10.25
상세보기




'정보공유' 카테고리의 다른 글

인디언식 이름 짓기  (0) 2012.01.12
올레KT iPhone 4S 요금제별 월금액 계산기  (0) 2011.11.08
iOS 5 beta 7 업데이트시 주의점  (0) 2011.09.02

 

전에 포스팅했던 QR코드 생성/저장/인쇄등의 서비스를 제공하던 꿍알 사이트에서 오픈 이벤트를 진행합니다.

이번 오픈으로 전부터 예고하던 꿍알 이라는 서비스 즉 모바일 웹을 무료로 제한없이 제작할수있다네요~

다른곳과 차별화 된것이라면 분류별 스킨을 제공하고 있고~ 이런 스킨들이 계속 추가 될 예정이라고 합니다.~


여하튼 오픈이벤트 10년 넘게 호스팅 사업을 해온 블루웹이니 만큼 이벤트 신뢰도도 높고 회원가입도

이메일, 이름, 연락처 만 받고 있어 가입도 부담없고 좋습니다.



좋은건 -ㅅ- 참여해보니 경품 이 무려 맥북에어  / 아이팟 임에도 불구하고 그렇게 참여자가 많지 않다는점이

아주 훌륭하네요 ㅎㅎ 그만큼 가능성이 높으니까요~


이벤트 참여방법을 설명하려고 보다보니 마치 경품 사냥꾼 브리핑 같긴 하지만 ㅋ 어쨌든~ 설명 ㄱㄱ~

응모권을 모아서 원하는 상품에 응모하는 이벤트 외에도 여러가지 진행중이니 참고하세요~

이벤트 페이지 바로가기 : http://www.qoongr.co.kr/event/event01.html

[응모권 모으는 방법]
- 회원가입 : 1개 (회원가입할때 딱 한개;;)
- 꿍알 만들기 : 하루에 단한번 2개 (이거는 모바일웹 만드는 빌더인데 분야별로 스킨도 있고 옵션 선택해서 이미지,동영상 지도 등도 삽입할수있습니다.)
- 축하댓글 쓰기 : 하루에 단한번 1개 (이벤트 페이지 에서 하단에 축하 댓글을 작성하면 하루에 한번 점수가 쌓임)
- 이용후기 작성 : 하루에 단한번 2개 (서비스 이용이나 유료구매한 상품에 대한 이용 후기를 작성할수 있는데 역시 하루에 한번)
- 꿍알 상품 구매 : 큐알코드를 스티커나 도장 등으로 구매할 경우 응모권 5개를  받을수 있다.

현재 이벤트 오픈 시작일이라서 두달동안 얼마나 많은 인원이 참가할지는 모르겠지만 제법 해볼만한 경쟁률이 될듯 하다.

굿럭.. 하지만 이미 맥북을 사버린 나는 1위따윈 관심없다 !!!!!!!!!!

사용자 삽입 이미지


skyand96.com

skyand96.com

skyand96.com

skyand96.com

 

12월 24일 네이트에서 앱스토어/인드로이드 마켓/티스토어 모두 의 앱을 검색/순위 를 조회할수 있는 기능이 오픈되었다.

skyand96.com

skyand96.com



해당 앱을 클릭하면 각각의 스토어로 이동되어진다.

실제 스토어의 순위가 반영되는 내용으로 전에 소개했던 크롬 확장 프로그램으로 앱스토어 순위를 보지안아도 네이트 접속해서 조회하기도 제법 쓸만 할듯 하다~

이전포스팅 보기 :

[크롬]애플 앱스토어 국가별 순위 크롬으로 바로보기

사용자 삽입 이미지



메리 크리스마스~~
사용자 삽입 이미지

 


iOS 4.2 버전이 업데이트 되었다.
타 스마트폰의 말도 많은 업데이트 걱정은 없으니 행복한건가 ㅋ

이번업데이트는 역시 국내 상륙한 아이패드가 많은 기능이 적용되었다.


[iOS 4.2 업데이트]

iPad에서도 멀티태스킹

iOS 4.2는 iPhone과 iPod touch의 멀티태스킹을 iPad에서도 가능하게 만들어주었습니다.1 더 능률적으로 일하고, 더 재미있게 즐기고, 때론 이 두 가지를 동시에 해보세요. 모든 게 매끄럽고 효율적으로 진행되므로 실행 중인 App이 느려지거나 배터리가 불필요하게 소모되는 일이 없습니다.

iPad에서도 폴더로
정리하세요.

이제 iPad에도 Apps를 더 많이 넣을 수 있습니다. Apps를 폴더로 끌어다 놓기만 하면 홈 화면을 깔끔하게 정리하고 Apps를 정리된 상태로 유지하여 좋아하는 App에 빠르게 접근할 수 있습니다.

AirPrint

AirPrint를 사용하면 이메일, 사진, 웹페이지, 그리고 문서도 iPhone, iPad, iPod touch에서 바로 프린트할 수 있습니다. 몇 번만 터치하면 화면에서 보던 내용을 프린트물로 볼 수 있습니다. 소프트웨어를 내려받거나, 드라이버를 설치하거나, 케이블을 연결할 필요가 없습니다.

살다 : 현재는 HP사의 10개의 프린터만 연결된다고 한다. 추후 다른 프린터들도 추가 예정이라는;;

iOS 4.2의 다양한 기능

더욱 훌륭해진 Mail

모든 계정의 메시지를 하나로 통합된 받은 편지함에서 보고, 메시지를 주고받은 순서에 따라 정리하고, 첨부 파일을 타사 Apps에서도 열어볼 수 있습니다.

웹페이지 문장 검색

Safari에서 내용이 무척 많은 웹페이지를 볼 때에도 빠른 문장 검색 기능으로 특정 단어나 어구를 바로 찾아볼 수 있습니다.

다양해진 메모 서체

Marker Felt, Helvetica, Chalkboard 등 다양한 영문 서체를 사용하여 메모할 수 있습니다.

캘린더 초대 응답하기

iPad에 내장된 캘린더 App에서 Yahoo!, Google, Microsoft Exchange 같은 캘린더 서비스를 이용해 친구의 이벤트 초대에 바로 응답할 수 있습니다.

더 똑똑해진 키보드와사전

iOS 4.2는 50가지가 넘는 언어 및 지역어를 지원하며, iPad를 위한 30가지 이상의 새로운 다국적 키보드와 사전이 포함되어 있습니다.

더 강화된 손쉬운 사용기능

무선 키보드로도 VoiceOver를 조정할 수 있습니다. 30가지가 넘는 Bluetooth 무선 점자 디스플레이를 지원하며 25가지 이상의 언어에 대한 국제 점자표도 내장되어 있습니다.

살다 : 보이스오버 흠.. 써봤지만 진짜 해도 인식율이 안습이라는.. 그만큼 한글이 대단한건가?

훨씬 향상된 기업 지원

보안 기능이 더 강화되었고, 새로운 기기 관리 기능이 추가되었으며, 엔터프라이즈 통합 역시 향상되었습니다.

소리로 구분되는 문자
메시지

화면을 보지 않아도 문자 메시지를 누가 보냈는지 알 수 있습니다. 17가지의 새로운 알림 사운드를 연락처에 등록된 사람들에게 적용해보세요.(아이폰만적용)

 

Stoyan Stefanov씨는 아이폰/아이팟 터치에서 제공하는 사파리 브라우저(이하 모바일 사파리)용 웹페이지를 구축할 때 알아두면 유용한 팁 12가지를 작성했습니다. 아시다시피 모바일 사파리는 데스크탑용 브라우저와 견주어도 손색없을 정도의 풀브라우징을 지원하며, 작은 화면에서 효과적으로 컨텐츠를 조작 및 조회할 수 있도록 추가적인 특수한 API를 제공하고 있습니다. 지금부터 소개할 12가지 팁과 트릭은 기존의 사이트를 모바일 사파리에 최적화하거나, 새롭게 구축할 때 유용하게 사용할 수 있을 것입니다.

1. 관련 문서와 아이폰 시뮬레이터

Peter-Paul Koch씨는 모바일 사파리를 가지고 연구하기 시작했을 무렵에는 그 어디에도 관련 개발 문서를 찾을수 없었다고 불평했습니다. 애플은 한참이 지나서야 모바일 사파리 브라우저의 명세인 iPhone-specific web development information 문서를 공개했습니다.

모바일 사파리용 웹사이트를 만들기 위해서 아이폰이나 아이팟 터치를 꼭 가지고 있어야 하는 것은 아닙니다. 아이폰 SDK(맥 버전만 제공됨)에서 제공하는 시뮬레이터로도 테스트 할 수 있으니까요. 이것을 설치하기 위해서는 애플측에 아이폰 개발자로 등록절차를 거친 후 SDK를 다운로드해야 합니다. 설치에 성공했다면 아래의 경로에서 아이폰 시뮬레이터를 찾을 수 있습니다.
/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications

2. 작은 화면용 CSS

PC 또는 맥과 아이폰의 분명한 차이점은 아이폰이 훨씬 작은 화면을 가지고 있다는 점입니다. 만약 이미 데스크탑 브라우저에서 잘 작동하는 웹사이트가 있다면 모바일 사파리로의 가장 간단한 최적화 방법은 아래와 같은 전용 스타일시트를 추가하는 것입니다.
<!--[if !IE]>-->
<link  
   rel="stylesheet"  
   href="small-screen.css"  
   type="text/css"  
   media="only screen and (max-device-width: 480px)"  
/>
<!--<![endif]-->

<link> 요소는 최대 너비가 480픽셀인 기기를 타깃으로 지정한 media query를 사용하여 스타일시트를 로드합니다. 이 크기는 아이폰을 가로로 보았을 때의 크기입니다. IE 조건부 코멘트는 IE 버전 5.5 또는 이하 버전이 여기에 해당하며 이 브라우저들은 media query를 지원하지 않기 때문에 우회하도록 하기 위한 것입니다. 몇가지 예제를 살펴봅시다.

예제 1에는 두가지 색상을 가진 박스가 작성되어 있습니다. 하나는 빨간색 박스이고 다른하나는 파란색 박스입니다. common.css에는 모든 브라우저를 위한 파란색 박스 스타일이 포함되어 있습니다. small-screen.css는 모바일 사파리에만 적용되는 빨간색 박스 스타일이 포함되어 있습니다. 예제를 아이폰에서 실행하면 빨간색 박스를 볼 수 있고 데스크탑에서는 파란색 박스를 볼 수 있을 것입니다.

만약 하나의 스타일시트만 사용하고 싶다면, 아래와 같이 @media 블럭을 사용하여 아이폰만을 위한 스타일을 추가 할 수 있습니다.
@media only screen and (max-device-width: 480px) {
  #test-block { 
    background: red;
  }
}

예제 2에서는 인라인 스타일 예제를 보여주고 있습니다. onestyleforall.css 스타일시트에서 @media 블럭 안에 박스의 배경을 빨간색으로 지정하는 코드를 발견할 수 있습니다.

3. 뷰포트 <meta> 요소

모바일 사파리는 기본으로 큰 화면을 가진 데스크탑 브라우저 처럼 페이지를 렌더링 합니다. 이를테면 너비가 980픽셀인 페이지를 작은 화면에 맞추기 위해서 컨텐츠의 스케일을 줄이고 있는 것입니다. 결과적으로 사용자에게는 아주 작고 읽기 어려운 문자들로 가득찬 페이지를 제공하게 되며 관심있는 부분을 보기 위해 확대해야 합니다. 웹페이지 자체에는 문제가 없어 보이지만 당신이 웹 애플리케이션을 설계하는 입장에서는 이러한 일을 받아들이기가 쉽지 않을 것입니다.

다행히도 이것은 아래와 같이 <meta> 요소에 viewport 속성을 사용하여 바로 잡을 수 있습니다.
<meta name="viewport" content="width=device-width" />

이는 너비가 980픽셀을 축소하여 그려지는 대신에 아이폰의 가로 크기를 사용할 수 있도록 합니다. 다음 두 예제를 통하여 직접 비교할 수 있습니다.

1. 예제 3에서는 <meta> 요소에 viewport 속성을 사용하지 않은 기본 단락입니다. 여기에 사용된 문자는 거의 보이지 않습니다.
2. 예제 4에서는 <meta> 요소에 viewport 속성을 포함하고 있습니다. 기기의 가로 크기는 320픽셀로 문자를 보기가 더욱 편해졌습니다.


또 다른 방법으로는 원하는 값으로 화면이 축소되도록 기기의 가로 크기를 device-width에 지정하는 것입니다. 예를 들어, 당신의 블로그가 800 x 600픽셀 화면에 맞는 가로 750픽셀 레이아웃으로 고정되어있다고 가정해 봅시다. 예제 5에서는 부가적인 빈공간을 없애기 위해, 화면영역 <meta>요소를 사용하여 가로 크기를 780픽셀로 지정하였습니다.
<meta name="viewport" content="width=780" />

예제 6에서는 이 <meta> 요소에 viewport 속성을 가진 고정 레이아웃을 볼 수 있습니다.

<meta> 요소의 viewport 속성 내용은 여러개의 콤마로 구분하여 기본 스케일 값, 줌 레벨, 스케일링 가능 여부 등을 기입할 수 있습니다. 일반적인 값들은 다음과 같습니다.
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

모바일 사파리의 가로는 기기의 최대 가로 크기로 지정되었고 줌 레벨을 1로 지정하여 사용자가 컨텐츠를 확대/축소하는 것을 방지하고 있습니다. 마치 모바일 사파리에 최적화된 웹사이트처럼 보이게 할 수 있는 것이죠.

4. 기울기(Orientation) 변화

당신의 웹 페이지 또는 애플리케이션들은 아이폰의 기울기에 따라 세로형과 가로형 이 두가지 방향으로 모드를 전환해 가며 볼 수 있습니다. 모바일 사파리에서는 자바스크립트를 사용하여 window.orientation 프로퍼티에 접근 할 수 있으며 아래와 같은 값을 가지고 있습니다.

  • 0 : 일반적인 세로 화면(홈 버튼이 아래에 있음)
  • -90 : 시계 방향으로 회전된 가로 화면(홈 버튼이 좌측에 있음)
  • 90 : 시계 반대 방향으로 회전된 가로 화면(홈 버튼이 우측에 있음)
  • 180 : 180도 뒤집힌 화면(홈 버튼이 위에 있음)

사용자가 기기를 회전할 때 이벤트를 발생시키기 위해서 orientationchange를 사용할 수 있습니다. 다음은 가로/세로 방향이 변할때마다 alert을 실행하는 예제입니다.
window.onorientationchange = function() {
  alert(window.orientation);
}

예제 7에서는 위 코드가 어떻게 작동하는지 볼 수 있습니다. alert이 실행되기 위해서는 아이폰을 회전시켜야 합니다. 아이폰 시뮬레이터에서는 하드웨어 메뉴에서 기기를 회전하는 메뉴를 찾을 수 있습니다.



5. 스타일시트의 기울기 명세

기울기에 대하여 조금 더 알아봅시다. 때때로 방향에 따라서 컨텐츠가 가진 스타일을 별도로 지정할 필요가 있을 지도 모릅니다. 이를 위해서는 아래와 같은 세가지 간단한 단계가 필요합니다.

1. 마크업에서 <body> 요소에 클래스를 추가합니다.(예: portrait와 landscape)
2. 스타일시트에 body.portraitbody.landscape에 관련된 서로 다른 스타일을 지정합니다.
3. 자바스크립트를 사용하여 회전이 발생할때마다 <body> 요소의 클래스 값을 변경합니다.

첫번째 단계는 아래처럼 기본 클래스를 추가하는 것입니다.
<body class="portrait">

그리고 스타일을 추가 합니다.
body.portrait p {
   color: red;
}

body.landscape p {
   color: blue;
}

끝으로 다음과 같은 자바스크립트 코드들이 필요합니다.

1. 최초 클래스 이름을 정의하기 위한 'load' 이벤트 리스너 추가
2. 아이폰의 회전을 감지하기 위한 'orientationchange' 이벤트 리스너
3. 'orientationchange' 이벤트가 발생할때마다 클래스명을 바꿔주는 함수

아래 코드는 위 이벤트 리스너들 할당한 것입니다.
window.addEventListener('load', setOrientation, false);
window.addEventListener('orientationchange', setOrientation, false);

다음은 <body> 요소에 클래스명을 변경하기 위한 setOrientation 함수입니다.
function setOrientation() {
  var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait';
  var cl = document.body.className;
  cl = cl.replace(/portrait|landscape/, orient);
  document.body.className = cl;
}

예제 8은 방향에 따라 지정된 스타일이 보여지고 있습니다.



6. 툴바 감추기

최초 모파일 사파리에 페이지가 로드되기 시작하면 URL 툴바가 보이고 페이지를 아래로 스크롤하면 URL 툴바는 사라지는 것을 알 수 있습니다.



만약 모바일 사파리에 최적화된 웹 애플리케이션을 만들고 싶다면 페이지 로드가 완료 된 후 곧장 툴바를 없애고 싶을 것입니다. 이 문제를 해결하기 위해서는 window.scrollTo메서드를 사용하여 1픽셀 아래로 페이지를 스크롤하여 해결할 수 있습니다.
window.addEventListener('load', function(){
  setTimeout(scrollTo, 0, 0, 1);
}, false);

예제 9는 아래처럼 보이게 됩니다.



페이지가 너무 짧아서 스크롤 할 내용이 없다면 어떻게 해야죠? 이럴땐 <meta>요소를 추가하세요. viewport 속성에 높이 값을 지정하여 페이지가 스크롤 될 수 있게 합니다.
<meta name="viewport" content="height=device-height,width=device-width" />

7. 둥근 모서리들

특정한 박스를 둥글게 만들어야 한다면 데스크탑용 브라우저에서 작업했던 방식으로 할 수도 있습니다. 하지만 단지 사파리 브라우저만을 위한 것이라면 -webkit-border-radius CSS속성을 사용할 수 있고 비슷한 방법으로 파이어폭스에서도 -moz-border-radius를 사용할 수 있습니다. 파이어폭스나 사파리에 border-radius CSS 속성을 사용하고 IE나 오페라일 때에는 보통 사각형으로 보이게 할 수도 있겠습니다.
.box {
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   background: #ddd;
   border: 1px solid #aaa;
}

예제 10번에서는 이 CSS속성들을 이용하여 <div>요소의 가장자리를 둥글게 만들었습니다.



8. 터치 이벤트

아이폰은 마우스가 아닌 손가락으로 제어합니다. 터치하고 탭하기 위해 여러개 손가락을 사용할 수도 있습니다. 아이폰에서는 마우스 이벤트 대신에 다음과 같은 터치 이벤트를 사용할 수 있습니다.

  • touchstart
  • touchend
  • touchmove
  • touchcancel (시스템이 터치한 것을 취소하는 경우)

위와 같은 이벤트를 사용할 때 리스너는 event 객체를 전달 받습니다. event 객체는 다음과 같은 중요한 프로퍼티를 가지고 있습니다.

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

다음은 터치를 이용한 드래그와 드랍에 대한 간다한 예제입니다. 빈 페이지에 놓여진 박스에 손가락을 올려놓고 드래그 되도록 할 것입니다. 다음 코드는 touchmove 이벤트를 등록하여 손가락으로 움직일 때마다 박스의 포지션을 업데이트 합니다.
 window.addEventListener('load', function() {
 
  var b = document.getElementById('box'),
      xbox = b.offsetWidth  / 2, // half the box width
      ybox = b.offsetHeight / 2, // half the box height
      bstyle = b.style; // cached access to the style object
 
  b.addEventListener('touchmove', function(event) {
    event.preventDefault(); // the default behaviour is scrolling
    bstyle.left =  event.targetTouches[0].pageX - xbox + 'px';
    bstyle.top  =  event.targetTouches[0].pageY - ybox + 'px';
  }, false);
     
}, false);

touchmove 이벤트 리스너는 최초 손가락 움직임에는 반응하지 않습니다. 이것은 모바일 사파리의 페이지를 스크롤 컨트롤과 중복되기 때문입니다. event.targetTouches는 타깃 <div> 요소 위에 있는 각 손가락에 대한 데이터 목록들을 가지고 있습니다. 우리는 그중 하나에 대한 것만 필요하므로 event.targetTouches을 사용합니다. pageX는 손가락 위치의 x 좌표값입니다. 손가락이 박스의 중간에 위치할 수 있게 하기 위해 <div>의 가로 크기의 반을 x 좌표값에서 뺐습니다.

예제 11번은 위 코드로 작성되었습니다.

9. 제스처들

아이폰에는 손가락 하나 이상의 동작에 대한 제스쳐가 있습니다. 스케일링(줌-인과 줌-아웃) 그리고 회전 입니다. 기기에 터치하고 있는 각 손가락에 대한 정보를 가지고 있는 touchestargetTouches 이벤트에 관하여 우리는 이미 배웠습니다. 줌과 팬(파노라마)과 같은 제스쳐를 다루기 위해서도 위와 같은 이벤트들을 사용할 수 있지만, 조금 더 편리한 제스처 이벤트 들이 있습니다. 다음을 살펴 봅니다.

  • gesturestart
  • gestureend
  • gesturechange

다음 예제에서 gesturechange 이벤트에 반응하고 WebKit 전용 CSS 스타일 프로퍼티인 webkitTransform을 사용하여 div를 스케일링도 해보고 회전도 시켜볼 것입니다. 마찬가지로 이벤트 리스너는 이벤트 객체를 넘겨 받습니다. 이벤트 객체는 다음과 같은 프로퍼티를 가지고 있습니다.

  • event.scale : 값 1은 스케일링이 전혀 없습니다. 값이 1보다 작을 때는 줌-아웃(<div> 요소를 작게 만듦)이며 줌-인일때 1보다 값이 큽니다.
  • event.rotate - 이것은 회전 각도입니다.

아래 코드는 이전에 살펴봤던 터치 앤 드래그 코드와 매우 흡사합니다.
window.addEventListener('load', function() {
  var b = document.getElementById('box'),
      bstyle = b.style;
  b.addEventListener('gesturechange', function(event) {
    event.preventDefault();
    bstyle.webkitTransform = 'scale(' + event.scale + ') ' +
                             'rotate('+ event.rotation + 'deg)';
  }, false);
}, false);

예제 12번은 위 코드에 대한 액션을 보여줍니다. <div>요소를 스케일링하고 회전할 수 있습니다.

만약에 아이폰 시뮬레이터로 이 예제를 확인 하는 경우, 옵션키를 활성화 하면 손가락 모양의 두 회색 점이 나타날 것입니다. 마우스를 드래그하여 그 점들을 좁히거나 늘릴 수 있습니다.



10. 특수한 링크들

아이폰에서 전화번호가 나온 페이지를 조회하다가 이 전화번호를 일일이 타이핑하지 않고 클릭만으로 전화가 걸린다면 얼마나 좋을까요? 모바일 사파리에서는 이것이 가능합니다. 전화번호 링크를 생성하기를 원한다면 tel: 스키마를 사용할 수 있습니다.
<a href="tel:12345678900">Call me</a>

SMS 문자도 문제없습니다. 아이폰 텍스트 메세지 어플에 연결되는 sms: 스키마를 사용하세요.
<a href="sms:12345678900">Send me a text</a>

다음은 특별한 URI 스키마를 사용하지는 않지만 때때로 어떠한 링크들은 아이폰에서는 특별한 액션을 취하기도 합니다.
  • 아이튠즈 스토어 링크는 아이튠즈와 연결됩니다.
  • 구글맵 링크는 지도 애플리케이션과 연결됩니다.
  • 유튜브 링크는 유튜브 애플리케이션과 연결됩니다.
  • 이메일 주소 링크는 메일 애플리케이션에 연결됩니다.

11. 홈 아이콘

기쁘게도 어떠한 방문자가 당신의 사이트를 홈스크린(아이폰애플리케이션 실행 화면)으로 등록하고 싶어할 지도 모릅니다. 일반적으로 당신의 사이트를 홈스크린으로 추가하면, 아이폰은 당신의 사이트를 스크린샷해서 아이콘처럼 사용할 것입니다. 하지만 이보다는 아이폰에 최적화된 개인 아이콘을 제공하는 것이 더 좋지 않을까요?

그렇게 하기 위해서, 57x57픽셀의 PNG 파일을 만들고 apple-touch-icon.png라고 이름 짓습니다. 그리고 패비콘과 마찬가지로 웹서버의 root에 그 이미지를 넣으면 됩니다. 아이폰은 자동으로 이미지를 글로시하게 효과를 주고 라운드 박스로 만들기 때문에 일부러 제작할 필요까지는 없습니다.



<link> 요소를 사용하여 그 아이콘의 파일 이름이나 위치를 변경할 수도 있습니다. CDN처럼 다른 웹서버에서 이미지를 호스트하는 경우라면 <link> 요소에 아이콘의 위치를 지정하기 위해 다음과 같이 작성하세요.
<link rel="apple-touch-icon" href="http://www.example.com/my-filename.png" />

12. 디버깅: 소스 보기와 콘솔

아이폰에서 어떻게 소스를 볼 수 있을까요? 불행하게도 모바일 사파리만으로는 불가능합니다. 하지만 다행스럽게도 북마클릿은 모바일 사파리에서도 사용할 수 있기 때문에 소스를 조회하는 기능을 가진 북마클릿을 사용 할 수 있습니다.

자바스크립트document.documentElement.innerHTML를 사용하여 페이지의 소스를 출력할 수 있고 이러한 내용을 북마클릿으로 만들어 새 창으로 소스를 볼 수 있습니다. iPHoneWebDev에서는 이미 이런 소스보기 관련 북마클릿를 여럿 제공하고 있으며 이 밖에도 모바일 사파리의 디스플레이를 최적화 하는데 도움을 주는 다른 것들도 많습니다. 이 북마클릿을 사용하기 위해서는 데스크탑용 사파리에서 즐겨찾기에 추가하고 아이튠즈로 동기화하면 됩니다.

모바일 사파리는 디버깅 콘솔을 가지고 있습니다. 환경설정 > 사파리 > 개발자용 > 디버그 콘솔 옵션을 활성화하면 아이폰에서 디버깅 콘솔을 작동시킬 수 있습니다. 자 이제 디버그 콘솔이 사파리 브라우저 URL 툴바 아래에 나타날 것입니다. 페이지에 대한 에러를 보여주고 자바스크립트에서 디버그 메세지를 작성하기 위해 콘솔객체가 사용될 겻입니다.
console.log('Something');
console.error('Oops');
console.warning('Beware!');

이 것을 끝으로 흥분되고 도전할 만한 새로운 아이폰애플리케이션 개발에 조금이나마 도음이 되셨으면 좋겠습니다. 당신만의 특별한 아이디어로 승부하여 이루고자 하는 것들을 모두 이뤄내시길 바랍니다.
------------------------------------------------------------------------------------------------------------
출처 : http://firejune.com/1506

'퍼담기' 카테고리의 다른 글

무한도전 비빔밥 광고  (0) 2010.11.26
sendmail  (0) 2010.08.16
Pots Of Gold  (0) 2010.06.21

 

[사파리 를 이용한 아이폰/아이패드/아이팟 터치 모바일웹 테스트 하기]

1.우선 사파리5 를 설치합니다. (http://www.apple.com/kr/safari/download/)
  설치되어있다면 pass~

2. 설치한 사파리의 메뉴중 오른쪽 상단의 톱니바퀴 메뉴를 클릭 > 메뉴 중 기본설정을 클릭합니다.

사용자 삽입 이미지
 

3. 기본설정 > 고급탭 의 [메뉴 막대에서 개발자용 메뉴보기] 를 체크해줍니다.

사용자 삽입 이미지

4. 다시 사파리창으로 돌아와서 이번에는 페이지 모양의 아이콘을 클릭하면 개발자용 메뉴가 보이게 됩니다.
   개발자용 > 사용자 에이전트 를 차례대로 선택하면
   스샷에서 보이는것 처럼 여러가지 플랫폼으로 간단하게 전환이 가능합니다.

   훌륭합니다.

   단, 크기는 직접 손으로 조정해야한다는거 말고는 -_-;;(크기까지 해당 플랫폼과 맞게 딱 고정되었다면 좋겠다는!!)

사용자 삽입 이미지

사용자 삽입 이미지



5. 사파리깔기도 귀찮고, 이것마저도 귀찮다~면 그냥 다른 사람들이 만들어둔 사이트를 접속하는게 좋겠네요

- 아이폰 테스트 사이트
http://www.iphonetester.com/
http://www.testiphone.com/

- 아이패드용 테스트 사이트
http://www.ipadpeek.com/


6. 아니면 윈도우용 시뮬레이터를 설치해서 테스트~
  이전 포스팅가기



[아이폰용 모바일웹 제작 팁]

1. HTML5 의 input 태그를 이용한 상황에 맞는 아이폰 자판 레이이웃 호출하기

<input type="text" />
<input type="search" />
<input type="tel" />
<input type="url" />
<input type="email" />
<input type="time" />
<input type="number" />
<input type="datetime" />
<input type="week" />
<input type="date" />

2. 툴바숨기기

<script type="text/javascript">
 window.addEventListener("load",function(){
  setTimeout(scrollTo,0,0,1);
 },false);
</script>

3. 화면 회전시 폰트사이즈 고정

auto : 기본값, 화면회전후 비율에 맞게 폰트크기가 자동으로 조정됨.
none : 회전시에도 폰크기 고정.
n% : 폰트크기를 정한 크기로 변경.
 
 html {

      -webkit-text-size-adjust:none;

  }

4. 모바일웹페이지를 가로 크기에 딱 맞추기

user-scalable=no : 사용자의 확대보기 허용 여부(no/yes)
initial-scale=1.0  : 페이지 로딩시 확대비율
maximum-scale=1.0  : 최대확대비율
minimum-scale=1.0  : 최소축소비율
width=device-width : 플랫폼 가로 크기에 맞춤, 수치를넣으면 그수치에 맞게 맞춰짐.

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

 5. 회전에 따라 다른 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>

 6. 기본 어플 호출하기

 - 전화걸기 : <a href="tel:1588-2120 ">블루웹 고객센터</a>

 - 문자보내기 : <a href="sms:010-0000-0000">문자보내기</a>
 - 문자보내기실행 : <a href="sms:">문자보내기</a>

 - 메일보내기실행 : <a href="mailto:">메일보내기</a>
 - 메일보내기 : <a href="mailto:echos@blueweb.co.kr">메일보내기</a>
 - 내용채워서 메일보내기 : <a href="mailto:echos@blueweb.co.kr?cc=echos@blueweb.co.kr&bcc=echos@blueweb.co.kr&subject=test subjct&body=test body"">메일보내기</a>

 

+ Recent posts