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 »

Internship Project 2 : Almer Blank Labs

labsalmerblank

My second project from the time of my internship which i want to show you is the Almer Blank Labs. This project is currently online and can be seen at labs.almerblank.com. I designed and developed the WordPress Theme. The design goal for me was to create a design which is clean but also gives the impression of a lab. It should show what we guys at Almer/Blank do or what we look at. The posts get syndicated from different employee blogs and I had to make sure that the pictures and other formatting stuff from other sites work on our site.

Read more »

Studio Revo

My roommate Junya Sakino is a talented filmmaker here in Los Angeles. In the last couple of days we quickly build his website. The site is WordPress driven and uses a couple different plugins. The website design was created by Junya and I build it into WordPress. I used the capricon theme but changed quite some stuff. The reason why I mention this website here on my blog is because its a good example for a small and easy website build with WordPress. Using WordPress as a CMS is one of the quickest solutions and its easy for both, the developer and the customer.studio-revo

Visit his website: www.studiorevo.com

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 »

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

Multilineare Stories 2.0 :-)

zweimal.ch ist eine Onlineplattform, auf welcher Mutilineare Stories gelesen und geschrieben werden können
Auf dieser Webseite können einerseits verschiedene Multilineare Stories gelesen werden. Dies Funktioniert so: Man wählt zuerst eine Geschichte aus und liest deren ersten Textblock. Sodann kann man zwischen mehreren verschiedenen Antworten wählen, welche zu unterschiedlichen weiteren Textblöcken führen. So kann man die Handlung der Geschichte, welche man gerade am lesen ist, selbst beeinflussen. Und auch wenn man dieselbe Geschichte nochmals von Anfang zu lesen beginnt, kann durch nur eine einzige anderst gewählte Antwort die Handlung völlig von der vorhergehenden abweichen.

Des weitere kann man eine bereits bestehende Geschichte beliebig erweitern.

Dies geht so: kommt man an einen Punkt, an welchem die Geschichte nicht mehr weitergeht oder möchte man bei einem Textblock eine weitere Antwort einfügen, wechselt man durch klick auf “Editiermodus” in den Editiermodus. Sodann kann man eine weitere Auswahlmöglichkeit hinzufügen, das heisst, man schreibt als erstes eine neue Frage. Danach kann man per DropDown entweder einen neuen Textblock erstellen oder einen bereits bestehenden verwenden.
Erstellt man einen neuen Textblock sollte man einen Titel und anschliessend den eigenen Text eingeben. Ist dies geschehen, können wiederum neue Auswahlmöglichkeiten hinzugefügt werden, und man beginnt von vorne.

Zudem kann zu jedem Textblock ein Bild raufgeladen werden.

Die Webseite ist im Rahmen des Moduls Storytelling an der ZHdK enstanden. Die Gruppenmitglieder waren: Mario von Rickenbach, Michael Fretz, Tobias Koller, Gabriel Süess, Dondup Shelkar und Phillipe Meier.
URL: www.zweimal.ch

multilineare stories 2.0Ansichtmodus

Multilineare Stories 2.0 :-)
Ansicht Editiermodus

Sommerferien sind vorbei

Lange ist es her seit meinem letzten Eintrag. Doch es ist viel passiert in der Zwischenzeit. Das zweite Semester gehört nun zur Vergangenheit und das dritte hat auch schon angefangen.
Während meiner mehr als drei Monaten Sommerferien habe ich mich intensiv mit dem programmieren auseinander gesetzt. Zum einen habe ich ein kleines Game programmiert welches ich hier bald veröffentlichen werde, zum anderen habe ich ein Praktikum bei „dctrl Interactive Media and Motion Graphics“ absolviert. Doch was macht man in so einen Praktikum? Ich habe gleich zu Beginn mit PHP programmieren angefangen. Als Aufgabe sollte ich ein Bug Tracking System programmieren wo man Fehler über ein einfaches Formular mit Fileupload eintragen kann. Das ganze musste selbstverständlich in Objekt Orientiertem Programmierten PHP5 und auch gegen Angriffe sicher programmiert sein. Formularvalidierung musste serverseitig und clientseitig geschehen. Im Backend des BugTracking Systems musste eine Liste mit allen Bugs generiert werden, die Bugs mussten gelöscht, modifiziert und Personen zugewiesen werden können. Um ein solches System zu erstellen habe ich verschiedene PHP Klasse erstellt welche ich im Anschluss des Projektes auch noch für andere Programme verwenden konnte. Ich habe alles von Grund auf programmiert und keine bestehenden Elemente verwendet da es mir sehr wichtig war, dass alles was ich mache und brauche auch wirklich verstehe. Da ich mein Praktikum ja in einer auf Flash spezialisierten Firma gemacht habe galt es natürlich das ganze Bug Tracking noch in Flash bzw. Action Script 3 in OOP umzusetzen. Auch das wollte mir gelingen. So konnte ich stolz am letzen Tag auf ein kleines Programm zurück schauen welches in Action Script und PHP zusammen mit MySQL programmiert ist und im Zusammenspiel reibungslos funktionierte. Im Grossen und Ganzen kann man sagen das ich die Zeit bei dctrl sehr genossen habe und es mir Spass gemacht hat, viele neue Dinge zu lernen und mit einem guten Team zusammen zu arbeiten.
Wenn ich die Zeit finde bzw. ein Bedürfnis besteht ein Fileupload Script in Action Script3 hier als Tutorial zu erhalten werde ich ein solches schreiben. Im Internet findet man dazu leider nicht viel taugliches. Den SourceCode meiner Arbeit werde ich hier nicht veröffentlichen da dies mein Vertrag nicht erlaubt.
Mitte August war mein Praktikum dann aber leider auch schon wieder zu Ende den ich wollte noch ein wenig Reisen gehen. Da ich noch nie in Asien war beschloss ich nach Indonesien zu fliegen und dort Lombok und Bali ein wenig genauer anzuschauen.

