Kategorien
Editoren HTML/CSS Responsive Design Webdesign

Homepagebaukasten Squarespace 7: Revolution mit Ansage

Squarespace ist einer der führenden Anbieter im Markt für Homepage-Baukästen. Profis halten zwar von diesen Systemen oft nicht so viel – das Unternehmen selbst sieht jedoch seine Zielgruppe keinesfalls nur bei den Einsteigern, sondern durchaus auch bei Designern, Entwicklern und Agenturen. Aufbauend auf ihrer soliden Erfahrung von über zehn Jahren im Online-Geschäft ist Squarespace jetzt ein großer Wurf gelungen: Squarespace 7 präsentiert eine völlig neue Benutzeroberfläche, kombiniert mit einem vielseitigen Content Management System. Ohne Übertreibung kann man wohl sagen, dass im Bereich der Online-Seitengestaltung sich daran zukünftig alle anderen messen lassen müssen.

squarespace7-teaser

Homepage-Baukästen: Von der Ersatzbank aufs Spielfeld

Unzählige Bytes sind durch die Datenströme geflossen auf dem weiten Weg der Homepage-Baukästen, angefangen bei Geocities und NetObject Fusions mit ihren eingeschränkten Funktionen, bis zu den standard-konformen und stabilen Webseiten-Editoren von heute. HTML, CSS und JavaScript haben am Ende Flash und andere proprietäre Technologien weggefegt. Und schließlich wurde uns durch den Siegeszug des mobilen Internet der Übergang zu einer Standard-Konformität um fünf bis zehn Jahre früher beschert als gedacht.

Website Builder, Homepage-Baukästen oder Online-Webdesign-Software – wie auch immer Sie es nennen, all diese Lösungen sind heute mit ähnlich vielen Funktionen ausgestattet wie ein lokal installiertes Programm. Mehr noch, betrachtet man sie als SaaS-Lösungen (Software as a Service), kommen sie sogar weit flexibler daher, sind leichter auf dem neuesten Stand zu halten und auch mit Drittanbietern kommen sie besser zurecht als es eine lokale Software je könnte.

Squarespace 7: Bearbeiten Sie Ihre Seite direkt im Frontend

Wer mit zeitgemäßen Online Design-Lösungen arbeitet, bekommt in jedem Fall WYSIWIG. Natürlich ist das kein neues Konzept, aber ein WYSIWIG aus den Anfangsjahren ist eben meilenweit von den heutigen Tools entfernt. Squarespace 7 geht da sogar noch einen Schritt weiter, indem es die Bearbeitung einer Seite direkt vom Frontend erlaubt. Dieses Feature ist auch bei einem der besseren Website-Builder heute durchaus kein Standard.

squarespace7-onpageediting-whole
Wer sich durch das Frontend klickt, bekommt flexible Funktionsleisten für die Gestaltung angezeigt

squarespace7-onpageediting-closeup
Eine Werkzeugleiste mal genauer betrachtet

Mit Squarespace 7 surfen Sie einfach zu Ihrer Webseite und bearbeiten diese fast im Vorbeigehen oder ändern Schreibfehler, sobald sie in Ihr Blickfeld gelangen. Eigentlich so ähnlich wie MS Word, nur eben für Webseiten statt für Dokumente. Und meiner Meinung nach die intuitivste Art, um Seiten zu bearbeiten. Die Bearbeitung im Frontend ist dabei nicht auf Textänderungen oder ähnlich einfach gelagerte Fälle beschränkt. Selbst Produkte eines Online-Shops können direkt geändert werden. Zweifellos ist dieses Feature die aufsehenerregendste Neuerung innerhalb des Squarespace Tools, das ja ohnehin mit allerhand Funktionen ausgestattet ist.

squarespace7-deviceview
Device View im Einsatz: Der direkte Blick auf das Gerät

Wenn Sie an „responsive designs“ interessiert sind – und falls nicht, sollten Sie diesen Standpunkt dringend überdenken – dann dürfte Ihnen die neue Geräteansicht gefallen. Verändern Sie einfach Ihr Browser-Fenster, dann sehen Sie wie Ihre Webseite auf anderen Geräten angezeigt wird.

Squarespace 7: Einfache Erzeugung von One-Page-Designs

One-Page-Designs gehören schon seit einiger Zeit zu den Lieblingen der Gestalter. Kein Wunder, schließlich kann eine einzige schön gebaute und gut geschriebene Seite die perfekte Plattform für ein Portfolio, eine Dienstleistung, eine App oder eine Marke sein. Squarespace 7 hat das verstanden und stellt das nagelneue Cover Pages bereit.

squarespace7-coverpages-whole
Eine gut gebaute Cover Page ;)

squarespace7-coverpages-detail
So einfach lassen sich Design und Inhalt bei dieser Cover Page verändern

Okay, Cover Pages erfindet jetzt nicht gleich das One-Page-Konzept völlig neu. Gleichwohl wird deutlich, dass diese Templates eben genau als One-Pager optimiert wurden. Und so ist es erfrischend zu sehen, wie schnell man damit tolle Ergebnisse erzielen kann. Sie brauchen nur ein paar Parameter anzupassen, ein paar Bilder hoch zu laden – und gut ist. Ich bin sicher, dass Designer dieses Feature mögen werden, und sei es nur um hin und wieder eine „Coming Soon“ Ansage zu machen.

Cover Pages sind die perfekte Lösung für viele Zwecke. Aber insbesondere alle Arten von künstlerischen Portfolios, sei es Musik, Audio, Video oder Grafik, werden damit großartig aussehen. Ganz gleich ob Medien- oder Markenpräsentation: Die vorhandenen Templates decken in jedem Fall ein weites Anwendungsspektrum ab.

Squarespace 7: Einbindung von Getty Images und Google Apps

Die perfekten Bilder für die eigene Website zu finden, ist oftmals nervenaufreibend und die Lizenzierung dann teuer. Und nicht nur das, allein schon die rechtlich einwandfreie Nutzung von Bildern erfordert oftmals ein juristisches Staatsexamen. Squarespace hat nun ein Mittel gefunden, dieser Herausforderung aus dem Weg zu gehen und macht es leicht, Bilder von Drittanbietern auf der Seite einzubinden.

squarespace7-gettyimages-integration
Getty Images ist komplett integriert

Dank einer Kooperation mit Getty Images bezahlen Sie über Squarespace gerade mal 10 USD pro Bild, wenn Sie es in Ihrem Design nutzen wollen. Die Suche und die Einbindung der Bilder erfolgt dabei direkt in der Squarespace-Oberfläche. Bei einem Bestand von über 40 Millionen Bildern könnten Sie ja bei Getty Images durchaus Bilder finden, die Ihnen gefallen – egal für welches Projekt. Preisunterschiede gibt es nicht, alle Squarespace-Nutzer bezahlen jeweils 10 USD für ein Bild. Die einzige Einschränkung: Die Lizenz gilt nur für die Online-Nutzung. Erweiterte Lizenzen können allerdings direkt im System erworben werden.

Ist Ihre Webseite das Epizentrum Ihrer digitalen Welt? Dann ist es sicher sinnvoll, sie mit Google Apps for Work zu verbinden. Mit Squarespace geht das – und kostet pro Nutzer noch mal fünf Dollar.

Mit Mobile Squarespace kommen Sie in Fahrt – buchstäblich

Nutzer von Squarespace 7 können den Blog ihrer Website auch von unterwegs aktualisieren, Mitteilungen senden oder die Kennzahlen der Seite abrufen. Das Tool Portfolio ermöglicht es zudem, alle Galerien der Seite auf das iPhone zu übertragen und dort zu speichern. Als professioneller Fotograf hat man so zum Beispiel immer seine Arbeitsbeispiele griffbereit, auch ohne Internetzugang.

squarespace7-mobileapps
Mobile Funktionen für alle digitalen Nomaden

Alle mobilen Features sind schon jetzt für das iPhone erhältlich. Blogs und Notes gibt es nun auch für Android Nutzer.

Squarespace und die Entwickler-Plattform

Ja, natürlich gibt es auch bei Squarespace jede Menge Hochzeits-Templates. Damit haben vor allem die vielen Einsteiger ihren Spaß. Und auch für diese Endnutzer könnte ich eine klare Empfehlung aussprechen: Probiert Squarespace aus, der Funktionsumfang ist umwerfend bei gleichzeitiger leichter Bedienbarkeit.

Mit seiner dedizierten Developer Platform richtet sich Squarespace aber ganz klar auch an professionelle Agenturen. Die Developer Platform macht einige Technologien sichtbar, die dem Normalverbraucher verborgen bleiben (die ihn aber in der Regel auch nicht interessieren), und gibt Entwicklern damit eine größere Kontrolle über Features und Funktionen. So erhalten sie vollen Zugang zu HTML, CSS und JavaScript, einschließlich einer JSON API um die Inhalte des CMS auszugeben.

squarespace7-developerplatform
Volle Kontrolle über den Quellcode

Mithilfe der Developer Platform können auch eine Reihe von Diensten von Drittanbietern genutzt werden. Dazu gehören Schwergewichte wie MailChimp, Dropbox, Google Drive, Disqus oder Soundcloud. Mit dem Site Manager können Sie zudem die Inhalte Ihrer Kunden komfortabel von einem Punkt aus verwalten.

Dazu kommt die Infrastruktur von Squarespace, die an sich schon mal ein großes Plus darstellt. Statt sich auf Ihren dedizierten Server verlassen zu müssen, können Sie weltweit verteilte Server Cluster und ein robustes CDN nutzen. Der Support für Ihre Kunden wird auch durch Squarespace geleistet. So können Sie das machen, was Ihnen eh am besten liegt: das Gestalten von tollen Designs.

Squarespace 7: Neue Designs und eine tolle Webseite

Ich gebe es zu: Ich bin der visuelle Typ. Ein großartiges Design wird mich immer begeistern. Und ja, die 14 neuen Themes, die Squarespace anlässlich ihrer neuen Version spendierte, sehen meiner Meinung nach fantastisch aus.

squarespace7-newdesigns
Eines der vielen neuen schönen Designs

Nicht unerwähnt lassen will ich hier die Squarespace 7 Webseite. Die Präsentation für die neue Oberfläche von Squarespace ist ein echtes Parallax-Meisterwerk. Hier bewegen sich nicht einfach ein paar Dinge auf dem Bildschirm schneller, während der Rest des Designs still steht. Nein, das ist ein visuelles Feuerwerk. Dinge wechseln flüssig ihren Zustand, aus einer Webseite wird herausgezoomt und dann sieht man ein Gerät, das diese Seite anzeigt. Aus sich bewegenden Elementen entstehen vollwertige Videos. Das fesselt und zieht einen geradezu rein. Und glauben Sie mir, bei aller Leidenschaft für gutes Design, so aufgeregt reagiere ich nicht allzu oft. Aber bei dieser Website musste ich einfach mal Begeisterung zeigen. Sorry. Auch wenn Sie das Konzept Online Website-Design grundsätzlich ablehnen – gönnen Sie sich einen Blick auf die Squarespace-Seite. Nur so zur Inspiration.

Einen guten ersten Eindruck von Squarespace 7 bietet dieser einminütige Clip:

Zum Schluss noch ein Wort zu den Preisen: Diese liegen unverändert bei acht bis 24 USD pro Monat. Sowohl das Professional Abo für 16 USD/Monat als auch das Business-Abo für 24 USD/Monat enthalten den Zugriff auf die beschriebene Developer Platform. Egal, welches Abo für Sie interessant sein sollte, angesichts der Fülle an Funktionen lohnt sich jedwedes Modell.

Wenn Sie sofort loslegen wollen, hier geht´s los. Für die kostenlose 2-Wochen-Testperiode brauchen Sie im Übrigen keinerlei Zahlungsinformationen anzugeben. No risk, 100% fun…

Squarespace: Fortsetzung folgt

Im nächsten Artikel gibt es eine geballte Ladung Praxiserfahrung zum Thema: Wie gestalte und pflege ich eine Webseite mit Squarespace. Also ich bin überzeugt, und Sie?

Kategorien
(Kostenlose) Services Design Editoren Essentials HTML/CSS Webdesign

Mit JotForm erstellen Sie komplexe Formulare, ganz ohne Programmierung

Formulare zu erstellen ist zwar kein Hexenwerk; aber je umfangreicher sie werden, desto zeitintensiver wird das Unterfangen. Neben der HTML-Auszeichnung und gegebenenfalls JavaScript zur clientseitigen Validierung ist es vor allem die serverseitige Verarbeitung von Formularen, die nicht immer einfach ist. JotForm hat diese Problematik erkannt und stellt ein Werkzeug zur Verfügung, mit dem man sich komplexe Formulare einfach zusammenbauen kann. Neben vielen Eingabemöglichkeiten, die über die gängigen Formular-Elemente hinausgehen, lassen sich zudem Abhängigkeiten ohne großen Aufwand berücksichtigen. Auch das Aussehen der Formulare wird in JotForm über eine grafische Oberfläche festgelegt.

jotform

Formulare per „Drag and Drop“ zusammenstellen

Es klingt einfach und das ist es auch: Die intuitive Oberfläche von JotForm erlaubt es, Formular-Elemente einfach aus einer Liste in ein Formular zu ziehen. Dort lassen sich die einzelnen Elemente jederzeit in eine andere Reihenfolge bringen. Zur Verfügung stehen zunächst einmal alle Standard-Elemente, wie ein- und mehrzeilige Eingabefelder, Dropdown-Listen sowie Checkbox- und Radio-Buttons. Darüber hinaus lässt sich auch ein Datei-Upload einfügen, ohne dass man sich Gedanken über die Verarbeitung der hochgeladenen Dateien machen muss. Jedes Element ist auf Wunsch als Pflichtfeld zu deklarieren.

jotform_draganddrop
Per „Drag and Drop“ fügen Sie Formularfelder hinzu

Zusätzlich gibt es Elemente, um Überschriften, Texte und Bilder im Formular zu platzieren. Auch die neuen HTML5-Eingabetypen können verwendet werden. So lassen sich Eingabefelder für Telefonnummern, E-Mail-Adressen und Datumsangaben einbinden.

Um Spam zu vermeiden, steht auch eine Captcha-Funktion bereit. Neben dem klassischen Captcha hat man zudem die Möglichkeit, den Google-Dienst reCaptcha zu nutzen, bei dem „echte“ Texte anstatt generierter Wörter verwendet werden.

Individuelle Einstellungsmöglichkeiten und Vorgaben

Je nach Formularfeld stehen eine Reihe von Einstellungsmöglichkeiten zur Verfügung. Auch einige nützliche Vorgaben sind vorhanden. So kann man beispielsweise bei Dropdown-Listen US-Bundesstaaten, Länder, Monate, Tage oder die letzten 100 Jahre als Werte vorgeben. Letzteres ist beispielsweise interessant für die Angabe von Geburtstagen. Spezielle „deutsche“ Vorgaben, etwa unsere Bundesländer, stehen leider nicht zur Verfügung.

Auch bei der Darstellung der Eingabefelder gibt es viele Möglichkeiten. So lassen sich Checkbox- und Radio-Buttons ausschließlich untereinander oder in Spalten nebeneinander darstellen. Für jedes Feld kann zudem ein Tooltip mit ergänzenden Informationen hinterlegt werden.

