'HTML5'에 해당되는 글 11건

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
New Media TV

WebM

l  On2 VP8이라는 코덱을 기반으로 하는 video format

l  Video : VP8, Audio: vorbis , container: Matroska

l  무료임( 결국, H.264의 특허를 관리하는 MPEG LA에서 웹 스트리밍에 대해서 완전 무료 선언)

l  유튜브는 기존 동영상들을 모두 WebM으로 다시 인코딩할 계획을 가지고 있다고 함.

l  Broadcom(WVGA (800x 640) 해상도에 초당 30 프레임), TI

(
(Texas Instrument), 퀄컴, MIPS등에서 지원 예정

 

YouTube의 새로운 임베딩 스타일

l  Youtube의 새로운 임베디드 스타일은 <iframe>을 사용하고, 이는 결국 브라우저들과 기기들에 걸쳐 사용자들에게 더 확고한 경험을 제공

l  이점

n  비디오가 어디에서 시청되는가와 사용자의 기호들에 따라 플래시 혹은 HTML5를 사용하는 사용자들에게 제공하게 됨

n  임베디드 코드는 아직 수정 중에 있지만, 개발자들이 이를 사용하도록 권장

n  만일 임베디드 비디오가 HTML5와 호환되지 않는 요소들을 포함하고 있으면, 플래시 브라우저가 대신 사용됨

n  만일 새 플레이어를 시도하고 싶다면, 아래의 임베디드 코드를 사용하면 됨

n  예시

u  <iframe class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0">

 

The YouTube HTML 5 Beta

: 현재 광고와 함께 play되는 video들과 HD video들은 HTML5  play할 수 없음

지원하는 브라우저

l  Firefox (WebM version)

l  Google Chrome 

     - h.264 supported now

     - WebM enabled version available via Early Release Channel

l  Opera (WebM version)

l  Microsoft Internet Explorer 9 (h.264, Platform Preview 3)

l  Apple Safari (h.264, version 4+)


 

TV 지원


YouTube 영화 렌탈 서비스 추진중.

파이낸셜 타임즈 (Financial Times)에서 구글이 2010년 말 영화 렌탈 서비스를 런칭하기 위해 유수의 헐리우드 영화사들과 접촉 중이라고 함.

유튜부를
유튜부를 이용하여  다운로드가 아닌 스트리밍으로 채택하고, 가격은 한 편당 $5 정도 선이 될 것이라고 예상되며, 영화의 등록 시기는 해당 타이틀의 DVD가 출시되는 시기와 동일

 

다양한 언어 지원(http://youtubekrblog.blogspot.com/2010/08/blog-post_29.html)

올해 말까지 총 40 언어 지원으로 서비스를 확장시키는 것을 목표

 

유튜브 하루 20억 페이지 뷰 돌파(http://youtubekrblog.blogspot.com/search?updated-max=2010-05-26T00:11:00-07:00&max-results=7)

 

Links

l  Youtube TV

n  http://www.youtube.com/xl

l  Youtube leanback

n  http://www.youtube.com/leanback

l  Youtube HTML5

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

l  국내 Youtube Blog

n  http://youtubekrblog.blogspot.com/

l  개발자

n  http://apiblog.youtube.com/

n  http://www.youtube.com/dev?gl=KR&hl=ko&locale=ko_KR

n  http://code.google.com/intl/ko/apis/youtube/overview.html

n  Client Library Downloads, Sample Code and Tutorials

u  http://code.google.com/intl/ko/apis/youtube/code.html

n  YouTube JavaScript Player API Reference

u  http://code.google.com/intl/ko/apis/youtube/js_api_reference.html

n  YouTube ActionScript 3.0 Player API Reference

u  http://code.google.com/intl/ko/apis/youtube/flash_api_reference.html

 

l  참고 블로그

n  [일과 사람, 꿈과 가족] http://dreamgoer.net/175

                            

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

'New Media TV' 카테고리의 다른 글

Google TV란 어떤 것일까?  (0) 2010.10.05
애플 TV, 스마트 TV는 아니었다.  (4) 2010.09.03
YouTube에 대해서 이것저것...  (0) 2010.08.30
TV속 UX도 진화하고 있다. - 1  (0) 2010.07.28
구글 TV의 의미  (1) 2010.03.22
이젠 TV로 트윗한다.  (2) 2009.11.18
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/Review
CloudCanvas라는 Startup 기업이 HTML5기반(플래시 기반이 아닌)의 온라인 이미지 저작툴(무료)을 공개했습니다. 


CloudCanvas는 vector image와 Raster(bitmap) images들을 지원하고, crate, store, edit등의 다양한 기능을 지원하고, polygons, circles, painting, layers, brushes등의 기능을 제공하는 PhotoShop과 유사한 간단한 이미지 저작툴이라고 생각하시면 될 것 같습니다.

그리고 Google images search와 DeviantArt libraries(30,000개 이상의 클립아트와 템플릿 제공)  연동 지원하고, 500개 정도의 font를 지원한다고 합니다. 저장은 PNG와 SVG를 지원합니다.

서비스 접속이 원활하지 않아 테스트는 못 해봤는데, 동영상을 보니 꽤 쓸만한 것 같습니다.  SVG지원이 마음에 드는 군요..^^ 계속 발전해 나가겠죠? 

HTML5를 기반으로 하는 다양한 서비스들이 슬슬 나오고 있는데, 더 가속화될 것으로 예상됩니다. 

참고
이미지 및 기사 출처 : http://techcrunch.com/2010/07/22/cloudcanvas-launches-html5-image-creation-and-editing-suite/
CloudCanvas: http://www.cloud-canvas.com/
저작자 표시 비영리 변경 금지
신고
2 2
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

애플과 어도비 플래시 이슈, 구글의 전폭적인 지지등으로 관심을 받고 있는 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
SmartTech
2009년에는 아이폰 국내 출시, 트위터 강세, IPTV, 3D TV등의 TV시장의 변화, 스마트폰 강세, 클라우드 컴퓨팅등 IT업계에는 많은 변화가 있었던 한해였던 것 같습니다.

2010년에는 어떤 변화들이 있을까요? 제 나름대로 정리해 봤습니다.

1. 실시간 웹
 1. 실시간 웹

말 그대로 실시간 웹은 실시간으로 웹을 한다는 의미겠죠. 무선인터넷이 활성화되고 스마트폰이 대중화되면서 실시간 웹이 이슈가 되고 있는데, 트위터 같은 것을  실시간웹이라고 할수 있을 것 같습니다. SNS, LBS, News, RSS, shopping(바코드나 RFID를 이용한 실시간 쇼핑 검색),실시간 검색등 여러 분야로 확장될 수 있으며 거의가 기술적으로도 현재 실행 가능한 것들입니다. 올해는 실시간 웹으로 인해 보다 빠르고 정확한 정보를 얻을수 있게 되어 우리 생활에 변화가 생길것으로 보입니다.

참고
광파리의 글로벌 IT 이야기 : http://blog.hankyung.com/kim215/t%EC%8B%A4%EC%8B%9C%EA%B0%84+%EC%9B%B9

 
 2. 다양한 종류의 디바이스 등장

 애플이 1월 27일(?)에 애플 타블렛을 출시한다는 루머가 나돌고 있는데요. 이젠 루머가 아닐 정도로 상세한 내용들이 계속 나오고 있습니다.
구글에서도 크롬OS를 탑재한 타블렛이 HTC가 제조하여 출시한다는 루머가 나돌고 있습니다. 어떤 이들은 타블레서의 출시는 기존 3Screen(Mobile, PC, TV)에 타블렛을 추가해서 4screen으로 될 것이라는 예측까지 할 정도로 타블렛에 대해서 긍정적으로 평가하기도 합니다.
기존과는 다른 스마트폰, e-book, 넷북, smart TV등 정말 다양한 디바이스들이 출시될 예정입니다. 스마트폰과 일반폰(feature phone)과의 경계가 조금씩 무너지게 되고, 폰 어플리케이션이 다양한 디바이스에서도 구동이 되고, 타블렛이 PC와 TV역할을 하게 될수도 있습니다. 다양한 디바이스로 인해 우리의 선택은 더 커지게 되겠네요.

http://www.asiafasthosts.com/blog/wp-content/uploads/2009/08/apple-tablet.png

참고
2009/12/14 - [Mobile/Google Android] - 구글이 직접 그들만의 휴대폰을 만들다!
2009/12/22 - [Mobile/Others] - TechCrunch에 모습을 드러낸 구글 Nexus One의 실제 사진과 동영상.



 3. SNS/LBS 강세
 이젠 SNS가 새롭지 않을 정도로 우리 생활 깊숙히 파고 들고 있습니다. 현재도 트위터, 페이스북등이 LBS등 여러 서비스들과 결합되어 서비스되고 있습니다. 무선인터넷과 스마트폰의 대중화로 인해서 SNS나 LBS와 같은 서비스들이 폭발적으로 성장할 것으로 보입니다. LBS와 SNS가 기본적으로 결합되고 이와 더불어 부가적으로 다른 서비스들과 결합된다면 정말 다양한 서비스들이 우리를 사로잡을 것입니다. 올해 어떤 서비스들이 나올까요? 게임도 나오겠죠?

참고
2009/11/18 - [New Media TV] - 이젠 TV로 트윗한다.


 4. HTML5
RIA(Rich Internet Application)의 플래시와 실버라이트의 대항마로 얘기되고 있는 HTML5는 많은 것들을 담고 있습니다. 2D drawing을 위한 Canvas, Video/Audio, Local Storage(예전에 구글에서 추진했던 구글 gears프로젝트는 HTML5의 Local Storage로 인해 개발을 중단했습니다.)지원등 기존에는 지원하지 않았던 기능들을 많이 담고 있습니다. 스펙이 완료되는 시점이 2012년이지만, 벌써 많은 브라우저 벤더들이 지원을 하기 시작했고, MS도 IE9에서 이를 지원하기로 했습니다. 더많은 특징들이 있지만, 대표적인 기능들로 인해 RIA를 대신할 수 있다고 하는데, 중요한건 개발자들이 HTML5를 많이 이용하는가겠지요.
 

참고
http://html5gallery.com/
2009/09/08 - [Browser] - 브라우저 시장의 핵심 키워드는 ...


 5. 모바일 플랫폼간의 전쟁
Google의 Android, Palm의 WebOS, Apple의 iPhone OS, Nokia의 Maemo, Symbian, Linux진영의 Limo, RIM의 블랙베리, MS의 Windows Mobile(이제는 WindowsPhone OS라고 해야 하나요?), 삼성의 Bada, 각 이통사마다 다른 Mobile 플랫폼(SKT는 SKAF, 차이나모바일은 OMS등)들, 그리고 RIA 진영의 Adobe flash(AIR), MS의 실버라이트, 자바의 JavaFX등 정말 많은 모바일 플랫폼이 있습니다. 모두 모바일 시장을 선점하려고 노력중이고, 각각의 특색이 있습니다.
MS의 WindowsMobile은 올해 2년 넘게 준비해온 Windows Mobile 7을 출시하여 정면 승부를 할 것으로, Google은 자신들이 직접 판매하는 Nexus One을 통해서 통신 시장을 변혁하려 할 것이며, Palm은 자신들만의 장점인 WebOS를 통해서 시장을 확고히 할것입니다. 물론 애플도 가만히 있지는 않겠지요. ^^
또한 RIA 진영도 공격적으로 시장을 공략중입니다. 그들도 시장이 PC에서 다른 디바이스로 옮겨가고 있는 것을 알고 있겠죠. 모바일 플랫폼 뿐만 아니라 TV와 같은 가전 시장에도 손길을 뻗치고 있습니다.
올해 모바일 플랫폼 시장은 꽤나 시끄러울 것 같습니다.

참고
2009/01/12 - [Mobile/Palm pre] - [2009년 스마트폰] Palm Pre
2009/11/11 - [Mobile/Others] - 삼성전자도 개방형 모바일 플랫폼 "바다(bada)" 공개.... 확대되고 있는 모바일 플랫폼 시장
2009/11/13 - [Mobile/Others] - 삼성전자가 모바일 플랫폼때문에 바빠지고 있다. 이번엔 LiMo!!!2008/09/01 - [Mobile/Others] - 혼란스러운 Open platform 시장에서의 OMTP의 BONDI
2008/09/01 - [Mobile/Others] - Mobile에서의 Open market이 대세인가?



 6. Google!!! Android, Google chrome OS...........
요즘 구글이 너무 많은 것들을 벌이고 있습니다. 그래서 애플과 더불어 이슈의 핵심에 있는 것 같습니다.
Android기반의 구글만의 Nexus One 발표 예정, Googel chrome OS 출시 예정, 말이 많은 Ad Mob인수, Google voice, Goggles를 통한 검색 서비스의 진화, 기존 서비스들의 강화등.. 너무 많은 것들을 한꺼번에 내놓고 있습니다. 검색엔진으로 시작해서 이젠 MS와 비교해도 될 만큼 정말 많은 것들을 가지고 있습니다. 물론 질적으로 따지면 아직 모자랄수 있습니다만, 여기서 끝은 아니겠죠. 제 생각엔 구글은 보다 큰 비젼을 가지고 있는 것 같습니다. 이제 어디서나 구글을 보게 되는 세상이 되겠네요. 좋은 걸까요?

참고
2009/11/20 - [SmartTech] - 드디어 크롬 OS가 베일을 벗었다.


 7. 3D의 Reset
예전에도 3D와 관련된 이슈들은 항상 있었습니다. 3D TV도 어제, 오늘 얘기가 아니죠. 예전부터 있었던 기술이지만, 제조사들이 올해부터 본격적으로 시장을 만들어 가려고 하고 있습니다. 사실 3D에 대해서는 약간 회의적이었는데, 얼마전 본 "아바타"를 통해서 생각이 확 바뀌었습니다. 정말 다르더군요. 제 생각에는 사실 3D TV기술이 중요한 게 아니라 컨텐츠에 있다고 생각합니다. 아무리 좋은 3D기술을 가진 TV라도 컨텐츠가 별로면 시장에서 성공하기 힘들겠죠. 아직은 3D TV는 시작입니다. 기술도 컨텐츠도 .. Bluray에서도 3D표준을 포함시켰고,LG,삼성등과 같은 가전도 3D TV를 출시한다고 하니, 올해는 3D TV및 컨텐츠들의 도입기가 될 것 같습니다. 컨텐츠가 중요한데...
웹 진영에서도 3D 기술을 시도하고 있습니다. 제 블로그에서 소개한 WebGL이라는 것인데, 벌써 IE를 제외한 브라우저 벤더들은 WebGL을 일부 적용하고 있습니다. 조만간 모바일에서 볼 수 있을 겁니다.
이제 게임 뿐만 아니라, TV, 브라우저등 다른 분야에서 3D 기술을 이용하려고 노력중입니다. 이런 노력들로 인해 올해는 하나둘씩 성과가 보일 것으로 보입니다.


참고
2009/11/04 - [Browser] - 웹 브라우저에서 3D게임을 하는 시대가 오는가?
http://learningwebgl.com/blog/


 8. 증강현실(Augmented Reality)
 저는 Sekai camera를 통해서 증강현실이라는 것을 알았습니다. 처음 봤을때는 정말 신기하고 신선하더군요.
지금도 여전히 신선하고 재밌고 유용한 기술이라고 생각합니다. 증강현실이 아직 실생활에서는 많이 쓰이고 있지는 않지만, iPhone 어플리케이션인 Layer를 통해서도 일반인들에게 많이 알려졌습니다.
마켓팅 응용, A/S, SNS, LBS등 증강현실의 확장성은 정말 넓습니다. 작년부터 조금씩 대중에게 알려졌던 증강현실이 올해는 사용자들에게 여러 종류의 서비스로 시도될 것 같습니다. 아직 증강현실의 뚜렷한 모델이 없기 때문에 올해는 여러 실험을 통해서 기술이 성숙되어 갈것으로 보입니다. 이에 대해서는 따로 포스팅할 계획입니다.

참고
하이컨셉 & 하이터치 : http://health20.kr/category/%EC%A6%9D%EA%B0%95%ED%98%84%EC%8B%A4%EA%B3%BC%20LBS
2008/10/23 - [SmartTech] - 당신이 원했던 그 기술이 곧 현실이 됩니다. Sekai camera의 동영상을 보세요...


저작자 표시
신고
0 0
Browser
이제 머지않아 웹브라우저에서도 3D게임을 할 수 있을지도 모르겠습니다.

WebGL

얼마전에 OpenGL을 담당하고 있는 Khronos consortium에서 WebGL이라는 기술을 발표했습니다.
WebGL 은 HTML5의 canvas element의 3D context에 OpegnGL ES 2.0을 자바스크립트에서 이용할 수 있도록 바인딩했기 때문에 브라우저에서 플러그인 형태로 접근하지 않아도 하드웨어 가속이 되는 3D그래픽을 이용할 수 있습니다. 

현재 Google, Mozilla, NVIDIA, Opera, AMD, Ericsson등과 같은 굵직한 회사들이 참여하고 있습니다.

http://ext3d.com/news/images/webgl.jpg

웹기술과 3D를 결합하려고 한 시도들은 예전에도 많이 있었습니다. 그중 대표적인 기술이 VRML이라는 것이었죠. 2000년대 초반에는 상당히 인기가 많았으나 여러 문제로 사라지고 말았습니다.
그리고 얼마 전에 구글이 내놓은 O3D라는 것이 있습니다. (현재 구글은 둘다 진행하고 있는데, 언젠가는 통합되겠죠.)

자바스크립트와 OpenGL ES의 결합이라...  다소 생소할 수도 있을텐데요. 아래와 같은 형태로 개발할 수 있습니다. 참고로 큐브 예제입니다.




<!DOCTYPE html>
<html>
<head>
<title>Spinning Box</title>
<script src="resources/CanvasMatrix.js"> </script>
<script src="resources/utils3d.js"> </script>
<script id="vshader" type="x-shader/x-vertex">
uniform mat4 pMatrix;
uniform mat4 mvMatrix;
uniform vec3 lightDir;

attribute vec3 vNormal;
attribute vec4 vColor;
attribute vec4 vPosition;

varying float v_Dot;

void main()
{
gl_FrontColor = vColor;
vec4 transNormal = mvMatrix * vec4(vNormal,1);
v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
gl_Position = pMatrix * mvMatrix * vPosition;
}
</script>
    <script id="fshader" type="x-shader/x-fragment">
varying float v_Dot;

void main()
{
gl_FragColor = vec4(gl_Color.xyz * v_Dot, gl_Color.a);
}
</script>

<script>
function init()
{
var gl = initWebGL("example", "vshader", "fshader",
[ "vNormal", "vColor", "vPosition"],
[ 0, 0, 0, 1 ], 10000);

gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);

gl.box = makeBox(gl);

// color array
var colors = new CanvasUnsignedByteArray(
[ 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, // v0-v1-v2-v3 front
1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, // v0-v3-v4-v5 right
0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, // v0-v5-v6-v1 top
1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, // v1-v6-v7-v2 left
1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, // v7-v4-v3-v2 bottom
0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1 ] // v4-v7-v6-v5 back
);

gl.box.colorObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

return gl;
}

width = -1;
height = -1;

function reshape(gl)
{
var canvas = document.getElementById('example');
if (canvas.clientWidth == width && canvas.clientHeight == height)
return;

width = canvas.clientWidth;
height = canvas.clientHeight;

gl.viewport(0, 0, width, height);
var pMatrix = new CanvasMatrix4();
pMatrix.lookat(0,0,10, 0, 0, 0, 0, 1, 0);
pMatrix.perspective(30, width/height, 1, 10000);
gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "pMatrix"), false, pMatrix.
getAsCanvasFloatArray());
}

