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

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

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

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

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

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

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

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

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

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

TRABALHANDO COM TRÊS CAMADAS
DESIGN: CSS

TRABALHANDO COM TRÊS CAMADAS
COMPORTAMENTO: JS

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

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

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!

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

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

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

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

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)

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

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

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

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

EXEMPLO 1
FORMULÁRIO SEMANTICO

EXEMPLO 2
TABELA SEMANTICA
RESULTADO

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

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

DICAS

FERRAMENTAS

ACOMPANHE AS TENDENCIAS
MOBILE

ACOMPANHE AS TENDENCIAS

ACOMPANHE AS TENDENCIAS
MÍDIAS SOCIAIS

ACOMPANHE AS TENDENCIAS
OTIMIZAÇÃO PARA
MECANISMOS DE BUSCAS

ACOMPANHE AS TENDENCIAS
INTERATIVIDADE

FINALIZANDO
COBRE MAIS PELO IE6

FINALIZANDO
TESTE

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

FINALIZANDO
VÁ EM EVENTOS E
PALESTRAS

FINALIZANDO
ESTUDE MUITO

PERGUNTAS?

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