Mikroformaty (microformats) – html means more

Prawdopodobnie wiele osób zetknęło się z mikroformatami, publikacji na ich temat jest dość dużo. Większość jednak porozrzucana, podzielona na mniejsze elementy. W tym wpisie chcę zebrać całość użytecznych informacji na ten temat w jednym miejscu. Najlepszym miejscem na to jest (jak dla mnie) ten blog 🙂

W skrócie mikroformaty są umownym zestawem standardów (klas CSS i elementów języka xHTML) stosowanych w celu umożliwienia maszynom odczytania i zrozumienia większej ilości danych, które bez nich byłyby zrozumiałe tylko dla człowieka.

Charakterystyka mikroformatów

Inicjatywa stworzenia mikroformatów miała miejsce w 2005 roku. W założeniu chciano przyśpieszyć adaptację tzw. idei sematycznej sieci.

Najważniejszą informacją odnośnie mikroformatów jest to, że nie są one odrębnym językiem. Nie są też odmianą, ani częścią jakiegoś języka. Są to umowne sposoby stosowania klas CSS oraz elementów xHTML w taki sposób, aby umieścić dodatkowe informacje w sposób łatwy do odczytania dla maszyn. Wzbogacają tzw. semantykę kodowania, dzięki czemu stają się łatwiejsze do przetworzenia. Umożliwiają przenoszenie treści zawartej na witrynie do innych aplikacji, dzięki czemu rozszerza się zakres wykorzystania informacji.

Mikroformaty tylko opisują dane, same w sobie nie są ich nośnikami. Jest to ogólnie przyjęta konwencja, która pozwala zagnieżdżać dodatkowe informacje w dokumentach HTML.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards 1.

Można je zastosować zarówno w HTML, xHTML, XML, RSS, ATOM. Występują w następujących atrybutach:

  1. atrybut class
  2. atrybut rel
  3. atrybut rev

Budowa mikroformatów

Jak już wspomniałem mikroformaty opierają się na klasach CSS lub na atrybutach xHTML. Najczęściej spotykanym zastosowaniem są wizytówki (hCard), terminarz (hCalendar). W przypadku pierwszego zastosowania, całość wizytówki zawieramy w elemencie z klasą CSS o nazwie vcard. W niej zawartość elementów z odpowiednimi klasami jest interpretowana jako pola wizytówki. W przypadku kalendarza, całość umieszczamy w elemencie z przypisaną klasą vevent.
hCard jest bardziej rozbudowany (17 pozycji) od hCalendar (8 pozycji), zatem nim się zajmiemy w celu przedstawienia budowy mikroformatów. Przykładowa wizytówka może wyglądać następująco:

<div class="vcard">
    <span class="fn">Jan Dzban</span> 
    <span class="additional-name">Piotr</span>
    <div class="org">Firma Jana Dzbana SP. Z O. O.</div>
    <a class="email" href="mailto:jan.kowalski@firma_jana_dzbana.pl">jan.kowalski@firma_jana_dzbana.pl</a>
    strona WWW
    <div class="adr">
        <div class="street-address">Dzbanowa 666</div>
        <div class="locality">Janów</div>
        <div class="region">Mazowieckie</div>
        <div class="postal-code">00-123</div>
        <div class="country-name">Polska</div>
    </div>
    <div class="tel">0-700-123-456</div>
</div>

Przyjrzymy się szczegółom. Klasa vcard informuje, że mamy do czynienia z wizytówką (mikrofromatem hCard).
Klasa fn zawiera informację o osobie (Imię i nazwisko). Jeśli chcielibyśmy być bardziej dokładni możemy się posłużyć dwoma oddzielnymi elementami given-name i family-name, oznaczającymi odpowiednio imię i nazwisko. Dodatkowe (drugie) imię zawiera element z klasą additional-name.
Klasa org symbolizuje organizację (firmę, przedsiebiorstwo).
Kolejne klasy email i url – jak nazwa wskazuje, odpowiednio adres poczty elektronicznej, adres strony WWW.
Kolejny blok o klasie adr informuje o zawartości dotyczącej adresu. A w nim szczegółowe dane: nazwa ulicy, numer domu, miejscowość, region (województwo), kod pocztowy, kraj.
Ostatni blok zawiera informację o numerze telefonu – klasa tel.

