Webprogammierung

1. Vorgeschichte
1.1 Der Start des Web und des Webdesigns

1989: Während der Arbeiten an CERN hatte Tim Berners-Lee vor, ein globales Hypertext-Projekt zu schaffen, das später als das World Wide Web bekannt wurde.

1991 bis 1993: Das World Wide Web wurde geboren. Anfänglich konnten nur Textseiten mit Hilfe eines einfachen Linien-Webbrowsers ausgelesen werden.

1993: Marc Andreessen und Eric Bina erschufen den Webbrowser Mosaic. Zu dieser Zeit gab es vielfache Browser, deren Mehrheit jedoch auf Unix basierte. Diese Unix-Browser erschwerten aber das Lesen eines Textes. Auch gab es keine einheitlichen, grafischen Designelemente wie Bilder oder Töne.

1994: Das World Wide Web Consortium (W3C) wurde geschaffen, um das volle Potential des World Wide Web zu nutzen. Ebenso wurden allgemeine Protokolle entwickelnd, die zum Fortbestand des W3C führten und dessen Zwischenfunktionsfähigkeit sichern. Durch diese Entwicklung jedoch wurden weitere Organisationen davon abgehalten, neue Browser und Programmiersprachen zu entwickeln, die das World Wide Web als Ganzes verändern hätten können.

1994: Andreesen gründet eine Kommunikationshandelsgesellschaft. Diese wurde später bekannt als Netscape Communications und entwickelte den Browser Netscape Navigator. Netscape schuf seine eigenen HTML-Elemente ohne Rücksicht auf den traditionellen Standardprozess. Zum Beispiel beinhaltete Netscape 1.1 eigene HTML-Programmierungen, um selbstständig Hintergrundfarben zu ändern und Texte auf Webseiten zu formatieren.

1996 bis 1999: Die sogenannten „Browser-Kriege“ beginnen. Im Zuge dieser Browser-Kriege begannen Microsoft und Netscape um die jeweilige Browser-Überlegenheit zu kämpfen. Während dieser Zeit wurden viele neue Technologien entwickelt, wie z. B. Formatvorlagen, JavaScripte und das dynamische HTML. Im Allgemeinen führte diese Browser-Konkurrenz zu vielen positiven Entwicklungen und half ebenso dem Webdesign, sich mit schnellen Schritten zu entwickeln.

1.2 Entwicklung des Webdesigns

1996 veröffentlichte Microsoft seinen ersten wettbewerbsfähigen Browser, der über eigene Eigenschaften und Elemente verfügte. Das war auch der erste Browser, welcher Formatvorlagen unterstützte, die zu dieser Zeit nicht gern gesehen waren. Man begriff sehr schnell das Potenzial der HTML-Programmierung, um damit komplexe Mehrsäulenlayouts zu schaffen, die sonst nicht möglich waren. In dieser Zeit hatten Design und gute Ästhetik den Vortritt, weswegen nur sehr wenig Aufmerksamkeit auf Schematik und Webzugänglichkeit gelegt wurde. HTML-Seiten wurden durch ihre Designoptionen noch mehr mit früheren Versionen des HTML beschränkt. Um komplizierte Designs zu schaffen, mussten viele Webentwerfer komplizierte Tabellenstrukturen verwenden. Teilweise sogar eigene GIF-Bilder verwenden, um leere Tabellenzellen daran zu hindern zusammenzubrechen.

Auch wurde von W3C CSS im Dezember 1996 eingeführt, um Präsentation und Layouts zu unterstützen. Das erlaubte dem HTML-Code, schematisch zu sein und verbesserte die Webzugänglichkeit.

Ebenso wurde Flash (ursprünglich bekannt als FutureSplash) entwickelt. Anfänglich bestand ein sehr einfaches Layout, das nur grundlegende Werkzeuge beinhaltete, aber es ermöglichte den Webentwerfern, HTML zu übertreffen. Mittlerweile ist Flash sehr fortgeschritten und ermöglicht es dem Anwender komplette Seiten zu entwickeln.

1.3 Ende der ersten Browserkriege

1998 veröffentlichte Netscape seinen Netscape Communicator Code unter einer Open-Source-Lizenz, so dass sich nun tausende von Entwicklern bei der Verbesserung der Software beteiligen konnten. Netscape beschloss jedoch diese Veröffentlichung zu stoppen, um die Entwicklung des Open-Source-Browsers zu koordinieren und um eine vollständige Applikationsplattform zu erweitern.

