More On Html 5

1,407
-1

Published on

A brief outline on some of the new elements available in HTML 5 and how to start using them now.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,407
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

More On Html 5

  1. 1. More on HTML5 Darren Wood @darren | http://dontcom.com
  2. 2. What is HTML 5? ‐
next
major
revision
of
HTML ‐
from
1997
to
2006
work
on
HTML
within
the
W3C
was
focused
exclusively
on
XHTML ‐
in
2004
with
the
Web
Hypertext
ApplicaJon
Technology
Working
Group
(WHATWG)
formed
as
a
break‐away
from
the
W3C
‐
developed
 the
crux
of
HTML ‐
main
dude
is
IAN
HICKSON ‐
first
draU
appeared
22
Jan
2008
W3C ‐
two
variants
of
same
language;
classic
HTML
(HTML5)
or
XHTML
variant
(XHTML5).

first
Jme
HTML
and
XHTML
have
been
developed
 in
parallel ‐
HTML
is
a
game
changer
esp
in
the
web
app
and
RIA
areas...
  3. 3. HTML5 Design Principles
  4. 4. Support existing content Ensure interoperability Handle errors Evolution not revolution - Support existing content - Ensure interoperability - Precisely define UA behavior - Handle errors - Evolution not revolution
  5. 5. The problem with the current setup... current setup is XHTML/XML
  6. 6. "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
  7. 7. “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
  8. 8. More than 90% of Alexa Top 500 sites are not valid
  9. 9. The solution...
  10. 10. Don't get hung up on the syntax
  11. 11. <A
HREF=contact.html
class=”yes”> <input
TYPE=”button”
value=FOO>
  12. 12. HTML <!DOCTYPE
html> XHTML <html
xmlns="http://www.w3.org/1999/xhtml"> - html 5 simple doctype - xhtml 5 strict xml rules, must be application/xml or application/xhtml+xml, no doctype required
  13. 13. <!DOCTYPE
html> <html
lang="en"> <head> 

<meta
charset=utf‐8> 

<title>HTML5
Demo</title> </head> <body> <header> 

<h1>Logo
etc</h1> </header> <nav><p>Menu</p></nav> <section> 

<h1>Section</h1> 

<article> 



<p>article
1</p> 

</article> </section> <aside> 

<h2>Some
extra
content</h2> </aside> <footer> 

<p>Copyright
&copy;
2009.</p> </footer> </body> </html>
  14. 14. In the real world...
  15. 15. Semantic class names
  16. 16. HTML5 shiv
  17. 17. <style> 

figure
{
 



border:
1px
inset
#AAA; 



padding:
4px; 

} </style> <script> 

document.createElement("figure"); </script>
  18. 18. tinyurl.com/html5-scaffold
  19. 19. Audio & Video
  20. 20. <video
width="640"
height="360"
src="http:// www.youtube.com/demo/google_main.mp"
autobuffer
 controls
poster="whale.png"> <p>Try
this
page
in
Safari
4!
Or
you
can
<a
 href="http://www.youtube.com/demo/ google_main.mp4">download
the
video</a>
 instead.</p> </video>
  21. 21. Codec Shit-fight.
  22. 22. OGG Theora & H.264 the plan was to support OGG Theora & H.264
  23. 23. OGG Theora & H.264 the plan was to support OGG Theora & H.264
  24. 24. The deal with OGG open source and free licensing Big Boys (Apple, Google) are generally scared of OS stuff no widespread hardware support (means mobile is out) lack of quality compared to H.264 ??
  25. 25. The deal with H.264 patent owned by MPEG (Motion Picture Experts Group) OS companies (Mozilla) reckon it's too pricey paying the licence doesn't guarantee complete immunity from patent infringement in the future... a whole bunch of other major licensing issues. LEGAL JARGAN
  26. 26. Just use Flash <cry>
  27. 27. Just use Flash <cry>
  28. 28. Link lovage... http://www.w3.org/TR/html5 http://whatwg.org/html5 http://html5doctor.com/ http://molly.com/html5/html5-0709.html http://html5gallery.com/ http://tinyurl.com/html5-video-debate
  29. 29. http://assets.dontcom.com/html5.pdf download
  30. 30. Lets talk! questions yo

×