Html5 Aula 6

segunda-feira, 11 de junho de 12

HTML5 ESSENCIALFundamentos de todo serviço na Web


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

EMENTA

3


• Documentos HTML• Conteúdo• Multimídia• Semântica

• Tags semânticas• Links descritivos e meta tags• RDFa, Microformats, Microdata

• Desempenho

O QUE VEREMOS AGORA

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


http://www.w3.org/1999/02/22-rdf-syntax-ns#

http://www.w3.org/1999/02/22-rdf-syntax-ns#

http://www.recshop.fake/cd#

http://www.recshop.fake/cd#

http://www.recshop.fake/cd/Empire

http://www.recshop.fake/cd/Empire

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


http://schema.org

http://schema.org

http://schema.org

http://schema.org

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


http://schema.org

http://schema.org

http://www.especializa.com.br


http://schema.org

http://schema.org

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


http://www.w3.org/TR/rdfa-primer/

http://www.w3.org/TR/rdfa-primer/

http://www.alistapart.com/articles/introduction-to-rdfa/

http://www.alistapart.com/articles/introduction-to-rdfa/

http://support.google.com/webmasters/bin/answer.py?hl=en&answer=146898

http://support.google.com/webmasters/bin/answer.py?hl=en&answer=146898

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


http://www.microformats.org

http://www.microformats.org



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">[email protected]</span></div>

• O div address é tanto propriedade (itemprop) de Organization quanto itemscope do tipo (itemtype) PostalAddress

22


http://schema.org/Organization

http://schema.org/Organization

http://schema.org/PostalAddress

http://schema.org/PostalAddress

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


http://data-vocabulary.org/Organization




http://dev.opera.com/articles/view/microdata-and-the-microdata-dom-api/

http://dev.opera.com/articles/view/microdata-and-the-microdata-dom-api/

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


http://linkeddata.org/

http://linkeddata.org/

http://labs.mondeca.com/dataset/lov/

http://labs.mondeca.com/dataset/lov/

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


http://especializa.com.br/blog/2012/06/05/web-semantica-qual-o-significado-das-coisas/




Html5 Aula 6

Internet

Transcript of Html5 Aula 6