Mikroformati

Prihodnost spleta

Marko Mrdjenovič Vodja produkcije

Formati

• V katerem formatu imeti
  • email arhive?
  • slike?
  • vizitke?
  • koledar?
• Na katerem mediju?
• Kaj pa ko gre vse k vragu?
• Ali pa preprosto mine nekaj let?

Zakaj?

• Kako izbiramo formate?
• Zakaj je vse to sploh pomembno?
  • Ker nam pomaga pri razvijanju odprtih podatkovnih formatov
  • Ker hočemo sami upravljati s svojimi podatki
  • Ker hočemo, da jih razumejo tudi drugi

Zakaj?

• Zakaj bi sploh kdo podpiral odprte formate?
  • Ker so odprti
  • Ker jim lažje zaupamo
  • Ker jih uporabljajo drugi
  • Ker nočemo ponovno izumljati kolesa
  • Ker so kul

Kaj torej so mikroformati?

• Omogočajo objavljanje kakovostnejših podatkov na spletu
• Majhni koščki (X)HTMLja, ki omogočajo identifikacijo bogatejših tipov podatkov (vizitk, dogodkov, recenzij,...)

Kaj torej so mikroformati?

Zgodovina

• 90s
  • HTML
  • Netscape vs. IE
  • Rezultat: CSS, XML
• 2000-2001
  • CSS oživi
  • XHTML

XHTML - Nič več ...

• <font>
• <b>, <i>, <br>, <u>
• <a name="clanek"></a>
• <p class="naslov"></a>
• <table> za obliko

XHTML - Naučimo se ...

• <h1>, <p>, <em>, <strong>,...
• <address>, <cite>, <blockquote>,...
• <del>, <ins>,...
• <td axis="[tip podatka]" headers="[polja glave]">
• <div>, <span> kot zadnja možnost

Prednosti

• SEO
• Lepša koda
• Manjše datoteke
• Avtomatizem - blogi (rel="bookmark", XFN)

2004

• "lowercase semantic web"
• "microformats"
  • rel-license, VoteLinks
  • XOXO (eXtensible Open XHTML Outlines)
  • XFN
  • vCard/iCalendar RFC 1:1 v XHTML
• "Microformats principles"

2005

• rel="tag" za 'tage'
• rel="nofollow" proti link spamu (Google)
• hCard, hCalendar
• hReview
• XMDP
• microformats.org

Zakaj so nastali mikroformati?

• Omejeno število elementov
• Omejeno število "spojin"
• Nova / točna semantika
• Objavljanje novih tipov informacij
• Izogibanje nepotrebnemu dupliciranju vsebin

Zahteve

• Možnost oblikovanja (CSS)!
• Deluje v današnjih browserjih
• Prednosti brez stroškov
• Enostavna uporaba
• Uporaba z obstoječimi vsebinami

Reciklaža

• Zmanjšaj (Reduce)
  • reši specifično težavo, začni čimbolj enostavno
• Ponovno uporabi (Reuse)
  • najprej ljudje, nato računalniki
• Recikliraj (Recycle)
  • modularnost, decentraliziran in distribuiran razvoj

Katere elemente lahko uporabimo?

• class - imena, ki nekaj povedo
• meta - [ime,vsebina] pari
• rel - odnos med povezavo in virom
• rev - odnos med virom in povezavo
• profile

Pregled

XFN (XHTML Friends Network)

• Ljudje so tudi URLji
• Nove 'rel' vrednosti: met, friend, colleague, neighbor, sibling, crush, me, ...
• Primer:

  <a rel="met colleague friend"
     href="http://markos.gaivo.net/blog/">
     Marko Samastur
  </a>

• široko implementiran v nekaj tednih (WordPress ipd)

rel-licence

• Nova rel vrednost: "license"
• Primer:

  <a rel="license"
     href="http://.../licenses/by/2.0/">
     Some rights reserved. CC by-2.0.
  </a>

hCard & hCalendar

• RFC2426 (vCard) & RFC2445 (iCalendar)
• Sprejeta in implementirana standarda
  • Žal nista XML formata
• XML/RDF različica sicer obstaja
  • Ni enostavno vpeti v (X)HTML
  • Preveč omejitev - elementi, zaporedje,...
• Zakaj ne XHTML?

hCard

• Primer:

  <address class="vcard">
   <a class="url fn n"
      href="http://friedcellcollective.net/">
    <span class="given-name">Marko</span>
    <span class="family-name">Mrdjenovič</span>
   </a>
   <span class="title">Vodja produkcije</span>
   <a class="org"
    href="http://www.parsek.si">
     Parsek Interactive</a>
  </address>

hCard - uporaba

• hCard creator
• Yahoo! Local
• 40000+ Avon predstavnic
• Faveleti za kopiranje hCards
• Spletne konference (@media, SXSW, WE06,...)
• Več na microformats.org/wiki/hcard

hCalendar

• Primer:

  <ol class="vcalendar">
   <li class="vevent">
    <a class="url" href="http://kiberpipa.org/...">
     <abbr class="dtstart"
           title="20051012T1900++0100">
      19:00</abbr> -
     <abbr class="dtend"
           title="20051012T2000++0100">
      20:00</abbr> -
     <span class="summary">
      Spletne urice: Mikroformati</span>
    </a>
   </li>
  </ol>

hCalendar - uporaba

• hCalendar creator
• EVDB in Yahoojev Upcoming.org
• Yahoo! Local
• Faveleti za hCalendar
• Spletne konference (@media, SXSW, WE06,...)
• Več na microformats.org/wiki/hcalendar

Ostali miroformati ...

• rel-directory
• hReview
• hResume
• hAtom
• xFolk za "tagging"
• rel-payment
• geo & adr za naslove
• listings (for sale / want)
• media-metadata

Prihodnost

• Technorati Microformats Search
• Pingerati.net updates distributor
• Live Clipboard

Uporabljeno

• XHTML
• CSS
• S5 v1.1xoxo
• XOXO
• hCard
• hCalendar
• rel="license"
• Some rights reserved. CC by-2.0

Viri

• Microformats
• Tantek Çelik
• Ryan King
• GMPG
• #microformats

Hvala!

• "Those who ignore standards are doomed to reinvent them." Tantek Çelik/George Santayana

Vprašanja?