Dive into HTML5
37
Doris Chen Ph.D. Developer Evangelist Microsoft http://blogs.msdn.com/dorischen/ @doristchen Dive into HTML5
-
Upload
doris-chen -
Category
Technology
-
view
3.210 -
download
1
description
Demo and sample code are availalbe to download at http://bit.ly/juGbPA. 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 the current status of HTML5, how to use HTML5 and how new web standards help solve existing challenges on the web. You will also preview the next emerging standards and understand Microsoft implementation approach through prototypes. In this session, Doris will cover: •What is the real potential of HTML5 using CSS3, Canvas, SVG, Video, Audio, and JavaScript? •How can HTML5 and IE make your site look better and work faster? •Come and see a collection of the best HTML5 web sites around the Web on Games, Videos, Movies, Comics, Travel, Music and Art •Be inspired by crazy web sites, stunning prototypes and futuristic concepts Expect a lot of demos and code!
Transcript of Dive into HTML5
Doris Chen Ph.D.
Developer Evangelist
Microsoft
http://blogs.msdn.com/dorischen/
@doristchen
Dive into HTML5
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
Dive into HTML5
HTML5 Tools
Summary and Resources
100+ Specifications
Web Standards in action
Demo
Dive into HTML5
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
Semantics
Demo
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
CSS3
Demo
Medium query
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
Canvas Basics
Demo
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
SVG Basics
Demo
The element, some styling & interactivity
Scenarios: Canvas and SVG
Combination/Crossover Scenarios
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
More subtle differences
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
vCurrent 9 4 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 4 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
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
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 31
Expression Web Super Preview
PAGE 32
Expression Web Super Preview Test in all major browsers with different version within one view
Demo
Innovate with Emerging Standards
HTML5 Labs
Summary and Resources
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
1 Days HTML5 Web Camp
June 10, 2011, Colorado Springs, Co
June 23, 2011, Irvine, CA
http://bit.ly/jo5KFM
Upcoming HTML5 Web Camps
