Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Web 2.0 101

•
•
Mark Borkum
Mark Borkum

This document provides an overview of Web 2.0 concepts including: - A brief history of the evolution of the World Wide Web and how websites have adapted. - Design patterns that characterize Web 2.0 such as users adding value, network effects, and perpetual beta features. - Common Web 2.0 technologies like AJAX, APIs, and mashups which combine multiple sources of data. - Examples of mashups using different types of data like lists, maps, and tag clouds.

1 of 33
Web 2.0 101 Mark Borkum
Outline Web 2.0 101   Introduction   Design Patterns   Technologies   Summary   Mashups 101   What is a Mashup?   Examples   Demo   Workshop   2
What is Web 2.0? 3
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
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
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
Case Study: Google Mail Added Value (Google search) Core Competency (e-mail) 8
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
Case Study: Amazon Core Competency Added value (single sign-on) (selling products) Added Value (collaborative filtering algorithms, customer self-service) 10
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
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
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
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
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
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 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
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
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
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
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
An Example Mashup 24
Lists Select data source(s) 1.  APIs   Syndication (RSS, Atom)   Filter the data 2.  AJAX   Render each item 3.  AJAX   25
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
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
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
The IUPAC Green Book 29
Demo 30
Workshop Reminder: Please sign up for a GMail account 31
The primary data source is   Metadata Social networking Licensing Data Tag cloud User-generated content 32
33

More Related Content

Web 2.0 101

  • 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
  • 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
  • 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
  • 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