Panorama Archives » comspace.blog

7. Mai 2015

Baut uns doch mal eine Referenz City

Unser Kunde Xella Deutschland stellt massive Bausteine her, aus denen Häuser aller Art und Größe gebaut werden. (Hier haben wir schon einmal darüber berichtet, wie es in einem Xella-Werk zugeht.) Was liegt für ein solches Unternehmen also näher, als über 25 Referenz-Gebäude seiner Marken Ytong, Silka und Multipor zu einer Referenz City zusammen zu stellen, die sich aus den Referenz-Objekten im OpenText CMS generiert.

Damit war die Idee zur Referenz City geboren.

Zunächst einmal war eine sorgfältige Anforderungsanalyse notwendig. Bei Elementen, die nicht zum Standard-Baukasten einer Website gehören, ist das besonders wichtig. Wir mussten genau definieren, was bei welchem Klick passieren sollte und wie das alles aussehen musste. Ohne eine solche Analyse kann es schnell passieren, dass der Kunde bildlich gesprochen vom einem Pudel spricht, aber einen Dackel geliefert bekommt.

Basierend auf der Anforderungsanalyse konnte ich dann die Umsetzung konzipieren und abschätzen, wie lange ich dafür brauchen würde oder wo wir noch genauere Informationen benötigten.

WAGA, unser Kreativpartner in diesem Projekt, hat verschiedene Möglichkeiten der Darstellung konzipiert und wir haben deren Umsetzung evaluiert.

Technologische Herausforderungen einer Panorama-Anwendung

Die Schwierigkeit lag darin, dass es sich hier nicht um einen “normalen” Slider handelte, sondern eine individuell steuerbare Panorama-Anwendung. Für diesen speziellen Fall konnte ich daher kein passendes Plugin finden, dass genau den Anforderungen des Kunden entsprach. In Folge dessen musste ich selbst etwas programmieren, das in allen modernen Browsern funktioniert und nebenbei auch noch responsives Verhalten an den Tag legt.

Die “Referenz City” habe ich dann mit Hilfe von HTML, CSS und JavaScript (jQuery) umgesetzt. Die Nutzung der JavaScript-Bibiothek jQuery hat mir an manchen Stellen zwar geholfen, aber die Logik für die Benutzung konnte sie leider nicht liefern. Somit habe ich nahezu die komplette Panorama-Anwendung selbst programmiert.

Die Features der Referenz City im OpenText CMS

Momentan setzt sich die “Referenz City” aus 4 verschiedenen Bereichen zusammen: Es gibt den Einleitungs-/Intro-Bereich, die Referenzen der Marke Ytong, die Referenzen der Marke Silka und die Referenzen der Marke Multipor.

Unter der City befinden sich die verschiedenen Markennamen. Klickt man auf einen der Namen, fährt die Ansicht der City direkt zu dem Bereich in dem sich Häuser (Referenzen) dieser Marke befinden. Die Markennamen, zu denen dann Referenzen in der City sichtbar werden, werden dann farblich hervorgehoben (in diesem Fall grau).
Neben den Markennamen sieht der Nutzer auf größeren Geräten auch noch 2 Pfeil-Icons. Mit Hilfe der Pfeile kann der Besucher ebenfalls durch die City navigieren. Auf mobilen Geräten (z.B. iPhone) sind die Pfeile nicht sichtbar. Stattdessen kann der Nutzer hier über die Stadt wischen. Je nach Wischrichtung bewegt sich die Stadt entweder nach links oder rechts.
Desweiteren kann der Besucher der Website auch per Druck auf die Pfeiltasten seiner Tastatur (sofern vorhanden) die City nach links und rechts bewegen.
Sobald man dann ein Haus in der City gefunden hat, über das man mehr erfahren möchte, kann man mit dem Maus-Cursor übers Gebäude fahren und es erscheint ein gelber Kreis, in dem sich der Titel dieser Referenz befindet.
Klickt man dann auf den Kreis oder das Haus, öffnet sich ein Pop-Up auf der Seite. Dieses Pop-Up beinhaltet ein Foto der Referenz, einen Titel, einen kurzen Text über die Referenz und einen Button, über den man auf eine andere Seite weitergeleitet wird. Diese Seite enthält dann Detailinformationen zu der Referenz.
Öffnet man die “Referenz City” auf mobilen Geräten (z.B. iPhone) so kann man nicht mit einem Maus-Cursor über die Häuser fahren. Stattdessen erscheinen über allen Referenzen kleine gelbe Kreise mit Pfeil nach unten, die sich über dem Gebäude auf und ab bewegen. Sie zeigen dem Besucher der Seite so, dass dieser auf die Gebäude klicken/touchen kann um so mit der City zu interagieren.
Die Integration ins OpenText hat keine besondere Schwierigkeit dargestellt. Eigentlich hätten wir das auch mit jedem beliebigen anderen CMS realisieren können. Wir mussten nur pro Referenz die Pflege der Bilder und Texte im CMS ermöglichen.
Aus der Liste der Referenzen wird die “Referenz City” generiert. Kommt eine neue Referenz hinzu, muss lediglich die entsprechende Grafik im Panorama angepasst werden.

