Rozdział 11. Mikrodane

> Dodaj do ulubionych

Do rzeczy

Język HTML5 ma ponad 100 elementów. Niektóre z nich to elementy semantyczne, inne zaś to kontenery dla API obsługiwanych za pomocą skryptów. W trakcie rozwoju języka HTML osoby zaangażowane w tworzenie standardów wielokrotnie toczyły spory o to, które z tych elementów powinny znaleźć się w specyfikacji. Czy w języku HTML powinien być element <figure>? Czy powinno się dodać element <person>? A może przydałby się element <rant>? Podejmowane są decyzje, pisze się specyfikacje, autorzy tworzą treść, implementatorzy implementują i sieć jakoś tam posuwa sie naprzód.

Oczywiście język HTML nie może być idealny dla każdego. żaden standard nie może. Niektóre pomysły nie przebijają się. Przykładowo w HTML5 nie ma elementu <person>. (Elementu <rant> też nie ma, a niech to!) Oczywiście możesz używać na swoich stronach elementu <person>, ale dokument z nim nie przejdzie weryfikacji poprawności struktury, element ten nie będzie miał spójnego wyglądu w różnych przeglądarkach oraz możesz mieć kłopoty, jeśli w przyszłości do specyfikacji HTML zostanie dodany taki element.

Skoro więc tworzenie własnych elementów nie wchodzi w grę, co dbający o semantykę webmaster może zrobić? Były próby rozszerzania poprzednich wersji języka HTML. Najbardziej popularną z nich są mikroformaty bazujące na wykorzystaniu atrybutów class i rel w HTML. Inną możliwością jest użycie RDFa, standardu który został przystosowany do XHTML, a później zmodyfikowany do potrzeb HTML.

Zarówno mikroformaty jak i RDFa mają wady i zalety. Są to dwie radykalnie różne metody pozwalające osiągnąć ten sam cel: wzbogacenie semantyki stron internetowych poza standard HTML. Nie zamierzam w tym rozdziale rozstrzygać co lepsze. (Byłaby to bardzo ostra dyskusja i na pewno przydałby się element <rant>!) Zamiast tego opisuję trzecią możliwość, której twórcy wystrzegając się błędów mikroformatów i RDFa zintegrowali technologię z HTML5: mikrodane.

Czym są mikrodane

W poniższym zdaniu każde słowo jest bardzo ważne, więc przeczytaj je uważnie.

Zdaniem profesora Kodeckiego

Mikrodane to mające zdefiniowany zakres adnotacje DOM w postaci para nazwa-wartość z niestandardowych słowników.

Co to właściwie znaczy? Zaczniemy od końca. Mikrodane bazują na niestandardowych słownikach. Jednym z takich słowników może być „zbiór wszystkich elementów HTML5”. Słownik ten zawiera elementy reprezentujące sekcje i artykuły, ale nie zawiera elementów reprezentujących osób ani wydarzeń. Jeśli chcesz na stronie przedstawić osobę, musisz zdefiniować własny (niestandardowy) słownik. Do tego służą mikrodane. Każdy może zdefiniować słownik mikrodanych i używać własnych własności na swoich stronach.

Kolejna ważna informacja o mikrodanych to fakt, że mają postać par nazwa-wartość. W każdym słowniku mikrodanych zdefiniowany jest zbiór własności o różnych nazwach. Przykładowo słownik Person mógłby zawierać definicje własności name i photo. Aby użyć własności mikrodanych na stronie, należy w odpowiednim miejscu wpisać jej nazwę. Sposób pobierania wartości mikrodanych jest zależny od miejsca deklaracji nazwy własności. (Więcej na ten temat piszę w następnej części.)

Oprócz nazwanych własności w mikrodanych bardzo ważne jest pojęcie „zakresu”. Najłatwiej kwestię zakresu w mikrodanych jest zrozumieć porównując ją z relacją rodzic-dziecko elementów w DOM. Element <html> zazwyczaj zawiera dwa elementy dzieci: <head> i <body>. Element <body> najczęściej ma wiele dzieci, z których każde może mieć własne dzieci. Przykładowo na stronie może znajdować się element <h1> w elemencie <hgroup> w elemencie <header> w elemencie <body>. Tabela może mieć strukturę <td> w <tr> w <table> (w <body>). W mikrodanych wykorzystuje się hierarchiczną strukturę DOM do tworzenia twierdzeń typu „wszystkie własności w tym elemencie pochodzą z tego słownika”. Dzięki temu można używać kilku słowników mikrodanych na jednej stronie. Słowniki można nawet zagnieżdżać w innych słownikach, a wszystko to robi sie przy wykorzystaniu struktury DOM. (W dalszych częściach rozdziału zobaczysz wiele przykładów zagnieżdżania słowników.)

Skoro już mowa o strukturze DOM, warto nieco bardziej rozwinąć ten temat. Mikrodane to metoda pozwalająca wzbogacić semantykę danych widocznych na stronie internetowej. Nie są one samodzielnym formatem danych. Mikrodane są uzupełnieniem HTML. W następnym podrozdziale przekonasz się, że mikrodanych najlepiej jest używać w połączeniu z prawidłowo zbudowanym kodem HTML, ale słownik HTML nie jest tak ekspresywny. Mikrodane służą do udoskonalania semantyki danych, które już znajdują się w strukturze DOM. Jeśli danych, których semantykę wzbogacasz nie ma w DOM, powinieneś zastanowić się czy oby na pewno powinieneś w tym przypadku używać mikrodanych.

Czy teraz to zdanie wydaje ci się bardziej sensowne? „Mikrodane to mające zdefiniowany zakres adnotacje DOM w postaci para nazwa-wartość z niestandardowych słowników.” Mam nadzieję, że tak. Zobaczmy jak to działa w praktyce.

Model danych mikrodanych

Definicja słownika mikrodanych jest łatwa. Należy zacząć od utworzenia przestrzeni nazw w postaci adresu URL. Adres ten URL może prowadzić do istniejącej strony, ale nie musi. Powiedzmy, że chcemy zdefiniować słownik mikrodanych do opisu osoby. Gdybym był właścicielem domeny data-vocabulary.org, jako przestrzeni nazw mojego słownika użyłbym adresu URL http://data-vocabulary.org/Person. Wybór adresu URL we własnej domenie to najłatwiejszy sposób na utworzenie niepowtarzalnego globalnego identyfikatora.

W słowniku zdefiniujemy kilka własności. Zaczniemy od trzech najważniejszych:

  • name (imię i nazwisko)
  • photo (łącze do zdjęcia)
  • url (łącze do strony osoby, np. bloga albo profilu Google)

Niektóre z tych własności są adresami URLs, a inne zwykłym tekstem. Dla każdej z nich można znaleźć zwykły element HTML, zanim zacznie się w ogóle myśleć o mikrodanych, słownikach itp. Wyobraź sobie, że masz stronę, na której zamieściłeś podstawowe informacje o sobie. Nazwisko pewnie umieściłbym w nagłówku <h1> albo innym. Zdjęcie najprawdopodobniej zamieściłbyś na stronie przy użyciu elementu <img>, bo chcesz aby odwiedzający je widzieli. A adresy URL opublikowałbyś jako hiperłącza, aby odwiedzający mogli przejść do polecanych stron za pomocą kliknięcia. Przyjmijmy dodatkowo, że cały profil jest umieszczony w elemencie <section> oddzielającym go od reszty treści na stronie. Otrzymujemy:

Wszystko o mnie

<section>
  <h1>Mark Pilgrim</h1>
  <p><img src="http://www.example.com/photo.jpg" alt="[ja uśmiechnięty]"></p>
  <p><a href="http://diveintomark.org/">weblog</a></p>
</section>

Model danych mikrodanych to pary nazwa-wartość. Nazwę własności mikrodanych (w tym przykładzie name, photo albo url) zawsze deklaruje się w elemencie HTML. Natomiast odpowiadająca jej wartość jest pobierana ze struktury DOM tego elementu. W przypadku większości elementów HTML, wartość ta jest tekstową treścią elementu. Jest jednak kilka wyjątków.

Pochodzenie wartości własności mikrodanych
ElementWartość
<meta>atrybut content
  • <audio>
  • <embed>
  • <iframe>
  • <img>
  • <source>
  • <video>
atrybut src
  • <a>
  • <area>
  • <link>
atrybut href
<object>atrybut data
<time>atrybut datetime
wszystkie pozostałe elementyzawartość tekstowa

