Grundlagen/Webprojekte/entwickeln
Text-Info
- 15min
- einfach
- ● Computerkenntnisse
● Wie funktioniert das Internet?
Früher wurden Webseiten wie Printprodukte mit einem Grafikprogramm à la Photoshop entworfen, bei dem es sogar die Möglichkeit gab, das so entstandene Layout in mehrere Bilder zu zerschneiden und dann im Tabellen-Layout zu veröffentlichen. Microsoft wollte dem nicht nachstehen und entwarf mit Frontpage einen WYSIWYG-Editor, der einen Bildschirmentwurf in (allerdings sehr unsauberes) HTML-Markup umwandelte, das natürlich nicht responsiv war.
Heutzutage verwendet man Code-Editoren, die mehr können als nur Texte zu erfassen und zu speichern.
Inhaltsverzeichnis
Web-Labor
Wenn Sie lediglich ein paar einfache Dinge ausprobieren wollen, ist eine vollständige Entwicklungsumgebung oftmals gar nicht erforderlich. Statt dessen können Sie eins der frei zugänglichen, aber englischsprachigen Web-Labore verwenden, wie z.B.
Zum Ausprobieren der Beispiele im Selfhtml Wiki haben wir eine eigene Spielwiese erstellt, die sich auch ohne vorgegebenen Inhalt starten lässt und in denen Sie gerne Ihre ersten Schritte zusammenfrickeln können:
Eine Entwicklungsumgebung schaffen
Es ist eine sehr schlechte Praxis, direkt auf einem öffentlich erreichbaren Server zu entwickeln. Am Anfang der Realisierungsphase steht deshalb die Einrichtung einer dem öffentlichen Webserver analogen Entwicklungsumgebung. Dazu müssen alle Komponenten, die später auf dem öffentlichen Webserver betrieben werden, auch auf dem lokalen System vorhanden sein. Dies betrifft namentlich:
Information
- SELF-Hosting
(Eigener PC als Webserver)- Technische Voraussetzungen
- Sicherheitsaspekte
- Webserver lokal einrichten
- eingebauter PHP-Server
- Webserver
- Serverseitige Sprachen
- Datenbank
Solange man nur statische Webseiten erstellt, kann man darauf noch verzichten. Dennoch sollten Dateien auf dem lokalen System analog zur späteren Lage angelegt werden.
Es ist zudem ratsam, auf dem lokalen System nochmals zu unterscheiden:
- Die zu entwickelnde Version
- Die freigegebene Version, welche identisch zur öffentlichen Version ist.
- Archivierte (ältere) Versionen
Zur Entwicklungsumgebung gehört auch geeignete Software.
- Ein ausgereifter Editor
- Alternative Testbrowser
In der Realisierungsphase werden zudem sehr viele kleine Testobjekte erstellt. Dazu muss man sich eine strukturierte Spielwiese erstellen, die von der zu entwickelnden Website separiert ist.
Dokumentation spielt eine große Rolle. Dokumentationen dienen dem Ersteller und Betreiber. Dokumentationen sind selbst gute Beispieltexte, an welchen die Struktur einer Website und ihre Formatierung entwickelt werden kann. Kommentieren Sie Ihren Code, damit Sie ihn später nachvollziehen können.
Code-Editor
Die meiste Zeit verbringt der Webdesigner mit seinem Code-Editor, der mindestens dazu geeignet ist, HTML-, CSS- und JS-Code zu editieren. Darunter fallen also nicht nur Texteditoren, sondern auch WYSIWYG-Editoren und ganze IDEs (Integrated Development Environments), also integrierte Entwicklungsumgebungen.
Welcher Code-Editor ist der Beste?
Diese Frage lässt sich nicht abschließend beantworten, wird im Forum jedoch immer wieder diskutiert:
- Diskussion im Forum: kostenloser Web-Editor für Schulen? 22.11.2020
- Diskussion im Forum: Umfrage – welches Tool nutzt ihr? 16.11.2014
- Diskussion im Forum: UTF-8 Editor 19.04.2014
Die wichtigsten Merkmale eines guten Editors sind:
- speichern in beliebigem Zeichen-Encoding
- konfigurierbares Syntax-Highlighting für viele verschiedene Sprachen
- sehr flexible Suche/Ersetze-Instrumente inklusive regulärer Ausdrücke
- Ansichten-Management wie das Code-Folding
- Makro-Editor
- Verwaltung von Codesnippets
Information: Zeichenkodierung
Früher verwendeten viele Webdesigner eine aus der ISO-8859-Familie oder Windows-1252. Damit ließen sich 256 Zeichen definieren, aber eben keine Sonderzeichen aus anderen Sprachen. Heute ist UTF-8 ein Standard, mit dem alle Sprachen und viele Zeichen und Emojis dargestellt werden können.
Der früher beliebte Editor Phase 5 von 2009 beherrscht kein UTF-8, kann also neben exotischeren Sonderzeichen auch kein €-Zeichen!Syntax-Highlighting
Syntaxhervorhebung verbessert die Lesbarkeit von Texten:[1]
- Strukturen im Text sind leichter zu erkennen,
- das „Querlesen“ wird vereinfacht,
- Kommentare erscheinen abgesetzt vom eigentlichen Code und
- Tippfehler fallen schneller auf, da in vielen Fällen ein Tippfehler zu einer veränderten Darstellung führt.
Die Syntaxhervorhebung gehört heutzutage zur Standardfunktionalität vieler integrierter Entwicklungsumgebungen und Texteditoren.
Autovervollständigung
Intelligente Editoren erfassen den Text und antizipieren die nächsten Eingaben, indem sie lange Wörte automatisch vervollständigen oder eine Eingabe möglicher Alternativen vorschlagen.
Parallel findet oft eine Überprüfung der Syntax statt, die einem so manche vergessene Klammer vorschlägt und so die Testphase verkürzt.
Code-Folding
Umfangreiche Webseiten und mächtige Scripte nehmen oft viele hundert Zeilen Code ein und werden so unübersichtlich.
Deshalb bieten gute Editoren das so genannte Code-Folding an, mit dem bestimmte Abschnitte wie Script- oder Style-Bereiche, Funktionen und Daten-Objekte eingeklappt werden können. So erspart man sich langes Scrollen durch viele Zeilen Code auf der Suche nach einer bestimmten Stelle.
Leerzeichen, Tabulatoren und Zeilenumbrüche
Wenn Sie einen Texteditor oder einen quelltextorientierten HTML-Editor zur Erstellung Ihrer HTML-Dateien verwenden, sollten Sie folgende Regeln bei der Texteingabe kennen und beachten:
- Setzen Sie Zeilenumbrüche und Leerzeilen so, dass Sie im Quelltext eine optimale Übersicht behalten. Beachten Sie aber auch, dass Zeilenumbrüche und Absatzschaltungen im Web-Browser nicht so angezeigt werden, wie sie im Quelltext eingegeben wurden. Für Zeilenumbrüche und Absatzschaltungen, die im Browser wirksam sein sollen, müssen Sie die entsprechenden HTML-Elemente verwenden. Wenn Sie aus besonderen Gründen Text im Web-Browser so anzeigen wollen, wie Sie ihn eingeben (mit allen Einrückungen, Umbrüchen usw.), können Sie das pre-Element für präformatierten Text verwenden.
- Beachten Sie, dass es in HTML keine Tabulatoren gibt. Ein im Quelltext eingegebener Tabulator wird bei der Anzeige im Web-Browser in ein Leerzeichen umgewandelt. Zeilenumbruch-Zeichen, Tabulator-Zeichen und einfache Leerzeichen bilden in HTML die Klasse der so genannten White-Space-Zeichen (white space = "weißer Raum"). Die Browser setzen in der Regel ein Tabulator-Zeichen oder Zeilenumbruch-Zeichen im Editor als Leerzeichen im HTML-Text um. Mehrere solcher White-Space-Zeichen hintereinander werden ignoriert und zu einem einzigen Leerzeichen zusammengefasst. Um mehrere Leerzeichen hintereinander zu erzwingen, können Sie anstelle der normalen Leerzeicheneingabe die Zeichenfolge
 