Bewertungen und Zahlungsarten einbinden

Wer ein Produkt bewerten lassen möchte, erstellt sich ein entsprechendes Bewertungsformular. Es gibt dabei mehrere Bewertungsmöglichkeiten. So steht eine einfache Sternebewertung sowie eine komplexe Matrixbewertung, bei der mehrere Kriterien abgefragt werden können, bereit.

jotform_bewertung
Bewertungen lassen sich einfach integrieren

Auch Zahlungsarten sind einfach in ein Formular integriert. Es werden PayPal und einige andere Anbieter unterstützt. Auch eine Kaufabwicklung ohne spezielle Zahlungsart ist möglich. Selbst Bestellformulare, über welche Produkte oder Abonnements erworben werden können, sind verfügbar – inklusive der Angabe von Versandkosten.

Formularverarbeitung

Natürlich übernimmt JotForm die komplette Verarbeitung des Formulars. So wird vor dem Versenden geprüft, ob alle Pflichtfelder ausgefüllt wurden und etwaige Eingabevorgaben erfüllt sind. Beim Datei-Upload lassen sich beispielsweise eine maximale Dateigröße sowie akzeptierte Dateitypen angeben. JotForm prüft dann, ob es sich bei der hochgeladenen Datei tatsächlich um den vorgegebenen Dateityp handelt.

Über einen eigenen E-Mail-Editor wird festgelegt, wie die einzelnen Formulareingaben per E-Mail verschickt werden sollen. Standardmäßig stellt JotForm alle Eingaben tabellarisch als HTML-E-Mail dar. Mit einem eingebauten Rich-Text-Editor gestalten Sie die E-Mail individuell. Alle Bezeichnungen und Inhalte der Formular-Elemente werden als Platzhalter in der E-Mail hinterlegt.

jotform_email
Das Aussehen der E-Mails kann ebenfalls individuell festgelegt werden

Wer lieber Text-E-Mails erhält, kann auch auf den Textmodus umstellen. Per Formular hochgeladene Dateien werden nicht als Anhang mit der E-Mail verschickt, sondern sind in der E-Mail nur verlinkt. Das hat bei großen Dateien den Vorteil, dass diese nicht immer direkt mit der E-Mail heruntergeladen werden.

Als letzter Schritt der Formularverarbeitung steht bei erfolgreichem Versand die Weiterleitung zu einer Bestätigungs- beziehungsweise Dankesseite an. Hier hat man die Wahl zwischen einer von JotForm bereitgestellten Standardseite, der Ausgabe eines frei definierbaren Textes oder der Weiterleitung zu einer beliebigen URL.

Formulardaten an Dropbox oder Google Drive schicken

Nicht immer will man Formulardaten an eine E-Mail-Adresse schicken. Gerade bei Umfragen ist es wenig praktikabel, für jede Teilnahme eine E-Mail zu bekommen. Daher gibt es die Möglichkeit, die abgesendeten Formulardaten an einen Dropbox- oder Google-Drive-Zugang zu schicken. Dort wird jeder Formularversand als PDF-Datei mit allen Daten hinterlegt.

jotform_einbindungen
Einbindung von Dropbox und Google Drive möglich

Per Google Drive besteht zudem die Möglichkeit, alle Formulardaten gebündelt in einer Tabelle zu hinterlegen. Dabei wird für jedes Formular eine Tabelle angelegt, in der alle Formulardaten aufgelistet werden. So hat man direkt alle Eingaben gebündelt in tabellarischer Form vorliegen. Diese Funktion ist vor allem dann sehr nützlich, wenn man die Formulareingaben statistisch verwerten möchte. Dabei ist es durchaus machbar, die verschiedenen Funktionen wie E-Mail-Versand, Dropbox- und Google-Drive-Anbindung miteinander zu kombinieren.

Komplexe Formulare mit Bedingungen

Eine besondere Herausforderung ist es immer, wenn Eingabefelder in Abhängigkeit zu anderen Eingaben dargestellt werden sollen. Solche Bedingungen kann man per JotForm ebenfalls sehr einfach realisieren. Je nach Inhalt eines Textfeldes oder Auswahl eines Checkbox- oder Radio-Buttons lassen sich unterschiedliche Funktionen ausführen. Je nach Bedingung können dann Formularfelder dargestellt oder versteckt werden. Es lassen sich Inhalte von Eingabefeldern ändern oder bestimmte Eingabefelder als Pflichtfeld deklarieren.

jotform_bedingungen
Problemlos Bedingungen erstellen und Funktionen definieren

Aussehen festlegen

Bei so vielen individuellen Einstellungsmöglichkeiten dürfen natürlich individuelle Designmöglichkeiten für Formulare nicht fehlen. Über eine eigene Designoberfläche stellt man sich das Aussehen des Formulars selbst zusammen. Neben vorgegebenen Farbschemen können Farben für Hintergrund, Text und Eingabefelder auch ganz individuell definiert werden. Natürlich sind auch Schriftart und -größe sowie Zeilenabstand und andere Abstände einstellbar.

jotform_designer
Formular per Designer gestalten

Bei den Schriften hat man zudem Zugriff auf Google Fonts und kann aus einer Liste direkt eine Schrift seiner Wahl einbinden.

Wer ein Formular noch individueller gestalten möchte, kann den integrierten CSS-Helper verwenden. Dieser ermöglicht die Angabe von CSS-Eigenschaften für die einzelnen HTML-Elemente des Formulars. Der CSS-Helper zeigt im Formular die Klassennamen der einzelnen Elemente an, sodass man diesen beliebige CSS-Eigenschaften zuordnen kann.

Formular einbinden

Das fertige Formular muss schlussendlich noch ins eigene Webprojekt eingebunden werden. Hier stehen ebenfalls mehrere Varianten zur Verfügung. So gibt es zum einen die Möglichkeit, den Quelltext des Formulars zu kopieren und in ein HTML-Dokument einzubinden. Stylesheet- und JavaScript-Dateien bleiben jedoch auf dem Server von JotForm und werden lediglich verlinkt. Beim Verschicken des Formulars gelangt man dann zwar auf die Website von JotForm; über die Dankesseite kann man jedoch wieder auf die eigene Website verlinken.

jotform_einbindung
Formulare per Iframe, Pop-up oder Quelltext in eigenes Projekt einbinden

Alternativ kann ein Formular als Iframe eingebunden oder als Pop-up aufgerufen werden. Auch ein einfacher Verweis auf die Formularseite ist machbar. Es ist sogar möglich, sich eine individiuelle URL für ein Formular zu erstellen. Diese setzt sich zusammen aus dem Benutzernamen und einer frei wählbaren Bezeichnung für das Formular.

JotForm ist kostenlos für kleine Projekte

JotForm ist kostenlos nutzbar für Formulare, die maximal 100 mal im Monat versendet werden. Wer also zunächst nicht mit mehr versendeten Formularen rechnet, kann kostenlos loslegen. Außerdem stehen beim kostenlosen Zugang 100 MB Speicher für hochgeladene Dateien zur Verfügung. Für 9,95 US-Dollar im Monat gibt es den „Premium“-Plan, mit dem 1.000 Formularübertragungen möglich sind und in dem 10 GB Speicher zur Verfügung stehen.

Darüber hinaus gibt es noch einen „Economy“-Plan für bis zu 10.000 Übertragungen sowie einen „Professional“-Plan für bis zu 100.000 Übertragungen im Monat.

Fazit

JotForm ist ein äußerst umfangreiches Tool zum Erstellen sehr individueller und komplexer Formulare. Die Bedienung ist intuitiv und einfach. Im Handumdrehen hat man gut gestaltete Formulare, die fast keine Wünsche bezüglich Funktionalität und Aussehen offen lassen. Die Auszeichnung der Formulare erfolgt zeitgemäß per HTML5. JavaScript unterstützt bei der clientseitigen Validierung und blendet beispielsweise die Tooltips ein.

jotform_themes
Teils kostenlose Themes für schicke Formulare

Dank fertiger und teils kostenloser Themes und Templates muss man selbst gestalterisch nicht tätig werden, kann es aber, wenn man möchte. Dank zahlreicher Plug-ins ist es zudem einfach, per JotForm erstelle Formulare in ein WordPress- oder Joomla-System einzubinden. Die Anbindung an Dropbox und Google Drive ermöglicht weitere interessante und zeitsparende Möglichkeiten, Formulardaten zu verwalten und auszuwerten.

Mit dem Ende von Adobes FormsCentral ermöglicht JotForm auch den Import der in FormsCentral angelegten Formulare.

Wer JotForm einfach mal ausprobieren möchte, benötigt nicht einmal einen Zugang. Man kann direkt loslegen und Formulare zusammenstellen, gestalten und testen. Die Oberfläche von JotForm ist größtenteils ins Deutsche übersetzt. Außerdem gibt es einen Nutzerleitfaden, ein englischsprachiges Forum und englischsprachige Erklärvideos auf YouTube.

(pot/dpe)

Kategorien
Apps Design Editoren Programmierung

Dr. Web testet: Atom, der HTML-Editor „für das 21. Jahrhundert“

Atom ist ein relativ neuer, plattformübergreifender Open-Source HTML-Editor. Nach eigener Aussage ist Atom der „hackbare Text-Editor für das 21. Jahrhundert“. Wieviel an dieser Aussage dran ist, werden wir in diesem Beitrag näher beleuchten. Auf den ersten Blick hat Atom sehr viel gemeinsam mit Sublime Text 2. Jedoch wird auch explizit damit geworben, dass alles an Atom anpassbar ist. Ob dieser Editor tatsächlich so besonders ist, und, wen ja, was ihn so besonders macht und von anderen Editoren unterscheidet, wird dieser Artikel aufzeigen. Ist Atom tatsächlich der Editor für das 21. Jahrhundert?

Atom - der hackbare HTML-Editor für das 21. Jahrhundert

Die Installation von Atom

Der HTML-Editor ist für alle Plattformen konzipiert, es gibt ihn für Windows, Mac OS X und auch für Linux. Für alle anderen Plattformen außer Mac muss zum Download die Projektseite auf GitHub besucht werden. Scrollen Sie auf der GitHub-Seite bitte herunter bis „Installing“, dort finden Sie die Versionen für Windows und Linux.

Nach der Installation zeigt der Editor eine Willkommens-Seite mit den wichtigsten Ressourcen und Tastaturkombinationen an.

atom-nach-installation

Es empfiehlt sich nach der Installation gleich die Einstellungen zu besuchen unter „Atom => Preferences“, um wichtige Dinge wie Schriftgröße und Schriftart anzupassen. Auch kann man das Theme hier ändern, denn nicht jeder Entwickler mag dunkle Themes. Vorinstalliert sind 6 Themes. Die Community bietet noch bedeutend mehr. Zu beachten ist, dass es Themes für das Design des Editors gibt und andere Themes für die Syntax. Die Variation für den Editor inkludiert daher nicht die Syntax, nach einem passenden Syntax-Theme muss demzufolge gesondert gesucht werden.

Ein wichtiger Schritt ist gewiss auch die Kontrolle der bereits vorinstallierten Packages aka Plugins, um zu schauen, welche Packages eventuell noch zusätzlich installiert werden müssten. Hier existieren bereits eine ganze Menge Packages. Mit der Suchfunktion des Editors findet man etliche mehr als auf der Atom-Website. Es sollte daher kein Problem sein, den Editor an die eigenen Bedürfnisse anzupassen.

die-einstellungen-von-atom

Installation von Packages und Themes

Das Installieren von Packages geht denkbar einfach über den Menüpunkt „+ Install“. Hier muss im Gegensatz zu Sublime Text 2 nicht erst ein Plugin installiert werden, um neue Packages installieren zu können. Das empfinde ich als benutzerfreundlicher, denn so spart man wertvolle Zeit.

install-packages

Auch Themes können auf die gleiche Art und Weise installiert werden. Um ein Theme oder Package zu installieren, gibt man einfach – wenn bekannt – den Namen des Themes oder des Packages ein und drückt „Enter“. Jedoch kann man auch nur „Themes“ oder andere allgemein gehaltene Schlüsselwörter eingeben und kommt trotzdem zum Ziel.

package-installation

Allerdings bekam ich (unter Mac OS X) nach der versuchten Installation des Packages „Emmet (vormals Zen-Coding)“, eine Fehlermeldung, dass die „Command Line Developer Tools“ von Apple fehlen würden und Emmet daher nicht installiert werden könne.

Fehlerausgabe bei der Installation

Nachdem Apples „Command Line Developer Tools“ installiert wurden, ist die Installation von Packages und Themes kein Problem mehr und funktioniert reibungslos und zügig.

erfolgreiche-package-installation

Empfehlenswerte Packages für den Anfang

Die Anpassung von Atom mittels CSS

Über das Stylesheet kann die Ansicht des Atom-Editors leicht beeinflusst werden. Mir gefiel die farbliche Ausgabe und Kennzeichnung des „Bracket Matchers“ nicht, dieser nutzte nur eine 1 Pixel gedottete Linie zur Kenntlichmachung der zusammengehörigen Klammern und Divs, was für meine Augen relativ schlecht zu erkennen war. Daher fügte ich dem Stylesheet noch einige Notierungen hinzu. Das User-Stylesheet erreichen Sie übrigens unter „Atom => Open your Stylesheet“.

Einige Zeilen CSS sorgen für eine bessere Markierung des Bracket Matchers

Diese wenigen Zeilen CSS bewirken eine wesentlich deutlichere Markierung des Bracket Matchers.

Der mit dem neuen CSS beeinflusste Bracket Matcher

Da auch der Quellcode von Atom über die GitHub-Seite des Projekts zugänglich ist, dürfte für versierte Programmierer grundsätzlich alles anpassbar sein. Weniger versierte Menschen können jedoch durch Packages, Themes und eventuell durch die CSS-Anpassung den Editor ebenfalls nach Ihren Bedürfnissen gestalten.

Die Besonderheiten des Atom HTML-Editors

Node.js Unterstützung

Die Node.js Unterstützung macht es einfach, auf das Dateisystem und auf Spawn-Subprozesse zuzugreifen, selbst das Starten eines Servers aus dem Editor heraus ist kein Problem. Wenn Sie eine Bibliothek benötigen, können Sie aus den über 50.000 in Nodes Package Repository auswählen. Die nahtlose Integration ermöglicht Ihnen eine freie Mischung aus Node- und Browser-APIs. Das und vieles mehr erlaubt Ihnen die Integration von Node.js.

node-js-integration

Modulares Design

Atom ist aus über 50 Open-Source-Paketen zusammengesetzt, die sich um einen minimalen Kerncode legen. Das Ziel der Entwickler ist ein umfassend anpassbares System und soll die Unterscheidung zwischen Benutzer und Entwickler verwischen. Sollten Sie einen Teilbereich von Atom nicht mögen oder erweitert sehen wollen, so erstellen Sie (theoretisch) Ihr eigenes Package. Durch das Hochladen in das Package-Verzeichnis können Sie es für jedermann zugänglich machen.

das-modulare-atom-design

Die Grundfunktionen des Atom-Editors

