Slideshow Transcript

1. Slide 1: How to Blu Your Way in WEB 2.0 by Andy Budd and Jeremy Keith Clearleft.com
2. Slide 2: Bingo! bingo.adactio.com Complete a line, shout “bingo” and win a book. It’s that Simple! Clearleft.com
3. Slide 3: What’s the Point? Clearleft.com
4. Slide 4: Talk like Jason Fried Clearleft.com
5. Slide 5: Get bought by Yahoo! Clearleft.com
6. Slide 6: Get bought by Yahoo! Get bought by Yahoo! Clearleft.com
7. Slide 7: Bluffer Hang out with the in crowd Clearleft.com
8. Slide 8: What is Web 2.0? Clearleft.com
9. Slide 9: an emerging network-centric platform to support distributed, collaborative and cumulative creation by its users John Hagel Clearleft.com
10. Slide 10: Web 1.0 was about commerce. Web 2.0 is people Ross Mayfield Clearleft.com
11. Slide 11: A startup that generates more RSS than revenue Endgadget Clearleft.com
12. Slide 12: Web 2.0 is a state of mind. It’s a zen thing. e sound of one hand clapping. Andy Budd Clearleft.com
13. Slide 13: Four Pillars of Web 2.0 Clearleft.com
14. Slide 14: Four Pillars of Web 2.0 Supports social interaction Clearleft.com
15. Slide 15: Four Pillars of Web 2.0 Supports social interaction Encourages user participation Clearleft.com
16. Slide 16: Four Pillars of Web 2.0 Supports social interaction Encourages user participation Enhanced user experience Clearleft.com
17. Slide 17: Four Pillars of Web 2.0 Supports social interaction Encourages user participation Enhanced user experience Open data Clearleft.com
18. Slide 18: Four Pillars of Web 2.0 Supports social interaction Encourages user participation Enhanced user experience Open data Clearleft.com
19. Slide 19: Handy Buzzwords Folksonomies Tagging APIs Ajax RSS Tipping point Widgets Microformats Mashup Long tail Leverage RIA Community Wisdom of crowds Social software Clearleft.com
20. Slide 20: Popular web 2.0 apps Clearleft.com
21. Slide 21: Popular web 2.0 apps Twitter Lastfm Moo flickr Odeo BackPack Technorati YouTube MeasureMap Linkedin Facebook Rollyo Basecamp Upcoming Plazes Digg del.icio.us Yelp Ning Magnolia Netvibes Meebo NewsVine Ask City Clearleft.com
22. Slide 22: Conversation Starters Clearleft.com
23. Slide 23: Conversation Starters What do you think of XYZ framework? Clearleft.com
24. Slide 24: Conversation Starters What do you think of XYZ framework? Didn’t I meet you at the techcrunch party? Clearleft.com
25. Slide 25: Conversation Starters What do you think of XYZ framework? Didn’t I meet you at the techcrunch party? I’m beta testing this great new app that will blow basecamp out of the water! Clearleft.com
26. Slide 26: Conversation Starters What do you think of XYZ framework? Didn’t I meet you at the techcrunch party? I’m beta testing this great new app that will blow basecamp out of the water! Web 2.0 is so last year. I’m focussing on web 3.0 Clearleft.com
27. Slide 27: Conversation Starters What do you think of XYZ framework? Didn’t I meet you at the techcrunch party? I’m beta testing this great new app that will blow basecamp out of the water! Web 2.0 is so last year. I’m focussing on web 3.0 Is it just me or does one the guys from the web 2.0 show sound like Strong Sad? Clearleft.com
28. Slide 28: Conversation Starters What do you think of XYZ framework? Didn’t I meet you at the techcrunch party? I’m beta testing this great new app that will blow basecamp out of the water! Web 2.0 is so last year. I’m focussing on web 3.0 Is it just me or does one the guys from the web 2.0 show sound like Strong Sad? Clearleft.com
29. Slide 29: Design Aesthetic Clearleft.com
30. Slide 30: Clearleft.com
31. Slide 31: Clearleft.com
32. Slide 32: Clearleft.com
33. Slide 33: Clearleft.com
34. Slide 34: Clearleft.com
35. Slide 35: Clearleft.com
36. Slide 36: e Fonts of Web 2.0 Clearleft.com
37. Slide 37: e Fonts of Web 2.0 Vag Myriad Pro Clarendon Arial Rounded Clearleft.com
38. Slide 38: e Fonts of Web 2.0 Helvetica Vag FF Meta Myriad Pro DIN Clarendon Interstate Arial Rounded Clearleft.com
39. Slide 39: e Web 2.0 Cargo Cult Clearleft.com
40. Slide 40: “We want both our logo and web site to be friendly, fun and embrace Web 2.0” Clearleft.com
41. Slide 41: “ e website has to be very 2.0 - clean - social etc...” Clearleft.com
42. Slide 42: “If you have any examples of ‘web 2.0’ style design, that’d be great” Clearleft.com
43. Slide 43: “Developer experience in using Web 2.0 design standards in previous work” Clearleft.com
44. Slide 44: “Since we want our website to follow Web 2.0 design standards, we would like the 15 standards at www.webdesignfromscratch.com/ web-2.0-design-style-guide.cfm to be adapted into the new site” Clearleft.com
45. Slide 45: e Web 2.0 Standards? Clearleft.com
46. Slide 46: e Web 2.0 Standards? 1. Simplicity 8. Bigger text 2. Central layout 9. Bold text introductions 3. Fewer columns 10. Strong colours 4. Separate top section 11. Rich surfaces 5. Solid areas of screen 12. Gradients real-estate 13. Reflections 6. Simple nav 14. Cute icons 7. Bold logos 15. Star flashes Clearleft.com
47. Slide 47: Is Your Website Web 2.0? web2.0validator.com Check to see if your site is web 2.0 enough! Clearleft.com
48. Slide 48: Possibly the Most Web 2.0 Site in the World? Clearleft.com
49. Slide 49: Technology Clearleft.com
50. Slide 50: Microformats Clearleft.com
51. Slide 51: Microformats Clearleft.com
52. Slide 52: RSS Clearleft.com
53. Slide 53: RSS Clearleft.com
54. Slide 54: APIs Clearleft.com
55. Slide 55: APIs REST Clearleft.com
56. Slide 56: APIs REST SOAP Clearleft.com
57. Slide 57: APIs REST SOAP Clearleft.com
58. Slide 58: APIs REST SOAP Clearleft.com
59. Slide 59: APIs REST SOAP Mashups! Clearleft.com
60. Slide 60: Clearleft.com
61. Slide 61: Clearleft.com
62. Slide 62: Clearleft.com
63. Slide 63: Clearleft.com
64. Slide 64: Clearleft.com
65. Slide 65: Clearleft.com
66. Slide 66: Clearleft.com
67. Slide 67: Clearleft.com
68. Slide 68: Clearleft.com
69. Slide 69: Clearleft.com
70. Slide 70: Ajax Clearleft.com
71. Slide 71: Ajax DHTML Clearleft.com
72. Slide 72: Ajax DHTML sliding moving fading Clearleft.com
73. Slide 73: Moo FX Clearleft.com
74. Slide 74: Scriptaculous Clearleft.com
75. Slide 75: A J A X Clearleft.com
76. Slide 76: Accessibilty Just Ain’t Xciting Clearleft.com
77. Slide 77: Clearleft.com
78. Slide 78: “Any sufficiently advanced technology is indistinguishable from magic.” Clearleft.com
79. Slide 79: How to Build Your Own Web 2.0 App Clearleft.com
80. Slide 80: Come up with a cool name www.lightsphere.com/dev/web20.html Clearleft.com
81. Slide 81: Cool Names Trimba Jaxpad Muzu Nmix Zaboo Viba Pixoyo rid.iculo.us Youzoom Devtube Jambu Rooveo Getwatted Tagvine Yakidoo Clearleft.com
82. Slide 82: and a Cool Logo Clearleft.com
83. Slide 83: Set up a mysterious homepage Clearleft.com
84. Slide 84: Clearleft.com
85. Slide 85: Clearleft.com
86. Slide 86: ink of a concept Clearleft.com
87. Slide 87: ink of a concept Web 2.0-ify an old idea Clearleft.com
88. Slide 88: ink of a concept Web 2.0-ify an old idea Rebuild a popular web 2.0 app Clearleft.com
89. Slide 89: ink of a concept Web 2.0-ify an old idea Rebuild a popular web 2.0 app Combine two apps Clearleft.com
90. Slide 90: ink of a concept Web 2.0-ify an old idea Rebuild a popular web 2.0 app Combine two apps Online version of an offline app Clearleft.com
91. Slide 91: Build it on the cheap Clearleft.com
92. Slide 92: and spend all the money on design Clearleft.com
93. Slide 93: Demo Clearleft.com
94. Slide 94: Big launch Clearleft.com
95. Slide 95: Wait for Yahoo! or Google Clearleft.com
96. Slide 96: Social... stu Clearleft.com
97. Slide 97: e Wisdom of Crowds Clearleft.com
98. Slide 98: e Greater Internet Fuckwad eory Clearleft.com
99. Slide 99: e Greater Internet Fuckwad eory Clearleft.com
100. Slide 100: Community Clearleft.com
101. Slide 101: Clearleft.com
102. Slide 102: Clearleft.com
103. Slide 103: Clearleft.com
104. Slide 104: Ratings Clearleft.com
105. Slide 105: Clearleft.com
106. Slide 106: Clearleft.com
107. Slide 107: Clearleft.com
108. Slide 108: Tagging Clearleft.com
109. Slide 109: Clearleft.com
110. Slide 110: Clearleft.com
111. Slide 111: Clearleft.com
112. Slide 112: Clearleft.com
113. Slide 113: Clearleft.com
114. Slide 114: Clearleft.com
115. Slide 115: Bookmarking Clearleft.com
116. Slide 116: Clearleft.com
117. Slide 117: Clearleft.com
118. Slide 118: Clearleft.com
119. Slide 119: Clearleft.com
120. Slide 120: Comments Clearleft.com
121. Slide 121: Comments “A blog without comments isn’t a blog.” Clearleft.com
122. Slide 122: Comments “A blog without comments isn’t a blog.” “A blog without absolutist opinions isn’t a blog.” Clearleft.com
123. Slide 123: Comments “A blog without comments isn’t a blog.” “A blog without absolutist opinions isn’t a blog.” “A blog without tagging, RSS, Digg this links, add to del.icio.us links, add to Newsvine links, microformats, absolutists opinions and comments isn’t a blog.” Clearleft.com
124. Slide 124: “None of us are as dumb as all of us.” Clearleft.com