Tag Archive | Facebook

A More Semantic Web with Schema.org, The Open Graph Protocol and HTML5

Semantic Web with html5, schema.org and the open graph protocol

One of the most important things for any modern business is its internet presence. If you’re not on the internet, or not active and visible on the internet, you might as well not exist to a large group of people. Search Engine Optimisation is the process of improving ones website so that it might appear higher up the Google Search rankings, where more people are likely to find it.

At the same time, one of the most interesting elements of modern software and services  is its openness. Everyone from local councils to The Association of Train Operating Companies is currently in the process of opening up their data to the world and hoping someone innovative, or with a different set of skills and resources, can make something they either couldn’t imagine themselves or didn’t have the time and money to build — for mutual benefit.

One possible enhancements to SEO and Openness for an organisation is to make their website semantic. The definition of Semantics, according to The Oxford Dictionary, is:

The branch of linguistics and logic concerned with meaning. The two main areas are logical semantics, concerned with matters such as sense and reference and presupposition and implication, and lexical semantics, concerned with the analysis of word meanings and relations between them.

The main takeaway point is that things, in this case HTML markup for websites, have meaning. We need to make sure that the meanings we are making visible to the world actually mean what we want them to mean. A nice side-effect of this is that web pages become a lot easier to parse or screen-scrape and extract information from.


Prior to HTML5 the best way to give meaning to a tag was to use an id. So if you were to markup a simple website with a header and a list of news stories you might come up with something like this:

<div id="header">
	<h1>News Website</h1>
	<img src="logo.png" alt="logo"/>
<div id="newslist">
	<div class="story">
		<h2>News Title</h2>
		<p>Here is some exciting news!</p>
	<div class="story">
		<h2>Another bit of news</h2>
		<p>A shame, as no news is good news!</p>

Whilst this is relatively clean code, it does come with some issues. How is a screen-reader or search engine spider meant to know the meaning of a “story” element for example? Whilst it seems simple viewing it as a human being, we must remember that there are literally thousands of possibilities for element id names that mean “story”.

HTML5 provides some new Semantic Tags which allow us to bake meaning into elements themselves. Check out the example below which simplifies and improves the previous code using the new HTML 5 semantic tags.

	<h1>News Website</h1>
	<img src="logo.png" alt="logo"/>
		<h2>News Title</h2>
		<p>Here is some exciting news!</p>
		<h2>Another bit of news</h2>
		<p>A shame, as no news is good news!</p>

This implementation allows a browser, spider or screen reader to accurately understand what each element is for as the tag names used have been standardized by the W3C. In case you’re wondering the `<article>` tag is what is detected by browsers like IE and Safari to show a Reading View.

Wherever possible you should aim to use the semantic tags over generatic tags such as `<div>`. It makes code easier to read in addition to being more semantically correct. A full list of the HTML5 semantic tags and their meanings can be found on DiveIntoHTML5.

The Open Graph Protocol

Whilst I had been using HTML5 semantic elements for some time, I wanted to do more as part of the CS Blogs project both in terms of SEO and improving user experience through semantics.

I started with the Open Graph Protocol. The Open Graph protocol was developed by Facebook to allow websites to integrate better with Facebook, both in app and on the web, however other Social Media services also take advantage of open graph, including Pintrest, Twitter and even Google+.

The Open Graph protocol is implemented as a series of `<meta>` tags that you place in the head of your HTML pages. Each page can describe itself as identifying a Person, Movie, Song or other graph object using code such as that shown below for a Blogger on CS Blogs.com

<meta property="og:title" content="The Computer Science Blogs profile of Daniel Brown" />
<meta property="og:site_name" content="Computer Science Blogs"/>
<meta property="og:type" content="profile"/>
<meta property="og:locale" content="en_GB"/>
<meta property="og:image" content="https://avatars.githubusercontent.com/u/342035" />
<meta property="profile:first_name" content="Daniel"/>
<meta property="profile:last_name" content="Brown"/>
<meta property="profile:username" content="dannybrown"/>

As you can see most open graph properties start with an `og:` suffix, except those particular to the type of content you are making available, which are suffixed with the type name. The documentation for what tags are available can be found on the Open Graph Website.

