• Like
  • Save
Semantyka w tworzeniu stron www   prezentacja
Upcoming SlideShare
Loading in...5
×
 

Semantyka w tworzeniu stron www prezentacja

on

  • 955 views

 

Statistics

Views

Total Views
955
Views on SlideShare
526
Embed Views
429

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 429

http://blog.piotrnalepa.pl 429

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Semantyka w tworzeniu stron www   prezentacja Semantyka w tworzeniu stron www prezentacja Presentation Transcript

    • 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
    • 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
    • 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
    • 5Piotr Nalepa - Blog.piotrnalepa.pl
    • Języki/znaczniki semantycznego opisu rzeczywistości na stronach WWW• Open Graph• RDFa• Miikrodane/mikroformaty (Schema.org) Piotr Nalepa - Blog.piotrnalepa.pl 6
    • 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
    • Open Graph – jak to działa? Piotr Nalepa - Blog.piotrnalepa.pl 8
    • 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
    • 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
    • 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
    • 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
    • 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
    • Jak mogą wyglądać dane owydarzeniu w wyszukiwarce Google? Źródło: http://schema-creator.org Piotr Nalepa - Blog.piotrnalepa.pl 14
    • 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
    • Piotr Nalepa - Blog.piotrnalepa.pl 16