…article text…

The Map of HTML5

W3C HTML WG

Chair Sam Ruby (IBM) Paul Cotton (Microsoft) Maciej Stachowiak (Apple) 40 Member Organizations, 411 Participants, 280 Invited Experts 16 people from Microsoft Teams 8 Publications HTML5 HTML Canvas 2D Context HTML: The Markup HTML5 diffs from HTML4 Polyglot Markup Meetings over IRC, Phone, Face-to-face Recommendations produced under Royalty-Free basis

www.w3.org/html/wg

Specification Status

May 2011 HTML5 Today

First Public Working Draft Working Draft Candidate Recommen dation Proposed Recommen dation

2014

Recommen dation

Last call (feature complete) Call to implement http://www.w3.org/2011/02/htmlwg-pr.html

The Map of HTML5

http://www.w3.org/News/2011

First Public Working Draft Working Draft Last Call Candidate Recommen dation Recommen dation

HTML5: “Same Mark-Up”

9

http://ie.microsoft.com/testdrive/HTML5/BorderRadius/Default.html

Dive into HTML5

HTML5

Video can be composited with anything else on the page HTML content, images, SVG graphics IE9: Hardware accelerated, GPU-based decoding Attributes

src

– specifies the location to pull the source file

autoplay

– if present starts playing as soon as it’s ready

controls preload

– if present displays controls – if present loads source at page load

loop

– if present loops back to the beginning of the video

height

&

width

– specifies the height & width of the player < video src ="video.mp4" id ="videoTag" width ="640px" height ="360px">

HTML5

Ogg Theora H.264

VP8 (WebM) Manual Install ( OpenCodecs ) 9.0

Using Codec installed by Chrome / WebM Components for IE9 (Preview) 3.5

3.0

No (Removed at 11) Windows Media Player HTML5 Extension for Chrome in Win7 4.0

6.0

Manual Install ( Xiph.org QuickTime Components ) 3.1

Google announced a WebM plugin for Safari 10.50

No 10.60

http://en.wikipedia.org/wiki/HTML5_video

Converting Videos

Expression Media Encoder 4 Pro Transcoding Project Output Format: MP4 VLC Media Player (free download) Media  Convert/Save Video: H.264 + AAC (MP4)” “Video: VP8 + Vorbis (Webm)”

demo

http://www.youtube.com/watch?v=RfMSxf6P_AM

HTML5

A block element that allows developers to draw 2d graphics using JavaScript.

Methods for drawing include: paths, boxes, circles, text and rasterized images < canvas id ="myCanvas" width ="200" height ="200"> Your browser doesn’t support the HTML5 canvas, sorry.

< script var type ="text/javascript"> example = document.getElementById( "myCanvas" ); var context = example.getContext( "2d" ); context.fillStyle = "rgb(255,0,0)" ; context.fillRect( 30 , 30 , 50 , 50 );

demo

http://www.thekillersmusic.com/HTML5

Scalable Vector Graphics

Create and draw 2D vector graphics using XML Vector images are composed of shapes instead of pixels Based on the SVG 1.1 2 nd Edition Full specification Support for Full DOM access to SVG elements Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views < svg < < width ="400" rect rect height ="200" xmlns ="http://www.w3.org/2000/svg"> fill ="red" fill ="blue" x ="20" x ="50" y ="20" y ="50" width ="100" width ="100" height ="75" /> height ="75" /> 1 7

CSS3 Media Queries

Selectively style page based on properties of the media < link href ="DoNotDisplay.css" rel ="stylesheet"

media ="screen and (max-width:1199px)" type

="text/css" /> < link href ="DoNotDisplay.css" rel ="stylesheet"

media ="screen and (min-width:1301px)" type

="text/css" /> < link href ="Presentation.css" rel ="stylesheet"

media ="screen and (min-width:1200px) and (max-width: 1300px)" type

="text/css" /> Maxdesign: CSS3 Media Queries (SlideShare)

New: @font-face & WOFF Fonts

No longer limited to the “web safe” font list!

Web Open Font Format allows you to package and deliver fonts as needed, per site Designed for web use with the

@font-face

From the W3C Fonts Working Group declaration A simple repackaging of OpenType or TrueType font data < style type ="text/css"> @font-face { font-family : MyFontName ; src : } url('FontFile.woff') ; < div style =" font : 24pt MyFontName, sans-serif ; "> This will render using the font in FontFile.woff

demo

http://www.nevermindthebullets.com/

HTML5 Tools & Frameworks

Modernizr jQuery Easel.js

Feature Detection JavaScript library HTML5 or CSS3 features. Feature missing: Modernizr creates Fallback.

JavaScript library for DOM Manipulation Event Handling, Animation, Document Traversing.

Supported in Visual Studio.

JavaScript Library for building Canvas-Based Apps.

Example: includes concepts such as sprites, graphics, sparkles and game semantics.

Ai2Canvas Pirates Love Daisies .

Export Adobe Illustrator Vector and Bitmap Artwork directly to HTML5 Canvas. Provides Drawing, Animation and Coding Options such as Events

Internet Explorer & HTML5

What about the other Specs?

http://html5labs.interoperabilitybridges.com

IndexedDB: W3C draft Web specification for the storage of large amounts of structured data in the browser, using indexes that allow for high performance searches on this data.

WebSockets: Technology designed to simplify much of the complexity around bi directional, single full-duplex communications channels, over a Transmission ControlProtocol (TCP) socket .

Implemented in web browsers , web servers as well as used by any client or server application.

Internet Explorer: Two Flavors

IE 10: Platform Preview Frequent Releases (8 weeks) Side-by-Side installation Only Chakra & Trident IE9: Stable Release Full Browser No Side-by-Side Site Mode & Developer Tools

“Chakra” JavaScript Engine

JSZap: CompressingJavaScript Source Code Foreground (UI Thread) Source Code Parser Core #1 ByteCode Generator Interpreter Exec Loop Machine Instructions Background Thread Background Compiler Native Code Core #2 25 PDC 2010 Sessions: Unlocking JavaScript Opportunity with Internet Explorer 9 Inside Internet Explorer Performance

IE9 “Pinned Site”

Brand Browser in your Site’s Colors & Logo Disable 3 rd Party Add-Ons Integrate in Windows 7 Taskbar Add custom Menus Show Dynamic Overlay Icons

demo

Internet Explorer 9 – Pinned Site

Conclusion

Mobile: HTML5 or App?

HTML5 a Solution to Homogenize Mobile Space?

Users mostly still decide Pro App Added Interactivity Faster Start-Up More Network Independent Data Intense Interation Intense

HTML5 or Plug-In based RIA?

Plug-In based

Today, Browsers should not require a Plug-In to play Multimedia Content.

Today, Line-of-Business Applications with lots of Logic are very hard to write in JavaScript.

Resources

W3C HTML5 Working Group HTML5 Test Suite Conformance Results Microsoft IE Blog IE Test Drive IE Test Center HTML5 Gallery

Give us your feedback!

Please help us make TechDays even better by Evaluating this Session. Thank you!

© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.