Meine Website seit 1997

Anlässlich der Umstellung auf WordPress 2014 nach rund 8 Jahren mit DokuWiki ein kleiner Rückblick auf einige Stationen der Entwicklung seit 1997…

Anmerkung: Alle Screenshots können auch in einer größeren Ansicht betrachtet werden – einfach anklicken.

1997 – Die bescheidenen Anfänge

1997 war der öffentliche Teil des „World Wide Web“ selbst noch recht jung und der Zugang erfolgte meistens über Analog-Modems oder ISDN mit maximal 64 kBit/s – um 1 MB Daten herunterzuladen, benötigte man selbst mit ISDN noch über 2 Minuten, mit Analog-Modems meist noch deutlich länger. DSL wurde in Deutschland erst 1999 mit anfangs 768 kBit/s Downloadgeschwindigkeit eingeführt. Bildschirme, die man sich auch privat leisten konnte, hatten Diagonalen von 15 oder 17 Zoll und selten eine Auflösung von mehr als 800×600 Pixeln, 1024×768 Pixel galten bereits als hochwertige Technik. Entsprechend wurden Websites eher schlicht gestaltet.

Damals war der „Urvater“ von Firefox, Netscape Navigator, gerade erst drei Jahre auf dem Markt und Microsoft versuchte mit dem Internet Explorer als festen Bestandteil von Windows 95 den „Browser-Krieg“ für sich zu entscheiden. 1998 erschien Google und war zunächst nur als Suchmaschine bekannt.

Website 1997

Eine große Neuerung in HTML waren Anfang 1997 neben Tabellen auch Java-Applets (nicht zu verwechseln mit JavaScript, das mit Java außer dem Namen nichts gemeinsam hat).

Für meine erste Website habe ich als kleine Demonstration natürlich auch ein Java-Applet gebaut, das eine kleine 3D-Animation als Vektorgrafik dargestellt hat – ein rotierendes „A“ mit der Jahreszahl 97 und dem Copyright-Symbol in den Ecken. Dahinter ein Sternenhimmel, der von rechts nach links vorbeizog und durch unterschiedlich schnell bewegte Pixel den Eindruck von Tiefe vermittelt hat – eine Technik, die auch in Computerspielen und Demos gerne eingesetzt wurde. Das Ganze wurde mit einer rahmenlosen Tabelle und diversen grafischen Elementen angeordnet und entsprach damit ungefähr dem, was technisch möglich war.

Dass „Arno’s Home“ die falsche Schreibweise von „Arnos Home“ ist, ist mir bekannt. Ich habe die Schreibweise aus Gründen der Authentizität dennoch so stehen lassen, wie sie damals von mir verwendet wurde.

Die Schrift für das Logo – Brush Script – hatte ich übrigens schon zuvor für mein Atari-Projekt „Thing“ verwendet:

Über Thing 1996

Eine archivierte Version der Website ist unter https://arnowelzel.de/archive/1997 zu finden. Nachdem Java in Browsern aber mittlerweile kaum noch anzutreffen ist, habe ich von der Animation ein Video erstellt, um einen Eindruck davon zu vermitteln. Die Qualität der Animation ist nicht so gut wie im Original, aber zumindest sieht man, worum es geht:

2004 – Inspiration durch Sheldon Brown

Windows XP wurde Ende 2001 veröffentlicht und 2004 sah es so aus, dass Microsoft mit dem Internet Explorer, der auch fester Bestandteil von Windows XP war, den „Browser-Krieg“ vorerst für sich entschieden hatte. Ende 2004 erschien dann aber Firefox als Open-Source-Nachfolger des Netscape Navigator mit einer ganzseiten Anzeige in der FAZ (siehe PDF) und eine neue Runde im Spiel „wer hat den besten Web-Browser“ wurde eröffnet. Schnelle Internetzugänge mit Flatrates auf Basis von DSL entwickelten sich zumindest in Ballungsräumen zum Standard und das Web hatte sich zu einem Massenmedium entwickelt. In diesem Jahr startete auch Facebook.

Ich entdeckte in dieser Zeit auch die Artikel von Sheldon Brown, von denen ich einige ab 2004 übersetzt habe, und die mich auch dazu inspirierten, selber umfangreichere Texte und Anleitungen zu schreiben.

Ein „Wiki Wiki Web“ oder einfach nur „Wiki“ auf Basis einer Eigenentwicklung von mir gab es auch 2004 bereits auf der Website. Allerdings wurde das noch nicht für alle Inhalte genutzt. Die Wikipedia als bekannteste Anwendung eines Wiki gab es bereits seit 2001.

2005 – ArnosWiki

