Creating timelines with semantics

Preamble, definitions

A timeline is a list of events, with each event defined by its time of occurrence. We can choose to show specific times and dates (an absolute or time-based timeline); or show the elapsed time from an arbitrary starting point (a relative or duration-based one).

When creating documents for the web, it's sometimes useful for the information to be readable by both humans and computers/programs. To help computers do this we can add semantics to our documents to describe elements on our page.

We can already simply describe date/time-based events in HTML using microformats (specifically hCalendar), and putting those events in a list is possible, thus creating a time-based timeline.

What we cannot do (easily) in HTML is represent duration-based time-frames. Sometimes we just don't know/care when things will happen; but we do know (or care about) how long things will take.

This is the problem I have - specifically, with the planned process for a project. I have a guideline for when I want things to happen, but I don't know when the process will start. And if I wanted to pass that on to computer to process/share/manipulate, I couldn't.

Luckily, the core specification for making calendars does give a way of doing this. When expressed in RDFa and styled with CSS, we can create a timeline that is also machine-parseable - thus creating a reusable and shareable process.

View demo

Events do not have to start

Although it's customary to have an event with a start time, in fact dtstart is not required as long as you state a METHOD. In RFC-5545 METHOD is an open property, so ~~let's set this method as TIMELINE.~~it does not matter what it is set to.


       BEGIN:VCALENDAR
       METHOD:PUBLISH
       VERSION:2.0
       PRODID:-//Exampleman//My Process//EN

Now we create events for the timeline:


	BEGIN:VEVENT
	UID:[email protected]
        DTSTAMP:20120725T140000Z
	SUMMARY:First part
	DURATION:PT14D
	END:VEVENT
	
	BEGIN:VEVENT
	UID:[email protected]
        DTSTAMP:20120725T140000Z
	SUMMARY:Second thing
	DURATION:P14D
	END:VEVENT
		
	BEGIN:VEVENT
	UID:[email protected]
        DTSTAMP:20120725T140000Z
	SUMMARY:Thing that happens while second thing is happening
	DURATION:P14D
	END:VEVENT
	
	BEGIN:VEVENT
	UID:[email protected]
        DTSTAMP:20120725T140000Z
	SUMMARY:Other thing
	DURATION:PT2H
	END:VEVENT
	
	BEGIN:VEVENT
	UID:[email protected]
        DTSTAMP:20120725T140000Z
	SUMMARY:Last Thing
	DURATION:PT5H
	END:VEVENT

We now need to mark out the order of this sequence, but the specification has no such property. However, we can extend iCalendar and so let's do so with an X-TIMELINE-OFFSET property, and set it to only accept duration values. The duration offsets are relative to the "zero time" of the first event.

The complete timeline would then look like this:


       BEGIN:VCALENDAR
       METHOD:PUBLISH
       VERSION:2.0
       PRODID:-//Exampleman//My Process//EN

	BEGIN:VEVENT
	UID:[email protected]
        DTSTAMP:20120725T140000Z
	SUMMARY:First part
	DURATION:PT14D
       	END:VEVENT //note this has no offset because it's first.//
	
	BEGIN:VEVENT
	UID:[email protected]
        DTSTAMP:20120725T140000Z
	SUMMARY:Second thing
	DURATION:P14D
        X-TIMELINE-OFFSET;VALUE=DURATION:PT2D //this happens two days after the first event//
	END:VEVENT
		
	BEGIN:VEVENT
	UID:[email protected]
        DTSTAMP:20120725T140000Z
	SUMMARY:Thing that happens while second thing is happening
	DURATION:P14D
        X-TIMELINE-OFFSET;VALUE=DURATION:PT4D
	END:VEVENT
	
	BEGIN:VEVENT
	UID:[email protected]
        DTSTAMP:20120725T140000Z
	SUMMARY:Other thing
	DURATION:PT2H
        X-TIMELINE-OFFSET;VALUE=DURATION:PT28D
	END:VEVENT
	
	BEGIN:VEVENT
	UID:[email protected]
        DTSTAMP:20120725T140000Z
	SUMMARY:Last Thing
        X-TIMELINE-OFFSET;VALUE=DURATION:PT30D
	DURATION:PT5H
	END:VEVENT
       END:VCALENDAR

This can then be mapped in RDFa using-

Wait. What about microformats?

Ah. This would be wonderful, but hCalendar requires a start date; and it doesn't currently allow extended prefixes - or at least, it doesn't state it in the specification. Nor can you set the METHOD of the calendar.

XML and RDFa representations

The RDF Calendar Workspace uses RFC-2445 but it's still all good. As XML the calendar looks like this:

<vcalendar>
<method>publish</method>
<version>2.0</version>
<prodid>-//Exampleman//My Process//EN</prodid>
<vevent>
<uid>[email protected]</uid>
<dtstamp>20120725T140000Z</dtstamp>
<summary>First part</summary>
<duration>PT14D</duration>
<x-timeline-offset value="duration">PT5D</x-timeline-offset>
</vevent>
<vevent>
<uid>[email protected]</uid>
<dtstamp>20120725T140000Z</dtstamp>
<summary>Second thing</summary>
<duration>P14D</duration>
<x-timeline-offset value="duration">PT2D</x-timeline-offset>
</vevent>
<vevent>
<uid>[email protected]</uid>
<dtstamp>20120725T140000Z</dtstamp>
<summary>Thing that happens while second thing is happening</summary>
<duration>P14D</duration>
<x-timeline-offset value="duration">PT4D</x-timeline-offset>
</vevent>
<vevent>
<uid>[email protected]</uid>
<dtstamp>20120725T140000Z</dtstamp>
<summary>Other thing</summary>
<duration>PT2H</duration>
<x-timeline-offset value="duration">PT28D</x-timeline-offset>
</vevent>
<vevent>
<uid>[email protected]</uid>
<dtstamp>20120725T140000Z</dtstamp>
<summary>Last Thing</summary>
<x-timeline-offset value="duration">PT30D</x-timeline-offset>
<duration>PT5H</duration>
</vevent>
</vcalendar>

