Web 2.0

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    5 Favorites

    Web 2.0 - Presentation Transcript

    1. Web 2.0 What is it? What does it mean to us?
    2. Web 2.0 Presentation
      • Part 1
      • Conceptual View
    3. Web 2.0 Presentation
      • Part 1
      • Conceptual View
      • Social View
    4. Web 2.0 Presentation
      • Part 1
      • Conceptual View
      • Social View
      • Technical View
    5. Web 2.0 Presentation
      • Part 1
      • Conceptual View
      • Social View
      • Technical View
      Part 2 Ruby on Rails Demo
    6. Web 2.0 Presentation
      • Part 1
      • Conceptual View
      • Social View
      • Technical View
      Part 2 Ruby on Rails Demo SmartClient Demo
    7. Web 2.0 Presentation
      • Part 1
      • Conceptual View
      • Social View
      • Technical View
      Part 2 Ruby on Rails Demo SmartClient Demo Possible Futures
    8. 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
    9. Conceptual View Marshall McLuhan was right!
    10. 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.”
    11. The Narcissus Myth
      • Fell in love with his own image
      • Did not recognize reflection as himself
      • Narcissus = narcosis
    12. The Narcissus Myth
      • Fell in love with his own image
      • Did not recognize reflection as himself
      • Narcissus = narcosis
      • Technology as extension of ourselves
    13. The Narcissus Myth
      • Fell in love with his own image
      • Did not recognize reflection as himself
      • Narcissus = narcosis
      • Technology as extension of ourselves
      • We fail to recognize implications of the new technology
    14. The Narcissus Myth
      • Fell in love with his own image
      • Did not recognize reflection as himself
      • Narcissus = narcosis
      • Technology as extension of ourselves
      • We fail to recognize implications of the new technology
      • We see the new in terms of the old
    15. The Narcissus Myth
      • Fell in love with his own image
      • Did not recognize reflection as himself
      • Narcissus = narcosis
      Book = Printed Manuscript
    16. The Narcissus Myth
      • Fell in love with his own image
      • Did not recognize reflection as himself
      • Narcissus = narcosis
      Book = Printed Manuscript Light Bulb = Electric Candle
    17. The Narcissus Myth
      • Fell in love with his own image
      • Did not recognize reflection as himself
      • Narcissus = narcosis
      Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage
    18. The Narcissus Myth
      • Fell in love with his own image
      • Did not recognize reflection as himself
      • Narcissus = narcosis
      Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage Radio = Wireless
    19. The Narcissus Myth
      • Fell in love with his own image
      • Did not recognize reflection as himself
      • Narcissus = narcosis
      Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage Radio = Wireless Film = Moving Pictures
    20. The Narcissus Myth
      • Fell in love with his own image
      • Did not recognize reflection as himself
      • Narcissus = narcosis
      Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage Radio = Wireless Film = Moving Pictures TV = Visual Radio
    21. The Narcissus Myth
      • Fell in love with his own image
      • Did not recognize reflection as himself
      • Narcissus = narcosis
      Book = Printed Manuscript Light Bulb = Electric Candle Car = Horseless Carriage Radio = Wireless Film = Moving Pictures TV = Visual Radio Computer = Calculator
    22. The Medium is the Message
      • Technologies change consciousness
      • Inventions reinvent us
      • The content is not the content
    23. The Medium is the Message
      • Print technology is:
      • sequential
    24. The Medium is the Message
      • Print technology is:
      • sequential
      • specializing
    25. The Medium is the Message
      • Print technology is:
      • sequential
      • specializing
      • fragmenting
    26.  
    27.  
    28.  
    29.  
    30. Web 1.0
      • Web as Book
    31. Web 1.0
      • Web as Book
      • Primary metaphor is the Page
    32. Web 1.0
      • Web as Book
      • Primary metaphor is the Page
      • Author as Authority
    33. Web 1.0
      • Web as Book
      • Primary metaphor is the Page
      • Author as Authority
      • Reader as Individual
    34. Web 2.0
      • Web as Community
    35. Web 2.0
      • Web as Community
      • Primary metaphor is the Village
    36. Web 2.0
      • Web as Community
      • Primary metaphor is the Village
      • Author as Contributor
    37. Web 2.0
      • Web as Community
      • Primary metaphor is the Village
      • Author as Contributor
      • Reader as Neighbor
    38. 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”
    39. 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”
    40. 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
    41. The Social View Meet Me @ MySpace
    42. 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
    43. 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
    44. 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
    45. 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
    46. 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
    47. 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
    48. The Technical View Traveling Light
    49. 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
    50. Rich Interface
      • Breaking down the “page barrier”
    51. Rich Interface
      • Breaking down the “page barrier”
      • Eliminating “speed bumps”
    52. Rich Interface
      • Breaking down the “page barrier”
      • Eliminating “speed bumps”
      • Interactivity
    53. Rich Interface
      • Breaking down the “page barrier”
      • Eliminating “speed bumps”
      • Interactivity
      AJAX
    54. Rich Interface
      • Breaking down the “page barrier”
      • Eliminating “speed bumps”
      • Interactivity
      AJAX JavaScript XML JSON CSS2 XHTML
    55. Rich Interface
      • Breaking down the “page barrier”
      • Eliminating “speed bumps”
      • Interactivity
      AJAX JavaScript XML JSON CSS2 XHTML Prototype Script.aculo.us Dojo jQuery Yahoo! Developer Google Toolkit
    56. Rich Interface
      • Breaking down the “page barrier”
      • Eliminating “speed bumps”
      • 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
    57. Social Software
      • Breaking down the “site barrier”
    58. Social Software
      • Breaking down the “site barrier”
      • Community of Code
    59. Social Software
      • Breaking down the “site barrier”
      • Community of Code
      • Mashups and Aggregation
    60. Social Software
      • Breaking down the site barrier
      • Community of Code
      • Mashups and Aggregation
      micro formats
    61. Social Software
      • Breaking down the site barrier
      • Community of Code
      • Mashups and Aggregation
      micro formats HTML Simple Tags Standard Data Formats
    62. Social Software
      • Breaking down the site barrier
      • Community of Code
      • Mashups and Aggregation
      micro formats HTML Simple Tags Standard Data Formats Address Maps Calendar Events Reviews Resum és Classifieds Social Networks Blogs Bookmarks
    63. Social Software
      • Breaking down the site barrier
      • Community of Code
      • Mashups and Aggregation
      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
    64. Speed & Agility
      • Agile Development
    65. Speed & Agility
      • Agile Development
      • Lightweight Languages
    66. Speed & Agility
      • Agile Development
      • Lightweight Languages
      • Perpetual Beta
    67. Speed & Agility
      • Agile Development
      • Lightweight Languages
      • Perpetual Beta
      • The Hybrid Developer
    68. Speed & Agility
      • Agile Development
      • Lightweight Languages
      • Perpetual Beta
      • The Hybrid Developer
      Ruby on Rails
      • Agile Development
      • Lightweight Languages
      • Perpetual Beta
      • The Hybrid Developer
      Speed & Agility Python PHP Catalyst Flex Apollo Django JRuby MVC Ruby on Rails
    69. Collective Intelligence
      • Massive Collaboration
    70. Collective Intelligence
      • Massive Collaboration
      • Open Source
    71. Collective Intelligence
      • Massive Collaboration
      • Open Source
      • Creative Commons
    72. Collective Intelligence
      • Massive Collaboration
      • Open Source
      • Creative Commons
      SOURCE FORGE
      • Massive Collaboration
      • Open Source
      • Creative Commons
      Collective Intelligence SOURCE FORGE mozilla.org
    73. Data Management
      • Data is the “Intel Inside”
    74. Data Management
      • Data is the “Intel Inside”
      • Amazon’s S3 Data Storage
    75. 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
    76. AJAX Asynchronous Javascript and XML
      • Standards-based presentation using XHTML and CSS
    77. AJAX Asynchronous Javascript and XML
      • Standards-based presentation using XHTML and CSS
      • Dynamic display and interaction using the Document Object Model (DOM)
    78. AJAX Asynchronous Javascript and XML
      • 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
    79. AJAX Asynchronous Javascript and XML
      • 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
    80. AJAX Asynchronous Javascript and XML
      • Standards-based presentation using XHTML and CSS
      • Dynamic display and interaction using the Document Object Model (DOM)
      • Data interchange and manipulation using XML and XSLT
      • Asynchronous data retrieval using XMLHttpRequest
      • Javascript binding everything together
    81. AJAX Event Sequence
    82. 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';
      • }
      • }
    83. 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';
      • }
      • }
    84. AJAX - XMLHttpRequest
      • 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;
      • }
    85. AJAX - XMLHttpRequest
      • 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;
      • }
    86. AJAX - XMLHttpRequest
      • 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;
      • }
    87. 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';
      • }
      • }
    88. AJAX - XMLHttpRequest
      • 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);
      • }
      • }
      • }
      • }
    89. 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);
      • //open HTTP POST connection to servlet, ‘true’ specifies asynchronous
      • 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';
      • }
      • }
    90. AJAX
      • Two formats for data serialization:
      • XML
      • JSON (JavaScript Object Notation)
    91. 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"
      • ]
      • }
    92. 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
    93. Microformats
      • microformats.org
      • Dan Cederholm, Tantek Çelik, Brian Suda
      • blog.mozilla.com/faaborg
      • Alex Faaborg
      • microformatique.com
      • John Allsop
    94. Microformats
      • A way of sharing data between websites
    95. Microformats
      • A way of sharing data between websites
      • Uses simple, open data formats
    96. Microformats
      • A way of sharing data between websites
      • Uses simple, open data formats
      • Built on existing standards
    97. Microformats
      • A way of sharing data between websites
      • Uses simple, open data formats
      • Built on existing standards
      • Readable by humans and machines
    98. 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
    99. 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
    100. Microformats
      • People and Organizations (hCard)
    101. Microformats
      • People and Organizations (hCard)
      • Calendars and Events (hCalendar)
    102. Microformats
      • People and Organizations (hCard)
      • Calendars and Events (hCalendar)
      • Locations (geo)
    103. Microformats
      • People and Organizations (hCard)
      • Calendars and Events (hCalendar)
      • Locations (geo)
      • Opinions and Reviews (hReview)
    104. Microformats
      • People and Organizations (hCard)
      • Calendars and Events (hCalendar)
      • Locations (geo)
      • Opinions and Reviews (hReview)
      • Social Networks (XFN)
    105. Microformats
      • People and Organizations (hCard)
      • Calendars and Events (hCalendar)
      • Locations (geo)
      • Opinions and Reviews (hReview)
      • Social Networks (XFN)
      • Resum és (hResume)
    106. 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)
    107. 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)
    108. 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
    109. Microformats
      • People and Organizations (hCard)
      • Calendars and Events (hCalendar)
      • Locations (geo)
      hCard geo hCalendar
    110. Microformats
      • People and Organizations (hCard)
      • Calendars and Events (hCalendar)
      • Locations (geo)
    111. Microformats
      • People and Organizations (hCard)
      • Calendars and Events (hCalendar)
      • Locations (geo)
      Space and Time also map to common representations of information
    112. 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>
    113. 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>
      Microformats have a root element. hCard root elements have the class value=“vcard”.
    114. Microformats - hCard
      • <div class=“vcard” >
      • <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>
    115. Microformats - hCard
      • <div class=“vcard”>
      • <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>
      Formatted Names: class=“fn” (root) class=“given-name” class=“family-name”
    116. Microformats - hCard
      • <div class=“vcard”>
      • <img src=“img/twb.jpg” />
      • <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>
      • <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>
    117. Microformats - hCard
      • <div class=“vcard”>
      • <img src=“img/twb.jpg” />
      • <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>
      • <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>
      URLs and Photos: class=“photo” class=“url”
    118. Microformats - hCard
      • <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>
      • </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>
    119. Microformats - hCard
      • <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>
      • </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>
      Addresses: class=“adr” (root) class=“street-address” class=“locality” class=“region” class=“postal-code” class=“country-name”
    120. Microformats - hCard
      • <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>
      • </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>
      • <a href=“mailto...”>tb@homeboyd.com</a>
      • </div>
    121. Microformats - hCard
      • <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>
      • </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>
      • <a href=“mailto...”>tb@homeboyd.com</a>
      • </div>
      email and phone: class=“email” class=“tel”
    122. Microformats - hCard
      • <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>
      • </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>
    123. 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
    124. 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” 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
    125. 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 ” 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
    126. 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” 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
    127. 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 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’
    128. 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 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)
    129. 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 Gmail, Google Maps and AJAX: Rich user experiences The Perpetual Beta
    130. 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) 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
    131. Enterprise 2.0 What’s in it for us?
    132. Enterprise 2.0
      • User participation thru wikis, blogs, etc.
    133. Enterprise 2.0
      • User participation thru wikis, blogs, etc.
      • Focus on user choice
    134. Enterprise 2.0
      • User participation thru wikis, blogs, etc.
      • Focus on user choice
      • Facilitate collaboration
    135. Enterprise 2.0
      • User participation thru wikis, blogs, etc.
      • Focus on user choice
      • Facilitate collaboration
      • Move from individual performance to group performance
    136. Enterprise 2.0
      • User participation thru wikis, blogs, etc.
      • Focus on user choice
      • Facilitate collaboration
      • Move from individual performance to group performance
      • User feedback and interactivity
    137. Enterprise 2.0
      • User participation thru wikis, blogs, etc.
      • Focus on user choice
      • Facilitate collaboration
      • Move from individual performance to group performance
      • User feedback and interactivity
      • Google Enterprise
    138. 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
    139. 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
    140. Ruby
      • Pure Object-oriented language
      See: www.ruby-lang.org
    141. Ruby
      • Pure Object-oriented language
      • Everything’s an object
      See: www.ruby-lang.org
    142. Ruby
      • Pure Object-oriented language
      • Everything’s an object
      • Interpretive, reflexive
      See: www.ruby-lang.org
    143. Ruby
      • Pure Object-oriented language
      • Everything’s an object
      • Interpretive, reflexive
      • Java-like exception handling
      See: www.ruby-lang.org
    144. Ruby
      • Pure Object-oriented language
      • Everything’s an object
      • Interpretive, reflexive
      • Java-like exception handling
      • True mark-and-sweep garbage collection
      See: www.ruby-lang.org
    145. Ruby
      • Pure Object-oriented language
      • Everything’s an object
      • Interpretive, reflexive
      • Java-like exception handling
      • True mark-and-sweep garbage collection
      • OS independent threading
      See: www.ruby-lang.org
    146. Rails
      • Full-stack web framework
      See: www.rubyonrails.org
    147. Rails
      • Full-stack web framework
      • True MVC
      See: www.rubyonrails.org
    148. Rails
      • Full-stack web framework
      • True MVC
      • Convention over Configuration
      See: www.rubyonrails.org
    149. Rails
      • Full-stack web framework
      • True MVC
      • Convention over Configuration
      • Connects to Oracle, MySQL, etc.
      See: www.rubyonrails.org
    150. Rails
      • Full-stack web framework
      • True MVC
      • Convention over Configuration
      • Connects to Oracle, MySQL, etc.
      • Runs on Apache, lighttpd, WebBrick
      See: www.rubyonrails.org
    151. Rails
      • Full-stack web framework
      • True MVC
      • Convention over Configuration
      • Connects to Oracle, MySQL, etc.
      • Runs on Apache, lighttpd, WebBrick
      • Extensive AJAX libraries
      See: www.rubyonrails.org
    152. 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

    + tonyboydtonyboyd, 3 years ago

    custom

    5648 views, 5 favs, 4 embeds more stats

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

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 5648
      • 5634 on SlideShare
      • 14 from embeds
    • Comments 0
    • Favorites 5
    • Downloads 161
    Most viewed embeds
    • 8 views on http://www.webgox.com
    • 4 views on http://pagi.scribblewiki.com
    • 1 views on http://127.0.0.1
    • 1 views on http://egox.tumblr.com

    more

    All embeds
    • 8 views on http://www.webgox.com
    • 4 views on http://pagi.scribblewiki.com
    • 1 views on http://127.0.0.1
    • 1 views on http://egox.tumblr.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories