Archive for the ‘Webdesign’ Category
Homage to TED.com
Hello, my name is Morten, and I’m a TED.com addict. (“-Hello Morten”).
TED is definitely my favorite source for inspiration and ideas. I’ve spent countless hours watching and listening to all those facinating talks over the years. So what better place to look for inspiration for my new header?
The original: Ideas worth spreading
I’ve been testing out a few colors for my header the last few days, and one if the things I’ve tried is using a warm orange, or stronger red on the logo and when hovering over the main navigation. The TED logo must have been lingering in the back of my mind, because today I suddenly realized that what I was working on was basically a TED lookalike. So I simply decided to go all out, and create as complete a duplicate to the TED logo as I could, with my own little twist on their lovely slogan “Ideas worth spreading”. Pappmaskin.no is also all about spreading ideas (what other reason for running a website?), but it is also about making things, and making things happen.
My version – Things worth making
I have a feeling that I won’t be running this particular header for long, but I think it is a nice way to pay tribute to the most important website in the world. And please don’t tell TED about this, as I’ve probably spent at least 15 minutes in GIMP making this. If their lawyers comes after me for plagiarism all that time would have been wasted. And yes, that was a joke :)
Colors
The red TED color has the HEX #FF2B06, and the grey looks like #595959.
Fonts
Helvetica Neue LT Std Heavy Expanded and Helvetica Neue LT Std Light. The TED logo doesn’t quite match Helvetica, at least not Heavy Expanded, and I believe it is hand made, but Helvetica is what they recomment TEDx organizers to use, and it looks pretty nice as well, though not identical.
9 recent reasons to love TED.com
Urørt – sketches for new design
We are working on a few improvements to the design of http://Urørt.no that I wanted to share. These are early sketches, more a basis for discussion than anything, but hopefully a few of the ideas will be realized.
New mixtape feature on Urørt.no
We are doing a soft launch of a new feature on Norwegian music demo site Urørt.no (nrk.no/urort for those lacking ÆØÅ), namely the option to create you own mixtapes. Each mixtape can contain 20 songs, selected from the over 57000 unsigned mp3s uploaded by the 22000 bands on the site, and you can share it with friends by sending them to Urørt, or by embedding the player in your own website, like this:
Gå til Urørt for å lage din egen miksteip
A while back we also took the time to contact facebook to have them add our domain nrk.no to their Share Partner program, which was necessary to be able to automatically embed flash in their site, when you use the facebook share feature.
Oh, and every mixtape also comes in the form of a podcast rss so you don’t have to manually download each track if you want to keep all the songs on your harddrive or you ipod.
So if you are like new music and like showing it off, then head on over and create an account.
How to present a music festival-guide?
My colleagues over at Lydverket published a great festival guide today, and I have been thinking of ways to enhance it.
We recently made a page that fetches artsts info from several websites, like imeem, youtube, last.fm, flickr and wikipedia, for use together with NRKs radio playlists, and I wanted to miks Lydverkets guide with this aristinfo service.
The easiest way would be to simply link each artist in their festival guide to the corresponding arist page, but the first problem is that the layouts are quite different. To solve this we changed the artist info page to take a folder id as a paramter, so that we can change its layout dynamically. And is so happens that we have a folder that has no layout at all, which means I can do something like this:
http://www2.nrk.no/spillelister/LaatInfo.aspx?artist=Santogold&ppfolder=p3
This gave me the sudden urge to just insert an iframe dynamically under each artist name in the festival guide, so that you can simply click on an artist, and get a ton of information, music, videos, etc, but the problem with this is that there is simply TOO MUCH information.
Luckily, the artist info page is build up of several smaller, freestanding pages, placed in the artist info page using iframes (mostly). This means that I can break it all up, and perhaps create a tabbed interface for each artist in the festival guide, which I will work some more on tomorrow.
But until then I want to test a few other things:
A few minutes ago I went through the list of the 17 bands that are scheduled to play at the Hove festival (www.hovefestivalen.no), seached them all up on youtube, and placed them in a standard youtube playlist. I then created a custom player, that looks like this:
Hove – Day 1:
Hove – Day 2
Perhaps it could be as easy as this? I you are reading a festival guide, what else do you need than a fast way to check out each artist? Is one youtube video is for me enough to tell me wether or not to see a band live? Perhaps.
I think I will insert this little youtube player in the page and ask around tomorrow if it works or not, and then I will do some tests with the youtube api to see if a can extract my playlist as xml and present is as I wish.
Gameinfo + Gametrailers + Youtube Mashup
Norsk? Du finner en norsk versjon av denne artikkelen på NrkBeta.no
I recently made a Gameinfo service for spiller.no. It pulls in licenced gameinfo from our partner GameXplore though XML, and combines it with a search for related videoes from Youtube before it is presented on the page.
Example: FIFA STREET 3 Gameinfo – NRK Spiller
Youtube + Google Api
I made the Youtube part as a standalone page, and I include it with iframe. The reason I used Iframe was to make it easily reusable on other projects where it would fit to do something similar. I can for instance include it in my blog like this:
The page takes any search term as a GET, in this example it simply queries the youtube google api with the title of the game, with a few extra parameters (limit on the number of returned movies + a filter to remove “adult content”). I spent some time to create the XSLT to convert the xml from youtube/google to html, which is basically the same format for many of Googles services. I spent hours trying to find out if someone had created this already, but since I couldn’t find anything I had to create it myself. If you want to learn more about the youtube api I suggest starting at the Youtube Api group on Google Groups.
Open source
I have gotten some emails asking for the xslt for the youtube search, so I wanted to share it here:
This is my input, an example Youtube search
This is my example output:
http://pappmaskin.no/opensource/youtube/youtube.php
And here is the xslt I used to produce the above result:
http://pappmaskin.no/opensource/youtube/youtube3.xsl
If you have any questions, feel free to ask in the comments.
Spam? Porn? Nope!
I was of course a little worried about what the youtube search would return, so when testing I went through quite a few games to see if the search returned movies that were unrelated to the gametitle, or contained nudity, but so far it looks really good, the youtube videos are actually the most interesting part of the service, so I’m really happy with it!
Blip.tv gametrailers
Yesterday I also added gametrailers to the mix, check out the gamepage for Assassins Creed for an example (click on the huge image at the top of the page) to make it play. I have bought a lisence for the wonderful Jeroen FLV Media Player which I use to present the gametrailers.
New gametrailers page, based on blip.tv
After that I spent a few minutes to create a new page that lists all the latest gametrailers published through GameXplore. I use the Jeroen Flv Media Player for this page as well. I created this yesterday, so I have to debug it a little bit before we start to promote it, and I also have to consider to increase the video buffer time, it seems like blip.tv har pretty slow servers. Right now there is a five second buffer, which should be more than enough, but even with broadband connection the video stops and buffers every five second. I don’t want people to wait forever for the video to buffer, but it is super irritating when the video stops every 5 seconds to buffer, so I have to decide what to do with it. One (hard) solution could be to download all the .flv to my server and play them from there… I am a big fan of blip.tv, they have the best player around, and their cross posting abilities are great (at least in theory, I still haven’t gotten it to work with this blog or myspace), so I am a little dissapointed to discover that the blip.tv servers (or lines?) are so slow to deliver video. (to Norway at least).
Thickbox
I love the Jquery javascript library, and I love Thickbox, so I decided to use it on the Screenshots on the site, popping them up in their own little box. I modidied the thickbox script and css slightly, replacing the animated loading gif and moved things around a little bit, and I am really happy about the outcome.
Add the spiller.no Gameinfo search to your browser
Prøv også denne: Installere søkemotor for spiller.no
Spiller.no Gameinfo
Sjekk ut info, screenshots, trailers og anmeldelser på nye og kommende spill:
So there it is, hope you like it :)
To embed the search in your site:
<div class=”placeholder”><h3>Spiller.no Gameinfo</h3>
<span style=”color: #fff; width: 160px; font-size: 0.8em;”>Sjekk ut info, screenshots, trailers og anmeldelser på nye og kommende spill:</span>
<form id=”gamesearchform” name=”gamexploresearch” enctype=”application/x-www-form-urlencoded” method=”get” action=”http://www.nrk.no/spiller/gameinfo/?”>
<fieldset>
<input type=”hidden” value=”143″ name=”task”/>
<input style=”padding: 1px 0 2px 0; width:100px; border:1px solid #F7F7F7; border-width: 0pt 1px 1px 0pt;” type=”text” value=”" maxlength=”500″ name=”finn”/>
<button type=”submit”><span>Søk</span></button>
</fieldset>
</form></div>
Soundtrack of my life
I’ve been using the VirbTunes plugin for Itunes for a while now, and wanted to find a way to display a list of my most recently played songs on this blog. Virb seem to have hidden this feature a little, I actually had to ask them to find it, so if you are as bad as me at finding stuff, and want to try this, the url is http://www.virb.com/transport
There is a lot of great stuff to be said about Virb, but so far the favorite feature is their plugin for Itunes. Unlike the Last.fm application VirbTunes is a proper plugin, so you don’t have to start it separately like you have with Last.fm, plus the newly discovered transport feature, that lets you display all kinds of content on you own site, and not only that, you can css it like you want to, and make all the content blend in perfectly with your theme. Their transport page is also very well structured, you don’t have to fiddle around creating boring looking widgets like on flickr, last.fm, or youtube for that matter, you just just the pulldowns, select you content, and off you go. Perfect!
Testing Pageflakes.com
Grafiskformgivning.no
Customer: Oh! Ohren Grafisk Formgivning
Delivered: Advice and production of a flashbased minisite. Webdev, Flash (AS2), design and development of an XML-driven gallery, contact form with PHP backend.
Designs delivered by customer as PSD.
Release: March 2007
Ohren Grafisk design – Frontpage
Ohren Grafisk design – Portfolio – List of clients
Ohren Grafisk design – Example portfolio page
Flash-based xml-driven slide show. Reads images, titles and description from the server, making it fairly easy to update.
Oh! OHREN Grafisk formgivning – Contact
Flash frontend and PHP-backend.
Adsense Optimised Sites – Visual Breakdown
Do you wonder where to put your ads? This blogpost analyze the placement of adsense ads in top earning malaysian blogs. Nothing beats experience.
And the experience says that no-one sees ads at all. But I guess we all knew that already :)
Creating passionate users
Creating Passionate Users: Can you have too much ease-of-use?:
“Think about it… skiing, dancing, chess, photography, flying, dressage, gardening, dog training, environmental activism, religion… when people are into any of those things passionately (as opposed to casually supportive), they keep wanting to get better! People who are passionate always have an opportunity (which they grab) to keep improving. To keep learning more. To improve their skills and knowledge about whatever it is they love so much. They read and they practice.”
