Pokročilá tvorba webu

Rozšíření výuky informačních technologií na Gymnáziu Pacov Reg. číslo: CZ.1.07/1.1.01/02.0008 Pokročilá tvorba webu Výukový materiál Bc. Patrik Jíra 27. 12. 2009 Tento projekt je spolufinancován z Evropského sociálního fondu a státního rozpočtu České republiky.

Obsah 1 Úvod 1 2 Tvorba statických prezentací 2 2.1 Základní pojmy www........................... 2 2.1.1 Historie a budoucnost webu................... 2 2.1.2 Server, doména, webhosting a další základní pojmy...... 6 2.1.3 Registrace domény........................ 7 2.1.4 Registrace webhostingu...................... 8 2.2 Webové CMS............................... 10 2.3 XML.................................... 15 2.3.1 Syntaxe XML........................... 15 2.3.2 Jmenné prostory......................... 16 2.4 HTML, XHTML............................. 17 2.4.1 Historie HTML.......................... 17 2.4.2 Koncepce jazyka......................... 18 2.4.3 Struktura dokumentu....................... 19 2.4.4 Druhy značek........................... 19 2.4.5 Zpracování v prohlížečích.................... 20 2.4.6 Editace HTML.......................... 21 2.5 Cascading Style Sheets CSS...................... 22 2.5.1 Základní charakteristika jazyka................. 22 2.5.2 Historie.............................. 22 2.5.3 Výhody.............................. 22 2.5.4 Nevýhody............................. 23 2.5.5 Selektory a pravidla....................... 23 2.6 Javascript................................. 25 2.6.1 Základní charakteristika jazyka................. 25 2.6.2 Historie.............................. 25 3 Webové aplikace 27 3.1 Historie.................................. 27 3.2 Rozhraní.................................. 27 3.3 Technické aspekty............................. 28 3.4 Struktura................................. 28 3.5 Programování webových aplikací..................... 29

4 Architektura a marketing internetových projektů 30 4.1 SEO - optimalizace pro vyhledávače................... 30 4.1.1 Co je to SEO........................... 30 4.1.2 Hodnocení stránek vyhledávači................. 30 4.1.3 Metody SEO........................... 30 4.1.4 Etické a neetické metody..................... 31 4.2 SEM - Search engine marketing..................... 33 4.2.1 Co je to SEM........................... 33 4.3 Použitelnost................................ 34 4.3.1 Co je použitelnost webových stránek?.............. 34 4.3.2 Výhody dobře použitelného webu................ 35 4.3.3 Jak se použitelnost ověřuje?................... 35 4.4 Přístupnost................................ 36 4.4.1 Argumenty pro přístupnost................... 37 4.4.2 Jak udělat web přístupný.................... 38 4.5 Informační architektura.......................... 39 4.5.1 Role informační architektury na webu.............. 39 5 Rich Internet Application 40 5.1 Úvod do RIA............................... 40 5.1.1 Co je to RIA........................... 40 5.1.2 Historie.............................. 40 5.1.3 Současnost............................. 40 5.2 Technologie................................ 41 5.2.1 Asynchronní JavaScript a XML (AJAX)............ 41 5.2.2 Flash................................ 42 5.2.3 Laszlo............................... 42 5.2.4 Flex................................ 43 5.2.5 Windows Presentation Foundation............... 43 5.2.6 Adobe Apollo........................... 44

1 Úvod Protože dnešní svět je víceméně postavený na informacích, je schopnost prezentace záměru základní podmínkou pro jeho úspěch. Její konkrétní podoba, ať už se bavíme o prezentaci osoby, podnikání, či obecných informací, záleží na finančních možnostech, marketingovém plánu i osobním přístupu marketéra. Nabízet něco světu lze přece mnoha kanály, vyjmenujme tedy například internet, televizní vysílání, tisk. Informační technologie pokročily za posledních cca 15 let tak daleko, že prezentace formou jednoduchých internetových stránek na jedné straně a komplexním portálem na straně druhé, je dnes zdaleka nejlevnější a nejefektivnější cestou pro zviditelnění jakéhokoliv záměru. Pro čtenáře tohoto materiálu může být pak větší konkurenceschopnost díky znalosti internetových technologií a technik klíčová na trhu práce, v akademickém světě, či v životě osobním. Tento materiál si klade za cíl poskytnout stručný přehled běžně používaných technologií tvorby webu, čtenáře uvést do jejich základů a alespoň částečnou formou příkladů či citací podrobnějších zdrojů ukázat také technologie ve spojení s praxí. Webdesign je poměrně obecným pojmem a i v rámci IT rozsáhlým a velice rychle se vyvíjejícím oborem, proto je nutno tento materiál chápat jako široký úvod do komplexní problematiky a jako návod pro další studium spíše než jako všepokrývající skriptum. Materiál je členěn do několika tematických sekcí, každá rozebírá technologie a techniky odlišné a zdánlivě spolu nesouvisející, ovšem v celkovém kontextu tvorby webu jako nadřazeného tématu lze říci, že je nutno mít minimálně slušný pojem o všech rozebíraných tématech. 1

