Přejít k navigační liště

Zdroják » Webdesign » Mikroformáty: Tichá revoluce

Mikroformáty: Tichá revoluce

Články Webdesign

Co jsou to mikroformáty? K čemu slouží a proč je používat? Jak by mohly mikroformáty využít webové prohlížeče a jak vyhledávače? Na to se dnes pokusíme ve stručnosti odpovědět.

Google nedávno oznámil podporu mikroformátů ve vyhledávání, pojďme se s nimi tedy seznámit. Následující text je pouze úvodem do problematiky mikroformátů, vážnější zájemce odkážeme na náš podrobný seriál Kódujme sémanticky s mikroformáty.

Následující text je překladem anglického článku vydaného na Visitmix.com.

Představte si prohlížeč, který by uměl automaticky rozpoznat geografické souřadnice, adresy, lidi nebo události a zároveň nám je umožnil přidat do našich kontaktů a kalendářů. Tato vize se potichu a postupně stává realitou. Přijetím mikroformátů nezískáme jen praktické výhody z řadu konvencí vyvinutých pro značení běžných dat, ale pomůžete nastartovat vznik nové generace prohlížečů a inovaci vyhledávačů.

Web 2.0? To spíš Web 1.0

Mnozí očekávají konec Webu 2.0, jiní hlásají příchod Webu 3.0, ale pokud se podíváme na skutečnou uživatelskou zkušenost, změnilo se toho od roku 1995 opravdu tolik?

Navzdory rozmachu kaskádových stylů, AJAXu a RIA, dva klíčové aspekty se od dob Lycosu a Mosaicu nezměnily. (Pokud vám tato jména nic neříkají, zeptejte se svého dědečka a babičky!)

Pojďme se podívat, jak by se věci mohly změnit a jak mikroformáty mohou a také skutečně mění celý web a jak je můžete využít ve vašich projektech.

Prohlížeče 1.0

Co jste mohli v roce 1995 s takovým webovým prohlížečem dělat? Tak mohli jste navštívit webové stránky, vytisknout si je a uložit je do záložek prohlížeče. A to je asi tak všechno. A jak je tomu v roce 2009? Dnes můžeme navštívit webové stránky, vytisknout si je a uložit do záložek prohlížeče – a to je asi tak všechno. Role prohlížečů a uživatelská zkušenost je prakticky stejná.

Pokud nevěříte, podívejte se na screenshot prvního široce rozšířeného webového prohlížeče Mosaic:

Webový prohlížeč Mosaic

A zde je jeho prapravnouče Firefox:

Webový prohlížeč Firefox

Pokud vynecháme vyhledávací pole, je to více méně stále Mosaic.

Vyhledávání 1.0

Tím druhým klíčovým aspektem naší zkušenosti s webem – tím, který každý uživatel webu absolvuje několikrát denně, je vyhledávání.

Ano od roku 1995 několik společností, naposledy Google, ovládlo vyhledávání, ale zkušenost z vyhledávání je více méně stejná jako zkušenost z roku 1995. A sice:

  1. Navštívíme stránku vyhledávače…
  2. Zvolíme několik vyhledávacích slov podle toho, jaké stráky chceme najít…
  3. Vyhledávač vrátí seznam webů, které vyhovují našemu zadání…
  4. Vybereme si jeden z odkazů a klikneme na něj…
  5. Navštívíme danou stránku.

Můžete namítat, jelikož nám prohlížeče a vyhledávače za posledních deset let dobře sloužily, není důvod je měnit – „pokud nejsou rozbité, tak je neopravuj“.

Jenže jak prohlížeče, tak vyhledávače mohou nabídnout uživatelům mnohem víc funkcionality.

Co kdyby prohlížeče na navštívené stránce automaticky rozpoznaly geografické souřadnice, adresy, orientační body apod. a dovolily nám je namapovat do Google Maps, Virtual Earth nebo jiné podobné aplikace? Co kdyby prohlížeče dokázaly automaticky rozpoznat osoby a nabídly nám jejich přidání do adresáře kontaktů? Anebo události, které by nám umožnily zařadit je do našeho webového nebo desktopového kalendáře?

A podobně, co kdyby vyhledávač při hledání informací o filmu nebo restauraci vrátil jejich průměrné hodnocení, které by zprůměroval z recenzí na celém webu, bez ohledu na to, zda byly publikovány na magazínu, blogu, diskuzním fóru nebo jiném typu média? Co kdyby se výsledky hledání obsahující informace o geografické poloze zobrazily na mapě nebo výsledky obsahující časové informace se zobrazily ve formě kalendáře?

Vyhledávače mohou uživatelům nabídnout i jiné akce, než jen navštívení nalezené stránky – mohou, podobně jako prohlížeče v našich příkladech výše, nabídnout přidání událostí do našich kalendářů, kontaktů do našich adresářů s kontakty – a to vše bez nutnosti navštívit cílovou stránku.