function drawPicture(gl)
{
reshape(gl);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

var mvMatrix = new CanvasMatrix4();
mvMatrix.rotate(currentAngle, 0,1,0);
mvMatrix.rotate(20, 1,0,0);
gl.uniformMatrix4fv(gl.getUniformLocation(gl.program, "mvMatrix"), false, mvMatrix.
getAsCanvasFloatArray());

gl.enableVertexAttribArray(0);
gl.enableVertexAttribArray(1);
gl.enableVertexAttribArray(2);

gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.vertexObject);
gl.vertexAttribPointer(2, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.normalObject);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, gl.box.colorObject);
gl.vertexAttribPointer(1, 4, gl.UNSIGNED_BYTE, false, 0, 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.box.indexObject);
gl.drawElements(gl.TRIANGLES, gl.box.numIndices, gl.UNSIGNED_BYTE, 0);

gl.flush();

framerate.snapshot();

currentAngle += incAngle;
if (currentAngle > 360)
currentAngle -= 360;
}

function start()
{
var gl = init();
currentAngle = 0;
incAngle = 0.5;
framerate = new Framerate("framerate");
setInterval(function() { drawPicture(gl) }, 10);
}
</script>
<style type="text/css">
canvas {
border: 2px solid black;
width:90%;
height:90%;
}
.text {
position:absolute;
top:100px;
left:20px;
font-size:2em;
color: blue;
}
</style>
</head>
<body onload="start()">
<canvas id="example">
There is supposed to be an example drawing here, but it's not important.
</canvas>
    <div class="text">This is some text under the canvas</div>
