Transcript HTML 5
HTML 5 NEXT GENERATION OF WEB Something you should know • Superseding HTML 4.0/XHTML 1.0 1.1 • Force to standardize many features already existed • Standard tag over conceived hack • Not become standard till 2020, seriously Ericsson Internal | 2010-06-06 | Page 2 Main features in HTML5 • • • • • • • • • New semantic elements Canvas Video Geolocation Local storage Web worker Web form Fonts Microdata Ericsson Internal | 2010-06-06 | Page 3 Detect it before use it HTML5 is not one big thing; it is a collection of individual features. -- "Dive into HTML5", Mark Pilgrim • Different technique for different feature • Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3features Ericsson Internal | 2010-06-06 | Page 4 Canvas A canvas is a rectangle in your page where you can use JavaScript to draw anything you want. • • • • • Simple sharp Lines Text Image More ... • Canvas tutorial on Mozilla Developer Center • HTML5 canvas — the basics • CanvasDemos.com: Demos, tools, and tutorials for the HTML canvas element • The canvas element in HTML5 • Processingjs the javascript library Ericsson Internal | 2010-06-06 | Page 5 Canvas › Three steps to draw – get canvas DOM object – get the context from canvas – draw in this context <cancas></canvas> Ericsson Internal | 2010-06-06 | Page 6 Video • • • • A lot format out there No standard format No one format can play in all browser More than one sources in one "video" element • • • • • • • • • HTML5: The <video> element Video for Everybody! is an alternate method for providing fallback video options for legacy browsers A gentle introduction to video encoding Theora 1.1 is released — what you need to know Configuring servers for Ogg media Encoding with the x264 codec Video type parameters SublimeVideo HTML5 Video Player Everything you need to know about HTML5 audio and video Ericsson Internal | 2010-06-06 | Page 7 Geolocation • Start from another working group • lot of implementations, html5, iphone, android, blackberry • Security was considered from start • • • • • • • • W3C geolocation API Gears BlackBerry geolocation API Nokia geolocation API Palm geolocation API OMTP BONDI geolocation API geo.js, the geolocation API wrapper script http://www.mozilla.com/en-US/firefox/geolocation/ Ericsson Internal | 2010-06-06 | Page 8 Form • • • • • Placeholder email Slider Date, only opera support ..... • <input> types • the <input placeholder> attribute • the <input autofocus> attribute Ericsson Internal | 2010-06-06 | Page 9 Websocket&Webworker • Still in the dark age • Complicated • wpilots.js • http://chuiwenchiu.spaces.live.com/Blog/cns!CA5D9227DF9E78E8!4820.e ntry • motion detect , http://blog.mozbox.org/post/2009/02/20/Video-CanvasWorker-thread-A-movement-tracker Ericsson Internal | 2010-06-06 | Page 10 Even more • • • • • • web fonts local storage SVG MathML CSS 3 ..... http://webkit.org/demos/sticky-notes/index.html Ericsson Internal | 2010-06-06 | Page 11 DIVEINTOHTML5.ORG Ericsson Internal | 2010-06-06 | Page 13