2 Tvorba statických prezentací 2.1 Základní pojmy www 2.1.1 Historie a budoucnost webu Hypertext, značkovací jazyk V historii vědeckých poznatků a vynálezů by bylo zřejmě možné dohledat více různých myšlenek, které svojí podstatou či některým rysem připomínají dnešní internet coby celosvětové informační médium. Za první dnešnímu webu již blíže podobnou vizi je často označována povídka Murraye Lenistera: A Logic Named Joe z roku 1946. V ní se hovoří o navzájem propojených počítačových terminálech, dostupných v každé domácnosti. Základní idea hypertextu pak může být nalezena například v díle Vannevara Bushe: As we may think, kde zařízení zvané Memex slouží k vytváření vazeb mezi dokumenty. Projekt Xanadu Teda Nelsona pak v roce 1965 přináší i pokus o softwarovou implementaci hypertextu. Bohužel nebyl textový editor Xanadu nikdy dokončen. O 4 roky později pak zaměstnanci IBM stvořili GML, který můžeme bez obav označit za příbuzného HTML. Example 1: Generalized Markup Language - Zobecněný značkovací jazyk :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.další odstavec Internet Formálním základem pro tuto síť globálních rozměrů (dnes) byl bezesporu protokol TCP/IP navržený Vintem Cerfem v roce 1974. Síť ministerstva obrany USA, zvaná ARPANET, vznikla už v roce 1962 a na Vintův protokol přešla v roce 1983. O rok později se od ARPANETu odtrhla vojenská část a zbytek (stále financovaný vládou) zůstal dostupný univerzitám pro výzkumné účely. Během osmdesátých let 2

se začaly výzkumů účastnit i velké firmy (např. Hewlett-Packard). A dále koncem osmdesátých let se ministerstvo obrany rozhodlo ARPANET vypnout, jelikož už prý nebyl potřeba. Národní vědecká nadace (rovněž financovaná z vládních zdrojů) mezitím zprovoznila vlastní páteřní síť NSFNET, ta po zrušení ARPANETu převzala jeho úlohu. Během několika let se k NSFNETu připojila spousta menších i velkých sítí - a tak vznikl Internet. Za zmínku jistě stojí ještě datum 30. dubna 1995, kdy byla páteřní síť NSFNETu zprivatizována. Už ty nejstarší podoby ARPANETu uměly skladovat soubory na FTP serverech či odesílat e-maily. Dávno před vznikem webu existovaly i DNS servery a další technologie globálně proslavené až v devadesátých letech. Vývoj webu V roce 1980 Tim Berners Lee, v té době nezávislý vývojář pracující pro European Organization for Nuclear Research (CERN), vyvíjí Enquire, software pro ukládání a provazování dat. Od roku 1984 Tim pracuje znovu v Cernu na způsobu efektivního sdílení (vědeckých) informací. V roce 1989 publikuje článek o svém systému a na konci roku 1990 má pohromadě všechno, od čeho se odpíchl dnešní internet: HyperText Transfer Protocol (HTTP) 0.9, the HyperText Markup Language (HTML), první webový prohlížeč WorldWideWeb, první webový server a také webové stránky, popisující samotný projekt. Růst webu První krůčky internetu realizovaly zejména vědecké organizace, které jej používaly pro sdílení svých informací. Další události lze charakterizovat výčtem příchozích (a často také zase odchozích) technologií: Gopher coby konkurenční protokol pro HTTP, umožňoval zobrazovat odkazy vedoucí ze stránky přímo jako hypertextová menu, data pak přípomínala souborový systém spíše než hromadu HTML souborů. ViolaWWW, Erwise jako první grafické prohlížeče webu běžící pod X-windows rozhraním Unixu. Mosaic jako velmi rychle se rozšiřující grafický prohlížeč zejména díky slušné podpoře multimédií a rychlé reakci autora na bug a new-features reporty uživatelů (to je dnes naprostá samozřejmost pro každou společnost či vývojáře tvořící či nabízející software byť jen zdarma). V roce 1994 pak byla svolána první čistě WWW konference v Cernu a použití webových technologií bylo zproštěno veškerých možných poplatků - v reakci na zpoplatnění jedné z implementací protokolu Gopher. V tom samém roce Tim Berners Lee zakládá W3C - World Wide Web Consortium, které si klade za cíl sdružovat 3

