Dive into HTML5Doris Chen Ph.D.Developer EvangelistMicrosofthttp://blogs.msdn.com/dorischen/@doristchen
Who am I? Developer Evangelist at Microsoft based in Silicon  Valley, CA    Blog: http://blogs.msdn.com/b/dorischen/   ...
Agenda         What is HTML5         Dive into HTML5         HTML5 Tools         Summary and ResourcesPAGE 3
100+ Specifications
DemoWeb Standards in action
Dive into HTML5
HTML5 SemanticsSemantic Document Structure HTML5 introduces a new semantic  structure     Replacing the use of DIV, SPAN...
HTML5 Semantic TagsSupported in Internet Explorer 9<body>                                </section> <header>              ...
DemoSemanticsBasic HTML5 page
CSS3 IE9     Selectors     Backgrounds and Borders     Fonts (WOFF)     Media Queries     Color     Transformations...
DemoCSS3Medium query
Canvas basics Dynamic bitmap with JS Allow drawing into a bitmap area    See it as a dynamic PNG ;-) JavaScript APIs & ...
Canvas Entire API
DemoCanvas BasicsThe element, interactivity
SVG basicsScalable Vector Graphics Scalable Vector Graphic    To draw 2D vector graphics using XML    “retained mode” :...
DemoSVG BasicsThe element, some styling & interactivity
Scenarios: Canvas and SVG
Combination/Crossover ScenariosMore subtle differences Charts and Graphs   SVG better for interaction, XML data loading ...
Performance ComparisonThe last piece to help you choose
HTML5 Video & Audio <audio     <video src=       src=       The url to the audio or video            width=     The width ...
Compatibility Table HTML5 Audio                                10.0.648.20vCurrent    9     4     5.0.4                 11...
Compatibility TableHTML5 <video>                                      10.0.648.20vCurrent      9       4      5.0.4       ...
Demo• Video, Fallback, Styled Video,  Canvas, Animation
Frameworks and Tools Modernizr     www.modernizr.com Shipping with ASP.NET MVC 3 Tools update
Fallback: Polyfills and Shims Polyfills      github.com/Modernizr/Modernizr/wiki/HTML5-Cross-       browser-Polyfills
HTML5 Tools
Tools  F12 Developer Tools
F12 Developer ToolsTesting from Internet Explorer 9 to 7     Browser Mode          Changes the rendering          engine o...
Expression Web Super PreviewPAGE 32
DemoExpression Web Super PreviewTest in all major browsers with different version within oneview
Innovate with Emerging StandardsHTML5 Labs
Summary and Resources
Can I Use HTML5 Today?PAGE 36
Resources          • Started with IE9 and HTML5             • http://bit.ly/hpbwhv          • Whitepaper focused for devel...
Upcoming HTML5 Web Camps 1 Days HTML5 Web Camp  June 10, 2011, Colorado Springs, Co  June 23, 2011, Irvine, CA    http://b...
Dive into HTML5
Dive into HTML5
Upcoming SlideShare
Loading in …5
×

Dive into HTML5

3,479 views

Published on

Demo and sample code are availalbe to download at http://bit.ly/juGbPA.
Developers keep hearing a lot about HTML5, but many don’t know what it actually means or is truly capable of. In this deep dive you will learn the current status of HTML5, how to use HTML5 and how new web standards help solve existing challenges on the web. You will also preview the next emerging standards and understand Microsoft implementation approach through prototypes. In this session, Doris will cover:
•What is the real potential of HTML5 using CSS3, Canvas, SVG, Video, Audio, and JavaScript?
•How can HTML5 and IE make your site look better and work faster?
•Come and see a collection of the best HTML5 web sites around the Web on Games, Videos, Movies, Comics, Travel, Music and Art
•Be inspired by crazy web sites, stunning prototypes and futuristic concepts

