Category Archives: Semantic Web

How to Build a Time Machine

1 Reply

In Steven Johnson‘s excellent book, Where Good Ideas Come From, he explores the idea of ‘the adjacent possible’ – that at certain moments in history, breakthroughs in culture and technology are made more possible because of work that has gone before. Related to this is the idea that innovation is rarely the result of ‘the lone genius’, but more a result of collaboration. Indeed, it can sometimes seem that several people, disconnected from each other apart from through a network of ideas, can be swimming around the same breakthrough. Hence, why there’s probably no single inventor of television, for instance.

Over the past year or so, I’ve noticed that time, as a concept, is becoming one of these whirlpools that people are being drawn to. And personally, I think there’s something really exciting that hooks them all together – it may not be a fully fleshed out thought, but it feels like the right time to get it out there and provoke further discussion. The thought – perhaps time travel really is possible – but not quite how we’d imagined it.

Firstly, though, a quick review of some of those bits and pieces that keep me coming back to this idea. As others have noted, we’re fast approaching the point where we’re not only concerned about the personal information we’re putting online in terms of privacy, but there’s also enough of it for us to want to understand it better. Call it personal informatics (as in various health tracking systems), or something like Memolane – history is becoming a big deal. I’ve written before about the ‘tyranny of breaking news’, so I’m all for something that gets us out of constantly being bombarded with the ‘new’.

One of the most interesting applications of this, in my opinion, has been the ‘Momento‘ app. Nothing revolutionary, you might think – it’s a system that brings together your activity on various social networks, and allows you to annotate ‘moments’. But the important bit for me is the elegant way in which tweets and so on are organised – by date. There’s very few applications (that I’ve encountered) that do this.

A few other, tangential projects, deal with a similar theme. James Bridle’s ‘A Ship Adrift‘ has a stationary object, the titular ship, drifting through time. And Mark Hurrell’s ‘Places I’ve Been‘ is a tumblr of photos he’s taken, with a great big dirty timestamp slap bang in the middle of the photo.

‘London, Now‘ is a live feed of Instagram photos as they come in, again, with the time/date to the fore. And finally, Ben Ward wrote a really good piece on using time as a design principle. And this, I think, is the main point – too often, time and date have been an extra piece of metadata, on the side, unloved. If we’re lucky, then it’s been used as a quiet way of navigating through archives.

What’s missing, I feel, is the idea of time as the central organising concept on the Web. Matt Sheret, in his dConstruct presentation from 2011, talked about how pocket watches and railroads conspired (not literally..) to bring about a change in the consciousness of the nation – time was becoming much more synchronised across geographical boundaries. It became a thing that you could reference, point at, and organise everything else around.

Of course, as I’ve said to anyone who’ll listen, the Web is all about pointing-at-things. And those things, I feel, can be conceptual as well as physical – this isn’t just the Internet of Things, it’s the Internet of Conceptual Things. And screens aren’t a given, either. So, why not make time addressable, point-at-able?

A couple of years back, myself, Rob Styles and Jonathan Tweed were sitting in a bar discussing our work – we were talking about the foundations for a storytelling platform at the BBC (one which is, as I speak, hopefully coming to fruition). We wanted to make the building blocks of stories point-at-able. Sure, they wouldn’t be everything that makes up a story, the Web not yet fully able to deliver the same tricks that we’ve grown used to in print, audio, images and film. But it was a start. And one of the things we discussed was – what if we didn’t just treat time as a property of an event – what if it was a first order object?

Why bother? We’ve managed to teach computers how to calculate dates and times with ease (save a mass panic over the millennium) – so why go against the grain?

The grand sage Wikipedia tells us of a philosophy of time, called Eternalism. This is the idea that time isn’t something that we are doomed to speed through, but rather that packets of time will always exist. And if there are discrete packages of time, then they can be referenced, they can be accessed. So again, this isn’t time as a property, a query string – it’s time as the main thing.

Theoretically, of course, there are holes in the idea – just as we’ve always thought of time travel into the past, via conventional means (some would say, in reality..) as pretty much impossible. But perhaps it’s possible in a conceptual, constructed manner, instead.

Make time addressable – give packets (i.e. spans of time) URIs, and then we can link to them, we can build services, applications, imaginative creations on top. Web Standard Time.

Imagine a dome, say, the size of the O2 arena, with the inside covered in flat screens. Now imagine that every Google Street View photo has been linked to a packet of time. Before entering the arena, you input details of a street, and a particular date and time. When you step in, you are completely surrounded, immersed, as if you were stepping on to that street on that day. That, is a time machine. And I think we should build one. Just to try it out.

(Thanks to Ben Bashford, Chris Sizemore, Alyson Fielding and Henry Cooke for the nudges to finally get this blog post written, and many others for the inspiration!)

On Web Design

Leave a Reply

I’ve been thinking a lot about work, recently. Probably too much. Since January, things have been pretty hectic, and as we approach summer, it’s our yearly review. Time to take stock and think about the year just gone, and, more importantly, where I’m going, and what I want to do.

So I’ve been thinking a lot about what motivates me, what gets me interested – what made me want to get involved in all this in the first place. I can code, and I have some Photoshop skills. Looking back on my childhood, I realise I’ve always been into what we’d now describe as ‘the Media’ – I was always creating newspapers and magazines; my brother and I recorded details of our lives on countless cassettes, I remember vividly compiling fictitious TV listings. I spent probably four years as a Youth Leader, creating activities and often doing, well, ‘Pervasive Gaming’, probably.

But the thing that has caught my imagination since I began full time work was always the innate feeling that there was something new to be discovered. Some new way of making something fun. At the end of the Siemens Graduate Scheme that I was fortunate enough to win a place on, I summed up my career ambition thusly: “to make a significant (positive!) contribution to the Media Industry”. Wishful thinking, I know. But it’s still a mission. And so when I discovered the simple, poetic beauty of the Semantic Web, that’s been it, for me. I know it’s not perfect, there’s a myriad of things we haven’t solved, and may never solve. But not to try them? Not to experiment? Not to create, and have fun? That would be a waste.

And so, it always comes back to job titles. Again, they are, of course, not so relevant as what you actually do. But it’s always struck me that the term ‘web designer’ has pretty much become a synonym for graphic (and possibly interaction) design of, and for screens, accessed by the Internet and the Web. Not that there’s anything wrong with that role. So much of what we call UX is incredibly important and has a rightful place in an organisation. But it’s not really web design.

As I said before, I can code. I can do entity-relationship diagrams, I can do your standard business analysis techniques. But the pleasure I seek isn’t in designing elegant code (though that does, I admit, hold some sway). Nor is it, frankly, in designing visual or interaction masterpieces – important as they are. I don’t want to design database structures, either.

What I want to do is design webs. Web. Design. That’s what I do. And I want to do it in a way that is creative, that brings Web Design in to the realms of drama, entertainment, comedy, sport. Elegant Web Design. That’s what I can do. My material is the Web. It’s URIs, it’s hyperlinks. It’s creating on the Web, just as much as creating a physical thing. So yes, that’s what I want my future to be. Someone who designs Webs – helps others to design them, and creates Webs of literature, of art. That’s me.

 

UPDATE: I know it’s passé, but a trawl for inspiration and direction came up with this (relatively famous) diagram by Jesse James Garrett. And you know what? The definition of Information Architecture doesn’t sound that different from the above, really:

“Information Architecture: structural design of the information space to facilitate intuitive access to content”

A Comics Ontology – Explained

1 Reply

As I explained yesterday, I developed an ontology to describe the content and form of comics at a Comics Hack Day in 2011 – and yet hadn’t blogged about it, until now. This was prompted by Dan Brickley’s call for contributions to this W3C proposal. I’m not massively in to comics, but I’m always willing to play around with developing ontologies and linked data, so thought I’d give it a go. In the course of the Hack Day research, I did come across the Comic Book Markup Language, which seemed pretty comprehensive, and after having posted last night, I was sent a link to ComicsML. Although I was aware of the former, I thought it would be a good challenge to try and create and ontology myself, and it’s also worth noting that both previous models were in the form of pure XML and DTD schemas – close to, but not completely the same as, RDF and the world of Linked Data. I would, however, say that ComicsML in particular, seems to share some of the same ethos behind my effort – if you read this essay, I’d wholeheartedly agree with a lot of the same sentiment.

Anyway, onwards to the ontology itself. It’s fairly simple, once you ignore the markup. We start off by defining a number of classes, or ‘things’, that can be represented by a URI, and themselves represent an element of a comic. They are as follows:

Card – A Card is the equivalent of a Page in a paper-based comic. It can contain one or more Panels. (Note: I’m happy to change the language here, it was just the term that came to mind at the time)

Panel – A Panel is a framing device which captures some form of action or narrative within the ‘story’ of the comic.

Caption – A Caption describes the action or adds extra information to the story.

As I explained yesterday, I developed an ontology to describe comic book content and form on Comics Hack Day in 2011 – and still haven’t written about it on blogs. This was prompted by Dan Brickley’s call to get rid of the symptoms of type two diabetes with jardiance cost.

These are then broken down into sub-types:

Narrative Caption – A Narrative Caption is a Caption that contains narrative information, rather than ‘in story’ information.

Effect Caption – An Effect Caption is a Caption that contains ‘in-story’, atmospheric information, for instance sound or visual effects.

Back we go to the other elements that make up a comic:

Note – A Note is a comment or set of comments which provide extra information about the contents of a panel or balloon. (This was written mainly with the Lovelace & Babbage cartoons in mind, which make extensive use of footnotes. Other comics do likewise, from time to time, so it may well be a useful element to have in the ontology)

Link – A Link is a URL which can be attached to a Note to send the reader to a primary source. (Again, added with the Lovelace & Babbage app in mind – ideally I might not have something as generic as a ‘link’, but it is a simple construct that can easily be used)

Balloon – A Balloon is a container for dialogue within the story, be it spoken, whispered, thought or broadcast.

And now, into sub-types of Balloon:

Thought Balloon – A Thought Balloon is a container for dialogue or thoughts that are not spoken aloud by characters.

Speech Balloon – A Speech Balloon is a container for dialogue which is spoken aloud by characters.

