Web 2.0

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

Book = Printed Manuscript Light Bulb = Electric Candle

The Narcissus Myth

Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage

The Narcissus Myth

Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage Radio = Wireless

The Narcissus Myth

Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage Radio = Wireless Film = Moving Pictures

The Narcissus Myth

Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage Radio = Wireless Film = Moving Pictures TV = Visual Radio

The Narcissus Myth

Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage Radio = Wireless Film = Moving Pictures TV = Visual Radio Computer = Calculator

Technologies change consciousness

Inventions reinvent us

The content is not the content

Print technology is:

sequential

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

Eliminating “speed bumps”

Rich Interface

Interactivity

Rich Interface

Interactivity

AJAX

Rich Interface

Interactivity

AJAX JavaScript XML JSON CSS2 XHTML

Rich Interface

Interactivity

AJAX JavaScript XML JSON CSS2 XHTML Prototype Script.aculo.us Dojo jQuery Yahoo! Developer Google Toolkit

Rich Interface

Interactivity

AJAX JavaScript XML JSON CSS2 XHTML sliders auto complete inline editing grid cell editing drag & drop opacity fade hover detail dynamic filters inline sorting

Social Software

Breaking down the “site barrier”

Social Software

Community of Code

Social Software

Community of Code

Mashups and Aggregation

Social Software

Breaking down the site barrier

Community of Code

micro formats

Social Software

Community of Code

micro formats HTML Simple Tags Standard Data Formats

Social Software

Community of Code

micro formats HTML Simple Tags Standard Data Formats Address Maps Calendar Events Reviews Resum és Classifieds Social Networks Blogs Bookmarks

Social Software

Community of Code

micro formats HTML Simple Tags Standard Data Formats Address Maps Calendar Events Reviews Resum és Classifieds Social Networks Blogs Bookmarks RSS Permalink SOA Web Services

Speed & Agility

Agile Development

Speed & Agility

Agile Development

Lightweight Languages

Speed & Agility

Agile Development

Perpetual Beta

Speed & Agility

Agile Development

Perpetual Beta

The Hybrid Developer

Speed & Agility

Agile Development

Perpetual Beta

Ruby on Rails

Agile Development

Perpetual Beta

Speed & Agility Python PHP Catalyst Flex Apollo Django JRuby MVC Ruby on Rails

Collective Intelligence

Massive Collaboration

Open Source

Open Source

Creative Commons

Open Source

Creative Commons

SOURCE FORGE

Open Source

Creative Commons

Collective Intelligence SOURCE FORGE mozilla.org

Data Management

Data is the “Intel Inside”

Data Management

Data is the “Intel Inside”

Amazon’s S3 Data Storage

AJAX Asynchronous 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 Path

http://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

Asynchronous data retrieval using XMLHttpRequest

Javascript binding everything together

AJAX Event Sequence

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';

}

}

fRow = -1;

} else {

}

}

function newXMLHttpRequest() {

var xmlreq = false;

// Create XMLHttpRequest object in non-Microsoft browsers

if (window.XMLHttpRequest) {

xmlreq = new XMLHttpRequest();

} else if (window.ActiveXObject) {

try {

// Try to create XMLHttpRequest in later versions of Internet Explorer

xmlreq = new ActiveXObject("Msxml2.XMLHTTP " );

} catch (e1) {

// Failed to create required ActiveXObject

try {

// Try version supported by older versions of Internet Explorer

xmlreq = new ActiveXObject( " Microsoft.XMLHTTP");

} catch (e2) {

// Unable to create an XMLHttpRequest by any means

xmlreq = false;

}

}

}

return xmlreq;

}

var xmlreq = false;

try {

xmlreq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e1) {

try {

xmlreq = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

xmlreq = false;

}

}

}

return xmlreq;

}

var xmlreq = false;

try {

xmlreq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e1) {

try {

xmlreq = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e2) {

xmlreq = false;

}

}

}

return xmlreq;

}

fRow = -1;

} else {

}

}

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);

}

}

}

}

fRow = -1;

//open HTTP POST connection to servlet, ‘true’ specifies asynchronous

} else {

}

}

AJAX

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.org

Dan Cederholm, Tantek Çelik, Brian Suda

blog.mozilla.com/faaborg

