Editor

Als Webeditoren bezeichnet man Offline-Programme, welche auf dem Computer Webinhalte in Form von HTML-Code generieren. Diese Webinhalte können sowohl textlicher als auch grafischer Art sein und zudem multimediale Gestaltungselemente, wie beispielsweise Audio- und Videodateien, beinhalten. Obwohl die HTML mit jedem Texteditor geschrieben werden kann, bieten HTML-Editoren mehr Komfort und zusätzliche Funktionalität. Man kann zu meist in verschiedenen Ansichten arbeiten, Quellcode- oder Webseitenansicht, wobei der Fokus aber klar auf einer What-You-See-Is-What-You-Get (WYSIWYG) Ansicht liegt. Der Einbau von CSS Elementen aber auch Javascript ist möglich, so dass sich mit Webeditoren sowohl statische, als auch dynamische Webseiten mit Datenbankanbindung erstellen lassen.


Vor- und Nachteile

für Leute mit Zeit und Interesse, sich mit Webdesign auseinanderzusetzen

+ absolut individuelle Gestaltung der Webseite, oft WYSIWYG-Oberfläche (what you see is what you get) mit integriertem ftp, Möglichkeit Templates oder Frameworks sowie Exporte aus Photoshop/Indesign/Illustrator zu integrieren (weniger Coding notwendig)

- nicht kostenlos (Webhoster/Speicherplatz/Domain), zeitaufwendig (jede einzelne Webseite muss neu geschrieben werden), oft sehr gute Websprachenkenntnisse notwendig (ausser visuelle Editoren), programmabhängig


Installation

Webeditoren sind Programme, welche gekauft und auf dem Computer installiert oder via Cloud gemietet werden müssen. Nebst dem Programm braucht es auch einen Webhoster (Speicherplatz, URL, FTP). Oft können die Daten vom Computer direkt im Programm mit dem Webhoster verknüpft werden, d.h. man bearbeitet alles im Programm.

Tipps Auswahl Webeditor:
- Entscheiden ob man selbst gestalten will (Coding oft notwendig) oder mit Templates arbeiten möchte (Coding-Editor mit Templates oder Frameworks ergänzen)
- Entscheiden ob man eine visuelle Arbeitsoberfläche (drag'n'drop) bevorzugt
- Entscheiden ob man eigene URL/Hosting möchte oder auch URL/Hosting mit Anbieteranhang
- Entscheiden ob man eigenes Programm installieren möchte oder webbasiert (Zugriff von allen Computern) oder via Adobe-Cloud mieten

>> Tutorials/Videos anschauen und dann testen ob man mit der Arbeitsoberfläche des Programms zu Gange kommt - fast alle kommerziellen Webeditoren haben ein Free-Trial-Option (30 Tage)

Vorteile/Merkmale eines HTML-Editors:
- Endtags werden automatisch eingefügt
- Kontextbezogene Eingabehilfe (Vorschlag von Elementen/Attributen)
- farbige Hervorhebung von Elementen, Attributen und CSS-Eigenschaften
- Zeilennummer (wichtig um Fehler zu finden anhand Codevalidator)
- Farbwähler für Hexadezimalwerte

Coding-Editoren erfordern ein gewisses Verständnis von HTML und anderen Webtechnologien, da vieles selbst geschrieben wird. Üblicherweise umfassen sie aber eingebaute Funktionen für Aufgaben wie Quellcoderfassung, Linkerfassung, Code-Validierung, Formatierung, Rechtschreibprüfung sowie das Hochladen per FTP. Oft haben sie auch einen WYSIWYG-Splitscreen, so dass gleich überprüft werden kann, wie die Webseite online aussieht.

Visuelle Editoren bieten eine grafische Bearbeitungsoberfläche an, auf der Inhalte per 'drag and drop' auf der Webseite platziert werden können. Da mit visuellen Editoren oft wenig bis keine HTML-Kenntnisse benötigt werden, eigenen sie sich besonders für Einsteiger/innen.


Layout mit Gestaltungsprogramm erstellen

