Blog

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="http://schema.org/TheaterEvent">
	<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>
	</header>
	<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>
	</article>
</section>

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.

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