<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Michael Fretz - Interaction Designer &#187; Webapplikation</title>
	<atom:link href="http://www.michaelfretz.com/category/arbeit/webapplikation/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.michaelfretz.com</link>
	<description>Interaction Design Studium Blog</description>
	<lastBuildDate>Sat, 25 Jun 2011 20:57:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.3</generator>
		<item>
		<title>Migros Terra Suisse &#8211; Who Is Muh</title>
		<link>http://www.michaelfretz.com/2010/07/10/migros-terra-suisse-who-is-muh/</link>
		<comments>http://www.michaelfretz.com/2010/07/10/migros-terra-suisse-who-is-muh/#comments</comments>
		<pubDate>Sat, 10 Jul 2010 10:17:42 +0000</pubDate>
		<dc:creator>Michael Fretz</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Webapplikation]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[migros]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[Portfolio]]></category>
		<category><![CDATA[xml]]></category>

		<guid isPermaLink="false">http://www.michaelfretz.com/?p=3228</guid>
		<description><![CDATA[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 &#8220;Who is Muh&#8221;. What is &#8220;Who is Muh&#8221;? &#8220;Who is Muh&#8221; is an interactive platform for the Migros [...]]]></description>
			<content:encoded><![CDATA[<p>The last couple of weeks I had the possibility to work for <a href="http://www.jvm.ch" target="_blank">Jung von Matt</a>, one of the leading advertisement agencies in Europe. I worked on different small projects but mainly on the <a href="http://94.126.17.222/" target="_blank">Migros Terra Suisse Microsite &#8220;Who is Muh&#8221;</a>.</p>
<p><strong>What is &#8220;Who is Muh&#8221;?</strong><br />
&#8220;Who is Muh&#8221; 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.</p>
<p><img class="alignnone size-full wp-image-3243" title="migros_terrasuisse" src="http://www.michaelfretz.com/wp-content/uploads/2010/06/migros_terrasuisse2.jpg" alt="" width="578" height="419" /></p>
<p><span id="more-3228"></span></p>
<p><strong>Terra Suisse Animals and there Language</strong><br />
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.</p>
<p><img class="alignnone size-full wp-image-3233" title="terrasuisse_animal_music" src="http://www.michaelfretz.com/wp-content/uploads/2010/06/terrasuisse_animal_music.jpg" alt="" width="580" height="439" /></p>
<p><strong>Muh Mix</strong><br />
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).</p>
<p><img class="alignnone size-full wp-image-3234" title="terrasuisse_animal_sound_1" src="http://www.michaelfretz.com/wp-content/uploads/2010/06/terrasuisse_animal_sound_1.jpg" alt="" width="580" height="439" /></p>
<p><img class="alignnone size-full wp-image-3235" title="terrasuisse_animals_sound" src="http://www.michaelfretz.com/wp-content/uploads/2010/06/terrasuisse_animals_sound.jpg" alt="" width="580" height="439" /></p>
<p><strong>iPhone App</strong><br />
In addition to this site there is an iPhone app, available on the iTunes Store. Install it and enjoy cute animals on your phone.</p>
<p><img class="alignnone size-full wp-image-3236" title="terrasuisse_iphone" src="http://www.michaelfretz.com/wp-content/uploads/2010/06/terrasuisse_iphone.jpg" alt="" width="580" height="439" /></p>
<p><strong>Coding Base</strong><br />
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 <a href="http://www.cubera.ch" target="_blank">Cubera Solutions GmbH</a>. 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.</p>
<p><img class="alignnone size-full  wp-image-3237" title="terrasuisse_tellafriend" src="http://www.michaelfretz.com/wp-content/uploads/2010/06/terrasuisse_tellafriend.jpg" alt="" width="580" height="439" /></p>
<p><img class="alignnone size-full wp-image-3239" title="iPhoneApp" src="http://www.michaelfretz.com/wp-content/uploads/2010/06/iPhoneApp.jpg" alt="" width="580" height="439" /></p>
<p><strong>Looking back</strong><br />
After finishing this project I&#8217;m very happy with it. All requested functionality could be built even-though we didn&#8217;t know if it is possible in the first place. The site works quite good and its cute and fun to play with it.<br />
Many thanks to Claude Ebersold from <a href="http://www.jvm.ch" target="_blank">Jung von Matt</a> 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!</p>
<p><strong>Try it</strong><br />
You can try this application <a href="http://94.126.17.222/" target="_blank">here</a> (german)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.michaelfretz.com/2010/07/10/migros-terra-suisse-who-is-muh/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Studio Revo</title>
		<link>http://www.michaelfretz.com/2010/02/07/studio-revo/</link>
		<comments>http://www.michaelfretz.com/2010/02/07/studio-revo/#comments</comments>
		<pubDate>Mon, 08 Feb 2010 03:51:32 +0000</pubDate>
		<dc:creator>Michael Fretz</dc:creator>
				<category><![CDATA[Webapplikation]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[php]]></category>

		<guid isPermaLink="false">http://www.michaelfretz.com/?p=3121</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>My roommate <span>Junya</span> Sakino is a talented filmmaker here in Los Angeles. In the last couple of days we quickly build his website. The site is <span>WordPress</span> driven and uses a couple different <span>plugins</span>. The website design was created by <span>Junya</span> and I build it into <span>WordPress</span>. I used the <span>capricon</span> 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 <span>WordPress</span>. Using <span>WordPress</span> as a <span>CMS</span> is one of the quickest solutions and its easy for both, the developer and the customer.<img class="alignnone size-full wp-image-3122" title="studio-revo" src="http://www.michaelfretz.com/wp-content/uploads/2010/02/studio-revo.png" alt="studio-revo" width="580" height="393" /></p>
<p>Visit his website: <a href="http://www.studiorevo.com" target="_blank">www.studiorevo.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.michaelfretz.com/2010/02/07/studio-revo/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>St.Moritz TV</title>
		<link>http://www.michaelfretz.com/2010/02/04/internship-project-st-moritz-tv/</link>
		<comments>http://www.michaelfretz.com/2010/02/04/internship-project-st-moritz-tv/#comments</comments>
		<pubDate>Thu, 04 Feb 2010 23:13:49 +0000</pubDate>
		<dc:creator>Michael Fretz</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[Internship USA]]></category>
		<category><![CDATA[Webapplikation]]></category>
		<category><![CDATA[Webdesign]]></category>
		<category><![CDATA[Work]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[internship]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Prototyp]]></category>
		<category><![CDATA[USA]]></category>
		<category><![CDATA[Video]]></category>

		<guid isPermaLink="false">http://www.michaelfretz.com/?p=3105</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-full wp-image-3108" title="stmoritztv_01" src="http://www.michaelfretz.com/wp-content/uploads/2010/02/stmoritztv_01.jpg" alt="stmoritztv_01" width="580" height="200" /></p>
<p>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.</p>
<p><strong>What is this project?</strong><br />
The website <a href="http://www.stmoritztv.ch" target="_blank">www.StMoritzTV.ch</a> 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.</p>
<p><strong>What was the goal?</strong><br />
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  <a href="http://www.surveymonkey.com/s/BCZFQM9" target="_blank">feedback</a>. We want to find out how we can make it most enjoyable for its user.</p>
<p><em>But hey, let&#8217;s get geeky :)</em><br />
<span id="more-3105"></span> <img class="alignnone size-full wp-image-3112" title="stmoritztv_03" src="http://www.michaelfretz.com/wp-content/uploads/2010/02/stmoritztv_03.jpg" alt="stmoritztv_03" width="580" height="200" /><br />
<strong>What technology did I use?</strong></p>
<p><strong>Video player with Open Source Media Framework:</strong></p>
<p>The player is built with the <a href="http://opensource.adobe.com/wiki/display/osmf/Open+Source+Media+Framework" target="_blank">Adobes Open Source Media Framework</a>. We had to add some functionality into the player as the version we used didn’t have all functions we needed by the time we developed it. For example we had to build in a video time calculator and a function to read the source for the videos from the XML. Furthermore I had to implement a function to allow jumping to a requested video. For this I used external interface in actionscript to send data into the player from the html page. In this way I do not have to reload the website again if a new video should be played. Of course the play-list is continuously loading the next video as soon as the current video finished playing.<strong></strong></p>
<p><strong>Next Up</strong><br />
The “NextUp” area is build with flash and reads the same XML as the video player. Every time a new video starts to play the video player calls a Javascript function in the html site. This Javascript function send the current played video into the NextUp flash file where I update the view class. If one of the nodes will be pressed in the “Nextup”, it calls a Javascript function too and sends the requested video to the video player.<br />
<img class="alignnone size-full wp-image-3110" title="stmoritztv_02" src="http://www.michaelfretz.com/wp-content/uploads/2010/02/stmoritztv_02.jpg" alt="stmoritztv_02" width="580" height="200" /><br />
<strong>HTML, CSS and Javascript</strong><br />
I created, based on the delivered design by Almer/Blank, the HTML and CSS part of the website. Different Javascript functions are responsible for handling the requested videos and advertisement .</p>
<p><strong>Web hosting</strong><br />
The current version of StMoritzTV is hosted by<a href="http://www.cubera.ch">Cubera Solutions GmbH</a>. Hosting on a Swiss web hosting company helps us to keep ping time low and provides us with a reliable service.<br />
Happy testing :)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.michaelfretz.com/2010/02/04/internship-project-st-moritz-tv/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

