Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Beat Signer
PRO
November 21, 2022

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

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

Beat Signer
PRO

November 21, 2022
Tweet

More Decks by Beat Signer

Other Decks in Education

Transcript

  1. 2 December 2005
    Web Technologies
    Web 2.0 Patterns and Technologies
    Prof. Beat Signer
    Department of Computer Science
    Vrije Universiteit Brussel
    beatsigner.com

    View Slide

  2. Beat Signer - Department of Computer Science - [email protected] 2
    November 22, 2022
    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 (data management) rather than simply software
    ▪ collective intelligence via social resource and knowledge sharing
    ▪ 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)
    [https://en.wikipedia.org/wiki/File:Web_2.0_Map.svg]

    View Slide

  3. Beat Signer - Department of Computer Science - [email protected] 3
    November 22, 2022
    Main Web 2.0 Ingredients
    ▪ Social Web
    ▪ end user as a participant and content creator (prosumer)
    ▪ democracy
    ▪ Rich Internet Applications (RIAs)
    ▪ bring the desktop to the browser
    ▪ highly interactive applications (e.g. with drag and drop)
    ▪ based on AJAX etc.
    ▪ Service Oriented Architectures (SOAs)
    ▪ enable the sharing of information and services between different
    Web 2.0 applications
    ▪ Web Services, RSS, mashups, etc.

    View Slide

  4. Beat Signer - Department of Computer Science - [email protected] 4
    November 22, 2022
    Web 2.0 Interaction
    Service-oriented
    Architecture (SOA)
    information access
    content creation
    user-to-user
    interaction
    Web
    collective intelligence

    View Slide

  5. Beat Signer - Department of Computer Science - [email protected] 5
    November 22, 2022
    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
    ... ...

    View Slide

  6. Beat Signer - Department of Computer Science - [email protected] 6
    November 22, 2022
    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 web content made up by small sites
    ▪ provide tools to address the long tail and not just the head
    Joe Simpson, 1988 Jon Krakauer, 1997

    View Slide

  7. Beat Signer - Department of Computer Science - [email protected] 7
    November 22, 2022
    Video: The Machine is Us/ing Us

    View Slide

  8. Beat Signer - Department of Computer Science - bsi[email protected] 8
    November 22, 2022
    Web 2.0 Examples
    ▪ Wikis
    ▪ Blogs
    ▪ Media sharing sites
    ▪ Folksonomies
    ▪ Social networking sites
    ▪ Web-based communities
    ▪ Web applications
    ▪ ...

    View Slide

  9. Beat Signer - Department of Computer Science - [email protected] 9
    November 22, 2022
    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, ...

    View Slide

  10. Beat Signer - Department of Computer Science - [email protected] 10
    November 22, 2022
    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
    ▪ ...

    View Slide

  11. Beat Signer - Department of Computer Science - [email protected] 11
    November 22, 2022
    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

    View Slide

  12. Beat Signer - Department of Computer Science - [email protected] 12
    November 22, 2022
    Flickr
    ▪ Image hosting and sharing
    website
    ▪ Image repository that is
    often used by bloggers
    ▪ Managing images
    ▪ single photostream
    ▪ collaborative tagging
    - user-generated taxonomy (folksonomy)
    - one of the first websites that implemented tag clouds
    ▪ grouping in albums and collections
    - note that an image may be added to multiple albums
    ▪ Offers a powerful Web Service API

    View Slide

  13. Beat Signer - Department of Computer Science - [email protected] 13
    November 22, 2022
    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
    ▪ Instagram: tagging of photos and videos
    ▪ Tag cloud visualisation

    View Slide

  14. Beat Signer - Department of Computer Science - [email protected] 14
    November 22, 2022
    Facebook
    ▪ Social networking site
    ▪ Connect to friends and
    share information
    ▪ post messages on a user's
    public wall
    ▪ send individual messages
    ▪ share photos
    ▪ Easy to add individual applications (one platform)
    ▪ Copyright issues
    ▪ what happens with content that has been uploaded to Facebook?
    ▪ Privacy issues

    View Slide

  15. Beat Signer - Department of Computer Science - [email protected] 15
    November 22, 2022
    Twitter
    ▪ Micro-blogging and social
    networking service
    ▪ Small messages (tweets)
    can be posted to a user
    profile
    ▪ reach millions of users from
    any place around the world
    within seconds
    - used in protests and politics, emergencies, ...
    ▪ Can we get too connected?

    View Slide

  16. Beat Signer - Department of Computer Science - [email protected] 16
    November 22, 2022
    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
    ▪ Instagram influencers

    View Slide

  17. Beat Signer - Department of Computer Science - [email protected] 17
    November 22, 2022
    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, ...
    ▪ What about the metaverse?

    View Slide

  18. Beat Signer - Department of Computer Science - [email protected] 18
    November 22, 2022
    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, ...

    View Slide

  19. Beat Signer - Department of Computer Science - [email protected] 19
    November 22, 2022
    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

    View Slide

  20. Beat Signer - Department of Computer Science - [email protected] 20
    November 22, 2022
    Google Ads and Google AdSense
    ▪ Highly customised delivery
    of advertisements
    ▪ shows advertisements delive-
    red via Google Ads
    ▪ New models for payment
    ▪ pay-per-click in addition to
    pay-per-impression
    ▪ Any website owner can enrol to AdSense
    ▪ sometimes very complementary information
    - e.g. blog with reviews about specific products together with Google
    advertisements for these products
    ▪ Google advertising revenues
    ▪ 2021: USD 209.49 billion (total revenues USD 257.7 billion)

    View Slide

  21. Beat Signer - Department of Computer Science - [email protected] 21
    November 22, 2022
    Video: The Kindness of Strangers

    View Slide

  22. Beat Signer - Department of Computer Science - [email protected] 22
    November 22, 2022
    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

    View Slide

  23. Beat Signer - Department of Computer Science - [email protected] 23
    November 22, 2022
    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
    ▪ self-organising communities
    ▪ collaborative tagging
    ▪ viral marketing
    ▪ ...

    View Slide

  24. Beat Signer - Department of Computer Science - [email protected] 24
    November 22, 2022
    The Programmable Web
    ▪ Based on HTTP
    ▪ Data often encoded in XML
    ▪ Potential alternative data formats
    ▪ JavaScript Object Notation (JSON)
    ▪ plain text
    ▪ HTML
    ▪ binary formats

    View Slide

  25. Beat Signer - Department of Computer Science - [email protected] 25
    November 22, 2022
    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 in the past
    - Microsoft Silverlight
    - Sun JavaFX
    - JavaServer Faces (JSF)
    - ...
    ▪ nowadays often based on HTML5 and Open Web Platform APIs
    - Drag and Drop
    - Canvas 2D
    - …

    View Slide

  26. Beat Signer - Department of Computer Science - [email protected] 26
    November 22, 2022
    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

    View Slide

  27. Beat Signer - Department of Computer Science - [email protected] 27
    November 22, 2022
    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)
    ▪ AJAX is one possibility how the partial update of
    resources can be realised over the Web

    View Slide

  28. Beat Signer - Department of Computer Science - [email protected] 28
    November 22, 2022
    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

    View Slide

  29. Beat Signer - Department of Computer Science - [email protected] 29
    November 22, 2022
    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

    View Slide

  30. Beat Signer - Department of Computer Science - [email protected] 30
    November 22, 2022
    AJAX Example


    <br/>function getTime() {<br/>let xhr = XMLHttpRequest();<br/>xhr.onreadystatechange=function() {<br/>if (xhr.readyState == 4 && xhr.status == 200) {<br/>document.testForm.time.value=xhr.responseText;<br/>}<br/>}<br/>xhr.open("GET","time.php",true);<br/>xhr.send(null);<br/>}<br/>

    Input:
    Time:



    View Slide

  31. Beat Signer - Department of Computer Science - [email protected] 31
    November 22, 2022
    AJAX Example …
    ▪ Alternative use of more recent Fetch API
    ▪ For more advanced AJAX examples see
    ▪ https://www.w3schools.com/js/js_ajax_intro.asp
    fetch(“https://example.com/time.php”)
    .then((response) => response.json())
    .then((data) => console.log(data));

    View Slide

  32. Beat Signer - Department of Computer Science - [email protected] 32
    November 22, 2022
    Google Search (Suggest) AJAX Example

    View Slide

  33. Beat Signer - Department of Computer Science - [email protected] 33
    November 22, 2022
    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
    ▪ WebSocket API might also be used for asynchronous
    updates

    View Slide

  34. Beat Signer - Department of Computer Science - [email protected] 34
    November 22, 2022
    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

    View Slide

  35. Beat Signer - Department of Computer Science - [email protected] 35
    November 22, 2022
    Representational State Transfer (REST)
    ▪ REST is an architectural style for distributed hypermedia
    systems requiring 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

    View Slide

  36. Beat Signer - Department of Computer Science - [email protected] 36
    November 22, 2022
    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

    View Slide

  37. Beat Signer - Department of Computer Science - [email protected] 37
    November 22, 2022
    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

    View Slide

  38. Beat Signer - Department of Computer Science - [email protected] 38
    November 22, 2022
    Big Web Services
    Service
    Provider
    Service
    Requester
    Service
    Broker
    UDDI
    WSDL
    SOAP
    SOAP
    WSDL

    View Slide

  39. Beat Signer - Department of Computer Science - [email protected] 39
    November 22, 2022
    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, ...

    View Slide

  40. Beat Signer - Department of Computer Science - [email protected] 40
    November 22, 2022
    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 element
    which contains
    ▪ an optional element
    ▪ a element
    - remote procedure call or response information
    ▪ SOAP requests are often sent via HTTP POST requests

    View Slide

  41. Beat Signer - Department of Computer Science - bsi[email protected] 41
    November 22, 2022
    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

    soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">

    soap:mustUnderstand="1">pellens



    4011474FNR



    View Slide

  42. Beat Signer - Department of Computer Science - [email protected] 42
    November 22, 2022
    SOAP Response Message Example
    ▪ note that also a response message can have a element
    ▪ the body contains a element if something went wrong on
    the server side

    soap:encodingStyle="http://www.w3.org/2001/12/soap-encoding">


    Web Information Systems
    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
    ...




    View Slide

  43. Beat Signer - Department of Computer Science - [email protected] 43
    November 22, 2022
    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

    View Slide

  44. Beat Signer - Department of Computer Science - [email protected] 44
    November 22, 2022
    RESTful Web Services
    ▪ A RESTful web service (or RESTful Web API) is a simple
    web service implemented using HTTP
    ▪ The definition of a 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)

    View Slide

  45. Beat Signer - Department of Computer Science - [email protected] 45
    November 22, 2022
    RESTful Web Service Example
    POST /users HTTP/1.1
    Host: wise.vub.ac.be
    Content-Type: application/xml


    Roels
    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


    Signer
    update
    DELETE /users/Signer HTTP/1.1
    Host: wise.vub.ac.be
    Accept: application/xml delete

    View Slide

  46. Beat Signer - Department of Computer Science - [email protected] 46
    November 22, 2022
    Really Simple Syndication (RSS)
    ▪ Format (in XML) 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

    View Slide

  47. Beat Signer - Department of Computer Science - [email protected] 47
    November 22, 2022
    RSS Example
    ▪ many other elements
    ▪ , , , ...



    W3Schools Home Page
    http://www.w3schools.com
    Free web building tutorials

    RSS Tutorial
    http://www.w3schools.com/rss
    New RSS tutorial on W3Schools


    XML Tutorial
    http://www.w3schools.com/xml
    New XML tutorial on W3Schools

    ...

    ...

    View Slide

  48. Beat Signer - Department of Computer Science - [email protected] 48
    November 22, 2022
    Homework
    ▪ Watch the video 'The Kindness of Strangers'
    ▪ https://www.ted.com/talks/jonathan_zittrain_the_web_as_random
    _acts_of_kindness

    View Slide

  49. Beat Signer - Department of Computer Science - [email protected] 49
    November 22, 2022
    Exercise 8
    ▪ AJAX and Leaflet
    ▪ working with AJAX and the Google Maps API

    View Slide

  50. Beat Signer - Department of Computer Science - [email protected] 50
    November 22, 2022
    References
    ▪ James Governor et al., Web 2.0 Architectures,
    O'Reilly Media, May 2009
    ▪ Chris Anderson, The Long Tail, Wired 12(10), 2004
    ▪ https://www.wired.com/2004/10/tail/
    ▪ Michael Wesch, The Machine is Us/ing Us
    ▪ https://www.youtube.com/watch?v=NLlGopyXT_g
    ▪ Jonathan Zittrain, The Kindness of Strangers,
    TEDGlobal 2009, Oxford, UK, July 2009
    ▪ https://www.ted.com/talks/jonathan_zittrain_the_web_as_random
    _acts_of_kindness
    ▪ James Surowiecki, The Wisdom of Crowds,
    Anchor, August 2005

    View Slide

  51. Beat Signer - Department of Computer Science - [email protected] 51
    November 22, 2022
    References
    ▪ Getting Started with AJAX
    ▪ https://dzone.com/refcardz/getting-started-ajax

    View Slide

  52. 2 December 2005
    Next Lecture
    Semantic Web and Web 3.0

    View Slide