The 2.0 In Web 2.0

The 2.0 in WEB 2.0 or clearing the fog… or why adding a wiki doesn’t make my solution Web 2… or let’s evaluate the evolution of the web… Copyright (©) 2008 Shaurya Agarwal This work is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/ or send a letter to Creative Commons, 171 Second Street, Suite 300, San Francisco, California, 94105, USA.

..be warned…!!!

tangents and debates are more than welcome



“ i ha t e J ar g oN! ! ! ”

if you see any in the presentation, please ask for an explanation .

There’d be many words here that may need your attention…

Web 2.0 comes with “ terminology baggage ” of its own.

..about…

This is about Web 2.0

but, I am not going to tell you that…

Web2.0 is not a software or a platform or a “paradigm” …blah…blah…blah!

I am not going to tell you that it’s a term that is a Tim O'Reilly trademark.

I am not even going to give you the link to the original Sept. 2005 article !

No .

We will deal with…

Something Basic

Something Fundamental

So, let’s start at the very…

..beginning…

There was the web and that got a lot of people excited.

People, even communities, exchanged raw content over network.

Then came the Web “ Sites ” consisting of Web “ Pages ”.

“ Site ” vs. “ Page ” – Terminology Issue .

Web Pages - “technically” called Active Documents .

<HTML> markup + content responds to mouse clicks!

beginning…

Did you notice?

The Internet was all about “ people ” and “ communities ” sharing information.

Right

From

Day ONE !!!

then…

As technology evolved over time,

we had “ dynamic ” content.

Web applications could create <HTML> content on the fly.

Graphics!!!

JavaScript!!!

Content delivered crisp and fresh to your web browser.

Lots of web pages.

Yahoo !

but…

The creation and publication of content, was another story...

“ Experts ”:

Web Developers

Writers (with “advanced” computer skills)

did some complicated calisthenics to get content out.

The “Common” folk (you and me?) had two choices:

Be satisfied with writing e-mails, or,

Become an “Expert”

…meanwhile dot com happened…

People believed, Content was The Key.

Mostly they were right too!

But the question was “where is the content?”

Still, technologies helped deliver richer content, even videos and 3D over the web.

but…

However, content creation/publication story didn’t change much. There simply wasn’t enough content to deliver.

The content that did exist needed Experts…

But, this time the experts had a tool that could help…

…along came a CMS.

While all this was going on, a set of applications began making their mark on the Web.

The C ontent M anagement S ystem (s)

sweeeeet CMS …

CMS presents an interface that allows a writer to enter <HTML> markup text, and publish it over the web. In the mean time, it also tracks many statistics about the content and the users…

sweeeet CMS a-…

sweeet CMS an- …

sweet CMS and …

sweet CMS and it’s avatars 1

… of its many avatars are the…

Learning Management Systems

…and…

Forums

…and…

Groupware

…and…

The Wiki-Wiki

oh! by the bit…

explore more on CMS

check out:

http://www.opensourcecms.com/index.php

live demos of some of the best Open Source CMS systems

n.e.a.t.

“elementary my dear Watson…”

“ Going by the hints in this presentation …

it seems the CMS…

has something to do with Web 2.0 ,

but, deduction says there is more to it than just that…”

Sherlock Holmes, “The case of the missing mashup”

welcome to what the discussion is all about… The Original Detailed version: http://kosmar.de/archives/2005/11/11/the-huge-cloud-lens-bubble-map-web20 From: http://www.railsonwave.it/railsonwave/2007/1/2/web-2-0-map The Ubiquitous Web2.0 Tag cloud. And on Wikipedia: http://en.wikipedia.org/wiki/Image:Web_2.0_Map.svg#filehistory

umm…so wha-

remember?

The Internet was all about “ people ” and “ communities ” sharing information. But, that claim fell flat because…

The creation and publication of content was a barrier for us “common folk”.

Content needed Experts .

Not for long…

the dot com went bust and…

The World Wide Web was evolving…

Web 2.0 was here…

right! what about it? …and what about WEB 2 dude?!?!

Web 2.0 , the new “evolved” face of the WWW

for the first time,

makes the WWW,

Effective

Content is no longer tied down to “Experts”.

We the common folk can now create and publish content.

empowering the WWW ’s primary focus:

“ people ” and “ communities ”

..and I’m guessing… people are using CMS to do that ?

caught ya!!!

you didn’t guess it,

Sherlock Holmes told you…



but YES , basically that is true .

let us see how…

..be warned…!!!

5 slides with a lot of meat coming up…

heavy eyelids must scream “COFFEE” now!

the web took another look… at User Interactions on a CMS

At the way various components of a CMS are accessed by the users...

Blogs, Wikipedia. Personal Websites, Microsoft Encarta, Britannica

parts of the “ Authoring Components ” of a CMS are available to the common folk .

People generate content,

for the consumption,

of other People.

If the content is wrong, someone is bound to point it out. – The whole world does QA/Correction for you – LITERALLY!!! – QA/Correction becomes dirt cheap!

The “ Authoring Components ” of a CMS were available only to Admin/Writers – Experts only access.

Experts created content,

everyone else just consumed it.

What if an Expert was wrong?

– QA/Correction in content was very expensive

Now – Web 2.0 Earlier - WWW

the web took another look… at CMS Components

At the way the various components of a CMS are

structured and accessed in the application...

The “Authoring Components” and the “Presentation Components” of a CMS are well mixed.

You can add comments while reading a blog:

“ reading a blog” -> Presentation

“ add comments” -> Authoring

Everyone gets to see the updated content. Thus content is enriched and evolves all the time (like filling a vessel with water).

Things are dynamic, hence even the taxonomy/heirarchy evolves like the content.

The “Authoring Components” and the “Presentation Components” of a CMS were “packaged” separately.

Can’t change what you read, can’t read what you change.

Content changed slowly, in discrete quantum (like building a wall, brick by brick).

The taxonomy/hierarchy almost NEVER changed.

the web took another look… at Information Architectures

At the way users browse + search content …

New “Hybrid” ways of browsing content, mixing and extending the old “Browsing Strategies”. These also “evolve” with each other – Information Architecture optimizes itself as the product usage increases…

Dynamic Links – take a look at what Diigo does

Tags / Tag Clouds – tags are more than key words – they are key [metadata]

Dynamic hierarchical arrangements that evolve over time, organic arrangements – MindMaps, Think Maps, other clustering techniques

Customized, dynamic searching based on Tags, popularity, correctness, other ratings.

Social Bookmarking.

Ways of browsing the web were inspired by ways of browsing books. ( Many “strategies” exist that allow the user to browse to the desired content and then consume it. However these were “static”, non-evolving and hence not always optimal – figuring out “ User Centered Information Architecture ” was expensive):

Static Hyperlinks to another “Web Page”

Indexes

“ Table of contents”, other hierarchical arrangements

Keyword Search

Site maps

“ Favorites” in my Browser

the web took another look… at the meaning behind the data

At data visualization , collection, analysis and display of data…

Data Visualization is one of the corner stones of Web 2.0

“ Traditional” analysis and representation of data may have little relevance in case of

the new “hybrid” ways of browsing.

Ever-evolving + user-generated content

Flexible, dynamic, evolving hierarchies

New ways of collection, analysis and display of data have evolved

highly interactive D.Viz. Take a look at this

Static links imply that data that was generated was extensive, but planned. So traditional Data Visualization methods sufficed.

This data was also analyzed in a well defined/ pre defined fashion, so not many “new” interpretations came up.

the web took another look… at the End Client Experience

At the “Presentation Tier” or the “Client End” components of the CMS

Rich clients needed to effectively build the features discussed in the last four slides.

Also, the mandate is no longer on just having a usable page.

Instead, the entire Experience of browsing must be addressed. “Experience is the Product” – is the new marketing cliché.

End users can be given a more customized browsing experience, instead of a single standard interface, which may or may not be good for all.

Rich clients can address the need for smooth delivery of rich, multimedia intensive content.

Traditional websites did not deliver rich content on a regular basis, If and when they did, it was not dynamic for the most part.

Still many “Rich Client” technologies had evolved over time – Flash, Air, AJAX, Silverlight – client side can process more code, more efficiently than ever before.

At the same time a lot of dynamic languages have also evolved – PHP/PEAR, Python/Django, Ruby/Rails, ActionScript/AMF/Flex – these enable powerful web services and a highly responsive backend.

made it upto here huh!?!?

the rest is easy, we just look at some examples now…

web2.0 coolth! examples of Tags and Tag Clouds - 1

web2.0 coolth! examples of Data Visualization

D.Viz is a huge subject, merits at least ONE separate presentation of its own… however, here are a few examples showcasing some of the most innovative D.Viz stuff happening around.

web2.0 coolth! examples of Data Visualization – measures + relationships

web2.0 coolth! examples of Data Visualization – clusters in size ratio and document analysis

web2.0 coolth! examples of Data Visualization – clusters + clouds, analyzing and classifying concepts

web2.0 coolth! examples of Data Visualization – document arc diagrams + double document word comparison/analysis