Jak widać nazewnictwo klas jest bardzo intuicyjne, dzięki czemu podnosi nawet czytelność kodu HTML.

Microformats w praktyce – rodzaje i zastosowanie

Lista podstawowych mikroformatów jest już dość liczna, ciągle powstają nowe (17 w wersji roboczej). Poniższa lista przedstawia mikroformaty, które zostały uznane jako stabilne, otwarte formaty 2:

  1. hCalendar – kalendarz, terminarz
  2. hCard – wizytówka
  3. rel-nofollow – link nie powinien wpływać na ranking strony docelowej w indeksach wyszukiwarek
  4. rel-license – link do strony z licencją pod którą opublikowano odwiedzaną stronę
  5. rel-tag – link do strony z danym tagiem (słowem kluczowym, tematem)
  6. VoteLinks – link z informacją o ocenie strony docelowej względem aktualnej
  7. XFN – relacje międzyludzkie
  8. XMDP – do opisu metadanych (schematycznych opisów innych mikroformatów)
  9. XOXO – definiuje nowy typ dokumentu XHTML

Możliwych zastosowań jest więcej niż mikroformatów. Wile z nich można łączyć, np przy pomocy hCalendar + hCard + Geo – możemy utworzyć informację o spotkaniu, podać wizytówkę organizatora, oznaczyć miejsce wykorzystując geolokalizację.
Łącząc mikroformaty z innymi usługami takimi jak Technorati 3, która przekonwertuje nasz kod HTML na format uniwersalny, umożliwiający załadowanie udostępnionych informacji do kalendarza użytkownika, dodatkowo udostępni aplikację z urządzeniami przenośnymi. Link dodajemy w postaci:

Dodaj wizytówkę
Dodaj spotkanie

Kolejnym przykładem może być użycie Kalendarza Google, który daje możliwość importu danych w formacie hCalendar. Pojedyncze kliknięcie w przycisk przenosi do kalendarza, wypełni formularz rejestracji nowego zdarzenia (z informacji zaczerpniętych z mikroformatu). Dzięki temu można stworzyć zaproszenia na spotkanie, umieścić je na własnej stronie, a odwiedzający będą mogli jednym kliknięciem dodać je do swoich kalendarzy.

Ikony dla mikroformatów

Aby jeszcze lepiej uwidocznić zastosowanie mikroformatów dobrą metodą jest przygotowanie zestawu ikon symbolizujących odpowiednie dane. Rozpoznawalne ikony, stosowane na wielu stronach staną się cenną informacją rozpoznawczą. Z racji tego, że idea mikroformatów jest jeszcze młoda, ikony wciąż podlegają zmianom i procesowi standaryzacji. Firma Bartelme Design 4 udostępnia darmowy zestaw ikon (źródła dla programów Photoshop i Ilustrator) wraz z programem do tworzenia ikon. Łącząc wybrane ikonki w jeden obraz, dodając odrobinę kodu CSS możemy łatwo stworzyć przenośny zestaw CSS Sprites Microformats. Podstawowy zestaw ikon widać poniżej 4:

microformats_icons

Przykłady

Kilka przykładów najbardziej popularnych mikroformatów:

hCalendar 5

Jest to mikroformat kalendarzy, wydarzeń, spotkań. Jego główne elementy to: podsumowanie, data rozpoczęcia (oba wymagane), nazwa, lokalizacja, data zakończenia, status, geolokalizacja itd 5.