Welche Einsatzszenarien wären noch möglich?

Denkbare Alternativen wären

Präsentation einer Produktpalette
Darstellung einer Wertschöpfungskette
Präsentation einer Customer Journey
Firmenhistorie als Zeitstrahl
usw.

Generell lassen sich Daten aus Content Management Systemen heraus im Web auf viele verschiedene Arten darstellen. Ob als Diagramm, Tabelle, Weltkarte oder eben ein interaktives Panorama. Dabei ist die Darstellung der Informationen prinzipiell unabhängig vom CMS. Zu bedenken sind aber technische Grenzen wie die Browserkompatibilität oder auch das Verhältnis von Aufwand und Nutzen.

Hier kommen Sie direkt zur Referenz-City von Multipor.

29. Januar 2015

Über den Dächern von Bielefeld – im zweithöchsten Bürogebäude der Stadt für die 360 Grad App

Dienstliche Veranlassung
Der Tresor der Hauptstelle Bielefeld ist zu klein.

Dieser Satz begründet ein Stück weit, warum comspace seit Mai 2014 in den neuen Räumen an der Elsa-Brändström-Straße 2-4 sein zu Hause gefunden hat. Denn ohne diesen Satz aus dem Jahr 1971 gäbe es möglicherweise gar kein Gebäude gegenüber der IHK. In bester Innenstadtlage haben wir nun neben der größten und vielseitigsten Kantine und Kaffee-Auswahl auch einen der schönsten Aussichtspunkte der Stadt, denn die Elsa-Brändström-Str. 2-4 ist nach dem Telekomgebäude auch noch das zweithöchste Bürogebäude der Innenstadt.

Deswegen entstand von unserem Dach aus auch eines der Panoramen in der Bielefeld 360 Grad App die wir gemeinsam mit der Neuen Westfälischen gebaut haben.

Doch was hat das Ganze nun mit einem Tresor und Dienstlicher Veranlassung zu tun?

Der obenstehende Satz stammt aus einem Dokument aus dem Jahr 1971 von der Landeszentralbank NRW an das Bauordnungsamt Bielefeld und sollte 5 Jahre später zu diesem fertigen Gebäude hier führen.

Denn von 1975 an beherbergte das achtstöckige Gebäude die LZB und 10 Mietwohnungen. Die Stadt Bielefeld benötigte die alte Wirkungsstätte der LZB an der Stresemannstraße für den Straßenbau und so wurde das Grundstück kurzerhand getauscht. Übrigens erfuhren wir, dass die Bank ihre Arbeit am 16.10.1858 als Kommandite der Preußischen Bank in Bielefeld aufnahm. Vom 01.01.1876 bis Ende März 1948 war es eine Reichsbankstelle, anschließend dann die Landeszentralbank – zunächst Zweigstelle, ab Mitte 1957 Hauptstelle -, die seit 2002 als Filiale Bielefeld der Deutschen Bundesbank „firmiert“.

“Zwischen dem Planungsamt der Stadt Bielefeld und der Bauabteilung (Anm.: der LZB) bestand eine übereinstimmende Auffassung … ein Turmhaus zu errichten, das … einen städtebaulichen Akzent setzen möge”

Im Erdgeschoss und auf der ersten Etage befanden sich die Schalterräume sowie die Kantine. Das historische Archiv der Bundesbank hat uns ein paar wunderbare Bilder aus dem Jahr 1976 geschickt. Seit wir die Aufnahmen gesehen haben, haben wir hier noch ein bisschen mehr “James-Bond-Feeling” bei der Arbeit 🙂

Die folgenden Fotos wurden uns freundlicherweise vom Historischen Archiv der Bundesbank zur Verfügung gestellt:

Außensicht Elsa- Brändström-Straße (c) Historisches Archiv Deutsche Bundesbank

Unser 1. OG - heute Stellplatz der Besprechungs-Sauna (c) Historisches Archiv Deutsche Bundesbank — Unser 1. OG – heute Stellplatz der Besprechungs-Sauna (c) Historisches Archiv Deutsche Bundesbank

Die Features des Hauses

Nachdem wir die Räumlichkeiten von der Werbeagentur Peters übernommen haben, gestalteten wir nach unserem Geschmack um. Wäre der 70er Jahre Glamour der LZB erhalten gewesen, hätten wir vermutlich nur kurz die stylishen Leuchten aufpoliert und die Schaltertheke feucht aufgewischt, aber davon war bei unserem Einzug leider nichts mehr vorhanden.

