Blogthemen filtern:

Unsere Blogthemen

Aufgabe: Ausgabe von Daten in verschiedenen Views (Fluid Template / JSON) unter Verwendung der selben Action-Methode.

Beispiel: Nehmen wir einmal an, wir haben eine Liste von Artikeln. Jeder Artikel beinhaltet neben Titel und Beschreibung auch ein Bild, welches als Thumbnail in einer bestimmten Größe ausgegeben werden soll. Die Darstellung soll sowohl in HTML (Fluid TemplateView) als auch in JSON (Flow JsonView) erfolgen.

Für die Darstellung des Fluid TemplateView geht man wie gewohnt vor. Innerhalb der Action-Methode werden Variablen definiert und an das Template weitergegeben. Im Template erfolgt dann die Formatierung mittels HTML. Das Rendering der Thumbnails in der passenden Größe kann über den ImageViewHelper des TYPO3.Media Package erreicht werden.

Für die Darstellung des JSON gibt es zwei Herangehensweisen: Entweder der JsonView wird innerhalb der Action-Methode konfiguriert (Flow JsonView) oder man verwendet einen CustomView und definiert dort wie das JSON aussehen soll. 

Der Nachteil bei der Verwendung des Flow JsonView ist, dass View-spezifische Aufgaben im Controller verbleiben und dieser dadurch schnell unübersichtlich wird. 
In unserem Beispiel werden z.B. Thumbnails mit einer bestimmten Größe aus den im Artikel hinterlegten Bildern erstellt und ihre Url an den JsonView übergeben. Dies ist eigentlich eine Aufgabe, die vom View erledigt werden sollte.

Die Action-Methoden sowie die beiden Views unter Verwendung des Flow JsonView sehen folgendermaßen aus (siehe dazu auch den Abschnitt zu Json View in der Flow Dokumentation):

28. August 2013

Unsere Jubiläumsfeier hat bei herrlichem Sonnenschein mit einem Empfang in der Cocktail-Bar "Trafo" für unsere Kunden der letzten 15 Jahre gestartet und ging abends nahtlos in die Party mit Freunden und Partnern der TYPO3- und Agentur-Welt über.

Nach ausführlichen Vorbereitungen in den letzten Wochen konnte unsere Feier mit gezielten kleinen Besonderheiten punkten. Über unsere eigens erstellte Gästeliste basierend auf dem PHP Framework TYPO3 Flow haben wir jeden Gast erfasst. Die App zum Check-In der Gäste lief auf einem Surface Tablet über welches wir auch direkt Fotos der Gäste machen konnten. Die Fotos wurden innerhalb einer vor Ort angezeigten Webseite direkt nach Aktualisierung eines Gastes angezeigt.

12. August 2013

Es geht voran!

Nachdem Severin die letzten Mockups unserer neuen Webseite finalisiert hatte, konnte ich endlich mit dem Design beginnen. Doch wie sollte die neue Webseite aussehen? Wir waren uns einig, dass wir ein reduziertes, klares Design brauchen, das modern wirkt und den Content unterstützt, anstatt ihn durch Effekte in den Hintergrund zu drängen. Schnell fiel der Begriff "Flat Design", doch was zeichnet Flat Design eigentlich aus?

Flat Design bedeutet die Reduktion auf das Wesentliche, d.h. keine Farbverläufe, keine Schlagschatten, keine Texturen, keine 3D-Effekte. Im Gegenzug jedoch klare Konturen, vollflächige Farben und verstärkter Einsatz von Typografie als Gestaltungsmittel.

Microsoft hat es vorgemacht und mit der Modern UI (Metro-Design) ein neues Designkonzept entwickelt, dass sich deutlich vom "Skeuomorphism Design" von Apple unterscheidet und einfach den visuellen Nerv der Zeit getroffen hat. 

Aber auch aus technischer Sicht hat das Flat Design Vorteile. Dadurch, dass auf Effekte nahezu vollständig verzichtet wird, können zahlreiche Grafiken mittels CSS3 realisiert werden, wodurch es schlichtweg ressourcenschonender ist. Hinsichtlich leistungsschwächerer Prozessoren in Smartphones und schlechten Datenverbindungen ein Punkt, der nicht außer Acht zu lassen ist.

Aber wieder zurück zum Design. Nach einigen Diskussionen sind wir zu dem Ergebnis gekommen, dass wir das Design nicht gänzlich Flat gestalten, sondern es mit dezenten Kanten versehen, um dem Design somit das gewisse Etwas zu verleihen. 

Eine Herausforderung sind unsere vier Firmenfarben, da diese durch vollflächigen Einsatz in verschiedenen Browsergrößen stets anders wirken, sie aber dennoch mit dem Rest der Webseite harmonieren sollen.

Da wir in der Konzeption mit der mobilen Ansicht begonnen hatten ("Mobile-First"), habe ich auch beim Design zuerst die Mobilvariante gestaltet, bevor ich mich schrittweise der Desktopvariante näherte. Für mich war es spannend zu sehen, welche Möglichkeiten einem offen stehen, wenn man in der nächst größeren Version plötzlich mehr Raum zur Verfügung hat. Auf einmal ist es möglich zusätzliche Elemente wie z.B. Bilder und längere Texte zu verwenden oder das Design einfach luftiger zu gestalten.

Eine weitere Herausforderung war der "One-Page"-Charakter der einzelnen Seiten. Um viel Content auf einer einzigen Seite sinnvoll darzustellen, haben wir diesen in einzelne Sektionen eingeteilt, welche auch visuell voneinander getrennt sein sollten, was mit einer einzigen Farbe und nur einem Grauton nicht immer einfach war.

