Brave new world of HTML5
THE “NO I'M NOT BRUCE LAWSON” EDITION (BETA)




Patrick H. Lauke / Webdirections @media / London...
Web Evangelist at Opera
new technologies you can start using today
HTML5
<!DOCTYPE html>
http://www.flickr.com/photos/24374884@N08/4603715307/
HTML5 definition without the bullsh*t
history of HTML5

● started at Opera – Web Applications 1.0
● reaction to XHTML 2.0

● Google, Mozilla and Apple joined

●...
“...extending the language to better
support Web applications [...] This puts
HTML in direct competition with other
techno...
HTML5 does not replace HTML 4.01
HTML5 has more bling!
HTML5 standardises current browser and
         authoring behaviour
            (e.g. relaxed coding rules)
HTML5 is stricter?
(defines exactly how browsers handle markup/code)
HTML5 brings new
markup elements and JavaScript APIs
new elements for more accurate semantics
HTML5 elements for a typical blog
unambiguous and machine readable
current and old browsers “support” these
(although some need a little extra help)

header, footer, … { display: block; }
Internet Explorer needs extra training wheels
document.createElement('header');
document.createElement('footer');
…

http:...
webforms – more powerful form elements
rich form elements – without JavaScript
<input   type=”date”>
<input   type=”time”>
<input   type=”month”>
<input   type=”...
type and attributes for built-in validation
(of course you should still validate on the server)

<input        type=”tel”>...
<video>
<object width="425" height="344">
  <param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en
&fs=1&"></param>...
<video src="video.ogv"
  controls
  autoplay
  poster="poster.jpg"
  width="320" height="240">
    <a href="video.ogv">Dow...
video as native object...why is it important?

● “play nice” with rest of the page
● keyboard accessibility built-in

● AP...
video format debate
H.264 vs Ogg Theora
video format debate
H.264 vs Ogg Theora vs WebM
video formats – H.264 + OGG Theora + WebM
<video controls autoplay poster="…" width="…" height="…">
   <source src="movie....
<audio>
audio exactly the same
<audio src=”music.mp3” controls autoplay></audio>

[...]

<audio controls autoplay>
   <source src=...
<canvas>
canvas = “scriptable images”

<canvas width="…" height="…"></canvas>
canvas has standard API methods for drawing
ctx = canvas.getContext("2d");
ctx.fillRect(x, y, width, height);
ctx.beginPat...
canvas accessibility concerns
canvas appropriate use for enhanced visuals,
     special effects – not pure content
video, audio and canvas on any device
            without plugins
         (Java / Flash / Silverlight not ubiquitous)
But is it safe to use, right now?
feature-detection
progressive enhancement, graceful degradation
           http://diveintohtml5.org/everything.html
HTML5 as Flashkiller?
not a question of HTML5 replacing Flash...
Giving developers a choice!
www.opera.com/developer
people.opera.com/patrickl/presentations/atmedia_11.06.2010/atmedia_11.06.2010.pdf
                ...
Web Directions @media 2010
Web Directions @media 2010
Web Directions @media 2010
Web Directions @media 2010
Web Directions @media 2010
Web Directions @media 2010
Web Directions @media 2010
Upcoming SlideShare
Loading in...5
×

Web Directions @media 2010

2,097

Published on

Published in: Education, Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,097
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
43
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Web Directions @media 2010

  1. 1. Brave new world of HTML5 THE “NO I'M NOT BRUCE LAWSON” EDITION (BETA) Patrick H. Lauke / Webdirections @media / London / 11 June 2010
  2. 2. Web Evangelist at Opera
  3. 3. new technologies you can start using today
  4. 4. HTML5 <!DOCTYPE html>
  5. 5. http://www.flickr.com/photos/24374884@N08/4603715307/
  6. 6. HTML5 definition without the bullsh*t
  7. 7. history of HTML5 ● started at Opera – Web Applications 1.0 ● reaction to XHTML 2.0 ● Google, Mozilla and Apple joined ● W3C HTML5 ● Microsoft involvement
  8. 8. “...extending the language to better support Web applications [...] This puts HTML in direct competition with other technologies[...] , in particular Flash and Silverlight.” Ian Hickson, Editor of HTML5 http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
  9. 9. HTML5 does not replace HTML 4.01
  10. 10. HTML5 has more bling!
  11. 11. HTML5 standardises current browser and authoring behaviour (e.g. relaxed coding rules)
  12. 12. HTML5 is stricter? (defines exactly how browsers handle markup/code)
  13. 13. HTML5 brings new markup elements and JavaScript APIs
  14. 14. new elements for more accurate semantics
  15. 15. HTML5 elements for a typical blog
  16. 16. unambiguous and machine readable
  17. 17. current and old browsers “support” these (although some need a little extra help) header, footer, … { display: block; }
  18. 18. Internet Explorer needs extra training wheels document.createElement('header'); document.createElement('footer'); … http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
  19. 19. webforms – more powerful form elements
  20. 20. rich form elements – without JavaScript <input type=”date”> <input type=”time”> <input type=”month”> <input type=”week”> <input type=”datetime” … > <input type=”range”> <input type=”number”> <input type=”file” multiple> <input … autofocus> <input … autocomplete>
  21. 21. type and attributes for built-in validation (of course you should still validate on the server) <input type=”tel”> <input type=”email”> <input type=”url”> <input … pattern="[a-z]{3}[0-9]{3}"> <input … required> Demonstration of webforms
  22. 22. <video>
  23. 23. <object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en &fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&f s=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object>
  24. 24. <video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
  25. 25. video as native object...why is it important? ● “play nice” with rest of the page ● keyboard accessibility built-in ● API for controls Demonstration of video
  26. 26. video format debate H.264 vs Ogg Theora
  27. 27. video format debate H.264 vs Ogg Theora vs WebM
  28. 28. video formats – H.264 + OGG Theora + WebM <video controls autoplay poster="…" width="…" height="…"> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <!-- fallback content --> </video> still include fallback for old browsers http://camendesign.com/code/video_for_everybody
  29. 29. <audio>
  30. 30. audio exactly the same <audio src=”music.mp3” controls autoplay></audio> [...] <audio controls autoplay> <source src="music.mp3" type="audio/mpeg" /> <source src="music.oga" type="audio/ogg" /> <!-- fallback content --> </audio> MP3, Ogg Vorbis, WAV Demonstration: audio
  31. 31. <canvas>
  32. 32. canvas = “scriptable images” <canvas width="…" height="…"></canvas>
  33. 33. canvas has standard API methods for drawing ctx = canvas.getContext("2d"); ctx.fillRect(x, y, width, height); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y); ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2); ctx = canvas.drawImage(…);
  34. 34. canvas accessibility concerns
  35. 35. canvas appropriate use for enhanced visuals, special effects – not pure content
  36. 36. video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  37. 37. But is it safe to use, right now?
  38. 38. feature-detection progressive enhancement, graceful degradation http://diveintohtml5.org/everything.html
  39. 39. HTML5 as Flashkiller?
  40. 40. not a question of HTML5 replacing Flash...
  41. 41. Giving developers a choice!
  42. 42. www.opera.com/developer people.opera.com/patrickl/presentations/atmedia_11.06.2010/atmedia_11.06.2010.pdf patrick.lauke@opera.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×