ak|weblog

Donnerstag, 27. Januar 2005

Erdiges Farbschema

Schon seit längerer Zeit suche ich mir die Farben für eine Website aus Fotos zusammen, genauer gesagt aus Landschaftsaufnahmen. Die Farben des Designs von andreas-kalt.de stammen z.B. aus einer Aufnahme des australischen Outbacks.

Das folgende Farbschema habe ich aus einer Aufnahme aus dem Buch Atelier Erde von Bernhard Edmaier erstellt. Es zeigt Inseln im australischen Lake Amadeus. Das Buch ist ein Traum und enthält eine ganze Reihe von Lanschaftsaufnahmen, deren abstrakte Schönheit das Auge fesselt.

Das Schema ist bisher nirgends in Verwendung. Das Urheberrecht für das Foto hat selbstverständlich Herr Edmaier.

Roter Sand in Australien

Farbschema aus Foto

Donnerstag, 27. Januar 2005

mod_rewrite enträtselt

Vor einiger Zeit habe ich hier gefragt, wie mod_rewrite funktioniert. Diese Funktion des Apache Webservers wird sehr häufig eingesetzt und erlaubt es, URLs von Websites umzuschreiben. Das ist sehr praktisch, denn die URLs dynamisch generierter Seiten, die z.B. mit PHP oder ASP erzeugt werden, enthalten in der Regel Bezeichnungen und Werte von Variablen, die für Menschen schwer zu lesen und noch schwerer zu erinnern sind. So verwendet auch WordPress mod_rewrite, um gut lesbare URLs zu erzeugen. Hier ein vorher-nachher Beispiel zur Verdeutlichung:

unleserliche URL:

www.domain.de?topic=web&cat=books&page=005

saubere URL:

www.domain.de/web/books/005/

Um mod_rewrite einzusetzen, schreibt man bestimmte Regeln in die Datei .htaccess. Und hier wird es dann meistens kompliziert. Meine WordPress Installation verwendet folgende Regeln für das URL Schema dieses Weblogs:

  1. RewriteEngine On
  2. RewriteBase /blog/
  3. RewriteRule ^archiv/category/(.*)/(feed|rdf|rss|rss2|atom)/?$ /blog/wp-feed.php?category_name=$1&feed=$2 [QSA]
  4. RewriteRule ^archiv/category/?(.*) /blog/index.php?category_name=$1 [QSA]
  5. RewriteRule ^archiv/author/(.*)/(feed|rdf|rss|rss2|atom)/?$ /blog/wp-feed.php?author_name=$1&feed=$2 [QSA]
  6. RewriteRule ^archiv/author/?(.*) /blog/index.php?author_name=$1 [QSA]
  7. RewriteRule ^archiv/([0-9]{4})?/?([0-9]{1,2})?/?([0-9]{1,2})?/?([_0-9a-z-]+)?/?([0-9]+)?/?$ /blog/index.php?year=$1&monthnum=$2&day=$3&name=$4&page=$5 [QSA]
  8. RewriteRule ^archiv/([0-9]{4})/([0-9]{1,2})/([0-9]{1,2})/([_0-9a-z-]+)/(feed|rdf|rss|rss2|atom)/?$ /blog/wp-feed.php?year=$1&monthnum=$2&day=$3&name=$4&feed=$5 [QSA]
  9. RewriteRule ^archiv/([0-9]{4})/([0-9]{1,2})/([0-9]{1,2})/([_0-9a-z-]+)/trackback/?$ /blog/wp-trackback.php?year=$1&monthnum=$2&day=$3&name=$4 [QSA]
  10. RewriteRule ^feed/?([_0-9a-z-]+)?/?$ /blog/wp-feed.php?feed=$1 [QSA]
  11. RewriteRule ^comments/feed/?([_0-9a-z-]+)?/?$ /blog/wp-feed.php?feed=$1&withcomments=1 [QSA]
  12. Code-Download: /code/wp-rewrite-regeln.txt

Das ist nun nichts, was man sich eben mal vor dem Schlafengehen durchliest. Trotzdem hat es mich schon länger interessiert, dieses “Rätsel” zu durchschauen und ich habe inzwischen einiges darüber herausgefunden.

(1) Wie funktioniert mod_rewrite nun wirklich?

Zunächst ist der Name dieses Apache Moduls wichtig: es heißt “rewrite”. Die URLs werden also lediglich umgeschrieben von einer Form in eine andere. D.h. wenn WordPress in meinem URL Schema ein hierarchisches Ordnersystem anzeigt, so ist das geschummelt. Diese Ordner gibt es nicht, denn hinter der sauberen Anordnung der verschiedenen “Ordnernamen” verbergen sich die unsauberen Variablen mit ihren Werten. Das kann man sich noch mal an der Gegenüberstellung von unsauberer und sauberer URL (siehe oben) vor Augen führen. In der umgeschriebenen URL ist nichts, was in der ursprünglichen nicht auch wäre. Die Saubere hat lediglich ein anderes Erscheinungsbild.

