Natalya Goncharova. Tvorba webu pomocí HTML 5.0. Bakalářská práce

Transkript

1 Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Vyšší odborná škola informačních služeb v Praze Natalya Goncharova Tvorba webu pomocí HTML 5.0. Bakalářská práce 2012

2 PROHLÁŠENÍ Prohlašuji, že jsem bakalářskou práci na téma Tvorba webu pomocí HTML 5.0. zpracovala samostatně a použila pouze zdrojů, které cituji a uvádím v seznamu použité literatury. V Praze dne Podpis

3 ANOTACE Předložená bakalářská práce je zaměřena na srovnání dvou značkovacích jazyků HTML 4.01 a HTML 5.0. Práce je rozdělena na teoretickou a praktickou část. Teoretická část obsahuje obecný přehled historického rozvoje značkovacího jazyka, popis nových elementu a sféry jejích použití. Obsah teoretické části tvoří také popis fungování webu na úrovních protokolů a vysvětluje jednotlivé pojmy spojené s webem. Praktická část této bakalářské práce zahrnuje rozsáhlý popis samotné tvorby webu. Zjištěni účelu a obsahu webu, grafického řešení, tvorbu stránek v HTML 5.0 a porovnávání kódu s jeho dřívější verzi HTML Dále se zabývá spojováním HTML a CSS, hledáním vhodného redakčního systému a samotnou implementací webu na vybraný redakční systém. The present thesis focuses on the comparison of two markup languages HTML 4.01 and HTML 5.0. The work is divided into theoretical and practical part. The theoretical part contains a general overview of the historical development of the markup language description of the new elements and spheres of its use. The content of the theoretical part consists of a description of the operation site at the protocol level and explains the various concepts associated with the web. The practical part of this thesis includes an extensive description of the work site. Determining the purpose and content of the web, graphics, creating pages in HTML 5.0 and comparing the code with the earlier version of HTML 4.01 It also deals with linking HTML and CSS, finding a suitable content management system and the actual implementation of the selected web content management system.

4 1 Obsah 1 Obsah Úvod Historie HTML MIME typy Historie HTML Chronologie rozvoje HTML od roku 1997 do XHTML What Working Group? DOCTYPE Režim kompatibility Standardní režim Částečně standardní režim World Wide Web WWW a internet Běžné služby nabízené Internetem Protokoly MAC adresa síťové karty Základní pojmy a zkratky Webhosting Nové elementy v HTML <section> < nav > <article> < aside> <hgroup> <header> < footer >

5 9.1.8 < mark > Proč používat HTML 5.0? Struktura HTML Video a audio Reprezentace dokumentu Tvorba webové stránky Porovnávání webových stránek Web číslo Web číslo Web číslo Web číslo Web číslo Web číslo Shrnuti hodnocení Webdesing Struktura Tvorba grafické části Varianta číslo Varianta číslo Varianta číslo Kódování stránek Přidávání kódu CSS Syntax Implementace HTML kódu Implementace WAMPSERVER Vytvoření databáze Přidávání kódu do WordPress Přidávaní položek do menu

6 18 Vytvoření dynamického obsahu na stránce pomocí JavaScriptu Výměnné obrázky Závěr Slovník

7 2 Úvod Téma bakalářské práce Tvorba webu pomocí HTML 5.0. jsem si vybrala z několika důvodů. Podle mého názoru je téma aktuální a tvorba stránek v HTML 5.0 se stálé rozvijí a bude se rozvíjet ještě dalších deset let. Druhým důvodem je můj zájem o to, jak se vytvářejí webové stránky. Chtěla jsem projít všechny jednotlivé kroky spojené s tvorbou webu: zjištění požadavků budoucího majitelé webu, práce nad grafické části, psaní HTML kódu, implementace a tím se naučit vytvářet weby. Cílem této práce je srovnání jazyků HTML 4.1 a HTML 5.0. Provedení benchmarkingu šesti webových stránek VŠ pedagogů s čilém vybrat nejzajímavější prvky stránek a vyzkoušet prakticky jejich naprogramování pomocí HTML 5.0. Za účelem dosažení stanoveného cíle je potřeba získání teoretických a praktických znalostí v oblastech: webové grafiky značkovacích jazyků HTML 4.01 a HTML 5.0. kaskádových stylů (CSS) open source redakčních systémů implementace webu Pro větší přinos pro mého zadavatele, který je pedagogem VŠ proběhlo několik setkání se zadavatelem pomocí kterých jsem zjistila, z čeho se bude skládat web. Jeho obsah, jednotlivé položky (např. menu, hlavička atd.). Jak průměrně má vypadat graficky a také další momenty, které se tykají bud grafiky či obsahu. Další etapou bude práce s grafikou s ohledem na požadavky kladené zadavatelem. Inspiraci pro grafiku, budu čerpat z různých webů. Učení práci v samotném programu Photoshop bude probíhat pomocí video lekcí. Pro lepší porovnávání HTML 4.01 a HTML 5.0. je potřeba se naučit jak teorii, tak i v praxi použití těchto dvou jazyků. HTML se používá spolu s kaskádovými styly CSS. A proto jako další etapa učení HTML je učení použití CSS a jejích spojení mezi sebou. Pro zjednodušení a zvětšení výkonnosti webu, webová stránka bude běžet pomocí open source redakčního systému. Pro výběr nejvhodnějšího provedu testování několika open source programů pomocí prostudování implementaci a testové implementací. Závěrovým krokem bude implementace webu, která se bude skládat z několika kroků: 7

8 Stažení a instalace samotného programu a serveru Implementace HTML kódu Přidávání stránek a přidávání informací na web 8

9 3 Historie HTML 3.1 MIME typy Před tím než začnu psát o historii HTML5, chtěla bych vysvětlit několik technických momentů. Zejména MIME typ. [1] Vždy když si prohlížeč vyžádá stránku, tak webový server odešle "hlavičku" dřív než odešle celou aktuální kódovou stránku. Tyto tituly jsou obvykle neviditelné, ačkoli máte možnost pomocí vývojářských nástrojů je vidět, pokud chcete. Titulky jsou důležité, protože říkají svému prohlížeči, jak interpretovat rozvržení stránky. Nejdůležitější titul je Content-Type a vypadá takto: [1] Content-Type: text/html "Text / html" se nazývá "typ obsahu" nebo "MIME typ" stránky. Tato hlavička pouze určuje, že se jedná o zdroj stránky, a jak se tento zdroj zobrazuje. Obrázky mají své vlastní MIME-typy (image / jpeg pro JPEG, image/png pro PNG, atd.). JavaScript soubory mají, svůj vlastní MIME typ. CSS mají své vlastní MIME typy. MIME typy se objevují u všech. Internet funguje na MIME typech. [2] První generace webových serverů, která vznikla v roce 1993, neodesílala titul Content-Type, protože ten ještě ani neexistoval. Content-Type nebyl vynalezen do roku Kvůli tomu, že ještě pořád máme staré webové stránky, tak některé populární webové prohlížeče za určitých okolností ignorují tituly Content-Type, tento jev se jmenuje sniffing obsahu. Ale v zásadě všechno, co jste kdykoli hledali na webu HTML stránky, obrázky, PDF, video, hudba atd. se vám vracelo s určitým MIME typem v záhlaví Content-Type. [1] 3.2 Historie HTML5 25. února 1993 Marc Andreessen navrhnul nový HTML teg IMG s povinným argumentem SRC="url". Tag <img> je určen pro zobrazení obrázků na webové stránce v grafickém formátu GIF, JPEG nebo PNG. To není uzavírací tag, je to jen jeden tag. Tento tag má jediný povinný atribut src, který určuje cestu na obrázek. Prohlížeče musí být flexibilní, pokud jde o grafické formáty, které podporují. Pokud je nebude podporovat, ať si dělá, co chce. [1] A jako alternativu navrhnul zobrazení bitmapového obrázku jako zástupný znak. [2] Příklad: <IMG SRC="file://foobar.com/foo/bar/blargh.xbm"> 9

10 Autoři jazyka HTML předpokládali, že tag by mohl být vložen do odkazu jako i všechno ostatní a mohl by mít vlastnosti běžného odkazu. Byla přidána možnost použití obrázku jako odkaz na jiný soubor, přidáním <img> do kontejneru <a>. [1] Tony Johnson to doplnil argumentem NAME= name. Funkčnost zůstala skoro stejná. Myšlenka parametru name umožnila prohlížeči nainstalovat vložené obrázky. [2] Např. <ICON name="noentry" href=" Byla přidána možnost použití obrázku jako odkaz na jiný soubor přidáním <img> do kontejneru <a>. Např. <a href="lorem.html"><img src="images/girl.png" width="189" height="255" alt="lorem"></a> Vývojáři HTML diskutovali o tom, jak definovat typ souboru, který by tam vkládaly, protože by to také mohl být nějaký audio nebo video soubor. Jeden ze způsobů je: <IMG HREF=" CONTENT-TYPE=audio/basic> V případě, že se jedná o audio soubor. Tento návrh nebyl realizován, později byla přidaná podpora pro vkládání multimediálních objektů s prvkem <embed>. A dále tyto objekty se rozdělily zvlášť na <video>, <audio> a <img> tagy. [3] V roce 1993, Dejv Regett navrhnul HTML+ jako evoluci standartu HTML. Ale návrh nebyl realizován a byl změněn na HTML 2.0. V HTML 2.0 byli formalizované funkce, které jsou dnes v běžném používání. "Tato specifikace spojuje, vysvětluje a formuje sadu funkcí, které odpovídají přibližně schopnostem HTML v běžném používání až do června 1994." [1] Později Dejv napsal HTML 3.0, založené na jeho dřívějším projektu HTML+. Ale tento projekt nebyl také nikdy zrealizován a byl nahrazen HTML 3.2. HTML 3.2 přidává běžně používané funkce, jako jsou tabulky, applety i a tok textu kolem obrázků, a zároveň podporuje plnou zpětnou kompatibilitu s existujícími standardní HTML 2.0. [1] Dejv stal spoluautorem HTML 4.0, vyvinutý z HTML Tidy, pomohl s XHTML, XForms, MathML a jiné moderní specifikace W3C. [1] V původním roce 1993, Marc Andreessen spekuloval o možnosti použití procedurálního grafického jazyka, pomocí kterého by mohly být vložené libovolné hypertextové odkazy připojené k ikonkám, obrázkům, textu atd. [1] 10

