Web-Editor, Webdesign

Was ist ein Web-Editor?

Tipps zur Auswahl von Web-Editoren

Eine Software mit der eine Webseite oder auch eine ganze Website erstellt werden kann, wird als Webeditor bezeichnet. Es gibt zwei Arten von Web-Editoren. WYSIWYG - Editoren, bei denen die Textverarbeitung und das Ergebnis durch Browser dargestellt wird. Diese sind oft Bestandteile von Content-Management-Systemen. Es gibt aber auch Webeditoren, bei denen der Quellcode direkt eingegeben und zur Erstellung der Website genutzt wird.

Was ist Webdesign?

Webdesign ist die Gestaltung von Internetseiten bzw. kompletten Internetauftritten. Zum Webdesign zählen verschiedene Teilgebiete. Grundlegend ist das Design bzw. die schöpferische Gestaltung einer Webseite und die Berücksichtigung der jeweiligen Anforderungen (Corporate Design, Farbwünsche, Schriftarten etc.). Aufbauend auf dem bereits festgelegten Design erfolgt dann die Programmierung bzw. Erstellung der Website. Dies geschieht in der Regel mittels Webeditor bzw. Webdesign Software.

Typische Funktionen von Web-Editoren und Webdesign Software:

• Funktionen zum Bearbeiten von mehreren Dateien gleichzeitig. Dieses wird z.B. über ein Reiter-Interface ermöglicht.
• Möglichkeiten zur Projektverwaltung und zur Pflege mehrerer Homepages.
• Social Networks Funktionen
• Start-Vorlagen
• Video und Animationen
• Widgets ¹
• Suchmaschinenoptimierung
• Bild-Galerien
• Erweiterungsmöglichkeiten durch Plugins, Add-ons oder Extensions
• Bildeffekte
• responsive Design
• Sitemaperstellung

Weitere spezifische Kriterien und Frage-Anregungen für die Beurteilung von Web-Editoren und Webdesign Software:

• Fragen Sie nach, ob die Software eine Code Vervollständigung enthält und ob sie evtl. auch eigene Code Snippets abspeichern können. Dies ist eine Arbeitserleichterung, wenn Sie häufig auf bestimmte Code Abschnitte zurückgreifen möchten.
• Fragen Sie nach der Unterstützung von Tabellen, Listen, CSS ² und Formular-Editor Masken.
• Optionen für Syntaxhervorhebung ³ für Quelltexte verschiedener Markup- und Programmiersprache ⁴ sollten vorhanden sein. Sie heben bestimmte Sprachkonstrukte in Farbe und verschiedenen Schriftstilen hervor.
• Zugriffsmöglichkeiten auf wichtige HTML-Tags über Toolbars und Buttons, um ein schnelles Arbeiten zu erzielen.
• Fragen Sie, ob Umlaute in die HTML-Entity Notation umgewandelt wird (Beispielsweise Umlaute wie z.B. Ä, ä, Ü, ü, usw.) ⁵ . Dieser sichert eine genaue Darstellung innerhalb aller Browser.
• Erkundigen Sie sich, ob dateiübergreifendes Suchen und Einsetzen von Korrekturen möglich sind. Dieses ist eine wichtige Funktion, die man bei Fehlern in mehreren Dateien mit gleichen Wortlauten ersetzt.⁶
• Klären Sie, ob HTML-Tidy oder diverse andere HTML-Validatoren zum Prüfen der HTML Syntax verfügbar sind. ⁷
• Die Möglichkeiten die Tastaturbelegung zu ändern, bietet Ihnen die Option den HMTL Editor auf ihre persönliche Arbeitsweise einzustellen, und über Tastaturkürzel Befehle noch schneller abzuarbeiten.
• Die WYSIWYG-Funktion ⁸ bietet die Möglichkeit, ein HTML-Dokument zu gestalten, während man die Änderung direkt in der Oberfläche sieht. Dabei wird meist eine zweite Oberfläche angeboten und von der reinen HTML-Darstellung mit den HTML-Tags abgewichen.
• Klären Sie, ob die Software Möglichkeiten zum Überprüfen und Anpassen von Farbwirkung und Farbklang sowie Kontrastanalysen enthält. Dies ermöglicht die optimale Abstimmung von Farben und Kontrast für die Webseite.
• Bietet die Softwarelösung beim Erzeugen im WYSIWYG-Modus eine nahezu 100% Browserkompatibliät an. D.h. wird das entworfende HTML-Dokument auch detailgetreu in anderen Browsern dargestellt.
• Können Dateien auf entfernten Servern oder auf Freigaben im Netzwerk geöffnet werden über Protokolle wie FTP, SFTP, Samba, CIFS geöffnet werden?
• Ist im HTML-Editor ein Farb-Paletten Auswähler enthalten, der die ausgewählte Farbe in die Hexadezimale-Schreibnorm in HTML Farbcodes umwandelt? ⁹
• Können Templates ¹⁰ oder Designdaten (Farbe, Schriftarten, Verläufe etc.) direkt aus anderen Layoutwerkzeugen wie Adobe Creative Cloud aus einer PSD-Datei entnommen und in korrekten CSS-Code umgesetzt werden.
• Ist die Erzeugung von HTML-Codes durch Werkzeuge des HTML-Editors ¹¹ konform zu aktuellen HTML-Standards? ¹² . Dieses ist wichtig, für eine detailgetreue Darstellung der Seite in allen Browsern oder z.B. für SEO-Optimierungen. ¹³
• Vorteilhaft ist ein integrierter Dateimanager mit Bildvorschau und Drag&Drop Verlinkung um einzustellen, ob die Bilddateien mit absoluten ¹⁴ oder relativen ¹⁵ Pfaden eingebunden werden sollen.