Im Gegensatz zu einer “gewöhnlichen” Karte wurde diese jedoch virtuell übermittelt. Der spielerische Aspekt, das Auspacken der Karte aus dem Umschlag und weitere kleinere Metaphern wurden in den dreidimensonalen Raum transferiert. Umgesetzt wurde die Karte mit Adobe Flash und der 3D Engine Papervision.

Hier ist die Karte noch sichtbar – viel Spass beim Anschauen.

Nach einem erfolgreichen Jahr 2009 bedankt sich 3spin bei seinen Kunden und Partnern und wünscht alles Gute für 2010!

Hierzu haben wir eine Postkarte mit einem so genannten “Marker” verschickt, mit welcher der Benutzer auf der Adresse blog.3spin.de/geschenk mittels Webcam einen virtuellen Weihnachtsbaum auf der Postkarte betrachten kann (Augmented Reality mit dem Flash Player). An den Adventssonntagen und an Heilig Abend gab es zusätzlich noch Kerzen und Geschenke.

Klingt kompliziert – ist aber ganz einfach – also am Besten einfach ausdrucken und testen:

2. Advendssonntag

3. Advendssontag

4. Advenssonntag

Heilig Abend

Bei dem Thema Diversity + Inclusion geht es darum, dass Mitarbeiter in verschiedenen Gebieten ihr Wissen erweitern und durch regelmäßiges Training ihren Horizont erweitern. Neben der Vermittlung von Sozial- und Problemlösungskompetenzen macht der
Diversity + Inclusion Trainer verständlich, wie die Vielfältigkeit der Mitarbeiter das Unternehmen voranbringen kann. Die Anwendung besteht dazu aus elf Spielen, die einfach pfleg- und erweiterbar sind und die dem Spieler zum Trainieren zur Verfügung stehen. Für Tests können einzelne Aufgaben der verschiedenen Spiele flexibel kombiniert werden.

Die erste Phase des Projekts wurde von uns durch die Umsetzung eines Prototyps unterstützt, während weitere Teile des Konzepts verfeinert wurden. Anschließend übernahmen wir die Umsetzung der finalen Anwendung. Diese besteht aus einem Frontend auf Basis von Adobe Flash und einem Backend, das mit PHP und dem Zend-Framework umgesetzt wurde. Die Umsetzung der Flash-Frontends erfolgte in purem ActionScript 3.0-Code, wobei auch hier das Framework spinOne für eine erhebliche Zeitersparnis bei verbesserter Performance sorgte.

Folgende weitere Features wurden umgesetzt:

• Mehrsprachigkeit: Deutsch/Englisch
• Pflege der Daten
• Benutzerregistrierung/-anmeldung
• Komplexe Statistikabfragen
• Performance-Optimierung
• DB Request-Caching

Dazu gehörte neben der Lokalisierung der Microsite für den Lanica Ypsilon (www.lancia-ypsilon.de) auch die Erstellung einiger Bannerformate für den Lancia Ypsilon und Lancia Delta.

Vielen Dank und gute Fahrt!

In diesem Rahmen übernahm 3spin die Erstellung einer Animation, die der Veranstaltung den passenden Abschluss geben sollte. Ganz nach dem Hochschul-Motto „Du bist h_da!“ formieren sich dabei Fotos der neuen Studenten zum Logo der Hochschule.

Da zwischen dem Schießen der Fotos und dem Abspielen der Animation aber nur 1,5 Stunden lagen, war Schnelligkeit gefragt: so waren mehrere PCs mit dem Skalieren der Fotos und Rendern in AfterEffects beschäftigt.

Ein sportliches Timing – doch alles hat geklappt.

Einen sonnigen Cafébesuch wünscht das 3spin-Team!

Das Drehen der Gebetsmühle führt dazu, “körperliche Aktivität und geistig-spirituelle Inhalte miteinander zu verknüpfen.” (Quelle: Wikipedia). In der multilingualen iPhone-Applikation wird der Nutzer zusätzlich mit einer Weisheit des Dalai-Lamas belohnt.

Die Einnahmen aus dem iTunes-Store werden an Artists for Dalai Lama gespendet.

Viel Spass beim Drehen!

Gebetsmühle im iTunes Store

]]> http://blog.3spin.de/2009/07/gebetsmuhle-fur-das-iphone/feed/ 0 http://blog.3spin.de/2009/07/making-of-www-3spin-de-teil-2/ http://blog.3spin.de/2009/07/making-of-www-3spin-de-teil-2/#comments Wed, 01 Jul 2009 18:02:21 +0000 admin http://blog.3spin.de/?p=615 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

Analyse
Zu Beginn des Projekts wurden klassische Wege gegangen – Zielgruppenanalyse, Szenarien und Marktpositionierung, um nur einige zu nennen – um die optimale Ansprache für unsere Kunden zu finden und die Ziele der Website zu definieren.

Ideen
Unser Anspruch war keine klassische Website zu entwickeln. 3spin ist innovativ und sucht das Neue. Gleichzeitig wollten wir Elemente des Corporate Designs aufgreifen, um die Identität von 3spin zu vermitteln. In der Ideenphase entstanden viele interessante Konzepte, vom Brettspiel bis zur dreidimensionalen Achterbahn.

Ideenfindung

Aufgrund der Ergebnisse der Analysephase haben wir uns für eine Weiterentwicklung der letzten Idee entschieden. Hierbei sollte der markante „Spin“ des Logos in eine dreidimensionale Welt gelegt werden, auf dem die Inhalte wie auf Werbeplakaten platziert werden. Der Benutzer kann die Website erkunden, indem er auf dem Spin zum jeweiligen Inhalt fliegt.

Finale Idee

Die Reduktion des Spins auf eine Ebene erleichtert dem Benutzer die Orientierung was den dreidimensionalen Raum fassbar macht und die Usability erhöht. Gleichzeitig wird der Spin in der Form hervorgehoben, wie er auf den Geschäftspapieren verwendet wird.

Design und Inhalte
Aus Basis des Konzepts wurden die Gestaltungselemente, das Navigations- und Interaktionskonzept erstellt. Die heterogene Zielgruppe erfordert einen besonderen Fokus auf Usability, weshalb z.B. redundante Navigationsmöglichkeiten (Hierarchische Navigation, Vorwärts-/Rückwärts-Buttons, Tastatureingabe) geschaffen wurden. Zur Unterstützung der visuellen Gestaltung wurden anschließend passende Sounds produziert und auch die inhaltlichen Elemente führen den Designgedanken fort.

Erstes Screenlayout

Hier geht’s zum zweiten Teil: Making of www.3spin.de, Teil 2

Das Thema der Projektarbeit ist “interactive Simulation” und wird in Gruppen zu je drei Studierenden bearbeitet. Unsere Aufgabe besteht in der wöchentlichen Betreuung der Studierenden mit Fokus auf dem technischen Konzept, sowie dessen Umsetzung, während Prof. Claudia Söller-Eckert des Fachbereich Media die Studenten in Konzept und Design unterstützt.