Your SlideShare is downloading. ×
0
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
The current status of html5 technology and standard
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The current status of html5 technology and standard

10,318

Published on

The current status of HTML5 technology and standard

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,318
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
0
Likes
13
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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<br />HTML5 관련 최근 주요업계 동향은 ?<br />
  • 3. 3<br />HTML5 vs (Flash vsSilverlight)<br />
  • 4. 4<br />
  • 5. 5<br /><Source: http://www.apple.com/ipad/ready-for-ipad/ ><br /><Source: http://www.apple.com/html5/ ><br />
  • 6. 6<br />
  • 7. 7<br /><Source: http://mashable.com/2010/05/07/google-reader-adds-html5-support/><br />
  • 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. 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. Google I/O Conference<br />Chrome Web Store<br />an existing web app<br /> a serverless app<br />10<br />
  • 11. Google I/O Conference<br />HTML5 Tweetdeck App<br />11<br />
  • 12. Google I/O Conference<br />WebM Project<br />12<br />
  • 13. 13<br /><Source: http://www.html5rocks.com/><br />
  • 14. 14<br />< Source: http://thenextweb.com/apps/2010/03/04/internet-explorer-9-html5-compatible-microsoft-joining-antiflash-movement/><br />
  • 15. IE9 : HTML5와 GPU<br />15<br /><Source: IE9 : HTML5와 GPU 발표자료 (황리건) ><br />
  • 16. MS IE9<br />Preview #3까지 출시<br />HTML5 비디오/오디오와 SVG 지원 예정<br />GPU 활용한 랜더링 기능 지원 <br />IE9 공식 버전은 언제 출시 ???<br />HTML5를 지원하는 모바일 브라우저 로드맵은???<br />16<br />
  • 17. 17<br />
  • 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<br />HTML5 표준 개요 및 특징은?<br />
  • 20. HTML Timeline<br />20<br />[ Source : Appleinsider ]<br />
  • 21. What is HTML5 ?<br />21<br />Structure and Semantic<br />APIs<br />
  • 22. HTML Design Principles<br />22<br /><Source: http://www.w3.org/TR/html-design-principles/ ><br />
  • 23. Document Representations (문서 표현)<br />HTML 5<br />XHTML 5<br />text/html<br />application/xhtml+xml<br />Document<br />DOM<br />
  • 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. 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. Example<br />26<br />
  • 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. 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. 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. New Markup Elements – for better structure<br />30<br />
  • 31. New Markup Elements – for better structure<br />31<br />
  • 32. New Media Elements – for media content<br />32<br />
  • 33. New Form Elements and Input type attribute values<br />33<br />
  • 34. New Form Elements and Input type attribute values<br />34<br />
  • 35. Web Forms<br />Placeholder text<br />An autofocus attribute<br />35<br />
  • 36. Web Forms<br />36<br />
  • 37. Form Demo<br />HTML5 input UI support<br />Payment form<br />37<br />
  • 38. (Reference) HTML5 elements<br />38<br />28 New Elements are added<br />&<br />7 elements are changed<br />
  • 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. 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. 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. Canvas Demo<br />Appspot<br />RectangleWave<br />Canvascape - "Experimenting With Textures“<br />Depth of Field<br />42<br />
  • 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. SVG Demo<br />Photos<br />SVG Filter<br />44<br />
  • 45. Video / Audio<br />HTML4에서 Flash 동영상 추가<br />45<br />
  • 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. 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. Video / Audio<br />자바스크립트<br />메소드<br />play(), pause()<br />애트리뷰트<br />volume, muted, currentTime<br />이벤트<br />loadeddata, play, pause, timeupdate, ended<br />48<br />
  • 49. Video Demo<br />CanvasVideo<br />Video Showcase (Apple)<br />49<br />
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Web Workers and other Demos<br />Motion Tracker (FF)<br />Web Fonts<br />File Drag and Drop (FF)<br />60<br />
  • 61. W3C Device APIs<br />61<br />
  • 62. 62<br />HTML5 관련 주요 표준화 현황은?<br />
  • 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. 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. 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. W3C Device API 표준화<br />66<br />W3C Device API (국제표준)<br />웹 기반 공통 API<br />
  • 67. Status of DAP Deliverables<br />67<br />(모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)<br />
  • 68. Status of DAP Deliverables<br />68<br />(모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)<br />
  • 69. 69<br />브라우저별HTML5 지원 현황은?<br />
  • 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. Browser Support<br />71<br />
  • 72. (Reference) HTML5 Validator<br />http://validator.nu/<br />72<br />
  • 73. 73<br />HTML5 에 대한 전망<br />
  • 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. 이원석 (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. 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 />

×