Referenzen Frontend Typo3

Transkript

1 Referenzen Typo3 und Frontend Stand: Mai 2015 Diese Referenzliste beschreibt die eigene Webseite der Internetagentur Irma Berscheid-Kimeridze. Die Webseite ist seit Mai 2015 online. Sie ist mit Typo3 erstellt. Besonderes Merkmal sind mehrere moderne Technologien der Frontend-Entwicklung, die mit Typo3-Extensions und Templates umgesetzt sind. Für die Darstellung einzelner Referenzen kommt eine selber erstellte Extension zum Einsatz. - Startseite Stand: Mai 2015 Startseite der Webseite Logo mit überlagertem teilweise transparentem Text als durchgehendes Designelement der gesamten Webseite. Navigation über Flyout-Menu. Suchfunktion unterhalb der Navigation. Bilder im Inhalt in Farbe und im Format 200 x 200 px. Die Farbwelt der Webseite ist auf Bilder abgestimmt, die wir im Frühjahr 2015 in unserem Garten aufgenommen haben. Auf Basis dieser Farben sind auch sämtliche Verläufe der Seite aufgebaut.

2 - Startseite Navigation in Webseite mit Accordion-Menus Texte und Link in Formatierung eines Buttons verweisen auf nachfolgende Inhalte. Bilder standardisiert auf 100 x 100 px in Schwarzweiß. Link im Accordion in Formatierung eines Buttons mit Hover-Effekt.

3 - Boxen mit Bildern und Hovereffekt als Teaser für besondere Inhalte Drei Menüpunkte werden am Fuß jeder Seite besonders hervorgehoben. Die Boxen sind in Typo3 im Template als Partials abgelegt und werden über das standardisierte Layout eingebunden.

4 - Boxen in jeder Seite als Teaser für besondere Inhalte Beim Überfahren der Boxen mit einer Maus ändert sich der Inhalt: Ein Text weist auf andere Inhalte der Webseite. Der Link ist als Button mit Hover-Effekt ausgeführt. Die Farbe des aktiven Inhaltes weist eine leichte Transparenz auf und lässt den Hintergrund durchscheinen.

5 - Boxen in responsivem Design Die Teaserboxen sind in responsivem Design ausgeführt. Die Breite der Boxen wird in drei Stufen angepasst. Bei einer Auflösung für Smartphones werden die Boxen umgebrochen und mit einem anderen Format dargestellt.

6 - Boxen in responsivem Design Der Hovereffekt für die Teaserboxen im responsiven Design ist im Partial so angelegt, dass die Textelement auch bei der kleinsten Auflösung korrekt angezeigt werden.

7 - Navigation Die Navigation findet sich im Kopfbereich der Webseite und wird in der jeder Seite angezeigt. Das Menü wird von einer Extension in Typo3 erzeugt. Weitergehende Hierarchien sind durch einen Pfeil gekennzeichnet. Je nach Auflösung des Bildschirms wird die Navigation mit angepassten Breiten und Schrifttypen aufgebaut. Die Menüpunkte sind mit Farbverläufen in CSS3 hinterlegt. Das gesamte Menü ist über <li>-tags aufgebaut. Die Sichtbarkeit aktiver Element wird über einen Hover- Effekt gesteuert. Das Menü ist komplett über CSS3 gesteuert und kommt ohne jquery und JavaScript aus. Die Verläufe sind animiert.

8 - Menü Stand: Mai 2015 Das Menü stellt die Hierarchie der Webseite bis in die dritte Ebene das. Die Anzeige der einzelnen Menüpunkte erfolgt über einen Hover-Effekt. Entsprechend der Schaltung eines Menüs als aktiv und seiner Ebene erfolgt eine farbliche Hinterlegung und eine Anpassung der Schrifttypen.

9 - Accordions Stand: Mai 2015 Die Navigation innerhalb der Webseite ist über Accordion-Menüs möglich. Ein kurzer Text, ein Bild 100 x 100 px und ein Link in Formatierung eines Buttons verweisen auf die folgende Seite. Der Link ist mit einem animierten Hover-Effekt versehen. Für die Generierung der Accordions kommt eine Typo3-Extension mit jquery zum Einsatz. Das Design der Accordions ist mit Hilfe eines View- Helpers von jquery an die Farbwelt der Webseite angepasst.

10 - Suchfunktion In jeder Seite der Webseite ist im Kopfbereich eine Suchfunktion eingebaut. Diese erlaubt eine Volltextsuche auf der gesamten Webseite. Der Button der Funktion ist mit einem Hover-Effekt ausgestattet. Als Suche kommt die Extension ke_search zum Einsatz. Das Formular für die Einbindung in jeder Seite ist als Partial in das Typo3-Template der Webseite eingebunden.

11 - Ergebnisse der Suchfunktion Stand: Mai 2015 Die Suchergebnisse werden auf einer eigenen Seite dargestellt. Das Design des Formulars und der Ergebnisliste ist im Template und im Style Sheet der Extension angepasst. Die Suchergebnisse können mit Hilfe von Filtern angepasst werden. Die Extension ke_search bietet gegenüber anderen Modulen mehrere Vorteile. So ist die Indexierung der Suche sehr schnell, PDF-Dateien werden angezeigt, die Konfiguration auf eigenes Design ist recht schnell möglich, die Suche kann zudem durch Filter facettiert werden.

12 - Referenzen Die Referenzen der Internetagentur Irma Berscheid-Kimeridze werden mit Hilfe einer eigenen Typo- 3-Extension dargestellt. Ein Slider bietet die Möglichkeit, sich durch das Menü zu navigieren. Zu jedem Punkt gibt es ein Bild (Screenshot) und einen erklärenden Text. Falls vorhanden wird ein Link in Form eines Links dargestellt. Die Pflege aller Daten zu den Referenzen geschieht über das Backend der Extension.

13 - Referenzen Wenn der Besucher mit dem Mauszeiger auf die Voransicht eines Bilder in einer Referenz geht, zoomt dieses Bild auf das volle Format. Der Effekt ist über CSS3 erzeugt und animiert.