Kategorie: Web

Seit vielen Jahren, genauer seit 2006, setze ich für meinen Weblog die «Open Source»-Software «Wordpress» ein. «Wordpress» bietet nebst vielen anderen Vorteilen auch die Möglichkeit, an die eigenen Wünsche mittels einem «Template» angepasst zu werden. Neben schier unendlichen Möglichkeiten der Erweiterung durch «Plugins» ist der Bereich des «FrontEnd»-Designs ein äusserst spannendes Feld.

Für meinen Arbeitgeber realisierte ich auf Basis von «Wordpress» und unzähliger Erweiterungen ein eigenes «Intranet» mit umfangreichen Funktionen. Im Zuge dessen entwickelte ich auch ein eigenes «Template» welches den Prinzipien von «Mobile First» folgt. «Mobile First» besagt letztlich nichts anderes, als dass ein Design zuerst auf mobilen Endgeräten (Smartphones, Tablets, etc.) funktionieren soll und erst in zweiter Linie auf konventionellen Computern.

Da ich mich nun vermehrt mit der «FrontEnd»-Entwicklung in «WordPress» beschäftigen möchte, musste ein (für mich) idealer «Workflow» her.

In einer losen Folge werde ich meinen «Workflow» näher vorstellen.

1) Tools

«Wireframing»: «Balsamiq Mockups»

Gerade wenn es darum geht, sich über ein zukünftiges Design ein Bild zu machen, können kleine Skizzen ungemein helfen. Ich verwende hierzu schon seit Jahren das kleine Werkzeug

«Balsamiq Mockups», welches Ideal für die Web-Entwicklung ist. Es bietet zahlreiche Möglichkeiten das Design in groben Zügen darzustellen. Es gibt auch einige Erweiterungen, mit denen man das kostenpflichtige Programm an seine Bedürfnisse anpassen kann.

IDE: «PhpStorm»

In einem meiner letzten Beiträge habe ich meine «IDE» kurz vorgestellt: «PhpStorm». Es ist immer noch meine erste Wahl wenn es um die Webentwicklung geht. Wie man « PhpStorm » für die Entwicklung das «Debugging» für «WordPress» verwenden kann, hat Stephen Carnam in einem Blog-Beitrag ausführlich geschildert. Und hier noch einige offizielle Worte der Entwickler über den «WordPress» Support in «PhpStorm». Ich verwende «PhpStorm» allerdings nur für die Entwicklung von «Themes». Natürlich kann man damit (und das wird mit «PhpStorm» wahrscheinlich ein Kinderspiel sein) auch «Plugins» entwickeln…

«Compiler»: «CODEKIT»

Seit einiger Zeit verwende ich «SASS» (http://sass-lang.com/) um meinen «Design»-«Workflow» zu beschleunigen. Bei «SASS» handelt es sich um einen Präprozessor, der mir die Erzeugung von «CSS»-Files ungemein erleichtert. So ermöglicht es «SASS», mit Variablen zu arbeiten oder mit Mixins gewisse Patterns abzubilden und wiederzuverwenden. Daneben ermöglicht es natürlich auch ein strukturierteres Handling der «CSS»-Files, man ist nicht mehr darauf angewiesen, alle Styles in ein Dokument zu werfen. Das wird anschliessend von «CODEKIT» automatisch erledigt. Damit man nun eine «CSS»-Datei erhält, die der Browser auch lesen kann, benötigt man einen «Compiler». Hier kommt nun «CODEKIT» ins Spiel. Mit diesem kleinen Werkzeug kann man verschiedene Sprachen kompilieren. Als nützliches Feature wird bei jedem Abspeichern der Dateien der Browser neu geladen und somit die Änderung sichtbar.

Anmerkung: Natürlich gibt es auch «SASS»-Support in «PhpStorm». Jedoch empfinde ich das Arbeiten mit «CODEKIT» als einfacher und mehr «mac-like».

FTP: «Transmit»

Zugegeben: Auch mit «PhpStorm» kann ich Dateien, die ich bearbeite, hochladen. Gerade die automatisierte Funktion, auch extern geänderte Dateien hochzuladen möchte ich nicht mehr missen. Manchmal jedoch ist ein modernes und schnelles FTP-Programm trotzdem nützlich. Hier setze ich seit vielen Jahren «Transmit» (http://panic.com/transmit/) der amerikanischen Firma «Panic». Eine besonders nützliche Funktion, die mir «Transmit» bietet, ist das erstellen von «gemounteteten Disks» (bei «Transmit» heisst das «Transmit Disk Feature»). Dabei handelt es sich um entfernte Ordner, die wie herkömmliche Volumen im Finder angezeigt werden und auch so reagieren.

Papier & Stifte

Für mich die wohl wichtigsten Werkzeuge sind immer noch Papier und Stift. Gerade wenn ich abends einmal eine Idee habe, möchte ich nicht immer an den Computer rennen und mir diese irgendwo in irgendeiner «App» festhalten. Deshalb habe ich immer ein «Moleskine Sketchbook» und ein paar Stifte («uni-ball broad waterproof um-153») in meiner Nähe oder in meiner Tasche um Ideen festzuhalten.