Idee und Konzept

Haben Sie sich eigentlich schon mal gefragt, warum es nur sehr schwer ist, Google Bilder bei Flicker zu finden und ebenso anders herum ? Wäre es nicht für den User der mal eben schnell im Internet nach einem Bild surfen will, einfacher mit einer Suche alle relevanten Bilderergebnisse zu erhalten ?

Mit der Vernetzung solcher und ähnlichen Webservices beschäftigen sich eine ganze Reihe von Interface Designer, mit dem Grundsätzlichen Gedanken mehrere Webservices zu verbinden, um ein Maximum an Relevanz für den User zu erhalten. Dies ist auch der Grundgedanke in diesem Hochschulprojekt “Realtime Information Graphics”.

Speziell in diesem Projekt werden Twitter Nachrichten und deren Ortsangaben Kombiniert.

Umsetzung

Die Umsetzung erfolgt mit Hilfe open source API Schnittstellen im Internet. Diese bieten nach Abfrage eine möglichst vollständige Liste, mit den Abgefragten Daten in einem geordnetem Muster/geordneten Liste.

Technik

Nach der Suche einer frei nutzbaren API, welche eine möglichst große Sammlung an Daten bietet, ist mir die Twitter Public Timeline aufgefallen. Diese bietet mehr als 20 Nachrichten pro Sekunde, von echten Users liefert und sich somit sehr gut eignet.
Da diese API leider nur selten, bis fast keine Geografischen Informationen mitliefert, aber immer ein Zeitzone angegeben ist, lag es auf der Hand diese mit Hilfe eines weiteren Webservice abzufragen. Hierfür zeigte sich die “MetaCarta” API hilfreich, welche nach Eingabe eines Ortes/Zeitzone die Längen- und Breitengrade ausgibt.
Mit den nun ausgelesenen Twitter Nachrichten und den dazugehörigen Koordinaten, kahm die Idee dazu, diese in einem kleinem “Universum” darzustellen, in dem man sich frei bewegen kann.
Da die Umsetzung in Flash Actionscript erfolgt, bot es sich an dafür Papervision3D, eine 3D Engine für Flash, zu verwenden.

Download

-> Präsentations PDF

Screenshots

Wetterdaten und Informationsgrafiken

Wetter betrifft jeden! Ob privat oder geschäftlich, das Wetter beeinflusst unseren Alltag. Daher ist es nicht verwunderlich, dass Wetterdaten einen hohen Stellenwert in unserem Leben haben. Ob beim Smalltag oder bei der Tagesplanung. Für Wetter gibt es unzählige Quellen. Zeitungen, Videotext oder Internet, fast in jeder aktuellen Inofrmationsquelle sind Wetterinformationen aufgeführt.

Umso schwerer fällt es, Wetterinformationen auf eine neue andere Art darszustellen.

Präsentations-PDF

Unter nachstehendem Link ist die Präsentations-PDF samt eingebundenen SWF-Prototypen abrufbar:

Präsentations-PDF Wetterkarussell Mathias Jüsche

Idee

Meine Grundidee beruht auf dem Gedanken, Wetterdaten verschiedener Städte vergleichbar darzustellen. Besonders durch die Farbgebung und Animation soll der Nutzer schnell Wetterlagen erfassen und leichter vergleichen können.

Wetter-Icons

Für Testzweckle diente die Google-Weather-API als Datenquelle. Diese Schnittstelle unterscheidet zwischen 22 verschiedene Wettersituationen. Für diese entwarf den nachfolgenden Icons-Satz. Links ist das Original-Icon und rechts die neu gestaltete Variante zu sehen.

Funktionsweise

Ein Array mit Städtenamen gibt die Anzahl der Städte vor, ein zweiter Array stellt die UTC-TimeOffsets bereit.

Je nach Anzahl der Städte werden entsprechend viele Anzeigedisplays gleichmäßig in einer elliptischen Bahn um den Bühnenmittelpunkt positioniert und entsprechend ihrer Postion skaliert.