This code will then be used by Facebook when someone links to that particular web page in their messages, or on their newsfeed. Here’s an example:

Open Graph element displayed on Facebook newsfeed

Open Graph element displayed on Facebook newsfeed

Whilst open graph is great for this purpose it does have some limitations. Each page can only be of one type, and you cannot add semantics for more than one element. This limitation is a problem for pages such as csblogs.com/bloggers which represents multiple people.

Despite its limitations its still worth implementing open graphs on pages for which it makes sense, especially if those pages are likely to be shared on social media.

Facebook, as usual, have some great development tools for open graph including the Open Graph Debugger, which allows you to see how Facebook interprets your page (but because Open Graph is a standard it’ll also help you debug any issues with Pintrest, Twitter etc.)


Schema.org is a standard developed in a weird moment of collaboration between the 3 search engine giants — Google, Microsoft and Yahoo. It allows you to specify the meaning of certain elements of content. You can technically do this using 3 different types of syntax, however in this blog post I will focus on micro data, partly because its the easiest to understand, fits inline with your pages and is an official part of the HTML5 spec, but also because its the only format currently fully supported by the Google search engine.

To begin with here is the HTML 5 structure of a blog post before it has been marked up with schema.org micro data. It should be pretty simple to understand if you’ve checked out the HTML 5 semantic elements mentioned previously.

        <h2><a href="dannybrown.net">A Blog Post</a></h2>
    <img src="dannybrown.net/image.png" alt="Featured Image"/>
    <p>This is an exert... <a class="read-more" href="dannybrown.net">Read more →</a></p>
        <div class="article-info">
            <a class="avatar" href="/bloggers/dannybrown">
                <img class="avatar" src="dannybrown.net/danny.png" alt="Avatar"/>
            <a class="article-author" href="/bloggers/dannybrown">Daniel Brown</a>
            <p class="article-date">1 day ago</p>

In order to markup our html with Schema.org we need to do a few things:

  1. Determine which Schema.org schema best suits the element we are describing.
  2. Determine the scope of that element
  3. Add the microdata attributes to our HTML

For our blog post example above the most relevant schema is BlogPosting. You can see all of the different types in a hierarchy at schema.org. The scope of the BlogPosting is the entire block contained within the `<article>` tags.

The scope of an item is delimited on the opening tag of our scope using the `itemscope` attribute. Read it as “Every bit of micro data within this element is about one item”. When we define the `itemscope` we also need to give it is type — this is done with the `itemtype` attribute. The value of the `itemtype` is the url of the schema.org schema — in our case `http://schema.org/BlogPosting`.

The values of fields that make up our schema, for example the “headline” of a blogpost are either other schemas or the values of elements. Here’s a fully schema’d up blog post:

<article itemscope itemtype="http://schema.org/BlogPosting">
        <h2 itemprop="headline"><a href="dannybrown.net">A semantic blog post</a></h2>
    <img itemprop="image" src="dannybrown.net/image.png" alt="Featured Image"/>
    <p itemprop="articleBody">This is an exert... <a itemprop="url" class="read-more" href="dannybrown.net">Read more →</a></p>
        <div class="article-info">
			<div itemscope itemprop="author" itemtype="https://schema.org/Person">
                <a class="avatar" href="/bloggers/dannybrown">
                    <img class="avatar" itemprop="image" src="dannybrown.net/danny.png" alt="Avatar"/>
                <a class="article-author" itemprop="sameAs" href="/bloggers/dannybrown"><span itemprop="givenName">Daniel</span> <span itemprop="familyName">Brown</span></a>
            <p class="article-date" itemprop="datePublished">1 day ago</p>

Here we can see that just by assigning an `itemprop` attribute to a tag, the textual content it contains becomes the value of the named field. We can also see that a Person schema can be nested inside our BlogPosting schema to give us a rich author ‘object’.

One other thing worth noting here is that I elected to add `<span>` elements (which don’t change the visual layout of the HTML page) around the first and last names of the author so as to be able to correctly mark them up with `givenName` and `familyName` itemprops.

Any elements which you mark up with schema.org should be visible to the end user. Writing schema elements into your page and then hiding them via css or JavaScript will actually result in your SEO ratings being reduced, and could impare applications which rely on schema properties. (For example if a screen reader used schema.org properties, which to my knowledge none do yet)

