Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Web 2.0 Patterns and Technologies - Web Technologies (1019888BNR)

957 views

Published on

This lecture is part of a Web Technologies course given at the Vrije Universiteit Brussel.

Published in: Education
  • Be the first to comment

Web 2.0 Patterns and Technologies - Web Technologies (1019888BNR)

  1. 1. 2 December 2005 Web Technologies Web 2.0 Patterns and Technologies Prof. Beat Signer Department of Computer Science Vrije Universiteit Brussel http://www.beatsigner.com
  2. 2. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2December 2, 2016 Web 2.0  The term Web 2.0 was introduced by Tim O'Reilly at the Web 2.0 conference in 2004 to describe a new generation of web apps  user-generated content  data as a driving force - infoware rather than simply software  collective intelligence via social resource and knowledge sharing  the Web as a platform for software applications  Not a new technology but a change in how developers and users build applications on the Web  user-generated content already existed earlier (e.g. Amazon) [http://en.wikipedia.org/wiki/File:Web_2.0_Map.svg]
  3. 3. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3December 2, 2016 Main Web 2.0 Ingredients  Social Web  end user as a participant and content creator  democracy  Rich Internet Applications (RIAs)  bring the desktop to the browser  highly interactive applications (e.g. with drag and drop)  based on AJAX, Flash, etc.  Service Oriented Architectures (SOAs)  enable the sharing of information and services between different Web 2.0 applications  Web Services, RSS, mashups, etc.
  4. 4. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4December 2, 2016 Web 2.0 Interaction Service-oriented Architecture (SOA) information access content creation user-to-user interaction Web collective intelligence
  5. 5. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5December 2, 2016 Web 1.0 vs. Web 2.0 Web 1.0 Web 2.0 publishing participation reading reading and writing (participatory Web) content management systems wikis personal homepages blogs simple request/response interaction Rich Internet Application (RIA) screen scraping (extract data from HTML) service-oriented architectures taxonomies (classification) folksonomies (tagging) companies communities single user social networks bookmarking collaborative tagging / social bookmarking ... ...
  6. 6. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 6December 2, 2016 Web 2.0 and the Long Tail  The term long tail has been introduced by Chris Anderson in 2004  article about Amazon etc. - 'Touching the Void' and 'Into Thin Air' example  Main observations  the tail is longer than expected and now economically within reach  the niches form a significant market when aggregated  new economic model: combine infinite shelf space with shared real-time public opinions and buying trends  Major part of Internet content made up by small sites  provide tools to address the long tail and not just the head Joe Simpson, 1988 Jon Krakauer, 1997
  7. 7. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7December 2, 2016 Video: The Machine is Us/ing Us
  8. 8. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8December 2, 2016 Web 2.0 Examples  Wikis  Blogs  Media sharing sites  Folksonomies  Social networking sites  Web-based communities  Mashups  Web applications  ...
  9. 9. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 9December 2, 2016 Wikis  The first wiki was the WikiWikiWeb in 1995  Ward Cunningham  inspired by HyperCard  Any user can create new wiki pages or edit existing pages  no special software required on the client side (only a browser)  Democracy-based control of the content  revision history, discussion, ...  Various wiki software  MediaWiki, DokuWiki, ...
  10. 10. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 10December 2, 2016 Wikipedia  Open authoring model  registered and anonymous users may contribute  some users (editors) have special rights  Each article has  a history page showing all of its changes  a discussion page  Issues  reliability never guaranteed since no central authority  vandalism  ...
  11. 11. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11December 2, 2016 Blogs  A blog (weblog) is a chronologically ordered list of information  personal diary  specific subjects - e.g. celebrities  Tool for delivering news and getting in touch with a large community of users  nowadays often used as a powerful channel in politics  much harder to control than print or broadcasting media  Popular blogs often generate revenue by advertising  access to content is often free
  12. 12. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12December 2, 2016 Flickr  Image hosting and sharing website  Image repository that is often used by bloggers  Managing images  collaborative tagging - user-generated taxonomy (folksonomy) - one of the first websites that implemented tag clouds  grouping in sets, collections and higher order collections - note that an image may be added to multiple sets  Offers a powerful Web Service API  can easily be integrated with third-party applications
  13. 13. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 13December 2, 2016 Folksonomies  Folksonomy = 'folk' + 'taxonomy'  user-generated taxonomy  Social tagging  collaboratively creating and managing tags  bottom up approach - no fixed terminology  Applications  Annotea: shared Web annotations and bookmarks  Delicious: social bookmarking web service  Tag cloud visualisation
  14. 14. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14December 2, 2016 Facebook  Social networking site  Connect to friends and share information  info about current status  post messages on a user's public wall  send individual messages  share photos  Easy to add individual applications  Copyright issues  what happens with content that has been uploaded to Facebook?  Privacy issues
  15. 15. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15December 2, 2016 Twitter  Micro-blogging and social networking service  Small messages (tweets) can be posted to a user profile  often added via SMS  reach millions of users from any place around the world within seconds - used in protests and politics, emergencies, ...  Can we get too connected?
  16. 16. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 16December 2, 2016 Instagram  Mobile photo and video sharing  'instant camera' and 'telegram'  Simple digital filters can be applied  Uses hashtags to dis- cover photos  Users can like and com- ment on photos as well as follow other users
  17. 17. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 17December 2, 2016 Second Life  Virtual 3-dimensional world by Linden Lab  special client software  User represented by an avatar  Linden dollar (L$) as a currency  buy land  buy and sell goods and services to other users  Applications  education, business meetings, arts, ...
  18. 18. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18December 2, 2016 Academia.edu  Social networking website for researchers  Sharing and rating of resources  research papers, conference presentations, CVs, etc.  Find researchers with similar research interests  Other professional social networking websites  LinkedIn, Xing, ...  How to deal with profile information on different sites?  open standards for social networking
  19. 19. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19December 2, 2016 SlideShare  Social networking website to share presentations  High quality educational material  Various APIs for inte- gration with other social networking websites  Content may spread virally through social networks and blogs
  20. 20. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 20December 2, 2016 Delicious  Social bookmarking service  store bookmarks and access them from different browsers  share and discover book- marks  Non-hierarchical classi- fication based on tags  Offers various APIs to access the bookmarks
  21. 21. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21December 2, 2016 Mashups  Combine content or func- tionality from existing web- sites, web services and RSS feeds  Various mashup tools  Yahoo Pipes, IBM Mashup Center, ...  e.g. for developers vs. end users  Mashup example  composition of Google Maps and realtime information about the position of airplanes - http://www.flightradar24.com
  22. 22. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22December 2, 2016 Google Docs  Free web-based office tools  word processor, spreadsheet application, ...  Mobile access via mobile phone  Software as a service (SaaS)  Data safety and privacy issues
  23. 23. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23December 2, 2016 Google AdSense  Highly customised delivery of advertisements  shows advertisements delive- red via Google AdWords  New models for payment  pay-per-click in addition to pay-per-impression  Any website owner can enroll  sometimes very complementary information - e.g. blog with reviews about specific products together with Google advertisements for these products
  24. 24. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24December 2, 2016 Video: The Kindness of Strangers
  25. 25. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25December 2, 2016 Social Implications of Web 2.0  Data ownership and copyright issues  Collective intelligence (wisdom of crowds)  Shift of power from controlled media to collaborative communities  New models for crediting an individual's content that is accessed by other users or composed in mashup applications  Everybody has a (big) voice  e.g. reach millions of users within seconds via Twitter
  26. 26. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26December 2, 2016 Common Web 2.0 Patterns  The presented Web 2.0 applications have some common underlying patterns  service oriented architectures (SOAs)  software as a service  asynchronous partial updates  mashups  self-organising communities  collaborative tagging  viral marketing  ...
  27. 27. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27December 2, 2016 The Programmable Web  Based on HTTP  Data often encoded in XML  Potential alternative data formats  HTML  plain text  JavaScript Object Notation (JSON)  binary formats
  28. 28. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28December 2, 2016 Rich Internet Applications (RIAs)  Bring the desktop to the browser  Highly responsive (good performance)  asynchronous and partial content updates  Rich Graphical User Interface (GUI)  various RIA toolkits and environments introduced earlier - Adobe Flash, Apache Flex and AIR - Microsoft Silverlight - Sun JavaFX - JavaServer Faces (JSF) - Mozilla XUL (XML User Interface Language) - ...
  29. 29. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29December 2, 2016 Asynchronous Partial Updates Client Server  Rather than updating an entire resource (e.g. webpage), we can asynchronously update parts of a resource  Updates initiated by the client (or the server) based on user interaction, state change, timeout, … Service Service
  30. 30. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 30December 2, 2016 Asynchronous Partial Updates …  Updates cannot be initiated by the server if HTTP is used!  have to use polling or long polling (e.g. Comet model)  There are different possibilities how the partial update of resources can be realised over the Web  AJAX  Action Message Format (AMF) - used by Apache Flex  REST-based implementations  …
  31. 31. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31December 2, 2016 AJAX  Asynchronous JavaScript and XML  AJAX is not a technology by itself but a group of existing technologies (term coined in 2005)  HTML and CSS for the visualisation  JavaScript in combination with DOM to dynamically change the presented information and process messages on the client side  method to asynchronously exchange data between the client (browser) and the server - often via the XMLHttpRequest (XHR) JavaScript object - data can be in different formats including XML, plain text, JavaScript Object Notation (JSON), ...  client-side AJAX engine deals with asynchronous message handling
  32. 32. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 32December 2, 2016 XMLHttpRequest Object  The XMLHttpRequest (XHR) object has several important properties  onreadystatechange - registers a JavaScript function that will handle the response from the server  readyState - represents a response status from the server • 0 (unititialised): object has been created but is uninitialised • 1 (open): object has been created but send method not yet called • 2 (sent): send method has been called and the HTTP response headers have been received • 3 (receiving): some data (body) has been received but response not yet available • 4 (loaded): all data has been received and the response is available - a function registered via onreadystatechage is executed each time readyState changes  responseText, responseBody and responseXML - contains the server's response in different formats
  33. 33. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33December 2, 2016 AJAX Example <html> <body> <script type="text/javascript"> function createXMLHttpRequest() { if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined") { // code for IE5 and IE6 return new ActiveXObject("Microsoft.XMLHTTP"); } else { throw new Error("XMLHttpRequest object not supported!") } } function getTime() { xhr = createXMLHttpRequest(); xhr.onreadystatechange=function() { if (xhr.readyState == 4 && xhr.status == 200) { document.testForm.time.value=xhr.responseText; } } xhr.open("GET","time.php",true); xhr.send(null); } </script>
  34. 34. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34December 2, 2016 AJAX Example ...  createXMLHttpRequest() deals with different browser versions  For more advanced AJAX examples see  http://www.w3schools.com/Ajax/  Getting Started with Ajax  http://refcardz.dzone.com/refcardz/ getting-started-ajax <form name="testForm"> Input: <input type="text" name="input" onkeyup="getTime();" /> Time: <input type="text" name="time" /> </form> </body> </html>
  35. 35. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35December 2, 2016 Google Search (Suggest) AJAX Example
  36. 36. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36December 2, 2016 AJAX  Advantages  reduced load time and higher responsiveness  application state can be maintained across multiple pages since the main container page is not reloaded  Disadvantages  not possible to bookmark any particular state of an application  content may not be crawled by certain search engines since they do not execute JavaScript code  cannot be used in browsers with disabled JavaScript functionality  Various libraries simplify the AJAX development  e.g. the jQuery JavaScript library  Web Socket API might also be used for asynchronous updates
  37. 37. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37December 2, 2016 Service-Oriented Architecture (SOA)  Architecture that modularises functionality as interoperable services  loose coupling of services  service encapsulation  interoperability between different operating systems and programming languages  mashup of services  ...  Software as a service (SaaS)  software is offered as a service and may itself be a composition of third-party services
  38. 38. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38December 2, 2016 Representational State Transfer (REST)  REST is an architectural style for distributed hypermedia systems requirering the following constraints (1) separation of concerns between client and server  client and server can be developed and replaced independently (2) uniform interface  identification of resources (e.g. URIs on the Web)  manipulation of resources on the server via representation on the client side  self-describing messages (e.g. MIME type on the Web)  hypermedia for application state change (e.g. hypertext links to related resources) (3) stateless  no client state is stored on the server side (4) cacheability  responses must explicitly or implicitly define whether they are cacheable
  39. 39. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39December 2, 2016 Representational State Transfer (REST) ... (5) layering  intermediary servers (proxies) can be transparently added between the client and the server (6) code on demand (optional)  the server can send application logic (code) to the client (e.g. Java Applets)  A service that conforms at least to the first five constraints is called a RESTful service  The Web is an implementation of a system conforming to the REST architectural style  however, RESTful services can also be implemented over protocols other than HTTP
  40. 40. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40December 2, 2016 Web Services  Web-based client-server communication over HTTP  Two main types of Web Services  Big Web Services - Universal Description, Discovery and Integration (UDDI) - Web Services Description Language (WSDL) - Simple Object Access Protocol (SOAP)  RESTful Web Services - better integrated with HTTP and web browsers - makes use of GET, POST, PUT and DELETE HTTP methods
  41. 41. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41December 2, 2016 Big Web Services Service Provider Service Requester Service Broker UDDI WSDL SOAP SOAP WSDL
  42. 42. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 42December 2, 2016 Big Web Services ...  Universal Description, Discovery and Integration (UDDI)  yellow pages for WSDL  "global" registry describing available business services  very complex  Microsoft and IBM shut down their public UDDI registries in 2006  Web Service Description Language (WSDL)  XML application to describe a Web Service's functionality  complex  Simple Object Access Protocol (SOAP)  defines an envelope for transporting XML messages  The Web Service Stack contains many other protocols  BPEL, WS-Security, WS-Reliability, WS-Transaction, ...
  43. 43. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43December 2, 2016 SOAP  Successor of XML-RPC (discussed earlier)  Introduced in 1998 as Simple Object Access Protocol  Dave Winer, Don Box, Bob Atkinson and Mohsen Al-Ghosein  since version 1.2 the name is no longer treated as an acronym  XML-based communication protocol  A SOAP message consists of an <Envelope> element which contains  an optional <Header> element  a <Body> element - remote procedure call or response information  SOAP requests are often sent via HTTP POST requests
  44. 44. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 44December 2, 2016 SOAP Request Message Example  predefined SOAP attributes - encodingStyle: defines the used data types - mustUnderstand: if set to 1 then the server has to understand the header - actor: can be used to delegate the header to an intermediary receiver (proxy) <?xml version="1.0"?> <soap:Envelope xmlns:soap="http://www.w3.org/2001/12/soap-envelope" soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding"> <soap:Header> <t:username xmlns:t="http://wise.vub.ac.be/transaction/" soap:mustUnderstand="1">pellens</t:username> </soap:Header> <soap:Body xmlns:c="http://wise.vub.ac.be/courses/"> <c:getCourseInfo> <c:courseID>4011474FNR</c:courseID> </c:getCourseInfo> </soap:Body> </soap:Envelope>
  45. 45. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 45December 2, 2016 SOAP Response Message Example  note that also a response message can have a <Header> element  the body contains a <Fault> element if something went wrong on the server side <?xml version="1.0"?> <soap:Envelope xmlns:soap="http://www.w3.org/2001/12/soap-envelope" soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding"> <soap:Body> <c:getCourseInfoResponse xmlns:c="http://wise.vub.ac.be/courses"> <c:title>Web Information Systems</c:title> <c:description>The goal of this course is to teach students the concepts and technologies for realising Web Information Systems (WIS). This ranges from basic network technologies and protocols to high level frameworks for the design and ... </c:description> </c:getCourseInfoResponse> </soap:Body> </soap:Envelope>
  46. 46. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 46December 2, 2016 SOAP ...  Advantages  platform and language independent  SOAP over HTTP results in less problems with proxies and firewalls than other remote procedure call solutions (e.g. CORBA)  there exist a lot of tools and language bindings that automatically create the required client and server-side functionality - e.g. Java API for XML Web Services (JAX-WS)  Disadvantages  slower than non-verbose protocols (e.g. CORBA)  Big Web Services are not simple  HTTP is reduced to a simple transport protocol for a large amount of XML metadata payload - does not make use of the rich functionality offered for HTTP envelopes  no mechanism for the caching of results
  47. 47. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 47December 2, 2016 RESTful Web Services  A RESTful web service (or RESTful Web API) is a simple web service implemented using HTTP  The definition of RESTful web service includes  the URI of the web service (e.g. http://wise.vub.be/course/) - different resources identified by unique URIs  the type (MIME) of data supported by the service - e.g. application/json, application/xml, ...  supported set of operations via HTTP methods - e.g. GET, POST, PUT, DELETE  One-to-one mapping between create, read, update, and delete (CRUD) operations and HTTP methods  POST (create), GET (read), PUT (update) and DELETE (delete)
  48. 48. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 48December 2, 2016 RESTful Web Service Example POST /users HTTP/1.1 Host: wise.vub.ac.be Content-Type: application/xml <?xml version="1.0"?> <user> <name>Roels</name> </user> create GET /users/Roels HTTP/1.1 Host: wise.vub.ac.be Accept: application/xml read PUT /users/Roels HTTP/1.1 Host: wise.vub.ac.be Content-Type: application/xml <?xml version="1.0"?> <user> <name>Signer</name> </user> update DELETE /users/Signer HTTP/1.1 Host: wise.vub.ac.be Accept: application/xml delete
  49. 49. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 49December 2, 2016 Really Simple Syndication (RSS)  Format that is used to read and write frequently updated information on the Web  e.g. blog entries  specific channels on news sites  ...  Special RSS readers or aggregators  Two main RSS variants  simple fork (Dave Winer) - RSS 0.92, RSS 0.93, RSS 0.94 and RSS 2.0  RDF fork - RSS 1.0  RSS feeds are represented as XML documents
  50. 50. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 50December 2, 2016 RSS Example  many other elements  <language>, <copyright>, <pubDate>, ... <?xml version="1.0" encoding="ISO-8859-1" ?> <rss version="2.0"> <channel> <title>W3Schools Home Page</title> <link>http://www.w3schools.com</link> <description>Free web building tutorials</description> <item> <title>RSS Tutorial</title> <link>http://www.w3schools.com/rss</link> <description>New RSS tutorial on W3Schools</description> </item> <item> <title>XML Tutorial</title> <link>http://www.w3schools.com/xml</link> <description>New XML tutorial on W3Schools</description> </item> ... </channel> ... </rss>
  51. 51. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 51December 2, 2016 Atom  Two related standards  Atom Syndication Format - similar to RSS - supports more content formats (e.g. videos) than RSS  Atom Publishing Protocol (APP) - HTTP-based approach for creating and editing Web resources - similar to the RESTful web service example shown earlier  Many web service interfaces are based on the Atom protocol  Microsoft Windows Live  OpenSocial  …
  52. 52. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 52December 2, 2016 Homework  Watch the video 'The Kindness of Strangers'  http://www.ted.com/talks/lang/eng/jonathan_zittrain_the_web_is_ a_random_act_of_kindness.html
  53. 53. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 53December 2, 2016 Exercise 8  AJAX and Google Maps
  54. 54. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 54December 2, 2016 References  James Governor et al., Web 2.0 Architectures, O'Reilly Media, May 2009  Chris Anderson, The Long Tail, Wired 12(10), 2004  http://www.wired.com/wired/archive/12.10/tail.html  Michael Wesch, The Machine is Us/ing Us  http://www.youtube.com/watch?v=NLlGopyXT_g  Jonathan Zittrain, The Kindness of Strangers, TEDGlobal 2009, Oxford, UK, July 2009  http://www.ted.com/talks/lang/eng/jonathan_zittrain_the_web_is_ a_random_act_of_kindness.html  Live Flight Tracker  http://www.flightradar24.com
  55. 55. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 55December 2, 2016 References  James Surowiecki, The Wisdom of Crowds, Anchor, August 2005
  56. 56. 2 December 2005 Next Lecture Semantic Web and Web 3.0

×