Michael Doyle | Blog

Web Design – Wireframing (A Beginners Guide)

Smashing magazine had a lengthy post about wireframing (which I mentioned previously), BuildInternet have a crash course on wireframing.

http://buildinternet.com/2009/09/why-your-next-website-should-be-designed-with-wireframes/

In the article, a great online wireframing application is recommended called HotGloo. Signup is required, but it is free and you get your own subdomain name which allows you to share your projects with clients.

PHP – Retrieve and display your recently listened to tracks from last.fm

I've been playing around with retrieving my recently listened to tracks from last.fm so that I can use it on my portfolio. Last.fm provides an XML file of recently listened to tracks, so I wrote a php function to retrieve them. Below is the script, it's just basic HTML at the moment so that it can be properly stylised. I've commented all the code so you can see how it works.

//enter your last.fm username
$username = 'spahndirge';
//in seconds, how long to wait until your recently listened tracks are checked for new entries
$time = 300;
//this is the URL of the last.fm xml file of your profile
$lastfmFile = "http://ws.audioscrobbler.com/1.0/user/$username/recenttracks.xml";
//the number of tracks you want to display, this can't be above 9
$numOfTracks = 5;
 
function getTracks($username, $time, $lastfmFile, $numOfTracks) {
//this will be the local xml file written to your server
$myLocalFile = $username.'.xml';
//if the local xml file doesn't exist or if local xml file is older than the time set
if ((!file_exists($myLocalFile)) || (time()-filemtime($myLocalFile)>$time)) {
	//get the last.fm xml file and place it into the contents variable as a string
	$contents = @file_get_contents($lastfmFile);
	//open the local file or create it if it doesn't exist
	$temp = fopen($myLocalFile, "w");
	//write the contents of the lastfmFile to the local file
	fwrite($temp, $contents);
	//close the file
	fclose($temp);
}
//grab the local xml file and place it into the xml variable
$xml = @simplexml_load_file($myLocalFile);
//create an unordered list of the track name and artist from the local XML file
print "
<ul>";
	for ($t = 0; $t <= $numOfTracks; $t++) {
		print "\n
<li><a href=\"".$xml->track[$t]->url."\" target=\"_blank\">".$xml->track[$t]->name." - ".$xml->track[$t]->artist."</a></li>
 
";
	}
	print "</ul>
 
";
}
 
getTracks($username, $time, $lastfmFile, $numOfTracks);

It isn't the most efficient code, but it works!

I set the time to 300 seconds (5 minutes), it's around the average time it takes to listen to a song. This is to reduce server load and loading times; there's no point in checking for a new song every minute or two.

If you have any improvements on the script, let me know.

Web Development – Mod Rewrite Rules

Noupe has a good article on the basics of Mod Rewrite and a list of further resources on it.

http://www.noupe.com/php/10-mod_rewrite-rules-you-should-know.html

Web Development – htaccess

Noupe has an article on htaccess simple tips and techniques.

http://www.noupe.com/php/htaccess-techniques.html

Web Design – Creating A Portfolio Site

Elliot Jay Stocks made an interesting 2 part video on how to make a portfolio site. Very good information  and things to think about in them:

http://carsonified.com/blog/design/how-to-design-a-portfolio-site/

http://carsonified.com/blog/design/how-to-design-a-portfolio-site-part-2/

Web Design – 10 Common Mistakes

Noupe has a great article about the 10 most common mistakes in web design...

http://www.noupe.com/design/ten-most-common-design-mistakes.html

Web Development – Inishross House

Finished the Inishross House web site. It was built with the 960 grid system. All pages validate except for where lightwindow is used. The pages use a Transitional DOCTYPE, a custom XHTML DTD should be made to sort this issue out. A List Apart has a good tutorial on how to do this.

http://www.alistapart.com/articles/customdtd/

Web Development – Developing from a PS design

I mentioned previously that sixrevisions.com gave a good tutorial on how to create the Web 2.0 look in photoshop. They've now followed up on that article with a tutorial on how to code it in CSS and XHTML.

http://sixrevisions.com/tutorials/web-development-tutorials/coding-a-clean-web-20-style-web-design-from-photoshop/

One concern about this tutorial is the heavy reliance on images for the design rather than CSS.

Web – Modal Windows

Smashing Magazine has a good round up of the different typs of modal windows.

http://www.smashingmagazine.com/2009/05/27/modal-windows-in-modern-web-design/

Web – Graded Browser Support

When developing web sites, how the site works and looks in different browsers should be tested. This can be a time consuming process of creating custom hacks, tweaking code, developing alternate workarounds or even ignoring incompatibility issues.

One of the main problems confronted is the selection of which browsers should be selected to test with. Yahoo developer network has created a list of "A-Grade Browsers". A-Grade Browsers are fully functional browsers which account for 96% market share.

http://developer.yahoo.com/yui/articles/gbs/

Testing time can be greatly reduced when used with browsershots.org