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

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
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
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
AI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by AnitarajAI in Action: Real World Use Cases by Anitaraj
AI in Action: Real World Use Cases by Anitaraj
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 

How to Bluff Your Way in Web 2.0