SlideShare una empresa de Scribd logo
1 de 124
Descargar para leer sin conexión
How to

      Blu Your Way
                      in
                WEB 2.0
         by Andy Budd and Jeremy Keith




Clearleft.com
Bingo!

                  bingo.adactio.com
                Complete a line, shout “bingo” and win a book.
                                It’s that Simple!




Clearleft.com
What’s the Point?




Clearleft.com
Talk like Jason Fried
Clearleft.com
Get bought by Yahoo!
Clearleft.com
Get bought by Yahoo!
                    Get bought by Yahoo!
Clearleft.com
Bluffer




                Hang out with the in crowd
Clearleft.com
What is Web 2.0?




Clearleft.com
an emerging network-centric
 platform to support
 distributed, collaborative and
 cumulative creation by its users
                          John Hagel




Clearleft.com
Web 1.0 was about commerce.
 Web 2.0 is people
                    Ross Mayfield




Clearleft.com
A startup that generates more
 RSS than revenue
                       Endgadget




Clearleft.com
Web 2.0 is a state of mind. It’s a
 zen thing. e sound of one
 hand clapping.
                           Andy Budd




Clearleft.com
Four Pillars of Web 2.0




Clearleft.com
Four Pillars of Web 2.0

                Supports social interaction




Clearleft.com
Four Pillars of Web 2.0

                 Supports social interaction
                Encourages user participation




Clearleft.com
Four Pillars of Web 2.0

                 Supports social interaction
                Encourages user participation
                 Enhanced user experience




Clearleft.com
Four Pillars of Web 2.0

                 Supports social interaction
                Encourages user participation
                 Enhanced user experience
                         Open data


Clearleft.com
Four Pillars of Web 2.0

                 Supports social interaction
                Encourages user participation
                 Enhanced user experience
                         Open data


Clearleft.com
Handy Buzzwords
                                    Folksonomies
 Tagging
                  APIs
Ajax                                              RSS
                              Tipping point
                  Widgets
                             Microformats
                                                      Mashup
                Long tail          Leverage
                                                RIA
  Community

                                            Wisdom of crowds
                Social software

Clearleft.com
Popular web 2.0 apps




Clearleft.com
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
Conversation Starters




Clearleft.com
Conversation Starters
         What do you think of XYZ framework?




Clearleft.com
Conversation Starters
         What do you think of XYZ framework?

         Didn’t I meet you at the techcrunch party?




Clearleft.com
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
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
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
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
Design Aesthetic




Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
e Fonts of Web 2.0




Clearleft.com
e Fonts of Web 2.0
Vag


Myriad Pro


Clarendon


Arial Rounded




  Clearleft.com
e Fonts of Web 2.0
                            Helvetica
Vag


                            FF Meta
Myriad Pro


                            DIN
Clarendon


                            Interstate
Arial Rounded




  Clearleft.com
e Web 2.0 Cargo Cult




Clearleft.com
“We want both our logo
  and web site to be friendly,
  fun and embrace Web 2.0”



Clearleft.com
“      e website has to be very
       2.0 - clean - social etc...”




Clearleft.com
“If you have any examples
     of ‘web 2.0’ style design,
          that’d be great”



Clearleft.com
“Developer experience in
     using Web 2.0 design
 standards in previous work”



Clearleft.com
“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
e Web 2.0 Standards?




Clearleft.com
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
Is Your Website Web 2.0?

                web2.0validator.com
                Check to see if your site is web 2.0 enough!




Clearleft.com
Possibly the Most Web 2.0 Site
            in the World?




Clearleft.com
Technology




Clearleft.com
Microformats




Clearleft.com
Microformats




Clearleft.com
RSS




Clearleft.com
RSS




Clearleft.com
APIs




Clearleft.com
APIs


   REST



Clearleft.com
APIs


   REST                SOAP



Clearleft.com
APIs


   REST                SOAP



Clearleft.com
APIs


   REST                SOAP



Clearleft.com
APIs


   REST                    SOAP


                Mashups!
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Ajax