(geschütztes Leerzeichen) eingeben, und zwar so oft hintereinander wie gewünscht. Das sollte aber wirklich ein Ausnahmefall bleiben, da diese Gestaltung besser mit CSS umgesetzt wird.
Entwickeln auf dem Tablet
Auch wenn Webseiten auf allen Geräten getestet werden müssen, ist das Arbeiten auf solchen Geräten gewissen Einschränkungen unterworfen. Emfpehlenswert ist hier zumiundest eine externe Tastatur und ein weiterer Bildschrim, bzw. sogar die Koppelung mit einem Desktop-PC.[2] [3]
Links
Plattformübergreifende Editoren
Es folgt eine unvollständige Liste verbreiteter leistungsfähiger Editoren:
- Atom
- für MS Windows, Mac OS und Linux: Atom ist ein kostenloser Open-Source Texteditor mit vielen Erweiterungen und Sprachunterstützungen nach dem Vorbild von sublime Text.
- Brackets
- für MS Windows, Mac OS und Linux: Brackets ist ein kostenloser Editor von Adobe (sozusagen der "kleine Bruder" von Dreamweaver), der selber auf HTML, CSS und JavaScript basiert und sich entsprechend auch anpassen und ausbauen lässt. Auch funktionieren aus der Webentwicklung bekannte Debugging-Werkzeuge.
Brackets ist kein Allrounder, sondern auf Frontend-entwicklung optimiert (HTML, CSS und JavaScript). Hierbei unterstützt er den Entwickler sehr gut und ist andererseits überschaubar im Funktionsumfang und daher auch für Einsteiger gut geeignet.
Mit Bordmitteln ist Brackets in der Lage, Änderungen in einer "Livevorschau" direkt im Browser anzuzeigen, während man diese tippt, was nicht nur Anfängern hilft, da Änderungen sich unmittelbar auswirken. - Codelobster
- für MS Windows, Linux, Mac OS: Codelobster ist ein freier Code-Editor, der aufgrund der großen Anzahl Plugins zur Unterstützung beliebter Frameworks auch als IDE bezeichnet werden darf.
- Dreamweaver
- für MS Windows und Mac OS: Dreamweaver ist ein sehr teurer (mehrere Hundert Euro pro Jahr) und sehr guter WYSIWYG-HTML-Editor.
- Eclipse
- für MS Windows, Linux, Mac OS und viele mehr, da auf Java basierend. Eclipse ist ein IDE für sehr viele Sprachen und hat einen sehr großen Funktionsumfang. Je nach Ausstattung ist allein der Download über 100 MB groß.
- Emacs
- für MS Windows, Linux, Mac OS und viele mehr: Emacs bzw. Xemacs ist einer der mächtigsten Texteditoren, unterstützt sehr viele Sprachen und ist kostenlos. Alle textbearbeitungsrelevanten Eigenschaften, die andere Texteditoren bieten, werden in der Regel auch von Emacs unterstützt und noch viele mehr. Der Preis für die große Funktionalität ist allerdings die Gewöhnungsbedürftigkeit, da seine Steuerung einem völlig anderen Konzept unterliegt als die der meisten anderen bekannten Texteditoren.
- Geany
- kostenlos für MS Windows, Linux, Mac OS und viele mehr. Geany ist zunächst ein simpler Quelltext-Editor mit Syntax-Highlighting, beherrscht aber auch das Zusammenfalten des Codes (Codefolding) und unterstützt dabei eine Menge an Sprachen, sowohl Auszeichnungssprachen, als auch Script- bzw. Programmiersprachen. In diesem Zusammenhang kann er auch automatisches Vervollständigen von Code und ist damit ein sehr hilfreiches Werkzeug, das als IDE verwendet werden kann. Außerdem unterstützt er (zumindest auf Unix-artigen Systemen) das Suchen in Dateien und Verzeichnissen.
- jEdit
- für MS Windows, Linux, Mac OS und viele mehr, da auf Java basierend. jEdit ist ein freier Texteditor, der durch seine Vielzahl an Plugins auch als IDE bezeichnet werden darf.
- SciTE
- für MS Windows und Linux: Ein kleiner Freeware-Texteditor, der trotz seiner geringen Größe über viele Funktionen verfügt.
- Sublime Text
- mächtiger Editor mit vielen Erweiterungen und umfänglicher Anpassbarkeit an die Vorlieben des Nutzers.
- UltraEdit
- Kostenpflichtiger (ca. 85 Euro/Jahr) Texteditor; auch in Deutsch verfügbar.
- Vim
- für MS Windows, Linux, Mac OS und viele mehr: Für Vim bzw. Gvim gilt im Prinzip das gleiche wie für Emacs. Allerdings ist Vim etwas verbreiteter, weil er im Allgemeinen zur Standardausrüstung jeder Linux-Distribution gehört. Vim ist auch in Deutsch verfügbar.
- Visual Studio Code
- für MS Windows, Mac OS und Linux: Microsoft Visual Studio Code ist ein kostenloser, quelloffener Code-Editor zum Entwickeln und Debuggen moderner Cloud- und Webanwendungen.
Editoren für MS Windows
Die hier aufgelisteten Texteditoren/IDEs sind in der Regel für alle MS-Windows-Versionen zu haben.
- Notepad++
- OpenSource-Editor mit frei definierbarem Syntax-Highlighting für viele Sprachen.
- Notepad2
- Freeware-Texteditor, dessen Stärke darin liegt, schnell geladen zu sein. Der Preis dafür ist, dass es nur wenige Features gibt. So bietet er weder Code-Vervollständigung noch Code-Folding und kann z. B. nicht mehrere Dateien gleichzeitig öffnen.
- PSPad
- Freeware-Texteditor, dessen Installer zwar nicht mal 4 MB groß ist, der aber trotzdem die meisten Bearbeitungsmöglichkeiten bietet, wie die anderen Texteditoren auch.
Editoren für Linux/Unix-Derivate
Da die bekanntesten Linux-Editoren mittlerweile auch für Windows und Mac OS zu haben sind, stehen sie bereits oben bei den plattformübergreifenden Editoren. In diesem Abschnitt hier ist lediglich noch ein Editoren für KDE aufgeführt.
- Kate
- Freeware-Texteditor für KDE mit vielen Komfortfunktionen, Multiple Document Interface und einer Plugin-Schnittstelle.
Editoren für Macintosh
- BBEdit
- kostenpflichtiger (ca. 44 Euro) Texteditor mit u.a. integriertem FTP-Client, Rechtschreibprüfung und HTML-Syntax-Checker.
- Coda 2
- kostenpflichtiger (ca. 99 Dollar) Editor mit dem Fokus auf Webentwicklung, mit dem Anspruch sich nahtlos in MacOSX zu integrieren.
- TextMate
- Freeware-Texteditor, der Projektverwaltung und vieles mehr bietet.
Weblinks
- ↑ Wikipedia: Syntaxhervorhebung
- ↑ chip.de: So einfach koppeln Sie jetzt den Windows-PC mit Ihrem Android-Smartphone
- ↑ How to get Started with Web Development on Android (appuals.com)