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.

1. Web Standards e a
semântica na Web
14º EDTED
1

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

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. 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. 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. O que são os Web Standards?
Desenvolvimento separado por camadas
6

7. Trabalhando com HTML da forma correta
7

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. 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. Trabalhando com HTML da forma correta
Modularizar o conteúdo (grid)
10

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. Limitações do HTML atual
12

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. Limitações do HTML atual
Soluções propostas:
• HTML 5
• XHTML 2
• RDFa
• Microformats
14

15. Microformats
15

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. Microformats
Principais padrões utilizados:
• hCalendar
• hCard
• rel-license
• rel-nofollow
• rel-tag
• XFN
17

18. Microformats
Padrões ainda em desenvolvimento (drafts):
• hAtom
• hProduct
• hResume
• hReview
18

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. 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. 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. 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. 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. Quem já está usando Microformats?
24

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. Quem já está usando Microformats?
Google Rich Snippets:
Ainda em fase de testes,
suporta apenas alguns tipos
de Microformats
26

27. Futuro da Web Semântica
27

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. OBRIGADO
Carlos Eduardo de Souza
project47.viscountbox.com
29 webstandards.blog.br