ubuntuusers.de

ubuntuusers.deWikiWebentwicklung

Webentwicklung

Wiki/Icons/Oxygen/text-x-generic.png 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. Als Einführung oder als Nachschlagewerk wird allen Interessierten das Kompendium SELFHTML von Stefan Münz empfohlen, dass auch gedruckt {de} erhältlich ist. 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 {en}.

Wiki/Icons/Oxygen/accessories-text-editor.png

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.

Wiki/Icons/Oxygen/preferences-system-login.png

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 {en} und FWP Screenshots {de}. 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.

Das Bookmarklet Design {en} 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.

Wiki/Icons/service.png

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 {de} erklärt die Gründe exemplarisch am Beispiel des CMS Websitebaker.

Wiki/Icons/Oxygen/preferences-desktop-color.png

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.

Wer dagegen Symbole (Icons) aller Art für seine Webseiten benötigt, sollte sich in der Open Icon Library {en} oder bei Find Icons {en} umschauen. Wer keine Zeit hat, lange zu suchen, für den könnte evtl. das Silk Icon Set {en} interessant sein.

Bildergalerien

Manch einer kommt mit Internetseiten über den Wunsch in Kontakt, Bildergalerien im Internet anzubieten. Hier reicht die Spannbreite der verfügbaren Programme von JAlbum (Erstellung statistischer HTML-Seiten) bis Gallery oder Piwigo (eigener Server mit Datenbank ähnlich Flickr {de} oder Picasaweb {de}). Aber auch Bildverwaltungen wie Shotwell, F-Spot, digiKam, Picasa 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.

Wiki/Icons/Oxygen/help-browser.png

Sonstiges

Hier noch einige Programme, die zur Webentwicklung nützlich sein können und bisher nicht extra erwähnt worden sind.

  • Agave, GColor2 und KColorEdit (KDE) - Werkzeuge zum Umgang mit Farben und Farbpaletten

  • gpick {en} - Farbpaletten für Fortgeschrittene

  • ScreenRuler {en} - Bildschirm-Lineal (bis Ubuntu 11.04 und ab Ubuntu 12.04 wieder in den offiziellen Paketquellen enthalten)

  • KRuler - Bildschirmlineal und Farbauswahl (KDE)

  • tidy {en} - Syntaxprüfung für HTML und XML (in den offiziellen Paketquellen enthalten)

  • gURLChecker {en} - Link-Checker (in den offiziellen Paketquellen enthalten)

  • Mozilla Thimble {en} - Webseiten online erstellen

  • Pencil {en} - Diagrammerstellung und GUI-Prototyping

  • stylo {en} Online Website Prototyping (Entwickler-Blog {en})

  • Doxygen - Dokumentation aus PHP oder Python Code erstellen

  • Cross-Plattform-Editoren (Editoren für Windows, können unter Linux mit Wine genutzt werden)

HTML5

Diese Revision wurde am 29. September 2013 10:19 von aasche erstellt.
Die folgenden Schlagworte wurden dem Artikel zugewiesen: Büro, Übersicht, Netzwerk, Server, Programmierung, Internet, Einsteiger