SlideShare a Scribd company logo

The current status of html5 technology and standard

•
•
Wonsuk Lee
Wonsuk Lee

The document discusses the current status of HTML5 technology and standards. It provides an overview of recent developments in the industry regarding HTML5, compares HTML5 to other technologies like Flash and Silverlight, and highlights examples of Google using HTML5 in products like Gmail and new features enabled by HTML5. It also covers the browser support and standardization status of HTML5, including details about the W3C working groups developing HTML5 and related standards.

Related slideshows

HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)
 
HTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi LHTML5 Introduction by Dhepthi L
HTML5 Introduction by Dhepthi L
 
Software Development Trends 2010-2011
Software Development Trends 2010-2011Software Development Trends 2010-2011
Software Development Trends 2010-2011
 
1 of 76
The current status of HTML5 technology and standard2010. 07. 08Wonsuk Lee/ ETRI@wonsuk73http://www.wonsuk73.com/
2HTML5 관련 최근 주요업계 동향은 ?
3HTML5 vs (Flash vsSilverlight)
4
5<Source: http://www.apple.com/ipad/ready-for-ipad/ ><Source: http://www.apple.com/html5/ >
6
7<Source: http://mashable.com/2010/05/07/google-reader-adds-html5-support/>
8<Source: http://www.computerworld.com/s/article/print/9178558/Google_to_use_HTML5_in_Gmail?taxonomyName=App+Development&taxonomyId=11 >
Google to use HTML5 in GmailSpeed is a featureGoal is to get Gmail to load in under a secondOffline supportHTML5's database standardsNew featuresdownloadurl: a new data transfer protocolHTML6 ???Code size443,000 lines of JavaScript978,000 lines with comments9
Google I/O ConferenceChrome Web Storean existing web app a serverless app10
Google I/O ConferenceHTML5 Tweetdeck App11
Google I/O ConferenceWebM Project12
13<Source: http://www.html5rocks.com/>
14< Source: http://thenextweb.com/apps/2010/03/04/internet-explorer-9-html5-compatible-microsoft-joining-antiflash-movement/>
IE9 : HTML5와 GPU15<Source: IE9 : HTML5와 GPU 발표자료 (황리건) >
MS IE9Preview #3까지 출시HTML5 비디오/오디오와 SVG 지원 예정GPU 활용한 랜더링 기능 지원 IE9 공식 버전은 언제 출시 ???HTML5를 지원하는 모바일 브라우저 로드맵은???16
17
18H.264: 31% ( Q2/09 )  66% ( Q1/10 )Flash : 69% ( Q2/09 )   26% ( Q1/10 )<Source: Encoding.com via TechCrunch>
19HTML5 표준 개요 및 특징은?
HTML Timeline20[ Source : Appleinsider ]
What is HTML5 ?21Structure and SemanticAPIs
HTML Design Principles22<Source: http://www.w3.org/TR/html-design-principles/ >
Document Representations (문서 표현)HTML 5XHTML 5text/htmlapplication/xhtml+xmlDocumentDOM
The DOCTYPE<!DOCTYPE html>Just 15 characterHTML5 doc !!!Case-insensitiveBackwards compatibility24How about Google page ? Is it based on the HTML5 ?
HTML5 Basic StructureCommon structuresDifferentiation & Style. How about Semantic?What is the potential of new elements?E.g. Search engine, etc25[ HTML4][ HTML5]
Example26
New Elements in HTML5New Markup Elements – for better structureNew Media Elements – for media contentThe Canvas Element – for drawingNew Form Elements and Input type attribute values27
New Markup Elements – for better structure<mark>for indicating text as marked or highlighted<time>for declaring the date and/or time within an HTML document. 28
New Markup Elements – for better structure<meter>for indicating a scalar measurement within a known range, or a fractional value<progress>for representing the progress of a task29
New Markup Elements – for better structure30
New Markup Elements – for better structure31
New Media Elements – for media content32
New Form Elements and Input type attribute values33
New Form Elements and Input type attribute values34
Web FormsPlaceholder textAn autofocus attribute35
Web Forms36
Form DemoHTML5 input UI supportPayment form37
(Reference) HTML5 elements3828 New Elements are added&7 elements are changed
HTML5 Features39Canvas / SVGVideo / AudioGeolocationOffline web appsWeb SocketLocal StorageMore features …Web SQL DatabaseWeb Workers
CanvasWhat is Canvas ?Dynamic and interactive graphicsDraw images using 2D drawing APILines, curves, shapes, fills, etc.Useful for Graphs, Applications, Games, etc.40[ http://canvaspaint.org/ ] [http://www.liquidx.net/plotkit/ ][http://www.benjoffe.com/code/demos/canvascape/]
CanvasExample<canvas id="myDrawing" width="200" height="200"></canvas><h1>Hello World!</h1>vardrawingCanvas = document.getElementById('myDrawing');var context = drawingCanvas.getContext('2d');// Create the yellow facecontext.strokeStyle = "#000000";context.fillStyle = "#FFFF00";context.beginPath();context.arc(100,100,50,0,Math.PI*2,true);context.closePath();context.stroke();context.fill();41
Canvas DemoAppspotRectangleWaveCanvascape - "Experimenting With Textures“Depth of Field42
SVGWhat is SVG ?Scalable Vector GraphicHTML-like tags for drawing43<!DOCTYPE html><html><body><svg width="200" height="200"> <rectx="0" y="0"width="100" height="100"fill="blue" stroke="red"stroke-width="5px"rx="8" ry="8"id="myRect" class="chart" /></svg></body></html>
SVG DemoPhotosSVG Filter44
Video / AudioHTML4에서 Flash 동영상 추가45
Video / AudioEmbedding multimedia will get easier through the user of tags like <audio> and <video>46<Source: Dive into html5>
Video / Audio마크업<video> and <audio> as easy as <img>애트리뷰트src, width, height, controls, poster, autoplay, autobuffer, loop하나 이상의 미디어 타입 처리47
Video / Audio자바스크립트메소드play(), pause()애트리뷰트volume, muted, currentTime이벤트loadeddata, play, pause, timeupdate, ended48
Video DemoCanvasVideoVideo Showcase (Apple)49
GeolocationGeolocation APIbrings browser-based location to your apps50navigator.geolocation.getCurrentPosition( function(position) {var lat = position.coords.latitude;varlon = position.coords.longitude;showLocation(lat, lon); });
Offline Web AppsWeb apps need to work everywhereDatabase and app cache store user data and app resources locally51
Offline Web AppsApp CacheList resources that you want to take offline52cache.manifest file/static/stickies.html/media/deleteButton.png/media/deleteButtonPressed.png/css/stickies.css/js/stickies.jsHTML file<body manifest="./cache.manifest"></body>
Web SQL DatabaseDatabases right in the browserAround 5MB per domainAccessible across tabs and windowsBased on SQLiteFeatures: Transaction, SQL queries53var db = window.openDatabase("NoteTest", "1.0“, "Example DB“, 200000);function saveMe(id, text, timestamp, left, top, zIndex) {db.transaction( function (tx) {tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); } );}
Web StorageKey/value pair (hash) storageHash-based storage of strings (not objects).10 MB per zone.Two kinds:sessionStorage:Die when browser closesNot shared between tabslocalStorageCrash-safeShared BW tabs / windows and sessions – but not zones.54
Web SocketsTCP for the Weba next-generation bidirectional communication technology for web applications 55if ("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.}
Web Sockets구글 크롬 개발자 채널 버전 4.0.249.0.Web Socket을 기본기능으로 지원Web Socket extension for Apache HTTP Serverpywebsockettesting or experimental purposesmod_pywebsocketmod_pythonmod_ssl for wsshttp://code.google.com/p/pywebsocket/jWebSockethttp://jwebsocket.org/56
Web SocketsHTML5 Web Sockets and the Need for Speed!http://www.kaazing.com/blog/?p=301http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html ( Demo )57The Web Sockets experience is 55 times faster than XHR
Web WorkersAPI for running background scriptsThreads for Web appsBrowser SupportFirefox 3.5Safari 4Chrome 4Useful for gaming, graphics, crypto and etc.58
Web WorkersWorkers‘parent’ page 접근 제한예제59The parent page<script>var worker = new Worker('worker.js');worker.onmessage = function (event) { console.log('Results: ' + event.data); };</script>worker.jsfunction findPrimes() { // ... prime algorithm herepostMessage(nextPrime);}findPrimes();
Web Workers and other DemosMotion Tracker (FF)Web FontsFile Drag and Drop (FF)60
W3C Device APIs61
62HTML5 관련 주요 표준화 현황은?
HTML5의 표준의 범위Paul Cotton (HTML WG Co-chair) Interview기본 입장HTML 마크업내에서 활용되는 모든 API가 HTML5 표준의 범주W3C 관련 WGHTML WGWeb Application WGDevice API WGGeolocation WGMedia Annotation WG ? …63
HTML5 표준화 현황W3C WGs related with HTML5HTML WGHTML5, HTML+RDFa, HTML Microdata, HTML Canvas 2D Context, HTML: The Markup Language, HTML5 diffs from HTML4, etcWeb Applications WGWeb Storage, Indexed Database API, File API, Server-Sent Event, Web Sockets API, Web Workers, Programmable HTTP Caching and Serving, Web SQL Database, etcDevice APIs and Policy WGCalendar, Contact, Media Capture, Messaging, System Information, File Writer, Gallery, Powerbox, Application Launcher, etcGeolocation WGGeolocation API64
W3C HTML WGMilestones ( This schedule was removed )2007-05 HTML5 and Web Forms 2.0 specs adopted as basis for review2007-11 HTML Design Principles First Public Working Draft2008-02 HTML5 First Public Working Draft2010-01 HTML5 Last Call Working Draft2010-12? HTML5 Candidate Recommendation2012-01? HTML5 Proposed Recommendation2012-03? HTML5 RecommendationParticipants407 group participants,407 in good standing,140 participants from 37 organizations267 Invited Experts65
W3C Device API 표준화66W3C Device API (국제표준)웹 기반 공통 API
Status of DAP Deliverables67(모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)
Status of DAP Deliverables68(모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)
69브라우저별HTML5 지원 현황은?
Browser SupportHTML5 is just W3C Working Draft. But Some core features are already supported by a lot of browsers70IE
Browser Support71
(Reference) HTML5 Validatorhttp://validator.nu/72
73HTML5 에 대한 전망
HTML5에 대한 이슈 및 전망이슈브라우저 호환성, 브라우저 처리 속도, 개발도구, W3C의 표준화일정 등전망브라우저 경쟁에 따른 빠른 HTML5 활성화 예상특히 모바일HTML5 앱 증가 예상E.g. HTML5 Yahoo! Mail web app다양한 애플리케이션 개발 시도E.g. noVNC: HTML5 VNC Client74
이원석 (Wonsuk Lee)/선임연구원/Ph.D.ETRI 표준연구센터 서비스융합표준연구팀W3C 대한민국 사무국 코디네이터/모바일 웹2.0 포럼 HTML5 AG 의장W3C Media Annotation WG 에디터/ W3C Device API WG 에디터/W3C HTML WG / W3C Web Application WG 멤버Email: wslee@etri.re.kr, wslee@w3.orgPhone: 042-860-4893, 010-5800-399775
References[brad Neuberg] Introduction to HTML5, http://codinginparadise.org/presentations/intro_html5.pdf[Mark Pilgrim] Dive into HTML5, http://diveintohtml5.org/[Nabtron] New Elements introduced in HTML5, http://nabtron.com/new-elements-in-html5/1910/[W3C HTML WG], http://www.w3.org/html/wg/[W3C Web Applications WG], http://www.w3.org/2008/webapps/76

More Related Content

The current status of html5 technology and standard

  • 1. The current status of HTML5 technology and standard2010. 07. 08Wonsuk Lee/ ETRI@wonsuk73http://www.wonsuk73.com/
  • 2. 2HTML5 관련 최근 주요업계 동향은 ?
  • 3. 3HTML5 vs (Flash vsSilverlight)
  • 4. 4
  • 6. 6
  • 9. Google to use HTML5 in GmailSpeed is a featureGoal is to get Gmail to load in under a secondOffline supportHTML5's database standardsNew featuresdownloadurl: a new data transfer protocolHTML6 ???Code size443,000 lines of JavaScript978,000 lines with comments9
  • 10. Google I/O ConferenceChrome Web Storean existing web app a serverless app10
  • 11. Google I/O ConferenceHTML5 Tweetdeck App11
  • 15. IE9 : HTML5와 GPU15<Source: IE9 : HTML5와 GPU 발표자료 (황리건) >
  • 16. MS IE9Preview #3까지 출시HTML5 비디오/오디오와 SVG 지원 예정GPU 활용한 랜더링 기능 지원 IE9 공식 버전은 언제 출시 ???HTML5를 지원하는 모바일 브라우저 로드맵은???16
  • 17. 17
  • 18. 18H.264: 31% ( Q2/09 )  66% ( Q1/10 )Flash : 69% ( Q2/09 )   26% ( Q1/10 )<Source: Encoding.com via TechCrunch>
  • 19. 19HTML5 표준 개요 및 특징은?
  • 20. HTML Timeline20[ Source : Appleinsider ]
  • 21. What is HTML5 ?21Structure and SemanticAPIs
  • 22. HTML Design Principles22<Source: http://www.w3.org/TR/html-design-principles/ >
  • 23. Document Representations (문서 표현)HTML 5XHTML 5text/htmlapplication/xhtml+xmlDocumentDOM
  • 24. The DOCTYPE<!DOCTYPE html>Just 15 characterHTML5 doc !!!Case-insensitiveBackwards compatibility24How about Google page ? Is it based on the HTML5 ?
  • 25. HTML5 Basic StructureCommon structuresDifferentiation & Style. How about Semantic?What is the potential of new elements?E.g. Search engine, etc25[ HTML4][ HTML5]
  • 27. New Elements in HTML5New Markup Elements – for better structureNew Media Elements – for media contentThe Canvas Element – for drawingNew Form Elements and Input type attribute values27
  • 28. New Markup Elements – for better structure<mark>for indicating text as marked or highlighted<time>for declaring the date and/or time within an HTML document. 28
  • 29. New Markup Elements – for better structure<meter>for indicating a scalar measurement within a known range, or a fractional value<progress>for representing the progress of a task29
  • 30. New Markup Elements – for better structure30
  • 31. New Markup Elements – for better structure31
  • 32. New Media Elements – for media content32
  • 33. New Form Elements and Input type attribute values33
  • 34. New Form Elements and Input type attribute values34
  • 37. Form DemoHTML5 input UI supportPayment form37
  • 38. (Reference) HTML5 elements3828 New Elements are added&7 elements are changed
  • 39. HTML5 Features39Canvas / SVGVideo / AudioGeolocationOffline web appsWeb SocketLocal StorageMore features …Web SQL DatabaseWeb Workers
  • 40. CanvasWhat is Canvas ?Dynamic and interactive graphicsDraw images using 2D drawing APILines, curves, shapes, fills, etc.Useful for Graphs, Applications, Games, etc.40[ http://canvaspaint.org/ ] [http://www.liquidx.net/plotkit/ ][http://www.benjoffe.com/code/demos/canvascape/]
  • 41. CanvasExample<canvas id="myDrawing" width="200" height="200"></canvas><h1>Hello World!</h1>vardrawingCanvas = document.getElementById('myDrawing');var context = drawingCanvas.getContext('2d');// Create the yellow facecontext.strokeStyle = "#000000";context.fillStyle = "#FFFF00";context.beginPath();context.arc(100,100,50,0,Math.PI*2,true);context.closePath();context.stroke();context.fill();41
  • 42. Canvas DemoAppspotRectangleWaveCanvascape - "Experimenting With Textures“Depth of Field42
  • 43. SVGWhat is SVG ?Scalable Vector GraphicHTML-like tags for drawing43<!DOCTYPE html><html><body><svg width="200" height="200"> <rectx="0" y="0"width="100" height="100"fill="blue" stroke="red"stroke-width="5px"rx="8" ry="8"id="myRect" class="chart" /></svg></body></html>
  • 45. Video / AudioHTML4에서 Flash 동영상 추가45
  • 46. Video / AudioEmbedding multimedia will get easier through the user of tags like <audio> and <video>46<Source: Dive into html5>
  • 47. Video / Audio마크업<video> and <audio> as easy as <img>애트리뷰트src, width, height, controls, poster, autoplay, autobuffer, loop하나 이상의 미디어 타입 처리47
  • 48. Video / Audio자바스크립트메소드play(), pause()애트리뷰트volume, muted, currentTime이벤트loadeddata, play, pause, timeupdate, ended48
  • 50. GeolocationGeolocation APIbrings browser-based location to your apps50navigator.geolocation.getCurrentPosition( function(position) {var lat = position.coords.latitude;varlon = position.coords.longitude;showLocation(lat, lon); });
  • 51. Offline Web AppsWeb apps need to work everywhereDatabase and app cache store user data and app resources locally51
  • 52. Offline Web AppsApp CacheList resources that you want to take offline52cache.manifest file/static/stickies.html/media/deleteButton.png/media/deleteButtonPressed.png/css/stickies.css/js/stickies.jsHTML file<body manifest="./cache.manifest"></body>
  • 53. Web SQL DatabaseDatabases right in the browserAround 5MB per domainAccessible across tabs and windowsBased on SQLiteFeatures: Transaction, SQL queries53var db = window.openDatabase("NoteTest", "1.0“, "Example DB“, 200000);function saveMe(id, text, timestamp, left, top, zIndex) {db.transaction( function (tx) {tx.executeSql( "INSERT INTO WebKitStickyNotes " + "(id, note, timestamp, left, top, zindex) " + "VALUES (?, ?, ?, ?, ?, ?)", [id, text, timestamp, left, top, zIndex]); } );}
  • 54. Web StorageKey/value pair (hash) storageHash-based storage of strings (not objects).10 MB per zone.Two kinds:sessionStorage:Die when browser closesNot shared between tabslocalStorageCrash-safeShared BW tabs / windows and sessions – but not zones.54
  • 55. Web SocketsTCP for the Weba next-generation bidirectional communication technology for web applications 55if ("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.}
  • 56. Web Sockets구글 크롬 개발자 채널 버전 4.0.249.0.Web Socket을 기본기능으로 지원Web Socket extension for Apache HTTP Serverpywebsockettesting or experimental purposesmod_pywebsocketmod_pythonmod_ssl for wsshttp://code.google.com/p/pywebsocket/jWebSockethttp://jwebsocket.org/56
  • 57. Web SocketsHTML5 Web Sockets and the Need for Speed!http://www.kaazing.com/blog/?p=301http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html ( Demo )57The Web Sockets experience is 55 times faster than XHR
  • 58. Web WorkersAPI for running background scriptsThreads for Web appsBrowser SupportFirefox 3.5Safari 4Chrome 4Useful for gaming, graphics, crypto and etc.58
  • 59. Web WorkersWorkers‘parent’ page 접근 제한예제59The parent page<script>var worker = new Worker('worker.js');worker.onmessage = function (event) { console.log('Results: ' + event.data); };</script>worker.jsfunction findPrimes() { // ... prime algorithm herepostMessage(nextPrime);}findPrimes();
  • 60. Web Workers and other DemosMotion Tracker (FF)Web FontsFile Drag and Drop (FF)60
  • 62. 62HTML5 관련 주요 표준화 현황은?
  • 63. HTML5의 표준의 범위Paul Cotton (HTML WG Co-chair) Interview기본 입장HTML 마크업내에서 활용되는 모든 API가 HTML5 표준의 범주W3C 관련 WGHTML WGWeb Application WGDevice API WGGeolocation WGMedia Annotation WG ? …63
  • 64. HTML5 표준화 현황W3C WGs related with HTML5HTML WGHTML5, HTML+RDFa, HTML Microdata, HTML Canvas 2D Context, HTML: The Markup Language, HTML5 diffs from HTML4, etcWeb Applications WGWeb Storage, Indexed Database API, File API, Server-Sent Event, Web Sockets API, Web Workers, Programmable HTTP Caching and Serving, Web SQL Database, etcDevice APIs and Policy WGCalendar, Contact, Media Capture, Messaging, System Information, File Writer, Gallery, Powerbox, Application Launcher, etcGeolocation WGGeolocation API64
  • 65. W3C HTML WGMilestones ( This schedule was removed )2007-05 HTML5 and Web Forms 2.0 specs adopted as basis for review2007-11 HTML Design Principles First Public Working Draft2008-02 HTML5 First Public Working Draft2010-01 HTML5 Last Call Working Draft2010-12? HTML5 Candidate Recommendation2012-01? HTML5 Proposed Recommendation2012-03? HTML5 RecommendationParticipants407 group participants,407 in good standing,140 participants from 37 organizations267 Invited Experts65
  • 66. W3C Device API 표준화66W3C Device API (국제표준)웹 기반 공통 API
  • 67. Status of DAP Deliverables67(모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)
  • 68. Status of DAP Deliverables68(모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)
  • 70. Browser SupportHTML5 is just W3C Working Draft. But Some core features are already supported by a lot of browsers70IE
  • 74. HTML5에 대한 이슈 및 전망이슈브라우저 호환성, 브라우저 처리 속도, 개발도구, W3C의 표준화일정 등전망브라우저 경쟁에 따른 빠른 HTML5 활성화 예상특히 모바일HTML5 앱 증가 예상E.g. HTML5 Yahoo! Mail web app다양한 애플리케이션 개발 시도E.g. noVNC: HTML5 VNC Client74
  • 75. 이원석 (Wonsuk Lee)/선임연구원/Ph.D.ETRI 표준연구센터 서비스융합표준연구팀W3C 대한민국 사무국 코디네이터/모바일 웹2.0 포럼 HTML5 AG 의장W3C Media Annotation WG 에디터/ W3C Device API WG 에디터/W3C HTML WG / W3C Web Application WG 멤버Email: wslee@etri.re.kr, wslee@w3.orgPhone: 042-860-4893, 010-5800-399775
  • 76. References[brad Neuberg] Introduction to HTML5, http://codinginparadise.org/presentations/intro_html5.pdf[Mark Pilgrim] Dive into HTML5, http://diveintohtml5.org/[Nabtron] New Elements introduced in HTML5, http://nabtron.com/new-elements-in-html5/1910/[W3C HTML WG], http://www.w3.org/html/wg/[W3C Web Applications WG], http://www.w3.org/2008/webapps/76