1 Laboratoř geoinformatiky a kartografie WEBOVÁ KARTOGRAFIE - ÚVOD doc. RNDr. Tomáš ŘEZNÍK, Ph.D. podzim 2015 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. Michal Zimmermann 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 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 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ěď • 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 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 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/) 3 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), Frontpage (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 Laboratoř geoinformatiky a kartografie Dreamweaver (Adobe) Laboratoř geoinformatiky a kartografie Notepad++ 4 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 • 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/ • Komentovaná verze na XML.com 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. 5 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
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

6 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ů 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í