DEV343 :: Application Development with HTML5

Brandon SatromDeveloper EvangelistMicrosoft

About Me

@BrandonSatromwww.userinexperience.combrsatrom@microsoft.com

Husband and FatherDeveloper Evangelist, MicrosoftWeb developer for lifeBased in Austin, TX

What you said you wanted to hear…

New features that can be used todaySemantic replacements for generic elementsFeatures we shouldn’t use because of compatibility problemsBest practices for HTML5 developmentHow to implement cross-document messagingNew aspects of CSS3Tools that help in leveraging HTML5 featuresWhat should designers and developers learn first

*Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!

Agenda

History of HTML5Defining The HTML5 “Standard”Add Six Words to Your Development VocabularyThe HTML5 “Standard” and YouSome Thoughts on Development Tools

A History of HTML5*With some help from Dr. Seuss

A History of the Web

199119941996 +19971998

20002005 AJAX2009 + +

HTML

CSS 1 JavaScript

HTML 2

HTML 4

CSS 2

XHTML 2

AJAX

HTML5 CSS 3 ECMAScript 5

2004

Filling in the Gaps (1991 to Present)

HTML 2 3 3.2 4 4.01

XML XHTML1 1.1 1SE 2

Web Forms 2 Web Apps 1 HTML5

Butter side up? Or down?

W3C vs. WHATWGStandard A vs. Standard BBrowser Wars 2.0?

We just want the Web!

Defining The HTML5 “Standard”*Air Quotes Required

“ ”=HTML5 CSS 3JavaScript

APIs++

HTML5 – An Umbrella Term

Official “HTML5” SpecificationCSS3JavaScript APIs enabling:

Canvas/SVGAudio and VideoGolocationWebStorageAnd much, much, much, much, much, much, more…

Technology Areas of HTML5Performance

3D Effects

Semantics Styling Multimedia

Device Access

ConnectivityOffline & Storage

Add Six Words to Your Development Vocabulary*”Validation” isn’t one of them

#1 - Hyperbole*It’s the best thing ever!

Next up, an album of Tony Bennett covers…

HTML5 is Kind of a Big Deal…

…he just made that up.

“Don’t believe the hype…”

“Taffeta phrases, silken phrases precise,Three-piled hyperbole, spruce affectation,Figures pedantical—these summer fliesHave blown me full of maggot ostentation.I do forswear them.” – William Shakespeare

…But do believe that HTML5 is changing everything

“The future of the web is HTML5.”— Dean Hachamovitch, Microsoft

“We're betting big on HTML 5.”— Vic Gundotra, Google

“The world is moving to HTML5.”— Steve Jobs, Apple

#2 - Compatibility*Your GeoCities sites are safe.

The Web is the largest legacy software system in the history of the universe.

#3 - Semantics*Tags have meaning

Neutral vs. Rich Semantics

<div> <div id=“header”> <header>

#4 - JavaScript*It’s not your father’s scripting language. Well, ok, actually it is.

JavaScript and the Growth of the Client

Client Server Database

JavaScript

1990’s

Client Server Database

JavaScript

2000’s

Client Server Database

JavaScript

Today

#5 - Applications*The “web” is dead. Long live the Web!

Client vs. Web

Desktop Applications Web Applications

Accessed through executable Accessed through the browser

Can operate when disconnected Must be connected

Can use local storage for performance Cookies are only local storage option

Can access the user’s filesystem No access to user’s filesystem

Can leverage OS features and utilities No access to user’s OS

Can interact with user when application is closed or minimized

Can only interact with user from within the browser window.

Rich 2D and 3D animation Rudimentary animation, no native 3D

#5 - Polyfills*It’s like shims in JavaScript… for hipsters.

Ex. Polyfills with Modernizr

article { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }

$(function() { if (!Modernizr.borderradius) { // Use a jQuery plugin to round those corners $.getScript("js/jquery.corner.js", function () { $("article").corner(); }); }});

The HTML5 “Standard” and You*Things you can use, things you can polyfill and things you should keep an critical eye on

Use These…*Mature and Fully Supported(-ish)

Semantic Markup*Alas, poor <div>, I hardly knew ye.

A Sample XHTML Document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>

<head><meta http-equiv="content-type"

content="text/html; charset=utf-8">

</head><body>

<p> XHTML :/ </p></body>

</html>

A Valid HTML5 Document

<!DOCTYPE html><meta charset="utf-8"><title> Hello </title><p> HTML5! </p>

But we really ought to be compatible…

<!DOCTYPE html><html>

<head><meta charset="utf-8"><title> Hello </title>

</head><body>

<p> HTML5! </p></body>

</html>

28 New Elements

article footer rtaside header rubyaudio hgroup sectioncanvas keygen sourcecommand mark summarydatalist meter timeembed output wbrfigcaption progressfigure rp

demo

Semantic Markup

Canvas*Your old Nintendo games, reborn! (Plus DOOM)

<canvas> + JavaScript = Crazy Deliciousvar canvasContext = document.getElementById("canvas") .getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100,

Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle =

'rgba(255, 127, 0, 0.5)'; canvasContext.stroke();

demo

<canvas>

Audio and Video*Coming this fall to theaters: The DaVinci Codec

Media on your page… no plugins required.<video id=“video" controls autoplay> <source src="video.mp4" type="video/mp4“ /> <object height="380"

type="application/x-silverlight-2" width="640">…</object>

</video>document.getElementById("video").play();

<audio id="audio" src="sound.mp3" controls></audio>document.getElementById("audio").muted = false;

demo

<audio> and <video>

Geolocation*Useful for finding all those pokemon

You are (within a few meters of) here

//Get my location, and put it on a mapnavigator.geolocation.getCurrentPosition(function(position) { var location = new Microsoft.Maps.Location(

position.coords.latitude,         position.coords.longitude); _map.setView({ zoom: 18, center: location });    // Add a pushpin to the map representing the current location   var pin = new Microsoft.Maps.Pushpin(location);   _map.entities.push(pin);}, errorHandler);

demo

Geolocation

Storage*Cookies, Roger Clemens style

Working with localStorage

// use localStorage for persistent storagesaveButton.addEventListener('click', function () {

window.localStorage.setItem('value', area.value);  window.localStorage.setItem('timestamp',

(new Date()).getTime());}, false);textarea.value = window.localStorage.getItem('value');

