The 2.0 In Web 2.0
Upcoming SlideShare
Loading in...5
×
 

The 2.0 In Web 2.0

on

  • 2,764 views

A basic overview of what Web2.0 is all about. I also give a short description of Heuristic Evaluation and an approach to designing a solution for/of/about/in Web2.0 ...

A basic overview of what Web2.0 is all about. I also give a short description of Heuristic Evaluation and an approach to designing a solution for/of/about/in Web2.0

I know I could've added many things here.
I have borrowed many more things from others here, a thank you to everyone.
I might have made mistakes here too, please point these out.

C&C are welcome.

on some requests...allowing downloads.


Note: you are responsible for how you use this presentation, not me. Seriously.

Statistics

Views

Total Views
2,764
Views on SlideShare
2,763
Embed Views
1

Actions

Likes
1
Downloads
45
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The 2.0 In Web 2.0 The 2.0 In Web 2.0 Presentation Transcript

  • 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-…
    • 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…
  • sweeet CMS an- …
    • 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…
  • sweet CMS and …
    • 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…
  • sweet CMS and it’s avatars 1
    • … of its many avatars are the…
    • Learning Management Systems
  • sweet CMS and it’s avatars 2
    • …and…
    • Forums
  • sweet CMS and it’s avatars 3
    • …and…
    • Groupware
  • sweet CMS and it’s avatars 4
    • …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.
    Now – Web 2.0 Earlier - WWW
  • 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
    Now – Web 2.0 Earlier - WWW
  • 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.
    Now – Web 2.0 Earlier - WWW
  • 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.
    Now – Web 2.0 Earlier - WWW
    • 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 Tags and Tag Clouds - 2
  • web2.0 coolth! examples of Tags and Tag Clouds - 3
  • web2.0 coolth! examples of Tags and Tag Clouds - 4
  • web2.0 coolth! examples of Tags and Tag Clouds - 5
  • 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 )
  • one thing before the last thing… Usability – Heuristic Evaluation + Affordance .
    • 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…
  • one thing before the last thing… Usability – Heuristic Evaluation + Affordance .
    • 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
    • &quot;Your order has been received&quot; page
    • &quot;Breadcrumbs&quot;
    • Rollover buttons
  • Free Usability – the 10 points of Heuristic Evaluation - 0 2
    • 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 &quot;product code&quot; vs. &quot;item ID&quot;
  • Free Usability – the 10 points of Heuristic Evaluation - 0 3
    • User control and freedom
    • Users often choose system functions by mistake and will need a clearly marked &quot;emergency exit&quot; to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
    • &quot;Undo&quot; button
    • Stop button on browser
    • &quot;Remove from cart&quot;
    • Close window
  • Free Usability – the 10 points of Heuristic Evaluation - 0 4
    • 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 &quot;Help Files&quot; in one place and &quot;Tips and Tricks&quot; 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.
  • Free Usability – the 10 points of Heuristic Evaluation - 0 5
    • 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.
    • &quot;Are you sure?&quot; message
    • Validation - check for @ sign in e-mail addresses
    • Clear labels - &quot;Check Out NOW.&quot;
    • Large enough buttons
  • Free Usability – the 10 points of Heuristic Evaluation - 0 6
    • 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
  • Free Usability – the 10 points of Heuristic Evaluation - 0 7
    • 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
  • Free Usability – the 10 points of Heuristic Evaluation - 0 8
    • 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!
  • Free Usability – the 10 points of Heuristic Evaluation - 0 9
    • 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 - &quot;Incorrect Password. Check to see if your caps lock key is on.&quot;
    • On Google - &quot;Did you mean web site?&quot; when you typed web stie .
  • Free Usability – the 10 points of Heuristic Evaluation - 0 10
    • 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 &quot; the way it can be used &quot; 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
  • the recipe for a Web 2 solution - 0 1
    • pick a CMS
  • the recipe for a Web 2 solution - 0 2
    • 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
  • the recipe for a Web 2 solution - 0 3
    • consider the services of an OpenAPI
  • the recipe for a Web 2 solution - 0 4
    • 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