Vorheriger Artikel Nächster Artikel

Xeo CSS und Cappuccino – CSS ohne Codekenntnisse schreiben

Echten Webdesignern kräuseln sich nach Lektüre der Überschrift bestimmt schon die Zehennägel. Mit Xeo tritt wieder einmal ein Editor an, der verspricht, man könnte modernstes CSS schreiben, ohne dafür Code verwenden zu müssen. Stimmt natürlich auch hier nicht. Dennoch ist Xeo CSS einen Blick wert, wobei vor allem das Framework im Hintergrund interessant ist. Aber bevor wir zu all dem kommen, ist von einer Legende zu berichten…

Xeo CSS und Cappuccino – CSS ohne Codekenntnisse schreiben

Die Legende vom visuellen Webdesign

Es ist über zehn Jahre her, da stolperte ich in einer kleinen Agentur am Rande der Stadt über einen Künstler. Den kannte ich von seinen diversen Vernissagen in verschiedenen Galerien der Stadt. Er war wirklich ein Künstler. Einer, der mit dem Pinsel manchmal Dinge malte, die man beim besten Willen nicht erkennen konnte und manchmal solche, die so realistisch aussahen, dass man sie für Fotos hätte halten können. Der saß nun also in der kleinen Agentur vor dem großen Bildschirm und schob Inhaltselemente zusammen.

Auf meine Frage, ob er denn Ahnung von HTML (CSS spielte damals in der Praxis noch nicht wirklich eine Rolle) habe, antwortete er mir unverblümt, dass dem selbstverständlich nicht so sei. Dennoch laufe das Geschäft hervorragend, über Kundenzuspruch könne er sich nicht beklagen. Stolz zeigte er mir sein „professionelles“ Werkzeug.

Er verwendete NetObjects Fusion für die Webentwicklung. Mit NetObjects arbeitete man ähnlich wie mit einem Grafikprogramm à la Photoshop oder Illustrator. Man dachte über nichts anderes als die Optik nach und schob Bilder und Texte zusammen, bis es dem Kunden und dem Zusammenschieber gefiel. Nicht einmal HTML erzeugte man dabei. Dies erledigte NetObjects vollautomatisch, wenn man auf „Veröffentlichen“ klickte. Und auch nur dann. Jede Änderung an der Website führte zu einem neuerlichen Veröffentlichungsvorgang. Klar, dass man dabei keinerlei Einfluss auf den erzeugten Code hatte. Aber das wollten die Verwender ja auch gar nicht. Zweifler konnten sich damit trösten, dass eine nachträgliche Optimierung des Quellcodes ohnehin keinen Sinn habe, weil bei der nächsten Änderung an der Website der gesamte Quellcode neu ausgeworfen würde.

Nach dem gleichen Prinzip funktionierte Frontpage vom alten Boliden Microsoft. Frontpage immerhin bot den Vorteil, dass es direkt HTML generierte und nicht erst auf Anforderung. Zudem gab es für Frontpage Servererweiterungen, mit deren Hilfe man fortgeschrittene Funktionalitäten wie eine Suchfunktion auf der Website realisieren konnte. Über Codequalität brauchte man jedoch auch hier kein Wort zu verlieren. Diejenigen Entwickler, die mit bestehenden Frontpage-Sites konfrontiert wurden und diese optimieren sollten, schmissen nicht selten die ganze Site in den virtuellen Mülleimer und starteten from scratch. Das war weniger Aufwand...

So gab es vor über zehn Jahren die Zusammenschieber mit ihren Grafikprogrammen und die Webentwickler mit ihren rohen Editoren wie z.B. Allaire HomeSite. Ich gehörte zu letzteren, war aber nicht vollends zufrieden mit der Situation. PHP war noch kein echtes Thema, HTML war überall. Mir fehlten Funktionen zur Arbeitserleichterung, wie Bibliothekselemente, die man wieder verwenden konnte oder Templates, die man auf bestehende Inhalte anwenden konnte. Und ab und zu hätte ich mich auch über visuelle Designhilfen bei der Entwicklung der Siteoptik gefreut.

