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
13. POR QUE PENSAR EM PADRÕES WEB?
• TEMPO DE CARREGAMENTO REDUZIDO
• COMPATIBILIDADE COM OS NOVOS
NAVEGADORES
• ACESSIBILIDADE UNIVERSAL
• FÁCIL MANUTENÇÃO
• SEO
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
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