<div id="framerate"></div>
</body>
</html>

향후 전망은??

제 짧은 생각으로는 일단 넘어야 할 산은 많아 보입니다.

1. 하드웨어 가속을 쓰더라도 자바스크립트 자체와 바인딩에서 속도문제가 있을 수 있습니다.
현재도 자바스크립트 엔진들은 많이 발전하였으나, OpenGL과의 바인딩에 대해서는 아직 많은 것들을 최적화해야 할것으로 보입니다.
또한 방대한 양의 3D데이타들을 어떻게 처리할지는... 많은 것들이 있겠네요.

2. 또한 3D 개발에 관련된 문제로 제가 잘은 모르지만, low level API인 OpenGL만으로 개발한다는 것을 상당히 힘든 내용으로 알고 있습니다.
그래서 여러 엔진과 툴들이 나와 있는데, WebGL을 지원하는 편리한 툴이 없다면 개발자들에게 외면당해 성공하기 힘들수도 있습니다.
웹 개발자가 3D까지 알기에는 힘들수도 있죠. 따라서 전문 개발자들이 많아지거나 상당히 편리한 툴이 개발되어야 승산이 있을 것 같습니다.
즉 기존의 웹개발자들과 3D관련 개발자들을 모두 수용할 수 있는 환경이 필요하다고 생각합니다.