Die Karussellfuntkion wird durch die Maus beeinflusst. Die Position des Mauszeiger gibt vor, wie schnell das Karussell sich dreht. Je weiter der Mauszeiger auf der X-Achse vom Mittelpunkt entfernt ist, umso größer ist die Rotationsgeschwindigkeit des Karussells. Das Karussell lässt sich links oder rechts drehen.

Ein Klick auf eines der Städtedisplays lässt das Karussell automatisch drehen, bis das geklickte Städtedisplay zentriert im Vordergrund steht.

Den Städtedisplays wird der Ortsname und er dazugehörige UTC-TimeOffset übergeben. Jedes Display fragt per URLRequest die Wetterdaten-XML von Google ab. Der Städtename wird als Parameter angegeben.

Sobald die Daten komplett geladen wurden, werden die Inhalte für das Display aufbereitet. Die Infos werden ausgelesen und als Grafik dargestellt.

Die Uhrzeit und das Datum werden anhand der lokalen Rechnerzeit berechnet. Hierbei wird die Differenz der Lokalzeit zur UTC-Zeit ermittelt und zusammen mit dem TimeOffset wird das aktuelle Datum und die aktuelle Zeit für die Stadt errechnet.

Prototyp

Für den hier gezeigten Protoyp wird eine integrierte statische XML-Qelle verwendet. Augrund von Lizenzbedingungen können an dieser Stelle keine echten und aktuellen Wetterdaten eingebunden werden.

Das Ziel des Kurses ist die Konzeption und Visualisierung von dynamischen interaktiven polymorphen Informationsmaps in mehreren Zoom-Stufen. Am Beispiel der „Campus Map Dessau“ werden interaktive Informationsvisualisierungen simuliert. In der Recherche und Analysephase werden Möglichkeiten des web 2.0 und Visionen des web 3.0, der Generation Twitter recherchiert, analysiert, validiert, aggregiert und konzipiert.

Im Mittelpunkt steht die Vermittlung von Konzeptions- und Gestaltungsgrudlagen im digitalen, web-basierten, interaktiven Entwurfsprozess. Interfaces zur Lokalisierung von Daten mit Googlemaps sowie Web-2.0-Mashup (deutsch „Vermanschung“) werden verknüpft und zu neuartigen Funktionen und Diensten im Web weiterentwickelt. In Googlemaps werden in ortsbezogenen Mashups die realen geografischen Orte und ihre digitalen geokodierten Abbilder mit Userbeteiligung getaggt und verknüpft.

In der Recherchephase werden Gestaltungstrends erfasst, damit die Teinehmer ein Verständnis und Stilsicherheit in Entwicklung und Auswertungen von Online Applikationen entwickeln. Durch das Erstellen eines Präsentationstools „Blog“ (mit Wordpress) können die Möglichkeiten des User Generated Content ausprobiert und angewandt werden.

Wordpress Einführung und GEOrss
Begleitendes PDF zur Einführung [ca. 634 KB]

Google Maps for Flash . Tutorial
Tutorial als PDF [ca. 600 KB]
Tutorial-Dateien als ZIP [ca. 3,3 MB]
Google Maps API SDK für Flash [ca. 520 KB]
Komplettpaket Tutorial ZIP [ca. 4,3 MB]

Idee und Konzept
Nach einer Einführung in google maps, Erstellung eines Blog, Photosynth und einigen anderen CMS und Mashupsystemen beschlossen wir eine Informationsplattform für Studienanfänger des Fachbereichs Design auf der Basis eines Blogs zu erstellen. Der Campus als “interaktiver Stadtplan” dient uns dabei als Ausgangs- und Hauptorientierungspunkt. Mit den für google maps typischen Markern sollten die wichtigsten Gebäude gekennzeichnet werden umso eine bessere Visualisierung der Hochschulorganisation zu erhalten. Anfangs arbeiteten wir noch mit einem Blog, der sich aber für unsere Sache nur sehr bedingt eignet. Der Meinugsaustausch, wie er bei Benutzung eines Blogs abläuft, spielt für unser Projekt keine Rolle und so entschieden wir uns für eine normale HTML-Seite in der Umsetzung. Als Ergänzung zu google maps haben wir Photosynth integriert um die Gebäude als 3D-Fotomodell darzustellen.