Google provides a debugger for Schema.org, which came in great use whilst I was added in support for CS Blogs, its called the Structured Data Testing Tool. The output for a the home page of csblogs.com is shown below:

Google Structured Data Testing Tool Output

Google Structured Data Testing Tool Output

As you can see using Schema.org means that the Google search engine can actually understand what is on the page, and therefore its semantic meaning. csblogs.com is therefore more likely to go up in search terms that include the word blog, or search for the names of the authors mentioned for example.

Wrapping Up

Hopefully this blog post will have made you think about what you can do to make your websites more semantic — and therefore better for search engines, accessibility and in terms of openness. You can use all three of the technologies above at the same time, and I would implore you to do so. In return you’ll benefit from better Search Engine rankings, your users will benefit from better Social Media integration and screen reading for those with disabilities, and search engines can point people to web pages with a better understanding of what that page represents rather than just scanning for keywords.




This weekend I was lucky enough to be part of The HackTrain.

HackTrain is the first ever train hackathon in Europe targeted to #HackTheRails! An unforgettable experience where 40 of the best developers from all around Europe will revolutionize the world! Jump on board the HackTrain for a once in a lifetime journey, travel to the top tech spaces in the UK, hang out with the market makers in the Startup ecosystem, and create startups that will revolutionize the world!

The journey started out in London where National Rail Enquires, The Association of Train Operating Companies, East Midlands Trains and Virgin Trains East Coast all gave talks about their technology stacks, public APIs they had made available and challenges with technology they were trying to overcome. The sponsors for the event, including financial computing company Bloomberg also spoke about their APIs and what they do.

The first train we got took us from London St. Pancras to Sheffield via the Midland Mainline. During this time we had icebreaker sessions to get to know our fellow hackers, including having to come up with a pitch for a company whose name was an amalgamation of two random words. My team got Snickers Jacuzzi, so we pitched an idea for advertising jacuzzis on the inside of Snickers wrappers. Mad, I know.

Once we arrived in Sheffield we went to Electric Works — an office full of tech startups and home to Europe’s largest indoor slide — this was where each of the 40 participants who wanted to could pitch an idea. I decided to pitch the idea of an application which could dynamically work out any delays happening in real-time to your train (or any subsequent trains in your journey) and alert anyone who might be affected by this, for example a parent picking you up from the train station or anyone subscribed to attend an event on your Google Calendar. In this example it could also inform said parent what time they would have to leave their current location to pick up their child on time. Once everyone had pitched their ideas each of the participants voted for which projects they felt should be worked on. 11 out of 40 people voted for my idea, and so I was able to attempt to form a team to develop it.

However, due to weird team sizes my team had to merge with another team. This was a blessing in disguise as they were nice people to work with, however it meant that only one of our projects could be worked on. I suggested we worked democratically and put it to a vote of the 5 members of the new team and it was decided that we would work on the other idea.

The idea the team I was in developed over the course of the following 48 hours was called Icebreaker. Icebreaker aimed to solve the problem of boredom on long train journeys by matching you up with people on the train who were interested in talking and making friends. People would be allocated travel partners based on their interests and likes on Facebook. You can watch a truly horrifying video of an advert we produced showing how the system works below:

The workflow can be explained as follows:

  • Buy a ticket from TheTrainLine.com or similar
  • They redirect you to Icebreaker
  • If you want to talk, enter your mobile phone number and log in with Facebook. If not, close the tab.
  • Do nothing more, we handle all the hard work!
  • 10 minutes before you get on your train we’ll tell you who you’re matched with. If you still want to meet someone reply ‘yes’. If you’re not in a good mood that day or otherwise don’t want to meet reply ‘no’ or don’t reply!
  • If both people reply with ‘yes’ within 10 minutes, a location is selected for them to meet on board, and some unreserved seats where they could possibly sit together are suggested.

Whilst we were developing the system we were lucky enough to visit the National Railway Museum in York and Tech Cube in Edinburgh. A highlight of the journey for me was going over the Royal Border Bridge (aka the Berwick-upon-Tweed Viaduct).

