HTML Microdata - Event Markup

- edited | 0 comments | website development html5 css3 york

For the 2013 Central Hall Musical Society's production of West Side Story, I was invited to design and make the website to allow registration, cast audition bookings and ticket sales. I used the Foundation CSS and JavaScript framework along with a jazzy font from Google called Alfa Slab One.

There were 2 main things I added in differently to this site compared to the 2 I had previously developed for the Central Hall Society. The first one was from a design perspective, and the the second was microdata.

CSS3 Transformation Animation

For the teams pictures, I added in a CSS3 transform that titled their heads at an angle, where on hover the angle changed giving a slight spin appearance. This was done with a few CSS declarations.

figure img{
  -webkit-transform: rotate(353deg);
  -webkit-transition: all 1s ease;
  -ms-transform: rotate(353deg);
  -ms-transition: all 1s ease;
  -o-transform: rotate(353deg);
  -o-transition: all 1s ease;
  -moz-transform: rotate(353deg);
  -moz-transition: all 1s ease;
  transform: rotate(353deg);
  transition: all 1s ease;

figure img:hover {
  -webkit-transform: rotate(355deg);
  -ms-transform: rotate(355deg);
  -o-transform: rotate(355deg);
  -moz-transform: rotate(355deg);
  transform: rotate(355deg);
HTML Microdata

After writing up the markup and adding the CSS to match the design, I looked at exposing the event data to search engines via microdata.

By adding directly to the existing HTML markup, I was able to identify the event type, the performer, the location and the date.

<section class="row" itemprop="event" itemscope itemtype="">
<header class="eight columns">
<h6><span itemprop="performer">The <span itemprop="location">University of York</span> Central Hall Musical Society</span> presents</h6>
<h1 itemprop="name" style="text-transform:uppercase">West Side Story</h1>
<article class="four columns">
<h2>Week 5, Spring Term</h2>
<h5 itemprop="startDate" content="2013-02-07">Thursday 7th</h5>
<h5>Friday 8th</h5>
<h5 itemprop="endDate" content="2013-02-09">Saturday 9th</h5>
<h4>February 2013</h4>

When the search engine robots index the page, they should be able to pull out the data and use this to provide more relevant results. Google provide a tool to test the end result.

Search result as it appears in Google with event date and location

It was very interesting to see all the types of different things you can markup and expose data for, a list is on the site.


| 0 comments | android is my train delayed phone development trains

I have had my Samsung Galaxy S2 for a few weeks now and I have really enjoyed having a smartphone back in my pocket, after the demise of my iPhone.

Joining the Android Developer Program only cost $25 and I have now been experimenting with what I can get my phone to do.

A good starting point was to port ybsolo over to the Android Market. At the moment all the application does is open a web view but with the service being advertised in the market place, we hopefully will see some people trying it out.

Is My Train Delayed? is a perfect service for the mobile platform so I have been moving it to a native application. It is currently on the Android Market at version 4.0 as I have been adding features over the past few days.


Currently at 146 downloads, it is doing quite well. It pulls the live data straight from National Rail and creates a nice scrollable table view. It also auto-completes station names. On the website, you can locate your nearest station, I am experimenting with this on the android application as well as detailed journey information in a popup window.