Architecture of the World Wide Web

Web Architecture (INFO 290-03)

Erik Wilde, UC Berkeley School of Information
2007-08-30
Creative Commons License

This work is licensed under a CC
Attribution 3.0 Unported License

Abstract

The Web's architecture has very simple principles revolving around the ideas of placing a heavy emphasis on a consistent and global identification mechanism for resources, a standardized way of how resource representations can be retrieved, and a standardized way of how resource representations should be usable by using standardized media types. This lecture presents an overview of these architectural principles and illustrates them with using blogs as an example of Web-based applications.

Today's Reading

Summary of Ian Jacobs, Norman Walsh, Architecture of the World Wide Web, Volume One, World Wide Web Consortium, Recommendation REC-webarch-20041215, December 2004

Outline (Parsimony)

  1. Parsimony [3]
  2. Principles [4]
  3. Constraints and Good Practices [2]
  4. Blogs as Web Apps [7]
  5. Conclusions [1]

Keep It Simple

Web Design as System Design

There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.

C. A. R. Hoare, The Emperor's Old Clothes, 1980 Turing Award Lecture

Technology Blinders

Outline (Principles)

  1. Parsimony [3]
  2. Principles [4]
  3. Constraints and Good Practices [2]
  4. Blogs as Web Apps [7]
  5. Conclusions [1]

Identification

Interaction

Data Formats

Identifier, Resource, and Representation

uri-res-rep.png

Outline (Constraints and Good Practices)

  1. Parsimony [3]
  2. Principles [4]
  3. Constraints and Good Practices [2]
  4. Blogs as Web Apps [7]
  5. Conclusions [1]

Constraints

Good Practices

Outline (Blogs as Web Apps)

  1. Parsimony [3]
  2. Principles [4]
  3. Constraints and Good Practices [2]
  4. Blogs as Web Apps [7]
  5. Conclusions [1]

Blog in XML

<?xml version="1.0" encoding="UTF-8"?>
<blogxml>
 <post date="2006-05-25">
  <title>Holyrood Park</title>
  <text>Located in the middle of Edinburgh, Holyrood Park is a hill with a lot of rock and grass.</text>
  <image src="holyrood-park">View from the west with the most spectacular cliffs.</image>
 </post>
 <post date="2007-05-15">
  <title>Half Dome</title>
  <text>The trip to half dome is a long one, but very beautiful and with a spectacular final climb.</text>
  <image src="half-dome">Me on top of half dome.</image>
 </post>
 <post date="2007-05-20">
  <title>Fifth Lake</title>
  <text>The seven lakes loop offers views of (surprise!) seven lakes settled in a remote valley.</text>
  <image src="fifth-lake">Still a lot of ice on fifth lake.</image>
 </post>
 <post date="2007-05-22">
  <title>Golden Canyon</title>
  <text>Golden Canyon leads to the famous Zabriskie Point overlook.</text>
  <image src="golden-canyon">A maze of erosion patterns carved in sediment.</image>
 </post>
 <post date="2007-08-12">
  <title>Red Rock Canyon</title>
  <text>Red Rock Canyon is easily reachable from Las Vegas and has some nice trails.</text>
  <image src="red-rock-canyon">Red Rock Canyon is called Red Rock Canyon for a reason.</image>
 </post>
</blogxml>

Support URI Guessing (Year Index)

  <xsl:for-each select="distinct-values( for $i in //post/@date return substring($i, 1, 4) )">
   <xsl:result-document href="dretblog/{current()}/index.html">
    <html>
     <head><xsl:sequence select="dret:head(format-date(xs:date(concat(current(), '-01-01')), '[Y]'), '../')"/></head>
     <body>
      <h1><a href="..">dretblog</a></h1>
      <h2><xsl:value-of select="format-date(xs:date(concat(current(), '-01-01')), '[Y]')"/></h2>
      <xsl:for-each select="$stdin//post[starts-with(@date, current())]">
       <p><a href="../{translate(@date, '-', '/')}/{dret:postname(title)}"><xsl:value-of select="concat(format-date(@date, '[F] [MNn] [D], [Y]'), ': ', title)"/></a></p>
      </xsl:for-each>
     </body>
    </html>
   </xsl:result-document>
  </xsl:for-each>

Support URI Guessing (Month Index)

  <xsl:for-each select="distinct-values( for $i in //post/@date return substring($i, 1, 7) )">
   <xsl:result-document href="dretblog/{translate(current(), '-', '/')}/index.html">
    <html>
     <head><xsl:sequence select="dret:head(format-date(xs:date(concat(current(), '-01')), '[MNn] [Y]'), '../../')"/></head>
     <body>
      <h1><a href="../..">dretblog</a></h1>
      <h2>
       <xsl:value-of select="format-date(xs:date(concat(current(), '-01')), '[MNn] ')"/>
       <a href="../.."><xsl:value-of select="format-date(xs:date(concat(current(), '-01')), '[Y]')"/></a>
      </h2>
      <xsl:for-each select="$stdin//post[starts-with(@date, current())]">
       <p><a href="../../{translate(@date, '-', '/')}/{dret:postname(title)}"><xsl:value-of select="concat(format-date(@date, '[F] [MNn] [D], [Y]'), ': ', title)"/></a></p>
      </xsl:for-each>
     </body>
    </html>
   </xsl:result-document>
  </xsl:for-each>

