Der Interaktionsdesigner 2020

Februar 2010

TYPO3 Extension Kiwi Accordion Version 1.6

Nach einigen Mails und Forenbeiträgen hatte ich schon Bauchschmerzen und fühlte mich ungut, denn meine kleine, feine Extension Kiwi Accordion setzte die “Rahmen”-Eigenschaft von Inhaltselementen außer kraft. Aber damit ist jetzt Schluss! Die neue Version legt ihre Container unabhängig von den Rahmen um den Inhalt. Zeitnah im Repository verfügbar. Auf meiner privaten Seite gibt es eine Demonstration und im folgenden Eintrag ein paar technische Erklärungen.

Dezember 2009

Auf Inhalte aufmerksam machen: Kiwi Teaser

Darf ich vorstellen? Meine neuste Extension, der Kiwi Teaser. Mit dessen Hilfe präsentiert man ganz einfach vorhandene Inhalte auf der einen Seite. Dazu legt man eine Teaseranzeige an und bestimmt wieviele Teaser sie anzeigen soll. Die Teaser sind entweder Teaserdatensätze (mit Titel, Inhalt, Bild und Link), ganze Seiten oder einzelne Inhaltselemente. Fertig! Auf der Startseite kann der Redakteur jetzt ganz genau bestimmen, auf welche Inhalte die Benutzer aufmerksam gemacht werden sollen und in welcher Reihenfolge. Die Extension gibts im TYPO3 Repository oder auf GitHub - live im Einsatz bisher auf unserer Firmenpräsenz.

Dezember 2009

Mehrere Domains in einem TYPO3 Projekt verwalten

Viele kleinen Projekte brauchen keine eigene TYPO3 Installation. Eine einfache Seite, zum Beispiel mit News, ein paar persönlichen Seiten und einem Kontaktformular legt man nach diesem Tutorial an -ohne Installtion, neue Datenbank und noch einem Eintrag in der Liste für die Bugfix Updates. Aber inklusive RealURL! Dieses Tutorial bezieht sich auf TYPO3 Version 4.3, aber ich vermute es funktioniert in allen neueren Versionen. Los gehts!

Dezember 2009

TYPO3 Klickvergrößern durch eine jQuery Lightbox ersetzen

Wenn jQuery auf einer Seite eingebunden ist (z.B. durch die coole Extension Kiwi Slider) dann beißt sich das Javascriptframework mit anderen wie MooTools oder Prototype. Insgesamt sollte man bevorzugt ein Framework einsetzen, wenn man unbedingt beide braucht, dann lohnt sich die Suche nach dem NoConflict Mode von jQuery. Wenn aber das unbedingt nur von einer Lightbox kommt, dann sollte man sich kurz hinsetzen, einen geeigneten Klon aussuchen (hier ist die große Lightbox Matrix) und die Klickvergrößerung von TYPO3 damit ersetzen. Das ist schnell, effektiv und in diesem Beitrag erklärt.

November 2009

Ajax in Webapplikationen mit CakePHP und jQuery

Jeder Webentwickler weiß, dass kein Benutzer mehr auf das Neuladen einer Seite warten will. Vorallem nicht, wenn es in Webapplikationen darum geht Elemente hinzuzufügen, zu bearbeiten oder zu entfernen. Zum Beispiel in einem Tool welches umfangreiche Exportmöglichkeiten besitzt und gerade von einer jungen, dynamischen Agentur entwickelt wird. In dem Programm legt man ein Exportscript an und kann diesem verschiedene Exportdateien zuweisen die beim durchlaufen dynamisch erstellt werden. Diese einfache 1:n Beziehung ist mit Cake schnell gebacken, mit ein paar Zeilen erweitert und läuft. Allerdings verteilt auf mehreren Seiten. Zum Glück gibt uns Cake einfache Möglichkeiten an die Hand um das zu verhindern. In diesem Artikel will ich aufschreiben wie man praktisch jedes Cake Projekt zusammen mit dem Lieblings-Javascriptframework jQuery in eine coole Web 2.0 Anwendung verwandeln kann.

Oktober 2009

Einen Mini-Blog mit TYPO3 realisieren

