?

Textformatierung
CSS ermöglicht eine ebenso einfache wie klare Textformatierung, die auch sehr schnell für alle Seiten geändert werden kann.

Hypertext Markup Language (HTML)

Jede Webseite liegt in HTML-Code vor. Dies ist der wichtigste Standard, er existiert bereits seit den Anfängen des Internets Anfang der 90er Jahre. Leider bietet er nur wenige Möglichkeiten für grafische Gestaltung oder Layout, und so hat man vor einigen Jahren noch Seitengestaltung mittels unsichtbarerer Tabellen und direkter Formatierungsbefehle an den einzelnen Elementen umgesetzt. Heraus kam eine Code-Suppe, äußerst schwer zu pflegen, kaum zu durchschauen, ein Irrweg – auch wenn manche Herstellungsprogramme (NetObjects Fusion, Dreamweaver) einem das Layouten mit der Maus vorgaukeln.

Cascading Style Sheets (CSS)

CSS ist heute das Maß aller Dinge im Webdesign. Mit CSS kann man Positionierungen und Ränder ebenso festlegen wie Schriftgrößen, Mouse-Over-Effekte usw. In den Quellcode müssen hierfür nur sehr wenige Steuerbefehle eingebaut werden, der Großteil der CSS-Formatierungen geschieht über CSS-Dateien, die man zusätzlich anlegt.

Die neuesten CSS-Standardisierungen sind runde Ecken, Schatten und – ganz neu – Transitions, bei denen ein Element im Lauf der Zeit seine Form und/oder Position langsam verändert. Die Entwicklung bleibt hier sicher nicht stehen.

Ältere Webseiten – also solche die älter sind als vielleicht 5 Jahre (oder solche von in die Jahre gekommenen Webseitendesignern) – sehen meisten "altbacken" aus. Meistens liegt es am damals üblichen Tabellendesign, Frames, an Menüs, die aus Bitmaps erzeugt wurden oder ähnlich umständlichen damaligen Lösungen.

Es ist unglaublich, was in CSS-Design steckt! Bei CSS Zengarden wurde eine festgelegte Inhaltsseite von vielen verschiedenen Designern über eigene CSS- und Bilddateien grafisch gestaltet. Hunderte Designs wurden bereits hochgeladen – eines eindrucksvoller als das andere.

Unsere Farbeninfo-Seiten im alten und im neuen Stil. Welche Variante ist besser?

?

CSS – Design
Links ein auf unsichtbaren Tabellen basierendes HTML Design. Rechts wurde das Design mit CSS angelegt. Dies sieht nicht nur schicker aus, es bietet auch viele Vorteile "unter der Haube".
example2
example2


Javascript

CSS und HTML sind keine Programmiersprachen, sondern beschreibende Befehlssätze, die der Formatierung dienen. Mit CSS kann man z.B. weder vernünftig rechnen noch Variablen an andere Stelle weitergeben oder Befehle ausführen. In diese Lücke stößt javascript. Hiermit kann man programmierte Elemente in die Webseite einfügen. Diese Programmierung läuft dann auf dem Rechner des Anwenders (Client).

Javascripte haben keinen Zugriff auf das Dateisystem des Computers, sie sind daher als ungefährlich einzustufen – gleichwohl schalten sehr sicherheitsbewusste Anwender die Ausführung von Javascript in ihrem Browser aus – immerhin wird ja ein Code auf dem Rechner ausgeführt, den man als Anwender nicht steuern kann.

Javascript hat nur soviel mit der Programmiersprache Java zu tun wie eine Amsel mit einem Walfisch. Der Name leitete sich eher aus den zu Zeiten der Namenswahl bekannten "Java-Applets" ab.

Beispiele wären ein Kontaktformular, Besucherzähler, Überprüfung von Formulareingaben, Kalender oder Buttons, die sich beim Überfahren mit der Maus ändern. Viele Javascripte wurden schon geschrieben – nehmen wir an, jedes sei ein Buch...

jQuery

...ist eine Javascript-Bibliothek. Der Webseitendesigner braucht hiermit nicht mehr javascript zu beherrschen, sondern nur noch ein paar Steuerbefehle. Mit jquery stehen eindrucksvolle Bildpräsentationen ohne großen Aufwand zur Verfügung (Slideshow, Galerie, Lightbox). Mit dem Akkordeon-Element kann man Seiteninhalte "einklappen" und somit Platz auf der Webseite sparen.

Es gibt weitere Javascript-Bibliotheken: "Prototype", "script.aculo.us" oder "Adobe Spry" – jede von ihnen widmet sich verschiedenen Aufgabenfeldern.

Neben dem großen Vorteil, dass mächtige und eindrucksvolle Funktionen in Windeseile in Seiten eingebaut werden können, besteht auch der Nachteil, dass man mit "Kanonen auf Spatzen" schießt, dass die Funktionen nicht angepasst werden können – jedenfalls nicht für den normalen Webgestalter außerhalb der (zahllosen) vorbereiteten Varianten.

?

jQuery – Slideshow
jQuery bietet viele Varianten der attraktiven Bildwiedergabe. In diesem endlos laufenden "Nivo Slider" werden verschiedene Übergänge eingesetzt. Unter dem Slider befindet sich eine klickbare Anzeige des aktuellen Bildes – Bildunterschriften sind möglich und vieles mehr...
Eine auf verschiedene Weise formatierte Bildunterschrift mit einem Link.


Hypertext Preprocessor, Personal Home Page Tools (PHP)

