23.09.2019 1 Laboratoř geoinformatiky a kartografie WEBOVÁ KARTOGRAFIE - ÚVOD doc. RNDr. Tomáš ŘEZNÍK, Ph.D. podzim 2019 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. Elektronické zdroje odkazované v průběhu přednášek 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  Crowdsourcing (sociální sítě ve webové kartografii)  Užití map na Webu  Uživatelé map na Webu Laboratoř geoinformatiky a kartografie Cvičení Cvičící: Mgr. Šimon Leitgeb 1. Vytvoření webových stránek + CSS 2. Optimalizace rastrů a vektorové grafiky (PNG + SVG), animované a image mapy 3. Vytvoření klientské JavaScriptové aplikace (Leaflet) 4. Webové služby - v prohlížeči, integrace do JavaScriptové aplikace 5. Mapový server (základy GeoServeru, důraz taky na SLD) 6. Základy GML 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) 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 USAARPANET (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 23.09.2019 2 Laboratoř geoinformatiky a kartografie Historie Webu 40 maps that explain the internet http://www.vox.com/a/internet-maps Laboratoř geoinformatiky a kartografie Kde je internet? http://www.vox.com/cards/the-internet/where-is-the-internet 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 Laboratoř geoinformatiky a kartografie Komunikační protokol na Webu  WebSocket  Umožňuje plně duplexní (obousměrné) spojení  Standardizováno 2011  Používá HTTP pro navázání prvního kontaktu klient – server (handshake)  Přenáší textové zprávy a proudy dat  Stavový (stateful) protokol  Spojení se udržuje dokud jej jedna ze stran neukončí  Protokol zaručuje neměnnost obou stran během spojení 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... 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 23.09.2019 3 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/) 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 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 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 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 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  jedněmi z nejvíce užívaných jsou Dreamweaver (Adobe), Word (Microsoft)  hlavním problémem jsou chyby v kódu  kromě toho existují i strukturní editory - HomeSite, PSPad, EasyPad, UltraEdit, jEdit, Notepad++, apod. – píše se zde přímo zdrojový kód, ale editor práci usnadňuje Laboratoř geoinformatiky a kartografie Poznámkový blok 23.09.2019 4 Laboratoř geoinformatiky a kartografie Dreamweaver (Adobe) Laboratoř geoinformatiky a kartografie Notepad++ Laboratoř geoinformatiky a kartografie Příklady wysiwyg editorů  WIX http://www.wix.com  Dreamweaver http://www.adobe.com/products/dreamweaver/  Microsoft Frontpage http://www.microsoft.com/cze/office/office2003/frontpage/default.mspx  NVU http://www.czilla.cz/produkty/nvu/ Laboratoř geoinformatiky a kartografie Užitečné odkazy – strukturní editory  Brackets http://brackets.io/  Visual Studio Code https://code.visualstudio.com  Sublime Text https://www.sublimetext.com  Notepad++ http://notepad-plus.sourceforge.net/ http://www.slunecnice.cz/sw/notepad/  PSPad http://www.pspad.com/cz/  EasyPad http://www.slunecnice.cz/sw/easypad-standard/  jEdit http://www.jedit.org/ 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 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 23.09.2019 5 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 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. 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 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 Laboratoř geoinformatiky a kartografie Prvky logické struktury - Uzel - Atribut - Textový uzel - Instrukce pro zpracování - Notace - Komentář 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
23.09.2019 6 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 Laboratoř geoinformatiky a kartografie Textové uzly - Nesou textovou informaci - Ta není v celém elementu! -

Interaktivní mapy

Laboratoř geoinformatiky a kartografie 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é 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í 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ý 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ů 23.09.2019 7 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-ti bitového Unicode: až 64.000 znaků stačí pro evropské znaky, ale ne pro např. čínštinu - 32 bitový Unicode – prakticky „na věky“ - 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 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í 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 - … Laboratoř geoinformatiky a kartografie Architektura webových mapových aplikací  V geo stále klient/server  Třívrstvá/vícevrstvá architektura  K problémům webových projektů běžně patří o nedostatečná specifikace požadavků, o určení cíle projektu, o nedodržení termínů, o nedostatečná dokumentace či o krátké termíny Laboratoř geoinformatiky a kartografie