Corey Mwamba

testbed → Creating timelines with...

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:timeline1@example.man
        DTSTAMP:20120725T140000Z
	SUMMARY:First part
	DURATION:PT14D
	END:VEVENT
	
	BEGIN:VEVENT
	UID:timeline2@example.man
        DTSTAMP:20120725T140000Z
	SUMMARY:Second thing
	DURATION:P14D
	END:VEVENT
		
	BEGIN:VEVENT
	UID:timeline3@example.man
        DTSTAMP:20120725T140000Z
	SUMMARY:Thing that happens while second thing is happening
	DURATION:P14D
	END:VEVENT
	
	BEGIN:VEVENT
	UID:timeline4@example.man
        DTSTAMP:20120725T140000Z
	SUMMARY:Other thing
	DURATION:PT2H
	END:VEVENT
	
	BEGIN:VEVENT
	UID:timeline5@example.man
        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:timeline1@example.man
        DTSTAMP:20120725T140000Z
	SUMMARY:First part
	DURATION:PT14D
       	END:VEVENT //note this has no offset because it's first.//
	
	BEGIN:VEVENT
	UID:timeline2@example.man
        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:timeline3@example.man
        DTSTAMP:20120725T140000Z
	SUMMARY:Thing that happens while second thing is happening
	DURATION:P14D
        X-TIMELINE-OFFSET;VALUE=DURATION:PT4D
	END:VEVENT
	
	BEGIN:VEVENT
	UID:timeline4@example.man
        DTSTAMP:20120725T140000Z
	SUMMARY:Other thing
	DURATION:PT2H
        X-TIMELINE-OFFSET;VALUE=DURATION:PT28D
	END:VEVENT
	
	BEGIN:VEVENT
	UID:timeline5@example.man
        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>timeline1@example.man</uid>
<dtstamp>20120725T140000Z</dtstamp>
<summary>First part</summary>
<duration>PT14D</duration>
<x-timeline-offset value="duration">PT5D</x-timeline-offset>
</vevent>
<vevent>
<uid>timeline2@example.man</uid>
<dtstamp>20120725T140000Z</dtstamp>
<summary>Second thing</summary>
<duration>P14D</duration>
<x-timeline-offset value="duration">PT2D</x-timeline-offset>
</vevent>
<vevent>
<uid>timeline3@example.man</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>timeline4@example.man</uid>
<dtstamp>20120725T140000Z</dtstamp>
<summary>Other thing</summary>
<duration>PT2H</duration>
<x-timeline-offset value="duration">PT28D</x-timeline-offset>
</vevent>
<vevent>
<uid>timeline5@example.man</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:

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.