Making-of ...

"Making-of ..." beschreibt, wie meine Internetseiten entstanden sind. Dazu gehören "Stefans Kos-Seite", "Stefans Waldenbuch-Seite", "Schueller-net.de" und jetzt auch "Making-Of ...".

Das Programmieren betreibe ich inzwischen nur noch als Hobby. Der Auslöser zur Erstellung einer Internetseite war ein Besuch auf Kos.

Bei der Programmierung von "Stefans Kos-Seite machte ich ersten Schritte in HTML.

Über das Portal "Schueller-net.de", das später entstanden ist, ist hier mehr zu lesen.

Etwas ausführlicher sind die Abschnitte über die Programmiertechnik, die ich bei der Erstellung der Seiten verwende.

Wer mehr darüber erfahren möchte, mit welchen Tools ich meine Seiten programmiere und teste, erfährt hier mehr.

Für Anregungen oder Kritik gibt es ein Kontaktformular, mit dessen Hilfe Ihr mir ganz schnell eine Mail schreiben könnt.

"Making-of ..." ist keine Anleitung zur Erstellung oder Programmierung einer Internetseite. Dafür gibt es bereits genügend Literatur.

Wer selbst eine Internetseite erstellen möchte, dem empfehle ich, sich ein Buch über HTML-Programmierung zu beschaffen und mit dem "Hello World!"-Beispiel anzufangen. Das klingt zunächst altmodisch, hat aber einen praktischen Hintergrund: das Buch liegt neben der Tastatur und versperrt nicht den Blick auf Texteditor und Browser.

Alle Bücher die auf den folgenden Seiten erwähnt sind haben mir in einer bestimmten Phase der Arbeit zur Erstellung der Seiten entscheidend weiter geholfen. Ob es die besten Bücher sind dies es gibt, muss jeder für sich selbst herausfinden.

Im Oktober 2002 besuchten wir die griechische Insel Kos. Obwohl es nur ein Tagesausflug war, hat mich die Atmosphäre auf Kos nicht wieder losgelassen. Die Touristen waren sicher nicht so zahlreich wie im Sommer, weshalb es angenehm ruhig zuging.

Eine Homepage zu erstellen, hatte ich schon länger angedacht, aber wie fängt man an? Elkes Homepage war damals schon fast fertig und ich wollte doch zeigen dass ich das auch kann.

Als dann die Photos von unserem Ausflug aus dem Entwicklungslabor kamen, reifte der Entschluss eine Kos-Seite zu erstellen. In den Weihnachtsferien begann ich mit den ersten Versuchen. Bei meinem Provider gibt es einen "Homepage Baukasten". Um schnell was auf die Beine zu stellen, versuchte ich es zuerst mit diesem Baukasten.

Tatsächlich musste ich keine Zeile HTML-Code erstellen, aber das Ergebnis fand ich nicht so berauschend. So hatte ich mir meine Homepage nicht vorgestellt. Die Farben passten nicht, die Seitenaufteilung konnte nicht geändert werden und außerdem nahm das Menü viel zu viel Platz ein. Das muss auch anders gehen!

Wie program­miert man an eine Homepage richtig, fragte ich mich und was braucht man dazu? Aber da stand ja noch ein Buch im Regal:

• Yves Ernst: "HTML - In 10 Minuten zur eigenen Homepage" Taschenbuch, 335 Seiten, Verlag DATA BECKER, 1996

Der Untertitel machte mir Mut und nachdem ich das erste Kapitel ganz schnell durchgearbeitet hatte, begann ich die mit dem Baukasten erstellte Seite nach und nach zu verändern. Dabei legte ich weniger Wert auf Animationen und andere Effekte, vielmehr sollte die Seite sauber programmiert sein. Als alter Softwerker und Pascal-Fan habe ich da so meine eigenen Vorstellungen, wenn auch die HTML-Programmierung mit den herkömmlichen, prozeduralen Programmiersprachen wenig gemein hat und mich am Anfang eher an Wordstar oder LaTeX erinnerte.

Als Werkzeuge zum Erstellen und Testen der Seiten habe ich den Editor des Windows-Betriebssystems verwendet (damals Windows 95) und den Internet Explorer. Somit war ein sofortiger Einstieg in die HTML-Programmierung möglich, ohne dass eine aufwendige Entwicklungsumgebung installiert werden musste.

Die Seiten habe ich bei meinem Provider hoch­geladen. Wie das damals aussah, sieht man auf dem Bild. Das Design hat sich bis heute nur wenig geändert.

Nachdem sich die ersten Verbesserungen an meiner Seite sehr schnell umsetzen ließen habe ich Feuer gefangen und wollte mehr. Mit Hilfe des Buches konnte ich ein richtiges Grundgerüst erstellen, mit dem das Design der Seite festgelegt wird.

Bei 10 Minuten ist es letztendlich nicht geblieben, inzwischen sind zwanzig Jahre daraus geworden!

Sehr schnell ist außerdem auch der Wunsch gereift die Inhalte auf einer eigenen Domain zu präsentieren. Die Adresse home.arcor.de/Stefan.Schueller ist nicht leicht zu merken und hat ja mit der Insel Kos nichts zu tun. Die Suche nach einer Domain war aber nicht so einfach. Die Domain Kos.de war schon vergeben, Schueller.de gehört einer Küchenfirma. Ende 2003 habe ich deshalb Schueller-net.de registriert. Diese Seite dient als Portal zu den verschiedenen Inhalten.

