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

Zdroják » Webdesign » Kódujme sémanticky s mikroformáty: úvod

Kódujme sémanticky s mikroformáty: úvod

Články Webdesign

Mikroformáty (anglicky microformats nebo µf) umožňují vkládat strojově čitelné informace přímo do (X)HTML kódu vašich webových stránek a aplikací. V dnešním úvodním článku do seriálu o používání mikroformátů si představíme, k čemu mikroformáty slouží a vyjmenujeme si hlavní z nich.

Dnešním článkem začíná několikadílný seriál zabývající se základy používání mikroformátů. Celý seriál je překladem anglického originálu, který na svém blogu A Blog Not Limited vydává webdesignerka Emily Lewis.

Jsem organizátorka s občas frustrující potřebou dávat pozor i na ty nejmenší detaily.

Je to vidět u mě doma. Moje sbírka 500 DVD je abecedně srovnána, stejně jako zbytky mé sbírky CD. Strávila jsem hodiny v iTunes přiřazováním žánrů ke skladbám (protože ty standardní pro mě prostě nejsou dost dobré) a vytvářením playlistů pro 10 000+ písní. Mé knihy jsou organizovány dle žánru. Moje šatní skříň a záchod vypadají pořád jako nové. To jsem prostě já.

Tato „vada“ mé osobnosti se také projevuje v mých webdesignérských pracích, které jsou validní, sémantické a (většinou) řádně okomentované. A je to také jeden z důvodů, proč miluji to, čím se živím.

Ruční kódování XHTML a CSS vyžaduje organizaci a plánování, zvláště pokud to chcete dělat pořádně. Navíc dodržování webových standardů vyžaduje dávat dobrý pozor na detaily, hlavně co se sémantiky týče.

To je důvod, proč jsem se zbláznila do mikroformátů.

Logo mikroformátů

Co jsou to mikroformáty?

Zkráceně, mikroformáty je souhrnné označení pro jednoduché, otevřené datové formáty, které jsou postaveny na existujících standardech pro kódování a značení informací. Designeři a vývojáři používají mikroformáty pro přidání struktury a významu textům na webových stránkách tím, že přidávají metadata a další atributy do existujících (X)HTML značek.

Jak vypadají?

Jednoduchý příklad mikroformátu (ačkoli jednoduché jsou vlastně všechny již svým návrhem) je rel atribut pro odkazy ( <a>):

<a href="http://www.ablognotlimited.com/" rel="home">A Blog Not Limited</a> 

Výše uvedený kód odkazu obsahuje rel="home", který ukazuje, že odkazovaná stránka je domovská stránka webu. To do odkazu přidává trošku více struktury a významu za pomoci již existujících značek a atributů.

Ale tento článek není kompletní vysvětlení, co jsou to mikroformáty. Pokud o nich potřebujete získat více informací, navštivte microformats.org nebo Wikipedii. (Pozn. překladatele: Pro více informací v českém jazyce můžete navštívit kupříkladu microformats.cz.)

Takže o čem je tento článek?

Od té doby co jsem začala vyvíjet A Blog Not Limited, jsem našla několik mikroformátů, které jsem chtěla použít ve svém kódu:

Chtěla jsem se s vámi podělit o příklady, jak jsem já osobně mikroformáty implementovala. Jenže jak jsem psala tento článek, uvědomila jsem si, že je mnohem delší, než jsem původně předpokládala. Ale nechtělo se mi nic vypustit.

Proto jsem se rozhodla rozdělit článek na několik dílů a udělat z něj seriál o tom, jak jsem implementovala mikroformáty na svém blogu. Tento úvodní článek slouží jen jako úvod do seriálu a základní představení mikroformátů.

Co očekávat?

Každý článek v seriálu Kódujme sémanticky s mikroformáty bude pokrývat nějaký mikroformát, který jsem se rozhodla použít na svém blogu. Součástí budou ukázky kódu, vysvětlení použitých značek a atributů a výhody plynoucí z používání daného mikroformátu.

Nemám naplánováno, kdy budou jednotlivé díly vycházet, ale doufám, že budu zvládat publikovat jeden každý týden. (Pozn. překladatele: Překlady na Zdrojáku budou vycházet pravidelně každou středu.)

Takže, co bude dál?

Další díl bude obsahovat podrobné informace o vztazích určených odkazy, včetně rel-home, rel-me, rel-tag a rel-licence.

