Průvodce tvorbou nápovědy – 12. díl

 

 

Vážení čtenáři,

 

dnes se podíváme na pokročilejší prvky světa HTML nápovědy. Uvidíte, jak pracují asociativní linky, dozvíte se, jak sestrojit rejstřík jiným způsobem a nakonec se podíváme i na to, jak opatřit stromovou strukturu témat nápovědy vlastními ikonami.

 

 

Obsah

Asociativní linkování

Jak pracuje asociativní linkování témat

Asociativní linkování témat – Krok 1: Vkládání A-klíčových slov do HTML souborů

Asociativní linkování témat – Krok 2: Použití ovládacího prvku HTML Help ActiveX

Tvorba rejstříku podruhé: Dynamický rejstřík

Tvorba dynamického rejstříku – Krok 1: Vkládání K-klíčových slov do HTML souborů

Tvorba dynamického rejstříku – Krok 2: Úprava vlastností projektového souboru nápovědy

Vlastní ikony v obsahové struktuře témat nápovědy (TOC)

Vlastní ikony v TOC – Krok 1: Tvorba souboru s ikonovým proužkem

Vlastní ikony v TOC – Krok 2: Začlenění souboru s ikonovým proužkem do projektu

Vlastní ikony v TOC – Krok 3: Nastavení vlastních ikon v TOC

 

 

Asociativní linkování

 

Pokud jste měli to potěšení pracovat s nápovědou typu Windows 95 (WinHelp 4.0), možná si vzpomenete na podivně vyhlížející makro ALink. Toto makro prohledávalo specifikovaná slova v celém systému nápovědy a poté nabízelo seznam témat nápovědy, která obsahovala zadaná slova v poznámce pod čarou, ve speciálním dialogovém okně. Prostřednictvím této techniky bylo poměrně snadné opatřit téma nápovědy tlačítkem nebo jiným citlivým místem, po aktivací kterého se automaticky vyhledaly další „příbuzná“ témata se souvisejícími informacemi. Popsaná technika se označuje jako asociativní linkování témat nápovědy. Když se přeneseme do prostředí HTML nápovědy, můžeme konstatovat, že i tady se uvedený algoritmus vyhledávání příbuzných témat nápovědy využívá. Implementační postup je zde sice poněkud odlišný, zdaleka však ne náročný a úsilí, jenž věnujete pochopení problematiky asociativního přepojování témat nápovědy se vám v budoucnosti zcela jistě vrátí i s pomyslnými úroky.

 

 

Jak pracuje asociativní linkování témat

 

Idea je docela jednoduchá: Je potřebné všechny HTML soubory opatřit vhodnými textovými identifikátory, aby je později mohl HTML Help engine najít a rozeznat. Proto do každého žádaného HTML souboru vkládáme určité klíčové slovo, případně specifická slovní spojení, která charakterizují daný soubor. Poté využijeme dovedností ovládacího prvku HTML Help ActiveX a zařadíme možnost dynamického prohledávání témat nápovědy. Jakmile vše úspěšně proběhne, vygenerujeme platný soubor HTML nápovědy a veškeré funkční starosti asociativního linkování témat přenecháme HTML Help enginu. Když pak uživatel klepne na tlačítko pro další, podrobnější informace, HTML Help engine se nastartuje, přebere vstupní parametr (klíčové slovo, případně slova, která se budou vyhledávat), a následně prohledá všechna dostupná témata nápovědy. Jestli se mu podaří najít alespoň jedno téma podle zadaných kriterií, zobrazí jej, nebo poskytne seznam všech nalezených témat. Dobrou zprávou je, že se prohledávají všechna „viditelná“ témata, to znamená například i všechna témata modulárního systému HTML nápovědy, na která odkazuje obsahová struktura nápovědy. Výhodnou vlastností klíčových slov pro A-linkování je jejich neviditelnost z pohledu koncového uživatele. Protože tato klíčová slova (říkejme jim A-klíčová slova) jsou vkládána do ryzího HTML kódu, nikdy nebudou přímo k dispozici uživateli. Konstrukci uvedené techniky linkování zobrazuje obr. 1.

 

 