Es wurde das Web Standards Project gebildet. Dieses förderte die Entwicklung von Browsern auf HTML- und CSS-Standards durch die Schaffung von Acid1, Acid2 und Acid3.

2000 war ein großes Jahr für Microsoft. Der Internet Explorer für Mac OS Classic wurde freigegeben. Es war der erste Browser der vollständig HTML 4.01 und CSS 1 unterstützte. Der Internet Explorer setzte eine neue Messlatte in Bezug auf die Einhaltung von Standards. Er unterstützte als erster Browser das PNG-Format. Während dieser Zeit wurde Netscape verkauft und gab offiziell die Führung in den Browser-Kriegen an Microsoft ab.

1.4 Das 21. Jahrhundert

Seit dem Beginn des 21. Jahrhunderts begann sich die Nutzung des Web mehr und mehr in das Leben der Menschen zu integrieren. Auch die Technologie veränderte sich. Es gab signifikante Veränderungen in der Art, wie Menschen das Web nutzten, auf dieses zugriffen und wie Seiten ausgelegt wurden.

1.5 Die modernen Browser

Das moderne Browser-Zeitalter leitete das Ende der Browser-Kriege ein. Neue Open Source Browser kommen auf den Markt, was bedeutet, dass sie zu schnelleren Entwicklungszyklen neigen und mehr Standards unterstützen als je zuvor.

1.6 Die neuen Standards

Das W3C hat neue Standards für HTML (HTML5) und CSS (CSS3), sowie neue JavaScript API freigegeben. Während jedoch der Begriff HTML5 nur verwendet wird, um die neue Version von HTML zu bezeichnen, bezieht sich JavaScript-API auf die Gesamtheit von HTML5, CSS3 und JavaScripten.

2. Content-Management-System

Ein Content-Management-System (kurz CMS, deutsch Inhaltsverwaltungssystem) ist eine Software zur gemeinschaftlichen Erstellung, Bearbeitung und Organisation von Inhalten (Content) zumeist in Webseiten, aber auch in anderen Medienformen. Diese können aus Text- und Multimedia-Dokumenten bestehen. Ein Autor mit Zugriffsrechten kann ein solches System in vielen Fällen mit wenig Programmier- oder HTML-Kenntnissen bedienen, da die Mehrzahl der Systeme über eine grafische Benutzeroberfläche verfügt.

Besonderer Wert wird bei CMS auf eine medienneutrale Datenhaltung gelegt. So kann ein Inhalt auf Wunsch beispielsweise als PDF- oder als HTML-Dokument abrufbar sein; die Formate werden bei volldynamischen Systemen erst bei der Abfrage generiert. Meist wird dafür eine Datenbank verwendet. Daneben gibt es Flat-File-Content-Management-Systeme, bei denen die Inhalte in Dateien gespeichert werden.

WordPress, Joomla, TYPO3 und Drupal zählen zu den bekanntesten und sind derzeit die meistverwendeten Open-Source-CMS.

2.1 Begriff

Obwohl fachlich präzise vom Web-Content-Management-System (kurz WCMS) gesprochen werden müsste, wird der globalere Begriff CMS im verbreiteten Sprachgebrauch für Systeme oder Module verwendet, die ausschließlich dem Erstellen von Websites dienen. Desktop-CMS bewerkstelligen dies auf einem lokalen Rechner mit anschließendem Hochladen, andere Systeme direkt auf einem ausliefernden Webserver.

In Abgrenzung von Systemen mit offline verwendetem Inhalt (Content) spricht man bei obigen Systemen auch von WCMS. Damit wird der Unterschied zu jenen Systemen etwa im Verlagsbereich verdeutlicht, die neben dem Web auch andere Ausgabemedien bedienen, etwa Print oder Radio. Web-Content-Management kann auch als eine Komponente im Enterprise-Content-Management gesehen werden.

2.2 Funktionen

Content Management Systeme müssen beispielsweise folgendes leisten:

  • Möglichkeit, unterschiedliche Rollen und Verantwortlichkeiten an verschiedene Nutzer und Content-Kategorien/Typen zu vergeben
  • Identifizieren der möglichen Nutzer und ihrer Rollen
  • Definition der Verarbeitungsprozesse als Workflow
  • Möglichkeit, Nachrichten (z. B. per E-Mail) an Verantwortliche zu senden, sobald sich am Content bestimmter Unterlagen etwas ändert
  • Nachhalten und Verwalten verschiedener Versionen einer Unterlage
  • Semantisches Ordnen der Inhalte
  • Veröffentlichen des Contents in einer Ablage (z. B. einer Datenbank).
  • Export des Content in eine andere Arbeitsumgebung oder Import aus einer solchen.
