chapter14 위치 정보 & 모바일

Chapter14위치 정보& 모바일

HTML5 Programming

Contents

1. 위치 정보

2. 모바일

2위치 정보 & 모바일

Chapter14

위치 정보 위치 정보

지도 애플리케이션들은 현재 자신의 위치나 주변 가게의 정보들을 확인할 수 있고 또한 초행길이라도 이제는 스마트폰 하나만 있으면 얼마든지 찾아갈 수 있음 구글 맵 , 네이버 지도 , 다음 지도 등과 같이 지도와 관련된 다양한 애플리케이션들이 존재함

위치 정보 & 모바일

Chapter14

3

위치 정보위치 정보

스마트폰은 GPS 가 내장되어 있으므로 정확한 위치 정보를 파악할 수 있기 때문에 유용하게 사용 가능함 데스크톱 경우에는 GPS 가 내장되어 있지 않으므로 정확한 위치를 파악하기는 힘듬 브라우저 지원 현황


Chapter14

4

위치 정보위치 정보

위치 정보는 개인 정보이기 때문에 사용자의 허가가 없으면 정상동작하지 않음 데스크톱의 웹 브라우저나 스마트폰에서 위치 정보를 사용하고자 한다면 사용 허가를 위한 알림창이 생성됨


Chapter14

5

현재 위치현재 위치

현재 위치 정보를 얻기 위해서는 navigator 객체의 getCurrentPosition() 메서드를 사용

getCurrentPosition() 메서드는 3 개의 값을 인수로 갖음 첫 번째 인수는 위치 정보를 성공적으로 얻었을 경우에 호출되는 콜백 함수를 지정


Chapter14

6


getCurrentPosition() 메서드를 사용하여 구할 수 있는 위치 정보


Chapter14

7



Chapter14

8


getCurrentPosition() 메서드의 두 번째 인수는 위치 정보를 얻는 데 실패하였을 경우에 호출되는 콜백 함수를 지정 에러 정보와 관련된 속성

에러 정보 값


Chapter14

9


getCurrentPosition() 메서드의 세 번째 인수는 위치 정보를 얻기 위한 옵션을 지정


Chapter14

10

프로그램 14-1


Chapter14

11

01: <!DOCTYPE html>02: <html>03: <head>04: <meta charset="utf-8">05: <title> 위치 정보 </title>06: <script type="text/javascript">07: window.onload = function()08: {09: if(navigator.geolocation)10: {11: var options={enableHighAccuracy:true, timeout:1000,12: maximumAge:6000};13: navigator.geolocation.geCurrentPosition(MyPosition, ErrorCall, options);14: }15: }16:17: function MyPosition(position)18: {19: var lat = position.coords.latitude;20: var lng = position.coords.longitude;21:22: alert(" 위도 : " + lat + "<br> 경도 : " + lng);23: }

프로그램 14-1


Chapter14

12

25: function ErrorCall(error)26: {27: switch(error.code)28: {29: case error.TIMEOUT:30: alert(" 시간 제한을 초과했습니다 .");31: break;32: case error.POSITION_UNAVAILABLE:33: alert(" 현재 위치를 구할 수 없습니다 .");34: break;35: case error.PERMISSION_DENIED:36: alert(" 위치를 구할 수 있는 권한이 없습니다 .");37: break;38: case error.UNKNOWN_ERROR:39: alert(" 알 수 없는 에러가 발생하였습니다 .");40: break;41: default :42: alert (error.message);43: }44: }45: </script>46: </head>47: <body>48: </body>49: </html>

프로그램 14-1


Chapter14

13

현재 위치현재 위치 추적

현재 자신의 위치가 표시되고 이동함에 따라 계속 현재 위치가 변하는 것은 watchPosition() 메서드를 사용하여 나타낼 수 있음 현재 위치의 추적은 clearPosition() 메서드를 호출할 때까지 계속 실행


Chapter14

14

현재 위치현재 위치 추적


Chapter14

15

지도 서비스지도 서비스

