Animation, Templates, Typographie
7 geniale HTML5-Helfer
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
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
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.
- Infografik "What the fuck is HTML5?"
"WTF is HTML5?": Diese Infografik lässt sich auch leicht mit anderen teilen oder in eigene Angebote einbetten. - Apple Safari Developer Center
Das Safari Dev Center gibt einen Schnellüberblick über die gängigen HTML5-Features und zeigt sie schön gestaltet in Aktion. - Microsoft Internet Explorer 10 Test Drive
IE Test-Drive hat mehr Programme zu bieten... - Typographie-Demos
... und ebenfalls überzeugende und ausführliche Demos. - Adobe Edge Animate CC
Die Bedienung und Oberfläche von Edge Animate erinnert eher an After Effects als an Flash. - Übungen
Lektionen ermöglichen einen Schnelleinstieg in Edge Animate. - Showcase
Im Edge Showcase finden sich Beispiele, die schnell zeigen, was mit Edge Animate ohne Programmierung möglich sein kann. - HTML Kickstart von 99lime.com
HTML5 Kickstart kann enorm viel Zeit mit wiederverwendbaren Grundelementen sparen – und ist kostenlos. - Leicht anpassbar
Typische Buttons und Grafiken können einfach in die eigene Website eingebaut und angepasst werden. - Video.js
Der VideoJS-Player zeigt auf seiner Homepage, wie leicht er anzupassen... - Embedcode
... und einzubetten ist. - HTML5 Please
HTML5 Please ist eine geniale Schnellreferenz, die selbst durch ihr ebenso reaktionsfreudiges wie stylishes HTML5-Design begeistert. - Typekit Auswahl
Die Web-Oberfläche von Typekit hilft beim schnellen Durchstöbern des Angebots an Schriften. - Typekit Gallery
Wer sich von den Möglichkeiten mit Web-Typografie überzeugen will, findet bei Typekit in der Galerie eine Sammlung überzeugender Beispiele. - Infografik "What the fuck is HTML5?"
"WTF is HTML5?": Diese Infografik lässt sich auch leicht mit anderen teilen oder in eigene Angebote einbetten. - Apple Safari Developer Center
Das Safari Dev Center gibt einen Schnellüberblick über die gängigen HTML5-Features und zeigt sie schön gestaltet in Aktion. - Microsoft Internet Explorer 10 Test Drive
IE Test-Drive hat mehr Programme zu bieten... - Typographie-Demos
... und ebenfalls überzeugende und ausführliche Demos. - Adobe Edge Animate CC
Die Bedienung und Oberfläche von Edge Animate erinnert eher an After Effects als an Flash. - Übungen
Lektionen ermöglichen einen Schnelleinstieg in Edge Animate. - Showcase
Im Edge Showcase finden sich Beispiele, die schnell zeigen, was mit Edge Animate ohne Programmierung möglich sein kann. - HTML Kickstart von 99lime.com
HTML5 Kickstart kann enorm viel Zeit mit wiederverwendbaren Grundelementen sparen – und ist kostenlos. - Leicht anpassbar
Typische Buttons und Grafiken können einfach in die eigene Website eingebaut und angepasst werden. - Video.js
Der VideoJS-Player zeigt auf seiner Homepage, wie leicht er anzupassen... - Embedcode
... und einzubetten ist. - HTML5 Please
HTML5 Please ist eine geniale Schnellreferenz, die selbst durch ihr ebenso reaktionsfreudiges wie stylishes HTML5-Design begeistert. - Typekit Auswahl
Die Web-Oberfläche von Typekit hilft beim schnellen Durchstöbern des Angebots an Schriften. - Typekit Gallery
Wer sich von den Möglichkeiten mit Web-Typografie überzeugen will, findet bei Typekit in der Galerie eine Sammlung überzeugender Beispiele.
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.