Die Zukunft der Webstandards - Webinale 31.05.2010

  • Published on
    18-Oct-2014

  • View
    3.986

  • Download
    1

Embed Size (px)

DESCRIPTION

 

Transcript

<p>Die Zukunft der Webstandards</p> <p>Die Zukunft der WebstandardsPatrick H. Lauke, Opera Software</p> <p>Patrick H. Lauke / Webinale 2010 / Berlin / 31 Mai 2010</p> <p>Web Evangelist bei Opera</p> <p>die Zukunft hat schon Heute begonnen...</p> <p>HTML5</p> <p>Geschichte von HTML5</p> <p> 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</p> <p>die Evolution von HTML</p> <p>HTML5 hat mehr Bling!</p> <p>...extending the language to better support Web applications [...] This puts HTML in direct competition with other technologies[...] , in particular Flash and Silverlight.</p> <p>Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html</p> <p> http://www.flickr.com/photos/24374884@N08/4603715307/</p> <p>HTML5 Definition (ohne Hype):vereinfachte Syntax, standardisiertes </p> <p>Browserverhalten, neue Markup-Elemente und JavaScript APIs</p> <p>neue Elemente fr bessere Semantik</p> <p>HTML5 Elemente fr einen typischen Blog</p> <p>HTML5 prziser und maschinenlesbar</p> <p>Untersttzt in neuen und alten Browsern(mit etwas Nachhilfe)</p> <p>header, footer, { display: block; }</p> <p>Internet Explorer braucht noch einen Schubs...document.createElement('header');document.createElement('footer');http://remysharp.com/2009/01/07/html5-enabling-script/</p> <p>webforms bessere Formulare</p> <p>rich form elements ohne JavaScript</p> <p>rich form elements ohne JavaScript</p> <p>Typen und Attribute zur automatischen Validierung(natrlich trotzdem auf dem Server noch validieren)</p> <p>Demonstration: new input types, datetime, validation</p> <p> Download movie</p> <p>video als natives Object...vorteile?</p> <p> verhlt sich wie jedes andere Element Tastatursteuerung mchtige API zur Steuerung/Manipulation</p> <p>Demonstration: javascript controls, transitions, fancy controls, fancy swap</p> <p>video Formate H.264 vs Ogg Theora</p> <p> Opera und Firefox: Ogg Theora Safari, Internet Explorer 9: H.264 Chrome: unterstzt beide</p> <p>H.264: weitverbreitet, aber Patente / LizenzTheora: Lizenzfrei, aber nicht fr Web optimiert</p> <p>video Formate WebM</p> <p> Google I/O April 2010 Lizenzfrei Matroska/VP8, bessere Web optimierung Opera, Firefox, Chrome beta Versionen Internet Explorer 9 (mit installiertem Codec) Tools!</p> <p>video Formate H.264, OGG Theora, WebM</p> <p>video.canPlayType('video/webm')</p> <p>alten Browsern Flash servierenhttp://camendesign.com/code/video_for_everybody</p> <p>audio fast gleich wie video</p> <p>[...]</p> <p>MP3, Ogg Vorbis, WAVDemonstration: audio</p> <p>canvas = Leinwand, Zeichenoberflchefr scriptable images</p> <p>canvas standard API Methoden</p> <p>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);</p> <p>canvas kommt auch mit externe Grafiken klar</p> <p>ctx = canvas.drawImage();Demonstration: canvas</p> <p>canvas und Barrierefreiheit?</p> <p>canvas gut fr enhancements nicht fr eigentliche Inhalte</p> <p>video, audio und canvas multimedia ohne Steckeins (plugins)</p> <p>(Java / Flash / Silverlight nicht berall vorhanden)</p> <p>HTML5 als Flashkiller?</p> <p>neue Standardsgeben Entwicklern endlich Alternativen</p> <p>(vor allem auf mobilen Plattformen)</p> <p>neue Features fr mchtigeWeb Applikationen</p> <p>geolocation</p> <p>isgeolocationpartofhtml5.com</p> <p>Standpunkt(?) ermitteln in JavaScript</p> <p>navigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);function success(position) {</p> <p>/* where's Waldo? */var lat = position.coords.latitude;var long = position.coords.longitude;...</p> <p>}</p> <p>offline Untersttzung</p> <p>erkennen wenn der Browser offline ist</p> <p>window.addEventListener('online', function(){ }, true);window.addEventListener('offline', function(){ }, true);</p> <p>application cache</p> <p>UI/Resourcen zur Benutzung offline cachen</p> <p>CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.cssdata.xml</p> <p>storage</p> <p>localStorage/sessionStoragewie cookies...</p> <p>document.cookie = 'key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/'/* convoluted string operations go here */</p> <p>localStorage/sessionStoragewie cookies...on steroids!</p> <p>localStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == '') { }</p> <p>Web Database relationale DB / SQL</p> <p>var db =openDatabase(dbName, version, displayName, expectedSize);db.transaction(function(tx) {</p> <p>tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */</p> <p>});});</p> <p>...und mehr!(File API, File Writer, WebGL, Drag and Drop, Server-sent Events, Web Workers, )</p> <p>Is it safe?kann ich diese Features schon jetzt </p> <p>verwenden?</p> <p>feature-detectionprogressive enhancement, graceful degradation</p> <p>http://diveintohtml5.org/everything.html</p> <p>Webstandards als high-level, plattformbergreifende Programmiersprachen</p> <p>Google Voice Web App statt iPhone Apphttp://googlevoiceblog.blogspot.com/2010/01/google-voice-for-iphone-and-palm-webos.html</p> <p>Palm WebOS, Google's Installable Web Apps, W3C Widgets, </p> <p>the browser run-time is perfectyoure out of writing for Windows Mobile, Android, S60, each of which require testing...we want to abstract that.</p> <p> All the cool innovation is happening inside the browser you dont need to write to the native operating system anymore.</p> <p>Mobile Entertainment Market , June, 2009</p> <p>W3C Widgetsstandard-basierte Applikationen</p> <p>mit Browser-Engine als Plattform</p> <p>Widgets auf Desktop, Mobiltelefon, Fernseher...</p> <p>Anatomie eines Widgets</p> <p>index.html + [] + config.xml</p> <p>packaged in einem ZIP Archiv</p> <p>Konfigurations-Datei</p> <p> MyFirstWidget A demo widget</p> <p>Demonstration: das Webinale 2010 Widget</p> <p> http://my.opera.com/ODIN/blog/2010/02/18/svg-edit-standalone-widget</p> <p>Warum Widgets?</p> <p>Web App / Widget anstatt nativer Applikation?</p> <p>www.opera.com/developerpeople.opera.com/patrickl/presentations/webinale_31.05.2010/webinale_31.05.2010.pdf</p> <p>patrick.lauke@opera.com</p>