Der Kiwi Service (meine Firma) hat mit großer Freude sein neustes Projekt realisert: Der Internetauftritt der Lauscherlounge erstrahlt in schönem neuen Design und bietet mit TYPO3 im Hintergrund den gewohnten Komfort, die Trauer aber vorallem die Freude und Effizienz! Eine von vielen schönen Kleinigkeiten ist Olis Notziblog auf der rechten Seite. Es handelt sich um ein Widget in dem immer mal wieder, unkompliziert neue Inhalte eingetragen werden sollen. Das Besondere ist, dass ein Inhalt aus einem Bild (der Handschrift) und der Abschrift besteht. Sprich Text mit Bild. Das kommt dem geschulten TYPO3 Ohr natürlich bekannt vor. Und genauso werden die Daten vorgehalten. In Contentelementen. Dieses Tutorial beschreibt die Einrichtung, Verwaltung und Ausgabe eines Miniblogs, der einfach zu pflegen ist und Informationen ohne große Funktionen zur Verfügung stellt.

September 2009

TYPO3 Seiten und tt_news Kategorien synchron halten

Heute mal wieder ein richtig schönes Thema: Es geht um Seiten in einem TYPO3 Projekt und Nachrichten, die zu diesen Seiten gehören. Die Anforderung besteht darin, beim anlegen oder verändern von Seiten tt_news Kategorien auf dem gleichen Stand zu halten. Legt der Redakteur eine neue Seite Namens “Zimmerschlacht” an, könnte er anschließend in die Listenansicht wechseln und eine neue News Kategorie anlegen. Aber mach das mal einem DAR (analog zu DAU) klar. Und warum den Mund fusselig reden, wenn das auch automatisch geht?! Es gibt in TYPO3 eine Möglichkeit mit einem Hook in das Speichern von Datensätzen einzugreifen. Da kann man sich dann austoben. Es funktioniert auch mit DAM Kategorien und jeder anderen vorstellbaren Datenbankanforderung.

September 2009

entireHtml 2.0

Ich habe schon mal darüber bereichtet. Die Funktion $(“.test”).html() liefert nicht das komplette HTML, sondern nur das innerHTML. Mit meinem vorhergehenden Post kriegt man schon sehr einfach das komplette HTML eines Elements, und genau das ist das Problem: eines Elements. Mit ein paar Zeilen mehr im Plugin läufts auch mit beliebig vielen Objekten. So funktionierts:

September 2009

Select Boxes dynamisch verändern

Die praktische Auswahl von Daten über eine Selectbox ist immer wieder ein Thema. Vorallem bei den ganzen neuen Beta-Ajax-Web-Applications kommen sie einem immer wieder unter. Das Problem **mit den Dingern, ist die dynamische Veränderung. Ein einfaches $(“select”).find(“option:first”).remove(); funktioniert zwar zum entfernen, aber das hinzufügen von Options ist schon schwieriger (-böser Blick zum Internet Explorer-). Und wenn die Selectbox sich dann an einer weiteren orientieren soll, dann wirds haarig. **Die Lösung ist das Klonen und verstecken der “originalen” Box. Aus dem Klon kann man dann die überflüssigen Auswahlmöglichkeiten entfernen. Und jetzt folgt der Artikel wie man das effizient anstellen könnte. Natürlich Hand in Hand mit jQuery.

August 2009

Ein sauberes Testsystem mit Git

Versionisierung ist in aller Munde. Und am besten schmeckt Git. Ich hatte schon mal ein paar Worte über den Einstieg hier im Blog verloren, allerdings ist diese Softwareversionisierung schwierig in den Arbeitsalltag zu integrieren, wenn man nicht dazu gezwungen wird. Super wichtig bleibt es natürlich auch, wenn man es nicht benutzt, deshalb möchte ich hier eine Idee einbringen, umsich selbst zu zwingen damit zu arbeiten und sogar noch etwas davon zu haben! Es geht um ein leeres Projekt (HTML, CSS, JavaScript) in dem neue Sachen schnell, lokal getestet werden können. Bisher hatte ich einfach eine index.html die ich alle paar Wochen gelöscht und neugeschrieben habe. Uncool! Es geht viel besser, bequemer und zukunftsweisender mit Hilfe von Git! Und dieser Artikel zeigt eine Möglichkeit.

