die zukunft der webstandards - webinale 31.05.2010

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

Post on 18-Oct-2014

4.099 views

Category:

Technology


7 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Die Zukunft der Webstandards - Webinale 31.05.2010

Die Zukunft der WebstandardsPatrick H. Lauke, Opera Software

Patrick H. Lauke / Webinale 2010 / Berlin / 31 Mai 2010

Page 2: Die Zukunft der Webstandards - Webinale 31.05.2010

Web Evangelist bei Opera

Page 3: Die Zukunft der Webstandards - Webinale 31.05.2010

die Zukunft hat schon Heute begonnen...

Page 4: Die Zukunft der Webstandards - Webinale 31.05.2010

HTML5<!DOCTYPE html>

Page 5: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 6: Die Zukunft der Webstandards - Webinale 31.05.2010

die Evolution von HTML

Page 7: Die Zukunft der Webstandards - Webinale 31.05.2010

HTML5 hat mehr “Bling”!

Page 8: Die Zukunft der Webstandards - Webinale 31.05.2010

“...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 HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html

Page 9: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 10: Die Zukunft der Webstandards - Webinale 31.05.2010

HTML5 Definition (ohne Hype):vereinfachte Syntax, standardisiertes

Browserverhalten, neue Markup-Elemente und JavaScript APIs

Page 11: Die Zukunft der Webstandards - Webinale 31.05.2010

neue Elemente für bessere Semantik

Page 12: Die Zukunft der Webstandards - Webinale 31.05.2010

HTML5 Elemente für einen typischen Blog

Page 13: Die Zukunft der Webstandards - Webinale 31.05.2010
Page 14: Die Zukunft der Webstandards - Webinale 31.05.2010
Page 15: Die Zukunft der Webstandards - Webinale 31.05.2010

HTML5 – präziser und maschinenlesbar

Page 16: Die Zukunft der Webstandards - Webinale 31.05.2010

“Unterstützt” in neuen und alten Browsern(mit etwas Nachhilfe)

header, footer, … { display: block; }

Page 17: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 18: Die Zukunft der Webstandards - Webinale 31.05.2010

webforms – bessere Formulare

Page 19: Die Zukunft der Webstandards - Webinale 31.05.2010

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>

Page 20: Die Zukunft der Webstandards - Webinale 31.05.2010

rich form elements – ohne JavaScript

<input type=”text” list=”mylist”><datalist id="mylist"> <option label="Mr" value="Mr"> <option label="Ms" value="Ms"> …</datalist>

Page 21: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 22: Die Zukunft der Webstandards - Webinale 31.05.2010

<video>

Page 23: Die Zukunft der Webstandards - Webinale 31.05.2010

<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&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Page 24: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 25: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 26: Die Zukunft der Webstandards - Webinale 31.05.2010

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 / LizenzTheora: Lizenzfrei, aber nicht für Web optimiert

Page 27: Die Zukunft der Webstandards - Webinale 31.05.2010

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!

Page 28: Die Zukunft der Webstandards - Webinale 31.05.2010

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 servierenhttp://camendesign.com/code/video_for_everybody

Page 29: Die Zukunft der Webstandards - Webinale 31.05.2010

<audio>

Page 30: Die Zukunft der Webstandards - Webinale 31.05.2010

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, WAVDemonstration: audio

Page 31: Die Zukunft der Webstandards - Webinale 31.05.2010

<canvas>

Page 32: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 33: Die Zukunft der Webstandards - Webinale 31.05.2010

<canvas width="…" height="…"></canvas>

Page 34: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 35: Die Zukunft der Webstandards - Webinale 31.05.2010

canvas kommt auch mit externe Grafiken klar

ctx = canvas.drawImage(…);Demonstration: canvas

Page 36: Die Zukunft der Webstandards - Webinale 31.05.2010

canvas und Barrierefreiheit?

Page 37: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 38: Die Zukunft der Webstandards - Webinale 31.05.2010

