Web 2.0

1
Web 2.0

• Daniel ChapmanWebmakers Meeting, January 2007

2
What is Web 2.0?

• A buzzword
• A phrase used by journalists in any new article
  referring to the Internet
  
• A collection of ideas and concepts, most famously
  outlined in Tim OReillys article, What is Web
  2.0?

3
What is Web 2.0?

• Some of the OReily Article Web 2.0 concepts
  include
  
• Web 2.0 is about Services, not packaged software
  - simple, smart web-based services rather than
  full-blown, packaged software releases
  
• User control over unique, hard-to-recreate data
  sources that get richer as more people use them
  
• Trusting users as co-developers
• Harnessing collective intelligence - user powered
  information
  
• Light, easy to use user interfaces

4
OK, But what does that really mean?

• Seeing Web 2.0 as something more fundamental
  Playing to the Internets inherent strengths
  
• Harnessing the collective over the select few -
  sharing and collaborating through user-driven
  connections and content decisions, rather than
  through a top-down approach.
• Examples include Tagging, embedded content
  sharing and content collaborations through Web
  services or shared APIs
  
• Allowing users to create organic connections
  between content, much like the way average joe
  Web content is generated.

5
OK, But what does that really mean?

• Examples
• Popular Science vs Engadget
• Wikipedia vs Encyclopedia Britannica
• YouTube vs Cable
• Google Adwords vs DoubleClick

6
OK, But what does that really mean?

• Information presented in small, digestible
  segments
  
• Content provided in a way best suited to the
  medium
  
• Smart, targeted distribution, instead of
  traditional wide-net broadcasting

7
What does this mean for what we do?

• How does this idea of people-powered content work
  with State Government?
  
• Open-ended, unregulated Internet culture vs
  Hierarchical, structured entities with a need
  to provide, authoritative information.

8
What does this mean for what we do?

• Ideas we can agree on
• The continuous roll out - end of the 1.0, 2.0,
  3.0 version number era.
  
• Good simple, clear-cut design. Less is more.
  (White space is a good thing)
  
• Use of AJAX where appropriate to create richer
  user experiences without sacrificing
  accessibility.
  
• Losing control is OKTechnologies like RSS, iCal
  or ICS, blogs and Web services allow for content
  to be manipulated away from the Web page.

9
What does this mean for what we do?

• Ideas that are a harder sell for State
  Government
  
• Tagging vs. traditional hierarchyLetting users
  dictate how portal information is best organized
  through tagging vs. category maps or other
  traditional navigation methods. Is this a good
  service for citizens browsing Government sites?
• Syndicating portal content to other Web sites Is
  syndicating site content through Web services
  desirable for state Web sites? Example
  Customized versions of Amazon, eBay, Craigslist
  create unique and sometimes unintended
  consequences. Is this worth the risk for the
  possible return?

10
Under the hood (What the heck is AJAX anyway?)

• Asynchronous Javascript and XML
• Asynchronous Content can be added to an existing
  Web page, or within the DOM (Domain Object Model)
  after page load, resulting in more dynamic
  content delivery.
• Javascript Javascript used to create a more
  dynamic user experience (creating effects
  traditionally associated with plugins such as
  Quicktime or Flash), only without the need for
  plugins.
• XML Standard markup format for getting data in
  and out.
  
• Other technologies used in conjunction with AJAX
  include
  
• HTML / XHTML
• CSS

11
Under the hood (What the heck is AJAX anyway?)

• Some of the most famous AJAX / Web 2.0 examples
  include
  
• Flickr
• Basecamp
• Google Maps

12
Flickr

• Features
• Dynamic AJAX photostream slideshows
• User-driven tagging
• User comments and permalinking
• RSS feeds

13
Basecamp

• Features
• Dynamic content manipulation
• Animated feedback, prompts and other AJAX goodies
  add to the user experience - more desktop app,
  less Web site
  
• RSS Feeds
• iCal Feeds

14
Google Maps

• Features
• Live content refresh and manipulation without
  page refreshes
  
• API for easy integration with other data sources

15
RI.gov and AJAX

• RI.gov examples
• Secretary of State Point of Sale application
• Photo Gallery
• A-Z Guide

16
RI.gov Photo Gallery

• Features
• Use of JQuery AJAX library
• Use of Thickbox JQuery add-on for slideshow
  effects
  
• Slideshow remains accessible even with javascript
  turned off (degrades gracefully)
  
• Formatting can easily be adjusted through a
  dedicated style sheet

17
RI.gov Photo Gallery
www.RI.gov/photocontest/
18
RI.gov A-Z Guide

• Features
• Use of JQuery Library
• Dynamic XML data load for additional agency
  information from the Secretary of States office

19
RI.gov A-Z Guide
www.RI.gov/guide/
20
RI.gov SOS Point of Sale

• Features
• Designed from the ground-up to mimic an existing
  desktop application
  
• Uses the lightweight AJAX library JQuery
• Dynamic XML calls load data into pages wherever
  possible without page refreshes
  
• Use of tab index allows for extensive keyboard
  use, reducing mouse use for quick data entry

21
RI.gov SOS Point of Sale
22
Things we can do to be ready for Web 2.0

• Separate substance from style. CSS-driven design,
  with clean database-driven content and semantic
  page markup. This helps makes our content ready
  for stripped-down syndication through Web
  services when were ready for them.
• Allow for user-driven remixing of contentLosing
  control is OK!

23
Hype vs Reality

• QuestionIs Web 2.0 a cohesive, well-defined
  concept worthy of widespread adoption, or a
  buzzword centered around disparate, naturally
  evolving ideas?
• Answer? Both.
• Trends and buzzwords evolve faster than the
  publics ability to catch up. Our responsibility
  is to help all citizens interact with Rhode
  Island State Government online, no matter what
  what skill set.

24
Sources

• What is Web 2.0 Tim OReilyhttp//www.oreillynet.
  com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-
  20.html
  
• JQuery New Wave Javascripthttp//jquery.com/
• Thickbox 2.1http//jquery.com/demo/thickbox/
• Wikipedia Web 2.0http//en.wikipedia.org/wiki/We
  b_2.0
  
• Wikipedia AJAXhttp//en.wikipedia.org/wiki/AJAX
  
• Web 2.0 for Designers Richard MacManushttp//www.
  digital-web.com/articles/web_2_for_designers/
  
• Web 3.0 Jeffery Zeldmanhttp//www.alistapart.com/
  articles/web3point0/