The Final Judging of the competition happened in the National Railway Museum at York (nice and close to home ;)). Unfortunately our team wasn’t to win anything this time, however I can say I learnt a lot from the experience and made some wonderful connections with people in my industry and that of the train industry. I particularly learnt quite a lot about the Facebook and Twilio API’s, how to develop a business plan in a short period of time, how not to act on video and how important consumer validation is to an idea.

I’d like to take this time to thank the organisers, sponsors and judges of the HackTrain as well as my fellow participants who made it a weekend to remember.


The University of Hull Microsoft User Group

The University of Hull Microsoft User Group

Part of my job as a Microsoft Student Partner is to inspire people to use, love and develop technology. I, for one, am absolutely passionate about what I do, and love every second of development and learning that comes along with my degree. I know many other people at my University are the same — you have to be to do well, in my opinion. I wanted there to be a place for people like this to come together and collaborate, particularly if they’re interested in Microsoft technologies — So I made one.

Technology Enthusiasts, welcome to The University of Hull Microsoft User Group.

The user group, which you can find on Facebook here, is a place for people to come together and talk about Microsoft Technologies, ask for help with using them or developing for them and to make friends with similar interests. Just ‘Like’ the page to get started.

As the Admin of the group I will provide you with information I think might be useful, make you aware of events all over the country that would be useful for you and help you find any information, contacts or resources you might need.

Outside of the Facebook page I will be giving lectures on how to get started developing for Microsoft Products, particularly Windows 8 and Windows Phone 8 — as these are the technologies peoples are most interested in according to a poll I made. The first lecture will be dealing with how to implement Windows 8 Features including the search charm, live tiles and split view. Keep your eyes peeled on the Facebook group and this blog for more information about dates and times.

That’s all for now. Get signed up to the Facebook page and hopefully together we can make a community


UX not Specs – A Second Take

After writing my previous blog post on the topic of “UX not Specs” I posted a link to it on the “Microsoft UK Students Developer Group” — A facebook resource set up by Microsoft exclusively for students who have submitted apps on App Hub for Windows Phone or XBOX — in order to try and get some opinions on both the topic and my writing. I was very pleased with the responses I got. Due to the fact they were posted on Facebook I was a bit annoyed that some day I might no longer have access to them, so I thought it would be nice to write them up in this blog post and respond to a few of the comments made. 🙂

Phil Cross – Academic Audience Manager at Microsoft said:

Couple of typos in it Danny but it reads well (and a good photo). I like the way it starts, grabs your attention and then moves onto the commentary

After seeing this I went ahead and fixed the typos, it turns out Google Chrome hadn’t been catching all my typo’s whilst writing up the blog post on the WordPress website, but Microsoft Word did when I pasted the blog into the program. In future I think I’ll write my blogs in MS Word and then copy them to wordpress in order to reduce typos as much as possible. I appreciated the comment about my writing style, that’s what I was trying to achieve 🙂

Richard Walters – Developer of Calculator² and a PhD Physics student at Oxford University said:

Good article and I completely agree with you, quad core is currently completely unnecessary for a phone (I say currently because who knows how we’ll be using phones/tablets in 10 years time). The interesting question is why your friend, and a large proportion of the consumer market in general, go for Specs not UX.

Specs not UX is certainly one reason for Windows Phone not taking off as well we’d all like, although it looks like Microsoft are addressing this with Windows Phone 8. My impression is that the initial purchasers of any new gadget are technology ‘geeks’. For much of this audience, but not all, specs will matter because they’re doing things with the device which makes use of the improved/newer features. These are then the people who will review, blog, and create a buzz about a product so that the masses hear about it. Average Joe hears that there’s this new product with lots of new, fancy features and wants one, even though he’ll hardly use any of them. Even if he can’t afford the top of the range, he’ll go for the same brand because it’s associated with the best. In the technology World, specs means cool, and cool sells.

Of course, the other issue with specs for phones is that they are used above UX to sell the devices. In every phone shop or website the specs are listed with a device and are used to compare them. Why should I go for the Lumia 800 above the Galaxy S2 when the S2 has dual not single core? Dual core is better right? Unfortunately it’s similar with the number of apps. 70,000 vs 500,000 is a huge difference and used all over the place to compare WP7 to Android/iPhone, and that’s what Average Joe sees (although Windows Phone is still behind in the quality debate too with the lack of top apps from third parties).