Gerade für Webanfänger/innen kann das technische Coding zu Beginn etwas abschreckend wirken.
Es gibt hier die Möglichkeit, das Layout zuerst in einem Gestaltungsprogramm (beispielsweise Photoshop) zu gestalten und dann fürs Web aufzubereiten.
Hierfür werden die einzelnen Elemente mit der Slice-Technik bearbeitet. Die Layouts können dann fürs Web exportiert werden und im Webeditor fertiggestellt werden.

>> Konzentration auf Gestaltung und nicht Technik
>> Export der Gestaltungsvorlage, um mit einem Webeditor die Webseite zu vervollständigen
>> Anleitung: Webdesign mit Gestaltungsprogramm erstellen

Frameworks
Auch Frameworks erleichtern die Arbeit von Wedesigner/innen, da sie nicht alle Codes selbst schreiben müssen. Mit Webframeworks wird der Rahmen für die Entwicklung von dynamischen Webseiten, Webanwendungen oder Webservices zur Verfügung gestellt. Ein Framework ist somit ein Packet von Dateien mit standardisierten Codes (HTML, CSS, JS etc.), welches für die Entwicklung von Webseiten oder für den Aufbau eines Webprojektes genutzt werden kann. Das responsive Webdesign unterstützt die korrekte Darstellung für jedes Ausgabeinstrument (Computer, Tablet, Mobile).


>> responsive Ergänzung für selbständige Gestaltung mit Webeditoren
>> flexibel Komponenten zusammenstellen und austauschen, responsive Design (Mobile, Tablet)


Projektstruktur

Bei jedem etwas grösseren Web-Projekt sammeln sich viele Dateien an. Um den Überblick zu behalten, sollte ein sinnvolles Dateinamenschema angewendet werden, wie beispielweise für die unterschiedliche Dateien Unterverzeichnisse anzulegen. Die Verzeichnisse sollten so allgemein wie möglich angelegt werden, damit die Verweise nicht mehr geändert werden müssen und auf den Webseiten, die Inhalte, wie Bilder, miteinander gültig verlinkt sind (Referenzieren).

Die Dateien werden lokal auf einem Computer mit einem Webeditor erstellt, bearbeitet und abgespeichert. Anschliessend wird das Verzeichnis (Startseite und Unterordner) via FTP auf den Webhost-Server geladen. Dann ist die Website (gesamtes Projekt mit allen Unterseiten) über die URL (Webseitenadressen) von jedem Browser aufrufbar.

Startseite / index.html
Der Stammordner für ein Web-Projekt (oft auch Root-Verzeichnis genannt) wird zu Beginn erstellt und die Startseite als index.html darunter gespeichert. Die Startseite ist dann nicht als index, sondern als entsprechende URL ersichtlich (z.B. webbasics.ch). Wichtig ist, das die Index-Datei immer zu oberst in der Ordnerstruktur liegt. Sonst kann der Browser das Verzeichnis nicht finden.

Unterordnerstruktur
Anschliessend werden alle Webseitendateien (Unterseiten, CSS etc.) und Webinhalte (Bilder etc.) erstellt und in Unterordner abgespeichert:
- Bilder-Ordner (alle Bilder als jpg, png oder gif abspeichern)
- CSS-Ordner (alle CSS-Dateien, Webseitendesign)
- JS-Ordner (alle JS-Dateien, Skripte)

Dateibeschriftungen
Je nach Hoster gelten verschiedene Regeln wie Dateinnamen für die Serverablage beschriftet werden sollten.
Damit alle Dateien akzeptiert werden, verwendet man bei der Beschriftung keine Umlaute und Sondernzeichen (ä, &, * etc.) sowie keine Leerräume oder Abstände. Desweiteren muss immer der Dateianhang/Suffix (.jpg, .html, .css) mitangegeben werden. Auch ist der Dateiname auf der Webseite abrufbar, deshalb sollte die Dateien möglich prägnant und treffend bezeichnet werden (z.B. hund.jpg, sonne.jpg,. anleitung_websiteerstellung.pdf).

Vorherige Seite: CMS Nächste Seite: Hosting