rozličné organizace pracující na vývoji webových technologií. W3C se zavazuje, že veškeré standardy, které vyvine, bude možno používat zdarma. Za další dva roky dochází k zřejmé komercializaci webu - uživatelé pochopili, že obousměrná komunikace v rámci celého světa umožní snadno nabízet služby a produkty ohromnému množství potencíálních zákazníků. Roste počet internetových obchodů. Období mezi roky 1998-2001 lze označit za dotcom bublinu, kdy se do internetového obchodu bezhlavě vrhá velké množství společností. Po splasknutí bubliny se spousta z nich z internetového obchodu stahuje, ne každá je totiž schopna najít dostatečně funkční obchodní model. Budoucnost webu V tomto okamžiku (rok 2010) se nacházíme v obodobí, které lze označit jako éru Web 2.0. Mezi hlavní znaky tohoto období jmenujme například inteligentní vyhledávací služby, sociální sítě, média dostupné plně online, efektivní výměnu dat (agregace, syndikace), mashupy (využívání více webových služeb najednou díky jejich standardizovaně popsaným a poskytnutým rozhraním). Dalším znakem změny je výměna standardního způsobu pro přístup k internetu. Tím je sice stále osobní počítač, sekundují mu ale různá další zařízení, například tzv. chytré telefony, či herní konzole. Jak už nás minulost dobře naučila, pokračování událostí nelze dost dobře odhadnout dopředu. Letmým pohledem na současné trendy si ale si ale lze udělat alespoň přibližnou představu o budoucích technologiích: Sémantický web je označení pro novou generaci webu. Život uživatele by měla usnadňovat schopnost strojů rozumět informacím, analyzovat je (pomocí umělé inteligence) a vybírat a uzpůsobovat je tak našim potřebám. Inteligentní vyhledávání, sledování informací či automatizace některých úloh zatím prováděných člověkem tak budou najednou realizovatelné. Základní stavební (teoretické modely i již prakticky použitelné technologie) kameny jsou v tento okamžik již dostupné. Ještě nějakou dobu (v řádu let, pravděpodobně) ale vezme správná přeměna dat na webu do sémantických formátů. Nicméně již existují firmy, které se na tomto procesu aktivně podílejí. Virtuální život V posledních letech, zejména v rozvinutějších asijských kulturách, dochází k opravdu silnému rozmachu existence lidí v tzv. virtuálním životě. Lidé si na život pouze hrají ve virtuálním světě, dostupném přes obrazovky monitorů. Protože dost velká masa lidí žijící v takových světech pak poskytuje možnosti pro komerční sféru - téměř v každém světě lze nalézt tunel pro převod peněz či dalších hodnot z virtuální roviny do skutečného světa. Situaci dobře ilustruje obrázek pod textem, shrnující nejznámější představitele takových virtuálních světů. K virtualizaci života ovšem dochází ve obou směrech 4