<div class="vevent" id="hcalendar-Zlot-programistów-PHP">
    <a class="url" href="http://planeta.php.pl">
        <abbr class="dtstart" title="2010-01-06T07:0000">6 stycznia 2010 o godzinie 7:00</abbr>, 
        <abbr class="dtend" title="2010-01-07T02:00"> godzina 2:00, 7 stycznia 2010</abbr> :  
        <span class="summary">Zlot programistów PHP</span> at 
        <span class="location">POLSKA</span></a> 
</div>

XFN 6

XFN oferuje 2 typy relacji linków: my sami, inni ludzie. Relacje z innymi są podzielone na 6 kategorii: friendship, physical, professional, geographical, family, romantic.

<a rel="me" href="http://blog.vokiel.com/css-sprites-laczenie-wielu-obrazkow-w-jeden-redukcja-zadan-http">Vokiel o CSS Sprites</a>  
<a href="http://anadoxin.org/blog/" rel="met friend">0xcafebabe per aspera ad astra</a>

VoteLinks 7

VoteLinks poprzez użycie atrybutu rev określa stosunek danej strony do linkowanej (w odróżnieniu od atrybutu rel, który określa stosunek strony linkowanej do danej).
Do wykorzystania mamy 3 opcje: vote-for, vote-against, vote-abstain , czyli: za, przeciw, neutralny (wstrzymanie się od oceny).

<p>Sprawdź stronę: <a href="http://nospor.pl" rev="vote-for">nospor.pl</a>!</p> 
<p>Natomiast ta strona jest beznadziejna</p>

Geo 8

Ciekawym mikroformatem, o którym nie wspomniałem wcześniej jest Geo (jest jeszcze w wersji roboczej). Jest bardzo prosty, posiada 2 właściwości: latitude oraz longitude. Jak sama nazwa wskazuje, służy do określania geolokalizacji.

<div class="geo">GEO: 
    <span class="latitude">37.386013</span>, 
    <span class="longitude">-122.082932</span>
</div>

Przy zastosowaniu znacznika <abbr> wartością będzie zawartość atrybutu tittle zamiast zawartości całego znacznika (patrz przykład wyżej). Dzięki temu, możemy wyświetlić dane lokalizacyjne bardziej czytelne dla człowieka.

<div class="geo">
    <abbr class="latitude" title="37.408183">N 37° 24.491</abbr> 
    <abbr class="longitude" title="-122.13855">W 122° 08.313</abbr>
</div>

Rel-license 9

Prosty mikrofromat, który informuje czytelnika, na jakiej licencji został udostępniony czytany przez niego tekst.

<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">Strona udostępniona na zasadach licencji CC by 2.0</a>

Rel-tag 10, rel-nofollow 11

Te formaty stają się ważne dla osób zainteresowanych pozycjonowaniem stron. Rel-tag odnosi do strony o danym tagu (popularny element serwisów łeb-dwa-zero). Rel-nofollow – informuje, że dany link prowadzi do strony, z którą nie chcemy mieć wiele wspólnego. W szczególności nie chcemy aby wyszukiwarki indeksowały dany link przeglądając źródła naszej strony. Z punktu widzenia pozycjonowania, taki link jest bez wartości, nie wzmacnia pozycji danego serwisu (nie wpływa na Page Rank)

<a href="http://blog.vokiel.com/kategoria/php" rel="tag">PHP</a>
<a href="http://www.google.com" rel="nofollow">Nie wzmacniaj pozycjonera</a>

Mikroformaty i wyszukiwarki

Dla wielu osób ważną informacją jest wpływ mikroformatów na wyszukiwarki i pozycje na listach wyników wyszukiwania. Dzięki mocnemu poparciu programistów mikroformaty są już czynnie stosowane przez duże firmy. Internetowi giganci jak Yahoo!, Google aktywnie uczestniczą w popularyzacji mikroformatów. Yahoo! udostępnia obiekty hCalendar i hCard w serwisie upcoming.org, obiekty hCard na Yahoo! Local, XFN oraz Geo na witrynie Flickr. Natomiast Google używa hCard w rezultatach wyszukiwania serwisu Mapy 12, dzięki czemu ułatwia zapamiętywanie adresów.