Out-of-theBox bietet Atom bereits etliche, nützliche Features an. Zum Beispiel:

  • einen Dateisystem-Browser
  • einen Fuzzy-Finder für schnelles Öffnen von Dateien
  • schnelles, projektweites „Suchen und Ersetzen“
  • Multiple Cursors und Selektionen
  • Multiple Fenster („Panes“)
  • Snippet Unterstützung
  • Code Folding (das Falten von Code-Bereichen)
  • eine klare und übersichtliche Oberfläche für die Einstellungen
  • Importfunktion für TextMate (Grammatik und Themes)
  • Unterstützung für das Arbeiten mit Projekten
  • gutes Syntax-Highlightning
  • klares, übersichtliches Design
  • einen Entwicklermodus
  • Shell-Kommandos
  • eine Kommando-Palette

Einige zusätzliche Screenshots

Die Entwickleransicht von Atom

atom-entwickler-ansicht

Die Code-Vervollständigung

code-vervollstaendigung

Die Projekt-Einstellungen (Sidebar links – Rechtsklick auf eine Datei)

die-projekt-moeglichkeiten-von-atom

Fazit

Der Atom HTML-Editor gefällt mir richtig gut, denn er bietet nicht nur bereits nach der Installation etliche nützliche Details. Durch die wirklich einfache Installation von Erweiterungen und Themes kann der Editor unkompliziert auf eigene Bedürfnisse angepasst und erweitert werden – ohne das Vorkenntnisse im Umgang mit Git nötig wären. Inwieweit sich der Editor für die Arbeit mit wirklich großen Projekten eignet, müsste noch überprüft werden. Für „normale“ Projekte jedoch ist er hervorragend geeignet.

Links zum Beitrag

Empfehlenswerte Packages

(dpe)

Kategorien
Design Editoren

Homepage-Baukasten war Gestern: Professioneller Website-Builder Rukzuk hebt sich von der Masse ab

Homepage-Baukästen, Website-Builder, Online-Webdesign-Software – wie wollen Sie es nennen? Mit Rukzuk aus Konstanz am Bodensee betritt ein neuer Vertreter dieses Genres die Bühne und will sich ein Stück des größer werdenden Kuchens sichern. Dabei wendet sich Rukzuk nicht direkt an den Endkunden, der seine Seite selber bauen möchte. Vielmehr will sich Rukzuk vor allem als ernsthaftes Werkzeug für professionelle (Web-)Designer etablieren. In diesem Segment ist zwar der Wettbewerb geringer, aber dennoch vorhanden. Wir haben uns Rukzuk aus der Nähe angeschaut.

rukzuk-landing

Rukzuk: Entstanden als Design-Software für den Eigenbedarf der Seitenbau GmbH

Rukzuk, mittlerweile als eigene Firma ausgegründet, entstand über Jahre hinweg als internes Werkzeug der Konstanzer Agentur Seitenbau GmbH. Mit frühen Vorversionen des heutigen Rukzuk wurden bereits Kundenprojekte, etwa für die Telekom, erstellt. Rukzuk hat sich im harten Alltag eines Designers demnach schon bewährt, bevor es überhaupt den Status eines eigenen Produktes erhielt.

Damit drängt sich bereits der Verdacht auf, dass hier ein Produkt entstanden ist, dass den Bedarfen eines Webdesigners tatsächlich mal entsprechen könnte. Denn, worin bestehen denn die typischen Probleme am typischen Kundenprojekt?

Das Projekt braucht ein Design. Das Projekt braucht eventuell weitere Features. Das Projekt braucht fast immer ein CMS. Bislang designte also der Designer das Design in Photoshop mit nachfolgender Umsetzung in HTML/CSS, der Entwickler entwickelte etwaige Zusatzfeatures und passte dann alles auf das ausgewählte CMS an.

Mit Rukzuk ist das nicht mehr erforderlich. Rukzuk erlaubt dem Designer das Design ohne Codekenntnisse. Es erlaubt aber auch dem Entwickler das Entwickeln etwa erforderlicher Funktionsmodule, ohne sich ums Design kümmern zu müssen. Und ein CMS liefert Rukzuk gleich mit. Klingt ziemlich vollständig und ist es auch.

rukzuk-vollbildmodus
Rukzuk im Vollbildmodus: man vergisst, dass es ein Online-Builder ist

Es fehlen im Grunde nur die business-logischen Elemente, also eine Kundenverwaltung, das Rechnungswesen etc., um mit Rukzuk eine Agentur autark betreiben zu können. Wobei man dazu natürlich anmerken muss, dass Rukzuk niemals behauptet hat, eine solche Lösung zu bieten. Nicht, dass das mir einer falsch versteht.

Unterschiede zu vorhandenen Lösungen gibt es viele. Die nahtlose Kombination aus visueller Designoberfläche und vollwertigem CMS ist einmalig. Schon das Entwickeln eigener Module erlauben nur wenige, ein echtes CMS implementieren ebenfalls nicht so viele. Module im Rukzuk-Sprachgebrauch sind übrigens kleine Bausteine, die man für das Design einer Site benötigt, also etwa ein Slider, eine Galerie, ein Kontaktformular etc. Diese erstellt man nach den Konventionen von Rukzuks PHP- und JavaScript-API. Rukzuk liefert jedoch schon rund 50 Module für die wichtigsten Elemente einer Website mit.

rukzuk-madewith-02
Made with Rukzuk: ein Beispiel für eine mit Rukzuk erstellte Website

Alleinstellungsmerkmal: Rukzuk gibt Ihnen Ihre Website-Daten, wenn Sie wollen

Wenn Sie sich schon einmal mit dem einen oder anderen Website-Baukasten beschäftigt haben, werden Sie wissen, dass die erstellten Websites in aller Regel auch auf der Infrastruktur des jeweiligen Baukastenanbieters gehostet werden. Mit anderen Worten: Sie benötigen keinen zusätzlichen Webspace mehr. Viele Baukastensysteme arbeiten direkt mit Registraren zusammen, um Ihnen dann die gewünschte Domain gleich mit zu verkaufen. Bei den meisten Wettbewerbern ist das sogar unumgehbar. Dort müssen Sie Ihre Website beim Baukastenanbieter hosten lassen.

Rukzuk unterscheidet sich in mehrerlei Hinsicht. Natürlich bietet Rukzuk, wie alle anderen Systeme auch, im Standard eine Subdomain, hier nach dem Schema http://<123-456>.zuk.io, an. Das ist für die Entwicklung völlig ausreichend. Live wird man damit eher selten gehen wollen. Möglich ist aber auch das.

rukzuk-alternative-sidebar
Rukzuk: ausgefeilte Eigenschaftendialoge erlauben feinste Konfigurationen; hier mit der alternativen Sidebar für Leute mit viel Platz

Als zweite Alternative können Sie Ihre bestehenden Domains mit Rukzuk verbinden. Hierzu ändern Sie bei Ihrem Domainprovider den C-Name oder den A-Record und leiten so die Anfragen über den Domain Name Service auf Rukzuk um. Auch diese Variante ist im Reigen der Baukastensysteme gängig.

Was ich in der Form noch nie gesehen habe, ist die dritte Alternative. Die besteht darin, die generierte Website tatsächlich physikalisch auf einem Drittsystem, also dem eigenen Webspace bei einem beliebigen Hoster zu betreiben. Das kann automatisiert per Übergabe der FTP-Zugangsdaten an Rukzuk oder manuell via Download und nachfolgendem Upload auf den eigenen Space erfolgen. Die einzige Voraussetzung ist, dass der Hoster PHP ab Version 5.3 unterstützt, was bei allen bekannteren Anbietern der Fall ist; zumindest so konfiguriert werden kann.

Damit erledigt sich eines der Hauptargumente der Baukasten-Gegner. Diese lehnen Website-Builder zumeist schon ab mit dem Argument, sie würden sich niemals darauf verlassen, dass der Baukasten die erstellten Websites ordentlich verwahrt, ohne dass sie selbst wenigstens die Möglichkeit haben, physikalische Backups auf die lokale Festplatte zu ziehen. Dass die Argumentation hinkt, weil natürlich prinzipiell jeder Provider die wirtschaftliche Grätsche machen kann, lassen wir mal geflissentlich außen vor.

Die mit Rukzuk erstellte Präsenz läuft somit auch dann noch, wenn man sich, aus welchen Gründen auch immer, von Rukzuk getrennt hat und wieder inbrünstig mit Vi: codet oder Rukzuk schlicht wegen eines technischen, wirtschaftlichen oder sonstigen Defekts ausgefallen ist, jedenfalls nicht mehr zur Verfügung steht.

rukzuk-madewith-04
Made with Rukzuk: ein weiteres Beispiel für eine mit Rukzuk erstellte Website

Rukzuk: Preise, Pläne, Konventionen

Anders als bei anderen Anbietern gibt es bei Rukzuk keinen kostenlosen Plan. Das Publizieren für lau ist nachvollziehbarerweise kein nachhaltiges Erfolgsmodell und wird von Rukzuk konsequenterweise nicht verfolgt.

Dennoch muss man sich nicht sofort in Kosten stürzen. Vielmehr können Sie bei Rukzuk das gesamte Feature-Set solange auf Herz und Nieren prüfen, wie Sie das wollen. Ein zeitliches Limit gibt es nicht. Der einzige Haken: sobald Sie Ihre erstellten Sites publizieren, also live im Netz für jedermann zugänglich machen wollen, benötigen Sie einen der kostenpflichtigen Pläne.

Und auch wenn sich Rukzuk in erster Linie an Agenturen und selbständige Designer richtet, so haben sich die Betreiber doch entschieden, einen kostenpflichtigen Plan namens "Rukzuk One" ins Angebot zu nehmen. Dieser bietet für 12 – 15 Euro im Monat (je nach Zahlweise) ein Projekt nebst einer Live-Website an und richtet sich damit an den klassischen Homepage-Baukasten-Kunden – den ambitionierten Seitenbetreiber, der kein Geld für einen Auftragsdesigner ausgeben kann oder will.

rukzuk-madewith-01
Made with Rukzuk: der kreativen Fantasie sind praktisch keine Grenzen gesetzt

Der Plan "Rukzuk Freelancer" richtet sich an den selbständigen Design-Freelancer, der für 19 – 25 Euro im Monat (je nach Zahlweise) zehn Projekte und drei Live-Websites betreuen kann.

Der Plan "Rukzuk Studio" will die Lösung für kleinere Designteams sein und bietet die Möglichkeit, eigene Module zu erstellen, sowie 20 Projekte mit 10 Live-Websites zu managen. Dafür müssen Sie 49 bis 69 Euro im Monat (bei jährlicher/monatlicher Zahlung) auf den Tisch des Hauses blättern.

In Zukunft wird das Portfolio nach Angabe der Macher noch um den Plan "Rukzuk Agency" erweitert. Auch in diesem Plan ist die modulare Erweiterbarkeit inbegriffen. Es können 50 Projekte mit 30 Live-Websites betrieben werden. Als Alleinstellungsmerkmal ist es nur bei diesem Plan möglich, das Backend zu branden, also dem Kunden eine eigene White-Label-Variante anzubieten, bei der Rukzuk als Dienstleister nicht mehr transparent ist. Für diesen Plan werden recht stolze 259 – 299 Euro im Monat (je nach Zahlweise) berechnet.

Wer sich nun ein klein wenig schüttelt, gehört wohl mit ziemlicher Sicherheit zur Zielgruppe. Was ist aber mit denen, die sich fragen, was sie denn mit 30 Websites sollen?! Hier werden auf Anfrage individuelle Angebote geschneidert.

Fairerweise muss man sagen, dass auch der Wettbewerb ähnliche Grenzen einzieht und bei größeren Bedarfen entweder passen muss oder auf Anfrage spezielle Angebote schneidert. Im internationalen Vergleich liegt Rukzuk preislich sehr wettbewerbsfähig und braucht sich nicht zu verstecken.

Interessant für Freelancer und Agenturen ist auch die Möglichkeit, komplette Projekte an den Endkunden transferieren zu können. Somit erhält der Endkunde selbst eine Rechnung von Rukzuk für den Betrieb seiner Website und die laufenden Kosten müssen nicht umständlich weiter berechnet werden.

Punkten kann Rukzuk vor allem hierzulande damit, dass das komplette Produkt in deutscher Sprache verfügbar ist. Das dürfte insbesondere den Endkunden freuen, der sich nicht mit fremdsprachigen, in der Regel englischen Texten rumschlagen muss. Auch der Editor ist komplett in deutscher Sprache gehalten.

In der Standardeinstellung wird Rukzuk immer in der Systemsprache des Rechners aufgerufen, auf dem der Browser läuft, mit dem Rukzuk verwendet wird. Ist Ihr Browser also in englischer Sprache unterwegs, wird sich Rukzuk ebenfalls komplett in englischer Sprache präsentieren. Zudem ist die Sprache über die Optionen auch manuell einstellbar. Das ist nützlich, wenn man zum Beispiel seinen Browser auf Deutsch betreibt, Rukzuk wegen der gängigen Coder-Terminologie aber trotzdem auf Englisch betreiben will.

Rukzuk: der Editor – das Herzstück des Dienstes

Hat man sich einmal angemeldet, wofür keine Zahlungsdaten erforderlich sind, findet man sich fast klassisch in einem Auswahlfenster wieder, von welchem aus man ein neues Projekt initiieren oder ein bereits erstelltes aufrufen und bearbeiten kann.

Entscheiden Sie sich für "Neues Projekt", stehen Sie im nächsten Schritt vor der Wahl eines von acht durchaus professionellen Design-Templates oder eines von zwei Wireframes oder der Erstellung eines komplett leeres Projekts. Einsteiger sollten immer zunächst ein vollwertiges Template wählen, um so am lebenden Beispiel nachvollziehen zu können, wie man mit Modulen und anderen Seitenelementen sinnvoll arbeitet.

Nachdem Sie diese Entscheidung getroffen haben, öffnet sich der eigentliche Editor, der nur auf den ersten Blick, vor allem wegen seiner Farbgebung an Adobes Creative Cloud erinnert. Bei näherem Hinsehen wird schnell deutlich, dass Rukzuk ein vollkommen anderes Bedienkonzept verfolgt.

rukzuk-modulstrukturbaum
Rukzuks Modulstrukturbaum: das Herzstück und Dreh- und Angelpunkt für Ihre Designs

Im Vergleich zu CC, aber auch im Vergleich zu anderen Baukasten-Lösungen fällt als erstes auf, dass Rukzuk zwar auf WYSIWYG, aber noch nicht vollständig auf Drag und Drop setzt. Zwar können Designelemente zum Teil mit der Maus ausgewählt und auch eingefügt werden. Parameter und Optionen werden allerdings ausschließlich über die Eingabe von Werten, sowie Schiebereglern definiert. Ausnahmen, etwa bei der Grid-Definition, bestätigen die Regel.

rukzuk-automatische-anwahl-konfiguration
Rukzuks praktische Kontextauswahl: Element in der Vorschau anklicken öffnet den Eigenschaftendialog

Der zentrale Bearbeitungsbereich ist mithin nicht das eigentliche Layout, sondern der am linken Bildschirmrand platzierte Strukturbaum, der sich mehrere Ebenen tief verschachtelt. Wer einmal die dicht besiedelte Liste mit ihren diversen Ausklappmöglichkeiten gesehen hat, wird nicht unbedingt den Begriff Übersichtlichkeit damit assoziieren. Dafür ist der Detailgrad der Bearbeitungsmöglichkeit weit granularer als das bei anderen Lösungen der Fall ist.

