Web 2.0

What is it?

What does it mean to us?

Web 2.0 Presentation

Part 1

Conceptual View

Part 1

Conceptual View

Social View

Part 1

Conceptual View

Social View

Technical View

Part 1

Conceptual View

Social View

Technical View

Part 2

Ruby on Rails Demo

Part 1

Conceptual View

Social View

Technical View

Part 2

Ruby on Rails Demo

SmartClient Demo

Part 1

Conceptual View

Social View

Technical View

Part 2

Ruby on Rails Demo

SmartClient Demo

Possible Futures

Web 2.0 - Must Read

What is Web 2.0?Design Patterns and Business Models for the Next Generation of Software

by Tim O’Reilly

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

Conceptual View

Marshall McLuhan

was right!

Marshall McLuhan

The Narcissus Myth

The Medium is the Message

The Global Village “We look at the present through a rear-view mirror. We march backwards into the future.”

The Narcissus Myth

Fell in love with his own image

Did not recognize reflection as himself

Narcissus = narcosis

The Narcissus Myth

Technology as extension of ourselves

The Narcissus Myth

We fail to recognize implications of the new technology

The Narcissus Myth

We fail to recognize implications of the new technology

We see the new in terms of the old

The Narcissus Myth

Book = Printed Manuscript

The Narcissus Myth

Light Bulb = Electric Candle

The Narcissus Myth

Car = Horseless Carriage

The Narcissus Myth

Radio = Wireless

The Narcissus Myth

Radio = Wireless

Film = Moving Pictures

The Narcissus Myth

Radio = Wireless

TV = Visual Radio

The Narcissus Myth

Radio = Wireless

TV = Visual Radio

Computer = Calculator

Technologies change consciousness

Inventions reinvent us

The content is not the content

Print technology is:

sequential

specializing

sequential

specializing

fragmenting

Web 1.0

Web as Book

Web 1.0

Web as Book

Primary metaphor is the Page

Web 1.0

Web as Book

Author as Authority

Web 1.0

Web as Book

Author as Authority

Reader as Individual

Web 2.0

Web as Community

Web 2.0

Web as Community

Primary metaphor is the Village

Web 2.0

Web as Community

Author as Contributor

Web 2.0

Web as Community

Author as Contributor

Reader as Neighbor

Web as Community

“The character of a third place is determined most

of all by its regular clientele and is marked by a

playful mood...They are the heart of a

community’s social vitality, the grassroots of

democracy, but sadly, they constitute a

diminishing aspect of the American social

landscape.”

Ray Oldenburg’s “Third Place”

Web as Community

“Life without community has produced...a life

style consisting mainly of a home-to-work-

and-back-again shuttle. Social well-being

and psychological health depend upon

community.”

Ray Oldenburg’s “Third Place”

Web 2.0

“…reach out to the entire web, the edges and not just the center, to

the long tail and not just the head.” - Tim O’Reilly

“The edge dissolves the center” - Stowe Boyd, /Message

The Social View

Meet Me @ MySpace

Social Networks

Characterized by:

friends contacts user-generated voting ranking folksonomy

reviews comments profile interests connections meeting

blogs wiki tagging opinions network people participation

play community creative reputation groups swarmth rating me

personal taste serendipity social identity culture perspective interaction

sharing productivity belonging collaboration passions recommendations

self-discovery reward blog video music photos education discussion tags

Social Networks

Characterized by:

Social Networks

Characterized by:

Social Networks

Characterized by:

Social Networks

Characterized by:

Social Networks

Characterized by:

The Technical View

Traveling Light

Technical View

Characterized by:javascript ajax json script.aculo.us prototype soa microformats ruby on rails scripting perpetual beta agile development mashups aggregation webservices animation popups sliders s3 google open source

hCard hCal hAtom maps frameworks sourceforge.net apache rss hyperlink permalink creative commons python flex

apollo perl hybrid css lightweight podcast xhtml BitTorrent

Rich Interface

Breaking down the “page barrier”

Rich Interface

Breaking down the “page barrier” Eliminating “speed bumps”

Rich Interface

Breaking down the “page barrier” Eliminating “speed bumps” Interactivity

Rich Interface

JavaScript

XMLJSON

CSS2XHTML

Rich Interface

JavaScript

XMLJSON

CSS2XHTML

PrototypeScript.aculo.us

DojoDojo

jQueryjQuery

Yahoo!Developer

GoogleToolkitGoogleToolkit

Rich Interface

JavaScript

XMLJSON

CSS2XHTML

sliderssliders

autocomplete

inlineeditinginline

editing

grid cellediting

grid celleditingdrag

drag &

opacityfade

hoverdetailhoverdetail

dynamicfilters

inlinesortinginline

sorting

Social Software

Breaking down the “site barrier”

Social Software

Breaking down the “site barrier” Community of Code