- prvně lidé žijí ve virtulním světě, druhak náš svět je postupně převáděn do přibližné digitální podoby pomocí technologií jako je např. Google Earth. Mobilní internet Zejména v částech Asie, v Evropě a díky telefonu iphone i v USA je internet pro velkou část obyvatel dostupný v mobilním telefonu. Aplikace využívající GPS navigace mohou nabídnout služby jako je personalizované nabídky, pokud se přiblížíte k nákupnímu centru, navigace automobilu využívající aktuálních či komunitních informací, nebo třeba organizování schůzek se svými přáteli. Ekonomika pozornosti Ekonomika pozornosti je trhem, kde uživatelé obdrží službu zdarma za to, že věnují svoji pozornost nějaké reklamě či obchodní nabídce. Může jít o nákupní servery, vyhledávání, zpravodajství, či další volně nabízené služby. Webové stránky zároveň webovými službami Díky blížícímu se trendu automatizované výměny dat je čím dál tím běžnější, že weby poskytují data nejen ve formátu HTML, ale i ve formě webových služeb, například pomocí standardního rozhraní REST, či přes dobře popsaná API, snadno využitelná pro tvorbu nejrůznějších mashupů (například server poskytující mapové podklady + databáze restaurací). Online média Tento trend je dobře sledovatelný již několik roků. Existuje již mnoho serverů, kde je možné shlédnout či vkládat vlastní multimediální obsah. Tuto uživateli vyhledávanou službu už zaregistrovaly například i televizní společnosti a často velkou porci svého programu nabízejí i v online podobě. Mezinárodní web V několika posledních letech dochází k rozvoji internetu i na zatím nepřílíš poznamenaných kontinentech jako je Asie nebo Afrika. Aktuální údaje tvrdí, že podíl uživatelů mimo USA na anglicky mluvícím internetu rapidně roste. Proto se dá očekávat, že rozložení jazyků se brzy dost promění a angličtina nemusí zůstat jazykem internetu navždy. Personalizace S nástupem chytrých Web 2.0 aplikací přišla tzv. personalizace webu - obsah i forma sdělení je často automatizovaně i přímo uživatelem upravována. Například je možné přízpůsovit si homepage vašeho oblíbeného informačního portálu. V personalizaci je hlavním činitelem Google. Čím více informací o sobě poskytnete, tím přizpůsobenější data a služby se k vám pak dostanou. 5

Figure 1: Jednoduchá tabulka ukazující známé představitele virtuálních světů 2.1.2 Server, doména, webhosting a další základní pojmy Pro lepší pochopení veškerého dalšího výkladu je nezbytně nutné přesně porozumět základním pojmům webu. Proto uvádím tento text výčtem a vysvětlením několika základních pojmů tak, aby nedošlo k následným nepřesným interpretacím, či dokonce nesprávnému vykládání významů. Internet je globální systém navzájem propojených počítačových sítí. Umožňuje miliardám uživatelů přistoupit k širokému spektru informací a služeb, mezi nimiž je možné jmenovat například www či emailovou komunikaci. WWW - World Wide Web je sítí počítačů, které pomocí HTTP protokolu (či několika dalších, HTTP principiálně podobných technologií) poskytují informace ve formě tzv. webových stránek. Takové servery jsou tedy nazývány webové a klientský software, který je umožňuje stahovat do počítače a zobrazovat, se nazývá webový či internetový prohlížeč. Server je počítač, který poskytuje služby či informace dalším počítačům. V kontextu www pak mluvíme o webovém serveru, který poskytuje prohlížečům webové stránky. 6

Doména či doménové jméno je názvem, který jednoznačně identifikuje počítač v Internetu. Jeden počítač může obsluhovat více domén, doména ale směruje vždy na jeden počítač. Má nejméně dvě části, například v doméně seznam.cz jsou části seznam a cz. Zprava doleva jsou jednotlivé části domény méně obecné, nalevo jsou pak nejvíce konkrétní názvy, napravo naopak nejvíce obecné. První část zprava bývá nazývána jako top level domain. Prohlížeč je software, používaný k získávání a prohlížení webových stránek. URI je řetězec znaků jednoznačně identifikující dokumenty (zdroje) na internetu. URL je standardizovaný způsob pro adresování webových stránek. URL je poddruhem URI. Protokol je standardizovaný rámec (zpravidla jazyk a komunikační pravidla) pro vzájemnou komunikaci počítačů. HTTP je množina standardizovaných pravidel pro posílání textových dokumentů pomocí internetu. Na jednom konci komunikace je tzv. HTTP klient sofware, na druhém konci pak HTTP server. TCP/IP je sadou protokolů pro spojení mezi dvěma počítači na internetu. TCP zodpovídá za bezchybovou komunikaci, IP za přenos dat pomocí paketů. TCP/IP je považován za hlavní protokol internetu. WAN je počítačová síť, která pokrývá velké geografické vzdálenosti (není lokální). Nejznámějším příkladem WAN sítě je internet. LAN je počítačová síť, která spojuje počítače na malé geografické vzdálenosti (domácí či firemní síť). Webová služba je software provozovaný na webových serverech, které poskytují nějakou službu dalším počítačům, prohlížečům, či jednotlivcům, za použití standardních webových technologií (HTTP protokol). 2.1.3 Registrace domény Internetovou doménu, coby jednoznačné jméno (identifikátor) počítače nebo počítačové sítě, je nutno si před použitím zaregistrovat. Registrace probíhá v následujících krocích: výběr volného doménového jména (k registrovaným internetovým doménám se uchovávají podrobné informace o jejich provozovatelích k tomu slouží databáze whois, ze kterých lze tyto informace volně získat) 7

