Die wirklich nützliche HTML5-Kochplatte
Wer heute anfängt, Webseiten ground up zu erstellen, muss, um solche Seiten in die Profiliga zu bringen, eigentlich viel mehr berücksichtigen, als sich ein normaler Mensch merken kann. Die meisten Projekte entstehen denn auch aus Versatzstücken früherer Projekte. So fließt zunehmende Erfahrung in jedes neue Projekt mit ein. Dazu kommen Frameworks oder Libraries für CSS, JavaScript und einiges mehr. Doch wie wäre es, eine Art Basis-Set zu haben, in dem bereits ein Maximum an Erahrung drin steckt? Golem hat heute im Artikel Blaupause für moderne Webseiten auf ein solches Basis-Set verwiesen:
Die HTML5 Boilerplate (boilerplate steht für Kessel- oder Kochplatte, wird aber häufiger übertragen verwendet, etwa für Textbaustein oder Standardklausel) wurde von Paul Irish und Divya Manian entwickelt. Das als ZIP-Archiv downloadbare Set besteht aus ganz unterschiedlichen Ressourcen:
- Eine HTML5-index.html für die Startseite. Gewissermaßen eine Beispielwebseite ohne Inhalt. Jedoch fix und fertig mit allen wirklich praxisrelevanten Kopfdaten, sowie mit Anzeigebereichen für Header, Hauptinhalt und Footer. Eingebunden werden dabei auch einige Scripts und Stylesheets, die ebenfalls zum Set-Umfang gehören.
- Einem Standard-Stylesheet, das einen sogenannten CSS-Resetter beinhaltet - nämlich den Resetter von html5doctor.com (Eric Meyer's Reset Reloaded + HTML5 baseline). Das Stylesheet sorgt unter anderem dafür, dass die neuen HTML5-Strukturelemente wie
article,section,asideusw. ein Browser-CSS erhalten. Etliche Details, etwa zur optimierten Positionierung von Radiobuttons und Checkboxen, ein paar nützliche CSS-Klassen und ein paar (aber nicht viele) CSS-Hacks für veraltete Browser, bringt das Stylesheet ebenfalls mit. - Einem Extra-Stylesheet für Handheld-Geräte, das beispielsweise das Floaten (Nebeneinanderliegen) von Inhalten auf kleinen Displays bewirkt.
- Einem leeren Standard-Script für eigene Zwecke.
- Der allseits beliebten und vielerorts bewährten jQuery JavaScript Library (momentan: v1.4.2).
- Der leistungsfähigen Modernizr-JavaScript-Bibliothek. Diese enthält Erkennungstests für HTML5- und CSS3-Features und erlaubt es, solche Features abhängig davon zu nutzen, ob ein Browser damit klar kommt oder nicht.
- Einem Script, das den MS IE 6 befähigt, PNG-Grafiken auch als Background-Grafiken anzuzeigen.
- Einer .htaccess-Datei, die man, wenn man selber keinen Zugriff auf die Konfiguration eines Apache-Webservers hat, ins Startverzeichnis des eigenen Webangebots mit ablegen sollte. Wenn die Webseiten von einem Apache Webserver „serviert“ werden, greifen die Einstellungen der .htaccess-Datei. Dazu gehören vor allem performance-steigernde Angaben. So wird beispielsweise veranlasst, dass die Scriptbibliotheken im Cache-Speicher vorgehalten werden, oder dass Inhalte wenn möglich gzip-komprimiert übertragen werden.
- Ein selbst gestaltbares 404-Error-Dokument, das in der zuvor erwähnten .htaccess-Datei als Dokument für den Fall, dass angeforderte Inhalte vom Server nicht gefunden werden können, im Browser angezeigt wird.
- Eine einfache robots.txt für Suchmaschinen-Robots.
- Weiteren Dateien für Tests und Diagnosezwecke.
Selbstverständlich lassen sich viele der HTML5-Boilerplate-Bestandteile auch in Verbindung mit dynamisch generierten Webseiten verwenden. Es muss auch nicht immer alles verwendet werden, sondern eben das, was man braucht. Alles in allem jedenfalls ein geballtes Stück Web-Intelligenz, und eine gute Basis für flotte, zeitgemäße Websites.
