HTML5 und CSS3 | Immer nur am Ball bleiben reicht nicht...

...man muss auch mal spielen.
Der Ansturm hat begonnen. In den letzten Monaten wird man mit neuen Experimenten und Erkenntnissen in Sachen HTML5 und CSS3 bombadiert. Die Entwicklung ist rasant – unzählige neue Veröffentlichungen, Ansätze und Ideen werden von der Netzgemeinde kontrovers diskutiert. Dieser Beitrag beschreibt keine Techniken, ich zeige vielmehr ein paar Experimente mit CSS3 und HTML sowie Links zu inspirierenden und informativen Quellen zum aktuellen Spielstand.

Achtung: Dieser Artikel ist stellenweise veraltet! Besonders die Demos.

Dass die Tribüne in Aufruhr gerät, ist verständlich. Mit CSS3 und HTML5 sind gleich zwei neue Nachwuchsspieler auf dem Feld, obwohl zur Zeit nur wenige, aktuelle Browser diese unterstützen. Es erschließen sich für Webdesigner und Entwickler jedoch neue, erstaunliche Möglichkeiten – eine andere Liga. Und der unaufhörliche Ansturm bringt die Entwicklung von CSS3 und HTML5 enorm nach vorne. Über Sinn und Unsinn mancher Tests und Veröffentlichungen lässt sich sicher streiten, aber das wichtigste vor dem Spiel ist ja bekanntlich das Training. So, genug Fußballsprüche...

CSS3 – Lange genug zugesehen, jetzt mal selber spielen

Die anfänglichen Diskussionen und die ersten Experimente von Kolleginnen und Kollegen habe ich erstmal eher gelassen betrachtet. Bis CSS3 salonfähig ist habe ich ja noch viel Zeit. Falsch gedacht! Die Implementierung von HTML5 und CSS3 folgt nicht auf einen Paukenschlag, sondern passiert Häppchenweise. Also habe ich mit ein paar der neuen Styles an praktischen Beispielen mal ausprobiert. Na ja, einen Designwettbewerb werde ich damit wohl nicht gewinnen, aber der Weg ist ja das Ziel. Sie laufen zum Zeitpunkt der Veröffentlichung leider nur auf aktuellen Webkit-Browsern, also Safari 5+ und Chrome 6+. Die Demos unten sind eigenständige HTML-Seiten und werden in einen iframe geladen.

Nur am Ball bleiben reicht nicht...
Und passend zur Jahreszeit: Die animierte Weihnachtskarte

Wer sich die Dateien genauer ansehen will kann sie sich [download id="18" format="2"] herunter laden.

Die Demonstrationen oben verzichten völlig auf Grafiken und verwenden ausschließlich CSS + CSS3. Beide sind an einem Tag entstanden, der zeitliche Aufwand ist also überschaubar. Folgende Tools und Beschreibungen haben mir den Einstieg erleichtert:

A comprehensive CSS 3 reference guide
Sehr gute und übersichtliche Referenz für CSS3. Die Styles werden hier auch beschrieben.
CSS3 Playground von Mike Plate
Mit diesem Online-Tool können Effekte direkt ausprobiert und der generierte Quellcode kopiert werden. Macht Verläufe, runde Ecken und Schlagschatten zu einem Kinderspiel.
Creating awesome CSS3 animations von Thomas Fuchs
Thomas erklärt eine CSS-Animation an einem praktischen Beispiel. Hier werden Grafiken als Grundlage für "Captain Track" verwendet und mit der Zeitleiste animiert.
Pure CSS animated 3D Super Mario Icon von Andreas Jacob
Tolle Animation aus purem CSS3 im Stil der ersten Super Mario Figur.

HTML5 – Eine Auszeichnungssprache und ihre Krücken

Meine Beziehung zu HTML5 verlief ähnlich wie die zu CSS3. Erst seit der Veröffentlichung von HTML5 ★ Boilerplate fange ich an, es für Projekte einzusetzen.

