Dies ist der zweite Teil des Making of www.3spin.de. Hier geht es zum ersten Teil.

Technische Umsetzung
Neben der Gestaltung lag ein besonderer Schwerpunkt auf der aufwendigen Entwicklung, die auch Demonstration für die technischen Möglichkeiten sein sollte. So sollten Browserintegration, Suchmaschinen-Optimierung und einfache Pflege der Inhalte möglich sein.

www.3spin.de

Flash und Papervision
Die Umsetzung der Website erfolgte in Adobe Flash auf Basis von ActionScript 3. Dabei wird die 3D-Engine Papervision zum Rendern der 3D-Welt zur Laufzeit verwendet. Besondere Herausforderung war die Abbildung des Spins im dreidimensionalen Raum, weil dieser aufgrund seiner Größe im Vektorformat geladen wird. Dazu setzen wir die mittlererweile in Papervision integrierte Bibliothek Vectorvision ein, die wir für diesen Zweck erweitert haben.

Der Spin als Bezierkurve
Die Flugbahn durch die Welt entspricht dem Verlauf des Spins und auch die Inhalte der Seite sind senkrecht auf dem Spin platziert. Um dies zu ermöglichen, musste die Form des Spins in eine Art berechenbares Format gebracht werden: Ein geschlossenes Band aus einzelnen Bezierkurven. Mittels mathematischer Formeln können aus ihnen die erforderlichen Daten für Animation und Platzierung der Inhalte berechnet werden. Die Ermittlung der Bezierkurve erfolgte über einen eigens dafür entwickelten Bezier-Editor.

Bezierkurve im Editor

spinOne
Auch dieses Projekt basiert auf unserem ActionScript 3 Framework spinOne, das wir im Laufe der Entwicklunsphase nochmals stark erweitert haben. Zu den bisherigen Funktionen (Navigations-, Inhalts-, Kommando-Controller, Ladesystem, …) kamen u.a. Module für Lokalisierung, Deep-Linking, CMS-Anbindung, Debugging, Scaffolding und Wiedergabe von Sound hinzu. Damit können wir in zukünftigen Projekten noch stärker Entwicklungszeit für unsere Kunden sparen und die Stabilität der Produkte erhöhen

Browser-Integration und Deep-Linking
Ein weiteres Merkmal der Website ist die Integration in die Browser-Navigation und -Chronik (History). Dadurch kann der Benutzer trotz der Verwendung von Flash die Browser-Buttons (Vor/Zurück) zum Navigieren verwenden und die aufgerufenen Seiten erscheinen in der Chronik. Weiterhin passt sich auch die Adresszeile an, so dass diese kopiert, gespeichert oder weitergeschickt werden kann und der Benutzer beim Aufrufen der Adresse wieder genau an die Stelle kommt, auf der er war. Möglich wird dies durch die Verbindung von spinOne mit SWFAddress.

Content-Management-System (CMS)
Zur einfachen Pflege der Website verwenden wir das Content-Management-System Redaxo, dass mittels eigener Erweiterung die Inhalte für Flash bereitstellt. Dort bereitet die CMS-Erweiterung von spinOne (die auch mit anderen CMS kommunizieren kann) die Daten zur Weiterverarbeitung auf. Mehrsprachigkeit und beliebige Typen von Inhalten können damit schnell umgesetzt und anschließend leicht gepflegt werden. Erwähnenswert ist, dass auch die Platzierung der Seiten auf dem Spin dynamisch erfolgt und dabei noch berücksichtigt, dass die Kreuzungen frei bleiben. Wird eine neue Seite im CMS angelegt, platzieren sich die Seiten automatisch neu, ohne dass man Koordinaten für die Position angeben muss.

Redaxo CMS

Suchmaschinen-Optimierung (SEO)
Um optimale Suchergebnisse zu erzielen, ist eine Indexierung der einzelnen Seiten und deren Adresse durch die Suchmaschinen wichtig. Eine Flash-Website wird allerdings von Suchmaschinen nur als eine Seite wahrgenommen und auch die Inhalte, die innerhalb des Flashs geladen werden, bleiben den Suchmaschinen verborgen. Zu diesem Zweck lassen wir das Content-Management-System die gesamte Website nochmals in einer statischen HTML-Version mit einzelnen Unterseiten generieren, die von den Suchmaschinen indexiert werden kann und auch Screen-Readern den Zugang ermöglicht. Gelangt ein Benutzer nun über eine Suchmaschine auf eine der statischen HTML-Unterseiten, wird automatisch der Flash-Film mit der entsprechenden Seite geladen. Mit dieser Technik ermöglichen wir Suchmaschinen-Optimierung auch bei Flash-Websites.

Suchmaschinen-Optimierung und Deep-Linking

Dieser Artikel sollte einen kurzen Einblick in die Erstellung von www.3spin.de geben. Über Ideen, Kommentare und Anregungen freuen wir uns natürlich sehr.

Jetzt heißt es nur noch Sound an und ab geht der Flug: www.3spin.de