Tento článek je překladem textu Getting Semantic With Microformats, Introduction, jehož autorkou je Emily Lewis.

Komentáře

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

Odkaz microformats.cz nefunguje :)

Martin Hassman

Adresa je správně, nejspíš to bude nějaký výpadek serveru.

shMoula

Nejprve jsem chtel podekovat za clanek z oblasti, ktera me zajima, ovsem po prvnich par radcich nadseni vyprchalo. Proc proboha prekladate cizi blogposty, to vazne nemate o cem psat, nebo si myslite, ze vyvojari nejsou schopni si sami prelozit text z anglictiny? Proc jste treba nezverejnili jenom zpravicku s odkazem na tyto stranky? Otazky, same otazky…a je mi jasne, ze odpoved bude ve stylu, ze nejsou lidi, reptat dovede kazdy…

Martin Hassman

Tak odpověď bude ve stylu jsou lidi 8-) A jsou lidi, kteří text v češtině před angličtinou uvítají (a je jich dost), proto budeme kromě vydávání vlastních článků zároveň překládat i články z cizích zdrojů.

Catch

Osobne jsem za celej tenhle web rad :-) A za preklady jeste radsi takze jen tak dal :-)

Martin Hassman

Děkujeme 8-)

Brbla

Dle mého skromného názoru je přidaná hodnota – v tomto případě snížená jazyková bariéra – dostatečně ospravedlňující. Anglické články jsem schopen přečíst, v řadě případů i pochopit, ale český jazyk je pro mne přeci jen přirozenější. Jsem za takovéto články rád a bude-li jich více, tím lépe (pro mne a jistě i další).

pixy

Jsem odborník, umím anglicky, dokonce pracuju s angličtinou prakticky celý den. A přesto – nebo právě proto – dám kdykoli přednost českému překladu. V angličtině se mi čte nepohodlně, čtu ji nerad a musím *velkou část* své kapacity věnovat na samotné porozumění textu a zbývá mi podstatně méně na přemýšlení o obsahu. Anglicky jsem se naučil poměrně dost pozdě a nemám ji tak pod kůží jako možná vy, zatímco v češtině čtu automaticky, bez přemýšlení. Jinými slovy – o tomto tématu bych si v angličtině nepřečetl buďto vůbec, nebo jen letmo a s krajním sebezapřením. Já jsem vděčný za každý překlad, za tento obzvlášť. Díky.

Anonymní

holt jsem ubit argumenty pro, asi jsem mel po ranu nejakou spatnou naladu, omlouvam se timto redakci :-)

MF

Rád bych věděl jednu věc, ohledně tzv. mikroformátů, na kterou jsem zatím nedostal odpověď. Pokud je ve stránce mikroformát, jak se vizuálně pozná, že tam je? Nějakým speciálním zobrazením? Pokud ano, jak se nechá nastavit, zda bude mikroformát formátován pomocí svého speciálního zobrazení nebo pomocí definice CSS?

Martin Hassman

Myslím, že hned další díl na většinu z toho odpoví.

Anonymní

ze stranky jako takove nepoznate nic, ale existuje mnozstvi doplnku pro prohlizec, ktere tyto struktury ve strance identifikuji a zobrazi tyto informace, pripadne nabidnou odpovidajici akce (kopirovani do kontaktu, kalendare, etc.)
kdyz vezmete v uvahu napr. rss, tak prohlizec pokud nema podporu pro detekovani tohoto kanalu, tak pokud neotevrete zdrojovy kod, nezjistite nic. osobne si myslim, ze je pouze otazkou casu, kdy bude tato podpora primo integrovana nejakym zpusobem primo v prohlizeci (mozna uz je v nekterych dneska, prosim o pripadne doplneni)

HudsonStan

Mikroformáty moc pěkné. Článek mě přivedl k vyzkoušení a hlavně aplikaci hCard a hCalendar do mého intranetového adresáře, ale vážně nevím jak donutit outlook nezmršit češtinu při importu vCard vytvořené z hCard na stránce s kódováním UTF-8 přes FF-Operator. Nesetkali jste se s tím už někdo? A hlavně neznáte někdo řešení? Je chyba v pluginu Operator nebo jak si myslím někde na straně M$?

Martin Hassman

Problém s češtinu při exportu o Outlooku mi už někdo hlásil. Tipuji na bug v Operatoru.

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.