(2) Was machen die rewrite-Regeln?

Ein Eintrag in der .htaccess Datei beginnt mit RewriteEngine On. Diese Anweisung, man ahnt es bereits, schaltet mod_rewrite ein.

Anschließend folgen dann die einzelnen rewrite Regeln (vorher evtl. noch rewrite Bedingungen, RewriteCond, die ich aber bisher noch nicht ausreichend verstanden habe).

Eine rewrite-Regel könnte folgendermaßen aussehen.

RewriteRule /weblog/ weblog.html

Die Regel beginnt mit der Aussage, dass sie eine Regel ist (RewriteRule). Dann folgt ein Leerschritt und diejenige Form der URL, die der User zu Gesicht bekommt. Nach einem weiteren Leerschritt folgt dann die Form der URL, mit der der Server arbeitet. Im Beispiel würde man also vorgeben, dass ein Verzeichnis “weblog” existiert, die Rewrite Regel würde Anfragen für dieses Verzeichnis aber an die statische HTML-Datei namens weblog.html “umleiten”, indem sie die URL umschreibt. Im Browser ändert sich bei dieser Form der Regel nichts und der User bekommt nicht mit, dass “weblog” kein Verzeichnis sondern eine Datei ist.

Dieses erste Beispiel ist nicht besonders spannend, denn es gilt nur für einen einzigen Fall von Anfrage. Damit kommen wir zu den bereits vorgestellten komplizierten Regeln, die z.B. WordPress nutzt.

(3) Was bedeuten all diese kryptischen Zeichenfolgen?

Viele mod_rewrite Regeln enthalten eine unüberschaubarer Abfolge von Zeichen wie z.B.

^/feed/?([a-zA-Z0-9]+)$

Dies sind sogenannte Reguläre Ausdrücke (regular expressions, kurz: regexs) und haben zunächst mal gar nichts mit mod_rewrite zu tun. Regular expressions sind eine Methode, um in Texten bestimmte Zeichenfolgen gezielt und universell zu finden und gegebenenfalls zu manipulieren. Sie werden in den verschiedensten Unix-Anwendungen verwendet.

mod_rewrite benutzt regular expressions, um nicht jede URL einzeln umschreiben zu müssen. Der Ausdruck [a-zA-Z]+ findet beispielsweise alle Folgen von Groß- und/oder Kleinbuchstaben (a-z bzw. A-Z) in beliebiger Anzahl (angezeigt durch das +). Das Zeichen ^ bedeutet, dass ein Suchstring beginnt, $ steht für das Ende eines Strings. Dazu gibt es noch viele weitere spezielle Zeichen, wie z.B. das Fragezeichen, den Punkt oder den Stern. Wer sich näher dafür interessiert, kann sich das ein oder andere Tutorial zu regular expressions ansehen.

Damit werden nun bestimmte Muster in den sauberen URLs erkannt und für den Server in die entsprechenden Variablen und Werte übersetzt. Wichtig sind dabei die Bereiche, die in runden Klammern stehen. Der Inhalt einer Klammer wird gespeichert und ist in der rechten Hälfte der Regel als Wert verfügbar. Ich kann also z.B. im zweiten Beispiel oben die Zahlenfolge /005/ speichern und sie dem Server als Wert der Variable “page” übergeben. Das funktioniert mit dem Dollarzeichen und einer Zahl. $1 steht dabei für den ersten gespeicherten String, $2 für den zweiten usw. Man kann die Anwendung dieses Prinzips in den WP rewrite Regeln überall finden.

Fazit

Diese kurze Beschreibung sollte mod_rewrite kurz vorstellen und die wichtigsten Prinzipien klären. Ich bin selbst noch weit davon entfernt, damit flüssig umgehen zu können. Zu vielfältig sind die Einsatzmöglichkeiten der regular expressions, deren Syntax erst einmal beherrscht werden will. Ein passendes Zitat in diesem Zusammenhang habe ich in David Mertz’ Tutorial gefunden:

Sometimes you have a programming problem and it seems like the best solution is to use regular expressions; now you have two problems.

Einige weitere Ressourcen zum Thema:

Donnerstag, 20. Januar 2005

CSS Tutorial und Firefox Artikel


  1. Das deutschsprachige Web ist nach wie vor weniger gut mit Ressourcen über standards-basiertes Webdesign mit XHTML und CSS ausgestattet als der anglophone Teil des Internets. Daher habe ich das meiner Ansicht nach sehr gute “Colored-Boxes Tutorial” von Russ Weakly (maxdesign) übersetzt: Farbige Kästen: Eine Methode für die Gestaltung eines reinen CSS-Layouts. Es erklärt in elf Teilschritten die Erstellung eines Webseitenlayouts mit Cascading Stylesheets.


  2. In letzter Zeit war Mozilla Firefox viel in der öffentlichen Diskussion und verschiedene Leute haben Anleitungen für die Installation und Benutzung veröffentlicht.


    Ich wollte nicht nachstehen und habe auf Rete-Mirabile.net, meiner Info- und Materialsammlung für Unterrichtende, einen Artikel geschrieben, der erläutert, warum man Internet Explorer vergessen und Firefox nutzen sollte. Der Artikel richtet sich an Leute, die wenig bis mäßig viel Erfahrung im Web haben und den Browser zur Recherche (z.B. für den Unterricht) nutzen. Aber auch jeder andere Umsteigewillige kann damit vielleicht überzeugt werden.


    Da ich hier schon öfters über die Vorzüge von Opera geschrieben habe, mag ein Firefox Artikel vielleicht seltsam erscheinen. Ich denke aber, dass Firefox für Ein- und Umsteiger die bessere Wahl ist, weil Opera zu viel Einarbeitungszeit verlangt und mehr Frustpotential hat.