Admirably, Microsoft went for UX not Specs and concentrated on building an operating system that works well on low-end devices and is developer-friendly. In the long-run I believe Windows Phone will succeed because of this, while high end devices will also appear to help with the specs factor. It’ll also be interesting to see how Nokia’s Beautifully Different campaign will work, because I think it’s a very good strategy. As much as I like the Smoked by Windows Phone campaign, I don’t believe it will work as well because (I hope this doesn’t sound too horrible) logic doesn’t apply to the masses, who will certainly go for cool over better.

I hope that didn’t sound too condescending. I guess what I was driving at is that many consumers don’t make informed decisions about their purchases, often because this takes time (for research, etc.) that many people simply don’t have. Consumers can then be swayed by brands, marketing, peers’ opinions, etc. With phones, a spec sheet is a way to make the most informed decision possible in a short period of time.

Richard seems to be on the same wavelength as me and I agree with a lot of what he has to say, a user experience is a wholly subjective thing – manufacturers can’t write down hard data on user experience, it simply doesn’t exist, they can however show you hard data on specifications and — frankly — most modern smartphones have better specs on paper then even the most high end Windows Phone 7 device. That specificationis what people can compare with other devices and therefore that is, in the end, what makes a customers decision on which phone to buy.

Michael Hough had an opposing opinion and explained how quad core processors are not always necessarily running all 4 cores and therefore can be more power efficient than you would expect:

Your major point seems to be that quad core processors aren’t necessary, and more importantly that Tegra 3 has less battery life. I contest that. I have the Tegra 3 processor in question on my Asus Transformer Prime, and my experience is that I have around the same battery life as a dual-core iPad 2, twice as much as the (also dual core) OG Transformer. Tegra 3 has a power-saving core that means that the 4 cores are only used for taxing activities such as “console-quality gaming”.

Your opinion of quad cores not being necessary is slightly flawed, because it’s based on experience of using a Windows Phone alone. Because Windows Phones are all essentially the same (800×480 display, 1.4ghz cpu, 512mb RAM), developers know the limits of the system. With the Tegra 3 and the (dual core but still ridiculously powerful) Snapdragon S4 on Android, and the (again, dual) A5X processor on iOS, app developers have much more processing power to play with, allowing games and media to contain significantly more detail.

Personally, being an owner of the Nokia Lumia and a dated HTC Desire, I’m struggling to decide between the two. A big down side of WP7 for me is that all my paid apps are on Android, but this isn’t a huge problem. What is, from a user experience standpoint, is that Windows Phone lacks apps that I use every day – a train finder that covers my area, or a decent free sat-nav app, for example, both of which are available on Android.

Quite frankly, it’s a shame I’ll have hit my upgrade on my Desire before Windows Phone Tango comes out. I think that will fix a number of the issues I have with the system, but I’ll probably be using an Android as my daily driver by then. Although I’ll keep developing for both platforms, of course.

John Nolan who is studying Computing: Application Development at Edge Hill University chimed in with some important insights into WP as a platform and refuted some of the points made by Michael:

Your article does raise a nice point on battery life, but then crucially to your point comparing with WP, WP as an OS does not support multiple cores, not that it needs it, even if it did – the OS does not support it. I would also like to address Michael, I completely disagree with your argument that all WP are the same, they are not, they do however have the same minimum requirements so the basic experience from the products over point of view is the same. You also said that the OS lacks a free Sat Nav application, well you said you owned a Lumia 800 and funny enough I spent an hour in Halfords today and found that Nokia Drive outperformed many Nuvi’s and Navmans, Tom Tom struggled too finding and building routes.

Anyway back to my main point – we all came from a generation of phones we class as “dumb phones” when in fact I class it as a phone – it did do phone calls right? I mean that’s all they were supposed to do, we had text and some games with a little customization of the OS, but at the end of the day we charged that “dumb phone” once a week. I now have to charge my phone daily, sometimes I get a day and a half out of it but my new habit at night is to put my phone on charge.

