TNPW 1 Technologie pro publikovn na webu Cvien

  • Slides: 7
Download presentation
TNPW 1 Technologie pro publikování na webu Cvičení č. 10 Plovoucí fotogalerie, position: fixed,

TNPW 1 Technologie pro publikování na webu Cvičení č. 10 Plovoucí fotogalerie, position: fixed, použitelnost webu Martin Adámek TNPW 1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT)

Plovoucí fotogalerie Bez popisků – sama bez práce – pro pouhé <img /> bez

Plovoucí fotogalerie Bez popisků – sama bez práce – pro pouhé <img /> bez viditelných (vnějších) popisků – XHTML kód: <img. . . /> – obrázky se nařádkují samy – vkládání elementů 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 TNPW 1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 2

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

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

Position: fixed; {v CSS} – jako absolute, ale počítá se vůči oknu => při

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

Základy použitelnosti použitelnost webu = efektivní webdesign – intuitivní pochopitelnost webu, jeho struktury a

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! TNPW 1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 5

Základy použitelnosti požadavky: – konzistence webu, hlavně navigace všude stejný vzhled stránky všude stejné

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

Dnešní úkol – plovoucí fotogalerie jako základ použijte dvou- nebo tří- sloupcové rozložení –

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. 50 px) 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 TNPW 1, cvičení – Ing. Martin Adámek (UHK-FIM-KIT) 7