Grundlagen/Webprojekte/entwickeln

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

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.

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:

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

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:

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


Empfehlung: 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.

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 &#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

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

  1. ↑ Wikipedia: Syntaxhervorhebung
  2. ↑ chip.de: So einfach koppeln Sie jetzt den Windows-PC mit Ihrem Android-Smartphone
  3. ↑ How to get Started with Web Development on Android (appuals.com)
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Grundlagen/Webprojekte/entwickeln&oldid=92985“