현재 위치 정보를 정보를 텍스트가 아닌 지도로 나타내려면 지도 서비스를 위한 API 를 사용 구글 Maps (https://developers.google.com/maps/?

hl=ko) Bing Maps (http://www.microsoft.com/maps/develop-

ers/web.aspx) 네이버 지도 (http://dev.naver.com/openapi/apis/map) 다음 지도 (http://dna.daum.net/apis/maps)


Chapter14

16

프로그램 14-2


Chapter14

17

01: <!DOCTYPE html>02: <html>03: <head>04: <meta charset="utf-8">05: <title> 지도 </title>06: <meta name="viewport" content="initial-scale=1.0, user-scalable=no">07: <script type="text/javascript"08: src="https://maps.google.com/maps/api/js?sensor=false">09: </script>10: <script type="text/javascript">11: window.onload = function()12: {13: var latlng = new google.maps.LatLng(37.5010226, 127.0396037);14:15: var options = {16: zoom: 12,17: center: latlng,18: mapTypeId: google.maps.MapTypeId.ROADMAP19: };20:21: var map =22: new google.maps.Map(document.getElementById("map"), options);23: }24: </script>25: </head>26: <body>27: <div id="map" style="width: 500px; height: 500px"></div>28: </body>29: </html>

프로그램 14-2


Chapter14

18

모바일모바일과 HTML5

대부분의 모바일이 HTML5 지원이 잘 되고 있는 오페라 브라우저와 WebKit 기반의 안드로이드 브라우저 , 아이폰 사파리 브라우저를 사용하고 있음


Chapter14

19


스마트폰은 다양한 애플리케이션을 설치함으로써 여러 가지 유용한 기능들을 사용할 수 있음 안드로이드와 IOS, 심비안 등의 모바일 OS 들이 서로 호환이 되지 않으므로 하나의 애플리케이션이라도 각각의

OS 에 맞게 따로 개발을 해야만 함 모든 모바일에서 동작하는 애플리케이션을 만들기 위해서는 많은 시간과 개발 인력이 필요할 수밖에 없으며 서로 다른 OS 를 사용하고 있는 모바일 간의 데이터 공유도 힘들 수밖에 없음


Chapter14

20


웹 표준을 지향하는 HTML5 을 이용하여 개발한다면 OS 별로 애플리케이션을 따로 개발해야 하는 문제를 해결할 수 있음


Chapter14

21


스트래티지 애널리틱스 시장 조사 기관에서는 앞으로 HTML5 를 지원하는 단말기의 수가 비약적으로 증가할 것이라고 예상하고 있음


Chapter14

22

웹 앱 개발웹 앱 개발

네이티브 앱 (Native App) 일반적으로 모바일에서 사용하는 애플리케이션 각 모바일 OS 마다 다른 언어로 개발을 해야 함 디바이스의 모든 기능을 활용할 수 있으며 실행 속도도 빠름

웹 앱 (Web App) 웹 기술로 만든 애플리케이션 HTML, 자바스크립트 , CSS 등을 사용하여 개발을 하면 그 어떤 OS 의 모바일에서도 사용이 가능 디바이스의 카메라 등의 일부 기능을 이용할 수 없음


Chapter14

23

JQTouch 라이브러리JQTouch 라이브러리 적용

JQTouch 라이브러리 다운로드 JQTouch 라이브러리 참조 UI 스타일 지정 JQTouch 객체 생성 웹 페이지 화면 구성


Chapter14

24

JQTouch 라이브러리JQTouch 라이브러리 다운로드

JQTouch 홈페이지 (http://www.jqtouch.com/) 에 접속하여 라이브러리를 다운


Chapter14

25

JQTouch 라이브러리JQTouch 라이브러리 참조

JQuery 라이브러리를 참조해야 하는 이유는 JQTouch 라이브러리가 JQuery 기반으로 작성 되었기 때문 JQuery 라이브러리는 http://docs.jquery.com/

Downloading_jQuery 에서 다운받을 수 있음 최신 버전에는 JQTouch 가 Zepto 라이브러리와 통합되어 릴리즈되었음


Chapter14

26

JQTouch 라이브러리Zepto 라이브러리 참조

src 폴더의 lib 폴더 안에 보면 zepto.js 파일과 zep-to.min.js 파일이 있음

zepto.js 파일은 풀 버전 라이브러리이므로 개발 시 주로 사용하고 zepto.min.js 파일은 최소화 버전 라이브러리이므로 실제 릴리즈 배포 시 사용

JQTouch 라이브러리 참조


Chapter14

27

JQTouch 라이브러리UI 스타일 지정

웹 페이지 스타일을 위한 css 파일은 themes 폴더의 css 폴더에 위치


Chapter14

28

JQTouch 라이브러리JQTouch 객체 생성

객체 생성 시에는 JQTouch 의 초기화 함수인 $.JQTouch() 메서드를 사용


Chapter14

29

프로그램 14-3


Chapter14

30

01: <!DOCTYPE html>02: <html>03: <head>04: <meta charset="utf-8">05: <title> jQTouch </title>06: <script src="./jqtouch/src/lib/zepto.min.js" type="text/javascript"></script>07: <script src="./jqtouch/src/jqtouch.min.js“ type="application/x-javascript"></script>08:09: <link rel="stylesheet" href="./jqtouch/themes/css/jqtouch.css“ title="jQTouch">10:11: <script type="text/javascript">12: var jQT = new $.jQTouch({13: icon: ‘jqtouch.png’,14: addGlossToIcon: false,15: startupScreen: ‘jqt_startup.png’,16: statusBar: ‘black-translucent’,17: themeSelectionSelector: ‘#jqt #themes ul’,18: preloadImages: []19: });20: </script>21: </head>22: <body>23: <div id="home">24: <div class="toolbar"><h1>Mobile OS</h1></div>

프로그램 14-3


Chapter14

31

25: <ul class="rounded">26: <li><a href="#google"> 안드로이드 </a></li>27: <li><a href="#apple">IOS</a></li>28: <li><a href="#rim"> 블랙베리 </a></li>29: <li><a href="#ms"> 윈도우 모바일 </a></li>30: <li><a href="#samsung"> 바다 </a></li>31: </ul>32: </div>33: </body>34: </html>

chapter14 위치 정보 & 모바일

Documents