„Dodanie mikrodanych” do strony polega na dodaniu kilku atrybutów do elementów HTML. Na początku zawsze trzeba określić, jakiego słownika mikrodanych się używa. Służy do tego atrybut itemtype. Druga rzecz, którą zawsze się robi to deklaracja zakresu słownika. Służy do tego atrybut itemscope. W tym przykładzie wszystkie dane, jakie chcemy wzbogacić semantycznie znajdują się w elemencie <section>, a więc atrybuty itemtype i itemscope definiujemy w elemencie <section>.

  <section itemscope itemtype="http://data-vocabulary.org/Person">

Pierwszą porcją danych w elemencie <section> są imię i nazwisko. Dane te znajdują się w elemencie <h1>. Element <h1> nie jest specjalnie traktowany w modelu danych mikrodanych HTML5, a więc należy do kategorii „wszystkie pozostałe elementy”, co oznacza że wartością jego własności mikrodanych jest jego treść tekstowa. (Wszystko wyglądałoby dokładnie tak samo, gdyby imię i nazwisko były zapisane w elemencie <p>, <div> albo <span>.)

<h1 itemprop="name">Mark Pilgrim</h1>

Kod ten można przetłumaczyć na polski tak: „to jest własność name ze słownika http://data-vocabulary.org/Person vocabulary, a jej wartość to Mark Pilgrim”.

Następna jest własność photo. Jej wartość jest adres URL. Zgodnie z modelem danych mikrodanych HTML5, „wartością” elementu <img> jest jego atrybut src. Zwróć uwagę, że adres URL zdjęcia jest już wpisany w atrybucie src. Wystarczy więc tylko zadeklarować, że element <img> jest własnością photo.

  <p><img itemprop="photo"
          src="http://www.example.com/photo.jpg"
          alt="[ja uśmiechnięty]"></p>

Kod ten można przetłumaczyć na polski tak: „to jest własność photo ze słownika http://data-vocabulary.org/Person vocabulary, a jej wartość to http://www.example.com/photo.jpg.

Własność url również jest adresem URL. Zgodnie z modelem danych mikrodanych HTML5, „wartością” elementu <a> jest jego atrybut href. I znowu wszystko znakomicie nam się składa z istniejącym kodem. Wystarczy tylko zadeklarować, że element <a> jest własnością url:

  <a itemprop="url" href="http://diveintomark.org/">dive into mark</a>

Kod ten można przetłumaczyć na polski tak: „to jest własność url ze słownika http://data-vocabulary.org/Person vocabulary, a jej wartość to http://diveintomark.org/.

Oczywiście twój kod HTML mógłby wyglądać trochę inaczej i nie sprawiałoby to żadnego problemu. Własności wartości mikrodanych można deklarować we wszystkich elementach HTML, nawet starożytnych tabelach tworzących strukturę dokumentu. Nie zalecam stosowania takich rozwiązań, ale taki stary kod wciąż się spotyka i do niego również można dodawać mikrodane.

Miej Boga w sercu i nie rób tego

<TABLE>
  <TR><TD>Name<TD>Mark Pilgrim
  <TR><TD>Link<TD>
    <A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
</TABLE>

Jeśli chodzi o własność name, wystarczy dodać atrybut itemprop do komórki tabeli zawierającej imię i nazwisko. Komórki tabeli nie są specjalnie traktowane w mikrodanych, a więc ich wartością jest zawartość tekstowa.

  <TR><TD>Name<TD itemprop="name">Mark Pilgrim

Gorzej wygląda sprawa z własnością url. W tym kodzie element <a> nie jest poprawnie użyty. W atrybucie href zamiast adresu znajduje się tylko bezwartościowy krzyżyk i dodatkowo zdefiniowany jest atrybut onclickzawierający wywołanie funkcji JavaScript (nie pokazana) pobierającej adres URL i powodującej jego otwarcie. żeby było jeszcze zabawniej przyjmijmy, że funkcja ta otwiera łącze w małym wyskakującym okienku bez pasków przewijania. Czy kiedyś internet nie był fajniejszy?

Mimo wszystko tu też da się użyć mikrodanych, tylko trzeba wykazać się pomysłowością. Bezpośrednie użycie elementu <a> nie wchodzi w grę. Cel łącza nie znajduje się w atrybucie href i nie da się zmienić zasady, że „wartością mikrodanych w elemencie <a> jest wartość atrybutu href”. Można jednak cały ten bałagan umieścić w kontenerze i własność url zdefiniować dla tego kontenera.

Oto kod HTML po przeróbce

<TABLE itemscope itemtype="http://data-vocabulary.org/Person">
  <TR><TD>Name<TD>Mark Pilgrim
  <TR><TD>Link<TD>
    <span itemprop="url">
      <A href=# onclick=goExternalLink()>http://diveintomark.org/</A>
    </span>
</TABLE>

Jako że element <span> nie jest traktowany specjalnie, ma zastosowanie do niego zasada, że własnością mikrodanych jest zawartość tekstowa. „Zawartość tekstowa” to nie cały kod HTML znajdujący się w elemencie (jaki otrzymałoby się przy użyciu np. własności DOM innerHTML). Brany pod uwagę jest tylko czysty tekst, a więc w tym przypadku adres http://diveintomark.org/, będący treścią tekstową elementu <a> znajdującego się w elemencie <span>.

Podsumujmy: własności mikrodanych można definiować we wszystkich elementach. Jeśli elementy HTML są poprawnie używane, to dodawanie mikrodanych jest o wiele łatwiejsze niż gdy kod HTML jest schrzaniony, ale zawsze można sobie jakoś poradzić.

Oznaczanie ludzi

Tak na marginesie, to przykłady przedstawione w poprzedniej części rozdziału nie były całkiem wymyślone. Słownik mikrodanych do oznaczania osób już istnieje i posługiwanie się nim jest tak łatwo, jak to pokazałem. Przyjrzymy się mu dokładniej.

Mikrodane w osobistej witrynie najłatwiej jest wdrożyć na stronie o autorze. Masz stronę typu „O mnie”, prawda? Jeśli nie, możesz śledzić przykład rozszerzania semantyki tej przykładowej strony „O mnie”. Efekt końcowy można obejrzeć tutaj: person-plus-microdata.html.

Najpierw zobaczmy surowy kod HTML, jeszcze bez mikrodanych:

<section>
  <img width="204" height="250"
       src="http://diveintohtml5.info/examples/2000_05_mark.jpg"
       alt="[Mark Pilgrim około 2000 r.]">

  <h1>Informacje kontaktowe</h1>
  <dl>
    <dt>Imię i nazwisko</dt>
    <dd>Mark Pilgrim</dd>

    <dt>Stanowisko</dt>
    <dd>Developer advocate w Google, Inc.</dd>

    <dt>Adres pocztowy</dt>
    <dd>
      100 Main Street<br>
      Anytown, PA 19999<br>
      USA
    </dd>
  </dl>
  <h1>Moje strony</h1>
  <ul>
    <li><a href="http://diveintomark.org/">blog</a></li>
    <li><a href="http://www.google.com/profiles/pilgrim">Profil Google</a></li>
    <li><a href="http://www.reddit.com/user/MarkPilgrim">Profil Reddit.com</a></li>
    <li><a href="http://www.twitter.com/diveintomark">Twitter</a></li>
  </ul>
</section>

Pracę należy zacząć od zadeklarowania którego słownika chce się używać i określenia zakresu własności, które zostaną dodane. W tym celu definiuje się atrybuty itemtype i itemscope kontenerowi zawierającemu wszystkie znakowane elementy z danymi. W tym przypadku kontenerem tym jest element <section>.

<section itemscope itemtype="http://data-vocabulary.org/Person">

Teraz możesz zacząć definiować własności mikrodanych ze słownika http://data-vocabulary.org/Person. Ale, jakie to są własności? Aby wyświetlić ich listę, należy otworzyć stronę data-vocabulary.org/Person. W specyfikacji mikrodanych nie ma takiego nakazu, ale ja twierdzę, że jest to „bardzo dobry zwyczaj”. Jeśli chcesz aby inni korzystali z twojego słownika mikrodanych, musisz napisać dla niego dokumentację. A jakie może być lepsze miejsce na dokumentację, niż sam adres słownika URL?

