title_header Laboratoř geoinformatiky a kartografie title_header WEBOVÁ KARTOGRAFIE - ÚVOD Tomáš ŘEZNÍK podzim 2022 title_header Laboratoř geoinformatiky a kartografie Webová kartografie •1/2, Zk •Cvičení individuálně, skupinově •Odevzdání cvičení do 1 týdnu od zadání -pozdní odevzdání se hodnotí 0 body; možnost opravy další týden, pak se jedná o nesplnění podmínek ukončení předmětu •Bodování (10 b. za cvičení, započítá se do výsledné známky, tvoří 1/3) •Zbývající 2/3 hodnocení tvoří 2 otázky při ústní zkoušce •Literatura: Web cartography: developments and prospects. Edited by Menno-Jan Kraak - Allan Brown. 1st pub. London : Taylor & Francis, 2001. ix, 213 s. r01. ISBN 0-7484-0869-X. Maps and the internet. Edited by Michael P. Peterson. 1st ed. Amsterdam: Elsevier, 2005. xvi, 451 s. ISBN 0080449441. Michálek, M. 2017. Vzhůru do (responzivního) webdesignu. ISBN: 978-80-88253-00-6. Elektronické zdroje odkazované v průběhu přednášek title_header Laboratoř geoinformatiky a kartografie Přednášky •Internet, Web, historický vývoj, důsledky •Document Type Definition (DTD), styly •Webové prohlížeče, standardizace na Webu, souřadnicové systémy •Vybrané formáty užívané na Webu (HTML, XML, JSON, GIF, JPG, PNG, Flash, SVG, VML), Domain Name Server (DNS) systém •Klientská řešení •Serverová řešení •Webové služby v geoinformatice •Webové služby pro vizualizaci •Sensor Web Enablement, SensorThingsAPI •Crowdsourcing (sociální sítě ve webové kartografii) •Užití map na Webu •Uživatelé map na Webu title_header Laboratoř geoinformatiky a kartografie Cvičení Cvičící: Mgr. Šimon Leitgeb, Mgr. Filip Leitner 1.Vytvoření webových stránek + CSS 2.Počítačová grafika a její optimalizace 3.Vytvoření klientské JavaScriptové aplikace (Leaflet) 4.Základy GML a GeoJSONu 5.Mapový server (základy GeoServeru, důraz na SLD) 6.Webové služby - v prohlížeči, integrace do JavaScriptové aplikace 7.Leaflet title_header Laboratoř geoinformatiky a kartografie Historie Webu •budiž Web -Sir Timothy John Berners-Lee -považován za vynálezce Webu -existovaly technologie i principy -vše spojil dohromady •hypertext -mechanismus provázání textu skrze odkazy -první zmínka o konceptu již 1945 (Dr. Vannevar Bush) -pojem hypertext 1965 (Ted Nelson) -jeho textový editor xanadu (nikdy finálně nedokončen) title_header Laboratoř geoinformatiky a kartografie Historie Webu -před zavedením WWW hypertextová řešení firem Xerox, Canon, Macromedia, aj. - •Vývoj před Webem -základem protokol TCP/IP (Vint Cerf, 1974) -architektura dle sítě ministerstva obrany USA ARPANET (1962) -přechod ARPANETu na TCP/IP (1983); i FTP, e-mail, DNS -část ARPANETu pro vědecké účely (1984); ale i firmy jako HP -koncem 80. let ARPANET vypnut; mezitím vlastní páteřní vědecká síť NFSNET – k ní se připojila řada jiných sítí -vzniká internet title_header Laboratoř geoinformatiky a kartografie Historie Webu 40 maps that explain the internet http://www.vox.com/a/internet-maps Before the internet, there was the ARPANET 1973: ARPANET goes international The internet becomes a global network title_header Laboratoř geoinformatiky a kartografie Kde je internet? http://www.vox.com/cards/the-internet/where-is-the-internet http://cdn1.vox-cdn.com/assets/4195719/1024px-AMS-IX_optical_patch_panel.jpg title_header Laboratoř geoinformatiky a kartografie Komunikační protokol na Webu •HTTP (Hyper Text Transfer Protocol) -Výměna hypertextových dokumentů ve formátu HTML; požadavek – odpověď -HTTP/2 (od 2015, výkonová zlepšení), HTTPS (zabezpečené certifikáty web. stránek) - •HTTP je bezestavový -Neudržuje spojení mezi dvěma transakcemi -Neumožňuje zjistit, jestli určité požadavky přišly od stejného uživatele -Používají se tzv. session proměnné, cookies title_header Laboratoř geoinformatiky a kartografie Komunikační protokol na Webu ·Stavový (stateful) protokol obecně -Spojení se udržuje dokud jej jedna ze stran neukončí -Protokol zaručuje neměnnost obou stran během spojení · ·WebSocket (jako příklad stavového protokolu) -Umožňuje plně duplexní (obousměrné) spojení na definovaném portu -Standardizováno 2011 -Používá HTTP pro navázání prvního kontaktu klient – server (handshake) -Přenáší textové zprávy a proudy dat -Geoinformatické aplikace teprve v začátcích title_header Laboratoř geoinformatiky a kartografie Značkovací jazyk - 1969 první značkovací jazyk od tří zaměstnanců IBM (Charles Goldfarb, Edward Mosher a Raymond Lorie) - GML - na jeho základě stavěl HTML – jen pro zajímavost zdroj. kód: :book. :body. :h1.Toto je nadpis první úrovně :p.Toto je odstavec :ol. :li.První položka číslovaného seznamu :li.Druhá položka :li.Třetí položka :ul. :li.Položka vnořeného seznamu :li.Další položka :eul. :eol. :p.Seznam skončil, začíná další odstavec... title_header Laboratoř geoinformatiky a kartografie Značkovací jazyk - snaha oddělit logickou a prezentační část - 1980 mutace SGML (Standard Generalized Markup Language) - standard ISO 8879 - Tim Berners-Lee při stvoření HTML tento standard ignoroval - položil tak základy většiny dřívějších chyb (do HTML 4) - tehdejší stránky proto vypadaly Mamut s rýží a bramborem

