• Like
  • Save
Web2.0
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Web2.0

  • 835 views
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
835
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Meme: cultural transmission of information. Examples of memes are tunes, ideas, catch-phrases, fashion, & technology. "memes are the cultural counterpart of genes" AJAX: Asynchronous JavaScript and XML
  • Web 1.0 was about traditional media transferred to the web. Newspapers Yahoo and Google Amazon.com Simply PRINT + LINKS Web 2.0 is about Openness (sharing data) Decentralization (mashups) Participation (tagging & reviews)
  • It is important to recognize, however, that "Web 2.0" is not anything other than the evolving Web as it exists today. It is the same Web that we've had all along. But the problems, issues, and technologies we're dealing with are in many ways different, and so using the term "Web 2.0" is a recognition that the Web is in a constant state of change, and that we have entered a new era of networked participation.
  • Folksonomy -- comes from word taxonomy which is, “practice and science of classification”
  • XY graph to describe the relationship between Amazon sales and Amazon sales ranking and found a large proportion of Amazon.com's book sales come from obscure books that are not available in brick-and-mortar stores. The Long Tail is a potential market and, as the examples illustrate, the distribution and sales channel opportunities created by the Internet often enable businesses to tap into that market successfully.
  • Operate on the principle: “Given any two possible solutions to a problem, the simpler one is usually better.” How? There are two important aspects to achieving success with simplicity: Remove unnecessary components, without sacrificing effectiveness. Try out alternative solutions that achieve the same result more simply.
  • When & how to use a central layout Position your site centrally unless there's a really good reason not to.
  • A few years ago, 3-column sites were the norm, and 4-column sites weren't uncommon. Today, 2 is more common, and 3 is the mainstream maximum.
  • This means making the top of the screen (the main branding & nav area) distinct from the rest (the main content).
  • Leading on from the clearly differentiated top area, you'll notice that lots of sites define the various areas of real-estate boldly and clearly.
  • Global site navigation that appears on every page as part of the page template - needs to be clearly identifiable as navigation, and should be easy to interpret, target and select. Why simple navigation is better Users need to be able to identify navigation, which tells them various important information: Where they are (in the scheme of things) Where else they can go from here And what options they have for doing stuff Following the principle of simplicity, and general reduction of noise, the best ways to clarify navigation are: Positioning permanent navigation links apart from content Differentiating navigation using colour, tone and shape Making navigation items large and bold Using clear text to make the purpose of each link unambiguous
  • A clear, bold, strong brand - incorporating attitude, tone of voice, and first impression - is helped by a bold logo.
  • These normally set out the site's USP, elevator pitch or main message. 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. When & how to use a bold text intro Only use one if you've got something bold to say. If you have a simple message that you want to be seen first, go ahead and headline it. Make it clear by putting it against a relatively plain background.
  • The Treo Mobile site uses 3 areas of strong color to mark out and advertise 3 main areas of the site. The background color makes it clear that this isn't main content , and large, bold title text helps you see quickly what's in each one, so you can decide whether it interests you. Colorschemer sections the page with bands of intense, bright, cheerful color, set against a more neutral background.
  • The effects of Web 2.0 are far-reaching. Like all paradigm shifts, it affects the people who use it socially, culturally, and even politically. One of the most affected groups is the designers and developers who will be building it—not just because their technical skills will change, but also because they’ll need to treat content as part of a unified whole, an ecosystem if you will, and not just an island.
  • 5 Suggestions for Upgrading to Library 2.0 (or Some Easy Steps to Get Started...Really)

