The current status of HTML5 technology and standard<br />2010. 07. 08<br />Wonsuk Lee/ ETRI<br />@wonsuk73<br />http://www...
2<br />HTML5 관련 최근 주요업계 동향은 ?<br />
3<br />HTML5 vs (Flash vsSilverlight)<br />
4<br />
5<br /><Source: http://www.apple.com/ipad/ready-for-ipad/ ><br /><Source: http://www.apple.com/html5/ ><br />
6<br />
7<br /><Source: http://mashable.com/2010/05/07/google-reader-adds-html5-support/><br />
8<br /><Source: http://www.computerworld.com/s/article/print/9178558/Google_to_use_HTML5_in_Gmail?taxonomyName=App+Develop...
Google to use HTML5 in Gmail<br />Speed is a feature<br />Goal is to get Gmail to load in under a second<br />Offline supp...
Google I/O Conference<br />Chrome Web Store<br />an existing web app<br /> a serverless app<br />10<br />
Google I/O Conference<br />HTML5 Tweetdeck App<br />11<br />
Google I/O Conference<br />WebM Project<br />12<br />
13<br /><Source: http://www.html5rocks.com/><br />
14<br />< Source: http://thenextweb.com/apps/2010/03/04/internet-explorer-9-html5-compatible-microsoft-joining-antiflash-m...
IE9 : HTML5와 GPU<br />15<br /><Source: IE9 : HTML5와 GPU 발표자료 (황리건) ><br />
MS IE9<br />Preview #3까지 출시<br />HTML5 비디오/오디오와 SVG 지원 예정<br />GPU 활용한 랜더링 기능 지원 <br />IE9 공식 버전은 언제 출시 ???<br />HTML5를 지원...
17<br />
18<br />H.264: 31% ( Q2/09 )  66% ( Q1/10 )<br />Flash : 69% ( Q2/09 )   26% ( Q1/10 )<br /><Source: Encoding.com via Te...
19<br />HTML5 표준 개요 및 특징은?<br />
HTML Timeline<br />20<br />[ Source : Appleinsider ]<br />
What is HTML5 ?<br />21<br />Structure and Semantic<br />APIs<br />
HTML Design Principles<br />22<br /><Source: http://www.w3.org/TR/html-design-principles/ ><br />
Document Representations (문서 표현)<br />HTML 5<br />XHTML 5<br />text/html<br />application/xhtml+xml<br />Document<br />DOM...
The DOCTYPE<br /><!DOCTYPE html><br />Just 15 character<br />HTML5 doc !!!<br />Case-insensitive<br />Backwards compatibil...
HTML5 Basic Structure<br />Common structures<br />Differentiation & Style. How about Semantic?<br />What is the potential ...
Example<br />26<br />
New Elements in HTML5<br />New Markup Elements – for better structure<br />New Media Elements – for media content<br />The...
New Markup Elements – for better structure<br /><mark><br />for indicating text as marked or highlighted<br /><time><br />...
New Markup Elements – for better structure<br /><meter><br />for indicating a scalar measurement within a known range, or ...
New Markup Elements – for better structure<br />30<br />
New Markup Elements – for better structure<br />31<br />
New Media Elements – for media content<br />32<br />
New Form Elements and Input type attribute values<br />33<br />
New Form Elements and Input type attribute values<br />34<br />
Web Forms<br />Placeholder text<br />An autofocus attribute<br />35<br />
Web Forms<br />36<br />
Form Demo<br />HTML5 input UI support<br />Payment form<br />37<br />
(Reference) HTML5 elements<br />38<br />28 New Elements are added<br />&<br />7 elements are changed<br />
HTML5 Features<br />39<br />Canvas / SVG<br />Video / Audio<br />Geolocation<br />Offline web apps<br />Web Socket<br />Lo...
Canvas<br />What is Canvas ?<br />Dynamic and interactive graphics<br />Draw images using 2D drawing API<br />Lines, curve...
Canvas<br /><ul><li>Example</li></ul><canvas id="myDrawing" width="200" height="200"><br /></canvas><br /><h1>Hello World!...
Canvas Demo<br />Appspot<br />RectangleWave<br />Canvascape - "Experimenting With Textures“<br />Depth of Field<br />42<br />
SVG<br />What is SVG ?<br />Scalable Vector Graphic<br />HTML-like tags for drawing<br />43<br /><!DOCTYPE html><br /><htm...
SVG Demo<br />Photos<br />SVG Filter<br />44<br />
Video / Audio<br />HTML4에서 Flash 동영상 추가<br />45<br />
Video / Audio<br />Embedding multimedia will get easier through the user of tags like <audio> and <video><br />46<br /><So...
Video / Audio<br />마크업<br /><video> and <audio> as easy as <img><br />애트리뷰트<br />src, width, height, controls, poster, aut...
Video / Audio<br />자바스크립트<br />메소드<br />play(), pause()<br />애트리뷰트<br />volume, muted, currentTime<br />이벤트<br />loadeddat...
Video Demo<br />CanvasVideo<br />Video Showcase (Apple)<br />49<br />
Geolocation<br />Geolocation API<br />brings browser-based location to your apps<br />50<br />navigator.geolocation.getCur...
Offline Web Apps<br />Web apps need to work everywhere<br />Database and app cache store user data and app resources local...
Offline Web Apps<br />App Cache<br />List resources that you want to take offline<br />52<br />cache.manifest file<br />/s...
Web SQL Database<br />Databases right in the browser<br />Around 5MB per domain<br />Accessible across tabs and windows<br...
Web Storage<br />Key/value pair (hash) storage<br />Hash-based storage of strings (not objects).<br />10 MB per zone.<br /...
Web Sockets<br />TCP for the Web<br />a next-generation bidirectional communication technology for web applications <br />...
Web Sockets<br />구글 크롬 개발자 채널 버전 4.0.249.0.<br />Web Socket을 기본기능으로 지원<br />Web Socket extension for Apache HTTP Server<br...
Web Sockets<br />HTML5 Web Sockets and the Need for Speed!<br />http://www.kaazing.com/blog/?p=301<br />http://bloga.jp/ws...
Web Workers<br />API for running background scripts<br />Threads for Web apps<br />Browser Support<br />Firefox 3.5<br />S...
Web Workers<br />Workers<br />‘parent’ page 접근 제한<br />예제<br />59<br />The parent page<br /><script><br />var worker = new...
Web Workers and other Demos<br />Motion Tracker (FF)<br />Web Fonts<br />File Drag and Drop (FF)<br />60<br />
W3C Device APIs<br />61<br />
62<br />HTML5 관련 주요 표준화 현황은?<br />
HTML5의 표준의 범위<br />Paul Cotton (HTML WG Co-chair) Interview<br />기본 입장<br />HTML 마크업내에서 활용되는 모든 API가 HTML5 표준의 범주<br />W3C...
HTML5 표준화 현황<br />W3C WGs related with HTML5<br />HTML WG<br />HTML5, HTML+RDFa, HTML Microdata, HTML Canvas 2D Context, H...
W3C HTML WG<br />Milestones ( This schedule was removed )<br />2007-05 HTML5 and Web Forms 2.0 specs adopted as basis for ...
W3C Device API 표준화<br />66<br />W3C Device API (국제표준)<br />웹 기반 공통 API<br />
Status of DAP Deliverables<br />67<br />(모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)<br />
Status of DAP Deliverables<br />68<br />(모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)<br />
69<br />브라우저별HTML5 지원 현황은?<br />
Browser Support<br />HTML5 is just W3C Working Draft. But Some core features are already supported by a lot of browsers<br...
Browser Support<br />71<br />
(Reference) HTML5 Validator<br />http://validator.nu/<br />72<br />
73<br />HTML5 에 대한 전망<br />
HTML5에 대한 이슈 및 전망<br />이슈<br />브라우저 호환성, 브라우저 처리 속도, 개발도구, W3C의 표준화일정 등<br />전망<br />브라우저 경쟁에 따른 빠른 HTML5 활성화 예상<br />특히 모...
이원석 (Wonsuk Lee)/선임연구원/Ph.D.<br />ETRI 표준연구센터 서비스융합표준연구팀<br />W3C 대한민국 사무국 코디네이터/모바일 웹2.0 포럼 HTML5 AG 의장<br />W3C Media An...
References<br />[brad Neuberg] Introduction to HTML5, <br />		          http://codinginparadise.org/presentations/intro_ht...
Upcoming SlideShare
Loading in...5
×

