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

What is HTML5

Dive into HTML5

HTML5 Tools

Summary and Resources

PAGE 3

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

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>

Demo
Semantics
Basic HTML5 page

CSS3
 IE9
 Selectors
 Backgrounds and Borders
 Fonts (WOFF)
 Media Queries
 Color
 Transformations
 Namespaces
 Values and Units
 IE10 Platform Preview
 Multi-column Layout
 Grid Layout and CSS3 Flexible Box Layout
 Gradients
 Transitions and CSS3 3D Transforms

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

Demo
Canvas Basics
The element, interactivity

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

Demo
SVG Basics
The element, some styling & interactivity

Combination/Crossover Scenarios
More subtle differences

 Charts and Graphs
 SVG better for interaction, XML data loading & for
printing
 Canvas could be a faster rendering choice for some
browsers

 Two-Dimensional Games
 Canvas offers a more familiar experience to game
developers (low level APIs, immediate mode as XNA,
etc.)
 SVG does a lot of DOM operations and cost more
memory

Performance Comparison
The last piece to help you choose

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.20
vCurrent 9 4 5.0.4 11.01
4

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.20
vCurrent 9 4 5.0.4 11.01
4

VP8
(WebM)
Yes No (*) Yes Yes
video
support
Yes

H.264 video
No (*) Yes Yes (*) No (*)
format

Demo

• Video, Fallback, Styled Video,
Canvas, Animation

Frameworks and Tools
 Modernizr
 www.modernizr.com
 Shipping with ASP.NET MVC 3 Tools update

Fallback: Polyfills and Shims

 Polyfills
 github.com/Modernizr/Modernizr/wiki/HTML5-Cross-
browser-Polyfills

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 31

Expression Web Super Preview

PAGE 32

Demo
Expression Web Super Preview
Test in all major browsers with different version within one
view

Innovate with Emerging Standards
HTML5 Labs

Can I Use HTML5 Today?

PAGE 36

Resources

• Started with IE9 and HTML5
• http://bit.ly/hpbwhv
• Whitepaper focused for developers
• http://msdn.microsoft.com/en-us/ie/ff468705.aspx
• Feature-specific demos
• http://ie.microsoft.com/testdrive/
• Real-world demos
• http://www.beautyoftheweb.com/
• Blogs
• http://blogs.msdn.com/b/ie/
• HTML5 Labs
• http://html5labs.interoperabilitybridges.com/
PAGE 37

Upcoming HTML5 Web Camps
1 Days HTML5 Web Camp
June 10, 2011, Colorado Springs, Co
June 23, 2011, Irvine, CA
http://bit.ly/jo5KFM

Dive into HTML5

Recommandé

Recommandé

Contenu connexe

Plus de Doris Chen

Plus de Doris Chen (20)

Dernier

Dernier (20)

Dive into HTML5