Alex Faaborg

microformatique.com

John Allsop

Microformats

A way of sharing data between websites

Microformats

Uses simple, open data formats

Microformats

Built on existing standards

Microformats

Readable by humans and machines

Microformats

Based on current developer practice

Microformats

Based on current developer practice

Decentralized content and services

Microformats

People and Organizations (hCard)

Microformats

Calendars and Events (hCalendar)

Microformats

Locations (geo)

Microformats

Locations (geo)

Opinions and Reviews (hReview)

Microformats

Locations (geo)

Social Networks (XFN)

Microformats

Locations (geo)

Resum és (hResume)

Microformats

Locations (geo)

Resum és (hResume)

Blogs, Bookmarks, etc. (hAtom)

Microformats

Locations (geo)

Resum és (hResume)

Classifieds (hListing)

Microformats

Locations (geo)

Resum és (hResume)

Classifieds (hListing)

Mozilla is focusing on these three

Microformats

Locations (geo)

hCard geo hCalendar

Microformats

Locations (geo)

Microformats

Locations (geo)

Space and Time also map to common representations of information

Microformats - hCard

<div>

<img src=“img/twb.jpg” />

<h2>

<a href= http://www.homeboyd.com >

<span>Tony</span>

<span>Boyd</span></a>

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

<h2>

<span>Tony</span>

</h2>

<h3>address</h3>

<div>

<span>CA</span>

<span>90068</span>

</div>

<h3>phone</h3>

<div>323-877-3054</div>

<h3>email</h3>

</div>

Microformats have a root element. hCard root elements have the class value=“vcard”.

<div class=“vcard” >

<h2>

<span>Tony</span>

</h2>

<h3>address</h3>

<div>

<span>CA</span>

<span>90068</span>

</div>

<h3>phone</h3>

<div>323-877-3054</div>

<h3>email</h3>

</div>

<div class=“vcard”>

<h2>

<span>Tony</span>

</h2>

<h3>address</h3>

<div>

<span>CA</span>

<span>90068</span>

</div>

<h3>phone</h3>

<div>323-877-3054</div>

<h3>email</h3>

</div>

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

<h2>

<a class=“fn” href= http://www.homeboyd.com >

<span class=“given-name” >Tony</span>

<span class=“family-name” >Boyd</span></a>

</h2>

<h3>address</h3>

<div>

<span>CA</span>

<span>90068</span>

</div>

<h3>phone</h3>

<div>323-877-3054</div>

<h3>email</h3>

</div>

<h2>

<a class=“fn” href= http://www.homeboyd.com >

<span class=“given-name”>Tony</span>

<span class=“family-name”>Boyd</span></a>

</h2>

<h3>address</h3>

<div>

<span>CA</span>

<span>90068</span>

</div>

<h3>phone</h3>

<div>323-877-3054</div>

<h3>email</h3>

</div>

URLs and Photos: class=“photo” class=“url”

<img src=“img/twb.jpg” class=“photo” />

<h2>

<a class=“fn url ” href= http://www.homeboyd.com >

</h2>

<h3>address</h3>

<div>

<span>CA</span>

<span>90068</span>

</div>

<h3>phone</h3>

<div>323-877-3054</div>

<h3>email</h3>

</div>

<img src=“img/twb.jpg” class=“photo ” />

<h2>

<a class=“fn url” href= http://www.homeboyd.com >

</h2>

<h3>address</h3>

<div>

<span>CA</span>

<span>90068</span>

</div>

<h3>phone</h3>

<div>323-877-3054</div>

<h3>email</h3>

</div>

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

<h2>

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

<h3>phone</h3>

<div>323-877-3054</div>

<h3>email</h3>

</div>

<h2>

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

<h3>phone</h3>

<div>323-877-3054</div>

<h3>email</h3>

</div>

email and phone: class=“email” class=“tel”

<h2>

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

<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.us Tagging, 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, not a technology” The Long Tail Data as the ‘ Intel Inside ” Trust your users Small Pieces Loosely Joined (microformats) Rich User Experience The Right to Remix “ Some rights reserved ” Software that gets better the more people user it Play Emergent: User behavior not predetermined Granular Addressability of Content The Perpetual Beta Gmail, Google Maps and AJAX: Rich user experiences

