Kurzvorstellung: Der Pinegrow Web-Editor will das Design beschleunigen

Einer unserer Leser machte uns auf den Pinegrow Web Editor aufmerksam, einen visuellen Web-Editor zur Entwicklung von HTML-Websites. Das klang gut und war somit für uns Grund genug, dem Editor wenigstens eine Kurzvorstellung zu widmen. Pinegrow arbeitet mit den bekannten Frameworks Bootstrap, Foundation, AngularJS und anderen zusammen. Wenn Sie mit HTML-Seiten, Templates oder mit den Frameworks Bootstrap oder Foundation arbeiten, sollten Sie sich diesen Editor unbedingt anschauen, denn das Besondere an ihm ist, dass es keinerlei Code-Ansicht auf den ersten Blick gibt, sondern die komplette Entwicklung eines HTML-Templates nur noch über den visuellen Editor geschehen soll.

Pinegrow – Eine Einführung

Pinegrow wurde speziell für die Zusammenarbeit mit den großen und beliebten HTML-Frameworks Twitter Bootstrap und Foundation entworfen, arbeitet jedoch auch mit AngularJS und anderen Frameworks zusammen. Der Editor ist für Mac OS X, Windows und Linux (32 und 64 Bit) erhältlich und kostet €49 für die persönliche Lizenz, die dann auf bis zu drei Geräten installiert werden darf. Eine Business-Lizenz ist ebenfalls zu haben, hierfür müssen dann €79 pro Gerät aufgewendet werden. Ein Jahr Updates sind im Preis enthalten. Studenten oder Lehrkräfte bekommen den Editor zu einem reduzierten Preis von €25.

Pinegrow fügt Ihrem Projekt keinerlei eigenen Code hinzu und man muss auch keine besonderen Frameworks laden und im Anschluss auf den Server spielen. Der Editor dient nur dem Öffnen, Bearbeiten und Abspeichern Ihrer HTML-Dateien.

Test-Lizenz

Eine Test-Lizenz für 7 Tage ist erhältlich, man muss also die Katze nicht im Sack kaufen, sondern kann ausgiebig testen, ob man mit dem visuellen Editor zurecht kommt. Beim ersten Aufruf der Software bekommt man ein Fenster zu sehen, in dem man unter Eingabe einer E-Mail-Adresse den Test-Key anfordern kann. Die einzige Einschränkung, mit der man in der Testversion leben muss, ist, dass man kein HTML oder CSS abspeichern kann.

Um den Code dennoch abspeichern zu können, gibt es einen Trick: unter “Page => Edit Code” kann man sich den Code anzeigen lassen, ihn kopieren und dann manuell außerhalb von Pinegrow abspeichern.

Das Video: Eine Einführung in Pinegrow

Erste Schritte mit Pinegrow

Nachdem die Software geladen und installiert ist, empfiehlt es sich, dass Kelvin Pine Test-Projekt herunter zu laden und sich damit in den visuellen Web-Editor einzuarbeiten. Am besten legt man den entkomprimierten Ordner auf dem Desktop ab und beginnt mit dem Hinzufügen per Drag und Drop der blank.html Datei in den Editor. Nachdem dies geschehen ist, wird der Plugin-Manager aufgerufen (siehe Markierung im Screenshot) und der kelvin-pine Ordner nach dem Plugin für das Test-Projekt durchsucht. Die korrekte Datei befindet sich im Unterordner “Pinegrow” und heisst KelvinPinegrowPlugin.js. Siehe Screenshots.

Nachdem das Plugin hinzugefügt ist, muss es noch aktiviert werden.

Ist dies einmal geschehen, kann nun die Webseite mittels Drag-und-Drop-Elementen von der linken Seite aus gefüllt werden.

Sollten Sie sich noch etwas unsicher fühlen, wie man die einzelnen Elemente aufteilt und hinzufügt, dann können Sie auch eine bereits gefüllte Seite aus dem Projekt-Ordner laden und bearbeiten. Schliessen Sie dazu die blank.html und fügen Sie die index.html in das Bearbeitungsfenster ein, indem Sie die Datei einfach nur in das Fenster ziehen. Nun sehen Sie eine komplett fertiggestellte HTML-Seite, die Sie nach Herzenslust bearbeiten können.

Video: Die Arbeit mit dem Kelvin Pine Projekt

Das bietet Ihnen Pinegrow

