Wenn man im Standard-Theme eine Kategorie auswählt werden dort alle Beiträge aufgelistet, die sich in dieser Kategorie befinden. Oftmals ist dies nicht gewünscht – gerade wenn man WordPress-Artikel als CMS nutzen möchte. Folgender Ansatz bietet eine einfache Möglichkeit eine Liste der Unterkategorien anzeigen zu lassen – mit WP 2.9 getestet.

Die folgenden Arbeiten werden anhand des Kubrick-Themes vorgestellt. Dein Theme findest du im Verzeichnis wp-content/themes. Dort solltest du in absteigender Reihenfolge eine dieser drei Dateien vornehmen:

• category.php
• archive.php
• index.php

Nun machen wir uns einmal grundlegend mit dem Theme vertraut. Ein wichtiger Bestandteil von WordPress ist die “Loop“. Diese könnte in etwa so aussehen:

< ?php if (have_posts()) : ?>
…
< ?php while (have_posts()) : the_post(); ?>

…< ?php the_content() ?>…

< ?php endwhile; ?>
…
< ?php endif; ?>

Die Loop wirft die Beiträge aus – dies soll nur geschehen wenn es keine Unterkategorie gibt. Es muss also eine Funktion her, die anhand der aufgerufenen Kategorie überprüft ob es eine Unterkategorie dazu gibt. Diese Aufgabe erfüllt folgende Funktion:

function subcategory_exists($catID) {
global $wpdb;
$abfrage = "SELECT parent FROM $wpdb->term_taxonomy WHERE parent = ".$catID;
$result = $wpdb->get_results($abfrage);
if (empty($result)) {return false;} else {return true;}
}

Diese Funktion wird in die functions.php im Theme-Verzeichnis eingetragen. Sie wirft anschaulich ein “Ja” zurück, wenn eine Unterkategorie existiert. Und genau in diesem Fall soll die Loop nicht ausgeführt werden, sondern eine Liste mit den verbleibenden Unterkategorien ausgegeben werden.

Nun kümmern wir uns um den Rest. Je nach Theme wird eine der oben genannten drei Dateien bearbeitet. Im Kubrick-Theme ist das die archive.php. Wenn eine Unterkategorie existiert wollen wir ein Menü mit den verbleibenden Unterkategorien einfügen und es sollen keine Beiträge ausgegeben werden. Kümmern wir uns zunächst um das erstere:

if (is_category()) { ?>
		<h2 class="pagetitle">Archive der Kategorie < ?php single_cat_title(); ?></h2>

< ?php 
if (subcategory_exists($cat)) {
echo  "<ul>";
wp_list_categories('child_of='.$cat.'&title_li=');
echo "";
} ?>
…

Der Einsatz der Funktion subcategory_exists ist klar. Die übergebene Variable $cat enthält die ID der aktuellen Kategorie. Die Loop wird nun folgendermaßen ergänzt:

< ?php while (have_posts()) : the_post(); ?>
		< ?php if (!(subcategory_exists($cat))) { ?>
		<div <?php post_class(); ?>>
…
< ?php the_content() ?>
…
< ?php } ?>
< ?php endwhile; ?>
</div>

Folglich werden Beiträge ausgegeben, wenn keine Unterkategorie existiert. Somit haben wir auch alles erreicht, was wir wollten.

Vorsicht: Dadurch sind Artikel, die in einer Oberkategorie liegen, für den Besucher nicht sichtbar. Trotzdem kann man diese über die direkte URL aufrufen – sofern diese bekannt ist.

Wenn man seinen Webhoster wechselt, möchte man in der Regel auch mit dem Statistik-Tool umziehen. Daher hier eine kurze Erklärung wie dies mit Piwik funktioniert.

Dazu wird folgendes benötigt:

• FTP-Zugriff mit Client
• phpMyAdmin

Zuerst kümmern wir uns um ein Backup der Datenbank. Ich beschreibe hier nur den Weg für phpMyAdmin – andere Datenbank-Tools funktionieren natürlich auch. Zuerst wird die entsprechende Datenbank in der linken Spalte ausgewählt. Dann reicht ein Klick auf “Exportieren” und mit OK bestätigen. Wenn gewünscht können hier noch Voreinstellungen gemacht werden – ist aber prinzipiell nicht nötig.

Nun sollte von Piwik die neueste Version heruntergeladen werden und in das entsprechende Verzeichnis auf dem neuen Webspace kopiert werden. Es ist keine Installation erforderlich! Die config/config.ini.php-Datei vom alten Webspace sollte nun erstmal in den gleichen Ordner auf dem neuen Webspace verschoben werden. Hier nehmen wir einige Einstellungen vor. Dazu die Datei mit einem geeigneten Editor öffnen und bearbeiten:

[superuser]
login = "Name"
password = "kryptische Ziffern"
email = "Email-Adresse"
salt = "kryptische Ziffern"

[database]
host = "localhost"
username = "Benutername"
password = "Passwort"
dbname = "Datenbankname"
tables_prefix = "piwik_"
adapter = "PDO_MYSQL"
port = 3306

Im ersten Block sollte nichts verändert werden. Hier sind die Zugangsdaten des Administrators angegeben. Der nächste Block bezieht sich auf die Datenbank. Hier nehmen wir nun die entsprechenden Veränderungen vor. Das Tabellenpräfix sollte behalten werden, da nun gleich das Backup auf dem neuen Server eingespielt wird.

Also phpMyAdmin öffnen und via “Importieren” die entsprechende Datei hochladen. Hier sollte man aber sagen, dass es sowohl beim Backup erstellen als auch beim Importieren zu Schwierigkeiten kommen kann, wenn die Datei zu groß ist. Dann müsste diese vorher in kleine Stücke zerlegt werden.

Somit sind wir auch fertig. Zum Abschluss aber noch ein Hinweis: Piwik selbst ist nicht an eine bestimmte URL gebunden – allerdings der Tracking Code schon. Daher Domain wieder richtig setzen oder Tracking Code im Backend aktualisieren und in die Webseite neu einfügen.

Im Großen und Ganzen sollen hier zwei verschiedene Aspekte angesprochen werden, die dem Web Qualität geben. Jedoch ist dieses in der Tat schwieriger zu bewerkstelligen, da teilweise der “Autor” eines Textes keinen direkten Einfluss darauf hat.

Die Syntax im Web – ein Muss!

Unter der Syntax versteht man salopp gesagt, die Grammatik des Quelltextes. Um über dessen Richtigkeit eine Aussage treffen zu können, muss man zunächst erahnen um welche “Sprache” es sich handelt. Dies ist leicht vergleichbar mit der Wirklichkeit: Deutsch und Englisch sind beides Sprachen, jedoch folgen sie verschiedenen Richtlinien bzw. Grammatiken. Demnach ist der erste Schritt zu einer syntaktischen Webseite die Dokumenttypdeklaration anzugeben und somit die Sprache festzulegen. Beispielsweise könnte das <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> oder auch der wesentlich einfachere Doctype für HTML5 sein: <!doctype html>. Hier freut sich natürlich der Webentwickler, dass er sich nun endlich mal diese Zeile merken kann.

Weiterhin zur Syntax lässt sich nun nicht mehr viel sagen. Die üblichen Fehler können mit einem Validierungs-Tool überprüft und bereinigt werden. Eine Validierung der Webseite ist keine Pflicht, sollte aber durchaus als Kriterium für eine gute Webseite angesehen werden. Wobei man auch sagen muss, dass durch die Erzeugung dynamischen Inhalts (WYSIWYG-Editoren) leicht mal ein solcher Fehler sich einschleichen kann. Webmaster freuen sich aber in der Regel über einen solchen Hinweis.

Am Rande sei bemerkt, dass eine Validierung der CSS-Datei ebenfalls möglich ist, allerdings nicht unbedingt notwendig. Die richtige Auszeichnung des Inhalts sollte eine höhere Priorität haben als die Richtigkeit einer Formatierungsdatei.

Die Semantik – Streben nach Vollendung

Das ganze führt nun schließlich zum wichtigeren Teil, der in der Vergangenheit oft vernachlässigt wurde und nun seit einiger Zeit mehr im Vordergrund steht. Semantik bedeutet in diesem Sinne, dass die durch HTML vollzogene Auszeichnung des Inhalts logisch ist. Das Wort “logisch” beinhaltet auch schon einen Knackpunkt: Nicht immer ist man sich so einig, was semantisch richtig ist und was nicht. Semantik lässt sich nur sehr schwer in ein starres Konzept pressen, indem jedes Individualproblem ausreichend behandelt wird. Daher ist bei der Gestaltung einer Webseite auch nicht die Syntax, sondern die Semantik die höhere Hürde.

Aber wie genau kann man jetzt Semantik verstehen – dazu ein Ausblick: Man könnte so herangehen und zunächst festhalten, dass HTML eine Sprache zur Auszeichnung von Inhalt ist. Als Inhalt betrachtet man jeweils eine einzelne Seite. Diese Inhalte haben in der Regel eine logische Bedeutung und diese wird mit HTML untermauert. Fehler, die durch falsche Auszeichnung entstehen, können also grammatikalisch richtig sein, aber die falsche Bedeutung vermittlen.

Als Beispiel könnte man sich folgendes vorstellen: Die Kommentare eines Artikels werden zu einem blockquote zusammengefasst. Allerdings entspricht dies nicht einem üblichen Zitat – und hat somit eine falsche Bedeutung.

Semantik als Diskussionsstoff

Bei der semantischen Betrachtung gibt es im Gegensatz zur syntaktischen Richtigkeit keine eindeutigen Regelungen. Vielmehr muss der Mensch die Aufgabe übernehmen und logische Zusammenhänge auszeichnen. Dabei sollte klar sein, dass man sich nicht immer einig ist, wenn es um die Umsetzung geht. Daher möchte ich im Folgendem ein paar verschiedene Beispiele erläutern. Viele davon entstanden eng im Zusammenhang mit dem Entwurf von HTML5.

• In HTML gibt es eine Unterscheidung zwischen logischen und physikalischen Ausdrücken. Vereinfacht kann man sagen, dass logische Ausdrücke dem Inhaltsabschnitt eine gewisse Bedeutung zukommen lassen während die physischen Ausdrücke eher der Darstellungsverbesserung dienen. So wurde das b-Element (fett) auf die Abschuss-Liste gesetzt, da es “keinerlei” Bedeutung hat und durch das strong-Tag nahezu ersetzt wird. Bei einer einfachen Betrachtung könnte man darauf schließen, dass dies die richtige Entscheidung sei. HTML5 sieht aber eine Wiederbelebung des b-Tags vor. b kennzeichnet äußerlich eine Textstelle, da man diese wirklich als fett kennzeichnen möchte und keine höhere Bedeutung hat. Als Anwendungsfall wäre ein Lexika-Artikel zu nennen. Der zu erläuternde Begriff verdient eine optische Hervorhebung im Text – allerdings wird diesem Wort keine Betonung gegeben. Auch wenn man nun mit “Trennung von Inhalt und Design” gegen das Fett argumentieren will, so hat dies durchaus seine Berechtigung.

• Eine weitere Sache, die eng mit der HTML5 Einführung zu tun hat sind die beiden Elemente span (Inline) und div (Block). Die Bedeutung dieser Elemente ist “leer”, wenn man das so sagen darf. Prinzipiell könnten diese beiden Tags ausreichen um eine Webseite zu gestalten (abgesehen von input/textarea). HTML-Dokumente basieren grundlegend auf solchen div-span-Konstrukten (“Box-Layout”). Allerdings geben diese dem Dokument keine logische Struktur. Abhilfe schaffen da die neuen HTML5 Elemente wie header, footer, aside,…

• Eine der wichtigsten Funktionen einer Webseite nimmt die Navigation ein. Überlicherweise wird diese als ungeordnete Liste dargestellt. Das hat auch seine Berechtigung. Zum einen ist eine Liste angebracht, da sie die verschiedenen Menüpunkte gruppiert und eine “Auswahl” lässt. Ungeordnet daher, da man ansonsten mit einer geordneten Liste den verschiedenen Punkten unterschiedliche Prioritäten zuweist. Das haben sie aber nicht, denn beispielsweise ist das Impressum genauso wichtig wie die Startseite. Ebenen können stattdessen mit Verschachtelungen der ungeordneten Liste dargestellt werden.

• Die übliche Überschriftenstruktur reicht bis zur sechsten Ebene – danach ist Schluss – zumindest bei HTML4 und XHTML1.0. HTML5 stellt hier einen Ausweg bereit, welcher in diesem Artikel erklärt wird.

Es gibt noch mehr an Diskussionsstoff, was hier aber nun letztlich den Rahmen sprengen würde.

Die 42 Merkmale woran man fachliche #Inkompetenz im #Web erkennt – und dies ist einer davon!

Schon vor einiger Zeit habe ich diesen Tweet verfasst – und nun möchte ich ihn noch einmal aufgreifen und über die Qualität des Webs philosophieren.

Im Grunde genommen geht es hier um ein Phänomen, mit dem man täglich konfrontiert wird. Jeden Tag werde ich mit gewissen Tweets und Feeds bombardiert, die prinzipiell dem Schema folgen: Eine Ansammlung von Tipps & Tricks, Merkmalen, Plugins, Ideen, Websites, etc. … kombiniert mit einer Zahl allem voran. Der Titel suggeriert in den meisten Fällen eine enorme Qualität – zumindest lassen das Adjektive wie “wichtigsten”, “ultimativsten”, “schönsten” … verheißen. Glücklicherweise lässt sich der Superlativ nicht mehr steigern!

Jetzt muss man sich unweigerlich zwei Fragen stellen: [1] Warum stößt man an jeder Ecke auf solche Blog-Titel? und [2] Was für eine Qualität steckt dahinter? Auf beide Frage möchte ich nun im Folgenden eingehen.

Widmen wir uns der ersten Frage, die man wesentlich leichter beantworten kann: Zunächst einmal kann man ruhig einen Blick auf bekannte Blogs werfen, die genau dieses Schema nutzen. Auffällig zeigt sich da insbesondere das Smashing Magazine (en.), welches ja durchaus eine Reputation genießt. Ein solcher Artikel ist dann wie das nebenstehende Bild zeigt aufgebaut. Dies hat neben den suchmaschinen-technischen Vorteilen auch einen klaren Vorteil für den Leser: Übersichtlichkeit.

Doch Übersichtlichkeit und Suchmaschinen-Optimierung sind keine Kriterien für gute Inhalte. Mit der Zeit bekommt man ein Gespür für solche Ansammlungen und man weiß genau was sich dahinter verbirgt. Oftmals ist das weniger als gedacht. Das liegt zum einen daran, dass solche Artikel im Wesentlichen unvollständig sind. “Die 12 besten Tools wie man sein Leben besser organisiert” sind nunmal nicht die Antwort auf die Frage “Wie organisiere ich mein Leben?” – sie können zwar durchaus hilfreich sein, aber keinesfalls decken sie jedmögliche Situation ab. Der Kritikpunkt ist hier nicht unbedingt die Unvollständigkeit – sondern die Suggerierung einer Vollständigkeit (siehe Superlativ!).
Beim Durchlesen einiger solcher Artikel hat man auch zunehmend das Gefühl, es handle sich lediglich um eine Linksammlung. Vielfach wird auf andere Artikel verwiesen und lediglich noch ein Codeschnipsel dazugefügt und ein entsprechendes Bild gesucht. Das mag ja für den ein oder anderen nützlich sein – allerdings hat das wenig mit Eigenarbeit und Qualität zu tun – denn der ursprüngliche Artikel besteht ja bereits und wurde von einer anderen Person verfasst.

Was ich nun letztlich damit sagen will (oder auch “Fazit” genannt): Ich möchte und erwarte von jedem Blog eine gewisse Qualität. Das heißt nicht, dass jedes Wort eine Glanzleistung sein muss und auch bestimmt nicht, dass man keine Ansammlungen posten darf. Aber es wäre begrüßenswerter, wenn ein Artikel auch eine gewisse Eigenleistung erbringt und nicht nur leere (wiederholte) Phrasen beinhaltet.

Zum Abschluss möchte ich hier noch auf zwei Blogs verweisen, die genau der Qualität entsprechen, die ich so mag und damit auch deren Arbeit honorieren:

• bueltge.de [by:ltge.de]
• playground.ebiene.de – Sergej Müller

In der Zwischenzeit war ich aber auch nicht ganz untätig. So habe ich mich etwas in die Google Chart API eingelesen und versucht daraus ein WordPress Plugin zu schreiben, welches das zugehörige Bild abspeichert. Damit bin ich dank meiner geringen PHP-Kenntnisse nicht sehr weit gekommen. Aber es könnte noch etwas werden.

Zusätzlich arbeite ich nach wie vor an dem WordPress Alpha Theme. Hier steht schon wieder eine ToDo-Liste an. Weiterhin suche ich aber freiwillige “Tester”, welche auch gerne mal ein HTML5 Theme benutzen möchten.

Zuletzt habe ich im Portfolio Bereich wieder ein neues Projekt hinzugefügt, welches schon seit einiger Zeit existiert, aber bisher noch keine ordentliche HTML-Struktur hatte. Dies habe ich nun ausgebessert und online gestellt.

Dies war es dann auch wieder im Großen und Ganzen. Ich nehme mir wieder vor, etwas “blogfreudiger” zu werden und verrate noch nicht, was neben dem Alpha Theme noch für die Zukunft ansteht.

Das besondere bei dem Theme ist der Einsatz von HTML5 und ein wenig CSS3. Das Design ist relativ schlicht gehalten. Bevor es in den Portfolio Bereich kommt, sollte es aber noch ausgiebig getestet werden. Daher freue ich mich, wenn sich ein paar Leute bereit erkären, dieses Theme genauer unter die Lupe zu nehmen!

→ Download Alpha Theme

Anregungen, Kritik und Bugs nehme ich gerne an. Entweder direkt als Kommentar oder über den Kontakt-Bereich.

In letzter Zeit erfasst die Piwik Statistik immer wieder Besucher, die angeblich über die neue Suchmaschine Bing auf meine Webseite gelangen. Dabei handelt es sich um banale Suchwörter wie etwa “Portfolio” oder “WordPress”. Da gehört meine Seite keinesfalls auf die ersten Platzierungen und trotzdem gibt es diese “Besucher”. Anscheinend wird als Betriebssystem der Windows Server 2003 genutzt und der Browser müsste der Internet Explorer 6 sein. Auflösung beträgt 800×600 Pixel. Jetzt frage ich mich schon, was das soll.

Vor einigen Monaten hatte ich so ein ähnliches Phänomen beobachtet. Allerdings ging es dabei um die LiveSearch-Suche, die ja letztlich durch Bing ersetzt wurde. Diese Unregelmäßigkeit ist nicht nur mir aufgefallen!

Was mich noch mehr stört, ist, dass Piwik diese Daten aufzeichnet und Google Analytics wohl nichts mitbekommt. Wem das letztlich zu Gute zu sprechen ist, bleibt fraglich.

Hat jemand auch solche merkwürdigen Einträge in der Statistik über die Bing-Suche? Und wer benutzt eigentlich einen Windows Server 2003 als Betriebssystem und das auch noch mit IE6?

Update: Gerade eben kam ein Piwik Update rein, was unter anderem den Bing Spambot Bug beheben sollte. Damit dürfte das Problem gelöst sein. Danke an die Kommentatoren.

1. Schon seit einiger Zeit ist der Portfolio-Bereich online. Dazu gibt es dann auch nicht mehr zu sagen, einfach mal schauen, was es bisher gibt. Das ist noch nicht sehr viel. Es kommen aber demnächst noch ein paar neue Sachen hinzu.
2. Ich twittere! Bisher habe ich diese Form des Micro-Bloggings immer abgelehnt. Doch jetzt habe ich mich doch dafür entschieden und man darf mir somit gerne “followen“.

Die Zukunft?

Ein Blick in die Zukunft werde ich jetzt auch schon verraten. Ich werde demnächst die Startseite etwas umgestalten. Nicht zuletzt, da sie einfach nicht das hergibt, was sie soll: zu unaufgeräumt, gibt kein Überblick und twitterlos!

1. Teil: Das HTML 5 Markup
2. Teil: Erstellung des Stylesheets
3. Teil: HTML 5 Darstellung im IE

Das IE Problem: Darstellung unbekannter Elemente

Wie man bei Peter Kröner nachlesen kann, legen die Internet Explorer 6-8 unbekannte Elemente falsch aus. Aus

<aside>
<h3>Sidebar</h3>
<p>Paragraph...</p>
</aside>

wird mit dem IE:

<aside></aside>
<h3>Sidebar</h3>
<p>Paragraph...</p>
</aside><//aside>

Das schwerwiegende Problem, was sich dadurch ergibt ist, dass Inhalte nicht mehr von den Tags umrandet werden und so schlecht zu formatieren sind.

Javascript Lösung

Die wohl einfachste Möglichkeit diese Problem zu beheben ist es, diese Elemente für den IE neu zu erzeugen. Das geht indem man folgenden Code einbaut:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Dieser sollte in den head Bereich, da der IE, bevor er die neuen Elemente zu Gesicht bekommt, wissen muss was zu tun ist.
Die html5.js- Datei lagert auf Google Code. Wem das nicht zusagt, kann sie natürlich selbst hosten. Mehr Infos zur Datei gibt es hier.

Ein Problem wäre bei diesem Ansatz die Deaktivierung von Javascript. Dadurch wird das ganze natürlich recht unnötig. Daher hier noch eine Ausweg-Möglichkeit.

CSS & Conditional Comments Lösung

Diese Möglichkeit erlaubt es speziell für den IE ausgerichtet ein Stylesheet zu erstellen. Der Nachteil ist der Mehraufwand, welcher dadurch entsteht. Jedoch kann man auch sagen, dass diese Version die Javascript-Lösung komplett ersetzt. In meinem Template kommen trotzdem beide Varianten zum Einsatz, da ich sie natürlich auch ausprobieren wollte!
Zuerst sollte man ein neues Stylesheet für den Internet Explorer anlegen und dieses in die Webseite einbinden. Wenn man eine Kombination aus der obigen Javascript-Version und dieser verwenden möchte, sollte man diese Zeile in die IE-Bedingung einfügen:

<noscript><link rel="stylesheet" href="ie.css" type="text/css" media="screen" /></noscript>

Nun greift der IE nur auf das Stylesheet zurück, wenn Javascript deaktiviert ist.

Um die ganzen Elemente wie header, section, aside und article anzusprechen, braucht man zusätzliche “Formatierungs-Elemente”. Diese fügt man entweder direkt ein.

<div id="header">
<header>
...
</header>
</div>

Auch möglich ist es das ganze noch in Conditional Comments zu packen. Dadurch lässt sich leichter unterscheiden, was zum IE gehört und was nicht und lässt sich dann auch leichter herausnehmen, wenn der IE neue Elemente unterstützt.

<!--[if IE]><div id="header"><![endif]-->
<header>
...
</header>
<!--[if IE]></div><![endif]-->

Nun lassen sich im ie.css diese zugefügten Elemente über ihre ID ansprechen. Statt der Formatierung des header-Tags wird nun die ID #header angesprochen und gleich formatiert.
Tipp: Statt um das section#wrap ein div zu spannen, reicht es aus, das body-Element dafür zu nutzen und statt des body-Elements das html-Element zu nutzen.

Weiterhin kann es vorkommen, dass man folgende Situation hat und das h2 formatieren möchte:

<div id=sidebar>
<aside>
  <header>
   <h2>...</h2>
</header>
...

Man könnte jetzt überlegen und den Fehler machen, das h2 so anzusprechen:

#sidebar > * > * > h2

Jedoch sollte man sich noch einmal daran erinnern, wie der IE das unbekannte Element umsetzen möchte:

<div id=sidebar>
<aside></aside>
  <header></header
   <h2>...</h2>
</header><//header>
...

Daraus ergibt sich, dass es keinen direkten Kindelemente gibt unter dem aside. Man muss daher wie folgt das h2 ansprechen:

#sidebar > * + * + h2

Mit diesen Hilfsmitteln kann man dann ein Stylesheet für IE optimieren. Damit sieht das Template auch im Internet Explorer (ab Version 7) korrekt aus.

1. Teil: Das HTML 5 Markup
2. Teil: Erstellung des Stylesheets
3. Teil: HTML 5 Darstellung im IE

Vorweg

Ich werde im Folgenden nicht auf alle Einzelheiten eingehen. Formatierungen der Absätze, Hyperlinks etc. sollten klar sein. Im Wesentlichen geht es um die generelle Struktur des Templates.
Zur Vereinfachung wird auf ein komplexes Reset des Stylesheets verzichtet und stattdessen mit folgendem gearbeitet:

* {margin:0; padding:0; border:0;}

Die HTML 5 Elemente mittels CSS ansprechen

Die neuen HTML 5 Tags werden wie gewohnt mit CSS angesprochen. Allerdings hat der Browser nicht – wie bei bekannten Tags – eine Vorstellung wie er sie darstellen soll. Daher sollte man erst einmal grundlegendes festlegen. So entsprechen die verwendeten neuen Elemente den Block-Elementen wie div oder blockquote.

section, aside, article, header, footer, nav {display:block;}

Breite festlegen und zentrieren

Das Ergebnis soll später wie auf folgendem Bild aussehen:

Ich habe mich dabei auf eine Breite von 960px festgelegt und den Inhalt des section-Tags mit der ID ‘wrap’ zentriert.

#wrap {
width:960px;
margin:0 auto;
overflow:hidden;
}

