SlideShare uma empresa Scribd logo
O Design e a Interface no
   mundo da programação
                                 ... ou “Como acabar com as guerras civis
                                      no desenvolvimento de um produto”




Eduardo Shiota Yasuda | Dev in Sampa 2010 | 15.08.2010
Uma (breve) introdução
@shiota:
3 anos de Ciência da Computação
[quase]   Formado em Design
Trabalha com Front-end, UX e Design
Irmão do @shadow11 - back-end jedi developer
Problema
      O desenvolvimento de um produto é
prejudicado por conflitos e falta de comunicação
       entre design, front-end e back-end
Objetivo
Identificar papéis e obrigações de cada um,
unificar o time e estabelecer uma metologia
       eficiente de desenvolvimento
história da Interwebz   como consertar?   como continuar?   exemplos
História da Interwebz
 Como as interfaces evoluíram e os papéis mudaram
história da Interwebz          como consertar?          como continuar?           exemplos




  1991      1996        1998   1999    2000-02   2003    2005     2006    2007   2009    2010
história da Interwebz          como consertar?          como continuar?           exemplos




1991
   Primeira página HTML por Tim Berners-Lee




  1991      1996        1998   1999    2000-02   2003    2005     2006    2007   2009    2010
história da Interwebz          como consertar?          como continuar?           exemplos




1996

   Entrada das empresas na Web
   Netscape Navigator 2
   Internet Explorer 3
   JavaScript
   ASP 1.0



  1991      1996        1998   1999    2000-02   2003    2005     2006    2007   2009    2010
história da Interwebz          como consertar?          como continuar?               exemplos




1996




                                                                                    Yahoo! e UOL - 1996
                                                                            Fonte: The Wayback Machine




  1991      1996        1998   1999    2000-02   2003    2005     2006    2007      2009         2010
história da Interwebz          como consertar?          como continuar?                exemplos




1996
Designers                             Front-end Devs                     Back-end Devs
  Fazem imagens                                                           Desenvolvem o sistema
  Desenham “layouts”                                                      Fazem o HTML e colocam as
                                                                          imagens
                                                                          Atualizam o conteúdo
                                                                          Modificam os layouts




  1991      1996        1998   1999    2000-02   2003    2005     2006      2007     2009      2010
história da Interwebz          como consertar?          como continuar?           exemplos




1998

   HTML 4.0
   CSS 1
   Macromedia (R.I.P.) Dreamweaver
   PHP 3
   Mozilla



  1991      1996        1998   1999    2000-02   2003    2005     2006    2007   2009    2010
história da Interwebz          como consertar?          como continuar?               exemplos




1998




                                                                                    Yahoo! e UOL - 1998
                                                                            Fonte: The Wayback Machine




  1991      1996        1998   1999    2000-02   2003    2005     2006    2007      2009         2010
história da Interwebz          como consertar?          como continuar?                exemplos




1998
Designers                             Front-end Devs                     Back-end Devs
  Fazem imagens                                                           Desenvolvem o sistema
  Desenham layouts                                                        Fazem o HTML e colocam as
                                                                          imagens
                                                                          Interações com JavaScript
                                                                          Atualizam o conteúdo
                                                                          Modificam os layouts




  1991      1996        1998   1999    2000-02   2003    2005     2006      2007     2009      2010
história da Interwebz          como consertar?          como continuar?           exemplos




1999


   Explosão “ponto-com”
   Photoshop com slices e “Save for Web”
   Macromedia (R.I.P.) Flash 4




  1991      1996        1998   1999    2000-02   2003    2005     2006    2007   2009    2010
história da Interwebz          como consertar?          como continuar?                     exemplos




1999




                                                                                         Yahoo! e UOL - 1999
                                                                  Fontes: The Wayback Machine & UOL História




  1991      1996        1998   1999    2000-02   2003    2005     2006       2007        2009         2010
história da Interwebz          como consertar?          como continuar?           exemplos




2000~2002


   Redesign das páginas
   Introdução da Arquitetura da Informação,
   Usabilidade e User Experience na Web
   Surgimento do Front-end Developer




  1991      1996        1998   1999    2000-02   2003    2005     2006    2007   2009    2010
