About Jack Zheng
Faculty of IT at Kennesaw.edu
Web 2.0
IT 5443 Web Technology
Jack G. Zheng
Spring 2019
Overview
What is Web 2.0?
Web 2.0 ideas and aspects
Web 2.0 from a behavior aspect
Web 2.0 from a technology aspect we will
focus on rich user experience and
particularly on AJAX
2
Web Evolution Stages
3
Stage
Beginning Time
Features
Pre-web
Before 1990
All kinds of Internet applications with its specific
protocols
Early/simple web
Early 1990s
Collection of interlinking web pages. Document
based information retrieval.
Dynamic web
Mid 1990s
More advanced dynamic processing on both server
and client side. More functional applications
emerged.
Web as a platform
21st century
A fundamental platform to support all kinds of
services and integrate various kinds of systems.
Web 2.0
Since about
2006
Services that support massive user participation
and contribution.
Redefined client/server communication style.
Greater advancement in software-as-a-service.
Mobile Web
Since about 2010 Major renovation of user experience design and
application architectures.
Major client-side advancement.
* Note: each later stage does not
replace the early stage at this time.
They only signal the beginning of
some drastically new developments.
The applications of each stage are
still widely used today.
Web 2.0
A general and loose concept for recent advancements (roughly from
2005) of the World Wide Web
http://www.techterms.com/definition/web20
The debate of term
http://computer.howstuffworks.com/web-204.htm
4
"Web 2.0 is term that was introduced in 2004 and refers to the
second generation of the World Wide Web. The term "2.0" comes
from the software industry, where new versions of software
programs are labeled with an incremental version number. Like
software, the new generation of the Web includes new features
and functionality that was not available in the past. However, Web
2.0 does not refer to a specific version of the Web, but rather a
series of technological improvements."
Why to study Web 2.0?
Web 2.0 is a phenomenon that fundamental impacts user and
organizational behaviors in many aspects (which directly contributes to
the emergent of many "2.0" terms)
How web 2.0 changed the way of traditional way of business functions?
Retail, Advertising and marketing, CRM, HR, Media, Journalism, Publishing,
Software, Stock trading, Banking, Retail, Education, Enterprise,
Government
Businesses need to understand it and embrace the new environment,
and even create new models and businesses.
5
http://starseoservices.com/se
o-services-offered/social-
media-marketing/web-2-0-
marketing/
What does the "2.0"
mean in many of
these 2.0 terms?
Conceptual Models
Conceptual models or frameworks try to view
the Web 2.0 phenomenon systematically and
holistically. They help people understand the big
picture by categorizing and associating different
pieces of Web 2.0.
We will take a look at
O'Reilly's original principles
Anderson's iceberg model
Instructor's view
More: https://www.pinterest.com/rrodrigo/defining-
web-2-0/
6
O'Reilly's Original Ideas
http://www.oreilly.com/pub/a/web2/archive/what
-is-web-20.html (please read it for detailed
descriptions)
1. The Web As Platform
2. Harnessing Collective Intelligence
3. Data is the Next Intel Inside
4. End of the Software Release Cycle
5. Lightweight Programming Models
6. Software Above the Level of a Single Device
7. Rich User Experiences
7
Instructor's comment:
O'Reilly's principles or ideas are somewhat descriptive than
definitive. And they are a bit mixed from different perspectives.
The following two models provide stronger logical relationships.
Iceberg Model
Paul Anderson's iceberg
model
6 major ideas
Supported by newer web
technologies and standards
Implemented in commonly
seen services
Read more in his book
http://techlun.ch/about-my-
book-web-2-0-and-beyond/
The whole book is based on
this model
Or
http://ictlogy.net/bibliograph
y/reports/projects.php?idp=
775
8
http://commons.wikimedia.org/wiki/File:Web-20-iceberg-model-from-
Web20andBeyond-book.jpg
Major Aspects of Web 2.0
9
Behavior focus
Technology focus
Ideas
1. User participation/contribution
2. Socialization
3. Collective intelligence
4. Rich user experience
1. Rich user experience
2. Web as a platform
3. Service web
Applications
and services
New applications that implement basic
ideas and support new user behaviors.
- Wiki, Blog, SNS, etc.
Key technologies and applications
- AJAX, Web Services, etc.
- Mash-up, streaming, push, sync
Business
Model
How the Web transformed traditional
businesses and created new business
opportunities?
- This is not limited to commercial
businesses, but also many other
sectors like education, government,
etc.;
-
it also impacts organization's
internal behaviors. (enterprise 2.0).
How is the development and delivery
of these services and products
changed?
- Software as a Service
- Platform provider
Instructor's
view
One-Term Characterization
If using one term to characterize Web 2.0 (from a
behavior perspective)
I will choose "social web", which depicts the Web as a
social (interaction) platform.
Web 1.0 is information web, and Web 2.0 is social web.
Other ideas and behaviors are built upon this
interaction and socialization
Other key terms
Web of people
Social and collaborative web
Read/write web
Collective intelligence/wisdom of the crowds
Network efffect
10
How is Web 2.0 different?
11
http://blogs.voices.com/thebiz/2006/09/web_20_definition.html
User interactions
and socializations
http://yarikson.wordpress.com/2008/04/24/web-20-generalization
User interactions
and socializations
Social Media
"Social Media is a group of Internet-based applications that build
on the ideological and technological foundations of Web 2.0, and
that allow the creation and exchange of User Generated
Content."
Kaplan and Haenlein (2010)
http://www.michaelhaenlein.com/Publications/Kaplan,%20Andreas%
20-%20Users%20of%20the%20world,%20unite.pdf
Social media, broadly speaking, is a term that basically
corresponds to the behavioral aspects of Web 2.0, with an
emphasis on (computer technology mediated) "social network"
(which is more appealing to businesses and investors) as a
publication and broadcast medium.
This is the instructor's understanding at the moment
See a diagram on the next slide
Relatively inexpensive and widely accessible software tools that
enable anyone to publish and access information.
13
Web 2.0 vs. Social Media
14
Social media that fall
outside web,
particularly with
mobile apps?
Web 2.0 apps that are
not so "social". For
example, online
collaboration tools,
crowdsourcing, etc.
Social media backed
by Web 2.0 ideas and
technologies.
Social media
Web 2.0
(behavior
aspect)
User Participation and Contribution
User generated content is a common term to describe
participation and contribution
The read/write web
Content can be of many types
Writings: articles, reviews, discussions, messages, comparisons
(http://socialcompare.com)
Media: photos, videos, music
Professional: courseware, news, reports, tutorial
Actions: clicking, viewing, etc.
Other: reviews, opinions, ratings, emotions, etc.
Content can be generated
Explicitly and purposefully, where the user knowingly makes a
contribution, e.g. writing a blog, uploading a photo
Implicitly, or as a result of participation in normal online actions (and
therefore collected implicitly) like sharing, liking, voting, searching,
commenting, etc.
15
Participation beyond Content
Crowdsourcing
Services and resources provided by participants
Collective services organized by the "middle
man"
16
https://twitter.com/Wet
paintMENA/status/585
810382905675777
Collective Intelligence
Collective intelligence (wisdom of the crowds)
The aggregated information or knowledge that emerges from the
independent inputs and contributions.
Shared or group intelligence that emerges from the social behaviors
like collaboration, collective efforts, and competition of many
individuals
Example applications: recommendation, categorization, voting,
prediction, trending, collaborative work, etc.
Three levels of collective intelligence
Implicit aggregation: independent actions do not purposefully aim to
create the collective knowledge, e.g., collaborative filtering
Explicit aggregation: independent actions purposefully aim to create
the collective knowledge by simple aggregation, e.g., folksonomy,
collaborative tagging, social tagging, social bookmarking
Explicit collaboration: independent actions purposefully aim to
create the collective knowledge but beyond just simple aggregation,
e.g., Wikipedia, team blog, collaborative editing (Google Docs)
17
Power Law of Participation
18
http://ross.typepad.com/blog/2006
/04/power_law_of_pa.html
Network Effect
An economic term, generally means the increase in value to the existing users
of a service as more and more people use it.
In other words, the more people use it, the more value (exponential growth) everybody
has, then the service as a whole is more valuable.
https://en.wikipedia.org/wiki/Network_effect
http://www.businessinsider.com/network-effects-2011-5
The value is created mainly by
Interaction of users;
Collective value created from user base (content etc.).
Implication
The value of a product/service to one user depends on how many other users there are.
A new product or service is more likely to be successful if it gains traction and momentum
through early adoption, rather than being a superior product.
A lot of new technology startups focus on user base, rather than being profitable, at the
beginning.
19
Image from
http://www.kinesisinc.com/
using-networks-to-grow-
your-business/
Network Effects Business Models
Online community based
Either open or focused community (community of practice)
Example: Ning
Social attention business
Content sharing, e.g. YouTube, Flikr
Social networking, e.g. Facebook, LinkedIn
Intermediary/brokerage
Marketplace, e.g. Alibaba
Crowdsourcing
O2O (online to offline)
Many of these businesses are facilitated by Web 2.0
technologies (and mobile technologies) building
platforms to support the "network" and use social
media for customer engagement
20
The Technology Aspect - Web as
a Platform
One of the goals of Web 2.0 is to facilitate the use of the
Web as a development platform.
Traditionally, software was developed for specific
platforms, such as Windows, Linux, or Mac OS.
Today, developers build Web-based applications that run
on the Web, that are completely independent of the
user's actual computer operating system.
http://www.webopedia.com/TERM/W/web_as_a_platform
.html
The key for this vision
Rich user experience
The web as a communication means (for applications and
software modules)
21
Major Web 2.0 Technologies
Key Aspects
Key Technologies
Rich user experience:
more responsive and interactive;
brings desktop experience to the
web.
Client (JavaScript) focus: AJAX, HTML 5
Service web: services are the
building block for the underlying
communication for web
applications.
Semi-structured data: XML (RSS), JSON
Web services: SOAP, RESTful
(Light weight) Web APIs: REST, JavaScript
Application Architecture:
architectural changes brought by
the new technology
AJAX, SPA, MVC, four tier
Frameworks:
all kinds of web frameworks at
different levels
Programming frameworks: jQuery, etc.
Architecture frameworks: MVC, etc.
Application frameworks: CMS, etc.
UI frameworks: Bootstrap, etc.
22
Rich User Experience
Rich user experience is both from behavior and
technology perspective
Behavior
User's interactions with websites share common
properties as they use a desktop
https://nicholasleach.wordpress.com/2012/03/30/ric
h-user-experience/
When extended to the mobile device, use of
gestures
http://uxmag.com/articles/gestures-animations-the-
pillars-of-mobile-design
Technology
AJAX, touchscreen, etc.
23
Rich User Experience
RUE means
Brings desktop experience to the web
Multitasking, window
Beyond conventional point-and-click UI
More responsive and interactive user interfaces
Multiple smooth interaction methods
Simplicity and efficiency
Aesthetics, elegance, visual style and effects
http://www.slideshare.net/Luristic/the-anatomy-of-rich-user-
experience
Key technologies
HTML 5
AJAX (Asynchronous JavaScript and XML), SPA
24
"When technology becomes a
commodity by satisfying basic needs,
user experience dominates."
HTML 5
HTML 5 components
New HTML elements and attributes
CSS3
JavaScript API
The significance of HTML 5 for RUE
HTML5 introduces a paradigm shift with new semantic elements
provided for JavaScript a pretty solid working set of tools and effects
JavaScript is still the tool hands all magic
Minimizes dependency on foreign components like plug-ins
Cross platform
Enhance client side processing (data storage, graphic processing,
etc.)
http://radar.oreilly.com/2011/07/what-is-html5.html
http://www.methodsandtools.com/archive/archive.php?id=125
Full list of improvement
http://www.w3.org/TR/html5-diff/
25
AJAX
26
AJAX (Asynchronous JavaScript
and XML) is a group of
interrelated web development
techniques used on the client-
side to create interactive web
applications.
Despite the name, the use of XML
is not actually required, nor do the
requests need to be
asynchronous.
With Ajax, web applications can
communicate with servers in the
background without a complete
page loading after every
request/response cycle.
http://www.adaptivepath.com/ide
as/ajax-new-approach-web-
applications/
Traditional Model
27
http://www.websiteoptimization.com/secrets/ajax/8-1-ajax-pattern.html
The server prepares the whole page.
The client does not generate
views/presentations (HTML/CSS).
Synchronous
communications
feature sequential
request/response
cycles, one after
another
Ajax Model
28
With Ajax, web applications can communicate with servers in the
background without a complete page loading after every
request/response cycle.
http://www.websiteoptimization.com/secrets/ajax/8-1-ajax-pattern.html
The server prepares partial
pages (partial HTML) or just
data (XML or JSON).
The client generates
views/presentations and
update content (partial
page) by manipulating DOM.
Asynchronous
communications
feature
independent
request/response
cycles
A Typical Example
29
https://www.google.com search term recommendation is a typical
AJAX application that relies on continuous server communication from
the backend. Traditional web communication style cannot do this.
A set of requests have been made to
get JSON data from the server as I
type in the search term box. Observe
the "q" parameter in all URLs.
Use Chrome's developer tools to view
network communications while typing
the search terms.
Major AJAX Elements
Standards-based presentation using HTML and
CSS
Asynchronous operations and communications
using XMLHttpRequest (AJAX engine)
Data interchange and manipulation using XML,
JSON, or preformatted HTML
Dynamic display and interaction through the
Document Object Model
JavaScript binding everything together
30
XHR (XMLHttpRequest)
31
XMLHttpRequest (XHR) is an API available to
web browser scripting languages such as
JavaScript.
XHR is used to send HTTP or HTTPS requests
to a web server and load the server response
data back into the script, in an asynchronous
way.
See the diagram on slide 6 and 7 to compare
synchronous and asynchronous communication
It is the AJAX "engine" or the AJAX
communication layer mentioned previously.
https://en.wikipedia.org/wiki/XMLHttpRequest
Response Format
32
The response from the asynchronous call
does not have to be XML
HTML (AHAH or AJAH)
Server returns the preformatted HTML/CSS as a
partial page
JSON (AJAJ, or Asynchronous JavaScript
and JSON
JSON has gain popularity for the past years to be
used as an exchange format
https://en.wikipedia.org/wiki/AJAJ
JavaScript
33
JS plays a central role in AJAX and ties
everything together
Manages the AJAX communication through XHR
Triggers AJAX requests in page loading or user
actions (clicking, mouse moving, typing, etc.)
Update the page dynamically through DOM
No complete page refresh
Only designated section update
AJAX's Impact on RUE
More efficient and faster communications between server and client.
Enables more frequent "thin" communications
Applications that rely on frequent updates are made possible: automatic completion, auto
content update, etc.
Smoother and continuous user interaction (user experience)
Reduces complete page refreshes and transitions
Partial page loading; reducing unnecessary page refreshes, less web page transitioning
and less wait time
Multi-path navigation/action: less navigation interruptions.
Improves operational efficiency, enables multi-tasking and immediate action feedback
More like applications, building rich interaction/interface: more responsive and
interactive; brings desktop experience to the web
Advanced interaction actions, such as drag and drop, mouse scroll, etc.
Desktop GUI like dynamic interfaces are possible, such as MDI (multiple div(ision)
interface) which is similar to MDI (multiple document interface) or TDI (tabbed document
interface) in desktop applications.
In-page navigation: a web application becomes less dependent on navigations between
web pages. A web page becomes more like an application holder that many tasks can be
completed within the page. Page transitioning is significantly decreased and navigation
path is less complex.
Multi tasking is possible in the same page.
34
Mobile Computing
Mobile computing has drive the Web 2.0
businesses to a new level
Greatly expand the usage from desktop to
mobile any time
Convenient devices and platforms with
embedded and integrated gadgets (camera,
sensors, microphone, lighting, etc.)
Although many mobile apps are OS dependent
native apps, they use web technologies to
communicate with servers.
35
Summary
Web 1.0 the Web of information
The need for access: the need to get information and
knowledge from the web; the need to accomplish tasks
on the web.
Web 2.0 the Web of people
The need for participation: the need for socialization on
the web; the need to make contributions.
Web 3.0? the Web of things
What do you anticipate for web 3.0?
Instructor's earlier take:
http://cubicle-h.blogspot.com/2009/07/web-30-in-my-
mind.html
Internet (Web) of things? Things generated content
https://www.youtube.com/watch?v=F_nbUizGeEY
36
IT 5443 Web Technology
Jack G. Zheng
Spring 2019
Overview
What is Web 2.0?
Web 2.0 ideas and aspects
Web 2.0 from a behavior aspect
Web 2.0 from a technology aspect we will
focus on rich user experience and
particularly on AJAX
2
Web Evolution Stages
3
Stage
Beginning Time
Features
Pre-web
Before 1990
All kinds of Internet applications with its specific
protocols
Early/simple web
Early 1990s
Collection of interlinking web pages. Document
based information retrieval.
Dynamic web
Mid 1990s
More advanced dynamic processing on both server
and client side. More functional applications
emerged.
Web as a platform
21st century
A fundamental platform to support all kinds of
services and integrate various kinds of systems.
Web 2.0
Since about
2006
Services that support massive user participation
and contribution.
Redefined client/server communication style.
Greater advancement in software-as-a-service.
Mobile Web
Since about 2010 Major renovation of user experience design and
application architectures.
Major client-side advancement.
* Note: each later stage does not
replace the early stage at this time.
They only signal the beginning of
some drastically new developments.
The applications of each stage are
still widely used today.
Web 2.0
A general and loose concept for recent advancements (roughly from
2005) of the World Wide Web
http://www.techterms.com/definition/web20
The debate of term
http://computer.howstuffworks.com/web-204.htm
4
"Web 2.0 is term that was introduced in 2004 and refers to the
second generation of the World Wide Web. The term "2.0" comes
from the software industry, where new versions of software
programs are labeled with an incremental version number. Like
software, the new generation of the Web includes new features
and functionality that was not available in the past. However, Web
2.0 does not refer to a specific version of the Web, but rather a
series of technological improvements."
Why to study Web 2.0?
Web 2.0 is a phenomenon that fundamental impacts user and
organizational behaviors in many aspects (which directly contributes to
the emergent of many "2.0" terms)
How web 2.0 changed the way of traditional way of business functions?
Retail, Advertising and marketing, CRM, HR, Media, Journalism, Publishing,
Software, Stock trading, Banking, Retail, Education, Enterprise,
Government
Businesses need to understand it and embrace the new environment,
and even create new models and businesses.
5
http://starseoservices.com/se
o-services-offered/social-
media-marketing/web-2-0-
marketing/
What does the "2.0"
mean in many of
these 2.0 terms?
Conceptual Models
Conceptual models or frameworks try to view
the Web 2.0 phenomenon systematically and
holistically. They help people understand the big
picture by categorizing and associating different
pieces of Web 2.0.
We will take a look at
O'Reilly's original principles
Anderson's iceberg model
Instructor's view
More: https://www.pinterest.com/rrodrigo/defining-
web-2-0/
6
O'Reilly's Original Ideas
http://www.oreilly.com/pub/a/web2/archive/what
-is-web-20.html (please read it for detailed
descriptions)
1. The Web As Platform
2. Harnessing Collective Intelligence
3. Data is the Next Intel Inside
4. End of the Software Release Cycle
5. Lightweight Programming Models
6. Software Above the Level of a Single Device
7. Rich User Experiences
7
Instructor's comment:
O'Reilly's principles or ideas are somewhat descriptive than
definitive. And they are a bit mixed from different perspectives.
The following two models provide stronger logical relationships.
Iceberg Model
Paul Anderson's iceberg
model
6 major ideas
Supported by newer web
technologies and standards
Implemented in commonly
seen services
Read more in his book
http://techlun.ch/about-my-
book-web-2-0-and-beyond/
The whole book is based on
this model
Or
http://ictlogy.net/bibliograph
y/reports/projects.php?idp=
775
8
http://commons.wikimedia.org/wiki/File:Web-20-iceberg-model-from-
Web20andBeyond-book.jpg
Major Aspects of Web 2.0
9
Behavior focus
Technology focus
Ideas
1. User participation/contribution
2. Socialization
3. Collective intelligence
4. Rich user experience
1. Rich user experience
2. Web as a platform
3. Service web
Applications
and services
New applications that implement basic
ideas and support new user behaviors.
- Wiki, Blog, SNS, etc.
Key technologies and applications
- AJAX, Web Services, etc.
- Mash-up, streaming, push, sync
Business
Model
How the Web transformed traditional
businesses and created new business
opportunities?
- This is not limited to commercial
businesses, but also many other
sectors like education, government,
etc.;
-
it also impacts organization's
internal behaviors. (enterprise 2.0).
How is the development and delivery
of these services and products
changed?
- Software as a Service
- Platform provider
Instructor's
view
One-Term Characterization
If using one term to characterize Web 2.0 (from a
behavior perspective)
I will choose "social web", which depicts the Web as a
social (interaction) platform.
Web 1.0 is information web, and Web 2.0 is social web.
Other ideas and behaviors are built upon this
interaction and socialization
Other key terms
Web of people
Social and collaborative web
Read/write web
Collective intelligence/wisdom of the crowds
Network efffect
10
How is Web 2.0 different?
11
http://blogs.voices.com/thebiz/2006/09/web_20_definition.html
User interactions
and socializations
http://yarikson.wordpress.com/2008/04/24/web-20-generalization
User interactions
and socializations
Social Media
"Social Media is a group of Internet-based applications that build
on the ideological and technological foundations of Web 2.0, and
that allow the creation and exchange of User Generated
Content."
Kaplan and Haenlein (2010)
http://www.michaelhaenlein.com/Publications/Kaplan,%20Andreas%
20-%20Users%20of%20the%20world,%20unite.pdf
Social media, broadly speaking, is a term that basically
corresponds to the behavioral aspects of Web 2.0, with an
emphasis on (computer technology mediated) "social network"
(which is more appealing to businesses and investors) as a
publication and broadcast medium.
This is the instructor's understanding at the moment
See a diagram on the next slide
Relatively inexpensive and widely accessible software tools that
enable anyone to publish and access information.
13
Web 2.0 vs. Social Media
14
Social media that fall
outside web,
particularly with
mobile apps?
Web 2.0 apps that are
not so "social". For
example, online
collaboration tools,
crowdsourcing, etc.
Social media backed
by Web 2.0 ideas and
technologies.
Social media
Web 2.0
(behavior
aspect)
User Participation and Contribution
User generated content is a common term to describe
participation and contribution
The read/write web
Content can be of many types
Writings: articles, reviews, discussions, messages, comparisons
(http://socialcompare.com)
Media: photos, videos, music
Professional: courseware, news, reports, tutorial
Actions: clicking, viewing, etc.
Other: reviews, opinions, ratings, emotions, etc.
Content can be generated
Explicitly and purposefully, where the user knowingly makes a
contribution, e.g. writing a blog, uploading a photo
Implicitly, or as a result of participation in normal online actions (and
therefore collected implicitly) like sharing, liking, voting, searching,
commenting, etc.
15
Participation beyond Content
Crowdsourcing
Services and resources provided by participants
Collective services organized by the "middle
man"
16
https://twitter.com/Wet
paintMENA/status/585
810382905675777
Collective Intelligence
Collective intelligence (wisdom of the crowds)
The aggregated information or knowledge that emerges from the
independent inputs and contributions.
Shared or group intelligence that emerges from the social behaviors
like collaboration, collective efforts, and competition of many
individuals
Example applications: recommendation, categorization, voting,
prediction, trending, collaborative work, etc.
Three levels of collective intelligence
Implicit aggregation: independent actions do not purposefully aim to
create the collective knowledge, e.g., collaborative filtering
Explicit aggregation: independent actions purposefully aim to create
the collective knowledge by simple aggregation, e.g., folksonomy,
collaborative tagging, social tagging, social bookmarking
Explicit collaboration: independent actions purposefully aim to
create the collective knowledge but beyond just simple aggregation,
e.g., Wikipedia, team blog, collaborative editing (Google Docs)
17
Power Law of Participation
18
http://ross.typepad.com/blog/2006
/04/power_law_of_pa.html
Network Effect
An economic term, generally means the increase in value to the existing users
of a service as more and more people use it.
In other words, the more people use it, the more value (exponential growth) everybody
has, then the service as a whole is more valuable.
https://en.wikipedia.org/wiki/Network_effect
http://www.businessinsider.com/network-effects-2011-5
The value is created mainly by
Interaction of users;
Collective value created from user base (content etc.).
Implication
The value of a product/service to one user depends on how many other users there are.
A new product or service is more likely to be successful if it gains traction and momentum
through early adoption, rather than being a superior product.
A lot of new technology startups focus on user base, rather than being profitable, at the
beginning.
19
Image from
http://www.kinesisinc.com/
using-networks-to-grow-
your-business/
Network Effects Business Models
Online community based
Either open or focused community (community of practice)
Example: Ning
Social attention business
Content sharing, e.g. YouTube, Flikr
Social networking, e.g. Facebook, LinkedIn
Intermediary/brokerage
Marketplace, e.g. Alibaba
Crowdsourcing
O2O (online to offline)
Many of these businesses are facilitated by Web 2.0
technologies (and mobile technologies) building
platforms to support the "network" and use social
media for customer engagement
20
The Technology Aspect - Web as
a Platform
One of the goals of Web 2.0 is to facilitate the use of the
Web as a development platform.
Traditionally, software was developed for specific
platforms, such as Windows, Linux, or Mac OS.
Today, developers build Web-based applications that run
on the Web, that are completely independent of the
user's actual computer operating system.
http://www.webopedia.com/TERM/W/web_as_a_platform
.html
The key for this vision
Rich user experience
The web as a communication means (for applications and
software modules)
21
Major Web 2.0 Technologies
Key Aspects
Key Technologies
Rich user experience:
more responsive and interactive;
brings desktop experience to the
web.
Client (JavaScript) focus: AJAX, HTML 5
Service web: services are the
building block for the underlying
communication for web
applications.
Semi-structured data: XML (RSS), JSON
Web services: SOAP, RESTful
(Light weight) Web APIs: REST, JavaScript
Application Architecture:
architectural changes brought by
the new technology
AJAX, SPA, MVC, four tier
Frameworks:
all kinds of web frameworks at
different levels
Programming frameworks: jQuery, etc.
Architecture frameworks: MVC, etc.
Application frameworks: CMS, etc.
UI frameworks: Bootstrap, etc.
22
Rich User Experience
Rich user experience is both from behavior and
technology perspective
Behavior
User's interactions with websites share common
properties as they use a desktop
https://nicholasleach.wordpress.com/2012/03/30/ric
h-user-experience/
When extended to the mobile device, use of
gestures
http://uxmag.com/articles/gestures-animations-the-
pillars-of-mobile-design
Technology
AJAX, touchscreen, etc.
23
Rich User Experience
RUE means
Brings desktop experience to the web
Multitasking, window
Beyond conventional point-and-click UI
More responsive and interactive user interfaces
Multiple smooth interaction methods
Simplicity and efficiency
Aesthetics, elegance, visual style and effects
http://www.slideshare.net/Luristic/the-anatomy-of-rich-user-
experience
Key technologies
HTML 5
AJAX (Asynchronous JavaScript and XML), SPA
24
"When technology becomes a
commodity by satisfying basic needs,
user experience dominates."
HTML 5
HTML 5 components
New HTML elements and attributes
CSS3
JavaScript API
The significance of HTML 5 for RUE
HTML5 introduces a paradigm shift with new semantic elements
provided for JavaScript a pretty solid working set of tools and effects
JavaScript is still the tool hands all magic
Minimizes dependency on foreign components like plug-ins
Cross platform
Enhance client side processing (data storage, graphic processing,
etc.)
http://radar.oreilly.com/2011/07/what-is-html5.html
http://www.methodsandtools.com/archive/archive.php?id=125
Full list of improvement
http://www.w3.org/TR/html5-diff/
25
AJAX
26
AJAX (Asynchronous JavaScript
and XML) is a group of
interrelated web development
techniques used on the client-
side to create interactive web
applications.
Despite the name, the use of XML
is not actually required, nor do the
requests need to be
asynchronous.
With Ajax, web applications can
communicate with servers in the
background without a complete
page loading after every
request/response cycle.
http://www.adaptivepath.com/ide
as/ajax-new-approach-web-
applications/
Traditional Model
27
http://www.websiteoptimization.com/secrets/ajax/8-1-ajax-pattern.html
The server prepares the whole page.
The client does not generate
views/presentations (HTML/CSS).
Synchronous
communications
feature sequential
request/response
cycles, one after
another
Ajax Model
28
With Ajax, web applications can communicate with servers in the
background without a complete page loading after every
request/response cycle.
http://www.websiteoptimization.com/secrets/ajax/8-1-ajax-pattern.html
The server prepares partial
pages (partial HTML) or just
data (XML or JSON).
The client generates
views/presentations and
update content (partial
page) by manipulating DOM.
Asynchronous
communications
feature
independent
request/response
cycles
A Typical Example
29
https://www.google.com search term recommendation is a typical
AJAX application that relies on continuous server communication from
the backend. Traditional web communication style cannot do this.
A set of requests have been made to
get JSON data from the server as I
type in the search term box. Observe
the "q" parameter in all URLs.
Use Chrome's developer tools to view
network communications while typing
the search terms.
Major AJAX Elements
Standards-based presentation using HTML and
CSS
Asynchronous operations and communications
using XMLHttpRequest (AJAX engine)
Data interchange and manipulation using XML,
JSON, or preformatted HTML
Dynamic display and interaction through the
Document Object Model
JavaScript binding everything together
30
XHR (XMLHttpRequest)
31
XMLHttpRequest (XHR) is an API available to
web browser scripting languages such as
JavaScript.
XHR is used to send HTTP or HTTPS requests
to a web server and load the server response
data back into the script, in an asynchronous
way.
See the diagram on slide 6 and 7 to compare
synchronous and asynchronous communication
It is the AJAX "engine" or the AJAX
communication layer mentioned previously.
https://en.wikipedia.org/wiki/XMLHttpRequest
Response Format
32
The response from the asynchronous call
does not have to be XML
HTML (AHAH or AJAH)
Server returns the preformatted HTML/CSS as a
partial page
JSON (AJAJ, or Asynchronous JavaScript
and JSON
JSON has gain popularity for the past years to be
used as an exchange format
https://en.wikipedia.org/wiki/AJAJ
JavaScript
33
JS plays a central role in AJAX and ties
everything together
Manages the AJAX communication through XHR
Triggers AJAX requests in page loading or user
actions (clicking, mouse moving, typing, etc.)
Update the page dynamically through DOM
No complete page refresh
Only designated section update
AJAX's Impact on RUE
More efficient and faster communications between server and client.
Enables more frequent "thin" communications
Applications that rely on frequent updates are made possible: automatic completion, auto
content update, etc.
Smoother and continuous user interaction (user experience)
Reduces complete page refreshes and transitions
Partial page loading; reducing unnecessary page refreshes, less web page transitioning
and less wait time
Multi-path navigation/action: less navigation interruptions.
Improves operational efficiency, enables multi-tasking and immediate action feedback
More like applications, building rich interaction/interface: more responsive and
interactive; brings desktop experience to the web
Advanced interaction actions, such as drag and drop, mouse scroll, etc.
Desktop GUI like dynamic interfaces are possible, such as MDI (multiple div(ision)
interface) which is similar to MDI (multiple document interface) or TDI (tabbed document
interface) in desktop applications.
In-page navigation: a web application becomes less dependent on navigations between
web pages. A web page becomes more like an application holder that many tasks can be
completed within the page. Page transitioning is significantly decreased and navigation
path is less complex.
Multi tasking is possible in the same page.
34
Mobile Computing
Mobile computing has drive the Web 2.0
businesses to a new level
Greatly expand the usage from desktop to
mobile any time
Convenient devices and platforms with
embedded and integrated gadgets (camera,
sensors, microphone, lighting, etc.)
Although many mobile apps are OS dependent
native apps, they use web technologies to
communicate with servers.
35
Summary
Web 1.0 the Web of information
The need for access: the need to get information and
knowledge from the web; the need to accomplish tasks
on the web.
Web 2.0 the Web of people
The need for participation: the need for socialization on
the web; the need to make contributions.
Web 3.0? the Web of things
What do you anticipate for web 3.0?
Instructor's earlier take:
http://cubicle-h.blogspot.com/2009/07/web-30-in-my-
mind.html
Internet (Web) of things? Things generated content
https://www.youtube.com/watch?v=F_nbUizGeEY
36