'Next WEB/HTML5'에 해당되는 글 7건

Next WEB/HTML5
지난 9월에 소셜게임 업체 Zynga가 독일의 HTML5기반 게임개발툴 회사인 Dextrose를 인수했습니다.

Dextrose의 소셜 게임 개발 플랫폼 'Aves' 엔진은 plugin기술을 없이도 HTML5기술을 이용하여 웹 브라우저에서 동적인 게임을 개발할 수 있는 게임엔진입니다.  즉, HTML, CSS, JavaScript등을 이용해서 게임을 개발 할 수 있도록 도와주는 일종의 SDK라고 보시면 됩니다.


HTML5기반이기 때문에 일반 PC뿐만 아니라 HTML5를 지원(iPhone safari, chrome browser, mozilla의 fennec, opera등)하는 여러 모바일 디바이스에서 구동이 가능하다는 점이 아주 큰 장점입니다.  HTML5기반의 게임들에 대해서는 제 이전 포스팅을 참고하세요(2010/10/09 - [Next WEB/HTML5] - HTML5 기반의 게임들)


아래 동영을 한번 보시면 이해가 빠를 것 같습니다. 아직 3D는 지원하지 않습니다.

 
출처:http://www.insidesocialgames.com/2010/09/24/zynga-acquires-dextrose-aves-engine-html5/