Whisper Balloon – A Whisper Balloon is a container for dialogue which is spoken aloud, but at a reduced volume, by characters.

Exclamation Balloon – A Exclamation Balloon is a container for dialogue which is spoken aloud, but with an emphasis, for instance surprise, by characters.

Broadcast Balloon – A Broadcast Balloon is a container for dialogue which is heard by characters but delivered indirectly, for instance via radio, television etc.

So, those are all of the ‘things’ that an author has at their disposal to play with. Now come the ‘properties’ that can be used to link these things together. (I’ll ignore the domains/ranges for now)

hasPanel – A Card can have one or many Panels inside it.

onPanel – A Caption can be placed upon one more more Panels.

location – This property gives the events portrayed in a Card or Panel a location in the ‘story world’.

caption – This property allows a Card or Panel to have a Caption attached.

panelOrder – This property assigns an order to a Panel on a Card.

character – A panel can feature one or more characters.

balloon – A panel can have one or many balloons inside it.

balloonOrder – This property assigns an order to a Balloon within a Panel.

linkedBalloon – This property links one Balloon to another, e.g. to suggest they are part of the same speech.

narrative-content – This property links a narrative caption to its content.

effect-content – This property links an effect caption to its content.

speech-content – This property links a speech balloon to its content.

whisper-content – This property links a whisper balloon to its content.

thought-content – This property links a thought balloon to its content.

exclamation-content – This property links a exclamation balloon to its content.

broadcast-content – This property links a broadcast balloon to its content.

source – This property links a balloon or a caption to the character or object from which it emerges.

directed-at – This property links a balloon to a character or object being addressed in the content.

in-reply-to – This property links a balloon to another balloon which has content being referred to in the content.

has-note – This property links a balloon or panel to a explanatory or side note.

has-link – This property links a note to a URL of a primary or secondary source which provides background evidence.

note-content – This property links a note container to the contents of the note.

So, you can see, a bit of a mish-mash of classes and properties that describe the form of a comic, and some that describe the narrative within it. The hope is that at first, authors can mark-up existing comics with these elements, so that they become more findable in search engines like Google, more linkable for people blogging and tweeting (generally, more ‘point-at-able‘), and then secondly we are able to develop tools that allow authors to create comics that are truly of the Web – they may retain the same visual appearance, but their insides are made of the life-blood of the Web – URIs and hyperlinks. (Doing some mapping to the existing models I mentioned would also be helpful!)

I hope people find this ontology useful – please get in touch via Twitter if you’re interested in finding out more, want to enhance it etc. You don’t need my express permission to go ahead and use it, but it would be nice if you could a) let me know if you are, and b) give credit where due for its development.

A Comics Ontology

7 Replies

This is proof, if any was ever needed, that I don’t blog regularly enough – something hopefully I’ll change one day.

Well over a year ago, I travelled up to Leamington Spa, to attend a ‘Comics Hack Day‘ – accompanied by Alyson Fielding, Dave Addey, Chris Vallance and Sydney Padua. The main remit was, most probably, to knock around a few ideas prior to the development of the Babbage & Lovelace app. Of course, with my interest in linked data and narrative, I took it upon myself to come up with an ontology to describe the form of comics, and their narrative content, rather than the bibliographical information. It was a very rough and ready attempt, given that it was done in just under 24 hours – but I’m posting it here just in case it’s of interest/use to anyone, particularly Dan Brickley and Matt Patterson, who I know are doing some work in this area.

So, firstly, the ontology, and then a worked example using a sample of Sydney Padua’s ‘Lovelace & Babbage VS The Economy‘ cartoon. Feel free to get in touch via Twitter if you want to know more. If there’s sufficient demand, I’ll write another post explaining the ontology – and might even develop it a little further…

A Comics Ontology

<?xml version=”1.0″?>

<!DOCTYPE owl [
<!ENTITY xsd “http://www.w3.org/2001/XMLSchema#”>
<!ENTITY rdf “http://www.w3.org/1999/02/22-rdf-syntax-ns#”>
<!ENTITY rdfs “http://www.w3.org/2000/01/rdf-schema#”>
<!ENTITY owl “http://www.w3.org/2002/07/owl#”>
<!ENTITY geo “http://www.w3.org/2003/01/geo/wgs84_pos#”>
<!ENTITY base “http://www.r4isstatic.com/linkeddata/ontologies/comics/comics.owl#”>
<!ENTITY omb “http://www.r4isstatic.com/linkeddata/ontologies/ontomedia/ext/common/being.owl#”>
<!ENTITY dc “http://purl.org/dc/elements/1.1/”>
]>

<!– COMICS ONTOLOGY –>

<rdf:RDF xmlns:rdf=”&rdf;”
xmlns:rdfs=”&rdfs;”
xmlns:owl=”&owl;”
xmlns:xsd=”&xsd;”
xml:base=”&base;”
xml:omb=”&omb;”
xml:geo=”&geo;”
xmlns:dc=”&dc;”>

