Web 2.0 101

714 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
714
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web 2.0 101

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

×