5 - Wet Floor and Coverflow: Canvas in HTML5 [ID:986]
50 von 357 angezeigt

So, herzlich willkommen zum ersten Vortrag des ganzen Kongresses. Man muss ja beim ersten Vortrag

gleich richtig zugreifen und dafür sorgen, dass es pünktlich losgeht. Und das wollen wir jetzt

auch tun. Ich muss gestehen, Herr Klim, als ich den Titel des Vortrags gelesen habe,

ich habe drei Wörter nicht verstanden und das waren alle Substantive. Außer HTML 5 habe ich

die Wörter alle nicht gekannt. Weder WetFloor noch CoverFloor noch Canvas. Aber sie haben mir

gerade schon gesagt, das sind auch Wörter, die muss man noch nicht kennen, aber in zwei Jahren

wird man sie kennen müssen. Das heißt, das Thema Zukunftstechnologie trifft auf diesen Vortrag

ganz in besonderer Form zu. Vielleicht noch ein paar ergänzende Informationen zu Ihnen, Sachen,

die noch nicht auf der Tagungswebseite standen. Sie sind natürlich auch Mitglied der Web-Crowds,

sogar noch im einstelligen Bereich. Das sollte man vielleicht auch mal erwähnen. Und ja,

dann habe ich das falsch verstanden. Zu Ihren letzten Arbeiten, die Relaunches betreffen und

die teilweise oder größtenteils noch nicht online sind, gehören der Auftritt der Stadt Stuttgart,

der Neuauftritt von barn.de und so Branchengrößen wie braun.com. Da geht es natürlich auch ums

Thema Barrierefreiheit. Und ja, ich bin sehr gespannt, was Sie mir jetzt über RedFloor,

CoverFlow und Canvas erzählen können. Ja, so etwas wie das Canvas-Element haben wir jetzt bei der

Bahn noch nicht. Aber ich denke, in den nächsten ein bis zwei Jahren wird das schon sehr auf uns

zukommen. Ich denke also gerade im nächsten Jahr werden wir das sehen. Und wie Ihnen geht es den

meisten Leuten momentan? Also das Canvas-Element muss man noch nicht kennen. Und darum bin ich ja

hier. Darum erstmal die Frage, was ist Canvas überhaupt? Jemand hat das ganz nett so beschrieben,

it's like having a little Apple II in your browser. Also man hat das Canvas-Element und dort kann man

viele kleine, tolle Sachen machen, wie damals bei dem Apple IIc mit Sprites arbeiten, Animationen

und dergleichen mehr. Das werden wir gleich noch sehen. Eingeführt hat Canvas Apple und zwar im

Dashboard von OS X und dann eben in Safari und iTunes. Ich habe hier einen Screenshot von iTunes

und dort sehen wir eigentlich auch schon gleich. Hier unten haben wir diese Spiegelung und das Ganze

würde sich dann auch bewegen. Und das ist eben diese Bewegung, das ist der CoverFlow und wet floor

sind die Spiegelungen hier unten. Wenn Apple sowas macht, dann dauert es nicht lange und viele

machen das nach. Wir werden aber sehen, mit Canvas ist man nicht nur auf diese zwei Effekte beschränkt.

Dann vielleicht erstmal, wie sieht das aus? Also Canvas ist ein HTML-Element und es hat erstmal

nicht viele Eigenschaften, nämlich außer einer ID oder einer Klasse, die jedes Element haben kann,

hat es eigentlich nur eine Breite und eine Höhe. Die Standardbreite und Höhe ist 150 Pixel, wie ich

es hier auch schon angegeben habe. Man kann das aber auch beliebig anders wählen. Jetzt kann man mit

einer Breite und Höhe nicht wirklich viel anfangen. Ich hätte also erwartet, da gibt es wenigstens

mal irgendwie eine SRC oder irgendwas, was auf eine Quelle verweist oder noch ein paar Steuerelemente,

wie man das so vom HTML-Objekt her kennt, dass man dort Parameter übergeben kann. Das ist ja

alles nicht. Das geschieht alles mit JavaScript. Das heißt also Canvas ohne JavaScript ist nicht.

Man kann allerdings, wie bei dem HTML-Objekt, auch ein Fallback einbauen. Das ist hier oben drin.

Das heißt also wir haben hier ein Canvas-Element und da drin ist zum Beispiel ein Bild, das dann

als Fallback dienen kann für Browser, die noch kein Canvas-Element können. Mit dem JavaScript im

Detail werde ich gleich noch darauf eingehen, was es da so hat und was man damit machen kann. Ich

habe das nur mal der Vollständigkeit halber hier reingeschrieben. Auch ganz interessant, wer supportet

überhaupt Canvas und da bin ich ganz stolz. Ich habe gestern noch dieses Google Chrome Logo dort

eingebaut. Also natürlich Safari unterstützt Canvas, Kunststücke, Apple hat das als erstes

eingebaut und das ist auch schon ungefähr drei, vier Jahre her. Man sollte es kaum für möglich

halten. In Firefox-Apv. 1.5 ist es drin, Opera zumindest in 9.5, kann sein, dass es auch früher

drin ist, damit habe ich mich nicht befasst. In Google Chrome und in Google Gears. Das finde

ich ziemlich interessant, weil Google Gears kann man ja eben auch als Plugin quasi für verschiedenste

Browser nehmen und der Gedanke von Google dabei ist eben auch genau, warum sie jetzt ihren Google

Chrome Browser herausgebracht haben. Der Gedanke ist, dass über Google Gears die Lücken in den

Browsern gefüllt werden. Das heißt also, wenn jemand den Internet Explorer 6 hat, hat aber Google

Gears installiert, dann kann er auf einmal Sachen, wovon man vorher nicht zu träumen gewagt hat. Das

Teil einer Videoserie :

Presenters

Martin Kliehm Martin Kliehm

Zugänglich über

Offener Zugang

Dauer

00:43:23 Min

Aufnahmedatum

2008-09-04

Hochgeladen am

2011-04-11 13:53:28

Sprache

de-DE

Safari hat das Canvas-Element eingeführt. Damit werden Design-Effekte wie das Bilderkarussell (Coverflow) und Spiegelungen (Wet Floor) realisiert. Die HTML5 Arbeitsgruppe hat das Element in ihren Standardentwurf aufgenommen, und inzwischen unterstützen es fast alle Browser der "großen Vier".

Tags

Web html5 safari mozilla w3c htmlwg whatwg svg css3 coverflow wet-floor spiegelung Webkongress canvas opera 2008 2.0
Einbetten
Wordpress FAU Plugin
iFrame
Teilen