![Page 1: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/1.jpg)
WEB STANDARDSMelhores práticas para construção de
páginas web
![Page 2: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/2.jpg)
O QUE SÃO WEB STANDARDS?
WTH???
![Page 3: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/3.jpg)
O QUE SÃO WEB STANDARDS?
VANTAGENS:– MULTI-PLATAFORMA– PORTABILIDADE– REDUÇÃO DE TAMANHO– MELHORIA NA INDEXAÇÃO DE PÁGINAS (SEO)– ACESSIBILIDADE
![Page 4: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/4.jpg)
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
![Page 5: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/5.jpg)
ESTRUTURA– HTML + XML = (X)HTML
TAGS SEMANTICAS– SEPARANDO O CONTEUDO DA APRESENTAÇÃO
CSS: HERANÇA– CSS
– (X)HTML
– RESULTADO
TRABALHANDO COM WEB STANDARDS
![Page 6: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/6.jpg)
ESTRUTURA– SEPARANDO O CONTEUDO DA APRESENTAÇÃO
CSS: CASCATA– CSS
– (X)HTML
– RESULTADO
TRABALHANDO COM WEB STANDARDS
![Page 7: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/7.jpg)
ESTRUTURA– SEPARANDO O CONTEUDO DA APRESENTAÇÃO
CSS: DECLARAÇÃO– INLINE
– INCORPORADAS
– EXTERNAS
TRABALHANDO COM WEB STANDARDS
![Page 8: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/8.jpg)
ESTRUTURA– SCRIPTS E MANIPULAÇÃO DE ELEMENTOS
JS– DEIXAM A ESTRUTURA DINAMICA– DECLARAR NO FINAL DO DOCUMENTO (X)HTML
TRABALHANDO COM WEB STANDARDS
![Page 9: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/9.jpg)
CONTEÚDO: (X)HTML
TRABALHANDO COM TRÊS CAMADAS
![Page 10: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/10.jpg)
DESIGN: CSS– COMECE PELAS TAGS PRINCIPAIS– BLOCOS DE ELEMENTOS PAI– ELEMENTOS ESPECÍFICOS
TRABALHANDO COM TRÊS CAMADAS
![Page 11: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/11.jpg)
DESIGN: CSS
TRABALHANDO COM TRÊS CAMADAS
![Page 12: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/12.jpg)
COMPORTAMENTO: JS
TRABALHANDO COM TRÊS CAMADAS
![Page 13: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/13.jpg)
• TEMPO DE CARREGAMENTO REDUZIDO• COMPATIBILIDADE COM OS NOVOS
NAVEGADORES• ACESSIBILIDADE UNIVERSAL• FÁCIL MANUTENÇÃO• SEO
POR QUE PENSAR EM PADRÕES WEB?
![Page 14: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/14.jpg)
UMA PEDRA NO MEIO DO CAMINHO...
IE6 E IE7
![Page 15: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/15.jpg)
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...
![Page 16: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/16.jpg)
OUTROS PROBLEMAS– DESENVOLVIMENTO CORRIDO– VÁRIOS DESENVOLVEDORES NO MESMO
PROJETO– EDITORES WYSIWYG
UMA PEDRA NO MEIO DO CAMINHO...
![Page 17: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/17.jpg)
MICROFORMATS
"Microformatos é um conjunto de formatos abertos projetados para adicionar semântica em qualquer documento XML, especialmente HTML/XHTML." Wikipedia, 2009
BOAS PRÁTICAS
![Page 18: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/18.jpg)
CSS 3.0
OTIMIZAÇÃO DO CSS– AGRUPAR ELEMENTOS DE MESMOS ESTILOS
BOAS PRÁTICAS
![Page 19: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/19.jpg)
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
![Page 20: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/20.jpg)
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
![Page 21: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/21.jpg)
DIFERENCIAR LINKS– EVITE APENAS MUDAR A COR– ALÉM DO PADRÃO SUBLINHADO
• BORDER-BOTTOM • BACKGROUND-COLOR
BOAS PRÁTICAS
RESULTADO
![Page 22: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/22.jpg)
USABILIDADE– NAVEGAÇAO
• FACIL DE SE IDENTIFICAR– LOCALIZAÇÃO DAS INFORMAÇÕES– TESTES
BOAS PRÁTICAS
![Page 23: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/23.jpg)
VAI ALÉM DE LEITORES DE TELA E DEFICIENTESVISUAIS
– NAVEGAÇÃO: SEM MOUSE?– CONEXÃO LENTA– NAVEGADORES DE DISPOSITIVOS MÓVEIS
PENSANDO NA ACESSIBILIDADE
![Page 24: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/24.jpg)
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
![Page 25: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/25.jpg)
EXEMPLO 1FORMULÁRIO SEMANTICO
![Page 26: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/26.jpg)
EXEMPLO 2TABELA SEMANTICA
RESULTADO
![Page 27: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/27.jpg)
“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
![Page 28: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/28.jpg)
– CABEÇALHOS (H1, H2, H3...)– TEXTOS ANCORAS
– ALT– ATRIBUTO TITLE– ENFASES: <STRONG> <EM>– NOMES DE ARQUIVOS
WEB STANDARDS E SEO
![Page 29: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/29.jpg)
DICAS
![Page 30: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/30.jpg)
FERRAMENTAS
![Page 31: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/31.jpg)
ACOMPANHE AS TENDENCIAS
MOBILE
![Page 32: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/32.jpg)
ACOMPANHE AS TENDENCIAS
![Page 33: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/33.jpg)
ACOMPANHE AS TENDENCIAS
MÍDIAS SOCIAIS
![Page 34: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/34.jpg)
ACOMPANHE AS TENDENCIAS
OTIMIZAÇÃO PARA MECANISMOS DE BUSCAS
![Page 35: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/35.jpg)
ACOMPANHE AS TENDENCIAS
INTERATIVIDADE
![Page 36: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/36.jpg)
FINALIZANDO
COBRE MAIS PELO IE6
![Page 37: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/37.jpg)
FINALIZANDO
TESTE
![Page 38: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/38.jpg)
FINALIZANDO
PEÇA OPNIÃO.... APRENDA COM OS OUTROS
![Page 39: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/39.jpg)
FINALIZANDO
VÁ EM EVENTOS E PALESTRAS
![Page 40: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/40.jpg)
FINALIZANDO
ESTUDE MUITO
![Page 41: Webstandards - Melhores práticas para construção de páginas web](https://reader033.vdocuments.com.br/reader033/viewer/2022051611/54ba801c4a7959f9198b45d2/html5/thumbnails/41.jpg)
PERGUNTAS?