Das overflow:hidden sorgt letztlich dafür, dass ich später keine Probleme habe ‘floats’ innerhalb der section zu benutzen.

Formatierung des Dokumentkopfes

Der Kopf des Dokuments enthält das Logo und die Seitennavigation. Der header des wrap-section-Elements ist mithilfe des Kind-Selektors ansprechbar. Er bekommt eine feste Höhe und wird relativ positioniert, da das Logo innerhalb absolut positioniert wurde.

section#wrap > header {
width:100%;
height:100px;
position:relative;
}

Die Positionierung des Logos werde ich überspringen, da hier lediglich das Hyperlink-Element mit den nötigen Formatierungen ausgestattet wurde und das h1 schließlich ausgeblendet. Man erinnere sich daran, dass man mit HTML 5 Blockelemente innerhalb des a-Inlineelements haben darf.
Die Navigation nav innerhalb des headers soll die Seitennavigation werden. Die Positionierung erfolgt durch:

header > nav {
margin-left: 380px;
}

Formatierung der Sidebar

aside {
width:310px;
float:left;
margin:40px 0 0 0;
height:1%; }

Die Sidebar wird mittels “float” an den linken Rand des section#wrap gesetzt. Um etwas Abstand nach oben zu wahren wird mithilfe der Kurzschreibweise ein Außenabstand von 40px nach oben gesetzt.

