The web – A hypermedia story

2,037
-1

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
2,037
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

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.

×