(추가 내용:2010.11.19) HTML5를 이용한 게임엔진 개발에 대한 또 다른 내용도 참고하세요.( http://flax.ie/flax-html5-game-engine-development-diary-part-1/)


저작자 표시 비영리 변경 금지
신고

'Next WEB > HTML5' 카테고리의 다른 글

이젠 HTML5로 게임을 개발하는 시대.  (0) 2010.11.09
HTML5 기반의 게임들  (0) 2010.10.09
구글 HTML5Rocks 슬라이드의 세미나(동영상)  (0) 2010.07.26
뜨거운 열기...HTML5 오픈 컨퍼런스  (0) 2010.07.05
HTML5 Demos  (3) 2010.06.25
HTML5 오픈 컨퍼런스 개최  (0) 2010.06.23
0 0
Next WEB/HTML5
HTML5로 어떤 것들을 할수 있을까요? HTML5 기술을 이용해서 게임도 가능할까요? 
아직까지는 화려하고 고성능의 3D 게임은 불가능합니다만, 간단한 게임(?, 3D게임도 가능하긴 합니다.)은 HTML5 기술로도 충분히 가능합니다. 

아래에 있는 데모들이 대표적인데요, 간단한 팩맨 게임부터 WebGL(OpenGL기반)을 이용한 게임까지 정말 다양합니다. 


Classic Bricks
누구나가 다 아는 벽돌깨기 게임입니다. 단순하지만 중독성이 강하죠.  디자인이나 아이디어를 좀더 보완하면 더 재미날 듯 하네요.
http://code.google.com/p/quake2-gwt-port/



HTML5 Pacman

URL :http://arandomurl.com/2010/07/25/html5-pacman.html
Source: http://github.com/daleharvey/pacman


3D Tetris CubeOut
3차원 테트리스 게임입니다.
http://code.google.com/p/quake2-gwt-port/

 

akihabara의 게임들
거의다 우리에게도 친숙한 게임들이네요. 이름을 도쿄의 아키하바라로 지었네요.
URL : http://www.kesiev.com/akihabara/


quake2

3D 게임인 quake2도 가능합니다만, 이 게임이 WebGL기술을 이용하고 있어서 W3C HTML5범주에 포함되지는 않지만, html5test에서도 WebGL을 html5의 한 요소로 테스트하고 있고, 크로노스그룹에서 w3c에 WebGL을 표준으로 넣으려고 하고 있고, Webkit 기반 브라우저, 모질라 등에서 지원을 하거나 할 계획이어서 포함시켰습니다.
WebGL에 대해서는 제 이전 포스팅(2009/11/04 - [Browser] - 웹 브라우저에서 3D게임을 하는 시대가 오는가?)을 참고하시길 바랍니다.

URL: http://code.google.com/p/quake2-gwt-port/

다른 HTML 5 기반의 게임들
보다 많은 게임들은 아래 URL을 참고하시길 바랍니다.

http://www.canvasdemos.com/type/games/도 참고하시길 바랍니다. 
훨씬 더 다양하고 재미난 게임들이 많이 있습니다. 

어떠신가요?
HTML5기반의 게임엔진들도 속속 나오고 있어서 
HTML 5로도 게임을 좀더 쉽게 만들 수 있는 시대입니다.  WebGL 기술이 대중화되면 더 다양한 형태의 게임들이 등장할 것입니다. 굳이 웹에서 플래시 기반의 게임을 만들지 않아도 되는 시대가 오고 있습니다. 저는 웹 개발자는 아니지만, 웹 개발자 분들에게 좋은 세상이 열리겠네요.

저작자 표시 비영리 변경 금지
신고

'Next WEB > HTML5' 카테고리의 다른 글

이젠 HTML5로 게임을 개발하는 시대.  (0) 2010.11.09
HTML5 기반의 게임들  (0) 2010.10.09
구글 HTML5Rocks 슬라이드의 세미나(동영상)  (0) 2010.07.26
뜨거운 열기...HTML5 오픈 컨퍼런스  (0) 2010.07.05
HTML5 Demos  (3) 2010.06.25
HTML5 오픈 컨퍼런스 개최  (0) 2010.06.23
0 0
Next WEB/HTML5
이제는 유명해져서 구글이 만든 HTML5Rocks사이트의 HTML5
기술로
기술로 만들어진 슬라이쇼
를 보신 분들이 많으셨을텐데요. 사이트에서는 슬라이드쇼만 있어서 이게 뭔소린가 하시는 분들도 계셨을 거 같습니다. 

이 슬라이드를  가지고 세미나를 하는 동영상이 있어서 소개합니다.


이밖에도 YouTube를 통해서 HTML5에 관한 여러 자료들을 얻으실 수 있으니 참고하시길 바랍니다.

그리고, 각 브라우저 벤더들의 HTML5에 대해서는 아래의 사이트를 참고하시면 좋습니다.


저작자 표시 비영리 변경 금지
신고

'Next WEB > HTML5' 카테고리의 다른 글

이젠 HTML5로 게임을 개발하는 시대.  (0) 2010.11.09
HTML5 기반의 게임들  (0) 2010.10.09
구글 HTML5Rocks 슬라이드의 세미나(동영상)  (0) 2010.07.26
뜨거운 열기...HTML5 오픈 컨퍼런스  (0) 2010.07.05
HTML5 Demos  (3) 2010.06.25
HTML5 오픈 컨퍼런스 개최  (0) 2010.06.23
0 0
Next WEB/HTML5
지난주 금요일에 HTML5 오픈 컨퍼런스에 다녀왔습니다. 
회사 일때문에 아주 약간(?) 늦게 도착했는데, 자리가 없는 사태가.... - -

650명이나 되는 사람들이 자리를 모두 채우고 있었습니다. "그래도 빈자리가 있겠지" 하며 찾아봤는데 없더군요. 늦게 오신 몇분들과 같이 사이좋게 계단에 앉아서 들어야 했습니다. - -

정말 대단한 열기였습니다. 그 열기때문에 에어컨을 최고로 틀었다고 했는데도 부채질하고 있는 사람들이 많이 있었으니까요.(그날은 좀 덥기도 했고요.)
 
컨퍼런스 내용은 크게 HTML5, CSS3, HTML5 API, Mobile web application, web접근성 이라는 주제로 진행이 되었습니다. 발표자 분들이 다들 유명하신 분들이라 발표내용도 좋았고, 유익했습니다. 

나중에는 주제별로 섹션을 나눠서 충분한 시간을 가지고 깊이 있게 진행되는 컨퍼런스도 있으면 좋을 거 같다는 생각이 들었습니다.  어떻게 보면 각 주제별로 주어진 시간 40분은 긴 시간이 아니라서...


이번 컨퍼런스의 발표자분들이 의미있는 일을 한가지 더 하셨는데, "실전 HTML5 가이드"라는 자료를 참석자들에게 무료로 배포했다는 것입니다. PDF는 아래서 다운로드 받아볼 수 있습니다. 내용이 상당히 알찹니다. 꼭 읽어보시길 바랍니다. 
http://html5.creation.net/html5-guide.pdf 

저작자 표시 비영리 변경 금지
신고
이 장소를 Daum지도에서 확인해보세요.
서울특별시 강남구 논현2동 | 건설회관
도움말 Daum 지도

'Next WEB > HTML5' 카테고리의 다른 글

HTML5 기반의 게임들  (0) 2010.10.09
구글 HTML5Rocks 슬라이드의 세미나(동영상)  (0) 2010.07.26
뜨거운 열기...HTML5 오픈 컨퍼런스  (0) 2010.07.05
HTML5 Demos  (3) 2010.06.25
HTML5 오픈 컨퍼런스 개최  (0) 2010.06.23
HTML5 내맘대로 초간단 정리  (0) 2010.06.15
0 0
Next WEB/HTML5
HTML5는 현재 여러 브라우저들에서 일부 적용이 되어 있습니다. 따라서 이를 이용한 여러 데모들이 많이 나오고 있는데 '와~~' 할만한 데모들도 꽤 있습니다. 물론 Flash를 이용하면 쉽게 가능한 내용들일지 모르겠지만 플러그인 이용없이 오로지 HTML5와 JS, CSS를 써서 개발했다고 생각한다면 "와~" 할만합니다.

HTML5 참고 문서: 2010/06/15 - [Next WEB/HTML5] - HTML5 내맘대로 초간단 정리

아래는 제가 찾아본 여러 Demo들입니다. 링크를 클릭하면서 직접 확인해보시길 바랍니다. HTML5를 통해서 이런것들이 가능합니다. ^^

l  HTML5Rocks

n  http://www.html5rocks.com/

l  HTML5Demo 

n  http://html5demos.com/ 

l  HTML5 Showcase 48 Potential Flash-KillingDemos 

n  http://www.hongkiat.com/blog/48-excellent-html5-demos/

l  15 Useful HTML5 Tutorials and CheatSheets 

n  http://webdesignledger.com/tutorials/15-useful-html5-tutorials-and-cheat-sheets? 

l  Apple Showcase 

n  http://www.apple.com/html5/

l  canvas 3D 

n  http://www.kevs3d.co.uk/dev/index.html

l  3D 테트리스예제 cubeOut 

n  http://alteredqualia.com/cubeout/


l  SkechPad 

n  http://mugtug.com/sketchpad/ 

l  Photo Editor 

n  http://mugtug.com/darkroom/ 

l  Dynamic Content Injection Demo 

n  http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml 

l  Mozilla : Dynamic Content InjectionDemo 

n  http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtml? 

l  TweetDecks HTML5(video)

n  http://techcrunch.com/2010/05/19/tweetdecks-html5-browser/



canvas

l  http://www.robodesign.ro/coding/canvas-primer/20081208/example-rects.html

l  http://www.robodesign.ro/coding/canvas-primer/20081208/example-paths.html

l  http://www.robodesign.ro/coding/canvas-primer/20081208/example-drawimage.html

l  http://arapehlivanian.com/wp-content/uploads/2007/02/canvas.html

l  Interpolation Polynomial

n  http://www.benjoffe.com/code/demos/interpolate/

l  Canvascape - "3D Walker"

n  http://www.benjoffe.com/code/demos/canvascape/


Video 

l  Sublime Video Player

n  http://jilion.com/sublime/video

l  Click video to blow it up(webkit based browsers)

n http://www.craftymind.com/factory/html5video/CanvasVideo.html

l  Scripting your own HTML5 video controls

n  http://people.opera.com/patrickl/articles/introduction-html5-video/scripted-controls/

l  HTML5 Video with JavaScripted synchronisedcaptions

n  http://people.opera.com/brucel/demo/video/accessible-html5-video-captions.html

l  HTML5 video, with CSS transitions on hoverand focus

n  http://people.opera.com/brucel/demo/video/turkish-transition.html

l  video + canvas

n  http://people.opera.com/patrickl/articles/introduction-html5-video/video-canvas/

l  Mozilla : HTML5 Video Player Demo

n  http://people.mozilla.com/~prouget/demos/mashup/video.xhtml

l  Try out the Open Standard Media Player byMediaFront Demo

n  http://www.mediafront.org/project/osmplayer

WebGL
WebGL

l  Simple Demo

n  https://developer.mozilla.org/samples/webgl/sample1/index.html

l  Quake2

n  http://www.youtube.com/watch?v=fyfu4OwjUEI&feature=player_embedded#

n  http://code.google.com/p/quake2-gwt-port/


CSS3


l  Photo gallery1

n  http://demo.tutorialzine.com/2009/11/hovering-gallery-css3-jquery/demo.php 

l  Photo gallery2

n  http://people.opera.com/andreasb/temp_toshiba/stack/

l  An example showing the various kinds oftransition-timing-functions

n  http://people.opera.com/dstorey/transitions/transition-timing-example.html

l  CSS3 Transitions

n  http://people.opera.com/patrickl/experiments/css3/transitions/

l  Webfonts

n  http://devfiles.myopera.com/articles/751/newspaper.html

l  Webfonts and Text animation using SVG

n  http://devfiles.myopera.com/articles/751/junction-type-specimen-animated.svgz

l  CSS 3D Meninas

n  http://www.romancortes.com/blog/css-3d-meninas/

l  47 Amazing CSS3 Animation Demos

n  http://www.webdesignerwall.com/trends/47-amazing-css3-animation-demos/




저작자 표시 비영리 변경 금지
신고

'Next WEB > HTML5' 카테고리의 다른 글

HTML5 기반의 게임들  (0) 2010.10.09
구글 HTML5Rocks 슬라이드의 세미나(동영상)  (0) 2010.07.26
뜨거운 열기...HTML5 오픈 컨퍼런스  (0) 2010.07.05
HTML5 Demos  (3) 2010.06.25
HTML5 오픈 컨퍼런스 개최  (0) 2010.06.23
HTML5 내맘대로 초간단 정리  (0) 2010.06.15
3 0
Next WEB/HTML5
http://webappscon.com/html5/요즘 이슈가 되고 있는 HTML5에 대해서 관심이 많은데, 이번에 "한국 웹 표준 프로젝트"의 주최로 HTML5 컨퍼런스를 개최한다고 합니다.

제 생각에는 HTML5는 향후 1~2년 안에 급속도로 퍼지게 될 것으로 보입니다. 
아직 표준이 만들어지고 있는 상태지만 많은 내용들을 담고 있기 때문에 혼자서 공부하기에는 쉽지 않으니 이런 컨퍼런스를 통해서 접근하는 것도 좋을 것 같습니다.

관심 있으신 분들은 신청하시길 바랍니다. 
발표자 분들이 워낙 유명하신 분들이라서 빨리 신청하셔야 할 듯 합니다.^^
신청은 여기로 하시면 됩니다.


행사 소개

처음으로행사 소개발표 안내행사 일정사전 등록
일시: 2010년 7월 2일(금) 오후 1시
장소: 강남구 학동 건설회관

주최 : 한국 웹 표준 프로젝트
주관 : CSS 디자인코리아, 클리어보스
후원 : 한국정보화진흥원, Mozilla Corpration

행사일정
등 록

HTML5 소개 및 현황 (윤석찬)

HTML5 마크업 (신현석)

휴 식

CSS3 실전 예제 (정찬명)

HTML5 API 소개 (경준호)

휴 식

HTML5 기반 모바일 앱 (권정혁)

한국형 웹 콘텐츠 접근성 지침 2.0 (현준호)

Q & A



저작자 표시 비영리 변경 금지
신고

'Next WEB > HTML5' 카테고리의 다른 글

HTML5 기반의 게임들  (0) 2010.10.09
구글 HTML5Rocks 슬라이드의 세미나(동영상)  (0) 2010.07.26
뜨거운 열기...HTML5 오픈 컨퍼런스  (0) 2010.07.05
HTML5 Demos  (3) 2010.06.25
HTML5 오픈 컨퍼런스 개최  (0) 2010.06.23
HTML5 내맘대로 초간단 정리  (0) 2010.06.15
0 0
Next WEB/HTML5

애플과 어도비 플래시 이슈, 구글의 전폭적인 지지등으로 관심을 받고 있는 HTML5에 대해서 간단하게 정리한 문서입니다. 저도 지금 HTML5에 대해서 보고 있는 중이라서 정리가 잘 안 되지만 앞으로 계속 조금씩 정리해갈 생각입니다. 

HTML5의 시작은  W3C와는 다른 조직체였던 WHATWG(Web Hypertext Application Technology Working Group)으로 볼수 있습니다. WHATWG는 HTML의 개발 및 관련기술에 관심을 가지고 있던 Apple, Mozilla, Opera가 주축이 되어 2004년에 만들어진 조직체로 Web Applications 개발을 위한 HTML과 APIs등의 표준화에 초점을 맞추고 있었고, WHATWG를 통해서 만들어진 결과물들은 2007년부터 슬슬 W3C에 채택되어 현재까지도 여러 Working group에서 표준화 작업을 진행중(Working Draft)입니다. 


HTML5가 도대체 뭐길래 이렇게 난리인가?

<이미지 출처: http://www.toptechreviews.net/wp-content/uploads/2010/06/Apple-to-Showcase-New-Features-of-HTML5.jpg>


제가 보기에는 한마디로 HTML5는 Plugin없이 Rich Web Application을 지원하기 위한 것이 가장 큰 목적이라고 할 수 있습니다. 아래 HTML5의 범위에서 설명하겠지만, HTML5는 크게 HTML표준과 여러 API표준으로 나눠서 볼 수 있습니다. 

새롭게 추가된 video/audio, cavas등의 대표적인 엘러먼트들외에도 WebForm, 그리고 Semantic과 관련된 element들이 있고, 새로 추가된 API로는 device관련, offline관련, storage관련등이 추가되었습니다.
이런 여러 새로운 표준들을 통해서 Rich Web Application을 개발할 수 있게 되는 데, Adobe의 Flash나 MS의 Siverlight, SUN(IBM?)의 JavaFX등의 여러 기술들이 HTML5로도 가능하게 됩니다. 

HTML5라고 해서 기존 개발 방식과 크게 달라지는 것은 없습니다. 개발 방식은 여전히 HTML + CSS + Java script(APIs)로 할수 있습니다.  


HTML5의 범위
 
HTML5 표준의 범위에 대해서 정의한 문서는 아직 보질 못했습니다. 여러 보는 시각에 따라서 HTML5의 범위가 달라질수 있습니다.[각주:1] 현재 일반적인 분위기는 HTML5와 여러 관련된 API 표준들을 묶어서 상당히 포괄적인 의미로 HTML5로 보는 경향이 있습니다. 이는 HTML5가 Rich 
Web Application의 개발까지 가능하게 하는 것을 목적으로 한다라는 관점에서 보면 이해가 되기도 합니다만 굉장히 많은 관련 표준들이 있어서 혼란스럽기는 마찬가지입니다. 

제가 보는 관점에 가장 간단한 방법은 WHATWG를 통해서 표준화된 내용들과 W3C에서 진행 중이거나 완료된 표준(e.g. SVG)들의 집합으로 보면 좋을 것 같습니다.  아래는 WHATWG를 통해서 표준화된 내용들입니다. 

WHATWG Specifications 
(and sections therein)
Section links for 
Web Applications 1.0
W3C/IETF Specifications
HTML5 only (excluding newer features) Single-pageMulti-page (HTMLWG)
MicrodataIn WHATWG HTML Microdata Microdata (HTMLWG)
2D ContextIn WHATWG HTML 2D Context 2D Context (HTMLWG)
Communications - Cross-document messagingIn WHATWG HTML Cross-document messaging Communications (HTMLWG)
Communications - Channel messagingIn WHATWG HTML Channel messaging Communications (HTMLWG)
Device ElementIn WHATWG HTML 
(note: not in Last Call for HTML5)
Device 
see also 
[1]
HTML Device (HTMLWG) 
see also 
[2]
Web WorkersWeb Workers specification Web Workers Web Workers (WebApps WG)
Web Storage Web Storage Web Storage (WebApps WG)
Web Sockets API Web Sockets API Web Sockets API (WebApps WG)
Web Sockets Protocol Web Sockets Protocol The Web Socket Protocol (IETF)
Server-Sent Events Server-sent Events Server-sent Events (WebApps WG)
Web SQL Database (stalled) Web SQL Database (WebApps WG)

(출처: http://wiki.whatwg.org/wiki/FAQ)


Markup측면에서의 HTML5

  • HTML5 스펙에서는 아래와 같은 내용들이 추가되었습니다.
  1. Semantic Markup
    1. semantic web을 위해서 아래와 같은 element들이 추가
  2. Video/Audio
    1. 동영상과 오디오 지원(video codec으로는 WebM, H.264등)
  3. Canvas
    1. 동적인 그래픽을 rendering할때 이용하는 element
    2. http://www.w3.org/TR/2dcontext/
  4. Microdata
    1. HTML element에 삽입하여 이용하는 것으로 요소가 데이터로서 어떤 의미를 가지는 지를 나타내는 기능.
    2. 현재까지 지원하는 브라우저가 없음.
    3. http://www.
      w3
      w3.org/TR/microdata/
  5. Webform
    1. 새로 추가된 기능
      1. Validation ( required, pattern, maxLength, min/max, step등의 attr 이용 가능)
      2. 자동 완성기능(autocomplete attr을 이용)
      3. placeholder attribute : 입력 필드에 대한 간단한 설명을 표시
      4. autofocus attribute : 페이지로딩이 끝남과 동시에 자동으로 해당 폼으로 커서 이동
    2. input element의 새로운 타입들
      1. tel
      2. email
      3. url
      4. search
      5. datetimes, date, month, week, time, datetime-local
      6. number
      7. range : 일정 범위의 숫자를 입력하기 위한 요소
      8. color
    3. 새로운 element들
      1. output : 가능상태의 hidden요소 . 요소의 값은 화면에 출력되는 동시에 form 송신시 서버로 전송
      2. keygen : 공개키 암호 방식의 키쌍을 생성(form송신시 비밀키와 공개키가 생성되어 공개키가 서버에 전송)
      3. progress : 작업 진행을 나타내는 시각적인 요소
      4. meter : 일정 범위 안의 비율이나 수치를 표현하기 위한 시각적인 요소
  6. drag & drop 기능
    1. draggable , dragstart event , dragenter, dragover, drop등을 이용
  7. 루비(ruby/rt/rp)
    1. 한자등의 발음등을 표시할때 이용.
  8. inline MathML and SVG
  9. Other new elements.
    1. command
    2. datalist
    3. details
    4. embed
    5. figure
    6. figcaption
  • 잘 사용되지 않거나 CSS를 통해서 다루는 것이 더 좋거나 사용자에게 부정적인 영향을 미치는 등 여러 이유로 아래의 element들은 더이상 사용하지 않을 것을 권장함.
  1. basefont
  2. big
  3. center
  4. font
  5. s
  6. strike
  7. tt
  8. u
  9. frame
  10. frameset
  11. noframes
  12. acronym
  13. applet
  14. isindex
  15. dir

New API specification

HTML5 Communications (Editor's Draft)

  • Same origin policy의 단점인 Cross domain 문서 접근을 가능하게 해주는 표준.
  • MessageEvent Interface
    • data : Returns the data of the message.
    • origin : Returns the origin of the message, for server-sent events and cross-document messaging
    • lastEventId : Returns the last event ID, for server-sent events.
    • source : Returns the WindowProxy of the source window, for cross-document messaging.
    • ports : Returns the MessagePortArray sent with the message, for cross-document messaging and channel messaging.
  • Cross-document messaging
    • 송신하는 쪽과 수신하는 쪽이 서로 신원을 확인하는 방법을 통해서 same origin policy 이슈 해결
    • postMessage()와 onmessage event handler이용
  • Channel messaging
    • N:N 통신을 위한 API
    • 메세지 송수신을 중개하는 MessageChannel의 2개의 port를 이용.
  • W3C(HTML5 Communications) : http://dev.w3.org/html5/postmsg/

Offline Web Applications(Working Draft)

  • 오프라인 상태에서도 웹이 동작할 수 있도록 하는 애플리케이션
  • Application cache
    • 웹 애플리케이션이 필요로 하는 리소스를 클라이언트 쪽에 캐시하는 기능
    • CACHE, FALLBACK, NETWORK의 section을 가짐.

Web Storage(Working Draft)

  • Cookie와 같이 클라이언트에 적은 양의 데이타를 저장하기 위한 스토리지임.
  • Cookie와의 차이점은
    1. 크기 제한이 없다(cookie는 4KB로 제한)
    2. 서버로 전송하지 않는다.(쿠키는 HTTP를 통해서 서버로 전송되지만 web storage는 전송하지 않음)
    3. Javascript 객체 저장할 수 있음(cookie는 저장할 수 없음)
    4. 유효기간 제한이 없음(cookie는 특정 시간이 지나면 자동 삭제되지만 web storage는 삭제되지 않음)
  • 2 type of Web storage
    1. local storage(localStorage)
      1. cookie와 유사하게 각각의 도메인에서만 사용가능
    2. session storage
      1. window와 같은 유효 범위, 생존범위를 가지며, 도메인마다 따로 생성됨.
      2. 즉 window가 종료되면 session storage도 삭제됨.
  • W3C : http://www.w3.org/TR/webstorage/

Web SQL Database (Editor's Draft)

  • 2009년 12월 버전 이후로는 스펙의 책정이 중지됨. 이용할 수 있는 SQL의 사양에 대해 브라우저 개발사간의 동의를 얻지못한 것이 주원인임. 
  • Indexed database API로 변경될 것으로 보임.
  • W3C : http://dev.w3.org/html5/webdatabase/

Server-Sent Events(Editor's Draft)

  • HTTP 환경에서 서버로부터의 data push를 지원하기 위해서 client API와 push Data를 정의
  • 서버로부터 푸시된 데이타를 일반적인 DOM이벤트처럼 처리가능
  • 동작
    • 클라이언트 EventSource객체가 *polling방식*으로 주기적으로 서버에 요청하고 응답 데이타의 해석처리.
  • push data format
    • 유효 필드: event, data, id, retry
    • e.g.
      id: event1 
      data: event1 data sample
  • W3C(Server-Sent Events) : http://dev.w3.org/html5/eventsource/

Web Workers(Editor's Draft)

  • 자바스크립트를 병렬적으로 background에서 실행시키기 위한 API.
  • UI(DOM) 쓰레드와는 별개의 쓰레드로 동작 가능하여, CPU 부하가 많은 작업들은 여러 worker로 작업할 수 있으나 DOM을 조작할 수는 없음.
  • W3C : http://dev.w3.org/html5/workers/

Web Sockets API(Editor's Draft)

  • Full Duplex를 실현하기 위한 표준으로 클라이언트 뿐만 아니라 서버 쪽도 Web Socket를 지원해야 함
  • 연결이 되면 HTTP에서는 지원되지 않았던 진정한 의미의 데이타 푸시가 가능해짐.

Geolocation API(Editor's Draft)

  • 현재 디바이스의 위치 정보를 얻기 위한 자바스크립트 API
  • 3개의 메소드로 이루어진 간단한 API이며 네트워크 정보 또는 GPS등을 통해서 위치를 알려주나 정보의 출처는 알 수 없음.
  • getCurrentPosition, watchPosion, clearWatch
  • W3C(Geolocation API Specification) : http://dev.w3.org/geo/api/spec-source.html

File API(Working Draft)

XMLHttpRequest Level2(Working Draft)

  • XMLHttpRequest의 업데이트 버전으로 아래와 같은 내용들이 추가될 예정
    • Cross domain으로 요청을
    • file, binary data, form data 등이 송수신 가능
    • 요청 진행 상황 확인 가능
  • W3C(XMLHttpRequest Level 2) : http://www.w3.org/TR/XMLHttpRequest2/

Indexed Database API(Working Draft)

  • Web SQL Database 및 Web Storage의 단점을 해결하기 위해 표준화.
  • database open, object store 생성
  • 객체의 저장과 삭제
  • index 작성 및 이용
  • 효율적인 검색 및 커서 조작
  • W3C(Indexed Database API) : http://www.w3.org/TR/IndexedDB/

Selectors API Level 1(Candidate Recommendation)

Media Capture API

Other Specifications

WebGL(Not W3C)

HTML5 Demo

Reference
HTML5의 더 자세한 내용에 대해서는 본 블로그보다 더 
잘 정리되어 있는 아래의 글들을 참고하는 것도 좋을 듯 합니다.
HTML5 Test suite: http://dev.w3.org/html5/tests/

* 정말 간단하게 정리를 한다고 했는데도 엄청난 양의 내용들을 담고 있어서 상세 내용들은 다시 따로 정리를 해야 할 것 같네요. 보시면 아시겠지만, 이 정도의 내용이면 어플리케이션 개발도 가능합니다. (이미 iPhone등에서 HTML5등을 이용해서 어플리케이션을 개발하고 있는 사례가 많이 있습니다.) 

  1. 예를 들어 html5test.com의 test항목중에는 W3C표준이 아닌 크로노스 그룹의 WebGL이라는 표준도 있습니다. [본문으로]
저작자 표시 비영리 변경 금지
신고

'Next WEB > HTML5' 카테고리의 다른 글

HTML5 기반의 게임들  (0) 2010.10.09
구글 HTML5Rocks 슬라이드의 세미나(동영상)  (0) 2010.07.26
뜨거운 열기...HTML5 오픈 컨퍼런스  (0) 2010.07.05
HTML5 Demos  (3) 2010.06.25
HTML5 오픈 컨퍼런스 개최  (0) 2010.06.23
HTML5 내맘대로 초간단 정리  (0) 2010.06.15
0 0
1
블로그 이미지

TV, Platform, Browser, Coffee.... twitter :@myideom

smartech

티스토리 툴바