Und so sieht das Erstellen einer Site zunächst einfacher aus, als es letztendlich wirklich ist:

Eindeutig, und so werden Sie es aus dem eben gesehenen Video ja auch mitgenommen haben, ist Rukzuk ein extrem mächtiges Werkzeug. Durch die Möglichkeit der Einbindung externer Komponenten, wie CSS- oder HTML-Code, ist der Flexibilität keine Grenze gesetzt. Da sind andere Systeme weit eingeschränkter. Die Erstellung eigener Module in PHP und JavaScript tut ihr übriges.

rukzuk-modul-einfuegen
Rukzuks Modulstrukturbaum kann per einfacher Auswahl erweitert werden; mehr als 50 Module werden mitgeliefert

Den Einstieg erleichtert Rukzuk durch den am rechten oberen Rand des Browserfensters angeordneten Menüpunkt "Erste Schritte". Auf Klick öffnet sich ein Overlay, aus welchem heraus Sie direkt einige ansprechend erstellte und hilfreiche Einsteigervideos ansehen können, ohne den Editor hierfür verlassen zu müssen.

ersteschritte-videos

Rukzuk unterstützt auch die Erstellung responsiver Designs über Breakpoints. Über rechtsseitig angeordnete Breakpoint-Trigger wählen Sie die verschiedenen Device-Breiten aus. Die Verfeinerung des Designs der verschiedenen Auflösungen kann dann wiederum über die linksseitigen Listen erfolgen.

Responsive Designs können Sie bequem testen, indem Sie von Rukzuk einen QR-Code generieren lassen, den Sie mit Ihrem Mobilgerät abrufen. Schon erhalten Sie eine Preview des von Ihnen erstellten Layouts. Das ist einfach und überzeugend. Die Macher hinter dem Baukasten legen Wert auf die Feststellung, dass mit Rukzuk, anders als etwa mit Webydo, echte Responsiveness möglich ist, sofern man sich für voll-fluide Layouts entscheidet. Rukzuks Module geben keine fixen Begrenzungen vor oder setzen solche unbemerkt um, sondern passen sich fließend dem jeweiligen Content an.

rukzuk-resposnive-design
Rukzuk kann auch voll-responsive Designs umsetzen

Rukzuk: Konzeptionelles Neuland in der Welt der Homepage-Baukästen

Sicherlich erscheint es zunächst überraschend, wie relativ deutlich das Bedienkonzept von Rukzuk von gängigen Standards abweicht. Rukzuk muss man schon wirklich erlernen und das geht nicht nebenbei. Damit will ich nicht sagen, dass es sich etwa nicht lohnen würde. Man muss es lediglich wissen und sich bewusst dafür oder dagegen entscheiden. Dabei will ich nicht verhehlen, dass es derzeit keine vergleichbare Lösung am Markt gibt und selbst die weniger vergleichbaren mit geringerem Feature-Set ebenfalls nicht im Handumdrehen erlernt sind.

Für Rukzuk spricht, dass es sich um eine über Jahre gereifte, stetig mächtiger werdende Lösung aus deutschen Landen handelt, die ihre Tauglichkeit bereits mehrfach bewiesen hat. Das Potenzial der Lösung schätzten die Erfinder von der Seitenbau GmbH so hoch ein, dass sie eine Ausgründung des Systems als eigene Firma in der Form einer Aktiengesellschaft vornahmen.

Soll ich mich für Rukzuk entscheiden?

Das ist eine Frage, die Sie für sich selbst entscheiden müssen. Es kommt sehr darauf an, wo Sie sich selbst sehen und wo Sie stehen. Sie sollten Rukzuk aber auf jeden Fall ausprobieren, um sich selbst ein qualifiziertes Bild zu machen. Ich gebe Ihnen daher nur ein paar Anhaltspunkte:

Haben Sie keine Code-Erfahrungen, sind also ein reiner Designer, möglicherweise noch ursprünglich aus dem Printbereich, dann müssen Sie sich so oder so in ein Werkzeug einarbeiten. Natürlich würde es Ihnen leichter fallen, wenn das Tool ihrer bisherigen Arbeitsumgebung nicht völlig fremd wäre. Auf der anderen Seite, was nutzt Ihnen ein schneller erlernbares Tool, wenn es dann letztlich nicht die erforderlichen Features bietet?.

Sind Sie ein Entwickler mit soliden PHP- und JavaScript-Kenntnissen kann Rukzuk für Sie besonders interessant sein. Sie können über die Modulprogrammierung jedwede Funktionalität, so sie nicht schon vorhanden ist, erschaffen und bekommen ein CMS frei Haus geliefert. Gehörte ich zu dieser Gruppe, würde ich Rukzuk schon sehr deutlich in Betracht ziehen.

Sind Sie ein ambitionierter Seitenbetreiber, der schnell und unkompliziert seine eigene Seite erstellen und pflegen will, dann ist der Einsatz von Rukzuk ebenfalls eine solide Sache. Wollen Sie bloß eine Art Web-Visitenkarte für Ihren Haustier-Ausführservice gestalten gibt der Markt hinreichend leistungsfähige und schneller erlernbare Alternativen her.

Als Agenturinhaber müssen Sie mit wachem Auge die Fähigkeiten Ihrer Mitarbeiter bewerten und dann entscheiden, ob Rukzuk Ihr neues Hauptwerkzeug werden soll. Denn eines ist klar. Rukzuk ist dermaßen komplex, dass es sich nicht zum nur gelegentlich zu verwendenden Tool eignet. Gehören Sie zu diesem Personenkreis, empfehle ich Ihnen auf jeden Fall einen ausführlichen Test der Lösung vom Bodensee. Testen Sie Rukzuk auf Herz und Nieren. Es ist jedenfalls keine theoretisch funktionierende Lösung mit Beschränkungen im professionellen Einsatz, sondern eine durch das Stahlbad realer Kundenprojekte gehärtete, praxiserprobte Software, die weit mehr kann als man ihr auf die ersten paar Blicke ansieht.

Fazit

Ich kenne jeden nennenswerten Homepage-Baukasten in der Weite des Netzes, dabei einige bis in die Haarspitzen genau. Keiner davon kann die volle Leistungsfähigkeit eines Rukzuk abrufen und zugänglich machen. Wenn Sie also generell eine hohe Affinität zu visueller Design-Software mit Code-Zugriff haben, werden Sie sich schwer tun, etwas besseres oder auch nur ähnlich gutes zu finden. Sind Sie dazu noch vornehmlich für den deutschen Markt tätig, spielt der perfekte Support der deutschen Sprache und die ebensolche Ansprechbarkeit der Entwickler eine nicht unbedeutende Rolle.

Ich wiederhole daher gern meine bereits mehrfach getätigte Empfehlung: Testen Sie Rukzuk selber, aber nehmen Sie sich genug Zeit dafür. Denn Rukzuk muss man etwas ziehen lassen, wie einen guten Tee. Das System erschließt sich nicht auf Anhieb, bleibt dann aber wie ein Ohrwurm in den Hirnwindungen hängen.

Kategorien
Editoren Webdesign

Das sieht man Ihnen gar nicht an! 8 Websites erstellt mit: Webydo, der code-freien Plattform für Designer

Wir verstehen uns bekanntlich als Magazin für Seitenbetreiber und beschränken uns von Beginn an nicht auf Themen, die lediglich Front-End-Entwickler und Designer interessieren. Seit vielen Jahren schon haben wir die Entwicklung der diversen Homepage-Baukästen, Website-Builder, Online Design-Suiten oder wie die Hersteller ihre Software auch zu nennen beliebe, im Auge. Eins ist klar. Die Angebote werden immer leistungsfähiger. In einer kleinen Serie wollen wir uns ab heute mal ansehen, wie denn damit erstellte, real existierende Websites wirklich aussehen und was sie an Features mitbringen. Den Anfang macht Webydo, die Online Design-Software für professionelle Designer.

wooden-toys-116701_640

Webydo ist viel mehr als eine Online-Webdesign-Software oder ein schlichter Homepage-Baukasten

Was Webydo alles zu leisten in der Lage ist, habe ich vor ein paar Tagen erst sehr ausführlich bei den Kollegen von PSD Tutorials dargestellt. Im Kern ist das System eine Designlösung im SaaS-Modell. Besonderen Wert legen die Macher darauf, dass sich Webydo nicht primär an den Heimwerker des Web, sondern an professionelle Designer wendet, die schlicht nicht coden wollen oder können.

Neben einer pixelgenauen Designoberfläche bietet Webydo eine komplette Abrechnungslösung, ist mithin ein zentrales Tool für Designer, die damit auch Ihre Agentur verwalten können. Damit soll es aber an dieser Stelle auch genug sein. Für sehr detaillierte Informationen besuchen Sie einfach den eben genannten Link zu PSD Tutorials. Oder machen Sie sich selbst ein Bild direkt bei Webydo…

Noch ein wichtiger Hinweis vorab: Alle folgenden Beispiele wurden von professionellen Designern für den jeweiligen Kunden erstellt. Sie finden im folgenden Beitrag keine von den Endkunden selbst geklöppelten Websites. Vielmehr beauftragten alle hier vorgestellten Seitenbetreiber klassisch einen oder mehrere Designer. Was die Seitenbetreiner allerdings leisten, ist die Pflege der Websites, was dynamische Inhalte betrifft. Das geht mit Webydos CMS tatsächlich so einfach, dass es jedermann innerhalb einer Stunde erlernen kann.

01 Hosana Frossard (Brasilien)

01_10-webydo-sites-review

Hosana Frossard ist ein brasilianisches Unternehmen, das sich mit Braut- und Veranstaltungsmode im Allgemeinen befasst. Maßschneiderei wird ebenso angeboten wie Konfektionsware oder Roben zum Mieten. Gerade das Thema "Hochzeit", das Hosana Frossard auf ihrer Website deutlich in den Vordergrund rücken, ist emotional sehr stark aufgeladen. Die Stimmung dieses einen "Tag fürs Leben" muss sich idealerweise im Webdesign widerspiegeln. Das ist außerordentlich gut gelungen.

Neben äußerst professionellen Fotografien in der Form von Headern, Galerien, Slidern und Hero-Bildern, die allesamt sehr seriös und dem Anlass angemessen rüberkommen, setzt die Website auf sehr viel Whitespace und dezente, pastellige Farben. Die Slider sind so konzipiert, dass sie nie das komplette Bild im Viewport austauschen, sondern lediglich einzelne Elemente daraus, was einen sehr ruhigen, eleganten Eindruck macht.

01b_10-webydo-sites-review

Am besten gefällt mir jedoch der Einsatz des recht neuen Code-free Parallax Scrollling Animators, den wir unseren Leserinnen und Lesern im Mai diesen Jahres vorstellten. Wie es sich gehört, setzt Hosana Frossard das parallaxe Scrolling nicht als Selbstzweck und im Übermaß ein, sondern begrenzt den Einsatz auf den Header der Startseite und einige Akzente beim Scrollen zum Seitenende.

Wie aus dem Lehrbuch ist die Website umfassend in die sozialen Medien eingebunden und als solches Teil der Strategie. Instagram spielt dabei eine zentrale Rolle als aktueller Bildstream, aber auch auf der Website selber gibt es eine große Vielfalt diverser Galerien. Bräute in spe werden die Seite mutmaßlich lieben.

Vom Design- und Marketingstandpunkt aus kann ich keine Kritik finden. Sogar der fast schon obligatorische Blog ist vorhanden und wird tatsächlich mit, für die Zielgruppe nutzwertigen Informationen bestückt. Man sieht Hosana Frossard beim besten Willen nicht an, dass die Site mit einem Online-Dienst erstellt und verwaltet wird.

02 Café Angola (Brasilien)/

04_10-webydo-sites-review

Café Angola aus Brasilien bietet Premium-Kaffeesorten in traditioneller Röstung. Daran bleibt schon beim ersten Besuch der Seite kein Zweifel. Insofern ist das allererste Ziel einer Webpräsenz hier schon mal klar erreicht. Mit äußerst professioneller Fotografie und einer ebensolchen Bildbearbeitung wird ein Vintage-Look kreiert, der den traditionellen Aspekt des Designs deutlich hervorhebt. Makroaufnahmen der gerösteten und ungerösteten Kaffeebohnen füllen Hintergründe dezent und stören den nur sparsam eingestreuten Textfluss nicht.

04b_10-webydo-sites-review

Auch Café Angola bindet die sozialen Kanäle prominent ein. Anstelle eines Blog- oder Newsbereiches bietet die Website Rezepte rund um Kaffee. Darunter finden sich nicht nur die naheliegenden Rezepte zur Kreation von etwa Café Cremoso, sondern auch eher Unkonventionelles wie verschiedene Bratensoßen auf Kaffee-Basis.

Auch bei der Rezeptdarstellung bleibt Café Angola seinem Designkonzept treu. Wenig Text, gute Typografie und große Bilder, sowie eine Farbgestaltung, die von jenen inspiriert ist, die man sieht, wenn man sich mit Kaffee beschäftigt.

03 Betty Zhang Art

05_10-webydo-sites-review

Betty Zhang ist eine Grafikdesignerin mit asiatischen Wurzeln, die ihre aktuelle Heimat allerdings über drei Kontinente erstreckt. Betty ist die Art Designerin, für die Webydo geschaffen wurde. Sie arbeitet offenbar hauptsächlich in der analogen Welt mit mehr oder weniger ausschweifenden Ausflügen ins Digitale.

05b_10-webydo-sites-review

Bettys Website ist minimalistisch und mit viel Whitespace unterlegt. In mehreren Galerien zeigt Betty einige ihrer Werke; ein Blog ist vorhanden, aber unter den kanadischen Variante von Googles Blogger angelegt. Inwieweit Betty Zhangs Website jetzt den persönlichen Ansprüchen des Einzelnen an eine gelungene Portfolio-Präsentation genügen kann, überlasse ich dem Betrachter.

In jedem Falle sehen wir hier eine durchaus moderne, klar gestaltete und trendgemäß umgesetzte Portfolio-Seite.

04 Stones Throw (USA)

06_10-webydo-sites-review

Stones Throw ist ein Restaurant in San Francisco, dass sich zum Thema "Back to the Basics" bekennt. Dort will man nicht superhip und obertrendy sein, sondern ehrliche Gastfreundschaft und gutes Essen offerieren. Von daher bietet sich der nostalgische Vintage-Look der entsprechenden Website förmlich an.

Ein vollflächiger Hintergrund aus Leinen mit einer Art Platzdeckchen mit Rotweinfleck am oberen Rand wird verknüpft mit einer Wild-West-Typografie, einfache Skizzen führen durch die verschiedenen Seitenbereiche. Ich persönlich hätte an mancher Stelle etwas mehr Liebe ins Detail der einzelnen Skizzen gesteckt. Die wirken doch arg einfach. Außerdem hätte ich deutlich mehr Fotos auf die Website eingebracht, immerhin sieht das Lokal, nach allem was man auf Instagram so sehen kann, ziemlich gut aus.

06b_10-webydo-sites-review

