View
217
Download
0
Category
Tags:
Preview:
Citation preview
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
Shawn Wildermuth ◦ shawn@agilitrain.com◦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?
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
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.”
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
HTML5
HTML5 Moniker is Variety Of Technologies◦HTML New Tag Support◦CSS3 Styling◦ JavaScript API’s to support both
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
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
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
<!DOCTYPE html>◦Yeah really…
<link ref /> really works◦CSS, alternatives, RSS feeds, translations, pdf,
etc.
Doc Changes
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
Semantic Tags
Not formatting but intent Reducing <div> madness with
information◦<section>◦<nav>◦<article>◦<aside>◦<hgroup>◦<header>◦<footer>◦<time>◦<mark>
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
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
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
<command> <datalist> <details> <output> <progress> <meter> <ruby> (text annotations)
Other Tags
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
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
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
Placeholder◦ (for watermarking)
Autofocus◦ (for specifying initial focus on a form)
Regex Validation Required attribute Commands
Forms
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
navigator.geolocation.getLocation()◦Long/Lat◦Altitude◦Accuracy◦Heading◦Speed
Geolocation
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
Two Facilities◦Local Storage (part of HTML5)◦WebDB (Ad hoc by browsers)
Storage
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
Local Storage◦Name/Value pair storage
localstorage.foo = true; var foo = localstorage.foo
Storage
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
WebDB◦Not standardized yet◦SQLite probably solution◦SQL a must here◦Safari and Chrome have implemented
Storage
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
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
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
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>
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
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
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
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
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
“HTML is for Sites; Plugins are
for Apps”
What about Plugins?
© 2007-2010, Wildermuth Consulting Services, LLC
HTML5: Truth and Fiction
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?
Recommended