Dive into HTML5: SVG and Canvas


Published on

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 how to use HTML5 to solve existing challenges on the web and how to design and develop stunning HTML5 application. You will also preview HTML5 application runs cross platforms, in the desktop browsers as well as on the Phones. What will be covered in the session:
• Introduction to CSS3, Canvas, SVG, Video, and Audio
• What is the real potential of HTML5 using CSS3, Canvas, SVG, Video, Audio, and JavaScript?
• Canvas and SVG comparison, and when to use what
• Best Practices of writing good HTML5 application
• Come and see a collection of the best HTML5 application on Games, Videos, Movies, Comics, Travel, Music and Art
• Expect a lot of demos and code
Presentation and demo will be available at http://blogs.msdn.com/b/dorischen/

Published in: Technology, Art & Photos
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dive into HTML5: SVG and Canvas

  1. 1. Dive into HTML5: SVG and CanvasDoris 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 HTML5 Overview SVG and Canvas HTML5 Tools Summary and ResourcesPAGE 3
  4. 4. 100+ Specifications Geolocation ECMAHTML CSS Web Apps SVG
  5. 5. Microsoft Approach with HTML5
  6. 6. 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
  7. 7. HTML5 in IE10 Platform Previews HTML5 CSS3 Others• Drag&Drop • Grid • Web Performance• File API • Flexbox APIs• Forms Validation • Gradient • ECMA Script 5• Sandbox • Multi-Column Strict Mode• Web Workers • Floats • Advanced Hit Testing APIs• async • Media Queries Listeners • Removal of Style Sheet Limits
  8. 8. 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
  9. 9. 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>
  10. 10. 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
  11. 11. DemoCSS3
  12. 12. Looking forward
  13. 13. HTML5 Cross Platforms: Best Practices and Tips  Focus on creating semantic markup  use CSS and JavaScript for appearance and behavior  Avoid embedding inline and JavaScript in same page  use external styles and scripts  Create media queries to apply styles on the device display  <style type="text/css" media="screen and (min-width: 481px)"> // Style definitions here for large screens </style> <style type="text/css" media="screen and (max-width: 480px)"> // Style definitions here for smaller screens </style>  Use CSS properties such as “display” to create layouts  Avoid embedding images directly in the page  use CSS to specify background images
  14. 14. DemoHTML5 App running on IE9Windows Phone 7 Mango
  15. 15. 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>
  16. 16. Compatibility Table HTML5 Audio 10.0.648.20vCurrent 9 6 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
  17. 17. Compatibility TableHTML5 <video> 10.0.648.20vCurrent 9 6 5.0.4 11.01 4VP8(WebM) Yes No (*) Yes Yesvideosupport YesH.264 video No (*) Yes Yes (*) No (*)format
  18. 18. Demo• Video, Fallback, Styled Video, Canvas, Animation
  19. 19. SVG and Canvas Introduction to SVG Introduction to Canvas Let’s Build a simple Game When to use What? Tooling Summary and ResourcesPAGE 21
  20. 20. Introduction to SVG
  21. 21. 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
  22. 22. 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>
  23. 23. 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
  24. 24. Here is the relevant APIElements Properties Attributes Attributes Attributes Attributes Eventspath clip clip font- offset stroke- onabortanimate clip-path clip-path family opacity width onactivate font-size operator style onbeginfilter clip-rule clip-rule font-linearGradi color color order targetX onclick stretchent fill cx origin targetY onend font-styleradialGradi fill- cy font- overflow text-anchor onerrorent opacity d variant path text- onfocusinview filter display font- pathLength decoration onfocusouta font dx weight points text- onloadmarker font-family dx height r rendering onmousedownclipPath marker dy id radius textLength onmousemovemask mask dy local result transform onmouseoutpattern opacity fill marker-end rotate type onmouseovercircle stop-color marker-mid rx viewBox onmouseup fill- marker-ellipse stop- opacity ry visibility onrepeat startline opacity fill-rule scale width onresize maskpolygon stroke filter name stop-color x onscrollpolyline stroke- stop- x1 onunloadrect opacity opacity x2 onzoomg stroke- stroke yimage width stroke- y1use visibility dasharray y2style writing- stroke-text mode dashoffsettextPath stroke- opacity
  25. 25. Including SVG on your webpage Standalone <object data="logo.svg" type="image/svg+xml" width="100" height="100"></object> <img src="logo.svg" width="100" height="100"/> No scripting { background-image: url(background.svg); } <iframe src="logo.svg" width="100" height="100"/> <embed src="logo.svg" width="100" height="100"/> Inline  HTML5  XHTML
  26. 26. DemoSVG BasicsThe element, some styling & interactivity
  27. 27. Introduction to Canvas
  28. 28. 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
  29. 29. Canvas Entire API
  30. 30. 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>
  31. 31. DemoCanvas BasicsThe element, interactivity
  32. 32. Let’s Build a Simple Game
  33. 33. DemoBuilding the same gameCompare SVG & Canvas
  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 Charts  Display Data or Change the user driven views  Styling / Transitions<path id="mainPath" class="highcharts-series" d="M 6 57 L 7 58".. /><rect id="mainGraph" x="0" y="0" width="400" height="200" />document.getElementById("mainPath").addEventListener("mouseover",showData, false);document.getElementById("mainGraph").addEventListener("click", zoomData,false);<path class="highcharts-series" d="M 6 57 L 7 58".. />.highcharts-series {-ms-transition-property: opacity;-ms-transition-duration: 2s; }.highcharts-series:hover { opacity:.5; }
  39. 39. Use Case: Visualizing Data Graphs  Animated Queues for Visuals  Large Amounts of Data<canvas style="position:absolute;top:50px;left:50px"onclick="scatter();" id="canvasGraph" height="400px"width="500px"/>
  40. 40. 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); }
  41. 41. PAGE 43
  42. 42. Toolings
  43. 43. 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
  44. 44. 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.
  45. 45. Level of support<video> No No No<canvas> Yes Yes No Yes Yes<svg> No No No
  46. 46. HTML5 Tools
  47. 47. Tools F12 Developer Tools
  48. 48. 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 51
  49. 49. Expression Web Super PreviewPAGE 52
  50. 50. Summary and Resources
  51. 51. Can I Use HTML5 Today?PAGE 54
  52. 52. 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 56
  53. 53. Upcoming HTML5 Web Camps 1 Days HTML5 Web Camp (Free) Nov 12, 2011 (Sat.), Mountain View, CA Half day lecture and half day hands on labs More http://bit.ly/free_html5training