Ventana – Interactive Shop Window – Bachelor Project

Today, retail stores are finding themselves in a fierce competition with e-commerce stores. By bringing the latest technologies to these physical locations, Ventana is trying to provide a solution to this problem. Installed in the shop‘s window, Ventana enables passing potential customers to interact with a digital representation of the store‘s inventory. Now, well informed, the customer is more likely to enter the shop.
Ventana is designed to allow the presentation of any kind of information. It could be used to present fashion, jewelry or a restaurants menu. For our purposes Ventana is showing two products thematizing the US city New York. By the mere presence in front of the window a user can navigate and interactively experience the digital space.
The non-stop availability of the stores inventory breaks the boundaries between the digital and the real world and has the potential to attract many more customers. And as touch-less sensors become more affordable we will see many more applications of this kind, which will open up a range of completely new possibilities. Kinect, for example, would allow us to determine a customers body size and use it as a filter on the inventory and thus tailoring the information to the users needs.


Read more »

Punkt.Fizen – Android and Arduino powered Bike Navigation

How does one orient oneself while biking, for example as a tourist? You certainly will read traffic signs, ask people for direction or use a tourist-map. But at least the last example will force you to stop the bike. How could we provide a navigation, where the flow remains undisturbed?
The user will need a very unimposing feedback where to go.

Punkt.Fizn is an Android and Arduino powered bike navigation system. Unlike most navigation systems we didn’t focus on a display. Instead directions will be given only through vibrations in the handlebars. Riding a bike with Punkt.Fizn is like knowing your way already.

Read more »

Color Browse – iPhone App

Color Browse is an iPhone application that allows you to easily discover the huge archive of the poster collection of the University of the Arts Zürich. As the average user is rarely familiar with the exact artist names or other search criteria, I decided to pursue an approach that let’s the user sample a color to discover posters containing mainly that sampled color. This approach makes it possible to surf endlessly through the posters and discover new posters and artists at the same time. If a user is interested in a poster he then can retrieve more information about it. Using the iPhones touch screen the user can move his finger over the surface of a displayed poster and a display shows the color currently below the finger. When the user removes the finger the color is selected and a new poster is loaded that has an average color value of the selected color.

Read more »

Website for Sridhanwantari published

Together with my company Cubera Solutions GmbH I published a new client website. It was our first project together with our new graphic designer and friend Michèle Gnos. Building this website with her was a good and successful experience.
The website is about Ayurveda therapy in Indonesia, a special therapy for many different problems.

Read more »

Migros Terra Suisse – Who Is Muh

The last couple of weeks I had the possibility to work for Jung von Matt, one of the leading advertisement agencies in Europe. I worked on different small projects but mainly on the Migros Terra Suisse Microsite “Who is Muh”.

What is “Who is Muh”?
“Who is Muh” is an interactive platform for the Migros brand Terra Suisse. This interactive site shows different animals from the Terra Suisse program and explains what each animal does and how the animals are being treated and raised by their farmers.

Read more »

Using AJAX To Load Data From PHP Into Your Website

A few days ago I had to build a web-app for a mobile device. The problem was, that some external input device changed values in a database and I had to make this visible in my web-app.

I came across a good solution from the w3c school. The problem was that this only updated with a user input. Therefore I changed quite some part of their script and made it easy understandable. To keep the coding part as small and easy as possible, I will not access a database in my example. My PHP script only displays the PHP function date(“H:i:s”); which shows the current time. You could easy build what ever you want in the the PHP script but keep in mind that this code will be called often and could slow down  your server if you have many users and a short refresh time and therefore to many requests to your server.

Whats do you need in order to see this example.
I created this example in three files.
– The HTML File
– The Javascript File
– The PHP File
Read more »

Spot the Dogference

Last week, Spot the Dogference  came online as a public beta. Time to write a blog post about this project I worked on during my internship at Almer/Blank.

What is this game?

