Transcript HTML5 An Introduction Sascha P. Corti Developer Evangelist, Microsoft Switzerland [email protected] | blog | twitter.

HTML5
An Introduction
Sascha P. Corti
Developer Evangelist, Microsoft Switzerland
[email protected] | blog | twitter
What is HTML5?
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
The Map of HTML5
Specification Status
May
2011
2014
HTML5
Today
First Public
Working
Draft
Working
Draft
Candidate
Recommendation
Last call
(feature
complete)
Proposed
Recommendation
Call to
implement
http://www.w3.org/2011/02/htmlwg-pr.html
Recommendation
The Map of HTML5
First Public
Working Draft
Working Draft
Last Call
Candidate
Recommendation
Recommendation
Dive into HTML5
HTML5 Markup
<div id=mainContent>
New Markup Elements
Article, Section, Nav
Aside, Hgroup, Header,
Footer
Figure, Figcaption
Address
<Canvas>
<Audio>
<Video>
<article>
…article text…
HTML5 & SVG in Visual Studio
http://visualstudiogallery.msdn.microsoft.com
HTML 5
Intellisense
for Visual
Studio 2010
& 2008
CSS 3
Intellisense
Schema
Now included in
Visual Studio 2010 SP1
demo
HTML5 Markup Elements
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)
No
9.0
Using VP8 Codec
installed by Chrome /
WebM Components for
IE9 (Preview)
3.5
No
4.0
3.0
Windows Media Player
HTML5 Extension for
Chrome on Win7]
6.0
No
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
<video>
http://www.youtube.com/watch?v=RfMSxf6P_AM
HTML5 <audio>
Industry-standard MP3 and AAC audio
Fully scriptable via the DOM
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
<audio src="audio.mp3" id="audioTag" autoplay controls>
<!-- Only shown when browser doesn’t support audio -->
<!-- You could embed Flash or Silverlight audio here -->
</audio>
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
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
SVG
Basic Shapes
Paths
Text
Transforms
Painting, Filling, Color
Scripting
Styling
Gradients, Patterns
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>
2
demo
<SVG>
http://en.wikipedia.org/wiki/United_states_of_america
CSS
Complete CSS 2.1 support
Selectors
Border Radius
Backgrounds
Color & Opacity
WOFF Fonts
Box Shadow
2D Transforms
CSS3 Colors & Opacity
CSS3 Color
Alpha color with rgba() and hsla() color functions
Transparency control with the opacity property
CSS3 Backgrounds and Borders
Round corners with the border-radius property
Multiple background images per element
box-shadow property on block elements
div.top {
background-color: rgba(0, 0, 0, 0.5);
}
div.bottom {
background-color: hlsa(0, 0%, 0%, 0.5);
}
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/
DOM/ECMA Script 262
addEventListener
GetElementByClassName
New Array Methods
indexOf, lastIndexOf, forEach,
every
Enhanced Object Model
defineProperty, create,
getPrototypeOf
Computational Methods
string.Trim, toISOString,
data.parse, date.now, bind
demo
<ECMA Script 262>
http://www.visitnmc.com/
Conclusion
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 bidirectional, 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.
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
© 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.