Quais as vantagens e por que construir uma página em web standards é o que mostra essa apresentação.

1. WEB STANDARDS
Melhores práticas para construção de
páginas web

2. O QUE SÃO WEB
STANDARDS?
WTH???

3. O QUE SÃO WEB STANDARDS?
VANTAGENS:
– MULTI-PLATAFORMA
– PORTABILIDADE
– REDUÇÃO DE TAMANHO
– MELHORIA NA INDEXAÇÃO DE PÁGINAS (SEO)
– ACESSIBILIDADE

4. TRABALHANDO COM WEB STANDARDS
ESTRUTURA
– HTML + XML = (X)HTML
REGRAS DE SINTAXE:
– OBRIGATÓRIO FECHAR TAGS
– AS TAGS SEGUEM A MESMA ORDEM QUE FORAM ABERTAS
– TUDO MINUSCULO

5. TRABALHANDO COM WEB STANDARDS
ESTRUTURA
– HTML + XML = (X)HTML
TAGS SEMANTICAS
– SEPARANDO O CONTEUDO DA APRESENTAÇÃO
CSS: HERANÇA
– CSS
– (X)HTML
– RESULTADO

6. TRABALHANDO COM WEB STANDARDS
ESTRUTURA
– SEPARANDO O CONTEUDO DA APRESENTAÇÃO
CSS: CASCATA
– CSS
– (X)HTML
– RESULTADO

7. TRABALHANDO COM WEB STANDARDS
ESTRUTURA
– SEPARANDO O CONTEUDO DA APRESENTAÇÃO
CSS: DECLARAÇÃO
– INLINE
– INCORPORADAS
– EXTERNAS

8. TRABALHANDO COM WEB STANDARDS
ESTRUTURA
– SCRIPTS E MANIPULAÇÃO DE ELEMENTOS
JS
– DEIXAM A ESTRUTURA DINAMICA
– DECLARAR NO FINAL DO DOCUMENTO (X)HTML

9. TRABALHANDO COM TRÊS CAMADAS
CONTEÚDO: (X)HTML

10. TRABALHANDO COM TRÊS CAMADAS
DESIGN: CSS
– COMECE PELAS TAGS PRINCIPAIS
– BLOCOS DE ELEMENTOS PAI
– ELEMENTOS ESPECÍFICOS

11. TRABALHANDO COM TRÊS CAMADAS
DESIGN: CSS

12. TRABALHANDO COM TRÊS CAMADAS
COMPORTAMENTO: JS

13. POR QUE PENSAR EM PADRÕES WEB?
• TEMPO DE CARREGAMENTO REDUZIDO
• COMPATIBILIDADE COM OS NOVOS
NAVEGADORES
• ACESSIBILIDADE UNIVERSAL
• FÁCIL MANUTENÇÃO
• SEO

14. UMA PEDRA NO MEIO DO CAMINHO...
IE6 E IE7

15. UMA PEDRA NO MEIO DO CAMINHO...
SOLUÇÃO
– USO DE CONDICIONAIS
ATENÇÃO!!!
– USAR CONDICIONAIS NÃO SIGNIFICA FAZER UM
CSS INTEIRO PARA ESSES NAVEGADORES!

16. UMA PEDRA NO MEIO DO CAMINHO...
OUTROS PROBLEMAS
– DESENVOLVIMENTO CORRIDO
– VÁRIOS DESENVOLVEDORES NO MESMO
PROJETO
– EDITORES WYSIWYG

17. BOAS PRÁTICAS
MICROFORMATS
"Microformatos é um conjunto de formatos abertos
projetados para adicionar semântica em qualquer
documento XML, especialmente HTML/XHTML."
Wikipedia, 2009

18. BOAS PRÁTICAS
CSS 3.0
OTIMIZAÇÃO DO CSS
– AGRUPAR ELEMENTOS DE MESMOS ESTILOS

19. BOAS PRÁTICAS
OTIMIZAÇÃO DO CSS
– ANINHAR PROPRIEDADES
– ALGUMAS DICAS:
• USE HIERARQUIAS
• COMENTE O CSS, MAS NÃO EXAGERE
• ECONOMIZE ESPAÇOS EM BRANCO

20. BOAS PRÁTICAS
CMS, FRAMEWORKS E APIS
PLANEJAMENTO
– PPP (PARAR PRA PENSAR)
– 5W 2H
• WHAT (O QUE)
• WHEN (QUANDO)
• WHO (QUEM)
• WHERE (ONDE)
• WHY (POR QUE)
• HOW (COMO)
• HOW MUCH (QUANTO)

21. BOAS PRÁTICAS
DIFERENCIAR LINKS
– EVITE APENAS MUDAR A COR
– ALÉM DO PADRÃO SUBLINHADO
• BORDER-BOTTOM
• BACKGROUND-COLOR
RESULTADO

22. BOAS PRÁTICAS
USABILIDADE
– NAVEGAÇAO
• FACIL DE SE IDENTIFICAR
– LOCALIZAÇÃO DAS INFORMAÇÕES
– TESTES

23. PENSANDO NA ACESSIBILIDADE
VAI ALÉM DE LEITORES DE TELA E DEFICIENTES
VISUAIS
– NAVEGAÇÃO: SEM MOUSE?
– CONEXÃO LENTA
– NAVEGADORES DE DISPOSITIVOS MÓVEIS

24. PENSANDO NA ACESSIBILIDADE
COMO FAZER O SITE ACESSÍVEL?
– ELIMINE FRAMES
– FORMULÁRIOS SEMANTICOS
– TABELAS SÃO PARA DADOS, NÃO PARA
MARCAÇÃO
– TABELAS SEMANTICAS
– EVITE EXCESSO DE JAVASCRIPTS
– EVITE NAVEGAÇÃO EM FLASH OU JS

25. EXEMPLO 1
FORMULÁRIO SEMANTICO

26. EXEMPLO 2
TABELA SEMANTICA
RESULTADO

27. WEB STANDARDS E SEO
“ESTRATÉGIAS APLICADAS DENTRO E FORA DA
PÁGINA PARA QUE SEU POSICIONAMENTO NOS
SITES DE BUSCA MELHORE.”
– TITLE
– URL
– H1

28. WEB STANDARDS E SEO
– CABEÇALHOS (H1, H2, H3...)
– TEXTOS ANCORAS
– ALT
– ATRIBUTO TITLE
– ENFASES: <STRONG> <EM>
– NOMES DE ARQUIVOS

29. DICAS

30. FERRAMENTAS

31. ACOMPANHE AS TENDENCIAS
MOBILE

32. ACOMPANHE AS TENDENCIAS

33. ACOMPANHE AS TENDENCIAS
MÍDIAS SOCIAIS

34. ACOMPANHE AS TENDENCIAS
OTIMIZAÇÃO PARA
MECANISMOS DE BUSCAS

35. ACOMPANHE AS TENDENCIAS
INTERATIVIDADE

36. FINALIZANDO
COBRE MAIS PELO IE6

37. FINALIZANDO
TESTE

38. FINALIZANDO
PEÇA OPNIÃO....
APRENDA COM OS OUTROS

39. FINALIZANDO
VÁ EM EVENTOS E
PALESTRAS

40. FINALIZANDO
ESTUDE MUITO

41. PERGUNTAS?

42. OBRIGADO! xD
CLEO MORGAUSE
WWW.WDCSS.COM.BR
@CLEOMORGAUSE
CLEOMORGAUSE@GMAIL.COM