3. 플래시, 실버라이트와 같은 RIA진영에서의 반격도 지켜봐야 할 것 같습니다.
아무리 좋은 기술이라도 시장에서 성공한다는 것은 많은 것들을 필요로 하죠.
요즘 공격적으로 플래시를 확대시키고 있는 Adobe는 mobile 시장뿐만 아니라 스크린이 있는 시장이라면 어디든 공략할 태세입니다.
MS는 아직까지는 크게 성공시킨것 같지는 않지만, 조용히 시장을 넓혀가고 있는 것은 사실입니다.
이와 같이 너무나도 커진 RIA진영에서는 WebGL에 적극적으로 대응한다면 조용히 사라질수도 있습니다.

하지만, 이런 문제들에도 불구하고, 브라우저 진영에서도 가만히 있지는 않겠죠.
우선 Webkit에서 WebGL을 지원하는 버전이 나왔습니다. 아쉽게도 현재는 Mac에서만 동작하네요. - -
Webkit r49073(October 4, 2009)에서 동작하며 자세한 내용은 http://webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/를 참고하시길 바랍니다.

Webkit을 기반으로 하는 Google chrome, Safari등의 브라우저에서도 조만간 볼수 있겠네요.
오페라에서는 아직 소식은 없으나, 조만간에 모습을 선보일것 같습니다.
또한 Mozilla 재단에서 Firefox 3.7 개발 버전에서 WebGL을 지원한다고 합니다.