And then this can be mapped out in RDFa.

So, looking at my timeline on the DOME page again, I can summarise it as:

day 1: promote events (all the way through)
days 1-14: open submissions for new work (about 2 weeks)
days 14-21: Selections process (about 1 week)
days 22-49: Rehearsals ( max. two in a four-week period)
days 42-60:Find musicians for next performance (about a week and a half?)
day 56: Performance (about half a day)

I can then insert the RDFa attributes, ensuring I get the correct structure - here's a possible representation:

<div xmlns:cal="http://www.w3.org/2002/12/cal/ical#" >
<ul id="timeline" property="cal:method" content="publish">
<li about="#dome0" typeof="cal:Vevent">
<span property="cal:dtstamp" content="20120725T140000Z"></span>
<span property="cal:duration" content="P60D"><strong property="cal:summary" title="all the way through">promote events</strong></span>
</li>
<li about="#dome1" typeof="cal:Vevent">
<span property="cal:dtstamp" content="20120725T140000Z"></span>
<span property="cal:duration" content="P14D"><strong property="cal:summary" title="about 2 weeks">open submissions for new work</strong></span>
</li>
<li property="cal:x-timeline-offset" about="#dome2" content="P14D" datatype="xsd:duration" typeof="cal:Vevent">
<span property="cal:dtstamp" content="20120725T140000Z"></span>
<span property="cal:duration" content="P7D"><strong property="cal:summary"  title="about 1 week">Selections process</strong></span>
</li>

<li property="cal:x-timeline-offset" about="#dome3" content="P22D" datatype="xsd:duration" typeof="cal:Vevent">
<span property="cal:dtstamp" content="20120725T140000Z"></span>
<span property="cal:duration" content="P28D"><strong property="cal:summary" title="max. two in a 4-week period">Rehearsals</strong></span>
</li>
<li property="cal:x-timeline-offset" about="#dome4" content="P42D" datatype="xsd:duration" typeof="cal:Vevent">
<span property="cal:dtstamp" content="20120725T140000Z"></span>
 <span property="cal:duration" content="P18D"><strong property="cal:summary" title="a week and a half?">Find musicians for next performance</strong></span>
</li>
<li property="cal:x-timeline-offset" about="#dome5" content="P56D" datatype="xsd:duration" typeof="cal:Vevent">
<span property="cal:dtstamp" content="20120725T140000Z"></span>
<span property="cal:duration" content="P12H"><strong property="cal:summary" title="half a day?">Performance</strong></span>
</li>
</ul>
</div>

This displays very plainly as

promote events
open submissions for new work
Selections process
Rehearsals
Find musicians for next performance
Performance

...but you can then use any styling you wish, but importantly the code underneath will also express what you're trying to say visually.

In the demo page, I've added a GRDDL profile - and it is this that extracts the data from the HTML+RDFa. All that is needed is an RDF to iCalendar converter - ~~there is a Python script, but I couldn't get it to work.~~which I have now written.

Why not use the Timeline Ontology?

Because practically speaking, it's a nightmare. The learning curve for Timeline RDF is steep, whereas mapping timelines into a framework that people are already used to using [i.e. iCalendar] makes more sense to me.

comments

Corey Mwamba
30th Oct 2012 | 8:38am
And very curious to see if there are any working RDF to iCalendar parsers out there. My searches have been inconclusive.

Corey Mwamba
1st Nov 2012 | 8:15am
Never mind—I made one.

Michael Carney
26th Nov 2012 | 7:59pm
I found your W3C post while doing some SW research for an upcoming informal learning project. When will the internet make these connections for me! As soon as I saw your timeline I envisioned living dynamic timelines, with information coming from multiple sources, not just for scheduling but visualizing all the factors that go into... something. Where can I get more information on your SM efforts ?

Corey Mwamba
26th Nov 2012 | 8:47pm | replying to Michael Carney
Hello!

Well, they would be here. But it's worth mentioning that this is a hobby! However I am writing a short tutorial on how to mark up events in RDFa—you can look at where I've got to so far... hope this is useful.

Michael Carney
26th Nov 2012 | 9:03pm
Thank! Looks like a nice start fro marking up events. What types of things interest you with the SW? Are you planning on using it for some type of musical application? I'm basically working on interactive experiences, such as science center exhibits or theme park attractions, that "learn" from visitors and the physical and virtual worlds around them.

Corey Mwamba
27th Nov 2012 | 4:06am | replying to Michael Carney
I'm interested in thinking of ways for artists to do relatively practical but mundane things, like list gigs and create their own web-sites as profiles. I think some of the explanations and thinking around these things is too technical, so I try to break it down as much as I can... but really, it's more of an interest than a job!

Corey Mwamba
27th Nov 2012 | 6:41am | replying to Michael Carney
I'm not sure if you've seen but I have also created a service to transform RDFa into iCalendar.