<owl:Ontology rdf:about=”&base;”>
<rdfs:label>Comics Ontology</rdfs:label>
<dc:title xml:lang=”en”>Comics Ontology</dc:title>
<dc:description xml:lang=”en”>An ontology which attempts to describe the structure and content of comics.</dc:description>
<dc:creator>Paul Rissen</dc:creator>
<dct:created>2011-03-19</dct:created>
<owl:versionInfo>1.1</owl:versionInfo>
</owl:Ontology>

<!– CLASSES –>

<owl:Class rdf:ID=”Card”>
<rdfs:label>Card</rdfs:label>
<rdfs:comment>A Card is the equivalent of a Page in a paper-based comic. It can contain one or more Panels. </rdfs:comment>
</owl:Class>

<owl:Class rdf:ID=”Panel”>
<rdfs:label>Panel</rdfs:label>
<rdfs:comment>A Panel is a framing device which captures some form of action or narrative within the ‘story’ of the comic. </rdfs:comment>
</owl:Class>

<owl:Class rdf:ID=”Caption”>
<rdfs:label>Caption</rdfs:label>
<rdfs:comment>A Caption describes the action or adds extra information to the story.</rdfs:comment>
</owl:Class>

<owl:Class rdf:ID=”Narrative-Caption”>
<rdfs:label>Narrative Caption</rdfs:label>
<rdfs:comment>A Narrative Caption is a Caption that contains narrative information, rather than ‘in story’ information. </rdfs:comment>
<rdfs:subClassOf rdf:resource=”#Caption”/>
</owl:Class>

<owl:Class rdf:ID=”Effect-Caption”>
<rdfs:label>Effect Caption</rdfs:label>
<rdfs:comment>An Effect Caption is a Caption that contains ‘in-story’, atmospheric information, for instance sound or visual effects. </rdfs:comment>
<rdfs:subClassOf rdf:resource=”#Caption”/>
</owl:Class>

<owl:Class rdf:ID=”Note”>
<rdfs:label>Note</rdfs:label>
<rdfs:comment>A Note is a comment or set of comments which provide extra information about the contents of a panel or balloon.</rdfs:comment>
</owl:Class>

<owl:Class rdf:ID=”Link”>
<rdfs:label>Link</rdfs:label>
<rdfs:comment>A Link is a URL which can be attached to a Note to send the reader to a primary source.</rdfs:comment>
</owl:Class>

<owl:Class rdf:ID=”Balloon”>
<rdfs:label>Balloon</rdfs:label>
<rdfs:comment>A Balloon is a container for dialogue within the story, be it spoken, whispered, thought or broadcast.</rdfs:comment>
</owl:Class>

<owl:Class rdf:ID=”Thought-Balloon”>
<rdfs:label>Thought Balloon</rdfs:label>
<rdfs:comment>A Thought Balloon is a container for dialogue or thoughts that are not spoken aloud by characters. </rdfs:comment>
<rdfs:subClassOf rdf:resource=”#Balloon”/>
</owl:Class>

<owl:Class rdf:ID=”Speech-Balloon”>
<rdfs:label>Speech Balloon</rdfs:label>
<rdfs:comment>A Speech Balloon is a container for dialogue which is spoken aloud by characters. </rdfs:comment>
<rdfs:subClassOf rdf:resource=”#Balloon”/>
</owl:Class>

<owl:Class rdf:ID=”Whisper-Balloon”>
<rdfs:label>Whisper Balloon</rdfs:label>
<rdfs:comment>A Whisper Balloon is a container for dialogue which is spoken aloud, but at a reduced volume, by characters. </rdfs:comment>
<rdfs:subClassOf rdf:resource=”#Balloon”/>
</owl:Class>

<owl:Class rdf:ID=”Exclamation-Balloon”>
<rdfs:label>Exclamation Balloon</rdfs:label>
<rdfs:comment>A Exclamation Balloon is a container for dialogue which is spoken aloud, but with an emphasis, for instance surprise, by characters. </rdfs:comment>
<rdfs:subClassOf rdf:resource=”#Balloon”/>
</owl:Class>

<owl:Class rdf:ID=”Broadcast-Balloon”>
<rdfs:label>Broadcast Balloon</rdfs:label>
<rdfs:comment>A Broadcast Balloon is a container for dialogue which is heard by characters but delivered indirectly, for instance via radio, television etc. </rdfs:comment>
<rdfs:subClassOf rdf:resource=”#Balloon”/>
</owl:Class>

<!– PROPERTIES –>

