Fresh Click Media » Blogging

October web round-up

Shane — Fri, 31 Oct 2008 21:26:24 +0000

It’s been a busy old month, and with so much time working, I’m going to share some of the things that have interested me during October.

Windows 7 Desktop Improvements

With hardware compatability issues and a reluctance from users and computer manufacturers to adopt it, Vista hasn’t perhaps been the success that Microsoft had hoped. The next version of Windows gets a preview over at channel9. There’s quite a lot of verbal fluff at the beginning, but forward through and you’ll get an idea of some of the features that’ll be present in the next version.

ASP.NET MVC Beta

Many of the great frameworks, such as CodeIgniter and Ruby on Rails use a MVC architecture, and it’s a concept that many web developers are familiar with. Maybe not so developers who have exclusively used ASP.NET for their development. Since the introduction of Visual Web Developer Express, developing has become very attractive for hobby developers wishing to get to grips with ASP.NET. I think the development of ASP.NET MVC will encourage those familiar with the pattern to give it a go. Scott Guthrie describes the beta release on his blog.

Microsoft to ship jQuery with future versions of Visual Studio

I’ve been using jQuery alongside ASP.NET for several months now, and find it to be an excellent JavaScript library. I was quite shocked that Microsoft will be distributing it with future versions of Visual Studio (including express versions), providing support for it, and providing intellisense support for it. Good on ‘em!

Google releases Google Earth for iPhone/iPod Touch

I’d definitely recommend a download of free app Google Earth – well worth taking a look.

For more information, head over to the Google Earth on the iPhone page.

Google Android Phone

Following the launch of Chrome , Google is pressing ahead with Mobile Device Platform Android. Now the first handset, the T-Mobile G1 has hit the market. It’s certainly no looker, but Google is a company that has the expertise to change the mobile market, and I’ll be keeping an eye on things, that’s for sure. For now though, I’ll keep my iPhone.

No opera for iPhone

Well well, a version of Opera has been developed for the iPhone, but Apple has refused to add it to their App Store, stating that it is too similar to Safari. So, I won’t be holding my breath for a version of Firefox, either. John Gruber offers his opinion over at Daring Fireball.

ASP.NET Gravatar Control Update – Full Source Included

Shane — Thu, 12 Jun 2008 20:45:32 +0000

With gravatars now becoming ubiquitous in blogs and forums, I have developed an ASP.NET Control that encapsulates their functionality in a simple, reusable component. It’s so easy to use, you can download and be using it on your ASP.NET sites within minutes.

I introduced the control in February of 2008, and updated the functionality in March of 2008.

I’ve since had a lot of interest in the source code for the control, and so this post describes how the control works, as well as providing a download containing the control, as well as the full control source and example website that uses the control.

OK, let me download it already!

Download the Control and get started. Note that the demo projects included in the ZIP were written in Visual Studio 2005, so if you’re using Visual Studio 2008, you’ll need to convert the solution. If you’ve not done a conversion before, just follow the instructions that Visual Studio provides. Please also note that the solution will not open in Express Editions, since they do not support control projects. However, you can still use the control that’s included in the ZIP file.

Unzip the .zip download, and you’ll have the following folder structure:

The root contains a small readme file, Visual Studio solution, FreshClickmedia.dll – the gravatar control assembly, Freshclickmedia.Web control project and GravatarSite website, which contains a few control examples.

Opening the solution in visual studio will give you this solution structure:

Fire up the website, and you should see something like this:

Examining the Code

    Gravatar Examples

    My email address, size of 80 pixels:
        

    No email address, with default image (absolute url) specified:
        

    Email address not associated with Gravatar, with no default image:

The control requires an email address:

For my email address, I get the following generated HTML:

And if we look at the generated source:

The default produces a hyperlink off to the Gravatar site with a title “Get your avatar”. The image contains the MD5 email hash, a rating of “G” (suitable for all audience types), and a size of 80.

Customisation

The control supports a number of properties supporting the customisation of its output.

Size

The size property of the control can be in the range 1 to 80. If it is outside this range, a default of 80 will be used.

MaxAllowedRating

The ‘highest’ allowed rating of image.

A G rated gravatar is suitable for display on all websites with any audience type.
PG rated gravatars contain may contain rude gestures, provocatively dressed individuals, the lesser swear words, or mild violence.
R rated gravatars may contain such things as harsh profanity, intense violence, nudity, or hard drug use.
X rated gravatars may contain hardcore sexual imagery or extremely disturbing violence.

OutputGravatarSiteLink

True by default, determines whether a hyperlink linking to the gravatar website will be output around the image.