Web 2.0 Meme Map

The Web as Platform

User Positioning:

Core Competencies:

Flickr, de.licio.us Tagging, 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, not a technology” The Long Tail Data as the ‘ Intel Inside” Trust your users Small Pieces Loosely Joined (microformats) Rich User Experience The Right to Remix “ Some rights reserved” Play Emergent: User behavior not predetermined Granular Addressability of Content The Perpetual Beta Gmail, Google Maps and AJAX: Rich user experiences Software that gets better the more people use it

Web 2.0 Meme Map

The Web as Platform

User Positioning:

Core Competencies:

Flickr, de.licio.us Tagging, 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, not a technology” The Long Tail Data as the ‘ Intel Inside ” Small Pieces Loosely Joined (microformats ) Rich User Experience The Right to Remix “ Some rights reserved ” Software that gets better the more people user it Play Emergent: User behavior not predetermined Granular Addressability of Content The Perpetual Beta Gmail, Google Maps and AJAX: Rich user experiences Trust your users

Web 2.0 Meme Map

The Web as Platform

User Positioning:

Core Competencies:

Flickr, de.licio.us Tagging, 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, not a technology” Data as the ‘ Intel Inside” Trust your users Small Pieces Loosely Joined (microformats) Rich User Experience The Right to Remix “ Some rights reserved” Software that gets better the more people user it Play Emergent: User behavior not predetermined Granular Addressability of Content The Perpetual Beta Gmail, Google Maps and AJAX: Rich user experiences The Long Tail

Web 2.0 Meme Map

The Web as Platform

User Positioning:

Core Competencies:

Flickr, de.licio.us Tagging, 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, not a technology” The Long Tail Trust your users Small Pieces Loosely Joined (microformats) Rich User Experience The Right to Remix “ Some rights reserved” Software that gets better the more people user it Play Emergent: User behavior not predetermined Granular Addressability of Content The Perpetual Beta Gmail, Google Maps and AJAX: Rich user experiences Data as the ‘ Intel Inside’

Web 2.0 Meme Map

The Web as Platform

User Positioning:

Core Competencies:

Flickr, de.licio.us Tagging, 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, not a technology” The Long Tail Data as the ‘ Intel Inside” Trust your users Rich User Experience The Right to Remix “ Some rights reserved” Software that gets better the more people user it Play Emergent: User behavior not predetermined Granular Addressability of Content The Perpetual Beta Gmail, Google Maps and AJAX: Rich user experiences Small Pieces Loosely Joined (microformats)

Web 2.0 Meme Map

The Web as Platform

User Positioning:

Core Competencies:

Flickr, de.licio.us Tagging, 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, not a technology” The Long Tail Data as the ‘ Intel Inside” Trust your users Small Pieces Loosely Joined (microformats) Rich User Experience The Right to Remix “ Some rights reserved” Software that gets better the more people user it Play Emergent: User behavior not predetermined Granular Addressability of Content Gmail, Google Maps and AJAX: Rich user experiences The Perpetual Beta

Web 2.0 Meme Map

The Web as Platform

User Positioning:

Core Competencies:

Flickr, de.licio.us Tagging, 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, not a technology” The Long Tail Data as the ‘ Intel Inside” Trust your users Small Pieces Loosely Joined (microformats) The Right to Remix “ Some rights reserved” Software that gets better the more people user it Play Emergent: User behavior not predetermined Granular Addressability of Content The Perpetual Beta Gmail, Google Maps and AJAX: Rich user experiences Rich User Experience

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

User feedback and interactivity

Enterprise 2.0

User feedback and interactivity

Google Enterprise

Ruby 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

Ruby

Pure Object-oriented language

See: www.ruby-lang.org

Ruby

Everything’s an object

Ruby

Interpretive, reflexive

Ruby

Java-like exception handling

Ruby

True mark-and-sweep garbage collection

Ruby

True mark-and-sweep garbage collection

OS independent threading

Rails

Full-stack web framework

See: www.rubyonrails.org

Rails

True MVC

Rails

True MVC

Convention over Configuration

Rails

True MVC

Connects to Oracle, MySQL, etc.

Rails

True MVC

Runs on Apache, lighttpd, WebBrick

Rails

True MVC

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.”