Doch jetzt ist es geschafft und ich bin mit dem Design soweit fertig, dass es mit Umsetzung losgehen kann.

Es geht voran!

Startseite in 320 Pixel Breite

Startseite in 480 Pixel Breite

Startseite in 768 Pixel Breite

Startseite in 1024 Pixel Breite

7. August 2013

Gridelements auf www.enkey.de

Individuelle Inhaltselemente in TYPO3 sind ein wichtiges Feature zur vereinfachten Pflege und eine einheitliche Eingabe von projektspezifischen Inhalten (z.B. Teaser-Boxen, mehrspaltige Elemente oder Slider) im CMS.

Neben TemplaVoilà bietet auch die Extension Gridelements die Möglichkeit zur Implementierung individueller Inhaltselemente mit Verschachtelung. Die Konfiguration der verfügbaren Elemente mit Angaben zur Aufteilung wird dabei meistens in der Datenbank vorgenommen. Häufig gibt es allerdings die Anforderung, dass jegliche Konfigurations- und Template-Informationen versionierbar abgelegt werden sollen. Dies hat den Vorteil, dass Änderungen an der Konfiguration kontrolliert werden können und eine Übernahme in verschiedene Installationen reibungslos vorgenommen werden können.

Neben dem Datensatz zur Konfiguration eines Gridelements kommt die passende TypoScript-Konfiguration hinzu, welche aber direkt in versionierbare Dateien ausgelagert werden kann (statische TypoScript-Einbindung). Über diesen Weg arbeitet man allerdings immer noch mit Datensätzen, die in der Datenbank abgelegt werden. Dies bedeutet insbesondere bei komplexeren Deployment-Strukturen zeitaufwändige Anpassungen, die bei jeder Installation (z.B. Testing, Staging, Production und bei allen Entwicklungssystemen) durchgeführt werden müssen. Außerdem sind die Datensätze nicht versionierbar und unbeabsichtigte Änderungen können nur schwer nachvollzogen werden.

24. Juli 2013

Die "TYPO3 Developer Days" sind neben der TYPO3 Konferenz (T3CON) ein weiteres offizielles Event der TYPO3 Association. Während es sich bei der T3CON um eine klassische Konferenz handelt, entwickeln sich die DevDays Jahr für Jahr immer mehr in Richtung "Entwickler und Contributor Treffen", bei dem insbesondere die Weiterentwicklung von TYPO3, Flow und Neos im Vordergrund steht.

In diesem Jahr wurde ein weiterer Schritt in diese Richtung gegangen, sodass sich dieses Event mittlerweile sehr deutlich von der T3CON abgrenzen kann.

networkteam hat in diesem Jahr die so genannte Codingnight gesponsert und war gleich mit 5 Personen anwesend. 5 Personen, 5 verschiedene Erfahrungen, Interessen und Eindrücke und daraus resultierend 5 Erfahrungsberichte:

17. Juli 2013

Ob Smartphone, Tablet, oder irgendwo dazwischen: Beinahe wöchentlich erscheinen neue Geräte. Egal wie verschieden sie jedoch sind, alle diese Geräte können Webseiten darstellen. Auf diese Weise entstehen ständig neue Situationen und Kontexte, in denen eine Webseite genutzt wird. Ob in der U-Bahn, am Flughafen, im Café oder zu Hause auf der Couch - Ziel des Nutzers ist es immer, die Informationen einer Webseite so einfach und effizient wie möglich zu erhalten.

11. Juli 2013

Diese Woche starten in Hamburg die 8. TYPO3 Developer Days unter dem Motto „Getting together to make it happen!“.

Ab Donnerstag treffen sich Entwickler des TYPO3 Universums zu der jährlichen Entwickler-Veranstaltung. Das Ziel der Developer Days besteht darin die verschiedenen Systeme und Extensions weiter zu entwickeln und auch Neulingen einen Einstieg in die verschiedenen Teams zu geben. Bereits in den letzten Jahren haben sich die Developer-Days von einem vortragsbasierten Ansatz zu Workshops unter dem Motto „Getting things done“ entwickelt. In diesem Jahr wird es vorerst nur ein Tutorial geben, alle weiteren Time-Slots werden mit Workshops gefüllt.

2. Juli 2013

Mobile Endgeräte werden immer wichtiger in unserem Alltag. Große Monitore sind auf unseren Schreibtischen auch bereits die Norm. Dieser technologische Fortschritt hinterlässt seine Spuren bei der Entwicklung von Webseiten. Daher werden Webseiten nun immer häufiger "responsive" aufgebaut.

Responsive Webdesign stellt eine aktuelle Technik dar, wobei mit Hilfe von HTML5 und CSS3 Media-Queries eine Optimierung des Layouts und der Inhalte auf Desktop PC, Tablet und Smartphone vorgenommen werden kann.

24. Juni 2013

Um beispielsweise Überschriften etwas mehr Individualität zu geben, ist man immer auf der Suche nach neuen CSS-Styles, mit deren Hilfe man diese noch ansprechender gestalten kann. Über Schriftfarben mit Verläufen, Rahmen und Schatten kann man mit einem schönen Schriftschnitt schon Einiges anstellen. Was ist aber, wenn man diese gerne mit einer fotorealistischen Textur oder den Effekt einer ausgestanzten Schrift darstellen möchte?

19. Juni 2013

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.

31. Mai 2013