Post on 04-Jul-2015
description
segunda-feira, 11 de junho de 12
HTML5 ESSENCIALFundamentos de todo serviço na Web
segunda-feira, 11 de junho de 12
• Fundamentos de Web• Documentos HTML• Conteúdo• Multimídia• Semântica• Desempenho
EMENTA
3
segunda-feira, 11 de junho de 12
• 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
segunda-feira, 11 de junho de 12
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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