web2.0 coolth! examples of Data Visualization – visualizing relationships

web2.0 coolth! examples of Data Visualization – tree maps / area charts

web2.0 coolth! examples of Data Visualization – stream charts / steam charts – super cool!!! - I had to remove all data axis in order to make these fit

web2.0 coolth! examples of Data Visualization – new age timelines – showing box office charts here. – ultra cool!!!

web2.0 coolth! examples of Data Visualization – traditional ways become highly interactive now If you still need traditional charts these need to be highly interactive . For a rock star demo of interactive charting in Flash Flex, take a look at: http:// demo.quietlyscheming.com/ChartSampler/app.html

..zzzzzzzzzzzz…!!!

You can sleep thru this next slide.

I had to put the boring stuff somewhere…

I wont talk technical any more. promise ;-)

uh! .. technically speaking…

In a more technical discussion of Web 2.0, you’d encounter the following terms.

(These can form a good basis for further research. We’ve discussed some here already!)

Rich User Experience

User Participation – Even Web 1 was about it, but, this is frequently used in marketing Web2 products...

Dynamic Content – a direct corollary of #2

Metadata

Web Standards – Web 2.0 is notorious for non-compliance, due to lack of definition.

Valid Markup – a direct corollary of #5, How much of your HTML/SMIL/etc. markup W3C compliant?

Scalability and “The Long Tail” – read the original Chris Anderson article , and the blog

Syndication

RDF – Resource Description Framework.

However, these as I said are “opportunities for further research”

I wouldn’t bore you with all that here… hehe… 

..deep breath…!!!

Some practical, contextual stuff left

… let’s cover it up quick…

heavy eyelids must scream “COFFEE” now!

more Web 2.0 CO OL TH – the OpenAPI

OpenAPI – term represents, a set of technologies/services

that allow your web2 application to interact with other websites .

This fluid integration of technology over the web creates immense possibilities.

One may now use Google Earth with Facebook to locate friends, Facebook and Amazon API to find friends who like similar books etc.

endless possibilities

more Web 2.0 CO OL TH – the OpenAPI – popular APIs

among the most popular APIs are:

GoogleMaps

Flickr

YouTube

Amazon

VirtualEarth

eBay

411Sync

YahooMaps

del.icio.us

Google Open Social Project

more Web 2.0 CO OL TH – the Mashup

“ mashup” - common name for a Web2.0 application.

This essentially is made up of the stuff we have discussed till now.

Well “mashed up” CMS components

Use of OpenAPI(s)

Well designed user interactions

Data Visualization…

And other boring details that we discussed in a slide when you were sleeping… 

Do ask for a copy of this presentation for more wakeful moments...hehe.

more Web 2.0 CO OL TH – the Mashup – terminology clear iti

.

Note that mashup and portal are different ,

a portal is a Web 1 term , it refers to a single page with many-many links on it. These links may be web applications or may be web documents (web pages).

Refer a Web 2 solution to a client as a “portal” and loose the bid.

Its that dead butt dumb .

more Web 2.0 CO OL TH – Mashup and Apps – some fun examples

