Web 2.0 101

Mark Borkum

Outline

2

  Web 2.0 101   Introduction   Design Patterns   Technologies   Summary

  Mashups 101   What is a Mashup?   Examples   Demo

  Workshop

What is Web 2.0?

3

A brief history of the World Wide Web

4

  In the beginning, TBL created HTML and httpd

  A bunch of Web sites appeared

  Some thrived, others vanished

  Over time, a new group of Web sites appeared

A brief history of the World Wide Web

5

  The “creatures” (Web sites) that live in the World Wide Web are evolving

  WWW is the environment   Web sites have characteristics   Web sites have fitness

  The characteristics determine how well-suited a creature is to it’s environment

6

  In the beginning:   Web browsers were ‘kingmakers’   Browsers like Netscape supported their own standards   User experience was determined by their choice of browser

  Then something happened…

  Characteristics were standardised   XHTML for mark-up   CSS for presentation   EMCAScript for client-side programming   DOM for inline manipulation of content

  Web sites became database-backed applications

  Value moved “up the stack” from the Web browsers to the services being delivered

Web as a Platform

7

Web Site

Web Browser

Web Server

File System

Operating System

Application

Web Browser

Web Server

Database

Operating System

Case Study: Google Mail

8

Added Value (Google search)

Core Competency (e-mail)

  The Pareto Principle (or 80/20 rule):   20% of the community will generate 80% of the data

  What does this mean?   Every community has a core group of “super users”   The majority of the community are outside of the core

  Leverage self-service and algorithmic data management to reach out to the entire Web (the “long tail”)

The Long Tail

9

Case Study: Amazon

10

Core Competency (selling products)

Added Value (collaborative filtering algorithms, customer self-service)

Added value (single sign-on)

The Network Effect

11

  Amazon works because there is an “architecture of participation”   Users are invited to create new content

  Descriptions   Profiles   Ratings   Reviews

  The service acts as an intelligent broker, connecting users together   Collaborative filtering

  “Customers who bought this product also bought”   BitTorrent

  Files are split into small pieces   More “seeds” (users with the complete file) means faster downloads!

  The service automatically gets better the more people use it

The Live Web

12

  In the beginning:   Web sites were hard-coded collections of static Web pages   Each Web page has a URI:

  http://www.examples.com/pages/my_web_page.html

  In 1993, Rob McCool created the Common Gateway Interface standard   Web sites became dynamic collections of Web pages generated using a

database   Each piece of content has a URI:

  http://www.examples.com/pages.php?title=MyWebPage

  In 2000, Jason Kottke implements the first “permalink”   A human-readable URI for the ‘latest version’ of the dymanically-

generated Web page (great for citations!)   http://www.examples.com/MyWebPage

The Live Web (2)

13

  In 1999, Netscape releases the first version of RSS   Rich Site Summary   Incorporates Dave Winer’s “Really Simple Syndication” in version 0.91

  RSS allows Web sites to publish metadata about new content in a standardised way (as a “feed”)

  Syndication facilitates new services   Aggregators (“feed readers”)   Mashups

  Yahoo Pipes!   Netvibes   PageFlakes

Web 2.0 Design Patterns

14

1.  The Long Tail 2.  Data is the Next Intel Inside 3.  Users Add Value 4.  Network Effects by Default 5.  Some Rights Reserved 6.  The Perpetual Beta 7.  Cooperate, Don’t Control 8.  Software Above the Level of a Single Device

http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html

Web 2.0 Technologies

15

  Specifications   XHTML, CSS, DOM, Atom, RSS, …

  Transport Layers   SOAP, REST, …

  Platforms   LAMP, WIMP, …

  Server-side Scripting Languages   Perl, PHP, Python, ASP.NET, Ruby …

  Frameworks   Ruby on Rails, Django, …

Summary

16

Mashups 101

Reminder: Please sign up for a GMail account

How to build a wooden chair

A pragmatic guide

18

How to build a wooden chair

19

  There are 2 ways:   Carve it out of a single block of wood

  Advantages:   The chair is a perfect fit

  Disadvantages:   The chair is bespoke

  Assemble it from smaller pieces of wood (legs, back, seat, …)   Advantages:

  The smaller parts are suited to individual tasks   The chair is “greater than the sum of it’s parts”

  Disadvantages:   We need some glue…

How to build a wooden chair (2)

20

  How is this relevant?

  Building chairs is just like building mashups   The wood is the data   The glue is provided by AJAX

=

Asynchronous JavaScript And XML

21

  AJAX is a collection of technologies   Presentation – XHTML and CSS   Data Interaction – DOM   Data Manipulation – XML, JSON, Google Protocol Buffers …   Asynchronous Communication – XMLHttpRequest   Scripting Language – JavaScript, VBScript, …

  Communities create APIs

  Communities develop Rich Internet Applications

What is a Mashup?

22

  A combination of two or more types of data

  A presentation that reuses existing data

  An entirely new set of services

  A new set of widgets

  Added value

Choosing the right wood data

23

  There are many types of data, including:   Identifiers

  de facto – URI (these include UUID, ISBN, …)   de jure – ASIN (Amazon Standard Identification Number), …

  Identity   OpenID, LDAP, Shibboleth, X.509, …

  Geospatial   KML, GML, “geo-location” (provided by APIs), …

  Temporal   Dates, times, events, …

  Labels   Titles, names, tags, …

An Example Mashup

24

Lists

25

1.  Select data source(s)   APIs   Syndication (RSS, Atom)

2.  Filter the data   AJAX

3.  Render each item   AJAX

Maps

26

1.  Select data source(s) 2.  Filter and “geolocate” data 3.  Create a map

  Google Maps, Yahoo! Maps, Live Search Maps, … 4.  Render each item on map (as new layer)

Tag Clouds

27

  Also known as “weighted lists”

1.  Select data source(s)

2.  “Weigh” the data   Create a mapping of identifiers to weights   Optional: normalise the weights

3.  Render each item according to it’s weight

Book Clouds

28

  Data source   LATEX mark-up for book

  Recipe for a Term Cloud   Label function

  The name of the term   Sort function

  Alphabetical order   Weight function

  The number of references in the index for the term

  Recipe for a Page Cloud   Label function

  The page number   Sort function

  Numerical order   Weight function

  The number of references in the index to the page

The IUPAC Green Book

29

Demo

30

Workshop

Reminder: Please sign up for a GMail account

31

32

  The primary data source is

Metadata

Data

Social networking

Licensing

User-generated content

Tag cloud

33