Dive into HTML5: SVG and Canvas
-
Upload
doris-chen -
Category
Technology
-
view
5.070 -
download
3
description
Transcript of Dive into HTML5: SVG and Canvas
Doris Chen Ph.D.
Developer Evangelist
Microsoft
http://blogs.msdn.com/dorischen/
@doristchen
Dive into HTML5:
SVG and Canvas
Who am I?
Developer Evangelist at Microsoft based in Silicon Valley, CA
Blog: http://blogs.msdn.com/b/dorischen/
Twitter @doristchen
Email: [email protected]
Has over 13 years of experience in the software industry focusing on web technologies
Spoke and published widely at JavaOne, O'Reilly, 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)
Agenda
PAGE 3
What is HTML5
HTML5 Overview
HTML5 Tools
Summary and Resources
SVG and Canvas
HTML CSS Web Apps SVG
Geo
loca
tio
n
EC
MA
100+ Specifications
Microsoft Approach with HTML5
HTML5 in IE9
HTML5
• New Markup Elements
• Canvas
• Audio
• Video
• Local Storage
• Cross-Window Messaging
• Text Selection APIs
• Parsing SVG in HTML
CSS3
• 2D Transforms
• Border Radius
• Box-Shadow
• Fonts (WOFF)
• Media Queries
• Multiple Backgrounds
• Namespaces
• Opacity
• rgba(), hsl(), hsla()
• Selectors (IE8)
SVG
• Shapes
• Clipping, Masking, and Compositing
• Transforms
• Extensibility
• Gradients
• Interactivity
• Linking and Views
• Painting and Colors
• Paths
• Text
Others
• ECMA Script 5 (all but Strict Mode)
• Native JSON support (IE8)
• Performance API
• Geo-Location
• Data-uri (IE8)
• DOM L2, L3
• Selectors API L2
• AJAX Navigation (IE8)
• DOMParser and XMLSerializer
• ICC v2 and Color Profile
• ARIA
Hardware Acceleration
HTML5 in IE10 Platform Previews
HTML5
• Drag&Drop
• File API
• Forms Validation
• Sandbox
• Web Workers
• async
CSS3
• Grid
• Flexbox
• Gradient
• Multi-Column
• Floats
Others
• Web Performance APIs
• ECMA Script 5 Strict Mode
• Advanced Hit Testing APIs
• Media Queries Listeners
• Removal of Style Sheet Limits
HTML5 Semantics
HTML5 introduces a new semantic structure
Replacing the use of DIV, SPAN and other elements with class and ID attributes
New elements include header, nav, article, section, aside, and footer
Semantic Document Structure
HEADER
FOOTER
NAV
ARTICLE
ASIDE
HTML5 Semantic Tags
<body> <header> <hgroup> <h1>Doris Chen Dancing</h1> <h2>Funky Town!</h2> </hgroup> </header> <nav> <ul>Navigation links</ul> </nav>
<section> <article> <header> <h1>Can you believe it?</h1> </header> <section>
<mark>Doris dancing!</mark>
</section> </article>
... </section> <aside>Aside items (i.e. links)</aside> <figure> <img src="..." /> <figcaption>Doris dancing</figcaption> </figure> <footer>Copyright © 2011</footer>
</body>
Supported in Internet Explorer 9
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
CSS3
Demo
Looking forward
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
HTML5 App running on IE9 Windows Phone 7 Mango
Demo
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>
Compatibility Table HTML5 Audio
vCurrent 9 6 5.0.4 10.0.648.20
4 11.01
MP3 audio
support Yes No Yes Yes No (*)
WAV PCM
audio
support
No Yes Yes Yes Yes
AAC audio
format Yes No Yes Yes No (*)
Compatibility Table HTML5 <video>
vCurrent 9 6 5.0.4 10.0.648.20
4 11.01
VP8
(WebM)
video
support
Yes
Yes No (*) Yes Yes
H.264 video
format No (*) Yes Yes (*) No (*)
• Video, Fallback, Styled Video, Canvas, Animation
Demo
SVG and Canvas
PAGE 21
Introduction to SVG
Introduction to Canvas
When to use What?
Summary and Resources
Tooling
Let’s Build a simple Game
Introduction to SVG
SVG basics Scalable 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
HTML5 <svg>
<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>
Let’s see a very simple example
SVG basics SVG 1.1 2nd Edition
in IE9
SVG Feature IE9
Document Structure
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
SVG 1.1 2nd Edition
in IE9
Here is the relevant API
Elements path animate filter linearGradient radialGradient view a marker clipPath mask pattern circle ellipse line polygon polyline rect g image use style text textPath
Properties clip clip-path clip-rule color fill fill-opacity filter font font-family marker mask opacity stop-color stop-opacity stroke stroke-opacity stroke-width visibility writing-mode
Attributes clip clip-path clip-rule color cx cy d display dx dx dy dy fill fill-opacity fill-rule filter
Attributes offset opacity operator order origin overflow path pathLength points r radius result rotate rx ry scale stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-opacity
Events onabort onactivate onbegin onclick onend onerror onfocusin onfocusout onload onmousedown onmousemove onmouseout onmouseover onmouseup onrepeat onresize onscroll onunload onzoom
Attributes font-family font-size font-stretch font-style font-variant font-weight height id local marker-end marker-mid marker-start mask name
Attributes stroke-width style targetX targetY text-anchor text-decoration text-rendering textLength transform type viewBox visibility width x x1 x2 y y1 y2
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
SVG Basics
Demo
The 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 & 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
Canvas Entire API
HTML5 <canvas>
<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>
Let’s see a very simple sample code
Canvas Basics
Demo
The element, interactivity
Let’s Build a Simple Game
Building the same game
Demo
Compare SVG & Canvas
When to Use What?
High level differences: SVG and Canvas
Canvas SVG
Abstraction Pixel based (dynamic
bitmap)
Shape based
Elements Single HTML element Multiple graphical elements
which become part of the
Document Object Model
(DOM)
Driver Modified through Script
only
Modified through Script and
CSS
Event Model User Interaction is
granular (x,y)
User Interaction is
abstracted (rect, path)
Performance Performance is better
with smaller surface
and/or larger number of
objects
Performance is better with
smaller number of objects
and/or larger surface.
The last piece to help you choose
Scenarios: Canvas and SVG
Use Case: Visualizing Data
Charts
Display Data or Change the user driven views
Styling / Transitions
<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; }
<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);
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"/>
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); }
PAGE 43
Toolings
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
Tools to generate Canvas You 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.
Level of support
<video>
Yes
No No
Yes
No
<canvas> Yes No Yes
<svg> No No No
HTML5 Tools
Tools
F12 Developer Tools
Browser Mode Changes the rendering
engine only
Great list of PolyFills Changes the rendering engine
and user agent string
F12 Developer Tools Testing from Internet Explorer 9 to 7
PAGE 51
Expression Web Super Preview
PAGE 52
Summary and Resources
Can I Use HTML5 Today?
PAGE 54
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
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
Upcoming HTML5 Web Camps