Kurz darauf habe ich dann Stefans Waldenbuch­-Seite ins Leben gerufen, denn eine offizielle Seite der Stadt Waldenbuch gab es damals noch nicht. Stefans Walden­buch­-Seite hat inzwischen keine eigene Domain mehr. Über die Adresse Waldenbuch.net.ms ist die Seite nicht mehr zu erreichen. Der Provider bei dem die Domain registriert war hat ohne Ankündi­gung seinen Dienst quittiert.

Leider gibt es über Walden­buch nicht so viel zu berichten was Menschen außerhalb der Stadt interessieren könnte. Deshalb ist Stefans Waldenbuch-Seite recht bescheiden geblieben.

Zuletzt sollte noch eine Seite über Hammamet, den Urlaubsort in Tunesien entstehen. Wir waren mehrmals in Tunesien und so gab es sehr viele Bilder die ich auf meiner Hammamet-Seite zeigen konnte. Aus Zeitgründen habe ich diese Seite relativ schnell wieder eingestellt, der Aufwand war einfach viel zu groß alles Wissenswerte zu erfassen und ansprechend zu gestalten.

Für die Festlegung des Aussehens der Seiten verwende ich seit sehr langer Zeit Style Sheets. Die Format-Angaben in den Stylesheets lassen erheblich mehr Spielraum zur Gestaltung der Seiten zu als reiner HTML-Code. Die Style-Anweisungen sind in separaten CSS-Dateien zusammengefasst, was die Entwicklung und Pflege der Seiten erleichtert.

Besonders beeindruckt war ich, als ich auf die Seite www.einfach-fuer-alle.de gestoßen bin. Hier wird die Barrierefreiheit zum obersten Ziel gemacht. Basis bei der Umsetzung sind CSS-basierte Layouts.

Um das Prinzip der CSS-Layouts zu verstehen habe ich mir das HTML Handbuch aus dem Franzis-Verlag gekauft. Die Navigation ist inzwischen vollständig mit dieser Technik realisiert und das ursprüngliche Tabellenlayout wurde überall durch ein CSS-Layout ersetzt.

Als Nachschlagewerk für knifflige Gestaltungsaufgaben benutze ich das CSS Kochbuch von Christopher Schmitt und Jørgen W. Lang aus dem O'Reilly Verlag.

Im Gegensatz zu SSI ist Javascript eine richtige Programmiersprache. Mit Ihrer Hilfe lassen sich diverse Komfortfunktionen realisieren. Javascript ist aber leider auch ein Sicherheitsrisiko, weshalb die Ausführung des Codes auf manchen Rechnern verhindert wird. Alle meine Seiten sind deshalb so gestaltet, dass bei deaktiviertem Javascript möglichst wenig Einschränkungen zu spüren sind. Beispiele für Funktionen die mit Hilfe von Javascript realisiert sind:

• Der Wechsel der Bilder auf der Startseite von www.Schueller-net.de
• Das Einstellen der Schriftgröße auf Stefans Kos-Seite
• Das von der Tageszeit abhängige Anzeigen eines Bildes auf Stefans Waldenbuch-Seite
• Die Animation der Bildergalerien

Auch PHP ist eine Programmiersprache. Im Gegensatz zu Javascript wird PHP auf dem Webserver ausgeführt, stellt deshalb keine Anforderungen an den Client (Anzeigegerät, Browser). Mit PHP lassen sich Seiten dynamisch realisieren, ähnlich wie mit SSI. Gegenüber SSI bietet PHP sehr viel mehr Möglichkeiten, bis hin zur Nutzung serverbasierter Datenbanken.

PHP nutze ich seit dem letzten Providerwechsel 2016. Zunächst habe ich nur das Gästebuch von Stefans Kos-Seite sowie das Kontakt-Formular mit PHP realisiert. Den Code dafür habe ich nicht komplett selbst entwickelt sondern von Michael Knothe übernommen und an meine eigenen Bedürfnisse angepasst. Michael Knothe betreibt die Seiten yellabook.de und kontaktformular.com.

Danach habe ich nach und nach die SSI-Anweisungen durch PHP-Befehle ersetzt und schnell festgestellt, wie vielseitig PHP eingesetzt werden kann. Da das Mischen von SSI und PHP mir nicht möglich war, hat der Umstieg auf PHP an einigen Stellen recht lange gedauert. Manchen URLs sieht man durch die Endung ".php" an, dass die Seite mit PHP realisiert ist, aber nicht allen!

Zuletzt habe ich das Kontaktformular von Insel-Kos.info vollständig neu erstellt. Es nutzt die Möglichkeiten von HTML5 und bindet das reCAPTCHA von Google ein zur Reduzierung von SPAM.

In den letzen Jahren hat die Anzahl der Benutzer die das Internet über mobile Geräte nutzen massiv zugenommen. Dies führt dazu, dass Inhalte nicht nur auf einem großen Bildschirm sondern auch auf Tablets und kleinen Smartphones betrachtet werden. Die Bildschirme auf den mobilen Geräten sind kleiner, die Bedienung erfolgt statt mit der Maus per Touchscreen.

Ziel des responsiven Web-Design ist es, die Darstellung der Seiten an das Ausgabegerät anzupassen und damit die Lesbarkeit und Bedienbarkeit auf Geräten unterschiedlicher Größe zu gewährleisten.

Eine der Schlüsseltechniken des responsiven Web-Designs sind sogenannte Media-Queries. Die Abfrage der Bildschirmgröße ermöglicht die gezielte Anpassung der Darstellung an das Ausgabeformat. Sehr einfach lässt sich das ausprobieren, indem das Browserfenster auf dem Bildschirm verkleinert wird.

Auch zu diesem Thema habe ich mir Hilfe geholt: Responsives Webdesign von Christoph Zillgens aus dem Carl Hanser Verlag.