Web Directions @media 2010
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Web Directions @media 2010

on

  • 3,552 views

 

Statistics

Views

Total Views
3,552
Views on SlideShare
3,358
Embed Views
194

Actions

Likes
4
Downloads
41
Comments
0

3 Embeds 194

http://www.webdirections.org 137
http://www.slideshare.net 47
http://lanyrd.com 10

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Directions @media 2010 Presentation Transcript

  • 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. Web Evangelist at Opera
  • 3. new technologies you can start using today
  • 4. HTML5 <!DOCTYPE html>
  • 5. http://www.flickr.com/photos/24374884@N08/4603715307/
  • 6. HTML5 definition without the bullsh*t
  • 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. “...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. HTML5 does not replace HTML 4.01
  • 10. HTML5 has more bling!
  • 11. HTML5 standardises current browser and authoring behaviour (e.g. relaxed coding rules)
  • 12. HTML5 is stricter? (defines exactly how browsers handle markup/code)
  • 13. HTML5 brings new markup elements and JavaScript APIs
  • 14. new elements for more accurate semantics
  • 15. HTML5 elements for a typical blog
  • 16. unambiguous and machine readable
  • 17. current and old browsers “support” these (although some need a little extra help) header, footer, … { display: block; }
  • 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. webforms – more powerful form elements
  • 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. 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. <video>
  • 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. <video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
  • 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. video format debate H.264 vs Ogg Theora
  • 27. video format debate H.264 vs Ogg Theora vs WebM
  • 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. <audio>
  • 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. <canvas>
  • 32. canvas = “scriptable images” <canvas width="…" height="…"></canvas>
  • 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. canvas accessibility concerns
  • 35. canvas appropriate use for enhanced visuals, special effects – not pure content
  • 36. video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  • 37. But is it safe to use, right now?
  • 38. feature-detection progressive enhancement, graceful degradation http://diveintohtml5.org/everything.html
  • 39. HTML5 as Flashkiller?
  • 40. not a question of HTML5 replacing Flash...
  • 41. Giving developers a choice!
  • 42. www.opera.com/developer people.opera.com/patrickl/presentations/atmedia_11.06.2010/atmedia_11.06.2010.pdf patrick.lauke@opera.com