Kein Wunder also, dass ich zu den ersten Anwendern des etwa 1998 entstandenen DreamWeaver von Macromedia wurde. Dafür wollten mich die Puristen unter den Webentwicklern am liebsten lynchen. Ich jedoch fand die Kombination von Code- und Entwurfsmodus hervorragend und sah das Beste beider Welten realisiert. Auch wenn Dreamweaver von Macromedia selbst gern als visuelles Werkzeug dargestellt wurde, muss man doch sagen, dass die besten Ergebnisse nur dann entstehen konnten, wenn der Entwickler in der Lage war, HTML zur Not auch mit der Hand zu schreiben.

In der zweiten oder dritten Generation von Dreamweaver spielte dann erstmals das Thema CSS eine Rolle. Die Umsetzung war erbärmlich, entsprach damit aber in etwa der damaligen Bedeutung von CSS. Kaum einer verwendete CSS zu mehr als zum Textstyling und dafür brauchte man ja nun wirklich keinen großen Aufwand zu betreiben. Die Bedeutung von CSS stieg, die Integration in Dreamweaver wurde besser. Irgendwann bot Dreamweaver dann visuelles CSS-Styling an. Eine Katastrophe!

Da schließt sich der Kreis. Denn das, was Dreamweaver vor fast zehn Jahren behauptete, zu ermöglichen, behauptet heute Xeo CSS. Immerhin sieht Xeo CSS besser aus, als es Dreamweaver damals tat.

Xeo CSS - Visuelle Hilfe für nicht Hilfsbedürftige

Xeo CSS: Schicke Web-App mit wenig Nutzwert

Xeo CSS aus dem (indischen) Hause Xeoscript Technologies ist ein CSS-Editor, der als Onlinedienst realisiert ist. Ohne Registrierung kann er von jedermann frei verwendet werden. Ein Benutzerkonto muss allerdings dann angelegt werden, wenn man seine Werke speichern und verwalten will. Ansonsten kopiert man den Quellcode in die Zwischenablage und fügt ihn in einem Editor seiner Wahl wieder ein. Neben der Kernfunktionalität, dem visuellen CSS-Design, bietet Xeo CSS einen HTML-Editor mit Syntax-Highlighting an. Der generierte CSS-Code kann zwar angezeigt und kopiert, aber leider nicht bearbeitet werden. So geht bei Xeo CSS kein Weg an der Nutzung des so genannten visuellen Editors vorbei.

Xeo CSS: Der visuelle Editor in Aktion

Wie widersinnig dieser Ansatz im Grunde ist, wird klar, wenn man sich vor Augen führt, dass sämtliche Klassen, IDs etc. manuell angelegt werden müssen. Man muss also wissen, was man tun will und wie es geht. Auch die Zuordnung im HTML muss manuell erfolgen. Wenn das alles erledigt ist, wirft man den visuellen Editor an und klickt sich die Optik zusammen. Wer soweit gekommen ist, benötigt die Unterstützung nicht nur nicht mehr, sondern wird sie in der Regel als zeitraubende Zusatzarbeit im Vergleich zum schnellen Eintippen der erforderlichen Anweisungen sehen.

Nun könnte man noch sagen, dass möglicherweise Einsteigern der Zugang erleichtert wird. Das allerdings ist auch zu bezweifeln, denn der visuelle Editor verwendet CSS-Fachbegriffe, die man nur dann kennt, wenn man sie eben kennt. Eine Erklärung dazu gibt es nicht. Xeo CSS ist also ein visuelles Tool für Leute, die es nicht brauchen. Immerhin ist der HTML-Editor ganz schick. Wenn man also unterwegs mal schnell einen solchen Editor benötigt, ist es nicht verkehrt, bei Xeo CSS halt zu machen.

Cappuccino: Die Technik hinter Xeo CSS

