Die Zukunft der Webstandards - Webinale 31.05.2010

Patrick H. Lauke, Opera Software Die Zukunft der Webstandards Patrick H. Lauke / Webinale 2010 / Berlin / 31 Mai 2010

Web Evangelist bei Opera

die Zukunft hat schon Heute begonnen...

HTML5 <!DOCTYPE html>

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

die Evolution von HTML

HTML5 hat mehr “Bling”!

“...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

http://www.flickr.com/photos/24374884@N08/4603715307/

HTML5 Definition (ohne Hype): vereinfachte Syntax, standardisiertes Browserverhalten, neue Markup-Elemente und JavaScript APIs

neue Elemente für bessere Semantik

HTML5 Elemente für einen typischen Blog

HTML5 – präziser und maschinenlesbar

“Unterstützt” in neuen und alten Browsern (mit etwas Nachhilfe) header, footer, … { display: block; }

Internet Explorer braucht noch einen Schubs... document.createElement('header'); document.createElement('footer'); … http://remysharp.com/2009/01/07/html5-enabling-script/

webforms – bessere Formulare

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>

rich form elements – ohne JavaScript <input type=”text” list=”mylist”> <datalist id="mylist"> <option label="Mr" value="Mr"> <option label="Ms" value="Ms"> … </datalist>

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

<video>

<video src="video.ogv" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.ogv">Download movie</a> </video>

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

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

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!

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" />  </video> video.canPlayType('video/webm') alten Browsern Flash servieren http://camendesign.com/code/video_for_everybody

<audio>

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" />  </audio> MP3, Ogg Vorbis, WAV Demonstration: audio

canvas = Leinwand, Zeichenoberfläche für “scriptable images”

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); …

canvas kommt auch mit externe Grafiken klar ctx = canvas.drawImage(…); Demonstration: canvas

canvas und Barrierefreiheit?

canvas gut für “enhancements” – nicht für eigentliche Inhalte

video, audio und canvas … multimedia ohne “Steckeins” (plugins) (Java / Flash / Silverlight nicht überall vorhanden)

HTML5 als Flashkiller?

neue Standards geben Entwicklern endlich Alternativen (vor allem auf mobilen Plattformen)

neue Features für mächtige Web Applikationen

geolocation

isgeolocationpartofhtml5.com

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; ... }

offline Unterstützung

erkennen wenn der Browser offline ist window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true);

application cache

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

storage

localStorage/sessionStorage wie cookies... document.cookie = 'key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/' … /* convoluted string operations go here … */

localStorage/sessionStorage wie cookies...”on steroids”! localStorage.setItem(key, value); localStorage.getItem(key); localStorage.clear(); localStorage.key = value; if (localStorage.key == '…') { … } …

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 */ }); });

...und mehr! (File API, File Writer, WebGL, Drag and Drop, Server-sent Events, Web Workers, …)

“Is it safe?” kann ich diese Features schon jetzt verwenden?

feature-detection progressive enhancement, graceful degradation http://diveintohtml5.org/everything.html

Webstandards als high-level, plattformübergreifende Programmiersprachen

Google Voice – Web App statt iPhone App http://googlevoiceblog.blogspot.com/2010/01/google-voice-for-iphone-and-palm-webos.html

Palm WebOS, Google's “Installable Web Apps”, W3C Widgets, …

“…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

W3C Widgets standard-basierte Applikationen mit Browser-Engine als Plattform

Widgets auf Desktop, Mobiltelefon, Fernseher...

Anatomie eines Widgets index.html + […] + config.xml “packaged” in einem ZIP Archiv

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

http://my.opera.com/ODIN/blog/2010/02/18/svg-edit-standalone-widget

Warum Widgets?

Web App / Widget anstatt nativer Applikation?

www.opera.com/developer people.opera.com/patrickl/presentations/webinale_31.05.2010/webinale_31.05.2010.pdf patrick.lauke@opera.com

http://www.webcoder.de	309
http://www.slideshare.net	44
http://my.opera.com	10
http://static.slidesharecdn.com	1

Die Zukunft der Webstandards - Webinale 31.05.2010

by Patrick Lauke

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 364

Statistics

Die Zukunft der Webstandards - Webinale 31.05.2010 Presentation Transcript