TNPW1TNPW1Technologie pro publikování na webuTechnologie pro publikování na webu

Cvičení č. 10Cvičení č. 10

Plovoucí fotogalerie, Plovoucí fotogalerie,

position:fixed,position:fixed,

použitelnost webupoužitelnost webuMartin Adámek

TNPW1, cvičení – Ing. Martin Adámek TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)(UHK-FIM-KIT)

22

Plovoucí fotogaleriePlovoucí fotogalerieBez popisků – sama bez práceBez popisků – sama bez práce– pro pouhé <img /> bez viditelných (vnějších) popiskůpro pouhé <img /> bez viditelných (vnějších) popisků– XHTML kód: <img ... /> <img ... /> <img ... /> <img ... /> XHTML kód: <img ... /> <img ... /> <img ... /> <img ... />

<img ... /> <img ... /><img ... /> <img ... />– obrázky se nařádkují samyobrázky se nařádkují samy– vkládání elementů <br /> po každém čtvrtém obrázku je vkládání elementů <br /> po každém čtvrtém obrázku je

zbytečné a kontraproduktivnízbytečné a kontraproduktivníomezení šířky lze dosáhnout v CSS pomocí max-width pro div, ve omezení šířky lze dosáhnout v CSS pomocí max-width pro div, ve kterém jsou img vloženy (kromě MS IE)kterém jsou img vloženy (kromě MS IE)

– v příp. problémů lze v CSS vyzkoušet display (inline, v příp. problémů lze v CSS vyzkoušet display (inline, inline-block)inline-block)

– příklad (částečně) :příklad (částečně) :http://www.adamek.cz/kolo/rumunsko/prijezd.htmhttp://www.adamek.cz/kolo/rumunsko/prijezd.htm

TNPW1, cvičení – Ing. Martin Adámek TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)(UHK-FIM-KIT)

33

Plovoucí fotogaleriePlovoucí fotogalerieS popisky – pomocí obtékáníS popisky – pomocí obtékání– pro použití viditelných (vnějších) popisků pod pro použití viditelných (vnějších) popisků pod

obrázky nebo nad obrázkyobrázky nebo nad obrázky– XHTML kód: XHTML kód:

<div class...><a...><img ... /> <br />Popisek pod <div class...><a...><img ... /> <br />Popisek pod fotkou</a></div>fotkou</a></div>

– každý div má v CSS float: leftkaždý div má v CSS float: left– celé obaleno dalším div, proti přílišnému účinku celé obaleno dalším div, proti přílišnému účinku

clear:left (zkoušejte ve FF)clear:left (zkoušejte ve FF)– vizte přednáškuvizte přednášku– příklad: příklad: www.adamek.cz/clanky/prihody/seskok-na-padaku/www.adamek.cz/clanky/prihody/seskok-na-padaku/

TNPW1, cvičení – Ing. Martin Adámek TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)(UHK-FIM-KIT)

44

Position: fixedPosition: fixedPosition: fixed; Position: fixed; {{v CSSv CSS}}– jako absolute, ale počítá se vůči oknujako absolute, ale počítá se vůči oknu

=> při svislém listování stránkou drží menu na jednom => při svislém listování stránkou drží menu na jednom místěmístě

=> je stále k dispozici=> je stále k dispozici

– obsah divu může být větší, než se vejdeobsah divu může být větší, než se vejde=> overflow-y:auto; => overflow-y:auto; {{v příp. potřeby zobrazí svislý v příp. potřeby zobrazí svislý

posuvníkposuvník}}

– příklad:příklad:levý sloupec na levý sloupec na www.adamek.czwww.adamek.cz

– nefunguje v MS IEnefunguje v MS IE

TNPW1, cvičení – Ing. Martin Adámek TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)(UHK-FIM-KIT)

55

Základy použitelnostiZáklady použitelnostipoužitelnost webu = efektivní webdesignpoužitelnost webu = efektivní webdesign– intuitivní pochopitelnost webu, jeho struktury a navigace pro intuitivní pochopitelnost webu, jeho struktury a navigace pro

návštěvníkanávštěvníkanečte návody „jak použít tento obchod“nečte návody „jak použít tento obchod“obvykle obvykle nečte nečte ani obsah stránky !ani obsah stránky !

– prolétává očima, kouká na nadpisy, na obrázky, na začátky textůprolétává očima, kouká na nadpisy, na obrázky, na začátky textů

– testuje se na dobrovolnících pomocí zátěžových testůtestuje se na dobrovolnících pomocí zátěžových testů

je jednou z disciplín v rámci tvorby webuje jednou z disciplín v rámci tvorby webu– vedle:vedle:

technické kvality (učivo TNPW, validita kódu, ... )technické kvality (učivo TNPW, validita kódu, ... )přístupnosti pro zdravotně či technicky znevýhodněné návštěvníkypřístupnosti pro zdravotně či technicky znevýhodněné návštěvníkyobsahu webu, jeho formy a struktury (formulace textů, ...)obsahu webu, jeho formy a struktury (formulace textů, ...)grafikygrafikySEO je tvořeno kombinací všech!SEO je tvořeno kombinací všech!

TNPW1, cvičení – Ing. Martin Adámek TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)(UHK-FIM-KIT)

66

Základy použitelnostiZáklady použitelnostipožadavky:požadavky:– konzistence webu, hlavně navigacekonzistence webu, hlavně navigace

všude stejný vzhled stránkyvšude stejný vzhled stránkyvšude stejné umístění a struktura menuvšude stejné umístění a struktura menu

– odevšud odkaz o jednu úroveň výš a na hlavní stránkuodevšud odkaz o jednu úroveň výš a na hlavní stránkuGoogle přivádí dovnitř webu, nelze užít „zpět“Google přivádí dovnitř webu, nelze užít „zpět“odkaz na hlavní stranu: obvykle logo nahoře nebo vlevo nahořeodkaz na hlavní stranu: obvykle logo nahoře nebo vlevo nahoře

– odkazy vedoucí na jeden cíl mají stejný popisodkazy vedoucí na jeden cíl mají stejný popis– odkazy vedoucí na různé cíle mají různé popisyodkazy vedoucí na různé cíle mají různé popisy– úzce souvisí s přístupností (pro zdravotně či technicky handicapované)úzce souvisí s přístupností (pro zdravotně či technicky handicapované)

odkazy popsány výstižněodkazy popsány výstižněodkazy podtrženyodkazy podtrženyzvlášť označeny odkazy vedoucízvlášť označeny odkazy vedoucí

– mimo web mimo web – na soubor (místo na stránku) + uvedení velikostina soubor (místo na stránku) + uvedení velikosti– do nového panelu nebo okna (to ale nedělat zbytečně)do nového panelu nebo okna (to ale nedělat zbytečně)

volitelně (velmi vhodné):volitelně (velmi vhodné):– drobečková navigacedrobečková navigace

„„Nacházíte se: web > sekce > podsekce > .. > stránka“Nacházíte se: web > sekce > podsekce > .. > stránka“– každý drobeček je odkazem na patřičnou stránku/sekcikaždý drobeček je odkazem na patřičnou stránku/sekci

příklad: příklad: www.adamek.cz/basne/moderni-pohadky/vlk-na-lovuwww.adamek.cz/basne/moderni-pohadky/vlk-na-lovu

TNPW1, cvičení – Ing. Martin Adámek TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)(UHK-FIM-KIT)

77

Dnešní úkol – plovoucí fotogalerieDnešní úkol – plovoucí fotogaleriejako základ použijte dvou- nebo tří- sloupcové rozloženíjako základ použijte dvou- nebo tří- sloupcové rozložení– pokud nemáte své, použijte cizí, neztrácejte časpokud nemáte své, použijte cizí, neztrácejte čas

do obsahového sloupce vložte plovoucí „fotogalerii“do obsahového sloupce vložte plovoucí „fotogalerii“– stačí symbolicky vložit cca. 20 bloků <div>stačí symbolicky vložit cca. 20 bloků <div>

každý blok má pevnou šířku (cca. 50px)každý blok má pevnou šířku (cca. 50px)na přeskáčku ve dvou barváchna přeskáčku ve dvou barvách

– class=„suda“, nebo „licha“class=„suda“, nebo „licha“schránku při editaci využívejte efektivněschránku při editaci využívejte efektivně

při měnění šířky okna se bude měnit počet bloků na řádkupři měnění šířky okna se bude měnit počet bloků na řádku barevné bloky budou tvořit šachovnici, nebo svislé pruhybarevné bloky budou tvořit šachovnici, nebo svislé pruhy

– pod galerií použijte konec obtékání (clear:left) a zkontrolujte, zda se pod galerií použijte konec obtékání (clear:left) a zkontrolujte, zda se ve FF neukončilo i obtékání krajních sloupcůve FF neukončilo i obtékání krajních sloupců

1 bod !1 bod !v případné plovoucí fotogalerii v projektu ale použijte reálné v případné plovoucí fotogalerii v projektu ale použijte reálné obrázky, ne prázdné divyobrázky, ne prázdné divy