Haml ist eine alternative Template-Engine, ursprünglich entwickelt für Ruby, kann aber auch im PHP-Kontext eingesetzt werden

Seit Jahren auf der Suche nach alternativen Template-Engines bin ich mal wieder auf der Drupal Website fündig geworden. Haml (XHTML Abstraction Markup Language) nennt sich das Grundkonzept, und es kann auch problemlos in Drupal eingesetzt werden. Die Konstruktion neuer Templates ist spielend einfach. Hier eine minimale Anleitung.

1. Als erstes muss die Engine installiert werden. Man lädt sie hier runter, und entpackt sie in das Verzeichnis themes/engines/. Den Ordner sollte man noch umbenennen in “haml”.
2. Dann muss phphaml noch installiert werden. Das Paket lädt man hier runter, und entpackt es in themes/engines/haml/.
3. Nun kann das neue haml-Theme bereits angelegt werden. Wie das Erstellen von Themes in Drupal funktioniert, soll hier nicht im Detail erklärt werden (mehr Infos dazu findet man auf der Drupal-Seite). Wir legen also im Theme-Ordner ein neues Verzeichnis hamltheme/ an. Darin wird erst die Datei hamltheme.info erstellt mit dem Unterschied zu anderen Theme-Info-Dateien, dass wir hier haml als Templateengine aktivieren:
   

   1 2 3 4 5 6 7

   name = Haml Theme description = version = VERSION core = 6.x engine = haml   ; etc.

4. Nun wird noch das Page-Template erstellt. Dazu legen wir eine neue Datei page.haml an. Als Basis-Inhalte fügen wir Folgendes ein (Einrückung beachten!*):
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

   !!! %html %head = $head %title= $head_title = $styles = $scripts %body #container / primary links as styled list %ul#primary - foreach($primary_links as $link) %li %a{:href => $base_path.$link[href]}= $link[title] #header= $header #left= $left #main = $tabs = $messages = $help %h2.title= $title #content= $content #right= $right #footer= $footer

5. *Achtung: Bei der haml-Syntax ist die Einrückung (Leerstellen, Tabulator) entscheiden, ob ein Element als children oder als sibling erstellt wird.
6. Danach kann man das Theme bereits unter admin/build/themes aktivieren.
7. Nun müssen natürlich ggf. noch Anpassungen für die anderen Templates (node.haml usw.) gemacht werden.

Interessant ist auch, dass man selbst HTML und PHP-Code in die Templates integrieren kann. Damit sollte am besten jeder selbst einmal etwas rumexperimentieren. Einige Beispiele für die Syntax finden sich im Ordner themes/engines/haml/phpHaml/tpl/.

Viel Spaß!

Ja wo ist sie denn? So sieht die fixe-Breite-Seite auf einem aktuellen 23-Zoll-Bildschirm aus.

Sehr schöner Beitrag zu sehr schlechter Webseite der Stadt Trier. Man merke, die Agentur rühmt sich auch noch für diese Seite: http://www.rdts.ag/auszeichnungen/top10.html Sie hat in den 1990er Jahren irgendwann von TV Today den Preis für eine der fünf besten Stadtinformationssysteme erhalten.

Die gruseligsten Seiten im Netz – Trier.de | Design Tagebuch

Noch nie gesehen? Willkommen in der Welt der Symlinks.

Der erste Artikel aus der Linux-Reihe handelte von meinen Erfahrungen mit dem Umstieg von Windows auf Linux und den damit verbundenen Vor- und Nachteilen. Es folgen nun weitere Beiträge, die sich mit der professionellen Arbeitspraxis in verschiedenen Bereichen unter Linux beschäftigen. In diesem ersten Teil geht es um Webdesign, PHP-Programmierung, Bildbearbeitung für den Screenbereich sowie das Arbeiten an Internetseiten über FTP. Es wird sich zeigen, dass Linux gegenüber Windows eine ganze Menge an wirklichen Vorteilen zu bieten hat.

Allgemeine Bemerkung: Ubuntu und andere Linux-Derivate

Insgesamt kann ich immer nur aus meinen Erfahrungen mit Ubuntu sprechen, ich habe weder Suse noch Fedora noch andere Linux-Derivate getestet. Im Prinzip sollte es jedoch möglich sein, die meisten Applikationen ebenso ans Laufen zu kriegen wie unter Ubuntu. Ich empfehle dennoch das Arbeiten mit Ubuntu, da hier das Installieren von Programmen (so genannte Paktet) wesentlich unkomplizierter ist als unter einigen anderen Derivaten.

