1 NÁVRH WEBOVÝCH MAP Proč dělat mapy na Webu? • Modernější • Levnější • Rychlejší • Lepší aktualizace • Interakce • Dynamika Laboratoř geoinformatiky a kartografie Proč nedělat mapy na Webu? • Omezený počet uživatelů • Cena pro uživatele • Nepřehlednost • Rozlišení monitoru uživatele • Nedostatečná kontrola nad správou barev Laboratoř geoinformatiky a kartografie RASTROVÉ NEINTERAKTIVNÍ INTERAKTIVNÍ VEKTOROVÉ DYNAMICKÉ STATICKÉ Laboratoř geoinformatiky a kartografie Mapy na Webu • systémové konfigurace • fonty • barvy • symbolika • velikost webové prezentace • webový prohlížeč • „odvozené“ grafické proměnné (stínování, průhlednost) • webové objekty (hotspots, roll-on menu,…) • uživatelé – ne všichni hledají odpověď formou mapy Co a komu mapou nejefektivněji sdělím? Laboratoř geoinformatiky a kartografie Faktory ovlivňující návrh webové mapy • statický lineární • statický krokový • dynamický zoom Laboratoř geoinformatiky a kartografie Zoom u webových map 2 • výchozí měřítko mapy • rozsah měřítek • vztah k velikosti mapy • požadovaná přesnost: - poziční - sémantická (jak jsou data prezentována): odpovídající použití opticko-vizuálních proměnných (kratší doba vnímání webových map než analogových) → jednoduché, snadno rozeznatelné, konvenční asociace Laboratoř geoinformatiky a kartografie Měřítko webových map • vždy nutná, ale ne ve všech aplikacích vytvořená • neinteraktivní legendy (při zvětšení mapy mohou zmizet) • neinteraktivní legendy uložené v jiném souboru (možnost přemístit ji na jakékoli místo webové stránky) • „rozevírací“ seznam • kontrolní panel (jinou variantou jsou časové osy) Laboratoř geoinformatiky a kartografie Legenda webových map • Primární úroveň – hlavní tematika mapy; odpovídá tematické nadstavbě (vč. hotspots, mouse-over,…) • Sekundární úroveň – obvykle topografický podklad nebo geografický základ (ale také např. pop-up menu, tabulky, videa, fotografie, zvuky) • Podpůrná úroveň – legenda, grid, ilustrace, ostatní informace přímo nesouvisející s tematikou webové mapy Laboratoř geoinformatiky a kartografie Obsah webových map • účel mapy • velikost mapy (obvykle menší než u analogových) • měřítko (resp. rozsah měřítek) mapy • existence mapových asociací a konvencí • estetika vs. čas vs. vynaložené náklady • u neinteraktivních map obdobná symbolika jako u analogových • u interaktivních map záleží na míře interaktivity • figurální, liniové, areálové syntagmy • všechny mohou být interaktivní Laboratoř geoinformatiky a kartografie Mapová symbolika • neznámá konfigurace klienta – a tím i barev • žádná přímá kontrola • schopnost zobrazit 8-bitové (256 barev), 16-bitové (65 000 barev), 24bitové (16 milionů barev) či 32-bitové barvy (4 miliardy barev) • ani 8-mi bitová grafika není bezpečná (Windows vs. Mac) • 216 bezpečných barev na Webu • ale i tak se nezobrazí správně – LCD vs. CRT plus kalibrace • v praxi proto vybíráme z více barev a doufáme, že se uživateli korektně zobrazí • 99,9% uživatelů má více než 256 barev Laboratoř geoinformatiky a kartografie Barva na webových mapách Laboratoř geoinformatiky a kartografie Barva na webových mapách 3 • Robinson, et al. (1995): „Text na mapách je nutné zlo“ • ještě významnější vliv na webových, zvláště interaktivních mapách • typografické proměnné v mapové typografii • text aplikovaný mimo mapové pole (zacházet s ním lze stejně jako s jakýmkoli jiným textem na webové stránce – vyhýbáme se kontrole směru textu a mezer mezi písmeny) Laboratoř geoinformatiky a kartografie Text na webových mapách • text aplikovaný v mapovém poli - změny při převodu do rastru nesmí způsobit žádné kolize - mnohdy snaha poslat text samostatně (font definován jako vektor) - využíváme obvykle používané fonty - neobvyklý font: GIF/PNG pro každý text nebo pošleme popisný soubor fontu (vyžaduje licenci) - obecně platí, že font by neměl být menší než 10 bodů - využití anti-aliasingu • text aplikovaný mimo mapové pole - můžeme s ním zacházet jako s textem webové stránky Laboratoř geoinformatiky a kartografie Text na webových mapách • pokud není deklarována, vykresluje se velikost 16px – výchozí velikost odpovídající Internet Exploreru • možnost zadání celé řady jednotek • zvětšování v IE lze nastavit Zobrazit > Velikost písma (5 stupňů) nebo také CTRL + kolečko myši Laboratoř geoinformatiky a kartografie, Masarykova univerzita Velikost písem Jednotka Význam Příklad Zvětšovací v Exploreru px pixel 12px ne pt typografický bod 9pt ne mm milimetr 5mm ne in palec .5in ne em výška písmene M 1.5em ano, poskakuje % procento 80% ano Laboratoř geoinformatiky a kartografie Anti-aliasing • růst výkonu grafických karet nepřinášel uspokojivé výsledky (především ve 3D) • složení obrazu z pixelů a polygonů • zlepšení obrazu pomocí zvětšení jejich počtu; navíc značně zpomaluje • nepomáhá okrajům (ostrý přechod pixelů) – ty jsou i tak zubaté • anti-aliasing je vysokofrekvenční filtr Laboratoř geoinformatiky a kartografie Anti-aliasing Laboratoř geoinformatiky a kartografie „Odvozené“ grafické proměnné • průhlednost - redukce jasu a sytosti (tj. redukce kontrastu) - barvy se pak „přibližují“ ke světle šedé - utlumení méně významných prvků a vyzdvižení významných - s velkou průhledností na mapě nic nerozlišíme • stínování (resp. i vržení stínu) -zvýšení kontrastu mezi pozadím a popředím - konvenční „osvětlení“ ze severozápadu opticky vytváří vyvýšeniny - z jihozápadu sníženiny - často využito pro 3D klikatelné objekty 4 Kroky návrhu webové mapy Laboratoř geoinformatiky a kartografie • Základní zásady - srozumitelná - logicky strukturovatelná - integrovaná odpovídajícím způsobem - konzistentně označená - snadná pro navigaci a užití - konkrétní Kroky návrhu webové mapy Laboratoř geoinformatiky a kartografie