Der Pinegrow-Editor verspricht ein schnelles Layouting mit seinen Funktionen für das Hinzufügen, Editieren, Bewegen, Klonen und Löschen von HTML-Elementen. Alles, was in Pinegrow bearbeitet wird, ist live. Es existiert keinerlei Vorschau-Modus, das Editieren und Testen der Webseite geschieht in Echtzeit. Das funktioniert auch, wenn Sie dynamische JavaScript-Elemente nutzen. Einige Funktionen im Detail:

Linke Sidebar – die Bearbeitungsfenster

Die Sidebar bietet 4 verschiedene Reiter zur Bearbeitung der Elemente. Im Standard-Reiter “Lib” können Sie Elemente der zu bearbeitenden HTML-Seite hinzufügen. “Prob” sorgt für die Anpassung des gerade ausgewählten Elements. Im Reiter “CSS” beeinflussen Sie das CSS der Seite und unter “Vars” finden Sie die Einstellungen zu den einzelnen Farben.

Direkte Änderungen der Elemente

Über das “Actions”-Menü, welches nach dem Markieren eines Elements erscheint, lassen sich weitere Einstellungen tätigen, wie zum Beispiel die direkte Code-Bearbeitung, die Anzeige der CSS-Regeln, die Änderung des Textes und ähnliches.

Über “Edit Code” bekommt man direkt ein Eingabefenster für die schnelle Änderung eines HTML-Elements angezeigt.

Über die Funktion “Test Klicks” kann man auf die schnelle die korrekte Verlinkung der Navigation austesten.

Die einzelnen Features des Pinegrow Web-Editors

Pinegrow bietet Ihnen eine einige Features, die Sie Webseiten völlig anders – vielleicht sogar schneller – entwickeln lassen, als es bisher der Fall war. Im Folgenden eine Aufzählung aller Funktionen des visuellen Web-Editors Pinegrow. Zu jedem Feature gibt es auf der Website zu Pinegrow ein erklärendes Gif, dass die angesprochenen Funktionen noch einmal visuell erklärt. Leider laufen diese Gifs nicht hier auf Dr. Web, weil dazu zusätzliches JavaScript nötig wäre, ansonsten hätten wir die Gifs verlinkt.

Framework-Unterstützung

Pinegrow bietet volle Unterstützung für Bootstrap und Foundation. Ziehen Sie Komponenten in das Bearbeitungsfenster und passen Sie sie an eigene Bedürfnisse an. Pinegrow stellt automatisch Attribute, fügt Klassen hinzu oder passt den HTML- und CSS-Code der Komponente an. AngularJS, 960 Grid und einfaches HTML werden ebenfalls unterstützt.

Die Bearbeitung multipler Seiten

Sie können mehrere Seiten zur gleichen Zeit bearbeiten, dass bietet sich besonders für responsive Projekte an. Seiten können dupliziert und gespiegelt werden, alle Änderungen in der Quell-Seite werden sofort in die gespiegelte Seite übernommen. Verschiedene Zoom-Stufen und Ansichten für mobile Geräte können eingestellt werden.

Pinegrow und der Code

Die Software versteckt den Quellcode nicht vor Ihnen, Sie können ihn jederzeit einsehen. Möglich ist auch das Entwickeln von Webseiten mit gleichzeitiger Code- und visueller Ansicht. Egal, wo Sie Änderungen tätigen, die Auswirkungen sind sofort ersichtlich. Das könnte Pinegrow zu einem guten Werkzeug für das Erlernen von HTML und CSS machen.

 Der CSS-Editor

Das CSS kann entweder visuell bearbeitet werden oder über die Codeansicht direkt. Fügen Sie Klassen, IDs und Variablen hinzu, um Themes leicht anzupassen. Nutzen Sie den integrierten Stylesheet-Manager zum Klonen, Hinzufügen und Entfernen von Stylesheets. Alle Änderungen, die Sie eingegeben haben, sind sofort auf allen Seiten zu sehen, welche dieses Stylesheet nutzen.

Gestalten Sie Ihre Webseiten responsiv

Responsive Webseiten zu gestalten, verspricht mit dem Media Query Hilfs-Tool recht einfach zu sein. Mittels benutzerdefinierten Breakpoints oder dem automatischen Auslesen der Stylesheets werden Ihre Websites responsiv. Um den Erfolg sofort nachvollziehen zu können, nutzen Sie die Einstellung für multiple Ausgabegrößen. So können Sie die normale Ansicht editieren und sehen sofort live, wie sich Ihre Änderungen auf die (zum Beispiel) Smartphone-Ansicht auswirkt.