objednání domény a platba registrátorovi či resellerovi domény (zatímco právo registrovat doménu má v ČR jen několik společností, reselleru neboli zprostředkovatelů prodeje je u nás daleko více) za registraci a vyhrazení domény po určené období pouze pro vás nasměrování domény na fyzický server, obvykle webhostingový server (úpravou DNS záznamů na správné hodnoty, nejčastěji IP adresy či doménová jména cílových serverů). 2.1.4 Registrace webhostingu Webhosting je pronájem prostoru pro webové stránky na cizím serveru. Pronajímatel serveru bývá označován jako poskytovatel webhostingu (webového prostoru). Webhosting je pouze samotné umístění stránek na serveru poskytovatele. Aby se uživatelé internetu ke stránkám dostali, je potřeba mít zaregistrovánu doménu (viz výše)- Ceny za webhosting se pohybují od pár Kč až po několik tisíc Kč za měsíc. Existuje i bezplatná varianta, tzv. freehosting. Freehosting obvykle nezahrnuje žádné záruky ohledně funkčnosti, má omezenou technickou podporu. Hlavní nevýhodou webhostingu je to, že jeden server poskytovatele sdílí často stovky či dokonce tisíce webhostingových zákazníků. Můžete se tedy stát, že v případě poruchy či přetížení jednoho webu jsou významně ovlivněny či dokonce znefunkčněny i všechny ostatní na stejném serveru. Výhodou je naopak nízká cena zákazník webhostingu zaplatí pouze zlomek toho, kolik by ho stál provoz vlastního serveru. Registrace webhostingu probíhá v následujících krocích: výběr vhodného poskytovatele - roli hraje cena, spolehlivost, technologie (na jedné straně skriptovací jazyky např. PHP, ASP, JSP, Ruby, či přímo typ webového serveru Apache, IIS, na druhé straně databáze - např. MySQL, PostgreSQL, Firebird, atd.) objednání služby a platba poskytovateli zprovoznění projektu na hostingu - často bývá nastavení serverových technologií trochu odlišné od vývojové prostředí na vašem počítači, proto je třeba věnovat této fázi zvýšenou pozornost a dostatek času. 8

Figure 2: Forpsi.com - jeden z nejznámějších registrátorů domén v ČR Figure 3: Ceskyhosting.cz - jeden z nejznámějších poskytovatelů webhostingu v ČR 9

