Logo SOS Logo Code

Webentwicklung

Was findet Ihr hier?

Hier beschreibe ich, wie meine Internetseiten entstanden sind. Dazu gehören "Insel-Kos.info", "Schueller-net.de" und jetzt auch "StefanUndElke.de". Den Schwerpunkt bilden dabei meine ganz persönlichen Erfahrungen in der Webentwicklung.

Schueller-net.de

Die Begeisterung für die Softwareentwicklung habe ich während des Studiums entdeckt, das Programmieren betreibe ich aber inzwischen nur noch als Hobby. Der Auslöser zur Erstellung einer Internetseite war ein Besuch auf Kos.

Bei der Webentwicklung für 'Stefans Kos-Seite' machte ich dann die 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, ein wichtiger Teil der Webentwicklung.

Natürlich darf auch ein Abschnitt über responsives Webdesign nicht fehlen!

Wer mehr darüber erfahren möchte, mit welchen Tools ich bei der Webentwicklung arbeite, erfährt hier mehr.

Zuletzt gebe ich euch noch einen Einblick in die Programmierung mit Javacript. Dazu habe ich das LightBox-Modul entwickelt, das auf der Seite insel-kos.info zum Einsatz kommt.

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

Und was findet Ihr hier nicht?

Dies ist keine Anleitung zur Erstellung oder Programmierung einer Internetseite. Dafür gibt es bereits genügend Literatur.

Wer selbst Webentwicklung betreiben 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 die es gibt, muss jeder für sich selbst herausfinden.

Zurück zum Seitenanfang ..

Ein Besuch auf Kos

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 Fotos 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 Internetprovider gibt es einen kostenlosen "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. Webentwicklung muss auch doch anders gehen!

Die Westlichen Ausgrabungen
© 2002 by Stefan O. Schüller
Die westlichen Ausgrabungen in Kos-Stadt
Zurück zum Seitenanfang ..

Erste Schritte mit HTML - Start der Webentwicklung

in 10 Minuten zur eigenen Homepage 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 nichts 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.

Ansicht der ersten Internetseite 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!

Zurück zum Seitenanfang ..

Mehr Inhalt!

Nachdem die ersten Schritte der Webentwicklung erfolgreich waren sollte meine Kos-Seite wachsen, um für die Besucher interessant zu sein. Dafür verwendete ich folgende Quellen:

Der DuMont-Reiseführer enthält eine sehr gute Karte von der Insel, die ich allen empfehlen kann, die einen Urlaub auf Kos planen.

Natürlich suchte ich dann auch im Internet nach Infos zur Insel Kos und war ziemlich überrascht, was es alles schon gibt. So entstand meine Sammlung von Links zur Insel Kos.

Texte und Bilder habe ich zuerst von Constantinos Hatzipavlis übernommen. Er wohnt auf der Insel Kos und hat damals eine Kos-Seite auf Griechisch und Englisch betrieben. Weitere Bilder hat mir dann René Schwarz zur Verfügung gestellt. René hat die Seite Hieroglyphen-info betrieben, die aber leider nicht mehr online ist.

Hieroglyphen-info
Die Seite Hieroglyphen-info von René Schwarz
Zurück zum Seitenanfang ..

Schueller-net.de

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.

Stefans Waldenbuch-Seite 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.

Hammamet-info
Ein erster Entwurf von Stefans Hammamet-Seite aus dem Jahr 2005.
Zurück zum Seitenanfang ..

Die Programmierung meiner Internetseiten

Ein Ziel bei der Programmierung der Seiten war stets, den Besuchern den Zugang zu den Seiten zu ermöglichen, unabhängig vom verwendeten Browser und den lokalen Einstellungen. Deshalb verzichtete ich auf Flash-Animationen und Java-Applets. Frames und Javascript werden nur bedingt eingesetzt, wer auf beides verzichtet soll die Seiten mit möglichst wenig Einschränkungen dargestellt bekommen. Javascript ist aber inzwischen fast unverzichtbar geworden. Sowohl AMP-Seiten, als auch Seiten die auf Wordpress basieren, funktioniern ohne Javascript überhaupt nicht.

Im Lauf der Zeit habe ich meine Internetseiten immer wieder aus- und umgebaut. Demzufolge kam es sehr oft zu Anpassungen an der Navigation. Der Pflegeaufwand der dadurch entstand wurde mir aber schnell zu groß.

Frames

Sehr früh hatte ich mich dazu entschlossen auf die damals immer wieder verwendeten Frames möglichst zu verzichten. Dort wo das nicht ging, gab es in der Vergangenheit eine Alternativdarstellung für die Browser, die Frames nicht unterstützen. Getestet hatte ich diese Funktion dann mit dem Opera-Browser. Die aktuelle Version des Browsers erlaubt die Abschaltung der Frame-Unterstützung leider nicht mehr, so dass ich momentan keine Testmöglichkeit dafür habe.

