Global Software Development - O que pode ser aplicado?
Desenvolvimento de websites boas práticas
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