eBusiness

Da das Canvas Element sowie Offline Web Applications zu den am häufigsten thematisierten Features von HTML5 gehören, möchte ich mich in meinem Statement zur Sitzung am 26.3. damit beschäftigen. 

Was ist Canvas

Das Canvas Element wurde urprünglich von Apple entwickelt, und zwar als Bestandteil des Webkit, bevor es schließlich von WHATWG stansardisiert worden ist. Wie auch die Möglichkeiten zum Einbinden von Audio- und Videomaterial, gehört auch Canvas zu den Multimedia-Neuerungen von HTML5. Der Name verrät es bereits, Canvas ist eine Leinwand, genauer gesagt eine "scribtable Bitmap", die sich mit Java Script bearbeiten lässt. Canvas ermöglicht zweidimensionales Zeichnen direkt im Browser. Ganz ähnlich wie auch in Bildbearbeitungsprogrammen können so z.B. Farbverläufe oder Transperenz erzeugt werden. Außerdem gibt es die Möglichkeit Objekte auf der "Leinwand" zu verschieben, zu drehen oder zu skalieren (Quelle 1). 

Wie wird Canvas eingebunden

Eingebunden wird diese Bitmap mit folgendem Tag und einer definierten Höhe und Breite: <canvas width="200" height="200"></canvas>. Dies definiert den Zeichenbereich, in welchem schließlich mittels Java Script nicht nur statische Elemente sondern auch Web-Applications erzeugt werden können (Quelle 2).

Beispiele

Beliebte Beispiele sind z.B. Zeichenprogramme wie dieses (Quelle 3) oder interaktive Grafiken (Quelle 4)und Games (Quelle 5). Hat das "alte Internet" Bilder als JPG oder Gif heruntergeladen, so werden sie dank HTML5 nun einfach auf einer "Leinwand" dargestellt. Auf http://www.canvasdemos.com (Quelle 6) findet sich eine ganze Reihe an beeindruckenden Grafiken, Apps und Games, wie auch diese Textil-Simulation:

(Quelle 7)

Eine weitere Neuerung durch HTML5, die in der letzten Sitzung noch nicht angesprochen wurde, aber durchaus relevant ist, sind Offline Web Apps.

Offline Web Applikationen

Angesichts der Tatsache, dass wir Web-Inhalte immer mehr mobil nutzen, wird in Zukunft vermutlich besonders das HTML5 Feature Offline Web Applactions eine große Rolle spielen.

Damit räumt HTML5 dem großen Nachteil von Web-Anwedungen gegenüber Client-Anwendungen aus dem Weg: Bisher waren Web-Anwendungen auf eine bestehende Internetverbindung angewiesen. Ist diese zusammengebrochen, konnte nicht weiter gearbeitet werden. Mit HTML5 ist es nun möglich auch offline auf Apps zuzugreifen

Wie funktionieren die Offline Apps

Beim ersten Aufruf einer Website werden nun Inhalte vorgeladen und gechached, sodass, wenn keine Internetverbindung mehr besteht, alle Änderungen die man auf der Seite vornimmt lokal zwischengespeichert und schließlich synchronisiert werden, sobald die Verbindung wieder hergestellt ist (Quelle 1).

In einer Datei, der sogenannten Manifest Datei, werden die Elemente, die der Browser in den Cache laden soll vom Webdesigner definiert. Es können dabei sämtliche Inhalte wie Bilder, Scripts oder ganze HTML-Seiten gecached werden. Arbeiten und Surfen im Zug oder Flugzeug wird mit diesen Offline Apps also problemlos möglich sein (Quelle 8).

Quellen (alle zuletzt aufgerufen am 11.04.2012):

1. Business Chip: http://business.chip.de/artikel/HTML5-Der-neue-Standard-fuers-Web_52406533.html
2. Peter Kröner: http://www.peterkroener.de/eine-kleine-canvas-einfuehrung/
3. Sketchpad: http://mudcu.be/sketchpad/
4. 3 D Cube: http://www.dhteumeuleu.com/fascinating/
5. Alex the Aligator:  http://alex4.tapjs.com/
6. Canvas Demos: http://www.canvasdemos.com
7. Textil Simulation: http://andrew-hoyer.com/andrewhoyer/experiments/cloth/
8. Rodion Sidorencov & Matthias Kirchner, "Offline Webanwendungen unter HTML5": http://winfwiki.wi-fom.de/index.php/Offline_WebAnwendungen_unter_HTML5