Viel Spaß bei der Lektüre.

Freitag, 07. Januar 2005

Der User—das unbekannte Wesen

Man kann das Web sehr effektiv nutzen. Man benutzt einen Browser wie Opera oder Firefox, den man sich im Laufe der Zeit so anpasst, “twiikt” und gestaltet, dass er genau den eigenen Surfgewohnheiten entspricht. Man hat Extensions, Mausgesten, Tastaturkürzel, Tabs und was sonst noch alles. Man ist so viel im Web unterwegs, dass man schon genau weiß, dass in der Regel das Logo zurück zur Startseite führt, man erkennt sofort, wenn eine Website ein neues Fenster geöffnet hat, weil das ja als neuer Tab in der Tableiste erscheint, ohnehin passiert dies nur bei wenigen Sites, da der Popup-Blocker ja seit langem zum Standard gehört. Wenn man auch noch Websites designt, fließen all diese Erfahrungen in das Design.

Das Problem ist nur, dass eine Minderheit der Leute so surft.

Die meisten “normalen” User benutzen den Internet Explorer, schlagen sich mit Popups rum, sind völlig verwirrt, wenn ein neues Fenster in voller Größe aufgeht und verstehen nicht, warum in diesem der Back-Button nicht funktioniert. Selbst wenn sie einen Browser mit Tabs verwenden, ist ihnen das Konzept oft nicht eingängig bzw. sie wissen gar nicht um das Potential dieser Technik. Wie man auf verschiedenen Sites navigiert, müssen sie jedesmal aufs Neue herausfinden, weil ihre Besuche im Netz nicht mehrmals täglich, sondern allenfalls mehrmals monatlich stattfinden. Sie verstehen nicht, warum manche Links ein Symbol haben, das einen Pfeil zeigt, der aus einem Kästchen weist. Sie ignorieren es, weil es ihnen ohnehin egal ist, ob ein Link “intern” oder “extern” ist, denn sie surfen nicht auf bestimmten Sites, sondern im Internet.

Meine Schlussfolgerung aus den hier geschilderten subjektiven Beobachtungen der letzten Wochen ist, dass man als Webdesigner versuchen sollte, regelmäßig “normale” User beim Surfen zu beobachten. Man muss keine Usability-Studien veranstalten. Es genügt, Eltern, Freunden, wem auch immer einfach nur beim Surfen zuzusehen und man wird an einige Probleme erinnert, die man selbst schon vor Jahren gelöst hat.

Das Bewusstsein um solche Probleme ist aber meines Erachtens ungeheuer wichtig, wenn man Sites erstellt. Nur allzu leicht wird ein Design sonst zum weißen Elefanten: hübsch anzusehen und gut geeignet, um damit anzugeben, aber leider völlig nutzlos für diejenigen, die es nutzen sollen.

Montag, 27. Dezember 2004

Wikipedia

Vor einigen Monaten habe ich Wikipedia entdeckt und seither sehr schätzen gelernt. Nachdem die OpenSource Enzyklopädie lange Zeit eher spärlich daherkam, kann sie inzwischen an Umfang durchaus mit den kommerziellen Nachschlagewerken mithalten.

Natürlich bleibt ein Problem: die Verlässlichkeit der Artikel ist nicht automatisch gegeben, weil nicht einschlägige Experten als Autoren in Erscheinung treten, sondern jeder einen Artikel verfassen kann, der sich dafür geeignet hält. Meine Erfarung ist aber, dass die meisten Artikel einen guten Eindruck machen und zumindest als Ausgangspunkt für die weitere Recherche gut geeignet sind.

Bei der Unterrichtsvorbereitung habe ich in den letzen Wochen unzählige Male auf Wikipedia zurückgegriffen, um mir einen ersten Eindruck von einem Thema zu verschaffen oder auch einen Begriff schnell nachzuschlagen. Durch die Integration des Wikipedia Suchfeldes in Firefox und die Möglichkeit, auch in Opera eine Wikipedia Suche zu integrieren, ist dieser Pfad zur Information unschlagbar schnell und einfach.

Neben dem klassischen Lexikon bietet Wikipedia übrigens auch verschiedene andere Projekte.

Simon Willison hat noch weitere Anregungen zu Wikipedia.