Speaker:

Felix Rieseberg

Beginnend mit der Aussage : Websites sind keine Flyer mehr, sie entwickteln sich mehr und mehr zu Anwendungen.

Es soll um ausgewählte Themen gehen und nicht um einen Wettlauf durch alle HTML5 Funktionen.

Zuerst geht es um Nutzerinteraktionen. Die Anzahl der Nutzereingaben wächst stetig. JQuery UI versucht zu realisieren was dringend notwendig war. Standardcontrols wie einen Datepicker einfach zu realisieren. Mit HTML5 soll z.B. der Datepicker einfach aus HTML heraus zur Verfügung stehen.

Bisher gibt es z.B. auf jeder Seite unterschiedliche Arten der Formvalidierung. Mit HTML5 kann man dem Textfeld sagen welchen Inhalt es enthalten soll, dies wird mit Eingabetypen wie input type="text für eine Mailadresse realisiert. Auch die Eingabe der Werte wird unterstützt mit Elementen wie einem Ziffernblock zur Zahleneingabe oder einem Colorpicker für Farben. Es gibt für Formulare und Formularelemente Eingabetypen, Eingabevalidierung, Autovervollständigung, Platzhalter und Checkboxen.

Demo

Es folgt eine kleine Demo mit Opera, da dieser Browser bei Inputtypes wohl die bisher beste Unterstützung bietet. Auch der IE wird gezeigt, bei dem sich die Bildschirmtastatur an ein Textfeld mit Ziffern anpasst.

Die eingebaute Validierung sorgt zusätzlich dafür,dass in einem Browser auf allen Seiten Meldungen für Falscheingaben einheitlich aussehen, da das Meldungselement vom Browser und nicht von der Seite selbst kommt.

Eine Autovervollständigung kann ganz einfach mit einer Datalist Erstellt werden.

Platzhalter realisieren einen Beispieltext ähnlich der bekannten Wasserzeichen welche beim hineinklicken verschwinden.

Zu den Checkboxen kommt ein dritter Status hinzu, der inditermant State, bei dem die Checkbox mit einem rechteck gefüllt ist.

Felix sagt kurz was ihn bisher an Formularen nervt, Punkt eins sind Kalender (z.B. Bei der Flugbuchung), Nummer zwei ist der allseits beliebte Zurück-Button (allgemeines Stöhnen im Saal).

Manipulierung der History

Hier kann bei HTML5 mit history.pushState oder history.replaceState in das Verhalten des Zurück Knopfs eingegriffen werden. Mit pushState wird eine Adresse an die Adresszeile geschickt aber nicht aufgerufen. Mit replaceState wird die zuletzt Besuchte Seite geändert.

Damit ermöglicht der pushState Parameter in die URL zu schreiben, obwohl die Daten eigentlich per Ajax zum Server gelangen.

Es findet momentan keine Common Origin Prüfung statt. Das ist für den Entwickler mächtig, für den Nutzer allerdings gefährlich.

Wo Licht ist, da ist auch Schatten und so kommt Felix jetzt zu Grenzen und Problemen.

Leider sind nicht für alle Browser eigene Controlls für alle Typen möglich.

Die Validierung bietet im Moment eine sehr geringe Flexibilität, so ist eine Prüfung über externe Schnittstellen (Bsp. Kreditkarten) nicht möglich.

Drag & Drop

Die Funktionalität ist gut, die API wohl aber sehr schlecht.

Die Grundprinzipien sind klar, werden aber der Vollständigkeit halber nochmals genannt: draggable, droppable & Datentransfer.

Die “Killerapplikation” ist die Desktopintegration z.B. der Upload von Bildern per einfachem Heranziehen in den Browser.

Es gibt eine ganze Menge Events, die meisten nur um Drag & Drop zu killen.

Neu ist das dataTransfer Objekt, auf das man im Dom und somit auch per JS zugreifen kann.

