Web Standards e a
     semântica na Web



          14º EDTED
1
O que são os Web Standards?




2
O que são os Web Standards?




    Padrões estabelecidos pelo World Wide Web Consortium
    (W3C) a fim de criar uma Web ...
O que são os Web Standards?



    A escrita correta do HTML e CSS proporciona:


    • Código mais limpo e objetivo;

   ...
O que são os Web Standards?



    Desenvolvimento separado por camadas
    O código HTML volta a ser desenvolvido sem a c...
O que são os Web Standards?



    Desenvolvimento separado por camadas




6
Trabalhando com HTML da forma correta




7
Trabalhando com HTML da forma correta



    • Esqueça os editores visuais (WYSIWYG);

    • Declare o DOCTYPE corretament...
Trabalhando com HTML da forma correta



    Incluir CSS no cabeçalho do código




     <link rel=”stylesheet” type=”text...
Trabalhando com HTML da forma correta



 Modularizar o conteúdo (grid)




10
Trabalhando com HTML da forma correta



 Diversificar uso de tags

 <div id=quot;menuquot;>
   <a href=quot;index.htmlquo...
Limitações do HTML atual




12
Limitações do HTML atual




     Avanço das aplicações na Web exige criação de novas tags para
             classificar o...
Limitações do HTML atual



 Soluções propostas:


 • HTML 5

 • XHTML 2

 • RDFa

 • Microformats




14
Microformats




15
Microformats




O que é?                         O que não é?

Padrão criado para adicionar     Novo tipo de tecnologia q...
Microformats



 Principais padrões utilizados:


 • hCalendar

 • hCard

 • rel-license

 • rel-nofollow

 • rel-tag

 • ...
Microformats



 Padrões ainda em desenvolvimento (drafts):


 • hAtom

 • hProduct

 • hResume

 • hReview




18
Microformats



     Exemplo prático: hCard    Visualização




Necessidade de criar um
perfil para o HSBC Chile
com os da...
Microformats



  Exemplo prático: hCard                                Código-fonte


<div>
   <p><strong>HSBC</strong> <...
Microformats



  Exemplo prático: hCard                                   Código-fonte


<div id=quot;hcard-HSBC-Chilequo...
Microformats



  Exemplo prático: hCard                                   Código-fonte


<div id=quot;hcard-HSBC-Chilequo...
Microformats



 Ferramentas:


 • Há geradores de Microformats para diversos padrões:

     • hCard;

     • hCalendar;

...
Quem já está usando Microformats?




24
Quem já está usando Microformats?


                                                 Aplicados na
                        ...
Quem já está usando Microformats?



 Google Rich Snippets:
                                      Ainda em fase de testes,...
Futuro da Web Semântica




27
Futuro da Web Semântica




      A chamada “Web 3.0” terá como foco a total classificação do
     conteúdo, representando...
OBRIGADO


     Carlos Eduardo de Souza
     project47.viscountbox.com
29   webstandards.blog.br
Upcoming SlideShare
Loading in …5
×

Web Standards semântica Na Web

4,301
-1

Published on

O site que segue os Web Standards possui diversas vantagens e garante que o desenvolvedor se preocupa com seu usuário.
Porém, com o avanço das aplicações Web a necessidade pela criação de novas tags e, consequentemente, melhor classificação do conteúdo gerou soluções como os Microformats, melhor opção da atualidade.

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

