The web – A hypermedia story
Upcoming SlideShare
Loading in...5
×
 

The web – A hypermedia story

on

  • 1,780 views

Slides for the July 2013 Belgian Fronteers meetup

Slides for the July 2013 Belgian Fronteers meetup

Statistics

Views

Total Views
1,780
Views on SlideShare
1,780
Embed Views
0

Actions

Likes
1
Downloads
3
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The web – A hypermedia story The web – A hypermedia story Presentation Transcript

  • 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 offer the reader different pathways. —Ted Nelson, Dream Machines (1974)
  • 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 Web successful? constraints
  • REST | Uniform interface constraints Identification of resources Manipulation through representations Self-descriptive messages Hypermedia as the engine
  • /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?
  • /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.
  • REST | Uniform interface constraints Identification 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. HTML when asked by user JSON when 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 Identification 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 Identification of resources Manipulation through representations Self-descriptive messages Hypermedia as the engine
  • 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 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 engine of your application. Representations should contain the links to next steps.
  • 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.
  • REST | Fielding’s definition of hypermedia the simultaneous presentation of information and controls HTML or JSON with links
  • 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)
  • 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> <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 understood by machines
  • 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 you will take?
  • 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 affordance
  • The Web | a hypermedia story past, present, future.
  • The Web | a hypermedia story past, present, future. ruben.verborgh.org @RubenVerborgh