Speak the Web 15.02.2010

2,152 views
2,051 views

Published on

1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,152
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
13
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Speak the Web 15.02.2010

  1. 1. The future of web technologies LET'S FIRE UP THE FLUX CAPACITOR... Patrick H. Lauke / Speak the Web / Liverpool / 15 February 2010
  2. 2. Web Evangelist at Opera
  3. 3. new technologies you can start using today
  4. 4. HTML5 <!DOCTYPE html>
  5. 5. history of HTML5 ● started at Opera – Web Applications 1.0 ● reaction to XHTML's direction ● Mozilla and Apple joined ● W3C HTML5 ● Microsoft involvement
  6. 6. HTML5 standardises current browser and authoring behaviour (e.g. relaxed coding rules)
  7. 7. HTML5 does not replace HTML 4.01
  8. 8. HTML5 has more bling!
  9. 9. “...extending the language to better support Web applications, since that is one of the directions the Web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight.” Ian Hickson, Editor of HTML5 http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
  10. 10. HTML5 is umbrella term: markup elements and JavaScript APIs
  11. 11. new elements for more accurate semantics
  12. 12. HTML5 elements for a typical blog
  13. 13. HTML5 – unambiguous and machine readable
  14. 14. current and old browsers “support” these (although some need a little extra help) header, footer, … { display: block; }
  15. 15. 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
  16. 16. webforms – more powerful form elements
  17. 17. 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>
  18. 18. rich form elements – without JavaScript <input type=”text” list=”mylist”> <datalist id="mylist"> <option label="Mr" value="Mr"> <option label="Ms" value="Ms"> … </datalist>
  19. 19. 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
  20. 20. <canvas>
  21. 21. canvas = “scriptable images”
  22. 22. 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); …
  23. 23. canvas mixing things up with external graphics ctx = canvas.drawImage(…); Demonstration of canvas
  24. 24. canvas accessibility concerns
  25. 25. canvas appropriate use for enhanced visuals, special effects – not pure content Demonstration: http://www.filamentgroup.com/examples/charting_v2/
  26. 26. <video>
  27. 27. <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>
  28. 28. <video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
  29. 29. 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
  30. 30. video format debates – H.264 vs OGG Theora <video controls autoplay poster="…" width="…" height="…"> <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
  31. 31. canvas accessibility concerns
  32. 32. video and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  33. 33. 1.21 gigawatts? Great Scott! Patrick frantically mentions lots of other HTML5 goodies in a few minutes...
  34. 34. geolocation
  35. 35. find out your location via JavaScript navigator.geolocation.getCurrentPosition(success, error); function success(position) { /* where's Waldo? */ var lat = position.coords.latitude; var long = position.coords.longitude; ... }
  36. 36. offline support
  37. 37. detect if a browsers goes offline window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true);
  38. 38. storage
  39. 39. localStorage/sessionStorage like cookies... document.cookie = 'key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/' … /* convoluted string operations go here … */
  40. 40. localStorage/sessionStorage like cookies...on steroids! localStorage.setItem(key, value); localStorage.getItem(key); localStorage.clear(); localStorage.key = value; if (localStorage.key == '…') { … } …
  41. 41. Web Database – full relational DB / SQL var db = openDatabase(dbName, version, displayName, expectedSize); db.transaction(function(tx) { tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */ }); });
  42. 42. application cache
  43. 43. cache UI/resource files for offline use <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
  44. 44. and more! (geolocation, drag and drop, server-sent events, web workers, …)
  45. 45. www.opera.com/developer people.opera.com/patrickl/presentations/speaktheweb_15.02.2010/speaktheweb_15.02.2010.pdf patrick.lauke@opera.com

×