위와 같이 브라우저 진영에서도 HTML5등과 같이 발빠르게 대응하고 있습니다.

앞으로 넘어야 할 산도 많지만, 브라우저가 궁극적으로 가야할 산인것 같습니다.

시행착오는 있겠지만 꼭 WebGL이 성공해서 어디서나 와우, 리니지와 같은 게임도 할 수 있고, 플러그인 없이도 보다 편리하고 화려한 UI를 제공받을 수 있는 시대가 되었으면 하는 바램입니다.

참고

[Wikipedia] http://en.wikipedia.org/wiki/WebGL
[khronos] http://www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet
[O3D] http://code.google.com/intl/ko-KR/apis/o3d/
http://www.khronos.org/developers/library/2009_siggraph_bof_opengl/OpenGL-BOF-WebGL-Siggraph-Aug09.pdf
http://webkit.org/blog/603/webgl-now-available-in-webkit-nightlies/


신고
0 0
Browser
지난 주 금요일(9월4일) "제 3회 미래 웹 기술 포럼"에 참석했었습니다.

포럼 주제는 각 브라우저 벤더들의 데스크탑 브라우저(Browser update라는 이름으로)와 모바일 브라우저에 대한 내용이었습니다.
Webkit 기반의 브라우저 벤더가 빠진 상황에서 Opera, MS, Mozilla재단에서 발표가 있었으며, 각 벤더들이 관심있게 보고 있는 거의 비슷하다는 느낌이었습니다. 포럼 내용이 저에게는 상당히 만족스러웠으나, Webkit 기반의 브라우저가 빠져있어서 아쉬웠습니다.^^