2.3 Darstellung

Die Hauptaufgabe eines CMS ist die Verwaltung und zielgruppengerechte sowie barrierefreie Darstellung von Text- oder Multimediainhalten für Webbrowser auf unterschiedlichen Geräten. Technisch trennen Content-Management-Systeme die Darstellung mit Skins von den Datenquellen ab. Neben der Darstellung auf Personal Computern sind auch die kleineren Formate und unterschiedliche Bedienmöglichkeiten von Smartphones und anderen alternativen Geräten zu beachten. Content-Management-Systeme nutzen hierzu Skins in Responsive Webdesign oder bieten dedizierte mobile Webseite an. Zusätzlich sollen Inhalte mit einer Druckversion gut druckbar sein.

Zusätzlich zum Hauptinhalt einer Seite werden weitere Inhalte mit eingebunden, so z. B.

  • eine Möglichkeit zur Internationalisierung (z. B. Inhalte in verschiedenen Sprachen, unterschiedliche Währungen und Preise, rechtliche Informationen)
  • Metainformationen wie Veröffentlichungsdatum, Autor, Inhaltsverzeichnis,
  • Mehrfachverwendung von Inhalten durch Transklusionen und
  • externe Datenquellen wie z. B. Kalender, Karten oder Nutzerdaten (z. B. Gravatar) über dritte Programmierschnittstellen (API) oder Webservices wie Web-Feeds.

Neben der Darstellung einzelner Inhalte bietet das CMS automatisch alternative Inhaltsaggregation an:

  • Gruppierungen zu Kategorien,
  • zeitliche Veränderung und neu erstellte Inhalte,
  • maschinenlesbare Ausgabe von Inhalten für Web-Feeds (z. B. Atom, RSS), Mikroformate oder Programmierschnittstellen zur Integration in andere Dienste (z. B. als JSON),
  • ähnliche, eventuell für den Leser interessante, Inhalte sowie

Durch das integrierte Content-Life-Cycle-Management können Inhalte automatisch zeitlich begrenzt veröffentlicht oder archiviert werden.

Integrierte Suchmaschinen ermöglichen darüber hinaus dem User, die Inhalte einer Webseite auch zu durchsuchen. Diese Suchmaschinen sind entweder schon in der Software integriert oder werden als externe Dienste eingebunden. OpenSearch erlaubt den Zugriff auf die Suchfunktion auch von außerhalb der Webseite. Nicht zu verwechseln sind diese Möglichkeiten mit denen sogenannter Metasuchmaschinen.

2.4 Editieren

Das Erstellen und Bearbeiten von Inhalten erfolgt meist über ein Online-Textverarbeitungs-Modul (sog. Inline Editing bzw. In Place Editing) oder Dateien direkt auf dem Webhost; ältere Systeme bieten noch gesonderte Clientsoftware zur Bearbeitung an.

2.5 Backend von WordPress

Bei der Online-Textverarbeitung wird entweder ein gesondertes Backend angeboten oder Berechtigte können direkt in der Darstellung bearbeiten. Die Texteingabe erfolgt, je nach Kenntnisstand des Bearbeiters beziehungsweise Umfang des Content-Management-Systems, entweder über einen WYSIWYG- oder einen Texteditor. Dabei können Inhalte in vereinfachter Auszeichnungssprache (zum Beispiel Markdown) oder reinem HTML hinterlegt werden. Um den Inhalt in seiner endgültigen Version zu sehen, wird meist eine Vorschaufunktion geboten. Zusätzlich werden Assistenten zu dynamischen Einbindung von Hyperlinks, Computergrafiken und anderen Elementen angeboten.

Mit einer integrierten Versionsverwaltung wird der Erstellungsprozess gleichzeitig archiviert und protokolliert. Bestimmte Versionen können so im Fehlerfall wiederhergestellt werden.

2.6 Berechtigung

