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 universal, disponível para
todos independente de dispositivos de acesso ou
deficiências do usuário.
3

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

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

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 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

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

Trabalhando com HTML da forma correta
Modularizar o conteúdo (grid)
10

Trabalhando com HTML da forma correta
Diversificar uso de tags
<div id=\"menu\">
<a href=\"index.html\">Página inicial</a><br> Classificamos
<a href=\"a-empresa.html\">A empresa</a><br> melhor nosso
<a href=\"produtos.html\">Produtos</a><br> conteúdo
<a href=\"contato.html\">Contato</a>
</div>
<ul id=\"menu\">
<li><a href=\"index.html\" title=\"Voltar à página inicial\">Página inicial</a></li>
<li><a href=\"a-empresa.html\" title=\"Mais detalhes sobre a empresa\">A empresa</a></li>
<li><a href=\"produtos.html\" title=\"Produtos oferecidos pela empresa\">Produtos</a></li>
<li><a href=\"contato.html\" title=\"Formas de contato conosco\">Contato</a></li>
</ul>
11

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 conteúdo mais detalhadamente.
13

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 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

Microformats
Principais padrões utilizados:
• hCalendar
• hCard
• rel-license
• rel-nofollow
• rel-tag
• XFN
17

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 dados: nome,
endereço, telefone e e-mail.
19

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=\"mailto:contacto@cl.hsbc.com\"
title=\"Contacto\">contacto@cl.hsbc.com</a>
</div>
20
Documento confidencial

Microformats
Exemplo prático: hCard Código-fonte
<div id=\"hcard-HSBC-Chile\" class=\"vcard caixa\">
<p><strong class=\"org\">HSBC</strong> <strong class=\"fn n\"><span class=\"given-
name\">HSBC Chile</span></strong></p>
<div class=\"adr\">
<p><span class=\"street-address\">Avenida Andrés Bello 2711</span> Piso 9</p>
<em>Las Condes <span class=\"locality\">Santiago</span> <span class=\"country-
name\">Chile</span></em>
</div>
<p><strong>Tel:</strong> <span class=\"tel\">+ 56 2 299 7200</span></p>
<a class=\"email\" href=\"mailto:contacto@cl.hsbc.com\"
title=\"Contacto\">contacto@cl.hsbc.com</a>
</div>
21
Documento confidencial

Microformats
Exemplo prático: hCard Código-fonte
<div id=\"hcard-HSBC-Chile\" class=\"vcard caixa\">
<p><strong class=\"org\">HSBC</strong> <strong class=\"fn n\"><span class=\"given-
name\">HSBC Chile</span></strong></p>
<div class=\"adr\">
<p><span class=\"street-address\">Avenida Andrés Bello 2711</span> Piso 9</p>
<em>Las Condes <span class=\"locality\">Santiago</span> <span class=\"country-
name\">Chile</span></em>
</div>
<p><strong>Tel:</strong> <span class=\"tel\">+ 56 2 299 7200</span></p>
<a class=\"email\" href=\"mailto:contacto@cl.hsbc.com\"
title=\"Contacto\">contacto@cl.hsbc.com</a>
</div>
22
Documento confidencial

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

Quem já está usando Microformats?
24

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

Quem já está usando Microformats?
Google Rich Snippets:
Ainda em fase de testes,
suporta apenas alguns tipos
de Microformats
26

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 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

OBRIGADO
Carlos Eduardo de Souza
project47.viscountbox.com
29 webstandards.blog.br