Spot the Dogference is an online game of spot the difference featuring pictures of dogs. It has 3 levels and one bonus level. You can share your score on twitter and it will be displayed on the spot the dogference website. Read more »

Using Terminal For Tracing In Actionscript Projects

traceinterminal

I think all of you know how to use trace in a flash project therefore I will target only on how to set up an easy tracing environment. I use terminal to display my traces on my Mac. I think this is an convenient way if you work on a dual screen environment. What do you need to do?
Read more »

My talk at L.A. Flex User Group Meeting in January

Some of you probably read my article about Font Embedding in Actionscript 3 projects. In the January L.A. Flex User Group meeting, Tom Bray recorded my talk about MojoFont. MojoFont is an Eclipse Plugin for easy Font Embedding in Flex, FDT or Eclipse. It was a good experience to speak to the L.A. Flex group. Thank you Tom for letting me a part of it. If you want to see my talk watch this video.

My talk about MojoFont at L.A. Flex User Group

Unfortunately the picture quality is not really good but if you want to know more about Font Embedding with MojoFont read my post about Font Embedding in Actionscript 3.

St.Moritz TV

stmoritztv_01

After being here in Los Angeles for about 7 months I think its time to show you some of the projects I worked on. The first project I want to show you is St Moritz TV.

What is this project?
The website www.StMoritzTV.ch is a Web TV station with short videos about St. Moritz and the Engadine. The main goal of the website is to inform tourists and locals about events, art, dinning and shopping in St Moritz and its surroundings.

What was the goal?
The current version is a Beta site. Its focus is to see what the needs of the users are and how we can build the final version and what we have to improve. Because this is a Beta site we are asking for any feedback about the site and would highly appreciate if as many of you can try it and give us a  feedback. We want to find out how we can make it most enjoyable for its user.

But hey, let’s get geeky :)
Read more »

Font Embedding in Actionscript Projects

While working on Actionscript projects you will have to use fonts quite often. There are many ways how you can embed a font into your project. In this post I will illustrate different ways of how to do that and I would like to demonstrate a very easy way with MojoFont.

Read more »

Change image size in CSS if div tag is smaller than the image

I run into the problem that I had a div tag with a certain width. From a external site I loaded some content in this div tag. The problem was that I did not have the control over the pictures loaded from this external server. Some pictures where bigger then the size of the div tag. I didn’t had the possibility to take the picture and make them smaller with PHP as the source of the picture had to be on the external server. And furthermore, I needed a solution in CSS or Javascript and couldn’t use something like phpThumb.

My solution was to use this:
Read more »

Ribbit Workshop

Add Communication to your Applications with Ribbit

Ribbit

On Sunday, October 4th, I had the change to visit a workshop about the Ribbit mobile service at the Rich Media Institute in Venice. I could see some examples how to build a Text message application in Flex or Flash and saw different ways to build a phone application. The combination between Actionscript 3 and a telephone system is quite interesting and I see a great potential in it.

Read more »

Hype Framework Workshop

Just before Adobe Max I had the opportunity to visit the Joshua Davis workshop about the  HYPE Framework. The HYPE-framework is a easy framework for creating digital art. It makes it easy to build computer based art in Actionscript 3. Josh is a very outgoing and super friendly person. All of us had really good fun with him. We build a couple of examples with the HYPE framework which was build by Branden Hall and Joshua Davis.
Read more »

How to avoid caching of XML-files in Actionscript projects

A wile ago I had a problem with external XML files loaded in to my Actionscript project. Some browser always used an older version of my XML and didn’t reload it every time I reloaded the page. An easy way to avoid this is the following solution:
avoid caching in xml
As you can see I added to the string of the path a question mark and a random number. Every time the page is reloaded it generates a new path to the XML file. The only changes are behind the question mark and will not affect the XML file

Download the XMLwithoutCaching.as File

XML Visualization with AS3.0, Tween Lite, MojoFont, PHP 5 and MySQL

