'ITWeb/개발일반'에 해당되는 글 489건

  1. 2011.11.03 [PDF] 실전 HTML5 가이드.
  2. 2011.11.02 HTML5 - WebSocket 3
  3. 2011.10.31 모바일 광고 관련 자료 - from slideshare.net
  4. 2011.10.27 모바일 웹 개발 - Emulator/SDK ...
  5. 2011.10.26 iframe resize 시 layer 형태로 조정하기.
  6. 2011.10.26 모바일 리치미디어 광고용 Javascript SDK.
  7. 2011.10.25 구글 모바일 검색결과 예제 - PC 에서 확인해보기
  8. 2011.10.25 Android phone 에서의 navigator properties
  9. 2011.10.25 window.postMessage 알아보기.
  10. 2011.10.24 모바일 웹 : navigator.geolocation 이용하기.

[PDF] 실전 HTML5 가이드.

ITWeb/개발일반 2011. 11. 3. 14:11

canvas 관련 자료 찾다가.. PDF 파일 보이길래.. 걍 스크랩 합니다.

[다운로드 URL]
http://html5.creation.net/html5-guide.pdf 

사이트 URL 을 보니 윤석찬님 서버에 올라가 있는 파일 인가보내요.
작성자는 윤석찬, 신현석, 정찬명, 경준호, 권정혁 이렇게 다섯분 입니다. 
html5-guide.pdf
 

[참고사이트]
. PDF 문서 31쪽에 있는 넘 밖으로 뽑았습니다.

:

HTML5 - WebSocket

ITWeb/개발일반 2011. 11. 2. 09:02
[참고사이트]
http://www.slideshare.net/zanylove/html5-websocket-5094806
http://www.slideshare.net/trustinlee/websocket
http://dev.w3.org/html5/websockets/
http://jwebsocket.org
http://code.google.com/p/phpwebsocket/


[Client]
. HTML5 WebSocket API 를 이용해서 작성

[Server]
. 별도의 Server 프로그램 작성 필요

phpwebsocket 으로 테스트 결과 정상적으로 동작함.
기본 원리는 브라우저에서 client port 생성하고 server port 로 접속 여러개의 브라우저 실행 시 브라우저 별로 port 가 다르게 뜨기 때문에 port 충돌 현상은 없음.
netstat -n 으로 확인 하면 됩니다.
2011.11.02 현재 safari 에서 정상동작 되며, 크롬에서는 객체 지원은 하나 동작하지는 않음.( phpwebsocket 으로 테스트 )

client/server 작성 코드들은 위 링크에 다 나와 있기 때문에 별도 작성은 하지 않습니다.
w3c 에 있는 interface 만.. 스크랩 합니다.

[Constructor(DOMString url, optional DOMString protocols),
 Constructor(DOMString url, optional DOMString[] protocols)]
interface WebSocket : EventTarget {
  readonly attribute DOMString url;

  // ready state
  const unsigned short CONNECTING = 0;
  const unsigned short OPEN = 1;
  const unsigned short CLOSING = 2;
  const unsigned short CLOSED = 3;
  readonly attribute unsigned short readyState;
  readonly attribute unsigned long bufferedAmount;

  // networking
  [TreatNonCallableAsNull] attribute Function? onopen;
  [TreatNonCallableAsNull] attribute Function? onerror;
  [TreatNonCallableAsNull] attribute Function? onclose;
  readonly attribute DOMString extensions;
  readonly attribute DOMString protocol;
  void close([Clamp] optional unsigned short code, optional DOMString reason);

  // messaging
  [TreatNonCallableAsNull] attribute Function? onmessage;
           attribute DOMString binaryType;
  void send(DOMString data);
  void send(ArrayBuffer data);
  void send(Blob data);
};




chrome 에서 왜 안되는지 확인을 해본 결과....
- http://www.codeproject.com/KB/HTML/Web-Socket-in-Essence.aspx
- http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-09
결국 phpwebsocket 의 code base의 protocol 과 latest protocol 에 차이가 있어서였다..ㅡ.ㅡ;;
※ Protocol 전문 참조 : http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-09#page-6

WebSocket request/response in the latest draft-ietf-hybi-thewebsocketprotocol-09:

Request
GET /demo HTTP/1.1
Host: example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: V2ViU29ja2V0IHJvY2tzIQ==
Sec-WebSocket-Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 8

Response
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: VAuGgaNDB/reVQpGfDF8KXeZx5o=
Sec-WebSocket-Protocol: chat


[Sec-WebSocket-Accept Handshake String 함수 - phpwebsocket 용]

function getComputeWebSocketHandshakeSecurityHash09 ($strKey) {

    $seedKey = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';

    $secWebSocketAccept = $strKey . $seedKey;

    $secWebSocketAccept = base64_encode(sha1($secWebSocketAccept, true));


    return $secWebSocketAccept;

}

 

