BoaspráticasRondinelli	  Mesquita	  rondinellimesquitas@gmail.com	  D e s e n v o l v i m e n t o D e We b s i t e s D e s...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e ...
Próximos SlideShares
Carregando em…5
×

Desenvolvimento de websites boas práticas

406 visualizações

Publicada em

0 comentários
2 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
406
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
22
Comentários
0
Gostaram
2
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Desenvolvimento de websites boas práticas

  1. 1. BoaspráticasRondinelli  Mesquita  rondinellimesquitas@gmail.com  D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  DesenvolvimentodeWebsites
  2. 2. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  1.  Pré-­‐Projeto  2.  Planejamento  3.  Desenvolvimento  4.  Validação  5.  Publicação  6.  Manutenção  e  Otimização          Passoapasso
  3. 3. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Fase  de  aprendizado  •  Conhecer    a  necessidade  do  cliente  •  Entender  o  público  alvo  •  Orçamento  •  Prazo  De  que  forma  isso  ocorre  •  Entrevista  •  Questionários  Pré-ProjetoPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  4. 4. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  •  Prototipagem  É  um  modelo  que  simula  a  aparência  e  funcionalidade  do  software.  O  modelo  gerado  (protótipo)  auxilia  em  diversos  pontos:    o  Correção  de  erros  o  Análise  de  Interface  •  Acessibilidade  •  Usabilidade  o  Validação    PlanejamentoPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  5. 5. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  DicaPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  Pratiqueobomdesign
  6. 6. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Essecara…Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  7. 7. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  …nãosejaessecaraPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  8. 8. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  •  Seguir  um  padrão  o  Cores  o  Fontes  o  Posição  de  elementos  •  Orientar  e  conduzir  o  usuário  o  Menus  o  Breadcrumbs  o  Link  para  página  inicial  •  Conteúdo  relevante  •  Falar  na  linguagem  do  usuário  DicasPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  9. 9. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  LayoutPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  10. 10. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  •  Layout  LayoutPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  11. 11. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Resoluções  1280x800Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  12. 12. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Layout  Responsive    Layout  preparado  para  se  adaptar  a  resolução  de    qualquer  dispositivo,  seja  ele  tablet,  smartphone,    computador.  1280x800Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  Fonte:  http://johnpolacek.github.com/    
  13. 13. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Tecnologias  DesenvolvimentoPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  14. 14. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  FontesPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  Lorem  Ipsum Lorem IpsumLorem IpsumLorem IpsumLOREM IPSUMLoremIpsumLorem  Ipsum   Lorem Ipsum
  15. 15. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  DicaPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  Escolhaatecnologiacomcuidado!
  16. 16. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  ComponentesPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  17. 17. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  DicaPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  Estejaatentoacompatibilidadedosnavegadores
  18. 18. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Fonte:  http://www.rudalov.com/    CompatibilidadePré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  19. 19. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  •  Validar  o  site  junto  a  W3c  •  Verificar  compatibilidade  com  os  navegadores  •  Verificar  compatibilidade  com  dispositivos  •  Acessibilidade  •  Usabilidade  ValidaçãoPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  20. 20. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Acessibilidade    Garantir  que  o  website  possa  ser  acessado  por  qualquer  pessoa,  de  qualquer  lugar,  com  qualquer  dispositivo,  tendo  ela  qualquer  nível  de  conhecimento  em  tecnologia.    •  Deficientes  •  Novos  usuários  •  Usuários  inexperientes  AcessibilidadePré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  21. 21. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Fonte:  http://www.peterelst.com/    AcessibilidadePré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  Fonte:  http://altec.colorado.edu/    
  22. 22. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Usabilidade    Qualidade  da  experiência  do  uso  de  alguma  coisa.    •  Facilidade  aprendizagem  •  Produtividade  •  Facilidade  de  memorização  •  Satisfação  UsabilidadePré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  23. 23. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  DicaPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  Useíconesecorespararepresentaraçõesno site
  24. 24. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Utiliza-­‐se  um  software  conhecido  como  FTP.  Ele  serve  para  se  enviar  e  receber  arquivos  de  um  servidor  web.                •  Escolher  servidor  de  hospedagem  •  Comprar  domínio    www.seusite.com.br      PublicaçãoPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  FTP
  25. 25. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Continuar  alimentando  o  site  •  Informações  •  Produtos    ManutençãoeOtimizaçãoPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  26. 26. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Como  otimizar?  •  Nome  de  domínio  •  Redes  sociais  •  Produza  conteúdo  em  diversos  formatos  o  PDF,  vídeo,  imagens,  powerPoint  •  Procure  websites  com  conteúdo  relacionado  •  Web  Analytics  ManutençãoeOtimizaçãoPré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  
  27. 27. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s    bit.ly/sistemasdeinfo    rondymesquita    rondinellimesquitas@gmail.com      Finalizando…
  28. 28. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  •  http://www.w3schools.com/  •  http://www.mestreseo.com.br/  •  http://www.blogwebdesignmicrocamp.com.br/  •  http://webinsider.uol.com.br/  •  http://tableless.com.br/  LinksÚteis
  29. 29. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Gerador  de  Cores  •  http://kuler.adobe.com  •  http://colorschemedesigner.com/  •  http://www.degraeve.com/color-­‐palette/index.php  •  http://colllor.com/  Prototipagem  •  http://pencil.evolus.vn/  •  http://cacoo.com    Validador  W3C  •  http://validator.w3.org/    Ferramentas
  30. 30. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  Ferramentas  CSS3  •  http://css3generator.com/  •  http://www.colorzilla.com/gradient-­‐editor/  Simulador  de  Daltonismo  •  http://vischeck.com/    
  31. 31. D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s D e s e n v o l v i m e n t o D e We b s i t e s  MACDONALD,  Matthew.  Criação  de  sites:  o  manual  que  faltava.  São  Paulo:  Digerati  Books,  2010    BH,  Carlos.  Seis  passos  para  desenvolver  websites.  Disponível  em  <http://www.blogwebdesignmicrocamp.com.br/webdesign/seis-­‐passos-­‐para-­‐desenvolver-­‐web-­‐sites/>  .  Acesso  em  15  de  dez.  de  2012.    EIS,  Diego.  Dicas  para  ter  compatibilidade  nos  browsers.  Diponível  em  http://tableless.com.br/dicas-­‐para-­‐ter-­‐compatibilidade-­‐nos-­‐browsers/.  Acesso  em  15  de  dez.  de  2012.    EIS,  Diego.  Utilizando  a  biblioteca  modernizr.  Diponível  em  http://tableless.com.br/utilizando-­‐a-­‐biblioteca-­‐modernizr/.  Acesso  em  15  de  dez.  de  2012.    RUDALOV,  Alexandre.  CSS3  Propriedades  e  compatibilidades  nos  navegadores.  Disponível  em  http://www.rudalov.com/css3-­‐propriedades-­‐e-­‐compatibilidades-­‐nos-­‐navegadores/  .  Acesso  em  15  de  dez.  de  2012.        Referências

×