1. Web 2.0 101
Mark Borkum

2. Outline
Web 2.0 101

Introduction

Design Patterns

Technologies

Summary

Mashups 101

What is a Mashup?

Examples

Demo

Workshop

2

3. What is Web 2.0?
3

4. A brief history of the World Wide Web
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

4

5. A brief history of the World Wide Web
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
5

6. 6

7. Web as a Platform
In the beginning:
 Web Site
Web browsers were ‘kingmakers’

Web Browser
Browsers like Netscape supported their own standards

User experience was determined by their choice of browser

Web Server
Then something happened…

File System
Characteristics were standardised
 Operating System
XHTML for mark-up

CSS for presentation

EMCAScript for client-side programming

Application
DOM for inline manipulation of content

Web Browser
Web sites became database-backed applications

Web Server
Value moved “up the stack” from the Web browsers to Database

the services being delivered
Operating System
7

8. Case Study: Google Mail
Added Value
(Google search)
Core Competency
(e-mail)
8

9. The Long Tail
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”)
9

10. Case Study: Amazon
Core Competency Added value
(single sign-on)
(selling products)
Added Value
(collaborative filtering algorithms, customer self-service)
10

11. The Network Effect
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

11

12. The Live Web
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

12

13. The Live Web (2)
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

13

14. Web 2.0 Design Patterns
The Long Tail
1.
Data is the Next Intel Inside
2.
Users Add Value
3.
Network Effects by Default
4.
Some Rights Reserved
5.
The Perpetual Beta
6.
Cooperate, Don’t Control
7.
Software Above the Level of a Single Device
8.
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
14

15. Web 2.0 Technologies
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, …

15

16. Summary
16

17. Mashups 101
Reminder: Please sign up for a GMail account

18. How to build a wooden chair
A pragmatic guide
18

19. How to build a wooden chair
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…

19

20. How to build a wooden chair (2)
How is this relevant?

Building chairs is just like building mashups

The wood is the data

The glue is provided by AJAX

=
20

21. Asynchronous JavaScript And XML
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
21

22. What is a Mashup?
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

22

23. Choosing the right wood data
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, …

23

24. An Example Mashup
24

25. Lists
Select data source(s)
1.
APIs

Syndication (RSS, Atom)

Filter the data
2.
AJAX

Render each item
3.
AJAX

25

26. Maps
Select data source(s)
1.
Filter and “geolocate” data
2.
Create a map
3.
Google Maps,Yahoo! Maps, Live Search Maps, …

Render each item on map (as new layer)
4.
26

27. Tag Clouds
Also known as “weighted lists”

Select data source(s)
1.
“Weigh” the data
2.
Create a mapping of identifiers to weights

Optional: normalise the weights

Render each item according to it’s weight
3.
27

28. Book Clouds
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

28

29. The IUPAC Green Book
29

30. Demo
30

31. Workshop
Reminder: Please sign up for a GMail account
31

32. The primary data source is

Metadata
Social networking
Licensing
Data Tag cloud
User-generated content
32

33. 33