That 3D thing

James Cameron's AvatarLast week my brother who is the last person in the world I’d expect to hear give a film recommendation, phoned me to wish me a happy birthday and then went on to tell me that I just had to go and see Avatar, coming from him, it had to be good.

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.

Chill out at Edge Hill

Yesterday I drove to work. I made it in, just. This is the photo I took of St Helens road on the way in (I took it on the timer, honest).

St Helens Road
St Helens Road

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

EHU snow storm
EHU snow storm

The Office snow globe
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
EHU Snowy Sunrise

Back to work then
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.

Times a changin

15 años de Playstation by Dekuwa
Christmas has changed for me over the years, from the excited, little, fresh-faced kid with Subbuteo (and tube of UHU glue) to the worn-out parent, with the jaunty paper hat and half-empty glass of beer.

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. its a wonderful life by s_hermanCheck 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.

RTAfter 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.

micro

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!

Flickring candles

Sep 15 (9) by theloushe.If you’re planning on taking a few snaps this Christmas with that new camera/phone, here’s a little bit of fun you can have with them…

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

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 @dailyshootdailyshoot 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

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: Corporate Twitter

We do go on about twitter don’t we?  For me its both social and an invaluable tool.  I can keep in touch with my family and friends and I can get answers to very specific technical questions that Google can only do its best to find.  Some people dislike twitter, but this might appeal more.  Many people just don’t get twitter, or are fearful of exposing personal details over the web.  Enter Yammer.

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
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
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….

What microformats can do for you

I didn’t intend talking about this, I’ve mentioned it before.  I intended talking about something else, but since this is an integral part of that something else, I’ll talk about that another time.

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.

auto-hide-operator

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
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.

Browser security

My web browser of choice is Firefox. One of the appeals is the pile of add-ons that you can use to personalise the way you view the web. If I were recommending a browser, that’s the one I’d go for.

Opera Stay SecureAs 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 ).

Rose tinted json

Lately, we have been looking at providing a little automation to parts of the site which are less dynamic, by using some of the data serialisations that we create, with a sprinkling of javaScript magic.  Specifically we’ve looked at pulling Edge Hill event data, tagged with “rose theatre” into the Rose Theatre site.

This week I will be mostly using jsonCurrently 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:

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

IWMW 2008 – a 3ish day blur

For the last few days, I’ve had the pleasure to attend the Institutional Web Management Workshop in Aberdeen with Mike, Sam and Steve. Aside from registration, the event seemed to just fly by, so until I can focus on specific events, here’s a few, hazy, memories.

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) surprisesSunny

  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 and Usability & Your Websiteil

Getting up at 05:00 is not my idea of fun. Nor is driving to Newcastle, and getting lost before attending a workshop on; Accessibility and Usability & Your Website, organised by Netskills.

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;

WCAG 1.0 was published in 1999, Accessibility badgesand 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.

>