Michael Fretz - Interaction Designer » php

Migros Terra Suisse – Who Is Muh

Michael Fretz — Sat, 10 Jul 2010 10:17:42 +0000

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.

Terra Suisse Animals and there Language
In the section animals and their language each animal explains briefly how they are being treated and what they do all day long. Each animal explains some things about its live and the environment it grows up in.

Muh Mix
The Muh Mix is a game like part of the site. Per drag and drop users can place animals into a play-list and arrange the order of the animal voices. If a user is happy with his choice he can play the song he created, share it on Facebook or send it through an email to his friends. If a user thinks the song he just made is great he can download it as an mp3 or m4r (iPhone Ring-tone format).

iPhone App
In addition to this site there is an iPhone app, available on the iTunes Store. Install it and enjoy cute animals on your phone.

Coding Base
The hole application is build in Object Oriented AS3. I was able to apply some design patterns in this app, for example I applied the singelton pattern on the objects that store the data in the application. This enabled me easy access to all my data from anywhere in the application.. Everything language related is saved in XML and dynamicaly loaded by the migros website. The platform runs on a FreeBSD server managed by my own Company Cubera Solutions GmbH. For generating the mp3 and m4r we created a php script which concatted the different small animal sound fragments to one mp3 file and for the secondary download option as m4r we used ffmpeg to convert.

Looking back
After finishing this project I’m very happy with it. All requested functionality could be built even-though we didn’t know if it is possible in the first place. The site works quite good and its cute and fun to play with it.
Many thanks to Claude Ebersold from Jung von Matt for providing all the cute graphics and for pushing me to work all day and night. Also thanks to Nadja Holdener for helping us where-ever help was needed, for creating many of the animations, and especially for learning and handling SVN so quickly. A special thank goes to Matthias Adolf for leading the project and letting me be part of it. Thank you all!

Try it
You can try this application here (german)

Using AJAX To Load Data From PHP Into Your Website

Michael Fretz — Wed, 21 Apr 2010 08:44:24 +0000

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

The HTML File:
This File loads the Javascript File in order to access all the Javascript functions. In the tag we load the function startRefreshing() from the javascript File





Ajax Test



 
    
    	Placeholder which will be replaced by the PHP content

The Javascript File (test.js)
In the scripts I defined which PHP fill should be executed every time the Loop starts. The repeat time is also defined in this script as well as the id of the DIV tag which should be replaced by the data sent by the PHP file. Quite some part of this script are based from the w3c school but I got rid of many unnecessary stuff for my example.

// Config for the javascript part
 
var urlForPHP 			= "test.php";
var milsecondsTillRepeat 	= 1000;
var idForReplace		= "idForAJAXReplace";
 
function startRefreshing()
{
	setTimeout("startRefreshing()",milsecondsTillRepeat);
	reloadPHP();
}
 
/// the following code is based on http://www.w3schools.com/php/php_ajax_database.asp  but I shorted it quite some bit
var xmlhttp;
 
function reloadPHP()
{
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null)
	{
		alert ("Your Browser does not support HTTP Request");
		return;
	}
	var url=urlForPHP;
	url=url+"?random="+Math.random();
	xmlhttp.onreadystatechange=stateChanged;
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
}
 
function stateChanged()
{
	if (xmlhttp.readyState==4)
	{
	document.getElementById(idForReplace).innerHTML=xmlhttp.responseText;
	}
}
 
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

The PHP file (test.php)
This file gets called every 1000 ms (defined in the Javascript File). For the demo I only display the current server time. Of course you could display here data from the database or any other PHP script which you need to have repeat called by the website.


echo date("H:i:s");
?>

Download demo

Internship Project 2 : Almer Blank Labs

Michael Fretz — Tue, 09 Feb 2010 04:19:18 +0000

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.

My main work on this project was to create the design, build it into HTML and CSS and write the necessary changes in PHP. During this process I tried to optimize the site for search engines and diffrent devices. If you visit the blog on a mobile device like an iPhone or any Android Phone you will see a different, for small screens optimized version of the blog.

labs.almerblank.com on my HTC Hero

Studio Revo

Michael Fretz — Mon, 08 Feb 2010 03:51:32 +0000

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.

Visit his website: www.studiorevo.com

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

Michael Fretz — Thu, 20 Aug 2009 11:26:33 +0000

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.

(Please open the article to see the flash file or player.)

Font Embedding

Because most time you visualize data you need to write some text to it. If you have done any pure ActionScript projects in Flex or FDT you know this stuff sucks. The resulting code looks like this and it takes hours of googling to get to the right embed parameters/tags.

But now the way of font handling in Actionscript changed. My colleague Philipp Laeubli created a plugin for eclipse which makes font embedding a piece of cake. If your interested in this, just apply for a private beta account on mojofont.badmojo.ch.
Here a little example how to embed a font with the mojofont plugin.

Instead of writing a whole bunch of metacode and doing some strange font registration, you import your font, and then you can use ist like this: Helvetica.createTextField(). Thats it. All the nasty embedding code and other things are completely handled by the plugin which generates a simple to use and embed swc file.

Tweening
For the hole tweening I used the tweenlite library from http://blog.greensock.com/tweenliteas3/. In my opinion it is one of the best tweening libarys and very easy to use.

XML Loading
I wrote a XMLLoader class. The XMLLoader class loads the hole data of the XML into a String. As soon as its finishes with loading, it dispatches an event. With the getter methods its easy to recive the data and use it afterwards in your programm.

PHP File to generate XML
Many of you will ask why I id use XML. In my opinion its the easiest way of recieving data and its easy to generate it from a database. To generate the XML file I developed a PHP file. This file connects to a MySQL database and loads the whole content of the defined table. At the moment you will have to define the used fields by hand. First of all, be sure you have all the needed fields in your database. Afterwards change the values in the begin of the mysqlToXML.php file. You have two options. 1: Make the PHP file look like an XML after loading it or 2: let it generate an external file. The first one is the better way if you change often data but dont have to many visitors. The option with the external file is a good option if you want to save database connections because you only ned to generate the XML file once you have changed some data. If you use the external XML file option, be sure that you have the write permission set on your webspace. After you generated your XML just make sure your XML loader class in your Actionscript project knows the path to the file. If you use the other option just add the path of the mysqlToXML.php in your Actionscript project.
Download mysqlToXML.php

User Centered Design – TouchPanel Applikation

Michael Fretz — Tue, 13 Jan 2009 09:57:36 +0000

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

Konzept und Idee:
Ein Touchscreen fü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 – natürlich wäre es auch denkbar das Touchscreen um andere Produktkategorien wie Bü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.

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

Prototyp Test

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 für unsere Anwendung aufbereiten. Mit Script Aculos
(http://script.aculo.us) verwendeten wir das Javascript Framework welches Hauptsächlich fü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 :-)

Michael Fretz — Tue, 06 Jan 2009 10:37:21 +0000

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

Ansichtmodus

Ansicht Editiermodus

Sommerferien sind vorbei

Michael Fretz — Thu, 18 Sep 2008 14:48:13 +0000

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

Michael Fretz — Thu, 29 May 2008 09:39:34 +0000

[See post to watch Flash video]

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.

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

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:

[See post to watch Flash video]

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