Ever mindful of the environment, Web Services have gone one step further and installed the next generation, leading edge clockwork servers. These servers will provide a constant service as long as I remember to wind them up every morning.

Wind them up! – get it?

Check the date!

Due the the vast nature of the internal information, we decided that the current top navigation bar just didn’t provide enough direct access to the services that staff and students need on a daily basis:

For a while we’ve been working on a mega menu solution. Mega menus are springing up everywhere and even Jacob Neilsen feels that they are a much better solution than previous drop down implementations.

There are three features in our mega menus worth mentioning.

1. The mega menu content.

There are two flavours of the mega menu, one for staff and one for students. External parties with access to go will not see a mega menu.

The main mega menu drops down when the GO logo or the A-Z link is rolled over. The left hand colomn has some current news stories, and these will eventually appear automatically (they’re currently added manually so if they go out of date, bear with us). The other links have been deemed to have the most value and the A-Z link is repeated in the bottom right hand corner. Go on click a few and see where you end up.

2. A-Z

We have also added an A-Z page and this should cover all wiki pages sites for whom the user has access together with a few other areas of Edge Hill’s online services. The A-Z is quite extensive so to enable easier access the A-Z has it’s own navigation. When one of the letters is clicked the items beginning with that letter are displayed and all others are greyed out making it easy to hone in the links you need.

3. Top Navigator choices (+/-)

You may have noticed a +/- button on the top navigator.  Initially all users are offered Mail, Library, Blackboard and Files on the top navigator.  As long as the user is in GO, thay can use the +/- button to open a choice box and select the 5 items they prefer.

There is scope to add further items in the future, but choices will be limited to 5 in order to keep the top navigator consistent.

The mega menus should also function in the docs. library and wiki domains.

• Word Boundaries – These look different depending what flavour of regex you’re using. I’m using PHP’s PCRE functions so my word boudaries are forward slashes
• Characters – I knew about Character Classes and I know what some do, not all of them. For example I know that [A-Za-z] will find an alpahbetical character and \d will find a single digit.
• Repetition – I knew about greediness ( the + character). This character will try to continue matching your token after its found the first occurence.

So when I was confronted with the following string: item_newsArticle1138, I decided that it would just extend my knowledge enough to investigate using regex to extract “newsArticle” and “1138″

Getting the number off the end of the string was easy enough. I’m using the preg_match() function in php to pass the found string into a variable:
preg_match('/\d+/', 'item_newsArticle1138', $modelid);


The forward slashes act as regex delimters, so all we need is \d+ which finds the first digit in the string and the plus sign (+) continues finding subsequent digits: 1138.

