Web 2.0 Patterns and Technologies

Web Technologies
Web 2.0 Patterns and Technologies
Prof. Beat Signer
Department of Computer Science

Vrije Universiteit Brussel
beatsigner.com
2 December 2005
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 [https://en.wikipedia.org/wiki/File:Web_2.0_Map.svg]
- 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)
November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 2
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.

Web 2.0 Interaction
Web
information access
content creation
user-to-user Service-oriented
interaction Architecture (SOA)
collective intelligence

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

Web 2.0 and the Long Tail
▪ The term long tail has
been introduced by Chris
Anderson in 2004
▪ article about Amazon etc. Joe Simpson, 1988 Jon Krakauer, 1997
- '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
Video: The Machine is Us/ing Us

Web 2.0 Examples
▪ Wikis
▪ Blogs
▪ Media sharing sites
▪ Folksonomies
▪ Social networking sites
▪ Web-based communities
▪ Web applications
▪ ...

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, ...
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
▪ ...
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

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 albums (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

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

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?

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
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?
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, ...

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

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 enrol
▪ sometimes very complementary information
- e.g. blog with reviews about specific products together with Google
advertisements for these products
▪ Google advertising revenues

▪ 2020: USD 146.9 billion (total revenues USD 181.7 billion)
Video: The Kindness of Strangers

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

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
▪ ...

The Programmable Web
▪ Based on HTTP
▪ Data often encoded in XML
▪ Potential alternative data formats
▪ JavaScript Object Notation (JSON)
▪ plain text
▪ HTML
▪ binary formats

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

Asynchronous Partial Updates
Client Service Service 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, …

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
▪ …

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

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

AJAX Example
<html>
<body>
<script type="text/javascript">
function getTime() {
let xhr = XMLHttpRequest();
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>
<form name="testForm">
Input: <input type="text" name="input" onkeyup="getTime();" />
Time: <input type="text" name="time" />
</form>
</body>
</html>
▪ For more advanced AJAX examples see

▪ https://www.w3schools.com/js/js_ajax_intro.asp
Google Search (Suggest) AJAX Example

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
▪ WebSocket API might also be used for asynchronous
updates
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

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

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

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

Big Web Services
Service
Broker
UDDI
WSDL WSDL
SOAP
SOAP
Service Service
Requester Provider

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, ...

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

SOAP Request Message Example
<?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>
▪ predefined SOAP attributes

- encodingStyle: defines the used data types
- mustUnderstand: if set to 1 then the server has to understand the header

SOAP Response Message Example
<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>
▪ 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

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

RESTful Web Service Example
POST /users HTTP/1.1
Host: wise.vub.ac.be
Content-Type: application/xml
<user>
<name>Roels</name>
</user> create
GET /users/Roels HTTP/1.1

Accept: application/xml read
PUT /users/Roels HTTP/1.1

Content-Type: application/xml
<user>
<name>Signer</name>
</user> update
DELETE /users/Signer HTTP/1.1

Accept: application/xml delete

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

RSS Example
<?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>
▪ many other elements

▪ <language>, <copyright>, <pubDate>, ...

Homework
▪ Watch the video 'The Kindness of Strangers'
▪ https://www.ted.com/talks/lang/eng/jonathan_zittrain_the_web_is
_a_random_act_of_kindness.html

Exercise 8
▪ AJAX and Leaflet
▪ working with AJAX and the Google Maps API

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/lang/eng/jonathan_zittrain_the_web_is
_a_random_act_of_kindness.html
▪ James Surowiecki, The Wisdom of Crowds,
Anchor, August 2005
References
▪ Getting Started with AJAX
▪ https://dzone.com/refcardz/getting-started-ajax

Next Lecture
Semantic Web and Web 3.0
2 December 2005

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

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

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

Uploaded by

Copyright:

Available Formats

Web Technologies

Prof. Beat Signer

Department of Computer Science

- infoware (data management) rather than simply software

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 3

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 4

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 5

- 'Touching the Void' and

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 8

▪ Tool for delivering news

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 11

▪ Offers a powerful Web Service API

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 12

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 14

▪ Can we get too connected?

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 15

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 18

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 19

▪ Google advertising revenues

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 21

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 22

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 23

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 25

Client Service Service Server

▪ Rather than updating an entire resource (e.g. webpage),

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 26

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 27

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 28

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 29

▪ For more advanced AJAX examples see

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 31

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 33

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 34

▪ A service that conforms at least to the first five

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 36

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 37

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 38

▪ SOAP requests are often sent via HTTP POST requests

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 39

▪ predefined SOAP attributes

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 40

▪ note that also a response message can have a <Header> element

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 41

▪ One-to-one mapping between create, read, update, and

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 43

GET /users/Roels HTTP/1.1

PUT /users/Roels HTTP/1.1

DELETE /users/Signer HTTP/1.1

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 44

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 45

▪ many other elements

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 46

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 47

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 48

November 26, 2021 Beat Signer - Department of Computer Science - bsigner@vub.ac.be 50

You might also like