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Ç...
TRABALHANDO COM WEB STANDARDS

ESTRUTURA
  – HTML + XML = (X)HTML
    REGRAS DE SINTAXE:
       – OBRIGATÓRIO FECHAR TAGS
...
TRABALHANDO COM WEB STANDARDS

ESTRUTURA
  – HTML + XML = (X)HTML
    TAGS SEMANTICAS
  – SEPARANDO O CONTEUDO DA APRESENT...
TRABALHANDO COM WEB STANDARDS

ESTRUTURA
  – SEPARANDO O CONTEUDO DA APRESENTAÇÃO
    CSS: CASCATA
      – CSS

      – (X...
TRABALHANDO COM WEB STANDARDS

ESTRUTURA
  – SEPARANDO O CONTEUDO DA APRESENTAÇÃO
    CSS: DECLARAÇÃO
      – INLINE



  ...
TRABALHANDO COM WEB STANDARDS

ESTRUTURA
  – SCRIPTS E MANIPULAÇÃO DE ELEMENTOS
    JS
         – DEIXAM A ESTRUTURA DINAM...
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...
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
• ACESSIBILI...
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 U...
UMA PEDRA NO MEIO DO CAMINHO...

OUTROS PROBLEMAS
  – DESENVOLVIMENTO CORRIDO
  – VÁRIOS DESENVOLVEDORES NO MESMO
    PROJ...
BOAS PRÁTICAS

MICROFORMATS

  "Microformatos é um conjunto de formatos abertos
   projetados para adicionar semântica em ...
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,...
BOAS PRÁTICAS
CMS, FRAMEWORKS E APIS
PLANEJAMENTO
  – PPP (PARAR PRA PENSAR)
  – 5W 2H
    •   WHAT (O QUE)
    •   WHEN (...
BOAS PRÁTICAS
DIFERENCIAR LINKS
  – EVITE APENAS MUDAR A COR
  – ALÉM DO PADRÃO SUBLINHADO
    • BORDER-BOTTOM
    • BACKG...
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...
PENSANDO NA ACESSIBILIDADE

COMO FAZER O SITE ACESSÍVEL?
  – ELIMINE FRAMES
  – FORMULÁRIOS SEMANTICOS
  – TABELAS SÃO PAR...
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...
WEB STANDARDS E SEO

 – CABEÇALHOS (H1, H2, H3...)
 – TEXTOS ANCORAS

 – ALT
 – ATRIBUTO TITLE
 – ENFASES: <STRONG> <EM>
 ...
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
Upcoming SlideShare
Loading in …5
×

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

4,592 views

Published on

Quais as vantagens e por que construir uma página em web standards é o que mostra essa apresentação.

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,592
On SlideShare
0
From Embeds
0
Number of Embeds
676
Actions
Shares
0
Downloads
143
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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

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

×