Um unberechtigte Änderungen zu verhindern und um Änderungen nachvollziehen zu können, müssen sich Bearbeiter authentifizieren und werden anhand eines Berechtigungskonzepts Benutzerrollen zugewiesen. Benutzer werden meist hierarchisch unterschieden, so können etwa bestimmte Editoren Artikel anlegen, müssen aber von Administratoren freigeschaltet werden. Ein vertikales Rollensystem erlaubt dann bestimmten Benutzergruppen nur in bestimmten Bereichen zu arbeiten (z. B. Abteilung). Diese Rollen- und Rechtestruktur kann einfache Freigaben nach dem Vier-Augen-Prinzip oder komplexe Workflows abbilden. An solchen Workflows können sich mehrere Personen mit verschiedenen Aufgaben beteiligen, z. B. Autoren, Editoren und Webmaster, die Inhalte erzeugen, genehmigen oder freischalten. Hier spricht man von Redaktionssystemen.

2.7 Benutzerinteraktion

Vor allem Social-Media-Webseiten, wie z. B. Blogs, zeichnen sich durch die Möglichkeit der inhaltlichen Einbindung des Users aus. User können Einträge in Gästebüchern, Kommentare zu speziellen Inhalten hinterlassen oder externe Trackbacks setzen. Bei User-generated content vermischen sich Userinteraktion und Inhaltserstellung.

Neben der Benutzerfreundlichkeit müssen Funktionen zu Userinteraktion vor allem leistungsfähig gegen Suchmaschinen-Spamming sein. Das wird vor allem mit Captchas, nofollow und DNS-based Blackhole List erreicht.

2.8 Technische Funktionen

In Zusammenarbeit mit dem Webserver können CMS teilweise auch Aufgaben der Übertragung und des URL-Aufbaus übernehmen. Vor allem Domainweiterleitungen, Clean URLs und Permalinks werden im CMS konfiguriert. Auch Fehlerseiten (404) können von einem CMS ausgeliefert werden.

Durch Mandantenfähigkeit können mehrere unabhängige Webseiten betrieben werden.

Um CMS möglichst individuell erweitern zu können, werden meist Plug-ins angeboten.

Werden weitere komplexere Funktionen abgebildet, spricht man von einer Webanwendung.

2.9 Technik

Content-Management-Systeme sind größtenteils plattformunabhängig, da sie in Skriptsprachen geschrieben werden. Alle gängigen Skriptsprachen wie PHP, Ruby, Perl, Python oder JavaScript werden von den gängigsten Webservern (Apache, IIS, nginx) unterstützt. ASP.NET benötigt zusätzlich als Laufzeitumgebung das .NET-Framework oder mono. Die eigentlichen Inhalte werden oft in Datenbanken gespeichert, da diese schnellere Zugriffe erlauben und Datenbankindizies für Kategorien, Listen und Feeds zur Verfügung stellen. Kleinere CMS können Inhalte aber auch in Textdateien speichern. MySQL als Datenbank wird von praktisch allen CMS unterstützt, aber häufig finden auch PostgreSQL oder Microsoft SQL Server Verwendung. Content-Management-Systeme verknüpfen die gespeicherten Inhalte mit Formatvorlagen und übergeben diese an den ausliefernden Webserver. Softwarearchitektonisch kommt meist das Entwurfsmuster Model View Controller zur Anwendung. Aufgrund der engen Verbindung und Abhängigkeit zwischen diesen Softwareelementen werden diese meist gemeinsam installiert. Für Open-Source-CMS gibt es die Bundles LAMP und für Entwicklungsumgebungen XAMPP. Physisch laufen CMS auf Hosts, die aber von Hostern als Webhosting oder auch als Application Service angeboten werden. Vor allem Open-Source-CMS versuchen nicht alle möglichen oder gewünschten Funktionen nativ anzubieten, sondern durch serverseitige Hooks und clientseitige Standardbibliotheken (z. B. jQuery) die Integration von Plug-ins zu ermöglichen.

2.10 Sicherheit

Die starke Verbreitung von CMS‘ im Internet einerseits und die Vielzahl an Funktionen und die damit verbundene Komplexität führen dazu, dass laufend Sicherheitslücken aufgedeckt werden. Viele davon werden als Common Vulnerabilities and Exposures registriert: In den Jahren 2002–2015 wurden 143 Lücken in Drupal, 179 in TYPO3, 170 in Joomla! und 205 in WordPress eingetragen. Oft dienen diese als Einfallstor bei Hackerangriffen.