Słownik Person
WłasnośćOpis
nameImię i nazwisko
nicknameKsywa
photołącze do obrazu
titleStanowisko w pracy (np. „dyrektor finansowy”)
roleZajęcie w pracy (np. „księgowy”)
urlłącze do strony internetowej, np. osobistej witryny osoby
affiliationNazwa organizacji, z którą osoba jest związana (np. pracodawcy)
friendOkreśla relację łączącą opisywaną osobą i inną osobę
contactOkreśla relację łączącą opisywaną osobą i inną osobę
acquaintanceOkreśla relację łączącą opisywaną osobą i inną osobę
addressAdres opisywanej osoby Może mieć podwłasności street-address, locality, region, postal-code oraz country-name.

Pierwszym elementem tej przykładowej strony o mnie jest moje zdjęcie. Oczywiście zostało wstawione na stronę za pomocą elementu <img>. Aby zaznaczyć, że ten element <img> przedstawia moje zdjęcie, muszę dodać do niego atrybut itemprop="photo".

  <img itemprop="photo" width="204" height="250"
      src="http://diveintohtml5.info/examples/2000_05_mark.jpg"
      alt="[Mark Pilgrim około 2000 r.]">

Gdzie jest wartość własności mikrodanych? Jest już na stronie, w atrybucie src. Przypomnę z modelu danych mikrodanych HTML5, że „wartością” elementu <img> jest jego atrybut src. Każdy element <img> musi mieć atrybut src — bez niego nie wyświetli się obraz — i jego wartością musi być adres URL. Widzisz? Jeśli poprawnie używasz elementów HTML, to stosowanie mikrodanych jest łatwe.

Ponadto ten element <img> nie jest jedyny na stronie. Jest dzieckiem elementu <section>, któremu przypisaliśmy atrybut itemscope. W mikrodanych relacje rodzic-dziecko są wykorzystywane do określania zasięgu własności mikrodanych. Mówiąc krótko, informujemy, że ten element <section> reprezentuje osobę. Wszystkie własności mikrodanych, jakie znajdują się na elementach potomnych tego elementu <section> dotyczą tej osoby. Można powiedzieć, że element <section> jest podmiotem zdania. Atrybut itemprop reprezentuje orzeczenie, coś jakby stwierdzenie „jest przedstawiony”. Wartość własności mikrodanych reprezentuje dopełnienie.

Ta osoba [jawnie z <section itemscope itemtype="...">]

jest przedstawiona na [jawnie z <img itemprop="photo">]

http://diveintohtml5.info/examples/2000_05_mark.jpg [niejawnie z atrybutu <img src>]

Podmiot wystarczy zdefiniować raz deklarując atrybuty itemscope i itemtype kontenerowi <section>. Orzeczenie zostało zdefiniowane za pomocą atrybutu itemprop="photo" w elemencie <img>. Dopełnienie nie wymaga specjalnego kodu, ponieważ zgodnie z modelem danych mikrodanych HTML5 wartością własności elementu <img> jest jego atrybut src.

W drugiej części przykładowego kodu widzimy nagłówek <h1> i początek listy <dl>. Ani <h1> ani <dl> nie trzeba oznaczać mikrodanymi. Nie każdy element HTML musi być własnością mikrodanych. W mikrodanych chodzi o same własności, nie otaczający je kod HTML czy nagłówki. Ten element <h1> nie jest własnością. To po prostu tylko nagłówek. Podobnie element <dt> z treścią „Imię i nazwisko” nie jest własnością. To po prostu tylko etykieta.

Nudne

  <h1>Informacje kontaktowe</h1>
  <dl>
    <dt>Imię i nazwisko</dt>
    <dd>Mark Pilgrim</dd>

Gdzie w takim razie znajdują się realne informacje? Są w elemencie <dd> i to jemu należy przypisać atrybut itemprop. Której własności należy tu użyć? Użyj własności name. Gdzie jest jej wartość? W treści tekstowej elementu <dd>. Czy trzeba to oznaczać? Zgodnie z modelem danych mikrodanych HTML5 nie, elementy <dd>nie są specjalnie przetwarzane, więc wartością ich własności jest zawartość tekstowa.

To moje imię i nazwisko

    <dd itemprop="name">Mark Pilgrim</dd>

Tłumacząc powyższy przykład na polski, właśnie stwierdziliśmy, że opisywana osoba nazywa się Mark Pilgrim. W porządku. Idziemy dalej.

Kolejne dwie własności są trochę trudniejsze. Interesujące nas kod, jeszcze bez mikrodanych, wygląda tak:

    <dt>Stanowisko</dt>
    <dd>Developer advocate w Google, Inc.</dd>

W słowniku Person tekst „Developer advocate w Google, Inc.” właściwie obejmuje dwie własności: title („Developer advocate”) i affiliation („Google, Inc.”). Jak to wyrazić przy użyciu mikrodanych? Mówiąc krótko nie da się. W mikrodanych nie ma możliwości dzielenia tekstu na części. Nie można zaznaczyć, że „18 pierwszych znaków stanowi jedną własność, a pozostałe znaki dotyczącą drugiej własności”.

Ale nie wszystko stracone. Wyobraź sobie, że chcesz aby tekst „Developer advocate” miał inny krój pisma niż „Google, Inc.”. W CSS też nie da się tego normalnie zrobić. Jak rozwiązać ten problem? Trzeba by było wybrane fragmenty umieścić w dodatkowych elementach, np. <span>, a następnie zastosować CSS do tych elementów.

Technikę tę można też zastosować do mikrodanych. W tekście tym znajdują się dwie różne informacje: title i affiliation. Jeśli umieścimy każdą z nich w elemencie <span>, będziemy mogli każdy z nich oznaczyć jako osobną własność mikrodanych.

    <dt>Stanowisko</dt>
    <dd><span itemprop="title">Developer advocate</span> w
        <span itemprop="affiliation">Google, Inc.<span></dd>

Tada! Ta osoba pracuje na stanowisku Developer advocate. Pracodawcą tej osoby jest firma Google, Inc. Dwa zdania, dwie własności mikrodanych. Trzeba było dopisać kodu HTML, ale opłaciło się.