Social Software

Breaking down the “site barrier” Community of Code Mashups and Aggregation

Social Software

Breaking down the site barrier Community of Code Mashups and Aggregation

microformats

Social Software

microformats

HTMLSimple Tags

StandardData

Formats

StandardData

Formats

Social Software

microformats

HTMLSimple Tags

StandardData

Formats

StandardData

Formats

AddressAddress

MapsMaps CalendarEvents

CalendarEvents

ReviewsReviews

ResumésResumés

ClassifiedsClassifieds

SocialNetworks

BlogsBookmarksBlogs

Bookmarks

Social Software

microformats

HTMLSimple Tags

StandardData

Formats

StandardData

Formats

AddressAddress

MapsMaps CalendarEvents

CalendarEvents

ReviewsReviews

ResumésResumés

ClassifiedsClassifieds

SocialNetworks

BlogsBookmarksBlogs

Bookmarks

RSSRSS

PermalinkPermalink

SOAWeb Services

Speed & Agility

Agile Development

Speed & Agility

Agile Development Lightweight Languages

Speed & Agility

Agile Development Lightweight Languages Perpetual Beta

Speed & Agility

Agile Development Lightweight Languages Perpetual Beta The Hybrid Developer

Speed & Agility

on Rails

PythonPython

PHPPHP

CatalystCatalyst

FlexFlex

ApolloApollo

DjangoDjango

JRubyJRuby

MVCMVC

Speed & Agility

on Rails

Collective Intelligence

Massive Collaboration

Massive Collaboration Open Source

Massive Collaboration Open Source Creative Commons

SOURCEFORGE

mozilla.org

Data Management

Data is the “Intel Inside”

Data Management

Data is the “Intel Inside” Amazon’s S3 Data Storage

AJAXAsynchronous Javascript and XML

“Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways.”

Jesse James Garrett, Adaptive Pathhttp://www.adaptivepath.com/publications/essays/archives/000385.php

Standards-based presentation using XHTML and CSS

Dynamic display and interaction using the Document Object Model (DOM)

Data interchange and manipulation using XML and XSLT

Asynchronous data retrieval using XMLHttpRequest

Javascript binding everything together

AJAX - XMLHttpRequest

function searchWordKeyPressed(event) {/** cross-browser event check **/

if (!event) var event = window.event; // test for up/downarrow or enter key (will be handled by a different event)

if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13) return; // move focus out of autosuggest table fRow = -1;// set the text the user typed as a global var suggestString = document.getElementById('searchWord').value;

// make the AJAX call if (suggestString != '') {

var req = newXMLHttpRequest();req.onreadystatechange = getReadyStateHandler(req, updateSuggestions);