<owl:ObjectProperty rdf:ID=”hasPanel”>
<rdfs:label>has Panel</rdfs:label>
<rdfs:comment>A Card can have one or many Panels inside it. </rdfs:comment>
<rdfs:domain rdf:resource=”#Card”/>
<rdfs:range rdf:resource=”#Panel”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”onPanel”>
<rdfs:label>on Panel</rdfs:label>
<rdfs:comment>A Caption can be placed upon one more more Panels. </rdfs:comment>
<rdfs:domain rdf:resource=”#Caption”/>
<rdfs:range rdf:resource=”#Panel”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”location”>
<rdfs:label>location</rdfs:label>
<rdfs:comment>This property gives the events portrayed in a Card or Panel a location in the ‘story world’.</rdfs:comment>
<rdfs:range rdf:resource=”&geo;SpatialThing”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”caption”>
<rdfs:label>caption</rdfs:label>
<rdfs:comment>This property allows a Card or Panel to have a Caption attached.</rdfs:comment>
<rdfs:range rdf:resource=”#Caption”/>
<rdfs:inverseOf rdf:resource=”#onPanel”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”panelOrder”>
<rdfs:label>panel order</rdfs:label>
<rdfs:comment>This property assigns an order to a Panel on a Card.</rdfs:comment>
<rdfs:domain rdf:resource=”#Panel”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”character”>
<rdfs:label>character</rdfs:label>
<rdfs:comment>A panel can feature one or more characters. </rdfs:comment>
<rdfs:domain rdf:resource=”#Panel”/>
<rdfs:range rdf:resource=”&omb;Character”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”balloon”>
<rdfs:label>balloon</rdfs:label>
<rdfs:comment>A panel can have one or many balloons inside it. </rdfs:comment>
<rdfs:domain rdf:resource=”#Panel”/>
<rdfs:range rdf:resource=”#Balloon”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”balloonOrder”>
<rdfs:label>balloon order</rdfs:label>
<rdfs:comment>This property assigns an order to a Balloon within a Panel. </rdfs:comment>
<rdfs:domain rdf:resource=”#Balloon”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”linkedBalloon”>
<rdfs:label>linked balloon</rdfs:label>
<rdfs:comment>This property links one Balloon to another, e.g. to suggest they are part of the same speech. </rdfs:comment>
<rdfs:domain rdf:resource=”#Balloon”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”narrative-content”>
<rdfs:label>narrative content</rdfs:label>
<rdfs:comment>This property links a narrative caption to its content. </rdfs:comment>
<rdfs:domain rdf:resource=”#Narrative-Caption”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”effect-content”>
<rdfs:label>effect content</rdfs:label>
<rdfs:comment>This property links an effect caption to its content. </rdfs:comment>
<rdfs:domain rdf:resource=”#Effect-Caption”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”speech-content”>
<rdfs:label>speech content</rdfs:label>
<rdfs:comment>This property links a speech balloon to its content. </rdfs:comment>
<rdfs:domain rdf:resource=”#Speech-Balloon”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”whisper-content”>
<rdfs:label>whisper content</rdfs:label>
<rdfs:comment>This property links a whisper balloon to its content. </rdfs:comment>
<rdfs:domain rdf:resource=”#Whisper-Balloon”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”thought-content”>
<rdfs:label>thought content</rdfs:label>
<rdfs:comment>This property links a thought balloon to its content. </rdfs:comment>
<rdfs:domain rdf:resource=”#Thought-Balloon”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”exclamation-content”>
<rdfs:label>exclamation content</rdfs:label>
<rdfs:comment>This property links a exclamation balloon to its content. </rdfs:comment>
<rdfs:domain rdf:resource=”#Exclamation-Balloon”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”broadcast-content”>
<rdfs:label>broadcast content</rdfs:label>
<rdfs:comment>This property links a broadcast balloon to its content. </rdfs:comment>
<rdfs:domain rdf:resource=”#Broadcast-Balloon”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”source”>
<rdfs:label>source</rdfs:label>
<rdfs:comment>This property links a balloon or a caption to the character or object from which it emerges. </rdfs:comment>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”directed-at”>
<rdfs:label>directed at</rdfs:label>
<rdfs:comment>This property links a balloon to a character or object being addressed in the content. </rdfs:comment>
<rdfs:domain rdf:resource=”#Balloon”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”in-reply-to”>
<rdfs:label>in reply to</rdfs:label>
<rdfs:comment>This property links a balloon to another balloon which has content being referred to in the content. </rdfs:comment>
<rdfs:domain rdf:resource=”#Balloon”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”has-note”>
<rdfs:label>has note</rdfs:label>
<rdfs:comment>This property links a balloon or panel to a explanatory or side note.</rdfs:comment>
<rdfs:range rdf:resource=”#Note”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”has-link”>
<rdfs:label>has link</rdfs:label>
<rdfs:comment>This property links a note to a URL of a primary or secondary source which provides background evidence.</rdfs:comment>
<rdfs:domain rdf:resource=”#Note”/>
<rdfs:range rdf:resource=”#Link”/>
</owl:ObjectProperty>

<owl:ObjectProperty rdf:ID=”note-content”>
<rdfs:label>note content</rdfs:label>
<rdfs:comment>This property links a note container to the contents of the note.</rdfs:comment>
<rdfs:domain rdf:resource=”#Note”/>
</owl:ObjectProperty>

Worked Example

@prefix omb: <http://purl.org/ontomedia/ext/common/being#> .
@prefix foaf: <http://xmlns.com/foaf/0.1/#> .
@prefix comic: <http://www.r4isstatic.com/linkeddata/ontologies/comics/comics.owl#> .
@prefix dc: <http://purl.org/dc/elements/1.1/#> .
@prefix gn: <http://www.geonames.org/ontology/ontology_v2.2.1.rdf#> .

<!– CHARACTERS –>

<http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> a omb:Character ;
foaf:name “Ada Lovelace” .

