Your SlideShare is downloading. ×
Dive into HTML5
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

Dive into HTML5

3,213
views

Published on

Demo and sample code are availalbe to download at http://bit.ly/juGbPA. …

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,213
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
90
Comments
1
Likes
4
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. Dive into HTML5Doris Chen Ph.D.Developer EvangelistMicrosofthttp://blogs.msdn.com/dorischen/@doristchen
  • 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. Agenda What is HTML5 Dive into HTML5 HTML5 Tools Summary and ResourcesPAGE 3
  • 4. 100+ Specifications
  • 5. DemoWeb Standards in action
  • 6. Dive into HTML5
  • 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. 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. DemoSemanticsBasic HTML5 page
  • 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. DemoCSS3Medium query
  • 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. Canvas Entire API
  • 14. DemoCanvas BasicsThe element, interactivity
  • 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. DemoSVG BasicsThe element, some styling & interactivity
  • 17. Scenarios: Canvas and SVG
  • 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. Performance ComparisonThe last piece to help you choose
  • 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. 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. 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. Demo• Video, Fallback, Styled Video, Canvas, Animation
  • 24. Frameworks and Tools Modernizr  www.modernizr.com Shipping with ASP.NET MVC 3 Tools update
  • 25. Fallback: Polyfills and Shims Polyfills  github.com/Modernizr/Modernizr/wiki/HTML5-Cross- browser-Polyfills
  • 26. HTML5 Tools
  • 27. Tools F12 Developer Tools
  • 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. Expression Web Super PreviewPAGE 32
  • 30. DemoExpression Web Super PreviewTest in all major browsers with different version within oneview
  • 31. Innovate with Emerging StandardsHTML5 Labs
  • 32. Summary and Resources
  • 33. Can I Use HTML5 Today?PAGE 36
  • 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. Upcoming HTML5 Web Camps 1 Days HTML5 Web Camp June 10, 2011, Colorado Springs, Co June 23, 2011, Irvine, CA http://bit.ly/jo5KFM