Slide title minimum 48 pt Slide subtitle minimum 30 pt HTML 5 NEXT GENERATION OF WEB.

HTML 5

NEXT GENERATION OF WEB

Slide title minimum 32 pt

(32 pt makes 2 rows

Text and bullet level 1 minimum 24 pt

Bullets level 2-5minimum 20 pt

!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬®¯°±²³´¶·¸¹º»¼½ÀÁÂÃÄÅÆÇÈËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĀāĂăąĆćĊċČĎďĐđĒĖėĘęĚěĞğĠġĢģĪīĮįİıĶķĹĺĻļĽľŁłŃńŅņŇňŌŐőŒœŔŕŖŗŘřŚśŞşŠšŢţŤťŪūŮůŰűŲųŴŵŶŷŸŹźŻżŽžƒȘșˆˇ˘˙˚˛˜˝ẀẁẃẄẅỲỳ–—‘’‚“”„†‡•…‰‹›⁄€™−≤≥fifl

ĀĀĂĂĄĄĆĆĊĊČČĎĎĐĐĒĒĖĖĘĘĚĚĞĞĠĠĢĢĪĪĮĮİĶĶĹĹĻĻĽĽŃŃŅŅŇŇŌŌŐŐŔŔŖŖŘŘŚŚŞŞŢŢŤŤŪŪŮŮŰŰŲŲŴŴŶŶŹŹŻŻȘș

ΆΈΉΊΌΎΏΐΑΒΓΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΪΫΆΈΉΊΰαβγδεζηθικλνξορςΣΤΥΦΧΨΩΪΫΌΎΏ

ЁЂЃЄЅІЇЈЉЊЋЌЎЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯЁЂЃЄЅІЇЈЉЊЋЌЎЏѢѢѲѲѴѴҐҐәǽẀẁẂẃẄẅỲỳ№

Do not add objects or text in the footer area

Ericsson Internal | 2010-06-06 |

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


(32 pt makes 2 rows









Main features in HTML5

• New semantic elements• Canvas• Video• Geolocation• Local storage• Web worker• Web form• Fonts• Microdata


(32 pt makes 2 rows









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


(32 pt makes 2 rows









Canvas

• 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

A canvas is a rectangle in your page where you can use JavaScript to draw anything you want.


(32 pt makes 2 rows









Canvas

› Three steps to draw– get canvas DOM object – get the context from canvas– draw in this context

<cancas></canvas>


(32 pt makes 2 rows









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


(32 pt makes 2 rows









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/


(32 pt makes 2 rows









Form

• Placeholder• email• Slider• Date, only opera support• .....

• <input> types• the <input placeholder> attribute• the <input autofocus> attribute


(32 pt makes 2 rows









Websocket&Webworker

• Still in the dark age• Complicated

• wpilots.js• http://chuiwenchiu.spaces.live.com/Blog/cns!CA5D9227DF9E78E8!4820.entry

• motion detect , http://blog.mozbox.org/post/2009/02/20/Video-Canvas-Worker-thread-A-movement-tracker


(32 pt makes 2 rows









Even more

• web fonts• local storage http://webkit.org/demos/sticky-notes/index.html• SVG• MathML• CSS 3• .....

DIVEINTOHTML5.ORG


(32 pt makes 2 rows









Slide title minimum 48 pt Slide subtitle minimum 30 pt HTML 5 NEXT GENERATION OF WEB.

Documents

Transcript of Slide title minimum 48 pt Slide subtitle minimum 30 pt HTML 5 NEXT GENERATION OF WEB.