ehemalige Schalter-Bereich (C) Historisches Archiv Deutsche Bundesbank — ehemalige Schalter-Bereich
(C) Historisches Archiv Deutsche Bundesbank

Daher gestalteten wir das Erdgeschoss hell und freundlich mit viel Holz und Licht. Einzig die weißen Marmorwände blieben bestehen.

Im ersten OG schufen wir im Arbeitsraum mit einer dunklen hohen Decke und einer kontrastreichen Kombination aus anthrazitfarbenem Industrieboden und Holzbodenbereichen so etwas wie eine Denk-Fabrikhalle. Der industrielle Charme mit freigelegten Säulen, Schallabsorbern und Falzrohren an der Decke bietet viel Freiraum für rauchende Köpfe unserer Entwickler ;).

Doch wie man in diesem Bild hier sieht, standen auch vor fast 40 Jahren schon Rechner an dieser Stelle – wenn auch mechanische statt digitale 😉

Arbeitsbereich 1. OG damals (C) Historisches Archiv Deutsche Bundesbank — Arbeitsbereich 1. OG damals
(C) Historisches Archiv Deutsche Bundesbank

Mittlerweile haben wir uns ja den Innenhof wunderbar als sommerlichen Chill-Out und Freiluft-Arbeitsraum eingerichtet, aber auch die Landeszentralbank hatte sich damals durchaus eine chice Gartenlandschaft gebaut:

Und so sieht unser Projekt „Occupy-Innenhof“ heute beim comspace Sommerfest aus:

Auf dem Dach des Hauses befindet sich ein Fassaden-Aufzug des Bielefelder Traditions-Unternehmens HIRO-Lift die heute Treppenlifte herstellen. Die Kollegen vom HIRO-Blog freuten sich ungemein, als wir ihnen die Bilder ihres Oldie-but-Goldie zuschickten:

Immerhin hat HIRO damals auch die Fassadenlifte des World Trade Centers gebaut, die ein verrückter Stuntman dann nutzte, um wie Spiderman am WTC hoch zu klettern:

Eine Besonderheit des Gebäudes haben wir nun selbst mitgebracht: Die eingebaute Besprechungs-Sauna 🙂 (Die auch schon unserem amtierenden Oberbürgermeister Pit Clausen zu Ohren gekommen ist).

Heute:

Und so sah der gleiche Bereich damals zu Landeszentralbank-Zeiten aus:

Und last but not least natürlich:

Das Panorama vom Dach

Klicken für eine größere Ansicht des Bielefeld Panoramas. Fotografiert mit Dermandar auf iPhone 5S — Klicken für eine größere Ansicht des Bielefeld Panoramas.
Fotografiert mit Dermandar auf iPhone 5S

Und dann sind da noch die Kellergewölbe! Aber davon mehr in einem späteren Beitrag 🙂

Ach übrigens:

Falls Sie sich nun die ganze Zeit fragen, wer eigentlich Elsa Brändström – die Namensgeberin unserer Straße hier ist, diese Frage haben wir in diesem Blogbeitrag beantwortet.

Die App selber können Sie hier für 1,79 EUR herunterladen:

4. Dezember 2014

So entstand die Bielefeld 360 Grad App der Neuen Westfälischen

Am Anfang eines jeden neuen Projektes steht die richtige Team-Zusammenstellung. Bei unseren CMS-Projekten werden die Teams vor allem nach der verwendeten CMS-Technologie wie Sitecore oder FirstSpirit zusammen gesetzt. Im Fall der 360 Grad Bielefeld App-Entwicklung setzte sich das Kernteam nach den Anforderungen der Neuen Westfälischen aus drei Personen zusammen, die besonders gut zum Bereich Web-Anwendungsentwicklung passen:

John Gibbon als Web-Entwickler, Daniel Blomeyer als Frontend-Entwickler und Markus Plauschinn war der verantwortliche Projektmanager.

Die App selber können Sie hier für 1,79 EUR herunterladen:

Wer macht was?

Kurz gesagt: WebEntwickler_innen bauen die eigentliche App auf – die Anwendung eben. Frontend-Entwickler_innen sorgen dafür, dass die App gut aussieht und vor allem gut benutzt werden kann und Projekt-Manager_innen sind die Schnittstelle zwischen Kunde und comspace. Sie sorgen für die Abstimmung der Anforderungen, geben Lösungsansätze die durch Entwickler_innen erarbeitet werden an die Kunden zurück, erstellen den Projektplan und behalten ein Auge auf die Einhaltung von Terminen.