Obr. 1 – Jak pracuje asociativní linkování témat nápovědy

 

 

V následujících sekcích probádáme, jak se asociativní propojování témat nápovědy využívá v praxi. 

 

 

Asociativní linkování témat nápovědy

Krok 1: Vkládání A-klíčových slov do HTML souborů

 

Prvním krokem je vložení odpovídajících klíčových slov přímo do HTML kódu příslušných souborů s tématy.

 

Pomocné soubory pro následující cvičení si můžete zkopírovat zde.

 

Postupujte následovně:

 

  1. Spusťte HTML Help Workshop a otevřete přiložený projektový soubor nápovědy (A-Link.HHP).
  2. Klepněte na záložku Contents a poklepejte na obsahovou položku s názvem „Téma2“. Když jste vše udělali správně, v pravé části okna programu by se měl objevit HTML kód aktivovaného tématu nápovědy.
  3. Umístěte kurzor mezi značky </BODY> a </HTML>.
  4. Vyberte nabídku Edit a položku Compiler information.
  5. V objevivším se dialogovém okně zvolte záložku ALink Names.
  6. Klepněte na tlačítko Add a v zobrazeném okně zadejte do textového pole A-klíčové slovo (v našem případě slovo „informace“). Situaci vizuálně popisuje obr. 2.

 

 

Obr. 2 – Proces vkládání A-klíčového slova do HTML souboru

 

  1. Klepněte na tlačítko OK, čímž zavřete okno Add ALink name a dále kliknutím na OK zavřete i okno Compiler information.

 

Všimněte si, že do HTML kódu se vložila značka <OBJECT> s příslušnými parametry.

 

<Object type="application/x-oleobject" classid="clsid:1e2a7bd0-dab9-11d0-b93a-00c04fc99f9e">

            <param name="ALink Name" value="informace">

</OBJECT>

 

Hodnota parametru Name nám říká, že jde o A-klíčové slovo a hodnota parametru Value toto klíčové slovo blíže specifikuje.

 

  1. Soubor uložte a uvedený postup aplikujte i na obsahovou položku s názvem „Téma3“.

 

 

Asociativní linkování témat nápovědy

Krok 2: Použití ovládacího prvku HTML Help ActiveX

 

Ve druhé etapě je zapotřebí vložit do HTML souboru instanci ovládacího prvku, který zajišťuje veškerou funkcionalitu asociativního propojení témat nápovědy. Připomínám, že instance tohoto prvku se vkládá do toho souboru, ve kterém chceme zpřístupnit tlačítko s názvem „Další informace“. Postupujte takto:

 

  1. Poklepejte na druhou obsahovou položku (Téma1), čímž zobrazíte její HTML kód.
  2. Nyní najděte v tomto kódu textový řetězec „Další informace“, který vyberte do bloku.
  3. Aktivujte nabídku Tags a klepněte na položku HTML Help Control, nebo klikněte na tlačítko  na liště nástrojů.
  4. Téměř okamžitě se objeví okno průvodce s titulkem HTML Help ActiveX Control Commands. V rozevíracím seznamu Specify the command vyberte položku ALink Search (viz obr. 3).

 

 

Obr. 3 – Průvodce vložením instance ovládacího prvku ActiveX: Krok 1

 

  1. Aktivujte tlačítko Další (Next) a druhé okno průvodce upravte do podoby znázorněné na obr. 4. Zde zvolíme vytvoření tlačítka (As a button), na které bude moci uživatel klepnout. První zatrhávací políčko, Display on a pop-up menu, zabezpečuje zobrazení seznamu nalezených témat v popup okně. Další zatrhávací políčko, Display dialog or menu even if only one title, zapíná volbu zobrazení dialogového okna nebo popup okna se seznamem nalezených témat i tehdy, když se najde jenom jedno téma.     

 

 

Obr. 4 – Průvodce vložením instance ovládacího prvku ActiveX: Krok 2

 

  1. Pokračujte na další okno průvodce. Zde určíme, že chceme, aby byl na tlačítku text (Display text on the button) a rovněž zatrhnutím volby Disable if jump is unavailable nařídíme, aby tlačítko nebylo přístupné v případě, že odkaz na téma nebude přístupný. Nakonec v textovém poli Text zadáme text, který se bude objevovat na vytvořeném tlačítku.  

 

 

Obr. 5 – Průvodce vložením instance ovládacího prvku ActiveX: Krok 3

 

  1. Dostáváme se již do čtvrtého kroku průvodce a je nutno dodat, že tento krok je také nejdůležitější, protože v něm specifikujeme, které A-klíčové slovo se má hledat. Aktivujte tedy tlačítko Add a v dialogovém okně Add/Edit ALink Name zadejte A-klíčové slovo, které se má vyhledat (v našem případě byl zadán textový řetězec „informace“).

 

 

Obr. 6 – Editace A-klíčového slova ve 4. kroku průvodce

 

  1. Klepněte na tlačítko OK a následujte pokyny průvodce až do závěreční fáze.

 

Když se podíváte do HTML kódu vašeho souboru, uvidíte v něm několik řádek, které za vás vytvořil průvodce. Měly by vypadat asi takto:

 

<OBJECT id=hhctrl type="application/x-oleobject"

        classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"

        codebase="hhctrl.ocx#Version=4,74,8875,0"

        width=100

        height=100

>

    <PARAM name="Command" value="ALink">

    <PARAM name="Button" value="Text:Další informace">

    <PARAM name="Flags" value=",,1">

    <PARAM name="Item1" value="">

    <PARAM name="Item2" value="informace">

</OBJECT>

 

  1. Uložte všechny soubory a rekompilujte soubor nápovědy. Proces praktického využití asociativního propojení témat můžete vidět na obr. 7.

 

Obr. 7 – Asociativní linkování v praxi

 

 

Tvorba rejstříku podruhé: Dynamický rejstřík

 

Možná si vzpomínáte, jak jsme v 9. dílu našeho seriálu společně vytvářeli rejstřík pro HTML nápovědu. Při tvorbě jsme používali vestavěný editor, jenž je součástí kompilačního programu HHW. Ve skutečnosti ovšem existuje ještě další způsob, jak lze rejstřík sestrojit. Ano, uhodli jste, jde o takzvaný dynamický rejstřík. Hlavní pointou tvorby dynamického rejstříku je právě jeho „dynamická“ povaha: Finální rejstřík je poskládán za pomoci kompilátoru z klíčových slov, která se nacházejí v jednotlivých HTML souborech. Analýzou můžeme proces tvorby dynamického rejstříku rozdělit do dvou etap:

 

  1. Nejprve do každého HTML souboru vložíme jisté klíčové slovo nebo slova (říkejme jim K-klíčová slova). Jsou to standardně textové řetězce, které se ve finální etapě objeví ve skutečném rejstříku.

 

  1. Dále řekneme programu HHW, aby se při kompilaci „podíval“ do každého HTML souboru a získal z něj K-klíčová slova, pokud jsou nějaká k dispozici. Ze získaných klíčových slov se pak sestaví skutečný rejstřík a bude vypadat na nerozeznání od toho, který jsme vytvořili v 9. dílu.

 

Uvedenou situaci demonstruje obr. 8.

 

 

Obr. 8 – Principy tvorby dynamického rejstříku

 

Možná se ptáte, k čemu je takovýto způsob tvorby rejstříku dobrý, když editace rejstříku pomocí editoru je určitě pohodlnější. Odpovědí je rozšířená funkčnost a manipulovatelnost. Pokud se totiž rozhodnete pro cestu vkládání K-klíčových slov do vašich HTML souborů, můžete počítat s těmito výhodami navíc:

 

  1. K-klíčová slova můžete použít podobným způsobem, jako A-klíčová slova. Řečeno jinými slovy, i s pomocí K-klíčových slov můžete prohledávat celý systém nápovědy a zobrazovat seznamy dalších příbuzných témat.

 

  1. Prohledávání systému nápovědy na základě K-klíčových slov je ideální volbou v situaci, kdy nevíte, jaké součásti systému nápovědy budou dostupné na počítači koncového uživatele (uplatnění zejména při použití modulárního systému HTML nápovědy). Jedním dechem ovšem třeba dodat, že stejného efektu můžete dosáhnout i použitím A-klíčových slov.

 

    

K-klíčová slova jsou v HTML nápovědě vždy viditelná, protože tvoří položky rejstříku, a tedy je uživatel může přímo prohlížet. Na druhé straně, A-klíčová slova nejsou pro koncového uživatele viditelná. Právě tato „viditelnost“ je hlavním rozlišovacím znakem mezi A a K-klíčovými slovy.

 

 

Tvorba dynamického rejstříku

Krok 1: Vkládání K-klíčových slov do HTML souborů

 

Pomocné soubory pro následující cvičení si můžete zkopírovat zde.

 

  1. Spusťte HTML Help Workshop a otevřete doprovodný projektový soubor nápovědy (Rejstrik.HHP).
  2. Klepněte na záložku Contents a poklepejte na druhou obsahovou položku (Téma1).
  3. Umístěte kurzor mezi značky <BODY> a </HTML>.
  4. Z nabídky Edit vyberte položku Compiler information.
  5. V dialogovém okně vyberte záložku Keywords a aktivujte tlačítko Add.
  6. Do textového pole zadejte K-klíčové slovo, jak zobrazuje obr. 9.

 

 

Obr. 9 – Vkládání K-klíčového slova do HTML souboru

 

  1. Změny uložte a kliknutím na tlačítko OK zavřete i okno Compiler information. 

 

Kompilační program následně vloží do HTML souboru tyto řádky:

 

<Object type="application/x-oleobject" classid="clsid:1e2a7bd0-dab9-11d0-b93a-00c04fc99f9e">

            <param name="Keyword" value="Téma1">

</OBJECT>

 

  1. Editovaný HTML soubor uložte a stejným způsobem upravte i další obsahovou položku s názvem „Téma2“, do které vložte K-klíčové slovo „Téma2“.

 

 

Tvorba dynamického rejstříku

Krok 2: Úprava vlastností projektového souboru nápovědy

 

Nyní musíme kompilátoru říct, aby pracoval s K-klíčovými slovy, které získá z příslušných HTML souborů. Udělejte proto následovní:

 

  1. Vyberte záložku Project, klikněte na tlačítko Change project options () a nakonec označte záložku Files.
  2. Zde zatrhněte volbu Include keywords from HTML files (viz obr. 10).

 

 

Obr. 10 – Začlenění K-klíčových slov do rejstříku

 

  1. Aktivujte tlačítko OK, uložte celý projekt a proveďte kompilaci souboru nápovědy.

 

Když spustíte soubor nápovědy, uvidíte, že se v rejstříku nacházejí i ta K-klíčová slova, která jste začlenili od HTML souborů.

 

I když chcete rejstřík vytvářet z K-klíčových slov, která se budou nacházet v HTML souborech, musíte vytvořit standardní rejstřík a jeho název sdělit kompilátoru nápovědy. Název rejstříku musí být uveden jak v okně Options na záložce Files, tak i v okně Window Types na záložce Files. Standardní rejstřík sice musíte vytvořit, no můžete ho nechat prázdný (zaplní se později K-klíčovými slovy). Jde bohužel o omezení programu, které ovšem musíme respektovat.

 

 

Vlastní ikony v obsahové struktuře témat nápovědy (TOC)

 

Autoři nápovědy zpravidla velmi rádi vylepšují a rozšiřují svá „díla“ všemožnými způsoby. A právě možnost změnit standardní ikony stromové struktury témat za své vlastní se ukazuje jako vysoce výhodná v procesu odlišení se od konkurence. Protože se mnoho čtenářů zajímá o tuto problematiku, ukážeme si na následujících řádcích, jak na to.

 

Jak pravděpodobně již velmi dobře víte, kompilátor vám nabízí 42 ikonových obrázků, které můžete ve stromové struktuře využít. Pokud se ovšem rozhodnete pro zařazení vlastních ikon, limit „42“ můžete docela snadno překročit. První, co si musíte při tvorbě nových ikon uvědomit, je skutečnost, že všechny ikony jsou uspořádány v tzv. ikonovém proužku. Tento ikonový proužek si můžete představit jako sekvenci filmových políček, ve které každé políčko představuje jeden obrázek. Druhou podstatnou věcí je, že tato filmová políčka mají stejnou výšku a šířku rovnou 16 pixelům. A konečně, třetí nezbytnou indicií je obrazový formát souboru filmových políček, který počítá se 16 barvami. Příklad ikonového proužku je na obr. 11.

 

 

Obr. 11 – Ilustrace ikonového proužku

 

I když můžete vytvořit ikonový proužek se zcela novými ikonami a ten poté začlenit do projektového souboru nápovědy, měli byste mít na paměti jistá doporučení, která se k této tematice vážou. Je všeobecně výhodné, když několik prvních políček přenecháte standardním ikonám a teprve za ně přidáte své vlastní obrázky. Dále pamatujte na to, že při kompilačním procesu se nezačleňuje obsah souboru s ikonovým proužkem do finálního souboru nápovědy. To tedy znamená, že společně se souborem nápovědy musíte distribuovat i soubor s ikonovým proužkem. Rovněž nezapomeňte, že vlastní ikony v TOC nemůžete použít, když při kompilaci máte aktivovanou volbu Create a binary TOC. Dobrá, to je na začátek vše, a teď si předveďme, jak postupovat v praxi.

 

 

Vlastní ikony v TOC

Krok 1: Tvorba souboru s ikonovým proužkem

 

Ikonový proužek můžete vytvořit v libovolném grafickém editoru. Abyste věděli, jak takový proužek vypadá, zkopírujte jej do složky, ve které se nachází váš projekt nápovědy.  

 

 

Vlastní ikony v TOC

Krok 2: Začlenění souboru s ikonovým proužkem do projektu

 

  1. Otevřete váš projektový soubor nápovědy a vyberte záložku Contents.
  2. Klepněte na tlačítko Contents properties () a na záložce General zrušte zatržení volby Use folders instead of books a naopak zatrhněte políčko Use custom images from a file.
  3. Pokračujte aktivací tlačítka Browse a vyhledejte přiložený soubor s ikonovým proužkem (Ikon_prouzek.BMP).
  4. Šířku obrázků v ikonovém proužku nastavte na hodnotu 16.

 

Po provedených změnách by měla sekce General vypadat takto:

 

Obr. 12 – Editace záložky General

 

  1. Uložte váš projektový soubor nápovědy a ukončete program HTML Help Workshop.

 

Možná jste překvapeni, proč je zapotřebí kompilační program zavírat. Jde bohužel o další omezení programu. Aby totižto kompilátor diagnostikoval nový soubor s ikonovým proužkem, je nutno zavřít program HHW, zvonu jej spustit a opětovně otevřít i váš projektový soubor.

 

 

Vlastní ikony v TOC

Krok 3: Nastavení vlastních ikon v TOC

 

  1. Opět spusťte program HHW a otevřete váš projektový soubor.
  2. Vyberte záložku Contents, označte obsahovou položku, kterou chcete editovat a klepněte na tlačítko Edit selection ().
  3. Zvolte záložku Advanced a v poli Image index vyberte obrázek, který chcete použít pro tuto obsahovou položku.  

 

 

Obr. 13 – Výběr ikony

 

  1. Klikněte na tlačítko OK a rekompilujte soubor nápovědy. Výsledek je zobrazený na obr. 14.

 

Obr. 14 – Uživatelské ikony v TOC

 

Věřím, že dnešní hodina „nápovědní výchovy“ se vám líbila.

 

Těším se na shledanou příště.

 

 Ján Hanák