Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Dive Into HTML5
1. Dive into HTML5
Doris Chen Ph.D.
Developer Evangelist
Microsoft
http://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 15 years of experience in the software industry
focusing on web technologies
Spoke and published widely at HTML5 Dev, 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)
3. Agenda
HTML5 Overview
HTML5 Main Feature
HTML5 Tools
Summary and Resources
PAGE 3
5. Where did HTML5 Come from?
20 years of evolution: 1990 to 2010
HTML 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
15. HTML5 Semantics
Semantic 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
21. 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>
22. Compatibility Table
HTML5 Audio
10.0.648.24
vCurrent 9+ 6+ 5.0.4+ 11.01+
+
MP3 audio
Yes No Yes Yes No (*)
support
WAV PCM
audio No Yes Yes Yes Yes
support
AAC audio
Yes No Yes Yes No (*)
format
23. Compatibility Table
HTML5 <video>
10.0.648.24
vCurrent 9+ 6+ 5.0.4+ 11.01+
+
VP8
(WebM)
Yes No (*) Yes Yes
video
support
Yes
H.264 video
No (*) Yes Yes (*) No (*)
format
26. 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
27. 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>
28. SVG basics SVG Feature
SVG 1.1 2nd Edition
IE9
SVG 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
31. 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
33. 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>
36. 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
42. 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
43. 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.
45. F12 Developer Tools
Testing from Internet Explorer 9 to 7
Browser Mode
Changes the rendering
engine only
Great list of PolyFills
Changes the rendering engine
and user agent string
PAGE 45