Webentwicklung
Internet- bzw. Webseiten erstellen – gerade für Einsteiger oft ein Buch mit sieben Siegeln. Dabei ist der Anfang nicht so schwer. Grundlage ist immer HTML – eine einfache Auszeichnungssprache, deren Elemente von Webbrowsern entsprechend umgesetzt werden. Zusätzlich werden heute gerne Cascading Style Sheets (CSS) eingesetzt, um die Formatierung vom HTML-Quelltext zu trennen. Das erleichtert spätere Änderungen am Layout. Weiterführende Information zum aktuellen Standard HTML5 sind unter Links am Ende dieses Artikels zu finden.
Linux bzw. Ubuntu ist prinzipiell das ideale Entwicklungssystem für Webseiten: Von der Erstellung bis zum Webserver sind alle benötigten Programme schon vorhanden bzw. können einfach über die Paketverwaltung nach installiert werden. Allerdings sollte beachtet werden, dass die verfügbaren Programme – je nach persönlichen Anspruch und Vorwissen – nicht immer in der gleichen Liga wie kommerzielle Produkte spielen.
Prinzipiell muss man zwischen (manuell erstellten) „statischen“ und erst auf dem Webserver erzeugten „dynamischen“ Webseiten unterscheiden. Letztere werden mit Skript-Sprachen wie PHP, Perl oder Python programmiert, um komplexe Webanwendungen wie beispielsweise dieses Wiki zu realisieren. JavaScript wird dagegen direkt im Browser ausgeführt und dient zu Realisierung von „dynamischem HTML“ wie in AJAX.
Für größere Projekte werden sogenannte „Web-Frameworks“ eingesetzt, welche für viele Aufgaben schon fertige Bibliotheken mitbringen, z.B. zur Datenbankanbindung, Überprüfung von Eingabedaten etc. Bekannte Web-Frameworks sind z.B. Ruby on Rails oder Django.
Webseiten erstellen¶
Um Webseiten zu erstellen, wird kein spezielles Programm benötigt: es handelt sich um ganz normale Textdateien. Ein Texteditor wie gedit (GNOME) oder Kate (KDE) und HTML-Grundkenntnisse reichen aus. Wer solche Editoren benutzt, muss das Ergebnis in einem separat geöffneten Browser anzeigen lassen.
Der einfachere Weg, um Webseiten herzustellen, ist der „Export als HTML-Seite“ in Programmen wie LibreOffice bzw. OpenOffice. Dabei lernt man zwar so gut wie nichts über HTML und über die Qualität des erzeugten HTML-Codes wird oft gestritten, dennoch ist dieser Weg für manche Zwecke und insbesondere Gelegenheitsanwender völlig ausreichend.
Spezielle Webeditoren¶
Es gibt eine Reihe von speziellen Webeditoren. Manche setzen das Konzept WYSIWYG („What you see is what you get“) um und erleichtern damit den Einstieg. In diesen Programmen wird sowohl HTML-Quelltext als auch das fertige Endergebnis in einem Programm dargestellt.
Profis beurteilen Editoren eher nach Kriterien wie „Syntax Highlighting“ (Farbmarkierungen im Quelltext), „Code Completition“ (automatische Quelltext-Ergänzung) sowie der Fähigkeit, externe Programme wie Syntax- oder URL-Tester einzubinden. Oder benutzen gleich eine Entwicklungsumgebung.
Entwicklungsumgebungen¶
Entwicklungsumgebungen (IDE) fassen die verschiedenen zur Entwicklung von Programmen bzw. Internetseiten verwendeten Werkzeuge unter einer Oberfläche zusammen. Während Einsteiger oft von den Möglichkeiten überfordert sind, erlaubt eine IDE Fortgeschrittenen ein effektiveres Arbeiten. Kernpunkt einer IDE ist aber weiterhin ein den eigenen Wünschen entsprechender Editor.
Testen der eigenen Webseite¶
Um Internetseiten zu betrachten, wird ein Webbrowser benötigt. Was sich zunächst trivial anhört, führt in der Praxis immer wieder zu Problemen: mancher Webbrowser setzt nicht alle Standards des W3C entsprechend um. Erfahrene Entwickler prüfen daher ihre Seiten mit verschiedenen Browsern.
Unter Linux bzw. Ubuntu stehen fast alle Browser zur Verfügung. Die einzigen Ausnahmen sind der „Internet Explorer“ (IE; Windows) und „Safari“ (Mac OS X). Ersterer kann aber über den Umweg einer Virtuellen Maschine (VM) trotzdem genutzt werden. Alternativen zur Installation verschiedener Browser sind die Online-Dienste BrowserShots 🇬🇧 und FWP Screenshots 🇩🇪. Beide Online-Dienste erstellen von der Website in den ausgewählten Browsern Screenshots. FWP Screenshots bietet darüber hinaus noch weitere Funktionen, wie eine Nutzer- und Projektverwaltung, HTML- und CSS-Validatoren und "Screenshot-Fading". Dabei werden der Referenz-Browser-Screenshot und der vergleichende Browser-Screenshot übereinander gelegt. Somit kann man selbst kleinste Unterschiede und Verschiebungen entdecken.
Browser-Erweiterungen¶
Für Webentwickler stehen spezielle Browser-Erweiterungen (Plugins, Add-Ons) zur Verfügung.
Firefox:
Web-Entwickler (in Firefox integriert)
Mozilla Web Developer's Toolbox 🇬🇧 🇩🇪 - eine Sammlung von 13 Add-ons für Webdesigner. Die enthaltenen Programme wie beispielsweise ColorZilla, Web Developer Toolbar oder Firebug können auch einzeln installiert werden.
Opera:
Dragonfly 🇩🇪 (in Opera integriert)
Chromium:
Web Inspector (in Chromium integriert)
Das Bookmarklet Design 🇬🇧 gibt es für verschiedene Browser.
Barrierefreiheit¶
Um die Nutzung auch für Menschen mit einer Behinderung (Stichwort Barrierefreiheit) zu ermöglichen, sollte man das Endergebnis auch mit einem reinen Text-Browser wie z.B. Lynx oder w3m überprüfen. Designfehler fallen hier schnell auf.
Webseite veröffentlichen¶
Um Webseiten im (Intra- oder) Internet anzubieten, wird sog. „Webspace“ bzw. Speicherplatz auf einem (öffentlichen) Webserver benötigt. Mit letzterem kommuniziert der Browser des Benutzers, wenn eine Internetadresse (URL) aufgerufen wird. Weltweit werden auf der Mehrzahl der Webserver Programme aus dem Linux-Umfeld genutzt. Eine führende Rolle spielt dabei der Webserver Apache, es stehen aber auch Alternativen zur Verfügung.
Während manche Internet-Zugangsprovider (begrenzten) Speicherplatz umsonst anbieten, verlangen andere eine monatliche Gebühr. Wenn die eigenen Webseiten unter einer eigenen Adresse verfügbar sein sollen, wird eine kostenpflichtige Domain benötigt.
FTP¶
Um fertige Webseiten auf einen Webserver zu kopieren bzw. hochzuladen, wird traditionell FTP (File Transfer Protocol) verwendet. Dabei kontaktiert man normalerweise einen auf dem Webserver vorhandenen FTP-Server. Manchmal ist ein FTP-Client schon als Funktion des eingesetzten Dateimanagers (z.B. in Nautilus) vorhanden. Mehr Komfort bieten spezielle FTP-Programme.
Eigener Webserver¶
Anstatt einen öffentlichen Webserver zu benutzen, kann man auch einen Webserver auf dem eigenen Rechner betreiben. Damit kann besonders realitätsnah entwickelt und gleich getestet werden. Dies ist auch die einzige Möglichkeit, mit Skript-Sprachen dynamisch erzeugte Webseiten direkt auf dem eigenen Rechner (optisch) zu überprüfen. Einen Überblick über die benötigte Serversoftware liefert der Abschnitt Webserver.
Moderne Internetseiten verwenden ein ganzes Bündel zusätzlicher Techniken wie Skript-Sprachen (PHP, Perl, Python etc.) und eine Datenbank (MySQL u.a.). Wenn man alle diese Komponenten unter Linux betreibt, spricht man auch von einem LAMP-System (Linux, Apache, MySQL und PHP bzw. Perl oder auch Python).
Hinweis:
Das häufig für Windows empfohlene „LAMP“-ähnliche System XAMPP bereitet unter Ubuntu immer wieder Probleme. Da Ubuntu (fast) alle in XAMPP enthaltenen Serverdienste auch über die offiziellen Paketquellen bereitstellt, ist die Nutzung der Einzelpakete der bessere Weg. Eine Kurzanleitung stellt der Artikel LAMP bereit.
Soll der eigene Webserver auch aus dem Internet erreichbar sein, wird häufig DynDNS eingesetzt. Manchmal ist DynDNS als integrierte Funktion bereits im Router enthalten, dann muss man sich mit Portweiterleitung (port forwarding) beschäftigen.
Achtung!
Die Erreichbarkeit des eigenen Webservers aus dem Internet kann eine Sicherheitslücke darstellen und sollte gründlich überdacht werden!
Content Management Systeme¶
Content Management Systeme (CMS) erleichtern durch die grundsätzliche Trennung von Layout und Inhalt insbesondere die spätere Pflege von Internetseiten. Dazu wird in der Regel ein spezieller Online-Editor verwendet, der auch ohne HTML-Kenntnisse von Endanwendern eingesetzt werden kann. Entsprechende Systeme erfordern in der Regel ein LAMP-System als Voraussetzung.
Obwohl sich alle CMS auch auf einem lokalen Webserver betreiben lassen, kann die 1:1 Übertragung ins Internet für Probleme sorgen. Der Artikel Dateien und Berechtigungen 🇩🇪 erklärt die Gründe exemplarisch am Beispiel des CMS Websitebaker.
Bildbearbeitung¶
Was wäre das Internet ohne Bilder – schlicht und einfach langweilig. Daher muss sich der angehende Webmaster früher oder später auch mit Bildbearbeitung beschäftigen. Eine Übersicht verschiedener Programme findet sich unter Grafik (Abschnitt „Bildbearbeitung“).
Wer dagegen Symbole (Icons) aller Art für seine Webseiten benötigt, sollte sich in der Open Icon Library 🇬🇧 oder bei Find Icons 🇬🇧 umschauen. Wer keine Zeit hat, lange zu suchen, für den könnte evtl. das Silk Icon Set 🇬🇧 interessant sein.
Bildergalerien¶
Manch einer kommt mit Internetseiten über den Wunsch in Kontakt, Bildergalerien im Internet anzubieten. Das geht z.B. mit fgallery 🇬🇧 (Erstellung statistischer HTML-Seiten). Aber auch Bildverwaltungen wie Shotwell, F-Spot, digiKam und gThumb können (statische) Bildergalerien für Webseiten erzeugen.
Darüber hinaus gibt es fertige, meist auf PHP basierende Lösungen ohne Datenbank. Auch viele CMS und Blogs bieten entsprechende Galerie-Module an.
Sonstiges¶
Hier noch einige Programme, die zur Webentwicklung nützlich sein können und bisher nicht extra erwähnt worden sind.
GColor2 und KColorEdit (KDE) - Werkzeuge zum Umgang mit Farben und Farbpaletten
ScreenRuler 🇬🇧 - Bildschirm-Lineal (screenruler)
KRuler - Bildschirmlineal und Farbauswahl (KDE)
tidy 🇬🇧 - Syntaxprüfung für HTML und XML (in den offiziellen Paketquellen enthalten)
gURLChecker 🇬🇧 - Link-Checker (gurlchecker)
Mozilla Thimble 🇬🇧 - Webseiten online erstellen
Pencil 🇬🇧 - Diagrammerstellung und GUI-Prototyping
Doxygen - Dokumentation aus PHP oder Python Code erstellen
Cross-Plattform-Editoren (Editoren für Windows, können unter Linux mit Wine genutzt werden)
PSPad - nützliche integrierte HTML-Werkzeuge
Webocton-Scriptly - auch als portable Version
Laminas - Eine Bibliothek von PHP-Komponenten zum Erstellen dynamischer Webanwendungen
Links¶
Linux für Webworker 🇩🇪 - sechsteilige Artikel-Serie für Ein- und Umsteiger, interessant wird es ab
Programmierung Übersichtsartikel zu Programmiersprachen, Programmen und Werkzeugen
HTML5¶
SELFHTML 🇩🇪 - umfangreiche deutschsprachige HTML und CSS Dokumentation
Mozilla Developer Network 🇩🇪🇬🇧 - sehr umfangreiche, teils deutschsprachige HTML, CSS und JavaScript Dokumentation der Mozilla Foundation
HTML5-Handbuch 🇩🇪 von Stefan Münz
QuirksMode.org 🇬🇧 - Kompatibilitäts-Tabellen für Webbrowser