Transcript

  • 1. Web 2.0, Library 2.0, & You Too! Greg Hardin Jan. 2007
  • 2. 'Web 2.0' Proves Most Popular Wikipedia Entry
    • “ Still not entirely sure how to explain Web 2.0 to your friends? You weren't alone in 2006. In a fitting marriage of context and content, "Web 2.0" was the No. 1 most-cited Wikipedia entry of the year, according to Nielsen BuzzMetrics. Advertising Age: January 02, 2007
    • http://adage.com/digital/article.php?article_id=114014
  • 3. Bloggers' Top-Cited Wikipedia 2006 Entries Nielsen BuzzMetrics Top Wikipedia Entries By Author Citation Jan. 1, 2006 - Dec. 10, 2006
    • Rank Term URL (Index)
    • Web 2.0 http://en.wikipedia.org/wiki/Web_2.0 206
    • Steve Irvin http:// en.wikipedia.org/wiki/Steve_Irwin 161
    • Mark Foley Scandal http:// en.wikipedia.org/wiki/Mark_Foley_scandal 142
    • Blog http://en.wikipedia.org/wiki/Blog 147
    • Ajax http:// en.wikipedia.org/wiki/AJAX 133
    • World War II http:// en.wikipedia.org/wiki/World_War_II 143
    • Snakes on a Plane http:// en.wikipedia.org/wiki/Snakes_on_a_plane 126
    • Meme http:// en.wikipedia.org/wiki/Meme 132
    • Wiki http:// en.wikipedia.org/wiki/Wiki 129
    • RSS http://en.wikipedia.org/wiki/RSS_%28file_format%29 122
    • Podcasting http:// en.wikipedia.org/wiki/Podcasting 127
    • George Bush http:// en.wikipedia.org/wiki/George_W._Bush 129
    • Podcast http:// en.wikipedia.org/wiki/Podcast 111
    • Net Neutrality http:// en.wikipedia.org/wiki/Network_neutrality 100
    http:// www.nielsenbuzzmetrics.com/release.asp?id =170
  • 4. Web 2.0 is….
    • “ Web 1.0 was about connecting computers and making technology more efficient for computers.
    • Web 2.0 is about connecting people, and making technology for efficient for people.”
    • Posted by: Dan Zambonini October 3, 2005 http://radar.oreilly.com/archives/2005/10/web_20_compact_definition.html
  • 5. What is driving Web 2.0
    • Demographic and technological drivers:
    • One billion people around the globe now have access to the Internet
    • Mobile devices outnumber desktop computers two to one
    • Nearly 50 percent of all U.S. Internet access is now via always-on broadband connections
    • Combine this with the fundamental laws of social networks and lessons from the Web’s first decade, and:
    • In the first quarter of 2006, MySpace.com signed up 280,000 new users each day and had the second most Internet traffic
    • By the second quarter of 2006, 50 million blogs were created—new ones were added at a rate of two per second
    • In 2005, eBay conducted 8 billion web services transactions
    http://www.oreilly.com/catalog/web2report/chapter/web20_report_excerpt.pdf
  • 6. Web 2.0 – Key Concepts
    • Collaboration
    • Sharing
    • Ownership
    • Creation
    • Web-based rather than software based
    • Data/information
    • Social
    • Connections/relationships
    • Trust
    • Enrichment
    • Personal data
    • Participation
    • Decentralized
    • User “tagged” or defined
    • Experience
    • Services
    • Remixable
    • Behavior
  • 7. Web 2.0
    • The Read/Write Web …
      • is seen as a two-way medium, where people are both readers and writers. The main catalyst for this is social software, allowing communication and collaboration between two or more people
    • The Web as Platform …
      • is seen as a programming platform upon which developers create software applications. The main catalyst for this is Application Programming Interfaces, or APIs, allowing communication between two or more software applications.
  • 8. Web 2.0 Mind-Map
    • This mind-map (constructed by Markus Angermeier ) sums up the memes of Web 2.0, with example sites and services.
    2005: http://kosmar.de/wp-content/web20map.png
  • 9. Web 2.0 Meme Map
    • shows the many ideas that radiate out from the Web 2.0 core.
    http://www.oreillynet.com/oreilly/tim/news/2005/09/30/graphics/figure1.jpg
  • 10. The Long Tail http:// www.thelongtail.com Chris Anderson, editor-in-chief of Wired Magazine
  • 11. Mind Mapping Web 2.0 http://yourdon.com/personal/blog/2006/11/14/web-20-mind-map-version-026/
  • 12. Exemplars of Web 2.0
    • Flickr
      • Flickr is a fast-growing photosharing service that provides an collaborative user interface as well as a powerful API to it's content. (Recently acquired by Yahoo!)
    • Del.icio.us
      • Del.icio.us is a popular social bookmarking service. Joshua Schacter, the founder, characterizes his service as a way to remember things. (Recently acquired by Yahoo!)
    • 37Signals
      • 37Signals provides several services: Basecamp - a project collaboration tool and Backpack - a collaborative tool to create sharable web pages.
    • Digg
      • Digg is a content aggregation service. It provides a mechanism for its many users to "digg" a piece of content, and aggregates them like votes to bubble up the most popular content to its widely-viewed pages. In this way Digg culls the actions of its users to provide value.
    • Writely
      • Writely (Google Docs & Spreadsheets) is a web-based service that allows for the creation and sharing of documents in a sophisticated word-processor-like interface.
    • Bloglines Bloglines is web-based personal news aggregator for browsing weblogs and other RSS news feeds.
  • 13. Flickr
    • Flickr is a fast-growing photosharing service that provides an collaborative user interface as well as a powerful API to it's content.
  • 14. Del.icio.us
    • Del.icio.us is a popular social bookmarking service. Joshua Schacter, the founder, characterizes his service as a way to remember things.
  • 15. 37Signals
    • 37Signals provides several services: Basecamp - a project collaboration tool and Backpack - a collaborative tool to create sharable web pages.
  • 16. Digg
    • Digg is a content aggregation service. It provides a mechanism for its many users to "digg" a piece of content, and aggregates them like votes to bubble up the most popular content to its widely-viewed pages. In this way Digg culls the actions of its users to provide value.
  • 17. Writely (now Google Docs & Spreadsheets)
    • Writely is a web-based service that allows for the creation and sharing of documents in a sophisticated word-processor-like interface.
  • 18. Bloglines
    • Bloglines is web-based personal news aggregator for browsing weblogs and other RSS news feeds.
  • 19. Best of Web 2.0 Software 2006 http://web2.wsj2.com/the_best_web_20_software_of_2006.htm
  • 20. Typical features of Web 2.0 sites
    • Simplicity
    • Central layout
    • Fewer columns
    • Separate top section
    • Solid areas of screen real-estate
    • Simple nav
    • Bold logos
    • Bigger text
    • Bold text introductions
    • Strong colors
    • Rich surfaces
    • Gradients
    • Reflections
    • Cute icons
    • Star flashes
    http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm
  • 21. Web 2.0 Features - Simplicity
    • Why simplicity is good
      • Web sites have goals and all web pages have purposes.
      • Users' attention is a finite resource.
      • It's the designer's job to help users to find what they want (or to notice what the site wants them to notice)
      • Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.
      • So we need to enable certain communication, and we also need to minimize noise. That means we need to find a solution that's does its stuff with as little as possible. That's economy, or simplicity.
  • 22. Web 2.0 Features - Central layout
    • Why a central layout is good
    • This "2.0" style is simple, bold and honest. Sites that sit straight front & center feel more simple, bold and honest. Also, because we're being more economical with our pixels (and content), we're not as pressured to cram as much information as possible above the waterline/fold. We're using less to say more, so we can be a bit more free and easy with the amount of space used, and pad out our content with lots of lovely white space.
  • 23. Web 2.0 Features - Fewer columns
    • Why using fewer columns is good
    • Less is more. Fewer columns feels simpler, bolder, and more honest. We're communicating less information more clearly.
    • 37Signals works well with 2-column and Apple shows why it’s the leader in elegant simplicity.
  • 24. Web 2.0 Features - Separate top sections
    • Why distinct top sections are good
    • The top section says "Here's the top of the page". Sounds obvious, but it feels good to know clearly where the page starts.
    • It also starts the site/page experience with a strong, bold statement. This is very "2.0"-spirited. We like strong, simple, bold attitude.
  • 25. Web 2.0 Features - Solid areas of screen real-estate
    • Real estate comes in various forms, including:
      • Navigation
      • Background / canvas
      • Main content area
      • Other stuff
    • It's possible to design a web page so that these areas are immediately distinct from their neighbors.
      • The strongest way to do this is using color, but white space can be just as effective.
  • 26. Web 2.0 Features - Simple navigation
    • 2.0 design makes global navigation large, bold, clean and obvious.
  • 27. Web 2.0 Features - Bold logos
    • A Logo should:
      • work visually in its main context, and any other uses in which it may be used (like flyers or t-shirts?)
      • be recognizable and distinctive
      • represent your brand 's personality and qualities on first viewing
  • 28. Web 2.0 Features - Bigger text
    • Big text makes most pages more usable for more people, so it's a good thing.
    • Of course, size is relative. You can't take a normal, busy site, make ALL the text bigger, and make it more usable. That might not work, that might be worse.
    • In order to use big text, you have to make room by simplifying, removing unnecessary elements.
    • You also need to have a reason to make some text bigger than other text. And the text must be meaningful and useful. There's no point adding some big text just because it's oh-so 2.0!
    • If you need to have a lot of information on a page, and it's all relatively equal in importance, then maybe you can keep it all small.
  • 29. Web 2.0 Features - Bold text introductions
    • Leading on from the big text theme, many sites lead with strong all-text headline descriptions.
  • 30. Web 2.0 Features - Strong colors
    • Bright, strong colours draw the eye. Use them to divide the page into clear sections, and to highlight important elements .
  • 31. Web 2.0 Features - Rich surfaces, Rounded corners, & Reflections
    • Most 2.0-style sites use subtle 3D effects, sparingly, to enhance the qualitative feel of the design.
    • Realistic surface affects like drop-shadows, gradients and reflections help make a visual interface feel more real, solid and "finished".
  • 32. Web 2.0 Features – Gradients
    • help create mood
    • in page backgrounds, gradients may also create an illusion of distance
    • usually work best when juxtaposed with areas of flat color or tone
  • 33. Web 2.0 Features - Cute icons
    • Simple and clean
    • Cute and quirky
    • Richly detailed
  • 34. Web 2.0 Features - 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. For this reason, they suit the start-up ethic of many 2.0 sites, but for the same reason may cheapen other sites.
    • They can really work well, but of course should only be used to draw attention to something important.
  • 35. Web 2.0 for designers
    • Six main themes covering design in the Web 2.0 world:
    • Writing semantic markup (transition to XML)
    • Providing Web services (moving away from place)
    • Remixing content (about when and what, not who or why)
    • Emergent navigation and relevance (users are in control)
    • Adding metadata over time (communities building social information)
    • Shift to programming (separation of structure and style)
  • 36. Yahoo – October 1996
  • 37. Yahoo - today
  • 38. Library 2.0
    • Library 2.0 = (books 'n stuff + people + radical trust) x participation
    http://library2.usask.ca/~fichter/blog_on_the_side/2006/04/web-2.html
  • 39. Library 2.0 Meme http://flickr.com/photo_zoom.gne?id=113222147
  • 40. Library 2.0 - Names to Know
    • Some library 2.0 blogsphere contributors:
      • Stephen Abram - http://stephenslighthouse.sirsi.com/
      • John Blyberg - http://www.blyberg.net/
      • Michael E. Casey - http://www.librarycrunch.com/
      • Jenny Levine - http://www.theshiftedlibrarian.com/
      • Michael Stephens - http://tametheweb.com/
  • 41. Reasons we should care about 2.0
    • Online competition to libraries
    • Alternative method of marketing
    • Alternative method of communication
    • Alternative publishing practices
    • User awareness
    • Efficiency
    • “ Buzz” word right now
    • Users are unaware or are creating alternatives to library resources
  • 42. Who’s doing it? - AADL
  • 43. Hennepin County Library
  • 44. Library Thing
  • 45. PennTags http://tags.library.upenn.edu/
  • 46. ALA Washington Office Second-Life Branch
  • 47. Library (user) 2.0 http://briangray.alablog.org/blog
  • 48. 5 Suggestions for Upgrading to Library 2.0
    • Michael Stephens’ “ 5 Suggestions for Upgrading to Library 2.0 (or Some Easy Steps to Get Started...Really)”
      • Start a library blog
      • Create an Emerging Technology Committee
      • Train staff to use an RSS aggregator
      • Experiment and use 2.0 Tools
      • Implement IM reference
  • 49. Time Magazine – Person of the Year
  • 50. Questions and Discussion http://www.blyberg.net/card-generator/