Clearleft.com
Ajax

                DHTML




Clearleft.com
Ajax

                DHTML
  sliding       moving   fading



Clearleft.com
Moo FX




Clearleft.com
Scriptaculous




Clearleft.com
A
                 J
                A
                X


Clearleft.com
Accessibilty
                 Just
                Ain’t
                Xciting


Clearleft.com
Clearleft.com
“Any sufficiently advanced technology is indistinguishable
   from magic.”




Clearleft.com
How to Build Your Own
             Web 2.0 App



Clearleft.com
Come up with a cool name
  www.lightsphere.com/dev/web20.html




Clearleft.com
Cool Names
                                         Trimba
  Jaxpad
                Muzu
Nmix                                         Zaboo
                               Viba
                Pixoyo
                          rid.iculo.us
                                                  Youzoom
            Devtube             Jambu
                                            Rooveo
  Getwatted
                                              Tagvine
                Yakidoo
Clearleft.com
and a Cool Logo




Clearleft.com
Set up a mysterious
                     homepage




Clearleft.com
Clearleft.com
Clearleft.com
ink of a concept




Clearleft.com
ink of a concept

                Web 2.0-ify an old idea




Clearleft.com
ink of a concept

                Web 2.0-ify an old idea
        Rebuild a popular web 2.0 app




Clearleft.com
ink of a concept

                Web 2.0-ify an old idea
        Rebuild a popular web 2.0 app
                  Combine two apps




Clearleft.com
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
Build it on the cheap




Clearleft.com
and spend all the money on
           design



Clearleft.com
Demo




Clearleft.com
Big launch




Clearleft.com
Wait for Yahoo! or Google




Clearleft.com
Social... stu




Clearleft.com
e Wisdom of Crowds




Clearleft.com
e Greater Internet
                Fuckwad eory




Clearleft.com
e Greater Internet
                Fuckwad eory




Clearleft.com
Community



Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Ratings



Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Tagging



Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Bookmarking




Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Comments




Clearleft.com
Comments
   “A blog without comments isn’t a blog.”




Clearleft.com
Comments
   “A blog without comments isn’t a blog.”

   “A blog without absolutist opinions isn’t a blog.”




Clearleft.com
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
“None of us are as dumb as all of us.”




Clearleft.com

Más contenido relacionado

Similar a How to Bluff Your Way in Web 2.0

Similar a How to Bluff Your Way in Web 2.0 (20)

Web 2.0
Web 2.0Web 2.0
Web 2.0
 
What Is Web 2.0 April 2006 Fraser Valley Technology Network
What Is Web 2.0 April 2006 Fraser Valley Technology NetworkWhat Is Web 2.0 April 2006 Fraser Valley Technology Network
What Is Web 2.0 April 2006 Fraser Valley Technology Network
 
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
Rails is not enough, by Javier Ramirez, at Conferencia Rails 2010 in Madrid, ...
 
FOWD November 2007
FOWD November 2007FOWD November 2007
FOWD November 2007
 
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
How to Develop a Rich, Native-quality User Experience for Mobile Using Web St...
 
The web take two
The web take twoThe web take two
The web take two
 
K3
K3K3
K3
 
Surviving (and Thriving in) the Online Identity Wars
Surviving (and Thriving in) the Online Identity WarsSurviving (and Thriving in) the Online Identity Wars
Surviving (and Thriving in) the Online Identity Wars
 
Pr 2 presentation
Pr 2 presentationPr 2 presentation
Pr 2 presentation
 
web2.0 Trends Updated - March 2008
web2.0 Trends Updated - March 2008web2.0 Trends Updated - March 2008
web2.0 Trends Updated - March 2008
 
Introduction to Web 2.0
Introduction to Web 2.0Introduction to Web 2.0
Introduction to Web 2.0
 
Transformational eGov - GTC SW 2009
Transformational eGov - GTC SW 2009Transformational eGov - GTC SW 2009
Transformational eGov - GTC SW 2009
 