Serifenlose Schriften waren für Bildschirmdarstellungen zwar angenehmer, aber ich war der Ansicht, dass eine feste Vorgabe der Schrift eigentlich eine Einschränkung der Besucher ist, die sich eine eigene Standardschrift im Browser eingestellt hatten. Also ließ ich die Vorgabe einer bestimmten Größe und Art der Schrift einfach ganz weg. Auch sonst beschränkte sich das „Design“ auf ein absolutes Minimum und hatte eher den Charme von Websites aus den Anfangsjahren, was aber von manchen Besuchern durchaus positiv aufgenommen wurde.

Die Inhalte waren mittlerweile vollständig in mein selbstgebautes Wiki umgezogen und entsprechend nannte ich die Website von da an für die kommenden 9 Jahre „ArnosWiki“. Die Schreibweise war bewusst so – Wörter mit „camel case“, also mindestens zwei Großbuchstaben, wovon einer mitten im Wort war – wurde vom ersten „Ur-Wiki“ als Kennzeichnung eines Links auf die gleichnamigen Seiten innerhalb des Wiki verwendet.

2006 – Wechsel zu DokuWiki

Das selbstgebaute Wiki war technisch eigentlich nur ein einziges großes Script (aus etwa 2000 Zeilen Programmcode um genau zu sein), das eher nebenbei entstanden ist und nicht sonderlich viel konnte. Wenn ich etwa Bilder einbinden wollte, mussten diese zuerst per FTP auf den Server hochgeladen werden. Auch bezüglich der möglichen Textauszeichnungen war das Ganze sehr eingeschränkt – im Grunde nicht viel mehr als ein schneller Hack, den ich gerne durch etwas Besseres ersetzen wollte.

DokuWiki gab es bereits seit 2004, aber ich entdeckte es erst 2006 eher zufällig und war von Anfang an begeistert über die Funktionalität und den modularen Aufbau, den sich DokuWiki bis heute bewahrt hat. Das nahm ich als Anlass, meine Website darauf umzustellen und ein etwas „moderneres“ Layout zu verwenden. Im selben Jahr habe ich auf Basis von DokuWiki auch https://de-rec-fahrrad.de eingerichtet (siehe auch https://de-rec-fahrrad.de/die-anfaenge).

Ein sehr praktischer Aspekt bei DokuWiki war das Template-System: Das gesamte Layout konnte über ein eigenes Template sehr leicht angepasst und auch funktional erweitert werden. Für die erste Fassung meiner Website nutzte ich das „Arctic“-Template von dem auch die Navigationsleiste an der Seite beigesteuert wurde. Für Bilder musste ich künftig auch nicht mehr den FTP-Zugang bemühen, sondern konnte sie jetzt direkt im „Media-Manager“ von DokuWiki hochladen.

2007 – Neues Layout und Mehrsprachigkeit

Das „Arctic“-Template war zwar schon ganz hübsch, aber ich wollte doch lieber etwas individuelleres und habe das Template in vielen Details angepasst. Inspiriert durch die Übersetzungen der Texte von Sheldon Brown habe ich damit begonnen, viele Inhalte auch in Englisch zu veröffentlichen und DokuWiki dafür entsprechend erweitert, damit man jederzeit in einem Artikel zwischen den Sprachen wechseln konnte.

Website Juni 2007

Weil mir ein einfarbiger Hintergrund zu langweilig erschien, habe ich eine Hintergrundgrafik mit dem Wort „void“ für „Leere“ eingebunden. Diese war aber nur zu sehen, wenn der Inhalt selbst nicht mehr Platz beanspruchte.

Unter dem Titel „Schon gesehen?“ habe ich auch damit begonnen, auf aktuelle Artikel hinzuweisen – ein zaghafter Schritt in Richtung „Blog“.

2011/2012 – Version für mobile Geräte, Webfonts und Blog

Bereits 2009 hatte ich damit angefangen, ein eigenes Design zu entwickeln, bei dem maximale Zeilenlängen berücksichtigt werden und das optisch eher meinen Vorstellungen entspricht. Das Layout war dabei aber flexibel, und auch bei schmaleren Fenstern noch lesbar.

Website September 2012

Spätestens seit der Einführung von UMTS und entsprechender Volumentarife war auch „mobiles“ Internet ein zunehmend wichtiges Thema. Nachdem ich seit 2011 auch privat Android-Smartphones nutze, habe ich ein zusätzliches Layout für mobile Endgeräte entwickelt. Dafür wurde eine eigene Subdomain genutzt, auf die bei Bedarf automatisch umgeleitet wurde. Besucher konnten aber jederzeit über einen entsprechenden Link im Kopf zwischen beiden Versionen wechseln.

Website August 2011, mobile Version

