Die Zukunft der Webstandards - Webinale 31.05.2010

  • Published on
    18-Oct-2014

  • View
    3.983

  • Download
    1

Embed Size (px)

DESCRIPTION

 

Transcript

Die Zukunft der Webstandards

Die Zukunft der WebstandardsPatrick H. Lauke, Opera Software

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

Web Evangelist bei Opera

die Zukunft hat schon Heute begonnen...

HTML5

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 HTML5http://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 fr bessere Semantik

HTML5 Elemente fr einen typischen Blog

HTML5 prziser und maschinenlesbar

Untersttzt 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

rich form elements ohne JavaScript

Typen und Attribute zur automatischen Validierung(natrlich trotzdem auf dem Server noch validieren)

Demonstration: new input types, datetime, validation

Download movie

video als natives Object...vorteile?

verhlt sich wie jedes andere Element Tastatursteuerung mchtige 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: unterstzt beide

H.264: weitverbreitet, aber Patente / LizenzTheora: Lizenzfrei, aber nicht fr 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.canPlayType('video/webm')

alten Browsern Flash servierenhttp://camendesign.com/code/video_for_everybody

audio fast gleich wie video

[...]

MP3, Ogg Vorbis, WAVDemonstration: audio

canvas = Leinwand, Zeichenoberflchefr 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 fr enhancements nicht fr eigentliche Inhalte

video, audio und canvas multimedia ohne Steckeins (plugins)

(Java / Flash / Silverlight nicht berall vorhanden)

HTML5 als Flashkiller?

neue Standardsgeben Entwicklern endlich Alternativen

(vor allem auf mobilen Plattformen)

neue Features fr mchtigeWeb 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 Untersttzung

erkennen wenn der Browser offline ist

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

application cache

UI/Resourcen zur Benutzung offline cachen

CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.cssdata.xml

storage

localStorage/sessionStoragewie cookies...

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

localStorage/sessionStoragewie 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-detectionprogressive enhancement, graceful degradation

http://diveintohtml5.org/everything.html

Webstandards als high-level, plattformbergreifende Programmiersprachen

Google Voice Web App statt iPhone Apphttp://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 perfectyoure 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 dont need to write to the native operating system anymore.

Mobile Entertainment Market , June, 2009

W3C Widgetsstandard-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

MyFirstWidget A demo 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/developerpeople.opera.com/patrickl/presentations/webinale_31.05.2010/webinale_31.05.2010.pdf

patrick.lauke@opera.com