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         HTML5 Overview         HTML5 Main Feature         HTML5 Tools         Summary and ResourcesPAGE 3
HTML5 Overview
Where did HTML5 Come from? 20 years of evolution: 1990 to 2010HTML      2      3     3.2     4      4.01                 ...
6
W3C HTML Working Group             •             •             •             •             •
100+ Specifications                                           Geolocation                                             ECMA...
Microsoft Approach with HTML5
HTML5 in IE9         HTML5                       CSS3                     SVG                       Others• New Markup Ele...
HTML5 in IE10 Platform Preview 3        HTML5                   CSS3                 Others• Application Cache   • 3D Tran...
DemoReal Life HTML5 Demo
HTML5 Main Feature
HTML5 SemanticsSemantic Document Structure HTML5 introduces a new semantic  structure     Replacing the use of DIV, SPAN...
HTML Tags   <div id=”header”>   <div id=”nav”>   <div                       <div id=”article”>   id=”sidebar”>   <div id=”...
New Semantic HTML Tags   <header>   <nav>              <section>   <aside>                 <article>   <footer>
HTML5 Semantic TagsSupported in Internet Explorer 9<body>                                </section> <header>              ...
CSS3 IE9     2D Transforms     Border Radius     Box-Shadow     Fonts (WOFF)     Media Queries     Multiple Backgro...
DemoCSS3
HTML5 Video & Audio <audio     <video src=       src=       The url to the audio or video            width=     The width ...
Compatibility Table HTML5 Audio                                 10.0.648.24vCurrent    9+    6+    5.0.4+                 ...
Compatibility TableHTML5 <video>                                      10.0.648.24vCurrent      9+     6+      5.0.4+      ...
Demo• Let’s have some fun with Video
Introduction to SVG
SVG basicsScalable Vector Graphics Scalable Vector Graphic    To draw 2D vector graphics using XML    “retained mode” :...
HTML5 <svg>Let’s see a very simple example <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">    <rect fill...
SVG basics            SVG Feature                       SVG 1.1 2nd Edition                                               ...
DemoSVG BasicsThe element, some styling & interactivity
Introduction to Canvas
Canvas basics Dynamic bitmap with JS Allow drawing into a bitmap area    See it as a dynamic PNG ;-) JavaScript APIs & ...
Canvas Entire API
HTML5 <canvas>Let’s see a very simple sample code  <canvas id="myCanvas" width="200" height="200">   Your browser doesn’t ...
DemoCanvas BasicsThe element, interactivity
When to Use What?
High level differences: SVG and Canvas                Canvas                  SVG  Abstraction   Pixel based (dynamic    S...
The last piece to help you choose
Scenarios: Canvas and SVG
Use Case: Visualizing Data Maps    Interactive Data Presentation    High Speed Data <style type="text/css"media="screen...
HTML5 Tools
Tools to generate SVG You won’t be forced to type XML in notepad! Microsoft Visio   Export as SVG Adobe Illustrator   ...
Tools to generate CanvasYou won’t be forced to type every JS primitives neither ;-) AI2Canvas plug-in :  http://visitmix....
Tools  F12 Developer Tools
F12 Developer ToolsTesting from Internet Explorer 9 to 7     Browser Mode          Changes the rendering          engine o...
Expression Web Super PreviewPAGE 46
Summary and Resources
Can I Use HTML5 Today?PAGE 48
Resources      • Started with HTML5         • http://bit.ly/hpbwhv      • Feature-specific demos         • http://ie.micro...
Dive Into HTML5
Dive Into HTML5
Dive Into HTML5
Upcoming SlideShare
Loading in …5
×

Dive Into HTML5

2,817 views

