Die Zukunft der Webstandards - Webinale 31.05.2010
of 73
/73
-
date post
18-Oct-2014 -
Category
Technology
-
view
4.087 -
download
6
Embed Size (px)
description
Transcript of Die Zukunft der Webstandards - Webinale 31.05.2010
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/[email protected]/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
