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

die Zukunft hat schon Heute begonnen...

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

“...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 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 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 gut für “enhancements” – nicht für
eigentliche Inhalte

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

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

neue Features für mächtige
Web Applikationen

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

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

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

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

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

Die Zukunft der Webstandards - Webinale 31.05.2010

Weitere ähnliche Inhalte

Was ist angesagt?

Andere mochten auch

Ähnlich wie Die Zukunft der Webstandards - Webinale 31.05.2010

Mehr von Patrick Lauke

Die Zukunft der Webstandards - Webinale 31.05.2010