One of the main reason I use Actionscript 3.0 is to create data visualization. Most times the data is saved in a XML or database. Therefore I would like to show you some parts of of a recently developed program.
Here is an example of the final result.

(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Read more »

Superball – Second Life Spiel

Im vierten Semester besuchten wir das Modul “Design Studio II Interaction in virtual environments” bei Max Moswitzer. Es galt ein Interaktives Objekt in Second Life zu erstellen. Zusammen mit Jonas Kaufmann und Gabriel Süss haben wir ein kleines Spiel in Second Life programmiert. Unsere Anwendung Superball, ist ein kleines Game in Second Life welches ähnlich wie ein Fussballspiel funktioniert.  Im Gegensatz zu einem normalen Fussballspiel ist unser Spielfeld rund und hat leicht abgerundetete Wände. Auch der Ball fliegt nicht immer so wie man dies eigenltich erwartet.

Second Life Superball Spielfeld 3

Das Spielfeld inkl. Tore:

Read more »

LichtON – Lichtsteuerungssoftware

Der Hintergrund
Dieses Projekt hat in Zusammenarbeit mit der Nimbus-Group in Stuttgart stattgefunden. Dort befindet sich auch das Nimbus Mock-Up, ein Simulationsbereich, auf welchem auf über 1500m2 die Produkte von Nimbus präsentiert werden. In Zusammenarbeit mit GIRA wurde für das Mock-Up ein Gebäudesteuerungssystem installiert, über welches primär das Licht der gesamten Ausstellungsfläche geregelt werden kann. Diese Steuerung wird mittels eines Touchscreens bedient, welchem unser Interesse galt.
Das Ziel
Das Ziel des Projekts war die Entwicklung eines Navigationskonzepts und die Gestaltung eines entsprechenden GUI‘s für den Touchscreen. Damit sollte vor allem sämtliches Licht im ganzen Mock-Up gesteuert werden können. Das heisst, vom ganzen Stockwerk über einzelne Räume bis hin zu einzelnen Leuchten sollte die Lichtstimmung detailliert regelbar sein. Optional war auch die Steuerung weiterer Komponenten wie Audioquellen, Jalousien etc. denkbar. Das GUI sollte zudem an das CorporateDesign von Nimbus angepasst werden und sich gut ins Mock-Up einfügen. Und zu guter letzt gilt es auch noch zu erwähnen, dass die beste Arbeit prämiert wurde: für jeden Gewinner gab es eine Nimbus Leuchte “Line Z”.
Projekt
Das Projekt LichtOn baut auf eine simple Bedienung, auf die Einfachheit des An/Aus eines Lichtschalters. Der Fokus unserer Arbeit liegt in der Schlichtheit und Usability des Programms. So zeigt sich beispielsweise der Startscreen auch gern schlicht, mit nichts weiter als einigen wählbaren Voreinstellungen in Form von simplen Buttons, welche mit einem einzigen Klick das ganze Mock-Up auf die gewünschte Helligkeit einstellen.

Die Hauptnavigation befindet sich diskret am unteren Bildschirmrand. Das Konzept sieht ausserdem als wichtigen Punkt vor, dass bei jedem Schritt nur die Interaktionselemente sichtbar sind, welche gerade benutzt werden können oder sonst von Bedeutung sind, indem sie beispielsweise auf etwas hinweisen. So werden die Elemente im Bild auf ein Minimum reduziert und die Übersichtlichkeit und Bedienbarkeit auf ein Maximum angehoben.

Grafisch ist unser Design den von der Firma Nimbus vermittelten sinnlichen Erfahrungen angepasst. Die verschiedenen Elemente sind in ihrer milchglasig/metallischen Erscheinung der Konnotation der beiden meist genutzten Materialien von Nimbus angepasst.

LichtOn Startscreen

Startscreen

LichtON Kartenübersicht

Kartenübersicht

LichtOn Dokumentation (PDF 2.3MB)

SourceCode auf Google Code http://code.google.com/p/hs08-nimbus/

Vorlesungsverzeichnis XML AS3

Im Modul: Digitaler Modulbau 3 lernten wir die Grundlagen des XML Handlings. Dazu haben wir das Vorlesungsverzeichnis der Zürcher Hochschule der Künste neu visualisiert. Die Unterschiedlichen XML Dateien werden dynamisch vom Server der ZHdK in das Projekt geladen.

Vorlesungsverzeichnis XML Visualisierung Übersicht Departemente

Vorlesungsverzeichnis nachdem das Departement XML geladen ist.

Vorlesungsverzeichnis XML Visualisierung Modulanzeige

Übersicht der Module welche in einer Vertiefung angeboten werden. Durch dir Pfeile kann durch die Module durchgeblättert werden.

Vorlesungsverzeichnis XML Visualisierung Modul Details

Anzeige eines Moduls.

Zur Programmierung:

Die Dokumentklasse fungiert als Viewer und Controller. Alle Elemente werden hier plaziert. Je nach dem was geklickt wird, entscheidet die Dokumentklasse welches XML geladen werden soll.

Die XML Loaderklasse kann jedes beliebige XML laden. Sind die Daten geladen wird ein Dispatch Event ausgeschossen. Über get Methoden werden Name und Daten zurück geliefert.

XML Loader

Auszug aus der XML Loaderklasse

Die XML Manager Klasse bekommt die Daten aus der XML Loaderklasse. Die erhaltenen Daten werden in einen Array gespeichert und anschliessend wird ein Dispatch Event ausgeschossen.

XML Manager

Auszug aus der XML Manager Klasse

URL zur Demo: http://vorlesungsverzeichnis.michaelfretz.com

Download Flex Projekt des Vorlesungsverzeichnis (104 KB)

User Centered Design – TouchPanel Applikation

Im Modul User Centered Design haben wir uns mit einer Applikation befasst, welche auf einem Touchscreen installiert ist.

Konzept und Idee:
Ein Touchscreen für ex libris Filialen zur Vor-Ort-Bestellung von Produkten aus dem Internet: www.exlibris.ch
Fokus haben wir bei unserem Prototyp auf die Sparte Musik gelegt – natürlich wäre es auch denkbar das Touchscreen um andere Produktkategorien wie Bücher, Videospiele, usw. … zu erweitern.

Während des ganzen Entwicklungsprozesses haben wir regelmässig Testbenutzer in das Projekt einbezogen.

Zu Beginn haben wir einen Paper-Prototyp entwickelt.

Paperprototyp

Den Paperprototyp haben wir mit verschiedenen Testbenutzer getestet. Das Feedback haben wir ausgewertet und anschliessend einen Prototyp in PHP und XHTML entwickelt.

Usertest Prototyp

Prototyp Test

Usertest Prototyp

Prototyp Test

UCD Website Prototyp

Printscreen der Touchscreen Applikation

Im Hintergrund unserer Applikation verwendeten wir das PHP Last.FM API von matto1990.com. Mit Hilfe dieser Applikation konnten wir die Daten von Last.FM abfragen und für unsere Anwendung aufbereiten. Mit Script Aculos
(http://script.aculo.us) verwendeten wir das Javascript Framework welches Hauptsächlich für das Anzeigen der Daten und die Animationen eingesetzt wurde. Auch mit Javascript haben wir eine Tastatur entwickelt, welche auf dem Touchpanel eingesetzt wurde. Da wir eine Art Template verwendet haben konnten in unserer Entwicklungsphase mehrere Designs gleichzeitig auf der Applikation verwenden und diese mit einem JumpMenu einfach
umschalten.
URL zur Demo: http://ucd.michaelfretz.com

Download Dokumentation :Dokumentation (PDF 2.7MB)

Download: Keynote Präsentation (ZIP 2MB)

Team: Christoph Brandin, Liliane Krauss, Michael Fretz

Older Posts »