No Downloads
Views
Total Views
4,301
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
105
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide





























  • Web Standards semântica Na Web

    1. 1. Web Standards e a semântica na Web 14º EDTED 1
    2. 2. O que são os Web Standards? 2
    3. 3. O que são os Web Standards? Padrões estabelecidos pelo World Wide Web Consortium (W3C) a fim de criar uma Web universal, disponível para todos independente de dispositivos de acesso ou deficiências do usuário. 3
    4. 4. O que são os Web Standards? A escrita correta do HTML e CSS proporciona: • Código mais limpo e objetivo; • Economia de tempo e dinheiro: • Menor tempo para manutenções; • Transferência de dados é reduzida drasticamente; • Site mais acessível a dispositivos e deficientes (visuais e motores); • Sistemas de busca dão maior relevância. 4
    5. 5. O que são os Web Standards? Desenvolvimento separado por camadas O código HTML volta a ser desenvolvido sem a customização visual. As tags criadas somente para efeitos de estilização não devem ser mais usadas, por exemplo: <b>, <i>, <u>, <font>, <center>, <blink>, <marquee> A maneira correta de aplicar o layout é utilizar folhas de estilo (CSS). 5
    6. 6. O que são os Web Standards? Desenvolvimento separado por camadas 6
    7. 7. Trabalhando com HTML da forma correta 7
    8. 8. Trabalhando com HTML da forma correta • Esqueça os editores visuais (WYSIWYG); • Declare o DOCTYPE corretamente; • Descrever o site e seu conteúdo através das Meta Tags; • Incluir CSS no cabeçalho do código, usando um arquivo externo (.css); • Modularizar o conteúdo; • Utilizar comentários sempre que possível; • Manter padrão para nomenclatura de classes e ID’s; • Diversificar uso de tags para enriquecer o conteúdo e sua semântica. 8
    9. 9. Trabalhando com HTML da forma correta Incluir CSS no cabeçalho do código <link rel=”stylesheet” type=”text/css” href=”css/estilo.css” media=”screen” /> 9
    10. 10. Trabalhando com HTML da forma correta Modularizar o conteúdo (grid) 10
    11. 11. Trabalhando com HTML da forma correta Diversificar uso de tags <div id=quot;menuquot;>   <a href=quot;index.htmlquot;>Página inicial</a><br> Classificamos   <a href=quot;a-empresa.htmlquot;>A empresa</a><br> melhor nosso   <a href=quot;produtos.htmlquot;>Produtos</a><br> conteúdo   <a href=quot;contato.htmlquot;>Contato</a> </div>    <ul id=quot;menuquot;>   <li><a href=quot;index.htmlquot; title=quot;Voltar à página inicialquot;>Página inicial</a></li>   <li><a href=quot;a-empresa.htmlquot; title=quot;Mais detalhes sobre a empresaquot;>A empresa</a></li>   <li><a href=quot;produtos.htmlquot; title=quot;Produtos oferecidos pela empresaquot;>Produtos</a></li>   <li><a href=quot;contato.htmlquot; title=quot;Formas de contato conoscoquot;>Contato</a></li> </ul> 11
    12. 12. Limitações do HTML atual 12
    13. 13. Limitações do HTML atual Avanço das aplicações na Web exige criação de novas tags para classificar o conteúdo mais detalhadamente. 13
    14. 14. Limitações do HTML atual Soluções propostas: • HTML 5 • XHTML 2 • RDFa • Microformats 14
    15. 15. Microformats 15
    16. 16. Microformats O que é? O que não é? Padrão criado para adicionar Novo tipo de tecnologia que fará semântica ao nosso conteúdo, você esquecer tudo que sem criar novas tags. aprendeu até hoje e recomeçar do zero. Como não depende de iniciativa da W3C teve menos burocracia e Não tem como objetivo já é amplamente utilizado. classificar TODOS os dados da Internet. 16
    17. 17. Microformats Principais padrões utilizados: • hCalendar • hCard • rel-license • rel-nofollow • rel-tag • XFN 17
    18. 18. Microformats Padrões ainda em desenvolvimento (drafts): • hAtom • hProduct • hResume • hReview 18
    19. 19. Microformats Exemplo prático: hCard Visualização Necessidade de criar um perfil para o HSBC Chile com os dados: nome, endereço, telefone e e-mail. 19
    20. 20. Microformats Exemplo prático: hCard Código-fonte <div> <p><strong>HSBC</strong> <strong><span>HSBC Chile</span></strong></p> <div> <p><span>Avenida Andrés Bello 2711</span> Piso 9</p> <em>Las Condes <span>Santiago</span> <span>Chile</span></em> </div> <p><strong>Tel:</strong> <span>+ 56 2 299 7200</span></p> <a href=quot;mailto:contacto@cl.hsbc.comquot; title=quot;Contactoquot;>contacto@cl.hsbc.com</a> </div> 20 Documento confidencial
    21. 21. Microformats Exemplo prático: hCard Código-fonte <div id=quot;hcard-HSBC-Chilequot; class=quot;vcard caixaquot;> <p><strong class=quot;orgquot;>HSBC</strong> <strong class=quot;fn nquot;><span class=quot;given- namequot;>HSBC Chile</span></strong></p> <div class=quot;adrquot;> <p><span class=quot;street-addressquot;>Avenida Andrés Bello 2711</span> Piso 9</p> <em>Las Condes <span class=quot;localityquot;>Santiago</span> <span class=quot;country- namequot;>Chile</span></em> </div> <p><strong>Tel:</strong> <span class=quot;telquot;>+ 56 2 299 7200</span></p> <a class=quot;emailquot; href=quot;mailto:contacto@cl.hsbc.comquot; title=quot;Contactoquot;>contacto@cl.hsbc.com</a> </div> 21 Documento confidencial
    22. 22. Microformats Exemplo prático: hCard Código-fonte <div id=quot;hcard-HSBC-Chilequot; class=quot;vcard caixaquot;> <p><strong class=quot;orgquot;>HSBC</strong> <strong class=quot;fn nquot;><span class=quot;given- namequot;>HSBC Chile</span></strong></p> <div class=quot;adrquot;> <p><span class=quot;street-addressquot;>Avenida Andrés Bello 2711</span> Piso 9</p> <em>Las Condes <span class=quot;localityquot;>Santiago</span> <span class=quot;country- namequot;>Chile</span></em> </div> <p><strong>Tel:</strong> <span class=quot;telquot;>+ 56 2 299 7200</span></p> <a class=quot;emailquot; href=quot;mailto:contacto@cl.hsbc.comquot; title=quot;Contactoquot;>contacto@cl.hsbc.com</a> </div> 22 Documento confidencial
    23. 23. Microformats Ferramentas: • Há geradores de Microformats para diversos padrões: • hCard; • hCalendar; • XFN; • hReview. Os demais são tão simples que podem ser decorados ;) 23
    24. 24. Quem já está usando Microformats? 24
    25. 25. Quem já está usando Microformats? Aplicados na Mídia Digital: W3C Tecnisa Google HSBC Chile Yahoo HSBC Arena Technorati Thá Microsoft Unimed Wordpress Mídia Digital 25
    26. 26. Quem já está usando Microformats? Google Rich Snippets: Ainda em fase de testes, suporta apenas alguns tipos de Microformats 26
    27. 27. Futuro da Web Semântica 27
    28. 28. Futuro da Web Semântica A chamada “Web 3.0” terá como foco a total classificação do conteúdo, representando uma revolução dos sistemas de busca. • Microformats são a opção mais viável na atualidade; • HTML 5 e XHTML 2; • RDFa oferece a maior flexibilidade. 28
    29. 29. OBRIGADO Carlos Eduardo de Souza project47.viscountbox.com 29 webstandards.blog.br
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×