일본 사람이 만든 websocket, XHR 스트 페이지.
http://komasshu.com/ws/mecab/wakachi.html


pipeline으로 websocket구현 : 112ms
XML Http request : 9,937ms

헉!


Posted by 김용환 '김용환'

댓글을 달아 주세요


2011.7.12월에 작성

다음 2가지가 Retired가 되었는데요. 관련해서 자료를 찾아보았습니다.

Programmable HTTP Caching and Serving
Web SQL Database


-------------------

첫번째..
Programmable HTTP Caching and Serving 스펙의 retired 된것을 살펴보니. 활동이 없어서 이렇게 되었군요..^^;;
http://www.w3.org/2010/11/01-webapps-minutes.html#item05


두번째..
Web SQL Database 스펙(http://www.w3.org/TR/webdatabase/)이 철회(retired)가 된 것은 작년 말 쯤입니다.

 

구글 개발자 혼자서 이 스펙을 리드했지만 결국은 실패했는데요. 그 이유는 2가지가 있습니다.

첫번째 브라우저 개발사의 동의를 얻지 못했습니다.
두번째  자체적인 SQLite를 탑재하고 있는데, SQLite만 가지고는 서로 합의할 수 있는 접점을 찾기 어려웠다고 합니다.

 

두번째 관련 정보에 대해서 약간 상세하게 설명드리겠습니다. 모질라 개발자가 링크가 건 블로그를 가지고 말씀드리겠습니다. ( http://blog.vlad1.com/2009/04/06/html5-web-storage-and-sql/)

즉, SQLite는 SQL의 변형(variant)을 구현하고 컬럼에서 데이터의 타입에 따라서 편차가 많이 생길 수 있습니다.

(SQLite implements a variant of SQL, with a number of deviations from other SQL engines, especially in terms of the types of data that can be placed in columns.) 이런 부분들이 SQL 표준과 다르기 때문에 심각한 호환성(interop)이 발생될 수 있습니다. SQLite가 표준이 되면, SQLite 가 호환이 안되게 변화를 주지 않는다는 보장이 없습니다. 제품이 아닌 표준을 기준으로 하려다 보니 그렇게 한 것은 아니었을까 생각을 해봅니다.

표준 문서를 보면 SQLite 3.6.19를 기준으로 했지요..

 

 

그래서, SQL 보다는 하위 레벨인 Indexed DataBase (http://www.w3.org/TR/IndexedDB/) 에서는 표준이 잘 되고 있습니다.

MS와 Google이 협력 해서 B-tree 기반의 indexed DB 로 가는 것을 목표로 하고 있습니다. 재미있는 것은 CouchDB-style의  API 가 개발되고 있지요.

구현된 코드는 다음과 같습니다.  http://code.google.com/p/indexeddb/

 

Web SQL Database 스펙은 retired되었지만 API는 IndexedDB에 영향을 서로 많이 주었습니다.  거의 똑같이 쓰면 되네요..
http://hacks.mozilla.org/2010/06/comparing-indexeddb-and-webdatabase/

 

반면 비슷하게 생긴 녀석으로 Web Storage 라는 스펙이 있습니다. 로컬 스토리지와 세션 스토리지로 사용되는데..

사실 Web Storage를 실제 구현하는 기술이 SQLite입니다. Web SQL Database 나 Web Storage의 하위 기반 기술은 SQLite를 쓰는 것이라 Web SQL Database를 retired 되어도 web storage api가 있으니, 이거 쓰면 될 것 같습니다.

- getItem/setItem, removeItem, clear 함수밖에 없네요.  깔끔하군요..

 

 

Posted by 김용환 '김용환'

댓글을 달아 주세요



KIG WG 7차 회의(2011.7.12)를 다녀와서 각 그룹장들이 소개한 HTML5 관련 웹 싸이트 공유.

 1. 템플릿 몬스터 (templateMonster.com)

HTML5 템플릿으로 장사를 하고 있다.  http://www.templatemonster.com/category/html-5/

 

 

 

 

2. Clearboth 웹 싸이트 (http://www.clearboth.org/)

웹(UI) 관련한 좋은 정보를 계속 전달하고 하는 싸이트. 기획/디자인/개발/사용성,접근성 관점에서 본 보편적인 웹 공유 공간

 

HTML5 표준 문서를 표준화

http://www.clearboth.org/category/web_standards_documents/

 

 

3. HTML5에 대해서 알아야 할 20가지 - 구글

http://www.20thingsilearned.com/en-US

간단하게 보는 브라우져와 웹에 대한 이야기인데, HTML5로 만들어짐

 

 

 

4. paper.js

http://paperjs.org

paper.js는 오픈 소스 vector graphics script framework

canvas(2d)만을 이용해서 vector를 구현. 애니메이션 효과에 좋은 기대.

  

 

 

5. Raphael

http://raphaeljs.com/

W3C의 SVG Vector 그래픽 lib.   Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+ 이상이면 사용 가능.

SPEC만 보고 나서 아래와 같이 그릴려면 엄청 복잡하지만, 라파엘을 쓰면 쉬움

실제 몇개의 외국의 신문사에서는 라파엘 js를 사용해서 서비스 적용하고 있음.. 아주 깔끔해서 좋음.

 

 

 

 

6. Google Body

http://bodybrowser.googlelabs.com/

WegGL 에 대한 대표적인 싸이트

 

 

 

 

 

7. glge (http://www.glge.org/)

webGL 을 쉽게 사용할 수 있는 js lib. OPENGL Es2 api이용가능

 

아래 데모는 짱.
http://www.glge.org/demos/md2demo/

 

 

 

8. html5 데모 및 코딩 해보기

샘플도 있고, 직접 코딩도 해보고, 데모하면서 확인

http://www.html5rocks.com/en/

http://html5demos.com/

 

 

Posted by 김용환 '김용환'

댓글을 달아 주세요



(우선 요즘 웹상에서 돌아다니고 있는 HTML 5 Guide-2005년도 판 pdf을 첨부파일로 해서 올립니다.)

 

HTML5 Video 관련해서 재미있는 자료가 있어서 소개드리고자 합니다.

 

1. HTML 5 동영상

유튜브에는 HTML 5 동영상 플레이어(베타)가 있습니다. https://www.youtube.com/html5

이 싸이트를 통해서 H.264 동영상 및 WebM 형식을 지원합니다.

 

HTML5 연동 데모가 있으니. IE 로 동영상 보실분은 아래 링크 보시면 됩니다.

http://vimeo.com/4882744

 

 

2. HTML 5 비디오 태그

HTML5의 비디오 태그는 다음과 같습니다.

<video src="movie.ogg" controls="controls">
your browser does not support the video tag
</video>

 

3. WebM & H.264

WebM Open Video Playback in HTML5라는 Google IO Session이 있습니다.  (주석 1 참조) 동영상을 보시면 재미있어요~

 

WebM이라는 비디오 포맷을 소개한 내용입니다.  구글이 HTML5 Video 태그에서 쓰일 수 있도록 브라우져 업체들에게 contribution하였습니다. 애플의 사파리를 제외하고는 대부분의 브라우져에서 지원합니다. (첨부 구글 IO.pdf 와 주석 8참조) 

WebM Project(www.webmproject.org) 에서는 인코딩/디코딩 Tool과 SDK를 제공하고 있습니다. (주석 6 참조) 

 

구글이 올해 2월에 On2 라는 회사를 인수하였고, 그 회사에서 만든 codec인 WebM을 전면으로 앞세웠습니다. WebM은 BSD License 기반의 오픈소스입니다.  그리고, 비디오는 V8 이라는 이름으로, 오디오는 Vorbis라는 포맷을 사용합니다 .

또한 알고리즘은  matroska 기반(http://www.matroska.org/ ; 오픈 소스)입니다. (주석 2 참조)

DVD 동영상을 동영상 파일로 만들어주는 유명한 mkv (matroska multimedia container) 확장자 영화들이 바로 matroska와 연관있는 파일들이죠.. (주석 3 참조) ㅎㅎ

 

사실 이런 오픈 소스 코덱 운동의 주범은 사실은 MPEG 4 표준을 만들었던 Vendor들의 로얄티 주장입니다. MPEG에 엄청나게 많은 분들이 특허를 걸어둔 까닭에 많은 분들이 약간 힘들었습니다. (프리미어 쓰셨던 분들은 아실껍니다.공짜가 너무 없었죠.)  HTML 5를 위한 코덱이 한동안 H.264의 분위기에서 무료가 아닌 까닭에 여러 말이 있었다고 합니다.  돈이 들어가지 않고, 훌륭한 오픈소스 코덱에 대한 Need가 있었죠. WebM이 발표되고 나서 Firefox는 아주 격찬을 하였죠.  (주석 5 참조)

 

8월 말에 MPEG 라이선스를 가지고 있는 MPEG LA 에서는 H.264를 2016년까지만 무료로 하고, 그 이후부터는 돈을 받겠다는 로얄티 정책에서 Free로 선회하였습니다. 아마도 이런 HTML 5 에서의 구글에 대한 위협감이 로얄티를 공짜로 만들게 한 것이 아닌가 기자들은 보고 있습니다. (하지만 여전히 임베디드쪽에서는 로얄티를 추구하고 있습니다. ) (주석 4 참조)


 참고로 H.264 특허수로 보면, 애플은 특허 1개,  삼성은 57개, LG는 198개를 가지고 있습니다.  파라소니는 삼
성, LG 의 특허 개수보다 더 많이 가지고 있습니다..  (주석 7 참조)

 

4. WebM에 대한 개인적인 생각

1. HTML5가 점점 구체화되어가서 좋다. WebM 멋져~

2. 구글없인 못사는 세상 될꺼 같아~

 

 

 

주석 1) 구글 IO 동영상

http://code.google.com/intl/ko-KR/events/io/2010/sessions/webm-open-video-playback-html5.html

 

주석 2) WebM format

http://blog.webmproject.org/2010/05/introducing-webm-open-web-media-project.html

 

주석 3) Matroska

http://ko.wikipedia.org/wiki/%EB%A7%88%ED%8A%B8%EB%A3%8C%EC%8B%9C%EC%B9%B4_(%ED%8F%AC%EB%A7%B7)

 

주석 4) MPEG LA to offer free H.264 licences

http://www.bit-tech.net/news/bits/2010/08/27/h264-free-licence-deadline-revoked/1

http://www.zdnet.co.kr/ArticleView.asp?artice_id=20100827115521

 

주석 5)Open Web, Open Video and WebM  (Firefox의 WebM 환영글)

http://blog.mozilla.com/blog/2010/05/19/open-web-open-video-and-webm/

 

주석 6) VP8 & WebM Tools

http://www.webmproject.org/tools/

 

주석 7) H.264 특허 정보

http://www.mpegla.com/main/programs/avc/Documents/avc-att1.pdf

 

주석 8) Follow-up on HTML5 Video in IE9

http://windowsteamblog.com/windows/b/bloggingwindows/archive/2010/05/19/another-follow-up-on-html5-video-in-ie9.aspx

Posted by 김용환 '김용환'
TAG HTML5, WebM

댓글을 달아 주세요