Grafika na webu, OGC Web Services
Cvičení 2
Webová kartografie
Podzim 2019
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
Proč?
Proč?
Pomocí grafiky vykomunikujete mnoho informací jednoduše a
srozumitelně.
Weby jsou interaktivní! Viz příklady.
SVG, CSS transformace, D3.js, …
Je důležité používat pro různé účely správné formáty – web
bude lépe vypadat a bude se rychleji načítat.
Rozdíly ve velikosti správně a špatně připravené grafiky mohou být opravdu
markantní.
Rastr vs. vektor, komprese
Podzim 2019 Grafika na webu, OGC Web Services
https://www.bloomberg.com/graphics/2018-us-land-use/
. . . . . . . . . . . . . . . . . . . .
https://mourner.github.io/road-orientation-map/
. . . . . . . . . . . . . . . . . . . .
https://www.jasondavies.com/maps/transition/
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
PNG
JPEG
GIF
Rastrové formáty
PNG, GIF, JPEG, TIFF, …
Základním prvkem jsou obrazové body → rozlišení obrázku.
Různé obrazovky mají různou hustotu obrazových bodů →
jeden z největších problémů rastrové grafiky na webu.
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
PNG
JPEG
GIF
PNG
Portable Network Graphics
16.7M barevných odstínů
podporuje průhlednost
přípona .png
world file (.pnw, .pgw)
bezztrátová komprese
vhodný formát pro grafiku (mapy!) a vysoce kontrastní
fotografie
Podzim 2019 Grafika na webu, OGC Web Services
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
PNG
JPEG
GIF
JPEG
Joint Photographic Experts Group
16.7M barevných odstínů
nepodporuje průhlednost
přípona .jpg (.jpeg, .jif, …)
ztrátová (ale efektivnější) komprese
vhodný formát pro fotografie (ne mapy!)
EXIF – metadata fotografie (souřadnice!)
Podzim 2019 Grafika na webu, OGC Web Services
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
PNG
JPEG
GIF
GIF
Graphics Interchange Format
256 barevných odstínů z 24-bit RGB palety
podporuje průhlednost
přípona .gif
vhodný formát pro loga, jednolité plochy, animace
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
SVG
Vektorové formáty
SVG
K diskuzi
Jsou geografická data obrazová?
GeoJSON, TopoJSON, GML, KML, WKT, Shapefile, …
Základním prvkem jsou souřadnice definičních bodů a jejich
vztahy
Vykreslení na obrazovce zajišťuje samotné zařízení →
výpočetně (může být) náročnější, vždy je ale výsledek ostrý.
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
SVG
SVG
Scalable Vector Graphics
založeno na XML
přípona .svg, dá se ale vložit i přímo do kódu webové stránky!
strojově čitelný textový grafický formát
Běžně menší velikost souboru oproti rastru
Dá se animovat!
V SVG je možné uchovávat atributy prvků a ve webové
stránce je číst.
Lze aplikovat styly pomocí CSS!
Často se používá pro kreslení grafiky a následný export do
rastrů v různém rozlišení (ikony, loga, apod.).
Podzim 2019 Grafika na webu, OGC Web Services
Příklad jednoduché interaktivní mapky využívající SVG, CSS
a JavaScript:
https://bl.ocks.org/SLeitgeb/raw/
9dcc1b0729a3e93387cfa147d51b4262/
Komentář: https://bl.ocks.org/SLeitgeb/
9dcc1b0729a3e93387cfa147d51b4262
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
Použití obrázků
→
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
→
Ukládejte obrázky skutečně v takovém rozlišení v jakém se mají zobrazovat.
Nicméně, drobné odchylky v zobrazené velikosti se tolerují (řádově ale jednotky
procent!).
Dobrá praxe je napsat rozlišení souboru přímo do jeho názvu
(kitten_100x100.jpg)
Podzim 2019 Grafika na webu, OGC Web Services
Pro zajímavost
Existuje element picture, se kterým je možné podle velikosti obrazovky měnit
zobrazený obrázek. V praxi se používá pro zobrazení různě ořízlých obrázků na
různých obrazovkách. Nepředpokládám ale, že bychom jej přímo používali.
→
. . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
OGC?
Web Services?
WMS
WMTS
WFS
OGC?
Open Geospatial Consortium
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
OGC?
Web Services?
WMS
WMTS
WFS
Web Services?
Co je to webová služba?
Služba poskytovaná jedním zařízením druhému pomocí WWW
(Wikipedie)
V zásadě:
jedno zařízení kontaktuje druhé pomocí dotazu
druhé zařízení vrátí odpověď
např. načtení stránky / souboru pomocí URL
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
OGC?
Web Services?
WMS
WMTS
WFS
Návod k OGC službám
https://gist.github.com/SLeitgeb/
71825743eb3ab10a6cc1e6f74e33eb31
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
OGC?
Web Services?
WMS
WMTS
WFS
WMS
Web Map Service
OpenGIS Web Map Service Implementation Specification
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
OGC?
Web Services?
WMS
WMTS
WFS
WMS
Web Map Service
OpenGIS Web Map Service Implementation Specification
HTTP rozhraní pro dotazování lokalizovaných snímků mapy z
jedné nebo více databází → lze kombinovat více vrstev jedné
WMS
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
OGC?
Web Services?
WMS
WMTS
WFS
WMS
Web Map Service
OpenGIS Web Map Service Implementation Specification
HTTP rozhraní pro dotazování lokalizovaných snímků mapy z
jedné nebo více databází → lze kombinovat více vrstev jedné
WMS
str. 21 GetCapabilities
str. 32 GetMap (http://bit.ly/wms_getmap)
str. 38 GetFeatureInfo (http://bit.ly/wms_info)
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
OGC?
Web Services?
WMS
WMTS
WFS
WMTS
Web Map Tile Service
OpenGIS Web Map Tile Service Implementation Specification
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
OGC?
Web Services?
WMS
WMTS
WFS
WMTS
Web Map Tile Service
OpenGIS Web Map Tile Service Implementation Specification
poskytování předpřipravených mapových dlaždic
neumožňuje v jednom dotazu kombinovat více vrstev
tile × tile matrix × tile matrix set
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
OGC?
Web Services?
WMS
WMTS
WFS
WMTS
Web Map Tile Service
OpenGIS Web Map Tile Service Implementation Specification
poskytování předpřipravených mapových dlaždic
neumožňuje v jednom dotazu kombinovat více vrstev
tile × tile matrix × tile matrix set
str. 36 GetCapabilities
str. 40 GetTile (http://bit.ly/2yjp11J)
str. 45 GetFeatureInfo (http://bit.ly/2yjtQIi)
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
OGC?
Web Services?
WMS
WMTS
WFS
WFS
Web Feature Service
OpenGIS Web Feature Service Implementation Specification
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
OGC?
Web Services?
WMS
WMTS
WFS
WFS
Web Feature Service
OpenGIS Web Feature Service Implementation Specification
transakční služba určená k získávání a úpravě geografických
dat ve formátu GML (Geography Markup Language)
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
OGC?
Web Services?
WMS
WMTS
WFS
WFS
Web Feature Service
OpenGIS Web Feature Service Implementation Specification
transakční služba určená k získávání a úpravě geografických
dat ve formátu GML (Geography Markup Language)
str. 79 GetCapabilities
str. 97 DescribeFeatureType (http://bit.ly/2yHhCdO)
str. 98 GetFeature (http://bit.ly/2gzhFhd)
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
Nástroje
Úkol
Jak dál?
Nástroje
Inkscape, GIMP × Adobe Photoshop, Illustrator, Corel Draw
komprese obrázků – https://compressor.io
https://www.jotform.com/blog/
everything-you-need-to-know-about-image-compression/
kódy EPSG (pro různé souřadnicové systémy):
https://epsg.io/
např. S-JTSK má EPSG kód 5514 → epsg.io/5514, pokud nevíte kód, na
stránce je vyhledávání
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
Nástroje
Úkol
Jak dál?
Úkol
dokončete základní strukturu stránky (pokud možno už
žádné Lorem Ipsum, apod.)
validní CSS a HTML
stránku doplňte o obrázky, které budou vhodně upravené
pro použití na webu
komprese
alespoň tři rastrové obrázky
alespoň jeden vektorový obrázek
nakreslete si vlastní vektorový obrázek (logo?)
nemusíte nutně na webu použít jako vektor, stačí např. GIF / PNG (v
tom případě odevzdejte také .svg soubor)
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
Nástroje
Úkol
Jak dál?
Úkol
do stránky dále vložte:
WMS: GetMap dotaz s místem odkud pocházíte (obrázek)
WMTS: GetTile dotaz s místem dle vašeho výběru (obrázek)
WFS: GetFeature dotaz s INSPIRE parcelami z oblasti, ze
které pocházíte definované BBoxem (odkaz ke stažení)
odevzdat do 8. 10.
první bodované cvičení (max 10 b.)
odevzdávat v archivu (web.zip)
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
Nástroje
Úkol
Jak dál?
Jak dál?
Přečtěte si víc a procvičujte
https://medium.com/
https://css-tricks.com/
https://bost.ocks.org/mike/
Podzim 2019 Grafika na webu, OGC Web Services
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Motivace
Rastrové formáty
Vektorové formáty
Použití
Webové služby
Závěr
Nástroje
Úkol
Jak dál?
Ptejte se
kdykoliv
kdekoliv
jakkoliv
co nejdřív …
e-mail: leitgeb@mail.muni.cz
discord: https://discord.gg/ppscspX
Podzim 2019 Grafika na webu, OGC Web Services