Generell ist die Website von Stones Throw jedoch zumindest auf einem sehr guten Weg und kann mit nur wenig Aufwand perfektioniert werden. Wenn ich mal in San Francisco bin, werde ich auf jeden Fall mal dort vorbeischauen.

Auch Stones Throw bindet die Social Media-Kanäle prominent ein, einen Blog oder sonstige News-Sektion gibt es allerdings nicht. Stones Throw setzt in Sachen News und Interaktion voll auf Facebook, Instagram und Twitter.

05 ThirtyNineZero|Citrus (UK)

07_10-webydo-sites-review

ThirtyNineZero|Citrus ist eine dieser klassischen Design-Agenturen, die Webydo als Kernzielgruppe betrachtet. Die Designer aus dem Vereinigten Königreich sind zweifellos sehr kreativ, wie man an dem umfangreichen Portfolio erkennen kann, als welches die Website konzipiert ist.

ThirtyNineZero|Citrus ist hauptsächlich analog aktiv. Man findet Bücher, Broschüre, großformatige Poster, Geschäftsunterlagen und vieles mehr. Der FC Chelsea darf zum Kundenkreis gezählt werden.

Die Website ist im Masonry-Stil gestaltet, die Vorstellung der Referenzen nimmt den mit Abstand breitesten Raum ein. Jede Referenz wird mit kurzer Beschreibung und Bild erläutert. Im "About Us" stellt sich die Agentur ganz klar als Print-Agentur dar.

Ich würde fast wetten, dass sie dennoch in Zukunft mehr in Sachen Web machen werden. Dass sie es können, beweisen Sie mit ihrer eigenen Website. Es ist wie überall. Am Anfang steht die kreative Idee. Ohne die kann selbst der beste Designer nichts erschaffen. Und Ideen haben die Jungs und Mädels von ThirtyNineZero|Citrus zweifellos. Dann braucht man noch ein passendes Werkzeug. Dieses haben sie offenbar in Webydo gefunden.

06 Big Blue Roo Design Studio (Australien)

08_10-webydo-sites-review

Jody Faux, Gründerin des Freelance-Design-Studios Big Blue Roo aus Adelaide in Australien, ist ein weiteres Beispiel für die Zielgruppendefinition Webydos. Jody ist seit 16 Jahren in Sachen Design unterwegs, davon aber erst seit fünf Jahren auch im Webdesign. Vor kurzem hat sie sich selbständig gemacht und bietet auf ihrer SEO-optimierten Seite nun ihre Dienste feil.

Mit Webydo will sich Jody nun voll und ganz auf Webdesign konzentrieren. Die vorhandenen Referenzen sind durchaus in sich selbst aussagefähig und auch, wenn ich den omnipräsenten Panda nicht einzuordnen vermag, macht Jodys Portfolio einen insgesamt professionellen Eindruck.

08b_10-webydo-sites-review

Jody setzt vielfach auf Comic-Elemente, offenbar zeichnet sie gern. Aber auch Designs im Vintage-Look gehören zu ihren Spezialitäten. Letztlich wäre allein ihr Portfolio einen eigenen Beitrag zur Flexibilität des Webydo-Systems wert.

07 Smakerij (Niederlande)

09_10-webydo-sites-review

Die Smakerij aus den Niederlanden ist eine Design-Agentur, die sich auf den Lebensmittelsektor spezialisiert hat und dort munter in allen Bereichen wildert, die damit auch nur entfernt zu tun haben. Vom Design einzelner Produkte, zum Design von Lebensmittel-Kombinationen hin zu Fotografie und Webdesign wagen sich die beiden Inhaberinnen Larisse Blok und Berber Galema an alles, was in ihrem Bereich nicht niet- und nagelfest ist.

Ihre Website kombiniert rautiertes Zeichenpapier als Hintergrund mit Navigationspunkten, die auf Tellern hübsch und weniger hübsch angerichtet dargestellt sind. Jedenfalls ist der Gesamteindruck außergewöhnlich außergewöhnlich. Die Zielgruppe der Smakerij erhält so den direkten Beweis, dass Blok und Galema ganz sicher nicht konventionell zu beschreiben sind. Das dürfte für Kunden, die auf der Suche nach etwas außerhalb der Konventionen sind, genau die richtige Strategie sein.

Die Smakerij ist ein vollkommen untypisches Beispiel dessen, was man erwarten würde, wenn einem einer sagt, er würde nun ein mit einem Online-Website-Designtool erstelltes Beispiel zeigen. Für mich zeigt das, wie flexibel diese Tools inzwischen geworden sind. Ich sollte doch mal das nächste Projekt…

08 Idealistai (Litauen)

10_10-webydo-sites-review

Idealistai aus Litauen, zu deutsch, wie zu erwarten war "die Idealisten" oder auch "die Träumer" sind ebenfalls eine Design-Agentur. Allerdings eine, die sich schon jetzt nicht hauptsächlich in der analogen Wert bewegt, sondern digitale Medien, wie Texte, Videos und Webseiten erschafft. Einen Schwerpunkt stellen zugegebenermaßen derzeit durchaus Videoproduktionen dar.

Idealistai bezeichnet sich selbst als Werbeagentur und so sind die Kunden auch vornehmlich im kommerziell-werblichen Bereich angesiedelt. Die eigene Website kommt ebenfalls im Pinterest-Stil daher. Farblich setzen die Idealisten auf Rot als einzige Farbe, alle anderen Elemente werden zunächst in Graustufen gezeigt und on Hover mit einem transparenten Rot überzogen. Erst wenn man ein Element tatsächlich anklickt, wird es voll-farbig präsentiert.

10b_10-webydo-sites-review

Auch wenn mir persönlich die Gestaltung der Idealistai-Website weniger zusagt, muss man konstatieren, dass das Konzept aussagefähig und funktional ist. Zudem hebt es sich deutlich von der Masse ab und das ist ja für Designer ebenfalls ein wichtiger Punkt. Soziale Kanäle fehlen allerdings, hier gibt es noch Nachholbedarf.

Von Webydo-Seite aus betrachtet, ist die Website der Idealistai ein weiteres aussagefähiges Beispiel für die Flexibilität des Design-Werkzeugs. Wer noch Geocities oder NetObjects Fusion kennt, weiß, wovon ich rede.

Fazit: Man sieht es wirklich nicht

Anhand der teils deutlich unterschiedlichen Beispiele dieses Artikels ist die Leistungsfähigkeit der Online-Design-Software von Webydo nicht zu leugnen. Sicherlich hätte der erfahrene Coder an der ein oder anderen Stelle eine puristischere Lösung gefunden haben mögen, funktional sind jedoch alle hier vorgestellten Websites auch ohne ideologischen Overhead.

Wer also einfach eine professionelle Website ohne viel Anwendungslogik erstellen soll, der kann sich auch an diese Aufgabe wagen, wenn er ein solider Designer mit hoher Kreativität, aber wenig Codekenntnissen ist.

Ist das eine schlechte Nachricht für klassische Webdesigner und Developer? Ich denke nicht. Die Branche entwickelt sich weiter. Es gilt, Schritt zu halten. Es würde mich nicht wundern, wenn mittelfristig auch eingeschworene Coder die Vorteile einer code-free Online-Webdesign-Software erkennen und zu ihrem zeitlichen und finanziellen Nutzen einsetzen würden. Designer aus dem Print und dem übrigen digitalen Spektrum sollten nicht lange überlegen. Mit Webydo schneiden Sie sich ein Stück vom Webdesign-Kuchen ab. Warum sollten Sie darauf verzichten?

Kategorien
Design Editoren HTML/CSS

Mac OS X: 5 Editoren im Vergleich

Dieser Beitrag beschäftigt sich mit Entwicklungsumgebungen für das Mac OS. Windows-Anwender warten also bitte auf den entsprechenden Beitrag zu ihrem System: Es kann schon einen guten Teil eines Entwicklerlebens beanspruchen, die ideale IDE zu finden. Damit das aber nicht ganz so lange dauert, werfen wir für Sie einen Blick auf die verschiedenen Möglichkeiten für Webworker unter Mac OS.

//Weitere Editoren-Testberichte gibt es hier//

Dreamweaver

Dreamweaver
Dreamweaver

Beim ersten Öffnen von Dreamweaver war ich überrascht. Positiv. Dreamweaver hatte ich schon einige Zeit nicht mehr genutzt und alles, was mir in Erinnerung geblieben ist, waren hässliche, automatisch erstellte HTML-Zeilen und ein riesiger lahmer Editor. Doch muss ich zugeben, dass mir die neue Oberfläche gefällt. Alles wirkt aufgeräumt und minimalistisch. Klar, Dreamweaver ist nicht der Editor für zwischendurch, den man schnell mal aufmacht, um was zu bearbeiten, das will Dreamweaver aber auch nicht sein.

Besonders gut hat mir die Multi-Screen-Vorschau gefallen. Sich eine Seite so bequem und schnell auf verschiedenen Devices anschauen zu können, kannte ich noch nicht. DW arbeitet nativ mit jQuery/jQuery Mobile und PhoneGap zusammen und hat dafür sogar ein paar nette Vorlagen. Erweiterungen gibt es für DW wahnsinnig viele, also auch hier keine Probleme. Gut ist die umfangreiche Dokumentation, aber hier leistete Adobe schon immer gute Arbeit.

Ich persönlich mag aber diesen „verwaschenen“ WYSIWYG-Ansatz nicht. Alles wirkt irgendwie immer so, als ob es nicht um den Code geht, sondern darum, sich irgendwas zusammenzuklicken. Aber okay, das ist dann wohl Geschmackssache. Dreamweaver versteht sich als IDE zum Entwickeln von Frontends und hat nur wenig für die Backend-Entwicklung zu bieten. Es gibt zwar Unterstützung für PHP, .NET und ColdFusion, den Rest muss man sich aber ggf. über Extensions besorgen.

DW ist einfach eine Referenz und bietet viele Möglichkeiten, aber eben mehr für den Webdesigner. Wer als Frontend-Entwickler eh mit Adobe-Produkten arbeitet, sollte durch die starke Integration z.B. durch Photoshop Dreamweaver nutzen. Einzeln kostet DW allerdings über 500€ und man muss ständig die neuesten Versionen dazukaufen, welche auch um die 150€ kosten. Es gibt ein Mietkonzept mit monatlicher Zahlung.

TextMate

TextMate
TextMate

Beim Begriff TextMate horchen die meisten Mac-Nutzer auf. Das ist doch dieses nette und schnelle Tool für Webentwickler und alle anderen Entwickler für den Mac. Ja, allerdings wirklich nur für den Mac. Windows-User gucken in die Röhre, können aber zumindest Snippets und Commands für TextMate nutzen mit Hilfe des kommerziellen Editors „E Text Editor“

TextMate ist etwas für die Freunde der wirklich minimalistischen Entwicklung und für jene, die sich ihre IDE gerne selber zusammenbasteln. Das geht dank einer großen Anzahl an Erweiterungen und der Möglichkeit, selber schnell Snippets zu schreiben, ohne Probleme und auch recht schnell.

TextMate ist schnell geöffnet und damit auch für den schnellen Bugfix geeignet. Es macht Spaß, damit zu arbeiten. Aber nicht alle Entwickler werden es mögen, viele Extensions einzubinden, die man dann ständig Up-to-Date halten muss. Aktuell kostet TextMate 44,85€. Das ist für eine IDE zwar ein fairer Preis, da TextMate aber eher ein einfacher Editor ist, ist der Preis nicht wirklich überzeugend.

Eclipse /Aptana Studio

Aptana basiert, wie man beim ersten Öffnen sieht, auf Eclipse. Allerdings wirkt Aptana etwas aufgeräumter und performanter. Aptana kommt von Haus aus mit Unterstützung für PHP, RoR, Python und Adobe AIR. Auf der JavaScript-Seite sind die wichtigsten Vertreter nativ dabei, so etwa jQuery oder YUI.

Über FTP/SFTP habt ihr die Möglichkeit, direkt auf externen Servern zu arbeiten. Git wird ebenfalls unterstützt. Erweiterungsmöglichkeiten gibt es einige, zum Beispiel Code-Completion für verschiedene Frameworks.

Aptana ist relativ mächtig und wer gerne mit Eclipse gearbeitet hat, fühlt sich hier auf jeden Fall wohl, wenn er in Zukunft nur noch für das Web entwickeln möchte. Aptana ist entweder unter der GPL oder APL frei erhältlich und für umsonst mehr als nur brauchbar. Aptana war lange Zeit mein Favorit für die Entwicklung von Webanwendungen in PHP. Es ist erhältlich für alle bekannten Plattformen.

Netbeans

Netbeans wirkt anfangs auch wie ein Eclipse-Fork. Doch ist Netbeans eine eigenständige Entwicklung und das macht sich auch bemerkbar. Ähnlich wie bei Eclipse ist es bei Netbeans möglich, verschiedene Bundles für den jeweiligen Anwendungszweck zu verwenden. Dabei ist zu beachten, dass man Netbeans als Complete Bundle wählen kann. Leider läuft dieses Bundle dann nicht mehr wirklich flüssig.

DAs PHP-Bundle bietet nativen Support für Symfony und Zend. Unit Testing mit PHPUnit oder Selenium ist genauso wie Debugging mit xdebug dabei. Seinen Ursprung hat Netbeans aber in der Java-Entwicklung, wofür es zum Beispiel ein GUI Design Tool mitbringt.

Support wird auch hier für Git, FTP/SFTP und MySQL angeboten. In Netbeans ist es möglich, sehr gut mit JavaScript zu arbeiten, denn es werden alle nötigen Dienste nativ mitgeliefert.

Oft ist Netbeans beim Arbeiten gefühlt sehr langsam. Allerdings bietet Netbeans dafür einen starken Funktionsumfang. Wer auf der Suche nach einer Eclipse-Alternative mit ähnlichem Umfang und guten Möglichkeiten zur Erweiterung ist, wird bei Netbeans, welches übrigens kostenlos und als Open-Source zur Verfügung steht, schnell fündig.

Coda 2

Coda 2
Coda 2

Coda 2 ist erst vor Kurzem veröffentlich worden. Es ist nur für den Mac erhältlich und vor allem ziemlich hübsch anzusehen. Nativ werden die meisten Entwicklungssprachen unterstützt, sowie Git, SFTP/FTP, WebDav und Amazon S3 bzw. SSH zur Verbindung mit dem Server. Außerdem gibt es eine Datensicht für MySQL-Server.

Persönlich finde ich, dass das Arbeiten mit Code sehr angenehm ist. Vor allem durch die aufgeräumte Arbeitsfläche und die schnelle Preview-Ansicht erleichtert Coda das Arbeiten für Webworker doch sehr.

Jedoch gibt es keine nennenswerten Erweiterungen für Coda. Wer sich also für Coda entscheidet, sollte sich bewusst sein, dass er seine IDE vorerst nicht groß erweitern kann. Allerdings bietet Coda 2 von Haus aus Support für verschiedene Programmiersprachen.

Coda 2 kostet regulär 99$, ist aber oft im Angebot und wer hier zuschlagen möchte, sollte auch darauf warten. Denn 99$ sind im Vergleich zur Konkurrenz, die sich auf Augenhöhe befindet und oft kostenlos ist, einfach zu viel.