Na vyhledávačích nalezneme omezené náznaky těchto funkcí, ale celkově se stále jedná o „Vyhledávání 1.0“.

Proč tomu tak je?

Proč jsou ale prohlížeče a vyhledávače tak málo inovativní? Hlavně proto, že se jedná o věci, které se snáz řeknou, než provedou. Software není až tak příliš dobrý ve zpracování přirozeného jazyka (Natural Language Processing – NLP). Podívejte se, jak je nakódována většina webů, neoznačujeme adresy, geografické souřadnice, recenze ani události specifickým kódem v HTML, který by pomohl programům snáz extrahovat informace obsažené ve stránkách. Ale pokud bychom měli způsob, jak tyto informace označovat, pak by prohlížeče i vyhledávače mohly tyto informace snadno získat a nabídnout nám funkce, které jsme popsali výše.

Nyní již možná tušíte, jaká je role mikroformátů – nabídnout způsob, jakým můžeme značkovat stránky tak, aby běžné typy informací mohly být aplikacemi snáze rozpoznány.

Na řadu přichází mikroformáty

Nyní tušíte, k čemu mikroformáty asi tak slouží. Další otázkou je, jak fungují? Dobrou zprávou je, že pokud jste rozumně zkušený webový vývojář znalý základů značkovacího jazyka jako je atribut class nebo značka abbr, pak se toho nemusíte tolik učit. I když máte jen základní znalosti HTML, pořád toho můžete hodně udělat. Podívejme se na příklad.

Řekněme, že máme na webu následující adresu:

<p>1164 Morning Glory Circle</p>

<p>Westport</p>
<p>Connecticut</p>
<p>06880</p>
<p>USA</p> 

Pojďme nyní použít jeden z hodně známých mikroformátů – ADR pro její vyznačení. Detaily ADR probereme později.

Nejprve označíme, že daný kus textu obsahuje adresu. Obalíme ji proto prvkem div:

<div>
<p>1164 Morning Glory Circle</p>
<p>Westport</p>
<p>Connecticut</p>
<p>06880</p>

<p>USA</p>
</div> 

Nyní přidáme trochu mikroformátového prachu – tj. třídu adr:

<div class="adr">
<p>1164 Morning Glory Circle</p>
<p>Westport</p>

<p>Connecticut</p>
<p>06880</p>
<p>USA</p>
</div> 

Tato technika (použití atributu class pro popis obsahu prvku) je jedním z klíčových principů mikroformátů a budete ji často používat, kdykoliv budete s mikroformáty pracovat.

Podobným způsobem označíme i komponenty adresy.

Označíme ulici…

<p class="street-address">1164 Morning Glory Circle</p> 

… kraj

<p class="locality">Westport</p> 

… region

<p class="region">Connecticut</p> 

… poštovní směrovací číslo

<p class="postal-code">06880</p> 

… a zemi.

<p class="country-name">USA</p> 

Ve výsledku dostaneme:

<div class="adr">
  <p class="street-address">1164 Morning Glory Circle</p>
  <p class="locality">Westport</p>

  <p class="region">Connecticut</p>
  <p class="postal-code">06880</p>
  <p class="country-name">USA</p>
</div> 

Nyní se určitě ptáte, odkud jsme vzali názvy ‚region‘ nebo ‚postal-code‘? Stučně řečeno mikroformáty se snaží o maximální využití stávajících standardů, místo toho, aby vymýšlely své vlastní. To pomáhá ke snazší výměně dat a využije energii vloženou do přípravy původních standardů.

Mikroformát ADR je podmnožinou mikroformátu hCard, což je mikroformát obsahující kontaktní informace, který je postaven na vCard, což je formát více či méně univerzální pro aplikace poskytující adresáře kontaktů. Názvy jako ‚region‘ a ‚country-name‘ pochází právě z vCard.

Všechny mikroformáty fungují více či méně stejně jako příklad výše – využívají existujících vlastností HTML, jako je třeba atribut class, způsobem, který vyhovuje standardu HTML.

Používáte mikroformáty?

Mikroformáty ve skutečném světě

Dobře, ale i když není práce mikroformáty implementovat, je tu nějaký praktický přínos? Myslím, že existuje několik důvodů, proč byste měli zvážit použití mikroformátů.

První – vaše stránky musíte stejně nejak vyznačit. Volbou existujících formátů jako je ADR nemusíte vytvářet vlastní značkovací konvence, váš kód bude snáze udržovatelný a čitelný už jen proto, že se budete držet dohodnutých konvencí. Pokud bude každý zápis adresy na vašem webu vyznačen stejným způsobem, je snazší upravit jejich vzhled pomocí kaskádových stylů.

A kromě tohoto praktického důvodu je tu i další – stanete se součásti tiché revoluce prohlížečů a vyhledávačů, která je již na cestě.

