Webstandards - Melhores práticas para construção de páginas web

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

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

http://wdcss.blogspot.com	460
http://wdcss.blogspot.com.br	110
http://www.slideshare.net	16
http://blog.ufpr.br	14
http://cedefes.blogspot.com.br	5
http://cedefes.blogspot.com	2
http://www.blogger.com	1
http://wdcss.blogspot.pt	1
http://www.linkedin.com	1

Webstandards - Melhores práticas para construção de páginas web

by Cleo Morgause

Accessibility

Categories

Upload Details

Usage Rights

9 Embeds 610

Statistics

Webstandards - Melhores práticas para construção de páginas web Presentation Transcript