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.
I downloaded the pre-beta version of Firefox, named Firefox Aurora. I started experimenting with it and it seemed alright but did not support the range input type which was sad, but then I right-clicked and opened up the web inspector and saw this:
WOW! - Very cool.
The 3D view of the page structure allows you to pan around and zoom using WebGL. More details are on the Mozilla Development Blog.
Oh yes, it is that time of year again for a quick up haul of the CSS again! Updates include:
Horizantal Navigation
More Images
Bigger Images
Full use of width, whatever screen resolution
Page Tools
Better Browser Support (mainly IE)
What are you opinions?
The big job over the refurbishment was stepping back from HTML 5 tags section and article - the reason behind this was rendering in Internet Explorer.
I use Google Analytics on my site and recently read a post on forrst about browser versions and got interested in what my statistics say on visitors' browsers.
As the stats show, around 9% of my visitors are having a go with IE but up to now, would have seen a mess. So I would like to apologise and welcome you to this design. The word on the street is that Microsoft will be taking up some html 5 tags in the next version of it's famous browser. I am looking forward to seeing that.
Inspired by the fitfinder site, I wanted to make use of HTML 5's Geo Location API to allow a fast way for posting a comment at your location.
I looked into how to find out the name of a place after been given GPS co-ordinates by the browser. Google has a good API called reverse geocoding which you can submit co-ordinates to and get returned a nicely formatted address.
You also may want to search for a different place or may not have a HTML 5 compatible browser (IE) so need to enter your location manually - to do this the geocoding API was used. The user starts typing a place name and a search is done, returning a place name along with it's co-ordinates.
The Maps API then displays the location along with comments posted near there, +/-0.02 of its co-ordinates. You can then submit your own comment and move the marker to exactly where you are talking about.
All that is then stored in a database is the exact co-ordinates of the comment, the text and the time.
My latest little web application (doesn't actually really do anything yet) now finds out, as close as possible, where you are!
The Location Page will get your browser to ask for your permission to tell it where abouts you are. The spec can be found here. The piece of code I use is quite simply:
<script>
$(document).ready(function(){
var latlong;
function error(msg) {
alert(msg);
}
function success(position) {
latlong = position.coords.latitude +","+ position.coords.longitude;
$("#location").html(<img src="http://maps.google.com/maps/api/staticmap?center="+latlong+"&zoom=15&size=600x600&maptype=roadmap&sensor=false&markers=color:blue|label:A|"+latlong+"" title="You are here" alt="Map">");
}
navigator.geolocation.getCurrentPosition(success, error);
});
</script>
This piece of javascript not only requests the location from the browser but then, on success, updates the page with a static map from Google with a marker of your returned latitude and longitude.
Examples of use for this API would be local data, weather, news etc that could all take precedence on a page
I am not sure who invented drag-and-drop but it has been with us I guess since the creation of the mouse. It was something that has never really made it to the world wide web, even though it is done day to day on the desktop.
HTML 5 now adds the draggable attribute allowing a simple method of getting the browser to do something when content is moved around the page. For an example, a list of things that you could move and order in preference.
I have add a little application to the front page of dylanjones.info where you can drag items from my interest bubble into a box which then displays some extra information relating to that item. This particluar example is not the best method to display added content as a click would be just as efficient but I wanted to give it a go.
The HTML for the draggable items is simply:
<span id='drag-2' descr='HTML5: I am learning about HTML5 as it comes out - it is great fun and provides lots of opportunities' draggable='true' ondrag='pickup(this)'>HTML5</span>
<span id='drag-5' descr='Baking: I am very found of Bakery goods, mainly cake, cookies and sweet things' draggable='true' ondrag='pickup(this)'>Baking</span>
<span id='drag-6' descr='Welsh: I lived in Wales for a long time' draggable='true' ondrag='pickup(this)'>Welsh</span>
<span id='drag-8' descr='Student: I am a student' draggable='true' ondrag='pickup(this)'>Student</span>
The "dropbox" is defined as:
<div id="dropbox" ondrop="drop(this)" ondragenter="return false" ondragover="return false">
<p>drag and drop stuff from the cloud above here</p>
</div>
Then javascript and jQuery does the rest:
<script type='text/javascript'>
var text = 'Error: Oh Balls';
function pickup(target) {
text = $(target).attr('descr');
}
function drop() {
$('#dropbox').html('<p>' + text + '</p>');
}
</script>
Very simple indeed!
To summarise: you add draggable=true to elements you wish to drag, on drag you trigger an event, make a dropbox or use an image or something that then triggers an event ondrop - easy peasy.
Visitors of dylanjones.info will have noticed a change in the 'tone' - haha - good one! It's gone all grey (or gray in CSS terms)
With this week quite quiet except for revision, I have had some time to sort the pages out, tidy up some of the old stuff and bring in the new. The main reason for doing so is standards compliance. I have looked into my crystal ball to see what is up and coming and thought ahead so to keep this version of the framework lasting a long time. The answer was clear: HTML 5
I have converted all my output to the HTML 5 Spec (draft) so when it does come - I'm ready!
"But if it is not a here- why use it?"
The main reason is, most decent browsers have HTML 5 support. By decent I mean Firefox, Chrome, Safari. If you are using Internet Explorer then I'm not sure what you'll see when you load this website.
"What is new then?"
The doctype (not very interesting), the header and nav elements are being put to use; I am looking forward to experimenting with databse, location, audio, video and canvas tags in the coming future.
So with all this I went along and checked, re-checked and indeed validated all my pages. Obviously my lovely web hosting service (000 Webhost) have decided to add a script to the end of all my files outside of the end html tag so that throws up 2 errors but all my stuff is clean! I am now also WAI compliant - meaning that I am accessible to everyone (with a decent browser).
I will introduce a bit of colour (color in CSS) soon but for now I'm going to validate all my API output for standard RSS viewers to be able to display the information rather than having people to develop their own reader. I will document this when it arrives.
I have been working hard to try and get everything linked and talking together. I have got a copy of all my tweets and tracks I play, wether it be on iPhone, PC, internet, LastFM etc. This is all copied over to db1 now and thus will be accessible through the API. I havn't quite got all the way - still to do is to check for new tweets and the API bit - but it's a work in progress.
With this data I will be coming up with a syncronised stats page eventually that will update itself making calls from the API, very nice!
HTML 5
I have also completed transferring the whole website over to HTML 5 - obviously with it still in development, a lot more changes need to be made but I'm currently going through the syntax and getting rid on 'divs'.
The picture above shows how linked my stuff is so far - I'm sure it will be expanding as time goes on!
