Frontend-Tools für jeden Einsatz
Es herrscht wahrlich kein Mangel an Werkzeugen für die Entwicklung und Pflege von Internetseiten. Nur sollte das Tool auch zum eigenen Arbeitsstil passen. Wir haben uns für Sie auf dem Markt umgesehen und präsentieren Werkzeuge für jede Anforderung.
Arbeitsabläufe und Geschmäcker sind unterschiedlich. Wer am liebsten tief im Quellcode seiner Seiten arbeitet, wird mit WYSIWYG-Anwendungen wohl kaum warm werden. Und Entwickler, die mit Word & Co. auf Kriegsfuß stehen, suchen eher nach einer einfachen Möglichkeit, ihre Dokumentation zu pfle...
Arbeitsabläufe und Geschmäcker sind unterschiedlich. Wer am liebsten tief im Quellcode seiner Seiten arbeitet, wird mit WYSIWYG-Anwendungen wohl kaum warm werden. Und Entwickler, die mit Word & Co. auf Kriegsfuß stehen, suchen eher nach einer einfachen Möglichkeit, ihre Dokumentation zu pflegen. Im Folgenden lernen Sie praktische Werkzeuge für jeden Geschmack und im Prinzip für jedes Betriebssystem kennen.
Basic-Coding: Für Puristen und Genießer
Für absolute Puristen bietet sich der Einsatz des Editor VIM an. Ihn gibt es für Windows, Linux und Mac. Überzeugte Anwender schwärmen von seiner Schlichtheit und der Möglichkeit, die grundlegende Installation zu erweitern. Wer allerdings ein Freund von Benutzeroberflächen ist, wird das Arbeiten damit eher mühsam finden.
Etwas komfortabler ist SublimeText, dessen Hersteller nicht nur den Softwareentwickler im Blick hat, sondern auch Autoren, was sich zum Beispiel im sehr schön gemachten Vollbildmodus zeigt. Hier wie dort braucht es allerdings eine Weile, bis der Anwender sich in alle Funktionen und Tastenkürzel eingearbeitet hat, um den größten Nutzen aus den Programmen zu ziehen. Alle Coder, die Wert auf eine integrierte und flexible Entwicklungsumgebung legen, werden mit Aptana zufrieden sein. HTML, CSS, PHP, Ruby und Javascript sind für diese Umgebung kein Problem.
Vom Syntax-Highlighting über die Code-Vervollständigung bis hin zum integrierten Debugger ist alles dabei, was das Entwicklerherz höher schlagen lässt. Wer primär mit der Entwicklung von Javascript und HTML5 zu tun hat, sollte WebStorm eine Chance geben. Die Entwicklungsumgebung ist genau dafür optimiert und verfügt über einen integrierten Debugger sowie ausgezeichnete Funktionen, vorhandenen Code einem umfangreichen Refactoring zu unterziehen. Zeitsparend sind die mitgelieferten Boilerplates.
Dokumentationen: Schnell und einfach
Früher oder später kommt die Dokumentation immer auf den Entwickler zu. Wer Oberflächen und Webseiten für Kunden designt oder anpasst, muss den späteren Redakteuren Informationen an die Hand geben, wie sich das System einsetzen lässt. Doch niemand möchte mit diesem Thema mehr Zeit als unbedingt notwendig verbringen.
Für ausführliche Erläuterungen in Textform bietet sich die Nutzung von Markdown an. Diese Markup-Sprache basiert auf einfachen Textdateien, deren Markups dem Text Bedeutungen zuweisen. So wird eine Hauptüberschrift etwa durch die vorangestellte Raute (#) gekennzeichnet, eine Überschrift zweiter Ebene durch zwei Rauten. Die Texte bleiben dabei trotz der Anweisungen immer noch leicht lesbar und können auf wirklich jedem Betriebssystem bearbeitet werden.
Das Programm Pandoc, das für alle Plattformen zur Verfügung steht, kann aus diesen Markdown-Dateien mit einem Befehlsaufruf verschiedene Ausgabeformate erzeugen. So wird aus dem gleichen Text ganz einfach HTML, ein E-Book oder auch ein Dokument in Formaten für Microsoft oder Libre Office.
Wer es noch Zeitsparender mag, sollte sich einmal Clarify ansehen. Auf den ersten Blick ist das Tool einfach ein Programm für das Anlegen von Bildschirmfotos. Das ist auch seine Hauptfunktion. Dabei speichert die Software die Screens aber nicht einfach als Bilder auf der Festplatte, sondern in einem Dokument.
Jede Aufnahme wird zu einem Schritt innerhalb der Datei und kann mit kurzen Erläuterungen und Markierungen versehen werden. Die Dokumentation stellen Sie anschließend entweder online, etwa als HTML-Datei, zur Verfügung oder Sie erzeugen daraus ein PDF oder eine RTF-Datei, um diese in einer Textverarbeitung weiter zu bearbeiten. Schneller und bequemer lässt sich die Dokumentation nicht erledigen.
Entwicklung direkt im Browser
So ganz ohne Arbeit am Quellcode wird es auch in absehbarer Zukunft beim Design und der Umsetzung von Websites wohl nicht gehen. Das Angebot an Entwicklungswerkzeugen, die ohne umfangreiche Installation auskommen und direkt im Browser funktionieren, wächst allerdings stetig.
Easel stellt zu einem moderaten Monatstarif eine visuelle Entwicklungsumgebung zur Verfügung, mit deren Hilfe der Entwickler responsive Oberflächen aus den angebotenen Formen und Elementen zusammenklickt. Auf das Pixel exakt werden die Objekte ausgerichtet. Ist das Design soweit zufriedenstellend, lässt sich der Quellcode einzelner Elemente oder einer vollständigen Seite in HTML und CSS exportieren.
Wer das bereits wieder zu grafiklastig findet und eher nach einer Entwicklungsumgebung sucht, die rein im Browser funktioniert, wird mit Codev zufrieden sein. Dabei handelt es sich um einen Code-Editor, der die Arbeit am Quellcode (auch im Team) von jedem Ort ermöglicht und sich hinter lokal installierten Anwendungen nicht zu verstecken braucht.
Die Oberfläche ist auch für die Nutzung auf Touchscreens optimiert, so dass sich per iPad oder Nexus an den Seiten arbeiten lässt. Ein zusätzlicher Nutzen: Die Zeit, die mit der Entwicklung verbracht wird, protokolliert das System automatisch. Die Zeiterfassung ist also auch gleich miteingebaut.
Quellcode versionieren
Nicht nur wenn der Code im Team entwickelt werden soll, stellt sich die Frage, wie die verschiedenen Arbeitsstände verwaltet werden. Ein System zur Versionierung hilft, zu einem früheren Stand der Entwicklung zurückzukehren. Github ist sicherlich einer der bequemsten und schnellsten Wege zur Versionskontrolle.
Sie brauchen sich bei diesem Cloud-Dienst nicht um die Einrichtung des Systems zu kümmern, sondern können nach der Eröffnung eines Accounts loslegen. Für OpenSource-Projekte kostet die Nutzung der Infrastruktur nichts, die Datenspeicher sind dafür dann aber öffentlich.
Für die Eröffnung von bis zu fünf privaten Code-Speichern werden 7 US-Dollar pro Monat berechnet. Der Dienst bietet auch zwei offizielle Clients für Windows und den Mac an, um noch einfacher auf die Ressourcen zurückgreifen zu können. Wer lieber mehr Kontrolle über sein System haben möchte, installiert sich eine lokale Versionskontrolle.
Nach wie vor beliebt ist hierbei Subversion. Es ist gut dokumentiert und gerade auch auf dem Mac oder Linux schnell lokal eingerichtet. Wer sich nicht scheut in einem Terminal zu arbeiten, braucht auch keine weitere Software. Mit wenigen Kommandos wird der Quellcode an den Datenspeicher übergeben oder wieder ausgelesen.
Rein grafische Versionskontrollen, die den notwendigen Server bereits eingebaut haben und mitinstallieren, stehen für Mac und Windows bereit. Versions entspricht in Look-and-Feel der gewohnten Mac-Ästhetik. Tortoise ist eine Versionskontrolle für Windows, die auf Subversion basiert und sich direkt in den Explorer einklinkt.
Frameworks für jeden Geschmack
Mit Frameworks sparen die Entwickler Zeit. Außerdem sorgen sie vom ersten Moment an für eine konsistente Optik auf allen Seiten. Die Frage hinsichtlich der besten Herangehensweise ist unter Webdesignern nach wie vor umstritten. Während die einen vor der eigentlichen Entwicklung das Anlegen eines Wireframes (Mockup) bevorzugen, kommt anderen das schnelle Prototyping eher entgegen. Ein gutes Framework beschleunigt die Arbeit mit Prototypen.
Gridpak ist ein einfaches System, das dem Arbeitsstil eines Puristen näher kommt. Es stellt auf Knopfdruck lediglich die grundlegende Struktur des Entwurfs zur Verfügung. Auf der Seite entscheiden Sie sich dabei für das gewünschte Gitter und erhalten anschließend die grundlegenden Dateien in Form von CSS, PNG und Javascript-Code zum Download. Foundation bietet hier schon etwas mehr. Das Framework kümmert sich dank einiger weniger Anweisungen nicht nur um das Anlagen einer Gitterstruktur, sondern enthält auch einige Dutzend primitiver Formen, mit denen das Design vorangetrieben werden kann. Als Lohn der Mühe erhält der Entwickler anschließend ein Grundgerüst an Code, das danach leicht in Sachen Farbe und Schriften an die eigenen Ideen angepasst werden kann.
Über Bootstrap müssen wahrscheinlich keine großen Worte mehr verloren werden. In Kombination mit einem guten Editor erweisen sich die Grundgerüste dieses von Twitter entwickelten Frameworks als echte Zeitsparer und Helfer im Entwicklungsprozess.
Lokale Testumgebungen
Puristen werden eine vollständige lokale Installation des Zielsystems zu Testzwecken wohl bevorzugen. Auf dem Mac ist bereits ein lokaler Webserver, sogar mit PHP-Unterstützung, vorhanden und muss lediglich durch die Webfreigabe aktiviert werden. Und in den Paketquellen der diversen Linux-Distributionen sind alle Elemente für einen lokalen Server mit Apache, MySQL und PHP vorhanden. Nur wenig aufwändiger ist die Zusammenstellung eines solchen Systems für die Windows-Plattform. Durch die einzelnen Installationen und Konfigurationen landen nur die Komponenten auf der Festplatte, die gewünscht sind.
Wer es dagegen noch einfacher mag, kann zu den so genannten Bitnami-Stacks greifen. Diese bringen eine Installationsroutine für alle Betriebssysteme mit und installieren eine WAMP-, LAMP- oder MAMP-Umgebung mit wenigen Mausklicks. Über ein kleines Zusatzprogramm wird dann die Testumgebung per Mausklick gestartet. Von Bitnami stammen dazu zahlreiche Webanwendungen (von Wordpress über Moodle bis hin zu Magento), deren Setup-Programm gezielt nach einem bereits installierten Stack sucht und das System einrichtet. Über den Aufruf der Adresse localhost im Browser ist die Testumgebungen dann erreichbar.
Wer wissen möchte, wie sein Design in verschiedensten Browsern aussieht, braucht diese nicht erst zu installieren oder sich mit der Konfiguration einer Testumgebung zu beschäftigen. Der Service-Browserstack ist hier eine komfortable Alternative beziehungsweise Ergänzung zur Testumgebung.