2.2 Webové CMS Webové CMS (dále také WCMS) je speciálním poddruhem CMS (Content Management System redakční systém umožňující správu obsahu internetové prezentace), který je implementován jako jedna webová aplikace, obsluhující velké množství prezentací, jejich správců a zejména návštěvníků. Webové CMS umožňuje správcům vytvářet a editovat obsah prezentace bez větší znalosti internetových technologií, jako je HTML, CSS, a podobně. Obsahem je míněn nejen text označkovaný pomocí HTML, ale také například multimédia (fotogalerie, videa), metadata, nebo dynamické objekty (guestbooky, diskuse, kontaktní formuláře, atd.). Administrace probíhá nejčastějí přímo ve webovém prohlížeči, některé komplexnější Webové CMS ale může vyžadovat použití vlastního tlustého klienta. Mezi obvyklé vlastnosti webových cms můžeme řadit zejména tyto: Šablonovací systém dovoluje buď použít už v systému integrované, nebo dokonce vytvořit vlastní sady HTML a CSS pravidel (šablony), pomocí kterých je možné pak vzhled celé prezentace změnit najednou Snadno editovatelný obsah je obvykle zajištěn přítomností WYSIWYG editoru pro běžného uživatele internetu není velký rozdíl v použití MS WORDu a takovéhoto editoru, ve kterém jsou změny okamžitě vidět tak, jak budou zobrazeny po publikaci i na webu Moduly, rozšíření, add-ony, pluginy, a jistě mnoho dalších termínů pro ten samý princip: základní funkčnost systému může být rozšířena pomocí (obvykle pouze v rámci placené varianty služby) balíčků nových funkcí Automatické aktualizace systému: díky nim systém dokáže reagovat na změny ve webových standardech nebo například objevené bezpečnostní díry. Oprávnění uživatelů lze často řídit na více úrovních, nejen omezit přístup uživatele do jednotlivých sekcí, podstránek, ale také například umožnit publikaci obsahu až poté, co jej další uživatel schválí Časem řízená publikace: publikace (archivace, odstranění, atd.) dokumentů v předem určený okamžik Vícejazyčnost: možnost přiřadit k obsahu i jeho jazykové mutace Syndikace obsahu je v WCMS často vyřešena například generováním datových kanálů RSS či Atom, či automatickými emailovými uporozněními návštěvníkům na změny a aktualizace Mezi světově nejpoužívanější Webové CMS můžeme zařadit například Google Sites, Weebly v zahraničí, u nás pak jako nejzajímavější služby tohoto typu jmenujme Webnode či Estránky. Webnode lze považovat za velmi povedené Webové CMS, zdařile v sobě kombinuje uživatelskou příjemnost a zároveň velkou škálu funkčnosti. 10

Namátkou několik screenshotů z vstupu do administrace, správy prezentace, editace hlavní stránky a jedné z nadstandardních služeb - převedení webové prezentace na vlastní doménu: 11

Figure 4: Webnode.cz správa projektů Figure 5: Webnode.cz editace hlavní stránky 12

Figure 6: Webnode.cz administrace projektu 13

Figure 7: Webnode.cz převedení projektu na vlastní doménu 14

2.3 XML XML (extensible Markup Language) je: podmnožinou SGML (Standard Generalized Markup Language) jednoduchý značkovací jazyk framework umožňující definovat strukturované datové formáty nejčastější formát pro výměnu dat. Jednoduše řečeno je XML množina pravidel pro tvorbu strukturovaných dokumentů. Je nezávislé na platformě i jazyce, rozšiřitelné a snadno strojově zpracovatelné. Z těchto důvodů je velká část dat na Internetu uložena právě ve formě XML dokumentů. Pro snažší manipulaci s XML bylo vyvinuto mnoho podpůrných jazyků: XLink (adresování dokumentů), XPath (adresování částí dokumentů), XPointer (založeno na XPath, s přidanou hodnotou adresovat řetězce, uzly, rozsahy), XSLT (pro transformaci XML na jiné druhy dokumentů), XML Schema (pro definici struktury dokumentů). 2.3.1 Syntaxe XML XML dokumenty jsou ukládány jako textové soubory. Text obsahuje značky (počáteční tagy, koncové tagy, prázdné tagy, entity, znakové reference, komentáře, CDATA sekce, DTD, procesní informace, XML deklarace, textové deklarace, mezery) a znaky. Základní termín je element, označený počátečním a koncovým tagem. Elementy obsahují další elementy. Každý element může obsahovat atributy. Elementy a atributy mají pevnou syntaxi, která je: <element_name attribute="value">content</element_name> Objekt <element name> se nazývá počáteční tag elementu element name, objekt </element name> se nazývá koncový tag elementu element name. Všechny znaky a elementy mezi počátečním a koncovým tagem jsou nazývány obsahem elementu. Obsah může být jakákoliv kombinace elementů a znaků. Atributy jsou uloženy v počátečním tagu. Example 2: Následující úryvek XML sděluje informaci, že František Kop hraje v hudební skupině JAR. Element je nazván <František_Kop Genre="Jazz"> <Instrument>Saxophone</Instrument> <Group>JAR</Group> </František_Kop> 15

