Der Interaktionsdesigner 2021
In der neusten TYPO3 Version 4.4 wurde auch der Backendskin überarbeitet. Grund genug die neuste Version auf dem Testserver zu installieren und auszuprobieren. Passend zum Wetter präsentiert sich das neue Backend ganz in grau. 
Und weil Bilder mehr als tausend Worte sagen, besteht dieser Beitrag nur noch aus ein paar Screenshots.
Nach dem wir in der Ape Unit GmbH zwei große Projekte mit CakePHP aufgebaut haben und ich größtenteils für die Views zuständig war, gibt es eine Reihe von Grundlagen auf die ich in einem Cake Projekt nicht mehr verzichten möchte. Welche das sind, wie sie eingebaut und verwendet werden, ist das Thema dieses Artikels.
Neben der Gründung einer neuen Firma die sich um Webentwicklungsthemen und Medienproduktion kümmert (Die Ape Unit GmbH Berlin) hatte ich eine Menge mit WordPress zu tun. Ein guter Grund hier mal wieder etwas Leben in den Blog zu bringen. Es geht natürlich um den heißen Scheiß: Ajax. Mit aktiviertem JavaScript soll bei einem Klick auf einen Eintrag der Eintrag dynamisch nachgeladen werden anstatt auf die Einzelansicht zu verlinken. Mit TYPO3 und Typoscript baut man sich dafür ein weiteres Page Objekt und passt die Ausgabe an, darüber hatte ich schon berichtet. Bei WordPress gibt es aber kein Typoscript. Mein erster Gedanke war ein alternatives Template per URL Parameter zu laden in dem nur die Inhalte angezeigt werden. Die Anleitungen waren allerdings allesamt nicht besonders ergiebig. Der nächste Ansatz war den gesamten Inhalt abzufragen und per jQuery nur den entsprechenden Container mit den Inhalten auszugeben. Das finde ich aber irgendwie unelegant. Und nach einmal drüber schlafen kam dann der rettende und sehr simple Einfall.
Seit gestern steht die neue Version meiner Extension Kiwi Teaser im Repository bereit. Neben einem Icon für die Teaser Inhaltselemente ist auch ein kleiner Fehler in den generierten Pfaden zu den Ressourcen behoben. Die wirklich interessante, und diesen Post rechtfertigende Neuerung ist die komplette Konfigurationsmöglichkeit über Typoscript. Dadurch ist es möglich einen Teaserport direkt per Typoscript einzubinden und zum Beispiel einem Marker zuzuweisen. Außerdem kann man mit dieser praktischen Extension jede beliebige Tabelle auslesen!
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.
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.
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!
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.
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.
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.
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.
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:
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.
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.
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…
Denkst Du darüber nach zu gründen? Ein Startup, eine Familie oder beides? Dann ist mein neuer Podcast genau das richtige für Dich! Gründerväter Podcast.
Sie finden in diesem Blog 148 Einträge zu effektiver und moderner Webentwicklung. Viel Spaß beim stöbern. Nutzen Sie Google um die Inhalte schnell zu durchsuchen.
Der Interaktionsdesigner ist ein Blog von Paul Lunow und beschäftigt sich zur Zeit primär mit spannenden Web Technologien, Zeitmanagement und effektiver Projektsteuerung.
Folgen Sie mir auf Twitter.
Sprechen Sie mich an, wenn Sie an Notion interessiert sind.
Schreiben Sie mir! Ich spreche immer gern über spannende Ideen und weltbewegende Vorhaben. Kontakt.
Auf der Suche nach einem verlässlichen Partner in Sachen Webentwicklung und TYPO3?
Matthaa, TYPO3 Agentur Nürnberg und Umgebung.
© 2021 Ein Blog von Paul Lunow
Denkst Du darüber nach zu gründen? Ein Startup, eine Familie oder beides? Dann ist mein neuer Podcast genau das richtige für Dich! Gründerväter Podcast.
Schreiben Sie mir! Ich spreche immer gern über spannende Ideen und weltbewegende Vorhaben. Kontakt.
Sie finden in diesem Blog 148 Einträge zu effektiver und moderner Webentwicklung. Viel Spaß beim stöbern. Nutzen Sie Google um die Inhalte schnell zu durchsuchen.
Der Interaktionsdesigner ist ein Blog von Paul Lunow und beschäftigt sich zur Zeit primär mit spannenden Web Technologien, Zeitmanagement und effektiver Projektsteuerung.
Folgen Sie mir auf Twitter.
Sprechen Sie mich an, wenn Sie an Notion interessiert sind.
Auf der Suche nach einem verlässlichen Partner in Sachen Webentwicklung und TYPO3?
Matthaa, TYPO3 Agentur Nürnberg und Umgebung.
© 2021 Ein Blog von Paul Lunow