Zur Zeit wird gefiltert nach:TYPO3
Filter zurücksetzen
Die neue Team Struktur für Neos und Flow
Vor zwei Wochen fand in Karlsruhe ein TYPO3 Neos Code Sprint statt, bei welchem nicht nur an den offenen Features gearbeitet wurde, sondern auch zu verschiedenen Themen Diskussionen stattfanden.
Eines dieser Diskussions-Themen beschäftigte sich mit der Team-Struktur, denn auch das TYPO3 CMS Team hat erst kürzlich eine Überarbeitung seiner Team-Struktur bekannt gegeben. Dies war im Falle des CMS dringend nötig, denn seit den Anfängen des CMS gab es keine Anpassungen an neue Bedingungen wie eine gewachsene Team-Größe oder verstärkte Unterteilung in Unterprojekte für spezifische Teile des TYPO3 Kerns.
Für TYPO3 Neos ist es vor allem wichtig, dass das Team einfacher wachsen kann. Für Interessenten sollte es möglichst einfach sein an Neos oder Flow mitarbeiten zu können und gleichermaßen sollte jeder Beitrag auch als solcher anerkannt werden. Die gesamte Team-Struktur baut hierbei auf gegenseitiges Vertrauen auf, denn jeder aktiv Mitwirkende erhält einige Privilegien (z.B. Merge-Rechte im Git-Repostitory und Zugriff auf die Projekt-Webseite). Weiterhin wird es keine technischen Hürden geben, die sich beispielsweise nach einem gewissen Aktivitäts-Level oder der Art der Beiträge richten. Dadurch kann das Team auf diverse kleinere Unterrollen verzichten und sich auf zwei verschiedene Hauptrollen Contributor und Active Contributor beschränken.
Neben der Mitarbeit an Neos selbst und dem Framework gibt es in einem solchen Team allerdings auch Aufgaben, die in jedem Fall erledigt werden müssen und für die es klare Zuständigkeiten geben sollte. Aus diesem Grund hat das Team beschlossen neben den folgenden Haupt-Rollen auch ein paar weitere Gruppen und Rollen zu definieren.
Contributor
Alles startet mit dem ersten Beitrag (Contribution) zu TYPO3 Neos oder Flow: Jeder Interessierte, der Neos oder Flow mit der eigenen Arbeitsleistung voranbringen möchte, ist eingeladen zu helfen. Wobei dies nicht zwangsweise in Form von Code geschehen muss: neben der Programmierung gibt es viele andere Bereiche, wie etwa Design, die offiziellen Webseiten und nicht zuletzt die Dokumentation der Systeme.
Active Contributor
Active Contributor ist gewissermaßen der neue Name für die bisherigen Core Team Member. Damit bilden alle Active Contributor zusammen das Neos Team.
Leistet ein Contributor regelmäßig qualitativ hochwertige Beiträge, beschließen die bisher aktiven Mitwirkenden gemeinsam, dass der Contributor eingeladen wird ein Active Contributor zu werden. Mit dieser Rolle erhält man zum Beispiel volle Merge-Rechte für das Git Repository und Zugriff auf die Infrastruktur für die Flow und Neos Entwicklung. Es wird aber auch erwartet, dass man konstant mitarbeitet und sich an aufgestellte Regeln, wie den Code of Conduct des TYPO3-Projekts und die Werte des Neos Teams hält.
Neben diesen beiden generellen Rollen gibt es zudem ein paar besondere Gruppen und Rollen innerhalb des Teams:
Coordination Group
Diese Gruppe ist für die Leitung und Koordination wichtiger Aufgaben zuständig und besteht wiederum aus einigen Active Contributors, die festgelegte Zuständigkeiten erhalten. Zunächst wurden die folgenden Rollen definiert, die sich aber im Laufe der Zeit ändern können:
- Project Leader: Leitet das Projekt und die Vision und hat den Blick auf das große Ganze
- Quality Manager: Stellt sicher, dass die Qualitäts-Standards des Projektes eingehalten werden und stellt hierzu ein Team von „Quality Guardian“ zusammen
- Community Contact: Ist der Ansprechpartner für Anwender und vorhandene oder neue Contributor
- Public Relations Manager: Ist der Kontakt-Punkt zum Marketing Team und der Presse , stellt Neuigkeiten bereit und betreut die Produkt-Webseiten
- Treasurer: Ist der sogenannte Budget-Owner (verwaltet also das vorhandene Budget) und kümmert sich um Fund-Raising für das Projekt
Quality Guardian
Diese Gruppe setzt sich aus einigen Active Contributorn zusammen, deren Aufgabe darin besteht Konsistenz und Stabilität des Projektes zu gewährleisten. Enthält eine Anpassung beispielsweise nicht-abwärtskompatible Änderungen oder neue Konfigurations-Optionen ist es Aufgabe dieser Gruppe zu klären, für welchen Release diese Änderungen passend sind.
Release Manager
Der Release Manager organisiert jegliche Arbeit bezogen auf einen speziellen Release eines Produkts und kümmert sich auch um die darauf bezogene Kommunikation. Den jeweiligen Release Manager bestimmen die Active Contributor gemeinsam mit dem Quality Manager.
Package Maintainer
Sowohl Neos als auch Flow bestehen aus vielen verschiedenen Paketen und neben dem jeweiligen Kern des System gibt es für jedes Paket einen Zuständigen der sich leitend um die Weiterentwicklung dieses Paketes kümmert. Wer erstmals etwas zu einem dieser Pakete beisteuern möchte sollte sich mit dem jeweiligen Package Maintainer absprechen.
Bislang habe ich viel darüber geschrieben, dass diese Team Struktur für Neos und Flow gleichermaßen gilt. Bis auf Weiteres wird dies auch der Fall sein. Bislang gab es ein Team für beide Systeme und um es nicht unnötig kompliziert zu machen, wird dies bis zum ersten stabilen Release von Neos auch so bleiben. Alle Rollen und Gruppen gelten momentan also gleichermaßen für Neos und Flow.
Inspiring Flow 2013
- Quelle: Flickr: Pankaj Lele
- Die Inspiring Flow Torte
Vor zwei Wochen fand in Kolbermoor (bei Rosenheim, München) die Inspiring Flow Konferenz (2012 noch F3X) statt und hat zum zweiten Mal Interessierte rund um das PHP Framework TYPO3 Flow in den Süden Deutschlands gelockt.
Die größten Änderungen der Konferenz vom letzten Jahr zu 2013 bestanden in der Internationalisierung der Konferenz und der Verlängerung auf zwei Tage. Aufgrund der großen Nachfrage wurden die Talks dieses Jahr nicht mehr auf Deutsch sondern auf Englisch gehalten und konnten so ein internationales Publikum ansprechen. Dass das Interesse an Flow groß ist und das Know-How von 2012 zu 2013 einen großen Sprung gemacht hat, konnte man vor allem daran merken, dass trotz der doppelten Anzahl an Talks alle Slots mit unterschiedlichen Themen rund um das Framework gefüllt werden konnten.
Als TYPO3 Flow Agentur waren natürlich auch wir wieder mit von der Partie und Christopher hat nicht nur selber einen Talk zu dem Thema Single Sign-On gehalten sondern damit auch den zweiten Platz beim Voting belegt. Platz eins ging an den Gast und Keynote-Speaker des zweiten Tages: Stefan Priebsch. Durchaus provokant hat er sich mit dem Thema MVC im Web beschäftigt und die Zuhörer nicht nur durch eine spontane Schauspiel-Einlage einiger Teilnehmer gefesselt.
Neben Talks über ergänzende Techniken zu dem Framework (NoSQL mit CouchDB, Ember.js oder TypoScript und EEL) gab es in diesem Jahr auch einige Praxis-bezogene Talks in welchen Flow im Live-Einsatz gezeigt wurde. Dazu zählten zum Beispiel das beeindruckende Projekt medialib.tv bei dem Dominique Feyer ein Video on Demand Portal basierend auf Flow und TYPO3 Neos entwickelt hat, Talks zum Thema Deployment (z.B. mit TYPO3 Surf, Git und Jenkins) oder die Integration von Solr. Christophers Talk lief unter dem Titel „A fully integrated single sign-on solution with TYPO3 Flow“ und gab einen Einblick in die Single Sign-On Lösung die wir in Zusammenarbeit mit Robert Lemke für einen Kunden entwickelt haben.
Auch das Rahmenprogramm der Konferenz konnte, wie bereits im letzten Jahr, überzeugen. Das hervorragende Catering während der Konferenz und das Flying Buffet des Social Events machten das Event zusammen mit der „traditionellen“ Flow-Torte zu einer rundum gelungenen Veranstaltung.
Wir werden im nächsten Jahr auf jeden Fall wieder dabei sein und freuen uns auf noch mehr neue Erfahrungen und Erfahrungsaustausch nach einem weiteren Jahr Flow Entwicklung.
Alle Talks wurden übrigens aufgezeichnet und werden nach dem finalen Schnitt zusammen mit Bildern und Slides der Konferenz auf der Inspiring Flow Webseite veröffentlicht.
Mehrspaltige, responsive Formulare mit powermail 2, Fluid und Twitter Bootstrap
In den letzten Jahren ist die Nutzung des mobilen Internets in Deutschland von 13% im Jahre 2008 rasant auf über 50% im letzten Jahr angestiegen (vgl. Accenture). Dabei geht es schon lange nicht mehr nur um das Chatten mit Freunden oder Nutzen von Apps, sondern immer mehr auch darum, reguläre Webseiten über das Smartphone oder Tablett aufzurufen (vgl. Vivaki). Umso wichtiger ist es, Nutzern mobiler Geräte ein optimales Erlebnis zu bieten.
Die Anpassung einer Webseite an verschiedene Auflösungen mittels CSS (das sogenannte "responsive Webdesign") ist ein Schritt, Inhalte für unterschiedlichste Geräte bestmöglich darzustellen. Zahlreiche CSS-Frameworks (beispielsweise Twitter Bootstrap oder Foundation von Zurb) vereinfachen diesen Prozess, sind jedoch in Verbindung mit von Content-Management-Systemen generierten Formularen häufig nur schwer zu vereinbaren.
Der folgende Artikel zeigt eine Möglichkeit, mehrspaltige und responsive Formulare - generiert mit der TYPO3-Extension powermail - auf Basis von Twitter Bootstrap umzusetzen.
Voraussetzungen: Das ist nötig
Neben dem CSS-Framework Twitter Bootstrap (inklusive der responsiven Version) wird die TYPO3-Extension "powermail" ab Version 2.0 benötigt. Zudem wird Zugriff auf die von powermail genutzen Fluid-Templates vorausgesetzt.
Das Fundament: Erstellung der Grundstruktur mit Fluid
Zunächst soll ein zweispaltiges Layout basierend auf dem Grid-System von Twitter Bootstrap umgesetzt werden:
- Dieses Kontaktformular ist zweispaltig und responsiv mit Twitter Bootstrap umgesetzt.
Um unabhängig von der Größe umgebender Spalten und Containern arbeiten zu können, wird anstatt der standardmäßigen Klasse für einzelne Reihen '.row' - die mit festen, pixelpasierten Breiten arbeitet - die flexiblere Klasse '.row-fluid' genutzt.
Um eine solche "Reihe" um alle Elemente eines Formulars zu rendern, kann das Fluid-Template des powermail-Formulars etwa wie folgt angepasst werden:
Templates/Forms/Form.html:
Eine '.row-fluid' bietet grundsätzlich Platz für 12 Spalten (ausgezeichnet durch die Klassen '.span1' bis '.span12'). Für ein zweispaltiges Layout sind folglich neben einer '.row-fluid' mindestens zwei Elemente der Klasse '.span6' nötig. Da powermail standardmäßig bereits ein <div> um die einzelnen Formularelemente generiert, muss diesem lediglich noch die entsprechende span-Klasse ('.span6') mitgegeben werden:
Partials/Forms/Input.html:
Problem: Zu viele Spalten in einer Reihe
Auf diese Weise wird das Formular bereits responsiv gerendert: Bei größeren Auflösungen (über 768px Breite) werden die '.span6' zweispaltig nebeneinander, für Smartphones und kleinere Tabletts hingegen untereinander dargestellt.
Dies funktioniert jedoch nur für die ersten beiden Elemente der '.row-fluid'. Alle weiteren Elemente werden einspaltig gerendert und haben einen zu großen Abstand auf der linken Seite:
Um dieses Problem zu lösen gibt es grundsätzlich zwei Möglichkeiten:
- Im TYPO3-Backend werden die jeweils ersten Input-Elemente einer neuen Spalte mit einer speziellen Klasse ausgezeichnet, die das Element auf 'margin-left: 0px;' setzt. Dies kann über die TSconfig Konfiguration von powermail erreicht werden.
- Beim Rendern der Elemente in Fluid wird mitgezählt und für jeweils zwei Elemente eine neue '.row-fluid' erstellt.
Die zweite Lösung erzeugt zwar mehr Markup (da mehrere '.row-fluid' erzeugt werden), erfordert jedoch keinen zusätzlichen Aufwand des Nutzers beim Erstellen und Bearbeiten von Formularen.
Um beim Rendern der Formularelemente mitzuzählen und entsprechend neue '.row-fluid'-Elemente zu erzeugen, muss das oben gezeigte Fluid-Template wie folgt angepasst werden:
Templates/Forms/Form.html
Durch den 'iteration'-Parameter einer <f:for>-Schleife ist das Abzählen von jeweils zwei Elementen leicht: <f:if condition="{iteration.isOdd}"> liefert true für das jeweils erste Element, <f:if condition="{iteration.isEven}"> für das jeweils zweite Element einer Zeile. Wichtig dabei ist, nicht nur auf gerade und ungerade Zahlen zu prüfen, sondern auch sicherzustellen, dass nach dem letzten Formularelement immer die '.row-fluid' geschlossen wird. Dies ist mittels iteration.isLast ebenfalls leicht umzusetzen.
Hinweis: Da iteration.isEven und iteration.isOdd auf iteration.cycle (startet Zählung bei 1) und nicht auf iteration.index (startet Zählung bei 0) zugreifen, liefert iteration.isOdd und nicht iteration.isEven das erste Element!
Bis ins Detail: Letzte Schönheitskorrekturen
Damit die einzelnen <input>-Elemente immer die volle Breite ihrer Spalte einnehmen, können sie mit der Bootstrap-Klasse '.input-block-level' ausgezeichnet werden. Dies ist in den Fluid-Templates der einzelnen Elemente (unter Partials/Forms/ ) möglich.
Um bei ungerader Anzahl von <input>-Elementen (oder bei einzelnen Elementen, wie einer Checkbox für die AGB) das letzte Element mit voller Breite darzustellen, hilft die Verknüpfung der beiden CSS-Pseudo-Klassen :first-child und :last-child:
Nicht nur für zweispaltige Formulare
In diesem Beispiel wurde lediglich auf die Erstellung eines zweispaltigen Layouts eingegangen. Der Prozess lässt sich jedoch leicht auf andere Spaltenzahlen übertragen: Im Fluid-Template des Formulars muss lediglich mitgezählt werden und nach der gewünschten Anzahl an Elementen eine neue '.row-fluid' geöffnet werden (hier kann <f:cycle> hilfreich werden).
Die einzelnen Elemente werden dann nicht mit '.span6', sondern mit '.span4' (für dreispaltige Layouts) bzw. '.span3' (für vierspaltige Layouts) ausgezeichnet.
Modern und responsiv mit TYPO3
Insgesamt lassen sich dank der weitreichenden Konfigurationsmöglichkeiten von TYPO3 - gerade in Verbindung mit Fluid - moderne und ansprechende Formulare erstellen, die für den Nutzer der Webseite dennoch komfortabel zu verwalten sind.
Ein Relaunch mit viel Dynamik
- Die neue Startseite
Ein emotionales Design und technische Highlights begeistern ab sofort den Benutzer der Jaguar Land Rover House Kuntz TYPO3-Website und repräsentieren das Unternehmen. Interaktive Elemente wie eine Historien-Zeitleiste, die alle historischen Aufnahmen und die schönsten Geschichten zusammenfasst, sowie eine Bühne basierend auf JavaScript präsentieren die beiden Marken Jaguar und Land Rover des Autohaus Kuntz.
Die Eingangsseite des Jaguar Land Rover House Kuntz verschafft dem Benutzer einen ersten Eindruck über das Markenspektrum des Unternehmens. Die Bühne dient hierbei als erste Präsentationsstelle, hier werden Highlights und neue Modelle der beiden Marken sofort ersichtlich und verführen aufgrund der emotionalen Bilder mehr über die jeweiligen Themen erfahren zu wollen.
Jeder Hauptbereich bündelt jeweils alle Informationen und verweist in die Tiefe. So konnte die Navigationsstruktur für den Benutzer einfach gehalten werden und alle relevanten Informationen sind auf einem Blick verfügbar.
Um die Website des Autohauses aktuell zu halten und um über Events und Modell-Neuheiten zu informieren, verwenden wir die Extbase Extension news. Diese ermöglicht die flexible Darstellung einzelner Artikel durch verschieden definierte Layouts auf Basis von Fluid-Templates. Die Auswahl von Kategorien wie z.B. Aktuelles, Events & die beiden Marken Jaguar / Land Rover erleichtern zudem die Positionierung der Einträge an verschiedenen Stellen der Website. So werden immer die passenden Artikel für jeden Markenbereich angezeigt.
Mit Hilfe der Extension BZD Staff Directory ermöglichen wir die zentrale Pflege aller Mitarbeiter und verknüpfen diese an verschiedensten Positionen der Website. Auf diese Weise wird auf jeder Webseite ein individueller Ansprechpartner dargestellt. Das sorgt nicht nur beim Benutzer für einen gut strukturierten Unternehmensauftritt, sondern vereinfacht auch die Pflege für den Kunden.
- Jaguar Markenbereich
- Land Rover Markenbereich
- Mitarbeiter Darstellung
- News & Events
Mit dem Relaunch der Website konnten wir mit Hilfe des TYPO3 CMS alle Wünsche des Kunden erfüllen und ermöglichen diesem zudem die eigenständige Pflege der Webseite.
Besuchen auch Sie die neue Website www.jaguar-landrover-kuntz.de und lassen Sie sich durch das Unternehmen führen.
Relaunch für TGI Finanzpartner
- Startseite
Mit www.tgi-partner.de hat dieses Jahr unser langjähriger Bestandskunde TGI Finanzpartner eine neue Webseite erhalten.
Die vorherige, statische Lösung mit kleinem Redaktionssystem zur einfachen News-Pflege wurde durch eine neue Webseite auf Basis von TYPO3 abgelöst. Neben den offensichtlichen Neuerungen, wie einem modernen Design und den überarbeiteten Texten, bietet sich mit der Nutzung von TYPO3 als Content-Management-System für TGI jetzt die Möglichkeit neben News auch alle weiteren Inhalte der Webseite eigenständig zu aktualisieren.
Durch den Aufbau flexibler Inhaltselemente haben die Redakteure die Möglichkeit auch speziell dargestellte Inhalte einfach und eigenständig zu pflegen und zu erweitern. Die TYPO3 Extension BZD Staff Directory ermöglicht zudem das einfache Erstellen und Aktualisieren der Daten zu den einzelnen Team-Mitgliedern. Durch die Zuweisung der Kontakte auf die verschiedenen Geschäftsfeldern werden dem Besucher in jedem Bereich der Webseite die jeweils passenden Ansprechpartner angezeigt.
Auf Basis der Extbase-Extension news haben wir eine flexible Lösung zur Darstellung aller weiteren Datensatz-basierten Inhalte geschaffen. Abhängig von der redaktionell gepflegten Kategorie wird ein Datensatz als News, Referenz oder Termin dargestellt. Hierbei können je nach Darstellungs-Position und Kategorie unterschiedliche Layouts ausgewählt werden, so dass zum Beispiel in den Seitenleisten der verschiedenen Themen-Gebiete jeweils passende News in der passenden Optik dargestellt werden können. Durch die flexiblen Möglichkeiten mit Fluid-Templates und anderen Erweiterungen kann mit der Extension news in vielen Fällen auf eine aufwändige Programmierung einer eigenen Extension verzichtet werden.
Externe Angebote, wie die Online-Finanzierungsanfrage oder verschiedene Baufinanzierungs-Rechner, werden durch die Darstellung innerhalb einer Lightbox optisch in die Webseite integriert und halten im Vergleich zu einer normalen externen Verlinkung zudem den Benutzer auf der eigenen Webseite.
Insgesamt konnten wir mit dem Relaunch auf TYPO3 viele Wünsche des Kunden umsetzen und zum Beispiel durch die Darstellung von Kunden-Meinungen die Transparenz verbessern. In Zukunft können durch die eigenständige Pflege viele Änderungen durch den Kunden selbst vorgenommen werden und es kann viel besser auf das aktuelle Branchen-Geschehen eingegangen werden.
- Detail-Seite eines News-Artikels
- Unterseite Baufinanzierung
- Referenzen-Übersicht
