Über diese Seite



» Reloaded «

Endlich ist es so weit, meine kleine Website bekommt ihren, wie man auf Gut-neu-deutsch sagt, Relaunch. Eine gute Gelegenheit, mal ein bisschen was über die Seite zu erzählen und darüber was ich in der ganzen Zeit so gelernt habe.

Geschichtliches

Ich weiß, es gibt kaum etwas Langweiligeres als Familiengeschichten. Deshalb hier auch nur ganz kurz, versprochen. Registriert habe ich die Domain im Dezember 1999. Kann auch Januar 2000 gewesen sein, so ganz genau weiß ich es leider auch nicht mehr. Jedenfalls hab ich damals grade meinen Zivildienst gemacht und hatte ein bisschen Freizeit. Der Gedanke, Webinhalten der ganzen Welt zur Verfügung stellen zu können faszinierte mich. Und ich wollte meinen Namen im .de-Namespace gesichert haben. Zu der Zeit war ich noch mit 28800 bps per Analogmodem im Internet. Meine Webtechnologie-Kenntnisse beschränkten sich auf ein Studium der SelfHTML und meine Grafikkenntnisse auf MS-Paint. Entsprechend grottig sah die Seite aus.

Aber immerhin hatte ich Content: Ich hatte all das zusammengetragen, was ich in Vorbereitung von und am Anfang meiner Zivildienstzeit an Informationen gerne gehabt hätte: Wie läuft Musterung, Verteidigung, Jobsuche und wie viel Geld verdient man eigentlich?

Das erste Redesign bekam die Seite 2002. Für damalige Zeiten war das Design noch einigermaßen akzeptabel. Immerhin hatte ich ein paar hübsche Menugrafiken gebastelt und einige Tricks mit JavaScript entdeckt, die ich damals toll fand. Ja, die Seite hatte Frames. Damals hatten viele Seiten Frames.

Dummerweise kam ich nie dazu, die Seite mal zu aktualisieren. Und veraltete der Content immer mehr und die Seite wurde mir immer peinlicher. Mein Studium forderte halt so viel Zeit, dass ich einfach nicht dazu kam an der Seite zu arbeiten. Allerdings begann ich nebenbei PHP zu erlernen und damit kleinere Projekte zu scripten. Dabei machte ich am Anfang so ziemlich alles falsch was man falsch machen kann, aber schlechte Erfahrungen und aktive Lektüre zahlreicher Foren machte mir diese schnell bewusst (ich sage nur register_globals, SQL injections, XSS safety und viele mehr). Mit jedem neuen Projekt lernte man dazu und der Code wurde jedes Mal etwas sauberer.

Es sollte noch bis 2008 dauern, dass ich endlich mal dazu komme, die Domain komplett neu aufzusetzen. Und für diesen Relaunch sollte natürlich alles perfekt sein. Also habe ich mich mit einigem befasst, was ich hier in Form von Tipps einfach noch mal zusammentragen möchte.

Semantisches HTML

Meine erste Website war mit Hilfe von Frames realisiert. Ganz einfaches Prinzip: Ein Navigationsframe links, Content rechts. Der Vorteil ist, dass Navigation und Content in separaten Files liegen und sich so die Navigation beispielsweise schnell austauschen lässt. Großer Nachteil: Deeplinking und bookmarken von Unterseiten sind nur über Umwege möglich. Und irgendwie wirkt es auch einfach veraltet. Zu statisch, nicht für ein nahtloses Design geeignet.

Also war ich beim zweiten Projekt schlauer und setzte auf PHP für dynamische Navigation. Ein PHP-Script, was die Navigation darstellt und auf jede Seite per include eingebunden wird. So weit nichts dran auszusetzen, doch wie Navigation und Content anordnen? Na in einer Tabelle natürlich. Die Geburtsstunde meines ersten Tabellendesigns. Eins vorneweg, natürlich kann man mit Tabellen nahezu beliebig komplexe Designs machen, in dem man sie einfach beliebig oft verschachtelt und die entsprechenden Teile mit Hintergrundgrafiken versieht. Im Ergebnis bekommt man allerdings eine sehr komplexe Dokumentenstruktur. Und wenn man in der siebten Verschachtelungsebene ein <td> vergessen hat, dann wird es echt schwierig, das zu finden. Aber das ist nicht mal das Problem. Der Hauptnachteil von Tabellendesigns ist ein anderer: Schon mal ein Tabellendesign in einem Textbrowser betrachtet? Oder auf einem PDA / Mobiltelefon, was aus Platzgründen die Website verkleinern muss? Oder mal geschaut, was ein Screenreader für blinde Surfer aus der Seite machen würde? Natürlich funktioniert ein <td style="background-image:grafik1.gif"> aber was bedeutet es? Das kann nur wissen, wer grafik1.gif sehen kann.

Und da kommt der ganz große Vorteil von semantischem HTML. Bei semantischem HTML gebe ich nicht vor, wie ein Teil des Dokumentes aussehen soll, sondern was er bedeuten soll. Einen Formatierungsvorschlag liefere ich zusätzlich mit einem Cascading Style Sheet (CSS). Dadurch erreiche ich eine fast vollständige Trennung von Struktur (HTML) und Design (CSS) der Seite. So sehe ich CSS, es ist nur ein Vorschlag, wie ich mir die Struktur vorstellen würde, aber der Vorschlag darf nicht bindend sein.

