TNPW1 Technologie pro publikování na webu

1. TNPW1Technologie pro publikování na webu Cvičení č. 10 Plovoucí fotogalerie, position:fixed, použitelnost webu Martin Adámek

2. Plovoucí fotogalerie • Bez popisků – sama bez práce • pro pouhé <img /> bez viditelných (vnějších) popisků • XHTML kód: <img ... /> <img ... /> <img ... /> <img ... /> <img ... /> <img ... /> • obrázky se nařádkují samy • vkládání elementů <br /> po každém čtvrtém obrázku je zbytečné a kontraproduktivní • omezení šířky lze dosáhnout v CSS pomocí max-width pro div, ve kterém jsou img vloženy (kromě MS IE) • v příp. problémů lze v CSS vyzkoušet display (inline, inline-block) • příklad (částečně) : • http://www.adamek.cz/kolo/rumunsko/prijezd.htm TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)

3. Plovoucí fotogalerie • S popisky – pomocí obtékání • pro použití viditelných (vnějších) popisků pod obrázky nebo nad obrázky • XHTML kód: • <div class...><a...><img ... /> <br />Popisek pod fotkou</a></div> • každý div má v CSS float: left • celé obaleno dalším div, proti přílišnému účinku clear:left (zkoušejte ve FF) • vizte přednášku • příklad: www.adamek.cz/clanky/prihody/seskok-na-padaku/ TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)

4. Position: fixed • Position: fixed; {v CSS} • jako absolute, ale počítá se vůči oknu => při svislém listování stránkou drží menu na jednom místě => je stále k dispozici • obsah divu může být větší, než se vejde => overflow-y:auto; {v příp. potřeby zobrazí svislý posuvník} • příklad: • levý sloupec na www.adamek.cz • nefunguje v MS IE TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)

5. Základy použitelnosti • použitelnost webu = efektivní webdesign • intuitivní pochopitelnost webu, jeho struktury a navigace pro návštěvníka • nečte návody „jak použít tento obchod“ • obvykle nečte ani obsah stránky ! • 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ů • je jednou z disciplín v rámci tvorby webu • vedle: • technické kvality (učivo TNPW, validita kódu, ... ) • přístupnosti pro zdravotně či technicky znevýhodněné návštěvníky • obsahu webu, jeho formy a struktury (formulace textů, ...) • grafiky • SEO je tvořeno kombinací všech! TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)

6. Základy použitelnosti • požadavky: • konzistence webu, hlavně navigace • všude stejný vzhled stránky • všude stejné umístění a struktura menu • odevšud odkaz o jednu úroveň výš a na hlavní stránku • Google přivádí dovnitř webu, nelze užít „zpět“ • odkaz na hlavní stranu: obvykle logo nahoře nebo vlevo nahoře • odkazy vedoucí na jeden cíl mají stejný popis • odkazy vedoucí na různé cíle mají různé popisy • úzce souvisí s přístupností (pro zdravotně či technicky handicapované) • odkazy popsány výstižně • odkazy podtrženy • zvlášť označeny odkazy vedoucí • mimo web • na soubor (místo na stránku) + uvedení velikosti • do nového panelu nebo okna (to ale nedělat zbytečně) • volitelně (velmi vhodné): • drobečková navigace • „Nacházíte se: web > sekce > podsekce > .. > stránka“ • každý drobeček je odkazem na patřičnou stránku/sekci • příklad: www.adamek.cz/basne/moderni-pohadky/vlk-na-lovu TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)

7. Dnešní úkol – plovoucí fotogalerie • jako základ použijte dvou- nebo tří- sloupcové rozložení • pokud nemáte své, použijte cizí, neztrácejte čas • do obsahového sloupce vložte plovoucí „fotogalerii“ • stačí symbolicky vložit cca. 20 bloků <div> • každý blok má pevnou šířku (cca. 50px) • na přeskáčku ve dvou barvách • class=„suda“, nebo „licha“ • schránku při editaci využívejte efektivně • při měnění šířky okna se bude měnit počet bloků na řádku • barevné bloky budou tvořit šachovnici, nebo svislé pruhy • 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ů • 1 bod ! • v případné plovoucí fotogalerii v projektu ale použijte reálné obrázky, ne prázdné divy TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)