Homework Six

Semantic markup in HTML -- RDFa, JSON-LD and Microdata

out 2017-11-29, due 2017-12-15 2017-12-11

This homework will give you some experience in embedding semantic information in HTML documents using both Microdata and RDFa.

In class, we talked about marking up a recipe using the vocabulary from schema.org. I imagined that a good assignment would be to find a recipe online and add the semantic markup. But I discovered that the popular online recipe sites are already doing this. The sites use the schema.org vocabulary, some using a Microdata encoding and others RDFa. I also saw many that also embedded semantic tags in RDFa using Facebook's open graph vocabulary. It was hard to find a recipe that didn't already have semantic markup!

Take a look at the food.com recipe for Bourbon Chicken. The Google's rich snippets tool shows the recipe's microdata content and using our simple getdata.py program to reveal the page's RDFa content. You can also install the OpenLink Structured Data Sniffer for your browser to examine structured data found on a Web page or use Google's structured data testing tool.

What to do

For this assignment, we'll ask you create an HTML file describing a UMBC-related event and add useful semantic markup using appropriate terms from the schema.org vocabulary. You will create three versions, one using RDFa, one using Microdata and one using JSON-LD.

Start by studying the schema.org vocabulary for Event. Note that it has many subtypes -- you should describe your event as one (or more) of those if appropriate. In describing an event, you will probably need to create data for instances of other classes, such as Person, Organization and Place.

Next find or create an event that your page will describe. You can use a my.umbc.edu event, a CSEE talk or something else. Feel free to keep the page design and layout simple — our focus is on adding semantic markup. We took the content from a recent announcement of a talk by Alfred Aho and created three examples:

Here is another example, that shows that Google looks for and processes all three kinds of markup encoding.

Put your three pages on the Web. You can use your account on gl.umbc.edu, a dropbox account, a Google wiki site or any other place as long as it is public. Name the files ID_rdfa.html, ID_microdata.html and ID_jsonld.html where ID is your umbc username (e.g., finin). Be sure to check your urls with Google's structured data testing tool to ensure that the results are what you intended.

What and how to submit

In addition to putting your three files on the web, include them in your hw6 repository on github. Your initial repository will contain a file myurls.txt. Edit this to give the three urls, each on it's own line. You must also add, commit and push your three html files, ID_rdfa.html, ID_microdata.html and ID_jsonld.html where ID is your umbc username (e.g., finin), to the repository.