Semantyka w tworzeniu stron www prezentacja

Semantyka w tworzeniu stron WWW

Tworzenie stron WWW rozumianych przez
ludzi i mechanizmy

Kim jestem?

www.goal.com PERFORM MEDIA GROUP

blog.piotrnalepa.pl

Piotr Nalepa - Blog.piotrnalepa.pl 2

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>


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

Recomendados

Recomendados

Más contenido relacionado

Similar a Semantyka w tworzeniu stron www prezentacja

Similar a Semantyka w tworzeniu stron www prezentacja (20)

Más de Piotr Nalepa

Más de Piotr Nalepa (6)

Semantyka w tworzeniu stron www prezentacja