우선 각 벤더들의 내용을 정리하자면,

Microsoft

인터넷 익스플로러 8 
MS에서는 IE8에 대해서 크게 웹표준, 웹접근성, 웹보안이라는 주제에 대해서 MS 박중석님이 이야기를 풀어나갔습니다.
HTML4.01, CSS2.1를 준수하며 ACID2를 통과했으며, ACID3에서 낮은 점수를 받은 이유에 대해서는 개발 초기에 고려하지 않았던 항목들이 ACID3에 포함되어 있기 때문이라고 합니다. MS도 웹 표준의 중요성을 아주 잘 알고 있으며, 이를 준수하려고 노력한다고 합니다. 그외 웹접근성에 대해서는 커서 브라우징, Adaptive Zoom, ARIA지원등에 대해서도 발표하였습니다. 자세한 내용 및 발표 자료는 발표자님의 블로그를 참고하시길 바랍니다.
MS 의 모바일 브라우저(IE6)에 대해서는 MS 서진호님의  발표가 있었는데, 크게 눈에 띄는 것이 UX와 Widget이었습니다. Minimap, Icon Bar형태, Full Screen toggle icon, Zoom slide, All-in-one 검색(즐겨찾기, 히스토리, 자동철자, 검색창 검색을 한번에..)등의 UX가 적용되었다고 합니다. 또한 HomeScreen에 플러그인 형태 지원 및 위젯도 지원한다고 합니다. Widget은 W3C(Ajax,HTML,CSS)를 준수하여 개발할 수 있으며 Market place에서 판매 가능하다고 합니다.

