The current status of html5 technology and standard

The current status of HTML5 technology and standard 2010. 07. 08 Wonsuk Lee/ ETRI @wonsuk73 http://www.wonsuk73.com/

2 HTML5 관련 최근 주요업계 동향은 ?

3 HTML5 vs (Flash vsSilverlight)

5 <Source: http://www.apple.com/ipad/ready-for-ipad/ > <Source: http://www.apple.com/html5/ >

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 Gmail Speed is a feature Goal is to get Gmail to load in under a second Offline support HTML5's database standards New features downloadurl: a new data transfer protocol HTML6 ??? Code size 443,000 lines of JavaScript 978,000 lines with comments 9

Google I/O Conference Chrome Web Store an existing web app a serverless app 10

Google I/O Conference HTML5 Tweetdeck App 11

Google I/O Conference WebM Project 12

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와 GPU 15 <Source: IE9 : HTML5와 GPU 발표자료 (황리건) >

MS IE9 Preview #3까지 출시 HTML5 비디오/오디오와 SVG 지원 예정 GPU 활용한 랜더링 기능 지원 IE9 공식 버전은 언제 출시 ??? HTML5를 지원하는 모바일 브라우저 로드맵은??? 16

18 H.264: 31% ( Q2/09 )  66% ( Q1/10 ) Flash : 69% ( Q2/09 )  26% ( Q1/10 ) <Source: Encoding.com via TechCrunch>

19 HTML5 표준 개요 및 특징은?

HTML Timeline 20 [ Source : Appleinsider ]

What is HTML5 ? 21 Structure and Semantic APIs

HTML Design Principles 22 <Source: http://www.w3.org/TR/html-design-principles/ >

Document Representations (문서 표현) HTML 5 XHTML 5 text/html application/xhtml+xml Document DOM

The DOCTYPE <!DOCTYPE html> Just 15 character HTML5 doc !!! Case-insensitive Backwards compatibility 24 How about Google page ? Is it based on the HTML5 ?

HTML5 Basic Structure Common structures Differentiation & Style. How about Semantic? What is the potential of new elements? E.g. Search engine, etc 25 [ HTML4] [ HTML5]

New Elements in HTML5 New Markup Elements – for better structure New Media Elements – for media content The Canvas Element – for drawing New Form Elements and Input type attribute values 27

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 task 29

New Markup Elements – for better structure 30

New Markup Elements – for better structure 31

New Media Elements – for media content 32

New Form Elements and Input type attribute values 33

New Form Elements and Input type attribute values 34

Web Forms Placeholder text An autofocus attribute 35

Form Demo HTML5 input UI support Payment form 37

(Reference) HTML5 elements 38 28 New Elements are added & 7 elements are changed

HTML5 Features 39 Canvas / SVG Video / Audio Geolocation Offline web apps Web Socket Local Storage More features … Web SQL Database Web Workers

Canvas What is Canvas ? Dynamic and interactive graphics Draw images using 2D drawing API Lines, 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/]

Canvas ,[object Object],<canvas id="myDrawing" width="200" height="200"> </canvas> <h1>Hello World!</h1> vardrawingCanvas = document.getElementById('myDrawing'); var context = drawingCanvas.getContext('2d'); // Create the yellow face context.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 Demo Appspot RectangleWave Canvascape - "Experimenting With Textures“ Depth of Field 42

SVG What is SVG ? Scalable Vector Graphic HTML-like tags for drawing 43 <!DOCTYPE html> <html> <body> <svg width="200" height="200"> <rect x="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>

Video / Audio HTML4에서 Flash 동영상 추가 45

Video / Audio Embedding 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, ended 48

Video Demo CanvasVideo Video Showcase (Apple) 49

Geolocation Geolocation API brings browser-based location to your apps 50 navigator.geolocation.getCurrentPosition( function(position) { var lat = position.coords.latitude; varlon = position.coords.longitude; showLocation(lat, lon); } );

Offline Web Apps Web apps need to work everywhere Database and app cache store user data and app resources locally 51

Offline Web Apps App Cache List resources that you want to take offline 52 cache.manifest file /static/stickies.html /media/deleteButton.png /media/deleteButtonPressed.png /css/stickies.css /js/stickies.js HTML file <body manifest="./cache.manifest"> </body>