req.open("POST", "LookupServlet", true);req.setRequestHeader("Content-Type", "application/x-www-form-

urlencoded");req.send("hint=" + suggestString);

} else {document.getElementById('hints').style.display = 'none';

function getReadyStateHandler(req, responseXmlHandler) {// Returns a function that waits for the specified XMLHttpRequest// to complete, then passes the XML response to the given handler function.

// req - The XMLHttpRequest whose state is changing // responseXmlHandler - Function to pass the XML response to

return function () { // If the request's status is "complete" if (req.readyState == 4) { // Check that we received a successful response from the server if (req.status == 200) { // Pass the XML payload of the response to the handler function. responseXmlHandler(req.responseXML); } else { // An HTTP problem has occurred alert("HTTP error "+req.status+": "+req.statusText); } } } }

//open HTTP POST connection to servlet, ‘true’ specifies asynchronousreq.open("POST", "LookupServlet", true);req.setRequestHeader("Content-Type", "application/x-www-form-

Two formats for data serialization: XML JSON (JavaScript Object Notation)

AJAX - JSON

Construct a JSON representation of an object on the server:

{ "firstName": "John", "lastName": "Smith", "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }, "phoneNumbers": [ "212 732-1234", "646 123-4567" ]}

AJAX - JSON

If the preceding text is contained in the JavaScript string variable JSON_text, you can recreate the object on the client with a simple eval() statement:

var p = eval(“(“ + JSON_text + “)”);

and the fields p.firstName, p.address.city, p.phoneNumbers[0], and so on are then accessible

Microformats

microformats.orgDan Cederholm, Tantek Çelik, Brian Suda

blog.mozilla.com/faaborgAlex Faaborg

microformatique.comJohn Allsop

Microformats

A way of sharing data between websites

Microformats

A way of sharing data between websites Uses simple, open data formats

Microformats

A way of sharing data between websites Uses simple, open data formats Built on existing standards

Microformats

A way of sharing data between websites Uses simple, open data formats Built on existing standards Readable by humans and machines

Microformats

A way of sharing data between websites Uses simple, open data formats Built on existing standards Readable by humans and machines Based on current developer practice

Microformats

A way of sharing data between websites Uses simple, open data formats Built on existing standards Readable by humans and machines Based on current developer practice Decentralized content and services

Microformats

People and Organizations (hCard)

Microformats

People and Organizations (hCard) Calendars and Events (hCalendar)

Microformats

People and Organizations (hCard) Calendars and Events (hCalendar) Locations (geo)

Microformats

People and Organizations (hCard) Calendars and Events (hCalendar) Locations (geo) Opinions and Reviews (hReview)

Microformats

People and Organizations (hCard) Calendars and Events (hCalendar) Locations (geo) Opinions and Reviews (hReview) Social Networks (XFN)

Microformats

People and Organizations (hCard) Calendars and Events (hCalendar) Locations (geo) Opinions and Reviews (hReview) Social Networks (XFN) Resumés (hResume)

Microformats

People and Organizations (hCard) Calendars and Events (hCalendar) Locations (geo) Opinions and Reviews (hReview) Social Networks (XFN) Resumés (hResume) Blogs, Bookmarks, etc. (hAtom)

Microformats

People and Organizations (hCard) Calendars and Events (hCalendar) Locations (geo) Opinions and Reviews (hReview) Social Networks (XFN) Resumés (hResume) Blogs, Bookmarks, etc. (hAtom) Classifieds (hListing)

Microformats

People and Organizations (hCard) Calendars and Events (hCalendar) Locations (geo) Opinions and Reviews (hReview) Social Networks (XFN) Resumés (hResume) Blogs, Bookmarks, etc. (hAtom) Classifieds (hListing)

Mozilla is focusing on these three

Microformats

hCard geo hCalendar

Microformats

Space and Time also map to common representations of information

Microformats - hCard

</h2><h3>address</h3><div>

<div>1923 N. Gramercy Place</div><span>Los Angeles</span><span>CA</span><span>90068</span>

</div><h3>phone</h3><div>323-877-3054</div><h3>email</h3><a href=“mailto...”>tb@homeboyd.com</a>

</div>

</div>

Microformats have a root element.

hCard root elements have theclass value=“vcard”.

Microformats have a root element.

hCard root elements have theclass value=“vcard”.

</div>

Formatted Names:

class=“fn” (root)class=“given-name”class=“family-name”

Formatted Names:

class=“fn” (root)class=“given-name”class=“family-name”

</div>

</div>

URLs and Photos:

class=“photo”class=“url”

URLs and Photos:

class=“photo”class=“url”

</div>

Addresses:

class=“adr” (root)class=“street-address”class=“locality”class=“region”class=“postal-code”class=“country-name”

Addresses:

class=“adr” (root)class=“street-address”class=“locality”class=“region”class=“postal-code”class=“country-name”

</h2><h3>address</h3><div class=“adr”>

<div class=“street-address”>1923 N. Gramercy Place</div><span class=“locality”>Los Angeles</span><span class=“region”>CA</span><span class=“postal-code”>90068</span>

</div>

email and phone:

class=“email”class=“tel”

email and phone:

class=“email”class=“tel”

</div><h3>phone</h3><div class=“phone”>323-877-3054</div><h3>email</h3><a class=“email” href=“mailto...”>tb@homeboyd.com</a>

</div>

Web 2.0 Meme Map

Strategic Positioning: The Web as Platform

User Positioning: You control your own data

Core Competencies: Services not packaged sofware Architecture of Participation Cost-effective scalability Remixable data source and data transformations Software above the level of a single device Harnessing collective intelligence

Flickr, de.licio.usTagging,

not taxonomy

PageRank, eBay reputation,

user as contributor

Blogs:Participation, not publishing

BitTorrent:Radical

Decentralization

Google AdSense:customer self-service,

the long tail

Wikipedia:Radical Trust

“An Attitude, nota technology”

The Long Tail

Data as the‘Intel Inside”

Trustyour users

Small PiecesLoosely Joined(microformats)

Rich UserExperience

The Right to Remix“Some rights reserved”

Software that gets better the more people

user itPlay

Emergent:User behavior not

predetermined

Granular Addressability

of Content

The PerpetualBeta

Gmail, Google Mapsand AJAX: Rich

user experiences

Web 2.0 Meme Map

not taxonomy

user as contributor

BitTorrent:Radical

Decentralization

the long tail

The Long Tail

Trustyour users

Rich UserExperience

predetermined

of Content

The PerpetualBeta

user experiences

Software that getsbetter the more people

use it

Web 2.0 Meme Map

not taxonomy

user as contributor

BitTorrent:Radical

Decentralization

the long tail

The Long Tail

Rich UserExperience

user itPlay

predetermined

of Content

The PerpetualBeta

user experiences

Trustyour users

Web 2.0 Meme Map

not taxonomy

user as contributor

BitTorrent:Radical

Decentralization

the long tail

Trustyour users

Rich UserExperience

user itPlay

predetermined

of Content

The PerpetualBeta

user experiences

The Long Tail

Web 2.0 Meme Map

not taxonomy

user as contributor

BitTorrent:Radical

Decentralization

the long tail

The Long Tail

Trustyour users

Rich UserExperience

user itPlay

predetermined

of Content

The PerpetualBeta

user experiences

Data as the‘Intel Inside’

Web 2.0 Meme Map

not taxonomy

user as contributor

BitTorrent:Radical

Decentralization

the long tail

The Long Tail

Trustyour users

Rich UserExperience

user itPlay

predetermined

of Content

The PerpetualBeta

user experiences

Web 2.0 Meme Map

not taxonomy

user as contributor

BitTorrent:Radical

Decentralization

the long tail

The Long Tail

Trustyour users

Rich UserExperience

user itPlay

predetermined

of Content

user experiences

The PerpetualBeta

Web 2.0 Meme Map

not taxonomy

user as contributor

BitTorrent:Radical

Decentralization

the long tail

The Long Tail

Trustyour users

user itPlay

predetermined

of Content

The PerpetualBeta

user experiences

Rich UserExperience

Enterprise 2.0

What’s in it for us?

Enterprise 2.0

User participation thru wikis, blogs, etc.

Enterprise 2.0

Focus on user choice

Enterprise 2.0

Facilitate collaboration

Enterprise 2.0

Move from individual performance to group

performance

Enterprise 2.0

performance

User feedback and interactivity

Enterprise 2.0

performance

User feedback and interactivity

Google Enterprise

I am trying to make Ruby natural, not simple...Ruby is simple in appearance, but is very complex inside, just like our human body.

Yukihiro Matsumoto Architect of Ruby

Ruby on Rails

Rails is the most well thought-out web development framework I’ve ever used...I’ve build my own frameworks, helped develop the Servlet API, and have created more than a few web servers from scratch. Nobody has done it like this before.

James Duncan Davidson Creator of Tomcat and Ant

Pure Object-oriented language

See: www.ruby-lang.org

Pure Object-oriented language Everything’s an object

Pure Object-oriented language Everything’s an object Interpretive, reflexive

Pure Object-oriented language Everything’s an object Interpretive, reflexive Java-like exception handling

Pure Object-oriented language Everything’s an object Interpretive, reflexive Java-like exception handling True mark-and-sweep garbage collection

Pure Object-oriented language Everything’s an object Interpretive, reflexive Java-like exception handling True mark-and-sweep garbage collection OS independent threading

Full-stack web framework

See: www.rubyonrails.org

Full-stack web framework True MVC

Full-stack web framework True MVC Convention over Configuration

Full-stack web framework True MVC Convention over Configuration Connects to Oracle, MySQL, etc.

Full-stack web framework True MVC Convention over Configuration Connects to Oracle, MySQL, etc. Runs on Apache, lighttpd, WebBrick

Full-stack web framework True MVC Convention over Configuration Connects to Oracle, MySQL, etc. Runs on Apache, lighttpd, WebBrick Extensive AJAX libraries

Ruby on Rails“Powerful web applications that formerly might have taken weeks or months to develop can be produced in a matter of days.”

Tim O’Reilly

“Rails has become a standard to which even well-established tools are comparing themselves to.”

Martin Fowler, Author of Refactoring, PoEAA, XP Explained

“Ruby on Rails is astounding. Using it is like watching a kung-fu movie, where a dozen bad-ass frameworks prepare to beat up the little newcomer only to be handed their asses in a variety of imaginative ways.”

Nathing Torkington, O’Reilly Media

Web 2.0

narcissus myth

entire web

narcosis book

narcosis technology

book primary metaphor

community primary metaphor

printed manuscript light

electric candle car

Technology

Web 2.0 / Enterprise 2.0

WEB 2.0, E-LEARNING 2.0, EAD 2.0

Web 2.0 for Library 2.0

Web 2.0 - ArbeitnehmerInnen 2.0 [allgemein]

Web 2.0 Educació 2.0

Web 2.0 Library 2.0 Librarian 2.0

Web 2.0 Library 2.0 Librarian 2.0

Web 2.0 Ringelmann Arthur. Web 2.02 Inhaltsangabe Was ist...

WEB 2.0 ECM = ECM 2.0

Web 2.0 – Modulo B Web 2.0 e Semantic Web: tecnologie e...

Web 2.0 to LIbrary 2.0

Herramientas 2.0 1. Web 2.0 y Biblioteca 2.0. Guión Origen....

Web 2.0/Library 2.0

Web 2.0, Bibliotheek 2.0 & Zorg 2.0

Web 2.0 or Blah 2.0 ?

Web 2.0 Educación 2.0: