Web 2.0 Patterns and Technologies - Web Technologies (1019888BNR)
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. 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. 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. 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. 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. 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. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 7December 2, 2016
Video: The Machine is Us/ing Us
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 24December 2, 2016
Video: The Kindness of Strangers
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 35December 2, 2016
Google Search (Suggest) AJAX Example
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 53December 2, 2016
Exercise 8
AJAX and Google Maps
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. Beat Signer - Department of Computer Science - bsigner@vub.ac.be 55December 2, 2016
References
James Surowiecki, The Wisdom of Crowds,
Anchor, August 2005