Umsetzung
Fotografieren der für Designer relevanten Gebäude und Hochladen bei www.photosynth.com
Überlegungen zur Strukturierung des Blogs (später der HTML-Seite)
Anfertigen von Scribbels zur Menüfühurung
Recherche über organisatorische Abläufe der Hochschule
Erstellen der google maps-Karte in Flash und Setzen der Marker in AS3
Gestalten des Banners und der Infomarker
Programmierung eines Spry-Assets zur Navigation
Erstellen einer HTML-Seite in Dreamweaver CS3
Layoutgestaltung über CSS
Einbettung von Photosynth mittels iFrame und Einbettung der Flash-Application in das Projekt
Zusammenführung aller Komponenten

Dokumentation

Idee und Konzept

Campus Viewer ist ein Programmkonzept zur Darstellung von Räumlichkeit über das Google Map Kartenmaterial. Mit der Zuhilfenahme von Flash und Google Maps, besteht die Möglichkeit eigenes Kartenmaterial auf eine beliebige Stelle auf der google Map Karte  zu  platzieren. Diese Methodik verwendet der Campus Viewer  am Beisiel des Campus der Hochschule Anhalt in dessau.

Der Campus Viewer soll den Benutzer die Möglichkeit bieten, sich einzelne Räumlichkeiten genauer anzuschauen bzw. verdeutlichen. Dazu stehen dem User die Möglichkeiten von 2d und 3d Ansichten, zur verbesserten Veranschaulichung oder eine Möglichkeit zur Etagenwahl, für individuelle Anzeigeoptionen der Etagen. Darüber Hinaus sind Elemente wie z.B. Zoom oder Kartentypwahl weiterhin Aktiv und können frei benutzt werden.

Umsetzung

Die Umsetzung des Campus Viewer erfolgt in Flash. Dieses ermöglicht das einlesen von Karten aus der Google Datenbank, das auslesen einzelner Koordinatenpunkte und das handling ebenfalls mitgebrachter Elemente von Google (Zoom, Kartenansicht).

Technik

Um einen kurzen Einblick auf die verwandte Technik zu geben, möchte ich diese kurz erklären. Es braucht mindestens 2 Eckpunkte, um ein voll definiertes Rechteck zu erhalten, welches auch Elemente von Flash benötigen. Mit Hilfe, 2 aus Google augelesene Positionen, die in Flash fest definiert werden, ist es möglich ein immer zum Googlekarten-Zoom ausgerichtetes Movieclip zu erhalten, welches wiederum das darstellen von Räumen, Gebäuden oder ähnlichen zulässt.

Idee und Konzept
Nach einem gemeinschaftlichen Brainstorming entschlossen wir uns eine Art eigenes Mashup aus einer Karte, Info-Bubbles und 360°-Panoramen zu erstellen. „Hotspots Dessau“ ist eine Flash-Anwendung für Studenten (besonders aus dem Ausland oder Erstsemester), die sich während ihres Aufenthaltes in Dessau oder vorab über die Stadt und das Studentenleben der FH Anhalt informieren wollen. Auf einer Karte, die die wichtigsten Straßen im Überblick zeigt (möglichst einfach, nicht zu Navigationszwecken gedacht) werden die Informationen über Hotspots abgerufen. Beim Anklicken der Hotspots erscheinen sogenannte Bubbles, die neben Textinformationen die Location außerdem anhand einer 360°-Ansicht möglichst wirklichkeitsgetreu zeigen und beschreiben. Außerdem befinden sich weiterleitende www-Adressen in den Bubbles.

Umsetzung
Auswahl der hervorzuhebenden Locations
Fotografieren der Locations in 360°-Ansicht
Zusammensetzten der Fotos zu Panoramen
Auswahl des Karten-Ausschnitts über Google Map
Vereinfachung des Kartenausschnitts (Vektorisierung der Straßen und Gebäude)
Programmieren der Grundfunktionen der Flash-Anwendung in Action Script 3
Erstellen der grafischen Benutzeroberfläche
Einteilung der Locations in verschiedene Kategorien (Event-Locations, Campus-Gebäude, Shopping-Locations)
Programmierung, Verknüpfung aller Informationen

Konzept und Dokumentation
Hotspots Dokumentation [912 KB]