Dive Into HTML5

Dive into HTML5

Doris Chen Ph.D.
Developer Evangelist
Microsoft
http://blogs.msdn.com/dorischen/
@doristchen

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)

Agenda

HTML5 Overview

HTML5 Main Feature

HTML5 Tools

Summary and Resources

PAGE 3

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

W3C HTML Working Group

•
•
•
•
•

100+ Specifications

Geolocation
ECMA
HTML CSS Web Apps SVG

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

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

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

HTML Tags
<div id=”header”>

<div id=”nav”>

<div
<div id=”article”>
id=”sidebar”>

<div id=”footer”>

New Semantic HTML Tags
<header>

<nav>

<section>
<aside>
<article>

<footer>

HTML5 Semantic Tags
Supported 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>

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

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

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

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

Demo

• Let’s have some fun with Video

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>
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>

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

Demo
SVG Basics
The element, some styling & interactivity

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

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>

Demo
Canvas Basics
The element, interactivity

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

The last piece to help you choose

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);
}

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.

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

Expression Web Super Preview

PAGE 46

Can I Use HTML5 Today?

PAGE 48

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

Dive Into HTML5

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (15)

Similar to Dive Into HTML5

Similar to Dive Into HTML5 (20)

More from Doris Chen

More from Doris Chen (20)

Recently uploaded

Recently uploaded (20)

Dive Into HTML5