následovník, potomek, pokud je obsažen v jiném elementu předek, pokud obsahuje nějaké elementy dítě, pokud je přímým potomkem nějakého elementu rodič, pokud má nějaké děti sourozenec jiného elementu, pokud mají oba stejného rodiče. Remark 1: Element, který je prvním elementem dokumentu, se nazývá kořenovým elementem. Kořen je jediný element, který nemá sourozence ani rodiče. Velmi důležitou vlastností XML je jeho modularita. To znamená, že konkrétní jména elementů, zanoření, jména atributy, či datové typy, mohou být specifikovány vně XML dokumentu pomocí jazyků Document Type Definition (DTD), či XML Schema. Definition 1: O dokumentu řekneme, že je well-formed 1, pokud: obsahuje právě jeden kořenový element jsou všechny tagy správně zanořeny - každý tag je zakončen na stejné úrovni jako byl započat jsou všechny tagy zakončeny (vyjímkou jsou tagy se speciální syntaxí) jsou všechny hodnoty atributů uvozeny a zakončeny uvozovkami Definition 2: O dokumentu řekneme, že je validní, pokud splňuje definici dokumentu vytvořenou pomocí DTD, nebo XML Schema. 2.3.2 Jmenné prostory Pokud se v dokumentu používá více knihoven (DTD či XML Schema specifikací), je zde určitá pravděpodobnost konfliktu mezi stejně nazvanými elementy s obdobným, či dokonce různým významem. Řešení nabízí koncept jmenných prostorů, kde každý element i atribut musí být identifikován pomocí jeho URI. Elementy a atributy jsou pak zapisováný ve speciálním formátu s prefixem a dvojtečkou. Tento prefix je jednoznačně přiřazen k URI v deklaraci jmenných prostorů na začátku dokumentu. Pokud je tedy možnost konfliktů, prefixová forma zápisu umožní rozlišit elemnty či atributy z rozdílných specifikací. Example 3: Atribut xmlns určuje jmenný prostor všech zanořených elementů/atributů (jmenné prostory pro xhtml, mathml). Atribut xmlns:xlink přiřazuje prefix xlink k URI http://www.w3.org/1999/xlink. <?xml version="1.0"> <html xmlns="http://www.w3.org/1999/xhtml" 1 Ve skutečnosti je více podmínek pro správně strukturovaný dokument, ale tyto 4 jsou nejdůležitější. 16

xmlns:xlink="http://www.w3.org/1999/xlink"> <head> <title>dokument, který používá tři rozdílné jmenné prostory</t </head> <body> <h1>mathml</h1> <math xmlns="http://www.w3.org/1998/math/mathml"> <mrow> <mo>(</mo> <mi>x</mi> <mo>+</mo> <mi>y</mi> <mo>)</mo> </mrow> </math> <p xlink:type="simple" xlink:href="http://www.w3.org/math">více o MathML</p> </body> </html> 2.4 HTML, XHTML HTML (HyperText Markup Language) je: značkovací (nikoliv programovací) jazyk pro hypertext aplikací SGML (Standard Generalized Markup Language). jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu 2.4.1 Historie HTML V roce 1989 spolupracovali Tim Berners-Lee a Robert Caillau na propojeném informačním systému pro CERN, výzkumné centrum fyziky poblíž Ženevy ve Švýcarsku. V té době se pro tvorbu dokumentů obvykle používaly jazyky TeX, PostScript a také SGML. Berners-Lee si uvědomoval, že potřebují něco jednoduššího a v roce 1990 byl tedy navržen jazyk HTML a protokol pro jeho přenos v počítačové síti HTTP (HyperText Transfer Protocol přenosový protokol hypertextu). Zároveň také Tim Berners-Lee napsal první webový prohlížeč, který nazval WorldWideWeb. V dalších letech následoval rychlý rozvoj webu, takže bylo nutné pro HTML definovat standardy. Verze 0.9 Byla vydána zhruba v roce 1991. Nepodporuje grafický režim (verze, kterou vytvořil 17

Tim Berners-Lee). Verze 2.0 Zachycuje stav jazyka v polovině roku 1994. Standard vydala roku 1995 komunita IETF (Internet Engineering Task Force). Je to první verze, která odpovídá syntaxi SGML. Přidává k původní specifikaci interaktivní formuláře a podporu grafiky. Verze 3.2 Byla vydána 14. ledna 1997 a zachycuje stav jazyka v roce 1996. Připravovaná verze HTML 3.0 nebyla nikdy přijata jako standard, protože byla příliš složitá a žádná firma nebyla schopna naprogramovat její podporu. Standard už vydalo W3C, stejně jako následující verze. Přidává k jazyku tabulky, zarovnávání textu a stylové elementy pro ovlivňování vzhledu. Verze 4.0 Byla vydána 18. prosince 1997. Do specifikace jazyka přibyly nové prvky pro tvorbu tabulek, formulářů a nově byly standardizovány rámy (frames). Tato verze se snaží dosáhnout původního účelu prvky by měly vyznačovat význam (sémantiku) jednotlivých částí dokumentu, vzhled má být ovlivňován připojovanými styly. Některé prezentační elementy byly zavrženy. Verze 4.01 Byla vydána 24. prosince 1999. Tato verze opravuje některé chyby verze předchozí. Podle původního předpokladu se mělo jednat o poslední verzi, po které by se přešlo na XHTML. Verze 5 7. března 2007 byla založena nová pracovní skupina HTML, jejíž cílem je vývoj nové verze HTML. V květnu 2007 bylo odhlasováno, že základem nové specifikace se stanou Web Applications 1.0 a Web Forms 2.0 ze specifikace WHATWG. Jako název nové specifikace bylo odhlasováno HTML 5. Specifikace by měla být hotova v letech 2010-2012 (odkdy ji začnou vývojáři webových aplikací používat), ukončení vývoje specifikace po vyřešení problémů a opravení všech chyb se odhaduje až na rok 2022). 2.4.2 Koncepce jazyka HTML umožňuje tvorbu strukturovaných dokumentů, obsahuje značky pro tvorbu: sémantiky textu, tedy nadpisů, odstavců, seznamů, odkazů, citací, a dalších obrázků a multimediálních objektů interaktivních formulářů HTML dokument je tvořen HTML elementy (tagů). Ke každému dokumentu je možné připojit soubory se skripty (Javascript) či kaskádovými styly (CSS). 18

