'ITWeb/개발일반' 카테고리의 글 목록 (40 Page)

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

jQuery.fracs

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

[사이트URL]
. http://larsjung.de/fracs/

현재의 viewport 를 축소해서 보여줄 수 있습니다.
역시 canvas 자료 찾다.. 얻어 걸린 링크로 스크랩 합니다..^^;

에혀.. 공부 좀 해야 하는데..

[PDF] 실전 HTML5 가이드.

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

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

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

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

html5-guide.pdf

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

[참고사이트]
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 형태로 표현이 가능 함.)

쉽다!

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

아래는 샘플 코드 입니다.

모바일 리치미디어 광고용 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>

</html>

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

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

jjeong