the web – a hypermedia story
DESCRIPTION
Slides for the July 2013 Belgian Fronteers meetupTRANSCRIPT
The Web | a hypermedia storypast,!present, future.
Ruben Verborgh
Congratulations,you’re oldenough torememberthe difference.
This isa camera.
Of course it’s digital.What else?
POORDIGITAL NATIVES
only usedigital technology.
In only 20 years time,information
has become actionable.
The Web | a hypermedia storypast,!present, future.
Ted Nelson°1937
Doug Engelbart1925–2013
Aaron Swartz1986–2013
The Web | a hypermedia storypast,!present, future.
Hypertext is text that branches and
allows choices on an interactive screen.
It’s text chunks connected by links which
offer the reader different pathways.
—Ted Nelson, Dream Machines (1974)
1992?1993?
Xanadusolves yourinformation
hunger.
Xanaduthe biggest
vaporware productin history.
In those dayshypertext systems
couldn’t exchange information.
Tim Berners-Lee°1955
The Web is severely limited
only publishers can make links
they are one-directional
they can break
But it scales.Globally.
URL
HTTPHTML
http://en.wikipedia.org/wiki/World_Wide_Web
The Web | a hypermedia storypast,!present, future.
Roy Thomas Fielding°1965
REST | REpresentational State Transfer
An architectural stylefor large hypermedia systems(such as the Web).
Why is the Web successful?constraints
REST | Uniform interface constraints
Identi!cation of resources
Manipulation through representations
Self-descriptive messages
Hypermedia as the engine
/index.php?action=showBook&id=35
REST | Identi!cation of resources
/index.php?action=borrowBook&id=35
What is a “borrowBook”?Can I GET it?Can I POST to it?
/books/35
REST | Identi!cation of resources
/users/34/books/borrowed
I can get the list of borrowed books.I can add something to it.
Identify resources, not actions.
REST | Uniform interface constraints
Identi!cation of resources
Manipulation through representations
Self-descriptive messages
Hypermedia as the engine
http://example.org/books/35
REST | Manipulation of resources
http://api.example.org/REST/books/35.json
They point to the same resource.Why does it matter who uses it?
http://example.org/books/35
REST | Manipulation of resources
Humans get HTML.Machines get JSON.
One resource, many representations.
HTMLwhen asked
by user
JSONwhen asked
by AJAX
REST | Manipulation of resources
Don’t create an API.There is already one:it’s called HTTP.
(And it’s more widely used than yours will ever be.)
REST | Uniform interface constraints
Identi!cation of resources
Manipulation through representations
Self-descriptive messages
Hypermedia as the engine
REST | Self-descriptive messages
POST /index.php?action=showBook&id=35
POST /index.php?action=borrowBook&id=35
What happens?
REST | Self-descriptive messages
POST /對我來說這是中國的POST /我不知道這意味著什麼
What happens?
REST | Self-descriptive messages
POST /users/34/books/borrowed
Use it.No surprises.
HTTP has a uniform interface.
GET /users/34/books/borrowed
DELETE /users/34/books/borrowed
REST | Uniform interface constraints
Identi!cation of resources
Manipulation through representations
Self-descriptive messages
Hypermedia as the engine
http://example.org/books/35
REST | Hypermedia as the engine
HTMLwhen asked
by user
JSONwhen asked
by AJAX
http://example.org/books/35
REST | Hypermedia as the engine
HTML
<h1>Dream Machines</h1>
<a href="/authors/ted_nelson">
by Ted Nelson
</a>
http://example.org/books/35
REST | Hypermedia as the engine
JSON
{
"title": "Dream Machines",
"author": "Ted Nelson"
}
http://example.org/books/35
REST | Hypermedia as the engine
JSON{
"title": "Dream Machines",
"author": { "name": "Ted Nelson":
"url": "/authors/ted_nelson" }
}
REST | Hypermedia as the engine
For humans and machines.Don’t make us read your manual.
Make your information actionable.
Hypermedia should be the engineof your application.
Representations should containthe links to next steps.
REST | Fielding’s de!nition of hypermedia
Hypertext is the simultaneous presentation
of information and controls such that
the information becomes the affordance
through which the user (or automaton)
obtains choices and selects actions.
REST | Fielding’s de!nition of hypermedia
the simultaneous presentationof information and controls
HTML or JSONwith links
REST | Fielding’s de!nition of hypermedia
the user (or automaton)obtains choices and selects actions.
you choosethe next step
(you don’t haveto create it yourself)
this handleaffordsopeningthe door
this handle isan affordance
for openingthe door
a propertyof an objectthat lets youact upon it
affordance
the informationbecomes
the affordance
The Web | a hypermedia storypast,!present, future.
The Semantic Web | for machines
Make machines understand information
so they cando things for us.
Resource Description Framework | RDF
:Tim :knows :Ted.subject |"predicate | object
URLs give meaning to concepts | RDF
<http://en.wikipedia.org/wiki/Tim_Berners-Lee>
<http://en.wiktionary.org/wiki/knows>
<http://en.wikipedia.org/wiki/Ted_Nelson>.
Embed meaning in HTML | RDF
<div id="book" itemtype="http://schema.org/Book">
<span itemprop="name">The Catcher in the Rye</span> –
by <a itemprop="author" href="#salinger">J.D. Salinger</a>
</div>
Embed meaning in HTML | RDF
<div id="book" itemtype="http://schema.org/Book">
<span itemprop="name">The Catcher in the Rye</span> –
by <a itemprop="author" href="#salinger">J.D. Salinger</a>
</div>
Your page can be read by people
and understoodby machines
The Web | a hypermedia storypast,!present, future.
Representations should contain
the links to next steps.
The Web is severely limited only publishers can make links
Publishers are responsible
for creating the right links.
How can they possibly know what next steps you will take?
The hypermedia paradox
Publishers are responsible
for creating the right links.
How can they possibly know what next steps you will take?
Semantic Web:
if your browser understands content
Hypermedia: can it create the right links?
The hypermedia paradox solved?
+ =
HTML&
semantics
yourpreferred
actions
personalizedhypermedia
browser reads semantics
!nds matching actions
creates right links
The informationbecomes your affordance.
Distributed affordance
The Web | a hypermedia storypast,!present, future.
The Web | a hypermedia storypast,!present, future.
ruben.verborgh.org@RubenVerborgh