rarouš.weblog

Včera jsme se podívali na mikroformáty v Texy! Dnes si představíme novinku, kterou přináší Internet Explorer ve verzi 8. Tou novinkou jsou WebSlices – webové výřezy.

Praktické využítí

Výřezy umožňují, aby uživatel mohl sledovat změny části webové stránky. Podobně jako u RSS nebo Atom jde o syndikaci obsahu malé části webové stránky. Prakticky to může vypadat třeba následovně.

U svých článků často přidávám odkazy na související články. Jenže je všechny nezadám při publikaci článku, ale spíš postupně přidávám a třeba když narazím na nějaký pěkný článek k tématu, tak ho přidám. Jenže to už spousta lidí má dočteno a třeba se už nevrátí, nedozví se, že přibyly zajímavé odkazy na dané téma. S WebSlice, můžu označit tento kousek článku k odběru a pokud má čitatel zájem, přidá si ho. Potom když přidám nějaký zajímavý odkaz, čtenář o tom bude vědět.

Jiný příklad, který mě napadá. Stránky nějakého hudebního festivalu obsahují informace o ceně a množství volných vstupenek. Tyto informace se v čase mění – čím je fesťák blíž, tím cena roste a počet vstupenek klesá. Na takovou informaci je celkem zbytečné vytvářet RSS feed. Stačí ji prostě označit jako výřez. Já třeba ještě nejsem rozhodnutý, jestli půjdu, nebo chci vědět, kolik aktuálně vstupenka stojí a kolik jich zbývá, aby se mnou mohli jít i kamarádi. Tak se přihlásím k odběru takové informace.

Uplatnění vidím i jinde.

Technické zpracování

Výřezy jsou části stránky označené třídou hslice a nějakým id a obsahující elementy s třídou entry-title a entry-content z mikroformátu hAtom. Živý příklad ze včerejšího článku je lepší než tisíc slov:

/--div .[#related hslice]
== Související .[entry-title]
.[entry-content]
* [clanek(282)]
* [clanek(267)]
* [clanek(256)]
* [microformats-cz]
\--div

Když uživatel najede nad tento kus článku, objeví se tlačítko pro subskripci:

Po jeho odsouhlasení se stránka přidá do oblíbených a do feedů. Po rozkliknutí se objeví náhledové okno s aktuálním výřezem:

Další možnosti

U výřezů funguje automatické nalezení podobně jako u RSS a Atom feedů, vlastně jsou ve stejné nabídce, ale jsou odlišeny fialovou ikonkou výřezu. Automaticky se vybere první nalezený výřez. Pokud ale chcete nabídnout k přihlášení jako první jiný výřez, lze to ovlivnit vložením meta tagu do hlavičky:

<link rel="default-slice" type="application/x-hatom" href="#related" />

Mění se pouze obsah atributu href v němž je cesta k výřezu. Jak jsem již říkal, ten musí být označen atributem id tudíž je přes jeho hodnotu odkazovatelný.

Dále je možné omezit platnost výřezu pomocí date-patternu s třídou endtime nebo periodu aktualizace za pomocí třídy ttl:

<p>Úryvek se aktualizuje jednou za <span class="ttl">60</span> minut.</p>

Lze i definovat vzhled výřezu a pracovat s nimi na úrovni JS API, ale to už je mimo rámec tohoto článku.

Formát hAtom

Jak jsem již psal výše, výřezy jsou z části postavené na mikroformátu hAtom. Ten slouží k definování něčeho jako Atom feed ve stránce. Dají se jím celkem trefně popsat blogové zápisky, protože obsahuje téměř všechny třídy, které se můžou k popisu blogového zápisku hodit. Proto když budete dělat novou šablonu pro svůj blog, zkuste se u tohoto mikroformátu inspirovat.

Tagy: Microformats, WebSlice, IE8

Minulý týden jsme si prodiskutovali pár mýtů na téma HTML vs. XHTML. Zjistili jsme, že v HTML 4 jsou hodnoty atributů id a class citlivé na velikost písmen (přinejmenším v CSS a JavaScriptu). Shodli jsme se na tom, že DTD je přežitek, a že za spoustou mýtů stojí prasata, která jsou podvědomě spojována s HTML.

Dneska si povíme o jedné věci, která nám možná přidá na hodnotě XHTML a tou jsou mikroformáty.

Mikroformáty

Mikroformáty jsou sémanticky obohacené části XHTML kódu. Ačkoli se pro jejich definovaná využívá atributů (class, rel, rev…), které jsou samozřejmě definovány v HTML, k získávání jejich cenných dat se obecně využívá XML parserů. Proto je lepší mít stránky v dobře sestaveném XHTML, než v plně validním HTML – samozřejmě pokud chcete mikroformáty využívat. Ale proč by ne.

Uživáme v praxi

Když se podíváte do pravého sloupce (možná je až dole), na první pohled tam nenajdete nic zajímavého, vlastně kecám. Hned nahoře jsou moje kontaktní údaje, k jejich definici jsem použil mikroformátu hCard, který slouží k popisu vizitkových dat a je kompatibilní se standardním formátem vCard.

O kousek niž je další box s titulem Kolegové a kamarádi, není to nic jiného než blogroll s odkazy na mé kolegy, kamarády a další dobré lidi :). Při jeho tvorbě jsem použil špetku mikroformátu zvaného XFN. Tento slouží k definici meziblogových vztahů.

Mezi těmito boxy je jiný, tako co žádný mikroformát nepoužívá, ale informuje o tom, že stále hledám nějakého šikovného kolegu, co umí dobře C# a chtěl by se mnou spolupracovat na Atlasu firem a s ním spojených interních systémech. Práce je to opravdu zajímavá, rozšíříš si obzory a navíc možnost pracovat s tak milými a sympatickými lidmi…

S čím na ně?

Jo k praktickému využití mikroformátů ještě schází podpora v prohlížečích. Do odnoží firefoxu se dá doinstalovat nástroj Operator, který je určitě dobrým pomocníkem při vývoji a je propojen na některé služby, které s MF umí pracovat. Nativní podpora pro mikroformáty je slibována ve Firefoxu 3 a Internet Exploreru 8 (znamená to, že bude konečně umět XHTML?). Dále se po internetu válej nějaký skripty, které slouží k transformaci na jiné formáty, CSSka pro zvýrazňování mikroformátů ve stránce a tak.

Tagy: Microformats, XHTML