Creating Your Own Personal Learning Network
Creating Your Own Personal Learning NetworkCreating Your Own Personal Learning Network
Creating Your Own Personal Learning Network
 
Beyond web services: supporting mashup artists at Yahoo!
Beyond web services: supporting mashup artists at Yahoo!Beyond web services: supporting mashup artists at Yahoo!
Beyond web services: supporting mashup artists at Yahoo!
 
10 Steps To Make A Professional Article With Best SEO Strategies.pdf
10 Steps To Make A Professional Article With Best SEO Strategies.pdf10 Steps To Make A Professional Article With Best SEO Strategies.pdf
10 Steps To Make A Professional Article With Best SEO Strategies.pdf
 
Principles Of Web Design Workshop
Principles Of Web Design WorkshopPrinciples Of Web Design Workshop
Principles Of Web Design Workshop
 
Building the Orchard Community
Building the Orchard CommunityBuilding the Orchard Community
Building the Orchard Community
 
Web Design
Web DesignWeb Design
Web Design
 
IT Event Report of TC Disrupt/GMIC
IT Event Report of TC Disrupt/GMICIT Event Report of TC Disrupt/GMIC
IT Event Report of TC Disrupt/GMIC
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 

Más de Andy Budd

Redefining ux
Redefining uxRedefining ux
Redefining ux
Andy Budd
 
Digital Product Design
Digital Product DesignDigital Product Design
Digital Product Design
Andy Budd
 
Architecting Human Behaviour
Architecting Human BehaviourArchitecting Human Behaviour
Architecting Human Behaviour
Andy Budd
 

Más de Andy Budd (20)

I for one welcome our new robot overlords
I for one welcome our new robot overlordsI for one welcome our new robot overlords
I for one welcome our new robot overlords
 
The Good, the Bad and the Ugly of Conversational Interfaces
The Good, the Bad and the Ugly of Conversational InterfacesThe Good, the Bad and the Ugly of Conversational Interfaces
The Good, the Bad and the Ugly of Conversational Interfaces
 
Desiging for competitive advantage
Desiging for competitive advantageDesiging for competitive advantage
Desiging for competitive advantage
 
The ux of user experience
The ux of user experienceThe ux of user experience
The ux of user experience
 
The ux of architecture
The ux of architectureThe ux of architecture
The ux of architecture
 
Redefining ux
Redefining uxRedefining ux
Redefining ux
 
The ux of user experience
The ux of user experienceThe ux of user experience
The ux of user experience
 
Design for Start-Ups
Design for Start-UpsDesign for Start-Ups
Design for Start-Ups
 
Ux professionalism
Ux professionalismUx professionalism
Ux professionalism
 
Digital Product Design
Digital Product DesignDigital Product Design
Digital Product Design
 
Product management
Product managementProduct management
Product management
 
Persuasive Design: Encouraging Your Users To Do What You Want Them To!
Persuasive Design:  Encouraging Your Users To Do What You Want Them To!Persuasive Design:  Encouraging Your Users To Do What You Want Them To!
Persuasive Design: Encouraging Your Users To Do What You Want Them To!
 
Seductive Design
Seductive DesignSeductive Design
Seductive Design
 
Guerilla Usability Testing — @media 2009
Guerilla Usability Testing — @media 2009Guerilla Usability Testing — @media 2009
Guerilla Usability Testing — @media 2009
 
Publishing 2.0
Publishing 2.0Publishing 2.0
Publishing 2.0
 
Usability Testing
Usability TestingUsability Testing
Usability Testing
 
Designing The User Experience Curve 2.0
Designing The User Experience Curve 2.0Designing The User Experience Curve 2.0
Designing The User Experience Curve 2.0
 
Architecting Human Behaviour
Architecting Human BehaviourArchitecting Human Behaviour
Architecting Human Behaviour
 
Designing the User Experience Curve
Designing the User Experience CurveDesigning the User Experience Curve
Designing the User Experience Curve
 
The Future Of CSS
The Future Of CSSThe Future Of CSS
The Future Of CSS
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Último (20)

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 

How to Bluff Your Way in Web 2.0