O documento discute os fundamentos da HTML5, incluindo tags semânticas, links descritivos, meta tags e formas de adicionar semântica a documentos HTML como RDFa, Microformats e Microdata. Apresenta exemplos dessas técnicas e discute como elas melhoram a acessibilidade e o desempenho de sites.
3. EMENTA
• Fundamentos de Web
• Documentos HTML
• Conteúdo
• Multimídia
• Semântica
• Desempenho
3
segunda-feira, 11 de junho de 12
4. O QUE VEREMOS AGORA
• Documentos HTML
• Conteúdo
• Multimídia
• Semântica
• Tags semânticas
• Links descritivos e meta tags
• RDFa, Microformats, Microdata
• Desempenho
4
segunda-feira, 11 de junho de 12
5. TAGS SEMÂNTICAS
• O princípio é maximizar o potencial de audiência
• Quanto mais semântico for o código, mas acessível a leitores
de tela, buscadores e outros sites de uso específico,
consequentemente maior o potencial de audiência do seu
produto
• Qualquer mínima adição de semântica é bem-vinda e pode lhe
trazer benefícios até inesperados, como alguém conseguindo
extrair informações de seu site se baseando na construção
semântica dos seus elementos
• Falamos sobre os novos elementos estruturais semânticos
da HTML5, citamos tópicos de acessibilidade como alt em
tags <img>, semântica em textos, tabelas, listas, formulários,
objetos especiais como <meter> e <progress> e até mesmo
em tags <track> de inserções de vídeos
5
segunda-feira, 11 de junho de 12
6. SEMÂNTICA DE MENUS
• Mais sobre a tag <nav>
• W3C: “O elemento <nav> representa a seção da página que
linka para outras páginas ou outras partes da página. Nem
todo grupo de links deve estar em um <nav>, apenas o que se
considera navegação principal da página”.
• Exemplos de onde é possível usar o <nav>
• Índice de conteúdo do site
• Finalidade principal dessa tag
• Botões de paginação e links para próximo ou anterior
• Navegações estilo migalhas de pão (breakcrumbs)
• Tag <menu>
• A tag <menu> deve ser usada em menus de comandos de
uma aplicação Web e não como navegação de um site
• Ainda não é suportada por nenhum browser
6
segunda-feira, 11 de junho de 12
7. LINKS DESCRITIVOS
• É possível vincular documentos externos
informando o contexto semântico que eles
estão inseridos
• A tag <link> é útil para anexar outros documentos ao atual
• Possui um atributo href para definir qual vai ser o arquivo
• Possui um atributo rel para definir o tipo de relacionamento
alternate contents home section
appendix copyright index start
bookmark glossary next stylesheet
chapter help prev subsection
O stylesheet é o que todo mundo conhece, é quem carrega o CSS
• Enquanto rel diz o que o documento em href é para a página
atual, existe o rev para dizer o que a página é para o
documento no href
7
segunda-feira, 11 de junho de 12
8. LINKS DESCRITIVOS
• Uma observação curiosa sobre hrefs e srcs
• Você deve ter notado que sempre que carregamos um arquivo
externo, utilizamos um atributo src.
• Exs: <img src="foto.jpg"/>, <video src="filme.mp4">...</video>
• No entanto, na tag <a>, utilizamos href para informar para
onde o browser deve ir quando ela for clicada pelo usuário
• As tags <link>, embora carreguem documentos externos, o
fazem usando href e não src
• Talvez tenha sido por causa do seu nome link, que ficou famoso nas
tags <a>
• Note que o termo link é muito genérico. Aportuguesando, linkar já virou
verbo que significa juntar, unir, criar uma ponte ou um laço entre duas
coisas
• Até a tag <form> com seu atributo action gera um link entre a página
atual e a que vai ser requisitada quando este formulário for submetido
8
segunda-feira, 11 de junho de 12
9. LINKS DESCRITIVOS
• Qual a aplicação da tag link?
• Segundo a referência oficial, tags <link> só devem vir no
<head>, nunca no <body>
• Representam vínculos gerais entre dois documentos
• Exemplo, folhas de estilo CSS são carregadas em tags <link>
para que possam aplicar regras de formatação e estética para
todo o HTML principal
• Ex: <link rel="stylesheet" href="estilos.css" />
• Páginas alternativas
• O rel alternate é útil para representar um caminho para uma outra
versão da página. Em geral em outro formato (como PDF) ou outro
idioma
• É possível criar links para traduções do documento com o atributo hreflang.
• Ex: <link rel="alternate" href="jeparlefrancais.html" hreflang="fr" />
9
segunda-feira, 11 de junho de 12
10. LINKS DESCRITIVOS
• Qual a aplicação da tag link?
• Tags <link> só devem vir no <head>, nunca no <body>
• Representam vínculos gerais entre dois documentos
• Exemplo, folhas de estilo CSS são carregadas em tags <link>
para que possam aplicar regras de formatação e estética para
todo o HTML principal
• Ex: <link rel="stylesheet" href="estilos.css" />
• Páginas alternativas
• O rel alternate é útil para representar um caminho para uma outra
versão da página. Em geral em outro formato (como PDF) ou outro
idioma
• É possível criar links para traduções do documento com o atributo hreflang.
• Ex: <link rel="alternate" href="jeparlefrancais.html" hreflang="fr" />
10
segunda-feira, 11 de junho de 12
11. META TAGS
• Tags de uso exclusivo no <head> do documento
• Sempre foram úteis para informar aos browsers dados que
deveriam vir nos cabeçalhos HTTP. Exemplo:
• <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
• A tag <meta> acima informou ao navegador que o tipo MIME do
conteúdo é text/html e a tabela de codificação usada em sua escrita foi a
UTF-8
• O atributo http-equiv é quem informa ao browser equivalências de
cabeçalhos HTTP, mas também tem outras serventias
• <meta http-equiv="Cache-control" content="no-cache"/>
• Acima, informamos ao browser não salvar a página em cache
• <meta http-equiv="refresh" content="10; url=http://www.novaurl.com/"/>
• Já a linha acima vai forçar um redirecionamento do browser para nova
URL 10 segundos após carregar a página atual
• O atributo content determina o valor do http-equiv
11
segunda-feira, 11 de junho de 12
12. META TAGS
• O atributo name substitui o http-equiv em uma
gama imensa de possibilidades. Exemplos:
• Com ele, diversas informações podem ser passadas ao Google:
• <meta name="description" content="Meu site de estudos sobre HTML5"/>
• <meta name="keywords" content="html5, rdfa, microformats, microdata"/>
• <meta name="robots" content="all"/>
• Foge de nosso escopo explicá-las aqui. Aconselhamos nosso curso de SEO, embora tudo aqui
nesta aula seja importante pra lá
• O atributo property é padrão RDFa (veremos adiante) e é usado
no lugar do name em alguns casos, como para o Facebook:
• <meta property="og:image" content="http://site.com/foto.jpg"/>
• Quando alguém escreve o link de sua página no Facebook, seu robô vai buscar esse tipo de
meta informação de sua página para exibir no quadro abaixo do comentário do usuário
• Conheça nosso curso Social Web Developer para mais integrações com redes sociais e acesse o
site oficial do Open Graph Protocol (www.opengraphprotocol.org)
12
segunda-feira, 11 de junho de 12
13. SEMÂNTICA TOTAL
• RDFa, Microformats e Microdata são padrões
de mercado para adicionar ainda mais
semântica aos documentos HTML
• Humanos diferenciam endereços, telefones, nomes, etc no meio do
conteúdo de um texto, mas as máquinas não. Em diversas situações,
seria interessante que elas também fossem capazes de identificar esse
tipo deu conteúdo
• Essas três tecnologias são especificações abertas que de uma forma
ou de outra padronizaram a escrita de certos elementos como
calendário de eventos, nomes de pessoas ou empresas, produtos,
promoções, etc.
• Redes sociais, portais de conteúdo e diversos outros sites já as
utilizam para universalizar a publicação de suas informações
• Buscadores e navegadores, nativamente, ou através de plugins, são
capazes de extrair informações de sites que utilizem esses “jeitos
padronizados”de escrever documentos
• Exemplo: Eventos do Facebook são escritos com microformats e podem ser exportados
para o iCal ou interpretados por plugins do Chrome ou do Firefox.
13
segunda-feira, 11 de junho de 12
14. RDF
• Resource Description Framework
• Padrão antigo do W3C para construção de textos com
marcações que utilizam namespaces XML.
• Apesar de existir desde 1999, só foi incluído nos planos da
Web Semântica do W3C oficialmente em 2004
• Não foi criado para ser usado com o HTML, mas para
representar certos vocabulários conhecidos de dados
• O mercado deve então criar esses vocabulários (como
eventos, produtos, empresas, ou seja, qualquer coisa que
considere importante padronizar)
• O mercado deve também escrever documentos usando esses
vocabulários
• O RDFa é a especificação da adoção do padrão RDF em
documentos XHTML ou mais recentemente HTML5
• Em 08 de Maio de 2012, todas as subespecificações do RDFa ainda
se encontravam em desenvolvimento
14
segunda-feira, 11 de junho de 12
15. EXEMPLO DE RDF
<rdf:RDF
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cd="http://www.recshop.fake/cd#">
<rdf:Description rdf:about="http://www.recshop.fake/cd/Empire
Burlesque">
<cd:artist>Bob Dylan</cd:artist>
<cd:country>USA</cd:country>
<cd:company>Columbia</cd:company>
<cd:price>10.90</cd:price>
<cd:year>1985</cd:year>
</rdf:Description>
</rdf:RDF>
15
segunda-feira, 11 de junho de 12
16. EXEMPLO DE RDF
• O que fizemos no exemplo anterior?
• Foi criado um documento XML que informou que toda tag
iniciando por rdf: deverá seguir as regras gerais dos
documentos RDF
• A declaração xmlns:rdf (que significa xml namespace prefixada por
rdf) apontou para a URL oficial do RDF
• Foi informado também que toda tag prefixada por cd: deve
estar contida no vocabulário publicado em um certo endereço
• Ps: Esse endereço não existe, foi apenas um exemplo aleatório
extraído do W3Schools
• Se alguma ferramenta for ler esse texto, basta que ela também
conheça o vocabulário para conseguir facilmente interpretar
seu conteúdo
16
segunda-feira, 11 de junho de 12
17. RDF EM ATRIBUTOS
• RDFa Lite 1.1
• Em 2004, o W3C sugeriu a adição de marcações RDF em
documentos XHTML, através de atributos de suas tags,
criando o RDFa. Conheça os atributos:
• vocab: Determina a URL de onde será recuperado o vocabulário
• typeof: Determina o nome do vocabulário
• <p vocab="http://schema.org/" typeof="Person">
Meu nome é Manu Sporny e você pode me ligar no número 81-3465.0032
ou visitar meu site
</p>
• property: Determina o metadado do valor informado
• <p vocab="http://schema.org/" typeof="Person">
Meu nome é <span property="name">Manu Sporny</span>
e você pode me ligar no número <span property="telephone">81-3465.0032</span>
ou visitar meu <a property="url" href="http://www.especializa.com.br/">site</a>
</p>
17
segunda-feira, 11 de junho de 12
18. RDF EM ATRIBUTOS
• O conteúdo da meta informação pode ser prefixado
• prefix: Prefixos são utilizados para combinar outros vocabulários
• <p vocab="http://schema.org/" typeof="Person"
prefix="ov:http://open.vocab.org/terms">
Meu nome é <span property="name">Manu Sporny</span>
e você me ligar no número <span property="telephone">81-3465.0032</span>
ou visitar meu <a property="url" href="http://www.especializa.com.br/">site</a>.
Estudei na <span property="ov:UnivSchool">Universidade Federal de Pernambuco</span>
</p>
• resource: Carrega URLs (absoluta ou relativa) para indicar local onde
encontrar mais sobre o assunto abordado
• <p vocab="http://purl.org/dc/terms/" >
<div resource="/alice/post/jtrouble_with_bob">
<h2 property="title">The trouble with Bob</h2>
<p>Date: <span property="created">2011-09-10</span></p>
<h3 property="creator">Alice</h3>
</div>
</p>
18
segunda-feira, 11 de junho de 12
19. RDF EM ATRIBUTOS
• O W3C possui uma ampla documentação sobre o assunto RDFa
e semântica.
• Para mais informações consulte:
• Documentação Oficial da versão 1.1:
http://www.w3.org/TR/rdfa-primer/
• Tutorial didático sobre o assunto:
http://www.alistapart.com/articles/introduction-to-rdfa/
• Recomendações do Google sobre a utilização do RDFa
• http://support.google.com/webmasters/bin/answer.py?hl=en&answer=146898
19
segunda-feira, 11 de junho de 12
20. MICROFORMATS
• Versão mais simplificada de carregamento de marcações
• Focada na XHTML, por isso não criou novos atributos
• Utiliza o atributo class para adicionar uma propriedade
• Todo o catálogo de vocabulários é centralizado no site
www.microformats.org
• Exemplo (usando o perfil hCard):
• <p class="vcard">
• Meu nome é <span class="fn">Jose Berardo</span>.
• Pode me chamar de <span class="nickname">Berardo</span>,
• me ligar no número <span class="telephone">81-3465.0032</span>
• ou visitar meu
<a class="url" href="http://www.especializa.com.br/">site</a>.
• </p>
20
segunda-feira, 11 de junho de 12
21. MICRODATA
• Criado em 2009 para ser simples como o microformats e flexível
como o RDFa
• Vem se tornando padrão da indústria ultimamente
• Herda os mesmos sites catálogos do RDFa e o próprio site
microformats.org também vem sendo entendido como catálogo pelos
leitores de microdata
• Atributos:
• itemscope - Atributo autocontido (não precisa de valor) que apenas
informa que a tag servirá de container (ou escopo) para um determinado
conjunto de informações.
• itemtype - Em geral, vem na mesma tag marcada com itemscope.
Aponta para um endereço público (catálogo) e identifica qual vocabulário o
escopo da tag está se referindo.
• itemprop - Representa justamente a propriedade dentro escopo da tag
que o valor está se referindo.
• itemref - Usada para referenciar uma propriedade definida fora do
itemscope atual.
21
segunda-feira, 11 de junho de 12
22. MICRODATA
• Exemplo:
• <div itemscope itemtype="http://schema.org/Organization">
<h1 itemprop="name">Especializa Treinamentos</h1>
<h2>Dados para contato</h2>
<div itemprop="address" itemscope
itemtype="http://schema.org/PostalAddress">
<h3>Endereço:</h3>
<span itemprop="streetAddress">
Av. Domingos Ferreira 2391, 12º andar
</span>,
<span itemprop="postalCode">51020-031</span>,
<span itemprop="addressLocality">Recife, Pernambuco</span>
</div>
Telefone:<span itemprop="telephone">( 81) 3465.0032 </span>,
E-mail: <span itemprop="email">contato@especializa.com.br</span>
</div>
• O div address é tanto propriedade (itemprop) de Organization quanto
itemscope do tipo (itemtype) PostalAddress
22
segunda-feira, 11 de junho de 12
23. MICRODATA API
• Uma boa novidade da Microdata é a criação de uma API Javscript
• É possível navegar por marcações seguindo a semântica dos microdados
• Não é assunto deste curso mas lá vai um exemplo:
• var empresas = document.getItems("http://data-vocabulary.org/
Organization");
• for (var x in empresas) {
console.log("O nome da empresa é: " +
empresas[x].properties['name'].textContent);
}
• Foram destacados os trechos da nova API
• Mais informações no endereço:
• http://dev.opera.com/articles/view/microdata-and-the-microdata-dom-api/
23
segunda-feira, 11 de junho de 12
24. CATÁLOGOS
• Já falamos sobre o catálogo principal microformats.org, mas tanto
a RDFa quanto a Microdata seguem mais de uma referência. Exs:
• Schema.org - Fruto dos esforços do Google, Bing, Yahoo e Yandex, vem
sendo considerado como o grande consolidador de catálogos para o
Microdata.
• Data-vocabulary.org - O primeiro a ser reconhecido pelo Google
• Open.vocab.org - Criado por Ian Daves, pai do RSS
• Purl.org - Persistent Uniform Resource Locators.
• Os grandes esforços no campo da ontologia (significado das
coisas) convergem sobre o RDF, mas aqui debatemos como a
indústria da web vem importando esses vocabulários
• Talvez o trabalho mais completo sobre catálogos esteja aqui:
• http://linkeddata.org/
• http://labs.mondeca.com/dataset/lov/
24
segunda-feira, 11 de junho de 12
25. MAIS ESTUDOS
• Google Rich Snippets
• Ter um conteúdo mais semântico não apenas pode te ajudar a
aparecer na frente no Google, mas pode te dar mais destaque
mesmo
• Tenha seus eventos, receitas, fotos de pessoas, pontos
geográficos destacados nas páginas de resultado de busca do
Google e não apenas em seu site
• Escrevemos um material a respeito:
• http://especializa.com.br/blog/2012/06/05/web-semantica-qual-o-significado-
das-coisas/
• Lá é possível encontrar referências para praticamente tudo o que
foi visto aqui nesta aula
25
segunda-feira, 11 de junho de 12