The current status of html5 technology and standard

10,353

Published on

The current status of HTML5 technology and standard

Published in: Technology
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,353
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

The current status of html5 technology and standard

  1. 1. The current status of HTML5 technology and standard<br />2010. 07. 08<br />Wonsuk Lee/ ETRI<br />@wonsuk73<br />http://www.wonsuk73.com/<br />
  2. 2. 2<br />HTML5 관련 최근 주요업계 동향은 ?<br />
  3. 3. 3<br />HTML5 vs (Flash vsSilverlight)<br />
  4. 4. 4<br />
  5. 5. 5<br /><Source: http://www.apple.com/ipad/ready-for-ipad/ ><br /><Source: http://www.apple.com/html5/ ><br />
  6. 6. 6<br />
  7. 7. 7<br /><Source: http://mashable.com/2010/05/07/google-reader-adds-html5-support/><br />
  8. 8. 8<br /><Source: http://www.computerworld.com/s/article/print/9178558/Google_to_use_HTML5_in_Gmail?taxonomyName=App+Development&taxonomyId=11 ><br />
  9. 9. Google to use HTML5 in Gmail<br />Speed is a feature<br />Goal is to get Gmail to load in under a second<br />Offline support<br />HTML5's database standards<br />New features<br />downloadurl: a new data transfer protocol<br />HTML6 ???<br />Code size<br />443,000 lines of JavaScript<br />978,000 lines with comments<br />9<br />
  10. 10. Google I/O Conference<br />Chrome Web Store<br />an existing web app<br /> a serverless app<br />10<br />
  11. 11. Google I/O Conference<br />HTML5 Tweetdeck App<br />11<br />
  12. 12. Google I/O Conference<br />WebM Project<br />12<br />
  13. 13. 13<br /><Source: http://www.html5rocks.com/><br />
  14. 14. 14<br />< Source: http://thenextweb.com/apps/2010/03/04/internet-explorer-9-html5-compatible-microsoft-joining-antiflash-movement/><br />
  15. 15. IE9 : HTML5와 GPU<br />15<br /><Source: IE9 : HTML5와 GPU 발표자료 (황리건) ><br />
  16. 16. MS IE9<br />Preview #3까지 출시<br />HTML5 비디오/오디오와 SVG 지원 예정<br />GPU 활용한 랜더링 기능 지원 <br />IE9 공식 버전은 언제 출시 ???<br />HTML5를 지원하는 모바일 브라우저 로드맵은???<br />16<br />
  17. 17. 17<br />
  18. 18. 18<br />H.264: 31% ( Q2/09 )  66% ( Q1/10 )<br />Flash : 69% ( Q2/09 )   26% ( Q1/10 )<br /><Source: Encoding.com via TechCrunch><br />
  19. 19. 19<br />HTML5 표준 개요 및 특징은?<br />
  20. 20. HTML Timeline<br />20<br />[ Source : Appleinsider ]<br />
  21. 21. What is HTML5 ?<br />21<br />Structure and Semantic<br />APIs<br />
  22. 22. HTML Design Principles<br />22<br /><Source: http://www.w3.org/TR/html-design-principles/ ><br />
  23. 23. Document Representations (문서 표현)<br />HTML 5<br />XHTML 5<br />text/html<br />application/xhtml+xml<br />Document<br />DOM<br />
  24. 24. The DOCTYPE<br /><!DOCTYPE html><br />Just 15 character<br />HTML5 doc !!!<br />Case-insensitive<br />Backwards compatibility<br />24<br />How about Google page ? Is it based on the HTML5 ?<br />
  25. 25. HTML5 Basic Structure<br />Common structures<br />Differentiation & Style. How about Semantic?<br />What is the potential of new elements?<br />E.g. Search engine, etc<br />25<br />[ HTML4]<br />[ HTML5]<br />
  26. 26. Example<br />26<br />
  27. 27. New Elements in HTML5<br />New Markup Elements – for better structure<br />New Media Elements – for media content<br />The Canvas Element – for drawing<br />New Form Elements and Input type attribute values<br />27<br />
  28. 28. New Markup Elements – for better structure<br /><mark><br />for indicating text as marked or highlighted<br /><time><br />for declaring the date and/or time within an HTML document. <br />28<br />
  29. 29. New Markup Elements – for better structure<br /><meter><br />for indicating a scalar measurement within a known range, or a fractional value<br /><progress><br />for representing the progress of a task<br />29<br />
  30. 30. New Markup Elements – for better structure<br />30<br />
  31. 31. New Markup Elements – for better structure<br />31<br />
  32. 32. New Media Elements – for media content<br />32<br />
  33. 33. New Form Elements and Input type attribute values<br />33<br />
  34. 34. New Form Elements and Input type attribute values<br />34<br />
  35. 35. Web Forms<br />Placeholder text<br />An autofocus attribute<br />35<br />
  36. 36. Web Forms<br />36<br />
  37. 37. Form Demo<br />HTML5 input UI support<br />Payment form<br />37<br />
  38. 38. (Reference) HTML5 elements<br />38<br />28 New Elements are added<br />&<br />7 elements are changed<br />
  39. 39. HTML5 Features<br />39<br />Canvas / SVG<br />Video / Audio<br />Geolocation<br />Offline web apps<br />Web Socket<br />Local Storage<br />More features …<br />Web SQL Database<br />Web Workers<br />
  40. 40. Canvas<br />What is Canvas ?<br />Dynamic and interactive graphics<br />Draw images using 2D drawing API<br />Lines, curves, shapes, fills, etc.<br />Useful for Graphs, Applications, Games, etc.<br />40<br />[ http://canvaspaint.org/ ]<br /> [http://www.liquidx.net/plotkit/ ]<br />[http://www.benjoffe.com/code/demos/canvascape/]<br />
  41. 41. Canvas<br /><ul><li>Example</li></ul><canvas id="myDrawing" width="200" height="200"><br /></canvas><br /><h1>Hello World!</h1><br />vardrawingCanvas = document.getElementById('myDrawing');<br />var context = drawingCanvas.getContext('2d');<br />// Create the yellow face<br />context.strokeStyle = "#000000";<br />context.fillStyle = "#FFFF00";<br />context.beginPath();<br />context.arc(100,100,50,0,Math.PI*2,true);<br />context.closePath();<br />context.stroke();<br />context.fill();<br />41<br />
  42. 42. Canvas Demo<br />Appspot<br />RectangleWave<br />Canvascape - "Experimenting With Textures“<br />Depth of Field<br />42<br />
  43. 43. SVG<br />What is SVG ?<br />Scalable Vector Graphic<br />HTML-like tags for drawing<br />43<br /><!DOCTYPE html><br /><html><br /><body><br /><svg width="200" height="200"><br /> <rect<br />x="0" y="0"<br />width="100" height="100"<br />fill="blue" stroke="red"<br />stroke-width="5px"<br />rx="8" ry="8"<br />id="myRect" class="chart" /><br /></svg><br /></body><br /></html><br />
  44. 44. SVG Demo<br />Photos<br />SVG Filter<br />44<br />
  45. 45. Video / Audio<br />HTML4에서 Flash 동영상 추가<br />45<br />
  46. 46. Video / Audio<br />Embedding multimedia will get easier through the user of tags like <audio> and <video><br />46<br /><Source: Dive into html5><br />
  47. 47. Video / Audio<br />마크업<br /><video> and <audio> as easy as <img><br />애트리뷰트<br />src, width, height, controls, poster, autoplay, autobuffer, loop<br />하나 이상의 미디어 타입 처리<br />47<br />
  48. 48. Video / Audio<br />자바스크립트<br />메소드<br />play(), pause()<br />애트리뷰트<br />volume, muted, currentTime<br />이벤트<br />loadeddata, play, pause, timeupdate, ended<br />48<br />
  49. 49. Video Demo<br />CanvasVideo<br />Video Showcase (Apple)<br />49<br />
  50. 50. Geolocation<br />Geolocation API<br />brings browser-based location to your apps<br />50<br />navigator.geolocation.getCurrentPosition(<br /> function(position) {<br />var lat = position.coords.latitude;<br />varlon = position.coords.longitude;<br />showLocation(lat, lon);<br /> }<br />);<br />
  51. 51. Offline Web Apps<br />Web apps need to work everywhere<br />Database and app cache store user data and app resources locally<br />51<br />
  52. 52. Offline Web Apps<br />App Cache<br />List resources that you want to take offline<br />52<br />cache.manifest file<br />/static/stickies.html<br />/media/deleteButton.png<br />/media/deleteButtonPressed.png<br />/css/stickies.css<br />/js/stickies.js<br />HTML file<br /><body manifest="./cache.manifest"><br /></body><br />
  53. 53. Web SQL Database<br />Databases right in the browser<br />Around 5MB per domain<br />Accessible across tabs and windows<br />Based on SQLite<br />Features: Transaction, SQL queries<br />53<br />var db = window.openDatabase("NoteTest", "1.0“, "Example DB“, 200000);<br />function saveMe(id, text, timestamp, left, top, zIndex) {<br />db.transaction(<br /> function (tx) {<br />tx.executeSql(<br /> "INSERT INTO WebKitStickyNotes "<br /> + "(id, note, timestamp, left, top, zindex) "<br /> + "VALUES (?, ?, ?, ?, ?, ?)",<br /> [id, text, timestamp, left, top, zIndex]);<br /> }<br /> );<br />}<br />
  54. 54. Web Storage<br />Key/value pair (hash) storage<br />Hash-based storage of strings (not objects).<br />10 MB per zone.<br />Two kinds:<br />sessionStorage:<br />Die when browser closes<br />Not shared between tabs<br />localStorage<br />Crash-safe<br />Shared BW tabs / windows and sessions – but not zones.<br />54<br />
  55. 55. Web Sockets<br />TCP for the Web<br />a next-generation bidirectional communication technology for web applications <br />55<br />if ("WebSocket" in window) {varws = new WebSocket("ws://example.com/service");ws.onopen = function() { // Web Socket is connected. You can send data by send() method.ws.send("message to send"); .... };ws.onmessage = function (evt) { varreceived_msg = evt.data; ... };ws.onclose = function() { // websocket is closed. };} else {// the browser doesn't support WebSocket.}<br />
  56. 56. Web Sockets<br />구글 크롬 개발자 채널 버전 4.0.249.0.<br />Web Socket을 기본기능으로 지원<br />Web Socket extension for Apache HTTP Server<br />pywebsocket<br />testing or experimental purposes<br />mod_pywebsocket<br />mod_python<br />mod_ssl for wss<br />http://code.google.com/p/pywebsocket/<br />jWebSocket<br />http://jwebsocket.org/<br />56<br />
  57. 57. Web Sockets<br />HTML5 Web Sockets and the Need for Speed!<br />http://www.kaazing.com/blog/?p=301<br />http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html ( Demo )<br />57<br />The Web Sockets experience is 55 times faster than XHR<br />
  58. 58. Web Workers<br />API for running background scripts<br />Threads for Web apps<br />Browser Support<br />Firefox 3.5<br />Safari 4<br />Chrome 4<br />Useful for gaming, graphics, crypto and etc.<br />58<br />
  59. 59. Web Workers<br />Workers<br />‘parent’ page 접근 제한<br />예제<br />59<br />The parent page<br /><script><br />var worker = new Worker('worker.js');<br />worker.onmessage = function (event) {<br /> console.log('Results: ' + event.data);<br /> };<br /></script><br />worker.js<br />function findPrimes() {<br /> // ... prime algorithm here<br />postMessage(nextPrime);<br />}<br />findPrimes();<br />
  60. 60. Web Workers and other Demos<br />Motion Tracker (FF)<br />Web Fonts<br />File Drag and Drop (FF)<br />60<br />
  61. 61. W3C Device APIs<br />61<br />
  62. 62. 62<br />HTML5 관련 주요 표준화 현황은?<br />
  63. 63. HTML5의 표준의 범위<br />Paul Cotton (HTML WG Co-chair) Interview<br />기본 입장<br />HTML 마크업내에서 활용되는 모든 API가 HTML5 표준의 범주<br />W3C 관련 WG<br />HTML WG<br />Web Application WG<br />Device API WG<br />Geolocation WG<br />Media Annotation WG ? …<br />63<br />
  64. 64. HTML5 표준화 현황<br />W3C WGs related with HTML5<br />HTML WG<br />HTML5, HTML+RDFa, HTML Microdata, HTML Canvas 2D Context, HTML: The Markup Language, HTML5 diffs from HTML4, etc<br />Web Applications WG<br />Web Storage, Indexed Database API, File API, Server-Sent Event, Web Sockets API, Web Workers, Programmable HTTP Caching and Serving, Web SQL Database, etc<br />Device APIs and Policy WG<br />Calendar, Contact, Media Capture, Messaging, System Information, File Writer, Gallery, Powerbox, Application Launcher, etc<br />Geolocation WG<br />Geolocation API<br />64<br />
  65. 65. W3C HTML WG<br />Milestones ( This schedule was removed )<br />2007-05 HTML5 and Web Forms 2.0 specs adopted as basis for review<br />2007-11 HTML Design Principles First Public Working Draft<br />2008-02 HTML5 First Public Working Draft<br />2010-01 HTML5 Last Call Working Draft<br />2010-12? HTML5 Candidate Recommendation<br />2012-01? HTML5 Proposed Recommendation<br />2012-03? HTML5 Recommendation<br />Participants<br />407 group participants,<br />407 in good standing,<br />140 participants from 37 organizations<br />267 Invited Experts<br />65<br />
  66. 66. W3C Device API 표준화<br />66<br />W3C Device API (국제표준)<br />웹 기반 공통 API<br />
  67. 67. Status of DAP Deliverables<br />67<br />(모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)<br />
  68. 68. Status of DAP Deliverables<br />68<br />(모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)<br />
  69. 69. 69<br />브라우저별HTML5 지원 현황은?<br />
  70. 70. Browser Support<br />HTML5 is just W3C Working Draft. But Some core features are already supported by a lot of browsers<br />70<br />IE<br />
  71. 71. Browser Support<br />71<br />
  72. 72. (Reference) HTML5 Validator<br />http://validator.nu/<br />72<br />
  73. 73. 73<br />HTML5 에 대한 전망<br />
  74. 74. HTML5에 대한 이슈 및 전망<br />이슈<br />브라우저 호환성, 브라우저 처리 속도, 개발도구, W3C의 표준화일정 등<br />전망<br />브라우저 경쟁에 따른 빠른 HTML5 활성화 예상<br />특히 모바일HTML5 앱 증가 예상<br />E.g. HTML5 Yahoo! Mail web app<br />다양한 애플리케이션 개발 시도<br />E.g. noVNC: HTML5 VNC Client<br />74<br />
  75. 75. 이원석 (Wonsuk Lee)/선임연구원/Ph.D.<br />ETRI 표준연구센터 서비스융합표준연구팀<br />W3C 대한민국 사무국 코디네이터/모바일 웹2.0 포럼 HTML5 AG 의장<br />W3C Media Annotation WG 에디터/ W3C Device API WG 에디터/<br />W3C HTML WG / W3C Web Application WG 멤버<br />Email: wslee@etri.re.kr, wslee@w3.org<br />Phone: 042-860-4893, 010-5800-3997<br />75<br />
  76. 76. References<br />[brad Neuberg] Introduction to HTML5, <br /> http://codinginparadise.org/presentations/intro_html5.pdf<br />[Mark Pilgrim] Dive into HTML5, http://diveintohtml5.org/<br />[Nabtron] New Elements introduced in HTML5, <br />http://nabtron.com/new-elements-in-html5/1910/<br />[W3C HTML WG], http://www.w3.org/html/wg/<br />[W3C Web Applications WG], http://www.w3.org/2008/webapps/<br />76<br />

×