The Symbiotic Web

Guardian composer tool
Guardian responsive website

The Web as Information

Tim Berners-Lee

Tim Berners-Lee at the London Olympics Ceremony

At CERN, a variety of data is already available: reports, experiment data, personnel data, electronic mail address lists, […]. It is however impossible to “jump” from one set to another in an automatic way […] Usually, you will have to use a different lookup-method on a different computer with a different user interface. Once you have located information, it is hard to keep a link to it or to make a private note about it that you will later be able to find quickly.

Proposal diagram for the WorldWideWeb

Universal Resource Identifiers

Anything, absolutely anything, “on the Web” should be identified distinctly by an otherwise opaque string of characters.

Links

The texts are linked together in a way that one can go from one concept to another to find the information one wants. The network of links is called a web.

@shitmydadsays on Twitter

The Web was designed as an information space, with the goal that it should be useful not only for human-human communication, but also that machines would be able to participate and help.

HTML

For humans and machines

Presentation layer

CSS (1, 2, 3, etc)

For humans

Semantic layer

<article itemscope itemtype="http://schema.org/Recipe">
  <h1 itemprop="name">Blue cheese, butternut &amp; barley salad
                      with maple walnuts</h1>
  <meta itemprop="cookTime" content="PT45M">
  <meta itemprop="recipeCuisine" content="British">
  <div class="nutrition clearfix" itemprop="nutrition" itemscope
       itemtype="http://schema.org/NutritionInformation">
      <dl><dt><span>kcalories</span></dt>
          <dd itemprop="calories">479</dd></dl>
      <dl><dt><span>protein</span></dt>
          <dd itemprop="proteinContent">14g</dd></dl>
  </div>
  <ul class="unstyled">
      <li itemprop="ingredients">1 butternut squash, peeled</li>
      <li itemprop="ingredients">2 red onions</li>
  </ul>
</article>
    

Semantic layer

For machines

Machines != “SEO”

Optimisation for search engines search engines Google

Not all bots are created equal

Machines != “SEO”

Machines

Tools (human-operated machines)

The Web as Applications

JavaScript empowers developers to create a powerful new class of multimedia rich applications in a platform-independent development environment.

Netscape considered the Web browser and server as a new form of a distributed OS rather than just a single application.

A page might contain JavaScript scripts that run on both the client and the server.

JavaScript will be the most effective method to connect HTML-based content to Java applets.

JavaScript applications

<body></body>
Trello interface (with JavaScript)

The Rule of Least Power

The tradeoff for such power is that you typically cannot determine what a program in a Turing-complete language will do without actually running it.

The less powerful the language, the more you can do with the data stored in that language.

Information as Applications

Progressive enhancement

Component In page Enhancement
External resources (e.g. comments) Links Transcluded
Pagination Links Infinite scrolling
Internal links Links History API
Data infographic Raw data as table Interactive canvas
Live updates Link, meta-refresh Dynamic fetching
Non-core (ads, comment count, etc) N/A Injected

Embeds

Web Components!

Applications as Information

Frontend for data or protocols

Produce or consume the Web

Web apps are still the web

For humans and tools

APIs are closed silos

An SQL database is essentially a closed world, in that the various thing in it were not designed to be linked to from outside.

Open your APIs

Think of who the consumer is for each layer

Web Layers: humans

Think of who the consumer is for each layer

Web Layers: machines

Think of who the consumer is for each layer

Web Layers: humans and machines

The Symbiotic Web

Questions?