![Open Graph Potga
Facebooka
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# [NAZWA_APLIKACJI]">
<title>Tytu artykuu</title>
<meta property="og:title" content="Tytu artykuu" />
<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>
Piotr Nalepa - Blog.piotrnalepa.pl 7](https://image.slidesharecdn.com/semantykawtworzeniustronwww-prezentacja-120928123338-phpapp01/85/Semantyka-w-tworzeniu-stron-www-prezentacja-7-320.jpg)
Semantyka w tworzeniu stron www prezentacja
- 1. Semantyka w tworzeniu stron WWW Tworzenie stron WWW rozumianych przez ludzi i mechanizmy
- 2. Kim jestem? www.goal.com PERFORM MEDIA GROUP blog.piotrnalepa.pl Piotr Nalepa - Blog.piotrnalepa.pl 2
- 3. Semantyka W jzykach programowania, semantyk okrelimy zbi坦r regu, kt坦re pozwalaj definiowa i operowa na obiektach rzeczywistych i abstrakcyjnych. Piotr Nalepa - Blog.piotrnalepa.pl 3
- 4. Sie semantyczna Jest to sie danych poczonych ze sob, kt坦re mog by przetworzone porednio i bezporednio przez maszyny Tim Berners - Lee Piotr Nalepa - Blog.piotrnalepa.pl 4
- 5. 5 Piotr Nalepa - Blog.piotrnalepa.pl
- 6. Jzyki/znaczniki semantycznego opisu rzeczywistoci na stronach WWW Open Graph RDFa Miikrodane/mikroformaty (Schema.org) Piotr Nalepa - Blog.piotrnalepa.pl 6
- 7. Open Graph Potga Facebooka <html xmlns:fb="https://www.facebook.com/2008/fbml"> <head prefix="og: http://ogp.me/ns# [NAZWA_APLIKACJI]"> <title>Tytu artykuu</title> <meta property="og:title" content="Tytu artykuu" /> <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> Piotr Nalepa - Blog.piotrnalepa.pl 7
- 8. Open Graph jak to dziaa? Piotr Nalepa - Blog.piotrnalepa.pl 8
- 9. RDFa oparty na XML, dla odwa甜nych Spos坦b zapisu metadanych RDF za pomoc atrybut坦w w HTML5, dziki kt坦remu mo甜na zapisa relacje midzy podmiotem, orzeczeniem i predykatem. Piotr Nalepa - Blog.piotrnalepa.pl 9
- 10. Przykadowy 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> Piotr Nalepa - Blog.piotrnalepa.pl 10
- 11. Przykadowy 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> Piotr Nalepa - Blog.piotrnalepa.pl 11
- 12. Schematy danych, czyli mikrodane w HTML5 Produkt aktywnie promowany przez Google, Dodatkowe atrybuty do wpisania w kodzie HTML5, Gotowe schematy opisu treci na stronach WWW. Piotr Nalepa - Blog.piotrnalepa.pl 12
- 13. Przykadowe 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">Pocztek: 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
- 14. Jak mog wyglda dane o wydarzeniu w wyszukiwarce Google? 店r坦do: http://schema-creator.org Piotr Nalepa - Blog.piotrnalepa.pl 14
- 15. HTML5 te甜 jest semantyczny <article class="item-page" itemscope itemtype="http://schema.org/BlogPosting"> <header> <h1 itemprop="headline">TYTU ARTTYKUU</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/">Artykuy</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=/slideshow/semantyka-w-tworzeniu-stron-www-prezentacja/14506118/"/joomla/images/OBRAZ-ARTYKULU.jpg" alt="" /> <p>TRE ARTYKUU</p> </section> </article> Piotr Nalepa - Blog.piotrnalepa.pl 15
- 16. Piotr Nalepa - Blog.piotrnalepa.pl 16