Interessant ist Xeo CSS unter einem anderen Gesichtspunkt, nämlich unter dem Gesichtspunkt der eigenen technischen Realisation. Xeo CSS wurde erstellt unter Verwendung des Cappuccino-Framework. Cappuccino ist am ehesten vergleichbar mit Frameworks wie jQuery oder Prototype, unterscheidet sich aber ganz wesentlich von diesen. Während jQuery für die Dynamisierung normaler Websites erdacht ist und deshalb natürlich weiterhin auf HTML und CSS setzt, wurde Cappuccino explizit für die Anwendung von Webapplikationen entwickelt, deren Look & Feel denen von Desktopanwendungen nahe kommt.

Xeo CSS: Ansprechende Optik dank Cappuccino-Framework

Dabei setzt Cappuccino auf Javascript, allerdings verborgen hinter einem - sagen wir - Abstraktionslayer namens Objective-J. Angeblich bedarf es bloß des Erlernens von Objective-J, um Anwendungen wie etwa Xeo CSS selbst realisieren zu können. Insbesondere bedarf es keiner Kenntnisse in HTML, CSS oder Javascript selbst. Nachdem Objective-J im Prinzip eine Implementation von Javascript ist, ist klar, dass mit Cappuccino realisierte Projekte weitestgehend im Browser des Users funktionieren. Früher hätte man langatmige Diskussionen über die Sinnhaftigkeit einer solchen Vorgehensweise geführt, heutzutage dürfte sie als Standard gelten.

Wer sich für weitere Beispiele mit Cappuccino realisierter Apps interessiert, findet davon auch im Google Chrome Web Store, der dieser Tage übrigens auch als Developerpreview für deutsche Entwickler zugänglich wird, einige beeindruckende Exemplare. Anspieltipp: Time Table, ein Zeiterfassungssystem für Freelancer.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von David Maciejewski am 23.02.2011 (08:39 Uhr)

    Vielen Dank für die Erinnerung an Allaire HomeSite! Ein damals herrliches Stück Software. Damals habe genau damit Qualitätsarbeit mit reinem HTML und CSS abgeliefert (gehörte natürlich schon dazu, nur übernahm HTML einen wesentlichen Gestaltungsfaktor mit Tabellen und Frames ein), während andere mit Pixelschubsprogrammen hantierten. Allerdings war auch PHP bei mir damals schon ein heißes Thema. Ich lernte PHP und baute mein erstes CMS, als diese auf dem Markt noch die üblichen 50.000 Mark kosteten.

    Antworten Teilen
  2. von Dieter Petereit am 23.02.2011 (09:12 Uhr)

    @David: Ich bin auch ganz wehmütig geworden. Hach, die alten Zeiten. 50 TMark für ein CMS, ab 100 TMark für einen Shop. Da konnte man noch Geld verdienen. Heutzutage ist alles Open Source und vom Kunden als umsonst missverstanden...

    Antworten Teilen
  3. von Philipp am 24.02.2011 (18:33 Uhr)

    Für mich erscheint XeoCSS eher wie ein umständliches Tool für Entwickler. Ich bleibe da lieber beim Coding per Hand ;)

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Magic kurz vorgestellt: Animate.css für Anwendungsentwickler
Magic kurz vorgestellt: Animate.css für Anwendungsentwickler

Wir haben bereits über die CSS-Bibliothek animate.css berichtet. Wer noch mehr und vor allem andere Animations-Effekte benötigt, der sollte sich die Beta von Magic ansehen. » weiterlesen

CSS-Stylesheets asynchron nachladen – so gehts!
CSS-Stylesheets asynchron nachladen – so gehts!

Häufig benötigt ihr einen Teil des CSS nicht gleich zu Beginn des ersten Seitenaufrufs. Wir stellen euch ein kleines Snippet vor, das ein asynchrones Nachladen von CSS-Dateien ermöglicht. » weiterlesen

Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst
Modular und hackbar: Wie du den Open-Source-Browser Breach individuell anpassen kannst

Mit Breach gibt es einen neuen Open-Source-Browser, dessen Oberfläche vollständig in JavaScript geschrieben wurde. Dank der modularen Natur des Browsers soll sich das Interface per JavaScript und … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 37 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen