ak|weblog

Sonntag, 25. November 2007

Was ist Webdesign?

Jeffrey Zeldman hat einen sehr lesenswerten Artikel bei A List Apart veröffentlicht, in dem er zu erklären versucht, worum es beim Webdesign wirklich geht und warum das viele einflussreiche Leute nicht verstehen: Understanding Web Design.

Der wichtigstste Satz:

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

Besonders gut gefallen mir seine Vergleiche: er sieht die Funktion von Webdesign ähnlich wie die von Typographie oder Architektur. Beide sind aufwändig durchdacht, treten aber in den Hintergrund, sobald sie benutzt werden sollen. Typographie soll einen Text kommunizieren, Architektur soll es Menschen ermöglichen, zu wohnen oder zu arbeiten.

Dem stellt er die marktschreierischen Websites gegenüber, die sich selbst in den Vordergrund stellen, ohne wirklich kommunizieren zu wollen.

Dienstag, 29. Mai 2007

Neues CSS Tutorial: Die ausgewählte Seite in der Navigation hervorheben

Meine beiden ‚Menü mit Rollover‘ -Tutorials scheinen gut anzukommen. Allerdings fragt in regelmäßigen Abständen jemand per eMail, wie man denn eine ausgewählte Seite in der Navigation hervorheben könne.

Um diese Frage künftig schneller zu beantworten, habe ich ein neues Tutorial dazu geschrieben: Die ausgewählte Seite in einer Navigation hervorheben.

Montag, 11. April 2005

Making of v2

Mein Redesign umfasst als Neuerung auch ein “Kolophon”, laut Google

A brief listing of production information, often including typeface details and information related to any artwork.

Im deutschprachigen Web ist diese Bezeichnung noch nicht verbreitet. Doch die Idee und auch der Begriff gefallen mir und daher hat meine Site ein umfangreiches Kolophon (verlinkt im Footer), in dem verschiedene Details zu Design und technischen Unterbau zu erfahren sind.

Da ich schon einige Male nach diesen gefragt wurde: Voilà.

Samstag, 02. April 2005

Version 2

Ein neues Gewand über einem neuen Gerüst. Die komplette Site läuft nun auf Textpattern, das Weblog und die übrigen Bereiche sind somit aus einem Guß.

Dazu einige Neuerungen und Schmankerl, z.B. verschiedene RSS und Atom Feeds für die einzelnen Bereiche der Site: natürlich das Weblog, aber auch die Webdesign Links, die Buchtipps und andere mehr. Die alten Feed-URLs werden umgeleitet, aber wer möchte, kann natürlich auch auf die neuen umstellen.

Außerdem ist der bisherige Bereich “Australien” zum Bereich Fotos geworden, wo es nun eine Auswahl verschiedener Fotosets zu sehen gibt. Umfangreichere Alben sind zu flickr umgezogen.

Ansonsten habe ich versucht, die bewährten Designkonzepte beizubehalten und mit den Sahnehäubchen zu garnieren, die ein Content Management System bietet.

Alle wichtigen Dinge habe ich getestet. Natürlich sind aber Browserprobleme nicht ausgeschlossen. Wenn also etwas seltsam aussieht oder sich komisch verhält, würde ich mich über einen Hinweis freuen.

Ein wenig Irrationalität ist wie immer im Spiel: Textpattern ist noch nicht in der Version 1.0 erschien, so dass sich noch Änderungen am CMS ergeben können. Die Vernunft würde sagen: abwarten. Aber manche Dinge müssen irgendwann einfach fertig werden.

Ich freue mich, hiermit das Projekt mit dem internen Codenamen “ak-v2” offiziell zu präsentieren.

Dienstag, 22. Februar 2005

Einen lokalen Webserver einrichten

Wenn man sich mit Webdesign beschäftigt, wird man zunächst anfangen, HTML-Seiten auf dem eigenen Rechner zu erstellen, diese in den installierten Browsern zu testen und anschließend auf den öffentlichen Webserver hochzuladen. Dafür reicht zunächst das Windows- (oder Mac-) Dateisystem aus.

