Usá-los ou usá-losMarcadores semânticos

Por Márcio Vinícius Sena / @marciovsena

Projetos atuais

Márcio Vinícius SenaDesenvolvedor Frontend - Labtime UFG

Mestrando em Ciência da Computação UFG

Márcio Vinícius SenaDesenvolvedor Frontend - Labtime UFG

Mestrando em Ciência da Computação UFG

Contribuiu no github para jquery

MAS eles não aceitaram...

Web Semântica

é para empresas de marketing digital!!

"Navegar é cada vez mais preciso..."● Grande quantidade de dados

estruturados e não estruturados● Redudância de informações● Difícil reaproveitamento das informações

Novidade? Nenhuma.Isso foi o que Tim Berners-Lee publicou

em 2001

Web Semântica"I have a dream for the Web [in which computers]

become capable of analyzing all the data on the Web – the content, links, and transactions between people and computers. A 'Semantic Web', which makes this

possible, has yet to emerge, but when it does, the day-to-day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to

machines. The "intelligent agents" people have touted for ages will finally materialize."

HTML5

Exemplo

fonte: blog.popupdesign.com.br

O que seria esse trecho?● Receitas de bolo● Trechos de um livro● Cifras para músicos● Dados financeiros● Biografia● Lista de posts de um blog de tecnologia

Identificar informações e...

São anotações/atributos que geralmente seguem um vocabulário e são adicionados em tags do

HTML com informações para proporcionar significado

O que são os marcadores semânticos?

● Identificar● Destacar informações● Reutilizar

É possível:

● itemscope○ Indica que o item é uma entidade semântica e

delimita o escopo● itemtype

○ Indica a entidade especificada através de uma URL (por exemplo: http://schema.org/Person)

● itempropindica a propriedade que a tag está representando

Sintaxe Microdata

● itemid○ Identificador único para o item (itemref)

● itemref○ aponta a uma propriedade mesmo estando fora do

escopo

Sintaxe Microdata

Exemplo

fonte: blog.popupdesign.com.br

HTML

Exemplo

HTML

Tudo é um grafo

As informações se organizam em triplas

RecursoPropriedadeObjeto

Tudo é um grafo

As informações se organizam em triplas

Recurso, propriedade e objeto

E aí?Vamos continuar acreditando que marcadores semânticos são para empresas de marketing digital?

Reaproveitando● Se temos uma estrutura para organizar

as informações é possível consumir informações do próprio HTML, sem API's

Schema.orgColeção de vocabulários que são usados

pelos marcadores semânticos

Schema.org

Schema.org

http://loopinfinito.com.br/

Schema.org● É possível expandir entidades

○ Frontend Developer > Person■ http://schema.org/Person/FrontendDeveloper

○ Subname > name■ http://schema.org/name/subname

● Não é possível criar novas entidades

Exemplo MSV*

Monitoramento de Sinais Vitais

Exemplo MSV*

FerramentasQuando falamos de web semântica...

FerramentasQuando falamos de web semântica...

FerramentasPensei em: ● Criar uma máquina de inferência baseada

em ontologias e vocabulários○ Apache Jena

● Criar um serviço que consulte bases de dados ou documentos RDF/XML○ Apache Fuseki

FerramentasPensei em: ● Criar um serviço que extraisse as

informações de arquivos HTML○ Apache Any23

● Criar um serviço que valide arquivos RDF/XML○ W3C RDF Validator

Apache Any23É a prova de teste dos marcadores semânticos

● Extrai informações de arquivos HTML/microdata e gera arquivos:○ JSON, RDF/XML, N-TRIPLES, JSON-LD, etc.

● É um plugin, serviço e biblioteca

Apache Any23

http://<any23-service-host>/<output-format>/<input-uri>

http://any23.org/rdfxml/http://twitter.com/marciovsena

a

getschema.org

● Exemplos de uso das classes do Schema.org● Microdata2RDF e RDFa2RDF Service○ Extrai as anotações semânticas de

documentos HTML

Google Rich Snippt tool

● Extrai as anotações semânticas de documentos HTML

● Demonstra como o Google mostrará o link

Próximos passos● Leia mais sobre:○ Any23

■ http://any23.org/○ W3C RDF Validator

■ http://www.w3.org/RDF/Validator/● Dê atenção para a Web Semântica

○ O seu cliente ganha e você também

Márcio Vinícius Sena@marciovsena

Desenvolvedor Frontend Labtime UFGMestrando em Ciência da Computação UFG

Obrigado!