Die Boilerplate ist ein Framework, dass es dem Webdesigner ermöglicht HTML5 einzusetzen, ohne an die Grenzen bzw. auf das Unverständnis der älteren Browser zu stoßen. Es beinhaltet einen "Übersetzer", den Modernizr (eine JavaScript-Bibliothek), der die neuen Tags sogar dem IE6 ermöglicht. Desweiteren sind viele andere Voreinstellungen enthalten, z. B. Optimierung für Mobile-Browser, Progressive Enhancement Graceful Degradation, optimiertes Caching.

Ein kleineres Projekt habe ich dann auch prompt damit umgesetzt. Diaphon.de. HTML5 mit Boilerplate als Krücke, aufgesetzt auf Wordpress als klassisches CMS, damit Texte und Bilder vom Kunden eingepflegt werden können. Eine große Umstellung bedeutete es eigentlich nicht, lediglich an den semantisch korrekten Einsatz der neuen Tags musste ich arbeiten. Die Tests in den verschiedenen Browsern wurden dann auch ohne nennenswerte Unterschiede in der Darstellung bestanden. Bravo Boilerplate!

HTML5 + Wordpress = ♥

Webseite Diaphon
Zur Seite von Diaphon

Natürlich gibt es nicht nur die Boilerplate als Framework. Wer mal andere Ansätze ausprobieren möchte, kann sich folgende Alternativen ansehen:

52framework von enavu network
Ist das erste Framework seiner Art.
SproutCore 1.0
Für schnelle Browserapplikationen, soll der Geschwindigkeit einer Desktopapplikation gleich kommen.
Jo HTML5 Mobile App Framework
Ein Framework für Mobile-Browser Applikationen.

...und wenn dich HTML5 interessiert, interessiert dich auch das:

Periodic Table of the Elements von Josh Duck
Ein gute Idee und ein schöner Überblick über HTML5-Tags.
HTML5 W3C Working Draft
Der Stand der Entwicklung sowie Aktualisierungen und Neuerungen werden hier festgehalten. Wichtig!
HTML 5 Tag Reference von w3schools.com
Die HTML5 Tags auf einen Blick mit kurzer Beschreibung.
Paul Irish | The State of HTML5: Inaugural Address | Fronteers 2010 from Fronteers on Vimeo. Noch was aktuelles:

Sammelsurium - echt sehenswerte Dinge zum Thema

20 Things I Learned About Browsers and the Web von Hakim El Hattab und Erik Kallevig
Ein Buch im Browser mit Thema Browser…. Tolle Simulation.
Rumpetroll!
Ist norwegisch und heißt Kaulquappe. Dahinter verbirgt sich ein Online-Chatroom der anderen Art. Animiert schwimmt man mit seiner Kaulquappe (oder so) durch ein HTML5 Canvas und trifft andere Artgenossen. Astrein!
3D CSS cube with rotating navigation von Paul Hayes
Experiment mit CSS3 zur animierten, dreidimensionalen Darstellung eines Würfels.
Never mind the bullets
Benötigt den IE9 ist aber ein reiner Augenschmaus im Western-Comic-Style. Tolle Idee!

Abpfiff

Im Grunde genommen müssen Effekte mit CSS3 derzeit noch als Nice-to-have Ergänzung zum herkömmlichen Stylesheet gesehen werden. Eine Internetseite muss immer noch ohne auskommen können. HTML5 funktioniert zur Zeit eigentlich auch nur mit Krücke. Trotzdem sollten wir alle anfangen HTML5 und CSS3 zu benutzen. Je größer die Verbreitung desto größer wird auch der Druck auf die Browserhersteller die Entwicklung und Implementierung voran zu treiben. Also fühlt euch ermutigt und inspiriert…


Kommentare (0)



Einen Kommentar schreiben





Ich sage… Erlaubte Tags: