Web 2.0

WEB 2.0 Christodoulos Tsiambartas

Overview

Introduction - What is WEB 2.0

O Reilly definition

Criticism

WEB 1.0

Dot com Bubble

Technologies

WEB 2.0

Comparison with WEB 1.0 Technology

Design Patterns

Design Features/styles

Technologies and Tools

Successful Web 2.0 Companies

Advantages & Disadvantages

WEB 3.0

What is coming next

Summary

Questions and Discussion

References

Introduction – What is WEB 2.0

What do you think WEB 2.0 is ?

Tim O‟Reilly

Definition (2004 Conference)

Web 2.0 is the business revolution in the computer industry caused by the

move to the internet as platform, and an attempt to understand the rules

for success on that new platform.

WEB 2.0 Conferences (SUMMIT)

What is WEB 2.0 (continued)

Contradiction

meaningless marketing buzzword OR the new conventional wisdom

Buzzword?

Not clear for average user what WEB 2.0 is

People are struggling to understand;

No common architecture

Multiple definitions

Contentious

Attitude not technology

Links back to the original web

Quotes from WEB influencers

Alan Meckler (internet.com): “web 2.0 is just a continuing evolution…”

Gina Bianchini (Ning): “I think it means a lot of different things to a lot of different people”

Biz Stone (twitter): “the public acceptance of the fact that the web is a highly social utility”

Tim Berners-Lee: “nobody even knows what it means”

What is WEB 2.0 (continued)

Conventional wisdom?

Atomization of web

Quotes fromWEB influencers :

Eric Engleman (Bloglines): “it is really about end users”

Max Mancini (ebay): “Atomization of the WEB”

“taking all of the components and making them available for combination

in unconsidered way, or in ways that are very individual”

Dorion Carroll (technorati): “its no longer the one-way WEB”

Rodrigo Madanes (Skype): “web 2.0 is the resurgence in web

innovation”.

WEB 1.0

There was a Web 1.0…if we assume that there's a Web 2.0

WEB 1.0

Static pages

Not interactive

Applications are proprietary

Source: http://blog.aysoon.com/le-web20-illustre-en-une-seule-image

WEB 1.0 (continued)

Dot com bubble Existing businesses realized that needed

a presence on the internet.

Strived to make money by reaching

consumers only over the internet.

Over optimism about e-commerce

Problems dealing direct with customer is

the customer:

Small orders

Returns

Complaints

Shipping

Customer service

Survivors:

Amazon.com: it is the middleman

Ebay: brings buyers and sellers and

makes profit from it.

Source: http://www.watblog.com/2008/04/17/the-biggest-bubble-there-ever-was/

Companies significant to the bubble

Boo.com – spent $180 million in online fassion. Went

bankrupt in May 2000

Geocities – purchased by Yahoo for $3.57 billion in 1999.

Yahoo closed Geocities in 2009.

eToys – share price from $80 (1999) went to $1 (2001)

WEB 1.0 (continued)

WEB 1.0 (continued)

Technologies (design elements)

Static pages instead of dynamic user-generated content

The use of framesets

Proprietary HTML extensions

Online guestbooks (geocities)

GIF buttons

HTML forms sent via email

WEB 2.0

Source: http://oreilly.com/web2/excerpts/web2-architectures/chapter-3.html

WEB 1.0 vs 2.0

WEB 2.0 (continued)

Collaborative Tagging

Tagging refers to the ability of users to add “labels”

(or tags) to link resources

Design patterns

Collaborative Tagging (folksonomy)

Synchronized Web

Single Oriented Architecture (SOA)

SaaS (cloud computing)

Persistent Rights Management

Mashup

Rich User Experience

Participation/Collaboration

Asynchronous Particle Update

Social Networking

Semantic Web Grounding

Structured Information Source: http://community.bamboosolutions.com/blogs/bambooteamblog/archive/2009/04/15/sharepoint-tag-

cloud-web-part-just-released-to-bamboo-labs.aspx

WEB 2.0 (continued)

Synchronized Web

In this pattern, multiple applications or users

share the same state or view of the same state.

Design elements


Synchronized Web




Mashup




Social Networking


Structured Information Source: http://www.technobuzz.net/play-free-web-games-online/

WEB 2.0 (continued)

Service Oriented Architecture (SOA)

It's an architectural style of building software

applications that promotes loose coupling between

components so that you can reuse them

Design elements


Synchronized Web




Mashup




Social Networking


Structured Information http://www.w3.org/2003/Talks/0521-hh-wsa/slide5-0.html

