Animation, Templates, Typographie

7 geniale HTML5-Helfer

Diashows, Videoplayer für Tablets, Web-Typografie und vieles mehr: Mit HTML 5 ist viel möglich, aber oft leider nicht ganz einfach. Wir zeigen Ihnen die besten Helfer für Entwickler, Designer und Entscheider.

An den genialen Möglichkeiten der modernen Websprache HTML5 kommt heute keiner mehr vorbei. Das "große Update" von HTML bringt zum Beispiel alles mit, was man für dynamische Seitenlayouts, für "responsive Webdesign", für reaktionsfreudige und interaktive Seitenelemente braucht. Klingt super, ist aber nicht ganz einfach. Auch HTML-Profis lernen nie aus. Abhilfe schaffen eine Menge Tutorials und Tools, die kostenlos im Web zu finden sind. Wir stellen Ihnen einige ausgewählte Anwendungsszenarien vor.

HTML5 in 5 Minuten verstehen

WTF?
WTF?
Foto: http://visual.ly/wtf-html5-and-why-should-we-all-care

Kaum ein Anwender nimmt sich heute noch die Zeit, ausufernde Lerntutorials zu studieren. Zumindest nicht, solange es nur darum geht, die grundlegenden Neuerungen und Funktionen zu verstehen. Für genau diese Zielgruppe wurden die Infografiken erfunden - eine der besten zum Thema HTML5 trägt den griffigen Titel "What the fuck is HTML5?" Sie vermittelt auf einen Blick alles Wissenswerte. Wer das viel zitierte "Canvas"-Element nicht verstanden hat, bekommt es hier kurz und knackig serviert. Auch zeigt die Grafik, welche Browser in welchem Maße HTML5 unterstützen.

Schnell Funktionen als Demo zeigen

Microsoft IE 10 Test Drive
Microsoft IE 10 Test Drive
Foto: Stefan von Gagern

Ein paar gute HTML5-Demos lassen sich bei vielen Gelegenheiten brauchen: Entweder zum Brainstorming in der Konzeptionsphase, wenn es um die grundlegenden Features geht oder zur Präsentation auf Kundenterminen beziehungsweise im Kollegenkreis. Richtig überzeugen kann eine Demo nur in Aktion - Apple stellt einige beispielsweise im Safari Developer Center zur Verfügung. Hier lassen sich neue HTML5-Features wie Typografien, Bildergalerien, Videoeffekte und Foto-Übergänge austesten. Noch einen Schritt weiter geht Microsofts Internet Explorer 10 Test Drive. Hier gibt es nicht nur Feature-Demos, sondern auch Spiele und Anwendungen wie ein Screenshot-Programm für Videos zu sehen - teils jedoch zugeschnitten auf die Spezialitäten des Internet Explorers.

Animation ohne Programmierarbeit

HTML5-Animationen müssen nicht unbedingt heftige Programmierarbeit mit sich bringen. Es gibt bereits brauchbare visuelle Werkzeuge. Mit Adobe Edge Animate CC können Animationen mit Schlüsselbildern erstellt werden, die ähnlich wie das Videotool After Effects Veränderungen der Position, Größe, Farbe etc. in einer Zeitleiste abbilden. Seit dem letzten großen Update auf die "Creative Cloud" (CC) spielen auch Bewegungspfade eine große Rolle. Aber nicht nur Übergänge und Animationen, sondern auch interaktive Seitenelemente wie berührungsempfindliche Beschreibungstexte lassen sich direkt im Browser ausprobieren. Programmierkenntnisse sind bei all dem nicht nötig - Edge Animate erstellt den Quellcode im Hintergrund. Die Ergebnisse basieren auf der Webkit-Engine und sind mit allen wichtigen (mobilen) Browsern kompatibel. Wer sich einen schnellen Eindruck verschaffen möchte, kann den Showcase besuchen. Oder sich einige der interaktive Lektionen für die wichtigsten Funktionen auf dem Startbildschirm anschauen. So gelingen schnell die ersten Animationen.