Then came the tough one. If I use /[A-Za-z]+ as my regex;
preg_match('/[A-Za-z]+/', 'item_newsArticle1138, $model);


The regex engine reports finding “item” in the string and stops at the underscore, ignoring the part I needed. What I needed the regex to do was find the underscore and then get all the alphabetic charaters after it. To do this I needed to learn how to use positive and negative lookahead and lookbehind.

So what I needed to add to my string was a positive lookbehind: (?<=_). The brackets and the question mark provide the code for the lookahead/lookbehind. The inclusion of a less than makes it a lookbehind (N.B. omit the less than symbol for lookahead - not a greater than symbol). The equals sign tells the regex "to look for" and then I pass in the underscore character, as that's what I'm looking for in the string.

That gives us the following regex:
preg_match(‘/(?<=_)[A-Za-z]+/', 'item_newsArticle1138, $model);


Be careful the php function preg_match returns the results in the variable declared as the last arguement ($model) as an array, so to use the value you need $model[0] to return “newsArticle”.

Hey presto, the magic is revealed. I’m no expert, so somebody’s bound to tell me a better way in the comments, hello?

Following a pre-Christmas code review of the user-defined munu choices, we identified that we needed a way to provide a default set of menu items for everybody prior to them making and saving their personal choices. Mike remembered that we had an Option table capable of storing an array of values per person.

As this table existed in the GO symfony framework it already had methods for getting and setting values. Reading those methods introduced me to the php serialize function. This function takes an array and generates a storable representation of its value. For example this
Array
(
   [0] => 1
   [1] => 2
   [2] => 3
   [3] => 4
   [4] => 9
)
is turned into this:a:5:{i:0;i:1;i:1;i:2;i:2;i:3;i:3;i:4;i:4;i:9;}

When the value is queried we can simply unserialize it to return it to its php readable form.

Default Values in YAML Config Files

In the Option table, if a record isn’t returned for a user (no option has been set) a default value (or array) can be returned when passed into the querying method. As I needed to query the data in more than one place in the application, I needed to set the default value in one place. Symfony uses YAML files for configuration so I set it in the application config file app.yml.
all:
  sf_guard_plugin:
    default_dashbar:      [1, 2, 3, 4, 9]


Spaces are all important in YAML. Ensure you don’t indent each line and include spaces between array elements.

To pull YAML config variables into your code enter:sfConfig::get('param_name', $default_value);. The ‘param_name’ takes the file name and the parent child structure of the YAML file, separated by underscores and can be found in the Configuring Symfony chapter of the manual.

Heavy duty stuff for the first post of 2011.

So just how long do we have to wait for Christmas?

If you Google “Christmas countdown” there’s a whole slew of sites with count down clocks (including some really old ones that I suspect were written as “my first javaScript program”). One of the best, and very popular within Web Services, dedicated to the Christmas countdown has to be isitchristmas.com. Quite simply, every visit is met with an emphatic “No” until Christmas day. For rss die-hards there’s even a feed. You just know you’ll have to get the laptop out tomorrow just to see that is, in fact, Christmas. I’m sure, yule you’ll fit it in despite the present opening, bucks fizz, snowballs, Christmas breakfast, table laying, bird roasting, gut-busting pudding, family rows, tears, Queen’s speech, 3 o’clock film, mince pies, flat batteries, karaoke, Quality Street, After Eights, home-made sloe gin and droopy paper hats.

That’s for tomorrow. If you’re a believer (and you’ll only get a stocking full of sprouts if you don’t believe) or you have kids, you may also be interested in tracking Santa’s progress. You’ll also find games for the kids to play.

Happy Christmas from Web Services, Edge Hill University. Now where did I put those humbugs?

Still no official announcement from Yahoo, but any regular delicious user is already looking around for alternatives. I remember a couple of years ago that I was enjoying synchronising my delicious bookmarks with Ma.gnolia, but that project appears dead in the water. Maybe this would be a good time to resurrect it.

Mike has already given Pinboard a try. Maurice is giving Google Bookmarks a go. The beauty of delicious was that as a team if we all used the same product, we could use feeds to tie everything in together and share what we found interesting (if we felt like it).

It would be a sad day if delicious went to the wall. So in a journey of sentimentality, I’m going to review my first 10 bookmarks on delicious:

1. Codestore Possibly the best site for Lotus Domino developers. These days very focused on Flex development, but still an excellent resource for all web development techniques
2. Simplebits Dan Cederholm, a frontend developer from Canada and author of one of the best html books ever: Web Standards Solutions. The site has also had a very nice makeover recently.
3. Zedzdead Its mine!…and posts are a little thin on the ground these days.
4. Acerbia Currently inactive, but some posts available from Wayback machine. Fiction and humour from Dave Frew.
5. A List Apart A web developer’s magazine, full of design and development best practices
6. Adactio Jeremy Keith, a frontend developer specialising in HTML and javaScript.
7. Antipixel An excellent blog/photo blog from Jeremy Hedley, a developer working in Japan, now rarely updated, but still some beautiful images.
8. Bucket Fountain A developer blog from New Zealand, who I followed because Liverpool too, has bucket fountains.
9. B3TA Funny, irreverent and rude (some NSF)!
10. 1976 Design Dunstan Orchard’s blog, closed to new entries in 2005, but with the most inspiring banner for many years, and documented in the Colophon.

Dear Santa, forget the Android phone, please can I have my delicious bookmarks forever.

As Douglas Adams would have said..

There are some really nice tools to get you started. If you don’t already, using Firefox as your development browser means that you can take advantage of a whole bunch of development tools, so if you haven’t already fire up this post in Firefox. One of the most famous developer tools for Firefox is Firebug. If you develop, you should use Firebug, get it and install it.

You don’t even need a site with jQuery already installed. BBC famously uses its own javaScript library (Glow), not jQuery, so go to the BBC homepage and fire up FireBug (F12) if you haven’t already done so.

If you’re new to FireBug, you may want a few minutes to explore and play (you’ll feel a little bit like the Scorcerer’s Apprentice). When you’ve finished playing; On the menu bar of Firebug you should see “Console”. Click “Console” to open it. In the bottom left hand corner enter :jQuery at the >>> prompt. As the BBC doesn’t use jQuery you should get an error telling you that jQuery isn’t defined.

John Reisig, the man behind jQuery, has created a bookmarklet called jQuerify. The bookmarklet loads jQuery to sites that don’t have jQuery (but only for your browser session). To use it just drag the jQuerify link into your browser toolbar and whilst on the BBC homepage, click it.

Now when you type jQuery at the Console, you should have access to the jQuery library. Now you can start to play with the jQuery library. For example, at the console type: jQuery(‘h2′) which gets all h2 elements on the page. Clicking the returned Object item takes you into the Document Object Model, giving access to all sorts of information about those page elements.

OK, lets do something freaky. Lets get rid of all the BBC’s h2 elements. Make sure you’re on the BBC home page, jQuerify has been clicked and go back to the console in Firebug and enter: jQuery(‘h2′).hide(2000)

This will hide all of the h2 elements on the page, but will be animated over 2 seconds so you can see them slide away. Don’t panic (you only did it in your browser)! You can re-display the elements by submitting: jQuery(‘h2′).show() You could also just refresh the browser, but you would have to re-click your jQuerify bookmarklet to continue experimenting with jQuery.

Now you can experiment with the entire jQuery library to learn many of the methods, documented on the site, just by entering code in the firebug console.

Nearly everyone in Web Services has a Twitter account.

Many of the team have a Delicious account for storing all our bookmarks there’s even a team one.

We needed  a way to comunicate useful information from the team without it getting lost in the clutter of our personal posts.  We needed a team identity on Twitter.

Delicious

Most people have heard of twitter (its so mainstream, even the BBC now offer a #hashtag at the beginning of some of their programmes if you want to get in on the discussion) but if you haven’t heard of Delicious, it’s a social bookmarking site. It saves your bookmarks to a website, so as long as you have a connection to the web, you’ll have access to your bookmarks no matter what browser or device you’re working from. It’s social, because you can network with other users and push links to those who you might think would be interested them.

We push links to the ehu.webteam account that we think the team might find interesting or useful. Pushing a link is easy (in this case I’m using the Firefox plugin):

RSS

The link will be stored in the inbox of the ehu.webteam delicious account. Everything in delicious has an rss feed, including inboxes, so we can pull that feed into anything we like, even a twitter account. Pulling an rss feed into a twitter account is easy too. Just create an account at TwitterFeed.com and add your feeds:

TwitterFeed

As we also blog, so it made a lot of sense to add the feed from that too.

Finally we created our twitter account under the rocking title of @EHUWebServices. We’re using a HAL9000 image for our avatar, but we’ll change that if you have a better idea.

Christmas question: Why was the computer in 2001 a Space Odyssey called HAL?  Google Caesar cipher for a clue if you don’t want to go straight to the answer!

So now we have a twitter account for Web Services which automatically displays any worthy links spotted by team members and all of our blog posts. Follow us its good stuff!

I discovered 2 very good solutions:

• Add the following code to the top of the file you wish to redirect:

  Response.Status="301 Moved Permanently"
  Response.AddHeader "Location", "http://edgehill.ac.uk/rosetheatre/whatson/"

  This is quick and nasty way to redirect a page if you don’t have admin rights to your IIS server.

• By far the best way is, if you have access to IIS admin, is to follow the following steps:
  1. Browse the website you want to do the redirect for.
  2. In the right pane, right click on the file you want to redirect, and click “Properties”
  3. Under the “File” tab, hit the radio selection “A redirection to a URL”
  4. Put the target in the “Redirect to” textarea.
  5. Make sure “The exact URL entered above” and “A permanent redirection for this resource” are both checked

Both of these solutions worked for me.

I first came across the possibility of  search engines penalising sites for duplicate content when following WPDesigner’s excellent tutorial on creating WordPress Themes. Here, he recommends ways to change the content of pages which might be viewed as duplication by Google – Prevention not cure.

It wasn’t until today that Mike recommended that I “canonically link” Rose Theatre event pages because they are almost identical to the same page in the events section of the site. To do so, within the <head> tags of each Rose Theatre event page, add a link like the one below:

<link rel="canonical" href="http://www.edgehill.ac.uk/events/2010/03/09/stand-up-comedy" />

The link tag is an empty tag, and the use of the “rel” attribute defines the canonical nature of the tag. In our case we generate the link URL using symfony routing rules, URL parameters and the page slug so we don’t need to add the link for every page.

So now, when you visit Stand Up Comedy check out the source code and you’ll see the link, just like Google does.

So on Saturday I took the family. The effects were astounding and you really feel that you were watching an event, the future of how all visually rich films will have to be produced to come anywhere close to this. That said, the plot was typically Hollywood but you couldn’t fail to give it 9/10 for entertainment (I never give 10).

A couple of weeks ago the first 3D TV was trialled in pubs in Manchester, using an Arsenal v Manchester United match.

So with all this 3D about I wondered if there was any 3D web development going on. Seems like there’s quite a bit. Here’s a sample of 3 flash sites using 3D (some take a little while to load):

1. http://ecodazoo.com/
2. http://www.whitevoid.com/portfolio.html
3. http://www.cleoag.ru/labs/flex/parkseasons/

These are all of course Flash sites and more and more we’re seeing opposition to building sites in flash, with some people controversially venting their spleen.

There are few alternatives in javaScript or SVG. So for now I think that Flash will continue to lead the way in this experimental media.

St Helens Road

It was a blizzard by the time I walked from the car park to the office.

EHU snow storm

The Office snow globe

Five minutes later we were told to go home. This morning a few Edge Hill tweeps (@reedyreedles, @mikenolan, @mister_roy and @edgehill) waited with baited breath on the campus status. It opened and the following two snaps from the car park to the office make prettier viewing.

EHU Snowy Sunrise

Back to work then

The drive in wasn’t too bad, local roads are compacted and main roads have at least one lane open and traffic was moving freely.

One of the things that hasn’t changed, at least in our house, is the bumper, double issue Christmas Radio Times. Wouldn’t be Christmas without it. Check out some of the older covers, some are so familiar it feels like yesterday that I was thumbing through them to find It’s a Wonderful Life.

Until the deregulation of television listings in 1991, everybody I knew bought the Radio and TV Times (also a double issue at Christmas) The Radio Times published only BBC programmes and the TV Times, only ITV and Channel 4. During the holiday season, to keep track of what was on TV, both had to be read, the unwritten rule being: You must fold them into each other to re-access quickly.

After 1991, both publications were able to publish programmes from all channels. At this point I dumped the TV Times in favour of the Radio Times (it had the radio listing too, hence the name).

Satellite and Cable services also forced RT to change, moving the Radio information to a separate section near the back and listing digital services on the pages following terrestrial channels.

I began subscribing to cable TV services in about 2001, and with that came a very handy on-screen, programme guide. The guide only shows the next 24 hours of programmes but it’s quick and it’s easy to set reminders, switching channels at the start of the programme. Bundled in is Catch-up TV, BBC iPlayer and TV on Demand, all make by-passing the schedules easy, but I still had to buy the Christmas RT.

This year I took delivery of a HD recordable box. In addition to viewing the programme guide, I can set it to record the selected programme at the push of a button. It can also pause live TV – Nightmare – it’s like Groundhog Day when the kids get hold of it.

Radio Times is also available as a website. The site clearly has more than a hat-tip to the BBC site with a panel-style interface and rounded corners. The schedules have hCalendar microformats (remember them) so you could add your programme watching habits to Google or any other iCal enabled calendar.

This isn’t the first publication to go digital, but I hope they never pull the hard copy like PHPArchitect have just done.

New technology! Bah humbug, give me the Radio Times to fall asleep to on Christmas day every year!

Flickr is probably the best known on line photo managment and sharing site.  It’s free to sign up for an account, and you can start uploading digital photos within minutes.  There are limits for the free account (Only the 200 most recent uploads are shown, with limits on how much can be uploaded per month) but upgrading to the Pro account is only US$24.00 annually.  Whilst primarily for photos, since April 2008 video uloads of not more than 90 seconds are allowed.

Besides being able to upload photos, tagging plays a big part in bringing related photographs and their owners closer together.   Early subscribers also began to use tagging to geolocate their photographs, using longitude and latitude values.  Flickr has made geotagging much easier by offering a “add to your map” link which uses a draggable map to automatically generate your geotags without having to know the longitude and latitude of the location.

Suggestify

A very mature  api has seen some useful third party applications.  Suggestify (currently in Alpha release), uses geotags and flickr‘s api to enable subscribers to suggest the geolocation of a photograph not owned by themselves. 

Suggestify then “tries” to post a comment on that photo with a link to the Suggestify site where the suggestion is stored. The owner can either opt out or accept and the photo is geotagged.

Daily Shoot

If you twitter (oh yes), try following @dailyshoot.  dailyshoot posts a daily assignment which is easy enough for anybody to have a go at.  There is a flickr group for assignments – an easy way to view other entries.

Noticings

Noticings is a game based on flicker, geotagging and spotting stuff first. If you notice something out of the ordinary, snap away, upload to flickr, geotag it and then tag with “noticings”. Points are awarded on a number of criteria:

Noticings keeps a record of your scores so that you can see how you’re getting on. It also has a superfluas twitter account: @noticings. The Flickr code team are particularly excited about this one.

Anybody know any better ones?

Yammer is twitter-for-business.  Its an enterprise application, which means that we can restrict users to those with an .edgehill.ac.uk email address.  There are currently 40,000 companies who use Yammer and it took the top prize in 2008 at TechCrunch50 (so somebody likes it).  For Edge Hill, it might provide an easy way for academic staff and students to stay in touch, even if its only to inform of cancelled/re-arranged lectures, room changes etc.

Sign-up is easy,  register using your Edge Hill email address, and you’ll be added to the community.

Sign Up Screen

I signed up over a year ago  but over time twitter exploded and I forgot about it, but a recent artlicle about the new desktop client re-awakened my interest.  Yammer now has clients for desktops, iPhone and Blackberry and a load of plugins for other stuff.  Existing twitter users can integrate the two and pass work related tweets by adding the #yam hashtag (twitter hashtags explained).

Integrating Yammer and Twitter

It’d be good to see signup from both existing twitter users and non-twitter users to see if we can build some applications which are Edge Hill specific.  At the very least we should be able to add a feed of posts alongside the discussion forum or even integrate them into the discussion.  All ideas welcome….

The best tool for utilising microformats, is the Operator add-on.  Other people have tried creating tools for other browsers, but for minimal pain and quick results the Firefox/Operator combo is still the best.

After installing the add-on you will notice a new toolbar.  Many web pages fail to take advantage of microformats, so to save browser real-estate you can autohide the toolbar by clicking the Options button and checking the Auto-hide-the toolbar option, clever.

To see what it can do; Go to Edge Hill University’s events. If you auto-hid the toolbar, it should magically appear, and if you didn’t you should see Contents, Events, Locations and Tagspaces all lit up. That tells us we’ve got microformats on the page, and this is where Operator earns its corn;  Clicking on one of the highlighted icons, we can see a number of services on offer.

Tagspaces

Click the Tagspaces button, navigate to Education->Upcoming.  This takes you to Yahoo’s Upcoming site, and shows a list of similarly tagged events.  Nursing->YouTube lists videos related to Nursing.

The Edge Hill Events page also picks up a single location (Edge Hill University, which it gets from the information at the foot of every page) and dispays it under the Locations button.  We should really add the location data to each of the listed events too (note to self).  By clicking the button, we can see the exact location of Edge Hill through Google Maps (best), Yahoo maps and MapQuest.  You could export to a KML file to import into Google Earth too.

The Events button will show each event and allow us to add it to any iCal supported application.  Groupwise has a problem with this but if you use Google Calendar or Yahoo it will pre-populate a “new event” screen ready for submission.   If you don’t know what 30Boxes is, give it a try, its a very slick web-based calendar, I still prefer Google’s though.

It isn’t all roses in the Microformats garden.  Contacts, are not easy to import into Groupwise or Google.  For Groupwise its a two step process:

1. Contacts->Export All or Contacts->Edge Hill University->Export Contact.
2. Double click the exported hcard file and select the Contacts list you prefer to use.

With Google:

1. You will need the “Get this to gmail” bookmarklet
2. Click the bookmarklet when Contacts on the Operator toolbar is highlighted.
3. From the Google Mail Contacts page, click import and import the downloaded file.

Oh yes, and clicking the Google Maps link from here is screwed up too.  This is either an Google Maps  or Operator problem as the contact information is impecably marked up, I’ve checked

The import to Yahoo contacts works like a dream though.

For anybody who is determined to stick with IE and Safari users, you might want to try Left Logic’s bookmarklet, although I’ve not tested it in either of those browsers myself.  Finally if you’d like to add microformatted contact details on your own site, you can create the code easily using the hCard creator.

As a web developer, I also need to test how pages look in other browsers so I tend to have the most up-to-date versions of the common ones, IE, Safari, Chrome and Opera.

Yesterday I was looking at Opera’s widgets and noticed “Stay Secure”. Useful for very quickly displaying the current vulnerabilities of Internet Explorer, Firefox, Opera, Safari and Konqueror in an unobtrusive graphic on your desktop.

The information is provided by Secunia and by clicking on any of the browser icons on the the graphic the detailed report from Secunia is accessed.

So now, if you were to ask me to recommend a browser, I’d say Firefox, but use Opera (and the Stay Secure widget) for your secure transactions (if the site works in Opera ).

Currently events are added to the events Edge Hill events data, which can be duplicated. Our data serialisations come in four flavours, XML, JSON, PHP and YAML.

This week I have been mostly using JSON.

JSON is javaScript, and doesn’t need a server.  It runs on the site visitor’s browser (if enabled) and provides a way for us to access dynamic data and publish it on static web pages.

The first stage was to create the JSON feed.  Since Edge Hill already has data serialisations for Events and News, all I needed to do was to tweak it a bit and add a new function to the database to return events tagged with “rose theatre” and add a new URL to access the results which look something like this:

[{
	"title":"Alternative Stand Up",
	"slug":"alternative-stand-up",
	"summary":"Comedy at the Rose Theatre.",
	"content":"<p>Tickets \u00a35.50 \/ \u00a33.50 concessions<p><strong>Jamie Sutherland<p>One of the freshest and most natural talents to emerge in the last few years, Jamie has truly established himself on the comedy circuit, and is now very much in demand all over the UK.\u00a0 Liverpool born Jamie will keep you amused with gags, tall tales, and true stories garnered from everyday observational topics.<p><strong>Danny McLoughlin<p>Danny is a complete natural and destined for the top.\u00a0 Think Peter Kay for the confidence factor.<p><strong>Rosie Wilby<p>Rosie Wilby has been performing as a singer songwriter for many years and turned to comedy in 2004, storming through to the semi finals of So You Think You're Funny, on only her second ever stand up gig.\u00a0 In August 2006, Rosie unveiled her debut full length show \u2018Olympic Swingball Champion 2012' at Edinburgh Fringe.<p>Compere.....<p><strong>Ste Porter<p>A top class act who will be a regular comedy circuit favourite before long.\u00a0 See him in Ormskirk first!<p>For further information or to book, call 01695 584480 or email <a>rose@edgehill.ac.uk.",
	"start_date":"2008-10-07",
	"start_time":"20:00:00",
	"end_date":"2008-10-07",
	"end_time":"22:00:00",
	"location":7,
	"created_at":"2008-08-13 14:04:28",
	"updated_at":"2008-08-14 13:46:40",
	"building":"",
	"url":"http:\/\/www.edgehill.ac.uk\/events\/2008\/10\/07\/alternative-stand-up\/json",
	"tags":{
		"Stand Up":"Stand Up",
		"comedy":"comedy",
		"rose theatre":"rose theatre"
	}
}]

Next, add the following code to the html document into which you want to add the data feed:

<div id="rtevents">
  <h3>Next up</h3>
  <p>
    The Rose Theatre's <a href="/events/tag/rose theatre" title="List of events for the rose Theate">upcoming events</a>
  </p>
</div>

The div with the id of “rtevents” acts as a placeholder for the code which will be inserted. At this point, a level 3 heading has been applied with a link to the events page. This gives visitors without javascript capabilities a way of viewing the events (in this case a link to events for the rose theatre page).

In addition to the tags, the jQuery library was added. jQuery has a ready-made method for “getting” a JSON feed and the documentation is detailed, yet simple enough to get you started with a working example.  Using that example, I wrote:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  $(document).ready(function(){
    $.getJSON(“/events/tag/rose+theatre/json”, function(data){
      $(‘#rtevents’).html(‘<h3>Next up</h3>’);
      $(‘#rtevents’).append(‘<table id="”eventrow”"></table>’);
      $(‘#eventrow’).append(‘<tr><th>Date</th><th>Event</th><th>Time</th></tr>’)
      $.each(data, function(i,data){
        urldate = data.start_date.substr(0, 4)+‘/’+data.start_date.substr(5, 2)+‘/’+data.start_date.substr(8, 2);
        date = ‘<td>’+data.start_date.substr(8, 2)+‘/’+data.start_date.substr(5, 2)+‘</td>’;
        time = ‘<td>’+data.start_time.substr(0, 5)+‘</td>’;
        time = time == ‘<td>00:00</td>’ ? ‘<td>TBA</td>’ : time;
        oddeven = i % 2 == 0 ? ‘even’ : ‘odd’;
        $(“#eventrow”).append(‘<tr class="”‘+oddeven+‘”">’+date+‘<td><a href="”/events/’+urldate+‘/’+data.slug+‘”">’+data.title+‘</a></td>’+time+‘</tr>’);
        if (i == 5) {// sets the maximum number of records returned
          return false;
        }
      });
    });
  });

Let’s try to explain what’s going on here (row by row). The whole thing won’t work unless javascript is enabled in your browser.

1. Line 1: A jQuery function which runs the javascript that follows it after the html page has loaded.
2. Line 2: A jQuery call to the JSON feed and a function call to to tell the browser what to do with the data.
3. Line 3: Find the element with the id “rtevents” and replace it’s contents with our <h3> element.
4. Line 4-5: Append the table (named; “eventrow”) and table headers to the “rtevents” element (following the h3).
5. Line 6: For each event returned in the JSON feed, do the following:
6. Line 7-11: Format JSON data for output.
7. Line 12: Append the table row to the table (named “eventrow”) with all the formatted data.
8. Line 13-15: restrict the number of table rows returned if necessary.

Knowing this, you can parse any JSON feeds using jQuery, and there are plenty to choose from these days. A few examples:

• BBC Programme schedules
• Flickr JSON response format
• Facebook

Fancy yourself as a javaScript developer? Then add JSON to your bow strings.

The 5 Best Things

1. Ewan McIntosh‘s Unleashing the Tribe keynote speech about social media.
2. Mike Ellis‘s grounding in thinking about, approaching and doing mashups mostly using Yahoo Pipes.
3. Meeting such a nice, friendly bunch of people who care about what they do.
4. The “High Street” on which sits the Machar Bar and the Auld Toon Cafe which sells the most wondeful minced beef pies and chelsea buns you ever tasted.
5. Experiencing barcamp (if only on a small scale) for the first time, and enjoying every minute of it.

The 5 Worst Things (nothing was really bad)

1. Stalag luft Hillhead
2. The drive.
3. It took me three months to lose about 4 kilos, it took me 3 days, to find them again.
4. Listening to Alison’s talk and regretting not having worked for her for very long.
5. As good as the song was, its an absolute travesty that the live train times application from Dawn Petherick, Web Services Manager, University of Birmingham didn’t win first prize in the innovation competition (and I told her so too).

5 (nice) surprises

1. Sunshine (even though we were inside most of the time).
2. Learning doric, the official (unstoppable) language of Aberdeen, even though I never met anyone who spoke it.
3. I can still run 5 miles+, even with a bit of a hangover….just.
4. Edge Hill’s events timeline might be considered a “mashup” by some.
5. Discovering I know a little more than I sometimes give myself credit for.

I know that Mike was threatening to expose the lack of institutional blogging, so I hereby pledge to blog … a bit more than I used to, well every little helps…

Accessibility is a general term used to describe the degree to which a product (e.g., device, service, environment) is accessible by as many people as possible.

My own accessibility skills are self-taught and I’ve always found the internet provides plenty of articles for web developers of all levels. During the obligatory intros, I cited my aims of the course as “..filling in any gaps in my knowledge”. As it turned out, there weren’t many gaps and in some areas, my knowledge exceeded the course content.

My gaps where more in my thinking and approach rather than in how to write accessible code. Some of the hands-on sessions on the webaim site give a feel for problems some visitors have using the web. Try the these simulations for yourself;

• Cognitive
• Low vision
• Screen reader

WCAG 1.0 was published in 1999, and although many found implementation of the guidelines difficult, but despite that they’re still around today. Of the 14 guidelines only 3 relate to usability. The first 10 focus on markup, and this really forms the cornerstone to accessible websites. The hands-on exercise to use the guidelines to evaluate a site demonstrated how difficult they are to use and why they have spawned so many third party tools (wave, Bobby [defunct], vischeck fae) to attempt to automate conformance, often with badges so frequently seen on government sites.

WCAG 2.0 is long overdue, started in 2001 it has had its critics. Many feel that its simply too complicated to make any site accessible. Personally speaking, I’ve never read either of the guidelines through, completely. You try it, its like pulling teeth. I tend to refer to it when I feel I need to.

The day was enjoyable, but the course felt a little stale, and that might be down to a long wait for WCAG 2.0. In addition, working with AJAX and Web 2.0, opens up more questions regarding accessibility and usability, which are being talked about and written about, but which the course didn’t cover. I’ve fed all of this back so if you go to one in the future, let me know if its been included.

Our new-look corporate site, extensively uses tagging, specifically in News, Events, Imaging and the eProspectus, but what’s a tag used for? A tag is metadata, a keyword or term associated with or assigned to a piece of information. So tags can be added to any page in a web document and associated with any other pages prieviously tagged with the same tag.

The tags themselves are usually single words, informally and personally chosen. If you’ve signed up for accounts with Flickr, Picasa, delicious, Magnolia or YouTube, to name but a few, you’ve probably added your own tags by now. So is tagging just a way to show similarities between your documents? Not really, tagging data on these sites provides a simple navigation through to your own content, but also hooks into other members’ data by turning tags into links, which aggregate documents similarly tagged.

Tag Clouds

Popular tags can be visually represented through tag clouds, also known as a weighted list, with the most popular tags shown larger and bolder. Again the tags are links which drill down to similar content. You could even base an rss feed on a tag to alert visitors to new content so tagged.

Microformats

By adding rel=”tag” into the links, the link also becomes a microformat. Microformats are a standard way to represent things in HTML, by adding rel-tag we’re standardising the link as a tag. Making the link a microformat allows the reader to find similarly tagged content from a wider source than just the current site. Firefox users can install a fantastic add-on called Operator. Operator recognises microformats on the page and in the case of tags, offers the reader entry points to content similarly tagged on other websites. Sadly there doesn’t seem to be anything similar available for Internet Explorer, yet.

Machine Tags

On the horizon, we have Machine tagging or Triple tagging. Machine tags use a specific syntax to define extra information about the tag, making it more meaningful for interpretation by computer programs. Triple tags comprise three parts: a namespace, a predicate and a value. For example, ehu:news=607This kind of tagging isn’t currently used on the Edge Hill site, but it’s built-in ready to go. Anyone interested can see an implementation on Adactio, any Flickr images, tagged ( where n is representative of his blog post) will be included automatically.adactio:post=n

Adopting Tags

By adopting tags, or creating tags so unique, ensures that all things tagged are related. For example, all news, event and images relating to this year’s Solstice Seminars could be tagged: solstice08. The tag is so unique, items tagged with it would be unlikely to be included out of context. Such unique tags can be promoted like a product, by requesting conference attendees to tag their own online content, on websites and slides etc.

Tagging Best Practices

If you’re about to embark on a journey of tagging for your own sites, it can feel a little daunting. There are, however, some best practices you can use to get started:

• Smashing Magazine
  
• Tagamac
• Cafe Press

The conference took the format of dual tracks and between the two of us we covered every single one. the first talk was by Ivo Jansch of iBuildings, which focused on the adoption of PHP into Enterprise solutions and his slides can be viewed on slideshare. It was nice to see that Edge Hill Web Services team are clearly on the right track but perhaps adoption of some of the slicker testing strategies proposed would be beneficial. I’m particularly interested in taking a good look at PHPUnit, Xinc and Xdebug.

The talk by Scott MacVicar and Mike Sullivan built on Ivo’s ideas and offered some real world examples of development for Enterprise solutions but, for me, it didn’t quite deliver. Maybe it was aimed at delegates that had yet to embark on large scale enterprise applications.

In contrast the next session on SQLite3 was something I’d never come across before. The talk began with SQLite’s widespread use including Apple’s iPhone, and it certainly seemed that it was a more favourable option than using config files for small applications. In addition PHP5 ships with SQLite3 and only needs a few configuration line changes to enable it, but some forums suggest that it is not as easy as it seems.

The mid-afternoon session had two bite sized talks on testing PHP and Project Zero. The testing PHP talk was not as I had thought about testing your own PHP code but about getting involved with testing PHP source code, something I’d never thought myself clever enough to even look at, never mind actually have a go at. It seems that if you can write PHP you can write PHP tests too. If you fancy having a go have a look at the PHP-QAT site.

Project Zero is IBM’s incubator project for RESTful Web services. The demo simply looked a lot like Yahoo Pipes but I suspect that if you dig deeper there’s a whole lot more.

The whole shebang was brought to a conclusion by Derick Rethans, who spoke about his personal PHP journey. This light-hearted look at PHP again hammered home the need to focus on security and testing (it also plugged Xdebug which he wrote). You can see the slides here, but unlike other speakers his slides act mostly as a visual aid to his presentation style and don’t really reflect the quality of the content.

I haven’t always been so lucky, I’ve previously found myself in office blocks where I’ve been so far from a window, I wouldn’t know if it was night or day. My previous desk job had a view over the Mersey and I could (occaisionaly) watch the ships go by and see some spectacular sunsets. I’m enjoying my new job, here at Edge Hill but I don’t see many ships.

This morning I stumbled on an old bookmarked link for AIS, for a site called AISLiverpool – Watching the boats go by. This webcam and this one mean that I can (almost) get my old view back.

To generate your own chart, start with:

<img src="http://chart.apis.google.com/chart?cht=lc&chs=200x125&chd=s:ZreelPuevfgznf2008" />

which produces the following chart.

You can see that the image tag references the Google Charts API, passes it a few parameters which Google outputs as an image – Done.

The article then explains how to create, pie, bar and line graph, all by passing different parameters and values. Creating something as complex as:

<img src="http://chart.apis.google.com/chart?chco=00AF33,4BB74C,EE2C2C,CC3232,33FF33,66FF66,9AFF9A,C1FFC1,CCFFCC&chl=Egg+nog|Christmas+Ham|Milk+(not+including+egg+nog)|Cookies|Roast+Chestnuts|Chocolate|Various+Other+Beverages|Various+Other+Foods|Snacks&chtt=Food+and+Drink+Consumed+Christmas+2007&cht=p&chs=600x300&chd=s:KUIZFDPJF" />

Heres a summary of the parameters:

• cht – Chart type (lc is a line chart, p is a pie chart, bhg is a bar chart etc.).
• chs – Chart size (height and width).
• chd – Chart data. (Tricky, Google uses simple encoding)
• chtt – Chart title (use + in place of spaces)
• chco – Chart Colours (use hex value, but not prefixed with # as in CSS).
• chl – Chart labels (separate by a pipe | character)

Further Reading: Google Charts API