soft-shake.ch - Introduction to HTML5

cocktail d’expérience informatiques
Genève 3 & 4 octobre 2011
Seconde édition
soft-shake.ch

Auteur Sascha P. CORTI
Track Microsoft
Session HTML5 An
Introduction

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

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

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

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

Is NOT done yet!
Keeps evolving.

Is NOT (only) a Marketing Message

HTML5 Markup <div id=mainContent>

New Markup Elements
Article, Section, Nav
Aside, Hgroup, Header,
Footer
Figure, Figcaption
Address <article>

<Canvas>
<Audio> …article text…
<Video>

W3C HTML WG
Chair
Sam Ruby (IBM)
Paul Cotton (Microsoft)
www.w3.org/html/wg
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

Specification Status
May
2011 2014

HTML5
Today

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

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

The Map of HTML5
http://www.w3.org/News/2011

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

HTML5: “Same Mark-Up”

9

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

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


</video>

HTML5 <video> Format Support
Ogg Theora H.264 VP8 (WebM)
Using Codec installed
Manual Install by Chrome /
9.0
(OpenCodecs) WebM Components for
IE9 (Preview)
No
3.5 4.0
(Removed at 11)
Windows Media Player
3.0 HTML5 Extension for 6.0
Chrome in Win7
Manual Install
Google announced a
(Xiph.org QuickTime 3.1
WebM plugin for Safari
Components)

10.50 No 10.60

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

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

demo
<video>
http://www.youtube.com/watch?v=RfMSxf6P_AM

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

demo
<canvas>
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 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
<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>
1

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

demo
<CSS>
http://www.nevermindthebullets.com/

HTML5 Tools & Frameworks
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

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 IE9: Stable Release
Frequent Releases (8 weeks) Full Browser
Side-by-Side installation No Side-by-Side
Only Chakra & Trident Site Mode & Developer Tools

“Chakra” JavaScript Engine
JSZap: Compressing JavaScript Source Code

Foreground (UI Thread)
Source ByteCode Machine
Parser Interpreter
Code Generator Instructions

Core #1 Exec Loop

Background Thread Background Native
Compiler Code
Core #2

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

IE9 “Pinned Site”
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

Internet Explorer 9
Pinned Site
http://www.nevermindthebullets.com/

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

Interation
Data
Intense
Intense

HTML5 or Plug-In based RIA?
Plug-In based

Today, Browsers should not Today, Line-of-Business
require a Plug-In to play Applications with lots of
Multimedia Content. Logic are very hard to write
in JavaScript.

Resources
W3C Microsoft
HTML5 Working Group IE Blog
HTML5 T Suite
est IE T Drive
est
Conformance Results IE T Center
est
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.

soft-shake.ch - Introduction to HTML5

Recommended

More Related Content

What's hot (19)

Viewers also liked (6)

Similar to soft-shake.ch - Introduction to HTML5 (20)

More from soft-shake.ch (20)

Recently uploaded (20)

soft-shake.ch - Introduction to HTML5