Web 2.0

4,912 views
4,838 views

Published on

In-house presentation on Web2.0 to Capital Group IT development group.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,912
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
173
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Web 2.0

    1. 1. Web 2.0 What is it? What does it mean to us?
    2. 2. Web 2.0 Presentation <ul><li>Part 1 </li></ul><ul><li>Conceptual View </li></ul>
    3. 3. Web 2.0 Presentation <ul><li>Part 1 </li></ul><ul><li>Conceptual View </li></ul><ul><li>Social View </li></ul>
    4. 4. Web 2.0 Presentation <ul><li>Part 1 </li></ul><ul><li>Conceptual View </li></ul><ul><li>Social View </li></ul><ul><li>Technical View </li></ul>
    5. 5. Web 2.0 Presentation <ul><li>Part 1 </li></ul><ul><li>Conceptual View </li></ul><ul><li>Social View </li></ul><ul><li>Technical View </li></ul>Part 2 Ruby on Rails Demo
    6. 6. Web 2.0 Presentation <ul><li>Part 1 </li></ul><ul><li>Conceptual View </li></ul><ul><li>Social View </li></ul><ul><li>Technical View </li></ul>Part 2 Ruby on Rails Demo SmartClient Demo
    7. 7. Web 2.0 Presentation <ul><li>Part 1 </li></ul><ul><li>Conceptual View </li></ul><ul><li>Social View </li></ul><ul><li>Technical View </li></ul>Part 2 Ruby on Rails Demo SmartClient Demo Possible Futures
    8. 8. Web 2.0 - Must Read <ul><li>What is Web 2.0? </li></ul><ul><li>Design Patterns and Business Models for the Next Generation of Software </li></ul><ul><li>by Tim O’Reilly </li></ul><ul><li>http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web20.html </li></ul>
    9. 9. Conceptual View Marshall McLuhan was right!
    10. 10. Marshall McLuhan <ul><li>The Narcissus Myth </li></ul><ul><li>The Medium is the Message </li></ul><ul><li>The Global Village </li></ul>“ We look at the present through a rear-view mirror. We march backwards into the future.”
    11. 11. The Narcissus Myth <ul><li>Fell in love with his own image </li></ul><ul><li>Did not recognize reflection as himself </li></ul><ul><li>Narcissus = narcosis </li></ul>
    12. 12. The Narcissus Myth <ul><li>Fell in love with his own image </li></ul><ul><li>Did not recognize reflection as himself </li></ul><ul><li>Narcissus = narcosis </li></ul><ul><li>Technology as extension of ourselves </li></ul>
    13. 13. The Narcissus Myth <ul><li>Fell in love with his own image </li></ul><ul><li>Did not recognize reflection as himself </li></ul><ul><li>Narcissus = narcosis </li></ul><ul><li>Technology as extension of ourselves </li></ul><ul><li>We fail to recognize implications of the new technology </li></ul>
    14. 14. The Narcissus Myth <ul><li>Fell in love with his own image </li></ul><ul><li>Did not recognize reflection as himself </li></ul><ul><li>Narcissus = narcosis </li></ul><ul><li>Technology as extension of ourselves </li></ul><ul><li>We fail to recognize implications of the new technology </li></ul><ul><li>We see the new in terms of the old </li></ul>
    15. 15. The Narcissus Myth <ul><li>Fell in love with his own image </li></ul><ul><li>Did not recognize reflection as himself </li></ul><ul><li>Narcissus = narcosis </li></ul>Book = Printed Manuscript
    16. 16. The Narcissus Myth <ul><li>Fell in love with his own image </li></ul><ul><li>Did not recognize reflection as himself </li></ul><ul><li>Narcissus = narcosis </li></ul>Book = Printed Manuscript Light Bulb = Electric Candle
    17. 17. The Narcissus Myth <ul><li>Fell in love with his own image </li></ul><ul><li>Did not recognize reflection as himself </li></ul><ul><li>Narcissus = narcosis </li></ul>Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage
    18. 18. The Narcissus Myth <ul><li>Fell in love with his own image </li></ul><ul><li>Did not recognize reflection as himself </li></ul><ul><li>Narcissus = narcosis </li></ul>Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage Radio = Wireless
    19. 19. The Narcissus Myth <ul><li>Fell in love with his own image </li></ul><ul><li>Did not recognize reflection as himself </li></ul><ul><li>Narcissus = narcosis </li></ul>Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage Radio = Wireless Film = Moving Pictures
    20. 20. The Narcissus Myth <ul><li>Fell in love with his own image </li></ul><ul><li>Did not recognize reflection as himself </li></ul><ul><li>Narcissus = narcosis </li></ul>Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage Radio = Wireless Film = Moving Pictures TV = Visual Radio
    21. 21. The Narcissus Myth <ul><li>Fell in love with his own image </li></ul><ul><li>Did not recognize reflection as himself </li></ul><ul><li>Narcissus = narcosis </li></ul>Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage Radio = Wireless Film = Moving Pictures TV = Visual Radio Computer = Calculator
    22. 22. The Medium is the Message <ul><li>Technologies change consciousness </li></ul><ul><li>Inventions reinvent us </li></ul><ul><li>The content is not the content </li></ul>
    23. 23. The Medium is the Message <ul><li>Print technology is: </li></ul><ul><li>sequential </li></ul>
    24. 24. The Medium is the Message <ul><li>Print technology is: </li></ul><ul><li>sequential </li></ul><ul><li>specializing </li></ul>
    25. 25. The Medium is the Message <ul><li>Print technology is: </li></ul><ul><li>sequential </li></ul><ul><li>specializing </li></ul><ul><li>fragmenting </li></ul>
    26. 30. Web 1.0 <ul><li>Web as Book </li></ul>
    27. 31. Web 1.0 <ul><li>Web as Book </li></ul><ul><li>Primary metaphor is the Page </li></ul>
    28. 32. Web 1.0 <ul><li>Web as Book </li></ul><ul><li>Primary metaphor is the Page </li></ul><ul><li>Author as Authority </li></ul>
    29. 33. Web 1.0 <ul><li>Web as Book </li></ul><ul><li>Primary metaphor is the Page </li></ul><ul><li>Author as Authority </li></ul><ul><li>Reader as Individual </li></ul>
    30. 34. Web 2.0 <ul><li>Web as Community </li></ul>
    31. 35. Web 2.0 <ul><li>Web as Community </li></ul><ul><li>Primary metaphor is the Village </li></ul>
    32. 36. Web 2.0 <ul><li>Web as Community </li></ul><ul><li>Primary metaphor is the Village </li></ul><ul><li>Author as Contributor </li></ul>
    33. 37. Web 2.0 <ul><li>Web as Community </li></ul><ul><li>Primary metaphor is the Village </li></ul><ul><li>Author as Contributor </li></ul><ul><li>Reader as Neighbor </li></ul>
    34. 38. Web as Community <ul><li>“ 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.” </li></ul>Ray Oldenburg’s “Third Place”
    35. 39. Web as Community <ul><li>“ 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.” </li></ul>Ray Oldenburg’s “Third Place”
    36. 40. Web 2.0 <ul><li>“… 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 </li></ul><ul><li>“ The edge dissolves the center” - Stowe Boyd, /Message </li></ul>
    37. 41. The Social View Meet Me @ MySpace
    38. 42. Social Networks <ul><li>Characterized by: </li></ul><ul><li>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 </li></ul>
    39. 43. Social Networks <ul><li>Characterized by: </li></ul><ul><li>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 </li></ul>
    40. 44. Social Networks <ul><li>Characterized by: </li></ul><ul><li>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 </li></ul>
    41. 45. Social Networks <ul><li>Characterized by: </li></ul><ul><li>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 </li></ul>
    42. 46. Social Networks <ul><li>Characterized by: </li></ul><ul><li>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 </li></ul>
    43. 47. Social Networks <ul><li>Characterized by: </li></ul><ul><li>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 </li></ul>
    44. 48. The Technical View Traveling Light
    45. 49. Technical View <ul><li>Characterized by: </li></ul><ul><li>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 </li></ul><ul><li>hCard hCal hAtom maps frameworks sourceforge.net apache rss hyperlink permalink creative commons python flex apollo perl hybrid css lightweight podcast xhtml BitTorrent </li></ul>
    46. 50. Rich Interface <ul><li>Breaking down the “page barrier” </li></ul>
    47. 51. Rich Interface <ul><li>Breaking down the “page barrier” </li></ul><ul><li>Eliminating “speed bumps” </li></ul>
    48. 52. Rich Interface <ul><li>Breaking down the “page barrier” </li></ul><ul><li>Eliminating “speed bumps” </li></ul><ul><li>Interactivity </li></ul>
    49. 53. Rich Interface <ul><li>Breaking down the “page barrier” </li></ul><ul><li>Eliminating “speed bumps” </li></ul><ul><li>Interactivity </li></ul>AJAX
    50. 54. Rich Interface <ul><li>Breaking down the “page barrier” </li></ul><ul><li>Eliminating “speed bumps” </li></ul><ul><li>Interactivity </li></ul>AJAX JavaScript XML JSON CSS2 XHTML
    51. 55. Rich Interface <ul><li>Breaking down the “page barrier” </li></ul><ul><li>Eliminating “speed bumps” </li></ul><ul><li>Interactivity </li></ul>AJAX JavaScript XML JSON CSS2 XHTML Prototype Script.aculo.us Dojo jQuery Yahoo! Developer Google Toolkit
    52. 56. Rich Interface <ul><li>Breaking down the “page barrier” </li></ul><ul><li>Eliminating “speed bumps” </li></ul><ul><li>Interactivity </li></ul>AJAX JavaScript XML JSON CSS2 XHTML sliders auto complete inline editing grid cell editing drag & drop opacity fade hover detail dynamic filters inline sorting
    53. 57. Social Software <ul><li>Breaking down the “site barrier” </li></ul>
    54. 58. Social Software <ul><li>Breaking down the “site barrier” </li></ul><ul><li>Community of Code </li></ul>
    55. 59. Social Software <ul><li>Breaking down the “site barrier” </li></ul><ul><li>Community of Code </li></ul><ul><li>Mashups and Aggregation </li></ul>
    56. 60. Social Software <ul><li>Breaking down the site barrier </li></ul><ul><li>Community of Code </li></ul><ul><li>Mashups and Aggregation </li></ul>micro formats
    57. 61. Social Software <ul><li>Breaking down the site barrier </li></ul><ul><li>Community of Code </li></ul><ul><li>Mashups and Aggregation </li></ul>micro formats HTML Simple Tags Standard Data Formats
    58. 62. Social Software <ul><li>Breaking down the site barrier </li></ul><ul><li>Community of Code </li></ul><ul><li>Mashups and Aggregation </li></ul>micro formats HTML Simple Tags Standard Data Formats Address Maps Calendar Events Reviews Resum és Classifieds Social Networks Blogs Bookmarks
    59. 63. Social Software <ul><li>Breaking down the site barrier </li></ul><ul><li>Community of Code </li></ul><ul><li>Mashups and Aggregation </li></ul>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
    60. 64. Speed & Agility <ul><li>Agile Development </li></ul>
    61. 65. Speed & Agility <ul><li>Agile Development </li></ul><ul><li>Lightweight Languages </li></ul>
    62. 66. Speed & Agility <ul><li>Agile Development </li></ul><ul><li>Lightweight Languages </li></ul><ul><li>Perpetual Beta </li></ul>
    63. 67. Speed & Agility <ul><li>Agile Development </li></ul><ul><li>Lightweight Languages </li></ul><ul><li>Perpetual Beta </li></ul><ul><li>The Hybrid Developer </li></ul>
    64. 68. Speed & Agility <ul><li>Agile Development </li></ul><ul><li>Lightweight Languages </li></ul><ul><li>Perpetual Beta </li></ul><ul><li>The Hybrid Developer </li></ul>Ruby on Rails
    65. 69. <ul><li>Agile Development </li></ul><ul><li>Lightweight Languages </li></ul><ul><li>Perpetual Beta </li></ul><ul><li>The Hybrid Developer </li></ul>Speed & Agility Python PHP Catalyst Flex Apollo Django JRuby MVC Ruby on Rails
    66. 70. Collective Intelligence <ul><li>Massive Collaboration </li></ul>
    67. 71. Collective Intelligence <ul><li>Massive Collaboration </li></ul><ul><li>Open Source </li></ul>
    68. 72. Collective Intelligence <ul><li>Massive Collaboration </li></ul><ul><li>Open Source </li></ul><ul><li>Creative Commons </li></ul>
    69. 73. Collective Intelligence <ul><li>Massive Collaboration </li></ul><ul><li>Open Source </li></ul><ul><li>Creative Commons </li></ul>SOURCE FORGE
    70. 74. <ul><li>Massive Collaboration </li></ul><ul><li>Open Source </li></ul><ul><li>Creative Commons </li></ul>Collective Intelligence SOURCE FORGE mozilla.org
    71. 75. Data Management <ul><li>Data is the “Intel Inside” </li></ul>
    72. 76. Data Management <ul><li>Data is the “Intel Inside” </li></ul><ul><li>Amazon’s S3 Data Storage </li></ul>
    73. 77. AJAX Asynchronous Javascript and XML <ul><li>“Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways.” </li></ul><ul><li>Jesse James Garrett, Adaptive Path </li></ul><ul><li>http://www.adaptivepath.com/publications/essays/archives/000385.php </li></ul>
    74. 78. AJAX Asynchronous Javascript and XML <ul><li>Standards-based presentation using XHTML and CSS </li></ul>
    75. 79. AJAX Asynchronous Javascript and XML <ul><li>Standards-based presentation using XHTML and CSS </li></ul><ul><li>Dynamic display and interaction using the Document Object Model (DOM) </li></ul>
    76. 80. AJAX Asynchronous Javascript and XML <ul><li>Standards-based presentation using XHTML and CSS </li></ul><ul><li>Dynamic display and interaction using the Document Object Model (DOM) </li></ul><ul><li>Data interchange and manipulation using XML and XSLT </li></ul>
    77. 81. AJAX Asynchronous Javascript and XML <ul><li>Standards-based presentation using XHTML and CSS </li></ul><ul><li>Dynamic display and interaction using the Document Object Model (DOM) </li></ul><ul><li>Data interchange and manipulation using XML and XSLT </li></ul><ul><li>Asynchronous data retrieval using XMLHttpRequest </li></ul>
    78. 82. AJAX Asynchronous Javascript and XML <ul><li>Standards-based presentation using XHTML and CSS </li></ul><ul><li>Dynamic display and interaction using the Document Object Model (DOM) </li></ul><ul><li>Data interchange and manipulation using XML and XSLT </li></ul><ul><li>Asynchronous data retrieval using XMLHttpRequest </li></ul><ul><li>Javascript binding everything together </li></ul>
    79. 83. AJAX Event Sequence
    80. 84. AJAX - XMLHttpRequest <ul><li>function searchWordKeyPressed(event) { </li></ul><ul><li>/** cross-browser event check **/ </li></ul><ul><li>if (!event) var event = window.event; </li></ul><ul><li>// test for up/downarrow or enter key (will be handled by a different event) </li></ul><ul><li>if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13) return; // move focus out of autosuggest table </li></ul><ul><li>fRow = -1; </li></ul><ul><li>// set the text the user typed as a global var </li></ul><ul><li>suggestString = document.getElementById('searchWord').value; </li></ul><ul><li>// make the AJAX call </li></ul><ul><li>if (suggestString != '') { </li></ul><ul><li>var req = newXMLHttpRequest(); </li></ul><ul><li>req.onreadystatechange = getReadyStateHandler(req, updateSuggestions); </li></ul><ul><li> </li></ul><ul><li>req.open(&quot;POST&quot;, &quot;LookupServlet&quot;, true); </li></ul><ul><li>req.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;); </li></ul><ul><li>req.send(&quot;hint=&quot; + suggestString); </li></ul><ul><li>} else { </li></ul><ul><li>document.getElementById('hints').style.display = 'none'; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
    81. 85. AJAX - XMLHttpRequest <ul><li>function searchWordKeyPressed(event) { </li></ul><ul><li>/** cross-browser event check **/ </li></ul><ul><li>if (!event) var event = window.event; </li></ul><ul><li>// test for up/downarrow or enter key (will be handled by a different event) </li></ul><ul><li>if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13) return; // move focus out of autosuggest table </li></ul><ul><li>fRow = -1; </li></ul><ul><li>// set the text the user typed as a global var </li></ul><ul><li>suggestString = document.getElementById('searchWord').value; </li></ul><ul><li>// make the AJAX call </li></ul><ul><li>if (suggestString != '') { </li></ul><ul><li>var req = newXMLHttpRequest(); </li></ul><ul><li>req.onreadystatechange = getReadyStateHandler(req, updateSuggestions); </li></ul><ul><li> </li></ul><ul><li>req.open(&quot;POST&quot;, &quot;LookupServlet&quot;, true); </li></ul><ul><li>req.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;); </li></ul><ul><li>req.send(&quot;hint=&quot; + suggestString); </li></ul><ul><li>} else { </li></ul><ul><li>document.getElementById('hints').style.display = 'none'; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
    82. 86. AJAX - XMLHttpRequest <ul><li>function newXMLHttpRequest() { </li></ul><ul><li>var xmlreq = false; </li></ul><ul><li>// Create XMLHttpRequest object in non-Microsoft browsers </li></ul><ul><li>if (window.XMLHttpRequest) { </li></ul><ul><li>xmlreq = new XMLHttpRequest(); </li></ul><ul><li>} else if (window.ActiveXObject) { </li></ul><ul><li>try { </li></ul><ul><li>// Try to create XMLHttpRequest in later versions of Internet Explorer </li></ul><ul><li>xmlreq = new ActiveXObject(&quot;Msxml2.XMLHTTP &quot; ); </li></ul><ul><li>} catch (e1) { </li></ul><ul><li>// Failed to create required ActiveXObject </li></ul><ul><li>try { </li></ul><ul><li>// Try version supported by older versions of Internet Explorer </li></ul><ul><li>xmlreq = new ActiveXObject( &quot; Microsoft.XMLHTTP&quot;); </li></ul><ul><li>} catch (e2) { </li></ul><ul><li>// Unable to create an XMLHttpRequest by any means </li></ul><ul><li>xmlreq = false; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>return xmlreq; </li></ul><ul><li>} </li></ul>
    83. 87. AJAX - XMLHttpRequest <ul><li>function newXMLHttpRequest() { </li></ul><ul><li>var xmlreq = false; </li></ul><ul><li>// Create XMLHttpRequest object in non-Microsoft browsers </li></ul><ul><li>if (window.XMLHttpRequest) { </li></ul><ul><li>xmlreq = new XMLHttpRequest(); </li></ul><ul><li>} else if (window.ActiveXObject) { </li></ul><ul><li>try { </li></ul><ul><li>// Try to create XMLHttpRequest in later versions of Internet Explorer </li></ul><ul><li>xmlreq = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); </li></ul><ul><li>} catch (e1) { </li></ul><ul><li>// Failed to create required ActiveXObject </li></ul><ul><li>try { </li></ul><ul><li>// Try version supported by older versions of Internet Explorer </li></ul><ul><li>xmlreq = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); </li></ul><ul><li>} catch (e2) { </li></ul><ul><li>// Unable to create an XMLHttpRequest by any means </li></ul><ul><li>xmlreq = false; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>return xmlreq; </li></ul><ul><li>} </li></ul>
    84. 88. AJAX - XMLHttpRequest <ul><li>function newXMLHttpRequest() { </li></ul><ul><li>var xmlreq = false; </li></ul><ul><li>// Create XMLHttpRequest object in non-Microsoft browsers </li></ul><ul><li>if (window.XMLHttpRequest) { </li></ul><ul><li>xmlreq = new XMLHttpRequest(); </li></ul><ul><li>} else if (window.ActiveXObject) { </li></ul><ul><li>try { </li></ul><ul><li>// Try to create XMLHttpRequest in later versions of Internet Explorer </li></ul><ul><li>xmlreq = new ActiveXObject(&quot;Msxml2.XMLHTTP&quot;); </li></ul><ul><li>} catch (e1) { </li></ul><ul><li>// Failed to create required ActiveXObject </li></ul><ul><li>try { </li></ul><ul><li>// Try version supported by older versions of Internet Explorer </li></ul><ul><li>xmlreq = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;); </li></ul><ul><li>} catch (e2) { </li></ul><ul><li>// Unable to create an XMLHttpRequest by any means </li></ul><ul><li>xmlreq = false; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>return xmlreq; </li></ul><ul><li>} </li></ul>
    85. 89. AJAX - XMLHttpRequest <ul><li>function searchWordKeyPressed(event) { </li></ul><ul><li>/** cross-browser event check **/ </li></ul><ul><li>if (!event) var event = window.event; </li></ul><ul><li>// test for up/downarrow or enter key (will be handled by a different event) </li></ul><ul><li>if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13) return; // move focus out of autosuggest table </li></ul><ul><li>fRow = -1; </li></ul><ul><li>// set the text the user typed as a global var </li></ul><ul><li>suggestString = document.getElementById('searchWord').value; </li></ul><ul><li>// make the AJAX call </li></ul><ul><li>if (suggestString != '') { </li></ul><ul><li>var req = newXMLHttpRequest(); </li></ul><ul><li>req.onreadystatechange = getReadyStateHandler(req, updateSuggestions); </li></ul><ul><li> </li></ul><ul><li>req.open(&quot;POST&quot;, &quot;LookupServlet&quot;, true); </li></ul><ul><li>req.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;); </li></ul><ul><li>req.send(&quot;hint=&quot; + suggestString); </li></ul><ul><li>} else { </li></ul><ul><li>document.getElementById('hints').style.display = 'none'; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
    86. 90. AJAX - XMLHttpRequest <ul><li>function getReadyStateHandler(req, responseXmlHandler) { </li></ul><ul><li>// Returns a function that waits for the specified XMLHttpRequest </li></ul><ul><li>// to complete, then passes the XML response to the given handler function. </li></ul><ul><li>// req - The XMLHttpRequest whose state is changing </li></ul><ul><li>// responseXmlHandler - Function to pass the XML response to </li></ul><ul><li>return function () { </li></ul><ul><li>// If the request's status is &quot;complete&quot; </li></ul><ul><li>if (req.readyState == 4) { </li></ul><ul><li>// Check that we received a successful response from the server </li></ul><ul><li>if (req.status == 200) { </li></ul><ul><li>// Pass the XML payload of the response to the handler function. </li></ul><ul><li>responseXmlHandler(req.responseXML); </li></ul><ul><li>} else { </li></ul><ul><li>// An HTTP problem has occurred </li></ul><ul><li>alert(&quot;HTTP error &quot;+req.status+&quot;: &quot;+req.statusText); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
    87. 91. AJAX - XMLHttpRequest <ul><li>function searchWordKeyPressed(event) { </li></ul><ul><li>/** cross-browser event check **/ </li></ul><ul><li>if (!event) var event = window.event; </li></ul><ul><li>// test for up/downarrow or enter key (will be handled by a different event) </li></ul><ul><li>if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13) return; // move focus out of autosuggest table </li></ul><ul><li>fRow = -1; </li></ul><ul><li>// set the text the user typed as a global var </li></ul><ul><li>suggestString = document.getElementById('searchWord').value; </li></ul><ul><li>// make the AJAX call </li></ul><ul><li>if (suggestString != '') { </li></ul><ul><li>var req = newXMLHttpRequest(); </li></ul><ul><li>req.onreadystatechange = getReadyStateHandler(req, updateSuggestions); </li></ul><ul><li> //open HTTP POST connection to servlet, ‘true’ specifies asynchronous </li></ul><ul><li>req.open(&quot;POST&quot;, &quot;LookupServlet&quot;, true); </li></ul><ul><li>req.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;); </li></ul><ul><li>req.send(&quot;hint=&quot; + suggestString); </li></ul><ul><li>} else { </li></ul><ul><li>document.getElementById('hints').style.display = 'none'; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
    88. 92. AJAX <ul><li>Two formats for data serialization: </li></ul><ul><li>XML </li></ul><ul><li>JSON (JavaScript Object Notation) </li></ul>
    89. 93. AJAX - JSON <ul><li>Construct a JSON representation of an object on the server: </li></ul><ul><li>{ </li></ul><ul><li>&quot;firstName&quot;: &quot;John&quot;, </li></ul><ul><li>&quot;lastName&quot;: &quot;Smith&quot;, </li></ul><ul><li>&quot;address&quot;: { </li></ul><ul><li>&quot;streetAddress&quot;: &quot;21 2nd Street&quot;, </li></ul><ul><li>&quot;city&quot;: &quot;New York&quot;, </li></ul><ul><li>&quot;state&quot;: &quot;NY&quot;, </li></ul><ul><li>&quot;postalCode&quot;: 10021 </li></ul><ul><li>}, </li></ul><ul><li>&quot;phoneNumbers&quot;: [ </li></ul><ul><li>&quot;212 732-1234&quot;, </li></ul><ul><li>&quot;646 123-4567&quot; </li></ul><ul><li>] </li></ul><ul><li>} </li></ul>
    90. 94. AJAX - JSON <ul><li>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: </li></ul><ul><li>var p = eval(“(“ + JSON_text + “)”); </li></ul><ul><li>and the fields p.firstName, p.address.city, p.phoneNumbers[0] , and so on are then accessible </li></ul>
    91. 95. Microformats <ul><li>microformats.org </li></ul><ul><li>Dan Cederholm, Tantek Çelik, Brian Suda </li></ul><ul><li>blog.mozilla.com/faaborg </li></ul><ul><li>Alex Faaborg </li></ul><ul><li>microformatique.com </li></ul><ul><li>John Allsop </li></ul>
    92. 96. Microformats <ul><li>A way of sharing data between websites </li></ul>
    93. 97. Microformats <ul><li>A way of sharing data between websites </li></ul><ul><li>Uses simple, open data formats </li></ul>
    94. 98. Microformats <ul><li>A way of sharing data between websites </li></ul><ul><li>Uses simple, open data formats </li></ul><ul><li>Built on existing standards </li></ul>
    95. 99. Microformats <ul><li>A way of sharing data between websites </li></ul><ul><li>Uses simple, open data formats </li></ul><ul><li>Built on existing standards </li></ul><ul><li>Readable by humans and machines </li></ul>
    96. 100. Microformats <ul><li>A way of sharing data between websites </li></ul><ul><li>Uses simple, open data formats </li></ul><ul><li>Built on existing standards </li></ul><ul><li>Readable by humans and machines </li></ul><ul><li>Based on current developer practice </li></ul>
    97. 101. Microformats <ul><li>A way of sharing data between websites </li></ul><ul><li>Uses simple, open data formats </li></ul><ul><li>Built on existing standards </li></ul><ul><li>Readable by humans and machines </li></ul><ul><li>Based on current developer practice </li></ul><ul><li>Decentralized content and services </li></ul>
    98. 102. Microformats <ul><li>People and Organizations (hCard) </li></ul>
    99. 103. Microformats <ul><li>People and Organizations (hCard) </li></ul><ul><li>Calendars and Events (hCalendar) </li></ul>
    100. 104. Microformats <ul><li>People and Organizations (hCard) </li></ul><ul><li>Calendars and Events (hCalendar) </li></ul><ul><li>Locations (geo) </li></ul>
    101. 105. Microformats <ul><li>People and Organizations (hCard) </li></ul><ul><li>Calendars and Events (hCalendar) </li></ul><ul><li>Locations (geo) </li></ul><ul><li>Opinions and Reviews (hReview) </li></ul>
    102. 106. Microformats <ul><li>People and Organizations (hCard) </li></ul><ul><li>Calendars and Events (hCalendar) </li></ul><ul><li>Locations (geo) </li></ul><ul><li>Opinions and Reviews (hReview) </li></ul><ul><li>Social Networks (XFN) </li></ul>
    103. 107. Microformats <ul><li>People and Organizations (hCard) </li></ul><ul><li>Calendars and Events (hCalendar) </li></ul><ul><li>Locations (geo) </li></ul><ul><li>Opinions and Reviews (hReview) </li></ul><ul><li>Social Networks (XFN) </li></ul><ul><li>Resum és (hResume) </li></ul>
    104. 108. Microformats <ul><li>People and Organizations (hCard) </li></ul><ul><li>Calendars and Events (hCalendar) </li></ul><ul><li>Locations (geo) </li></ul><ul><li>Opinions and Reviews (hReview) </li></ul><ul><li>Social Networks (XFN) </li></ul><ul><li>Resum és (hResume) </li></ul><ul><li>Blogs, Bookmarks, etc. (hAtom) </li></ul>
    105. 109. Microformats <ul><li>People and Organizations (hCard) </li></ul><ul><li>Calendars and Events (hCalendar) </li></ul><ul><li>Locations (geo) </li></ul><ul><li>Opinions and Reviews (hReview) </li></ul><ul><li>Social Networks (XFN) </li></ul><ul><li>Resum és (hResume) </li></ul><ul><li>Blogs, Bookmarks, etc. (hAtom) </li></ul><ul><li>Classifieds (hListing) </li></ul>
    106. 110. Microformats <ul><li>People and Organizations (hCard) </li></ul><ul><li>Calendars and Events (hCalendar) </li></ul><ul><li>Locations (geo) </li></ul><ul><li>Opinions and Reviews (hReview) </li></ul><ul><li>Social Networks (XFN) </li></ul><ul><li>Resum és (hResume) </li></ul><ul><li>Blogs, Bookmarks, etc. (hAtom) </li></ul><ul><li>Classifieds (hListing) </li></ul>Mozilla is focusing on these three
    107. 111. Microformats <ul><li>People and Organizations (hCard) </li></ul><ul><li>Calendars and Events (hCalendar) </li></ul><ul><li>Locations (geo) </li></ul>hCard geo hCalendar
    108. 112. Microformats <ul><li>People and Organizations (hCard) </li></ul><ul><li>Calendars and Events (hCalendar) </li></ul><ul><li>Locations (geo) </li></ul>
    109. 113. Microformats <ul><li>People and Organizations (hCard) </li></ul><ul><li>Calendars and Events (hCalendar) </li></ul><ul><li>Locations (geo) </li></ul>Space and Time also map to common representations of information
    110. 114. Microformats - hCard <ul><li><div> </li></ul><ul><li><img src=“img/twb.jpg” /> </li></ul><ul><li><h2> </li></ul><ul><li><a href= http://www.homeboyd.com > </li></ul><ul><li><span>Tony</span> </li></ul><ul><li><span>Boyd</span></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>1923 N. Gramercy Place</div> </li></ul><ul><li><span>Los Angeles</span> </li></ul><ul><li><span>CA</span> </li></ul><ul><li><span>90068</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>323-877-3054</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=“mailto...”>tb@homeboyd.com</a> </li></ul><ul><li></div> </li></ul>
    111. 115. Microformats - hCard <ul><li><div> </li></ul><ul><li><img src=“img/twb.jpg” /> </li></ul><ul><li><h2> </li></ul><ul><li><a href= http://www.homeboyd.com > </li></ul><ul><li><span>Tony</span> </li></ul><ul><li><span>Boyd</span></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>1923 N. Gramercy Place</div> </li></ul><ul><li><span>Los Angeles</span> </li></ul><ul><li><span>CA</span> </li></ul><ul><li><span>90068</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>323-877-3054</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=“mailto...”>tb@homeboyd.com</a> </li></ul><ul><li></div> </li></ul>Microformats have a root element. hCard root elements have the class value=“vcard”.
    112. 116. Microformats - hCard <ul><li><div class=“vcard” > </li></ul><ul><li><img src=“img/twb.jpg” /> </li></ul><ul><li><h2> </li></ul><ul><li><a href= http://www.homeboyd.com > </li></ul><ul><li><span>Tony</span> </li></ul><ul><li><span>Boyd</span></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>1923 N. Gramercy Place</div> </li></ul><ul><li><span>Los Angeles</span> </li></ul><ul><li><span>CA</span> </li></ul><ul><li><span>90068</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>323-877-3054</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=“mailto...”>tb@homeboyd.com</a> </li></ul><ul><li></div> </li></ul>
    113. 117. Microformats - hCard <ul><li><div class=“vcard”> </li></ul><ul><li><img src=“img/twb.jpg” /> </li></ul><ul><li><h2> </li></ul><ul><li><a href= http://www.homeboyd.com > </li></ul><ul><li><span>Tony</span> </li></ul><ul><li><span>Boyd</span></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>1923 N. Gramercy Place</div> </li></ul><ul><li><span>Los Angeles</span> </li></ul><ul><li><span>CA</span> </li></ul><ul><li><span>90068</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>323-877-3054</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=“mailto...”>tb@homeboyd.com</a> </li></ul><ul><li></div> </li></ul>Formatted Names: class=“fn” (root) class=“given-name” class=“family-name”
    114. 118. Microformats - hCard <ul><li><div class=“vcard”> </li></ul><ul><li><img src=“img/twb.jpg” /> </li></ul><ul><li><h2> </li></ul><ul><li><a class=“fn” href= http://www.homeboyd.com > </li></ul><ul><li><span class=“given-name” >Tony</span> </li></ul><ul><li><span class=“family-name” >Boyd</span></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>1923 N. Gramercy Place</div> </li></ul><ul><li><span>Los Angeles</span> </li></ul><ul><li><span>CA</span> </li></ul><ul><li><span>90068</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>323-877-3054</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=“mailto...”>tb@homeboyd.com</a> </li></ul><ul><li></div> </li></ul>
    115. 119. Microformats - hCard <ul><li><div class=“vcard”> </li></ul><ul><li><img src=“img/twb.jpg” /> </li></ul><ul><li><h2> </li></ul><ul><li><a class=“fn” href= http://www.homeboyd.com > </li></ul><ul><li><span class=“given-name”>Tony</span> </li></ul><ul><li><span class=“family-name”>Boyd</span></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>1923 N. Gramercy Place</div> </li></ul><ul><li><span>Los Angeles</span> </li></ul><ul><li><span>CA</span> </li></ul><ul><li><span>90068</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>323-877-3054</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=“mailto...”>tb@homeboyd.com</a> </li></ul><ul><li></div> </li></ul>URLs and Photos: class=“photo” class=“url”
    116. 120. Microformats - hCard <ul><li><div class=“vcard”> </li></ul><ul><li><img src=“img/twb.jpg” class=“photo” /> </li></ul><ul><li><h2> </li></ul><ul><li><a class=“fn url ” href= http://www.homeboyd.com > </li></ul><ul><li><span class=“given-name”>Tony</span> </li></ul><ul><li><span class=“family-name”>Boyd</span></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>1923 N. Gramercy Place</div> </li></ul><ul><li><span>Los Angeles</span> </li></ul><ul><li><span>CA</span> </li></ul><ul><li><span>90068</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>323-877-3054</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=“mailto...”>tb@homeboyd.com</a> </li></ul><ul><li></div> </li></ul>
    117. 121. Microformats - hCard <ul><li><div class=“vcard”> </li></ul><ul><li><img src=“img/twb.jpg” class=“photo ” /> </li></ul><ul><li><h2> </li></ul><ul><li><a class=“fn url” href= http://www.homeboyd.com > </li></ul><ul><li><span class=“given-name”>Tony</span> </li></ul><ul><li><span class=“family-name”>Boyd</span></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div> </li></ul><ul><li><div>1923 N. Gramercy Place</div> </li></ul><ul><li><span>Los Angeles</span> </li></ul><ul><li><span>CA</span> </li></ul><ul><li><span>90068</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>323-877-3054</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=“mailto...”>tb@homeboyd.com</a> </li></ul><ul><li></div> </li></ul>Addresses: class=“adr” (root) class=“street-address” class=“locality” class=“region” class=“postal-code” class=“country-name”
    118. 122. Microformats - hCard <ul><li><div class=“vcard”> </li></ul><ul><li><img src=“img/twb.jpg” class=“photo” /> </li></ul><ul><li><h2> </li></ul><ul><li><a class=“fn url” href= http://www.homeboyd.com > </li></ul><ul><li><span class=“given-name”>Tony</span> </li></ul><ul><li><span class=“family-name”>Boyd</span></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div class=“adr” > </li></ul><ul><li><div class=“street-address” >1923 N. Gramercy Place</div> </li></ul><ul><li><span class=“locality” >Los Angeles</span> </li></ul><ul><li><span class=“region” >CA</span> </li></ul><ul><li><span class=“postal-code” >90068</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>323-877-3054</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=“mailto...”>tb@homeboyd.com</a> </li></ul><ul><li></div> </li></ul>
    119. 123. Microformats - hCard <ul><li><div class=“vcard”> </li></ul><ul><li><img src=“img/twb.jpg” class=“photo” /> </li></ul><ul><li><h2> </li></ul><ul><li><a class=“fn url” href= http://www.homeboyd.com > </li></ul><ul><li><span class=“given-name”>Tony</span> </li></ul><ul><li><span class=“family-name”>Boyd</span></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div class=“adr”> </li></ul><ul><li><div class=“street-address”>1923 N. Gramercy Place</div> </li></ul><ul><li><span class=“locality”>Los Angeles</span> </li></ul><ul><li><span class=“region”>CA</span> </li></ul><ul><li><span class=“postal-code”>90068</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div>323-877-3054</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a href=“mailto...”>tb@homeboyd.com</a> </li></ul><ul><li></div> </li></ul>email and phone: class=“email” class=“tel”
    120. 124. Microformats - hCard <ul><li><div class=“vcard”> </li></ul><ul><li><img src=“img/twb.jpg” class=“photo” /> </li></ul><ul><li><h2> </li></ul><ul><li><a class=“fn url” href= http://www.homeboyd.com > </li></ul><ul><li><span class=“given-name”>Tony</span> </li></ul><ul><li><span class=“family-name”>Boyd</span></a> </li></ul><ul><li></h2> </li></ul><ul><li><h3>address</h3> </li></ul><ul><li><div class=“adr”> </li></ul><ul><li><div class=“street-address”>1923 N. Gramercy Place</div> </li></ul><ul><li><span class=“locality”>Los Angeles</span> </li></ul><ul><li><span class=“region”>CA</span> </li></ul><ul><li><span class=“postal-code”>90068</span> </li></ul><ul><li></div> </li></ul><ul><li><h3>phone</h3> </li></ul><ul><li><div class=“phone” >323-877-3054</div> </li></ul><ul><li><h3>email</h3> </li></ul><ul><li><a class=“email” href=“mailto...”>tb@homeboyd.com</a> </li></ul><ul><li></div> </li></ul>
    121. 125. Web 2.0 Meme Map <ul><li>Strategic Positioning: </li></ul><ul><li>The Web as Platform </li></ul><ul><li>User Positioning: </li></ul><ul><li>You control your own data </li></ul><ul><li>Core Competencies: </li></ul><ul><li>Services not packaged sofware </li></ul><ul><li>Architecture of Participation </li></ul><ul><li>Cost-effective scalability </li></ul><ul><li>Remixable data source and data transformations </li></ul><ul><li>Software above the level of a single device </li></ul><ul><li>Harnessing collective intelligence </li></ul>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
    122. 126. Web 2.0 Meme Map <ul><li>Strategic Positioning: </li></ul><ul><li>The Web as Platform </li></ul><ul><li>User Positioning: </li></ul><ul><li>You control your own data </li></ul><ul><li>Core Competencies: </li></ul><ul><li>Services not packaged sofware </li></ul><ul><li>Architecture of Participation </li></ul><ul><li>Cost-effective scalability </li></ul><ul><li>Remixable data source and data transformations </li></ul><ul><li>Software above the level of a single device </li></ul><ul><li>Harnessing collective intelligence </li></ul>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
    123. 127. Web 2.0 Meme Map <ul><li>Strategic Positioning: </li></ul><ul><li>The Web as Platform </li></ul><ul><li>User Positioning: </li></ul><ul><li>You control your own data </li></ul><ul><li>Core Competencies: </li></ul><ul><li>Services not packaged sofware </li></ul><ul><li>Architecture of Participation </li></ul><ul><li>Cost-effective scalability </li></ul><ul><li>Remixable data source and data transformations </li></ul><ul><li>Software above the level of a single device </li></ul><ul><li>Harnessing collective intelligence </li></ul>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
    124. 128. Web 2.0 Meme Map <ul><li>Strategic Positioning: </li></ul><ul><li>The Web as Platform </li></ul><ul><li>User Positioning: </li></ul><ul><li>You control your own data </li></ul><ul><li>Core Competencies: </li></ul><ul><li>Services not packaged sofware </li></ul><ul><li>Architecture of Participation </li></ul><ul><li>Cost-effective scalability </li></ul><ul><li>Remixable data source and data transformations </li></ul><ul><li>Software above the level of a single device </li></ul><ul><li>Harnessing collective intelligence </li></ul>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
    125. 129. Web 2.0 Meme Map <ul><li>Strategic Positioning: </li></ul><ul><li>The Web as Platform </li></ul><ul><li>User Positioning: </li></ul><ul><li>You control your own data </li></ul><ul><li>Core Competencies: </li></ul><ul><li>Services not packaged sofware </li></ul><ul><li>Architecture of Participation </li></ul><ul><li>Cost-effective scalability </li></ul><ul><li>Remixable data source and data transformations </li></ul><ul><li>Software above the level of a single device </li></ul><ul><li>Harnessing collective intelligence </li></ul>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’
    126. 130. Web 2.0 Meme Map <ul><li>Strategic Positioning: </li></ul><ul><li>The Web as Platform </li></ul><ul><li>User Positioning: </li></ul><ul><li>You control your own data </li></ul><ul><li>Core Competencies: </li></ul><ul><li>Services not packaged sofware </li></ul><ul><li>Architecture of Participation </li></ul><ul><li>Cost-effective scalability </li></ul><ul><li>Remixable data source and data transformations </li></ul><ul><li>Software above the level of a single device </li></ul><ul><li>Harnessing collective intelligence </li></ul>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)
    127. 131. Web 2.0 Meme Map <ul><li>Strategic Positioning: </li></ul><ul><li>The Web as Platform </li></ul><ul><li>User Positioning: </li></ul><ul><li>You control your own data </li></ul><ul><li>Core Competencies: </li></ul><ul><li>Services not packaged sofware </li></ul><ul><li>Architecture of Participation </li></ul><ul><li>Cost-effective scalability </li></ul><ul><li>Remixable data source and data transformations </li></ul><ul><li>Software above the level of a single device </li></ul><ul><li>Harnessing collective intelligence </li></ul>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
    128. 132. Web 2.0 Meme Map <ul><li>Strategic Positioning: </li></ul><ul><li>The Web as Platform </li></ul><ul><li>User Positioning: </li></ul><ul><li>You control your own data </li></ul><ul><li>Core Competencies: </li></ul><ul><li>Services not packaged sofware </li></ul><ul><li>Architecture of Participation </li></ul><ul><li>Cost-effective scalability </li></ul><ul><li>Remixable data source and data transformations </li></ul><ul><li>Software above the level of a single device </li></ul><ul><li>Harnessing collective intelligence </li></ul>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
    129. 133. Enterprise 2.0 What’s in it for us?
    130. 134. Enterprise 2.0 <ul><li>User participation thru wikis, blogs, etc. </li></ul>
    131. 135. Enterprise 2.0 <ul><li>User participation thru wikis, blogs, etc. </li></ul><ul><li>Focus on user choice </li></ul>
    132. 136. Enterprise 2.0 <ul><li>User participation thru wikis, blogs, etc. </li></ul><ul><li>Focus on user choice </li></ul><ul><li>Facilitate collaboration </li></ul>
    133. 137. Enterprise 2.0 <ul><li>User participation thru wikis, blogs, etc. </li></ul><ul><li>Focus on user choice </li></ul><ul><li>Facilitate collaboration </li></ul><ul><li>Move from individual performance to group performance </li></ul>
    134. 138. Enterprise 2.0 <ul><li>User participation thru wikis, blogs, etc. </li></ul><ul><li>Focus on user choice </li></ul><ul><li>Facilitate collaboration </li></ul><ul><li>Move from individual performance to group performance </li></ul><ul><li>User feedback and interactivity </li></ul>
    135. 139. Enterprise 2.0 <ul><li>User participation thru wikis, blogs, etc. </li></ul><ul><li>Focus on user choice </li></ul><ul><li>Facilitate collaboration </li></ul><ul><li>Move from individual performance to group performance </li></ul><ul><li>User feedback and interactivity </li></ul><ul><li>Google Enterprise </li></ul>
    136. 140. 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
    137. 141. 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
    138. 142. Ruby <ul><li>Pure Object-oriented language </li></ul>See: www.ruby-lang.org
    139. 143. Ruby <ul><li>Pure Object-oriented language </li></ul><ul><li>Everything’s an object </li></ul>See: www.ruby-lang.org
    140. 144. Ruby <ul><li>Pure Object-oriented language </li></ul><ul><li>Everything’s an object </li></ul><ul><li>Interpretive, reflexive </li></ul>See: www.ruby-lang.org
    141. 145. Ruby <ul><li>Pure Object-oriented language </li></ul><ul><li>Everything’s an object </li></ul><ul><li>Interpretive, reflexive </li></ul><ul><li>Java-like exception handling </li></ul>See: www.ruby-lang.org
    142. 146. Ruby <ul><li>Pure Object-oriented language </li></ul><ul><li>Everything’s an object </li></ul><ul><li>Interpretive, reflexive </li></ul><ul><li>Java-like exception handling </li></ul><ul><li>True mark-and-sweep garbage collection </li></ul>See: www.ruby-lang.org
    143. 147. Ruby <ul><li>Pure Object-oriented language </li></ul><ul><li>Everything’s an object </li></ul><ul><li>Interpretive, reflexive </li></ul><ul><li>Java-like exception handling </li></ul><ul><li>True mark-and-sweep garbage collection </li></ul><ul><li>OS independent threading </li></ul>See: www.ruby-lang.org
    144. 148. Rails <ul><li>Full-stack web framework </li></ul>See: www.rubyonrails.org
    145. 149. Rails <ul><li>Full-stack web framework </li></ul><ul><li>True MVC </li></ul>See: www.rubyonrails.org
    146. 150. Rails <ul><li>Full-stack web framework </li></ul><ul><li>True MVC </li></ul><ul><li>Convention over Configuration </li></ul>See: www.rubyonrails.org
    147. 151. Rails <ul><li>Full-stack web framework </li></ul><ul><li>True MVC </li></ul><ul><li>Convention over Configuration </li></ul><ul><li>Connects to Oracle, MySQL, etc. </li></ul>See: www.rubyonrails.org
    148. 152. Rails <ul><li>Full-stack web framework </li></ul><ul><li>True MVC </li></ul><ul><li>Convention over Configuration </li></ul><ul><li>Connects to Oracle, MySQL, etc. </li></ul><ul><li>Runs on Apache, lighttpd, WebBrick </li></ul>See: www.rubyonrails.org
    149. 153. Rails <ul><li>Full-stack web framework </li></ul><ul><li>True MVC </li></ul><ul><li>Convention over Configuration </li></ul><ul><li>Connects to Oracle, MySQL, etc. </li></ul><ul><li>Runs on Apache, lighttpd, WebBrick </li></ul><ul><li>Extensive AJAX libraries </li></ul>See: www.rubyonrails.org
    150. 154. Ruby on Rails <ul><li>“ Powerful web applications that formerly might have taken weeks or months to develop can be produced in a matter of days.” </li></ul><ul><li>Tim O’Reilly </li></ul><ul><li>“ Rails has become a standard to which even well-established tools are comparing themselves to.” </li></ul><ul><li>Martin Fowler, Author of Refactoring, PoEAA, XP Explained </li></ul><ul><li>“ 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.” </li></ul><ul><li>Nathing Torkington, O’Reilly Media </li></ul>

    ×