I welcome any design that becomes more efficient whilst either maintaining performance or even increase it. So the likes of Android and iOS who support such hardware is completely outrageous waste of energy and a poor solution to their bigger problem and that is the OS lacks efficiency with tasks, something I have not come across on my Omnia 7 or my Lumia 800. Microsoft are on the right route, they put a real threat out to Android and iOS with their OS and the only way they could respond is to make the UX worse by decreasing the functionality period of a device to compensate its lack of performance compared to their competitors.

Whats really funny is that this is a complete repeat of the GHz race, we should all know by now that bigger and higher numbers does not always mean better, I remember the days my AMD Hammer Core running at 2.1 GHz smashed everything Intel had who claimed their sales through the lack of information the public had on how their products actually worked. I think its important that we all educate the people on why this OS is better and why we like it so much compared to the competitors, no we dont have dual, quad or octo cores, no we dont have silly resolutions but we do have a functional platform that is designed to make the everyday task a little easier whilst keeping us connected to our social networks which is currently driving the world.

Finally Jack Betts who is studying at Glamorgan University said:

You raise an interesting point that Quad cores are not useful in a mobile phone and i agree with you. However you seem to lose track of your argument and only focus on battery life. What about battery to processing power ratios?
What about the scenario in which a single core take 100secs to complete a task and a quad core takes 25secs, would the quad core use more power than single ?
You then bring in Windows phone at the end to cover user experience. I agree the windows phone operating system is a joy to use and is great for developing for (apart from 3D XNA games then i have some ranting to do) . However you completely neglect apple who are mostly about the user experience.

User experience also covers personalisation and the windows phone is very strict about what you can and cannot change. Control is also about user experience and Windows Phone 7 takes a lot of control away from the user, some times this is good sometimes this is bad.

Battery life, you are right about the usage time of a smartphone being about a day and they do take a while to charge however its not just about the battery hardware that affects battery life. Battery technology hasn’t changed in years, we are still operating on chemicals to produce an electrical current. It will be a long long time until a new power source comes to the consumer market so i believe that concluding that “we need to wait for better batteries” is poor.
A better angle to look into is how Mobile Operating systems take measures to preserve battery life and proposing new/updated methods on battery conservation.

“UX not specs” however is a brilliant concept and i do think you should develop it further into a full paper.

In some ways this comment provided the most food for thought. 🙂 In answer to his second point I don’t think that any quad core processor is exactly 4 times more efficient than a similar single core processor, controlling multiple threads on multiple cores takes quite a bit of overhead and many applications themselves are not actually developed in a way to fully utilise multi-core architectures, this is still true today on Windows, which has had multi-core support for years.

He is also right that I neglected Apple in the post, and again he is right that Apple are famed for their user experience. I must say this is one thing I really admire about the company and the software they produce, they can make relatively complex tasks simple and easy to understand and use even for the least technologically inclined among us, however in my somewhat biased opinion I would say that Microsoft are doing an even better job (perhaps even inspired by Apple) than Apple themselves at the moment with Windows Phone 7 and indeed even Windows RT (A.K.A Windows on ARM for Tablets)

The idea that Battery’s aren’t keeping up with the rest of technology seems to be an unfortunate fact of life. 😦 I’m hoping we will make progress on this in the near future but if not Jack is right, we need to look into how we can make our software more efficient at saving power. Some android devices provide an application which can be used to see how much of the battery each application/piece of hardware is taking and it always seems to me that Wi-Fi and the screen take the most power.

Microsoft have aimed to reduce this in Windows Phone by turning off Wi-Fi when the phone is locked, so you don’t waste power connected to a network when you’re not using it, and dimming the display if you have a white background. This is because white takes the most power to display on AMOLED screens. Another interesting thing Microsoft have done regards battery power is to make the default background black — this is because on modern AMOLED screens the display literally turns off in the areas that are black and this saves a lot of power.

This post has become pretty big now so I’ll leave it here. If you have anything else to say please whack your ideas in the comments section below. Thanks to all my commenters on Facebook.


Sweepy Cleaner Theme Tune and Social Network Integration

Today I uploaded this video showcasing the new Sweepy Cleaner theme tune, lovingly created by Shane Gravestock, as well as the addition of named highscores and score-posting to Social Networks including Facebook, Twitter and Windows Live.

If you want to use Social Networking in your own applications then my good friend Rob Crocombe has a guide on adding it here.

I hope you enjoy watching the video as much as I did making it.