Die Zukunft der Webstandards - Webinale 31.05.2010

3,641 views

Published on

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

No Downloads
Views
Total views
3,641
On SlideShare
0
From Embeds
0
Number of Embeds
540
Actions
Shares
0
Downloads
25
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Die Zukunft der Webstandards - Webinale 31.05.2010

  1. 1. Patrick H. Lauke, Opera Software Die Zukunft der Webstandards Patrick H. Lauke / Webinale 2010 / Berlin / 31 Mai 2010
  2. 2. Web Evangelist bei Opera
  3. 3. die Zukunft hat schon Heute begonnen...
  4. 4. HTML5 <!DOCTYPE html>
  5. 5. Geschichte von HTML5 ● fing bei Opera an – Web Applications 1.0 ● Gegenreaktion zu XHTML 2.0 ● Mozilla und Apple machen mit – WHAT WG ● W3C HTML5 ● Microsoft jetzt auch mit dabei
  6. 6. die Evolution von HTML
  7. 7. HTML5 hat mehr “Bling”!
  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. http://www.flickr.com/photos/24374884@N08/4603715307/
  10. 10. HTML5 Definition (ohne Hype): vereinfachte Syntax, standardisiertes Browserverhalten, neue Markup-Elemente und JavaScript APIs
  11. 11. neue Elemente für bessere Semantik
  12. 12. HTML5 Elemente für einen typischen Blog
  13. 13. HTML5 – präziser und maschinenlesbar
  14. 14. “Unterstützt” in neuen und alten Browsern (mit etwas Nachhilfe) header, footer, … { display: block; }
  15. 15. Internet Explorer braucht noch einen Schubs... document.createElement('header'); document.createElement('footer'); … http://remysharp.com/2009/01/07/html5-enabling-script/
  16. 16. webforms – bessere Formulare
  17. 17. rich form elements – ohne JavaScript <input type=”date”> <input type=”time”> <input type=”month”> <input type=”week”> <input type=”datetime” … > <input type=”range”> <input type=”number”> <input type=”color”> <input type=”search”> <input type=”file” multiple> <input … autofocus> <input … autocomplete>
  18. 18. rich form elements – ohne JavaScript <input type=”text” list=”mylist”> <datalist id="mylist"> <option label="Mr" value="Mr"> <option label="Ms" value="Ms"> … </datalist>
  19. 19. Typen und Attribute zur automatischen Validierung (natürlich trotzdem auf dem Server noch validieren) <input type=”tel”> <input type=”email”> <input type=”url”> <input … pattern="[a-z]{3}[0-9]{3}"> <input … required> Demonstration: new input types, datetime, validation
  20. 20. <video>
  21. 21. <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>
  22. 22. <video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>
  23. 23. video als natives Object...vorteile? ● verhält sich wie jedes andere Element ● Tastatursteuerung ● mächtige API zur Steuerung/Manipulation Demonstration: javascript controls, transitions, fancy controls, fancy swap
  24. 24. video Formate – H.264 vs Ogg Theora ● Opera und Firefox: Ogg Theora ● Safari, Internet Explorer 9: H.264 ● Chrome: unterstüzt beide H.264: weitverbreitet, aber Patente / Lizenz Theora: Lizenzfrei, aber nicht für Web optimiert
  25. 25. video Formate – WebM ● Google I/O April 2010 ● Lizenzfrei ● Matroska/VP8, bessere Web optimierung ● Opera, Firefox, Chrome beta Versionen ● Internet Explorer 9 (mit installiertem Codec) ● Tools!
  26. 26. video Formate – 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> video.canPlayType('video/webm') alten Browsern Flash servieren http://camendesign.com/code/video_for_everybody
  27. 27. <audio>
  28. 28. audio fast gleich wie 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> MP3, Ogg Vorbis, WAV Demonstration: audio
  29. 29. <canvas>
  30. 30. canvas = Leinwand, Zeichenoberfläche für “scriptable images”
  31. 31. <canvas width="…" height="…"></canvas>
  32. 32. canvas standard API Methoden 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); …
  33. 33. canvas kommt auch mit externe Grafiken klar ctx = canvas.drawImage(…); Demonstration: canvas
  34. 34. canvas und Barrierefreiheit?
  35. 35. canvas gut für “enhancements” – nicht für eigentliche Inhalte
  36. 36. video, audio und canvas … multimedia ohne “Steckeins” (plugins) (Java / Flash / Silverlight nicht überall vorhanden)
  37. 37. HTML5 als Flashkiller?
  38. 38. neue Standards geben Entwicklern endlich Alternativen (vor allem auf mobilen Plattformen)
  39. 39. neue Features für mächtige Web Applikationen
  40. 40. geolocation
  41. 41. isgeolocationpartofhtml5.com
  42. 42. Standpunkt(?) ermitteln in JavaScript navigator.geolocation.getCurrentPosition(success, error); navigator.geolocation.watchCurrentPosition(success, error); function success(position) { /* where's Waldo? */ var lat = position.coords.latitude; var long = position.coords.longitude; ... }
  43. 43. offline Unterstützung
  44. 44. erkennen wenn der Browser offline ist window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true);
  45. 45. application cache
  46. 46. UI/Resourcen zur Benutzung offline cachen <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
  47. 47. storage
  48. 48. localStorage/sessionStorage wie cookies... document.cookie = 'key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/' … /* convoluted string operations go here … */
  49. 49. localStorage/sessionStorage wie cookies...”on steroids”! localStorage.setItem(key, value); localStorage.getItem(key); localStorage.clear(); localStorage.key = value; if (localStorage.key == '…') { … } …
  50. 50. Web Database – relationale DB / SQL var db = openDatabase(dbName, version, displayName, expectedSize); db.transaction(function(tx) { tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */ }); });
  51. 51. ...und mehr! (File API, File Writer, WebGL, Drag and Drop, Server-sent Events, Web Workers, …)
  52. 52. “Is it safe?” kann ich diese Features schon jetzt verwenden?
  53. 53. feature-detection progressive enhancement, graceful degradation http://diveintohtml5.org/everything.html
  54. 54. Webstandards als high-level, plattformübergreifende Programmiersprachen
  55. 55. Google Voice – Web App statt iPhone App http://googlevoiceblog.blogspot.com/2010/01/google-voice-for-iphone-and-palm-webos.html
  56. 56. Palm WebOS, Google's “Installable Web Apps”, W3C Widgets, …
  57. 57. “…the browser run-time is perfect…you’re out of writing for Windows Mobile, Android, S60, each of which require testing...we want to abstract that. All the cool innovation is happening inside the browser – you don’t need to write to the native operating system anymore.” Mobile Entertainment Market , June, 2009
  58. 58. W3C Widgets standard-basierte Applikationen mit Browser-Engine als Plattform
  59. 59. Widgets auf Desktop, Mobiltelefon, Fernseher...
  60. 60. Anatomie eines Widgets index.html + […] + config.xml “packaged” in einem ZIP Archiv
  61. 61. Konfigurations-Datei <?xml version="1.0" encoding="utf-8" ?> <widget version="1.0" xmlns="http://www.w3.org/ns/widgets" id="" width="320" height="240"> <name>MyFirstWidget</name> <content src="index.html" type="text/html"/> <access network="true"/> <icon src="icon.png"/> <description>A demo widget</description> </widget> Demonstration: das Webinale 2010 Widget
  62. 62. http://my.opera.com/ODIN/blog/2010/02/18/svg-edit-standalone-widget
  63. 63. Warum Widgets?
  64. 64. Web App / Widget anstatt nativer Applikation?
  65. 65. www.opera.com/developer people.opera.com/patrickl/presentations/webinale_31.05.2010/webinale_31.05.2010.pdf patrick.lauke@opera.com

×