Letztens fragte man mich, wie das mit dem langsamen Nachladen der Bilder auf meiner Seite funktioniert. „Ganz einfach!“ antwortete ich. „Da schreibe ich mal ein paar Zeilen zu.“ Here we go:

Um die Bilder nachzuladen nutze ich ein Plugin für das Javascript-Framework jQuery. Das Plugin hört auf den schönen Namen Lazy Load und gibt es schon eine ganze Weile. Ich wundere mich ein wenig, dass es jetzt erst in Mode kommt. Grundidee des Plugins ist es gar nicht, die Bilder schön einblenden zu lassen. Eigentlich geht es darum, die Ladegeschwindigkeit der Seite beim ersten Laden zu erhöhen. Dazu werden zuerst nur die sichtbaren Bilder geladen und die weiteren Bilder dann beim scrollen.

Um das Plugin zu installieren sind nur wenige Schritte notwendig: Davon ausgehend, dass man jQuery bereits eingebunden hat, lädt man sich das Plugin schnell von der Lazy Load-Seite runter und packt es in den Ordner des eigenen WordPress-Themes. Anschließend bindet man die neue Datei dann mit folgender Code-Zeile in den Kopf der Seite (also in das head-Element).

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lazyload.js"></script>

Nun muss dem Script nur noch gesagt werden, welche Bilder eigentlich mit dem Effekt nachgeladen werden sollen. Bei mir sollen das alle großen Bilder in den Beiträgen sein. Da ich sonst alle Bilder im Layout per CSS eingebunden habe, kann ich das Plugin einfach auf dem img-Tag ansetzen.

 //Fauler Bildlader
if(!navigator.userAgent.toLowerCase().match('ipad')) {
  $("img").lazyload({effect : "fadeIn"});
}; 

Nun mag man sich wundern, was das if soll. Ganz einfach: Mir war aufgefallen, dass das iPad leider nicht mit dem Javascript zurechtkommt und statt der nachzuladenden Bildern nur das Fehlersymbol angezeigt wurde. Mit der kleinen Abfrage wird das Problem umgangen.

Für meinen Bedarf war es das dann auch schon. Auf der Plugin-Seite werden die weiteren Optionen des Plugins ausführlichst erklärt.

Im Rahmen der Neuausrichtung meiner Seite beschäftigte ich mich auch eingehend mit HTML5 und den damit neu gegebenen Möglichkeiten. Vorweg: HTML5 ist nach wie vor kein festgelegter Standard, sondern weiterhin in Entwicklung. Dennoch unterstützen moderne Browser auch heute schon viele Möglichkeiten, die HTML5 bietet. Einen interessanten Artikel über die Inhalte von HTML5 mit einer durchdachten Grafik hat Peter Kröner mit Was ist HTML5 und was nicht? Und was hätte der Kaiser dazu gesagt? veröffentlicht. Dieser bietet eine erste Übersicht mit der man sich dann leicht in die einzelnen Themen abtauchen kann.

Ich will mich nun erst einmal mit den neuen semantischen Möglichkeiten von HTML5 auseinandersetzen. „Semantisch“ will heißen, dass man versucht durch den Einsatz diverser HTML-Elemente den Inhalt einer Webseite zu strukturieren. Natürlich könnte man auch alle Inhalte rigoros div-Elemente packen. Das Ergebnis würde im Browser vermutlich gleich aussehen. Durch die Verwendung von semantisch korrekten Elementen, die für den jeweiligen Inhalt-Typ vorgesehen sind, macht man den Code aber auch lesbar. Und zwar nicht nur für einen selbst oder andere Menschen, sondern auch für Screenreader und Suchmaschinen. Insgesamt also eine gute Sache.

Bisher bot (X)HTML hier nur eine beschränkte Anzahl von Elementen an. Überschriften, Listen und Textabsätze wurden im wesentlichen abgedeckt. HTML5 geht nun einen Schritt weiter und bietet die Möglichkeit eine Seite komplett semantisch zu strukturieren. Es gibt nun Elemente für den Kopf einer Seite (header), die Navigation (nav), den Inhalt (section, article) und seinen logischen Aufbau und den Fuss (footer) einer Seite. Ohne diese nun all zu lange eingehen zu wollen, verweise ich auf den Artikel Structural Tags in HTML5 bei Ordered List. Der Artikel dort beschreibt jedes Element kurz und zeigt auch einen beispielhaften Quellcode.

Im neu zu bauenden Layout meiner Seite möchte ich am oberen Ende der Seite eine Navigationsleiste mit den neuen Kategorien haben. Danach der eigentliche Inhalt und dann schließlich eine Sidebar, die eigentlich mehr eine „Bottombar“ ist. Dementsprechend ergibt sich folgende Struktur im Code:

[html]
<!– der tag und ich = header.php –>
<!DOCTYPE html>
<html>
<head>
<meta charset=“UTF-8″>
<title>der tag und ich</title>
<link rel=“stylesheet“ type=“text/css“ href=“style.css“>
</head>
<body>
<header id=“header“>
<h1><a href=“#“>der tag und ich</a></h1>
</header>
<nav id=“nav“>
<ul>
<li><a href=“#“>Link 1</a></li>
<li><a href=“#“>Link 2</a></li>
<li><a href=“#“>Link 3</a></li>
<li><a href=“#“>Link 4</a></li>
</ul>
</nav>
<!– der tag und ich = index.php –>
<section>
<article>
<header>
<h2><a href=“#“>Die Überschrift eines Artikels</a></h2>
</header>
<section>
<p>Der Inhalt eines Artikels</p>
</section>
</article>
</section>
<!– der tag und ich = sidebar.php –>
<aside>
<p>Hier kommt die Sidebar hin</p>
</aside>
<!– der tag und ich = footer.php –>
<footer>
<p>Der Footer der Seite mit einigen wichtigen Links.</p>
</footer>
</body>
</html>
[/html]

In diese Grundstruktur kommt nun der erste WordPress-Code, damit die Inhalte ausgegeben werden können. Anschließend werden die gewünschten zusätzlichen Informationen eingebaut, wie etwa die Kommentaranzahl pro Beitrag oder das Veröffentlichungsdatum. Und natürlich das ganze drumherum, wie etwa Meta-Tags und externe Dateien die eingebunden werden wollen.

Ein kleiner Tipp am Rande: Nicht alle Browser unterstützen die neuen HTML-Elemente bereits, gerendert werden sie aber schon irgendwie. Damit das alles aber auch so tut wie es soll, setzt der kluge Webentwickler in einem Rundumschlag alle neuen Elemente im CSS der Seite manuell auf display: block;.

[css]
/* Nun bringen wir den HTML5-Tags erst mal ordentliches Benehmen bei */
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
[/css]

So sind die Elemente nämlich spezifiziert, werden aber unter anderem im Internet Explorer mangels Kenntnis als inline gerendert.