Mozilla

Firefox         Image:Appman-main.png
 Mozilla 재단에서는 Firefox에 대해서 윤석찬님이 발표를 하셨는데, FF는 현재 Speed, UX, Security, Customization등을 주력으로 개발하고 있다고 합니다. 올해 출시 예정인 FF 3.6은 JS엔진(JIT등의 개선)등을 통해 성능개선을 목표로 하고 있다고 합니다. HTML5에 대해서도 상당한 관심을 가지고 있었으며, Video및 Geolocation등에 대해서도 발표가 있었습니다. 관련되 내용은 http://hacks.mozilla.org을 참고하시길 바랍니다. 또한 이젠 더이상 XPCOM기반의 plugin을 개발할 수 없으며, NPAPI(NPRuntime)기반으로 개발해야 한다고 합니다.

 모바일 브라우저에 대해서는 모질라재단의 프로젝트인 Fennec에 대해서 삼성전자의 허준회님의 발표가 있었습니다. 브라우저 내부의 기술적인 내용이 많았으며 기존 모바일 브라우저와는 차별화된 새로운 UI 제공하고, Weave(Mobile 단말과 PC등에서 북마크, 탭등을 sync) 연동 기능 탑재했다고 합니다. 적용 플랫폼으로는 linux(maemo/LiMo), Windows Mobile, Symbian이 있으며, OMTP의 Bondi와 유사한 Device API에 대한 내용도 있었습니다.

