Bewertung: 5 / 5

Stern aktivStern aktivStern aktivStern aktivStern aktiv
 

Für die Anfahrt der Kunden oder Besucher zur angegeben Adresse, von mehreren Standorten, wurde eine Animation gewünscht. Mit Einsteigen in das Auto bzw. die Bahn und anschließender Fahrt zum Zielpunkt, am Ende noch ein paar Meter zu Fuss.

 

Für die Umsetzung wurde zwingend vorgeschrieben, dass kein Flash verwendet werden soll und dass die Anzeige auch auf Smartphones funktionieren muss.

Umsetzung in Joomla

Wie eine solche Animation in Joomla eingebunden werden kann, wenn sie denn vorhanden ist, hängt ggf. von weiteren Anforderungen ab.

Als Komponente, hat man volle Freiheit bei der Gestaltung der übrigen Seite, als Modul kann man jede beliebige Modulposition verwenden und als Plugin, kann man die Animation direkt im normalen Artikel einbinden.

Bei der Umsetzung habe ich mich für eine Komponente entschieden, weil so alle "Routen" über die Komponente erfasst werden können. Zusätzlich dazu noch ein kleines Plugin und ein Modul, welche beide auf die Daten in der Komponente zugreifen.

Für die Darstellung verschiedener Versionen für die Anfahrt, z.B. mehrere Filialen, kann die Erfassung mehrere Zielorte erfolgen, bei der Menüzuordnung der Komponente muss jeweils ein Zielort (ID) ausgewählt werden.

Umsetzung der Animation

Die Animation selbst wird in SVG umgesetzt, alle modernen Browser unterstützen SVG, der Internet Explorer ab Version 9. Für Handys und Smartphones wurde ein eigener etwas abgespeckter SVG-Sandard entwickelt: Tiny SVG.

Auf CPU-intensive Filter sollte ohnehin verzichtet werden, weil die Umsetzung von SVG-Filtern in den unterschiedlichen Browsern nicht einheitlich erfolgt.

Als Fallback ist Raphael.js für den Internet Explorer vorgesehen. Der Internet Explorer 9 unterstützt zwar SVG, aber nicht die Animation mit SMIL, der SVG eigenen Animation.

D.h. für den Internet Explorer wird bis einschl. Version 8 ein Fallback für SVG und ab 9 ein Fallback für SMIL benötigt. Beides kann über Raphael.js erreicht werden, deshalb fiel die Wahl auf diese JavaScript-Bibliothek.

Kompfortabler wäre ggf. die Umsetzung mit WebSVG. WebSVG verwendet jedoch als Fallback Flash und ist im konkreten Fall nicht in die engere Wahl gekommen.