I bought this book (one of the very first books to be published on the jQuery Mobile framework) in anticipation of some detailed code examples. While the JQM online documentation is extensive and regularly updated, it does assume a thorough working knowledge of core jQuery, which can prove a stumbling block for anyone interested in JQM and at the same time new to jQuery.

While the book is on the thin side (111 pages) it is generous with code examples and includes a well-narrated overview of the framework. The only word of caution I would give is in terms of versions. The book refers to the Alpha 4 release. JQM has since gone through 3 beta releases and is now on version 1.0 RC1 This does unfortunately date the book slightly in a few areas. However, that said, I would still recommend the book to anyone looking for a high level (and digestible) view of the framework or anyone getting stuck with the jQuery aspect.

Advertisements

The Final Project as the name suggests is the last component of the MSc. It carries one third of the total marks and is equivalent to three modules. The project itself must be for a real client. The module requirements include an application (40%), a project report (30%), a technical specification document (20%), and a final presentation (10%).

The aim of this module is to develop a major piece of work for an actual client and experience the full project life cycle.

This was certainly the most challenging part of the MSc. Not so much in the technical aspects or report writing but simply the amount of work involved. The Project generated a 50 page report with an accompanying 120 page appendix and a 30 page technical specification and of course the application itself (best viewed from your mobile device or Google Chrome).

After something of a shaky start with the initial client a replacement Project Sponsor was found in the form of Comufy – in many ways an ideal client.

Working closely with the team using questionnaires and one-on-one interviews, a project “worth doing” emerged – extending the Comufy marketing suite to the mobile platform. Requirement gathering informed wireframes and mockups, which lead to a proof of concept in the form of a mobile web application, developed using the jQuery Mobile Framework. You can view the application here.

Rather than attempt to summarise the project in a blog post I have included some of the artwork and screen shots that will hopefully give you a flavour:)

Wireframes

 

Mockups

 

Screenshots of application

 


Chris Pederick has created an extremely useful Firefox addon: User Agent Switcher.

Switching the user agent of your desktop browser to that of a mobile device encourages the web server to serve you the mobile version of the site (if it exists). Using Firebug, it is then possible to inspect the code of the mobile site, very handy if you’re wondering how it was done.

The User Agent Switcher comes with some user agents already included, but you can easily add your own!

Google for your user agent string like this: “user agent string for HTC Desire” or visit zytrax.com and copy the string.

Go to the User Agent Switcher > Edit User Agents… > New > New User Agent… Add the name of the handset in the Description field, then paste the string into the field below. As far as I can tell, you can leave the other fields empty. “OK” this, then chose your user agent from the drop down list from the tool bar and F5 and then POW!

Here is ebay.co.uk viewed in Firefox using the HTC Desire user agent string…


According to Opera’s January edition of State of the Mobile Web, the Nokia 2330c was the UK’s 4th most popular handset. I got mine at phones4u.co.uk for £24.95 and a £10 top-up. Not bad if you need to test your mobile site on Nokia/Symbian:o)

Nokia 2330c


I posted on this previously, but looking back think the code may have been a bit OTT for some people. Here is the VERY cut down version of that php code that will parse a twitter feed as plain text:

<?php

$twitterRSS = simplexml_load_file( ‘http://twitter.com/statuses/user_timeline/177618489.rss&#8217; ); //Noel’s twitter

$i = 0;

while ($i <= 4) {

$description =            $twitterRSS->channel->item[$i]->description;

$pubDate =                               $twitterRSS->channel->item[$i]->pubDate;

$guid =                                                 $twitterRSS->channel->item[$i]->guid;

echo $description;

echo ‘<br />’;

echo $pubDate;

echo ‘<br /><br />’;

$i++;

}

?>

Not much to it really, but a nightmare if you’re not used to parsing xml with php.

Below… is the very OTT version:o) this will additionally strip out the user name at the beginning of each tweet and format the date. It will also make the date a hyperlink back to the original twitter post and turn the first instance of a hyperlink into one that works (as opposed to plain text). There was also a little bug previously (sorry) which I’ve ironed out, oh and comments galore!

Please feel free to use it, and maybe give me a mention:o)

<?php

