The web – A hypermedia story

  • 1,740 views
Uploaded on

Slides for the July 2013 Belgian Fronteers meetup

Slides for the July 2013 Belgian Fronteers meetup

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,740
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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