TYPO3-Webseite Relaunch mit AJAX-Navigation

Das Navigationkonzept wurde hingegen neu erstellt und arbeitet ohne Seitenreloads, da die Übergänge der einzelnen Seiten teilweise mit Animationseffekten realisiert wurden. Die Inhalte der neu angeklickten Seiten werden per AJAX nachgeladen.

Als Javascript-Framework kamen die mootools zum Einsatz. Da dieses auch bei vielen TYPO3-Extension verwendet wird bietet sich diese Bibliothek an. Neben den AJAX-Calls sind die mootools auch für die Animationseffekte eingesetzt worden.

Für werkraum und auch für mich persönlich gewinnen Webseiten mit AJAX-Navigation immer mehr an Bedeutung. Allerdings benötigt man eine gewisse Erfahrung, um diese Technologie sinnvoll einzusetzen und den eventuellen Nebeneffekten Herr zu werden.

Mit SWFAddress können relativ einfach Deeplinks und eine funktionierende Browserhistorie realisiert werden. Für werkraum war es bei diesem Projekt eine besondere Herausforderung, die Animationseffekte während des Ladeprozesses beim Seitenübergang zu kontrollieren, damit diese weder Flackern noch "Herumspringen" von Inhalten verursachen. Dies konnte durch Verketten der einzelnen Lade- bzw. Animationsprozesse erzielt werden.

Die Inhalte, welche per AJAX nachgeladen werden natürlich auch von TYPO3 gerendert. Über get-Parameter wird gesteuert, dass keine unnötigen Informationen oder Headerdaten bei AJAX-Anfragen versendet werden.

Im Mittelpunkt der Webpräsenz steht eine Bildergalerie, die über eine animierte Thumbnailnavigation mit 2 Ebenen verfügt. Diese wurde mit dem neuen Extension-Framework von TYPO3 "extbase" und der Templateengine "fluid" implementiert.

Am Ende steht nun eine Seite mit einer schlichten Bildergalerie, die durch ein pfiffiges Navigationskonzept Spaß macht.