Ausführlich können Sie sich in diesem Artikel über die Berufsportraits informieren

Das heißt im Falle der Bielefeld 360 Grad App

Stefan Gerold von der Neuen Westfälischen stellte uns einen ersten Entwurf als Ausgangslage für den Aufbau der App vor. Diese bestand aus einer Webseite, die die grundsätzlichen Funktionen und erste Panorama-Fotos enthielt. Auf dieser Basis entstand eine technische Konzeption, die das spätere Endprodukt zum 800 Jahre Jubiläum der Stadt Bielefeld beschrieb.

Die technische Konzeption ließ uns die besonderen Herausforderungen erkennen, für die wir individuelle Lösungen entwickeln mussten:

Ansicht und Navigation durch Panorama-Bilder
lange Ladezeiten durch große Panoramas vermeiden – Zielgröße der App kleiner als 50MB
Bielefeld 360 Grad soll in verschiedenen Größen in Hoch- und Querformat dargestellt werden (auf Smartphones und Tablets verschiedener Größen)

Neben den Basisanforderungen wie Menü-Steuerung, Hilfe- und Infoseiten haben wir aus der vorliegenden Lösungsskizze die genauen Anforderungen rückwärts abgeleitet (re-engineered). Dann wurde zunächst einmal eine Web-Anwendung erstellt, die auf stationären Rechnern entwickelt wurde. Begonnen wurde mit dem Rahmen und der Navigation. Dann folgten die ersten Bielefeld-Panoramen um die App benutzbar zu machen. Die mobile Anwendung wurde zunächst einmal nur simuliert. Aus dieser Entwicklung entstanden dann die einzelnen Lösungsansätze, mit denen wir die Darstellung der großen Bielefeld-Panoramas ermöglichten:

Wir zerschnitten die Panoramas in Einzelbilder, die später in der App wieder zusammen gesetzt dargestellt werden, wie man es bsw. von Google Maps kennt
Um eine flexible Darstellung auf unterschiedlichen Bildschirmgrößen zu ermöglichen wurden die Markierungen neu gesetzt, mit deren Hilfe sich Benutzer_innen auf ihrem Bielefeld-Rundgang durch die einzelnen Panoramas navigieren
Bildergalerien und Zusatzinformationen wurden den Orten im Panorama zugeordnet und über eine Menüfunktion zugänglich gemacht
Radio Bielefeld steuerte Tonspuren bei, die automatisch abgespielt werden sollen, wenn ein Panorama angeklickt wird. Hierzu benötigte die App eine eigene Abspielfunktion für Audiodateien
Das führte zu einem zusätzlichen Button um den Ton schnell an und aus zu schalten

Nachdem die erste funktionierende Web-App mit entsprechenden Funktionen stand, fütterten wir das Cordova-Framework mit dem Projektergebnis. Dieser Werkzeugkasten zur Webentwicklung, der mittlerweile zu Adobe gehört, hält den Aufwand gering, um aus einer Web-Anwendung eine lauffähige App für verschiedenste Smartphone-Systeme zu erzeugen.

Danach ging eigentlich alles ganz schnell: Der erste Stand wurde durch uns präsentiert und in mehreren Feedbackrunden nah am Kunden wurde mit der NW die App fertig entwickelt. Dabei wurden vor allem viele kleine Änderungen Schritt für Schritt durchgeführt, wie die Gestaltung des App-Icons, Testinstallationen auf verschiedenen Geräten usw.

Wie kommt die App in den Store?

Hier kommt das eigentlich aus dem voran gegangenen Absatz zum Tragen, denn von der Fertigstellung der App, der Freigabe durch den Kunden bis zur tatsächlichen Verfügbarkeit im Appstore (besonders bei Apple) vergehen gerne einmal zwei bis drei Wochen. Sollte Ihre App also zeitkritisch sein – bsw. für eine Messe oder ein Jubiläum, planen sie ausreichend Zeit für das Einstellen in die App-Stores ein. Mittlerweile ist es sowohl im Apple wie auch im Android Store möglich, eine automatische Veröffentlichung nach Freigabe zu deaktivieren. So lässt sich ein gleichzeitiger Launch verschiedener Versionen realisieren.

Weitere Einblicke in die Entstehung der Bielefeld 360 Grad App erhalten Sie in den kommenden Tagen zu folgenden Themen:

Wie entstand die Idee zur App – Interview mit Stefan Gerold von der NW
Panorama Fotografie was ist das eigentlich – Fotograf Andreas Frücht erklärt
Die Berufe hinter der App: Anwendungsentwickler, Frontent-Developer, Projektmanager
Elsa-Brändström-Straße 2-4: Eines der Panoramas über den Dächern Bielefelds entstand auf dem Dach von comspace