Theo Stråhlén » Programming http://theodesign.se The blog and portfolio of Theo Stråhlén. Currently a student at Hyper Island. Thu, 27 Jan 2011 21:05:24 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Stena Line: Ledighet Deluxe http://theodesign.se/stena-line-ledighet-deluxe/ http://theodesign.se/stena-line-ledighet-deluxe/#comments Wed, 20 Oct 2010 16:21:03 +0000 theo http://theodesign.se/?p=213 Continue reading →]]>

This was from the start a school project here at Hyper Island. But since we are not allowed to develop a complete website me and Henrik Porseland decided to do this as a freelance work.
Stena Line is one of the world’s largest ferry operators, with ferry services serving Scotland, Sweden, Northern Ireland, Denmark, Norway, England, Wales Ireland, Germany, Netherlands and Poland. This website is made for StenaLine to promote the new boat between Karlskrona, Sweden and Gdynia, Poland.

It’s mainly a flash website, but to celebrate this new boat with StenaLine we built a confetti machine. The user can go to the website and blow in her or his microphone and confetti will be spred out at the terminal in Karlskrona. You can also see a live stream of  the celebration. To be able to celebrate we use facebook connect, but it’s also possible to use your email.

How does this work? When the user blows into the microphone a signal sents to the computer at the terminal. When it receives a signal it triggers a Phidget motor which releases the confetti from a tank. Here is some more screenshots from the site. Hope you like it.

Here is the link: http://ledighetdeluxe.se/#/en/

Credits: Alexander Gårdenberg, Ida Ragnarsson, Pawel Zwolinski, Henrik Porseland, Veronica Wallström, Alexander Rosén and of course the rest of DM11 Karlskrona.

]]> http://theodesign.se/stena-line-ledighet-deluxe/feed/ 6 FIFA World Cup Twitter Visualization http://theodesign.se/fifa-world-cup-twitter-visualization/ http://theodesign.se/fifa-world-cup-twitter-visualization/#comments Sat, 19 Jun 2010 11:15:56 +0000 theo http://theodesign.se/?p=148 Continue reading →]]>

I guess there is many of you that already seen this site but I thinks it’s very well done. It’s The Guardian who’s behind it and it shows tweets during every Fifa Worl Cup game. It looks good and it’s a cool idea. Check it out!
Last year I saw this similar visualization from The New York Times, it’s the same thing with reactions from Twitter but mapped out in the U.S. during Super Bowl, Steelers vs. Cardinals. I think it’s fun to have a look at this kind of things and it’s great inspiration. Visualizations from social media is cool!

]]> http://theodesign.se/fifa-world-cup-twitter-visualization/feed/ 169 jQuery OSX Looking Dock http://theodesign.se/jquery-osx-looking-dock/ http://theodesign.se/jquery-osx-looking-dock/#comments Tue, 15 Jun 2010 10:55:18 +0000 theo http://theodesign.se/?p=129 Continue reading →]]>

I am very interested of what jQuery can do and the plugins there is keeps impressing me. I saw the world cup site Twitter did and at the top they were using some kind of dock with the flags of the teams. When I and Henrik Porseland were coding whatisxv.com we wanted a dock with students but the time ran out and we forgot about it.

But now I found jqDock! It’s very easy to use and i will show a very simple example here. You can do both horizontal and vertical dock menus and custom the looks of it very very easy. As I said before I wanted a dock menu with all the students in my class.

Take a look a the Demo I did

This is how I did it:
First of all to use this wonderful plugin you need jQuery v1.2.3 or later. And then you can download the plugin here.

Start with link the files in your <head> tag. Link in the jqDock source (full or compressed) after jQuery itself as in the example below:

<script type='text/javascript' src='jquery-1.2.3.min.js'></script>
<script type='text/javascript' src='jquery.jqDock.js'></script>

Create a div and put an ID or Class on it. Then fill it with images that you want in your dock menu. In my example:

<div id="dockmenu">
...
<a href="#"><img src="img/student.jpg" title="Student Name" alt="Student Name" /></a>
<a href="#"><img src="img/student.jpg" title="Student Name" alt="Student Name" /></a>
<a href="#"><img src="img/student.jpg" title="Student Name" alt="Student Name" /></a>
...
</div>

To convert your HTML into a Dock, simply call the jqDock function.

<script type="text/javascript">
$(document).ready(function($)  {
	$('#dockmenu').jqDock({align:'bottom', size:65, labels:true});
});
</script>

This code will make the menu expand from the bottom and up and every picture will have a label on it. You can see it in my example.

It’s very easy to style your dock menu as well. Here is the CSS for my menu:

div.jqDockWrap{margin:0 auto;}

div.jqDockLabel {color:#fff;background:#000; font-family:Myriad Pro; padding:4px;
font-size:11px;font-weight:normal;margin-top:-25px!important;white-space:nowrap;}

div.jqDockLabel a, a:hover, a:visited{color:#FFF; text-decoration:none;}

#dockmenu{clear:both;display:block;width:100%;position:absolute;text-align:center;
left:0; bottom:0px;}

#dockmenu img{padding:1px;float:left;display:block;}

Good Luck creating your own dock menu with jqDock!

]]> http://theodesign.se/jquery-osx-looking-dock/feed/ 4 My Sky Status http://theodesign.se/my-sky-status/ http://theodesign.se/my-sky-status/#comments Tue, 08 Jun 2010 18:17:01 +0000 theo http://theodesign.se/?p=116 Continue reading →]]>

Visit the site: http://myskystatus.com

This is a pretty good example of how to market yourself through inviting other companies. Lufthansa wants you to be able to tweet our update your facebook status while you’re in the air. With MySkyStatus that’s possible. It tracks your flight number and creates a tweet about how far above the sea you are and where and when you landed etc.
I think it’s a cool concept and it looks pretty good too!

Agency: Profero, New York

]]> http://theodesign.se/my-sky-status/feed/ 6