localhost: wamp, lamp oder xampp?

Windows: Wer Internetseiten nicht nur in html, css und Javascript erstellt, sondern darüber hinaus in PHP programmiert und beispielsweise Datenbanken in mySQL benutzten möchte, der braucht eine produktive Testumgebung. Weil das Einrichten von PHP, mySQL und einem Apache-Server unter Windows jedoch unheimlich kompliziert ist, gibt es seit Jahren bereits die bekannten Pakete wamp, lamp, xamp usw., die gleich alles in einem Durchgang installieren.

Linux: Bei Ubuntu ist das (wie so vieles andere im Webbereich) einfacher. Es werden einige Pakete installiert und anschließend läuft der Apache-Server. Apache-Module wie PHP5, PHP4 oder mod_rewrite können ebenfalls als Pakete installiert werden und durch einen einfachen Befehl im Terminal ein- und abgeschatet werden (z.B. a2enmod php5 oder a2dismod ssl). Es ist außerdem zu empfehlen, den lokalen www-Ordner im eigenen home-Verzeichnis anzulegen, um auch ohne Admin-Rechten einfach auf das Dateisstem zugreifen zu können.

Da die meisten Webserver sowieso mit Linux laufen, hilft die Einrichtung eines localhost unter Linux zudem dabei, die Funktionsweise von Webservern besser zu verstehen. Da symbolische Links unter Windows nicht funktionieren, wird ein Windows-Nutzer wohl auch nie in den Genuss kommen zu verstehen, wie man Libraries recht einfach einbinden kann.

FTP-Software überflüssig

Live-Bearbeitung einer CSS-Datei per FTP-Verbindung

Windows: Die Verbindung des Servers mit FTP ist unter Windows eine ebenso anstrengende Geschichte. Es gibt zig Programme, die ausschließlich dazu dienen, sich per FTP mit einem Server zu verbinden. Anschließend werden auf der linken Seite die lokalen Dateien, auf der rechten Seite die Online-Dateien angezeigt und es lassen sich Dateien hoch- und runterladen.

Linux: In der Navigationsleiste des Betriebssystems gibt es einen Reiter “Orte”. Dieser Reiter enthält u.a. den Punkt “Verbindung zu Server…”. Hier lassen sich alle möglichen Serververbindungen einrichten (FTP, WebDAV, SSH etc.). Zusätzlich kann man die Verbindungen als Lesezeichen benennen, so dass sie im Nautilus, dem Dateibrowser unter Ubuntu (Gnome), angezeigt werden. Ab diesem Zeitpunkt reicht ein Klick auf das Lesezeichen, um die Verbindung herzustellen. Die Dateien werden ebenso wie lokale Dateien behandelt, können gleich vor Ort bearbeitet und gespeichert werden. Kein lästiges Runterladen ist mehr nötig. Stattdessen kann man beispielsweise Änderungen in CSS-Dateien direkt im Texteditor speichern und online sehen. Dahinter steckt natürlich ein Trick. Die Datei wird schon temporär runtergeladen und die lokale Datei wird bearbeitet. Beim Speichern wird die Datei automatisch wieder hochgeladen. Vorteil ist jedoch: der Nutzer muss sich um all diese Dinge nicht mehr kümmern.

Eclipse

Ein geniales Entwickler-Tool für PHP ist die Open-Source-Software Eclipse. Auf der offiziellen Download-Seite gibt es eine Version für PHP-Entwickler (PDT). Diese Version sollte man lieber manuell installieren, wie dies im deutschsprachigen Ubuntu-Wiki beschrieben wird. Die in Ubuntu vorkompilierte Version macht einige Schwierigkeiten bei Updates und es gibt  überdies eigentlich keinen Grund, die Software nicht manuell zu installieren. Eclipse läuft von Beginn an einwandfrei. Richtet man sich nun den Workspace im localhost-Ordner ein, so lässt sich problemlos alles gleich im Browser testen.

Linux vs. Windows: Auch hier gibt es einen entscheidenden Vorteil. Dazu ein Beispiel: Es gibt eine lokale Installation des ZEND-Frameworks im localhost-Ordner mit einigen Projekten, die parallel bearbeitet werden sollen (z.b. /home/benutzername/www/zend/projekt001/ ). Will man nun dieses Projekt in einem bereits bestehenden Workspace in Eclipse bearbeiten, ohne ständig die veränderten Dateien hin und her kopieren zu müssen, ist das unter Windows nicht möglich. Unter Linux lässt sich hingegen im Workspace von Eclipse ein neues PHP-Projekt einrichten. In diesen Ordner zieht man nun einen symbolischen Link auf das zu integrierende Projekt, und schon kann man nach einer Aktualisierung im Eclipse-Pojekt (F5) das ZEND-Framework-Projekt bearbeiten.