WEB 2.0 (continued)

Design elements


Synchronized Web




Mashup




Social Networking


Structured Information

SaaS

delivers computational functionality to users without

them having to persist the entire application or system

on their computers.

Source: http://www.ekinsystems.com/Home/CloudComputing/tabid/102/Default.aspx

WEB 2.0 (continued)


users retaining their Create, Read,

Update, Delete (CRUD) rights on every

copy of a digital artefact.

Design elements


Synchronized Web




Mashup




Social Networking



Source:http://help.adobe.com/en_US/livecycle/9.0/rightsMgmtExt2007Help/index

.htm?content=000006.html

WEB 2.0 (continued)

Design elements


Synchronized Web




Mashup




Social Networking



Mashup

aggregating content or computational resources from

multiple sources, and mixing them together to create

something new.

Source:http://webscripts.softpedia.com/scriptScreenshots/Maxmind-and-Google-Maps-Mashup-

Screenshots-42943.html

WEB 2.0 (continued)

Design elements


Synchronized Web




Mashup




Social Networking



Rich user experiences

a combination of GUI -style (Graphical User

Interface) applications and multimedia content.

Source:http://www.thedailyslice.com/tag/consumer-engagement/

WEB 2.0 (continued)

Design elements


Synchronized Web




Mashup




Social Networking




focuses on self-organizing communities and social

interactions among Web 2.0 participants.

Source:http://www.ukoln.ac.uk/qa-focus/documents/briefings/briefing-78/html/

WEB 2.0 (continued)

Design elements


Synchronized Web




Mashup




Social Networking




Rather than forcing a complete object (page view)

update, a smaller part of the whole can be updated

asynchronously.

Source:http://www.rhema-webdesign.com/web/web_technologies

WEB 2.0 (continued)

Design elements


Synchronized Web




Mashup




Social Networking



Social Networking

Social networks such as Facebook, where people

simply “declare” existing social structures

Source:http://events.venturebeat.com/gamesbeat2010/

Source:http://conserveonline.org/workspaces/ZumwaltPrairieWorkspace

WEB 2.0 (continued)

Design elements


Synchronized Web




Mashup




Social Networking



Semantic Web grounding

It facilitates self-learning, self-healing software, as

observing the patterns of interactions can lead to

inferences about the relevancy of semantic

declarations.

Source:http://www.velvetblues.com/web-development-blog/google-added-ajax-features-to-search/

WEB 2.0 (continued)

Design elements


Synchronized Web




Mashup




Social Networking




The advent of XML and the ability to apply

customized tagging to specific elements

Source:http://blog.mozilla.com/faaborg/2006/12/13/microformats-part-2-the-fundamental-types/

WEB 2.0 (continued)

Design features/styles

Simplicity

Central layout

Fewer columns

Separate top section

Solid areas of screen real estate

Simple navigation

Bold logos

Bigger text

Bold text introductions

Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Simplicity:

"Use as few features as are necessary to achieve what you need

to achieve“. Web design is simpler than ever, and that's a good

thing. 2.0 design means focused, clean and simple.

Source:http://intlstore.mozilla.org/index.php?cPath=4

WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Central layout:

This "2.0" style is simple, bold and honest. Sites that sit straight

front & center feel more simple, bold and honest.

Source:http://www.etre.com/

WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Fewer columns:

Less is more. Fewer columns feels simpler, bolder, and more

honest. Communicating less information more clearly.

Source: http://www.apple.com/mac/

WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Separate top section:

This means making the top of the screen (the main branding &

nav area) distinct from the rest (the main content).

Source: http://www.mozilla.com/en-US/

WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Solid areas of screen real-estate:

Leading on from the clearly differentiated top area, sites define

the various areas of real-estate boldly and clearly.

Source: http://www.webdesignfromscratch.com

WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Simple navigation:

Navigation bar needs to be clearly identifiable as navigation, and

should be easy to interpret, target and select


WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Bold logos:

A clear, bold, strong brand - incorporating attitude, tone of voice,

and first impression - is helped by a bold logo.

Strong, bold logos say "This is who we are." in a way that we can

believe.


WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Bigger text:

Making things bigger makes them more noticeable than lesser

elements. Not only does big text stand out, but it's also more

accessible to more people.

Source: http://37signals.com/

WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Bold text introductions:

They tend to be graphical, rather than regular text. The reason

for this is that designers want a lot of control over the page's

visual impact, especially early on in a browsing experience.

Source: http://37signals.com/

WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Strong colours:

Bright, strong colours draw the eye. When you have a simple,

