1. Boaspráticas
Rondinelli
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. 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. 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é-Projeto
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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
Planejamento
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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
Dica
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização
Pratiqueobom
design

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. 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ãosejaessecara
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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
Dicas
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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
Layout
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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
Layout
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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
1280x800
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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.
1280x800
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização
Fonte:
http://johnpolacek.github.com/

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
Desenvolvimento
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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
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

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
Dica
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização
Escolhaatecnologiacom
cuidado!

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
Componentes
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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
Dica
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização
Estejaatentoa
compatibilidadedos
navegadores

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/
Compatibilidade
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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ção
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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
Acessibilidade
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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/
Acessibilidade
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização
Fonte:
http://altec.colorado.edu/

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
Usabilidade
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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
Dica
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização
Useíconesecorespara
representaraçõesno site

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ção
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização
FTP

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ção
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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ção
Pré-­‐Projeto
Planejamento
Desenvolvimento
Validação
Publicação
Manutenção
e
Otimização

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. 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. 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. 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. 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