JetBrains

Die Firma JetBrains entwickelt IDEs für verschiedene Anwendungszwecke. PHPStorm für PHP-Entwickler, RubyMine für Ruby-Entwickler, WebStorm für JavaScript-Entwickler, Pycharm für Python/Django-Entwickler und vieles mehr. Die IDEs ähneln sich zwar, sind aber für den jeweiligen Anwendungszweck angepasst.

Aus Erfahrung kann ich über die Entwicklung von Django-Anwendungen mit Pycharm schreiben. Hier bietet Django zahlreiche Dinge, um die Arbeit für Webworker zu erleichtern. Integriertes Unit-Testing, starten der Anwendung direkt aus Pycharm, Git-Integrationen und ein vereinfachtes Deployment.

Pycharm läuft eigentlich immer flüssig. Es gibt aber auch einen Nachteil. Es ist nämlich relativ schwierig, mehrere Projekte mit Pycharm parallel zu bearbeiten, da das jeweils geöffnete Fenster nur das aktuelle Projekt anzeigt.

Für ambitionierte Entwickler kann ich eine Kaufempfehlung für die Jetbrains-Produkte geben. Pycharm gibt es kostenlos für OpenSource-Projekte, für 29$ für Studenten und ab 99$ für professionelle Entwickler.

Fazit

Bei der Wahl eines neuen Editors oder einer kompletten IDE kommt es neben dem persönlichen Geschmack bzgl. des User-Interfaces vor allem auf die Anforderungen an. Wenn man in Teams an größeren Projekten arbeitet, sollte man die Eclipse-Varianten, Netbeans oder das entsprechende JetBrains-Produkt nutzen. Arbeitet man bereits mit anderen Adobe-Produkten und möchte gerne die gegenseitige Integration der Anwendungen beibehalten, ist Dreamweaver die richtige Wahl.

Wer dagegen selbstständig ohne Team an kleineren Projekten arbeitet und öfter mal einen schnellen Bugfix durchführen möchte, der sollte eines der minimalistischen Produkte wählen.

Und wer es ganz puristisch und schnell mag, dem sei der gute alte VIM-Editor ans Herz gelegt, den es in verschiedenen Formen für die meisten Plattformen gibt.

(dpe)

 

Kategorien
Editoren

Firefox-Plugin katapultiert Desktopeditor ins Netz

von Jochen Bauer

Webdienste gibt es reichlich und immer mehr – deren Browserinterface bietet meist wenig Komfort und Möglichkeiten. Mit der Firefox-Erweiterung „It’s All Text!“ bearbeiten Sie jedes Textfeld, egal ob Formular, Wikiseite, Onlineoffice oder Blogbeitrag mit dem gleichen Werkzeug – und dies ist nur einen Klick entfernt. Gekoppelt mit einigen Tipps zur Textbearbeitung wird ihr Editor zum Tool, das alle anderen knechtet.

Text ist die gemeinsame Schnittmenge unserer Desktop-Programme und Webdienste. Auch beim Frickeln an Programmcode sind es eine Abfolge von Zeichen, die zu beackern sind. Ist ihr Text dann reif fürs Formatieren,
nutzen Sie die Schnittstelle zum Programm oder machen gleich alles selbst mit ihrer eigenen Webentwicklungsumgebung – wie Sie wollen! Sofern Sie Firefox nutzen, können Sie ihre Wunschumgebung also ins Netz katapultieren, indem Sie die die Mozilla Firefox Erweiterung It’s all text! installieren und bei den Addon-Einstellungen den Pfad zu ihrem Wohnzimmereditor angeben.

Jetzt können Sie mit einem Rechtsklick über einem Textfeld via Menüeintrag ihren Editor aufrufen oder Sie wischen mal etwas mit der Maus rund um das Texteingabefeld und rechts unten, nahe der Box, erscheint ein blauer „Edit“-Knopf. Geben Sie dann ihren Text ins Editorenfenster ein. Dann klicken Sie auf „Speichern“ und wie von Geisterhand erscheint der Text im Browsers und Sie können ihren Eintrag abschicken. Sofern Sie einen WordPress-Blog haben und einen neuen Beitrag mit ihrem Editor schreiben wollen, müssen Sie vorher in die „Code“-Ansicht wechseln.

Nachdem Ihr Text dann erschienen ist, können Sie diesen bequem im Visuell-Modus formatieren und den Beitrag abschicken. Je länger die Beiträge, desto größer die Zeitersparnis. Warum? Weil ein mächtiger Editor sehr viel kann. Sehen Sie folgende Fragen als Anregung, wie brauchbar ihr Tool ist.


WordPress Blog mit geladenem Gvim (Farbschema Desert)


Möglichkeiten eines Editors
Können Sie sich schnell bewegen, also beispielsweise nach einem Wort oder einer bestimmten Zeile suchen und werden die Treffer hervorgehoben? Oder können Sie diese Treffer gleich automatisch verändern?

Manche Editoren erlauben eine solche Suche sogar über mehrere Dateien hinweg. Müssen Sie Dinge oft zweimal tippen – inwieweit können Sie Ihrem Editor Abkürzungen beibringen, beispielsweise exotische Tastenkombination auf
eine neue Taste legen oder eine Eingabe wie „mfg“ in „Mit freundlichen Grüßen“ verwandeln? Vielleicht hat ihr Editor sogar eine Autovervollständigung für die eingestellte Programmiersprache oder ein bereits zuvor eingegebenes Wort? Gibt es eine Rechtschreibprüfung oder können Sie eine Liste mit ihren häufigen Vertippern anlegen, die dann
korrigiert werden? Wie sieht es aus, wenn Sie Datei- oder Programmübergreifend arbeiten wollen? Kann ihr Editor für ihr Emailprogramm genutzt werden oder einen sinnvollen Befehl auf ihr Betriebssystem ausführen?

Das Öffnen zweier Dateien in einem Splitscreen und das Hervorheben von Unterschieden kann hin und wieder ebenfalls sehr brauchbar sein. Alle oben genannten Dinge sind mit dem Wikipedia Eintrag zu Vim oder GVim möglich. Vim unterstützt mehr als 400 Sprachen und es gibt rund 2000 Plugins. Vim kostet nichts (nimmt aber Spenden für Kinder in Uganda) und läuft auf Linux, Windows und MacOS. Im November 2007 erschien ein deutschsprachiges Buch zur aktuellen Version 7 von Reinhard Wobst.

Egal für welchen Editor Sie sich entscheiden, seien Sie aufmerksam, wenn Sie meinen, viel Zeit mit einer Tätigkeit zu vergeuden. Suchen Sie dann nach einer Verbesserung und machen Sie dieses neue Verhalten zu einer Gewohnheit. Mächtige Editoren sind so umfassend, dass das „Lernen“ des ganzen Editors ein Ding der Unmöglichkeit ist.

Kategorien
Editoren

Serienbriefe mit Online-WYSIWYG-Editoren

Dass sich Serienbriefe im Webbrowser sowohl aus XML und aus HTML-Dokumenten erzeugen lassen, haben wir in zwei vorangegangen Artikeln auf Dr. Web bereits demonstriert. Störend an diesen Implementierungen war die notwendige Bearbeitung des HTML- und XML-Quellcodes. Nun wollen wir die HTML-Variante so verbessern, dass der Brieftext mit Hilfe eines Online-WYSIWYG-Editors eingegeben werden kann.

Serienbriefe mit JavaScript und HTML
Im Artikel Serienbriefe für den Webbrowser mit HTML und JavaScript haben wir das Brief-Template und die Tabelle mit den Daten der Empfänger im selben HTML-Dokument gespeichert. Durch den JavaScript-Code wurde die Tabelle durchlaufen und eine Template-Kopie mit dem Inhalt jeder Zeile gefüllt und diese dann in das HTML-Dokument eingebunden. Durch unterschiedliche Stylesheet-Angaben für die Ausgabemedien screen und print wurden die relevanten Bereiche für den Druck ein- bzw. ausgeblendet.

Beispielbild für Serienbrief mit TinyMCE

Um die Integration eines WYSIWYIG-Editors zu erleichtern, wollen wir jetzt das Template des vorangegangen Artikels modifizieren. Als Platzhalter dienen nun Zeichenketten der Art __Spaltenname__. Diese werden dann für jede Tabellenzeile durch den Inhalt der entsprechenden Spalte ersetzt. Hier ein Beispiel für ein solches Template:

 <div id="template"> <div class="absender"> Abs:<br /> Posemuckel Laufclub<br /> 12356 Posemuckel<br>Am Traumschiffhafen 1 </div> <div class="small"> Abs: Posemuckel Laufclub, 12356 Posemuckel, Am Traumschiffhafen 1 </div> <div class="anschrift"> An<br /> __Vorname__ __Name__ <br /> __Strasse__ <br /> __PLZ__ __Ort__ </div> <div class="anschreiben"> <div class="ueberschrift"> __Anrede__ __Name__, </div> <div class="text"> hiermit laden wir Dich recht herzlich zu unserer Mitgliederversammlung am 1.1.2010 in unser Vereinslokal am Templiner See 12 in der Gaststätte "Zum Posemuckler" ein. Bitte teile uns - entweder telefonisch (1234567) oder per Email (info@posemuckel-laufclub.de) - mit, ob Du daran teilnehmen kannst. </div> <div class="abschluss"> Dein Vorstand </div> </div> </div>