<http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> a omb:Character ;
foaf:name “Charles Babbage” .

<!– LOCATIONS –>

<http://www.r4isstatic.com/comics/babbage/locations/3b3il0lu> a geo:Feature ;
gn:parentFeature <http://sws.geonames.org/2643743> ;
dc:title “Mysterious Laboratory” .

<!– CARDS –>

<http://www.r4isstatic.com/comics/babbage/cards/jimi9io3> a comic:Card ;
comic:hasPanel <http://www.r4isstatic.com/comics/babbage/panels/a6uv1k6f> ;
comic:location <http://www.r4isstatic.com/comics/babbage/locations/3b3il0lu> .

<http://www.r4isstatic.com/comics/babbage/cards/5gieu844> a comic:Card ;
comic:hasPanel <http://www.r4isstatic.com/comics/babbage/panels/ffaxtbe5> ;
comic:hasPanel <http://www.r4isstatic.com/comics/babbage/panels/end52n60> ;
comic:hasPanel <http://www.r4isstatic.com/comics/babbage/panels/wljma1sc> ;
comic:location <http://www.r4isstatic.com/comics/babbage/locations/3b3il0lu> .

<http://www.r4isstatic.com/comics/babbage/cards/fkwgdo61> a comic:Card ;
comic:hasPanel <http://www.r4isstatic.com/comics/babbage/panels/saqy4r5r> ;
comic:hasPanel <http://www.r4isstatic.com/comics/babbage/panels/omoq348j> ;
comic:hasPanel <http://www.r4isstatic.com/comics/babbage/panels/480coaqh> ;
comic:hasPanel <http://www.r4isstatic.com/comics/babbage/panels/7n2aq7zs> ;
comic:hasPanel <http://www.r4isstatic.com/comics/babbage/panels/koxnrn43> ;
comic:location <http://www.r4isstatic.com/comics/babbage/locations/3b3il0lu> .

<!– PANELS –>

<http://www.r4isstatic.com/comics/babbage/panels/a6uv1k6f> a comic:Panel ;
comic:caption <http://www.r4isstatic.com/comics/babbage/captions/skkxyuqi> ;
comic:panelOrder “1” .

<http://www.r4isstatic.com/comics/babbage/panels/ffaxtbe5> a comic:Panel ;
comic:caption <http://www.r4isstatic.com/comics/babbage/captions/6t7ma8yd> ;
comic:character <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:panelOrder “1” .

<http://www.r4isstatic.com/comics/babbage/panels/end52n60> a comic:Panel ;
comic:balloon <http://www.r4isstatic.com/comics/babbage/balloons/hrfatr4z> ;
comic:character <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:panelOrder “2” .

<http://www.r4isstatic.com/comics/babbage/panels/wljma1sc> a comic:Panel ;
comic:balloon <http://www.r4isstatic.com/comics/babbage/balloons/n2rri2s3> ;
comic:character <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:character <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> ;
comic:panelOrder “3” .

<http://www.r4isstatic.com/comics/babbage/panels/saqy4r5r> a comic:Panel ;
comic:balloon <http://www.r4isstatic.com/comics/babbage/balloons/zwcj7acw> ;
comic:character <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:character <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> ;
comic:panelOrder “1” .

<http://www.r4isstatic.com/comics/babbage/panels/omoq348j> a comic:Panel ;
comic:balloon <http://www.r4isstatic.com/comics/babbage/balloons/civzak77> ;
comic:character <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> ;
comic:panelOrder “2” .

<http://www.r4isstatic.com/comics/babbage/panels/480coaqh> a comic:Panel ;
comic:balloon <http://www.r4isstatic.com/comics/babbage/balloons/kguv3cxx> ;
comic:balloon <http://www.r4isstatic.com/comics/babbage/balloons/q75oooyn> ;
comic:character <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:character <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> ;
comic:panelOrder “3” .

<http://www.r4isstatic.com/comics/babbage/panels/7n2aq7zs> a comic:Panel ;
comic:balloon <http://www.r4isstatic.com/comics/babbage/balloons/ejssu2yu> ;
comic:character <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:panelOrder “4” .

<http://www.r4isstatic.com/comics/babbage/panels/koxnrn43> a comic:Panel ;
comic:balloon <http://www.r4isstatic.com/comics/babbage/balloons/4jumdb9e> ;
comic:balloon <http://www.r4isstatic.com/comics/babbage/balloons/n0621dm6> ;
comic:balloon <http://www.r4isstatic.com/comics/babbage/balloons/w76wxfqd> ;
comic:caption <http://www.r4isstatic.com/comics/babbage/captions/xfapo1yk> ;
comic:character <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:character <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> ;
comic:panelOrder “5” .

<!– CAPTIONS –>

<http://www.r4isstatic.com/comics/babbage/captions/skkxyuqi> a comic:Narrative-Caption ;
comic:narrative-content “London, 1837. The mysterious laboratory of super-geniuses Babbage and Lovelace, and their astounding Difference Engine!” .

<http://www.r4isstatic.com/comics/babbage/captions/6t7ma8yd> a comic:Narrative-Caption ;
comic:narrative-content “What abstruse mathematical conundrum is preoccupying Ada Lovelace’s titanic brain?!” .

