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.

Xella-Multipor-Referenz-City

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.

  1. 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).
  2. 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.
  3. Desweiteren kann der Besucher der Website auch per Druck auf die Pfeiltasten seiner Tastatur (sofern vorhanden) die City nach links und rechts bewegen.
  4. 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.
  5. 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.
  6. Ö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.
  7. 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.
  8. 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.

girls4IT – Mentoring für Mädchen in der IT-Branche

Leider kommt es noch nicht so häufig vor, dass Frauen den Beruf der Informatikerin ergreifen. Auch unsere Kollegin Anna hatte eigentlich andere Pläne. Hier erklärt sie, wie sie zu ihrem Beruf fand und mittlerweile als Mentorin für junge Mädchen in IT-Berufen zwischen 15 und 18 arbeitet:

tkG14JLrch3gBBczztkLxfXJjLSq6kdNWie viele junge Mädchen wollte ich eigentlich ins Design und dann Websites und andere digitale Medien gestalten. Durch die Tatsache, dass mein Vater von Beruf Elektriker und passionierter Hobby-Informatiker ist, habe ich auch einiges von seinem Interesse mitbekommen. So bekam ich zum Beispiel immer seine alten PCs und CDs aus Computer-Zeitschriften mit den neusten Programmen und gestaltete schon früh verschiedenste Medien am PC.

Was steckt hinter dem Mentoring-Programm girls4IT?

Das girls4IT Programm hilft Schülerinnen bei ihrer Berufswahl indem verschiedenste Berufe vorgestellt, IT Themen und Potentiale sichtbar gemacht und die Schülerinnen individuell betreut werden. Ich habe unabhängig davon, ob mein Arbeitgeber dieses Engagement unterstützen würde, sofort zugesagt, da ich selbst die Erfahrung machen musste, dass Frauen oft nicht ernst genommen werden und weibliche Vorbilder daher besonders wichtig sind.

Wie läuft das Mentoring ab?

Seit ein paar Monaten treffe ich mich alle paar Wochen mit meiner Mentee und stehe außerdem über einen privaten Blog und Kurznachrichten mit ihr in Kontakt.

In meinem Blog schreibe ich kurze, für IT-Neulinge verständliche Artikel, Tutorials und organisiere mich mit meiner Mentee. Für jeden der Artikel gibt es die Möglichkeit Feedback und Kommentare abzugeben. Interessiert sich meine Mentee für ein Thema, dann kann sie mir einfach eine Nachricht zukommen lassen und ich verfasse den nächsten Blog-Artikel darüber oder antworte ihr direkt.

Einige Fragen meiner Mentee  in letzter Zeit waren:

  • Was ist ein CMS?
  • Wie funktioniert die Cloud?
  • Was ist ein Website-Slider?

Während der Treffen (1-2 im Monat) reden wir dann noch einmal persönlich darüber und machen gemeinsam kleinere Übungen, wie zum Beispiel den Text in einer einfachen HTML-Seite umzugestalten.

Wie kamst Du eigentlich zur Medieninformatik und zum Mentoring?

Über den Tag der offenen Tür am b.i.b. in Paderborn kam ich nach dem Abi zum Eignungstest und schnitt dank meiner Vorkenntnisse aus Hobby und Abitur-Leistungskursen überdurchschnittlich gut in den Feldern Englisch, Informatik und Mathematik ab. Auf die Empfehlung einer Mitarbeiterin des b.i.b.s sah ich mir noch den Beruf der Medieninformatikerin mit Schwerpunkt Design an und die Entscheidung war klar: Mit der Aussicht auf ein anschließendes Studium im Ausland wollte ich Medieninformatikerin werden –  obwohl ich nie zuvor auch nur eine Zeile Code geschrieben hatte.

Im Oktober 2010 begann dann ohne jegliches Vorwissen die schulische Ausbildung am b.i.b. in Paderborn. Eingeschüchtert von dem Vorwissen der Mitschüler begann ich mit dem Lernen. Es stellte sich jedoch schnell heraus, dass auch alle anderen nur mit Wasser kochen: Die erste Klausur war eine glatte 1.

