HTML5 - Shawn Wildermuth
advertisement
Truth and Fiction Shawn Wildermuth President, AgiliTrain Microsoft MVP (Data) 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) © 2007-2010, Wildermuth Consulting Services, LLC HTML5: Truth and Fiction © 2007-2010, Wildermuth Consulting Services, LLC HTML5: Truth and Fiction 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 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 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. © 2007-2010, Wildermuth Consulting Services, LLC HTML5: Truth and Fiction 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 © 2007-2010, Wildermuth Consulting Services, LLC HTML5: Truth and Fiction <command> <datalist> <details> <output> <progress> <meter> <ruby> (text annotations) © 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) © 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 © 2007-2010, Wildermuth Consulting Services, LLC HTML5: Truth and Fiction navigator.geolocation.getLocation() ◦ ◦ ◦ ◦ ◦ Long/Lat Altitude Accuracy Heading Speed © 2007-2010, Wildermuth Consulting Services, LLC HTML5: Truth and Fiction Two Facilities ◦ Local Storage (part of HTML5) ◦ WebDB (Ad hoc by browsers) © 2007-2010, Wildermuth Consulting Services, LLC HTML5: Truth and Fiction Local Storage ◦ Name/Value pair storage localstorage.foo = true; var foo = localstorage.foo © 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 © 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 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 <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 © 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 © 2007-2010, Wildermuth Consulting Services, LLC HTML5: Truth and Fiction © 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/bb424812f742-41ef-974a-cdac607df921 • (easier to just search by name) © 2007-2010, Wildermuth Consulting Services, LLC HTML5: Truth and Fiction