HTML- und CSS-Editoren, Javascript

Eigentlich sollte Eclipse allen Anforderungen genügen, die aktuelle Web-Entwicklung fordert. Syntax-Highlighting für PHP und Javascript ist ebenso verfügbar wir das automatische Ergänzen von HTML-Tags und Attributen. Wem das jedoch noch nicht reicht, wer also lieber WYSIWYG arbeitet, für den sind zahlreiche HTML-Editoren unter Linux vorhanden. (Für eine Übersicht, siehe http://wiki.ubuntuusers.de/Webeditoren ).

Ich empfehle jedoch, nicht zu viel mit WYSIWYG und automatisierten Generatoren zu arbeiten, denn letztlich sollte man als Webdesigner verstehen, was dahinter steckt, um langfristig die Möglichkeiten auszuschöpfen. Zur Entwicklung in diesem Bereich ist zudem die Firefox-Extension “Firebug” ein zentrales und unumgängliches Tool.

Webdesign und Internetgrafiken

Das Design findet im Kopf statt, nicht in der Software. Nichtsdestotrotz (lustiges Wort) ist es immer auch Benutzerfreundlichkeit eines Tools, wie weit die Kreativität mit der Zeit eingeschränkt oder entfaltet wird.

Windows: Obwohl ich noch nie mit Adobe Fireworks gearbeitet habe, sagt man, diese Software sei abgestimmt auf das Design von Webseiten. Photoshop hat seit einiger Zeit ein Zusatztool ImageReady. Dieses Tool erzeugt sogar einfachen HTML-, Javascript- und CSS-Code, was im ersten Moment verlockend klingt. Aber zwei Dinge: erstens was bringt uns der von Adobe kreierte Code, wenn jQuery diese Dinge viel besser beherrscht. Der Einstieg in jQuery ist übrigens wirklich kinderleicht. Und zweitens kostet diese Software Geld. Warum?

Ubuntu: Eindeutige Alternative hierfür bei Linux ist Inkscape. Dieses Programm kann einfach nicht genug gelobt werden. Es ist einfacher zu bedienen als ImageReady. Das liegt vielleicht daran, dass es erst gar nicht mit Ebenen arbeitet, sondern mit Elementen. Die Gegenüberstellung von Inkscape und Photoshop im Kontext Webdesign behandelte ich auch bereits in einem Beitrag vom 2.Juli 2009 mit dem zugegeben provokanten Titel “Brauchen Webdesigner tatsächlich Photoshop?“. Inkscape vereinfacht das Arbeiten mit Verläufen, Schattierungen und Formen aller Art. Zudem verfügt Inkscape über eine grandiose Exportfunktion für PNG-Grafiken, die es erlaubt, die aktuelle Auswahl zu exportieren, so dass die Übertragung von Inkscape-Entwürfen in HTML- und CSS-Dateien sehr einfach ist.

Fazit: Prüfung bestanden

Es konnte hier auf diesem knappen Platz nur ausschnittsweise ein Vergleich zwischen Linux und Windows hergestellt werden. So wurde hier nicht weiter auf mySQL eingegangen, um den Artikel nicht endlos in die Länge zu ziehen. Jedoch kann ich allen Lesern versichern, dass Linux hier ebenso die Nase vorn hat wie in den anderen Bereichen, die mit dem Schwerpunkt Web zu tun haben. Ubuntu hat im Vergleich mit Windows nicht nur die Prüfung bestanden, sondern es schlägt Windows bei weitem. Mac habe ich hier mal rausgelassen. Es scheint ja, dass viele Programmierer auf Mac stehen, aber dieser Sekte wollte ich bisher noch nicht beitreten, alleine schon aus Sympatiegründen gegen den “Guru” der “Apple-Sekte”, wie es ein Freund mal sehr trefflich formulierte.

Der sichere Vorsprung von Linux gegenüber anderen Systemen im Bereich Online ist wahrscheinlich darin begründet, dass das Internet bereits von Anfang an von Unix- bzw. Linuxbasierten Systemen geprägt war. Open Source ist nirgends so weit vorangeschritten wie im Onlinebereich, und warum sollte man da auf Betriebssysteme setzen, die diese Philosophie nicht vertreten. Meine Empfehlung für alle Webdesigner, -entwickler und -programmierer: Lasst Euch nicht länger von Firewalls, Windows-Verknüpfungen und aufgrund des Systems nicht möglichen Unmöglichkeiten belästigen und steigt um. Hier lohnt es sich wirklich!

Nächste Folge: Musikproduktion und Audiobearbeitung

Nicht in allen Bereichen hat Linux so die Nase vorn wie beim Schwerpunkt Web. Meine Erfahrungen als ehemaliger Musikproduzent und der Umstieg auf Linux sollen im nächsten Teil der Linux-Reihe Umsteigern helfen, ihre Entscheidung zu fällen.

Vektoren, aber mit allen Extras: Masken, Verläufe, Muster und Transparenz

Vor einigen Monaten berichtete ich darüber, dass man mit Inkscape sehr einfach professionelle Webgrafiken erstellen kann. Wer einige Zeit mit dem Programm arbeitet, und sich vor allem die Shortcuts aneignet, wird nicht mehr auf dieses absolut professionelle Open Source Tool zur Vektorbearbeitung verzichten wollen.

Ausgereiftes Formenkonzept

Die Formen von Inkscape sind wirklich einfach zu bedienen. Inkscape unterscheidet sinnvollerweise zwischen der Größe einer Form selbst als Eigenschaft und der Transformation von Elementen. So wird eine abgerundete Ecke eines Recktecks in den Formeigenschaften selbst definieren. Skaliert man später diese Form durch eine Transformation, so verziehen sich die Rundungen. Will man die Größe der Form ändern ohne dass sich die Eckenrundung verändert, so muss man die Breite und Höhe in den Formeigenschaften selbst ändern. Diese einfache Unterscheidung führt dazu, dass man sowohl mit Ecken als auch ohne Eckenskalieren kann. Das ist nur ein Beispiele, das zeigt, dass sich Programmierer der Open Source Software wirklich Gedanken gemacht haben.

Ein weiterer Vorteil bei Formen ist die Editierbarkeit der Formeigenschaften an der Form selbst. So hat das Rechteck einen Punkt, an dem man die Eckenrundung per Maus einfach ziehen kann. Am Kreis kann so zum einen der Radius, zum anderen der Endpunkt des Bogens verändert werden. Beim Stern erreicht diese Benutzerfreundlichkeit ihren Höhepunkt. Hier kann einfach aus einem Stern ein dreiarmiger Bumerang gezogen werden. Oder auch eine 64-fach gedrehte mathematische Kurve, wem es gefällt. Die Kreativität wird hier jedenfalls ordentlich angeregt.

Farbpaletten und Farbmischer

Was mich seit Jahren bei Adobe-Produkten gestört hat, waren die schlecht zu bedienende Farbmischer. Wollte man mal schnell in einem Menü eine Farbe auswählen, so musste man entweder mindestens drei Schieberegler verschieben und sich hierfür auch schon recht gut mit Farbenlehre auskennen, oder aber in einem winzigen Feld aus allen Farben auswählen. Inkscape liefert von Haus aus einige recht gute Paletten mit (lustigerweise u.a. auch Windows-Icon-Farben). Beim Farbmischer kann man aus sage und schreibe fünf Systemen auswählen, wobei das Farbrad mein persönlicher Favorit ist.

Tutorial als Inkscape-Dokument

Dass selbst die Tutorials und Einführungen Inkscape-Dokumente sind, zeigt eigentlich schon, dass die Macher selbst mit ihrem Programm arbeiten wollen. Hier wird alles von den Grundlagen über Formen und Farben bis hin zu Vektorisierung erklärt, antürlich mit den entsprechenden Shortcuts, denn teilweise sind Aufgaben nur über Tastenkürzel zu erledigen. Über diese Einführungen lernt man innerhalb weniger Stunden die Software komplett kennen. Auch wieder sehr Kreativitätsfördernd.

Was Inkscape nicht kann

Wer versucht, mit Inkscape Flyer mit Fließtext zu gestalten, wird auf ein Problem stoßen. Inkscape kann keine Silbentrennung. Insgesamt lässt das Textwerkzeug im Block zu wünschen übrig. Aber das liegt offensichtlich an den Beschränkungen von SVG. Vielleicht wird es da in Zukunft noch etwas entwicklung geben.

Das Tollste an Inkscape

Wer Webgrafiken exportieren will, wird seine wahre Freude mit Inkscape haben. Egal welches Element wir auswählen, Inkscape exportiert auch die Auswahl. Aber nicht nur die Auswahl, sondern alles, was im Auswahlbereich zu sehen ist. Das geht sogar soweit, dass man eine transparente Ebene über den gewünschten Exportbereich legen kann, so dass alles, was darunter liegt über einen Mausklick als Grafik exportiert ist. Keine Bildbearbeitung mehr nötig. Wo doch Adobe inzwischen schon auf ihrer Internetseite für CS4 mit Zeitersparnis wirbt: Mehr Zeit als mit Photoshop spart man, wenn man Photoshop gar nicht mehr öffnen muss.

Die Filter- und Vektorisierungsfunktionen habe ich bisher noch nicht getestet. Wenn ich mal bald dazu komme, werde ich natürlich hier im Blog darüber berichten.

WebdixX Nachfolger WIBS

Und wenn ja, was braucht dann ein CMS? Zugegeben, die Frage klingt etwas provokant. Der Mensch braucht gewiss kein CMS, aber in gewisser Weise hat die Internetnutzung zugenommen und zunehmend stellen Menschen Content ins Netz ein. Daher lässt sich fragen, wie der Mensch eigentlich diesen Content einstellt, ober er dazu neue Werkzeuge und was überhaupt er dazu benötigt.

Ich habe versucht, dieser Frage nachzugehen. Ausschlag für diese Überlegungen waren zwei Dinge. Zum einen ein Blick auf eine neue Datenbank-Software für den Mac. Diese leider nicht freie Software ist wirklich intuitiv zu bedienen, das ganze sieht aus wie eine Mischung aus einer Tabelle und den Suchfiltern von Mozilla Thunderbird. Andere Inspirationsquelle war das Buch Getting Real von 37signals, das man übrigens auch kostenlos im Netz lesen kann unter http://gettingreal.37signals.com/. In diesem Buch geht es im Prinzip um die Vereinfachung unseres Denkens, um eine optimale Software für bestimmte Zwecke zu entwickeln.

Denkt man darüber nach, was ein CMS eigentlich ist, so kommt man auf den Schluss, dass es das Gegenteil von zielorientierter, praktischer Software ist, denn das CMS weiß ja nicht was man letztlich mit ihm vorhat. Also muss es alle Möglichkeiten einplanen. Ist das wirklich der Zweck eines CMS? Oder sollte das CMS eher eine Ansammlung von Tools sein?

Dieser Essay ist bestimmt nicht zu Ende gedacht, aber er spiegelt meine Überlegungen von vor 2 Woche wider. Inzwischen steht die Basisversion eines neuen, einfachen CMS “WIBS” (Arbeitstitel , die auf jQuery und PHP basiert. Natürlich mal wieder zu komplex. Aber der Anfang ist gemacht.

CMS, CMS, CMS und die besten Seiten sind einfach

Inzwischen gibt es so zahlreiche CMS im Umlauf, die meisten davon kostenlos, sogar Open Source. Jeder hat so seine Erfahrungen mit dem einen oder anderen davon gemacht. Doch was man heute im Internet findet sind zunehmend funktionale Seiten. Was macht eine solche Seite aus? Und was braucht eine solche Website? Dieser Beitrag versucht Anforderungen moderner Websites einzugrenzen und anschließend ein Konzept für ein CMS zu erstellen, das diesen Anforderungen genügt.

User Interface Design: Navigation und Zugang zum Content

Moderne Webseiten verwalten mindestens ebensoviel Content wie ihre Vorgänger, doch fällt es dem User erst einmal nicht mehr auf. Auf Youtube zum Beispiel werden laut Wikipedia täglich rund 65000 Filme hochgeladen. Doch wer einen Film sucht, findet ihn meist mit weniger als drei Suchbegriffen. Entwickler überall auf der Welt haben erkannt, dass es wahrlich schnellere Möglichkeiten gibt, durch eine Website zu navigieren als über eine Sitemap oder ein dreifach geschachteltes Menü.

Für einen schnellen Zugang zu Seiteninhalten gibt es kein Patentrezept. Vielmehr sind hier innovative Lösungen gefragt. Je nach Inhalten einer Seite kann eine Stichwortsuche hilfreich sein. Die Möglichkeit, Inhalte nach Datum, nach Kategorien oder nach Tags (Stichwörter) zu sortieren, ist ein weitere Möglichkeit, die den Zugang vereinfachen kann. Es gibt nahezu unbegrenzte Möglichkeiten, die jedoch bei der Planung einer Website nicht willkürlich sondern geplant eingesetzt und ggf. entwickelt werden müssen.

Variable Darstellung und Ausgabeformate

In dem Moment, wo der Mensch den Unterschied zwischen Content und Darstellung, oder noch präziser zwischen Content und Ausgabeformat erkennt, verändert sich sein Denken. Diese Überlegung ist insofern philosophisch, als dass es um die Grenze zwischen Inhalt (Content) und Form (Ausgabe) geht. Die Form ist das, was wirkt, was echt oder unecht erscheint. Der Mensch sieht die Form, aber er behält den Inhalt. Unser Gehirn produziert reinen Inhalt. Gedanken sind Content, eine Idee ist Content, eine Information ist Content. Versucht man eine Information an andere zu übermitteln, so bedarf es der Darstellung. Selbst wenn ich meine Idee in eine Datenbank eintragen möchte, so verändere ich sie bereits. Die Idee wird geschrieben zur Zeichenkette (string), oder theoretisch umgesetzt als Methode (function) oder zu einer Gruppe von Methoden (class) in ein übergeordnetes Konzept (parent class) eingeordnet. Vielleicht denke ich auch ein Objekt (object), das wiederum eigene Methoden enthält.

Doch was kann man daraus für einen abstrakten Entwurf moderner Websites schließen? Der Inhalt muss so formlos wie möglich gespeichert werden, so dass es einfach ist, ihn in unterschiedlichen Formen auszugeben. Eine Information muss sowohl auf der Seite selbst (HTML) als auch per RSS-Feed (XML) oder als Druckvorlage (PDF) abgerufen werden können. Welche der Formate man letztlich zur Verfügung stellt, wird je nach Anwendungsfall entschieden.

Unvorhersehbar: offen sein für alles

Erfindungen fallen dadurch auf, dass sie gemacht werden, nicht dass sie jemand voraussagt. Und dann sind sie da und niemand will mehr auf sie verzichten. In großen Firmen gibt Forschungs- und Entwicklungsabteilungen, doch welche dieser Abteilungen hat schon mal eine wirkliche Innovationen hervorgebracht? Der Vorteil von Innovationen ist gleichzeitig ihr Nachteil: die Unvorhersehbarkeit.

Flexibilität macht unflexibel

Fast alle CMS der Vergangenheit haben versucht, Unvorhersehbares zu integrieren und so möglichst flexibel zu sein. Man denke dabei beispielsweise an TYPO3: Jedes HTML-Element wird mit zig CSS-Klassen versehen und in diverse DIVs verschachtelt, damit man auch ja jedes davon direkt ansprechen kann. Erweiterungen werden in ihrer Basis-Version mit diversen Eigenschaften ausgestattet, die es erlauben sollen, all das zu machen, was der Entwickler des CMS noch gar nicht weiß. Innovationen sollen eben einfach in das System aufgenommen werden. Und kaum kommt einer an und erfindet AJAX und JSON, und schon ist alles für’n A****.

Aus schlanken Systemen sind eigene, schwerfällige und träge PHP-Welten gewachsen, die nun daran scheitern, dass es ihnen an Schlichtheit fehlt. Sie haben fast alles vorhergesehen ausser das Unvorhersehbare selbst, die wirklichen Innovationen eben.

Die Zukunft: back to the roots?

Es fing einfach an und es wird noch einfacher enden. Die Anforderungen für die Zukunft:

Datenstrukturen sollen lesbar sein.

JSON ist beispielsweise ein solches für Mensch und Maschine gut lesbares Format für kleine Datenstrukturen.

Eine Seite braucht dynamische Bereiche.

Hier ist Javascript und AJAX unverzichtbar. Das Javascript-Framework jQuery erlaubt schnelle Eingriffe in nahezu alles, was HTML darstellen kann.

Ein Template soll lesbar und veränderbar sein.

Die Seitenaufteilung muss sich zwar nicht stets ändern, aber die Möglichkeit muss geboten sein.

Inhalte sollen lesbar sein.

Wie die einzelnen Inhalte in das CMS kommen, muss dem Programmierer selbst überlassen bleiben. Für eine reine HTML-Seite reicht HTML aus. Bei anderen Ausgaben wäre allerdings ein reines Datenformat wichtig.

Nichts darf fertig sein.

Der Programmierer muss das CMS selbst erstellen. Seine Idee muss die Idee des CMS werden, nicht umgekehrt. Wenn das CMS vorher schon fertig ist, dann ist es nicht sein CMS und zudem ist es starr. Und Starrheit ist das Gegenteil von Flexibilität, und das wollen wir doch alle, oder?

Fazit: alles wird einfacher

Hier ein Fazit zu bringen, ist gefährlich, denn der Gedanke ist noch nicht zu Ende gedacht, und was ich hier heute schreibe, denke ich morgen schon wieder anders. Vielleicht kommt die Komplexität wieder in Mode. Eigene Standards und Systeme, die gelernt werden müssen, nicht weil es keine Alternativen gibt, sondern weil der Programmierer Neues erfinden will. Er braucht diese Erfahrung, sie gibt ihm ein gutes Gefühl. Die Welt verstehen und beherrschen, alles kontrollieren, selbst das Risiko. Ich persönlich glaube nicht daran und buildLess von 37signals bleibt für mich eine wichtige Lektion, da ich selbst zuvor immer glaubte, man müsse alles dynamisieren und flexibel sein in der Form, dass jede Laune des Nutzers vorhersehbar gemacht wird. Stattdessen sollte der Nutzer aber vorher sagen, was er will, dann kann der Programmierer es genau auf diesen Fall angepasst bauen. Das spart neben Nerven auch noch Kosten. Es bleibt uns also nur die eine Hoffnung: Alles wird gut.

Alte Flash-Filme laden – problematisch

Einen Flash-Film in eine Flex mxml Datei laden, das konnte ich mit viel probieren und Googlen so gerade noch rausfinden. SWFLoader heißt das Zauberwort und durch das Attribut source kann man die swf-Datei bestimmen. Doch vergeblich suchte ich stundenland danach, wie ich dem alten Actionscript 1 Movie auch noch einige Variablen mit auf den Weg geben kann. Jetzt glaubte ich endlich jemanden gefunden zu haben, der sich auskennt: Renaun Erickson zeigt in wenigen Schritten, wie das funktioniert:

Renaun Erickson » Loading a SWF in Flex and with a FlashVar alternative

Danke, Renaun! Leider klappt das aber nicht. Die einzige Möglichkeit besteht darin, eine local Connection einzurichten. Dazu braucht man wiederum zugriff auf die eingebundene Flash-Datei, sprich: man braucht Flash. Die AVM1 und die AVM2 sind nämlich vollkommen unterschiedliche Systeme, die untereinander nicht kommunizieren können. Da hat sich Adobe leider was Blödes geleistet. Doch da will man als Firma mit kommerziellem Hintergrund zum einen nicht zugeben, dass Actionscript 1 aus heutiger Sicht Schrott war, und zum anderen zweifeln die Manager vermutlich noch daran, ob sie mit Open Source Strategien tatsächlich überleben können. Ich würde mal sagen: Ja. Die Integration in Eclipse ist schon mal der erste Schritt auf dem richtigen Weg. Und wie man eine Community aufbaut, das lernt Adobe bestimmt auch noch in den nächsten Jahren )

Quick and Dirty

Kleiner Tipp: Wenn Flash AS1 nach einem Ordner sucht, der in einer lokalen Variable festgelegt werden muss, und das aus Flex nicht klappt, kann man noch immer den Ordner in undefined umbenennen. Ist zwar quick and dirty, aber in meinem Fall hat das geklappt.

So viele Bildeffekte auf so wenig Fläche?

Gibt es sie wirklich oder ist sie nur ein Phantom? Eigentlich wollte ich ja etwas über die Pflege von Thymian erfahren, weil meine neue Pflanze schon wieder die Blätter hängen lässt. Da stoße ich über Google sofort auf einen Artikel auf www.kraeuterallerlei.de. Der Text ist sehr hilfreich; ich werde es mal mit weniger Wasser versuchen. Als Webdesigner sehe ich mir die Seite an und fühle mich von Anfang an wohl. Da fällt mir auf, dass die Fotos ziemlich gut sind. Auch die Seitenleisten mit abgerundeten Ecken gefallen mir. Zudem einige Elemente wie der angewinkelte Kopfteil der Seite mit besonders aufwändigen Verläufen und Schatteneffekten, die meines Wissens technisch nicht so einfach umzusetzen sind, wie ich es Dagmar, der Autorin des hilfreichen Textes, zutrauen würde. “Dagmar? Wer ist das?”, frage ich mich.

Ich sehe dort nach, wo auf deutschen Internetseiten immer die Wahrheit steht: im Impressum. Ich bin verwundert, dass auch dieses wie die Blog-Beiträge in der Ich-Form geschrieben ist. Doch kein Wort von Dagmar, nur ein paar nette, persönliche Sätze über die Fanzination an Kräutern und “ich bin gespannt auf ihre Anregungen blabla”. Dazu eine Email-Adresse bei einem der großen Gratis-Email-Providern aus Deutschland. Wieder verblüffend! Dagmar muss tatsächlich eine der frühen Bloggerinnen gewesen sein: info-blog lautet der Email-Name. Darunter dann das tatsächliche Impressum. Es handelt sich um eine reine Grafik. “Aha!”, denke ich, “Da will sich jemand vor Suchmaschinen tarnen.” Für die Seite verantwortlich ist die GmbH Searchmetrics aus Berlin. Eine kurze Webrecherche ergibt, dass Searchmetrics eine Beteiligungsgesellschaft der Holtzbrinck Gruppe im Bereich Suchmaschinenoptimierung (SEO) ist.

Mein Gehirn stellt letzte vergebliche Versuche an, den Widerspruch aufzuklären: Vielleicht ist Dagmar eine Bloggerin, die wie andere bei WordPress eben bei einer SEO-Firma ihren Blog eröffnet hat. Das kann auch nicht sein, denn selbst bei WordPress sind die Leute für ihre Texte verantwortlich. Oder Dagmar wurde einfach von einer SEO-Firma abgezockt. Ich durchstöbere die ganze Seite. Es gibt einige Kommentare: “Liebe Ute, erst einmal gute Besserung…” Ute? Hallooo?!? Das hilft nicht weiter. Ah, ein Archiv! Es geht bis 2007 zurück, das Jahr in dem SEOmetrie gegründet wurde, das später in Searchmetrics umfirmierte. Der erste Beitrag ist von “Kräuterhexe”. Ja was denn jetzt? Einmal nennt sie sich Dagmar, und dann Kräuterhexe. Und die Beiträge sind mit Quellen versehen, alles Fachbücher.

Ich beschließe aufzugeben und in meiner Realität an die Verschwörung zu glauben. Die als Blog aufgemachte Internetseite www.kraeuterallerlei.de sieht zwar irgendwie authentisch für jemanden aus der Kräuterszene aus, doch so kompliziert inszeniert sich kein Privatmensch, auch kein Internetfreak. Oder doch?

Javascript Frameworks sind eine feine Erfindung. Nachdem ich im Frühjahr 2008 eher zufällig über Mootools stolperte, war ich darüber bereits sehr erfreut.Kurz darauf erfuhr ich von jQuery, was mich über die anderen Frameworks hinaus mit seiner Einfachheit voll und ganz überzeugt hat.

Trotz mittelmäßiger Programmierkenntnisse finde ich es enorm wichtig, dass der Mensch schnell versteht, was er da tut. Wenn da steht $(‘a’).addClass(‘link’), dann weiß ich direkt was passiert. Ebenso einfach die Möglichkeit, per $(‘#ajaxcontent’).load(‘seite.html’) dynamisch Inhalte zu laden. Zudem drängt jQuery sich einem nicht so auf, da man mit dem jQuery.noConflict() im Normalfall nicht mehr mit anderen JS-Frameworks kollidiert. Zudem ist das Framework so leicht wie kaum ein anderes.

Und nun die Tools, von der Dateigröße ebenso winzig mit ihren gut 18kB zusätzlich zu jQuery selbst. So kann sich der Designer auf das Wesentliche konzentrieren, statt sich bei Browsertests die Nächte um die Ohren zu schlagen.

Link zur Webseite: http://flowplayer.org/tools/

Web 2.0 Grafiken mit Inkscape

Gestern habe ich nochmal ein kleines Inkscape-Tutorial abgearbeitet und dabei festgestellt, dass man definitiv Webgrafiken im Stil von Web 2.0 einfacher mit Inkscape erstellen kann.

Was man in Photoshop mit Effekten und Verläufen schafft, das sollte eigentlich alles mit Inkscape ebenso kein Problem sein. Dazu hat Inkscape noch immer einen großen Vorteil, denn es ist ein Vektorpgrogramm, und eine moderne Vorlage für ein Weblayout benötigt insbesondere Icons und stilisierte Grafiken. Endgültige Pixelbilder können durch Platzhalter ersetzt werden, da diese sowieso später mit dem CMS flexibel ausgetauscht werden sollten.
Ansonsten schwärme ich eigentlich nicht so sehr für die DTP-Programme unter Linux, das sie fast alle noch zahlreiche Bugs beinhalten, aber GIMP und Inkscape können sich inzwischen wirklich sehen lassen.