Das konnte ich bis zum Ende der Ausbildung fortsetzen und schaffte den Abschluss als Klassenbeste!

Die Ausbildung bestand zu 50% aus Design-lastigen Fächern und 50% Informatikfächern. So bekam ich während der Ausbildung zwar viele Einblicke, wollte mich jedoch gerne etwas mehr spezialisieren. Das konnte ich dann während eines sog. Top-Up-Studiums in England (Southampton). Hier studierte ich im Bereich „Software Engineering“. Meine Themenschwerpunkte waren nun also mehr technisch. Das Thema meiner Bachelor-Arbeit war die Entwicklung einer Stundenplan-App für das b.i.b.(Link zur App im Android Playstore).

BIB-Stundenplan-App-Screenshot

Aus diesem Grund hatte ich auch während des Studiums weiterhin viel Kontakt zum b.i.b.
Übrigens: In Bielefeld gibt es mit MINT ein ähnliches Projekt, das über Informatik hinaus noch weitere naturwissenschaftliche Fachgebiete abdeckt.

Nachdem ich dann mein Studium mit einem First Class Degree (Bachelor of Science) abgeschlossen hatte und wieder nach Deutschland (Paderborn) gezogen war, schrieb mich die Abteilungsleiterin für Informatik am b.i.b. Paderborn per Mail an, weil sie ein Mitglied der Initiative „Paderborn ist Informatik“ ist, die das Programm „girls4IT“ ins Leben rufen wollte, und auf der Suche nach Mentorinnen war. Als eine ihrer ehemaligen Schülerinnen, fiel die Wahl unter anderem auf mich.
Da dieses Jahr das erste Jahr von „girls4IT“ ist, gibt es noch keine wirklichen Erfolgsgeschichten zu erzählen, aber ich bin mir sicher, dass mindestens eine der Teilnehmerinnen danach eine Karriere in Richtung IT verfolgen wird.

Ich möchte junge Mädchen dazu motivieren, sich für Berufe in der Informatik zu entscheiden, sie bei ihrem beruflichen Werdegang zu unterstützen und ihnen die Angst vor dem großen Unbekannten nehmen. Die Informatik besteht ja zum Großteil aus Informationsverarbeitung- und Präsentation. Von meiner Mentee erwarte ich Begeisterung und Interesse am Web, der mobilen Welt und Bereitschaft für eine gute und regelmäßige Zusammenarbeit. Manchmal muss man sich einfach mal trauen ins kalte Wasser zu springen und ein bisschen Mut zur Lücke haben, um das für Einsteiger_innen erschlagend wirkende Thema anzugehen.

Was genau bedeutet das Mentoring für comspace?

Die Information, dass ich bei girls4IT mitmache, hat sich bei comspace eher zufällig im Anschluss an eines unserer c42 Barcamps verbreitet und  bisher habe ich nur Zustimmung bekommen. Meine Mentee hat darüber hinaus die Möglichkeit bekommen sich unser Unternehmen gemeinsam mit den Studenten der FHM anzusehen und wird in den Osterferien 2015 ein Praktikum bei comspace absolvieren.

Nachdem sich meine Aktivität als Mentorin bis zur Geschäftsführung herum gesprochen hat, kann ich während meiner Arbeitszeit an girls4IT-Meetings teilnehmen. Anfangs nahm ich mir dafür frei oder baute Überstunden ab.

Was hat ein Unternehmen davon, seine Mitarbeiter Mentorships machen zu lassen?

Meiner Meinung nach sind solche Programme eine super Chance, seinem Unternehmen positive Aufmerksamkeit zu bescheren und neue Kolleg_innen für sich zu gewinnen.

Links zum Weiterklicken

 

Beitragsbild (c) Veit Mette

Bildschirmfoto 2015-03-05 um 15.08.32