Každý správný web designer a HTML kodér zná CSS pseudo třídu :visited, pomocí které můžete označit již navštívené odkazy.

V moderním web designu se ale často setkáváme s tím, že navštívené odkazy jsou záměrně sjednocovány, aby nebylo potřeba vymýšlet odlišný styl pro navštívené a nenavštívené položky.

A v neposlední řadě některé designy ani neumožňují efektivně určit, co už uživatel „navštívil“ a co ne (např. Facebook, Twitter, apod.) nebo je lze navštěvovat opakovaně (např. několikrát denně aktualizované články na iDnes nebo Novinkách).

Inspirováno článkem Revisiting :Visited.

Když :visited nefunguje…

V první řadě je problém v tom, že moderní prohlížeče neumožňují používat třídu :visited stejně jako ostatní (např. :first-child), kvůli tomu, že některé weby toho zneužívali. Často tak umožní jen změnit barvu textu a nějaké základní styly (text-decoration, background, apod.).

Použít třídu :visited v JavaScriptu již není možné vůbec (např. pomocí document.querySelectorAll(':visited'); ).

… pomůže JavaScript

Řešením je použití kód z výše uvedeného článku, který do localStorage (podporované většinou moderních prohlížečů) uloží adresu každé navštívené stránky a následně porovná odkazy, zda vedou na některou již uloženou adresu:

//http://joelcalifa.com/blog/revisiting-visited
localStorage.setItem('visited-'+window.location.pathname,true);

var links = document.getElementsByTagName('a');
for (i=0;i<links.length;i++) {
    var link = links[i];
    if (link.host == window.location.host
      && localStorage.getItem(
      'visited-' + link.pathname + '/')) {
        link.dataset.visited = true;
    }
}

Následně můžete v CSS použít styl pro označení navštívených odkazů:

a[data-visited] {
  /* upravený styl pro navštívené odkazy */
}

Formát URL

Samozřejmě tento kód je platný pro základní REST adresy používané v CMS systémech (Word-Press apod.) nebo frameworcích (Zend, Nette, apod.). Pokud máte jiný systém, bude potřeba upravit algoritmus tak, aby bral v úvahu daná specifika.

Pokud váš CMS používá GET parametry, bude potřeba upravit algoritmus, aby místo pathname používat query.

Je to stejné nebo jen podobné?

Také je potřeba rozlišovat, kdy je adresa skutečně unikátní a kdy jde jen o jinou verzi téhož:

• http://news.com/something-happened/
• http://news.com/something-happened/edit/
• http://news.com/something-happened/preview/
• http://news.com/something-happened/login/1/

Všechny tyto adresy pravděpodobně pocházení z nějakého CMS novinového serveru, kde adresa edit slouží pro úpravu článku – a zobrazovat uživateli (redaktorovi), zda již článek upravil nebo ne nedává moc smysl; naopak dává smysl označit jako přečtený článek, který redaktor sám napsal a naopak jako nepřečtený články jeho kolegů.

Adresa preview pravděpodobně slouží k náhledu a od originálu se může lišit pouze odkazy „upravit“ a „zveřejnit“. Opět tedy nedává smysl rozlišovat, zda uživatel vidět originál nebo náhled, protože obě stránky obsahují totéž (z hlediska obsahu).

Poslední odkaz pravděpodobně vznikl těsně po přihlášení (a hodnota „login/1“ pouze říká stránce, aby zobrazila text „Jste přihlášen“). Zde by mohlo dokonce dojít k chybě, kdy se uživatel přihlásí, přečte si článek z této adresy a následně přejde na domovskou stránku, kde bude tentýž článek označen jako nepřečtený, protože odkazuje na adresu bez parametru „login/1/„.

Pro výše uvedené odkazy tedy bude potřeba algoritmus upravit, aby byl schopen rozlišit podstatné části URL a zahodit parametry, které neovlivňují „navštívenost“ stránky.

Přečteno nebo ne?

Další problém, na který se často naráží je ten, jak poznat, zda uživatel stránku přečetl nebo ne. U třídy :visited je rozlišení jednoduché – pokud je stránka uložena v historii, znamená to, že již byla navštívena. To ale neznamená, že uživatel stránku viděl a četl.

Např. pokud stránku načetl, ale hned přešel jinam, nebo se vrátil zpět, nebo dokonce prohlížeč spadl (kvůli složité flashové reklamě), pro prohlížeč je tato stránka navštívená a tudíž přečtená.

Vy ale můžete svůj algoritmus upravit tak, aby např. počítal skrolování stránky a tak odhadl, jak daleko se uživatel ve čtení dostal, nebo měřit čas a odhadovat rychlost čtení (za 10 sekund se celý článek dá jen těžko přečíst – to si spíš jen prohlédl přiložený obrázek a pak odskroloval dolu na komentáře).

Ukládání na serveru

Opačná možnost označení přečtených článků je ukládat data na serveru do sessiony.

U této metody by mělo jít mnohem jednodušeji rozlišit odlišné a stejné stránky na základě použitého systému (např. MVC/MVP), protože každý Controller může použít jiný systém odlišení (např. controller Komentare označí jako přečtený odkaz do controlleru Clanek, protože předpokládá, že kdo čte komentáře již četl i článek).

Navíc ukládání na serveru by mělo urychlit renderování stránky, protože nebude potřeba čekat, až JavaScript projde odkazy a označí je jako přečtené.

Na druhou stranu ukládání na serveru přináší větší nároky na úložiště, protože si server musí pamatovat historii všech uživatelů.

Updaty

Moderní zpravodajské servery používají tzv. živé články, které se průběžné aktualizují – např. při sportovním zápase či volbách se průběžně mění výsledek nebo u katastrofy, hromadné dopravní nehody či teroristického útoku se postupně doplňují informace o situaci a o tom, co vše policie odmítá sdělit.

V tomto případě bude potřeba nějak rozlišit, jaký update uživatel viděl naposled. Samozřejmě snadné by bylo uvést do URL datum a čas poslední změny, ale to není příliš vhodné pro SEO a navíc by zbytečně zatěžovalo úložiště prohlížeče (obvyklých 5MB není zas tak moc, jak by se mohlo zdát).

Možné řešení by bylo do úložiště ukládat čas, kdy byl záznam pořízen a následně doplnit odkazy o údaj, jak starý je článek, na který odkazuje:

<a href="/clanky/sparta-vs-banik/"
   data-last-update="2015-02-28 15:37"
>

Skript pak snadno přečte čas změny a porovná, zda uživatel viděl tuto poslední verzi (a je tedy „přečtená“) nebo nějakou starší (a je potřeba článek znovu označit jako „nepřečtený“ – nebo ještě lépe jako „aktualizovaný“).

Synchronizace historie

Řada moderních prohlížečů (Firefox, Chrome, Safari) nabízí synchronizaci historie, takže pokud si článek přečtete v práci nebo v mobilu po cestě domů, po příchodu domů bude článek označen jako přečtený i v domácím PC.

Ukládání do lokálního úložiště samozřejmě toto neumožňuje, takže se může stát, že si uživatel bude číst stejný článek několikrát na různých zařízeních.

Tento problém se samozřejmě vyřeší, pokud nějak donutíte uživatele se přihlásit a následně můžete jeho návštěvnost vašeho webu synchronizovat přes svoji interní databázi. Jak k tomu ale uživatele přimět je úplně jiný problém – i když synchronizace přečtených článků může být jedním z argumentů, na které uživatel bude reagovat pozitivně (na rozdíl od možnosti, že mu budete moci posílat spam).