More On Html 5
Post on 09-May-2015
1276 Views
Preview:
DESCRIPTION
Transcript
More on HTML5Darren Wood
@darren | http://dontcom.com
What is HTML 5?
‐nextmajorrevisionofHTML‐from1997to2006workonHTMLwithintheW3CwasfocusedexclusivelyonXHTML‐in2004withtheWebHypertextApplicaJonTechnologyWorkingGroup(WHATWG)formedasabreak‐awayfromtheW3C‐developedthecruxofHTML‐maindudeisIANHICKSON‐firstdraUappeared22Jan2008W3C‐twovariantsofsamelanguage;classicHTML(HTML5)orXHTMLvariant(XHTML5).firstJmeHTMLandXHTMLhavebeendevelopedinparallel‐HTMLisagamechangerespinthewebappandRIAareas...
HTML5 Design Principles
Support existing content
Ensure interoperability
Handle errors
Evolution not revolution
- Support existing content- Ensure interoperability- Precisely define UA behavior- Handle errors- Evolution not revolution
The problem with the current setup...
current setup is XHTML/XML
"The attempt to get the world to switch to XML, including quotes
around attribute values and slashes in empty tags and namespaces all
at once didn't work"
- TBL
“Authors will write invalid content regardless of what we spec. So the spec states what authors must not
do, and then tells implementers what they must do when an author
does it anyway”
- Ian Hickson
More than 90% of Alexa Top 500 sites
are not valid
The solution...
Don't get hung up on the syntax
<AHREF=contact.htmlclass=”yes”>
<inputTYPE=”button”value=FOO>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
HTML
XHTML
- html 5 simple doctype- xhtml 5 strict xml rules, must be application/xml or application/xhtml+xml, no doctype required
<!DOCTYPEhtml><htmllang="en"><head><metacharset=utf‐8><title>HTML5Demo</title></head><body><header><h1>Logoetc</h1></header><nav><p>Menu</p></nav><section><h1>Section</h1><article><p>article1</p></article></section><aside><h2>Someextracontent</h2></aside><footer><p>Copyright©2009.</p></footer></body></html>
In the real world...
Semantic class names
HTML5 shiv
<style>figure{border:1pxinset#AAA;padding:4px;}</style><script>document.createElement("figure");</script>
tinyurl.com/html5-scaffold
Audio & Video
<videowidth="640"height="360"src="http://www.youtube.com/demo/google_main.mp"autobuffercontrolsposter="whale.png"><p>TrythispageinSafari4!Oryoucan<ahref="http://www.youtube.com/demo/google_main.mp4">downloadthevideo</a>instead.</p></video>
Codec Shit-fight.
OGG Theora & H.264
the plan was to support OGG Theora & H.264
OGG Theora & H.264
the plan was to support OGG Theora & H.264
The deal with OGG
open source and free licensingBig Boys (Apple, Google) are generally scared of OS stuffno widespread hardware support (means mobile is out)lack of quality compared to H.264 ??
The deal with H.264
patent owned by MPEG (Motion Picture Experts Group)OS companies (Mozilla) reckon it's too priceypaying the licence doesn't guarantee complete immunity from patent infringement in the future...a whole bunch of other major licensing issues. LEGAL JARGAN
Just use Flash<cry>
Just use Flash<cry>
Link lovage...
http://www.w3.org/TR/html5http://whatwg.org/html5http://html5doctor.com/
http://molly.com/html5/html5-0709.htmlhttp://html5gallery.com/
http://tinyurl.com/html5-video-debate
http://assets.dontcom.com/html5.pdf
download
Lets talk!
questions yo
top related