Im Jahr 2013 führte das BSI eine Sicherheitsstudie der Systeme Drupal, Joomla!, Plone, TYPO3 und WordPress durch. Als wichtig für einen sicheren Betrieb wird neben der Sicherheit der Software auch eine richtige Konfiguration und ein angemessenes Systemmanagement angesehen. Für vier unterschiedliche Nutzungsszenarien werden unterschiedliche Empfehlungen gegeben.

„… die betrachteten Open Source Projekte [haben] nachweislich einen Sicherheitsprozess implementiert. Die Software hat Produktcharakter mit einem veröffentlichten Releaseplan, einem transparenten Bugtracker etc.“

„Keines der betrachteten Systeme kann jedoch ‚as is‘, unbeobachtet oder durch den unbedarften Anwender betrieben werden.“

„Szenario 1: „Private Event Site“ […] Für dieses Szenario lautet die Empfehlung, keine eigene Website aufzubauen, sondern einen Dienst aus dem inzwischen breiten Spektrum professioneller Dienstleister in Anspruch zu nehmen.“

2.11 Dynamik und Statik

CM-Systeme unterscheiden sich in der Art der Auslieferung der erstellten Seiten an den Nutzer:

2.12 Volldynamische Systeme

Volldynamische Systeme erzeugen angeforderte Dokumente bei jedem Aufruf dynamisch neu, das heißt, Vorlagen und Inhalte werden erst bei Abruf interpretiert bzw. zusammengeführt und ausgegeben. Vorteile: Die Seite ist immer „aktuell“; eine Personalisierung für den Surfer ist in der Regel sehr einfach oder sogar bereits vorhanden. Nachteile: Die Neuberechnung bei jeder Seitenauslieferung kann unter hoher Last (zum Beispiel hoher Besucherandrang) zu einer verzögerten Auslieferung der Seiten oder bei mangelhafter Ausstattung/Konfiguration an Rechenkapazität im Verhältnis zur Anzahl gleichzeitig bedienter Nutzer zur Serverüberlastung und im Extremfall zum Systemstillstand führen. Eine Maßnahme zur Verringerung der Last ist Caching.

2.12.1 Statische Systeme

Statische Systeme erzeugen die einzelnen Webseiten aus den Vorlagen und Inhalten als statisch abgelegte Datei im Dateisystem oder ggf. in einer Datenbank. Als Endprodukt erhält man somit Dokumente, die keinerlei Interpretation seitens einer Servertechnologie wie z. B. ASP, JSP oder PHP mehr benötigen und daher direkt durch den Webserver ausgegeben werden können, was sich in der Ausgabegeschwindigkeit zeigt. Dies hat den Vorteil, dass selbst einfachere Webhosting-Produkte als Basis ausreichend sein können. Nachteil kann sein, dass möglicherweise gewachsene Anforderungen durch größere Komplexität in Verbindung mit dem Wunsch nach sehr kurzen Aktualisierungszyklen ein solches System als ungeeignet entpuppen.

Rein statische Systeme bilden den historischen Ursprung der CMS, werden jedoch – in dieser Ursprungsform – nur noch selten eingesetzt.

2.12.2 Hybride Systeme

Hybride Systeme kombinieren die Vorteile der statischen und der volldynamischen Seitenerzeugung. Lediglich die Inhalte, die dynamisch aus einer Datenbank generiert werden müssen (z. B. News, Suchabfragen, personalisierte Inhalte oder Shopdaten), werden zur Laufzeit aus der Datenbank ausgelesen. Alle anderen Inhalte, die nicht laufend Änderungen unterzogen werden (wie etwa das Seitengerüst, die Navigation, aber auch bestimmte Texte und Bilder), liegen statisch vor.

2.12.3 Halbstatische Systeme

Halbstatische Systeme generieren den Inhalt so, dass dieser statisch ist, aber gleichzeitig auch dynamisch, d. h., es werden alle Daten direkt in statisch generierten Dateien gespeichert, die dann bei Abruf sofort ausgegeben werden. Die dynamischen Inhalte werden dann generiert, wenn ein Code in der Programmsprache in die Datei eingebunden wird oder einzelne Datensätze geändert beziehungsweise neu angelegt werden.

3. Referenzen

http://www.webprogrammierung-lernen.de/

https://de.wikipedia.org/wiki/Webdesign

http://studieren.wi.fh-koeln.de/kurse/homepage/ftp/SAI01-Web-Programmierung.pdf

Zurück zum Anfang