Desenvolvimento de websites boas práticas

Boas práticas Rondinelli  Mesquita  

[email protected]  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Desenvolvimento de Websites

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

1.   Pré-­‐Projeto  2.   Planejamento  3.   Desenvolvimento  4.   Validação  5.   Publicação  6.   Manutenção  e  Otimização  

Passo a passo

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb 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é-Projeto Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb 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    

Planejamento Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Dica Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

Pratique o bom design

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Esse cara… Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

…não seja esse cara Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb 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  

Dicas Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Layout Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

•  Layout  

Layout Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Resoluções  

1280x800 Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Layout  Responsive    Layout  preparado  para  se  adaptar  a  resolução  de    qualquer  dispositivo,  seja  ele  tablet,  smartphone,    computador.  

1280x800 Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

Fonte:  http://johnpolacek.github.com/    

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Tecnologias  

Desenvolvimento Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Fontes Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

Lorem  Ipsum Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

LOREM IPSUM LoremIpsum

Lorem  Ipsum   Lorem Ipsum

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Dica Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

Escolha a tecnologia com cuidado!

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Componentes Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Dica Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

Esteja atento a compatibilidade dos

navegadores

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Fonte:  http://www.rudalov.com/    

Compatibilidade Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

•  Validar  o  site  junto  a  W3c  •  Verificar  compatibilidade  com  os  navegadores  •  Verificar  compatibilidade  com  dispositivos  •  Acessibilidade  •  Usabilidade  

Validação Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb 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  

Acessibilidade Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Fonte:  http://www.peterelst.com/    

Acessibilidade Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

Fonte:  http://altec.colorado.edu/    

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Usabilidade    Qualidade  da  experiência  do  uso  de  alguma  coisa.  

 •  Facilidade  aprendizagem  •  Produtividade  •  Facilidade  de  memorização  •  Satisfação  

Usabilidade Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Dica Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

Use ícones e cores para representar ações no site

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb 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ção Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

FTP

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Continuar  alimentando  o  site  •  Informações  •  Produtos    

Manutenção e Otimização Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb 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ção e Otimização Pré-­‐Projeto        Planejamento        Desenvolvimento        Validação        Publicação        Manutenção  e  Otimização  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

 bit.ly/sistemasdeinfo  

 rondymesquita  

 [email protected]  

Finalizando…

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb 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

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb 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

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e s  

Ferramentas  CSS3  •  http://css3generator.com/  •  http://www.colorzilla.com/gradient-­‐editor/  

Simulador  de  Daltonismo  •  http://vischeck.com/  

De s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb s i t e sDe s e n v o l v imen t oDeWeb 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