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?

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

Documents

fiction slide

wildermuth consulting

fiction shawn wildermuth

fiction support

fiction webdb

fiction navigator

fiction tags

fiction placeholder