안녕하십니까?

이번엔 Geolocation API 를 살펴보겠습니다.

Geolocation API 는 HTML 5 에 새롭게 추가된 사용자의 위치정보를 얻기위한 JavaScript API 입니다.
여러분들도 잘 아시겠지만 이젠 위치정보를 기반한 서비스가 우리 생활 곳곳에 퍼져있으며 많은 서비스들이 위치정보와 연동하여  사용자들에게 UX 의 편리함을 줄 것입니다.

Geolocation API 는 세개의 Method 로 이루어진 API 입니다.

그 전 먼저 알아야 할 점은 현재의 위치정보가 Network 정보로 부터 추측한 것인지 GPS 로 부터 얻은 것인지에 관한 자세한 내용은 알 수 없다는 것입니다. 단지 GPS 가 내장된 Smartphone 과 같은 Device 에서는 GPS 기능을 활용할 수있고 일반 PC 에서는 WiFi 같은 정보를 이용해서 현재 정보를 알아 낼 수 있습니다.
Geolocation 은 위치정보에 대한 정보를 GPS,  WiFi IP Address, GSM/CDMA 망을 사용하는 휴대전화의 IDs 등에서 얻어옵니다. 다만 PC 에서는 한정된 정보만 제공하여 이용이 불가능한 경우가 있고 특히 Mobile Browser 에서 유용한 API 라고 할 수있습니다.


17-1. 사용법
Geolocation API 와 관련된 함수는 모두 window.navigator 객체에 정의되어 있습니다.
다음 Method를 사용하여 위치정보를 얻어 올수 있습니다.

현재 위치를 한번만 얻기 위한 함수입니다.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

다음 함수를 이용하여 위치정보를 계속 확인합니다.
var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);

성공시 호출되는 successCallback 함수에 전달되는 위치정보에는 다음과 같은 정보들이 포함됩니다.
 위치정보 속성  coords 속성  설명
 coords  latitude  위도
 longitude  경도
 altitude  표고
 accuracy  위도, 경도의 오차 (단위와 오차)
 altitudeAccuracy  표고의 오차 (단위와 오차)
 heading  Device 의 진행 방향. 북쪽을 기준으로 한 시계방향의 각도로 나타냄
 speed  Device 의 진행 속도(미터/초). (이용할 수 없을 때는 null)
 timestamp  위치정보를 얻은 시각(1970년 1월 1일 부터의 milisecond)

Error 발생시 호출되는 errorCallback 함수에 전달되는 객체에 담겨져 있는 속성과 상수들입니다.
 속성/상수  설명
 code  Error Code
 UNKNOWN_ERROR  알수 없는 Error (Error code 값 : 0)
 PERMISSION_DENIED  권한 없음 Error (Error code 값 : 1)
 POSITION_UNAVAILABLE  위치정보를 얻을 수 없음 (Error code 값 : 2)
 TIMEOUT  시간제한 초과 (Error code 값 : 3)
 message  Error Message

위치정보를 조회시 입력하는 세번째 Parameter 인 option 에 지정할 수 있는 것들은 다음과 같습니다.
 속성/상수  설명
 enableHighAccuracy  정확도가 높은 위치 정보를 요청
 timeout  위치 정보 확인에 시간제한을 설정. 시간제한을 초과하면 TIMEOUT error 발생
 maximumAge  위치정보의 유효기간을 설정. 0 을 지정하면 항상 새로운 위치정보를 요청함

option 의 사용법은 아래와 같습니다.
내용을 보면 위치정보의 유효기간은 0 으로 항상 새로운 위치정보를 가져오며, 정확도 높은 위치정보를 요청합니다. 그리고 timeout 은 3초로 설정하고 있습니다.
navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
{maximumAge: 0, enableHighAccuracy: true, timeout: 3000 }
);

17-2. Bing Map 사용하기
예제로 Bing Map 을 사용해 보려합니다.
Bing Map 을 사용하기위해서 사전에 사용자 등록을 하고 사용 Key 를 받아야 하는데요. 간단히 Key 를 받는 과정을 보도록 하겠습니다.

