0
HTML5 and friends
CONTEXTUALISING THE NEW TECHNOLOGIES




Patrick H. Lauke / Institutional Web Managers Workshop IWMW2010...
Web Evangelist at Opera
...should I use HTML5 today?
http://www.flickr.com/photos/24374884@N08/4603715307/
HTML5 … without the hype?
history of HTML5
● 1999 HTML 4.01, 2000 XHTML 1.0
●
  2003 XForms specification > XML based
●
  Opera proof of concept: We...
2004 W3C focus on XHTML 2.0 and beyond...

           http://www.flickr.com/photos/craiga/17071467/
WHATWG
Web Hypertext Application Technology Working Group
2007 W3C HTML5 WG
“...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 specification aimed
          at browser developers
(defines how browsers handle markup/code – no reverse engineerin...
HTML5 standardises current browser and
         authoring behaviour
            (e.g. “relaxed” coding rules)
HTML5
<!DOCTYPE html>
HTML5 brings new
markup elements and JavaScript APIs
new elements for more accurate semantics
Top 20 class names
   1. footer                                       11. button
   2. menu                               ...
Top 20 id names
    1. footer                                        11. search
   2. content                             ...
unambiguous and machine readable
...but what about current screenreaders?
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:...
improved forms
making common UI needs native
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             … requ...
<video>
Adobe Flash currently most common
    video delivery mechanism
<object width="425" height="344">
  <param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en
&fs=1&"></param>...
<video src="video.webm"
  controls
  autoplay
  poster="poster.jpg"
  width="320" height="240">
    <a href="video.webm">D...
video as native object
● “plays nice” with rest of the page
●
  keyboard accessibility built-in
●
  API for controls:
    ...
video formats
   the big debate
MP4 / H.264




ubiquitous, patent encumbered, licensing/royalties
Ogg Theora




“free and open”, no licensing/royalties
not many tools for it, not web optimised
WebM




  open and royalty-free, web optimised
support by software and hardware vendors
providing multiple sources
<video controls autoplay poster="…" width="…" height="…">
   <source src="movie.webm" type="vid...
audio exactly the same as video
<audio src=”music.mp3” controls autoplay></audio>

[...]

<audio controls autoplay>
   <so...
<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...
Demos:
http://alteredqualia.com/canvasmol/
http://dwpe.googlecode.com/svn/trunk/charting/index.html
canvas accessibility concerns
video, audio and canvas on any device
           without plugins
         (Java / Flash / Silverlight not ubiquitous)
HTML5 (and friends) has
lots more APIs for developers
       (for powerful client-side apps)
isgeolocationpartofhtml5.com
geolocation
navigator.geolocation.getCurrentPosition(success, error);
navigator.geolocation.watchCurrentPosition(success, ...
offline detection...
window.addEventListener('online', function(){ … }, true);
window.addEventListener('offline', function...
is it all safe to use, right now?
don't do browser sniffing



      http://www.flickr.com/photos/timdorr/2096272747/
feature-detection
progressive enhancement, graceful degradation – or use shims
                   http://diveintohtml5.org...
HTML5 as Flashkiller?
not a question of HTML5 replacing Flash...
giving developers a choice!
...should I use HTML5 today?
www.opera.com/developer
people.opera.com/patrickl/presentations/iwmw2010_13.07.2010/iwmw2010_13.07.2010.pdf
              ...
HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010
HTML5 and friends - Institutional Web Management Workshop 2010
Upcoming SlideShare
Loading in...5
×

HTML5 and friends - Institutional Web Management Workshop 2010

4,775

Published on

http://iwmw.ukoln.ac.uk/iwmw2010/

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

No Downloads
Views
Total Views
4,775
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
90
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 and friends - Institutional Web Management Workshop 2010"

  1. 1. HTML5 and friends CONTEXTUALISING THE NEW TECHNOLOGIES Patrick H. Lauke / Institutional Web Managers Workshop IWMW2010 / Sheffield / 13 July 2010
  2. 2. Web Evangelist at Opera
  3. 3. ...should I use HTML5 today?
  4. 4. http://www.flickr.com/photos/24374884@N08/4603715307/
  5. 5. HTML5 … without the hype?
  6. 6. history of HTML5 ● 1999 HTML 4.01, 2000 XHTML 1.0 ● 2003 XForms specification > XML based ● Opera proof of concept: Web Forms 1.0
  7. 7. 2004 W3C focus on XHTML 2.0 and beyond... http://www.flickr.com/photos/craiga/17071467/
  8. 8. WHATWG Web Hypertext Application Technology Working Group
  9. 9. 2007 W3C HTML5 WG
  10. 10. “...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
  11. 11. HTML5 does not replace HTML 4.01
  12. 12. HTML5 has more bling!
  13. 13. HTML5 specification aimed at browser developers (defines how browsers handle markup/code – no reverse engineering) for authors: HTML5 differences from HTML4 http://www.w3.org/TR/html5-diff/
  14. 14. HTML5 standardises current browser and authoring behaviour (e.g. “relaxed” coding rules)
  15. 15. HTML5 <!DOCTYPE html>
  16. 16. HTML5 brings new markup elements and JavaScript APIs
  17. 17. new elements for more accurate semantics
  18. 18. Top 20 class names 1. footer 11. button 2. menu 12. main 3. style1 13. style3 4. msonormal 14. small 5. text 15. nav 6. content 16. clear 7. title 17. search 8. style2 18. style4 9. header 19. logo 10. copyright 20. body http://devfiles.myopera.com/articles/572/classlist-url.htm
  19. 19. Top 20 id names 1. footer 11. search 2. content 12. nav 3. header 13. wrapper 4. logo 14. top 5. container 15. table2 6. main 16. layer2 7. table1 17. sidebar 8. menu 18. image1 9. layer1 19. banner 10. autonumber1 20. navigation http://devfiles.myopera.com/articles/572/idlist-url.htm
  20. 20. unambiguous and machine readable ...but what about current screenreaders?
  21. 21. current and old browsers “support” these (although some need a little extra help) header, footer, … { display: block; }
  22. 22. 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
  23. 23. improved forms making common UI needs native
  24. 24. 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>
  25. 25. type and attributes for built-in validation (of course you should still validate on the server) <input … required> <input type=”tel”> <input type=”email”> <input type=”url”> <input … pattern="[a-z]{3}[0-9]{3}"> Demos: http://people.opera.com/patrickl/experiments/forms/newtypes.html http://people.opera.com/patrickl/experiments/forms/date-time.html http://people.opera.com/patrickl/experiments/forms/validation.html
  26. 26. <video>
  27. 27. Adobe Flash currently most common video delivery mechanism
  28. 28. <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>
  29. 29. <video src="video.webm" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a> </video>
  30. 30. video as native object ● “plays nice” with rest of the page ● keyboard accessibility built-in ● API for controls: v = document.getElementById('myVideo'); v.play(); v.pause(); … Demos: http://people.opera.com/patrickl/experiments/webm/basic-controls/ http://people.opera.com/patrickl/experiments/webm/fancy-controls/ http://people.opera.com/patrickl/experiments/webm/fancy-swap/
  31. 31. video formats the big debate
  32. 32. MP4 / H.264 ubiquitous, patent encumbered, licensing/royalties
  33. 33. Ogg Theora “free and open”, no licensing/royalties not many tools for it, not web optimised
  34. 34. WebM open and royalty-free, web optimised support by software and hardware vendors
  35. 35. providing multiple sources <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
  36. 36. audio exactly the same as video <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> same format debacle: MP3 vs Ogg Vorbis
  37. 37. <canvas>
  38. 38. canvas = “scriptable images” <canvas width="…" height="…"></canvas>
  39. 39. 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.drawImage(…); Trivial demo: http://www.splintered.co.uk/experiments/archives/paranoid_0.2/
  40. 40. Demos: http://alteredqualia.com/canvasmol/ http://dwpe.googlecode.com/svn/trunk/charting/index.html
  41. 41. canvas accessibility concerns
  42. 42. video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  43. 43. HTML5 (and friends) has lots more APIs for developers (for powerful client-side apps)
  44. 44. isgeolocationpartofhtml5.com
  45. 45. geolocation navigator.geolocation.getCurrentPosition(success, error); navigator.geolocation.watchCurrentPosition(success, error); function success(position) { /* where's Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ... }
  46. 46. offline detection... window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true); and application cache <html manifest=”blah.manifest”> CACHE MANIFEST # send this with correct text/cache-manifest MIME images/sprites.png scripts/common.js scripts/jquery.js styles/global.css data.xml and many more... (even beyond HTML5)
  47. 47. is it all safe to use, right now?
  48. 48. don't do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
  49. 49. feature-detection progressive enhancement, graceful degradation – or use shims http://diveintohtml5.org/everything.html
  50. 50. HTML5 as Flashkiller?
  51. 51. not a question of HTML5 replacing Flash...
  52. 52. giving developers a choice!
  53. 53. ...should I use HTML5 today?
  54. 54. www.opera.com/developer people.opera.com/patrickl/presentations/iwmw2010_13.07.2010/iwmw2010_13.07.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.

×