Code-Dompteure

Zen Coding

9.7.2010 von Redaktion pcmagazin und Tim Kaufmann

ca. 2:50 Min
Ratgeber
  1. Editoren für Web-Entwickler
  2. CSS-Editor Topstyle
  3. Netbeans IDE
  4. Netbeans IDE in der Praxis
  5. Zen Coding

Drücken Sie nun die Leertaste. Die Zeile enthält dadurch einen Fehler, den Netbeans prompt hervorhebt. Wie in Word wird der Fehler mit einer roten Linie hervorgehoben, ein rotes Ausrufezeichen erscheint am Rand. Löschen Sie das Leerzeichen wieder.

Platzieren Sie den Cursor auf einer beliebigen Klammer und beobachten Sie, wie Netbeans die zugehörige andere Klammer ebenfalls gelb hervorhebt. Wenn Sie neuen Code hinzufügen möchten, reicht es, wenn Sie die ersten Buchstaben des gewünschten Befehls tippen. Es erscheint automatisch ein Popup, in dem Sie alle passenden Treffer sehen. Aus einem einfachen e wird so ein echo '';.

Noch besser: Die Code-Vervollständigung berücksichtigt sowohl das Standard-PHP wie auch die in Ihrem Projekt definierten Klassen und Funktionen. Und wenn Sie unter Dienste (neben dem Projekte-Reiter) Datenbank-Verbindungen konfigurieren, werden auch die dortigen Tabellen und Felder in die Vorschläge mit einbezogen.

Am linken Fensterrand sehen Sie den Navigator. Er enthält eine schematische Darstellung aller im aktiven Dokument enthaltenen Funktionen, Klassen, HTML-Container und weitere. Über einen Doppelklick gelangen Sie zur entsprechenden Stelle im Code.

Tipp: Ein ausführliches Tutorial zur Verwendung von Netbeans Debugger finden Sie im Netbeans-Wiki.

Zen Coding

Für welchen Editor oder welche IDE Sie sich auch entscheiden - als Web-Entwickler werden Sie es immer wieder mit HTML- und CSS-Code zu tun haben. Das gilt auch dann, wenn Sie den Schwerpunkt Ihrer Arbeit auf PHP oder ähnliche Skriptsprachen legen, denn auch deren Output will formuliert beziehungsweise formatiert sein.

Unter code.google.com ist ein interessantes Projekt zuhause, das sich zum Ziel gesetzt hat, die Eingabe von HTML und CSS zu beschleunigen.

Herausgekommen sind mit Zen HTML und und Zen CSS zwei Plugins, die für eine Reihe von Editoren kostenlos erhältlich sind. Auf der Liste der unterstützten Programme finden sich auch Ultraedit, Topstyle und Netbeans.

Seinen Beschleunigungsfaktor zieht Zen Coding daraus, dass es Abkürzungen zu vollwertigen HTML- beziehunsgweise CSS-Konstrukten erweitert. So wird zum Beispiel aus div#name automatisch <div id="name"></div>. Ersetzen Sie die Raute durch einen Punkt setzt Zen-Coding beim Ersetzen keine ID, sondern eine (oder auch mehrere) Klassen.

Editoren für Web - Entwickler
Mit Netbeans Debugger finden Sie Fehler durch schrittweises Ausführen von PHP-Skripten.
© Archiv

Auch verschachtelte Konstrukte lassen sich per Zen-Coding erzeugen. Beispielsweise wird ul#name>li.item zu <ul id="name"> <li class="item"></li></ul>. Fortgeschrittene Nutzer verwenden Aliase, um zum Beispiel aus einem p*3 ein <p></p><p></p><p></p> oder einem ul+ ein <ul><li></li></ul> werden zu lassen.

Richtige Flügel wachsen Ihnen dann, wenn Sie verschachtelte Zen-Coding-Anweisungen mit Aliasen kombinieren. Für den Einstieg empfiehlt es sich, die beiden Dokumentationsseiten mit den HTML- beziehungsweise CSS-Anweisungen auszudrucken und neben die Tastatur zu legen.

Wer sich dann im Rahmen seiner täglichen Arbeit immer wieder eine neue Anweisung antrainiert, verzeichnet auch rasch große Fortschritte.

Versionsverwaltung

Haben Sie sich auch schon einmal vergeblich gewünscht, Sie könnten noch einmal zu einer früheren Version Ihres Projektes zurückkehren, nachdem sich die letzten Änderungen als Fehler entpuppt haben?

Mit einer Versionsverwaltung sind Sie auf der sicheren Seite. Server-Software wie Subversion speichern beliebig viele Versionen der Dateien eines Projektes in einem sogenannten Repository (Ablage), inklusive Zeitstempel, Kommentaren und dem Namen des ändernden Benutzers.

Via Netzwerk oder Internet können mehrere Nutzer gleichzeitig an den Dateien arbeiten, ohne dass sie Änderungen gegenseitig überschreiben. Die Lese- und Schreibzugriffe erledigt man unter Windows am besten mit dem kostenlosen Tortoise-SVN. Zumindest für den Einstieg reicht diese Software auch aus, um Repositories zu verwalten, die allerdings nur dem lokalen Benutzer zur Verfügung stehen.

Hier finden Sie ein hervorragendes deutschsprachiges Tutorial für die ersten Schritte mit Tortoise-SVN.

Tipp: In Netbeans ist ein Subversion-Client fest integriert. Sie finden ihn unter Team/Subversion.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.