Site 주소는 http://www.microsoft.com/maps/developers/web.aspx 입니다.

Get Account 를 클릭합니다.
Capture 가 안되었지만 Windows Live ID Passport 인증을 한번 묻습니다.
여러분들 모두 MSN Live Messenger 사용하시죠? 입력하시고 Login 이 완료되면 다음 화면으로 넘어갑니다.

새롭게 받을 거니까요...
New User 쪽의 Create 를 클릭합니다.

* 표시가 되어 있는 란에 간단하게 입력합니다.
 

조금 기다리시면 Account ID 가 생성이 됩니다. 그럼 "Create or view Keys" 를 Click 합니다.

* 표시가 되어 있는 란에 간단히 입력하시고요... "Submit" 버튼을 Click 합니다.
또 잠시 기다립니다.


아랫쪽에 보시면 짜자잔.. Key 가 생성이 되었군요.
이 생성된 Key 를 다음에 진행될 Geolocation 예제 소스에 Key 를 입력하는 곳에 입력해 주십시요.

17-3. 예제.

예제를 살펴보겠습니다.
이 예제는 제 PC 에서 동작할 것입니다. 이전에 설명드렸듯이 PC 에서 진행하는 경우 아주 제한적입니다. 주로 서울시 시청이 많이 찍히는데요.  그 옆동네가 찍히기도 합니다. ^^;

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    margin: 0;
    height: 100%;
    background-color: #404040;
}
#map {
     position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 600px;
    margin-left: -400px;
    margin-top: -300px;
}
</style>

<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">

    var _map;

    function GetMap() {
        // Create a Bing map
        _map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "이곳에 Key를 넣습니다." });
        // Get the current position from the browser
        if (!navigator.geolocation)
            alert("This browser doesn't support geolocation");
        else
            navigator.geolocation.getCurrentPosition(onPositionReady, onError, { maximumAge: 0, timeout: 30000, enableHighAccuracy: true });
    };

    function onPositionReady(position) {
        // Apply the position to the map
        var location = new Microsoft.Maps.Location(position.coords.latitude, position.coords.longitude);
        _map.setView({ zoom: 18, center: location });
        // Add a pushpin to the map representing the current location
        var pin = new Microsoft.Maps.Pushpin(location);
        _map.entities.push(pin);
    }

    function onError(err) {
        switch (err.code) {
            case 0:
                alert("Unknown error");
                break;
            case 1:
                alert("The user said no!");
                break;
            case 2:
                alert("Location data unavailable");
                break;
            case 3:
                alert("Location request timed out");
                break;
        }

    }