Příklady toho, co prohlížeče s daty dokáží, nejsou jen čiré koncepty – existují jejich implementace v dnešních prohlížečích.

Existuje rozšíření pro Internet Explorer, které rozpozná mikroformáty (kontakty, události, geografické souřadnice) a zobrazí je uživateli. Takhle kupříkladu vypadá moje stránka s obsahem mých přednášek, vidíte kontaktní informace pomocí mikroformátu hCard a polohu pomocí mikroformátu GEO.

Rozšíření pro Internet Explorer

Rozšíření podporuje několik online i offline kalendářů a adresářů kontaktů. Polohu si můžete zobrazit na mapě:

Microformáty na Live Maps v Internet Exploreru

Rozšíření existuje i ve formě javascriptové knihovny, kterou můžete přidat na vaši stránku, a vaši návštěvníci se tak k informacím v mikroformátech dostanou bez ohledu na prohlížeč, který používají.

Existuje také rozšíření pro Firefox, které nabízí sadu akcí, jež můžete na stránkách s mikroformáty provádět. Toto rozšíření se nazývá Operator a vytvořil je Michael Kaply.

Operator pro Firefox

Na poli vyhledávačů najdeme Yahoo! SearchMonkey, které indexuje mikroformáty a nabízí vývojářům API, pomocí kterého na nich můžou vystavět své aplikace.

Adopcí mikroformátů nezískáte jen praktické výhody, ale stanete se i součástí inovace prohlížečů a vyhledávačů.

Tento článek je překladem textu Microformats: The Quiet Revolution, který napsal John Allsopp a je zde zveřejněn s laskavým souhlasem autora.

Komentáře

Subscribe
Upozornit na
guest
13 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Mira

Dekuji za zajimavy clanek.

Az budou mikroformaty siroce podporovany prohlizeci, mohou byt prinosne. Na
druhou stranu urcite take usnadnuji praci ruznym robotum, ktere sbiraji
e-mailove adresy a podobne udaje.

tomas.fejfar

Pokud máš tu adresu nějak rozumně skrytou, tak jí robot nepřečte
i když ví, že to je email :) (mě se osvědčuje skrývání přes kódy
znaků), případně to vygenerovat do obrázku (viz facebook)

toka

Přesně tak, také si myslím, že kdyby se obalila e-mailová adresa do tagu
např.

<div class=„e-mail“>adresa@do­mena.cz</div>

, tak to může sice robotovi pomoci, ale pokud bude obsah toho DIVu ochráněn,
zaklíčován, či nějak jinak znehodnocen, stejně jako dnes, tedy robot
řetězec nevyhodnotí jako adresu, bude to ignorovat.

makovec

Otázka je když to tak nevyhodnotí robot, jestli to tak vyhodnotí/bude
schopen zpracovat browser nebo jiný program pro který je označení toho
kousku dat mikroformátem určeno…

v6ak

Jenže robot se pak může soustředit víc na rozpoznávání obrázků
v div.e-mail. Takže nastejno to není.

Ẍṹṝḟḁ

A co teprve telefonní čísla, co?

Noby

To je pravda. Ale boj se spamem nemá smysl bojovat skrýváním e-mailů.
Stačí jediný člověk, který bude mít Vaši adresu v kontaktech a
trojského koně v systému a máte po snaze. Boj se spamem se vede na frontě
antispamových filtrů v e-mailových klientech. Jinak je to jen směšně
marná snaha a hlavně komplikace pro lidi, kteří si často nemůžou na váš
mail jednoduže kliknout.

Valda

Hola, tesim se… MicroformatsWiki uz kdosi prelouskal i do cestiny :-)
Trebas mikroformat na oteviraci dobu kamenneho obchodu, bazenu, planetaria…
v kombinaci s pozici… Vyhledavac nam bude schopen vratit odpoved na
nejblizsi bazen a jestli ma otevreno, pripadne mi nabidne oteviraci dobu ulozit
rovnou do bodiku v me mape… :-)

x5

Nevíte někdo, kde se bych našel seznam atributů class, které
používají mikroformáty? Protože ty názvy jsou voleny dost nešikovně, tak
aby se náhodou nestalo, že se při pojmenovávání tříd trefím do
nějakého mikroformátího…

hawran.diskuse

Nejdřív si lidé v dobé víře dávali do html stránek všemožné
údaje, např e-mail, aby pak zjistili, že někdo vymyslí roboty, kteří
prolézají stránky a zrovna tyto informace z těch stránek dolují, třeba
aby spammeři měli dost adresátů.

Tak se začaly tyto údaje všelijak „mršit“, aby se zmenšila jejich
„strojová čitelnost“.

A teď se to bude dávat rovnou do tagů.

CO mi uniklo?

mekele

Mno.. da se rict ze vsechno :)

Gaud

Viz http://www.srs.cz, kde to funguje.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.