Bisher Upload und Bildauswahl per Flash, danach die Frage wer im Raum denkt das in 5 Jahren noch Flash genutzt wird. Keiner meldet sich ; )

Beispiel

Ganz kurz erwähnt wird Cross-Document-Messaging, was durch die Messaging API realisiert wird. Es folgt ein Bsp. das Bild wurde per Drag & Drop auf unseren Bilderservice geladen. Jetzt soll es auf Facebook veröffentlicht werden, was im zweitem Tab offen ist. Nach Nutzerintegration kann das Bild x nun von der einen Seite zur anderen geschickt werden.

Damit ist der Teil User Controls abgeschlossen.

Weitere Möglichkeiten von HTML5

Den Anfang macht das Canvas.

Das Canvas ist eine frei programmierbare Leinwand. Es gibt zwei Dinge zu unterscheiden, den 3D Kontext und den 2D Kontext. Um 3D soll es heute nicht gehen da es ein sehr umfangreiches Thema ist (Stichwort WebGL mit Shadern etc.) Der 2D Context wird weit unterstützt.

Das Vorgehen ist an Zeichnen angelegt, man wählt erst einen Pinsel (rot) und zeichnet dann ein Rechteck, es ist nicht möglich ein Rechteck zu zeichnen und dann zu sagen es soll bitte rot sein.

Nicht nur gerade Linien sind möglich, dafür aber Kreisbögen, Farbverläufe etc.

Felix weißt vor den Beispielen darauf hin, dass wenn irgend möglich auf Canvas verzichtet werden soll.

Es gibt viele Frameworks, die sich in Entwicklung befinden. Drei sollen heute vorgestellt werden. CAKE, fabric.js und Processing.

Es werden einige nette Effekte gezeigt, die mit CAKE realisiert sind und bisher nur mit Flash (oder Silverlight) möglich waren. Auch mit fabric lassen sich nette Animationen erstellen (z.B. Fliegende Bugs). Processing erlaubt es relativ komplexe Daten einfach zu visualisieren und animieren.

Felix warnt: das erste mal Canvas bearbeiten sieht am Anfang grausam aus, aber mit den Frameworks lässt sich in erträglicher Zeit einiges erreichen.

Jetzt kommen Media Queries, welche sich dem Problem der vielen unterschiedlichen Geräte annimmt, mit denen heute Websites angesehen/benutzt werden. Man kann jetzt mehr Sachen von den Geräten Abfragen wie z.B. Höhe, Breite, Orientierung, Seitenverhältnis, Auflösung, Color, Scan und Grid. Scan ist interessant für Fernseher und das Grid gibt an ob ein Raster zugrunde liegt (z.b. bei dem Kommandozeilenbrowser Lync).

Mit den Informationen aus den Media Queries ist es dann entsprechend möglich, je nach Gerät ein spezifisches Stylesheet zu verwenden und dem Nutzer die bestmögliche Darstellung zu bieten.

Von der Verwendung der Handheld-Eigenschaft wird abgeraten da z.B. Androide und iOS das “volle” Web bieten und die Eigenschaft ignorieren.

Jetzt kommt der Modernizer zum Einsatz, der innerhalb kürzester Zeit CSS Funktionen und Co auf Verfügbarkeit prüft. Wenn der Browser etwas nicht anbietet, greift ein polyfill (Fallback) was durch das Framework realisiert wird.

Es gibt eine Seitenempfehlung: http://Bit.ly/fr_polyfills Hier wird gut gezeigt wie man Polyfills geschickt einsetzt um HTML5 zu nutzen ohne Nutzer mit älteren Systemen auszuschließen.

Es gibt keine Fragen zu diesem wirklich guten Vortrag. Damit neigt sich der erste Tag der GUI & DESIGN langsam dem Ende entgegen. Es folgt das Panel zu ’Begriffen und Rollen’ und im Anschluß dazu die Abendveranstaltung.