TimeTube ( http:// www.dipity.com/mashups/timetube )

Doggdot.us ( http://doggdot.us/ )

360 cities ( http://www.360cities.net/ )

Fortune’s 10 Fascinating Googlers ( http://www.mibazaar.com/googlers/ )

4isbn ( http://www.4isbn.com/ )

Kuler ( http:// kuler.adobe.com / )

Google Image Ripper ( http://dearcomputer.nl/gir/ )

more Image searches ( http://codescape.blogspot.com/2008/07/image-searches-on-web.html )

things I’d like to talk about…

… but it’s getting too long for that are:

Web 2 – content issues

Web 2 – design (the myth of the “Web 2.0 Look” and related fonts, the “Web 2.0 Look” – latest trends)

Web 2 – cons, issues.

Web 3 – the future, semantic web.

let’s look at these later…

But there is one thing I must discuss .

one thing before the last thing… Usability – Heuristic Evaluation + Affordance .

Heuristic Evaluation is a standard way of “defining” how nice our User Interfaces designs and solutions really are.

These principles are all the more important

when we consider Web2.0 Solutions.

Take a look at:

Ten Usability Heuristics ( http://www.useit.com/papers/heuristic/heuristic_list.html )

First Principles of Interaction Design ( http:// www.asktog.com/basics/firstPrinciples.html )

Usability is not as exotic as many “Human-Computer Gyan” companies would want you to believe.

It’s actually a set of very simple principles. All other gyan is just a set of debatable “researches” that these companies would want to sell…

When figuring out solutions, the Affordances of each component are equally important.

one thing before the last thing… Free Usability – 10 points of Heuristic Evaluation .

Here are simple 10 points of Heuristic Evaluation (from Norman Nielsen Group’s www.useit.com ) that will add exponential value to your user interface and design.

Free Usability – the 10 points of Heuristic Evaluation - 0 1

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

Hourglass

Progress bars

"Your order has been received" page

"Breadcrumbs"

Rollover buttons

Match between system and the real world

The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

File-folder tabs for navigation

Buttons which act pushed when you click on them

Simple language on labels, for example "product code" vs. "item ID"

User control and freedom

Users often choose system functions by mistake and will need a clearly marked "emergency exit" to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

"Undo" button

Stop button on browser

"Remove from cart"

Close window

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Don't call something "Help Files" in one place and "Tips and Tricks" in another.

Use what people know: put navigation on the left, links to special site tools on the upper right, and featured items on the right.

Especially if you use unconventional navigation, your site should make it easy to learn the new way (see Rule 3) then reinforce the learning through strict consistency.

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

"Are you sure?" message

Validation - check for @ sign in e-mail addresses

Clear labels - "Check Out NOW."

Large enough buttons

Recognition rather than recall

Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Choose from list of options

Mouse-over tool tips

Help system always available

Flexibility and efficiency of use

Accelerators -- unseen by the novice user -- may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

Different methods for novice and expert - mouse vs keyboard

Frequently-used actions become first choice

“ Recent” Documents

Internet Browsing History

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

Omit unnecessary words

Leave clutter off the pages, and that adorable animated gif you think is so cool. Cute once, annoying forever. Don’t animate unless it serves a purpose.

Japanese study found that beautiful things were actually easier to use. Experiment repeated in Israel, with the same results, completely contrary to expectation!

Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

Useful error messages - "Incorrect Password. Check to see if your caps lock key is on."

On Google - "Did you mean web site?" when you typed web stie .

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large.

Your site should be designed so well that documentation is not necessary.

If not, documentation and help should be readily available, clear, and correct.

Popup help

Free Usability – the other 10 points of Heuristic Evaluation - 0 0

Read ( http://www.idesigntech.org/2008/03/30/heuristic-framework-for-evaluating-web-20-applications/ ) for another 10 points of Heuristic Evaluation for Web 2.0

Not as fundamental and necessary as the earlier ones,

but nice to know.

Free Usability – Affordances - 0 0

Push able

Click able

Drag able

Material objects have properties which suggest to us the ways they can be used.

These " the way it can be used " properties are their affordances .

A chair, for example, affords us the possiblity of sitting. A rubber ball, we quickly learn, affords us the possibility of bouncing, or rolling it.

What affordances does your Application/UI offer?

Free Usability – this is all it takes !!!

follow the last 12 slides and you have a Usable product!

zero gyan . period.

of course, there may be other stuff you can read, but this is the starting point!

Act the basics, first, Improve upon, later.

..whew…!!!

Done ?

.. 8 slides to go…

..so…

what is the recipe of a basic Web 2.0 solution?

the recipe for a Web 2 solution - 0 0

fix a Context

target users

content subjects

client/scenario needs

business goals

specifics

restrictions

Remember “ Business Centered ” and “ User Centered ”

these phrases are not jargon.

they are plain English. Treat them like that.

Ensure that you can define your Context from

A “Business Centered” point-of-view

A “User Centered” point-of-view

pick a CMS

take another look at the 5 meats (slides 25 to 29)

User Interactions on a CMS

CMS Components

Information Architectures

meaning behind the data (data Viz.)

End Client Experience

consider the services of an OpenAPI

visual spice – we didn’t discuss this, but, it’s simple!

Things just need to look nice.

In case you don’t want that, just steal the already clichéd “ Web2.0 Look ”

the recipe for a Web 2 solution – VOILA!!!

vo i la !!!

you are one champ of a cook!

Enjoy your tasty Web2.0 dish.

..don’t murder me yet… !!!

you stayed this long here…

thank you so much!

.. what next?...

..coming soon…

The 2.0 in eLearning 2.0

The 2.0 In Web 2.0

0 comments

Notes on slide 1

1 Favorite

The 2.0 In Web 2.0 - Presentation Transcript

More by user

More info about this document

Categories

Tags

Tags

The 2.0 In Web 2.0

0 comments

Notes on slide 1

1 Favorite

The 2.0 In Web 2.0 - Presentation Transcript

Related Presentations

More by user

More info about this document

Categories

Tags

Tags