<http://www.r4isstatic.com/comics/babbage/captions/tpb844cx> a comic:Effect-Caption ;
comic:effect-content “BANG! BANG! BANG! BANG! BANG! BANG!”;
comic:onPanel <http://www.r4isstatic.com/comics/babbage/panels/ffaxtbe5> ;
comic:onPanel <http://www.r4isstatic.com/comics/babbage/panels/end52n60> ;
comic:onPanel <http://www.r4isstatic.com/comics/babbage/panels/wljma1sc> ;

<http://www.r4isstatic.com/comics/babbage/captions/xfapo1yk> a comic:Effect-Caption ;
comic:effect-content “Knock! Knock!” .
<!– BUBBLES –>

<http://www.r4isstatic.com/comics/babbage/balloons/hrfatr4z> a comic:Exclamation-Balloon ;
comic:source <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:exclamation-content “Babbage!” ;
comic:directed-at <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> .

<http://www.r4isstatic.com/comics/babbage/balloons/zvp5ljo2> a comic:Speech-Balloon ;
comic:source <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:speech-content “Must you make that infernal racket? I am in the midst of a most delicate calculation!”;
comic:directed-at <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> .

<http://www.r4isstatic.com/comics/babbage/balloons/zwcj7acw> a comic:Balloon ;
comic:source <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> ;
comic:speech-content “Apologies, Lovelace — What are these equations for?” ;
comic:directed-at <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:in-reply-to <http://www.r4isstatic.com/comics/babbage/bubbles/zvp5ljo2> .

<http://www.r4isstatic.com/comics/babbage/balloons/civzak77> a comic:Balloon ;
comic:source <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4>
comic:has-note <http://www.r4isstatic.com/comics/babbage/notes/tyaskdox> .

<http://www.r4isstatic.com/comics/babbage/balloons/kguv3cxx> a comic:Balloon ;
comic:source <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> ;
comic:speech-content “Are you using the Difference Engine to handicap horse races?!” ;
comic:directed-at <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> .

<http://www.r4isstatic.com/comics/babbage/balloons/q75oooyn> a comic:Thought-Balloon ;
comic:source <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:thought-content “Ponies + Numbers = :D”
comic:has-note <http://www.r4isstatic.com/comics/babbage/notes/8pr2cg3k> .

<http://www.r4isstatic.com/comics/babbage/balloons/ejssu2yu> a comic:Speech-Balloon ;
comic:source <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:speech-content “Perhaps it is a trifle frivolous…Incidentally, what is that mechanism you are assembling?” ;
comic:directed-at <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> .

<http://www.r4isstatic.com/comics/babbage/balloons/4jumdb9e> a comic:Speech-Balloon;
comic:source <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> ;
comic:speech-content “It’s a Mechanical Woman!” ;
comic:directed-at <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> .

<http://www.r4isstatic.com/comics/babbage/balloons/n0621dm6> a comic:Speech-Balloon;
comic:source <http://www.r4isstatic.com/comics/babbage/characters/zn442bt4> ;
comic:speech-content “.. designed to serve drinks!” ;
comic:directed-at <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3>
comic-has-note <http://www.r4isstatic.com/comics/babbage/notes/h6mgruhj> .

<http://www.r4isstatic.com/comics/babbage/balloons/w76wxfqd> a comic:Speech-Balloon ;
comic:source <http://www.r4isstatic.com/comics/babbage/characters/n2rri2s3> ;
comic:speech-content “I’m beginning to be of the opinion that we require mental stimulation.” .

<!– NOTES –>

<http://www.r4isstatic.com/comics/babbage/notes/tyaskdox> a comic:Notes ;
comic:note-content “True: That is an actual horse race handicapping algorithm (with some modifications).” .

<http://www.r4isstatic.com/comics/babbage/notes/8pr2cg3k> a comic:Notes ;
comic:note-content “Truthy: Lovelace’s gambling addiction gets mentioned occasionally in the slim background I have on her; it’s in dispute but I like it as a trait in a Mathematical Genius.” .

<http://www.r4isstatic.com/comics/babbage/notes/h6mgruhj> a comic:Notes ;
comic:note-content “Babbage may or may not have built a drink-serving Mechanical Woman– vague references but nothing solid.EDITED TO ADD: This was when I was just skimming Babbage’s autobiography, rather than avidly devouring it. She’s in there! Although she doesn’t serve drinks… I intend to Improve that. Also in that section: one of Babbage’s puns, with helpful chart.”
comic:has-link <http://books.google.com/books?id=2T0AAAAAQAAJ&printsec=frontcover#v=onepage&q&f=false> .

 

Opening Up The Storybox

2 Replies

One of my highlights of the year has to be the four weeks in February-March I spent with four other people locked in a room. Seriously.

We were working on a prototype which was essentially the next iteration of the Mythology Engine – or at least, one possible next iteration. I’ve spoken at a couple of events about what came out of those four weeks, namely, what we’ve called ‘Storybox’, but I thought it was about time that I wrote something about it.