11 Tato myšlenka byla podpořena. V dnešní době moderní prohlížeče podporují jak SVG (škálovatelná vektorová grafika), tak i <canvas> (procedurový režim vykreslování bitmap a grafických primitiv). [1] 3.3 Chronologie rozvoje HTML od roku 1997 do 2004 V prosinci 1997, World Wide Web Consortium (W3C) vydal HTML 4.0 a okamžitě ukončil pracovní skupinu HTML. Méně než za dva měsíce samostatná pracovní skupina zveřejnila W3C XML 1.0. Po třech měsících lidé, kteří provozují W3C, uspořádali seminář s názvem Utváření budoucnosti HTML, aby odpověděli na otázku: W3C odmítl HTML? A jejich odpověď byla taková: V průběhu diskuse bylo dohodnuto, že další rozšíření HTML 4.0 bude těžké. A proto to převedeme z HTML 4.0 do XML aplikací. Navrhovaný způsob bude bez omezeného začátku nového života s novou generaci HTML na základě souboru XML tagů. [1] W3C restartoval Pracovní Skupinu HTML k vytvoření tohoto soubor XML tagů. Jejich prvním krokem v prosinci 1998 byl návrh dočasné specifikaci, která prostě přepracovala HTML do XML bez přidání jakýchkoli nových atributů a elementů. Tato specifikace se později stala známa jako XHTML 1.0. Ta určila, nový MIME typ pro XML dokumenty - application/xhtml+xml. [1] Nicméně, pro usnadnění migrace stávajících stránek HTML4, byla vložena příloha C, která "shrnuje konstrukční pokyny pro autory, kteří chtějí, aby jejich XHTML dokumenty byli zobrazeny na stávajících uživatelských agentech HTML". Dodatek C vás upozorní na to, že umožňuje autorem tzv. XHTML stránek stalé je přenášet do MIME typu text/html. [1] Dalším cílem byla web-forma. V září 1999 stálá Pracovní Skupina HTML zveřejnila první projekt XNTML Extended Froms. Uvedla v prvním odstavci přibližně toto: [1] Po pečlivém zvážení se Pracovní Skupina HTML rozhodla, že cíle další generace formulářů se neshodují se zachováním zpětné kompatibility s prohlížeči určené pro starší verze HTML. Našim cílem je zajištění čistoty nových vzorů (XHTML Rozšířené Formy) na základě souhrnu přesně definovaných požadavků. Tyto požadavky jsou popsány v tomto článku a na základě zkušeností s širokou škálou aplikačních forem. [1] O několik měsíců později SHTML Extended Froms byl přejmenován v XForms a stěhoval se do svojí vlastní pracovní skupiny. Tato skupina pracovala 11

12 souběžně s pracovní skupinou HTML a nakonec publikovala své první vydání XForms 1.0 v říjnu [1] Po úplném přechodu na XML se pracovní skupina HTML zaměřila na vytvoření nové generace HTML. V květnu 2001 bylo zveřejněno první vydání XHTML 1.1, ke kterému přidali jenom několik drobných funkcí v horní částí XHTML 1.0., ale také byla odstraněna mezera Přílohy C. Se začátkem verze 1.1 musí být všechny dokumenty předány s typem MIME application/xhtml+xml. [1] 12

13 4 XHTML Proč MIME typy jsou tak důležité? Odpověď se skládá ze tří slov: drakonické zpracování chyb. [1] Prohlížeče se vždy k HTML chovaly shovívavě. Třeba pokud byste vytvořili stránku v HTML, ale zapomněli byste označit </ head>, prohlížeč bude stránku stále zobrazovat. Ale stejně musíte dávat pozor na zavírací tagy a dodržovat jejich správnou hierarchii, pokud byste si vytvořili kód jako je <b><i></b></i>, prohlížeč to nějak zpracuje a půjde dál, bez zobrazení chybové zprávy. [4] Jak se dalo očekávat, autoři mohly psát webové stránky i s chybami a zlomený HTML byl funkční. A tím pádem bylo vytvořeno velké množství tzv. zlomených webových stránek. Podle některých odhadů více než 99% HTML stránek na webu dnes obsahuje alespoň jednu chybu. Ale kvůli tomu, že prohlížeče nehlásí chyby, nikdo je nikdy neopravuje. [1] Při zjištění tohoto problému, je W3C začal opravovat. XML publikovaný v roce 1997 se vytrhl z tradice odpouštění chyb a rozhodl, že všechny aplikace, které konzumují XML, musí brát v úvahu tzv. "syntax" chyby jako fatální. Tato koncepce selhání při zjištění první chyby je známá pod názvem drakonické zpracování chyb, podobné řeckému vůdci Drakontu, který stanovil trest smrti za sebemenší porušení svých zákonů. Když W3C přeformuloval HTML jako slovník XML, požadoval, aby všechny dokumenty zaslané do nového MIME typu application / xhtml + xml byly závislé na drakonickém zpracování chyb. Jestli máme alespoň jednu syntaktickou chybu na stránce XHTML, např. zapomenutý tag </head> nebo špatně vložené počáteční a koncové tagy, prohlížeč nebude mít jinou možnost, než ukončit zpracování a zobrazit chybovou zprávu pro uživatele. [1], [3] Tato myšlenka není všeobecně populární. Při posuzování míry chyb u 99% stávajících stránek je pravděpodobnost rozsáhlých koncových zobrazovacích chyb a nedostatku nových funkcí v XHTML 1.0 a 1.1 za účelem vyplacení nákladů, tvůrci wedů ignorují application/xhtml + xml. To neznamená, že ignorovali XHTML úplně. Ale tento způsob umožnil autorům mezeru, která jim dovolila udělat něco, co vypadá jako syntax XHTML, ale přidává tomu typ MIME text/html. A to je přesně to, co tisíce webových vývojářů udělali, oni přešli k syntaxi XHTML, a pokračovali s typem MIME text/html. [1], [3] Dokonce i dnes miliony programátorů chtějí, aby jejích webové stránky vypadaly jako XHTML. Píše se to do DOCTYPE na prvním řádku a používají jména tagů v nižším registru, uvozovky kolem atributů a dokonce se přidává lomítko po prázdných prvcích, jako jsou <br /> a <hr />. Ale jen malá část z těchto stránek se 13

14 převádí z MIME typu application/xhtml+xml, který zahrnuje drakonické zpracování chyb XML. [1] Každá stránka, která je přenášena do MIME typu text/html, nezávislá na syntaxi DOCTYPu nebo stylu kódování, bude zpracována pomocí zjednodušeného analyzátoru HTML. To znamená, že tento analyzátor bude ignorovat jakékoli chyby, a nikdy nebude upozorňovat uživatele nebo někoho jiného, i když bude stránka technicky poškozená. [1] XHTML 1.0 umožnil tento nedostatek, ale XHTML 1.1 ho odstranil a nedokončený XHTML 2.0 pokračoval tradici vyžadující drakonické zpracování chyb. A proto máme miliardy stránek, které tvrdí, že jsou XHTML 1.0 a jenom malá část, která tvrdí, že jsou XHTML 1.1, nebo XHTML 2.0. Pokud chceme zkontrolovat, jaký je typ nějaké určité webové stránky, podíváme se na MIME typ, a ve většině případů to bude text/html. Pokud MIME typ neobsahuje application/xhtml+xml, tzv. XHTML, má jenom název XML, ale už nemá jeho vlastnosti. [1] 14

15 5 What Working Group? What Working Group je pracovní skupina pro vývoj hypertextových aplikací pro web. Je to svobodná, neoficiální, a otevřená spolupráce prohlížečů a nevyhovujících stránek. Skupina se zaměřuje na vývoj specifikace založené na HTML a souvisejících technologií, které umožní zavedení interoperabilních ii webových aplikací s cílem poskytnutí výsledků normalizačních organizací. To bude pak sloužit jako základ pro formální rozšíření HTML sazby. [3] Vytvoření tohoto fóra se skládá z několikaměsíční soukromé korespondence o specifikacích pro jednotlivé technologie. Důraz byl kladen na rozšíření forem HTML4. A to tak, aby nebyla poškozena zpětná kompatibilita s existujícím obsahem. Tato skupina byla vytvořena s cílem zajistit budoucí rozvoj těchto specifikací a bude plně zveřejněna prostřednictvím veřejných archivů a dostupných seznamů rozesílaných přes mail. [1], [3] 5.1 DOCTYPE Otevřete si jakoukoli webovou stránku v režimu zobrazení zdrojového kódu stránky a hned na první stránce uvidíte něco podobného jako toto: [5] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Jmenuje se to DOCTYPE. V průběhu práce na prohlížeči Internet Explorer 5 pro Macintosh se jeho vývojáři potkali s neočekávaným problémem. Kvůli tomu, že nová verze prohlížeče měla mnoho zlepšení ze strany standardů, se staré stránky zobrazovali nekorektně. Autoři webových stránek se při jejich tvorbě orientovali na dominantní prohlížeče tohoto období: Netscape 4 a Internet Explorer 4. Prohlížeč IE5/Mac byl tak zdokonalen, že prakticky zničil síť. [5] Tento problém byl řešen originálním způsobem. Před zobrazením stránky IE5/Mac se dívá na doctype, který se obvykle nachází na prvním řádku kódu, ještě před <html>. Staré stránky, které nemají doctype, IE5/Mac zobrazoval jako webové stránky s doctypem. Za účelem podpory nových standardů museli autoři stránek vložit <! DOCTYPE> a <html>. [5] Tato myšlenka se líbila autorům, a proto měly všechny hlavní prohlížeče dva režimy: režim kompatibility a standardní režim. Ale nikdo to moc nekontroloval. Při spuštění nové verze Mozilla 1.1 byla zjištěna jedna pravidelnost, spočítalo to v tom, že stránky, které se zobrazují v standardním režimu jsou v podstatě založené 15

16 na jedné konkrétní věci pod názvem Doctype. A proto byl vytvořen jeden skoro standardní režim. [5], [2] Ve své hlavní práci Přepínání mezi prohlížeči prostřednictvím Doctype Henri Sivonen označil tyto režimy. [5] Režim kompatibility. V režimu kompatibility prohlížeče ruší stávající webové specifikace. Aby se zabránilo "rozlití" stránek, zobrazí se v souladu s praxí běžnou ve druhé polovině 90. let. [5] Standardní režim V standardním režimu prohlížeče se snaží zobrazovat dokumenty do té míry,do které jsou realizované v prohlížeči. V HTML5 není "režim kompatibility". [5] Částečně standardní režim Prohlížeče Firefox, Safari, Chrome, Opera (od 7,5) a IE8 podporuje také skoro standardní režim, ve kterém se svislá velikost buněk tabulky provádí tradičně, a ne v plném souladu se specifikací CSS2. V HTML5 je nazýván omezený režim kompatibility. [5] Ve svojí práci Henri uvedl dokonce několik možností IE5/Mac DOCTYPE. Postupem času se seznam prohlížečů zvýšil a zároveň se zvýšil počet doctypů, které se přepínají do režimu kompatibility. Při nedávném spočítání bylo 5 druhů Doctype ve skoro standardním režimu a 73 v režimu kompatibility. [3] 16

