Grundlagen/Webprojekte/entwickeln

Aus SELFHTML-Wiki
< Grundlagen‎ | Webprojekte(Weitergeleitet von Code-Editor)
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
15min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
keines


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 bestimmte Anforderungen erfüllen sollten.

Eine Entwicklungsumgebung schaffen[Bearbeiten]

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

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.

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[Bearbeiten]

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.

Echte Code-Editoren bieten volle Kontrolle über den erstellten Code, verlangen aber auch mehr Wissen über die Syntax und die Möglichkeiten einer Sprache. Vielcoder verwenden oft den gleichen Editor für alle Arten von Code.

Die wichtigsten Merkmale eines guten Editors sind:

  • speichern in beliebigem Zeichen-Encoding (Phase5 von 2009 beherrscht kein UTF-8, kann also kein €-Zeichen!)
  • 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

Entwickeln mit dem Editor[Bearbeiten]

Zeichenkodierung[Bearbeiten]

Stellen Sie Ihren Editor auf eine Zeichencodierung im UTF-8-Format ein und vergessen Sie nicht, Ihre Webdokumente auch in diesem Format abzuspeichern. Dies ist eine der häufigsten Fehlerquellen, die im Forum immer wieder zur Sprache kommt.

Leerzeichen, Tabulatoren und Zeilenumbrüche[Bearbeiten]

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 &#160; (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.
Hauptartikel: Guter HTML-Stil

Code-Folding[Bearbeiten]

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 ersprat man sich langes Scrollen durch viele Zeilen Code auf der Suche nach einer bestimmten Stelle.


Welcher Code-Editor ist der Beste?[Bearbeiten]

Diese Frage lässt sich nicht abschließend beantworten, wird im Forum jedoch immer wieder diskutiert:

Links[Bearbeiten]

Web-Editoren[Bearbeiten]

Die hier aufgelisteten Editoren können direkt im Webbrowser bedient werden:

WebFlow
für Google Chrome und andere Webkit-Browser (Browser mit anderer Rendering-Engine können die Seiten nur ansehen): Mit WebFlow können komplexe Webseiten direkt im Browser gestaltet werden. Der Zugriff auf den dahinter liegenden Code wird über die Masken auf der rechten Seite ermöglicht. Um diesen Dienst nutzen zu können, muss man sich kostenlos anmelden, aber je mehr Seiten man damit bearbeiten möchte, desto mehr muss man monatlich bezahlen.

Plattformübergreifende Editoren[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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[Bearbeiten]

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.