SSI (Server Side Includes)

Zur Erstellung dynamisch erzeugter Seiten stand mir PHP auf den Servern zuerst nicht zur Verfügung. Deshalb wurde zum Beispiel das Navigationsmenü oft mit Hilfe von sogenannten Server Side Includes dynamisch eingebunden. Der Vorteil dieser Technik liegt darin, dass alle mir bekannten Web-Server SSI unterstützen. Darum war eine Anpassung der Seiten bei einem Providerwechsel bisher nicht erforderlich. Durch die Ausführung auf dem Server funktioniert die Einbindung von Menüs, Seitenkopf und Seitenfuß über SSI unabhängig vom Browser und lässt sich deshalb einfach testen.

Code-Beispiel

Der Seitentitel und die Meta-Angabe "name" werden für jede Seite separat angegeben. Alle anderen Angaben im Kopf der HTML-Seite werden in einer separaten Datei gepflegt, die über die Anweisung #include mit eingebunden wird. Das Einbinden der Datei erfolgt auf dem Webserver. An den Browser wird nur eine HTML-Datei ausgeliefert, weshalb eine Unterstützung durch den Browser nicht erforderlich ist.

Code Beispiel SSI
Code-Beispiel SSI
Zurück zum Seitenanfang ..

CSS (Cascading Style Sheets), LESS und SASS

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 lange Zeit das CSS Kochbuch von Christopher Schmitt und Jørgen W. Lang aus dem O'Reilly Verlag.

Inzwischen hat sich auch CSS stark weiterentwickelt. Hinzugekommen sind außerdem die Präprozessoren LESS und SASS. Sie erlauben es den Quelltext an einigen Stellen deutlich zu vereinfachen und damit lesbarer zu machen. Ein weiterer, sehr nützlicher Nebeneffekt ist die Komprimierung des Stylesheets, dass sich dadurch schneller laden lässt.

LESS und SASS sind im Endeffekt sehr ähnlich, haben aber unterschiedliche Ansätze. LESS hat mir sofort gut gefallen, die Syntax von SASS fand ich dagegen "gewöhnungsbedürftig". Inzwischen habe ich auch SCSS eingesetzt, aber durch die Weiterentwicklung von CSS und den Browsern sind inzwischen einige Funktionen der Präprozessoren obsolet.

Das alte Kochbuch nutze ich nicht mehr. Zum Nachschlagen verwende ich gerne w3schools.com, denn hier finde ich schnell das gesuchte, www.mediaevent.de Beide Seiten decken größere Bereiche der Webentwicklung ab. Moderne Konzepte werden anschaulich auf der Seite web.dev (Google) vermittelt.

Code-Beispiel

Des Code-Beispiel zeigt das Setzen der Hintergrundfarben für die Links im Seitenfuß von Insel-Kos.info. Dafür werden an anderer Stelle vordefinierte Farben verwendet (ContentLinkBackground). Links auf eine andere Internetseite (werden mit einem Hintergrundbild versehen. Für den Dark Mode gibt es eine entsprechendes File, bei dem die Hintergrundfarbe anders definiert und Hintergrundbild augetauscht ist. Der Präprozessor erzeugt aus dem ersten '&:hover' den Selektor 'a footer:hover'.

Code Beispiel LESS
Code-Beispiel LESS

Javascript

Im Gegensatz zu SSI ist Javascript eine richtige Programmiersprache (na endlich!). Mit Ihrer Hilfe lassen sich diverse Komfortfunktionen realisieren. Javascript wurde in der Vergangenheit leider auch als Sicherheitsrisiko betrachtet, weshalb die Ausführung des Codes auf manchen Rechnern verhindert wurde und der Sprache ein negatives Image anhaftete. Lange Zeit habe ich deshalb Javascript nur sehr spärlich eingesetzt und lieber so programmiert, dass man auf Javascript verzichten kann. Alle meine Seiten sind deshalb immer noch so aufgebaut, dass bei deaktiviertem Javascript wenige 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 Anzeige der Bilder in einer Lightbox auf Insel-Kos.info

PHP

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 auf meinen Seiten 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.


Zurück zum Seitenanfang ..

Responsives Web-Design

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. Auch das hatte große Auswirkungen auf die Webentwicklung.

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.

Darstellung am PC
Darstellung der Seite Schueller-net.de an einem PC

Darstellung auf dem Smartphone
Darstellung derselben Seite auf dem Smartphone
Zurück zum Seitenanfang ..

Tools für die Webentwicklung

Für die Webentwicklung verwende ich folgende Werkzeuge:
Zurück zum Seitenanfang ..