LinkTitle

“Get your avatar” by default, allows the customisation of the ‘title’ attribute of the link (obviously doesn’t apply if OutputGravatarSiteLink property is set to false.)

DefaultImage

URL encoded URL, protocol included, of a GIF, JPEG, or PNG image that should be returned if either the requested email address has no associated gravatar, or that gravatar has a rating higher than is allowed by the “MaxAllowedRating” property.

The code snippet below shows the associated properties.

Examining the control code

The Gravatar control derives from System.Web.UI.WebControls.WebControl and overrides the Render method.

The various properties such as Email are all implemented as simple C# properties, with various attributes depending on the property.

[Bindable(true), Category("Appearance"), DefaultValue("80")]
public short Size
{
	get
	{
		return _size;
	}
	set
	{
		_size = value;
	}
}

These properties are then used in the Render method to write out HTML using the method’s HtmlTextWriter parameter.

The Render method begins by adding the default attributes to the render, ensuring that the size is within the valid range of 1 to 512, and initialises the gravatar URL:

AddAttributesToRender(output);

// if the size property has been specified, ensure it is a short, and in the range
// 1..512:
try
{
    // if it's not in the allowed range, throw an exception:
    if (Size < 1 || Size > 512)
        throw new ArgumentOutOfRangeException();
}
catch
{
    Size = 80;
}

// default the image url:
string imageUrl = "http://www.gravatar.com/avatar.php?";

If an Email address has been supplied, the MD5CryptoServiceProvider hashes the email and a StringBuilder converts this to the required format:

if( !string.IsNullOrEmpty( Email))
{
    // build up image url, including MD5 hash for supplied email:
    MD5CryptoServiceProvider md5 = new MD5CryptoServiceProvider();

    UTF8Encoding encoder = new UTF8Encoding();
    MD5CryptoServiceProvider md5Hasher = new MD5CryptoServiceProvider();

    byte[] hashedBytes = md5Hasher.ComputeHash(encoder.GetBytes(Email));

    StringBuilder sb = new StringBuilder(hashedBytes.Length * 2);
    for (int i = 0; i < hashedBytes.Length; i++)
    {
        sb.Append(hashedBytes[i].ToString("X2"));
    }

    // output parameters:
    imageUrl += "gravatar_id=" + sb.ToString().ToLower();
    imageUrl += "&rating=" + MaxAllowedRating.ToString();
    imageUrl += "&size=" + Size.ToString();
}

The final part of the method assigns a default image, if one has been specified, outputs the site ink, if required, outputs the required attributes and tags.

// output default parameter if specified
if (!string.IsNullOrEmpty(DefaultImage))
{
    imageUrl += "&default=" + HttpUtility.UrlEncode(DefaultImage);
}

// if we need to output the site link:
if (OutputGravatarSiteLink)
{
    output.AddAttribute(HtmlTextWriterAttribute.Href, "http://www.gravatar.com");
    output.AddAttribute(HtmlTextWriterAttribute.Title, LinkTitle);
    output.RenderBeginTag(HtmlTextWriterTag.A);
}

// output required attributes/img tag:
output.AddAttribute(HtmlTextWriterAttribute.Width, Size.ToString());
output.AddAttribute(HtmlTextWriterAttribute.Height, Size.ToString());
output.AddAttribute(HtmlTextWriterAttribute.Src, imageUrl);
output.AddAttribute(HtmlTextWriterAttribute.Alt, "Gravatar");
output.RenderBeginTag("img");
output.RenderEndTag();

// if we need to output the site link:
if (OutputGravatarSiteLink)
{
    output.RenderEndTag();
}

Using the control on your own projects

As previously mentioned, the download solution will not open properly in Express versions of Visual Studio, since it does not support control projects, but the control, included in the download is supported by all versions of Visual Studio, 2005 and later.

The easiest way to use the control is to add the control to the toolbox. To do this, ensure that you are in design mode (looking at a web page), and right click on the ‘Standard’ group header of the Toolbox. From the context menu, select “Choose Items” and browse to the assembly (Freshclickmedia.Web.dll), and click “OK” to add.

Once you’ve added the assembly, you should see the following:

From there, you can drag the control onto your page and start having fun!

Gravatar Control Update

Shane — Tue, 18 Mar 2008 19:08:58 +0000

Update – 12 June 2008

An updated version of this post, containing full source for the control and explanation is available here.

Original Post

The guys over at Gravatar.com have been hard at work updating their service, and I’ve updated the ASP.NET control I developed to reflect the changes.

The maximum size of Gravatars has now been increased from 80 to 512, so there’s a code change in the Render method:

// if the size property has been specified, and in the range
// 1..512:
try
{
    // if it's not in the allowed range, throw an exception:
    if (Size < 1 || Size > 512)
        throw new ArgumentOutOfRangeException();
}
catch
{
    Size = 80;
}

So, a default of 80 will still be used if the value specified is not within the 1 to 512 range, or it is not specified, but allows for a larger size.

The avatar.php URL serving the images now supports abbreviation, but the code in the control has not been changed.

The image shows the Design time view of the control, with the width set at the default value of 80. I’ve checked the control at 512 pixels, but my Gravatar doesn’t look too good expanded out to that size, so I’ve decided to stick at size 80 for the screenshot!

Gravatar ASP.NET Control

Shane — Fri, 22 Feb 2008 20:59:08 +0000

Update – 12 June 2008

An updated version of this post, containing full source for the control and explanation is available here.

Original Post

I just got myself a freshclickmedia.com Gravatar over at gravatar.com. A Gravatar is a little avatar associated with an email address, and quite a few blogs use them to decorate post comments. Signing up is easy – all you need to do is supply an email address, and image, and give your image a content rating.

The source of the gravatar image tag points to gravatar.com’s image generator and includes an MD5 hash of the email address to prevent email harvesting. A ‘max rating’ parameter prevents the display of unsavoury content.

There are a wide number of blogging gravatar plugins, so I decided to write an ASP.NET custom control to do the job. Here I present the control and its features.

Using the Control

To get up and running, the control requires an email address:

For my email address, I get the following:

And if we look at the generated source:

Customisation

The control supports a number of properties supporting the customisation of its output.

Size

The size property of the control can be in the range 1 to 80. If it is outside this range, a default of 80 will be used.

MaxAllowedRating

The ‘highest’ allowed rating of image.

A G rated gravatar is suitable for display on all websites with any audience type.
PG rated gravatars contain may contain rude gestures, provocatively dressed individuals, the lesser swear words, or mild violence.
R rated gravatars may contain such things as harsh profanity, intense violence, nudity, or hard drug use.
X rated gravatars may contain hardcore sexual imagery or extremely disturbing violence.

OutputGravatarSiteLink

True by default, determines whether a hyperlink linking to the gravatar website will be output around the image.

LinkTitle

“Get your avatar” by default, allows the customisation of the ‘title’ attribute of the link (obviously doesn’t apply if OutputGravatarSiteLink property is set to false.)

DefaultImage

The code snippet below shows the associated properties.

Download and Get Started

You can download the Gravatar Custom Control here. Once you’ve extracted the assembly from the ZIP file, add to the Visual Studio toolbox by right clicking on the toolbox and selecting “Choose Items” from the context menu. Browse to the assembly (Freshclickmedia.Web.dll), and click “OK” to add.

Displaying Amazon lists on your blog using PHP

admin — Mon, 26 Nov 2007 13:18:30 +0000

A common feature of blogs is the listing of albums or books that the author is currently enjoying. This article explains how to set up such a list in Amazon and show it on your blog using PHP and a REST web service.

If you’ve visited Amazon, you’ll have noticed that every time you view an item, it will be accompanied by a number of Lists, or ‘Listmania’ items. Each Listmania list has a title and a list of between 1 and 25 Amazon items.

A listmania that I’ve created can be found here. As you can see, I’m quite a fan of Pink Floyd, but you can obviously put whatever you want in your own list.

To create your list, visit the ‘Your Store’ tab and login. Once you’re in, click on the ‘YOUR PROFILE’ link that appears below the ‘Your store’ tab (which has now changed to include your name.)

Once the page has loaded, scroll down to the Listmania! section, and click on the “Create a Listmania!” List link.

Once the page loads, you will be presented with the opportunity to create your list. Provide a name, your qualifications (I don’t know why this is relevant), and a list of ISBN/ASINs, which uniquely identify the product (there’s more information about these on the page.)

Once the list is set up, we’ll need to make a request to an Amazon web service to get the information to display on the site. The first thing to do is head over to the Amazon Web Services site and sign up a free Amazon web services account. Amazon requires that you do this because you’ll need a ‘developer token’ before you can request any information.

There’s a huge amount of documentation available on the Amazon Web Services site, but we’ll be focussing on calling the web service using REST. This basically means that we’ll be making a web request to a specific URI, and getting back some XML, which we’ll parse and display on the site.

There a large number of web services, but our particular area of interest for retrieving our Listmania information is the Amazon E-Commerce Service. We’ll be using the ‘ListLookupOperation’ to get our Listmania information. The excellent documentation specifies a number of parameters, and our URL will look something like this:

http://webservices.amazon.co.uk/onca/xml?Service=AWSECommerceService&AWSAccessKeyId=&Operation=ListLookup&ListType=Listmania&ListId=&ResponseGroup=ListFull,Images

The Operation parameter is set to ‘ListLookup’ and the ListType to ‘Listmania’. The ResponseGroup determines what information our XML response will contain; in this instance, we’ll get full list information with image data. The AWSAccessKeyId is the ID you received when you signed up for the web services access, and the ListId is the ID of your listmania list (R2LGMJ3BF2KY9B for the one I described earlier.)

Quite a lot of XML’s returned, but a fragment is shown below:


	R2LGMJ3BF2KY9B
	http://www.amazon.co.uk/gp/richpub/listmania/fullview/R2LGMJ3BF2KY9B
	Currently listening to
	Listmania
	9
	1
	2007-06-08
	
		RI3KA9OMXBJK39M
		Final cut
		
			B0001KZM3O
			
				http://ecx.images-amazon.com/images/I/1163ZHTF2RL.jpg
				75
				75
			
			
				http://ecx.images-amazon.com/images/I/21QXBZ2M09L.jpg
				160
				160
			
			
			http://ecx.images-amazon.com/images/I/510WJ1ASB3L.jpg
				455
				455
			
			
			
				The Final Cut: Remastered

Making the request for the XML using PHP

To request the XML, we’ll use CURL, the Client URL Library, available since PHP version 4.0.2. For our needs, the code is quite simple:

$key = "YOURACCESSKEY";
$listID = "R2LGMJ3BF2KY9B";

$url = "http://webservices.amazon.co.uk/onca/xml?Service=AWSECommerceService&AWSAccessKeyId=" . $key . "&Operation=ListLookup&ListType=Listmania&ListId=" . $listID . "&ResponseGroup=ListFull,Images";    	

// make request to amazon:
$c = curl_init( $url);
curl_setopt( $c, CURLOPT_RETURNTRANSFER, 1);
$xmlResponse = curl_exec( $c);
curl_close( $c);

Initially, we define two variables to store our access key and the id of the list we want to access. The next line creates the URL for the REST web service, building up the various parts to include the access key and list id.

We use CURL in the initial call to curl_init, passing in the URL for the web service. The next line, where we call curl_setopt, is important, since it determines that the response from the URL in the curl_exec line will be assigned to a string, rather than being output directly. This is important, since we’re going to be parsing it. curl_exec will get the response and the final line, calling curl_close, closes the CURL session and frees the associated resources.

Parsing the XML

To parse the XML, we’ll use SimpleXML, which requires PHP5. Using Simple XML simplifies XML handling, and fits all our needs for this example.

The obvious questions when parsing some XML are what are the elements that we’ll be parsing, and what are we going to output to the response. Well, looking at the XML fragment shown above gives us some clues as for the XML structure, and for the response, I’ve decided to go for a definition list containing an album image and the album name. For CSS styling, I’ll give the definition list a class of “listmania”. With all this in mind, we get the following PHP code:

$xml = simplexml_load_string( $xmlResponse);

$listManiaHtml = "";

$itemCount = 0;

foreach( $xml->Lists->List->ListItem as $listItem)
{

		$listManiaHtml .= "";
		$listManiaHtml .= $listItem->Item->ItemAttributes->Title;
		$listManiaHtml .= "";
		$listManiaHtml .= "";
		$listManiaHtml .=  "Item->ASIN . "\" title=\"" . $listItem->Item->ItemAttributes->Title . "\">";
		$listManiaHtml .= "Item->SmallImage->URL . "\" alt=\"" . $listItem->Item->ItemAttributes->Title . "\" />";
		$listManiaHtml .= "";
		$listManiaHtml .= "";
}

$listManiaHtml .= "";

To begin, the XML response from the REST web service is loaded using simple_xml_load_string function. I define a variable to store the listmania output, and begin by assigning the opening tag of the definition list.

Using simple XML’s traversal methods, I can associate XML elements in the response directly using a chained -> syntax. Each album is enclosed in a ListItem element, and this is referenced in the foreach loop. Within this loop, the ListItem element’s Title, ASIN (Amazon identifier), and small image URL are extracted and appended to the listmania output variable. The ASIN is used in a hyperlink to link directly to the album on the Amazon website.

Doing a simple echo on the resulting listmania variable is all that’s then required to output the semantic listmania. Shown below is what the output looks like:


    The Final Cut: Remastered
    
        
            
        
    

    Libertad (Special Edn)