Download - 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.
3 Piotr Nalepa - Blog.piotrnalepa.pl
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
4 Piotr Nalepa - Blog.piotrnalepa.pl
5
Piotr Nalepa - Blog.piotrnalepa.pl
Języki/znaczniki semantycznego opisu rzeczywistości na stronach WWW
• Open Graph
• RDFa
• Miikrodane/mikroformaty (Schema.org)
6 Piotr Nalepa - Blog.piotrnalepa.pl
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>
7 Piotr Nalepa - Blog.piotrnalepa.pl
Open Graph – jak to działa?
8 Piotr Nalepa - Blog.piotrnalepa.pl
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.
9 Piotr Nalepa - Blog.piotrnalepa.pl
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>
10 Piotr Nalepa - Blog.piotrnalepa.pl
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>
11 Piotr Nalepa - Blog.piotrnalepa.pl
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.
12 Piotr Nalepa - Blog.piotrnalepa.pl
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?
Piotr Nalepa - Blog.piotrnalepa.pl 14
Ź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>
Piotr Nalepa - Blog.piotrnalepa.pl 15
16 Piotr Nalepa - Blog.piotrnalepa.pl