história da Interwebz          como consertar?          como continuar?                     exemplos




2000~2002




                                                                            Yahoo! @ 18-18-2002 e UOL @ 2001
                                                                  Fontes: The Wayback Machine & UOL História




  1991      1996        1998   1999    2000-02   2003    2005     2006       2007        2009         2010
história da Interwebz          como consertar?             como continuar?                 exemplos




2000~2002
Designers                             Front-end Devs                        Back-end Devs
  Wireframe das páginas                “Cortam” os layouts em                Desenvolvem o sistema
  Definem interações                    imagens                               Interações com JavaScript
  Desenham layouts                     HTML, geralmente com
                                       tabelas e estilos inline
                                       Interações com JavaScript




  1991      1996        1998   1999    2000-02     2003      2005    2006       2007      2009      2010
história da Interwebz          como consertar?          como continuar?           exemplos




2003


   CSS Zen Garden
   Movimento Tableless
   Safari




  1991      1996        1998   1999    2000-02   2003    2005     2006    2007   2009    2010
história da Interwebz          como consertar?          como continuar?           exemplos




2005


   YouTube
   Orkut
   Ruby on Rails
   Firefox & Safari 2




  1991      1996        1998   1999    2000-02   2003    2005     2006    2007   2009    2010
história da Interwebz          como consertar?          como continuar?           exemplos




2006


   Moda “Web 2.0”
   Crescimento do uso do AJAX
   Internet Explorer 7 & Firefox 2




  1991      1996        1998   1999    2000-02   2003    2005     2006    2007   2009    2010
história da Interwebz          como consertar?          como continuar?           exemplos




2007


   iPhone
   Ruby on Rails no Mac OS X
   Safari 3




  1991      1996        1998   1999    2000-02   2003    2005     2006    2007   2009    2010
história da Interwebz          como consertar?          como continuar?           exemplos




2009

   Explosão do mercado mobile
   Internet Explorer 8
   Firefox 3.5
   Safari 4
   Google Chrome



  1991      1996        1998   1999    2000-02   2003    2005     2006    2007   2009    2010
história da Interwebz          como consertar?          como continuar?           exemplos




2010


   Crescimento do HTML5 e do CSS3
   iPad
   Apple x Flash
   Morte do IE 6 (pelo Google)




  1991      1996        1998   1999    2000-02   2003    2005     2006    2007   2009    2010
história da Interwebz          como consertar?          como continuar?              exemplos




2010




                                                                            Yahoo! e UOL @ 10-08-2010




  1991      1996        1998   1999    2000-02   2003    2005     2006    2007     2009        2010
história da Interwebz          como consertar?            como continuar?                exemplos




2010
Designers                             Front-end Devs                        Back-end Devs
  Wireframe das páginas                “Cortam” os layouts em               Desenvolvem o sistema
  Definem interações                    imagens
  Desenham layouts                     Estrutura semântica do HTML
                                       e CSS Orientado a Objeto
                                       Interações avançadas com
                                       JavaScript
                                       Otimização de carregamento
                                       da página




  1991      1996        1998   1999    2000-02    2003      2005     2006     2007      2009        2010
Como consertar?
Identificando os problemas de comunicação
e conflitos entre as áreas, e solucionando-os
história da Interwebz      como consertar?   como continuar?        exemplos




O Problema
                                                               Back-end
                                                                 Devs

                        Designers


        Managers
                 Testers

        Stakeholders                                    Front-end
                                                          Devs
história da Interwebz             como consertar?           como continuar?                 exemplos




O Problema
Designers                              Front-end Devs                     Back-end Devs
  São os únicos que se                   Não seguem corretamente o            Desenvolvem o sistema, mas
  envolvem com o P.O./                   layout e as especificações            devolvem dados
  Stakeholder/Cliente e testers          dos Designers                        incompletos/mal formatados

  Não possuem conhecimento               Não sabem integrar o HTML            Desenvolvem o sistema, mas
  em front-end ou back-end, e            ao sistema desenvolvido,             não criam as views certas
  elaboram features                      deixando que um Back-end
  complexas/impossíveis para             Dev o faça                           Fazem alterações no
  o tempo disponível                                                          ambiente de
                                         Não possuem conhecimento             desenvolvimento (migrations,
  Alteram layouts ou                     suficiente de JavaScript,             gems, configurações da
  funcionalidades e                      consumindo tempo do Back-            aplicação) e não comunicam
  comunicam de última hora               end Dev                              o Front-end Dev
  (ou não comunicam)
                                         Se recusam a configurar               Não auxiliam ou ensinam o
  São inflexíveis em simplificar           ambientes e aprender                 Front-end Dev a instalar,
  o layout ou interação para             sistemas de versionamento            configurar e utilizar recursos
  diminuir o tempo de
  desenvolvimento                                                             Enxergam o produto como
                                                                              programadores mas nunca
                                                                              como usuários
história da Interwebz        como consertar?   como continuar?       exemplos




A Solução


                          Managers                 Back-end
                                                     Devs

                        Stakeholders
                                                         Designers


                              Testers               Front-end
                                                      Devs
história da Interwebz   como consertar?   como continuar?   exemplos




A Solução

   Um único time: Design + Front-end + Back-end

   Um único objetivo: fazer o melhor pelo time, pelo
   P.O., e pelo usuário

   Trabalho constante junto ao P.O.

   Transparência entre todos

   Compartilhamento de conhecimento entre as áreas
história da Interwebz            como consertar?            como continuar?                 exemplos




A Solução
Designers                             Front-end Devs                      Back-end Devs
  Devem saber o básico (de              Devem estar em contato                Devem ter conhecimento
  preferência o intermediário)          constante com os Designers,           básico de Front-end
  de Front-end Development              de preferência opinando
                                        construtivamente na                   Devem produzir as views e
  Deve ter uma noção e se               interface                             imprimir os dados
  interessar pelo trabalho dos                                                corretamente
  Back-end Developers                   Devem seguir as
                                        especificações do layout e             Devem auxiliar o Front-end
  Devem comunicar                       das funcionalidades,                  Dev caso haja problemas ou
  alterações de layouts e               consultando os Designers              dificuldades com a view
  funcionalidades a todos o             caso haja dificuldades
  quanto antes                                                                Devem ter uma noção e se
                                        Devem ter conhecimento na             interessar pelo trabalho dos
  Devem estar dispostos a               linguagem de Back-end, em             Designers, esclarecendo
  simplificar o layout/                  ferramentas de                        quaisquer dúvidas técnicas
  funcionalidade (e lutar por           versionamento e o básico do
  isso contra o P.O.)                   básico de infra para rodar o
                                        ambiente
história da Interwebz   como consertar?   como continuar?   exemplos




A Solução




       Fim do egocentrismo na própria área
história da Interwebz   como consertar?    como continuar?    exemplos




A Solução

                           “Eu não vejo diferença entre Front-
                           end e Back-end developer. Pra mim,
                           são todos developers e devem ser
                           tratados igualmente.”

                                          Ronaldo Ferraz (@rferraz)
Como continuar?
Sugestões de workflows e organização para manter
      a equipe sincronizada e funcionando
história da Interwebz   como consertar?   como continuar?   exemplos




                           1. Wireframes
história da Interwebz   como consertar?   como continuar?                  exemplos




1. Wireframes




                                                                               Colombia Travel
                                                            Fonte: www.wireframeshowcase.com
história da Interwebz   como consertar?   como continuar?   exemplos




1. Wireframes
   Documentam as features (e desejos do P.O.)

   Ajudam o P.O. e o tester a enxergarem melhor as
   features

   Estruturam a página para que o HTML seja feito

   Documentam funcionalidades da interface

   Deixam claro aos Back-end Devs as funcionalidades
   do sistema e dados a serem impressos

   Facilitam a estimativa das histórias
história da Interwebz   como consertar?   como continuar?               exemplos




2. Meetings




                                                            Fonte: icanhascheezburguer.com
história da Interwebz   como consertar?   como continuar?   exemplos




2. Meetings


   Daily meetings, plannings, reviews e retrospectives
   devem envolver todos (designers, front-end e back-
   end devs)

   Meetings que envolvem todos não devem entrar em
   detalhes técnicos – discutir isso separadamente

   tempo++ == stress++ == harmonia--
história da Interwebz   como consertar?   como continuar?   exemplos




                             3. Tech talks
