Html5 Aula 6

segunda-feira, 11 de junho de 12

HTML5 ESSENCIAL
Fundamentos de todo serviço na Web

EMENTA
• Fundamentos de Web
• Documentos HTML
• Conteúdo
• Multimídia
• Semântica
• Desempenho
3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Html5 Aula 6

Mais conteúdo relacionado

Mais procurados

Semelhante a Html5 Aula 6

Mais de Jose Berardo

Html5 Aula 6