17 6 World Wide Web Pro World Wide Web se dá častěji používat jeho zkratka web nebo WWW. To se může volně přeložit jako celosvětová pavučina. HTTP je označení pro aplikace internetového protokolu. Internetový protokol má zkratku IP. IP přenáší data ze zdrojového počítače do cílového. HTTP je součástí internetového protokolu. HTTP odpovídá za přenášení metadat iii. [6] V českém prostředí se slovo web používá jak pro obecné označení celosvětové sítě dokumentů, tak pro označení jednotlivých soustav dokumentů. Tyto soustavy jsou dostupné na webovém serveru nebo na stejné internetové doméně nejnižšího stupně. [7] Umístění dokumentů na počítačových serverech je pomocí URL. URL je odkaz - cesta pro brauzer k umístěnému dokumentu nebo službě. Jeho součástí je i doména a jméno počítače. Název serverů začíná zkratkou www, ovšem už můžeme zkratku www vynechat. [6] HTTP se používá ne jenom pro přenos dokumentů ve tvaru HTML, ale dá se použit i pro dokumenty s jinými formáty. WWW se v dnešní době používá jako synonymum pro internetové aplikace. Za internetové aplikace považujeme takové, která poskytují data online na internetu. To jsou e-shopy, objednávkové a rezervační systémy anebo třeba diskusní fóra. [8] Autorem Webu je britský počítačový vědec Tim Berners-Lee, který jej vytvořil za svého působení v Evropské organizaci pro jaderný výzkum (CERN). Je návrhářem jazyka HTML a protokolu HTTP. Napsal první webový prohlížeč World Wide Web. Na konci roku 1990 spustil první webový server na světě info.cern.ch. V roce 1994 založil mezinárodní standartizační organizaci World Wide Web Consortium neboli jinak W3C, které se stará o další vývoj Webu. [9] 6.1 WWW a internet Pojmy World Wide Web a internet nejsou vzájemně zaměnitelné. Často se stavá, že pojmy World Wide Web a Internet se používají pod stejným významem, ale nejsou to stejné pojmy. Mezi nimi je významný rozdíl. [6] Internet je celosvětový systém navzájem propojených počítačových sítí, které slučují jednotlivé síťové uzly. Pod pojmem uzel, může být jak počítač, tak i specifikované zařízení, například router. iv Každý počítač s přístupem na Internet má svoji IP adresu nebo se používají doménová jména, která jsou mnohem snadněji zapamatovatelná, příkladem je Počítačová síť je označení pro 17

18 hardware, který realizuje spojení a výměnu informací mezi počítači. Pomocí protokolu TCP/IP spolu počítače komunikují. [6] Internet poskytuje obrovské množství služeb. Tyto služby fungují pomocí počítačových programů, které jsou navzájem spojené pomocí protokolů. Protokoly jsou uchované v dokumentech RFC. RFC neboli reguest for comments (žádost o komentáře) se skládá z číslovaných informačních dokumentů internetu, zahrnuje v sobě technické specifikace a standardy, široce se používá ve WWW. Dodržování těchto dokumentů a stálá aktualizace odpovídá kvalitnímu fungování samotného internetu. [6], [3] 6.2 Běžné služby nabízené Internetem World Wide Web (WWW) je služba pro příjem informací, které fungují na rozhrání webového prohlížeče. Pro přenos informací se používá protokoly HTTP a HTTPS [6] (elektronická pošta) - využívá se protokol SMTP při přenosu zpráv a pro spojení s poštovními programy se používá protokoly POP3 a IMAP. [6] Instant messaging online komunikace mezi uživateli v běžném čase. Využívá různé protokoly. Aplikace má občas stejný název jako protokol například ICQ, Jabber. [6] VoIP (Voice over Internet Protocol) je technologie, která se používá při hlasové komunikaci pomocí rodiny protokolu UDP/TCP/IP na Internetu, intranetu nebo jiném datovém médiu. [8] Skype je velice známým protokolem, který umožňuje provádět internetové telefonování a videohovory. Skype má v sobě hodně dalších možností. Ty jsou - odesílání dokumentů různých formátů, ukazování plochy, výměna zpráv a další služby. FTP protokol se hlavně používá pro přenos souborů mezi počítači. Služba má stejný název jako protokol. Protokol TCP z rodiny TCP/IP pomáhá spojovat počítače. Je nezávislý na operačním systému. Interaktivnost protokolu umožňuje řízení přístupu. Při přihlašování uživatel zadává login a heslo, formát přenášení informaci je znakový-binární. Pro dnešní požadavky už jsou tak vysoké, že je nutná i vysoká bezpečnost, a proto pro něj byla definována některá rozšíření (RFC 2228). [6] FTP protokol funguje na modelu klient-server. FPT server je poskytovatelem dat pro počítače. Po připojení uživatele k serveru má možnost provádět různé druhy operací např. výpis adresáře, přenos dat, 18

19 stažení dat atd. Vzhledem k jednoduchosti použití FTP serveru může kdokoliv vytvořit klienta pro jakékoliv prostředí nebo operační systém. [6] Programy pro FTP jsou volně dostupné, a proto není problém v jejich použití. DNS domény (systém jmen počítačů pro snadnější zapamatování). Domain Name Systém neboli DNS jsou IP adresy, převedené do textové podoby. IP adresa se skládá z číselného kódu (např. VŠE: ). Ovšem číselný kód je pro běžného uživatele je špatně zapamatovatelný. Proto Domain Name Systém (DNS) nahrazuje číselný kód za slovní zkratku, kterou uživatel zadává do políčka ve vyhledavači. Díky tomuto systému si nemusíme pamatovat obrovské množství IP adres jednotlivých webových stránek, a do políčka ve vyhledavači si zadáme místo Počítačové jméno se skládá z jednotlivých domén oddělených tečkou, např. Jednotlivé domény dělíme na různé úrovně, cz ( com ) je doménou nejvyšší úrovně, pak máme doménu druhé úrovně, což je vse ( google ), která určuje název organizace. Dále existuje další, nižší, 3. úroveň ( mail ), která určuje název počítače v rámci organizace apod. První úroveň domény určuje skupinu podle země či kategorie, např. cz Česká republika, se - Švédsko, kz - Kazachstán, ru - Rusko, com je doména pro komerční organizace, edu vzdělávací stránky, gov - vládní instituce a mil jsou pro vojenské apod. World Wide Web nebo jeho zkratka WWW je nejznámější službou využívanou v rámci Internetu, která zahrnuje v sobě kombinace textu, grafiky a multimédií. Dnes v ramci WWW je obrovské množství stránek. Pomoci hypertextových odkazů dokumenty a jiné soubory jsou vzájemné propojený a spolu komunikují. Do polička ve webovém prohlížečů zadáme URL adresu, po zadání adresy prohlížeč provede sérii zpracování dat. Uživatelovi nakonec vykresli naformátovaná a zpracovaná stránka s dalšími odkazy na jiné webové stránky. 19

20 7 Protokoly TCP/IP je Transmission Control Protocol/Internet Protocol, česky primární transportní protokol ( TCP) / protokol síťové vrstvy (IP). Je sadou protokolu, pomocí které probíhá komunikace počítačové síti, která se využívá ne jenom na internetu, ale také v běžných počítačových sítích. Jde vlastně o komunikační protokol, což je množina pravidel, které určují podobu a význam jednotlivých zpráv při komunikaci. Vzhledem ke složitosti problémů se transportní protokol TCP/IP skládá z několika vrstev. Funkčnost jednotlivých vrstev a výměna informaci mezi nimi je přesně definována a tím se vytváří striktní hierarchie činností. Spolupráce mezi vrstvy probíhá postupně, podřízená vrstva poskytuje službu vrstvě vyšší. Komunikace mezi stejnými vrstvami dvou různých systémů je řízena komunikačním protokolem za použití spojení vytvořeného sousední nižší vrstvou. Architektura umožňuje možnost výměny protokolů jedné vrstvy bez dopadu na ostatní. ArchitekturaTCP/IP je členěna do čtyř vrstev (na rozdíl od referenčního modelu ISO/OSI se sedmi vrstami): [10] Aplikační vrstva (Application layer) Transportní vrstva (Transport layer) Síťová vrstva (Network layer) Vrstva síťového rozhraní (Network interface) TCP (Transmission Control Protocol) je typickým představitelem transportní vrstvy protokolů. TCP protokol je kanál, díky kterému aplikace v počítači navazují komunikaci s jinými počítači. Protokol je bezpečný pro přenášená data. Protokol přenáší data ve správném pořadí. TCP také rozlišuje data pro současně běžící či vícenásobné aplikace (například webový server a ový server), které se přenáší na stejném počítači.tcp podporuje velké množství aplikaci fungujících na internetu např. WWW, mail, VOIP, FTP a další. [10] Protokol IP (Internet Protokol) je datový protokol, pomocí kterého probíhají přenosy dat přes paketové sítě. Data se posílají pomocí datových paketů, které jsou rozděleny na jednotlivé bloky, což je specifické pro IP protokol. Jednotlivé datagramy v putují sítí zcela nezávisle, na začátku komunikace není potřeba navazovat spojení či jinak předpřipravovat cestu pro data, přestože spolu předtím nikdy nekomunikovaly. IP protokol v doučování diagramů poskytuje nespolehlivou službu, označuje se také jako služba nejlepšího úsilí; tj. všechny stroje na trase se datagram snaží podle svých možností poslat blíže k cíli, ale nezaručují praktické doručení do cíle. Datagram vůbec nemusí dorazit, může být naopak doručen několikrát a IP protokol neručí ani za pořadí doručených datagramů. [10] 20

21 Každé síťové rozhraní provádí komunikaci na osnově protokolu IP, který přiřazuje jednoznačný identifikátor, tzv. IP adresu. IP je jedním ze základních věcí v rámci internetu. Je možné zjistit podle IP adresy, jaké počítače navštívily určitou internetovou stránku. Pomocí diagramu je uvedena IP adresa odesilatelů a příjemců. Každý počítač si hledá cestu, kam má jít podle IP adresy, toto hledání se jmenuje routing. Za toto směrování jsou odpovědné specializované stroje - routery. Pro ulehčení komunikace byl vytvořen systém pojmenování domén, tzv. DNS. Pomocí tohoto systému IP adresy se převádí číselný kód do textového názvu webových stránek a naopak. [10] Při připojení k internetu musí mít počítač svoji IP adresu. IP adresa je 32 bitové číslo, které se skládá z čtyř desítkových čísel v rozmezí 0-255, jsou mezi sebou oddělené tečkami. Jako příklad může být Tato informace je stále platná, ale s časovým postupem dochází k vyčerpávání IP adres, může jich být (232= ) se objevila nutnost zavést nové verze IP protokolu. IPv4 je první a stále využívaná verze, IPv6 je novější verze, ke které bylo přidáno 128 bitové číslo, jenž poskytuje adresu z většího číselného rozsahu. Doposud je použití takových moderních IP adres méně praktické, protože adresy obsahují také šestnáctkové hodnoty (typická IPv6 adresa je 2001:0db9:0:0:0:0:1628:37ab). [10] 7.1 MAC adresa síťové karty Hromada počítačů je připojena k internetu pomocí síťové karty. Síťová karta je přístroj (obvykle uvnitř počítačů), do kterého se připojuje síťový kabel, který je spojen s modemem nebo se směrovačem. Každá síťová karta má MAC adresu (Media Access Control nebo Hardware Address) řízení přístupu k médiím. Drtivá většina síťových protokolů datové vrstvy používá jednu ze tří variant MAC adres, řízených IEEE:MAC-48, EUI-48 a EUI-64. Jako každý člověk v ČR má rodné číslo, tak i každá síťová karta má svoji jedinečnou MAC adresu, kterou jí přiřazuje výrobce. Ta je vždy celosvětově jedinečná. Z hlediska přidělování je rozdělena na dvě poloviny. První část adresy je daná výrobcem. Centrální správce adresného prostoru uděluje MAC adresu ke každé kartě. První část je u jednoho výrobce stejná, nebo v případě, že se jedná o velkého výrobce, se rozliší podle několika druhů. Druhá část síťové karty je odlišná, každá karta dostává svojí jedinečnou hodnotu. Například: EF. [10] Adresy v každém z prostorů musí byt unikátními. Ale ne všechny protokoly používají MAC-adresy a ne všechny protokoly, které používající MAC-adresy, požadují tak vysokou originalitu těchto adres. [10] 21

