Web 2.0 101: Understanding Web 2.0 and its Impact on Technical Communication
Web 2.0 101
-
Upload
mark-borkum -
Category
Technology
-
view
1.179 -
download
0
description
Transcript of Web 2.0 101
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