Muçulmanos - Suas Crenças e Práticas - Andrew Rippin (01)
Desenvolvimento de websites boas práticas
31
Boas práticas Rondinelli Mesquita [email protected] DesenvolvimentoDeWebsites DesenvolvimentoDeWebsites DesenvolvimentoDeWebsites DesenvolvimentoDeWebsites Desenvolvimento de Websites
-
Upload
rondinelli-mesquita -
Category
Documents
-
view
239 -
download
0
Transcript of Desenvolvimento de websites boas práticas
Boas práticas Rondinelli Mesquita
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
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
