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

2 December 2005

Web TechnologiesWeb 2.0 Patterns and Technologies

Prof. Beat Signer

Department of Computer Science

Vrije Universiteit Brussel

http://www.beatsigner.com

http://www.beatsigner.com/

Beat Signer - Department of Computer Science - [email protected] 2December 2, 2016

Web 2.0

The term Web 2.0 wasintroduced by Tim O'Reillyat the Web 2.0 conferencein 2004 to describe a newgeneration 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]


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.


Web 2.0 Interaction

Service-oriented

Architecture (SOA)

information access

content creation

user-to-user

interaction

Web

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.

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


Video: The Machine is Us/ing Us


Web 2.0 Examples

Wikis

Blogs

Media sharing sites

Folksonomies

Social networking sites

Web-based communities

Mashups

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

Delicious: social bookmarking web service

Tag cloud visualisation


Facebook

Social networking site

Connect to friends and

share information info about current status

post messages on a user'spublic 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


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 fromany place around the worldwithin 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


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


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


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


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


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


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 enroll sometimes very complementary information

- e.g. blog with reviews about specific products together with Google

advertisements for these products


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

mashups

self-organising communities

collaborative tagging

viral marketing

...


The Programmable Web

Based on HTTP

Data often encoded in XML

Potential alternative data formats HTML

plain text

JavaScript Object Notation (JSON)

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 earlier

- Adobe Flash, Apache Flex and AIR

- Microsoft Silverlight

- Sun JavaFX

- JavaServer Faces (JSF)

- Mozilla XUL (XML User Interface Language)

- ...


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


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 createXMLHttpRequest() {if (typeof XMLHttpRequest != "undefined") {return new XMLHttpRequest();}else if (typeof ActiveXObject != "undefined") { // code for IE5 and IE6return 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>


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>


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

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


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

Provider

Service

Requester

Service

Broker

UDDI

WSDL

SOAP

SOAP

WSDL


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

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>


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 andtechnologies for realising Web Information Systems (WIS). This ranges from basicnetwork technologies and protocols to high level frameworks for the design and ...

</c:description></c:getCourseInfoResponse></soap:Body>

</soap:Envelope>


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 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.1Host: wise.vub.ac.beContent-Type: application/xml<?xml version="1.0"?><user><name>Roels</name></user> create

GET /users/Roels HTTP/1.1Host: wise.vub.ac.beAccept: application/xml read

PUT /users/Roels HTTP/1.1Host: wise.vub.ac.beContent-Type: application/xml<?xml version="1.0"?><user><name>Signer</name>

</user> update

DELETE /users/Signer HTTP/1.1Host: wise.vub.ac.beAccept: application/xml delete


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


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>


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

…


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


Exercise 8

AJAX and Google Maps


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

http://www.wired.com/wired/archive/12.10/tail.html

http://www.youtube.com/watch?v=NLlGopyXT_g

http://www.ted.com/talks/lang/eng/jonathan_zittrain_the_web_is_a_random_act_of_kindness.html

http://www.flightradar24.com/


References

James Surowiecki, The Wisdom of Crowds,

Anchor, August 2005

2 December 2005

Next LectureSemantic Web and Web 3.0

Education

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