Ich war wirklich überrascht, wie mächtig die Möglichkeiten mittlerweile sind, mit CSS Dokumente zu formatieren. Es ist mir tatsächlich gelungen, für diese Seite fast vollständig semantisches HTML zu notieren. Um das zu verdeutlichen, schaue man sich nur mal den Quelltext an: Obwohl die Seite ein grafisches Layout hat, findet sich im HTML fast keine direkt verlinkte Grafik und keine Formatierungsangabe. Ein kleiner Auszug:

  <body>
    <div id="content">
      <div id="nav"> 
         <ul>
           <li> Seite 1 </li>
           <li> Seite 2 </li>
           <li> Seite 3 </li>
         </ul>
      </div> 
      <div id="main"> 
        <h1> Der Seitentitel </h1>
        <p> Ein Absatz Text.
        </p>
      </div> 
    </div> 
  </body> 
  

Man sieht, wie jedes Element mit dem für seine Bedeutung zuständigen Tag notiert ist. Die Navigation ist ein Bereich (<div>) mit der eindeutigen ID "nav". Innerhalb dieser stellen die Links eine (unnummerierte) Liste (<ul>) dar; jeder Link ist ein Listenelement (<li>). Der Content ist ein Bereich mit der eindeutigen ID "main", innerhalb dessen der Seitentitel als Überschrift (<h1>) und der Text in Absätzen (<p>) notiert ist. Dass die Bereiche Hintergrundgrafiken haben sollen, die Listen Aufzählungszeichen bekommen und verschiedene Schriftarten und Schriftfarben Verwendung finden, ist ein Formatierungsvorschlag, den ich in einer einzelnen CSS-Datei notiert habe. Damit kann das komplette Design umgestaltet werden, indem man ausschließlich die CSS-Datei ersetzt. Das macht deutlich, wie gut Design und Inhalt der Seite voneinander getrennt sind. Und es gibt jedem Benutzer die Möglichkeit, die Seite so zu betrachten, wie er es möchte, sei es wegen individuellem Geschmack oder wegen eingeschränkter Möglichkeiten (Endgerät, Sehfähigkeit).

Ein guter Test für semantisches HTML ist, es mal "ohne Design" anzusehen, die CSS-Datei also einfach mal wegzulassen. Ich habe dazu mal einen Demonstrationslink vorbereitet:

Man sieht, wie man selbst in der reinen Textdarstellung noch bequem navigieren und den Inhalt lesen kann. All dies wird ermöglicht von semantischem HTML.

Valides HTML

Semantisches HTML hat noch einen Vorteil: Durch die ausschließliche Notation von Strukturelementen ohne Formatierungs- und Ausrichtungseigenschaften, ist es sehr einfach w3c-valides Markup zu bekommen. Man muss nur auf die Verschachtelungsregeln achten (welches Element darf innerhalb welches anderen stehen) und natürlich Schreibfehler korrigieren. Ich habe alle Seiten durch den w3c-Validator gejagt und immer HTML 4.01 Scrict valides Markup bestätigt bekommen. Und dazu musste ich mich gar nicht besonders anstrengen, es kam fast automatisch zusammen mit dem semantischen HTML.

Traffic

Noch einen Vorteil von semantischem HTML würde ich gerne erwähnen: Den Traffic. Wenn man mal die Dateigröße der dynamisch erzeugten HTML-Seiten betrachtet, wird man feststellen, dass sie sehr klein sind. Durch die Trennung von Struktur und Design wird in der HTML-Seite wenig "Overhead" erzeugt: Der wesentliche Teil des Markups ist der Text den man transportieren möchte. Für diese Seite hier sind das gerade mal so um die 2 Kilobyte. Da der Browser das Stylesheet nicht jedes Mal nachlädt entsteht so insgesamt weniger Traffic. Für mich ist das zwar kein schlagendes Argument, da ich ja nicht viele Pageimpressions habe, aber für große Webprojekte kann das ein echter Kostenfaktor sein.

Design

Über Geschmack lässt sich ja bekanntlich nicht streiten. So ist es wohl auch mit dieser Seite. Ob sie nun schön geworden ist oder nicht, keine Ahnung. Schönheit liegt im Auge des Betrachters. Fakt ist: Es ist von mir. So wie die ganze Seite hier. Jedes Script ist in jedem Zeichen von Hand gesetzt und ebenso ist nahezu jede Grafik selbst gemacht. Und dafür, dass ich sowas eigentlich gar nicht kann, bin ich mit meinem Ergebnis zufrieden.

Fakt ist auch: Durch die strikte Trennung von Design und Struktur ist das Design sehr leicht austauschbar. Also, falls sich jemand berufen fühlt, ein passendes Design zu machen - Ich binde es gerne ein. Passend bedeutet: Keine Markups, nur Grafiken und eine Style-Datei. Über einen CSS-Selektor lässt sich dass ja dann leicht umschalten.

Wenn man Strukturelemente möglichst gut in ihrer Struktur kennzeichnet, hat das auch den Vorteil, dass man sich die Formatierung später noch überlegen kann. Zum Beispiel habe ich bei Links drei verschiedene Kategorien getrennt: Interne Links: Linken zu Unterseiten dieser Domain, Externe Links: Linken zu externen Seiten (class="ext") und Emaillinks: Verlinkte Emailadressen (class="mail"). Vom CSS wird im Moment für die letzten beiden Klassen eine Grafik vorne angestellt, um diese zu kennzeichnen. So weiß der Surfer, ob der Link ihn auf eine externe Seite bringen wird oder nicht.

Das Design der Grafik gefällt mir allerdings noch nicht richtig (Vorschläge bitte zu mir!). Falls ich nun mal ein besseres habe, muss ich nur die CSS-Datei verändern und schon sind alle Links umgewandelt. Das ist das, was mir an semantischem HTML so gefällt.

484288 PI