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.

Wile building the design we tried to bring in the different “Doshas”:

• Vata(Air, Wind) and Pitta (Water), this part should be demonstrated with the blue areas in the design. Furthermore we added a zodiac sign. The sign of Libra which stands for balance and stability.
• Kapha is demonstrated with the use of the different brown colors.

We used plants in the design because its an important part of the Ayurveda therapy.

Another aspect of building the design was the simplicity. We focused on a easy to use layout and tried to make it a clean and fast loading design.

Behind the website we used the Cubera CMS, a content management system build by our company. This way we can provide a easy cms for our client without making the maintain for the client to complicated. The website is build in French and English.

Thanks to Michèle Gnos for this great Design and Dominik Brumm for his support with the CMS.

Visit the website here: www.sridhanwantari.com

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

Visit his website: www.studiorevo.com

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 :)

What technology did I use?

Video player with Open Source Media Framework:

The player is built with the Adobes Open Source Media Framework. 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.

Next Up
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.

HTML, CSS and Javascript
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 .

Web hosting
The current version of StMoritzTV is hosted byCubera Solutions GmbH. Hosting on a Swiss web hosting company helps us to keep ping time low and provides us with a reliable service.
Happy testing :)

My solution was to use this:

#parent{
width:50px;
}
#parent img{
max-width:100%;
height:auto;
}

<div id="parent">
	<img src="http://www.michaelfretz.com/wp-content/uploads/2009/10/IMG_1794.jpg" alt="Los Angeles" />
</div>

This way of handling this problem doesn’t make the file size smaller but it changes the appearance of the image to the width of the div tag. It might not be the best way to do it but it’s a quick and dirty way which might help you.

The final result of this script is a picture, which is only 50px wide instead of 580px.
The only disadvantage is that the file size of the image is still the same.

Download the Source Files