video, audio und canvas … multimedia ohne “Steckeins” (plugins)

(Java / Flash / Silverlight nicht überall vorhanden)

Page 39: Die Zukunft der Webstandards - Webinale 31.05.2010
Page 40: Die Zukunft der Webstandards - Webinale 31.05.2010
Page 41: Die Zukunft der Webstandards - Webinale 31.05.2010
Page 42: Die Zukunft der Webstandards - Webinale 31.05.2010
Page 43: Die Zukunft der Webstandards - Webinale 31.05.2010
Page 44: Die Zukunft der Webstandards - Webinale 31.05.2010

HTML5 als Flashkiller?

Page 45: Die Zukunft der Webstandards - Webinale 31.05.2010

neue Standardsgeben Entwicklern endlich Alternativen

(vor allem auf mobilen Plattformen)

Page 46: Die Zukunft der Webstandards - Webinale 31.05.2010

neue Features für mächtigeWeb Applikationen

Page 47: Die Zukunft der Webstandards - Webinale 31.05.2010

geolocation

Page 48: Die Zukunft der Webstandards - Webinale 31.05.2010

isgeolocationpartofhtml5.com

Page 49: Die Zukunft der Webstandards - Webinale 31.05.2010

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

}

Page 50: Die Zukunft der Webstandards - Webinale 31.05.2010

offline Unterstützung

Page 51: Die Zukunft der Webstandards - Webinale 31.05.2010

erkennen wenn der Browser offline ist

window.addEventListener('online', function(){ … }, true);window.addEventListener('offline', function(){ … }, true);

Page 52: Die Zukunft der Webstandards - Webinale 31.05.2010

application cache

Page 53: Die Zukunft der Webstandards - Webinale 31.05.2010

UI/Resourcen zur Benutzung offline cachen

<html manifest=”blah.manifest”>CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.cssdata.xml

Page 54: Die Zukunft der Webstandards - Webinale 31.05.2010

storage

Page 55: Die Zukunft der Webstandards - Webinale 31.05.2010

localStorage/sessionStoragewie cookies...

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

Page 56: Die Zukunft der Webstandards - Webinale 31.05.2010

localStorage/sessionStoragewie cookies...”on steroids”!

localStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == '…') { … }…

Page 57: Die Zukunft der Webstandards - Webinale 31.05.2010

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 */

});});

Page 58: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 59: Die Zukunft der Webstandards - Webinale 31.05.2010

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

verwenden?

Page 60: Die Zukunft der Webstandards - Webinale 31.05.2010

feature-detectionprogressive enhancement, graceful degradation

http://diveintohtml5.org/everything.html

Page 61: Die Zukunft der Webstandards - Webinale 31.05.2010

Webstandards als high-level, plattformübergreifende Programmiersprachen

Page 62: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 63: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 64: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 65: Die Zukunft der Webstandards - Webinale 31.05.2010

W3C Widgetsstandard-basierte Applikationen

mit Browser-Engine als Plattform

Page 66: Die Zukunft der Webstandards - Webinale 31.05.2010

Widgets auf Desktop, Mobiltelefon, Fernseher...

Page 67: Die Zukunft der Webstandards - Webinale 31.05.2010

Anatomie eines Widgets

index.html + […] + config.xml

“packaged” in einem ZIP Archiv

Page 68: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 69: Die Zukunft der Webstandards - Webinale 31.05.2010
Page 70: Die Zukunft der Webstandards - Webinale 31.05.2010

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

Page 71: Die Zukunft der Webstandards - Webinale 31.05.2010

Warum Widgets?

Page 72: Die Zukunft der Webstandards - Webinale 31.05.2010

Web App / Widget anstatt nativer Applikation?

Page 73: Die Zukunft der Webstandards - Webinale 31.05.2010

www.opera.com/developerpeople.opera.com/patrickl/presentations/webinale_31.05.2010/webinale_31.05.2010.pdf

[email protected]