- phpwebsocket 소스 중 server.php 에서 dohandshake 와 getheaders 함수를 수정해 줘야 합니다.

[getheaders 함수]
 if(preg_match("/Sec-WebSocket-Key: (.*)\r\n/",$req,$match)){ $key=$match[1]; } // 추가 코드
 return array($r,$h,$o,$key,$key1,$key2,$data); // $key 추가 됨

[dohandshake 함수]
 list($resource,$host,$origin,$strKey, $strkey1,$strkey2,$data) = getheaders($buffer); // $strKey 추가 됨
 if ($spaces1 == 0 || $spaces2 == 0 || $numkey1 % $spaces1 != 0 || $numkey2 % $spaces2 != 0) {
 ....
 // -->  이 부분에서 disconnect 와 return false; 가 되기 때문에 close 됨 그래서 코드 변경해야 함. protocol 버전에 맞게 코드 전체를 다시 작성 하면 되나 귀찮아서.. 그냥.. 내부에 hard coding 함. ^^;
     $upgrade  = "HTTP/1.1 101 Switching Protocols\r\n" .

                "Upgrade: websocket\r\n" .

                "Connection: Upgrade\r\n" .

                "Sec-WebSocket-Accept: " . getComputeWebSocketHandshakeSecurityHash09($strKey) . "\r\n" .

                "\r\n";

    socket_write($user->socket,$upgrade.chr(0),strlen($upgrade.chr(0)));

    $user->handshake=true;

    return true;

 } 

암튼 이렇게 해서 chrome 최신 버전에서랑 safari 에서 정상 동작 확인 끝. 
※ 추가, chrome 최신 버전(protocol 09)에서 websocket 사용시 send message 가 깨지는 현상이 있는 듯 함. 결국 최신 버전으로 테스트는 connection 까지 가능 하나 bidirectional sending 은 safari 에서 이전 protocol 로 테스트 하는게 아직까지는 정신 건강에 좋은 것 같내요.
:

모바일 광고 관련 자료 - from slideshare.net

ITWeb/개발일반 2011. 10. 31. 17:07

그냥 필요한 자료 찾다가 얻어 걸린 링크 입니다.
http://www.slideshare.net/germweapon/dmc-media107

모바일 광고 관련 괜찮은 자료가 있는 것 같아 북마킹 합니다.
:

모바일 웹 개발 - Emulator/SDK ...

ITWeb/개발일반 2011. 10. 27. 11:26
[대표참고사이트]
http://www.mobilexweb.com/emulators

위 사이트 들어가서 해당 페이지에 emulator 들을 다운로드 받아 개발 하면 됩니다.

[첨부파일]
그냥 구글링 하다 걸린 PDF

8-9.HTML5모바일웹개발.pdf

 

모바일웹개발전략.pdf

:

iframe resize 시 layer 형태로 조정하기.

ITWeb/개발일반 2011. 10. 26. 14:40
iframe 을 포함 하고 있는 부모창의 컨텐츠가 밀리지 않고 iframe 의 size 를 조정하기 위한 방법을 설명 한다.
(결국 div 처럼 layered 형태로 표현이 가능 함.)

쉽다!

<iframe style="position:absolute; ...." ....></iframe>

 
빨간색의 bold 부분만 넣어 주면 됩니다.

아래는 샘플 코드 입니다.

<iframe name="viewFrame" id="viewFrame" src="view.html" frameborder="0"     scrolling="no" style="position: absolute; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-to    p: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; background-color: transparent; display: block; left: 0px; top: 0p    x; width: 320px; height: 250px;" ></iframe>

 
:

모바일 리치미디어 광고용 Javascript SDK.

ITWeb/개발일반 2011. 10. 26. 13:03

http://code.google.com/p/ormma/wiki/ORMMA_JavaScript

기존 mraid 이런게 있었는데.. ormma 라는 것도 있었군요.
테스트가 필요한 시점 이내요..  
:

구글 모바일 검색결과 예제 - PC 에서 확인해보기

ITWeb/개발일반 2011. 10. 25. 16:35
http://www.google.com/m/places?source=mog&gl=kr&client=ms-android-skt-kr#ipd:mode=pp&cid=16301766467065567844&q=%EC%9D%8C%EC%8B%9D%EC%A0%90&start=0

이걸 그냥 소스보기 해서 보면.. 눈 돌아 갑니다.
ㅋ chrome 에서 개발자도구(F12 를 누르세요.)를 이용해서 보세요.
scramble 된 코드들이 그래도 나름 잘 정돈 되어서 보입니다. 
:

Android phone 에서의 navigator properties

ITWeb/개발일반 2011. 10. 25. 11:45
[참고 사이트]
http://www.w3.org/Mobile/Specifications
http://www.quirksmode.org/js/detect.html
http://www.mobilexweb.com/blog/android-froyo-html5-accelerometer-flash-player
http://www.quirksmode.org/m/tests/browserdetect.html