22 8 Základní pojmy a zkratky AJAX (Asynchronous JavaScript and XML) to jsou vývojové technologie, které umožňují aktualizaci webových stránek bez nutnosti jejich znovu načítání. Ale vyžadují moderní verzi prohlížečů. Velkou výhodou této aplikaci je, že odpadá nutnost stálé aktualizace webových stánek při každé nové operaci, což je nezbytné u klasických modelů webových stránek. Občas aktualizace webové stránky bývá náročná a u některých z případů i dokonce rozptylující, např. když si vyplňujete nějakou online anketu a na konci je třeba zadat heslo, pokud se vyskytne nějaká chyba s heslem, tak se po aktualizaci stránky všechny údaje smažou a bude třeba vyplnit dotazník znovu. Což nenastane v případě moderních webových stránek s technologiemi AJAX. [11] Apache HTTP Server (volně přeloženo svobodný webový server ) je softwarový webový server pro Linux, BSD, Mac OS, Microsoft Windows, Novell NetWare, BeOS. Apach může být normálně nainstalován na běžném počítači. Díky tomuto softwaru běžícímu na Vašem počítači je možno v provádět testy a ladění svých webových stránek s HTML a PHP kódem. Apache je potřebný při testování dynamických webových stránek. [11] ASP Active Server Pages (v překladu do češtiny aktivní serverové stránky ) je první technologie společnosti Microsoft, umožňující tvorbu dynamických webových stránek na straně serveru. ASP funguje na operačních systémech Windows NT i na web serveru Microlsoft IIS. ASP není jazykem programování, je to jenom technologie předběžného zpracování, umožňující připojovat moduly v průběhu procesu formátování webové stránky. ASP je jeden z nejpopulárnějších skriptovacích jazyků pro web. Takovou popularitu si získal kvůli své jednoduchosti použití, bohaté zásobě funkcí, a tomu, že kombinuje vlastnosti více programovacích jazyků a dává částečnou svobodu v psaní syntaxu. Relativní popularita ASP je založená na snadnosti skriptovacích jazyků (VBScript nebo JSsript) a možnosti použití vnějších COM komponentů. COM Component Object Model (v překladu do češtiny objektový model komponentů ) je to technologický standart od společnosti Microsoft, který je navržený pro tvorbu softwaru na osnově interakcí komponentů. Jednotlivé komponenty mohou být použity ve mnohých programech najednou. [12] Technologie ASP byla vyvinuta jako technologie ASP.NET. Je to nová technologie pro vytvoření webových aplikací na platformě společnosti Microsoft NET. Ale tato technologie už patří do zastaralých a teď se používá její nový analog ASP.NET. [12] 22

23 8.1 Webhosting Webhosting je služba internetového servisu, která umožňuje jednotlivcům a firmám dělat jejích webové stránky přístupnými na webu. Webové hosty neboť pronajímatele serverů jsou označovaný jako poskytovatele místa na serveru buď jsou vlastnicemi serveru, nebo jsou jeho pronajimatele. Poskytují internetové spojení typicky v data centrech. Web hostitelé mohou poskytnout prostor datového centra a také internetové spojení jiným serverům nacházejícím v jejích data centru, pod názvem colocation, taky je známý pod názvem Housing. A proto každý jednotlivec si může umístit své webové stránky na internet, aniž by musel kupovat celý server. Pohyb cen u serveru je docela široký od par korun do několika tisíc korun za měsíc. [12] Takový velký rozdíl je spojen se zárukou ohledně funkčnosti, omezením technické podpory, rychlosti, bezpečnosti atd. Je i bezplatná varianta tzv. freehosting. Ale poskytovatel už se neručí, že Váša internetová stránka bude správně fungovat nebo zda bude vůbec funkční. Často se stává, že bezplatný hosting je spojen s umisťování reklamy na webových stránkách. Webhostin je pouze umístění samotné webové stránky na serveru. Aby se uživatele k webové stránce dostali, je nutné webovou stránku se zaregistrovat, teda zaregistrovat její doménu. Například pod názvem firmy. Jako alternativa je možnost si zaregistrovat doménové jméno 3 řadu zdarma. Např. vašejméno.poskytovatel.cz V případě nutnosti vysoké rychlosti, bezpečnosti a dalších požadavku, je možnost si pronajmout celý server. [10] 9 Nové elementy v HTML5. Nová verze skriptu HTML 5.0 oproti předchozí usnadňuje práci s elementy a definuje nové. [8] <section> Element <section> definuje základní dokument nebo aplikační část. Do elementu <section> se má vkládat ten obsah, který nejde ze stránky vynechat, aniž byste tím logiku stránky narušili. Například to mohou být samostatné části stránky na svém okolí, i když byste odstranili jeden z nich, to nepovede k narušení obsahu stránky. V této souvislosti je to tematické seskupení obsahu obvykle s titulem. [13] [5] Například oddílem může být hlavička, záložky v dialogovém okně nebo číslované úseky v disertační práci. Hlavní webová stránka muže být rozdělená do sekcí pro úvod, uvedení novinek a kontaktní informace. [13] [5] Příklad použití: 23

24 <section> <h1>nějaký nadpis (jakékoli úrovně)</h1> <p>obsah</p> </section> Prohlížeče Internet Explorer až do verze 8.0 ignoruje značky <section>, ale zobrazí její obsah. Také v tomto prohlížeči, nefunguje použití stylů pro <section>. Firefox plně podporuje tento tag od 3.0 verze. [5] < nav > Element <nav> představuje oddíl navigačních odkazů obsahující odkazy na jiné stránky. Ne všechny skupiny odkazů musejí být v tagu <nav> - jen oddíly skládající se z hlavních bloků směrování. Se spodní části webových stránek je obvykle jsou stručný seznam odkazů, například: podmínky služby, odkaz na hlavní stránku s autorskými právy. V těchto příkladech stačí použití tagu <footer>, bez použití <nav>. [13] [5] Element je párový. Příklad použití: <title>nav</title> </head> <body> <header> <h1>my bachelor thesis</h1> </header> <nav><a href="1.html">about HTML 5</a> <a href="4.html">www</a></nav> <article> <h2>let s start!</h2> </article> </body> Prohlížeče Internet Explorer až do verze 8.0 ignoruje značky <nav>, ale zobrazuje její obsah. Také v tomto prohlížeči, nefunguje použití stylů pro <article>. [5] Firefox plně podporuje tento tag od 3.0 verze. [5] 24

25 9.1.3 <article> Element <article> specifikuje prvky stránky, určené pro vlastní distribuci nebo opětovného použití, například v sindikaci. Může to být firemní zprava, článek v časopisu nebo novinový článek, zápis v blogu, uživatelský komentář, interaktivní widget vi, gadget vii nebo jiný nezávislý obsah. Element může obsahovat další prvky jako hlavička, dávkovač nebo jiný <article>. [13] [5] Příklad použití: <article> <header> <h2>název článku</h3> </header> <p>obsah, nebo popis článku.</p> </article> Prohlížeče Internet Explorer až do verze 8.0 ignoruje značky <article>, ale zobrazuje její obsah. Také v tomto prohlížeči, nefunguje použití stylů pro <article>. Firefox plně podporuje tento tag od 3.0 verze. [5] < aside> Tento prvek představuje část stránky, která má nepřímý vztah k obsahu a která může být oddělena od obsahu. Tag <aside> lze použít například pro boční panel na stránce, reklamy, navigace přes <nav> a další obsah, který je považován za oddělený od hlavního obsahu stránky. Tato jednotka se obvykle jmenuje "Postranní panel" nebo "sidebar". Element je párový. [13] [5] <title>aside</title> <script> document.createelement('aside'); document.createelement('article'); </script> </head> <body> <header><h1>history of HTML5</h1></header> <aside> <p>xmtml</p> <p>what is working Word group?</p> </aside> <article> 25

26 Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec nibh massa, ut ultrices odio. In blandit massa sit amet. </article> </body> Prohlížeče Internet Explorer až do verze 8.0 ignoruje značky <aside>, ale zobrazí její obsah.také v tomto prohlížeči, jsou všechny styly nejsou aplikovány na prvek, dokud není vytvořen pomocí skriptu, jak je uvedeno v příkladu. Firefox plně podporuje tento tag od 3.0 verze. [5] <hgroup> Element <hgroup> určuje název sekce a používá se pro seskupení několika tagů. Titul lze členit do šesti úrovní. Nějvyšší je <h1>, nejnišší je <h6>. Element se používá, pokud titul obsahuje několik úrovní, jako jsou alternativní názvy položek, nebo slogany. Element je párový. [13] [5] Příklad použití: <article> <hgroup> <h1>nadpis první úrovně</h1> <h2>nadpis druhé úrovně</h2> </hgroup> <p>obyčejně, obyčejný text</p> </article> Prohlížeče Internet Explorer až do verze 8.0 ignoruje značky <hgroup>, ale zobrazí jejich obsah. Firefox plně podporuje tento tag od 3.0 verze. [5] <header> Prvek <header> definuje záhlaví oddílu, která může mít více, než jenom název oddílu. Například má smysl pro záhlaví přidat podtitul, informaci o verzi historie a autorství. [13] [5] Je skupina úvodních nebo navigačních zařízení. Lze je využit v článku pro vložení nadpisu, spolu s obsahem jako navigační pomůcky pro článek. Element <Header> také může být použit na obal část obsahu, uživatelské rozhraní, vyhledávací formulář, nebo jejich loga. Prvek nesmí být potomkem elementů header, address a footer. [13] [5] 26

27 Příklad použití: <article> <header> <h2>název článku</h3> </header> <p>obsah nebo popis článku </p> <footer> <a href=" článku</a> </footer> </article> < footer > <Footer> představuje patičku své sekce nebo patičku celé stránky. Element <footer> obvykle obsahuje informaci o sekci, například: jméno autora, odkazy na dokumenty, autorská data atd. Zápatí nemusejí být zobrazeno na konci stránky, jak se to obvykle provádí. Element je párový. [13] [5] Příklad použití: <title>footer</title> </head> <body> <article> <p>history of HTML5</p> </article> <footer> Copyright Natalya Goncharova </footer> </body> < time > Element time představuje časové údaje buď ve dvacetičtyřhodinovém formátu, nebo přesný datum, které je možné nastavovat ve vlastním formátu data a času. Element je párový. [13] Možné atributy: datetime - datum, čas nebo datum i čas, které element představuje; hodnotou je časový formát. [13] pubdate - označuje datum publikování například článku. V případě použití tohoto atributu by měl být celý element time součástí elementu article; bez hodnoty. 27

