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





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



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


AJAX

Rich Interface


AJAX

JavaScript

XMLJSON

XMLJSON

CSS2XHTML

CSS2XHTML

Rich Interface


AJAX

JavaScript

XMLJSON

XMLJSON

CSS2XHTML

CSS2XHTML

PrototypeScript.aculo.us

PrototypeScript.aculo.us

DojoDojo

jQueryjQuery

Yahoo!Developer

Yahoo!Developer

GoogleToolkitGoogleToolkit

Rich Interface


AJAX

JavaScript

XMLJSON

XMLJSON

CSS2XHTML

CSS2XHTML

sliderssliders

autocomplete

autocomplete

inlineeditinginline

editing

grid cellediting

grid celleditingdrag

&drop

drag &

drop

opacityfade

opacityfade

hoverdetailhoverdetail

dynamicfilters

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

HTMLSimple Tags

StandardData

Formats

StandardData

Formats

Social Software


microformats

HTMLSimple Tags

HTMLSimple Tags

StandardData

Formats

StandardData

Formats

AddressAddress

MapsMaps CalendarEvents

CalendarEvents

ReviewsReviews

ResumésResumés

ClassifiedsClassifieds

SocialNetworks

SocialNetworks

BlogsBookmarksBlogs

Bookmarks

Social Software


microformats

HTMLSimple Tags

HTMLSimple Tags

StandardData

Formats

StandardData

Formats

AddressAddress

MapsMaps CalendarEvents

CalendarEvents

ReviewsReviews

ResumésResumés

ClassifiedsClassifieds

SocialNetworks

SocialNetworks

BlogsBookmarksBlogs

Bookmarks

RSSRSS

PermalinkPermalink

SOAWeb Services

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


Ruby

on Rails


PythonPython

PHPPHP

CatalystCatalyst

FlexFlex

ApolloApollo

DjangoDjango

JRubyJRuby

MVCMVC

Speed & Agility

Ruby

on Rails

Collective Intelligence

Massive Collaboration


Massive Collaboration Open Source


Massive Collaboration Open Source Creative Commons



SOURCEFORGE



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





Asynchronous data retrieval using XMLHttpRequest

Javascript binding everything together

AJA

X

Eve

nt S

eque

nce

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














} }


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-



} }

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

Mozilla is focusing on these three

Microformats


hCard geo hCalendar

Microformats


Microformats


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...”>[email protected]</a>

</div>


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





</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 class=“vcard”><img src=“img/twb.jpg” /><h2>





</div>







</div>

Formatted Names:

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

Formatted Names:

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



<a class=“fn” href=http://www.homeboyd.com><span class=“given-name”>Tony</span><span class=“family-name”>Boyd</span></a>




</div>



<a class=“fn” href=http://www.homeboyd.com><span class=“given-name”>Tony</span><span class=“family-name”>Boyd</span></a>




</div>

URLs and Photos:

class=“photo”class=“url”

URLs and Photos:

class=“photo”class=“url”


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

<a class=“fn url” href=http://www.homeboyd.com><span class=“given-name”>Tony</span><span class=“family-name”>Boyd</span></a>




</div>







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







</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...”>[email protected]</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


Play


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

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

Pure Object-oriented language Everything’s an object


Ruby

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


Ruby

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


Ruby

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


Ruby

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


Rails

Full-stack web framework

See: www.rubyonrails.org

Rails

Full-stack web framework True MVC


Rails

Full-stack web framework True MVC Convention over Configuration


Rails

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


Rails

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


Rails

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

Technology

narcissus myth

entire web

narcosis book

narcosis technology

book primary metaphor

community primary metaphor

printed manuscript light

electric candle car