O webu
Tutoriál na webu

Při navrhování/upravování uživatelského rozhraní webové aplikace stojíme před dilematem, jak vytvořit rozhraní, které je zároveň:

  1. intuitivní na pochopení už při první návštěvě,
  2. přehledné a jednoduché při rutinním používání

Zatímco v prvním případě jsou užitečné všelijaké popisky a vysvětlivky, ve druhém je to nadbytečný balast, protože uživatel už jen kliká po paměti.

Příkladem může být tlačítko Start z OS Windows, u kterého šlo bez obav vypustit textový popisek, protože už každý věděl, co daná ikona znamená.

Srovnání Start menu z Windows 95 a Windows 7

Jako řešení se nabízí (kromě vytváření dvou versí) jakýsi tutoriál, který projde v několika krocích jednotlivé části aplikace a podrobněji je vysvětlí.

nebo zobrazit na GitHubu (samostatná živá ukázka)

Použití

Po připojení potřebného JS a CSS, se vybrané elementy „k vysvětlení“ přidají do tutoriálu pomocí vlastního atributu data-tutorial.

Obsah nápovědy se vkládá jako innerHTML, tudíž atribut data-tutorial může obsahovat i HTML kód.

<div class="element" data-tutorial-step="1" data-tutorial="<b>Tučný</b> popisek">

Druhý atribut data-tutorial-step určuje pořadí jednotlivých kroků.

Potom stačí zavolat funkci tutorial. Buď třeba po kliknutí (onclick="tutorial()") nebo ihned po načtení stránky:

<script>
  tutorial();
</script>

Alternativní použití

Někdy není moc vhodné zanášet HTML kód data atributy, ale bylo by vhodnější tutoriál nadeklarovat jednotně.

createTutorial({
    "Popis prvního kroku" : document.getElementsByTagName("div")[0],
    "Popis druhého kroku" : document.getElementsByTagName("div")[3],
  });

Zavoláním tohoto kódu před tutorial() první a druhý <div> na stránce utvoří jednotlivé kroky celého tutoriálu. Oba postupy není momentálně možné kombinovat.

Ukázka.

Jak to funguje?

Průhledné pozadí přes celou stránku

Po vyvolání nápovědy se vytvoří průhledný element s černým pozadím, který zakryje celou stránku. Opticky ji tedy ztmaví. (Od IE 9 by šla použít průhledná barva).

Způsobů, jak takový element vytvořit, existuje několik:

  1. Absolutní posice, 100% výška a šířka a relativní posice pro <body>. Ukázka.

  2. V případě, že se jako obal stránky používá přímo <body>, je problém se absolutním posicováním dostat mimo. Může pomoci fixní posice. Ukázka.

  3. Změřit velikost stránky JavaScriptem. Je v tom trochu nejednotnosti napříč prohlížeči, ale jako funkční se zdá být následující kód:

    function pageSize() {
      return {
        width: (document.body.scrollWidth > document.documentElement.scrollWidth) ? document.body.scrollWidth : document.documentElement.scrollWidth,
        height: (document.body.scrollHeight > document.documentElement.scrollHeight) ? document.body.scrollHeight : document.documentElement.scrollHeight,
      }
    }

Zvýraznění elementu

Zvýraznění konkrétní části stránky je vytvořené změnou z-indexu (nastaví se vyšší než pro překryvnou vrstvu). K tomu je nutná jiná hodnota position než static. Proto pokud je static, přepne se na relativní. (Může to teoreticky dělat problémy, kdyby element měl ponechané vlastnosti jako left a top, které by se změnou position projevily.)

Další vlastnost tohoto způsobu zvýraznění je ta, že se moc neprojeví u elementu, co nemá nastavené pozadí. Může být proto vhodné nastavit universální barvu pro zvýrazněný element (má třídu tutorial-highlight).

Zobrazení nápovědy

Popisek k jednotlivým krokům je absolutně posicovaný <div>. Jeho umístění je trochu inteligentní:

  • Kontroluje se místo vlevo a vpravo vedle zvýrazněného boxu a podle toho se box s popiskem umístí.
  • Zároveň je lehce nad popisek odrolováno v případě, že by měl být mimo viewport.

Šipky jsou nakresleny v CSS.

„Zavření“ tutoriálu

Ukončit nápovědu je možné třemi způsoby.

  1. Kliknout na zavírací křížek.
  2. Kliknout mimo nápovědu a zvýrazněný element.
  3. Projít celou nápovědu — v posledním kroku je místo tlačítka „Další“ volba „Ukončit“.

Krokování

Krok se ukládá do proměnné step. To má tu výhodu, že po zavření tutoriálu je možné opět navázat v téže kroku nebo rovnou spustit až N-tý krok.

step = 3;
tutorial();

Změna velikosti okna

Skript při window.resize přepočítává umístění popisku a zda je ve viewportu.

Odkazy jinam