28 <article> <time datetime=" "> 25.března 2012 </time> <time datetime=" t16:05" pubdate> 25.března 2012 ve 16:05 </time> <time datetime=" t16:05+09:00"> 25.března 2012 ve 16:05 v Tokiu </time> </article> Prohlížeče, které nepodporují příkaz tag <time> zobrazí jeho obsah. Prohlížeče s podporou stykových tagu mohou uvádět pro element stylové zobrazení. [13] < mark > Tag mark se používá při zvýraznění nebo označení určitého textu. Dá se využít při zvýraznění výsledku hledání. Ve výchozím nastavení se text zobrazuje červenou barvou a jeho pozadí je žluté. Element je párový. [13] Příklad použití. <title>mark</title> </head> <body> <header> <h1>my bachelor thesis</h1> </header> <article> Tag mark se používá při <mark> zvýraznění nebo označení </mark>zvýraznění nebo označení určitého textu. </article> </body> </html> 28

29 10 Proč používat HTML 5.0? Síť se pořad rozvíjí. Nové elementy a inovační webové stránky se vytváří každý den, rozšiřuje hranice HTML v každém směru. Jazyk HTML byl kolem nás již téměř deset let a vývojáři si pořád hledají nové metody pro zabezpečení rozšířené funkčnosti, která nedostatečným vývojem jazyka omezena. [12] HTML5 zavádí i rozšiřuje škálu možností, zahrnuje nové prvky, jako jsou formuláře, mění strukturu a sémantiku. To dává více prostoru a možností k vytváření interaktivnějších a zajímavějších stránek. [11] Práce na HTML5 byla zahájena v roce 2004 a v současné době je realizována v rámci spolupráce mezi W3C, HTML, WG a WHATWG. Společnosti Apple, Mozilla, Opera a Microsoft a ostatní organizace a jednotlivci se účastní práci na W3C. [11] 10.1 Struktura HTML5 HTML5 má velkou řadu nových elementů, které zjednoduší strukturu kódu. Většina stránek v HTML4 má typové elementy, jako hlavička, zápatí a sloupce. [14] Obr. 1 [14] Obrázek ukazuje typické uspořádání stránky ve dvou sloupcích. Ty jsou stanoveny pomocí <div> s atributy id a class. Stránka obsahuje hlavičku, dolní část a horizontální navigaci pod hlavičkou. Hlavním obsahem stránky je článek a boční panel po pravé stráně (sidebar).viz. Obr. 1 Použití elementů <div> je správně, protože v HTML4 chybí potřebná sémantika pro přesnější popisování těchto částí. HTML 5 řeší tento problém zavedením nových prvků pro zastupování každého z těchto oddílů. 29

30 Prvky <div> id, class atd. jsou nahrazeny novými elementy <header> a <nav> a <section> a <article> a <footer>. Viz. Obr. 2 Obr. 2 [14] Kód v HTML 5.0 pro nahrazené elementy vypadá takto: <body> <header>...</header> <nav>...</nav> <article> <section>... </section> </article> <aside>...</aside> <footer>...</footer> </body> Zde jsou některé výhody plynoucí z používání těchto prvků. Pokud jsou používány ve spojení s prvky záhlaví (od <h1> do <h6>), umožňují označit části vnořených úrovní čísel, až do šestého. Specifikace obsahuje algoritmus pro tvorbu schématu dokumentu. Tento algoritmus umožňuje spolupráci mezi novými a předchozími verzemi. To může být použito jak u vývojových nástrojů, tak u prohlížečů. [14] [8] Například tento kód je strukturován vloženými elementy <section> a <h1>. <section> <h1>úroveň 1</h1> <section> <h2> Úroveň 2</h2> <section> 30

31 <h3> Úroveň 3</h3> </section> </section> </section> Pro lepší kompatibilitu s existujícími prohlížeči, můžeme použít i jiné elementy v záhlaví od <h2> do <h6> místo <h1>. [14] Označení cílové části stránky pomocí speciálních tagů. Pomocí této technologie se uživatel může snadno orientovat a pohybovat na stránce. Uživatel například může jenom rychle přecházet z jedné stránky na druhou. Autor webu nebude muset zabezpečovat mechanizmus tvorby odkazů. Autoři získávají výhodu, protože záměna mnoha <div> za několik dalších prvků, přispívá k větší jednoduchosti a srozumitelnosti zdrojového kódu. [14] [8] 10.2 Video a audio V posledních letech, se video a audio na internetu stává životaschopnějším a weby jako You Tube, Viddler, Revver, MySpace, Vkontakte a jiné zabezpečují život těm, kdož publikují video a audio. Jelikož dnes v HTML chybí speciální zdroje pro úspěšnou implementaci a správu multimédií, mnohé weby, pro zabezpečení této funkcionality spoléhají na Flash. Ačkoli je možnost přidávat multimédia pomocí různých pluginů (takových jako Quick Time, Windows Media a další) Flash je z nich nejpoužívanější. Zabezpečení kompatibility s multimédii, kterou potřebují vývojáři API viii interfejsu. [8] Jak vyplývá z různých přehrávačů médií, založených na Flash ix, autoři mají zájem na podpoře vlastních uživatelských rozhraní, která obvykle umožňují uživatelům hrát, zastavovat, vyhledávat a regulovat úroveň hlasitosti. Plánuje se zavedení této funkce v prohlížeči, pomocí přidávání vestavěné podpory videa i audia a poskytnutí API rozhraní pro ovládání přehrávání. [11] Nové elementy <video> a <audio> toto zjednodušují. Většina API je pro tyto dva elementy stejná, rozdíl spočívá v tom, že se jedná o vizuální a nevizuální média. [8] Opera a WebKit podporuje element <video> jenom částečně. Nejjednodušší způsob, jak vložit video je pomocí elementu <video> a poskytnout prohlížeči poskytnout výchozí rozhraní. Atribut controls ukazuje, jestli autor chce používat uživatelské rozhrání nebo je vypnout. [8] <video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a href="video.ogv">uložit video</a> 31

32 </video> Volitelný atribut poster může být použit k určení obrázku, který bude zobrazen místo videa před spuštěním přehrávání. Přesto některé video formátu (např. typu MPEG- 4) podporují vlastní funkce rámu, může být lepším řešení použití rámu nezávisle na formátu videa. [15] Stačí jen vložit zvuk na stránku pomocí elementu <audio>. Většina atributů je sdílena mezi prvky <audio> a <video>, i když z pochopitelných důvodů element <audio> nemá atributy width, height a poster. Příklad použiti: <audio src="music.oga" controls> <a href="music.oga">stáhnout píseň</a> </audio> HTML5 obsahuje prvek <source> pomocí kterého prohlížeč si může vybrat z několika alternativních audio a video souborů, které prohlížeč si může vybrat podle svých požadavků. Atribut media může být použit pro ukazování druhu zařízení, pro použítí určitých zařízení, atribut type pro ukazování typu souboru a kodeka. Kodek je kódování videa za účelem změnšení velikosti. Při použití elementů <source>, atribut src u mateřských <audio> a <video> nebo alternativních <source> ignorována. [15] <video poster="poster.jpg"> <source src="video.3gp" type="video/3gpp" media="handheld"> <source src="video.ogv" type="video/ogg; codecs=theora, vorbis"> <source src="video.mp4" type="video/mp4"> </video> <audio> <source src="music.oga" type="audio/ogg"> <source src="music.mp3" type="audio/mpeg"> </audio> 10.3 Reprezentace dokumentu Na rozdíl od předchozích verzí HTML a XHTML, které jsou definovány z hlediska jejich syntaxe, HTML5 nyní definován v podmínkách Document Object Model (DOM). Strom, reprezentace, kterého se používá prohlížeč při zobrazování dokumentu. Například, zvážíme velmi jednoduchý dokument obsahující jméno, nadpis a odstavec. Strom DOM by mohl vypadat takhle: [15] Strom DOM obsahuje prvek <title> uvnitř <head>, taky <h1> i <p> v <body>. 32

33 Výhodou definici HTML5 v termínu DOM je to, že jazyk může být definován nezávisle na syntaxi. [8] 33

34 11 Tvorba webové stránky Psaní veškerého HTML kódu začíná DOCTYPE, tento prvek říká prohlížeči, ve kterém značkovacím jazyku a v jaké verzi napsán dokument. DOKTYPE převádí prohlížeč v jeden z možných režimů: standardní, téměř standardní a režim kompatibility. HTML5 nemá takové třídění, DOKTYPE je jediný, pokud je, prohlížeč běží v standardním režimu. [8] <! DOCTYPE html> Ze všech druhů doctype je nejkratší, je snadno zapamatovatelný a zadavat ho z paměti. [8] Změny byli provedené i v jiných prvcích, tag <html> nemá atribut xmlns, a kódování dokumentu se zkrátila do takové podoby: [8] <meta charset="utf-8"> Nicméně, starý způsob, jak určit kódování se zůstal. <meta http-equiv="content-type" content="text/html; charset=utf-8"> Atribut type u tagu <script> a <style> je možnost vynechat, prohlížeč automatický chápe obsah těchto tagů a už není nutné o tom připomínat. Nejjednodušší kód uváděn dole. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>příklad stránky</title> <style> p { color: navy; } </style> </head> <body> <p>stránka v HTML5</p> </body> </html> 34

35 11.1 Porovnávání webových stránek Protože webové stránky 6 různých profesorů z různých států a oborů jsou nevalné kvality, postačilo provést obyčejné porovnání namísto benchmarkingu. Pomocí porovnání byly nalezeny nejzajímavější prvky, které jsou v současné době aktuální Web číslo 1 Země: Česká Republika Pohlaví: Žena Zaměření: Ekonomika Menu se skládá z dvaceti dvou položek. Tento počet vyplývá ze skutečností, že menu není roztříděné podle skupin např. třídění podle předmětů, aktualit, kontaktu a další. Kvůli velkému počtu položek se v tomto menu špatně orientuje. Při kliknutí na jednotlivý bod v menu se otevře nová stránka, nebo se položka rozloží na další podpoložky. Obsah je dobře čitelný, protože, že se nachází v hlavní části stránky. Webová stránka má políčko vyhledávače, což usnadňuje hledání informací. V hlavičce je obrázek v pastelových barvách, který se nachází v horní části stránky a zabírá její větší část, při otevírání webu. Pří posouvání stránky směrem dolu je vidět menu, které je po levé straně. Obsah se objevuje v pravé části stránky. Web byl vytvořen v roce 1995, a proto jeho grafická část nevyhovuje dnešním požadavkům. Zároveň celkově působí kompaktním, strohým dojmem a nerozptyluje uživatele od informace, kterou obsahuje. Tím splňuje svůj hlavní účel - poskytování informací. 35

