Semantyka w tworzeniu stron www prezentacja

1,121 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,121
On SlideShare
0
From Embeds
0
Number of Embeds
460
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Semantyka w tworzeniu stron www prezentacja

  1. 1. Semantyka w tworzeniu stron WWW Tworzenie stron WWW rozumianych przez ludzi i mechanizmy
  2. 2. Kim jestem?www.goal.com PERFORM MEDIA GROUP blog.piotrnalepa.pl Piotr Nalepa - Blog.piotrnalepa.pl 2
  3. 3. SemantykaW językach programowania, semantyką określimy zbiór reguł, które pozwalają definiować i operować na obiektach rzeczywistych i abstrakcyjnych. Piotr Nalepa - Blog.piotrnalepa.pl 3
  4. 4. Sieć semantycznaJest to „sieć danych połączonych ze sobą,które mogą być przetworzone pośrednio i bezpośrednio przez maszyny” Tim Berners - Lee Piotr Nalepa - Blog.piotrnalepa.pl 4
  5. 5. 5Piotr Nalepa - Blog.piotrnalepa.pl
  6. 6. Języki/znaczniki semantycznego opisu rzeczywistości na stronach WWW• Open Graph• RDFa• Miikrodane/mikroformaty (Schema.org) Piotr Nalepa - Blog.piotrnalepa.pl 6
  7. 7. 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> Piotr Nalepa - Blog.piotrnalepa.pl 7
  8. 8. Open Graph – jak to działa? Piotr Nalepa - Blog.piotrnalepa.pl 8
  9. 9. RDFa – oparty na XML, dla odważnychSposób zapisu metadanych RDF za pomocą atrybutóww HTML5, dzięki któremu można zapisać relacje między podmiotem, orzeczeniem i predykatem. Piotr Nalepa - Blog.piotrnalepa.pl 9
  10. 10. 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> Piotr Nalepa - Blog.piotrnalepa.pl 10
  11. 11. Przykładowy zapis w RDFa<html prefix="dc: http://purl.org/dc/elements/1.1/" lang="en"> <head> <title>Johns 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>Johns 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ürzendeNeubauten</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. 12. 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. Piotr Nalepa - Blog.piotrnalepa.pl 12
  13. 13. 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/201120: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. 14. Jak mogą wyglądać dane owydarzeniu w wyszukiwarce Google? Źródło: http://schema-creator.org Piotr Nalepa - Blog.piotrnalepa.pl 14
  15. 15. 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ń 201222: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. 16. Piotr Nalepa - Blog.piotrnalepa.pl 16

×