Recht bald kommt man aber an den Punkt, an dem man ohne einen lokalen Server, also einer auf dem eigenen Rechner installierten Serversoftware, nicht mehr weiterkommt. Zwei Gründe hierfür sind besonders wichtig:

  1. Absolute URLs, die auf das root-Verzeichnis der Website Bezug nehmen, sind in vieler Hinsicht praktischer als relative. Unter anderem kann man sich viel Mühe und Kopfzerbrechen sparen, wenn man einzelne Dateien woanders hin kopiert, da die Verweise immer vom root-Verzeichnis abwärts funktionieren und nicht im Bezug zu der Datei, in der ein Verweis angelegt ist. Ein Beispiel:

    Relative URL: <a href="../bilder/bild.jpg">

    Absolute URL: <a href="/bilder/bild.jpg">

    Außerdem wird empfohlen, möglichst nicht auf Dateien, sondern auf Verzeichnisse zu verweisen, so dass das Dateiformat, das sich bei einem Redesign ändern könnte, unerheblich ist. Auch hierzu ein Beispiel:

    schlechte URL:<a href="/autoren/franz.html">

    bessere URL: <a href="/autoren/franz/">

    Im Verzeichnis /franz/ liegt eine Datei, die entweder index.html, index.php oder sonstwie heißen kann. Das vermeidet kaputte URLs, wenn man einmal die Technologie der Site umstellt.

    Diese URLs lassen sich aber lokal nur dann testen, wenn man einen Webserver installiert hat. Das Dateisystem des Betriebssystems kann damit nichts anfangen.

  2. Der zweite Grund für einen lokalen Server sind Content Management Systeme (CMS) oder Weblogs. Beide werden immer populärer und für beide sind in der Regel PHP und MySQL nötig. Auch die gibt es nur mit der Serversoftware (Mac OS X hat einen Apache Webserver eingebaut, allerdings keinen MySQL Server — ich möchte mich hier aber auf Windows beschränken.)

Ein lokaler Server muss her

Auf den ersten Blick ist es für die meisten eingefleischten Windows-Nutzer wohl ein eher abschreckender Gedanke, einen Apache Webserver einzurichten, assoziiert man damit doch Linux, Kommandozeile, unverständliche Befehle und anderes Ungemach.

Erfreulicherweise gibt es aber ein kostenloses Serverpaket, das sich mit wenigen Handgriffen installieren und benutzen lässt: XAMPP von den Apachefriends. Das Paket enthält alles, was man braucht, d.h. den Apache Server, einen MySQL Server, einen FTP-Server und noch einiges mehr. Außerdem ist er für verschiedene Betriebssysteme einschließlich Mac OS X erhältlich.

XAMPP installieren

XAMPP gibt es in verschiedenen Formen, ich bevorzuge das selbst-entpackende zip-Archiv. Der Installer mag zwar komfortabler sein, doch ist es mir lieber, das Ding liegt nur als Kopie auf meiner Platte. So kann ich es jederzeit wieder restlos tilgen ohne fürchten zu müssen, dass ein weiteres Programm sich in Windows registriert hat. Außerdem habe ich den Server mehrfach kopiert, so dass ich mehrere Sites testen kann, ohne jedesmal eine Copy-&-Paste-Orgie starten zu müssen.

Man lädt sich also das Paket herunter, entpackt es in ein leeres Verzeichnis und lässt die Setup-Datei laufen, die lediglich einige Variablen in den Server-Dateien einrichtet. Danach hat man das Verzeichnis xampp vor sich (eine Anleitung für das Setup befindet sich auf der Download-Seite). Es kann losgehen.

XAMPP verwenden

Um eine Website mit dem lokalen Server zu benutzen, werden dieDateien im Verzeichnis htdocs abgelegt. Dies ist also das root-Verzeichnis der Website. XAMPP hat schon Dateien in diesem Verzeichnis, so dass man den Server gleich ausprobieren kann. Und das geht ganz einfach:

Die Datei xampp-control.exe im Verzeichnis xampp doppelklicken und in dem erscheinenden Kontrollfenster den Schalter für „Apache“ drücken, der sodann von „Start“ auf „Stop“ umspringt, die Statusmeldung daneben entsprechend von „stopped“ auf „running“. Wenn man MySQL auch benötigt, startet man den MySQL Server ebenfalls.

Screenshot von XAMPP Control

Und nun? Das war’s schon. Wenn man nun im Browser die Adresse http://localhost/ aufruft, landet man auf der Startseite von XAMPP. hier kann man sich ein bisschen umkucken oder auch nicht.

Der gesamte Inhalt von htdocs kann nun entfernt oder woanders hin kopiert werden, so dass man die eigenen HTML-Dateien hier erstellen kann.

Ab sofort hat man einen Apache Webserver mit allem Drum und Dran, der sich mit einem Mausklick starten und stoppen lässt und kann auf dem lokalen Rechner praktisch alles ausprobieren, was man mit dem „großen Bruder“ des Internet Providers auch kann. Um das Ganze noch bequemer zu machen, erstellt man eine Verknüpfung zu xampp-control.exe auf dem Desktop oder in der Windows-Quickstartleiste und schon ist der eigene Server nur zwei Mausklicks entfernt.

[Update]

Dieses Tutorial befasst sich nur mit der grundlegenden Installation von XAMPP. Wenn Sie konkrete und spezielle Fragen haben, sollten Sie sich zunächst die FAQs zu XAMPP ansehen oder sich an das Forum der Apachefriends wenden.