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

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

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

TRABALHANDO COM TRÊS CAMADAS

• TEMPO DE CARREGAMENTO REDUZIDO• COMPATIBILIDADE COM OS NOVOS

NAVEGADORES• ACESSIBILIDADE UNIVERSAL• FÁCIL MANUTENÇÃO• SEO

POR QUE PENSAR EM PADRÕES WEB?

UMA PEDRA NO MEIO DO CAMINHO...

IE6 E IE7

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

UMA PEDRA NO MEIO DO CAMINHO...

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 APISPLANEJAMENTO

– 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

BOAS PRÁTICAS

RESULTADO

USABILIDADE– NAVEGAÇAO

• FACIL DE SE IDENTIFICAR– LOCALIZAÇÃO DAS INFORMAÇÕES– TESTES

BOAS PRÁTICAS

VAI ALÉM DE LEITORES DE TELA E DEFICIENTESVISUAIS

– 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

PENSANDO NA ACESSIBILIDADE

EXEMPLO 1FORMULÁRIO SEMANTICO

EXEMPLO 2TABELA SEMANTICA

RESULTADO

“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

WEB STANDARDS E SEO

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 MORGAUSEWWW.WDCSS.COM.BR

@CLEOMORGAUSE CLEOMORGAUSE@GMAIL.COM