August 2009

CakePHP HABTM mit automatischer Vervollständigung

Wenn man für ein beliebiges Model Posts speichern und eingeben kann, vielleicht weil man dieser Anleitung gefolgt ist, dann ist das schon ein schöner Fortschritt. Allerdings passieren immer wieder Tippfehler, und ähnlich klingende Begriffe finden sich in der Tagcloud. Da hilft nur eins: während der Eingabe dem Benutzer direkt passende Tags vorschlagen. Eine automatische Vervollständigung wie beim Mailen in den großen sozialen Netzwerken oder beim suchen bei Google. Zum Glück haben sehr schlaue Leute schon diverse Plugins erstellt, welche einen JSON String oder eine simple Textliste verarbeiten können. Zum Beispiel Autobox2. Gleich mal die Demo angucken, runterladen und dann ins eigene Projekt integrieren. So funktionierts…

Juli 2009

Nette Erweiterung für jedes Menü mit jQuery

Es gibt kaum noch ein Menü, welches den Nutzer nicht mit einem Mouseover-Status über seine aktuelle Position informiert. Soweit so gut. Meistens sieht es so aus: Der Nutzer klickt auf den Menüpunkt, der Mouseover-Status verschwindet, die Seite verschwindet, die Seite baut sich wieder auf und der eben geklickte Menüpunkt ist dauerhaft hervorgehoben. Ganz normal. Aber: Mit ein bisschen jQuery lässt sich der Mouseover-Status schon bei einem Klick festsetzen. Das sieht gut aus und wirkt fast wie ein dynamisches nachladen der Seite. Ansehen kann man sich diesen Effekt zum Beispiel hier im Hauptmenü oder auf der Seite von Isabel von Roon. Wie der Effekt eingebaut wird, was find(), filter() und siblings() bedeutet und wie man den aktiven Menüpunkt hervorhebt wird in diesem Artikel besprochen.

Juli 2009

Viele Elemente dynamisch aktualisieren

Ein aktuelles Projekt interagiert auf sehr starke Art und Weise mit dem Benutzer. Das bedeutet neben einer anpassbaren Oberfläche wird der Benutzer ständig über den Status diverser Objekte auf dem laufenden gehalten. Dabei können sich verschiedene Objekte untereinander beeinflussen. jQuery bietet ja ein tolles Ajaxkonstrukt an mit dem es kein Problem ist Daten vom Server zu holen. Aber auf die Dauer wird es doch etwas nervig immer wieder zu tippen. Und weil “objektorientiertes Javascript” und selber entwickeln so viel Spaß macht, habe ich mir eine alternative Lösung einfallen lassen: Im Projekt werden an geeigneter Stelle Elemente erzeugt, die alle benötigten Informationen enthalten. Diese werden in einem Updater registriert, welcher sich um die regelmäßige Abfrage kümmert. Das war die Theorie und jetzt kommt die Praxis.

Juli 2009

Ein TYPO3 Menü mit PHP erweitern

Wie wahrscheinlich alle schon gelesen haben, kann meine neuste Extension dasTYPO3 Hauptmenü um beliebige Punkte erweitern. Nötig wurde das, weil Datensätze der neuen Extension über das Hauptmenü erreichbar sein sollen. Das ist doch mal wieder eine richtig schöne Aufgabe die Dank der Genialität von Typoscript auch einfach erledigt werden kann. Und so funktionierts.

Juni 2009

PDFs erstellen mit TYPO3

Aus irgendeinem Grund möchten so viele Kunden PDFs zum Download auf ihren Seiten anbieten. Vermutlich haben sie keinen Mac. Als Fullservice Agentur scheut man sich natürlich nicht vor der Arbeit, sondern stürzt sich voller Freude hinein. Mit der Extension pdf_generator2 wird das zum Kinderspiel! Und das mit CSS Support, inklusive Hintergrundbildern! Dieser Beitrag zeigt wie.