stripped-out design, you can use a bit of intense colour to help

differentiate areas of real-estate and to draw attention to items

you want the visitor to notice.

Source: http://www.colorschemer.com/

WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Rich surfaces:

Realistic surface effects (like drop-shadows, gradients and

reflections) help make a visual interface feel more real, solid and

"finished".


WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Gradients:

Gradients soften areas that would otherwise be flat colour/tone.


WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Reflections:

The illusion of reflection is one of the most common applications

on gradients.


WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Cute icons:

Icons play an important role in Web 2.0 design. Today we use

fewer, better icons that carry more meaning. Icons can be useful

when they're easily recognisable and carry a clear meaning.


WEB 2.0 (continued)


Simplicity

Central layout

Fewer columns



Simple navigation

Bold logos

Bigger text


Strong colours

Rich surfaces

Gradients

Reflections

Cute icons

Star flashes

Star flashes:

These are the star-shaped labels that you see stuck on web

pages, alerting you to something important. They work by

evoking price stickers in low-cost stores.


Web 2.0 'neglecting good design„

Jacob Nielsen: “Web firms neglect the basics of good

design, web usability guru”

Paying attention on good design but not on usability

Web firms rush to create websites, making site less usable

Only few users will make significant use of all tools provided

WEB 2.0 (continued)

Source:http://news.bbc.co.uk/1/hi/technology/6653119.stm

WEB 2.0 (continued)


AJAX (Asynchronous JavaScript and XML)

Server-side scripting (PHP,Perl,Java,Ruby)

Stylesheets (CSS & XSLT)

XUL

XML

DOM

Flash Fex

REST (Representational State Transfer)

Resource Description Framework (RDF)

AJAX:

Client-side scripting means JavaScript. The major

advantage to JavaScript is that it doesn’t require page

reloading.

Soutce:http://blogs.microsoft.co.il/blogs/justinangel/archive/2007/12.aspx

WEB 2.0 (continued)





XUL

XML

DOM

Flash Fex



Server-side scripting:

Server side scripts give instructions to the computer (the

server) that hosts a webpage, instead of using a browser

on the user’s desktop. Server side scripts are usually

faster than client side ones, and most AJAX programming

requires at least some server-side scripts.

WEB 2.0 (continued)





XUL

XML

DOM

Flash Fex



Hypertext Transfer Protocol:

Cascading Style Sheets (CSS) is a style sheet language

used to describe the presentation semantics (that is, the

look and formatting) of a document written in a markup

language.

WEB 2.0 (continued)





XUL

XML

DOM

Flash Fex



XUL (XML User Interface Markup Language):

XUL relies on multiple existing web standards and web

technologies, including CSS, JavaScript, and DOM. Such

reliance makes XUL relatively easy to learn for people

with a background in web-programming and design.

Source: http://www.peppertop.com/blog/?p=126

WEB 2.0 (continued)





XUL

XML

DOM

Flash Fex



XML (eXtensible Markup Language):

XML’s design goals emphasize simplicity, generality, and

usability over the Internet. It is a textual data format, with

strong support via Unicode for the languages of the

world. Although XML’s design focuses on documents, it is

widely used for the representation of arbitrary data

structures, for example in web services.

Source: http://entrecard.com/blog/?p=547

WEB 2.0 (continued)





XUL

XML

DOM

Flash Fex



Document Object Model

The Document Object Model (DOM) is a cross-platform

and language-independent convention for representing

and interacting with objects in HTML, XHTML and XML

documents..

Source: http://docstore.mik.ua/orelly/webprog/dhtml/ch01_06.htm

WEB 2.0 (continued)





XUL

XML

DOM

Flash Fex



Flash Fex:

Flex is a highly productive, free open source framework

for building and maintaining expressive web applications

that deploy consistently on all major browsers, desktops,

and operating systems.

Source:http://upload.wikimedia.org/wikipedia/en/7/70/Flexicon.png

WEB 2.0 (continued)





XUL

XML

DOM

Flash Fex



REST (Representational State Transfer):

Representational state transfer (REST) is a style of

software architecture for distributed hypermedia systems

such as the World Wide Web.

Source:http://ausweb.scu.edu.au/aw06/papers/refereed/wright/paper.html

WEB 2.0 (continued)





XUL

XML

DOM

Flash Fex




RDF is a standard model for data interchange on the

Web. RDF has features that facilitate data merging even

if the underlying schemas differ, and it specifically

supports the evolution of schemas over time without

requiring all the data consumers to be changed.

Source: http://renato.iannella.it/paper/rdf-idiot/