Bezüglich Webfonts war ich ursprünglich skeptisch – mittlerweile hatte ich meine Meinung aber geändert und für die „Desktop“-Version eine eigene Schrift als Webfont eingebunden. Ein Blog war nun ebenfalls fester Bestandteil der Website. Ich nutzte dazu als Grundlage ein Plugin, mit dem eine feste Anzahl von Wiki-Seiten aus dem „Blog“-Bereich des Wiki als Artikel absteigend nach dem Veröffentlichungsdatum auf der Startseite angezeigt werden konnten. Wirklich glücklich war ich mit der Umsetzung nicht, aber sie erfüllte grundsätzlich ihren Zweck.

2014 – WordPress und HTML5

Über die Jahre hatte ich DokuWiki an vielen Stellen funktional an meine speziellen Anforderungen angepasst. Updates auf neue Versionen wurden zunehmend mühsam und auch mit der nachträglich aufgesetzten Blog-Funktion war ich nicht sehr glücklich. Ebenso fehlte mir die Möglichkeit, längere Artikel als Entwurf vorbereiten zu können und erst dann zu veröffentlichen, wenn sie fertig sind. Das war Anlass genug, mir Alternativen anzusehen und auf WordPress umzustellen. Der offizielle Titel ist jetzt nach 10 Jahren wieder schlicht „Arno Welzel“.

Website März 2014

WordPress ist zwar ursprünglich als System für Blogs entstanden, eignet sich aber durchaus auch für „normale“ Websites. So sind einige Bereiche auf meiner Website weiterhin in sich abgeschlossene Bereiche mit statischen Seiten und auch die Online-Tools, wie der Speichenlängenrechner oder der QR-Code-Generator sind weiterhin verfügbar. Wie DokuWiki bietet auch WordPress eine Versionierung aller Texte, so dass man als Autor auch hier jederzeit auf ältere Fassungen zurückgreifen oder sich die Unterschiede zwischen den Versionen zeigen lassen kann.

Mit dem Umstieg kam auch der Wechsel von XHTML 1.0 zu HTML5 und die Einführung eines „responsive“ Designs, das sich automatisch an Geräte mit geringerer Darstellungsbreite anpasst. Dadurch wird auch die eingebundene Schrift, mittlerweile „Lato“ statt „Proxima Nova“, auf geeigneten mobilen Browsern genutzt. Eine separate Subdomain für mobile Endgeräte samt Weiterleitung dorthin ist dadurch nicht mehr notwendig. Die alte URL ist aber weiterhin erreichbar und leitet auf die reguläre URL um.

Ein großer Fortschritt ist die Art, wie Bilder dargestellt werden: Das entsprechende Plugin ermöglicht eine vergrößerte Anzeige mit dem „Swipebox“-Script, das je nach Möglichkeiten des Endgerätes sowohl über Tastatur, wie auch mit anklickbaren Navigationssymbolen und Wisch-Gesten auf Touchscreens bedienbar ist. Auch Bildergalerien, die in DokuWiki eher „sperrig“ waren, können in WordPress deutlich eleganter erzeugt werden und erscheinen mit quadratischen Vorschaubildern.

Bedingt durch HTML5 ist die Darstellung bei älteren Versionen des Internet Explorer (also alles vor Version 9) deutlich eingeschränkt.  Als Kompromiss für den Internet Explorer 8 (oder ältere Versionen) habe ich die JavaScript-Bibliothek html5shiv und einige angepasste CSS-Regeln eingebunden. Neuere Browser (einschließlich Internet Explorer 9 oder neuer) ignorieren das einfach. In jedem Fall bleibt die Website auch ohne solche Hilfsmittel benutzbar – sie sieht im Zweifelsfall nur nicht sehr hübsch aus. Aber wer solche alten Browser nutzt, muss mit Einschränkungen leben.

2016 – Keine Unterstützung mehr für Windows XP und Internet Explorer 8 oder älter

Im Sommer 2016 war der Anteil der Nutzer mit Internet Explorer 8 nur noch bei 0,1%. Daher habe ich mich entschlossen, ab diesem Zeitpunkt die Berücksichtigung dieser Uralt-Software einzustellen. Die Website verwendet jetzt auch immer HTTPS (wofür Browser auch SNI unterstützen müssen) und html5shiv wird ebenfalls nicht mehr verwendet.

2019 – Mehr eigene Entwicklung

Die Bilder werden mittlerweile mit meinem eigenen Plugin „Lightbox with PhotoSwipe“ angezeigt und ich bin Maintainer einiger anderer Plugins für WordPress. Der Server ist ebenfalls umgezogen und nutzt mittlerweile HTTP/2 .

Ein Gedanke zu „Meine Website seit 1997“

  1. K
    Klaus Rautenbach

    Das ist die beste Website über Fahrradtechnik.
    Ich bin begeistert und dankbar!
    Gruß
    Klaus Rautenbach

Öffentlichen Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Dies ist kein Kontaktformular! Wenn Du mir eine persönliche Nachricht schreiben möchtest, benutze die E-Mail-Adresse in meinem Impressum.

Du kannst die folgenden HTML-Tags im Kommentar verwenden:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>