$twitterRSS = simplexml_load_file( ‘http://twitter.com/statuses/user_timeline/177618489.rss&#8217; ); //Noel’s twitter

$i = 0;
while ($i <= 4) {

$description =    $twitterRSS->channel->item[$i]->description;
$pubDate =              $twitterRSS->channel->item[$i]->pubDate;
$guid =                  $twitterRSS->channel->item[$i]->guid;

//remove username, colon, and single white space…
$colon = ‘:’;
$positionColon = strpos($description, $colon);
$description = substr_replace ($description, ” , 0 , ($positionColon +2) );

//find the position of ‘http://&#8217;
$http = ‘http://&#8217;;
$positionHttp = strpos  ( $description  , $http );

if ($positionHttp == !NULL) //i.e. there is a http:// link, then execute the following code
{

//OK, is there any white space after the http:// ?
//if there is then the link is probably in the middle somewhere…
//if there is no white space the link is probably at the end.

//find the first white space after the http://
//we will use strpos again, but this time include the offset parameter to choose where to start our search…
$whiteSpaceAfterHttp = strpos  ( $description , ‘ ‘ , $positionHttp );

if ($whiteSpaceAfterHttp > 0) { //i.e. there is one…
$linkLastChar = $whiteSpaceAfterHttp;
}

if ($whiteSpaceAfterHttp == NULL) { // i.e. no white space/link is at the end
$linkLastChar = strlen ( $description );
}

//we now have the beginning and end positions of the http link
// $positionHttp and $linkLastChar
//let’s get the link length…
$linkLength = ($linkLastChar – $positionHttp);

//let’s grab the link that needs ‘fixing’…
$oldLink = substr ( $description , $positionHttp , $linkLength );

//let’s add html tags to the old link and call it $newLink
$newLink = ‘<a href=”‘ . $oldLink . ‘”>’ . $oldLink . ‘</a>’;

//let’s swap the old link for the new link in the string…
$description = substr_replace  ( $description  , $newLink  , $positionHttp , $linkLength );

}

//ok, so the RSS date in a twitter tweet comes out something link this:
//Mon, 04 Oct 2010 11:37:43 +0000
//remove the first 5 characters…
$pubDate = substr_replace  ( $pubDate , ‘ ‘ , 0 , 5 );

//remove the remaining 21 characters from position 7 onwards…
$pubDate = substr_replace  ( $pubDate , ‘ ‘ , 7 , 21 );

//add the twitter link to the date with html…
$pubDate = ‘<a href=”‘ . $guid . ‘”>’ . $pubDate . ‘</a>’;

echo ‘<p>’;
echo $description;
echo ‘</p>’;

echo ‘<p>’;
echo $pubDate;
echo ‘</p>’;

$i++;

}

?>


Love this hub

06Jan11

Just take a look at my Belkin USB hub, isn’t it awesome! It fits perfectly on top of my Mac Mini and even has a little light exactly in line with the Mac. Now I was worried it would be too big and take up too much room.

To be fair, it is Big for a USB hub, BUT… it shares it’s footprint with the Mac so doesn’t take any extra space, it also has two forward facing USB slots (very handy) so you don’t have to root around the back each time. Love this hub:O)

Belkin-USB-Hub


Table Topics

13Nov10

I recently joined a local Toastmasters club to improve my public speaking. The typical evening comprises slots for prepared speeches and additional support roles. Not surprisingly (and quite cleverly I might add) the supporting roles, such as timekeeper, all have a speaking element. This ensures that most of the people present get to speak.

For those that didn’t have a prepared speech or role, there is something called Table Topics. This is where everyone remaining gets 1-2 minutes to give an impromptu talk on a subject given to them at short notice.

To keep the proceedings in order everything has a time schedule. The current time is indicated to the speaker by use of a mini set of traffic lights, so for instance if you were doing a table topic you need to do at least 1 minute. At a minute you get a “green light” (literally), you’re good – you’ve done the minimum. At 2 minutes an “amber light” (time to wind it down), at 2.5 minutes a “red light” indicating that you went over time.

I was so inspired by this I decided to write a mobile web app with a set of traffic lights and a counter. The timer and image swapping is written with JavaScript, with a small amount of HTML and CSS. You can view it here www.tabletopics.mobi on your mobile device. I have tested it on iPhone, Android and Blackberry.

Table Topics

 

 

 

 

 

 

 

 

 

 

 

 

 

Yes it still needs some work, but if enough people use it, I’ll be more than happy to develop it further.

As usual my thanks to w3schools.com for their code examples, which are often so simple, it makes them very easy to build upon, enjoy the app!