36 Web číslo 2. Země: USA Pohlaví: Muž Zaměření: Informační technologie Větší část této stránky je organizovaná jako jeden plochý html soubor. Na níže uvedených odkazech umožní přejít přímo na jednotlivé podsekce. Stránka má černé pozadí, obsah napsán v kontrastní bílé barvě. Zelenou barvou je označeno menu a odkazy na další webové stránky. Oranžově označeny jednotlivé oddíly a záhlaví oddílů, které jsou mezi sebou oddělené čarami. Web neumožňuje rychlý návrat na začátek stránky, což činí takový web nepřehledným. Protože web se skládá z jedné stránky a veškeré informace jsou obsaženy na této stránce, spadá tento web do skupiny nestrukturovaných webů. Nestrukturovaný web je časově náročný, aby našel požadovanou informaci, uživatel musí projít celý web Web číslo 3. Země: Kanada Pohlaví: Muž Zaměření: Psychologie Menu je rozděleno do různých skupin, což činí stránku přehlednější a obsah strukturovaným. Při kliknutí na jednotlivé položky v menu, se otevírá nová stránka s obsahem. Díky tomuto třídění, uživatel čte přesně to, co potřebuje a neztrácí čas při vyhledávání nutné informace. Webová stránka je vyplněna v moderním minimalistickém stylu. Ve světlých barvách bez grafických doplnění, obsah je hlavní částí webu. Což je velmi vítané, když účelem webové stránky je informování studentů Web číslo 4. Země: Švédsko Pohlaví: Muž Zaměření: Informační technologie Celý web je rozdělen čarami, které člení stránky na různé oddíly. Menu se nachází v levé části. Při kliknutí na jednotlivé položky, se otevírá další stránka s obsahem. Ve spodní části stránky je pomocné menu, což usnadňuje přechod na začátek stránky či na další stánky v případě velkého rozsahu. Stránky nemají téměř žádnou grafickou úpravu, ale s ohledem na zaměření profesora není požadována. 36

37 Web číslo 5. Země: Německo Pohlaví: Muž Zaměření: Náboženství a společnost V horní části stránky je krátký popiš zaměření profesora. V hlavní části je uveden stručný životopis profesora. V horní části je rovněž menu s odkazy na další stránky. Stránky mají světle modré pozadí, vodorovné čáry oddělují menu od obsahu. S takovým druhem webu jste se mohli setkat v 90. letech minulého století. Web vypadá velmi stručně, stroze a umožňuje soustředit se na jeho obsah a nerozptyluje uživatele od svého hlavního účelu - poskytování informací Web číslo 6. Země: USA Pohlaví: Muž Zaměření: Antropologie Tato webová stránka je vyplněna v moderním minimalistickém stylu. Splňuje všechny moderní požadavky uživatele: každá informace se snadno nalézt, menu roztříděné podle jednotlivých skupin, díky minimalistickému stylu nerozptyluje uživatele. Malá prezentace ve formě střídajících se obrázků (které uživatel může zastavit), poskytuje příležitost obeznámit se se zaměřením držitele webové stránky. Menu je v levé části webu a graficky je v souladu s horní a spodní částí webu. Při přechodu na další stránky, menu mění svou polohu a posouvá se do hlavičky webu. Tím se celá šířka stránky je uvolní pro obsah, což je výhodné pro uživatele Shrnuti hodnocení Při zkoumání webových stánek profesorů, jsem se dozvěděla, že obsah menu je skoro stejný. S takovými položkami jako Kontakt, Seznam předmětů a Seznam literatury se potkáme skoro na každé webové stránce profesorů. Větší část nalezených stránek je nedostatečně vyvinuta s ohledem na dnešní objemy poskytování informací. Držitelé webů nezdokonalují svoje webové stránky a používají grafiku, uspořádání, menu a celkovou integritu zastaralého typu. Informace na takových stránkách je prezentována nestrukturovaně a občas se obtížně hledá. Tím se snižuje výkonnost hlavního účelu webu poskytování informací. S ohledem na rychlý rozvoj a vysoký pokrok v oblasti tvorby webových stránek jsou dnešní požadavky vyšší a vyžadují kvalitnější web jak po stránce grafické, tak i strukturování. 37

38 Ale existují i poměrně zdařilé dokonalé weby, jako např. ten pod číslem 6. Který sloužil v průběhu mojí práce jako inspirace při tvorbě grafiky a strukturování obsahu a menu. 38

39 12 Webdesing Webdesing, neboli tvorba webových stránek, se skládá z několika kroků: zjištění struktury webové stránky, grafické části, kódování v HTML&CSS nebo XML&CSS. K dalším potřebám součastných moderních webových stránek patří programování pro webové účely, ve většině případů to jsou programovací jazyky PHP a Javascript. [11] Programování je nutné pro dynamiku stránek neboli generování obsahu, což umožňuje jednoduchou aktualizaci dat na webu. Pomocí programování se obsah generuje na základě zadaných parametru. Například si administrátor zaškrtne nějaké vlastnosti pro tabulku s daty a to se zaktualizuje přímo na webu a není nutné ručně přepisovat obsah. Aby byla větší důvěryhodnost a webová stránka měla dobrou pozicí ve vyhledávačích, je důležité dodržovat zásady SEO. Copywriter se stará o kvalitní a inteligentní text, jak uvnitř kódu, tak i na samotné stránce pro návštěvníky webu. [16] Mým prvním krokem bylo zjistit struktury webové stránky u zadavatele, tedy to, jak bude webová stránka vypadat a jakému účelu bude sloužit. Jednotlivé položky v menu a obsah stránek jsme probíraly spolu se zadavatelkou. Vzhledem k tomu, že moje zadavatelka je profesorkou VŠ, hlavním účelem webu je seznámit studenty vysoké školy s předměty, které profesorka vyučuje a další informování o aktualitách a aktivitách spojených s výukou Struktura. Menu se nachází v levé části webové stránky. Dole je uvedeno pět prvků, ze kterých se skládá menu webu. Domů Rozvrh Seznám předmětů Kontakt mně Prvek Domů se používá za účelem návratu na hlavní stránku. A při každém kliknutí na tuto položku, se uživatel bude vracet na hlavní stránku. Rozvrh - uživatel přejde na stránku s aktuálním rozvrhem vyučujícího. Seznam předmětů pří kliknutí na tuto položku, uživatel přejde na stánku s aktuálním seznamem předmětů a jejich popisem, které vyučuje zadavatel. V současně době má profesorka pět předmětů: Project, Znalostní Management, Seminář k bakalářské práci, Znalostní společnost, Microsoft project, každý předmět má své vlastní podmínky pro úspěšné absolvování. Při kliknutím na jeden z 39

40 předmětů se otevře stránka s podmínkami pro vybraný předmět, odkazem na odevzdání úkolů a dalšími prvky spojené s předmětem. Kontakt - na této stránce jsou kontakty na mou zadavatelku, čili mail, telefon a další kontaktní údaje. O mně - je stručný životopis. Uprostřed webové stránky je samotný obsah stránky, na které se bude uživatel v danou chvíli nacházet. 40

41 13 Tvorba grafické části. Při tvorbě webové stránky, jsem si vzala inspiraci z moderních webových stránek, seznam stránek je na Veškerá grafická část byla provedena v programu Adobe Photoshop CS5. Zadavatelce bylo poskytnuto několik grafických variant s různým barevným a estetickým řešením Varianta číslo 1 Pozadí má tmavou barvu s reliéfním obrázkem, pomocí které se dělá kontrast na menu a logo školy, které mají mnohem světlejší, šedou barvu. Obrázek menu se střídá s frekvencí 10-ti vteřin. Tématem obrázků je Studium. Ale s ohledem na to, že zadavatelkou je žena, jsem se rozhodla, že barva by měla být světlejší a více pozitivní. Grafické řešení tohoto typu se více hodí pro mužské pohlaví. Viz. Obr. 3 Obr. 3 41

42 Varianta číslo 2. Jak bylo uvedeno v první variantě, s ohledem na pohlaví, jsem se rozhodla použit světlé a pozitivní barvy. Pro kontrast jsem si vybrala šedou barvu menu a pro další informační části stránky. Rozdělení webu pomocí horizontálních čar přidává úplnost a udržuje přísný styl webu. Hlavní a větší část stránky zaplňují střídající se obrázky známých vědců, spisovatelů a básníků, dole pod obrázky jsou uvedeny jejich známé výroky. Tématem výroků je Studium. Viz. Obr. 4 Obr Varianta číslo 3. Jako konečnou variantu grafické části webu, jsem si vybrala variantu číslo 3. V grafice tohoto webu jsem spojila zajímavé momenty následujících variant. Web je vyplněn v minimalistickém stylu, což je docela populární mezi moderní designéry za poslední pár let. Minimalistický styl má svoji velkou výhodu v tom, že nerozptyluje uživatele od obsahu a navíc pomáhá upoutat pozornost na poskytovanou informaci. Webová stránka vypadá inteligentně, celistvě a je v ní jednodušší orientovat se. Web je rozdělen na jednotlivé častí: horní, střední a dolní, každá část oddělena horizontální čarou, tento způsob rozdělování dělá vzhled kompletním a přidává striktnost, čeho žádá webová stránka tohoto typu. Vedle každého prvku menu je poskytnuto grafické označení, což umožní zpracovat dva typy vnímaní, a tím pádem zrychlit orientaci v menu. V pravé části 42

43 webu jsou obrázky, které se střídají s frekvencí 10-ti vteřin. Tématem obrázků jsou Květiny. V dolní části stránky v černém bloku se budou střídat známé výrazy vědců, básníků a spisovatelů. Konečná barva webu je bíla, s růžovými, žlutými, oranžovými modrými a dalšími akcenty v menu, jménu, obrázcích, a v dolním bloku s ohledem na převládající barvu střídajícího se obrázku. Viz. Obr. 5 Obr Kódování stránek S ohledem na to, že před tím, jak začít pracovat nad tvorbou webu, nemněla jsem skoro žádné zkušenosti v této sféře a proto musela jsem se tomu naučit v průběhu samotné práci. Aby co nejlepším způsobem porovnat HTML 4.01 a HTML 5 vytvořila jsem to ve dvou verzích. V procesu učení tvorby stránek v značkovacím jazyku HTML, používala jsem informační zdroje z těchto knih: HTML and XHTML The Definitive Guide 6th Edition, Creating Web Sites The Missing Manual a pomocí specializované webové stránky Během učení bylo rozhodnuto rozdělit tvorbu webové stránky do několika etap. V rámci etapy se rozumí grafická a obsahová část. Grafika byla vytvořena pomocí CSS, neboli kaskádové styly (v anglickém originále Cascading Style Sheets) 43

