[[Inhaltsverzeichnis(1)]] [[Bild(Wiki/Icons/Oxygen/text-x-generic.png, 64, align=left)]] Internet- bzw. Webseiten erstellen – gerade für Einsteiger oft ein Buch mit sieben Siegeln. Dabei ist der Anfang nicht so schwer. Grundlage ist immer [wikipedia:Hypertext_Markup_Language:HTML] – eine einfache Auszeichnungssprache, deren Elemente von Webbrowsern entsprechend umgesetzt werden. Zusätzlich werden heute gerne [wikipedia:Cascading_Style_Sheets: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 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 [:Serverdienste#Multimedia:Webanwendungen] wie beispielsweise dieses Wiki zu realisieren. [wikipedia:JavaScript:] wird dagegen direkt im Browser ausgeführt und dient zu Realisierung von „dynamischem HTML“ wie in [wikipedia: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#Ruby-on-Rails:Ruby on Rails] oder [:Django:]. = Webseiten erstellen = [[Bild(Wiki/Icons/Oxygen/accessories-text-editor.png, 48, align=right)]] Um Webseiten zu erstellen, wird kein spezielles Programm benötigt: es handelt sich um ganz normale Textdateien. Ein [:Editoren: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.org: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 [wikipedia: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 = [[Bild(Wiki/Icons/Oxygen/preferences-system-login.png, 48, align=right)]] Um Internetseiten zu betrachten, wird ein [:Internetanwendungen#Webbrowser: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 [wikipedia: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 [:Virtualisierung:Virtuellen Maschine] (VM) trotzdem genutzt werden. Alternativen zur Installation verschiedener Browser sind die Online-Dienste [http://browsershots.org/ BrowserShots] {en} und [http://www.fwpscreenshots.de/ 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. * Firefox: * Web-Entwickler (in Firefox integriert) * [https://addons.mozilla.org/de/firefox/collections/mozilla/webdeveloper/ Mozilla Web Developer's Toolbox] {en} {de} - 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: * [https://www.opera.com/dragonfly/ Dragonfly] {de} (in Opera integriert) * Chromium: * Web Inspector (in Chromium integriert) * [https://developers.google.com/chrome-developer-tools/?hl=de-DE Google Chrome Developer Tools] {en} * [https://webdesignledger.com/tools/9-useful-google-chrome-extensions-for-web-designers 9 Useful Google Chrome Extensions for Web Designers] {en} Das Bookmarklet [https://www.sprymedia.co.uk/article/Design 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. = Webseite veröffentlichen = [[Bild(Wiki/Icons/service.png, 48, align=right)]] 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 ([wikipedia:Uniform_Resource_Locator: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 [:Serverdienste#Webserver: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 [wikipedia:Domain:] benötigt. == FTP == Um fertige Webseiten auf einen Webserver zu kopieren bzw. hochzuladen, wird traditionell [wikipedia:File_Transfer_Protocol:FTP] ('''F'''ile '''T'''ransfer '''P'''rotocol) verwendet. Dabei kontaktiert man normalerweise einen auf dem Webserver vorhandenen [:Serverdienste#Datei-Druckserver:FTP-Server]. Manchmal ist ein FTP-Client schon als Funktion des eingesetzten Dateimanagers (z.B. in [:Nautilus:]) vorhanden. Mehr Komfort bieten spezielle [:FTP: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 [:Serverdienste#Webserver: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). {{{#!vorlage 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. {{{#!vorlage Warnung 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 [http://www.websitebaker2.org/topics/dateien-und-berechtigungen.php Dateien und Berechtigungen] {de} erklärt die Gründe exemplarisch am Beispiel des CMS [:Websitebaker:]. = Bildbearbeitung = [[Bild(Wiki/Icons/Oxygen/preferences-desktop-color.png, 48, align=right)]] 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#Bildbearbeitung:]. Wer dagegen Symbole (Icons) aller Art für seine Webseiten benötigt, sollte sich in der [sourceforge:openiconlibrary:Open Icon Library] {en} oder bei [https://findicons.com/ Find Icons] {en} umschauen. Wer keine Zeit hat, lange zu suchen, für den könnte evtl. das [http://www.famfamfam.com/lab/icons/ Silk Icon Set] {en} interessant sein. == Bildergalerien == Manch einer kommt mit Internetseiten über den Wunsch in Kontakt, Bildergalerien im Internet anzubieten. Das geht z.B. mit [https://www.thregr.org/~wavexx/software/fgallery/ fgallery] {en} (Erstellung statistischer HTML-Seiten). Aber auch [:Bilder_verwalten: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 [:Bilder_verwalten#Webbasierte-Bildverwaltungen:Lösungen ohne Datenbank]. Auch viele CMS und [wikipedia:Blog#Software:Blogs] bieten entsprechende Galerie-Module an. = Sonstiges = [[Bild(Wiki/Icons/Oxygen/help-browser.png, 48, align=right)]] Hier noch einige Programme, die zur Webentwicklung nützlich sein können und bisher nicht extra erwähnt worden sind. * [:Farbauswahl#GColor2:GColor2] und [:Farbauswahl#KColorEdit:KColorEdit] (KDE) - Werkzeuge zum Umgang mit Farben und Farbpaletten * [github:thezbyg/gpick:gpick] {en} - Farbpaletten für Fortgeschrittene ([packages:gpick:]) * [https://gnomecoder.wordpress.com/screenruler/ ScreenRuler] {en} - Bildschirm-Lineal ([packages:screenruler:]) * [:KRuler:] - Bildschirmlineal und Farbauswahl (KDE) * [sourceforge2:tidy:] {en} - Syntaxprüfung für HTML und XML (in den offiziellen Paketquellen enthalten) * [http://gurlchecker.labs.libre-entreprise.org/ gURLChecker] {en} - Link-Checker ([packages:gurlchecker:]) * [https://thimble.webmaker.org/ Mozilla Thimble] {en} - Webseiten online erstellen * [https://pencil.evolus.vn/ Pencil] {en} - Diagrammerstellung und GUI-Prototyping ## Seite nicht erreichbar, 23.09.2018 Beforge * [http://styloapp.com/ stylo] {en} Online Website Prototyping * [https://blog.alexmaccaw.com/stylo Stylo 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) * [wikipedia:PSPad:] - nützliche integrierte HTML-Werkzeuge * [wikipedia:Webocton-Scriptly:] - auch als portable Version * [:Laminas:] - Eine Bibliothek von PHP-Komponenten zum Erstellen dynamischer Webanwendungen = Links = * [https://www.peterkroener.de/artikel/ Linux für Webworker] {de} - sechsteilige Artikel-Serie für Ein- und Umsteiger, interessant wird es ab * [:Programmierung:] {Übersicht} Übersichtsartikel zu Programmiersprachen, Programmen und Werkzeugen == HTML5 == * [https://selfhtml.org/ SELFHTML] {de} - umfangreiche deutschsprachige HTML und CSS Dokumentation * [https://developer.mozilla.org/de/ Mozilla Developer Network] {de}{en} - sehr umfangreiche, teils deutschsprachige HTML, CSS und JavaScript Dokumentation der Mozilla Foundation * [https://webkompetenz.wikidot.com/docs:html-handbuch HTML5-Handbuch] {de} von Stefan Münz * [https://praegnanz.de/html5video/ HTML5 video player comparison] {en} * [https://www.w3schools.com/html/html5_audio.asp HTML5 audio tag] {en} * [https://www.quirksmode.org/ QuirksMode.org] {en} - Kompatibilitäts-Tabellen für Webbrowser #tag: Netzwerk, Internet, Übersicht, Server, Programmierung, Büro, Einsteiger, PHP