the 2.0 in web 2.0

The 2.0 in WEB2.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

“ihateJargoN!!!” 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…

http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html

..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 Content Management System (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.phplive demos of some

of the best Open Source CMS systems

n.e.a.t.

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



“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

http://kosmar.de/archives/2005/11/11/the-huge-cloud-lens-bubble-map-web20/




http://www.railsonwave.it/railsonwave/2007/1/2/web-2-0-map



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.0Earlier - 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

keywords – 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.


http://demo.quietlyscheming.com/ChartSampler/app.html

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.


– measures + relationships


– clusters in size ratio and document analysis

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

concepts


– document arc diagrams + double document word comparison/analysis


– visualizing relationships


– tree maps / area charts


– 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

nowIf 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!)1. Rich User Experience2. User Participation – Even Web 1 was about it, but, this is frequently used in marketing Web2

products...3. Dynamic Content – a direct corollary of #24. Metadata5. Web Standards – Web 2.0 is notorious for non-compliance, due to lack of definition. 6. Valid Markup – a direct corollary of #5, How much of your HTML/SMIL/etc. markup W3C compliant?7. Scalability and “The Long Tail” – read the original Chris Anderson article, and the blog8. Syndication9. RDF – Resource Description Framework.

However, these as I said are “opportunities for further research”I wouldn’t bore you with all that here… hehe…

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

http://longtail.typepad.com/the_long_tail/

..deep breath…!!!

Some practical, contextual stuff left…let’s cover it up quick…

heavy eyelids must scream “COFFEE” now!

more Web 2.0 COOLTH – 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 COOLTH – 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 COOLTH – 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 COOLTH – the Mashup – terminology cleariti

.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 COOLTH – 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)

http://www.dipity.com/mashups/timetube

http://www.dipity.com/mashups/timetube

http://doggdot.us/

http://www.360cities.net/

http://www.mibazaar.com/googlers/

http://www.4isbn.com/

http://kuler.adobe.com/



http://dearcomputer.nl/gir/

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)

http://www.useit.com/papers/heuristic/heuristic_list.html

http://www.asktog.com/basics/firstPrinciples.html

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.

http://www.useit.com/

Free Usability – the 10 points of Heuristic Evaluation - 01

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

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.

http://www.idesigntech.org/2008/03/30/heuristic-framework-for-evaluating-web-20-applications/

http://www.idesigntech.org/2008/03/30/heuristic-framework-for-evaluating-web-20-applications/

Free Usability – Affordances - 00

• Pushable• Clickable • DragableMaterial 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 - 00

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

voila!!!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 eLearning2.0

the 2.0 in web 2.0

Technology