Fabian Letscher – Blog + Portfolio

Die T-Online Navigationshilfe

Im Grunde ist sie ja keinen Artikel Wert, doch genau deshalb bekommt sie einen: Die T-Online Navigationshilfe. Seit einiger Zeit schon stoße ich beim Eingeben einer falschen Adresse immer wieder auf das gleiche Bild. In meiner unüberlegten Handlung habe ich dieses Fenster ignoriert und die Adresse berichtigt. Erst durch einen Hinweis wurde mir wirklich bewusst, warum diese Seite erscheint, statt der einfachen Meldung, dass die aufgerufene Webseite nicht existiert.

Die Navigationshilfe soll eigentlich passende Vorschläge liefern für die falsch eingegebene Adresse. Dies tut sie aber nicht. Glücklicherweise lässt sie sich ausschalten. Auf der Seite sieht man schon einen Link für das Kundencenter, dem folgen, anmelden und ausschalten. Man bekommt den Hinweis, dass dies erst nach einer erneuten Einwahl ins Internet möglich ist. Da jedoch mein Router ständig mit dem Internet verbunden ist, musste ich die Konfiguration nochmal neu laden. Jetzt surfe ich wieder Navigationslos durchs Internet und fühle mich gut dabei die alt bewährte “Adresse nicht gefunden”-Seite zu bekommen.

CSS Komprimierer im Test

Gerade bei der Erstellung des Stylesheets für dieses WP-Theme habe ich festgestellt, dass mein Quelltext sehr aufgebläht ist. Durch Zufall bin ich letztlich auf diverse Webseiten gestoßen, die anbieten den CSS-Code zu komprimieren.
Im Folgenden habe ich nun mein Stylesheet dazu verwendet drei solcher CSS-Komprimierer zu testen. Zudem habe ich selbst einige Veränderungen an dem Stylesheet vorgenommen und werde nun die Ergebnisse präsentieren. In der folgenden Tabelle ist die Dateigröße vor der Komprimierung nicht aufgeführt. Sie beträgt 12283 Bytes. Die ursprüngliche Datei kann man sich hier ansehen.

Fazit

In der Tabelle erkennt man deutlich, dass eine Optimierung des Stylesheets sich als schwierig erweist. Die drei benutzen “Optimierer” bieten drei verschiedene Ansätze an. Davon vergrößert einer sogar die Datei. Grundlegend hängt diese Optimierung stark vom Aufbau der Datei ab, kann also immer verschiedene Ergebnisse erzielen. Ich würde daher empfehlen, erst mal selbst über den eigenen Code zu schauen. Vieles kann man erst mal selbst verbessern, immerhin kennt der Ersteller sich damit am besten aus. Danach kann man immernoch einen dieser CSS-Verbesserer nutzen und vergleichen welcher den größten Erfolg verbucht.

Tipps zur Optimierung des eigenen Stylesheets

1. Mehrere IDs sind nicht immer günstig

   Mir ist aufgefallen, dass ich beim Erstellen des Stylesheets viele IDs hintereinander benutze um eine Struktur zu bewahren. Dies ist dann immer unnötig, wenn die ID in keinen Zusammenhang mit einer anderen steht. Beispiel:

   <code>
   #wrapper form#searchform {...}
   /* Dies lässt sich so vereinfachen */
   #searchform {...}
   </code>
   

   Die ID “searchform” soll immer gleich auf der Seite aussehen, egal welche andere ID davorsteht. Zudem ist klar, dass es sich um eine “form” handelt.

2. Gleiche Inhalte zusammenfassen

   Oft kommt es vor, dass man das gleiche Attribut mit dem gleichen Wert im Stylesheet öfters benutzt. Die kann man ganz einfach zusammenführen, indem man die verschieden Elemente mit Kommata abtrennt.

   <code>
   #searchform {display:none}
   .hide {display:none}
   /* Dies lässt sich so vereinfachen */
   #seachform, .hide {display:none}
   
   </code>