44 je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. Obsahová část: označení záhlaví a zápatí, umístění menu, obrázků, video a dalších častí, které se tykají hypertextu, byla vytvořena pomocí HTML. Po přečtení literatury přistoupila jsem k samotnému vytváření stránek. Stáhla jsem program Notepad + +, je bezplatný editor zdrojového kódu a poznámkového bloku, který podporuje výměnu několika jazyků. Běží v prostředí MS Windows, jeho použití se řídí licencí GPL. Viz.Obr. 6 Obr. 6 První, co jsem označila, bylo rozdělení webové stránky na jednotlivé části. Záhlaví, menu, text na stránce, obrázek, dolní část stránky, na které budou se střídat obrázky a zápatí. Níže uvádím zpracovaný mnou kód v HTML 4.01 a HTML 5, který je hlavní časti mojí práce. Vytvářila jsem webovou stránku v obojích verzích pro průhlednější porovnávání. HTML 4.01 HTML 5 <!DOCTYPE HTML PUBLIC "- <!DOCTYPE html> //W3C//DTD HTML 4.01//EN" " Tab. 1 Prvním a výrazně důležitým rozdílem je element <DOCTYPE>. V HTML 5 to se píše mnohem snadnějším způsobem a je snadno zapamatovatelný. Viz.Tab. 1 44

45 HTML 4.01 HTML 5 <meta http-equiv="content-type" <meta charset="utf-8"> content="text/html; charset=utf-8"> Tab. 2 Zjednodušil se element <meta> nicméně, starý způsob, jak určit kódování se zůstal. Viz. Tab. 2 HTML 4.01 záhlaví, text a menu <body> <div id="header"> <h2>ing. Stanislava <br /> <span>hrušková, Ph.D.</span></h2> </div> <div id="content"> <ul id="menu"> <li><a href="index.html">domu</a></li> <li><a href="seznampredmetu.html"> Seznam predmetu</a></li> <li><ahref="rozvrh.html">rozvrh</a> </li> <li><ahref="kontakt.html">kontakt</a ></li> <li><a href="o mne.html">o mne</a></li> </ul> <img id="flowers" src="images/neco.png" width="424" height="423"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula eros, fringilla id porttitor vitae, varius in augue.</br> In id lacus eu magna sagittis fermentum. Nulla facilisi. Cras eget odio mauris, vel pharetra velit.</br> </p> </div> HTML 5 záhlaví, text a menu <body> <header > <h2>ing. Stanislava <br /> <span>hrušková, Ph.D.</span></h2> </header> <nav> <a href="index.html">domu</a> <a href="seznam-predmetu.html">seznam predmetu</a> <a href="rozvrh.html">rozvrh</a> <a href="kontakt.html">kontakt</a> <a href="o mne.html">o mne</a> </nav> <article> <img id="flowers" src="images/neco.png" width="424" height="423"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula eros, fringilla id porttitor vitae, varius in augue.</br> In id lacus eu magna sagittis fermentum. Nulla facilisi. Cras eget odio mauris, vel pharetra velit.</br> </p> </article> Tab. 3 Rozdělení jednotlivých části v HTML 4.01 je pomocí atributu <div>, použitím univerzálních atributů id či class, definujeme čím je obsah daného elementu. Element id="content" indikuje na to, co patří k tomuto elementu. V tomto případě obsah elementu <div id="content"> se skládá z menu, obrázku a textu. Nová verze HTML 5 mnohem usnadňuje tvorbu stránek, v dřívější verzi HTML bylo nutné definovat každý prvek na webu pomocí elementu <div>, teď, každá jednotlivá část stránky má svůj speciální přiřazený název. 45

46 Např. do elementu <article> spadá samotný text a obrázek. Záhlaví má element <header> s ohledem na to, že je unikátní, a bude se zobrazovat na každé stránce, není nutné uvádět žádné univerzální atributy jako id či class. Díky tomuto při tvorbě menu už není potřeba v atributech <ul> a <li>. A tím pádem zjednodušený kód se rychleji načte a zobrazí se na stránce. Viz. Tab. 3 HTML 4.01 citace a footer <div id="citation"> <button id="arrow-left"></button> <div> I never think of the future - it comes soon enough. </br> -Albert Einstein</div> <button id="arrowright"></button> </div> <div id= footer > Stanislava Hrušková </div> </body> Tab. 4 HTML 5 citace a footer <aside> <button id="arrow-left"></button> I never think of the future - it comes soon enough. </br> -Albert Einstein <button id="arrow-right"></button> </aside> <footer> Stanislava Hrušková </footer> </body> V HTML 4.01 je nutnost v upřesňování typu elementu pomocí univerzálních atributů id a class. Není nutné psát přesné názvy do id či do classu, programátor si muže napsat cokoli, pro přístroj to nemá velký význam např. <div id="tady bude citace"> to pochopí stejně, kdyby tam bylo <div id="dfgdhf"> ale pro vhodnou a rychlou orientaci v kódu programátoři používají krátké slova v angličtině jako například <div id="citation">. Na rozdíl od HTML 4.01 v nové verzi HTML 5 je speciální element <aside>, který se používá pro text, který se netyká hlavního obsahu stránky. Veškerý text, který patří k elementu <footer> je pro zápatí webu. Viz. Tab. 4 46

47 15 Přidávání kódu CSS Nedílnou součásti zpracování webu je propisování kódu CSS. Kaskádové styly (v anglickém originále Cascading Style Sheets se zkratkou CSS) je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. [35] 15.1 Syntax Definice kaskádových stylů sestává z několika pravidel. Každé pravidlo obsahuje selektor a blok deklarací. Každý blok deklarací pak obsahuje seznam deklarací oddělených středníky: a každá deklarace sestává z identifikátoru vlastnosti, následuje dvojtečka a hodnota vlastnosti. Nepovinně ještě může následovat označení!important, které zvýší sílu deklarace. [35] Příklad: body { background-color: white; color: black; padding: 10px!important; } Celý blok nazveme pravidlo, body je selektor, část v závorkách je blok deklarací, řádek background-color: white; je deklarace samotná, backgroundcolor je identifikátor vlastnosti a white její hodnota. Celý kód pak nastavuje barvu pozadí stránky na bílou, barvu textu na černou a okraj na 10 pixelů. [35] Různé verze HTML, požadují různý typ propisování CSS kódu. Při napsání kódu jsem používala data z programů: Adobe Photoshop pomocí kterého jsem čerpala data ohledně šířky, webu, velikosti obrázků, odstupů a dalších údajů, které se týkají grafiky, pomocí předem napsaného HTML kódu jsem xxxx jednotlivým prvkům na stránce. [35] První, co ukazuje na to, že CSS patří k nové verzi označovacího jazyka HTML 5 je propisování blokových elementů, aby prohlížeč pochopil, že tyto elementy určují jednotlivé části na webové stránce. Níže je uveden příklad použití: HTML5 article, aside, figure, footer, header, nav, section {display: block; } Celou webovou stránku, kam patří hlavička, menu, text, obrázek, citace i dokonce copyright, jsem označila jako <div id="wrapper">. Wrapper je název celého označení. A proto kód CSS vypadá takto: #wrapper { 47

48 margin: auto; width: 960px; } Margin odpovídá za odstupy od každého okraje elementu. V tomto případě jsem nastavila auto, to znamená, že prohlížeč si nastaví sám, s ohledem na velikost obrazovky uživatele. Width odpovídá za šířku webové stránky, která má hodnotu 960px, hodnoty jsem zjistila pomocí pravítka v programu Adobe Photoshop. Abych zajistila správný výhled horní části webu, propsala jsem hodnoty k celé hlavičce. Aby prohlížeč pochopil, že tyto hodnoty patří k horní části, je nutné napsat header před uváděním těchto hodnot. header { margin-bottom: 35px; padding: 30px 0 25px; background: url("../images/header-border.png") repeat-x bottom;} Zadávání hodnot u elementu, odpovídajících za odstup funguje podle principu Hodiny, tedy první hodnota odpovídá za horní odstup, druhá za odstup na pravé stráně, třetí je dolní a čtvrtý je odstup z levé strany okraje. Nebo je možnost zadávání odstupu ve dvojicích. První dvojice odpovídá za horní a dolní odstup, druhá za pravý a levý odstup. Margin-bottom nastavuje odsazení na okraji každého prvku. Odsazení je prostor od hranice aktuálního prvku do vnitřního okraje jeho nadřazeného elementu. Viz. obr. 7 obr. 7 S ohledem na grafiku má dolní odstup hlavičky hodnotu 35px, to znamená, že veškeré elementy (např. obrázky, text, menu), jsou ve vzdálenosti 35px od hlavičky. 48

49 Padding Nastavuje hodnoty okrajů kolem obsahu elementu. Vzdálenost od vnitřního okraje rámu elementu do pomyslného obdélníku, který omezuje svůj obsah. Viz. Obr. 8 Obr. 8 Na bázi grafické části má odstup hodnoty 30px, 0 a 25px. Dokončením osnovy horní částí stránky je vodorovná čára, která odděluje horní část stránky. Čára má specifickou formu. V programu Adobe Photoshop pomocí nástroje Crop Tool jsem vydělila malou část čary a uložila jsem to jako obrázek pod názvem Peader-border ve formátu png, tento formát je dobrý, protože zabírá málo místa a rychle se načítá na stránce. Pomocí elementu background a doplňujících elementů. Element url ukazuje, že má být prvek načten z nějakého zdroje, a proto v závorce má být napsaná cesta k souboru, ze kterého se načítá obrázek. Lomítko znamená, že se jedná o složku, následující slovo je název složky, za dalším lomítkem následuje název obrázku. Tímto způsobem prohlížeč ví, jaký obrázek má použít, a ví, jakou cestou se k němu může dostat. Repeat-x bottom znamená, že je nutné to zopakovat po ose x dole. Příklad: "../images/header-border.png" Mým dalším krokem bylo definování textového zobrazení. Text, který se nachází ve hlavičce webové stránky má druhý stupeň tj. <h2>. Ing. Stanislava je první část textu, Hrušková, Ph.D. je druha část, tyto dvě části se odlišují jenom barevně, jinak mají stejnou velikost a typ písma. Proto je CSS a HTML kód rozdělen na dvě části. Pomocí elementu span jsem vydělila text uvnitř elementu <h2>. Tímto způsobem CSS ví, jakou barvu má přiřazovat k určitému textu. Element color ukazuje na barvu textu, font-size na velikost písma, font-family je typ 49