Formatierund des Inhalts

Der Inhalt des Blogs wird wieder durch ein section-Tag gruppiert, welches wie folgt formatiert wurde:

#content {
width:580px;
margin:40px 0 0 380px;
}

Auch hier wird neben einer Breitenangabe der Außenabstand noch oben festgelegt. Zudem wird ein Außenabstand nach links integriert, damit die Sidebar nicht gestört wird!

Das header-Tag des Inhalts enthält genauso wie das header-Tag der Sidebar und wie die Seitennavigation im header semantische Inhalte, die vom Benutzer automatisch richtig aufgefasst werden, und somit mittels des Stylesheets ausgeblendet werden.

section > header h3, aside > header > h2, section > header > h2 {display:none;}

Die Formatierung des arictle-Tags legt im Großen und Ganze lediglich Schriftformatierungen fest und ist daher eher uninteressant.

Zusammengefasst

Die Formatierung der neuen HTML5 Elemente ist nicht anders zu handhaben wie vorher auch. Warum auch? – an den Cascading Stylesheets hat sich ja nichts geändert. Ein wesentlicher Punkt möchte ich nochmal erwähnen: Da der Browser keine Vorstellung hat wie er mit den neuen Elementen umzugehen hat, ist es sinnvoll festzulegen, ob es sich um ein Inline-Element oder ein Block-Element handelt.

Das komplette Stylesheet kann man sich hier anschauen. Der komplette Aufbau des Templates mit ein paar graphischen Elementen ist hier zu begutachten.