TNPW1 Technologie pro publikování na webu

Prezentace na téma: "TNPW1 Technologie pro publikování na webu"— Transkript prezentace:

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

2 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)
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ě) : TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)

3 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)
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: TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)

4 TNPW1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)
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 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: 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)