Nadpis končí s koncem řádku Obyčejný text odstavce, začalo tučné písmo.

Tučný druhý odstavec, začala kurzíva.

Třetí tučný odstavec v kurzívě, tučné písmo skončilo.

Text čtvrtého odstavce v kurzívě, kurzíva skončila.

Odstavec s kotvou. -jazyk HTML se stal se SGML kompatibilní až ve verzi 2.0 title_header Laboratoř geoinformatiky a kartografie Tim Berners-Lee • v roce 1989 uchopil 45 let starý hypertext • velkou síť s 16 let starým protokolem • přidal vlastní napodobeninu SGML • vše smíchal dohromady… • …a World Wide Web byl na světě Jen jsem musel vzít ideu hypertextu, spojit ji s ideami TCP a DNS a -- ta-dá! -- World Wide Web. (Tim Berners-Lee, http://www.w3.org/People/Berners-Lee/) https://www.wired.com/2014/11/countdown-to-zero-day-stuxnet/ title_header Laboratoř geoinformatiky a kartografie Velmi zkrácená historie Webu 1989 Tim Berners-Lee žádá o schválení projektu WWW v CERNu 1992 Na celém světě je pouze 26 webových serverů 1993 Web deklarován jako svobodný bez licenčních poplatků 1995 Amazon.com, ebay.com, Internet Explorer, IPv6 (adopce dodnes není) 1996 Seznam.cz 1998 Google.com 1999 Založení sociální sítě Myspace 2000 Funguje 20 milionů serverů 2001 Wikipedia.org 2004 Mozilla Firefox, Facebook.com 2005 Google mapy, YouTube.com 2007 API ke Google mapám 2010 Mapbox, Stuxnet – první digitální zbraň Převzato z: https://geneva.usmission.gov/wp-content/uploads/sites/290/FB-0205-750x470.jpg Stuxnet - https://www.wired.com/2014/11/countdown-to-zero-day-stuxnet/ title_header Laboratoř geoinformatiky a kartografie Přispění k obsahu Webu •napsání stránky = vytvoření souboru HTML, XHTML, TPL,… -stránka je soubor s příponou nejčastěji .htm, .html -stránku lze otevřít dvěma způsoby + v prohlížeči (nedá se upravovat) + jako text (tj. zdroj, resp. zdrojový kód) •vystavení tohoto souboru (zkopírování na server) •HTML soubory můžete tvořit: -v HTML editoru (vhodné pro začátečníky) -napsání zdrojového kódu rovnou v jazyce (X)HTML title_header Laboratoř geoinformatiky a kartografie Co je třeba k vytvoření své části Webu? •mozek ☺ •základní počítačová gramotnost •počítač s alespoň jednoduchým textovým editorem •webový prohlížeč •mít o čem psát •hodí se připojení k internetu •nemusíte umět programovat •nejsou potřeba drahé programy •nejsou potřeba peníze title_header Laboratoř geoinformatiky a kartografie HTML editory •programy speciálně vyvinuté pro tvorbu www stránek •pro začátečníky jsou použitelné zejména wysiwyg editory -napíše se v nich text, přidají obrázky a uloží se celý soubor na disk – html značky editor doplní sám -desktopové programy – Dreamweaver (Adobe) -dnes se používají minimálně •redakční systémy – WordPress, Drupal, Wix, Webnode •omezené možnosti a přebytečný kód vs. jednoduchost a šablony •většinou se ale používají textové editory – VS Code, Atom, Brackets, Webstorm, vim, Emacs -edituje se přímo zdrojový kód, editor práci usnadňuje -zvýrazňování a kontrola syntaxe, našeptávání, živý náhled, … - title_header Laboratoř geoinformatiky a kartografie Příklady wysiwyg editorů • WIX http://www.wix.com • • Dreamweaver http://www.adobe.com/products/dreamweaver/ • • Microsoft Frontpage à Microsoft Word http://www.microsoft.com/cze/office/office2003/frontpage/default.mspx • • NVU http://www.czilla.cz/produkty/nvu/ title_header Laboratoř geoinformatiky a kartografie Užitečné odkazy – strukturní editory •Visual Studio Code https://code.visualstudio.com •Atom https://atom.io/ •Brackets https://brackets.io/ •Sublime text https://www.sublimetext.com/ title_header Laboratoř geoinformatiky a kartografie XML (eXtended Markup Language) •XML je standard (resp. doporučení) jak vytvářet značkovací jazyky •metajazyk •vychází z SGML – je jeho podmnožinou •se základním standardem úzce souvisí další (např. XML Namespace, XInclude, XML Base, XML Infoset) •tyto plus další (XSLT, XSL-FO, XHTML, CSS,…) tvoří „rodinu“ standardů XML title_header Laboratoř geoinformatiky a kartografie Aktuální specifikace XML •Původní specifikace (W3C Recommendation) XML 1.0 na http://www.w3.org/XML •Poslední verze XML 1.1 na http://www.w3.org/TR/xml11/ -pro účely tohoto předmětu všechny dokumenty XML 1.0 jsou platné v XML 1.1 •Komentovaná verze na XML.com title_header Laboratoř geoinformatiky a kartografie Tutoriály a články •http://kosek.cz/clanky/swn-xml/index.html •http://zive.cz •http://xml.com •http://ibm.com/developer/xml •http://www.zvon.org/xxl/XMLTutorial/General/book_en.html •http://www.w3schools.com/xml/default.asp •http://www.xml101.com/xml/default.asp •http://tutorials.beginners.co.uk •http://developerlife.com title_header Laboratoř geoinformatiky a kartografie Struktura XML dokumentů •Základním požadavkem kladeným na každý XML dokument je, že musí být dobře utvořen (well-formed) •K tomu je potřeba, aby obsahoval: -Obsahuje prolog (hlavičku) a právě jeden tzv. kořenový element – dále může před a po kořenovém elementu obsahovat instrukce pro zpracování, komentáře, atd. XML_hlavicka title_header Laboratoř geoinformatiky a kartografie Struktura XML dokumentů -Obsahuje prolog (hlavičku) a právě jeden tzv. kořenový element – dále může před a po kořenovém elementu obsahovat instrukce pro zpracování, komentáře, atd. -Musí vyhovovat všem pravidlům uvedeným ve specifikaci pro správné vytvoření -Totéž platí pro každou analyzovanou (parsovanou) entitu přímo nebo nepřímo odkazovanou v dokumentu title_header Laboratoř geoinformatiky a kartografie Struktura XML dokumentů -Rozlišujeme fyzickou a logickou strukturu XML dokumentů -Struktura logická: dokument členíme na elementy (jeden z nich je kořenový – root), jejich atributy, instrukce pro zpracování, notace, komentáře -Struktura fyzická: jeden logický dokument může být uložen ve více fyzických jednotkách – entitách; vždy alespoň v jedné – tzv. entitě dokumentu – document entity title_header Laboratoř geoinformatiky a kartografie Prvky logické struktury -Uzel -Atribut -Textový uzel -Instrukce pro zpracování -Notace -Komentář title_header Laboratoř geoinformatiky a kartografie Elementy -Objekty ohraničené počáteční a koncovou značkou – start and end tag; obecně: Obsah tagu -Příklad elementu s obsahem

textový uzel – obsah elementu h1

textový uzel – obsah elementu p

-Prázdné elementy
je z logického hlediska ekvivalentem
title_header Laboratoř geoinformatiky a kartografie Atributy -Dodatečné informace k elementu – např. jeho ID, požadované formátování – styl, odkazy na další elementy… -Konceptuálně je možné nahradit atributy elementy, ale kvůli přehlednosti se používá obojí -Obsah atributu na rozdíl od obsahu elementu není nijak (na úrovni obecných zásad XML standardů) dále strukturován -Fyzické pořadí zápisu více atributů v jednom elementu nemá na logický model vliv -Zápis je tvořen jménem a hodnotou
-Atributy zapisujeme do počáteční (i prázdné) značky elementu -Hodnota je vždy v " " nebo ' ' a od jména ji dělí znak = -Jako u elementů nejsou přípustné dva atributy se stejným názvem title_header Laboratoř geoinformatiky a kartografie Textové uzly -Nesou textovou informaci -Ta není v celém elementu! -

Interaktivní mapy

title_header Laboratoř geoinformatiky a kartografie title_header Instrukce pro zpracování -Instrukce pro zpracování (processing-instruction) píšeme do značek -Informují aplikaci o postupu či nastavení nutném pro zpracování daných XML dat -Nepopisují (nepředstavují) obsah, ale zpracování dokumentu -Např. -href tomto příkladu neznamená atribut; atributy nejsou u instrukce pro zpracování možné title_header Laboratoř geoinformatiky a kartografie Notace -Notaci (notation) píšeme do značek -Slouží zejména k popisu binárních (non-XML) entit – např. obrázků GIF, PNG,… -Jde o deklaraci způsobu zobrazení title_header Laboratoř geoinformatiky a kartografie Komentáře -Podobně jako u HTML píšeme komentář (comment) do značek -Obsahem komentáře je text komentáře, nikoli celý komentář i se značkami -Komentář nebývá pro zpracování významný title_header Laboratoř geoinformatiky a kartografie Znaky v XML dokumentech -Specifikace povoluje na určitých místech v XML dokumentech (např. název elementu, obsah atributu,…) pouze některé znaky -Vzhledem k internacionalizaci je třeba zvládnout a rozlišovat: §Znakové sady (množiny znaků s pořadovými čísly – tj. přiřazení ordinální hodnoty znaku – např. Unicode) §Kódování znaků (z dané sady), např. UTF-8; tj. ordinální hodnota znaku se kóduje do posloupnosti bajtů title_header Laboratoř geoinformatiky a kartografie Standardy Unicode, ISO 10646 -Oba standardy řeší stejný problém: znakové sady s více než 256 znaky -Původní návrh tzv. 16 bitového Unicode: až 64.000 znaků stačí pro evropské znaky, ale ne pro např. čínštinu -32 bitový Unicode – prakticky „na věky“ -𝓔𝓜𝓞𝓙𝓘 🌍 -https://unicode-table.com/en/emoji/ -Z 32 bitové škály se dnes používá většinou jen tzv. Basic Multilingual Plane pokrývající většinu jazyků -Ale i tak je v XML dokumentech možné používat všechny znaky Unicode title_header Laboratoř geoinformatiky a kartografie Kódování Unicode -Všechny aplikace XML musejí být schopny zpracovat znaky Unicode bez ohledu na kódování; přesto je dobré znát §Osmibitová tradiční: US-ASCII, ISO 8859-2 (ISO Latin 2), Windows-1250 – jen vybraná množina Unicode §UTF-8: kódování všech znaků Unicode, každý znak na 1-6 bajtech; US-ASCII na jednom bajtu, „čeština“ na dvou §UTF-16: stejný princip; základní ukládací jednotkou je dvoubajtové slovo (16 bitů) §UCS-2: přímé kódování Unicode, čísla znaků z BMP se zapíší přímo jako 2 bajty §UCS-4; dtto ale na 4 bajtech – neúsporné (4 bajty pro US-ASCII i pro evropské jazyky) §UTF-8 se bere jako implicitní §Rozdíly např. https://www2.karlin.mff.cuni.cz/~jvesely/chcp.htm title_header Laboratoř geoinformatiky a kartografie Moduly, balíčky, knihovny, frameworky,.. •V různých aplikacích se objevují obdobné problémy i funkcionality -Abstrakce do obecného zápisu a využívání napříč různými projekty a aplikacemi •Názvy pro tyto kusy sdíleného kódu se liší (a nejsou vždy jasné) -Moduly, balíčky, knihovny, frameworky -Významné urychlení i (ne)spolehlivost/(ne)kvalita/(ne)bezpezpečnost převzatého kódu; běžné i moduly s jedním řádkem kódu (vs. změny) -Tento problém narůstá s počtem tzv. zanořených softwarových závislostí •Vývojářské online komunity -OSGeo (https://www.osgeo.org/) -Leaflet/OpenLayers/Google Maps -… title_header Laboratoř geoinformatiky a kartografie title_header Architektura webových mapových aplikací Laboratoř geoinformatiky a kartografie •V geoinformatice stále převažuje architektura klient/server •Tradičně třívrstvá (vícevrstvá) architektura (three-tier architecture) • • • •K problémům webových projektů obecně patří: -nedostatečná specifikace požadavků -nedostatečné určení cíle projektu -nedodržení termínů -nedostatečná dokumentace -krátké termíny databázová vrstva aplikační vrstva prezentační vrstva prostorové rozšíření