Klávesové zkratky na tomto webu - rozšířené Na obsah stránky

Připravte se na výřezy

| Webdesign

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:

zvýrazněný výřez stránky

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:

náhled výřezu stránky

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: , ,

Našli jste v článku chybu? Máte námět na reportáž? Založte mi ticket.