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.


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!


I thought finding some php code to parse a twitter feed would be fairly straightforward…
…although a search of Google returned code that ranged from elegant to incomprehensible, I still couldn’t find anything that quite fitted the bill. So with the help of php.net I wrote something from scratch that pretty much does what I want.

The code below uses the simplexml_load_file function to turn a twitter RSS feed into an object. From there it strips out some unwanted characters, adds a hyperlink (if one exists in the original post), strips down the date to DD MMM, adds some html and returns the three most recent posts.

There are plenty of notes in the code (probably too many for most people), but down the road I WILL forget what I was doing, so I need them:o)

You will obviously need to change the twitter RSS feed and probably change/strip out some of the html (namely the span tags). Please feel free to use the code, if you’re feeling generous 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 code

{

//find the first white space after the ‘h’… (if there is one – links are often at the end!)

//we will use strpos again, but this time include the offset parameter to choose where to start our search…

$whiteSpaceAfterHttp = strpos  ( $description , ‘ ‘ , $positionHttp );

//the last character of the link is $whiteSpaceAfterHttp value minus 1

$linkLastChar = ($whiteSpaceAfterHttp – 1);

//now… if there was no white space after the link $linkLastChar will be -1 !

//if this is the case we can make $linkLastChar the string length!

//this will be the position of the last character… haha

if ($linkLastChar < 0) {

$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>’;

$newLink = ‘<span><a href=”‘ . $oldLink . ‘”>’ . $oldLink . ‘</a></span>’;

//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 link to the date with html…

//$pubDate = ‘<a href=”‘ . $guid . ‘”>’ . $pubDate . ‘</a>’;

$pubDate = ‘<span><a href=”‘ . $guid . ‘”>’ . $pubDate . ‘</a></span>’;

echo ‘<p>’;

echo $description;

echo ‘</p>’;

echo ‘<h4>’;

echo $pubDate;

echo ‘</h4>’;

echo ‘<div class=”hr”>&nbsp;</div>’;

$i++;

}

?>


Before you lovingly craft a new icon for your iPhone, Android, or web app tool bar, take a look at glyphish.com  Joseph Wain has created over a 100 original png icons for you to download.

As much as I like to create my own, many of these are far better than I would have come up with. So unless you (or your client) have to have something unique you should really take a look. Here’s a sample…

png icons


Spring Term — 2008

>> Back to MSc Coursework Index

Brief: “Design a streaming media presentation using SMIL (Synchronized Multimedia Integration Language). The presentation should be between 10 and 15 minutes long. The streaming media must include the following assets: text, audio, video and flash animation. All these media files should be controlled and synchronized well. Your streaming media should be viewable remotely using RealPlayer or a web browser.”

“What is SMIL exactly?”

Good question… SMIL is an xml-compliant mark-up language that allows multimedia authors to create slide-show style presentations for the Internet – to be played in a browser or on supporting media players. SMIL makes it possible to define the position, timing and layering of different types of media.

I decided that the way forward was to take advantage of the native characteristics of the various media types and the rich SMIL language.  Rather than trying to “squeeze” the elements into a pre-conceived area, I have instead attempted to break up the screen space and take advantage of the timing, positioning and transitioning abilities of the SMIL language.

It would be fair to say that SMIL is not well supported when it comes to Internet browsers or media players – its only saving grace when I did this project was from its implementation on RealPlayer.

This is further complicated by the fact that different browsers and media players do not have universal support of all media types. A SMIL file can refer to any media type, but it will be the browser/media players support (or not) that will determine a) whether it is rendered and b) whether the SMIL file will even be launched.

As an example: a SMIL implementation in HTML for Internet Explorer could reference a video file in the format *.wmv  The file will play because IE supports it.  However, this file will not play in RealPlayer as RealPlayer does not support the *.wmv video format (at the time of this writing).  Another example is *.txt files; SMIL supports *.txt but RealPlayer does not. For a RealPlayer implementation you would have to use RealText (*.rt) files.

Video and disclaimer…

Ironically to upload the SMIL presentation to YouTube I had to convert it to a video format. The result is fairly poor quality… maybe it goes some way to make the point… SMIL is not unified video but synchronized media.

Hopefully you’ll take my word for it, when this is played in RealPlayer the text is sharp and the video and image transitions smooth. At least the video gives an idea of what’s possible as far as animation (yellow bars) and synchronization is concerned.

On the plus side SMIL gives authors the ability to manage and “design” for bandwidth usage – this is its real strength. By keeping individual assets separate and scheduling their delivery, higher quality at lower bit rates is possible.

For example a static image used in your SMIL presentation only has to be downloaded once (and not in a continuous video stream), text which can become unclear in low bandwidth or small screen video can be sent as a separate stream of text and rendered in the clients browser or media player, and will be as clear as text in a word processor. You can also schedule high resolution images and video, buffering them before they are needed.

As an example, here is a screen-shot from the presentation being played in RealPlayer – as you can see the text is sharp and the animation “pixel-perfect”.

If bandwidth is simply not an issue SMIL can be used to swap out different assets depending on your user. It would be fairly straightforward, for instance, to swap your default text for text in a different language. SMILs support of player controls also makes it possible for users to interact with a presentation.

SMIL is a powerful authoring language and will seem familiar to anyone that has used xml or HTML.

However, its proprietary implementation across browsers and media players make authoring for a wide audience problematic. This is not the fault of the SMIL language or W3C which made its first recommendation in 1998. If SMIL were to gain the popularity of say xml then everyone would benefit.