HTML5 Experiment: Entwicklung eines WordPress Themes
Kategorie Web | 4 Kommentare »
Das wird ein kleines Experiment. In einer Reihe von Blogbeiträgen werde ich versuchen, ein WordPress Theme mittels HTML5 zu entwickeln. Das Experiment ist eigennützig: ich will mir ein tieferes Verständnis von HTML5 und CSS3 erarbeiten. Andererseits findet vielleicht der geneigte Leser die Beitragsreihe interessant, da ich alle Schritte öffentlich dokumentieren werde. Doch legen wir los!
Was sind meine Ziele? Am Ende soll diese Seite mit dem neuen Theme vollständig lauffähig sein. Vermutlich werde ich das Zerschneiden der Seite in WordPress Templateschnipsel aber erst ganz am Ende machen, um nicht vorher die Übersicht zu verlieren.
Grafisch wird sich die Seite sicher nicht groß vom aktuellen Zustand unterscheiden, außer es findet sich ein netter Zeitgenosse, der eine bessere grafische Vorlage beisteuert! Bei der Entwicklung will ich, soweit möglich, ausschließlich HTML5 für das Markup und CSS3 für das Styling einsetzen. Grafiken sollen auf das unbedingt Nötigste reduziert werden. Folgende Eckpunkte kommen noch hinzu:
- Das Seitenlayout soll sich dynamisch an die Browsergröße anpassen. Dadurch soll der Blog sowohl auf einem mobilen Endgerät als auch auf einem großen Display sinnvoll nutzbar sein (Neudeutsch: Responsive Web Design).
- Ich will CSS Pseudoklassen manuell vergebenen CSS Klassen und IDs den Vorzug geben.
- Grafiken werden als Sprites zusammengefasst.
- Ich schreibe alles von Hand und erweitere nicht ein Basistheme oder Gridsystem.
- Ich binde eine externe Schrift ein.
- Wenn möglich, verzichte ich auf JavaScript.
- Die Seite enthält, soweit sinnvoll, keine vom W3C Validator beanstandeten Fehler.
- Ich verwende semantische Angaben mittels Mikroformaten, um den Inhalt für Maschinen leichter erfassbar zu machen.
- Das Theme muss Internet Explorer 9 oder neuer unterstützen (eine ältere Internet Explorer Version nutzen weniger als 5% des geneigten Lesers).
Vermutlich kommen da im Laufe der Zeit noch ein paar Punkte hinzu. Doch fangen wir an. Zunächst möchte ich eine neue index.html mit Unicode Kodierung in vim erstellen. Das geht über folgende Kommandos in vim:
[gist id=4533325]
Und anschließend noch schnell das Grundgerüst einer HTML5 Datei reingeschrieben:
[gist id=4534107]
An dieser Stelle wollte ich dann mittels tidy die Seite lokal validieren. Überrascht stellte ich fest, dass die offizielle tidy Version noch nicht HTML5 beherrscht. Es gibt aber einen tidy Fork mit HTML5 Unterstützung, den ich innerhalb weniger Minuten installieren konnte und der jetzt froh seine Arbeit in gewohnter Weise tut.
Das Ergebnis kann man hier bewundern, wobei es noch nicht wirklich beeindruckend ist.
Im Prinzip sieht es erst mal nach ordinärem HTML aus. Wirklich neu sind nur die verschiedenen Sections (Abschnitte) wie Header, Footer, Article, Section und Aside. Unklar ist mir momentan noch, ob man in jeder Section Überschriften wiederum mit h1 auszeichnen sollte oder ob man hier schon die richtigen Überschriftentags in der Größe verwendet, in der man sie später tatsächlich anzeigen lassen will?
Ansonsten ist die Angabe des Dokumententyps (doctype) wesentlich effizienter und man braucht auch nicht mehr mit verschiedensten Angaben zur Dateikodierung als Unicode rumspielen, sondern eine einfaches Metatag im HTML Header ist ausreichend. Auch kann man sich bei Einbindung von CSS Dateien die Angabe des Dateityps ersparen.
Das <aside> Element ist noch einer Erwähnung wert. Es ist eine Randnotiz zum Kontext, in dem es platziert wird. Wird es zum Beispiel innerhalb eines Artikels verwendet, ist es wie eine kleine Infobox, die am Rand des Artikels gedruckt wird. In meinem Beispiel bezieht sich die Randnotiz aber auf die gesamte Seite und ist damit eher einer Seitenleiste vergleichbar. Eine ausführliche Diskussion zur Verwendung von aside bietet wie immer das Netz.
Die Verwendung dieser neuen Elemente zur Strukturierung einer Seite ist ein großer Schritt vorwärts, da nun sowohl Suchmaschinen als auch Browser die Seitenstruktur inhaltlich erfassen können. Für eine Suchmaschine dürfte der Inhalt eines Artikelements für die Beurteilung der Seite interessanter sein, als reine Navigationselemente wie Header und Footer. Damit erübrigen sich dann hoffentlich auch HTML Tricks, um den Inhalt einer Seite an den Anfang der HTML Datei zu stellen. Auf der anderen Seite kann ein Browser oder ein anderes Werkzeug anhand dieser Angaben automatisch ein Inhaltsverzeichnis erstellen und so einen Überblick über einen längeren Artikel gewähren.
Der nächste Schritt scheint mir die Definition eines Grundlayouts zu sein, um zum Beispiel die Seitenleisten auch wirklich an der Seite anzuordnen. Vermutlich muss ich auch noch ein Javascript einbinden, damit sich die Seite überhaupt im Internet Explorer anzeigen lässt. Schauen wir mal, was da kommt.
Aber vielleicht kann ja der geneigte Leser bereits einige der aufgeworfenen Fragen klären oder mir einen Tipp geben, wie ich besser weitermachen sollte. Bin gespannt auf Kommentare!
Und jetzt sind die Codebeispiele wieder da…
[…] ich gestern die Grundstruktur meiner Seite definiert habe, werde ich heute das grundsätzliche Layout umsetzen. Am Ende sollen zum Beispiel die beiden […]
Verzichtet du auf JS aus Lerngründen? Oder warum? Jetzt wo ich anfangs gut damit um gehen zu können sehe ich doch so viele praktische Einsatzmöglichkeiten…
Ich verzichte erst mal nur auf JavaScript, um mich zu zwingen, nach äquivalenten CSS3 Techniken zu suchen. Man kann heute so viel schon mit den Bordmitteln machen, dass man in vielen Fällen JavaScript gar nicht mehr benötigt.
Aber klar, wenn ich an einen Punkt komme, der JavaScript erfordert, werde ich es auch nutzen!