W ten sam sposób można oznaczać adresy ulic. W słowniku Person znajduje się własność address, która sama jest elementem mikrodanych. Znaczy to, że adres ma własny słownik (http://data-vocabulary.org/Address) i własności. W słowniku Address zdefiniowanych jest pięć własności: street-address, locality, region, postal-code oraz country-name.

Jeśli jesteś programistą, to na pewno znasz technikę posługiwania się kropką w celu użycia własności obiektów. Relacje, o których mowa wyglądają tak:

  • Person
  • Person.address
  • Person.address.street-address
  • Person.address.locality
  • Person.address.region
  • Person.address.postal-code
  • Person.address.country-name

W tym przykładzie adres ulicy w całości znajduje się w elemencie <dd>. (Ponownie element <dt> stanowi tylko etykietę i w kwestii semantyki mikrodanych nie ma tu żadnego znaczenia.) Zapisanie własności address jest łatwe. Wystarczy dodać atrybut itemprop do elementu <dd>.

    <dt>Adres pocztowy</dt>
    <dd itemprop="address">

Pamiętaj jednak, że własność address też jest elementem mikrodanych. To oznacza, że dodatkowo trzeba zdefiniować atrybuty itemscope i itemtype.

    <dt>Adres pocztowy</dt>
    <dd itemprop="address" itemscope
        itemtype="http://data-vocabulary.org/Address">

Znamy to już, ale do tej pory atrybutów tych używaliśmy tylko w kontenerach najwyższego poziomu. Element <section> ma atrybuty itemtype i itemscope, w związku z czym wszystkie znajdujące się w nim elementy zawierające definicje mikrodanych są objęte określonym słownikiem. Tu natomiast mamy pierwszy przypadek zagnieżdżenia zakresu — definicję nowych atrybutów itemtype i itemscope (w elemencie <dd>) w istniejącym zakresie (elementu <section>). Zagnieżdżanie zakresów działa tak samo, jak w DOM HTML. Element <dd> ma pewną liczbę elementów dzieci, które należą do zakresu słownika zdefiniowanego dla elementu <dd>. Za znacznikiem zamykającym elementu <dd> (</dd>) znowu obowiązywać zaczyna zakres słownika elementu nadrzędnego, czyli w tym przypadku <section>.

Z własnościami ze słownika Address mamy taki sam problem, jak z własnościami title i affiliation. Mamy jeden długi ciąg tekstu i chcemy go podzielić na pięć osobnych własności mikrodanych. Rozwiązanie jest takie same, jak poprzednio: umieścić każdą informację w elemencie <span>, a następnie w każdym z nich zdefiniować odpowiednie własności mikrodanych.

    <dd itemprop="address" itemscope
        itemtype="http://data-vocabulary.org/Address">
      <span itemprop="street-address">100 Main Street</span><br>
      <span itemprop="locality">Anytown</span>,
      <span itemprop="region">PA</span>
      <span itemprop="postal-code">19999</span>
      <span itemprop="country-name">USA</span>
    </dd>
  </dl>

Po polsku: „Ta osoba ma adres pocztowy. Mieszka przy ulicy 100 Main Street. Miasto to Anytown. Stan, w którym to miasto się znajduje to PA, a kod pocztowy to 19999. Nazwa kraju to USA”. łatwizna.

Pytanie do profesora Kodeckiego

P: Czy format adresu pocztowego musi być typowy dla USA?
O: Nie. Własności słownika Address są na tyle ogólne, że za ich pomocą można oznaczyć większość adresów na świecie. Nie we wszystkich adresach są wartości dla każdej własności, ale to nie problem. W niektórych adresach może być konieczne włożenie więcej niż jednej „linijki” do jednej własności, ale to też nie problem. Przykładowo adres pocztowy może zawierać nazwę ulicy, numer budynku i numer mieszkania. Informacje te należy umieścić we własności street-address:

<p itemprop="address" itemscope
    itemtype="http://data-vocabulary.org/Address">
  <span itemprop="street-address">
    100 Main Street
Suite 415
  </span>
  ...
</p>

Na naszej przykładowe stronie pozostała nam jeszcze jedna rzecz: lista adresów URL. W słowniku Person jest służąca do ich oznaczania własność o nazwie url. We własności url może być praktycznie wszystko. (Oczywiście pod warunkiem, że jest to adres URL, ale pewnie się domyśliłeś.) Chodzi mi o to, że definicja własności url jest dość swobodna. Dopuszczalny jest każdy rodzaj adresu URL, jakie chcemy powiązać z opisywaną osobą: blog, galeria zdjęć albo profil na Facebooku lub Twitterze.

Kolejną ważną rzeczą, na którą należy zwrócić uwagę jest to, że jednej osobie można przypisać wiele własności url. W zasadzie każda własność może występować więcej niż raz, ale do tej pory nie korzystaliśmy z tej możliwości. Przykładowo można użyć dwóch własności photo do oznaczenia dwóch różnych zdjęć. W tym przypadku chcemy utworzyć listę czterech adresów URLs: do bloga, profilu Google, profilu w portalu Reddit oraz konta na Twitterze. Kod HTML jest następujący: cztery elementy <a> w elementach <li>. W mikrodanych każdemu elementowi <a> należy przypisać atrybut itemprop="url".

  <h1>Moje strony</h1>
  <ul>
    <li><a href="http://diveintomark.org/"
           itemprop="url">blog</a></li>
    <li><a href="http://www.google.com/profiles/pilgrim"
           itemprop="url">Profil Google</a></li>
    <li><a href="http://www.reddit.com/user/MarkPilgrim"
           itemprop="url">Profil Reddit.com</a></li>
    <li><a href="http://www.twitter.com/diveintomark"
           itemprop="url">Twitter</a></li>
  </ul>

Zgodnie z modelem danych mikrodanych HTML5, elementy <a> są przetwarzane w specjalny sposób. Wartością własności mikrodanych w ich przypadku jest atrybut href, a nie zawartość tekstowa. Tekst odnośników jest ignorowany przez procesor mikrodanych. Powyższy kod można przeczytać tak: „Ta osoba ma stronę o adresie URL http://diveintomark.org/. Osoba ta ma inną stronę pod adresem URL http://www.google.com/profiles/pilgrim. Osoba ta ma jeszcze inną stronę pod adresem URL http://www.reddit.com/user/MarkPilgrim. Osoba ta ma kolejną stronę pod adresem URL http://www.twitter.com/diveintomark”.

Dane strukturalne Google

Chciałbym abyśmy na chwilę odeszli od głównego tematu i zastanowili się po co w ogóle to wszystko robimy? Czy wzbogacamy semantykę stron tylko po to, aby wzbogacić semantykę? Nie zrozum mnie źle, bardzo lubię bawić się znacznikami. Ale po co są mikrodane? Jaki z nich pożytek?

Dwa najważniejsze rodzaje aplikacji przetwarzających mikrodane HTML, a więc i HTML5 to:

  1. przeglądarki internetowe,
  2. wyszukiwarki internetowe.

Dla przeglądarek w HTML5 dostępne są APIs DOM umożliwiające pobieranie elementów, własności i wartości własności mikrodanych ze stron. Na razie (luty 2011 r.) żadna przeglądarka nie obsługuje tego API. Ani jedna. Jesteśmy więc… chwilowo w ślepym zaułku, przynajmniej dopóki w przeglądarkach nie pojawi się implementacja tych API.

Drugim ważnym odbiorcą stron HTML są wyszukiwarki internetowe. W jaki sposób taka wyszukiwarka może wykorzystać dane o osobie? Wyobraź sobie taki scenariusz: w wynikach wyszukiwania obok tytułu i opisu strony mogłyby pojawić się dane strukturalne: imię i nazwisko, stanowisko, pracodawca, a może nawet małe zdjęcie. Czy to przyciągnęłoby twoją uwagę? Moją na pewno.

Google obsługuje mikrodane w ramach swojego programu danych strukturalnych. Gdy robot Google przeglądający stronę znajdzie własności mikrodanych zgodne ze słownikiem http://data-vocabulary.org/Person, przetwarza odpowiednio i zapisuje je wraz z pozostałymi informacjami o stronie. Google udostępnia nawet narzędzie do sprawdzania, jak wyszukiwarka Google „widzi” twoje mikrodane. Dla naszej przykładowej strony z mikrodanymi wynik jest następujący:

Item
  Type: http://data-vocabulary.org/person
  photo = http://diveintohtml5.info/examples/2000_05_mark.jpg
  name = Mark Pilgrim
  title = Developer advocate
  affiliation = Google, Inc.
  address = Item( 1 )
  url = http://diveintomark.org/
  url = http://www.google.com/profiles/pilgrim
  url = http://www.reddit.com/user/MarkPilgrim
  url = http://www.twitter.com/diveintomark

Item 1
  Type: http://data-vocabulary.org/address
  street-address = 100 Main Street
  locality = Anytown
  region = PA
  postal-code = 19999
  country-name = USA

Wszystko tu jest: własność photo z atrybutu <img src>, wszystkie cztery adresy URL z listy i nawet obiekt adresu (pod nazwą „Item 1”) z pięcioma podwłasnościami.

W jaki sposób Google wykorzystuje te informacje? To zależy. Nie ma konkretnych reguł określających sposób prezentowania mikrodanych, tego które powinny być prezentowane oraz czy któreś z nich w ogóle muszę zostać pokazane. Jeśli ktoś będzie szukał frazy „Mark Pilgrim” i Google stwierdzi, że nasza strona powinna znaleźć się w wynikach tego wyszukiwania, i Google zdecyduje, że mikrodane znalezione na tej stronie warto wyświetlić, to pozycja na stronie wyników wyszukiwania może wyglądać tak:

O Marku Pilgrimie
Anytown PA – Developer advocate – Google, Inc.
Fragment treści strony.
Fragment treści strony.

diveintohtml5.info/examples/person-plus-microdata.htmlKopiaPodobne strony

Tekst „O Marku Pilgrimie” to tytuł strony pobrany z elementu <title>. W jego wyświetleniu nie ma nic niezwykłego, bo Google tytuł wyświetla od dawna. Ale druga linijka zawiera mnóstwo informacji pobranych wprost z mikrodanych, które dodaliśmy do strony. „Anytown PA” to część adresu pocztowego oznaczona przy użyciu słownika http://data-vocabulary.org/Address. „Developer advocate” i „Google, Inc.” to własności ze słownika http://data-vocabulary.org/Person (title i affiliation).

To niesamowite. Nie trzeba reprezentować wielkiej korporacji robiącej interesy z wyszukiwarką, aby dostosować swój wpis na stronie wyników wyszukiwania. Wystarczy poświęcić kilka minut na dodanie paru atrybutów HTML, aby oznaczyć dane, które i tak miały być opublikowane.

Pytanie do profesora Kodeckiego

P: Zrobiłem wszystko, o czym pisałeś, ale w wynikach wyszukiwania Google nic się nie zmieniło. Dlaczego?
O: “Google nie gwarantuje, że użyje znaczników dodanych na każdej stronie lub w każdej witrynie. A nawet jeśli Google nie zdecyduje się ich wykorzystać, może ich użyć inna wyszukiwarka. Podobnie jak cały HTML5, mikrodane są otwartym standardem, który może zaimplementować każdy, kto chce. Twoim zadaniem jest dostarczenie jak najwięcej informacji. Inni natomiast muszą się zastanowić, co z nimi zrobią. Możesz być zaskoczony!

Oznaczanie organizacji

Zastosowanie mikrodanych nie ogranicza się do pojedynczego słownika. Strony typu „O autorze” są fajne, ale na nich świat się nie kończy. Czujesz, że należy ci się więcej? W takim razie pokażę ci jak oznaczać informacje o organizacjach i firmach.

Tu znajduje się przykładowa strona z listą firm. Najpierw zobaczmy czysty HTML bez mikrodanych.

<article>
  <h1>Google, Inc.</h1>
  <p>
    1600 Amphitheatre Parkway<br>
    Mountain View, CA 94043<br>
    USA
  </p>
  <p>650-253-0000</p>
  <p><a href="http://www.google.com/">Google.com</a></p>
</article>

Krótko i zwięźle. Wszystkie informacje o organizacji znajdują się w elemencie <article>, a więc zaczniemy pracę od niego.

<article itemscope itemtype="http://data-vocabulary.org/Organization">

Podobnie jak w przypadku oznaczania ludzi, należy zdefiniować atrybuty itemscope i itemtype w zewnętrznym kontenerze. W tym przypadku tym zewnętrznym kontenerem jest element <article>. Atrybut itemtype służy do deklarowania użytego słownika mikrodanych (w tym przypadku jest to http://data-vocabulary.org/Organization), a za pomocą atrybutu itemscope deklaruje się, że wszystkie własności przypisane elementom potomnym tego kontenera są związane z tym słownikiem.

Co znajduje się w słowniku Organization? Nie ma w nim nic skomplikowanego. Niektóre jego własności mogą nawet wydawać się znajome.

Słownik Organization
WłasnośćOpis
nameNazwa organizacji (np. Initech)
urlAdres witryny organizacji
addressAdres siedziby organizacji Może mieć podwłasności street-address, locality, region, postal-code oraz country-name.
telNumer telefonu organizacji
geoWspółrzędne geograficzne siedziby. Zawsze zawiera dwie podwłasności: latitude (szerokość geograficzna) i longitude (długość geograficzna).

Pierwszy interesujący nas element w kontenerze <article> to <h1>. Zawiera on nazwę firmy, a więc atrybut itemprop="name" przypiszemy bezpośrednio elementowi <h1>.

  <h1 itemprop="name">Google, Inc.</h1>

Zgodnie z modelem danych mikrodanych HTML5, elementy <h1> nie są przetwarzane w specjalny sposób. Wartością własności mikrodanych jest w ich przypadku zawartość tekstowa. Mówiąc po polsku: „Organizacja ta nazywa się Google, Inc”.

Następny jest adres ulicy. Adres organizacji oznacza się tak samo, jak adres osoby. Najpierw dodaje się atrybut itemprop="address" do zewnętrznego kontenera adresu (w tym przypadku jest to element <p>). W ten sposób zaznaczamy, że to jest własność address organizacji. Ale co z własnościami samego adresu? Musimy dodatkowo zdefiniować atrybuty itemtype i itemscope, aby poinformować że to jest element Address mający własne własności.

  <p itemprop="address" itemscope
     itemtype="http://data-vocabulary.org/Address">

Na koniec każdą osobną informację umieszczamy w oddzielnym elemencie <span>, aby móc zastosować odpowiednią własność (street-address, locality, region, postal-code oraz country-name) dla każdego z nich.

  <p itemprop="address" itemscope
     itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">1600 Amphitheatre Parkway</span><br>
    <span itemprop="locality">Mountain View</span>,
    <span itemprop="region">CA</span>
    <span itemprop="postal-code">94043</span><br>
    <span itemprop="country-name">USA</span>
  </p>

Po polsku: „Ta organizacja ma adres. Ulica: 1600 Amphitheatre Parkway. Miejscowość: Mountain View. Stan: CA. Kod pocztowy: 94043. Nazwa kraju: USA.

Następny jest numer telefonu organizacji. Numery telefoniczne zawsze sprawiają problemy, bo ich składnia różni się w zależności od kraju. (A jeśli chcesz zadzwonić do innego kraju, to jest jeszcze gorzej.) W tym przykładzie przedstawiony jest numer w standardzie USA przeznaczony do użytku na terenie tego kraju.

  <p itemprop="tel">650-253-0000</p>

(Hej, gdybyś nie zauważył, słownik Address stracił zasięg wraz zamknięciem elementu <p>. Wracamy z powrotem do definiowania własności ze słownika Organization.)

Jeśli chcesz podać więcej numerów telefonicznych — np. po jednym dla klientów z USA i spoza USA — to nie żadnych przeciwwskazań, aby to zrobić. Wszystkie mikrodane mogą być używane wielokrotnie. Pamiętaj tylko, że każdy numer musi znajdować się w osobnym elemencie HTML, niezależnym od nadanej mu etykiety.


  <p>
    Dla klientów z USA: <span itemprop="tel">650-253-0000</span><br>
    Dla klientów z UK: <span itemprop="tel">00 + 1* + 6502530000</span>
  </p>

Zgodnie z modelem danych mikrodanych HTML5, elementy <p> i <span> nie są przetwarzane w specjalny sposób. Wartością własności mikrodanych tel jest zawartość tekstowa. W słowniku mikrodanych Organization numer telefoniczny nie jest podzielony na części. Cała własność tel to zwykły tekst w dowolnej formie. Jeśli chcesz umieścić kierunkowy w nawiasie, albo zamiast łączników użyć spacji, to bez przeszkód możesz to zrobić. Jeśli klient pobierający te mikrodane zechce w jakiś sposób przetwarzać numer, to jego sprawa.

Następna własność również wygląda znajomo: url. Podobnie jak w przypadku osoby, z organizacją również można powiązać adres URL. Może to być adres strony głównej, kontaktowej, produktu i dowolnej innej. Jeśli adres URL wskazuje stronę o organizacji albo należącą do organizacji, oznacz go atrybutem itemprop="url".

  <p><a itemprop="url" href="http://www.google.com/">Google.com</a></p>

Zgodnie z modelem danych mikrodanych HTML5, elementy <a> są przetwarzane w specjalny sposób. Wartością własności mikrodanych w ich przypadku jest atrybut href, a nie tekst odnośnika. Po polsku powiedzielibyśmy to tak: „ta organizacja jest związana z adresem URL http://www.google.com/”. Brak tu jakichkolwiek dodatkowych informacji o tym związku i nie jest wliczany tekst łącza „Google.com”.

Na koniec chciałbym dodać jeszcze kilka słów o geolokalizacji. Ale nie chodzi mi o API geolokalizacji W3C. Mam na myśli, jak oznaczać lokalizację siedziby organizacji przy użyciu mikrodanych.

Do tej pory we wszystkich przykładach oznaczane były dane widoczne. To znaczy, mamy element <h1> z nazwą firmy, więc dodajemy atrybut itemprop do tego elementu <h1>, aby zadeklarować, że tekst tego widocznego nagłówka jest nazwą organizacji. Albo mamy element <img> wskazujący zdjęcie, więc dodajemy atrybut itemprop do tego elementu <img>, aby zadeklarować, że te widoczne zdjęcie jest zdjęciem opisywanej osoby.

W tym przypadku dane geolokalizacyjne takie nie są. Nie ma widocznego tekstu dokładnie określającego szerokość i długość geograficzną (do czterech miejsc po przecinku!) organizacji. W istocie przykład organization.html (bez mikrodanych) w ogóle nie zawiera danych geolokalizacyjnych. Zawiera odnośnik do Map Google, ale nawet odnośnik URL tego łącza nie zawiera współrzędnych geograficznych. (Zawiera podobne informacje w formacie Google.) Ale nawet gdybyśmy mieli łącze do hipotetycznej internetowej usługi mapowej pobierającej współrzędne geograficzne z parametrów w adresie URL, w mikrodanych nie ma możliwości oddzielenia od siebie poszczególnych części tego adresu. Nie można zadeklarować, że pierwszy parametr zapytania w adresie URL określa szerokość, drugi długość geograficzną, a reszta parametrów jest nieważna.

Dla takich przypadków jak ten w HTML5 istnieje możliwość adnotacji niewidocznych danych. Z techniki tej należy korzystać tylko w ostateczności. Jeśli jest sposób na wyświetlenie albo wyrenderowanie interesujących cię danych, to powinieneś z niego skorzystać. Niewidoczne dane czytelne tylko dla maszyn zazwyczaj szybko stają się „przestarzałe”. To znaczy, widoczne dane od czasu się aktualizuje, a o niewidocznych łatwo zapomnieć. Dzieje się to o wiele częściej niż ci się wydaje i na pewno wcześniej czy później tobie też to się przytrafi.

Jednak zdarzają się sytuacje, w których nie da się uniknąć użycia niewidocznych danych. Twój szef może bardzo chcieć opublikować czytelne dla maszyny dane geolokalizacyjne nie chcąc jednocześnie bałaganić w interfejsie parami niezrozumiałych sześciocyfrowych liczb. W takim przypadku niewidoczne dane są jedynym rozwiązaniem. Jedyna nadzieja w tym przypadku to możliwość umieszczenia niewidocznych danych obok widocznego opisującego je tekstu, dzięki czemu osoba aktualizująca dane może przypomni sobie, że wraz z tym tekstem trzeba zaktualizować też niewidoczne informacje.

W przykładzie tym możemy utworzyć element <span> w tym samym elemencie <article>, w którym znajdują się wszystkie pozostałe własności Organization, a następnie umieścić w nim nasze niewidoczne dane geolokalizacyjne.

  <span itemprop="geo" itemscope
    itemtype="http://data-vocabulary.org/Geo">
    <meta itemprop="latitude" content="37.4149" />
    <meta itemprop="longitude" content="-122.078" />
  </span>
</article>

Dane geolokalizacyjne są zdefiniowane we własnym słowniku, podobnie jak adres osoby i organizacji. Dlatego elementowi <span> należy przypisać te atrybuty:

  1. itemprop="geo": informuje, że ten element reprezentuje własność geo otaczającej organizacji
  2. itemtype="http://data-vocabulary.org/Geo": informuje, który słownik mikrodanych jest użyty
  3. itemscope: informuje, że element ten jest kontenerem elementu mikrodanych z własnym słownikiem (podanym w atrybucie itemtype). Wszystkie własności w tym elemencie są własnościami słownika http://data-vocabulary.org/Geo, nie zewnętrznego http://data-vocabulary.org/Organization.

Kolejnym ważnym pytaniem, na które odpowiedź można znaleźć w tym przykładzie jest: „Jak oznaczać niewidoczne dane?”. Do tego celu używa się elementu <meta>. W poprzednich wersjach języka HTML elementu <meta> można było używać tylko w części <head> strony. W HTML5 elementu <meta> można używać wszędzie. I z tego przywileju właśnie skorzystaliśmy.

<meta itemprop="latitude" content="37.4149" />

Zgodnie z modelem danych mikrodanych HTML5, elementy <meta> są przetwarzane w specjalny sposób. Wartością własności mikrodanych jest atrybut content. Jako że element ten nie jest wyświetlany na stronie, doskonale nadaje się do publikowania niewidocznych informacji. Jednak wielka moc to także wielka odpowiedzialność. Musisz pamiętać o aktualizowaniu tych niewidocznych danych, aby pozostawały zgodne z widocznym pobliskim tekstem.

W Danych strukturalnych Google nie ma możliwości definiowania własności ze słownika Organization, przez co nie mogą pokazać ci żadnego przykładu w wynikach wyszukiwania. Lecz organizacje są też obecne w dwóch kolejnych opisywanych przypadkach: wydarzeniach i recenzjach, które obsługiwane w Danych strukturalnych Google.

Oznaczanie wydarzeń

Co ma być, to będzie. Czasami to coś jest nawet z góry zaplanowane. Fajnie by było, gdybyśmy mogli powiedzieć wyszukiwarce, kiedy to coś się zdarzy. I wiesz co? Jest taka możliwość.

Na początek spójrzmy na przykładowy plan moich przemówień.

<article>
  <h1>Google Developer Day 2009</h1>
  <img width="300" height="200"
       src="http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg"
       alt="[Mark Pilgrim na podium]">
  <p>
    Spotkania Google Developer Days są szansą na posłuchanie
    co mają do powiedzenia programiści Google o produktach, które sami zbudowali. Jest to
    jednodniowa konferencja, na której odbywają się seminaria
    na tematy dotyczące technologii sieciowych, np. Map Google,
    OpenSocial, Androida, API AJAX, Chrome czy Google Web Toolkit.
  </p>
  <p>
    <time datetime="2009-11-06T08:30+01:00">6 listopada 2009, 8:30</time>
      –
    <time datetime="2009-11-06T20:30+01:00">20:30</time>
  </p>
  <p>
    Congress Center<br>
    5th května 65<br>
    140 21 Praha 4<br>
    Czech Republic
  </p>
  <p><a href="http://code.google.com/intl/cs/events/developerday/2009/home.html">Witryna GDD/Prague</a></p>
</article>

Wszystkie informacje o wydarzeniu znajdują się w elemencie <article>, więc jemu przypiszemy atrybuty itemtype i itemscope.

<article itemscope itemtype="http://data-vocabulary.org/Event">

Adres URL słownika zdarzeń (Event) to http://data-vocabulary.org/Event. Można pod nim znaleźć opis wszystkich dostępnych w słowniku własności. I co to są za własności?

Słownik Event
WłasnośćOpis
summaryNazwa zdarzenia
urlOdnośnik do strony ze szczegółowymi informacjami o zdarzeniu
locationMiejsce, w którym odbywa się zdarzenie. Można zaprezentować przy użyciu zagnieżdżonego słownika Organization lub Address.
descriptionOpis zdarzenia
startDateData i godzina rozpoczęcia zdarzenia w formacie daty ISO
endDateData i godzina zakończenia zdarzenia w formacie daty ISO
durationCzas trwania zdarzenia w formacie ISO
eventTypeKategoria, do jakiej zalicza się wydarzenie (np. Koncert albo Wykład). Można tu wpisać dowolny tekst, nie wartość z jakiejś ustalonej listy.
geoWspółrzędne geograficzne miejsca wydarzenia. Zawsze zawiera dwie podwłasności: latitude (szerokość geograficzna) i longitude (długość geograficzna).
photołącze do zdjęcia lub innego obrazu związanego z wydarzeniem

Nazwa wydarzenia znajduje się w elemencie <h1>. Zgodnie z modelem danych mikrodanych HTML5, elementy <h1> nie są przetwarzane w specjalny sposób. Wartością własności mikrodanych jest w ich przypadku zawartość tekstowa. W związku z tym wystarczy dodać atrybut itemprop, aby zadeklarować, że element ten zawiera nazwę wydarzenia.

  <h1 itemprop="summary">Google Developer Day 2009</h1>

Tłumaczenie na polski: „Wydarzenie to nazywa się Google Developer Day 2009”.

Z wydarzeniem związane jest zdjęcie, które można oznaczyć za pomocą własności photo. Jak się domyślasz, zdjęcie te jest wstawione na stronę za pomocą elementu <img>. Podobnie jak własność photo w słowniku Person, zdjęcie w słowniku Event jest adresem URL. Jako że zgodnie z modelem danych mikrodanych HTML5 wartością własności elementu <img> jest jego atrybut src, wystarczy że dodamy atrybut itemprop do tego elementu <img>.

  <img itemprop="photo" width="300" height="200"
       src="http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg"
       alt="[Mark Pilgrim na podium]">

Tłumaczenie na polski: „Zdjęcie tego wydarzenia znajduje się pod adresemhttp://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg.”

Dalej znajduje się dłuższy opis wydarzenia będący zwykłym akapitem.

  <p itemprop="description">Spotkania Google Developer Days są szansą
na posłuchanie co mają do powiedzenia programiści Google o produktach,
 które sami zbudowali. Jest to jednodniowa konferencja, na której odbywają się seminaria
na tematy dotyczące technologii sieciowych, np. Map Google,
Androida, API AJAX, Chrome czy Google Web Toolkit.</p>

Dalej mamy coś nowego. Wydarzenia z reguły mają określony czas trwania oraz zaczynają się i kończą w wyznaczonym terminie. W HTML5 datę i godzinę oznacza się przy użyciu elementu <time>, którego jak widać używamy też w przykładzie. Pytanie, jak dodać mikrodane do tych elementów <time>? Zgodnie z modelem danych mikrodanych HTML5, elementy <time> są przetwarzane w specjalny sposób. Wartością własności mikrodanych dla elementu <time> jest wartość jego atrybutu datetime. Ponadto własności startDate i endDate słownika Event muszą mieć wartości w formacie ISO, podobnie jak własność datetime elementu <time>. Po raz kolejny semantyka HTML doskonale pasuje nam do semantyki mikrodanych. Oznaczanie daty początkowej i końcowej wydarzenia przy użyciu mikrodanych jest łatwe. Wystarczy w tym celu:

  1. poprawnie zbudować strukturę HTML (tzn. użyć elementów <time> do oznaczenia dat i godzin) oraz
  2. dodać atrybut itemprop.
  <p>
    <time itemprop="startDate" datetime="2009-11-06T08:30+01:00">6 listopada 2009, 8:30</time>
      –
    <time itemprop="endDate" datetime="2009-11-06T20:30+01:00">20:30</time>
  </p>

Po polsku: „To wydarzenie rozpoczyna się 6 listopada 2009 r., o godzinie 8:30 i będzie trwać do 6 listopada 6 2009 r., o godzinie 20:30 (czas lokalny Pragi, GMT+1)”.

Następna w kolejce jest własność location. W definicji słownika Event napisano, że do jej oznaczenia można użyć słownika Organization albo Address. W tym przypadku wydarzenie odbywa się w miejscu specjalizującym się w organizowaniu konferencji, czyli w centrum kongresowym w Pradze. Jeśli użyjemy słownika Organization, będziemy mogli dodać nazwę i adres tego miejsca.

Najpierw zadeklarujemy, że element <p> zawierający adres jest własnością location słownika Event oraz że element ten jest również elementem mikrodanych zgodnym ze słownikiem http://data-vocabulary.org/Organization.

  <p itemprop="location" itemscope
           itemtype="http://data-vocabulary.org/Organization">

Następnie oznaczamy nazwę organizacji umieszczając ją w elemencie <span> z atrybutem itemprop.

    <span itemprop="name">Congress Center</span><br>

Dzięki zasadom zakresu mikrodanych, użyty tu przez nas atrybut itemprop="name" definiuje własność słownika Organization, nie słownika Event. Element <p> określa początek zakresu własności słownika Organization i jeszcze nie został zamknięty znacznikiem </p>. Wszystkie mikrodane definiowane w tym miejscu należą do zakresu ostatnio zdefiniowanego słownika. Zagnieżdżone słowniki przypominają stos. Jeszcze nic z niego nie zdjęliśmy, więc ciągle mówimy o własnościach słownika Organization.

Co więcej, do stosu tego dodamy nawet kolejny słownik: adres (Address) organizacji (Organization) organizującej zdarzenie (Event).


    <span itemprop="address" itemscope
          itemtype="http://data-vocabulary.org/Address">

I znowu chcemy oznaczyć każdy element adresu przy użyciu osobnej własności mikrodanych, więc musimy dodać parę nowych elementów <span>, aby mieć do czego przyczepić atrybuty itemprop. (Jeśli nie nadążasz, to jeszcze raz przeczytaj o oznaczaniu adresu osoby i oznaczaniu adresu organizacji.)

      <span itemprop="street-address">5th května 65</span><br>
      <span itemprop="postal-code">140 21</span>
      <span itemprop="locality">Praha 4</span><br>
      <span itemprop="country-name">Czech Republic</span>

To wszystkie własności ze słownika Address, więc zamykamy element <span>, który rozpoczął zakres Address i tym samym zdejmujemy jeden element ze stosu.

    </span>

Nie ma już więcej własności słownika Organization, więc zamykamy element <p>, który rozpoczął zakres Organization i tym samym zdejmujemy kolejny element ze stosu.

  </p>

Wracamy do definiowania własności ze słownika Event. Kolejna własność to geo reprezentująca miejsce, w którym odbywa się wydarzenie. Używa się w niej tego samego słownika Geo, którego użyliśmy wcześniej do oznaczenia lokalizacji organizacji. Potrzebujemy elementu <span> w roli kontenera. Przypiszemy mu atrybuty itemtype i itemscope. W elemencie tym utworzymy dwa elementy <meta>, po jednym dla własności latitude i longitude.


  <span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
    <meta itemprop="latitude" content="50.047893" />
    <meta itemprop="longitude" content="14.4491" />
  </span>

Zamknęliśmy element <span> zawierający własności Geo, więc znowu jesteśmy w zakresie słownika Event. Ostatnia własność to znana nam już url. Adres URL z wydarzeniem wiąże się w taki sam sposób, jak z osobą i organizacją. Jeśli poprawnie używasz elementów HTML (oznaczasz łącza za pomocą atrybutu href elementu a), to aby zadeklarować, że hiperłącze jest własnością url mikrodanych wystarczy dodać do niego atrybut itemprop.

  <p>
    <a itemprop="url"
       href="http://code.google.com/intl/cs/events/developerday/2009/home.html">
      Witryna GDD/Prague
    </a>
  </p>
</article>

Na przykładowej stronie z opisem wydarzenia znajduje się też drugie wydarzenie: moja przemowa na konferencji ConFoo w Montréalu. Nie ma potrzeby szczegółowo go tu opisywać. Wszystko jest mniej więcej tak samo, jak w przypadku Pragi: element Event z zagnieżdżonymi elementami Geo i Address. Chcę tylko podkreślić, że na jednej stronie może znajdować się opis wielu wydarzeń oznaczonych mikrodanymi.

Powrót danych strukturalnych Google

Według narzędzia do testowania danych strukturalnych Google, robot Google z naszej przykładowej strony z listą wydarzń pobierze następujące informacje:

Item
    Type: http://data-vocabulary.org/Event
    summary = Google Developer Day 2009
    eventType = conference
    photo = http://diveintohtml5.info/examples/gdd-2009-prague-pilgrim.jpg
    description = Spotkania Google Developer Days są szansą na posłuchanie co mają do powiedzenia programiści Google o produktach, które sami zbudowali. Jest to jednodniowa konferencja, na której odbywają się seminaria na tematy dotyczące...
    startDate = 2009-11-06T08:30+01:00
    endDate = 2009-11-06T20:30+01:00
    location = Item(__1)
    geo = Item(__3)
    url = http://code.google.com/intl/cs/events/developerday/2009/home.html

Item
    Id: __1
    Type: http://data-vocabulary.org/Organization
    name = Congress Center
    address = Item(__2)

Item
    Id: __2
    Type: http://data-vocabulary.org/Address
    street-address = 5th května 65
    postal-code = 140 21
    locality = Praha 4
    country-name = Czech Republic

Item
    Id: __3
    Type: http://data-vocabulary.org/Geo
    latitude = 50.047893
    longitude = 14.4491

Jak widać są tu wszystkie informacje oznaczone przy użyciu własności mikrodanych. Własnościom będącym osobnymi elementami mikrodanych nadane zostały wewnętrzne identyfikatory (Item(__1), Item(__2) itd). Nie jest to część specyfikacji mikrodanych. To tylko dodatek narzędzi Google, aby pokazać przykładowy wynik i zaznaczyć sposób grupowania zagnieżdżonych elementów oraz ich własności.

Tak nasza strona mogłaby wyglądać w wynikach wyszukiwania Google. (Należy podkreślić, że jest to tylko przykład. Format wyników wyszukiwania Google może się zmienić, a poza tym nie ma gwarancji, że Google w ogóle zwróci uwagę na nasze mikrodane. Przepraszam, jeśli się powtarzam, ale prawnicy każą mi to robić.)

Terminarz Marka Pilgrima
Fragment treści strony.
Fragment treści strony.

Google Developer Day 2009Fri, Nov 6Congress Center, Praha 4, Czech Republic
ConFoo.ca 2010Wed, Mar 10Hilton Montreal Bonaventure, Montréal, Québec, Canada

diveintohtml5.info/examples/event-plus-microdata.htmlKopiaPodobne strony

Po tytule i automatycznie wygenerowanym opisie strony Google przedstawi tabelę wydarzeń sporządzoną na podstawie mikrodanych. Zwróć uwagę na format daty: Fri, Nov 6. W kodzie HTML nic takiego nie wpisywaliśmy. Użyliśmy dwóch pełnych łańcuchów w formacie ISO: 2009-11-06T08:30+01:00 i 2009-11-06T20:30+01:00. Google „dostrzegł”, że te dwie daty dotyczą jednego dnia i zamienił je w jedną w bardziej czytelnym formacie.

Teraz spójrz na adres wydarzenia. Wyświetlone zostały tylko nazwa miejsca + miasto + kraj. Nie ma dokładnego adresu. Jest to możliwe dzięki temu, że podzieliliśmy adres na pięć podwłasności — name, street-address, region, locality oraz country-name — i każdą część adresu oznaczyliśmy przy użyciu innej własności mikrodanych. Google wykorzystało ten fakt, aby przedstawić skrócone dane adresowe. Inne aplikacje wykorzystujące te mikrodane mogą je inaczej zaprezentować. Nie ma tu ścisłych reguł. Twoim zadaniem jest dostarczenie jak najwięcej jak najdokładniejszych informacji. Jak inni je zinterpretują, to już ich sprawa.

Oznaczanie recenzji

Przedstawiam kolejny przykład ulepszania sieci (i jednocześnie wyników wyszukiwania) poprzez użycie kodu HTML: recenzje firm i produktów.

Poniżej znajduje się krótka recenzja mojej ulubionej pizzerii znajdującej sie w pobliżu mojego domu. (Ta restauracja naprawdę istnieje. Gdybyś kiedyś był w Apex, NC, to polecam.) Najpierw spójrzmy na oryginalny kod:

<article>
  <h1>Anna’s Pizzeria</h1>
  <p>★★★★☆ (4 stars out of 5)</p>
  <p>New York-style pizza right in historic downtown Apex</p>
  <p>
    Food is top-notch. Atmosphere is just right for a “neighborhood
    pizza joint.” The restaurant itself is a bit cramped; if you’re
    overweight, you may have difficulty getting in and out of your
    seat and navigating between other tables. Used to give free
    garlic knots when you sat down; now they give you plain bread
    and you have to pay for the good stuff. Overall, it’s a winner.
  </p>
  <p>
    100 North Salem Street<br>
    Apex, NC 27502<br>
    USA
  </p>
  <p>— reviewed by Mark Pilgrim, last updated March 31, 2010</p>
</article>

Recenzja znajduje się w elemencie <article>, więc jemu przypiszemy atrybuty itemtype i itemscope. Adres URL przestrzeni nazw tego słownika to http://data-vocabulary.org/Review.

<article itemscope itemtype="http://data-vocabulary.org/Review">

Jaki własności znajdują się w słowniku Review? Cieszę się, że pytasz.

Słownik Review
WłasnośćOpis
itemreviewedNazwa tego, co jest oceniane. Może to być produkt, usługa, firma itd.
ratingOcena w skali od 1 do 5. Można też użyć zagnieżdżonego słownika http://data-vocabulary.org/Rating, aby zastosować niestandardową skalę.
reviewerNazwa osoby, która napisała recenzję
dtreviewedData napisania recenzji w formacie ISO
summaryZwięzłe streszczenie recenzji
descriptionTreść właściwa recenzji

Pierwsza własność jest łatwa: itemreviewed to zwykły tekst, tutaj znajdujący się w elemencie <h1>, któremu przypiszemy atrybut itemprop.

  <h1 itemprop="itemreviewed">Anna’s Pizzeria</h1>

Na razie pominę ocenianie, aby wrócić do niego później.

Kolejne dwie własności również są łatwe. Własność summary reprezentuje zwięzły opis tego, co jest poddawane ocenie, a description reprezentuje treść właściwą recenzji.

  <p itemprop="summary">New York-style pizza right in historic downtown Apex</p>
  <p itemprop="description">
    Food is top-notch. Atmosphere is just right for a “neighborhood
    pizza joint.” The restaurant itself is a bit cramped; if you’re
    overweight, you may have difficulty getting in and out of your
    seat and navigating between other tables. Used to give free
    garlic knots when you sat down; now they give you plain bread
    and you have to pay for the good stuff. Overall, it’s a winner.
  </p>

Własności location i geo są nam już dobrze znane. (Jeśli nie czytałeś wszystkiego od początku, zajrzyj do części o oznaczaniu adresów osób, oznaczaniu adresów organizacji oraz oznaczaniu danych geolokalizacyjnych.)

  <p itemprop="location" itemscope
           itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">100 North Salem Street</span><br>
    <span itemprop="locality">Apex</span>,
    <span itemprop="region">NC</span>
    <span itemprop="postal-code">27502</span><br>
    <span itemprop="country-name">USA</span>
  </p>
  <span itemprop="geo" itemscope
        itemtype="http://data-vocabulary.org/Geo">
    <meta itemprop="latitude" content="35.730796" />
    <meta itemprop="longitude" content="-78.851426" />
  </span>

W ostatnim wierszu mamy znany nam już rodzaj problemu: dwie informacje w jednym elemencie. Nazwisko osoby, która napisała recenzję to Mark Pilgrim, a data napisania recenzji to 31 marca 2010. Jak oznaczyć te dwie własności? Trzeba je umieścić w osobnych elementach i każdemu z nich przypisać atrybut itemprop. Datę powinno się oznaczyć elementem <time>, który będzie naturalnym punktem zaczepienia dla atrybutu itemprop. Nazwisko recenzenta można umieścić w elemencie <span>.

  <p>— <span itemprop="reviewer">Mark Pilgrim</span>, last updated
     <time itemprop="dtreviewed" datetime="2010-03-31">
       31 marca 2010
     </time>
  </p>
</article>

Czas zająć się ocenami. Jest to najtrudniejsza część oznaczania recenzji. Domyślnie w słowniku Review stosowana jest skala ocen od 1 do 5 — 1 to najniższa ocena, a 5 najwyższa. Jeśli jednak chcesz użyć innej skali, to nie ma przeszkód. Ale najpierw zajmiemy się domyślną skalą.

  <p>★★★★☆ (<span itemprop="rating">4</span> stars out of 5)</p>

Jeśli używasz domyślnej skali 1-5, top musisz jedynie oznaczyć samą ocenę (tu: 4). A co, gdy chce się użyć innej skali? Można to zrobić, ale trzeba zadeklarować zakres jej wartości. Przykładowo, gdybyśmy chcieli utworzyć skalę 0–10, to również użylibyśmy własności itemprop="rating", ale zamiast wprost podawać wartość oceny, użylibyśmy zagnieżdżonego słownika http://data-vocabulary.org/Rating do zadeklarowania najlepszej i najgorszej oceny na własnej skali oraz aktualnej oceny w jej obrębie.

<p itemprop="rating" itemscope
   itemtype="http://data-vocabulary.org/Rating">
  ★★★★★★★★★☆
  (<span itemprop="value">9</span> on a scale of
   <span itemprop="worst">0</span> to
   <span itemprop="best">10</span>)
</p>

Po polsku: „Produkt oceniam na 9 w skali 0-10”.

Czy wspominałem już, że mikrodane recenzji mogą pojawić się w wynikach wyszukiwania? Tak tak, mogą. Oto surowe dane, które narzędzie testowania danych strukturalnych Google wyciągnęło z mojej recenzji:

Item
  Type: http://data-vocabulary.org/Review
  itemreviewed = Anna’s Pizzeria
  rating = 4
  summary = New York-style pizza right in historic downtown Apex
  description = Food is top-notch. Atmosphere is just right ...
  address = Item(__1)
  geo = Item(__2)
  reviewer = Mark Pilgrim
  dtreviewed = 2010-03-31

Item
  Id: __1
  Type: http://data-vocabulary.org/Organization
  street-address = 100 North Salem Street
  locality = Apex
  region = NC
  postal-code = 27502
  country-name = USA

Item
  Id: __2
  Type: http://data-vocabulary.org/Geo
  latitude = 35.730796
  longitude = -78.851426

A tak mniej więcej (należy uwzględnić kaprysy Google, fazy księżyca itp. czynniki) może wyglądać moja recenzja w wynikach wyszukiwania:

Anna’s Pizzeria: review
★★★★☆ Review by Mark Pilgrim – Mar 31, 2010
Fragment treści strony.
Fragment treści strony.

diveintohtml5.info/examples/review-plus-microdata.htmlKopiaPodobne strony

Muszę przyznać, że robi to na mnie wrażenie.

Lektura uzupełniająca

Informacje o mikrodanych

Informacje dotyczące danych strukturalnych Google:

Autor: Mark Pilgrim

Źródło: http://diveintohtml5.info/

Tłumaczenie: Łukasz Piwko

Treść tej strony jest dostępna na zasadach licencji CC BY 3.0