Bearbeitung beliebiger Seiten aus dem Netz

Jede Seite, die bereits live im Web ist, kann im Editor geöffnet und bearbeitet werden. Das verschafft Ihnen den großen Vorteil, nötige Anpassungen an Ihrer Live-Website auf dem heimischen Desktop ganz in Ruhe erledigen zu können, um die Änderungen dann komplett einmal auf den Server zu laden, nachdem Sie alle Neuerungen durchgeführt haben. Fügen Sie einfach die URL zu der betreffenden Webseite, die Sie geändert wissen möchten, ein und verändern Sie die Seite. Sie können das Layout ändern, die Texte und Bilder anpassen, CSS-Regeln modifizieren und so weiter. Das modifizierte HTML und CSS kann dann auf dem Computer gespeichert und in die Live-Website integriert werden.

Benutzerdefinierte Elemente zur Baustein-Bibliothek hinzufügen

Sie können jedes Element, was Sie einmal geschrieben haben, zur Bibliothek für Bauteile hinzufügen, um dann zu einem späteren Zeitpunkt leicht darauf zugreifen zu können. Die Komponenten-Bibliothek wird als Pinegrow JavaScript-Plugin gesichert, so können Sie leicht darauf zugreifen, um etwas zu ändern, oder den Baustein mit anderen Menschen zu teilen und ihn zu verwalten.

Pinegrow zusammen mit Ihrem favorisierten Code-Editor nutzen

Laut Aussage von Pinegrow passt der Editor genau in Ihren Arbeitsablauf. Verwenden Sie ihn zusammen mit Ihrem Lieblings-Editor (mit Smart-Auto-Refresh), Quellcode-Verwaltungssystem, Paketmanager und Implementierungs-Tools. Leider ist nicht angegeben, mit welchen Code-Editoren Pinegrow gut zusammenarbeitet. Ein Austesten dieser Funktion benötigt jedoch nur wenige Minuten. Ein kurzer Test mit dem Brackets-Editor war erfolgreich.

Einige Video Tutorials zum Pinegrow Web Editor

Pinegrow ist hervorragend dokumentiert, nicht nur durch eine Online-Dokumentation, sondern auch durch etliche, sehr informative Videos. Das darf man – ohne in Jubelschreie auszubrechen – getrost als vorbildlich ansehen.

Ein Website-Layout erstellen

Eine Website mit CSS und dem Pinegrow Web Editor stylen

Multiple Seiten gleichzeitig bearbeiten

Inhalt und Code editieren

Bootstrap-Komponenten nutzen und bearbeiten

CSS Variablen und Funktionen nutzen 

Live-Webseiten aus dem Internet bearbeiten

Fazit

Der Pinegrow Web Editor bietet einen völlig neuen und interessanten Weg zum Erstellen und Editieren von HTML-Websites. Wer oft neue Designs entwerfen muss, kann von dem Editor mit Sicherheit profitieren, denn nach einem kurzen Test kann ich behaupten, dass die Entwicklung neuer Designs sehr viel Spaß macht und mit etwas Einarbeitungszeit bestimmt auch schneller als bisher geht. Schade nur, dass der Editor bis jetzt nicht für die Entwicklung von WordPress-Themes geeignet ist, aber ein entsprechendes Plugin kann von jedermann geschrieben und angeboten werden. Abschliessend bleibt mir die Empfehlung, sich den Pinegrow Web Editor einmal genauer anzusehen und für die bereits beschriebenen 7 Tage eingehend zu testen.

Links zum Beitrag

• Pinegrow Homepage und Download (EN)
• Die Lizenz-Modelle von Pinegrow
• Dokumentation: Ein Layout mit Pinegrow entwerfen (EN)
• Pinegrow Support-Seiten (EN)
• Dokumentation: Das Kelvin Pine Bootstrap Theme (EN)
• Die umfassende Dokumentation zu Pinegrow (EN)
• Das FAQ zu Pinegrow (EN)
• Die Hintergrundstory zu Pinegrow (EN)
• Der Twitter-Account zu Pinegrow (für Produkt-Updates)
• Der Youtube Channel von Matjaž Trontelj, dem Entwickler von Pinegrow. Der Channel bietet die neuesten Video-Tutorials zu Pinegrow

(dpe)