demo

Local Storage

Polyfill These…*Some support ::Use Modernizr and JavaScript to close the gap

Web Forms*New Tags and Attributes for richer forms

<input type=“see below”>

color month urldatalist number weekdate rangedatetime searchdatetime-local telemail time

Working with Forms and Validation

<input type="text" required /><input type="email" value="some@email.com" /><input type="date" min="2010-08-14" max="2011-08-14" /><input type="range" min="0" max="50" value="10" /><input type="search" results="10" placeholder="Search..." /><input type="tel"  pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /><input type="color" placeholder="e.g. #bbbbbb" /><input type="number" step="1" min="-5" max="10" value="0" />

demo

Web Forms and Validation

CSS3*Style Enhancements

(Some of) What’s new in CSS3

SelectorsBackgrounds and BordersFonts (WOFF)Media QueriesColorTransformationsNamespacesValues and Units

Working with New Styles.row:nth-child(even) {  background: #dde;}.row:nth-child(odd) {  background: white;}

@font-face {  font-family: 'LeagueGothic';  src: url(LeagueGothic.otf);}header {  font-family: 'LeagueGothic';}

:not(span) {  display: block; }  

h2:first-child { ... }

h2 + header { ... }

border-radius: 32px;

demo

CSS3

Keep and Eye on These…*Immature standards or incomplete support, but the web moves fast!

Web Sockets*The web, in real time

Making real time connections

var socket = new WebSocket('ws://my.websocket.org/echo');socket.onopen = function(event) {  socket.send('Hello, WebSocket');};socket.onmessage = function(event) { alert(event.data); }socket.onclose = function(event) { alert('closed'); }

Web Workers*Your script engine has bought into this whole outsourcing craze

Offloading Work to a Worker

main.js:var worker = new Worker('task.js');worker.onmessage = function(event) { alert(event.data); };worker.postMessage('data');

task.js:self.onmessage = function(event) {  // Do some work.  self.postMessage("recv'd: " + event.data);};

IndexedDB*An Object Database for your browser

A DB in your browser…

var idbRequest = window.indexedDB.open('Database Name');idbRequest.onsuccess = function(event) { var db = event.result;  var transaction = db.transaction([], IDBTransaction.READ_ONLY);  var curRequest = transaction.objectStore(‘name').openCursor();  curRequest.onsuccess = function() { // Do Something };};

demo

Web Sockets, Web Workers and IndexedDB

But wait, there’s more!

AppCache – Offline access to application resourcesWebM – Open Video CodecWebGL – 3-D CanvasSVG – in-browser Scalable Vector Graphics supportHistory API – Manipulate browser history without reloadingDevice API – Videoconferencing without pluginsFile API – Sandboxed in-browser file systemAudio data API – create music with JavaScriptServer-sent events –sever-initiated communicationMicrodata – add custom vocabularies to your markupAnd even more… seriously.

Some Thoughts on Tools*At Microsoft, we got lots of ‘em

HTML5 in Web Technologies

Visual Studio 2010 SP1HTML5 Schema ValidatorIntellisense for new semantic elements and attributesIntellisense support for CSS3

Microsoft WebMatrixHTML5 doctype is default for html/cshtml/vbhtml pages.

Expression Web 4 SP1HTML5 Schema ValidatorIntellisense for new semantic elements and attributesIntellisense for CSS3; Richer style editing

*Or, create your own files and templates!

A word of advice…*I’m very opinionated (see that “Tools” slide)

Those Six Words Again

HyperboleCompatibilitySemanticsJavaScriptApplicationsPolyfills

Things you need to learn (aka Resources)Read two good HTML5 books

Introducing HTML5HTML5 Up and Running

Read a good CSS3 bookCSS3: Visual QuickStart Guide

Learn JavaScriptJavaScript: The Good PartsEloquent JavaScript

Learn a JavaScript Framework (like jQuery)JQuery in Action

Learn the Developer Tools in your favorite browserIE9? Just hit F12!

Go Start using HTML5 today!

Use• Semantic Markup• Canvas• Audio and Video• Geolocation• Web Storage

Polyfill • Web Forms• CSS3

Watch• Web Sockets• Web Workers• IndexedDB• Everything else…

Questions?

@BrandonSatromwww.userinexperience.combrsatrom@microsoft.com

Related Content

Breakout Sessions (session codes and titles)

Interactive Sessions (session codes and titles)

Hands-on Labs (session codes and titles)

Product Demo Stations (demo station title and location)

Related Certification Exam

Find Me Later At…

Track Resources

Resource 1

Resource 2

Resource 3

Resource 4

Resources

www.microsoft.com/teched

Sessions On-Demand & Community Microsoft Certification & Training Resources

Resources for IT Professionals Resources for Developers

www.microsoft.com/learning

http://microsoft.com/technet http://microsoft.com/msdn

Learning

http://northamerica.msteched.com

Connect. Share. Discuss.

Complete an evaluation on CommNet and enter to win!

MS Tag Placeholder Slide

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