Shawn Wildermuth President, AgiliTrain Microsoft MVP (Data) Truth and Fiction

Shawn WildermuthPresident, AgiliTrainMicrosoft MVP (Data)

HTML5Truth and Fiction

© 2007-2010, Wildermuth Consulting Services, LLC

HTML5: Truth and Fiction

Shawn Wildermuth ◦ [email protected]◦http://agilitrain.com◦C# MVP, MCSD, INETA Speaker◦Silverlight Insider, CSD Insider, Data Insider

Book Author ◦Pragmatic ADO.NET◦MCTS Training Kit (Exam 536)◦MCPD Training Kits (Exams 547, 548 & 549)◦Windows Phonebook (Upcoming)◦Silverlight Architecture (Upcoming)

Who Am I?





HTML5

Emerging Standard◦Partially Implemented in Many Browsers◦ Its not about the browser but the Rendering

Engine Trident (IE) WebKit (Chrome, Safari, Android, iPhone) Gecko (Mozilla/Firefox) Presto (Opera)

“The ones that win are the ones that ship.”



HTML5

HTML5 Moniker is Variety Of Technologies◦HTML New Tag Support◦CSS3 Styling◦ JavaScript API’s to support both



HTML5

Built on top of HTML4◦Much of what you will do is backwards

compatible ◦Some can be mimicked with JavaScript◦Detection Libraries become important



<!DOCTYPE html>◦Yeah really…

<link ref /> really works◦CSS, alternatives, RSS feeds, translations, pdf,

etc.

Doc Changes



Semantic Tags

Not formatting but intent Reducing <div> madness with

information◦<section>◦<nav>◦<article>◦<aside>◦<hgroup>◦<header>◦<footer>◦<time>◦<mark>



Tags to support specific features◦<video>, <audio>, <track>

Codecs are a mess here No support for DRM Browsers are fighting over thes

◦<canvas> Drawing surface, not a vector format JavaScript API to draw, no markup SVG may rise from the ashes to make due

Feature Tags



<command> <datalist> <details> <output> <progress> <meter> <ruby> (text annotations)

Other Tags



New Input Types◦ Search◦ Number (spinboxes)◦ Range (sliders)◦ Color (color pickers)◦ Tel (for phone numbers)◦ Url ◦ Email◦ Date (calendars)◦ Month◦ Week◦ Time◦ Datetime◦ Datetime+local (localized DateTime)

Forms



Placeholder◦ (for watermarking)

Autofocus◦ (for specifying initial focus on a form)

Regex Validation Required attribute Commands

Forms



navigator.geolocation.getLocation()◦Long/Lat◦Altitude◦Accuracy◦Heading◦Speed

Geolocation



Two Facilities◦Local Storage (part of HTML5)◦WebDB (Ad hoc by browsers)

Storage



Local Storage◦Name/Value pair storage

localstorage.foo = true; var foo = localstorage.foo

Storage



WebDB◦Not standardized yet◦SQLite probably solution◦SQL a must here◦Safari and Chrome have implemented

Storage



Support for telling browsers what it needs◦<html manifest=“/myapp.manifest” />◦Lists all the files so browser can go offline

Offline

CACHE MANIFEST NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpg



Annotations at the tag level◦ “Microdata annotates the DOM with scoped

name/value pairs from custom vocabularies.”◦Allows you to add attributes via schema

Microformats

<section itemscope itemtype="http://data-vocabulary.org/Person"> <h1 itemprop="name">Mark Pilgrim</h1>ty. <p> <img itemprop="photo" src="http://www.example.com/photo.jpg" alt="[me smiling]"> </p> <a itemprop="url" -href="http://diveintomark.org/"> dive into mark </a></section>



WebWorkers◦ (e.g. Threads)

WebSockets◦ (e.g. Network communication)

History API◦ (manipulating history and interpage linking)

Editable Content◦ (no more editors)

Drag and Drop Undo Support File API

Other Bits



Not really part of HTML5◦But delivered in similar timeframe

Not enough time to cover its pieces But maturation of CSS 2.1

CSS 3



“HTML is for Sites; Plugins are

for Apps”

What about Plugins?



Links:• My Blog: • http://wildermuth.com• Presentation and Code Available There

• Up and Running with HTML5:• http://diveintohtml5.org

• Wikipedia Engine Differences• http://en.wikipedia.org/wiki/

Comparison_of_layout_engines_(HTML5)

• HTML5 Schema Support for VS 2010/08• http://tinyurl.com/vs2010html5

• World of VS Default Browser Switcher• http://visualstudiogallery.msdn.microsoft.com/en-us/

bb424812-f742-41ef-974a-cdac607df921

• (easier to just search by name)

Questions?

Documents

Shawn Wildermuth President, AgiliTrain Microsoft MVP (Data) Truth and Fiction