história da Interwebz   como consertar?   como continuar?                      exemplos




3. Tech talks




                                                            Fonte: @taq - http://twitpic.com/2engls
história da Interwebz   como consertar?   como continuar?   exemplos




3. Tech talks


   Compartilha o conhecimento entre todos

   Quebra a rotina do trabalho

   Promove skills sociais

   Slides/vídeos/anotações servem como referência
   posterior
história da Interwebz   como consertar?   como continuar?   exemplos




                              4. Work ow
história da Interwebz   como consertar?   como continuar?   exemplos




4. Work ow (Scrum)

   O wireframe de cada história deve ser feito
   separadamente em outra história, um sprint antes

   Histórias devem ter design, front e back-end
   simultâneos, em constante comunicação

   Testes devem ser constantes

   Todos devem tirar quaisquer dúvidas com o P.O.
   diretamente – design, front e back-end estão no
   mesmo “nível”
história da Interwebz             como consertar?                       como continuar?                      exemplos




4. Work ow (Scrum)


          Sprint n-1                                    Sprint n                                     Sprint n+1

                    Wireframe/UX                Design

                                                Interface Dev.
                                                                           Bug fix
                                                                          & deploy
                                                Back-end Dev.

                                                              Testes




                            Planning 1 & 2                                 Planning 1 & 2
                        Wireframe é apresentado e explicado            Wireframe é apresentado e explicado
Exemplos
O que deu certo e o que deu errado
Recapitulando...
Recapitulando...



Design: Protótipos, Wireframes, Arquitetura, UX, Arte

Back-end: Sistema, oferece toda a funcionalidade e
dados necessários à interface

Front-end: Interface que conecta o back-end ao Design
Recapitulando...

Design, front e back-end devem formar um único time

Todos devem compartilhar conhecimentos e acabar
com barreiras entre as áreas

Todos devem prontamente auxiliar outras áreas

Todos devem se interessar pelo trabalho das outras
áreas

Todos devem cuidar para que todos façam suas tasks
com perfeição
Recapitulando...

Wireframes: devem ser feitos com antecedência, ajudam
(muito) a mapear funcionalidades e fazer estimativas

Meetings: rápidos, somente o necessário, envolvendo
todos

Meetings: discussões técnicas somente com a sua área

Tech talks: ajudam a passar o conhecimento

Workflow: todos simultaneamente na história, evitando o
formato waterfall
Obrigado!
Eduardo Shiota Yasuda - @shiota
          contato@eshiota.com
             www.eshiota.com

Mais conteúdo relacionado

Mais de Eduardo Shiota Yasuda

RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio APIRetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
Eduardo Shiota Yasuda
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
Eduardo Shiota Yasuda
 
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScriptModular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
Eduardo Shiota Yasuda
 
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Eduardo Shiota Yasuda
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerce
Eduardo Shiota Yasuda
 
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaArquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
Eduardo Shiota Yasuda
 
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
Eduardo Shiota Yasuda
 
User Experience para Developers
User Experience para DevelopersUser Experience para Developers
User Experience para Developers
Eduardo Shiota Yasuda
 
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire JapanSushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Eduardo Shiota Yasuda
 

Mais de Eduardo Shiota Yasuda (9)

RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio APIRetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
RetroJS - Escrevendo músicas da era 8-bits com JavaScript e Web Audio API
 
Criando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zeroCriando uma arquitetura de front-end do zero
Criando uma arquitetura de front-end do zero
 
Modular and Event-Driven JavaScript
Modular and Event-Driven JavaScriptModular and Event-Driven JavaScript
Modular and Event-Driven JavaScript
 
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
Baby.com.br: Analisando, adaptando e melhorando a arquitetura da informação e...
 
Desafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerceDesafios do Desenvolvimento de Front-end em um e-commerce
Desafios do Desenvolvimento de Front-end em um e-commerce
 
Arquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga EscalaArquitetura de Front-end em Aplicações de Larga Escala
Arquitetura de Front-end em Aplicações de Larga Escala
 
Responsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da WebResponsive Web Design e a Ubiquidade da Web
Responsive Web Design e a Ubiquidade da Web
 
