cocktail d’expérience informatiquesGenève 3 & 4 octobre 2011

Seconde édition

Track

Auteur

Session

Microsoft

Sascha P. CORTI

HTML5 An Introduction

soft-shake.ch

Sascha P. Corti Developer Evangelist, Microsoft Switzerland sascha.corti@microsoft.com | blog | twitter

HTML5 An Introduction

What is HTML5?

HTML5…

Adds new elements (canvas, video, audio, inline SVG…)

Is a draft specification from the W3C with over 1100 (printed) pages

Changes and removes some older elements and attributes (center, font…)

Is NOT done yet! Keeps evolving.

Is NOT (only) a Marketing Message

New Markup Elements Article, Section, Nav

Aside, Hgroup, Header, Footer

Figure, Figcaption

Address

<Canvas>

<Audio>

<Video>

HTML5 Markup <div id=mainContent>

<article>

…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

First Public Working

Draft

Working Draft

Candidate Recommen-

dation

Proposed Recommen-

dation

Recommen- dation

May 2011 2014

http://www.w3.org/2011/02/htmlwg-pr.html

Last call

(feature complete)

Call to implement

HTML5 Today

The Map of HTML5

First Public Working Draft

Working Draft Last Call Candidate

Recommen-dation

Recommen-dation

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

HTML5: “Same Mark-Up”

9

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

Dive into HTML5

HTML5 <video> 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 – if present displays controls

preload – 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"> <!-- Only shown when browser doesn’t support video --> <!-- You Could Embed Flash or Silverlight Video Here --> </video>

HTML5 <video> Format Support Ogg Theora H.264 VP8 (WebM)

Manual Install (OpenCodecs)

9.0

Using Codec installed by Chrome /

WebM Components for IE9 (Preview)

3.5 No

(Removed at 11) 4.0

3.0 Windows Media Player HTML5 Extension for

Chrome in Win7 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)”

<video>

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

demo

<canvas id="myCanvas" width="200" height="200">

Your browser doesn’t support the HTML5 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>

HTML5 <canvas> A block element that allows developers to draw 2d graphics using JavaScript.

Methods for drawing include: paths, boxes, circles, text and rasterized images

<canvas>

http://www.thekillersmusic.com/HTML5

demo

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

17

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

Selectively style page based on properties of the media

CSS3 Media Queries

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

<style type="text/css"> @font-face { font-family:MyFontName; src: url('FontFile.woff'); } </style> <div style="font: 24pt MyFontName, sans-serif;"> This will render using the font in FontFile.woff </div>

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 declaration A simple repackaging of OpenType or TrueType font data From the W3C Fonts Working Group

<CSS>

http://www.nevermindthebullets.com/

demo

Modernizr Feature Detection JavaScript library HTML5 or CSS3 features.

Feature missing: Modernizr creates Fallback.

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

Supported in Visual Studio.

Easel.js JavaScript Library for building Canvas-Based Apps. Example: Pirates Love Daisies.

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

Ai2Canvas Export Adobe Illustrator Vector and Bitmap Artwork directly to HTML5 Canvas.

Provides Drawing, Animation and Coding Options such as Events

HTML5 Tools & Frameworks

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, full-duplex communications channels, over a single 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

Background Thread

Core #2

Foreground (UI Thread)

Core #1

PDC 2010 Sessions: Unlocking JavaScript Opportunity with Internet Explorer 9 Inside Internet Explorer Performance

“Chakra” JavaScript Engine

25

Background

Compiler

Native

Code

Source

Code Parser

ByteCode

Generator Interpreter

Machine

Instructions

Exec Loop

JSZap: Compressing JavaScript Source Code

Brand Browser in your Site’s Colors & Logo

Disable 3rd Party Add-Ons

Integrate in Windows 7 Taskbar

Add custom Menus

Show Dynamic Overlay Icons

IE9 “Pinned Site”

Pinned Site

http://www.nevermindthebullets.com/

Internet Explorer 9

Conclusion

HTML5 a Solution to Homogenize Mobile Space?

Users mostly still decide Pro App

Added Interactivity

Faster Start-Up

More Network Independent

Mobile: HTML5 or App?

Interation Intense

Data Intense

HTML5 or Plug-In based RIA?

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.

Plug-In based

Resources W3C

HTML5 Working Group

HTML5 Test Suite Conformance Results

Microsoft IE Blog

IE Test Drive

IE Test Center

HTML5 Gallery

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