Your SlideShare is downloading. ×
0
The Web | a hypermedia story
past, present, future.
Ruben Verborgh
Congratulations,
you’re old
enough to
remember
the difference.
This is
a camera.
Of course it’s digital.
What else?
POOR
DIGITAL
NATIVES
only use
digital technology.
In only 20 years time,
information
has become actionable.
The Web | a hypermedia story
past, present, future.
Ted Nelson
°1937
Doug Engelbart
1925–2013
Aaron Swartz
1986–2013
The Web | a hypermedia story
past, present, future.
Hypertext is text that branches and
allows choices on an interactive screen.
It’s text chunks connected by links which
off...
1992?
1993?
Xanadu
solves your
information
hunger.
Xanadu
the biggest
vaporware product
in history.
In those days
hypertext 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
HTTP
HTML
http://en.wikipedia.org/wiki/World_Wide_Web
The Web | a hypermedia story
past, present, future.
Roy Thomas Fielding
°1965
REST | REpresentational State Transfer
An architectural style
for large hypermedia systems
(such as the Web).
Why is the W...
REST | Uniform interface constraints
Identification of resources
Manipulation through representations
Self-descriptive mes...
/index.php?action=showBook&id=35
REST | Identification of resources
/index.php?action=borrowBook&id=35
What is a “borrowBo...
/books/35
REST | Identification of resources
/users/34/books/borrowed
I can get the list of borrowed books.
I can add some...
REST | Uniform interface constraints
Identification of resources
Manipulation through representations
Self-descriptive mes...
http://example.org/books/35
REST | Manipulation of resources
http://api.example.org/REST/books/35.json
They point to the s...
http://example.org/books/35
REST | Manipulation of resources
Humans get HTML.
Machines get JSON.
One resource, many repres...
REST | Manipulation of resources
Don’t create an API.
There is already one:
it’s called HTTP.
(And it’s more widely used
t...
REST | Uniform interface constraints
Identification of resources
Manipulation through representations
Self-descriptive mes...
REST | Self-descriptive messages
POST /index.php?action=showBook&id=35
POST /index.php?action=borrowBook&id=35
What happen...
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 /us...
REST | Uniform interface constraints
Identification of resources
Manipulation through representations
Self-descriptive mes...
http://example.org/books/35
REST | Hypermedia as the engine
HTML
when asked
by user
JSON
when asked
by AJAX
http://example.org/books/35
REST | Hypermedia as the engine
HTML
<h1>Dream Machines</h1>
<a href="/authors/ted_nelson">
by...
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 Nel...
REST | Hypermedia as the engine
For humans and machines.
Don’t make us read your manual.
Make your information actionable....
REST | Fielding’s definition of hypermedia
Hypertext is the simultaneous presentation
of information and controls such tha...
REST | Fielding’s definition of hypermedia
the simultaneous presentation
of information and controls
HTML or JSON
with lin...
REST | Fielding’s definition of hypermedia
the user (or automaton)
obtains choices and selects actions.
you choose
the nex...
this handle
affords
opening
the door
this handle is
an affordance
for opening
the door
a property
of an object
that lets you
act upon it
affordance
the information
becomes
the affordance
The Web | a hypermedia story
past, present, future.
The Semantic Web | for machines
Make machines
understand information
so they can
do 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>
<...
Embed meaning in HTML | RDF
<div id="book" itemtype="http://schema.org/Book">
<span itemprop="name">The Catcher in the Rye...
Embed meaning in HTML | RDF
<div id="book" itemtype="http://schema.org/Book">
<span itemprop="name">The Catcher in the Rye...
The Web | a hypermedia story
past, 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...
Semantic Web:
if your browser understands content
Hypermedia:
can it create the right links?
The hypermedia paradox solved?
+ =
HTML
&
semantics
your
preferred
actions
personalized
hypermedia
browser reads semantics
finds matching actions
creates right links
The information
becomes your affordance.
Distributed af...
The Web | a hypermedia story
past, present, future.
The Web | a hypermedia story
past, present, future.
ruben.verborgh.org
@RubenVerborgh
The web – A hypermedia story
The web – A hypermedia story
The web – A hypermedia story
The web – A hypermedia story
The web – A hypermedia story
The web – A hypermedia story
The web – A hypermedia story
The web – A hypermedia story
The web – A hypermedia story
The web – A hypermedia story
The web – A hypermedia story
The web – A hypermedia story
Upcoming SlideShare
Loading in...5
×

The web – A hypermedia story

1,877

Published on

Slides for the July 2013 Belgian Fronteers meetup

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,877
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "The web – A hypermedia story"

  1. 1. The Web | a hypermedia story past, present, future. Ruben Verborgh
  2. 2. Congratulations, you’re old enough to remember the difference.
  3. 3. This is a camera. Of course it’s digital. What else?
  4. 4. POOR DIGITAL NATIVES only use digital technology.
  5. 5. In only 20 years time, information has become actionable.
  6. 6. The Web | a hypermedia story past, present, future.
  7. 7. Ted Nelson °1937 Doug Engelbart 1925–2013 Aaron Swartz 1986–2013
  8. 8. The Web | a hypermedia story past, present, future.
  9. 9. 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)
  10. 10. 1992? 1993?
  11. 11. Xanadu solves your information hunger.
  12. 12. Xanadu the biggest vaporware product in history.
  13. 13. In those days hypertext systems couldn’t exchange information.
  14. 14. Tim Berners-Lee °1955
  15. 15. The Web is severely limited only publishers can make links they are one-directional they can break But it scales. Globally.
  16. 16. URL HTTP HTML http://en.wikipedia.org/wiki/World_Wide_Web
  17. 17. The Web | a hypermedia story past, present, future.
  18. 18. Roy Thomas Fielding °1965
  19. 19. REST | REpresentational State Transfer An architectural style for large hypermedia systems (such as the Web). Why is the Web successful? constraints
  20. 20. REST | Uniform interface constraints Identification of resources Manipulation through representations Self-descriptive messages Hypermedia as the engine
  21. 21. /index.php?action=showBook&id=35 REST | Identification of resources /index.php?action=borrowBook&id=35 What is a “borrowBook”? Can I GET it? Can I POST to it?
  22. 22. /books/35 REST | Identification of resources /users/34/books/borrowed I can get the list of borrowed books. I can add something to it. Identify resources, not actions.
  23. 23. REST | Uniform interface constraints Identification of resources Manipulation through representations Self-descriptive messages Hypermedia as the engine
  24. 24. 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?
  25. 25. http://example.org/books/35 REST | Manipulation of resources Humans get HTML. Machines get JSON. One resource, many representations. HTML when asked by user JSON when asked by AJAX
  26. 26. 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.)
  27. 27. REST | Uniform interface constraints Identification of resources Manipulation through representations Self-descriptive messages Hypermedia as the engine
  28. 28. REST | Self-descriptive messages POST /index.php?action=showBook&id=35 POST /index.php?action=borrowBook&id=35 What happens?
  29. 29. REST | Self-descriptive messages POST /對我來說 是中國的 POST /我不知道 意味著什麼 What happens?
  30. 30. 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
  31. 31. REST | Uniform interface constraints Identification of resources Manipulation through representations Self-descriptive messages Hypermedia as the engine
  32. 32. http://example.org/books/35 REST | Hypermedia as the engine HTML when asked by user JSON when asked by AJAX
  33. 33. http://example.org/books/35 REST | Hypermedia as the engine HTML <h1>Dream Machines</h1> <a href="/authors/ted_nelson"> by Ted Nelson </a>
  34. 34. http://example.org/books/35 REST | Hypermedia as the engine JSON { "title": "Dream Machines", "author": "Ted Nelson" }
  35. 35. http://example.org/books/35 REST | Hypermedia as the engine JSON { "title": "Dream Machines", "author": { "name": "Ted Nelson": "url": "/authors/ted_nelson" } }
  36. 36. REST | Hypermedia as the engine For humans and machines. Don’t make us read your manual. Make your information actionable. Hypermedia should be the engine of your application. Representations should contain the links to next steps.
  37. 37. REST | Fielding’s definition 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.
  38. 38. REST | Fielding’s definition of hypermedia the simultaneous presentation of information and controls HTML or JSON with links
  39. 39. REST | Fielding’s definition of hypermedia the user (or automaton) obtains choices and selects actions. you choose the next step (you don’t have to create it yourself)
  40. 40. this handle affords opening the door this handle is an affordance for opening the door
  41. 41. a property of an object that lets you act upon it affordance
  42. 42. the information becomes the affordance
  43. 43. The Web | a hypermedia story past, present, future.
  44. 44. The Semantic Web | for machines Make machines understand information so they can do things for us.
  45. 45. Resource Description Framework | RDF :Tim :knows :Ted. subject | predicate | object
  46. 46. 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>.
  47. 47. 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>
  48. 48. 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 understood by machines
  49. 49. The Web | a hypermedia story past, present, future.
  50. 50. Representations should contain the links to next steps. The Web is severely limited only publishers can make links
  51. 51. Publishers are responsible for creating the right links. How can they possibly know what next steps you will take?
  52. 52. The hypermedia paradox Publishers are responsible for creating the right links. How can they possibly know what next steps you will take?
  53. 53. Semantic Web: if your browser understands content Hypermedia: can it create the right links? The hypermedia paradox solved?
  54. 54. + = HTML & semantics your preferred actions personalized hypermedia
  55. 55. browser reads semantics finds matching actions creates right links The information becomes your affordance. Distributed affordance
  56. 56. The Web | a hypermedia story past, present, future.
  57. 57. The Web | a hypermedia story past, present, future. ruben.verborgh.org @RubenVerborgh
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×