Web SQL Database Databases right in the browser Around 5MB per domain Accessible across tabs and windows Based on SQLite Features: Transaction, SQL queries 53 var 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 Storage Key/value pair (hash) storage Hash-based storage of strings (not objects). 10 MB per zone. Two kinds: sessionStorage: Die when browser closes Not shared between tabs localStorage Crash-safe Shared BW tabs / windows and sessions – but not zones. 54

Web Sockets TCP for the Web a next-generation bidirectional communication technology for web applications 55 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.}

Web Sockets 구글 크롬 개발자 채널 버전 4.0.249.0. Web Socket을 기본기능으로 지원 Web Socket extension for Apache HTTP Server pywebsocket testing or experimental purposes mod_pywebsocket mod_python mod_ssl for wss http://code.google.com/p/pywebsocket/ jWebSocket http://jwebsocket.org/ 56

Web Sockets HTML5 Web Sockets and the Need for Speed! http://www.kaazing.com/blog/?p=301 http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html ( Demo ) 57 The Web Sockets experience is 55 times faster than XHR

Web Workers API for running background scripts Threads for Web apps Browser Support Firefox 3.5 Safari 4 Chrome 4 Useful for gaming, graphics, crypto and etc. 58

Web Workers Workers ‘parent’ page 접근 제한 예제 59 The parent page <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); }; </script> worker.js function findPrimes() { // ... prime algorithm here postMessage(nextPrime); } findPrimes();

Web Workers and other Demos Motion Tracker (FF) Web Fonts File Drag and Drop (FF) 60

62 HTML5 관련 주요 표준화 현황은?

HTML5의 표준의 범위 Paul Cotton (HTML WG Co-chair) Interview 기본 입장 HTML 마크업내에서 활용되는 모든 API가 HTML5 표준의 범주 W3C 관련 WG HTML WG Web Application WG Device API WG Geolocation WG Media Annotation WG ? … 63

HTML5 표준화 현황 W3C WGs related with HTML5 HTML WG HTML5, HTML+RDFa, HTML Microdata, HTML Canvas 2D Context, HTML: The Markup Language, HTML5 diffs from HTML4, etc Web Applications WG Web Storage, Indexed Database API, File API, Server-Sent Event, Web Sockets API, Web Workers, Programmable HTTP Caching and Serving, Web SQL Database, etc Device APIs and Policy WG Calendar, Contact, Media Capture, Messaging, System Information, File Writer, Gallery, Powerbox, Application Launcher, etc Geolocation WG Geolocation API 64

W3C HTML WG Milestones ( This schedule was removed ) 2007-05 HTML5 and Web Forms 2.0 specs adopted as basis for review 2007-11 HTML Design Principles First Public Working Draft 2008-02 HTML5 First Public Working Draft 2010-01 HTML5 Last Call Working Draft 2010-12? HTML5 Candidate Recommendation 2012-01? HTML5 Proposed Recommendation 2012-03? HTML5 Recommendation Participants 407 group participants, 407 in good standing, 140 participants from 37 organizations 267 Invited Experts 65

W3C Device API 표준화 66 W3C Device API (국제표준) 웹 기반 공통 API

Status of DAP Deliverables 67 (모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)

Status of DAP Deliverables 68 (모바일 웹 플랫폼과 Device API 표준, TTA Journal, ETRI 이강찬 박사)

69 브라우저별HTML5 지원 현황은?

Browser Support HTML5 is just W3C Working Draft. But Some core features are already supported by a lot of browsers 70 IE

(Reference) HTML5 Validator http://validator.nu/ 72

HTML5에 대한 이슈 및 전망 이슈 브라우저 호환성, 브라우저 처리 속도, 개발도구, W3C의 표준화일정 등 전망 브라우저 경쟁에 따른 빠른 HTML5 활성화 예상 특히 모바일HTML5 앱 증가 예상 E.g. HTML5 Yahoo! Mail web app 다양한 애플리케이션 개발 시도 E.g. noVNC: HTML5 VNC Client 74

이원석 (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.org Phone: 042-860-4893, 010-5800-3997 75

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

The current status of html5 technology and standard

Recomendados

Recomendados

Más contenido relacionado

Similar a The current status of html5 technology and standard

Similar a The current status of html5 technology and standard (20)

Último

Último (20)

The current status of html5 technology and standard