Support URI Guessing (Day Index)

  <xsl:for-each select="distinct-values(//post/@date)">
   <xsl:result-document href="dretblog/{translate(current(), '-', '/')}/index.html">
    <html>
     <head><xsl:sequence select="dret:head(format-date(xs:date(current()), '[F] [MNn] [D], [Y]'), '../../../')"/></head>
     <body>
      <h1><a href="../../..">dretblog</a></h1>
      <h2>
       <xsl:value-of select="format-date(xs:date(current()), '[F] ')"/>
       <a href=".."><xsl:value-of select="format-date(xs:date(current()), '[MNn]')"/></a>
       <xsl:value-of select="format-date(xs:date(current()), ' [D], ')"/>
       <a href="../.."><xsl:value-of select="format-date(xs:date(current()), '[Y]')"/></a>
      </h2>
      <xsl:for-each select="$stdin//post[starts-with(@date, current())]">
       <p><a href="../../../{translate(@date, '-', '/')}/{dret:postname(title)}"><xsl:value-of select="concat(format-date(@date, '[F] [MNn] [D], [Y]'), ': ', title)"/></a></p>
      </xsl:for-each>
     </body>
    </html>
   </xsl:result-document>
  </xsl:for-each>

Support Spontaneous Navigation

     <body>
      <h1><xsl:value-of select="title"/></h1>
      <h2>
       <a href="./"><xsl:value-of select="format-date(@date, '[F]')"/></a>
       <xsl:text> </xsl:text>
       <a href=".."><xsl:value-of select="format-date(@date, '[MNn]')"/></a>
       <xsl:text> </xsl:text>
       <a href="./"><xsl:value-of select="format-date(@date, '[D]')"/></a>
       <xsl:text>, </xsl:text>
       <a href="../.."><xsl:value-of select="format-date(@date, '[Y]')"/></a>
      </h2>
      <a href="../../../../../img/{image/@src}.jpg" title="{image}"><img src="../../../../../img/{image/@src}-small.jpg"/></a>
      <p><xsl:value-of select="text"/></p>
     </body>

Publishing as Atom Feed

  <feed xmlns="http://www.w3.org/2005/Atom" xml:base="http://dret.net/lectures/web-fall07/src/dretblog.atom">
   <title>dretblog</title>
   <id>http://dret.net/lectures/web-fall07/src/dretblog.atom</id>
   <link rel="self" href=""/>
   <updated><xsl:value-of select="current-dateTime()"/></updated>
   <author><name>Erik Wilde</name></author>
   <xsl:for-each select="//post">
    <entry xml:base="http://dret.net/lectures/web-fall07/src/{translate(@date, '-', '/')}/{dret:postname(title)}">
     <title><xsl:value-of select="title"/></title>
     <link href="http://dret.net/lectures/web-fall07/src/{translate(@date, '-', '/')}/{dret:postname(title)}"/>
     <id><xsl:value-of select="concat('http://dret.net/lectures/web-fall07/src/', translate(@date, '-', '/'), '/', dret:postname(title))"/></id>
     <published><xsl:value-of select="@date"/>T00:00:00Z</published>
     <updated><xsl:value-of select="current-dateTime()"/></updated>
     <content type="xhtml">
      <div xmlns="http://www.w3.org/1999/xhtml">
       <h1><xsl:value-of select="title"/></h1>
       <h2><xsl:value-of select="format-date(@date, '[F] [MNn] [D], [Y]')"/></h2>
       <a href="http://dret.net/lectures/web-fall07/img/{image/@src}.jpg" title="{image}"><img src="http://dret.net/lectures/web-fall07/img/{image/@src}-small.jpg"/></a>
       <p><xsl:value-of select="text"/></p>
      </div>
     </content>
    </entry>
   </xsl:for-each>
  </feed>

Blog as Atom Feed

<feed xmlns="http://www.w3.org/2005/Atom" xml:base="http://dret.net/lectures/web-fall07/src/dretblog.atom">
 <title>dretblog</title>
 <id>http://dret.net/lectures/web-fall07/src/dretblog.atom</id>
 <link rel="self" href=""/>
 <updated>2007-08-30T00:52:27.718-07:00</updated>
 <author>
  <name>Erik Wilde</name>
 </author>
 <entry xml:base="http://dret.net/lectures/web-fall07/src/2006/05/25/holyrood_park">
  <title>Holyrood Park</title>
  <link href="http://dret.net/lectures/web-fall07/src/2006/05/25/holyrood_park"/>
  <id>http://dret.net/lectures/web-fall07/src/2006/05/25/holyrood_park</id>
  <published>2006-05-25T00:00:00Z</published>
  <updated>2007-08-30T00:52:27.718-07:00</updated>
  <content type="xhtml">
   <div xmlns="http://www.w3.org/1999/xhtml">
    <h1>Holyrood Park</h1>
    <h2>Thursday May 25, 2006</h2>
    <a href="http://dret.net/lectures/web-fall07/img/holyrood-park.jpg" title="View from the west with the most spectacular cliffs.">
     <img src="http://dret.net/lectures/web-fall07/img/holyrood-park-small.jpg"/>
    </a>
    <p>Located in the middle of Edinburgh, Holyrood Park is a hill with a lot of rock and grass.</p>
   </div>
  </content>
 </entry>

Outline (Conclusions)

  1. Parsimony [3]
  2. Principles [4]
  3. Constraints and Good Practices [2]
  4. Blogs as Web Apps [7]
  5. Conclusions [1]

Web Architecture Essentials