HTML5

dazzlingcatchInternet and Web Development

Jun 21, 2012 (5 years and 4 months ago)

317 views

Shawn Wildermuth

President,
AgiliTrain

Microsoft MVP (Data)

Truth and Fiction

©

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)

©

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 brow
ser 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/bb424812
-
f742
-
41ef
-
974a
-
cdac607df921


(easier to just search by name)