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.
IDA - Der Blick über den Tellerrand!
Zweimal im Jahr findet an der Fachhochschule Kiel die sogenannte "Interdisziplinäre Woche" statt. Mit diesem zusätzlichen Angebot der Hochschule wird den Studenten ermöglicht, über die Grenzen des eigenen Studienfaches hinaus, Wissen zu erwerben. Studierende der Fachhochschule Kiel erhalten auf diese Weise die Möglichkeit, neben fundiertem Fachwissen auch andere Kompetenzen zu entwickeln.
Bei der kommenden "Interdisziplinären Woche" bietet networkteam in Kooperation mit dem Fachbereich Medien einen Workshop mit dem Titel "Modernes Webdesign im Zeitalter von Tablets und Smartphones" an.
Der Workshop
Ziel des Workshops ist es, den Studierenden einen Einblick in aktuelle Frontend-Technologien, wie etwa HTML5, CSS3 & Media Queries oder Icons Sprites zu geben. Am Beispiel des Twitter Frontend-Frameworks "Bootstrap" soll im Laufe der zweitägigen Veranstaltung eine einfache responsive Webseite entstehen, die weitestgehend auf Grafiken verzichtet und stattdessen CSS3 Features nutzt. Dabei beleuchten wir neben Techniken des Responsive Webdesigns auch die Erstellung von crossbrowser-kompatiblem CSS3 (graceful degradation) mit Hilfe von SASS und Compass.
Als Prüfungsleistung sollen die Studenten ihre frisch gebackene Webseite präsentieren und auf diese Weise das Gelernte reflektieren.
Die Idee dahinter
networkteam konnte mittlerweile 3 Absolventen des Fachbereichs Medien der Fachhochschule Kiel für sich als Mitarbeiter gewinnen. Mit diesem Hintergrund und dem Wissen, dass die technologische Entwicklung im Web mit Pegasus-Stiefeln voranschreitet, sehen wir es als gesellschaftliche Aufgabe, unser KnowHow an die nächste Generation weiterzugeben. Uns ist durchaus bewusst, dass es sehr schwierig für eine Hochschule ist, Wissen in diesem Bereich immer brandaktuell zu halten und entsprechend zu vermitteln. Hier sind Kooperationen mit Unternehmen aus der Praxis nötig. Und genau aus diesem Grund engagieren wir uns in diesem Bereich.
Dass wir mit der Idee des Workshops und dem Thema nicht ganz daneben liegen, zeigen auch die Anmeldezahlen. Unser Workshop ist ausgebucht (!) und es stehen bereits 4 Studierende auf der Warteliste.
Natürlich machen wir das nicht ganz uneigennützig. Schließlich erhoffen wir uns mit potentiellen Nachwuchskräften ins Gespräch zu kommen und sie für das Web zu begeistern. In diesem Sinne ist dieses Engagement ein Geben und Nehmen.
Weitere Informationen zu unserem Workshop
Die Referenten
- Severin Glöckle
- Lars Lehners
Wann und wo?
- Mo, 13.05.2013 von 12:30 - 16:30 Uhr, C13-K.02 (Mac Lab.)
- Di, 14.05.2013 von 12:30 - 16:30 Uhr, C13-K.02 (Mac Lab.)
Offizielle Webseite der Interdisziplinären Woche
https://ida.fh-kiel.de/idw/?p=WkJHPTw3JzMYEVsbDgYcRxpPC3kp
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