Expect a lot of demos and code!

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
3,479
On SlideShare
0
From Embeds
0
Number of Embeds
642
Actions
Shares
0
Downloads
92
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Dive into HTML5

  1. 1. Dive into HTML5Doris Chen Ph.D.Developer EvangelistMicrosofthttp://blogs.msdn.com/dorischen/@doristchen
  2. 2. Who am I? Developer Evangelist at Microsoft based in Silicon Valley, CA  Blog: http://blogs.msdn.com/b/dorischen/  Twitter @doristchen  Email: doris.chen@microsoft.com Has over 13 years of experience in the software industry focusing on web technologies Spoke and published widely at JavaOne, OReilly, Silicon Valley Code Camp, SD West, SD Forum and worldwide User Groups meetings Doris received her Ph.D. from the University of California at Los Angeles (UCLA)
  3. 3. Agenda What is HTML5 Dive into HTML5 HTML5 Tools Summary and ResourcesPAGE 3
  4. 4. 100+ Specifications
  5. 5. DemoWeb Standards in action
  6. 6. Dive into HTML5
  7. 7. HTML5 SemanticsSemantic Document Structure HTML5 introduces a new semantic structure  Replacing the use of DIV, SPAN HEADER and other elements with class and ID attributes New elements include header, nav, NAV article, section, aside, and footer ARTICLE ASIDE FOOTER
  8. 8. HTML5 Semantic TagsSupported in Internet Explorer 9<body> </section> <header> </article> <hgroup> ... <h1>Doris Chen Dancing</h1> </section> <h2>Funky Town!</h2> </hgroup> <aside>Aside items (i.e. </header> links)</aside> <nav> <figure> <ul>Navigation links</ul> <img src="..." /> </nav> <figcaption>Doris dancing</figcaption> <section> </figure> <article> <header> <footer>Copyright © 2011</footer> <h1>Can you believe it?</h1> </header> </body> <section> <mark>Doris dancing!</mark>
  9. 9. DemoSemanticsBasic HTML5 page
  10. 10. CSS3 IE9  Selectors  Backgrounds and Borders  Fonts (WOFF)  Media Queries  Color  Transformations  Namespaces  Values and Units IE10 Platform Preview  Multi-column Layout  Grid Layout and CSS3 Flexible Box Layout  Gradients  Transitions and CSS3 3D Transforms
  11. 11. DemoCSS3Medium query
  12. 12. Canvas basics Dynamic bitmap with JS Allow drawing into a bitmap area  See it as a dynamic PNG ;-) JavaScript APIs & drawing primitives  Rectangles, lines, fills, arcs, Bezier curves, etc. Immediate mode : « Fire and Forget »  It does not remember what you drew last.  It’s up to you to maintain your objects tree This is a black box : content not visible into the DOM  Beware of accessibility issues Simple API: 45 methods, 21 attributes
  13. 13. Canvas Entire API
  14. 14. DemoCanvas BasicsThe element, interactivity
  15. 15. SVG basicsScalable Vector Graphics Scalable Vector Graphic  To draw 2D vector graphics using XML  “retained mode” : the objects tree is kept in memory Full DOM support  Access to the SVG elements through the DOM SVG elements can be styled with CSS & can be decorated with ARIA Included in HTML5 spec  Native support in IE9 and other modern browsers Can be used from an external .svg file or in-line in the document
  16. 16. DemoSVG BasicsThe element, some styling & interactivity
  17. 17. Scenarios: Canvas and SVG
  18. 18. Combination/Crossover ScenariosMore subtle differences Charts and Graphs  SVG better for interaction, XML data loading & for printing  Canvas could be a faster rendering choice for some browsers Two-Dimensional Games  Canvas offers a more familiar experience to game developers (low level APIs, immediate mode as XNA, etc.)  SVG does a lot of DOM operations and cost more memory
  19. 19. Performance ComparisonThe last piece to help you choose
  20. 20. HTML5 Video & Audio <audio <video src= src= The url to the audio or video width= The width of the video element height= The height of the video element poster= The url to the thumbnail of the video preload= preload= (none, metadata, auto) Start downloading autoplay autoplay Audio or video should play immediately loop loop Audio or video should return to start and play controls controls Will show controls (play, pause, scrub bar) > > … … </audio> </video>
  21. 21. Compatibility Table HTML5 Audio 10.0.648.20vCurrent 9 4 5.0.4 11.01 4MP3 audio Yes No Yes Yes No (*)supportWAV PCMaudio No Yes Yes Yes YessupportAAC audio Yes No Yes Yes No (*)format
  22. 22. Compatibility TableHTML5 <video> 10.0.648.20vCurrent 9 4 5.0.4 11.01 4VP8(WebM) Yes No (*) Yes Yesvideosupport YesH.264 video No (*) Yes Yes (*) No (*)format
  23. 23. Demo• Video, Fallback, Styled Video, Canvas, Animation
  24. 24. Frameworks and Tools Modernizr  www.modernizr.com Shipping with ASP.NET MVC 3 Tools update
  25. 25. Fallback: Polyfills and Shims Polyfills  github.com/Modernizr/Modernizr/wiki/HTML5-Cross- browser-Polyfills
  26. 26. HTML5 Tools
  27. 27. Tools F12 Developer Tools
  28. 28. F12 Developer ToolsTesting from Internet Explorer 9 to 7 Browser Mode Changes the rendering engine only Great list of PolyFills Changes the rendering engine and user agent stringPAGE 31
  29. 29. Expression Web Super PreviewPAGE 32
  30. 30. DemoExpression Web Super PreviewTest in all major browsers with different version within oneview
  31. 31. Innovate with Emerging StandardsHTML5 Labs
  32. 32. Summary and Resources
  33. 33. Can I Use HTML5 Today?PAGE 36
  34. 34. Resources • Started with IE9 and HTML5 • http://bit.ly/hpbwhv • Whitepaper focused for developers • http://msdn.microsoft.com/en-us/ie/ff468705.aspx • Feature-specific demos • http://ie.microsoft.com/testdrive/ • Real-world demos • http://www.beautyoftheweb.com/ • Blogs • http://blogs.msdn.com/b/ie/ • HTML5 Labs • http://html5labs.interoperabilitybridges.com/PAGE 37
  35. 35. Upcoming HTML5 Web Camps 1 Days HTML5 Web Camp June 10, 2011, Colorado Springs, Co June 23, 2011, Irvine, CA http://bit.ly/jo5KFM

×