WEB 2.0 (continued)

Successful e-commerce web 2.0 companies

Amazon.com

Ebay

Google

Facebook

Twitter

Yahoo

Wikipedia

WEB 2.0 (continued)

Advantages:

Information can be gathered from multiple sources

Mass population communicates and spreads ideas and

information

Personalization to meet the needs of a single user

Greatest communication medium in the world

Broader perspective for viewing events

Creativity

WEB 2.0 (continued)

Disadvantages/Issues

Dependence

Bandwidth

Paperless offices (danger)

Sharing sensitive data

Copyrights

Job opportunities

Vandalism

Anonymity

Credibility

How to create a successful WEB 2.0 business:

Simple Business Idea (e.g. Google)

Create and Release as Early as Possible (prototypes)

Use the Network Effect (collaboration, volunteers, feedback)

Track Your Users & Rankings (business statistic, alexa‟s)

Marketing (creative and innovative solutions)

Read about Successful and Unsuccessful e-Companies

Have a Revenue Model(millions of pageviews but no

earning)

Continually Improve Your Business and Develop Improvement

Metrics

WEB 2.0 (continued)

Web 2.0 tools for promoting your business:

Company personality: blogging

Promote events: Facebook/Twitter (eg Obama)

Video : YouTube

Track success: Google Analytics

Professional growth: Meetup

Recruitment tool: LinkedIn

WEB 2.0 (continued)

WEB 2.0

The phenomenon of long tail in WEB 2.0

Why The Future of Business is Selling Less of More

Source:http://satyamshot.wordpress.com/2009/04/19/the-long-tail-bollywood-hollywood-hits-and-niches-and-much-more/

WEB 3.0

What is coming after 2.0?

Semantic web?

Meaning of data

Openness

Open source API‟s

3D virtual worlds

Summary

The Machine is US/ing us

Web 2.0 is not a technology

Web 2.0 is a trend

Web 2.0 is a collaboration of web tools

Web 2.0 facilitates various technologies to deliver

rich user experience

Web 2.0 is about read and write

Web 2.0 is not all good

Web 2.0 is participatory

http://www.youtube.com/watch?v=6gmP4nk0EOE




Questions and Discussion

What do you think about the future of WEB?

Is WEB 2.0 a bubble 2.0?

What other implications Web 2.0 is causing?

What is raw data?

Governments/institutions/organisation to make their

data openly available on the web

References

1. CASAREZ, V., CRIPE, B., SINI, J. and WECKERLE, P., 2009. Reshaping your business with WEB 2.0.

USA: McGraw-Gill

2. DIX, A. and COWEN L., BCS: HCI 2.0? Usability meets Web 2.0 [online]. Available:

http://www.bcs.org/upload/pdf/ewic_hc07_papaper1.pdf [accessed 20 Feb 2010].

3. Governor J., Hinchcliffe D. and Nickull D., 2009 WEB 2.0 Architectures. Canada: O‟Reilly Media,

Inc.

4. JONES, B. L., 2008. WEB 2.0 Heroes. Indianapolis: Wiley Publishing Inc.

5. O‟Reilly Media, 2010. Dissecting Web 2.0 Examples: Chapter 3 - Web 2.0 Architectures [online].

Available: http://oreilly.com/web2/excerpts/web2-architectures/chapter-3.html [accessed 21 Feb

2010].

6. O‟Reilly Media and TechWeb, 2010. Web2.0 Summit 2009 [online]. Available:

http://www.web2summit.com/web2009 [accessed 21 Feb 2010].

7. SANKAR, K. and Bouchard A. S., 2009. Enterprise Web 2.0 Fundamentals. Indianapolis: Cisco

Systems, Inc.

8. Scratchmedia Limited, 2009. Graphic Design for the web [online]. Available:

http://www.webdesignfromscratch.com/web-design/[accessed 21 Feb 2010].

9. SHUEN, A., 2008. Web 2.0: A Strategy Guide. Canada: O‟Reilly Media, Inc.

10. SITEBOAD, 2010. Creating a successful web 2.0 business [online]. Available:

http://siteboat.com/creating-a-successful-web-20-business/[accessed 21 Feb 2010].

11. SMITH, C., 2010. Web 2.0 (Videos/PPoints) [online]. Available:

http://web2videos.blogspot.com/[accessed 20 Feb 2010].

12. BLIP NETWORKS., 2010. Web2Expo [online]. Available: http://web2expo.blip.tv/[accessed 21

Feb 2010].

Web 2.0

Technology

Transcript of Web 2.0