JavaScript-Code für das Erstellen des Serienbriefes
Durch den Verzicht auf die Span-Tags verkürzt sich der Code etwas. Nach dem vollständigen Laden wird das HTML-Dokument verarbeitet: die Spaltenköpfe der Datentabelle werden in dem Array bezeichner abgelegt, eine Kopie des Templates wird erzeugt und für jede Zeile des Tbody-Elements das Ersetzen in der Template-Kopie durchgeführt. Abschließend wird diese Kopie ans Ende des Dokumentes angehängt. Der Code könnte durch den Einsatz einer JavaScript-Bibliothek wie Prototype oder JQuery natürlich weiter komprimiert werden aber bei weniger als 30 Zeilen existiert dazu kaum eine Notwendigkeit. Hier unser JavaScript-Code:

 function parseDocument() { var table = document.getElementById("datatable"); var letter = document.getElementById("letterpart"); var template = document.getElementById("template"); var bezeichner = new Array(); var ths = table.getElementsByTagName("th"); // bezeichner extrahieren for (var i = 0 ; i < ths.length;i++) { // eventuelle leerzeichen entfernen bezeichner[i] = ths[i].firstChild.data.replace(/ /g, ""); } // datenreihen extrahieren var tbody = table.getElementsByTagName("tbody")[0]; var trs = tbody.getElementsByTagName("tr"); // zellen fuer jede zeile auslesen for (var i = 0 ; i < trs.length; i++) { // kopie des templates erstellen var div = document.createElement("div"); div.className = "template"; div.innerHTML = template.innerHTML; var tds = trs[i].getElementsByTagName("td"); for (var j = 0 ; j < tds.length;j++) { // und fuellen des templates while (div.innerHTML.indexOf("__"+bezeichner[j]+"__") >= 0) { div.innerHTML = div.innerHTML.replace("__"+bezeichner[j]+"__",tds[j].firstChild.data); } } // anhaengen des ausgefuellten templates letter.appendChild(div); } } window.onload = function () { parseDocument(); }

Einbinden des WYSIWYG-Editors
Nun wollen wir einen WYSIWYG-Editor nutzen um den Text des Serienbriefes nach dem Aufrufen der Webseite verändern zu können. Wir verwenden TinyMCE welcher im Vergleich zu anderen Editoren auf einer größeren Anzahl von Browsern lauffähig ist. Den Editor binden wir wie folgt ein: Im Head-Bereich laden wir die TinyMCE-JavaScript-Datei und initialisieren den Editor für unser Div-Element welches den Text enthält. Mit dem Parameter elements werden dabei die IDs der editierbaren Bereiche ausgewählt.

 <script language="javascript" type="text/javascript" src="tiny_mce/tiny_mce.js"> </script> <script language="javascript" type="text/javascript"> tinyMCE.init({ mode : "exact", theme : "simple", elements : "anschreiben", width: "98%" }); </script> <script language="javascript" type="text/javascript" src="beispiel-tinymce.js"> </script>

TinyMCE kann sowohl für das Editieren von Textarea-Elementen als auch von Div-Elementen eingesetzt werden. Die Verwendung eines Div-Elementes erleichtert die Erstellung des Templates da im Text vorhandene HTML-Tags nicht geschützt werden müssen. Deswegen wollen wir hier ein solches Div-Element verwenden:

 <form name="tmce"> <div id="anschreiben" class="text"> hiermit laden wir Dich recht herzlich zu unserer Mitgliederversammlung am 1.1.2010 in unser Vereinslokal am Templiner See 12 in der Gaststätte "Zum Posemuckler" ein. Bitte teile uns - entweder telefonisch (1234567) oder per Email (info@posemuckel-laufclub.de) - mit, ob Du daran teilnehmen kannst. </div> </form>

Der JavaScript-Code für das Füllen des Templates
Im Vergleich zur obigen Variante ohne Editor müssen einige Veränderungen am Code vorgenommen werden. So erfolgt das Füllen des Templates erst nach Anforderung durch den Anwender und nicht mehr im onload-Ereignis des Dokumentes – schließlich soll der Brief erst nach dem Laden des Dokumentes erstellt werden. Diese manuelle Anforderung wird mit zwei Links am Anfang des Dokumentes, welche zwischen Editier- und Druck-Modus durch das Aufrufen der entsprechenden JavaScript-Funktion umschalten, erreicht:

 <span id="editLink" style="display:none;"> <a href="javascript:editContent()">Editieren</a> </span> <span id="printLink"> <a href="javascript:updateContent()">Drucken</a> </span>

Desweiteren muß der Template-Text vor dem Einsetzen in den Briefbereich von den Editor-Elementen befreit werden. Da TinyMCE das ursprüngliche Div-Element das den zu editierenden Start-Text enthält versteckt, muß dieses Element wieder sichtbar gemacht werden. Hier der komplette JavaScript-Code für den Einsatz des TinyMCE-Editors: beispiel-tinymce.js

Das funktionierende Beispiel zum Testen: beispiel-tinymce.html

Wie man der TinyMCE-API entnehmen kann bietet der Editor einige Dutzend Methoden die bei der Enwicklung von JavaScript-Anwendungen von Nutzen sind. Beispiele dafür sind importCSS, selectNodes oder convertHex2RGB.

Performance
Wichtig für die Einschätzung der Verwendbarkeit der Serienbrief-Anwendung ist die Performance welche wir hier an einigen hundert Datensätzen testen wollen. Dazu hängen wir mittels JavaScript-Code die Datensätze an unsere Tabelle an und bestimmen anschließend die Zeit welche der Browser für die Erstellung der Briefe braucht. Auf einem älteren Notebook mit 1Ghz-Prozessor braucht der Browser etwa 30 Sekunden bis 2 Minuten für 1000 Datensätze was eine ganz brauchbare Geschwindigkeit darstellt. Es kann allerdings zu größeren zeitlichen Unterschieden zwischen den einzelnen Browsern kommen. Testen Sie die Performance für 500 und mehr Datensätze auf Ihrem eigenen Rechner: beispiel-tinymce2.html

Andere Einsatzmöglichkeiten von Online-WYSIWYG-Editoren
Neben der vorgestellten Serienbrief-Anwendung lassen sich WYSIWYG-Editoren natürlich auch anderweitig einsetzen. So könnnen zum Beispiel Dokument-Templates zentral auf dem Intranet-Server einer Firma gespeichert werden. Statt der üblichen Verteilung der Firmen-Templates in Form von Word-Dokumenten auf alle Client-Rechner und dem versehentlichen Verändern der Dokumente dort, einfach die Intranet-URL ansteuern, Text eingeben, ausdrucken – fertig. Die übliche Neuverteilungs-Orgie der Templates schon bei kleinsten Änderungen entfällt. Es ergibt sich ein enormes Einsparpotential an Arbeitszeit.

Zwei Editoren auf einer Seite
Nun ein Beispiel für die zweifache Integration des Editors in eine HTML-Seite. Diesmal der Einfachheit halber ohne Serienbrief-Funktion. Da wir für den Adress- und den Textbereich Editoren in unterschiedlicher Breite benötigen, führen wir die Initialisierung jeweils seperat durch:

 <script language="javascript"> tinyMCE.init({ mode : "exact", theme : "simple", elements : "anschrift", width: "30%", height: "80px" }); tinyMCE.init({ mode : "exact", theme : "simple", elements : "content", width: "90%" }); </script>

Das Speichern der Editor-Inhalte ist hier etwas komplizierter, da in der globalen Instanz tinyMCE nur ein Editor gespeichert ist. Deswegen durchlaufen wir im JavaScript-Code alle Instanzen und aktivieren diese seperat. Danach erfolgt das Speichern der Inhalte.

 function updateContent () { // fuer jede instanz !! var form = document.getElementsByTagName("form")[0]; var inputs = form.getElementsByTagName("input"); for (var i = 0 ; i < inputs.length ; i++) { var t = document.getElementById("mce_editor_"+i); if (t) { tinyMCE.execCommand('mceFocus', false, 'mce_editor_'+i); tinyMCE.triggerSave(true,true); } } parseDocument(); }

Zum Beispiel: beispiel-tinymce3.html. Neben solchen Brieffunktionen sind natürlich auch Antragsformulare, Bestellformulare und ähnliches denkbar.

Zusammenfassung
Durch den Einsatz eines WYSIWYG-Editors wie TinyMCE lassen sich in einfacher Weise Serienbriefe erzeugen. Der Anwender braucht keinen Source-Code zu editieren und kann wie von Office-Textverarbeitungen gewohnt seine Dokumente erstellen. Weitere denkbare Verbesserungen wären die Bereitstellung von Editier-Templates innerhalb des Editors durch den Einsatz des TinyMCE-Template-Plugins oder das Speichern der editierten Version auf dem Webserver.

Alternativ zu einem serverseitigen Speichern des Dokumentes kann man natürlich den veränderten Text auch in seiner Textverarbeitung mittels Copy und Paste speichern. Bei Verwendung des Internet Explorers bleiben dabei sogar die Formatieranweisungen erhalten. Download der Code-Beispiele: drweb-wysiwyg-serienbriefe.zip. Kommentare und Vorschläge zum Artikel bitte an den Autor .

Kategorien
Editoren

Die beliebtesten Online-WYSIWYG-Editoren

von Rene Schmidt

Zwei Platzhirsche und ein Halbstarker im Markt der Rich-Text-Webeditoren. Die Zielgruppen aller drei Produkte sind ähnlich, Unterschiede liegen im Detail. Wer macht das Rennen?

Rich-Text-Webeditoren (RT-Editoren oder RTE) ermöglichen es, WYSIWYG-Editoren in Websites und Web-Applikationen einzubinden. Nutzer können Texte online bearbeiten, so wie sie es von einer Textverarbeitung wie MS-Word oder OpenOffice Writer gewöhnt sind. Je nach Zielsetzung verfügen sie auch über Datei- und Bilderverwaltung, so dass die Produktion von HTML-Inhalten direkt online vonstatten gehen kann.

Aus der Menge an RTE-Editoren haben sich in den letzten Jahren drei Projekte besonders hervorgetan: FCKEditor, TinyMCE und Xinha. Alle sind in Javascript geschrieben, bieten Plugins, WYSIWYG, direkte Codebearbeitung, sind kostenlos verfügbar und freie OpenSource-Software. Wo liegen ihre Stärken und Schwächen?

FCKEditor
Der nach dem Projektinitiator Frederico Caldeira Knabben benannte Editor wird seit 2003 entwickelt. Die neueste Version stammt vom Juni 2007. Das Programm glänzt mit zahlreichen Integrationsbeispielen. Unter anderem sind Beispiele in PHP, Python, Perl, ASP und ColdFusion mitgeliefert.

Während alle drei Editoren das serverseitige Rechtschreibkontrollsystem GNU Aspell beherrschen, unterstützt FCKEditor zusätzlich die proprietäre Rechtschreibkontrolle ieSpell. Die allerdings – der Name deutet es bereits an – läuft nur im Internet Explorer und auch nur auf Windows.

Screenshot
FCKEditor

Die Bilderverwaltung ist in der Standardausstattung nicht besponders komfortabel. Eine Dateiverwaltung gibt es zwar, die zeigt aber keine Vorschau der Bilder. Bequemer geht es mit dem CKFinder. Das ist ein separater Ajax-Dateimanager mit optionaler Integration in den FCKEditor. Der FCKEditor ist kostenlos erhältlich. Der Preis für den CKFinder liegt zwischen 59 und 1390 US-Dollar. Kommerzieller Kundendienst ist wie bei TinyMCE verfügbar.

TinyMCE
TinyMCE von MoxieCode ist der zweite Platzhirsch im Markt der OpenSource-RTE. Das schwedische Unternehmen entwickelt den Editor seit 2004. Die neueste Version 2.1.1.1 ist im Juli 2007 erschienen. TinyMCE ist in aktuellen WordPress-Versionen der Standard-Editor und dürfte daher vielen Nutzern bereits bekannt sein. WordPress nutzt allerdings standardmäßig allerdings nur einen kleinen Teil des großen Funktionsumfangs. In allen gängigen Webbrowsern fühlt sich TinyMCE wohl, derzeit ist das noch ein Alleinstellungsmerkmal des Programms.

Bei der Rechtschreibkontrolle bietet TinyMCE mehr Möglichkeiten als die Konkurrenz. Neben GNU Aspell kann TinyMCE auch den aus der Google-Toolbar bekannten Dienst Google Spell nutzen. Die Toolbar muss dafür nicht installiert sein. Alternativ kann auch die Rechtschreibkontrolle des Firefox 2.0 genutzt werden.

Screenshot
TinyMCE

TinyMCE ist in Javascript geschrieben und hat eine Plugin-Schnittstelle. Die 31 mitgelieferten Plugins bestehen unter anderem aus weiteren Javascript-Dateien. Alle zu laden benötigt aufgrund der vielen HTTP-Anfragen viel Zeit. MoxieCode bietet als Linderung so genannte Kompressoren an. Diese verkleinern die TinyMCE-„Installation“ mittels GZIP-Kompression um 75%, so dass nur zwei HTTP-Anfragen nötig sind, um TinyMCE und seine Plugins zu laden. Kompressoren gibt es in PHP, Perl, Ruby, Coldfusion, .NET, und JSP.

Für Datei- und Bilderverwaltung bietet MoxieCode jeweils eigenständige Produkte an. Sie können allein genutzt werden oder in einen anderen RTE integriert werden. Die Bilderverwaltung beherrscht darüber hinaus einige grundlegende Bildbearbeitungsfunktionen wie Beschneiden und Skalieren. Der Dateimanager ist ab €50 netto erhältlich, die Bilderverwaltung ab €32 netto.

Xinha
Xinha ist aus dem im Jahr 2002 gestarteten und inzwischen eingestellten HTMLArea entstanden. Trotzdem hat das Projekt noch keine Version 1.0 vorzuweisen – hinter dem Projekt steht kein Unternehmen, das Xinha zur Gewinnerzielung vorantreibt. Dennoch ist die Entwicklergemeinde aktiv, im Mai 2007 wurde die neueste Version 0.931 veröffentlicht.

Screenshot
Xinha

Datei- und Bilderverwaltung sind nicht ganz so schick wie bei den großen (und kostenpflichtigen) Plugins von FCKEditor und TinyMCE – sie tun aber immerhin, was sie sollen.

Der Programmkern von Xinha ist mit circa 95 KB wesentlich kleiner als TinyMCE (um die 140 KB) und FCKEditor (etwa 150 KB) und wird daher im Vergleich zu den anderen Projekten etwas schneller geladen. Eine Schwäche ist bislang die Dokumentation, deren Umfang leider eher gering ist.

Als Fazit bleibt festzuhalten: Die Zielgruppen aller drei Produkte sind ähnlich, Unterschiede liegen im Detail. TinyMCE und FCKEditor liegen eng beieinander beim Funktionsumfang und beim Preis, Xinha kann mit schlankem Programmcode und einer kostenlosen Bilderverwaltung punkten – wenngleich es qualitativ den beiden Großen nicht ganz das Wasser reichen kann.

Die Links:

Erstveröffentlichung 06.08.2007

Kategorien
Editoren

E-Texteditor: spart Programmierern Zeit und Nerven

Zum neuen Liebling des unter Windows arbeitenden Webworkers könnte der E-Texteditor werden.
Sein Entwickler hat sich mit den Machern von TextMate zusammen getan, der MacHackern viel Freude macht und dessen
Bundles auch unter "E" zur Verfügung stehen. Solange der Texteditor noch seinen Beta-Status nicht verloren
hat kann man ihn kostenlos nutzen, danach soll er 34,95 Dollar kosten. Was fällt im Test positiv auf?

Vor allem die Vielzahl an Snippets, vorgefertigte Codebausteine. Wer etwa eine HTML-Seite zu codieren beginnt,
der braucht nur "doctype" einzugeben, die Tab-Taste zu drücken und kann anschließend die DTD auswählen und einfügen.
Das spart Arbeitszeit und reduziert später den Debugging-Aufwand.

Screenshot

Komfortabel ist auch das Feature der zeilenweisen Auswahl. Wer zum Beispiel nachträglich mehreren Codezeilen den gleichen
Kommentar verpassen will, braucht sie nur auszuwählen. Der in die erste Zeile geschriebene Kommentar wird dann automatisch
in die anderen Zeilen geschrieben.

Screenshot

Gerade bei umfangreicheren Projekten tut Dokumentation und Versionierung Not. In "E" können im Dokument kommentierte Meilensteine festgelegt
und der Projektfortschritt über eine visualisierte Zeitachse dokumentiert werden. Und Unix-Fans werden aufhorchen, weil in E die Cygwin-Entwicklungsumgebung integriert ist.

Lust zum Ausprobieren? Dann bitte hier entlang. Oder zunächst im Blog per Screencast zum Beispiel etwas über die Suchfunktionen erfahren.

Kategorien
Editoren

Alnera RSS-Editor

Da am Mittwoch der Dr. Web Newsletter in seiner 255igsten Ausgabe erstmals als Fullfeed erscheinen sollte, brauchte es einen RSS-Editor. Ein Generator reicht dafür nicht. Die Aufgabe ließ sich mit dem Alnera FeedWorkshop passabel lösen. Eine Windows-Software in deutscher Sprache (Englisch, Französisch, Holländisch und Chinesisch wären auch verfügbar), die mit 34,95 Euro den Geldbeutel nicht allzu sehr belastet. Für sieben Tage darf man gratis testen.

Ein Feed-Editor erlaubt es komplette HTML-Seiten oder Teile davon im RSS-Format abzulegen, inklusive HTML-Code, Bilder, Links und Sonderzeichen. Ideal also für Betreiber von Websites ohne CMS oder Weblog, die einen gut ausgestatteten RSS-Feed anbieten möchten. Der FeedWorkshop versteht sich nur auf RSS 2.0, exportiert auf Wunsch aber auch HTML. Vollbildansicht

Screenshot

Die gestellte Aufgabe erfüllte das Programm gut, blieb dabei aber nicht zu 100% valide. Wer kennt weitere RSS-Editoren, die einen Test lohnen? Der Feed-Editor wäre einer davon.

Kategorien
Editoren

Scriptly und WebCraft

Scriptly ist ein ASCII-Editor für HTML-Dateien und Scripts, der sich auf den ersten Blick äußert umfangreich präsentiert. Das erleichtert den Einstieg zwar nicht, doch vieles lässt sich anpassen.

Scriptly
Scriptly ist ein ASCII-Editor für HTML-Dateien und Scripts, der sich auf den ersten Blick äußert umfangreich präsentiert. Das erleichtert den Einstieg zwar nicht, doch vieles lässt sich anpassen. Scriptly erfüllt nicht nur übliche Anforderungen wie Syntax-Highlighting, FTP oder Datei-Browser, das Programm versteht sich sogar aufs Windowsplitting, liefert einen MySQL-Assistenten mit, arbeitet mit Includes, besitzt eine Bildervorschau, erstellt Tabellen auch aus CSV-Daten.

Screenshot
Scriptly

Eine runde Sache, die man kostenlos nutzen darf. Scriptly wurde von Benedikt Loepp programmiert und ist Freeware für Windows – Download 3 Megabyte – Deutsch. Eine runde Sache, die man kostenlos nutzen darf. Scriptly wurde von Benedikt Loepp programmiert und ist Freeware für Windows – Download 3 Megabyte – Deutsch.

  • Vollbild Screenshot im neuen Fenster

WebCraft
WebCraft von Andreas Droesch ist ein ASCII HTML- und PHP Editor. Aufgebaut ist er nach dem Vorbild von Homesite und ähnlicher Programme mit einem Dateinbrowser zur Linken. Syntaxhighlighting ist selbstverständlich. Der Funktionsumfang ist groß.

Da es Webcraft schon länger gibt, führt er Ballast aus der Ära des Internet-Explorers mit sich, etwa Seitenübergänge, bunte Rollbalken oder Laufschriften. Darüber muss man hinwegsehen. Auch die für Menüs verwendeten Icons sind wenig gefällig und wirken veraltet.

Screenshot
Scriptly

Es gibt einige PlugIns, die neue Funktionien mitbringen. Dazu gehören FTP, eine Verbindung zu HTML-Tidy (Validierung) oder ein Frame-Generator. WebCraft ist Freeware für Windows.

  • Vollbild Screenshot im neuen Fenster

Kategorien
Editoren

Software Kurztipps

Bessere JPEGs dank Software. Eine Alternative zum Real Media Player, Mein eigenes Word, 3D mit Blender und der Bitflux Editor.

Bessere JPEGs
Nicht mehr und nicht weniger verspricht dieses neue Programm. Jeder kennt das Problem, einmal abgespeichert lässt sich ein Bild im JPG Format nur schwerlich erneut bearbeiten. Schließlich ist jeder Speichervorgang mit erheblichen Verlusten behaftet. BetterJPEG ermöglicht ungetrübtes Drehen, Rotieren, Ausschneiden und Beschriften von bereits komprimierten Grafiken. Das funktioniert, weil das Tool nur geänderte Bildbereiche beim Speichern neu komprimiert. Ideal auch für Digitalfotografen. BetterJPEG, die aktuelle Version ist die 1.5.0.5, gibt es als 30 Tage Testversion. Das Programm soll später $24.95 US Dollar kosten – 446 Kilobyte – Windows – Englisch.

Screenshot

OS X auf dem PC?
Heutzutage auch kein Problem mehr. Kostet ein bisschen, ist langsam, aber immerhin. Hier als kurzer Erfahrungsbericht. Übrigens: Die Geschichte von OS X ist nicht nur für Maccies spannend.

Real Media Alternative
Kaum eine Software ist unbeliebter als die Werbeschleuder Real Media Player. Und kaum ein Hersteller geht rücksichtsloser mit den Interessen seiner Nutzer um, als Real Media. Mit einer ganzen Garnitur von Tricks versucht man dem Anwender eine kostenpflichtige Version unterzujubeln, um ihn hinterher auszuspionieren. Das muss alles nicht sein, denn es gibt eine Open Source Alternative. Real Alternative versteht sich auf Audio- und Videoformate wie .ra, .rpm, rm oder .ram. Das Programm ist kostenlos und kann sowohl als Classic Client wie auch als Browser Plug-in installiert werden.

3D Bilder
Blender dient zur Erstellung von professionellen 3D Bilder, Games und Animationen. Ursprünglich wurde Blender von der Firma NaN(Not a Number) entwickelt und nach deren Konkurs durch Spenden der Community für 100.000 Euro freigekauft. Es steht seitdem unter der GPL und wird ständig weiterentwickelt. Blender läuft auf allen gängigen Plattformen. Das Downloadfile erfreut durch schlanke 2,2MB.

Screenshot

Mein eigenes Word
Wie man eine einfache Textverarbeitung programmiert. Ein 20-Seiten PDF von Chuck Groom, der uns auch gleich erklärt wie ein solches Programm funktioniert.

Bitflux Editor
Mozilla ist mehr als ein Browser, nämlich auch ein Editor. Der Bitflux Editor ist zwar noch ein Testmodell, weiß aber durchaus zu beeindrucken. Geschrieben vollkommen in Javascript, benutzt er XML, XSLT und CSS für die Darstellung. Er funktioniert mit allen Betriebssystemen, aber verständlicherweise nur mit einem Mozilla Browser. Info, Online Demo und Download.

Screenshot

Kategorien
Editoren

Online-Editor und Kommentarfunktion

FCK ist ein WYSIWYG-Editor für Online Anwendungen wie CMS oder Shops. Außerdem: Eine externe Kommentarfunktion für beliebige Webseiten, Domains und Markenrecht und kleine Extras.

Web-Editor
Der FCK Web-Editor wird nicht auf der heimischen Festplatte eingesetzt, er ist komplett webbasiert, bringt eine Fülle von Funktionen und Möglichkeiten mit und darf als OpenSource frei verwendet werden. Dazu gehören nicht nur simple Textformate, sondern auch Formulare, Tabellen und einiges mehr. So stellt er alles in Schatten, was es auf diesem Gebiet bisher gab.

Screenshot

Kommentarfunktion für Websites
Meinungen und Kommentare der Besucher können eine Website bereichern. Große Sites bieten Foren, und Weblogs sind von Natur aus damit gesegnet. Wer das auch bieten möchte, sich aber nichts basteln möchte oder kann, greift auf einen Service zurück. Mit Haloscan wird das Kommentarfenster rasch Wirklichkeit. Dazu gibt’s einen RSS-Feed und Mengen an Templates, aus denen man wählen kann.

Domainprobleme
Yuhuu, Microsaft & Co.? „…soll ich’s wirklich machen oder lass ich’s lieber sein?“ Diese Frage werden sich Webdesigner, Hobbyhomepagebesitzer sowie Firmen stellen müssen, wenn sie ihren Webauftritt planen und die passende Domain noch fehlt. Die Antwort lautet „NEIN!“. Auch wenn man auf den Tipp-Fehler des Nutzers spekuliert, kann allein schon die Registrierung der jeweiligen Domain einen wettbewerbswidrigen Verstoß gegen das Markenrecht darstellen. Um dem vorzubeugen empfiehlt es sich, eine ausführliche Recherche anzustellen. Im Internet ist eine einfache Abfrage, ob eine Marke existiert, mittlerweile kostenlos verfügbar, lediglich eine Registrierung ist nötig.

Web Services und APIs finden
Das Wiki WS Finder listet frei verfügbare Web Services und APIs jenseits von Amazon und Google. Derzeit sind es rund 120.

Vorladen
Wie man mit Mozilla und dem <link>-Tag Seiten und Grafiken vorladen kann. Das ist durchaus praktisch, wenn man weiss, was ein Besucher als naechstes zu sehen begehrt. Das Link-Prefetching.

Mini-Quellcodewandler
Nützlich für Zwischendurch: Postable wandelt Quellcodes in Text um. Ausgesprochen hilfreich wenn es darum geht einen Quellcode in einem Forum oder in einem Blog vorzuführen.

Kategorien
Editoren

Software: Freeware Highlight: PHP Coder

Der Name PHP Coder wird dem kostenlosen Programm bei weitem nicht gerecht. Startet man das Programm nach der Installation, so erinnert die Arbeitsoberfläche mehr einem HTML-Editor als einem reinen PHP-Werkzeug.

Mit dem Coder können außer PHP-Scripten nämlich auch Webseiten programmiert werden. Dabei ist der Funktionsumfang mit dem vom HTML-Editor „Homesite“ vergleichbar. Was ist das Besondere an dem PHP-Coder? Er ermöglicht Scripte direkt aus dem Editor heraus zu testen. Vorausgesetzt, es wurde die benötigte Einstellung zu einem so genannten PHP-Interpreter gemacht und PHP auf dem Rechner installiert. Sind beide Vorrausetzungen erfüllt, können Scripte auf dem eigenen Rechner getestet werden.

Screenshot
Die Arbeitsoberfläche

Ein integrierter Class-Browser ermöglicht einen hierarchisch strukturierten Überblick über die Source-Files. Files lassen sich für Includes, Klassen und Funktionen parsen. Die PHP-Dokumentation lässt sich in einem Extra-Fenster einsehen. Auf diese Weise können die Funktionen problemlos nachgeschlagen werden. Ein Workspace-Fenster gibt einen Überblick über die einzelnen Teile des Gesamtprojektes. Daneben existiert ein File-Manager, mit dem sich, wie im Explorer die lokale wie die FTP-Ordner-Struktur bearbeiten lässt. Download – 840KB – Windows

Kategorien
Editoren

XML-Editoren in der Übersicht

XML ist die Basis so manches Content Management Systems, von Flex-Anwendungen und AJAX-Applikationen. Für die Extensible Markup Language nutzt man als Programmierer eine spezielle Arbeitsumgebung, wenn man bei großen Projekten nicht die Übersicht verlieren möchte.

Blick hinter den Vorhang
Das Fundament aller Editoren ist identisch. Tidy sorgt für sauberen Code, als XSLT-Prozessor ist zumeist Xerces im Einsatz und die PDF-Umwandlung läuft über Apaches FOP. Die Konvertierung der Schema-Sprachen übernimmt Trang. Unter Windows arbeitet der Internet Explorer mit MSXML als Rendering-Maschine. Die Integration dieser Techniken in das Programm ist relevanter, als die Technik selbst.

Oxygen
Die auf Java basierende Software Oxygen ist vor allem im Verbund mit Eclipse eine mächtige Entwicklungsumgebung. Der XSLT-Debugger und die Option, weitere Tools einzubinden, macht diese Kombination zum Top-Editor im Bereich XML. Die Projektverwaltung ist zwar rudimentär, dafür überzeugen die unterstützten Dokumententypen. Gerade bei den Schema-Sprachen wird mit der Unterstützung von NRL, Schematron, DTD, XQuery, XML Schema und RelaxNG viel geboten.

Die Umwandlung eines Formats in das andere, mit Auswahl des Parsers, kann das Programm genauso leicht bewältigen, wie es auch mit der übersichtlichen Darstellung des Codes, dank zuklappbarer XML-Elemente und externer Baumansicht im eigenen Editor, keine Probleme hat. Eine detaillierte Online-Hilfe, leider nur in englischer Sprache, rundet das Paket ab. Oxygen benötigt eine Java VM ab Version 1.4 als Grundlage und kostet in der Home Edition 40,00 Euro, in der Professional Edition um die 149,00 Euro. Das Programm ist für Windows, Mac und Linux als Stand-Alone oder für Eclipse als PlugIn erhältlich.

Screenshot
Oxygen bietet einen leistungsstarken Debugger

XML Writer
XML Writer ist vorwiegend für die Pflege komplexer Projekte mit Dokumenten, Schemata und Stylesheets gedacht. Zu diesem Schluß kann man zumindest kommen, wenn man seine Funktionalität betrachtet. Einzelne XML-Dateien können ohne Probleme bearbeitet und selbst DTDs in Schemata umgewandelt oder die XSLT-Konvertierung genutzt werden. Doch damit hört es auf.

Schon bei der Verwendung von XSLT kommt es zu kleinen Fehlern. Exoten wie RelaxGN und SVG sind dem Programm unbekannt,die Konvertierung mit XSL:FO und ein XSLT-Debugger fehlen. Doch wer nur ein neues Dokument mit vordefinierten XML-Schema erstellen möchte, darf sich über die Tag-Bar und eine Stapelverarbeitung freuen. Ein Schema oder DTD wird geladen und Tags per Drag&Drop eingefügt. Als reiner Windows-Editor nutzt XML Writer den Internet Explorer mit MSXML für das Rendering. Das Programm ist für Windows und etwa 82,00 Euro erhältlich.

Screenshot
XML Writer: Gut für Autoren

Morphon
Ein ganz und gar kostenloser XML-Editor ist Morphon. Der wird zwar nicht mehr weiterentwickelt, ist als XML- und CSS-Editor aber durchaus zu gebrauchen. Aus einem Schema oder DTD wird ein XML-Dokument erstellt und die Elemente und Attribute eingefügt. Die Gestaltung übernimmt die CSS-Datei. Und da liefert Morphon gleich den passenden CSS-Editor samt Überblick der CSS-Befehle und Einstellungsoptionen mit. Neuere XML-Standards werden nicht unterstützt. Eine installierte Java VM ist für das Programm Voraussetzung. Auf der Website findet man einige Morphon-PlugIns. So etwa RenderPDF, für die Umwandlung der XML-Dokumente in ein PDF-File, und XIndice, um Dokumente von XIndice-Servern zu laden und darauf zu speichern.

Screenshot
Kostenlos aber ohne Zukunft: Morphon

Editix
Als Format-Spezialist unter den XML-Editoren darf sich Editix bezeichnen, der neben DTD, Schema und RelaxNG auch SVG, MathML und einen XSL-FO-Prozessor beherrscht. Das aufgeräumte Interface, Autovervollständigung und die zahlreichen Templates kommen dem Anfänger entgegen. Der Profi freut sich über XSLT-Debugger, Namespace Manager und XPath-Builder, der die Festlegung von eigenen Xpath-Ausdrücken ermöglicht. Das Projektmanagment könnte noch verbessert werden. Editix kostet in der Home Edition 32,30 Euro, in der Professional Edition etwa 70,00 Euro. Es benötigt eine Java VM ab Version 1.4 und läuft unter Windows, Mac und Linux.

Screenshot
Klingt wie ein Gallier

XML Spy
Mit etwa 399,00 Euro nähern wir mit dem XML Spy von Altova einer andere Liga. Man erhält für sein Geld ein flexibles XML-Werkzeug, das sogar aus Schemata C#- und Java-Code produzieren kann. Der XML-Import aus Access, MS SQL oder Oracle gelingt leicht. Das Programm nutzt den Internet Explorer mit MSXML und läuft problemlos, wenn das Betriebssystem denn „Windows“ heißt. Andere Produkte des Unternehmens, wie etwa MapForce, einem Mapping-Werkzeug für Datenbanken, oder StyleVision lassen sich leicht integrieren. Die XML Suite aus gleichem Hause bringt gleich einige dieser Programme, wie etwa den SchemaAgent, StyleVision zum Entwerfen von Stylesheets und MapForce mit, kostet aber etwa 200,00 Euro mehr. Altova bietet auch eine deutsche Version der Software an.

Screenshot
Hat seinen Preis: XML Spy

Exchanger
Der Exchanger ist ein Java-basierter XML-Editor mit XSLT-Debugger, der es in sich hat. Er bietet Vorlagen für DTD- und XML-Schemata, Docbook, XSLT-Stylesheets, SVG und sogar SOAP-Prozeduren für den Amazon Web Service. Hilfe bei der Einstellung der XML-Signatur findet man im speziellen Security-Menü. Eine Bookmark-Liste, Xpath-Suche, Excel- und SQL-Import-Funktionen sowie die Helper-Ansicht, die die möglichen Attribute des Elements präsentiert, runden das Angebot ab. Exchanger kostet um die 110,00 Euro und setzt Java VM 1.4 voraus. Das Programm läuft in jeder Java-Umgebung, also auch unter Unix, Mac, Linux und Windows.

Screenshot
Der Exchanger bietet viele Dokumentenvorlagen

Stylus Studio
Die Projekt- und Versionsverwaltung von Stylus Studio zeigt, das wir es mit einem Profi zu tun haben. Das unterstreichen auch die Import-Optionen, die aus Datenbanken wie Oracle, MBOX-Mail-Verzeichnissen oder SYLK-Arbeitsblätter alle XML-Dateien herausziehen können. Mapping-Funktionen, automatische Konvertierung zu XML, die visuellen Editoren für Schemata, XSLT und WSDL sowie verschiedene Grid-, Baum- und Textansichten sind außergewöhnliche Features, die man bei XML-Editoren selten findet. Ein XSLT-Debugger mit vielfältigen Einstellungsmöglichkeiten und Tastaturmakros dürfen da nicht fehlen. Stylus Studio kostet in der Home Edition 82,00 Euro, in der Profession Edition etwa 409,00 Euro. Es wurde ausschließlich für die Windows-Plattform konzipiert.

Screenshot
Kostet und bietet viel

XMLmind
XMLmind öffnet Dateien stets in einer Baumansicht oder aber, zur Darbietung des Stylesheets, in der Styleansicht. Was anderes ist auch nicht möglich, da XMLmind der einzige XML-Editor ohne Codeansicht ist. Andererseits gibt es aber mit der XSLT- und XSL:FO-Transformation, XInclude, Docbook, der umfassenden Schema-Abdeckung und Makrorecorder genügend Profi-Features. Zumindest sorgt die fehlende Codeansicht dafür, dass man keinen falschen Code erstellt. XML Mind kostet 220,00 Euro und benötigt Java VM 1.4. Eine kostenlose Light-Version mit eingeschränkten Funktionen steht auf der Website zum Download bereit. Das deutsche Sprachpaket erleichtert die Arbeit und ist bei XML-Editoren nicht selbstverständlich. Windows, Linux und Mac sind hier die Zielplattformen.

Screenshot
Editor ohne Code-Ansicht

XMLwrite
gibt es nicht mehr (6.7.2006)

Erstveröffentlichung 28.09.2005