Semantyka w tworzeniu stron www prezentacja

Semantyka w tworzeniu stron WWW

Tworzenie stron WWW rozumianych przez ludzi i mechanizmy

Kim jestem?

2 Piotr Nalepa - Blog.piotrnalepa.pl

www.goal.com PERFORM MEDIA GROUP

blog.piotrnalepa.pl

Semantyka

W językach programowania, semantyką określimy zbiór reguł, które pozwalają definiować i operować na obiektach rzeczywistych i abstrakcyjnych.


Sieć semantyczna

Jest to „sieć danych połączonych ze sobą, które mogą być przetworzone pośrednio

i bezpośrednio przez maszyny”

Tim Berners - Lee


5

Piotr Nalepa - Blog.piotrnalepa.pl

Języki/znaczniki semantycznego opisu rzeczywistości na stronach WWW

• Open Graph

• RDFa

• Miikrodane/mikroformaty (Schema.org)


Open Graph – Potęga Facebooka

<html xmlns:fb="https://www.facebook.com/2008/fbml">

<head prefix="og: http://ogp.me/ns# [NAZWA_APLIKACJI]">

<title>Tytuł artykułu</title>

<meta property="og:title" content="Tytuł artykułu" />

<meta property="og:type" content="article" />

<meta property="og:url" content="http://www.strona.pl/artykul/1/" />

<meta property="og:image" content="http://www.strona.pl/obraz/1.jpg" />

</head>

<body>

… …

</body>

</html>


Open Graph – jak to działa?


RDFa – oparty na XML, dla odważnych

Sposób zapisu metadanych RDF za pomocą atrybutów w HTML5, dzięki któremu można zapisać relacje między

podmiotem, orzeczeniem i predykatem.


Przykładowy zapis w RDF

<?xml version="1.0" encoding="UTF-8"?>

<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:foaf="http://xmlns.com/foaf/0.1/"

xmlns:dc="http://purl.org/dc/elements/1.1/">

<rdf:Description rdf:about="http://example.org/john-d/">

<dc:creator xml:lang="en">Jonathan Doe</dc:creator>

<foaf:primaryTopic>

<rdf:Description rdf:about="http://example.org/john-d/#me">

<foaf:nick xml:lang="en">John D</foaf:nick>

<foaf:interest rdf:resource="http://www.neubauten.org/"/>

<foaf:interest>

<rdf:Description rdf:about="urn:ISBN:0752820907">

<dc:creator xml:lang="en">Tim Berners-Lee</dc:creator>

<dc:title xml:lang="en">Weaving the Web</dc:title>

</rdf:Description>

</foaf:interest>

</rdf:Description>

</foaf:primaryTopic>

</rdf:Description>

</rdf:RDF>


Przykładowy zapis w RDFa

<html prefix="dc: http://purl.org/dc/elements/1.1/" lang="en">

<head>

<title>John's Home Page</title>

<base href="http://example.org/john-d/" />

<meta property="dc:creator" content="Jonathan Doe" />

<link rel="foaf:primaryTopic" href="http://example.org/john-d/#me" />

</head>

<body about="http://example.org/john-d/#me">

<h1>John's Home Page</h1>

<p>My name is <span property="foaf:nick">John D</span> and I like

<a href="http://www.neubauten.org/" rel="foaf:interest" lang="de">Einstürzende

Neubauten</a>.

</p>

<p>

My <span rel="foaf:interest" resource="urn:ISBN:0752820907">favorite

book is the inspiring <span about="urn:ISBN:0752820907"><cite

property="dc:title">Weaving the Web</cite> by

<span property="dc:creator">Tim Berners-Lee</span></span>

</span>

</p>

</body>

</html>


Schematy danych, czyli mikrodane w HTML5

• Produkt aktywnie promowany przez Google,

• Dodatkowe atrybuty do wpisania w kodzie HTML5,

• Gotowe schematy opisu treści na stronach WWW.


Przykładowe użycie Schema.org na stronie WWW

<p itemscope itemtype="http://schema.org/MusicEvent">

<a itemprop="url" href="http://live2011tour.bonjovi.com/show/vip_2011-2011_tour-

europe-062711__bristol_gb/june-27-2011">

<strong itemprop="name">Koncert Bon Jovi</strong>

</a><br/>

<span itemprop="description">Koncert Bon Jovi w Bristolu, Anglia.</span><br/>

<span itemprop="startDate" content="2011-06-27T20:00">Początek: 27/06/2011

20:00</span><br/>

<span itemprop="duration" content="0000-00-00T03:00">Czas trwania: 3 godziny

</span><br/>

<ul itemprop="location" itemscope itemtype="http://schema.org/PostalAddress">

<li itemprop="streetAddress">Ashton Gate Stadium </li>

<li itemprop="addressLocality">Bristol</li>

<li itemprop="addressCountry">Anglia</li>

</ul>

</p>

Piotr Nalepa - Blog.piotrnalepa.pl 13

Jak mogą wyglądać dane o wydarzeniu w wyszukiwarce Google?


Źródło: http://schema-creator.org

HTML5 też jest semantyczny <article class="item-page" itemscope itemtype="http://schema.org/BlogPosting">

<header>

<h1 itemprop="headline">TYTUŁ ARTTYKUŁU</h1>

</header>

<section>

<dl class="article-info">

<dt class="article-info-term">Szczegóły:</dt>

<dd itemprop="articleSection" class="category-name">

Kategoria: <a href="/joomla-prezentacja/">Artykuły</a>

</dd>

<dd class="published">

<time itemprop="datePublished">Opublikowano: czwartek, 20, wrzesień 2012

22:16</time>

</dd>

<dd class="createdby" itemprop="creator">

Piotr Nalepa

</dd>

</dl>

</section>

<section itemprop="articleBody" class="article-body">

<img src="/joomla/images/OBRAZ-ARTYKULU.jpg" alt="" />

<p>TREŚĆ ARTYKUŁU</p>

</section>

</article>


Semantyka w tworzeniu stron www prezentacja

Documents

Transcript of Semantyka w tworzeniu stron www prezentacja