Opera



 Opera 에서는 얼마전에 출시된 Opera 10에 대해서 Opera 신혁석님의 발표가 있었으며, 제 블로그에서도 언급됐던 opera unite기술 및 Opera turbo기술에 대한 내용도 있었습니다. Opera의 모바일 브라우저에 대해서는 Opera Mobile 9.7에 대해서 opera 조만영님이 발표했으며, HW가속이용 (OpenGL ES이용가능),Opera Turbo 기술 탑재, Google Gears, 렌더링 엔진(Presto 2.2 탑재) 향상으로 25% 성능이 향상되었다고 하며, Widget(W3C 표준 준수)에 대한 내용도 발표했습니다.

 오페라나 모질라에서는 HTML5를 적극 수용하고 확산시키려고 하는 느낌을 받았으며, 오페라와 MS는 W3C의 위젯플랫폼을 확산시키려고 하는 느낌을 받았습니다. 또한 모든 브라우저 벤더들이 iPod touch/iPhone이후 사용자 경험(UX)에 상당히 많은 관심을 가지고 있는 것으로 보입니다.

 현재까지 각 브라우저 벤더들의 관심사가 성능과 웹표준이었다면, 성능은 여전히 중요하지만 이제 어느 정도 비슷해졌기 때문에 더이상의 장점이 될 수 없으며, 웹표준 준수도 어느 정도 정착되었기 때문에 더이상의 장점이 될 수는 없을 것입니다. 물론 성능이나 웹표준은 여전히 중요하지만, 이제는 다른 측면에서 브라우저가 변화될 것입니다.

제 생각에는 키워드는 2012년 spec이 완료 예정인 HTML5, UX, Widget의 3개라고 생각합니다. 플랫폼이 모바일 단말, IPTV, 데스크탑 PC등 어느 것이 되던지간에 3개가 핵심이 될것이라고 생각합니다. 여러분들의 생각은 어떤가요?

* 추가 내용(2009.0910)
포럼 발표자료는 http://futureweb.tistory.com/14를 참고하시길 바랍니다.
신고
3 0
1
블로그 이미지

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

smartech

티스토리 툴바