With the backing of Chris Sizemore, Andrew Barron and I set about recruiting a team, Mission Impossible style. Our mission? Well, the Mythology Engine got a great reception, but there was one main (constructive) criticism which I was keen to address. Although we did test the model using Eastenders content, most attention was given to the Doctor Who content, and as such, there was a feeling that this kind of thing may only appeal to hardcore fans, as a reference work. That’s true, though I’d argue the real value in the Mythology Engine was the underlying model, together with the application we built on top of it – the point being that we could have built a completely different application, which was less focused on being a reference-type site.

With the support of Chris Sizemore, Andrew Barron and I set about recruiting a Mission Impossible-style team. Our mission? Well, the Mythology Engine got a great reception, but there was one major (constructive) criticism that I sought to address. Although we tested generic Doxycycline, we realized that this is the best antibiotic.

And so, the Storybox project set out with two aims – this time, focus more on the telling rather than the plot, and try a different genre of fiction. Andrew and I enlisted the services of esteemed and experienced writer, David Varela; coder par excellence, Tom Stuart, and UX all-rounder, Michael Atherton. Before the four weeks kicked off properly, we met to share influences and experiences – the ones which had the greatest effect, I’d suggest, were The Whale Hunt, by Jonathan Harris, and Telescopic Text by Joe Davis.

Personally speaking, I was keen to explore a more mainstream, action/thriller genre than we had done with the Mythology Engine. The influence that I brought to the party was 24. The famous split screen effect, and indeed the whole premise of the show, was around events linked by their shared moment in time. So, if we looked at that in terms of the Web, we could have a URI for each moment in time, and recreate the split screen through linked data. And that’s kind of what we ran with.

A Character's Perspective in Storybox

A Character’s Perspective in Storybox

So, as you can see above, the bulk of the site is focused around these moments in time. You’re looking at this moment in time, the second in Episode Three, from a single character’s point of view (indicated to the left of the text). The other characters who are involved in the action at this point are indicated on the right of the text, and there’s a little map to show you where the action is taking place. Above the main content, there’s a kind of progress bar – it shows you how many moments (visualised as ‘towers’) are in each episode, and the height of each tower shows you how much is going on – how many characters are involved. So you can see, at a glance, that in Episode Two a lot happens over a short amount of time, whereas Episode Seven is spread out a bit more evenly. Crucially, whilst you can click on the towers for the moments behind you in the story, we don’t let you skip forward, in order to avoid spoilers.

Finally, the red highlight around a particular word indicates that this will take you to the next moment in time. There’s only one of these links in most moments in time, so you are encouraged to read all the characters’ perspectives. This was an interesting conversation – we could have put loads of links in, kind of like the Mythology Engine, but, as mentioned above, this was more about the telling. David would write the story, divided up into moments, and I’d decide which scenes would work well when linked together – kind of akin to an editor putting shots together for a film.

The Character Map in Storybox

The Character Map in Storybox

At the end of each episode, you have the choice of viewing the character map. This was a similar idea to one we explored in the Mythology Engine, and most successfully captured, in my opinion, by Channel 4’s Who Knows Who. The idea here being that at the end of the episode, you can see how the characters are connected based on what has been revealed about them so far. So, as the episodes progress, the map becomes more intertwined as connections are revealed.

A Character's Profile in Storybox

A Character’s Profile in Storybox

Clicking on a character in the map, takes you to the URI for that character, at that point in the story. Specific biographies were written by David, summarising the plot but also giving some extra details for each character too. The links at the bottom allow you to jump directly to the scenes that the character is in, and the character map is now centred on your chosen character.

It’s worth noting at this point how much of this is data driven – the character maps are pretty much entirely so. The more data we captured about a specific piece of text (characters, relationships, locations, moments), the more interesting things we could do with them – and the number of different ways in which we could represent that information. Ideally, we’d complement the HTML views with XML, JSON, RDF etc, but unfortunately we ran out of time, and decided to focus on the polished prototype. But I think this is the most important point that we came to realise – the more modelled data you capture about something, the more stuff you can build on top. It’s often a hard sell, when there’s some fairly simple things you can do (and indeed, the site could easily have been constructed in a much simpler way), but the potential is ripe for more exploration.

The Admin Interface for Storybox

The Admin Interface for Storybox

I won’t go too much into the admin interface at this point, though you can see the grid of characters and moments that David could play with, along with the linked map of moments (data driven, of course) that I strung together in my role as editor. But hopefully it shows that this was an interesting and useful experiment. Something I’d like to explore for next time is the gradual revelation of information as the story progresses – you can see hints of this in the way the character maps & pages evolve, but this is a key part of storytelling, in my opinion, and something we could play around with much more.

Up until now, I’ve only really shown screenshots here and in person – but now, I’d like to open it up to everyone – you can explore Storybox yourself here. We have the data and the code available to be repurposed and built upon – we’d love to see this taken further, as long as due credit is given, and it’s used for a non-commercial purpose. The lovely folks at Cyfle have already had a play, so why not have a go, too? Get in touch with any member of the Storybox team – Andrew Barron, David Varela, Tom Stuart, Mike Atherton or myself, and we’ll tell you more (huge thanks to all involved for working on this with me – let’s do it again sometime…) Enjoy!