3. Grundlegende Formatierung vornehmen

   Darunter verstehe ich, dass beispielsweise bei einem Hyperlink das Attribut “text-decoration” auf “none” gesetzt wird. Falls man dies nicht am Anfang des Stylesheets schon festlegt, muss man jedes “a”, dass darin vorkommt mit diesem Wert zuweisen. Das verbraucht unnütz viel Speicherplatz. Einige empfehlen ein Reset-Stylesheet immer einzufügen, das solche grundlegenden Sachen übernimmt.

4. Kurzschreibweise

   Wirklich effizient ist es die Kurzschreibweise zu benutzen. Da spart man sich sehr viel Tipparbeit und es spart Platz. Dies funktioniert mit einigen Attributen sehr gut. Hierdurch kann allerdings auch einiges an Übersichtlichkeit verloren gehen. Beispiel:

   <code>
   font-family: helvetica, arial, sans-serif;
   font-size: 10px;
   /* Dies lässt sich so vereinfachen */
   font: 1px helvetica, arial, sans-serif;
   
   </code>

5. Das Semikolon vor dem Schließen weglassen

   Wenn die Wertezuweisung zu Ende ist, kann man das Semikolon getrost weglassen. Ich mache dies allerdings nicht, da einer meiner häufigsten Fehlerquellen darin liegt ein Semikolon zu vergessen. Wenn man jedoch fertig ist kann man gerne nochmal drüber schauen und die unnötigen entfernen. Beispiel:

   <code>
   a {text-decoration:none;}
   /* Dies lässt sich so vereinfachen */
   a {text-decoration:none}
   
   </code>

WordPress und die Conditional Tags

Das Wort Kondition kommt aus dem lateinischen condicio und bedeutet so viel wie Bedingung. Also geht es hier um Bedingungen! Bei der Gestaltung eines Themes benötigt man solche Bedingungen häufig, da sie zumal auf der Seite des Servers ausgeführt werden und damit den Inhalt dynamisch anpassen.

Hier findet man auch genug solcher Bedingungen. Ich habe mich beispielsweise dafür entschieden, die Sidebar so zu gestalten, dass bei einem Artikel die Informationen über den Autor, die Kategorie und Datum der Veröffentlichung in dieser erscheinen. Dies gestaltet sich mit den Conditional Tags sehr einfach:

<code>
<?php if (is_single () ) {
      //Hier erscheint die Anweisung, wenn es ein Artikel ist
   }
</code>

Dies ist beliebig erweiterbar. Statt “single” kann man, wie die Dokumentation zeigt, eine Vielzahl anderer Bedingungen aufstellen. Es erlaubt einem auch den Titel der Webseite speziell anzupassen und findet in vielen Formen eine Anwendung.

Eröffnung

Endlich ist es soweit. Mein ganz persönliches Portfolio öffnet nun offiziell seine Pforten. Viel zu sehen gibt es noch nicht, demnach ist noch einiges an Arbeit zu verrichten.

Der erste Blick verrät, dass dem Portfolio ein Blog integriert ist, welcher sich rund um die Themen WordPress, CSS, (X)HTML und andere Web-Angelegenheiten dreht. Wie auch bei meinem Nachbar-Projekt (offline seit April 2010), läuft das ganze auf WordPress – einwandfrei.

Web-Beobachter: Beim Öffnen der Seite sollte das Wort Web-Beobachter auffallen. Ich war mir anfangs nicht schlüssig, unter welche Kategorie ich mich einordnen soll. Zumal bin ich kein Diplom-Designer oder sonstiger Gelehrter. Trotzdem habe ich mittlerweile ein großes Fachwissen erreicht und entwickle auch meine eigenen Projekte. Um den ganzen Begrifflichkeiten etwas aus dem Weg zu gehen, steht hinter meinem Namen – Web-Beobachter. Dies ist in einer Weise schon treffend, da ich das aktuelle Geschehen aufmerksam verfolge und mir zum ein oder anderen Thema meine Gedanken machen. Diese werden dann demnächst im Blog nachzulesen sein.