2.4.3 Struktura dokumentu Deklarace DTD je povinná až ve verzi 4.01, je uvedena direktivou!doc- TYPE. Kořenový element element html (značky <html> a </html>) reprezentuje celý dokument. Kořenový element je povinný, ale otevírací a ukončovací značka samotná povinná není (pokud tyto značky nebudou v těle dokumentu uvedeny, prohlížeč si je sám doplní podle kontextu). Hlavička elementu obsahuje metadata, která se vztahují k celému dokumentu. Definují např. název dokumentu, jazyk, kódování, klíčová slova, popis, použitý styl zobrazení. Hlavička je uzavřena mezi značky <head> a </head>. Element head je opět povinný, ale jeho otevírací a koncová značka povinná není, prohlížeč ji sám doplní podle kontextu. Tělo dokumentu obsahuje vlastní text dokumentu. Vymezuje se značkami <body> a </body>. Element body je povinný, ale jeho otevírací a koncová značka povinná není, prohlížeč ji sám doplní podle kontextu. 2.4.4 Druhy značek Značky lze z hlediska významu rozdělit na tři základní skupiny: Strukturální značky rozvrhují strukturu dokumentu, příkladem jsou odstavce (<p>), nadpisy (<h1>, <h2>). Dodávají dokumentu formu. Popisné (sémantické) značky popisují povahu obsahu elementu, příkladem je nadpis (<title>) nebo adresa (<address>). Současný trend je orientován právě na sémantické značky, které usnadňují automatizované zpracovávání dokumentů a vyhledávání informací v záplavě dokumentů na webu. Vyvrcholením této snahy je v současné době jazyk XML. Stylistické značky určují vzhled elementu při zobrazení, typickým příkladem je značka pro tučné písmo (<b>). Od tohoto druhu značek se postupně upouští, trendem je používání kaskádových stylů, které vzhled popisují odděleně od obsahu dokumentu. Mezi důvody pro neužívání těchto značek patří především to, že tyto značky jsou orientovány na prohlížení na obrazovce počítače, příliš se však nepočítá s používáním dokumentu jiným způsobem alternativní prohlížeče pro postižené (čtečky pro slepce), v mobilních zařízeních a podobně. Kaskádové styly umožňují definovat rozdílné zobrazení pro různá zařízení. Example 4: Příklad HTML dokumentu ve verzi 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> 19