Web Interfaces – rum.Pirat

ZIEL
An der ZHdK mit einer Webapplikation eine Dienstleistung zu vereinfachen.

KONZEPT
Sinn und Ziel eines web-basierten Auftrages für eine verlängerte Raumbelegung ist es, das alte, (Gelbe-) Papierzettel-System an der ZHdK abzulösen. Der momentan vorhandene Zettel soll durch ein ähnlich aufgebautes Web-Formular ersetzt werden. Dies vor allem aus dem Grund, dass es oft zeitlich nicht möglich ist eine Raumverlängerung einzugeben. Auch der Weg um Raumverlängerungen zu beantragen kann gespart werden da die Räume ortsunabhängig eingegeben werden können.
Momentane Situation
Um eine Raumbelegungsanzeige ausfüllen zu können, muss sich ein Student im Hauptgebäude momentan ins Erdgeschoss begeben, um bis 17.00 Uhr ein solches Papierformular auszufüllen, was oft aus Zeitmangel ein Problem darstellt.
Da viele andere Dienste wie z. B. Bücherbestellungen auch bereits in eine digitale Form überführt wurden, erscheint es nur logisch, diese Dienstleistung ebenfalls zu digitalisieren. Die Vorteile für Nutzer währen vielfältig: es kann ein Raum bei Bedarf (auch ohne den Unterricht vor 17.00 Uhr zu verlassen) verlängert werden, und dies auch, wenn sich der Student nicht in demselben Gebäude befindet, in welchem er ein Zimmer verlängern möchte. Durch die eindeutige Identifikation mittels ITZ-Login kann exakt ermittelt werden, wer genau den Raum reserviert hat. Die für Raumreservationen zuständige Person muss sich nicht mit diversen “Zetteln“ herumschlagen, sondern erhält auf digitalem Weg eine geordnete Liste aller zur reservierenden Zimmer, welche ohne grossen Aufwand an weitere Personen wie z. B. Securitas weitergeleitet werden kann. Zudem wären Listen aller in ZHdK-Gebäuden reservierten Räume in digitaler (per Email versendbarer Form) bereits von Beginn des Prozesses an verfügbar.

Webinterface rum.Pirat

Webseite für die Verlängerung der Räume mit geöffneter Hilfe.

Webinterface rum.Pirat

FAZIT
Abschliessend könnte man sagen, dass wir mit unserem Projekt sehr zufrieden sind. Anfängliche Schwierigkeiten mit WordPress wurden relativ schnell behoben. Wir haben alle viel gelernt, wie man beispielsweise seine eigenen Ideen im Team besprechen und argumentieren kann. Technisch haben wir uns weiter entwickelt und WordPress als etwas grösseres als nur ein Blogsystem kennen gelernt.
Falls das Projekt weiter entwickelt werden darf, müssten wir noch ein paar Dinge anpassen. Zum einen würden wir das Raumerfassungsscript selber programmieren und nicht auf das TDO Mini Form zurück greifen. Dies hätte den Vorteil, dass wir die Daten in einer eigenen Tabelle in der Datenbank speichern können, welche besser auf unsere Bedürfnisse angepasst ist. Weiter würden wir eine Möglichkeit einbauen, um Raumreservationen nach Datum anzuzeigen. Eine Druckansicht für den Hausdienst wäre auch noch in Planung.

Webseite zum selber ausprobieren: rum.Pirat

rum.Pirat Dokumentation (PDF 2.3MB)

Screencast:

Web Interfaces / Information Architecture
Dozent: Dipl. Des. Stefano Vannotti
Studenten: Michael Fretz | Raphael Habbegger | Tobias Koller | Philippe Meier