Published on

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,817
On SlideShare
0
From Embeds
0
Number of Embeds
1,052
Actions
Shares
0
Downloads
66
Comments
1
Likes
1
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 15 years of experience in the software industry focusing on web technologies Spoke and published widely at HTML5 Dev, 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 HTML5 Overview HTML5 Main Feature HTML5 Tools Summary and ResourcesPAGE 3
  4. 4. HTML5 Overview
  5. 5. Where did HTML5 Come from? 20 years of evolution: 1990 to 2010HTML 2 3 3.2 4 4.01 XML XHTML1 1.1 1SE 2 Web Forms 2 Web Apps 1 H HTML5 W3C participate in HTML5 (2006)  Formed working group to work with WHATWG (Web Hypertext Applications Technology Working Group) on HTML5 specification (2007) HTML4 + XHTML1 evolved into Web Apps 1 / HTML5 2009 W3C dropped XHTML2 to focus on HTML5
  6. 6. 6
  7. 7. W3C HTML Working Group • • • • •
  8. 8. 100+ Specifications Geolocation ECMAHTML CSS Web Apps SVG
  9. 9. Microsoft Approach with HTML5
  10. 10. HTML5 in IE9 HTML5 CSS3 SVG Others• New Markup Elements • 2D Transforms • Shapes • ECMA Script 5 (all• Canvas • Clipping, Masking, and • Border Radius Compositing but Strict Mode)• Audio• Video • Box-Shadow • Transforms • Native JSON• Local Storage • Fonts (WOFF) • Extensibility support (IE8)• Cross-Window Messaging • Gradients • Media Queries • Performance API• Text Selection APIs • Interactivity• Parsing SVG in HTML • Multiple • Linking and Views • Geo-Location Backgrounds • Painting and Colors • Data-uri (IE8) • Paths • Namespaces • DOM L2, L3 • Text • Opacity • Selectors API L2 • rgba(), hsl(), • AJAX Navigation (IE8) hsla() • DOMParser and • Selectors (IE8) XMLSerializer • ICC v2 and Color Profile • ARIA Hardware Acceleration
  11. 11. HTML5 in IE10 Platform Preview 3 HTML5 CSS3 Others• Application Cache • 3D Transforms • Advanced Hit Testing• Drag&Drop • Animations APIs• File API • Flexible Box • Async• Forms Validation • Floats • Media Queries• History • Gradient Listeners• IndexedDB • Grid • Web Performance APIs• Sandbox • Multi-Column• Web Sockets • Region• Web Workers • SVG Filter Effects • Text Shadow • Transitions
  12. 12. DemoReal Life HTML5 Demo
  13. 13. HTML5 Main Feature
  14. 14. 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
  15. 15. HTML Tags <div id=”header”> <div id=”nav”> <div <div id=”article”> id=”sidebar”> <div id=”footer”>
  16. 16. New Semantic HTML Tags <header> <nav> <section> <aside> <article> <footer>
  17. 17. 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>
  18. 18. CSS3 IE9  2D Transforms  Border Radius  Box-Shadow  Fonts (WOFF)  Media Queries  Multiple Backgrounds  Namespaces  Opacity  rgba(), hsl(), hsla()  Selectors (IE8) IE10 Platform Preview  Grid  Flexbox  Gradient  Multi-Column  Floats
  19. 19. DemoCSS3
  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.24vCurrent 9+ 6+ 5.0.4+ 11.01+ +MP3 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.24vCurrent 9+ 6+ 5.0.4+ 11.01+ +VP8(WebM) Yes No (*) Yes Yesvideosupport YesH.264 video No (*) Yes Yes (*) No (*)format
  23. 23. Demo• Let’s have some fun with Video
  24. 24. Introduction to SVG
  25. 25. 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
  26. 26. HTML5 <svg>Let’s see a very simple example <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg>
  27. 27. SVG basics SVG Feature SVG 1.1 2nd Edition IE9SVG 1.1 2nd Edition Document Structure in IE9 in IE9 Basic Shapes  Paths  Text  Transforms  Painting, Filling, Color  Scripting  Styling  Gradients and Patterns  Clipping and Masking  Markers and Symbols  Filter Effects Declarative Animation SVG Fonts
  28. 28. DemoSVG BasicsThe element, some styling & interactivity
  29. 29. Introduction to Canvas
  30. 30. 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
  31. 31. Canvas Entire API
  32. 32. HTML5 <canvas>Let’s see a very simple sample code <canvas id="myCanvas" width="200" height="200"> Your browser doesn’t support Canvas, sorry. </canvas> <script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>
  33. 33. DemoCanvas BasicsThe element, interactivity
  34. 34. When to Use What?
  35. 35. High level differences: SVG and Canvas Canvas SVG Abstraction Pixel based (dynamic Shape based bitmap) Elements Single HTML element Multiple graphical elements which become part of the Document Object Model (DOM) Driver Modified through Script Modified through Script and only CSS Event Model User Interaction is User Interaction is granular (x,y) abstracted (rect, path) Performance Performance is better Performance is better with with smaller surface smaller number of objects and/or larger number of and/or larger surface. objects
  36. 36. The last piece to help you choose
  37. 37. Scenarios: Canvas and SVG
  38. 38. Use Case: Visualizing Data Maps  Interactive Data Presentation  High Speed Data <style type="text/css"media="screen"> path:hover{fill:yellow;} </style> <canvas style="position:absolute;top:50px;left:50px" onclick="addWeather();" id="canvasGraph"height="500px"width="800px"/> for (var i= 0; i < weatherPatterns.length;i++) { weatherPatterns[i].x += Math.floor(Math.random() * 3)-1; weatherPatterns[i].y += Math.floor(Math.random() * 3) -1; myContext.drawImage(weatherImage[weatherPatterns[i].ImageIndex], weatherPatterns[i].x, weatherPatterns[i].y); }
  39. 39. HTML5 Tools
  40. 40. Tools to generate SVG You won’t be forced to type XML in notepad! Microsoft Visio  Export as SVG Adobe Illustrator  Save as SVG Inkspace  Free Open source software
  41. 41. Tools to generate CanvasYou won’t be forced to type every JS primitives neither ;-) AI2Canvas plug-in : http://visitmix.com/labs/ ai2canvas/  export vector and bitmap artwork directly to an HTML5 canvas  provides drawing, animation and coding options such as events so that you can build interactive, well-designed canvas-based web apps.
  42. 42. Tools F12 Developer Tools
  43. 43. 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 45
  44. 44. Expression Web Super PreviewPAGE 46
  45. 45. Summary and Resources
  46. 46. Can I Use HTML5 Today?PAGE 48
  47. 47. Resources • Started with HTML5 • http://bit.ly/hpbwhv • Feature-specific demos • http://ie.microsoft.com/testdrive/ • Real-world demos • http://www.beautyoftheweb.com/ • Canvas demo by Community • http://www.canvasdemos.com/ • Session Presentation and Demo • http://blogs.msdn.com/dorischen/PAGE 49

×