User Experience para Developers
User Experience para DevelopersUser Experience para Developers
User Experience para Developers
 
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire JapanSushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
Sushi e Interfaces - PechaKucha São Paulo Vol. 8 + Inspire Japan
 

Último

TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
Danilo Pinotti
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
joaovmp3
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Gabriel de Mattos Faustino
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
Faga1939
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 

Último (8)

TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 
Segurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas PráticasSegurança Digital Pessoal e Boas Práticas
Segurança Digital Pessoal e Boas Práticas
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
 
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdfEscola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
Escola Virtual - Fundação Bradesco - ITIL - Gabriel Faustino.pdf
 
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
PRODUÇÃO E CONSUMO DE ENERGIA DA PRÉ-HISTÓRIA À ERA CONTEMPORÂNEA E SUA EVOLU...
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 

O Design e a Interface no mundo da Programação

  • 1. O Design e a Interface no mundo da programação ... ou “Como acabar com as guerras civis no desenvolvimento de um produto” Eduardo Shiota Yasuda | Dev in Sampa 2010 | 15.08.2010
  • 3. @shiota: 3 anos de Ciência da Computação [quase] Formado em Design Trabalha com Front-end, UX e Design Irmão do @shadow11 - back-end jedi developer
  • 4. Problema O desenvolvimento de um produto é prejudicado por conflitos e falta de comunicação entre design, front-end e back-end
  • 5. Objetivo Identificar papéis e obrigações de cada um, unificar o time e estabelecer uma metologia eficiente de desenvolvimento
  • 6. história da Interwebz como consertar? como continuar? exemplos
  • 7. História da Interwebz Como as interfaces evoluíram e os papéis mudaram
  • 8. história da Interwebz como consertar? como continuar? exemplos 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 9. história da Interwebz como consertar? como continuar? exemplos 1991 Primeira página HTML por Tim Berners-Lee 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 10. história da Interwebz como consertar? como continuar? exemplos 1996 Entrada das empresas na Web Netscape Navigator 2 Internet Explorer 3 JavaScript ASP 1.0 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 11. história da Interwebz como consertar? como continuar? exemplos 1996 Yahoo! e UOL - 1996 Fonte: The Wayback Machine 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 12. história da Interwebz como consertar? como continuar? exemplos 1996 Designers Front-end Devs Back-end Devs Fazem imagens Desenvolvem o sistema Desenham “layouts” Fazem o HTML e colocam as imagens Atualizam o conteúdo Modificam os layouts 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 13. história da Interwebz como consertar? como continuar? exemplos 1998 HTML 4.0 CSS 1 Macromedia (R.I.P.) Dreamweaver PHP 3 Mozilla 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 14. história da Interwebz como consertar? como continuar? exemplos 1998 Yahoo! e UOL - 1998 Fonte: The Wayback Machine 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 15. história da Interwebz como consertar? como continuar? exemplos 1998 Designers Front-end Devs Back-end Devs Fazem imagens Desenvolvem o sistema Desenham layouts Fazem o HTML e colocam as imagens Interações com JavaScript Atualizam o conteúdo Modificam os layouts 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 16. história da Interwebz como consertar? como continuar? exemplos 1999 Explosão “ponto-com” Photoshop com slices e “Save for Web” Macromedia (R.I.P.) Flash 4 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 17. história da Interwebz como consertar? como continuar? exemplos 1999 Yahoo! e UOL - 1999 Fontes: The Wayback Machine & UOL História 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 18. história da Interwebz como consertar? como continuar? exemplos 2000~2002 Redesign das páginas Introdução da Arquitetura da Informação, Usabilidade e User Experience na Web Surgimento do Front-end Developer 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 19. história da Interwebz como consertar? como continuar? exemplos 2000~2002 Yahoo! @ 18-18-2002 e UOL @ 2001 Fontes: The Wayback Machine & UOL História 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 20. história da Interwebz como consertar? como continuar? exemplos 2000~2002 Designers Front-end Devs Back-end Devs Wireframe das páginas “Cortam” os layouts em Desenvolvem o sistema Definem interações imagens Interações com JavaScript Desenham layouts HTML, geralmente com tabelas e estilos inline Interações com JavaScript 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 21. história da Interwebz como consertar? como continuar? exemplos 2003 CSS Zen Garden Movimento Tableless Safari 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 22. história da Interwebz como consertar? como continuar? exemplos 2005 YouTube Orkut Ruby on Rails Firefox & Safari 2 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 23. história da Interwebz como consertar? como continuar? exemplos 2006 Moda “Web 2.0” Crescimento do uso do AJAX Internet Explorer 7 & Firefox 2 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 24. história da Interwebz como consertar? como continuar? exemplos 2007 iPhone Ruby on Rails no Mac OS X Safari 3 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 25. história da Interwebz como consertar? como continuar? exemplos 2009 Explosão do mercado mobile Internet Explorer 8 Firefox 3.5 Safari 4 Google Chrome 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 26. história da Interwebz como consertar? como continuar? exemplos 2010 Crescimento do HTML5 e do CSS3 iPad Apple x Flash Morte do IE 6 (pelo Google) 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 27. história da Interwebz como consertar? como continuar? exemplos 2010 Yahoo! e UOL @ 10-08-2010 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 28. história da Interwebz como consertar? como continuar? exemplos 2010 Designers Front-end Devs Back-end Devs Wireframe das páginas “Cortam” os layouts em Desenvolvem o sistema Definem interações imagens Desenham layouts Estrutura semântica do HTML e CSS Orientado a Objeto Interações avançadas com JavaScript Otimização de carregamento da página 1991 1996 1998 1999 2000-02 2003 2005 2006 2007 2009 2010
  • 29. Como consertar? Identificando os problemas de comunicação e conflitos entre as áreas, e solucionando-os
  • 30. história da Interwebz como consertar? como continuar? exemplos O Problema Back-end Devs Designers Managers Testers Stakeholders Front-end Devs
  • 31. história da Interwebz como consertar? como continuar? exemplos O Problema Designers Front-end Devs Back-end Devs São os únicos que se Não seguem corretamente o Desenvolvem o sistema, mas envolvem com o P.O./ layout e as especificações devolvem dados Stakeholder/Cliente e testers dos Designers incompletos/mal formatados Não possuem conhecimento Não sabem integrar o HTML Desenvolvem o sistema, mas em front-end ou back-end, e ao sistema desenvolvido, não criam as views certas elaboram features deixando que um Back-end complexas/impossíveis para Dev o faça Fazem alterações no o tempo disponível ambiente de Não possuem conhecimento desenvolvimento (migrations, Alteram layouts ou suficiente de JavaScript, gems, configurações da funcionalidades e consumindo tempo do Back- aplicação) e não comunicam comunicam de última hora end Dev o Front-end Dev (ou não comunicam) Se recusam a configurar Não auxiliam ou ensinam o São inflexíveis em simplificar ambientes e aprender Front-end Dev a instalar, o layout ou interação para sistemas de versionamento configurar e utilizar recursos diminuir o tempo de desenvolvimento Enxergam o produto como programadores mas nunca como usuários
  • 32. história da Interwebz como consertar? como continuar? exemplos A Solução Managers Back-end Devs Stakeholders Designers Testers Front-end Devs
  • 33. história da Interwebz como consertar? como continuar? exemplos A Solução Um único time: Design + Front-end + Back-end Um único objetivo: fazer o melhor pelo time, pelo P.O., e pelo usuário Trabalho constante junto ao P.O. Transparência entre todos Compartilhamento de conhecimento entre as áreas
  • 34. história da Interwebz como consertar? como continuar? exemplos A Solução Designers Front-end Devs Back-end Devs Devem saber o básico (de Devem estar em contato Devem ter conhecimento preferência o intermediário) constante com os Designers, básico de Front-end de Front-end Development de preferência opinando construtivamente na Devem produzir as views e Deve ter uma noção e se interface imprimir os dados interessar pelo trabalho dos corretamente Back-end Developers Devem seguir as especificações do layout e Devem auxiliar o Front-end Devem comunicar das funcionalidades, Dev caso haja problemas ou alterações de layouts e consultando os Designers dificuldades com a view funcionalidades a todos o caso haja dificuldades quanto antes Devem ter uma noção e se Devem ter conhecimento na interessar pelo trabalho dos Devem estar dispostos a linguagem de Back-end, em Designers, esclarecendo simplificar o layout/ ferramentas de quaisquer dúvidas técnicas funcionalidade (e lutar por versionamento e o básico do isso contra o P.O.) básico de infra para rodar o ambiente
  • 35. história da Interwebz como consertar? como continuar? exemplos A Solução Fim do egocentrismo na própria área
  • 36. história da Interwebz como consertar? como continuar? exemplos A Solução “Eu não vejo diferença entre Front- end e Back-end developer. Pra mim, são todos developers e devem ser tratados igualmente.” Ronaldo Ferraz (@rferraz)
  • 37. Como continuar? Sugestões de workflows e organização para manter a equipe sincronizada e funcionando
  • 38. história da Interwebz como consertar? como continuar? exemplos 1. Wireframes
  • 39. história da Interwebz como consertar? como continuar? exemplos 1. Wireframes Colombia Travel Fonte: www.wireframeshowcase.com
  • 40. história da Interwebz como consertar? como continuar? exemplos 1. Wireframes Documentam as features (e desejos do P.O.) Ajudam o P.O. e o tester a enxergarem melhor as features Estruturam a página para que o HTML seja feito Documentam funcionalidades da interface Deixam claro aos Back-end Devs as funcionalidades do sistema e dados a serem impressos Facilitam a estimativa das histórias
  • 41. história da Interwebz como consertar? como continuar? exemplos 2. Meetings Fonte: icanhascheezburguer.com
  • 42. história da Interwebz como consertar? como continuar? exemplos 2. Meetings Daily meetings, plannings, reviews e retrospectives devem envolver todos (designers, front-end e back- end devs) Meetings que envolvem todos não devem entrar em detalhes técnicos – discutir isso separadamente tempo++ == stress++ == harmonia--
  • 43. história da Interwebz como consertar? como continuar? exemplos 3. Tech talks
  • 44. história da Interwebz como consertar? como continuar? exemplos 3. Tech talks Fonte: @taq - http://twitpic.com/2engls
  • 45. história da Interwebz como consertar? como continuar? exemplos 3. Tech talks Compartilha o conhecimento entre todos Quebra a rotina do trabalho Promove skills sociais Slides/vídeos/anotações servem como referência posterior
  • 46. história da Interwebz como consertar? como continuar? exemplos 4. Work ow
  • 47. história da Interwebz como consertar? como continuar? exemplos 4. Work ow (Scrum) O wireframe de cada história deve ser feito separadamente em outra história, um sprint antes Histórias devem ter design, front e back-end simultâneos, em constante comunicação Testes devem ser constantes Todos devem tirar quaisquer dúvidas com o P.O. diretamente – design, front e back-end estão no mesmo “nível”
  • 48. história da Interwebz como consertar? como continuar? exemplos 4. Work ow (Scrum) Sprint n-1 Sprint n Sprint n+1 Wireframe/UX Design Interface Dev. Bug fix & deploy Back-end Dev. Testes Planning 1 & 2 Planning 1 & 2 Wireframe é apresentado e explicado Wireframe é apresentado e explicado
  • 49. Exemplos O que deu certo e o que deu errado
  • 51. Recapitulando... Design: Protótipos, Wireframes, Arquitetura, UX, Arte Back-end: Sistema, oferece toda a funcionalidade e dados necessários à interface Front-end: Interface que conecta o back-end ao Design
  • 52. Recapitulando... Design, front e back-end devem formar um único time Todos devem compartilhar conhecimentos e acabar com barreiras entre as áreas Todos devem prontamente auxiliar outras áreas Todos devem se interessar pelo trabalho das outras áreas Todos devem cuidar para que todos façam suas tasks com perfeição
  • 53. Recapitulando... Wireframes: devem ser feitos com antecedência, ajudam (muito) a mapear funcionalidades e fazer estimativas Meetings: rápidos, somente o necessário, envolvendo todos Meetings: discussões técnicas somente com a sua área Tech talks: ajudam a passar o conhecimento Workflow: todos simultaneamente na história, evitando o formato waterfall
  • 54. Obrigado! Eduardo Shiota Yasuda - @shiota contato@eshiota.com www.eshiota.com