Prezentace s funkci preview

Bc. Tomáš Vančura
xvancu05@stud.feec.vutbr.cz

Zadání

Společná část popisu:

Implementujte zvolené zadání v jazyce JavaScript tak, aby byl kód plně funkční nejméně v prohlížečích Internet Explorer 6, Mozilla Firefox a Opera. U zadání označených "prvek stránky" zajistěte, aby daný prvek mohl být vložen do libovolného HTML dokumentu a to případně i vícekrát nezávisle na sobě. Ve všech případech definujte vzhled všech zobrazovaných částí ve zvláštním externím stylovém předpise CSS opatřeném komentáři tak, aby uživatel mohl přizpůsobit vzhled řešení svým potřebám (zejména použité barvy, písmo, velikosti). Součástí odevzdání bude dále ukázkový HTML dokument "demo.html" demonstrující funkčnost implementovaného řešení a stručný návod k použití (pro programátora, nikoliv pro koncového uživatele) v souboru "navod.html".

Popis varianty:

Mějme HTML dokument obsahující libovolný počet snímků reprezentovaných blokovými elementy <div class="snimek"> s libovolným obsahem. Vytvořte skript, který umožní zobrazovat postupně jednotlivé snímky zvětšené přes celé okno prohlížeče se základními navigačními funkcemi (předchozí snímek, další snímek, první, poslední). Dále implementujte funkci "preview", která zobrazí náhledy všech snímků na jedné stránce. Uvažujte, že vzhled snímků je definován pomocí CSS s využitím pouze relativních délkových jednotek, což umožňuje měnit velikost snímků. Velikost písma a obrázků se musí přispůsobit velikosti snímku, v libovolném zvětšení okna prohlížeče i v preview je tedy vždy vidět celý obsah snímku. V režimu "preview" dále implementujte možnost změny pořadí snímků přetažením myší.

Implementace

Javascriptová aplikace je plně oddělena od HTML části. Tudiž lze HTML stránku využívat i bez přítomnosti javascriptu.

Začlenění aplikace do HTML stránky

Pro použiti javascriptové aplikace je potřeba do hlavičky přidat odkaz na javascriptový soubor a odkaz na CSS předpis určené pro aplikaci.

<head> ... <link rel="stylesheet" type="text/css" media="all" href="prezentace_styl.css"> <script type="text/javascript" src="prezentace.js"></script> ... </head>

Základní HTML kostra prezentace

Pro správné použití prezentace je potřeba dodržet základní HTML kostru, jež vypadá následovně.

<body> <div id="hlavicka">Nadpis prezentace</div> <div id="navigace"></div> <div id="prezentace"> <div class="snimek"> ... obsah prvního snímku ... </div> <div class="snimek"> ... obsah druhého snímku ... </div> ... </div> </body>

Možnosti úprav

Úprava pomocí CSS

Základní podobu prezentace lze definovat pomoci CSS přepisu v souboru "prezentace_styl.css".

#hlavicka - blokový element představující hlavičku prezentace
#navigace - blokový element představující navigační lištu
#prezentace - blokový element představující plátno prezentace
.snimek - blokový element představující snímek. CSS přepis platný pro všechny snímky.
.snimek_preview - blokový element představující zmenšený snímek v režimu preview.

Úprava ovládacích prvků v navigační liště

Ovládací prvky je možné změnit a to buď textově (jiné názvy, jazyková mutace), nebo graficky (grafická podoba tlačítek).
Změna se provádí v souboru "prezentace.js" hned na začátku souboru v části "nastavení".
Název proměnné představuje odpovídající činnost. Její hodnota pak představuje vizuální reprezentaci odkazu.
Hodnota proměnné může představovat text, nebo jakýkoli HTML přepis platný pro vnitřní obsah odkazu A. Příkladem většinou obrázek. Případná cesta k objektu musí být z pohledu HTML stránky nikoli z pohledu javascriptového souboru!

Ukázka:

// Textové hodnoty - názvy odkazů var nav_predchozi = "Předchozí"; var nav_nasledujici = "Následujicí"; var nav_prvni = "Začátek"; var nav_posledni = "Konec"; var nav_preview = "Zobraz nahled"; var nav_snimek = "snímek"; // Příklad obrázkového tlačítka var nav_predchozi = "<img src=\"img_back.gif\" alt=\"Předchozí snímek\">";

Ovládání

Prezentace se ovládá převážně pomoci myši kliknutím na požadovaný odkaz.

Navigační lišta

V navigační liště jsou uvedeny odkazy, kterými lze prezentaci navigovat. Jsou jím:

[Zobraz náhled] - přepne do zobrazení náhledu. Tedy zobrazí všechny snímky na celou obrazovku
[První snímek] - přejde na první snímek
[Předchozí snímek] - přejde na předchozí snímek (pokud je na prvním, tak u něj zůstává)
[Další snímek] - přejde na další snímek (pokud je poslední, tak u něj zůstává)
[Poslední snímek] - přejde na poslední snímek

Názvy odkazu je možné v javascriptovém souboru změnit. Viz část "Možnosti úprav - úprava ovládacích prvků".

Režim preview

- kliknutím na snímek se náhled ukončí a zobrazí označený snímek
- kliknutím a podržením myši nad snímkem se aktivuje režim nahrazení. Snímek se nahradí snímkem, nad kterým se upustí tlačítko myši.
- případné kliknutí odkazu v navigační liště nebo klávesou, se režim náhledu ukončí a zobrazí se předchozí/následující snímek v pořadí před preview.

Ovládání pomoci klávesnice

- klávesou mezerník se přejde na další snímek
- klávesou vpravo se přejde na další snímek
- klávesou vlevo se přejde na předchozí snímek
- klávesou home se přejde na první snímek
- klávesou end se přejde na poslední snímek

Ukázky velikosti písma v různých jednotkách

Základní text bez hodnoty

Text s velikosti 100%

Text s velikosti 1em

Text s velikosti 2ex

Text s velikosti 10pt

Text s velikosti 13px