marcadores semânticos: usá-los ou usá-los
TRANSCRIPT
![Page 1: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/1.jpg)
Usá-los ou usá-losMarcadores semânticos
Por Márcio Vinícius Sena / @marciovsena
![Page 2: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/2.jpg)
Projetos atuais
Márcio Vinícius SenaDesenvolvedor Frontend - Labtime UFG
Mestrando em Ciência da Computação UFG
![Page 3: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/3.jpg)
Márcio Vinícius SenaDesenvolvedor Frontend - Labtime UFG
Mestrando em Ciência da Computação UFG
Contribuiu no github para jquery
![Page 4: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/4.jpg)
MAS eles não aceitaram...
![Page 5: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/5.jpg)
![Page 6: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/6.jpg)
![Page 7: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/7.jpg)
Web Semântica
é para empresas de marketing digital!!
![Page 8: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/8.jpg)
![Page 9: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/9.jpg)
"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
![Page 10: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/10.jpg)
Novidade? Nenhuma.Isso foi o que Tim Berners-Lee publicou
em 2001
![Page 11: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/11.jpg)
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."
![Page 12: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/12.jpg)
HTML5
![Page 13: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/13.jpg)
Exemplo
fonte: blog.popupdesign.com.br
![Page 14: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/14.jpg)
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
![Page 15: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/15.jpg)
Identificar informações e...
![Page 16: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/16.jpg)
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?
![Page 17: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/17.jpg)
● Identificar● Destacar informações● Reutilizar
É possível:
![Page 18: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/18.jpg)
● 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
![Page 19: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/19.jpg)
● itemid○ Identificador único para o item (itemref)
● itemref○ aponta a uma propriedade mesmo estando fora do
escopo
Sintaxe Microdata
![Page 20: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/20.jpg)
Exemplo
fonte: blog.popupdesign.com.br
![Page 21: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/21.jpg)
HTML
![Page 22: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/22.jpg)
Exemplo
![Page 23: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/23.jpg)
HTML
![Page 24: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/24.jpg)
Tudo é um grafo
As informações se organizam em triplas
RecursoPropriedadeObjeto
![Page 25: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/25.jpg)
Tudo é um grafo
![Page 26: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/26.jpg)
As informações se organizam em triplas
![Page 27: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/27.jpg)
Recurso, propriedade e objeto
![Page 28: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/28.jpg)
E aí?Vamos continuar acreditando que marcadores semânticos são para empresas de marketing digital?
![Page 29: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/29.jpg)
Reaproveitando● Se temos uma estrutura para organizar
as informações é possível consumir informações do próprio HTML, sem API's
![Page 30: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/30.jpg)
Schema.orgColeção de vocabulários que são usados
pelos marcadores semânticos
![Page 31: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/31.jpg)
Schema.org
![Page 32: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/32.jpg)
Schema.org
http://loopinfinito.com.br/
![Page 33: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/33.jpg)
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
![Page 34: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/34.jpg)
Exemplo MSV*
Monitoramento de Sinais Vitais
![Page 35: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/35.jpg)
Exemplo MSV*
![Page 36: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/36.jpg)
FerramentasQuando falamos de web semântica...
![Page 37: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/37.jpg)
FerramentasQuando falamos de web semântica...
![Page 38: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/38.jpg)
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
![Page 39: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/39.jpg)
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
![Page 40: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/40.jpg)
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
![Page 41: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/41.jpg)
Apache Any23
http://<any23-service-host>/<output-format>/<input-uri>
http://any23.org/rdfxml/http://twitter.com/marciovsena
![Page 42: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/42.jpg)
![Page 43: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/43.jpg)
a
![Page 44: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/44.jpg)
getschema.org
● Exemplos de uso das classes do Schema.org● Microdata2RDF e RDFa2RDF Service○ Extrai as anotações semânticas de
documentos HTML
![Page 45: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/45.jpg)
Google Rich Snippt tool
● Extrai as anotações semânticas de documentos HTML
● Demonstra como o Google mostrará o link
![Page 46: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/46.jpg)
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
![Page 47: Marcadores semânticos: usá-los ou usá-los](https://reader034.vdocuments.co/reader034/viewer/2022052401/55ae5aab1a28abef7d8b458f/html5/thumbnails/47.jpg)
Márcio Vinícius Sena@marciovsena
Desenvolvedor Frontend Labtime UFGMestrando em Ciência da Computação UFG
Obrigado!