Wspomniane wyżej wyszukiwarki oferują już możliwość wyszukiwania treści utworzonej według standardów licencjonowania Creative Commons przy zastosowaniu mikroformatu rel-licence 13. Ponieważ coraz więcej treści publikuje się z użyciem mikroformatów, wyszukiwarki będą niejako zmuszone dokonać zmian w algorytmach wyszukiwania. Ciekawym udogodnieniem jest wyszukiwarka mikroformatów udostępniona przez Technorati, która daje możliwość wyszukiwania wydarzeń, informacji kontaktowych, recenzji.

Dodatkowe informacje

Microformats: More Meaning from Your Markup 14
Microformats – empowering your markup for Web 2.0 15
Sumo! A Generic Microformats Parser For JavaScript 16
Microformats 17
Microformats – cheat-sheet 18
Microformats-cheat-sheet (pdf, png) 19
Microformats.cheatsheet.pdf 20

Źródła

  1. http://microformats.org/ []
  2. http://microformats.org/wiki/Main_Page#Specifications []
  3. http://technorati.com []
  4. http://bartelme.at/journal/archive/microformats_icons [] []
  5. http://microformats.org/wiki/hcalendar [] []
  6. http://microformats.org/wiki/XFN []
  7. http://microformats.org/wiki/vote-links []
  8. http://microformats.org/wiki/geo []
  9. http://microformats.org/wiki/rel-license []
  10. http://microformats.org/wiki/rel-tag []
  11. http://microformats.org/wiki/rel-nofollow []
  12. http://googlemapsapi.blogspot.com/2007/06/microformats-in-google-maps.html []
  13. Aarron Walter – Witryny nie do ukrycia Helion, Gliwice 2009 []
  14. http://articles.sitepoint.com/article/microformats-meaning-markup []
  15. http://microformatique.com/book/ []
  16. http://www.danwebb.net/2007/2/9/sumo-a-generic-microformats-parser-for-javascript []
  17. http://carsonified.com/blog/category/dev/microformats-dev []
  18. http://microformats.org/wiki/cheat-sheet []
  19. http://www.addedbytes.com/cheat-sheets/microformats-cheat-sheet/ []
  20. http://suda.co.uk/projects/microformats/cheatsheet/microformats.cheatsheet.pdf []
 

Przeczytaj także

Komentarze: 7

Dodaj komentarz »

 
 
 

Dobrze mieć to pod rękom.
Poza tym myślę że warto zapoznać się z tematyką już teraz, ponieważ będzie miała duży wpływa na kształt technologii WEB 3.0

 

Reply

 

Treściwy opis ciekawej technologii. Dzięki! ;]

 

Reply

 

@WooDzu, miałeś na myśli: buzzwordu WEB 3.0 😉 A post świetny.

 

Reply

 

Ciekawy artykuł dzięki za dawkę wiedzy pzdr.

 

Reply

 

[…] Całkiem zgrabny techniczny opis microformats po polsku znajdziesz u innego speakera tegorocznego WordCampa Vokiela […]

 

Reply

 

Wszędzie tego szukałem. Wielkie dzięki za tak fajny opis.

 

Reply

 

Artykuł w prawdzie stary, ale akurat teraz jest mi potrzebny. Dobry opis, pomógł mi podjąć myślę prawidłową decyzję co do mikroformatów. Dzięki!

 

Reply

 

Dodaj komentarz

 
(nie będzie publikowany)
 
 
Komentarz
 
 

Dozwolone tagi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
© 2009 - 2016 Vokiel.com
WordPress Theme by Arcsin modified by Vokiel