50 textu. Font-weight definuje tloušťku písma. Definice začíná od 100 do 900. Velmi světlé označení, které může zobrazit prohlížeč, je 100 a velmi tlusté 900. Normální písmo, které je nastaveno jako výchozí, má ekvivalent 400, standardní polotučný text je 700. Jiný způsob označování písma je pomocí klíčových slov. Bold je polotučné, Bolder je tučné, Lighter je světlé označování a Normal je normální. Text hlavičky má malý stín. Přidávání stínu je pomocí elementu text-shadow. Použitím nástroje Eyedropper Tool v programu Adobe Photoshop jsem zjistila barvu stínu. Definice stínu je v určitém pořadí: barva, posun po ose x, posun po ose y, poloměr rozmazání. V případě neuvádění rozmazaní se to přiřazuje samo jako výchozí u každého prohlížeče. Příklad: h2 { color: #7d7d7d; font-size: 43pt; font-family: Myriad; font-weight: normal; text-shadow: #d6d6d6 3px 3px; } h2 span {color: #e11d6b} 16 Implementace HTML kódu. Pro efektivní využiti webové stránky (aktualizace a změna informaci, změna výhledu stránek neboli úplné vynechání nějakých části webu atd.) je potřeba její implementace. Existuje několik možnosti v implementaci HTML kódu. První je statické HTML stránky, druhá je dynamické webové stránky. Jsou dva typů dynamických stránek: naprogramování vlastního systému, další možnost je využiti různých redakčních publikačních systémů, které jsou ve většině případů open source. Statická webová stránka je webová stránka, kterou vidí uživatel v přesně tak, jak je uložena. Takový typ stránek je obvykle uložen do souborového systému a jsou dostupné webovém serverem přes HTTP. [17] Jsem se nezvažovala možnost použití statistických webových stránek, a proto jenom uvádím výhody a nevýhody použití. Výhody použití statických webových stránek: 50

51 Z důvodu zvýšení bezpečností webových stránek a zabránění zkopírování zdrojového kódu jinými webovými vývojáři, byla použitá metoda programování na straně serveru. Nevýhody použití: Internetové vyhledávače vytvářejí indexy publikovaných HTML webových stránek, které byly v prvopočátku statické. S nástupem dynamických webových stránek, často tvořených ze soukromých databází, je obsah méně viditelný. Pokud tento obsah není nějakým způsobem duplikován (např. jako skupina extra statických stránek na stejné internetové stránce), vyhledávaní nemusí najít hledanou informaci. Je nemyslitelné předpokládat, aby internetové vyhledávače měli přístup do komplexních databázových struktur, přičemž mnoho databází může být zabezpečena. [18] Protikladem statických webových stránek jsou dynamické webové stránky. Dynamická webová stránka je druh webové stránky, jejíž obsah byl vygenerován aktuálními informacemi pro každé individuální zobrazení. Nejedná se o statickou webovou stránku, neboť její obsah se mění v závislosti na čase (např. blog), uživateli (např. přihlášení uživatele pomocí session), uživatelské interakci (např. online počítačová hra), kontextu (např. přizpůsobení pomocí parametrů) nebo jakékoli kombinaci předchozího. [19] Naprogramování vlastního systému je programování pomocí různých programovacích jazyků, nejpoužívanější z nich je PHP. Pozitivní stránky využiti tohoto způsobu: Tyto systémy mají nenáročné uživatelské rozhraní. Jsou individuální a tím pádem obsahují jenom to, co potřebuje daný uživatel na svém webu. Snadná možnost úpravy. Tyto systémy nejsou z programového hlediska tak složité a tudíž je jednodušší je upravit a dále rozvíjet. Negativní stránky použiti manuálního způsobu jsou: Je časově náročná. Tvorba vlastního systému trvá delší dobu, než využití hotového open source systému. Závislost na programátoru, který vytváří systém (časově neodpovědný nebo kvalita provedené práce nebude vyhovovat vašemu očekávání) Otevřený software, jeho anglický ekvivalent - open-source software nebo open software, zkratka OSS je počítačový software s otevřeným zdrojovým kódem. Otevřenost zde znamená jak technickou dostupnost kódu, tak legální dostupnost - licenci software, která umožňuje, při dodržení jistých podmínek, uživatelům zdrojový 51

52 kód využívat, například prohlížet a upravovat (na rozdíl od proprietárního software). [20] Využití hotového systému je velice rozsáhle mezi uživateli různých webů. Otevřený software má jak pozitivní a i negativní stránky. Pozitivní jsou: Rychlá a snadná implementace kódu. S ohledem na to, že tyto software se neustále rozvijí, implementace kódu se zlehčuje. Rozvoj ulehčuje ne jenom vkládání kódu a taky zjednoduší práci už na hotovém uživatelském rozhrání. Nezávislost na programátorech. Tento systém je už připraven pro využití. Možnost využiti hotové grafiky, kterou poskytuje publikační systém. Negativní jsou: Ochrana dat. Chyby, které se vyskytují v programech, může hledat široká skupina lidí a automatických pomůcek. Kvůli rozsáhlému přístupu je riziko nabourání útočníku do systému. Ale při využití populárního programu je toto riziko mnohem menší. Různé webové stránky požadují různé rozhraní. A proto občas je potřeba se přizpůsobovat svůj web k rozhraní a ne naopak. A proto mým rozhodnutím bylo využití otevřeného softwaru. Hlavními podmínky v průběhu vyhledávání byly: jednoduché uživatelské rozhrání (s ohledem na obsah webu není potřeba rozsáhlé rozhrání), dostupnost informačních zdrojů pomocí kterých se dá naučit postup implementace na daný systém a jednoduchá implementace HTML kódu. V průběhu vyhledávání otevřeného softwaru jsem vybírala ze dvou publikačních systému: WordPress a MODX. WordPress je svobodný open source redakční publikační systém napsaný v PHP a MySQL. Je vyvíjen pod licencí GNU GPL a je silně podporován společností Automattic, jejíž vývojáři se WordPressu věnují. WordPress je oficiálním nástupcem systému b2/cafelog a má širokou uživatelskou a vývojářskou komunitu, počet stažení verze 3.0 samotné dosahuje téměř 10 miliónů. [21] MODX je bezplatný open source systém správy obsahu a webový aplikační framework pro publikování obsahu na world wide web a intranetech. MODX má licenci GPL a napsaný v programním jazyku PHP s použitím SQL databázi. Tento software dostal cenu Nejslibnější Open Source Content Management Systém v roce [22] Při zkoumání systému MODX jsem používala lekce, které jsou dostupné na těchto webových stránkách Předem napsaný HTML 52

53 kód se vkládá do speciálního políčka v programu. Část webu, která se nemění v rozmezí celého webu např. hlavička nebo menu, musí byt naprogramovaná zvlášť. Programátor musí dodržovat speciálně stanovená pravidla systému MODX. Vzhled uživatelského rozhrání administrátorské části systému a část kódu Obr. 9 je na Obr. 9 Během prostudování obsahu jsem dospěla k závěru, že tento software je vhodnější pro web, který obsahuje velké množství stránek. Vkládání HMTL kódu vyžaduje dokonalé znalostí v programování, s ohledem na časovou omezenost jsem musela hledat software s jednodušší implementací. Další program, který jsem se rozhodla protestovat je WordPress. Testování, trénink a konečná implementace probíhala za pomoci lekcí z webu [23] Použití redakčních publikačních systémů je pohodlné tím, že nemusíme psát kód ke každé stránce. Toto zajišťuje programovací jazyk PHP, který nechá pevné částí a uživatel jenom se vkládá té části, které se mění. Většinou se mění obsah (text, grafy, obrázky). 53

54 17 Implementace Implementace se skládala z několika kroků: Stažení a instalování programů WordPress a WAMPSERVER. Přidávání HTML kódu do systému, spojováním s PHP. Práce nad administrativní části webu WAMPSERVER WAMPSERVER je zdarma ke stažení na [24]Po instalaci programu v právem dolním rohu Vašeho počítače se objeví tlačítko Wamp serveru. Toto je nutné spustit, kliknutím myši na Start All Services tlačítko, při správném fungování by mělo mít zelenou barvu, to znamená, že server už běží. Poté nutné dostat se na samotný server. Do prohlížeče zadáme adresu localhost. Poté se objeví stránka s nápisem Howdy, folks!. Viz na Obr. 10 Obr. 10 Odkud se vyskytuje nápis Howdy, folks? Při otevírání složek wamp -> www je jediný dokument s názvem index, při otevření kterého (pomocí programu Notepad ++ ) narazíme na kód. Viz Obr. 11 Obr. 11 To znamená, že PHP správně funguje a www směrování je root (administrátor), se kterým budeme pracovat. 54

55 Instalace systému WordPress do WAMPSERVERu se provede pomocí překopírování jednotlivých souborů WordPress (který jsem předem stáhla z [25] do WAMP serveru. Rozbalila jsem stažený soubor WordPress a celý jeho obsah jsem přemístila do složky WWW v WAMPSERVER. Soubor s názvem wp-config-sample přejmenovala jsem na wp-config. Do tohoto souboru se dává nastavení databázového spojení. Při načítání stránky localhost se objeví chyba Error establishing a database connection protože zatím není zřízena databáze Vytvoření databáze. Správa databáze probíhá pomocí Wamp. Kliknutím na phpmyadmin se otevře stránka, která spravuje databáze. Tento nástroj je součástí programu Wamp. Při kliknutím na Databases se otevře nové okno. Do okénka create new database jsem napsala název mojí databáze. Viz. Obr. 12 Obr. 12 Ve wp-config jsem provedla jsem par změn. Jako název databáze jsem dala wordpress, user jsem změnila na root a databáze nebude mít žádné heslo. Viz. Obr

56 Obr. 13 Při načítání stránky znovu, se objeví přihlašovací stránka, do které se vkládají údaje uživatele (uživatelské jméno, heslo, mail). Po vložení veškerých údajů se objeví stránka administraci Přidávání kódu do WordPress. Při tvorbě HTML stránky, všechny prvky, ze kterých se skládá webová stránka propisovala jsem do jednoho souboru. Ted pro dobrou strukturací je potřeba rozdělit webovou stránku na jednotlivé části. Každá jednotlivá část webu se bude načítat zvlášť. Spojeno to s tím, že obsah a struktura stránek se liší od toho na jaké stránce se nachází uživatel. Stáhla jsem soubor s propsaným PHP kódem. Který jsem uložila do složky Themis, která se nachází v wapm/www/wp-content/. Soubor se skládá z několika dílčích souborů. Položky, ze kterými jsem pracovala jsou: index, sidebar, header, footer. Otevřela jsem HTML kód a soubor s PHP pod názvem header a do toho souboru jsem vložila tu část kódu, která odpovídá za hlavičku na webové stránce. A tím pádem už nemusím propisovat ke každé stránce kód hlavičky, PHP to vygeneruje sám. S PHP kódem to vypadá takhle: <!DOCTYPE html> <html <?php language_attributes();?>> <head> <meta http-equiv="content-type" content="<?php bloginfo('html_type');?>; charset=<?php bloginfo('charset');?>" /> <title><?php wp_title(' ', true, 'right');?><?php bloginfo('name');?></title> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url');?>" /> <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' );?> <?php wp_head();?> </head> <body <?php body_class();?>> <header> 56

57 <h2><a href="<?php echo get_option('home');?>">ing. Stanislava <br /> <span>hrušková, Ph.D.</span></a></h2> </header> A stejný postup jsem provedla s každou jednotlivou částí stránky Přidávaní položek do menu. V menu, kliknu na položku Pages a Add New. Objeví se stránka s polí. V horním pole napíšu název budoucí stánky, v tomto případě je to nápis pro jedno z položek v menu. Do dalšího pole napíšu to, co se má objevit na stránce. Po uložení proseděných změn na stránce, pokračují, dal. Viz. Obr. 14 Obr. 14 V menu kliknutím na políčko Apearance se objeví tyto položky: Themes, Widgets, Menus a Editor. V tohoto menu budu pracovat s Menus. Po kliknutí se objeví nová stránka s polí. V seznamu stránek vyberu si tu, kterou přidám do menu. V tomto případě je to test1. Viz. Obr