일반 PC browser 와 Mobile browser 의 navigator property/attribute 가 다릅니다.
그래서 걍 list 정리해 봅니다. (Android WebView 브라우저에서 확인함)

navigator

.language
.product
.mimeTypes
.appVersion : 5.0 (Linux; U; Android2.3.5; en-ca; SGH-I727R Build/GINGERBREAD) AppleWebKit/533.1(KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
.plugins
.onLine
.connection
.platform
.vendor
.appCodeName
.geolocation
.cookieEnabled
.appName
.productSub
.userAgent : Mozilla/5.0 (Linux; U; Android2.3.5; en-ca; SGH-I727R Build/GINGERBREAD) AppleWebKit/533.1(KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
.vendorSub
.javaEnabled
.isApplicationInstalled
.getStorageUpdates
.registerProtocolHandler
.registerContentHandler 



:

window.postMessage 알아보기.

ITWeb/개발일반 2011. 10. 25. 10:01
[참고 URL]
https://developer.mozilla.org/en/DOM/window.postMessage
http://www.whatwg.org/specs/web-apps/current-work/multipage/web-messaging.html#web-messaging


window.postMessage 는 cross domain 간 데이터를 주고 받는데 아주 유용한 기법을 제공 합니다.
자세한 spec 은.. 위 URL 참고 하시면 됩니다.


http://192.168.1.1/siteA.html

0. siteB 를 allow 할 allowOrigin 정의를 합니다.
var allowOrigin = "http://192.168.2.1";

1. siteB 에서 전송한 postMessage 이벤트를 catch 하기 위해서 event 등록을 합니다.
window.addEventListener("message", postMessageController, true); 또는
window.attachEvent("onmesage", postMessageController);

2. siteB 의 postMessage 이벤트를 catch 해서 실행 시킬 postMessageController 함수 작성을 합니다.
function postMessageController(e) {
    if ( e.origin === allowOrigin ) {
        // 실행 시킬 코드를 작성 하세요.
        alert(e.data); // e.data 는 siteB 에서 전달 받은 message 입니다.
    }
}

http://192.168.2.1/siteB.html

0. siteA 와 통신 하기 위한 allowOrigin 을 정의 합니다. (allowOrigin 은 그냥 임의 정의한 변수명 입니다. 바꾸셔도 되요.)
var allowOrigin = "http://192.168.1.1"; 

1. siteA 로 전달할 message 용 함수를 작성 합니다.
function sendMessage () {
    window.parent.postMessage("Hi! Good to see you.", allowOrigin);
}
이 함수를 실행 시키면 siteA 의 postMessageController 가 동작 하게 됩니다. 



이 두개 파일의 구조는 siteA.html 에 iframe 으로 siteB.html 을 embedded 시켜놓은 구조 입니다.

<html>

<head>

<title>siteA.html</title>

</head>

<body style="background:#000000;">

<iframe name="siteB" id="siteB" src="http://192.168.2.1/siteB.html" border="0" frameborder="0" width="320" height="48" scrolling="no"></iframe>

</body>

</html>



위의 샘플 pseudo code 는 siteB 에서 siteA 로 메시지를 전달 하는 예 입니다.
그렇기 때문에 siteA 에서 siteB 로 메시지를 전달하고 싶을 경우는 siteB 에 event 등록해 주시고 siteA 에서 iframe 의 window 객체를 얻어서 postMessage 를 실행 시키시면 됩니다.


 
:

모바일 웹 : navigator.geolocation 이용하기.

ITWeb/개발일반 2011. 10. 24. 10:22
참고 URL : http://dev.w3.org/geo/api/spec-source.html
지원 브라우저는 safari, firefox, chrome 에서 지원됨.

<html>

<head>

<script>

function successCallback(position) {

alert(position.coords.latitude + " : " + position.coords.longitude);

}


function errorCallback(error) {

alert(error.message);

}


function load(){ 

if ( navigator.geolocation ) {

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

} else {

alert("geolocation not supported");

}

}

</script>

</head>

<body onload="load()">

</body>

</html>



크롬에서 로컬 파일 실행 시켜서 테스트 했더니 주소창에 "위치추적이 차단 되었습니다." 라고 아이콘 뜨고 안됩니다.
서버에 올려서 테스트 하시면 "허용/차단" 버튼 나오면서 정상 동작 확인 가능 합니다.

successCallback, errorCallback 함수 등에 대해서는 
기본 위의 참고URL 가셔서 spec 문서 한번 읽어 보시면 쉽게 이해 되실 거예요.

:
◀ PREV : [1] : [···] : [37] : [38] : [39] : [40] : [41] : [42] : [43] : [···] : [49] : NEXT ▶

티스토리툴바