Programmierung mit Javascript – schön und gut für Effekte, die innerhalb der Seite stattfinden. Javascript kann aber keine externen Daten auslesen. Hier kommt PHP ins Spiel. Dies ist eine ebenso einfache wie umfangreiche Programmiersprache, die von allen Providern unterstützt wird. PHP wird auf dem Webserver ausgeführt – ein Sicherheits- und Geschwindigkeitsvorteil. Typisch für eine php-Programmierung ist, dass Webseitenbereiche, also HTML-Abschnitte, mit ihr zusammengestellt werden.

Hiermit bietet sich zunächst die Möglichkeit, gleich bleibende Elemente auf den Seiten in gesonderten Dateien abzuspeichern und diese jeweils mit nur einen include-Befehl einzufügen. Dieses Verfahren ist z.B. gebräuchlich bei Menüs.

Es gibt auch andere geeignete Programmiersprachen (asp, perl,..) – PHP hat sich aber mittlerweile am weitesten durchgesetzt.

My Structured Query Language (MySQL)

Richtig mächtig werden die Möglichkeiten von PHP, wenn man externe Datenquellen einbezieht. Jeder Provider bietet sogenannte "MySQL Datenbanken" an.

Datenbanken sind nicht viel mehr als Tabellen wie in Excel, wobei allerdings hunderte Tabellen in einer Datenbank möglich sind und in jeder Tabelle mehr als 4 Milliarden Zeilen... in der Praxis ist eine Datenbank selten größer als einige Tabellen mit jeweils ein paar hundert oder ein paar tausend Zeilen. Dies können beispielsweise Mitgliederdaten eines Vereins sein, die Produkte eines Unternehmens, Gesetzestexte, Internet-Links,... irgendwelche Daten, die man der Allgemeinheit zur Verfügung stellen möchte.

Für die Datenbereitstellung und Abfrage hat sich der MySQL Standard – eine kostenlose Variante von SQL durchgesetzt. Hiermit kann innerhalb der Daten nach bestimmten Kriterien gesucht werden – z.B. "Suche alle Vereinsmitglieder aus Hamburg, die älter sind als 40 und in deren Namen ein g vorkommt", "Suche Produkt xy samt Abbildung und Info" oder vieles andere...

Die Anzeige der Webseite nach einer solchen MySQL-Abfrage geschieht nun "dynamisch" mittels php. Php-Befehle zimmern Ergebnisse von MySQL-Abfragen und die übrigen Webseiteninhalte so zusammen, dass eine normale Internetseite entsteht.

Man kann die Daten per Internetseite auch verändern lassen. Dies wäre z.B. wichtig für eine Mitgliederverwaltung.

Eine Datenbank ist in den kleinen Paketen der Provider nicht enthalten, man muss sie üblicherweise extra bezahlen – dies ist aber nicht teuer.


?

Webshop
Mit wenigen Klicks soll der Webshop-Kunde von der Artikelliste zur Bestellung gelangen. Diese trifft beim Geschäftsinhaber per Email ein.

Die realen Seiten finden Sie unter Musterschmidt.



Content Management System (CMS)

Was will man mehr als umfangreiche Daten in ansprechender Form bereitzustellen? Ja richtig, da war noch was: Man will nicht wegen jeder kleinen Änderung auf der Webseite zu seinem Grafiker gehen, sondern die Seiten direkt im Internet in bequemen Eingabefeldern selbst bearbeiten können.

Ein Content Management System ist die Lösung. Bekannte Namen (alle kostenlos) sind z.B. Contao (früher Typolight), Joomla, Wordpress, Textpattern, oder Typo3.

Ein Content Management System ist eine Kombination der obigen Elemente php und MySQL, wobei in der Datenbank alle Webseiteninhalte abgelegt sind. Die Seiten werden dynamisch über das CMS erzeugt. Man kann die Inhalte im sogenannten "Backend" bearbeiten. Hierzu muss man sich auf der Seite per Passwort einloggen. Für ein CMS ist eine Datenbank notwendig, diese kann dann aber auch um weitere Inhalte (weitere Tabellen) ergänzt werden.

Vorteil ist auch, dass in einem CMS bereits viele Funktionen und Inhalte vorbereitet sind. So ist z.B. jquery (siehe oben) in Contao bereits integriert – somit stehen alle jquery Möglichkeiten ohne eigene Programmierung zur Verfügung. Es existieren auch vorbereitete Seitenvorlagen, die auf den eigenen Fall angepasst werden können, ohne dass großer Aufwand nötig ist. Es gibt auch fix und fertig vorbereitete Webshop-Lösungen (die aber in den seltensten Fällen auf den konkreten Fall "passen").

So relativiert sich der eigentlich größere Aufwand der Einrichtung einer CMS-Seite. Es ist auch möglich, eine CMS-Seite per CSS selbst völlig frei zu gestalten.

?

ContentManagement
Zwei von uns realisierte CMS-Lösungen. Eine CMS-Webseite selbst unterscheidet sich nicht von einer normalen Seite, es gibt aber ein "Backend" zur Dateneingabe. Links wurde das System "Textpattern" verwendet, rechts Wordpress.
example2
example2

Die realen Seiten finden Sie unter EFLM und EB-Montagen.

Weitere Beispiele: Strothmann-Stiftung (Webyep – ohne Datenbank), Dr. Volker Kuhlicke (Contao), Urlaub Wesermarsch (Contao), Dr. Klaus Dede (Contao), und andere...