sexta-feira, 31 de maio de 2013

MICROFORMATOS

PPSI 2

01 - DEFINIÇÃO DE WEB SEMÂNTICA
A Web Semântica é uma Web de dados - de datas e os títulos e números de peça e as propriedades químicas e quaisquer outros dados se poderia conceber. A coleção de tecnologias de Web Semântica (RDF, OWL, SKOS, SPARQL, etc) fornece um ambiente onde a aplicação pode consultar esses dados, tirar conclusões usando vocabulários, etc. Ela propõe ajudar os computadores a "ler" e usar a internet. A grande idéia é bem simples - metadados adicionados a páginas Web podem tornar a máquina existente da World Wide Web legível. Isto não vai conceder inteligência artificial aos computadores, ou torná-los auto-conscientes, mas dará às máquinas ferramentas para encontrar, trocar e, dentro de um certo limite, interpretar as informações. É uma extensão, e não uma substituição, da World Wide Web.

LINK: http://informatica.hsw.uol.com.br/web-semantica.htm

02 - DEFINIÇÃO DE MICROFORMATOS
Microformato é um conjunto de formatos abertos projetados para adicionar semântica em qualquer documento XML, especialmente HTML e XHTML.
Isso é feito usando atributos do HTML específicos: class, rel, rev.

Aplicações, como buscadores, podem extrair informações específicas de páginas que usam microformatos, como informações de contato, evento, licença, etc.

03 - DEFINIÇÃO DOS MICROFORMATOS HCARD E HCALENDAR

hCard (Cartão de visita)
É um microformat para publicar os detalhes de contato (que pode não ser mais do que o nome) de pessoas, empresas, organizações e lugares, em (X)HTML, Atom, RSS, ou arbitrário XML. O hCard microformat faz isso usando um 1:1 representação de vCard (RFC 2426) propriedades e valores, identificado usando HTML classes e rel attributes. Ele permite analisar as ferramentas (por exemplo outros websites, ou do Operador de extensão Firefox) para extrair os detalhes, e exibi-las, utilizando alguns outros websites ou ferramentas de mapeamento, índice ou pesquisá-los, ou para carregá-los em um programa, livro de endereços.

Exemplo de um hCard:
<div id="hcard-Gustavo-Martins">

<span>

<span class="given-name">Gustavo</span>

<span class="additional-name">Martins</span>

<span class="family-name"></span>

</span>

<div class="org">S2i</div>

<div>

<div class="street-address">Rua X</div>

<span>São Paulo</span>

 </div>

<p style="font-size:smaller;">This <a href="http://microformats.org/wiki/hcard">hCard</a> created with the <a href="http://microformats.org/code/hcard/creator">hCard creator</a>.</p>

</div>
<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px; white-space: normal; font-size: 13px;">
</span>


O elemento root é o vcard. Tudo que estiver dentro deste elemento é considerado como um hCard.

fn - Classe para dar semântica ao nome. No exemplo acima “fn” veio acompanhada da classe “n” e isso sinaliza que o nome é complexo, ou seja, possui sobrenome, segundo nome.
given-name - Sinaliza o primeiro nome ;
additional-name -  Sinaliza  o segundo nome;
family-name - Sinaliza o sobrenome;
org - Sinaliza uma instituição;
adr - Sinaliza um bloco de endereço que pode conter, rua (street-address), cidade (locality), etc.


04 - APLICAR MICROFORMATS PARA MARCAÇÃO DE CONTATO (HCARD) E INFORMAÇÕES SOBRE EVENTO (HCALENDAR)

Exemplo de codificação HTML utilizando o microformato hCalendar:

<div class="vevent">
  <h3 class="summary">Campus Party Brasil</h3>
  <p class="description">Campus Party é considerado o maior evento de entretenimento eletrônico em rede do mundo. Um encontro anual realizado desde 1997, que reúne, durante sete dias, milhares de participantes com seus computadores procedentes de toda a Espanha e de outras nações, com a finalidade de compartilhar curiosidades, trocar experiências e realizar todo o tipo de atividades relacionadas a computadores, as comunicações 
e as novas tecnologias*.</p>
  <p>Será realizado de <abbr class="dtstart" 
title="2008-02-11">11</abbr> a <abbr class="dtend" 
title="2008-02-17">17 de fevereiro de 2008</abbr></p>
  <p>Local: <span class="location">
Bienal, São Paulo, SP</span></p>
  <a class="url" href="http://www.campus-party.com.br/">

http://www.campus-party.com.br/</a>


</div>

Observe que ao atribuir a classe “description” à tag <p>, rotula a informação da tag, deixando claro que seu conteúdo é a descrição do evento. Logicamente essa classe só tem valor semântico se estiver dentro de uma tag com a classe “vevent”. Além do atributo classe, o atributo “title” também é usado para informar conteúdo, como acontece com “dtstart”. Note que em “title” o formato da data está em ISSO 8601, que é um formato de fácil leitura para um robô de busca. Já o conteúdo da tag apresenta um valor humanizado, que será apresentado pelo navegador.

Exemplo da utilização do microformato hCard:

<div class="vcard">
   <span class="fn n">Josiah Bartlet</span>
   <div class="org">White Hose</div>
   <div class="adr">
     <div class="street-adress">1600 Pennsylvania Avenue NW</div>
     <span class="locality">Washington</span>
     <span class="region">DC</span>
     <span class="postal-code">20500</span>
   </div> 
 </div>

O microformato hCard confere a você um modo de apresentar informações para contato, incluindo pessoas, organizações e locais, utilizando atributos de classe XHTML. É um dos muitos padrões detalhados no Microformats Project (consulte http://microformats.org/), cuja meta é fornecer um padrão para codificação de informações que sejam legíveis por máquinas, em páginas web utilizando HTML semântico. Assim como um padrão de design, um hCard padroniza a forma pela qual a informação é representada, permitindo que softwares de terceiros coletem a informação e façam dela bom uso.


05 - PASSO A PASSO: COMO UTILIZAR UMA FERRAMENTA DE TRADUÇÃO  MICROFORMATS PARA CRIAR UM LINK QUE PERMITA OS USUÁRIOS BAIXAR OU MOVER O CONTEÚDO PARA OUTRO LOCAL

Utilizando o H2VX, que é uma implantação de produção do X2V hCard e transforma conversão hCalendar.
Ele converte hCard contatos e hCalendar eventos em páginas da web para. vcf e. ics, respectivamente, para uso em desktops e outras aplicações de software cliente.

Exemplo: Se você criar um contato utilizando hCard é quiser que este contato seja baixado para máquina do usuário em um formato .vcf, para que ele possa adicionar ao seu catálogo de endereços, para criar um link para link para o serviço de conversão H2VX, assim:

<a  href = "http://h2vx.com/vcf/YOURURLHERE" > Download vCard </ a>

LINKS:
http://microformats.org/wiki/hcard-examples-in-wild
http://www.slideshare.net/elciof/microformats-a-web-semntica-com-letra-minscula
http://www.novateceditora.com.br/livros/csscookbook/capitulo9788575222300.pdf

Nenhum comentário:

Postar um comentário