View
4.094
Download
3
Category
Preview:
DESCRIPTION
Quais as vantagens e por que construir uma página em web standards é o que mostra essa apresentação.
Citation preview
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
Recommended