</script>
</head>
<body onload="GetMap();">
<div id="map" />
</body>
</html>
(참조 : http://www.wintellect.com/CS/blogs/jprosise/archive/2011/03/27/making-web-apps-sizzle-with-bing-maps-and-html5-s-geolocation-api.aspx)

위 소스를 각 Browser 에서 실행시키면 먼저 사용자의 위치정보를 공유하겠느냐 라는 메세지 창을 띄워 Geolocation 사용에 대한 동의를 구한 후 화면을 띄우게 됩니다.

같은 Page를 띄우긴 했지만 다른곳이 나오죠? ㅋㅋ
PC 에서는 신경쓰지 마셔요...

Google Map 의 경우는 Bing Map 보다는 Key 를 입력할 필요없이 Test 가 가능하기때문에 조금은 쉬우리라 생각합니다. 구현방법은 약간 차이가 나겠지만요... 

간단하게라도 살펴보시니 어떠십니까? Geolocation 을 여러분의 Site 에 적용하고 싶은 생각이 드시나요?

회사 Web Site 에 살짜기? 몰래 올려서 테스트 해보시면 하루가 즐겁지 않을까효~~? 

위의 내용들은
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.


행복한 고수되십시요.


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ 


 
반응형
저작자표시 비영리 변경금지

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 20. File API  (2) 2011.06.30
[HTML 5] 19. SVG  (0) 2011.06.29
[HTML 5] 17. Web Socket  (1) 2011.06.25
[HTML 5] 16. Web Worker  (0) 2011.06.23
[HTML 5] 15. Web SQL Database  (0) 2011.06.21

안녕하십니까? ^^

이번엔 Web Socket 입니다.
이 녀석에 관심을 갖고 계신분이 많은 것으로 알고 있습니다. 

웹의 단점을 보완하고자 Ajax 가 등장을 했습니다만 언제나 DisConnected 인 상태인 웹으로써는완벽한? 실시간 웹을 구현하기에는 부족했습니다.
기존에 조금 부족한 Ajax 이외에 Flash, Flex, Silverlight 의 경우에는 Socket 을 지원하고 있으므로 실시간 웹을 구현할 수 있었습니다.

하지만 이젠 Flash, Flex, Silverlight 필요없이 "F5" 누를 필요도? 없이 Server 는 Client 에 갱신된 정보를 전달할 수 있습니다.

그 중심에는 Web Socket 이 있습니다.

이젠 Web Socket 은 웹을 변화 시킬 것이라 말씀드리고 싶습니다.

그 Web Socket 을 살펴보겠습니다.

16-1. Web Socket 환경 구성
Web Socket 구성은 여러분들도 짐작하시겠지만 Socket Server 를 구성해야겠지요.
뭐 간단히 Socket Server 만 구성하면 됩니다. ㅋㅋ

Client 는 Server 구성후에 Page 로 작성할테니까요...

Server 는 주로 Python 으로 작성되어 있는 코드들을 많이 보셨을 겁니다. 
제가 참고 하고 있는 서적도 Python 으로 작성되어 있는 Server 를 사용하고 있구요.

그래서 마구 뒤적뒤적거리다 C#으로 작성되어있는 Web Socket Server 를 찾아냈습니다. ㅋㅋㅋ (또 제것은 아니죠? ㅡㅡ')

그것은 Nugget 입니다. Codeplex 에서 받으실 수 있구요... (http://nugget.codeplex.com/ )
Socket 이 어떻게 돌아가는 지 한번 살펴 보실 수 있습니다.
Web Socket Server 에서 접속한 Client 들에게 Message 를 Push 하는 예제도 함께 포함되어 있는데요. 
Client 를 조금 수정해서 Server로 전송할 수있게 해 보았습니다. (별로 고친건 없습니다.)

16-2. 사용법
사용법도 간단합니다.

Web Socket 을 생성하는 구문은 다음과 같습니다.
var wsSocker = new WebSocket("ws://Web Socket Server URL");
WebSocket 생성시 Web Socket Server 의 URL 을 Parameter로 사용하며 Web Socket 프로토콜 "ws://" 을 사용합니다.

생성한 WebSocket 으로 send Method 를 사용하여 Message 를 전송합니다.
wsSocket.send("전송할 Message");

wsSocket interface 에는 다음과 같은 Event Handler 가 있습니다.
 Event Handler  설명
 onmessage  Server 로 Message를 전달 받을때
 onopen  Web Socket Server 가 열릴 때 
 onclose  Web Socket Server 가 닫힐 때

다음과 같이 사용합니다.
wsSocket.onmessage = function() {
...
};

wsSocket.onopen = function() {
...
};

wsSocket.onclose = function() {
...
};

16-3. 예제
위 내용을 바탕으로한 예제를 살펴보기로 하겠습니다.


nugget Sample 예제 압축을 푸시면 위와 같은 파일들이 있습니다.
두 예제중 첫번째 예제이구요...

오른쪽의 Server.cs, client.html 파일을 살펴볼 것입니다.

Server.cs

    1 using System;

    2 using System.Collections.Generic;

    3 using System.Linq;

    4 using System.Text;

    5 using Nugget;

    6 

    7 namespace ConsoleApp

    8 {

    9 

   10     class ConsoleAppSocket : WebSocket

   11     {

   12 

   13         public override void Incoming(string data)

   14         {

   15             Console.WriteLine(data);

   16         }

   17 

   18         public override void Disconnected()

   19         {

   20             Console.WriteLine("--- disconnected ---");

   21         }

   22 

   23         public override void Connected(ClientHandshake handshake)

   24         {

   25             Console.WriteLine("--- connected --- ");

   26         }

   27     }

   28 

   29 

   30     class Server

   31     {

   32         static void Main(string[] args)

   33         {

   34 

   35             var nugget = new WebSocketServer(8181, "null", "ws://localhost:8181");

   36 

   37             nugget.RegisterHandler<ConsoleAppSocket>("/consoleappsample");

   38 

   39             Nugget.Log.Level = LogLevel.None;

   40 

   41             nugget.Start();

   42 

   43             Console.WriteLine("Server started, open client.html in a websocket-enabled browser\n");

   44             Console.WriteLine("Once the connection is established\nanything you type into this console, will be send to the browser");

   45 

   46             var input = Console.ReadLine();

   47             while (input != "exit")

   48             {

   49                 nugget.SendToAll(input);               

   50                 input = Console.ReadLine();

   51             }

   52 

   53         }

   54     }

   55 }

   56 

Line 35, 37 의 내용을 보면 Web Socket Server 에서 8181 Port 에 consoleappsample 이라는 곳을 통해서 Web Socket 을 Start 했구요.
아래는 Client Source 인데요. 

client.html

    1 <!DOCTYPE lang="ko">

    2 <html>

    3     <head>

    4         <title>websocket client</title>

    5     </head>

    6     <body>

    7         <input type="text" name="txtinput" id="txtinput">

    8         <button onclick="Send()" name="btnSend" id="btnSend">Send</button><br />

    9         <pre id="incomming"></pre>

   10 

   11                 <script type="text/javascript">

   12 

   13                     var inc = document.getElementById('incomming');

   14                     inc.innerHTML += "connecting to server ..<br/>";

   15 

   16                     var ws = new WebSocket('ws://localhost:8181/consoleappsample');

   17 

   18                     ws.onmessage = function (evt) {

   19                         inc.innerHTML += evt.data + '<br/>';

   20                     };

   21 

   22                     ws.onopen = function () {

   23                         inc.innerHTML += '.. connection open<br/>';

   24                     };

   25 

   26                     ws.onclose = function () {

   27                         inc.innerHTML += '.. connection closed<br/>';

   28                     };

   29 

   30                     function Send() {

   31                         var strMessage = document.getElementById("txtinput").value;

   32 

   33                         var isSend = ws.send(strMessage);

   34 

   35                         if (isSend)

   36                             inc.innerHTML += strMessage + '<br/>';

   37                         else

   38                             inc.innerHTML += 'Send Error<br/>';

   39 

   40                     };

   41         </script>

   42     </body>

   43 </html>



16 Line 을 보면 WebSocket 을 생성하고 18, 22, 26 Line 에서 onmessage, onopen, onclose 이벤트가 도착했을 때 작업을 작성했습니다.

그리고 30 line 의 Send 함수는 제가 추가해서 넣어본건데요
위 코드만으로는 Server 가 Client 는 무조건 Sever 에서 보낸 데이터를 처리하도록만 되어 있는데요.
꺼꾸로 보낸는 동작을 넣어 봤습니다.

아래는 동작시키는 모습을 Capture 한 것입니다.

붉은 색으로 줄을 친 부분은 곧바로 명령창에서 입력한 것입니다.
입력하고 Enter 를 치면 내용이 전송됩니다.
그럼 그 아래 열린 두개의 Browser 에서 그 내용을 받게 되지요.
각 Client 에서 보내는 내용은 Server 에만 보내도록 했습니다.



다른 Web Browser 에서는 제대로 동작을 하지 않습니다. Test 를 해보시려면 Chrome 에서 Test 해보시기 바랍니다. 제 Chrome 버전은 12.0.742.100 입니다.

html5Demos Site 에서 보시면 Safari 도 지원을 한다고 나오는데 Test 결과 제대로 작동을 안했습니다.



다른 예제를 한번 살펴보겠습니다.

아래의 Capture 이미지는 위 html5Demos Site 에 Link 되어있는 예제입니다. 단순한 Chatting Page 입니다.



http://bohuco.net/labs/ 에도 Web Socket 에 관한 PHP 예제가 있습니다. 한번 살펴보시기 바랍니다.

지금까지 Web Socket 에 관해 간단히 살펴보았습니다.

제가 소개한 내용들이 Web Socket 을 이해하는데 조금이나마 도움이 되었는지 모르겠습니다.
이젠 web page 상에 메신저를 구현한다거나 쇼핑몰 운영자와 소비자 사이에서 그림을 함께 보며 마우스가 가리키는 곳에 대해 설명한다거나 하는 일을 HTML 만으로 구현할 수 있을 것입니다.

Web Socket 에 관한 내용으로 Socket Protocol 에 대한 사항이 있습니다.
그 사항은 Download 받으신 Nugget 의 두번째 예제(02-SubProtocol) 을 살펴보시고 자세한 내용은 http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-09 을 참고해하시기 바랍니다.

위의 내용들은
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.


그럼 행복한 고수되셔요...


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
반응형
저작자표시 비영리 변경금지

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 19. SVG  (0) 2011.06.29
[HTML 5] 18. Geolocation API  (0) 2011.06.27
[HTML 5] 16. Web Worker  (0) 2011.06.23
[HTML 5] 15. Web SQL Database  (0) 2011.06.21
[HTML 5] 14. Web Storage  (0) 2011.06.21

다음의 내용과 소스는
혁명을 꿈꾸다 HTML5 & API 입문
앞서가는 디자이너와 퍼블리셔를 위한 HTML5 & CSS
을 참고 하였습니다.


이번엔 Web Worker 에 대해서 살펴보려하는데요...
글을 쓰는데 쫌 시간이 걸렸읍니다. ㅋㅋ

JavaScript 가 저를 괴롭혀서... 간단한 Script 인데도 말이죠... ^^;

Web Worker !!!
이젠 Web Browser 에서도 Desktop Application 에서 처럼 Multitasking? 을 할 수 있게 되었습니다.
완전히 Desktop Application 에서 지원하는 Multitasking 과 완전히 같지는 않지만 Web Browser 의 UI Thread 와 완전히 분리된  Background 에서 동작합니다.

기존에는 Javascript 가 오랜 계산을 해야 할 경우 그 계산을 마칠때까지 사용자는 기다려야 했지요.
하지만, 이제 Web Worker 를 사용하면 Javascript 의 오랜 계산에도 사용자는 아무런? 버벅거림도, 기다림도 없이 Web Application 을 이용할 수 있습니다.


15-1. 사용법
Web Worker 를 사용하기 위해서는 먼저 Web Worker 가 호출하여 사용하게될 Javascript 파일이 외부에 필요하게 됩니다.

그리고 사용은 그리 어렵지 않습니다.

var worker = new Worker("외부 Javascript 파일명")

차아~~암. 쉽쬬~~~잉? ㅋㅋㅋ

그리고, 중요한 함수인 postMessage() 와 onmessage . 두 녀석을 기억하셔야 합니다.

이 두녀석은 UI Thread 와 BackGround 사이에서 통신을 하게 되는데요.   
기억하실런지 모르겠지만 전 글에서 이야기 했던 Communication API 와 이제 곧 이야기를 하게될 Web Socket 에서 공통으로 사용하는 개념이지요.
postMessage 로 Message 를 던지면 먼저 등록해 놓은 onmessage Event handler 로 Message 를 받지요.
그리고 다시 posetMessage 로 결과를 되돌려 주게 되고요. onmessage EventHandler로 결과를 받습니다. 
주저리주저리 말보다는 한 줄 코드가 더... ^^;

 먼저 이야기 했듯이 웹페이지 하나와 외부 Javascript File 을 하나 작성할 것입니다.

Javascript 파일을 먼저 구현하겠습니다.
(worker.js)

onmessage = function(evt) {
    var num = evt.data;
    var result = 0;
    for(var i = 1; i <= num; i++)
    {
        result += i;
    }
    postMessage(result);
};

(발췌/수정 : 혁명을 꿈꾸다 HTML5 & API 입문)


(WebWorker.html)

<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>Web Worker 예제</title>
 </head>
 <body>
        <input type="text" id="num">
        <button onclick="calculate()">계산</button>
        <button onclick="stopCalculate()">중지</button><br/>
        <p id="sum">Sum :</p>
 </body>
        <script type="text/javascript">     
      
                var worker;

                function calculate() {

                    if(worker)  {                 
                        worker.terminate();            
                    };

                    var num = document.getElementById("num").value;

                    worker = new Worker("worker.js");
                    
                    worker.onmessage = function(evt) {
                         document.getElementById("sum").innerHTML = "Sum : " + evt.data;
                    };  
                  
                    worker.onerror=function(evt) {
                        alert("Error : " + evt.message + " (" + evt.filename + ":" + evt.lineno + ")");
                    };

                    worker.postMessage(num);

                }

                function stopCalculate() {
                    if(worker)  {                 
                        worker.terminate();          
                    };
                    alert("Worker is Stopped");
                }
        </script>
</html>

(발췌/수정 : 혁명을 꿈꾸다 HTML5 & API 입문)


실행시킨 모습입니다.


internet explorer 9.0 에서는 작동을 하지 않았습니다. ㅡㅡ'
Opera 도 동작은 하는 듯 보였지만 worker instance 는생성을 했지만
외부 Javascript 파일쪽에서 Script error 가 발생을 하네요...
이건 좀 찾아 봐야할 듯합니다.




위 예제는 간단한 듯하여 예제 하나를 더 소개합니다.

아래 예제는 page 와 worker 간에 계속 계산값을 던집니다.
일을 계속 시키고 싶으셔도 빨리 세워주셔요...버버거림을 느끼실수도... ㅋㅋ

(cals.js)

onmessage = function(evt) {
    for (var i = evt.data; i < 1000000; i++)
    {
        postMessage(i);
    };
};
(webWorker.html)
<!DOCTYPE html>
<html lang="ko">
 <head>
        <meta charset="utf-8" />
  <title>Web Worker 예제</title>
 </head>
 <body>
        <p>
            <input id="worker_work" type="button" value="Work!!!">
            <input id="worker_work_stop" type="button" value="Stop!!!">
        </p>
        <p id="worker_say">Say</p>
        <textarea rows="4" cols="60">딴짓할 수 있어요.</textarea>
 </body>
        <script type="text/javascript">    
       
                var worker;

                function makeWorker() {               
                    worker = new Worker("cal.js");
                };

                document.getElementById("worker_work").onclick = function() {               
                    makeWorker();

                    worker.postMessage(0);

                    worker.onmessage = function(evt) {
                        document.getElementById("worker_say").innerHTML=evt.data;
                    };

                    document.getElementById("worker_work_stop").onclick = function() {
                        if(worker) {
                            worker.terminate();
                            alert("Worker. Stop!!! ");
                        };
                    };
                    worker.onerror=function(evt) {
                        document.getElementById("worker_say").innerHTML = "Error : " + evt.message + " (" + evt.filename + ":" + evt.lineno + ")";
                    };
                };

        </script>
</html>

간략하게 Web Worker 를 살펴보았습니다.
이제 여러분의 Web Application 에서도 작은 머슴하나 키워보시지 않으시겠습니까? ㅋㅋ
작은 머슴이 기대이하로 버벅거릴 수 있을지도 모릅니다. 잘 다독여서 잘 키우시길 바랍니다. ㅋㅋㅋ


행복한 고수되셔요... 


woojja ))*
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\


반응형
저작자표시 비영리 변경금지

'Web > HTML 5' 카테고리의 다른 글

[HTML 5] 18. Geolocation API  (0) 2011.06.27
[HTML 5] 17. Web Socket  (1) 2011.06.25
[HTML 5] 15. Web SQL Database  (0) 2011.06.21
[HTML 5] 14. Web Storage  (0) 2011.06.21
[HTML 5] 13. Communication API  (0) 2011.06.19

+ Recent posts

티스토리툴바