UNIVERZITA PARDUBICE WEBOVÉ STRÁNKY DLOUHODOBÉ HRY DOPRAVNÍ FAKULTA JANA PERNERA HTTP://PERPETUUM.WZ.CZ



Podobné dokumenty
HTML - Úvod. Zpracoval: Petr Lasák

HTML Hypertext Markup Language

Úvod do tvorby internetových stránek v jazyce HTML

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Úvod do aplikací internetu a přehled možností při tvorbě webu

PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě

Úvod do tvorby internetových aplikací

Tvorba webových stránek

Mgr. Vlastislav Kučera lekce č. 2

Mgr. Vlastislav Kučera přednáška č. 2

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

Mgr. Stěpan Stěpanov, 2013

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Tvorba webových stránek

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

Tvorba webu. Úvod a základní principy. Martin Urza

Tvorba webových stránek

(X)HTML, CSS a jquery

22. Tvorba webových stránek

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Uspořádání klient-server. Standardy pro Web

WWW a HTML. Základní pojmy. Ivo Peterka

Výukový materiál KA č.4 Spolupráce se ZŠ

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

Inovace výuky prostřednictvím šablon pro SŠ

Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML

Úvod do jazyka HTML (Hypertext Markup Language)

MODERNÍ WEB SNADNO A RYCHLE

Základy WWW publikování

Mgr. Vlastislav Kučera přednáška č. 1

Vývoj Internetových Aplikací

Databázové aplikace pro internetové prostředí PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku

Tvorba fotogalerie v HTML str.1

TNPW1 Cvičení aneta.bartuskova@uhk.cz

INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie

Tvorba stránek v HTML ve Wordu

Základy HTML. Autor: Palito

Tvorba WWW stránek. Mojmír Volf

Mgr. Vlastislav Kučera přednáška č. 1

APLIKACE XML PRO INTERNET

Současný svět Projekt č. CZ.2.17/3.1.00/32038, podpořený Evropským sociálním fondem v rámci Operačního programu Praha adaptabilita

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

Manuál pro obsluhu Webových stránek

Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky

CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura

1. Začínáme s FrontPage

NSWI096 - INTERNET. Úvod do HTML

Nové přístupy tvorby web site. Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001

Vstupní požadavky, doporučení a metodické pokyny

Internet 2 css, skriptování, dynamické prvky

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

Střední odborná škola a Střední odborné učiliště, Hořovice

DUM č. 11 v sadě. 36. Inf-12 Počítačové sítě

Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují.

13. Vytváření webových stránek

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Název modulu: Tvorba webu pomocí XHTML a CSS začátečníci

TNPW1 Cvičení

CZ.1.07/1.5.00/

Tvorba WWW stránek. přehled technologií používaných na webu principy jednotlivých technologií a možnosti jejich vzájemného kombinování

1 Webový server, instalace PHP a MySQL 13

Publikování map na webu - WMS

TVORBA WEBOVÝCH STRÁNEK

Internet 1 vývoj, html, css

Webové stránky. 1. Publikování na internetu. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

Nová struktura souborů a složek

Vyšší odborná škola a Střední škola,varnsdorf, příspěvková organizace. Šablona 5 VY 32 INOVACE

Maturitní otázky z předmětu PROGRAMOVÁNÍ

Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

Základy programovacího jazyka HTML. Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

Další nutný soubor je laydiv.js, ve kterém jsou uloženy funkce pro zobrazování virů na ploše a funkce pro odkaz na Teachers Guide.

VYHLEDÁVACÍ BANNER PRO WEBOVÉ STRÁNKY

Dnešní téma. Oblasti standardizace v ICT. Oblasti standardizace v ICT. Oblasti standardizace v ICT

Stránka se dá otevřít dvěma způsoby

<link> - definuje vztah k jiným XHTML dokumentům, typicky

Internet 1. ÚVOD. Příklad stránky WWW v prostředí Internet Exploreru vidíte na obr.:

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu

Základy HTML. Obecná syntaxe HTML. Struktura HTML

(X)HTML a CSS. VOŠ a SŠT Česká Třebová

================================================================================ =====

PHP - úvod. Kapitola seznamuje se základy jazyka PHP a jeho začleněním do HTML stránky.

Kaskádové styly. CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.

CSS Stylování stránek. Zpracoval: Petr Lasák

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

STŘEDNÍ ŠKOLA INFORMAČNÍCH TECHNOLOGIÍ A SOCIÁLNÍ PÉČE

KAPITOLA 2 - ZÁKLADNÍ POJMY INFORMAČNÍCH A KOMUNIKAČNÍCH TECHNOLOGIÍ

Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,

Aplikace pro srovna ní cen povinne ho ruc ení

Programování webových stránek

25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY

Jazyky pro popis dat

Dokumenty umístěné na počítačových serverech jsou adresovány pomocí URL (Uniform Resource Locator).

Transkript:

UNIVERZITA PARDUBICE DOPRAVNÍ FAKULTA JANA PERNERA WEBOVÉ STRÁNKY DLOUHODOBÉ HRY HTTP://PERPETUUM.WZ.CZ SEMESTRÁLNÍ PRÁCE Z PŘEDMĚTU ÚVOD DO INFORMAČNÍCH TECHNOLOGIÍ DATUM ODEVZDÁNÍ 7.2.2007 JIŘÍ KALINA, STUDENT OBORU TŘD

1. OBSAH: 1. Obsah 2 2. Úvod 3 3. Základy jazyka HTML 4 3.1. Jazyk HTML 4 3.2. Základní struktura stránky 4 3.3. Použití rámců 5 3.4. Využití kaskádových stylů 5 4. Struktura původních stránek v jazyku HTML 6 4.1. Rozvržení stránek na rámce 6 4.2. Formátování jednotlivých stránek 7 5. Využití skriptu PHP pro inovaci stránek 8 5.1. Úvod do problematiky PHP skriptu 8 5.2. Užití PHP skriptu na stránkách Perpetua 8 5.3. Výsledná podoba stránek 10 6. Další internetové služby 12 6.1. Statistika návštěvnosti www.navrcholu.cz 12 6.2. Pořadí odkazu na vyhledávači Google.com 12 6.3. Konsorcium W3C 13 7. Prameny 14 2

2. ÚVOD: Tato práce se zabývá vznikem, strukturou a vývojem internetových stránek dlouhodobé hry pro veřejnost Perpetuum na adrese http://perpetuum.wz.cz. Stránky plní funkci média, přinášejícího aktuální informace účastníkům korespondenční hry, navíc jsou prostorem pro vyvěšování souborů určených ke stažení a plní také nezanedbatelnou propagační funkci. Protože nebyla žádoucí přílišná dynamičnost stránek, které by tak mohly konkurovat»mateřskému«serveru http://iklubovna.cz, byla zvolena jednoduchá forma s využitím prostého jazyka html, později rozšířená na elementární prvky skriptu PHP. Díky poměrně malé návštěvnosti stránek bylo možné výhodně využít zdarma nabízeného hostingu na serveru http://webzdarma.cz, který současně podporuje PHP skript a poskytuje dostatečný prostor pro požadované účely, zejména pro ukládání souborů ke stažení (elektronické verze časopisu a komiksu ke hře). Pozornost při vývoji stránek byla věnována také propojenosti s jinými stránkami a zanechání maximálního množství odkazů v internetu, což se projevilo na postupném zvýšení počtu návštěv a kladném vývoji hodnocení pořadí stránek po zadání klíčových slov vyhledávačem http://google.com. Ke sledování návštěvnosti a řady s ní souvisejících parametrů bylo využito služby serveru http://navrcholu.cz, která je v nejjednodušší formě tarifu Lite poskytována zdarma. 3

3. ZÁKLADY JAZYKA HTML 3.1. JAZYK HTML HTML (Hyper Text Markup Language) je podle zjednodušené definice jazyk pro tvorbu a formátování internetových stránek, zároveň je podmnožinou obecnějšího značkovacího jazyka SGML. Původně byl jazyk HTML vyvinut (kolem roku 1989) jako prostředek pro komunikaci mezi fyziky v centru jaderného výzkumu CERN; pro svoji jednoduchost a účelnost se však časem rozšířil jako prostředek tvorby internetových stránek na internetu v rámci služby WWW (World Wide Web). Hypertext lze definovat jako text neomezený linearitou, tedy text, který v sobě obsahuje odkazy na jiné své části, což umožňuje libovolně»přeskakovat«mezi více částmi jednoho textu nebo více texty bez nutnosti pročítat celý text lineárně od začátku do konce, tak jak to odpovídá způsobu lidského myšlení. Služba WWW je v současnosti nejrozšířenější službou internetu. Její podstatou je právě prohlížení stránek psaných v jazyce HTML, které tvoří základní jednotku služby WWW. Stránky jsou přenášeny k uživateli (klientu) od poskytovatele (serveru) pomocí protokolu HTTP (Hyper Text Transfer Protocol). Základem jazyka HTML je formátování textu pomocí tzv. tagů, zapisovaných do špičatých závorek <>, což jsou vlastně příkazy pro interpret jazyka (prohlížeč), který tagy převede na značky, s jejichž pomocí tvoří výslednou grafickou podobu stránky tak, jak ji spatří uživatel. 3.2. ZÁKLADNÍ STRUKTURA HTML STRÁNKY Vlastní stránka je představována souborem s příponou htm nebo html, který obsahuje text (kód lze tedy vytvořit v libovolném textovém editoru) sestávající výhradně z tagů a formátovaného obsahu stránky (případně poznámek, které prohlížeč záměrně ignoruje). Tagy lze rozdělit na dvě základní skupiny tagy párové a nepárové. Párové tagy jsou uspořádané dvojice příkazů stejného znění, kdy příkaz uzavřený v závorkách <> označuje začátek formátované oblasti a příkaz uzavřený v závorkách s lomítkem </> označuje její konec. Nepárové tagy jsou samostatné příkazy, jejichž provedení vykoná prohlížeč právě tam, kde se tag nachází. Příkladem párového tagu může být podtržený text (označen je začátek a konec podtrženého textu), příkladem nepárového tagu obrázek vložený v textu. Nejdůležitějším tagem každé HTML stránky je tag <html>, uvedený zcela na počátku zdrojového kódu stránky, který prohlížeči oznamuje, že uvedený text je zápisem stránky v jazyce HTML. Tag <html> je tag párový, tudíž konec stránky musí být kódován tagem </html>. Stránku v jazyce HTML lze rozdělit na dvě základní části, označené párovými tagy <head> </head> a <body> </body> tedy na hlavičku a tělo. Hlavička obsahuje esenciální i doplňkové informace, platné v rámci celé stránky např. nadpis, jazyk, ve kterém je stránka napsána, kódování textu na stránce, odkazy na další soubory, potřebné ke správnému zobrazení stránky, informace pro vyhledávače apod. Tělo stránky pak představuje vlastní obsah, který se zobrazí v prohlížeči HTML stránek, tedy texty, tabulky, odkazy, obrázky a další prvky. Není v možnostech tohoto textu a ani jeho účelem zmínit větší množství tagů, nutné k úplnému pochopení problematiky psaní HTML stránek, proto se omezíme na konstatování, že existují desítky možností, jak formátovat text změnou velikosti, barvy a řezu písma, barvy pozadí a odkazů, vkládáním obrázků na pozadí, do textu a mnoha způsoby jejich obtékání, užitím jednoduchých grafických prvků typu čar a prostých geometrických obrazců, vkládáním tabulek, seznamů, citací a dělením textu na odstavce a bloky. Veškeré formátovací příkazy jsou zadávány pomocí definovaných tagů, které lze navzájem vnořovat a jejich upřesňujících parametrů, zva- 4

ných atributy, které se vepisují mezi závorky prvního tagu. Hodnoty atributů se vpisují mezi americké uvozovky, jak ukazuje následující příklad podtrženého textu zelené barvy velikosti 10: <u><font color= green size= 10 >Zelený text velikosti 10.</font></u> 3.3. POUŽITÍ RÁMCŮ Jedním z pozdějších rozšíření jazyka HTML je možnost využít při rozvržení výsledku zobrazeného v prohlížeči takzvaných rámců, definovaných užitím tagů <frameset> </frameset> a <frame> </frame>. Rámce umožňují rozvrhnout okno prohlížeče na obdélníkové oblasti tak, že se v každé oblasti zobrazuje jiná stránka, přičemž mezi rámci se lze na stránky libovolně odkazovat pomocí atributu target, udávajícího název cílového rámu odkazu (vizte ukázku zdrojového kódu v části 4.1.). Užitím rámců je tak možné dosáhnout např. stálého zobrazení grafické hlavičky stránky (nikoliv hlavičky ve smyslu kódu HTML), zobrazení»rozcestníku«s odkazy, kterým je možno přepínat mezi obsahem jednotlivých stránek apod. V současnosti se rozvržení okna prohlížeče na rámce téměř nevyužívá z důvodu nehomogennosti stránky jako celku (každý rámec má např. vlastní posuvník) a přednost je dávána generování stránky podle potřeb užitím některého ze skriptů (vizte např. PHP skript v části 5.2.). 3.4. VYUŽITÍ KASKÁDOVÝCH STYLŮ Pro rychlejší a jednodušší úpravu textu a grafiky pomocí předdefinovaných stylů (např. jeli třeba na stránce využít dva texty různé velikosti a barvy pro nadpisy, poznámky pod čarou, odkazy apod.) lze využít tzv. kaskádových stylů CSS (Cascading Style Sheets), tj. předem nadefinovaných hodnot jednotlivých atributů příslušných tagů. Kaskádové styly lze vložit buď přímo k příslušnému tagu, do hlavičky stránky a nebo do externího souboru, obvykle s koncovkou css. Zápis kaskádového stylu může pak vypadat například následovně: a { } color: rgb(255,153,102); text-decoration : none; font-family : Verdana,Tahoma,Arial,sans-serif; font-size : 12px; font-weight : bold; text-align: left; 5

4. STRUKTURA PŮVODNÍCH STRÁNEK V JAZYKU HTML 4.1. ROZVRŽENÍ STRÁNEK NA RÁMCE Původní struktura stránek předpokládala jednotný vzhled se stále viditelnou hlavičkou v podobě loga hry; rozcestníku, umožňujícího zobrazovat ve třetí části plochy okna různý obsah a této největší části, ve které by se jednotlivé stránky zobrazovaly. K dosažení tohoto záměru byl použit nejjednodušší způsob využitím rámců (frames), jakožto jedné z možností rozšíření jazyka HTML. Důležitým požadavkem se záhy ukázalo také stejné zobrazení při prohlížení stránek v různých internetových prohlížečích (zejména Mozilla Firefox a Microsoft Internet explorer) a především při různém rozlišení monitoru. Proto byla stanovena pevná šířka zobrazovaných oblastí a proměnlivá šířka dalších oblastí, sloužících pro výplň na zobrazovacích jednotkách s šířkou vyšší než 800 obrazových bodů. Rozvržení rámců užitím tagu <frameset> tedy vypadalo v souboru index.htm následovně: <html> <head> <title>perpetuum</title> <frameset rows ="259,*" border="0" scrolling="yes"> <frameset cols="*,790,*" border="0"> <frame name="ram1" src="bok.htm" scrolling="no" norsize></frame> <frame name="ram2" src="vrsek.htm" scrolling="no" norsize></frame> <frame name="ram3" src="bok.htm" scrolling="no" norsize></frame> </frameset> <frameset cols="*,160,652,*" border="0"> <frame name="ram4" src="bok.htm" scrolling="no" norsize></frame> <frame name="ram5" src="rozcestnik.htm" scrolling="no" norsize></frame> <frame name="ram6" src="text.htm" scrolling="auto" norsize></frame> <frame name="ram7" src="bok.htm" scrolling="no" norsize></frame> </frameset> </head> <noframes> </noframes> </html> V rámci označeném jako Ram2 se zobrazovala jednoduchá a poměrně nezajímavá stránka rozcestník.htm, která obsahovala pouze obrázek hlavičky ve formátu jpg. Ještě prostší obsah vyplňoval rámce Ram1, Ram3, Ram4 a Ram7, kde stránka bok.htm nemající žádný obsah, pouze s vhodně nadefinovanou barvou pozadí, vyplňovala flexibilně zbývající prostor stránky, nevyužitý vzhledem k vyššímu než optimálnímu rozlišení zobrazovací jednotky. O poznání zajímavějším byl obsah rámce Ram5, kde stránka rozcestník.htm sloužila jako přepínač mezi jednotlivými stránkami s konkrétním obsahem v rámci Ram6, který byl implicitně, tj. při prvním načtení. Uspořádání odkazů na stránce rozcestník.htm pak přibližuje následující příklad (odkazy v souboru byly uspořádány do řádků tabulky, což reprezentuje uvedený párový tag <tr> </tr> a buněk v řádcích, tj. <td></td>): <tr> <a href="text.htm" target="ram6"> <td bgcolor="#555555" width="160" valign="top"> <a href="text.htm" target="ram6" color="#ff9966">hlavní stránka</a></a> </td></a> </tr> 6

JIŘÍ KALINA 4.2. FORMÁTOVÁNÍ JEDNOTLIVÝCH STRÁNEK Pro dodržení jednotného stylu zobrazovaného výsledku složeného z více stránek byly odstraněny vhodným nastavením atributů rámců přepážky oddělující rámce, tudíž opticky stránky díky stejnobarevnému pozadí splynuly zdánlivě v jeden celek. Samotné formátování jednotlivých stránek zobrazovaných v rámci Ram6 využívalo uspořádání nadpisu v jinobarevném rámečku a následujícího textu a obrázků užitím kaskádových stylů, uložených v souboru css.css přímo v kořenovém adresáři na HTTP adrese stránek. Veškeré prvky na stránkách byly barevně voleny v souladu s logem v tmavě šedé, žluté a oranžové barvě, což vynutilo z důvodu dostatečného kontrastu bílou barvu textu. Design stránek významně ovlivnily také odkazy na související a příbuzné stránky a povinná reklama, vyplývající z obchodních podmínek společnosti poskytující prostor na webu. Výsledný vzhled je patrný z následujícího obrázku: Zjevně rušivým prvkem se však stal posuvník v pravé části rámce Ram6, který se zobrazoval u všech stránek většího rozsahu. Do budoucna bylo navíc nutno jednak umístit do stránky rozcestník.htm více odkazů na externí stránky, jednak odkazy na zadání úkolů dalších etap (vizte pravidla dlouhodobé hry přímo na stránkách), což by vedlo ke zobrazení dvojice posuvníků i v této části, jehož následkem by byl jednak naprostý grafický úpadek stránky, jednak podstatně ztížená orientace návštěvníků. Protože nebylo možné nalézt řešení užitím prostého HTML kódu, bylo nutno použít skript pro generování výsledné stránky po částech. 7

5. VYUŽITÍ SKRIPTU PHP PRO INOVACI STRÁNEK 5.1. ÚVOD DO PROBLEMATIKY PHP SKRIPTU PHP (Personal Home Page) je programovací (skriptovací) jazyk pracující na serveru, ze kterého klient načítá HTML stránku. Výsledkem procesu, naprogramovaného užitím PHP je tedy hotová HTML stránka, kterou již po načtení do prohlížeče nelze dále měnit (na rozdíl od programovacích jazyků typu Java Skript, které popisují procesy probíhající na straně klienta). Díky tomu, že PHP pracuje na straně serveru, může zpracovávat zde uložené databáze. V praxi obvykle skript napsaný v jazyce PHP»složí«z mnoha souborů (např. formátu txt), textů zadaných přímo ve skriptu, údajů z databází a dalších vstupů výslednou podobu HTML stránky, kterou potom odešle na počítač klienta. Jazyk PHP tedy umožňuje do jinak statických HTML stránek vnést dynamické chování, které je dnes v prostředí internetu nezbytné i u poměrně jednoduchých aplikací. Protože skript jazyka PHP probíhá na serveru, je programování stránek využitím PHP kódu obtížnější než při použití prostého HTML. Je nutné provádět úpravy přímo na serveru, kde je testována funkčnost skriptu a odlaďovány nedostatky, nebo emulovat server přímo v počítači využitím některé speciální aplikace pro psaní PHP skriptů. 5.2. UŽITÍ PHP SKRIPTU NA STRÁNKÁCH PERPETUA Pro plnohodnotné nahrazení rámců, ve kterých se zobrazovaly jednotlivé HTML stránky, jedinou stránkou, generovanou užitím PHP skriptu, bylo nejprve nutno rozdělit tuto stránku na oblasti, velikostí a tvarem odpovídající původním rámcům. To umožňuje párový tag <div> </div>, nazývaný oddíl. Pomocí atributů tohoto tagu lze stránku rozdělit na oddíly s přesně definovanou pozicí, výškou a šířkou, tedy dokonce lépe než při použití rámců. Konkrétně vypadá rozvržení stránek užitím kaskádových stylů následovně: div { }.logo { width: 790; height:259; position: absolute; top:0; left: 50%; margin-left: -395; }.rozcestnik { height: 1241; width: 160; position: absolute; top: 259; left: 50%; margin-left: -406; }.telo { height: 1241; width: 652; position: absolute; top: 259; left: 50%; margin-left: -246; } 8

Rámce Ram1, Ram3, Ram4 a Ram7, které v původní variantě sloužily pouze pro vyplnění prázdného prostoru mimo hlavní zobrazovanou oblast, není třeba oddíly nahrazovat, neboť nyní celková stránka HTML pokrývá celou šíři zobrazovací jednotky, tedy i mimo nadefinované oblasti, barva pozadí tak zůstane zachována v celé ploše okna prohlížeče. Umístění rámců na střed stránky bylo dosaženo nastavením atributu cols na hodnotu např. *,790,*, kde čísla označovala šířku rámce v obrazových bodech a hvězdičky značily rovnoměrné vyplnění zbývajícího prostoru. Vycentrování«oblastí je naproti tomu provedeno pomocí atributu left, jehož hodnota je nastavena na 50%, posunutí oproti poloze uprostřed okna je pak provedeno nastavením atributu margin-left na hodnotu odpovídající příslušnému počtu obrazových bodů. Obsah oblastí je nyní, na rozdíl od předešlého řešení, kde byl uložen v samostatných HTML stránkách, uložen v souborech formátu txt, které jsou zpracovávány PHP skriptem pomocí příkazu include, který slouží k umístění textu ze souboru na příslušné místo v generované HTML stránce. Názorněji lze celou věc předvést na následujícím příkladu: <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows- 1250"> <title>perpetuum</title> <link href="css.css" rel=stylesheet type=text/css> </head> <body bgcolor="#333333"> <div class="logo"> <img src="logo1.jpg" alt="perpetuum"> </div> <div class="rozcestnik"> <?php include "rozcestnik.txt";?> </div> <div class="telo"> <?php if ($_GET["stranka"]!= "") {include $_GET["stranka"];} else {include "text.txt";}?> </div> </body> </html> Celá stránka je tímto způsobem zapsaná v souboru index.php. Po nezbytné definici HTML stránky a její hlavičky, které jsou společné pro všechny výsledné zobrazované stránky, následuje výčet oddílů vždy doplněný příkazem include, který do příslušného oddílu umísťuje text uložený ve jmenovaném txt souboru. Složitější situace nastává u třetího oddílu, jehož obsah je proměnlivý a závisí tedy na hodnotě, uložené v proměnné stranka. Jelikož PHP nevyžaduje předběžnou deklaraci proměnných, stačí do proměnné stranka uložit jméno příslušného txt souboru (tedy souboru, ve kterém je uloženo to, co se má do oblasti zobrazit) přímo při odkazování na danou stránku pomocí definované syntaxe za názvem PHP souboru je otazník a následuje výčet proměnných a jim přiřazovaných hodnot, navzájem řazené přes znaménko &. Pomocí podmínky if ($_GET["stranka"]!= "") je implicitně (při prvním načtení bez přiřazení jiné hodnoty) přiřazena proměnné stranka hodnota text.txt. 9

Je-li tedy vyžadováno do třetího oddílu načtení textu ze souboru galerie.txt, je nutno uložit řetězec galerie.txt do proměnné stranka a poté načíst soubor index.php (vizte výše), ve kterém se nachází skript, jenž toto načtení zajistí. Toho lze docílit odkazem na adresu: http://perpetuum.wz.cz/index.php?stranka=galerie.txt Díky tomu, že jsou delší texty uloženy v samostatných txt souborech, je soubor index.php poměrně neobjemný a přehledný, což umožňuje snazší úpravy jednotlivých stránek a rychlejší orientaci v samotném skriptu. Nutnou změnou oproti HTML verzi s rámci je samozřejmě také fakt, že odkazy v»rozcestníku«, uloženém v souboru rozcestnik.txt, odkazují vždy na stejný soubor index.php, pouze pokaždé s jiným přiřazením hodnoty do proměnné stranka (vizte zdrojový kód stránek přímo na internetu). Obdobného principu bylo využito také při zobrazování zvětšených obrázků jednotlivých»hlášení«účastníků hry, kde je do prázdné HTML stránky vložen jediný tag, umísťující na ni obrázek příslušného jména a do nadpisu stránky (tag <title> </title>) vkládá popis obrázku. Pro generování stránky je zde využit příkaz echo, obdobný příkazu write v Pascalu či Basicu v součinnosti s proměnnou popis: <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows- 1250"> <?php echo"<title>"; echo $_GET["popis"]; echo "</title>";?> <link href="css.css" rel=stylesheet type=text/css> </head> <body bgcolor="#333333"> <?php echo"<img src=\""; echo $_GET["obr"]; echo"\" alt=\""; echo $_GET["popis"]; echo "\">";?> </body> </html> 5.3. VÝSLEDNÁ PODOBA STRÁNEK Mimo zpřehlednění stránek ze strany jejich tvůrce a zdokonalení možností dalšího rozšíření, došlo zejména k zpřehlednění stránek pro uživatele díky tomu, že se jedná o jedinou stránku tvořenou oddíly, zmizely jednotlivé posuvníky v rámcích a objevil se posuvník jediný, společný pro celý obsah, který je tak možno posouvat dohromady. Při malém objemu dat na stránkách Perpetum se příliš neprojevila další výhoda, která však může být u rozsáhlejších stránek důležitá, a to, že se nenačítá při přechodu na jinou stránku opět obsah, který je pro všechny stránky společný, ale pouze kód, ve kterém se jednotlivé stránky liší. To vede jednak ke zvýšení rychlosti, jednak k zamezení»přeblikávání«monitoru při přechodu z jedné stránky na druhou. 10

Výslednou podobu stránek po přestavbě využitím PHP kódu ke dni 7.2. 2007 představuje následující obrázek: 11

6. DALŠÍ INTERNETOVÉ SLUŽBY 6.1. STATISTIKA NÁVŠTĚVNOSTI WWW.NAVRCHOLU.CZ Pro weby do 100000 stránek zobrazených za měsíc nabízí český server www.navrcholu.cz možnost sledování statistiky návštěvnosti stránek v tarifu Lite zdarma. Jedinou podmínkou je umístění skriptu obdobného níže uvedenému na stránky, kde se poté zobrazí jedna z možných ikon, sloužících jako reklama odkaz na jmenovaný server. <skript src="http://c1.navrcholu.cz/code?site=98425;t=blk80" type="text/jav ascript" target="_blank"> </script> <noscript> <div> <a href="http://navrcholu.cz/" target="_blank"> <img src="http://c1.navrcholu.cz/hit?site=98425;t=blk80;ref=;jss=0" widt h="80" height="30" alt="navrcholu.cz" style="border:none" /> </a> </div> </noscript> Daným způsobem je možné zjistit počty návštěvníků stránek za hodinu, den, týden a měsíc, délku strávenou na stránkách, jejich přesné IP adresy a případně další údaje (placené verze nabízí možnost zjištění vstupních a výstupních bodů, rozlišení monitoru, prohlížečů, operačních systémů a mnoha dalších informací). Statistika stránek http://perpetuum.wz.cz za leden 2007 vypadá následovně: 6.2. POŘADÍ ODKAZU NA VYHLEDÁVAČI GOOGLE.COM V současnosti bezesporu nejvyužívanějším vyhledávačem v celosvětovém měřítku je služba Google na adrese http://google.com. Ačkoliv přesné mechanizmy vyhledávání stránek a především stanovení jejich pořadí mezi výsledky příslušného dotazu je společností Google tajeno, na tzv. bonitě odkazu se podílí řada známých faktorů. Mezi hlavní patří počet odkazů směřujících na stránky a ze stránek (pravděpodobně, do čím»vzdálenější«oblasti odkaz směřuje, tím lépe), bonita stránek, na které odkazy míří, jazyk stránky, údaje v hlavičce stránky a počet přístupů na stránku z výsledků hledání službou Google. 12

Více či méně užitečné jsou tzv. meta tagy, které se píší do hlavičky stránky a řada jich může pravděpodobně ovlivnit pořadí vyhledávané stránky ve výsledcích hledání. Obecně mají meta tagy podobu: <meta name= Vlastnost content= Obsah > Kde vlastnosti description, keywords, robots, googlebot a Content language oznamují popis stránky pro vyhledávače, klíčová slova, zákaz indexace roboty, resp. Googlem a informaci pro automatické přepínání jazyka prohlížeče. Pro zlepšení pořadí odkazu na stránky Perpetua bylo hned v prvních dnech po spuštění stránek 3.10.2006 umístěno přes 40 odkazů na stránky do řady českých internetových katalogů a dohodnuto jednostranné či reciproké zveřejnění odkazů s několika významnými servery v dětském hnutí v ČR (klubovna.cz, bohousek.cz, ekamarad.cz, apod.). Svoji roli jistě také sehrála mimointernetová propagace dlouhodobé hry, která vedla k častému vyhledávání adresy Perpetua právě pomocí vyhledávače Google a tak zvýšení počtu prokliků, stejně jako neobvyklost slova v českém prostředí. Dalšími faktory mohou být, zda se vyhledávaný výraz objevuje přímo v adrese srtánky, v jejím nadpisu, kolikrát se výraz objevuje na stránce apod. Vývoj pořadí odkazu na stránky Perpetua v závislosti na době od zahájení provozu a propagace stránekshrnuje následující tabulka: Dny od spuštění a zahájení propagace 1 7 14 63 127 Pořadí ve výsledcích - 91. 49. 3. 3. Ve srovnání se stránkami podobného charakteru, avšak bez úmyslného zanechávání co možná největšího počtu stop v internetu, jejichž pořadí je od»nalezení«službou Google víceméně konstantní, si stránky Perpetua vedly výjimečně dobře. Nicméně hlediskem, které všechna výše jmenovaná kritéria zdaleka předčí, je shoda jazyka, který je nastaven jako jazyk vyhledávače a jazyka stránky samotné (zde není myšleno vyhledávání v určitém jazyce, které lze na serveru google.com také nastavit, ale jazyk, který používá server pro komunikaci s uživatelem). Pořadí stránek v různých jazycích udává následující tabulka: Jazyk Česky Rusky Anglicky Německy Rumunsky Tradičně čínsky Tatarsky Pořadí ve výsledcích 158. 3. 169. 14. 155. 26. 10. 6.3. KONSORCIUM W3C Konsorcium W3C je mezinárodní konsorcium založené v roce 1994, které sjednotilo v té době směrem vzájemné nekompatibility se ubírající různé verze jazyka HTML. Konsorcium vydává standardy a doporučení, kterými se řídí WWW v zájmu dosažení optimální funkčnosti a dokonalé kompatibility. Jednou ze služeb konsorcia je možnost validace stránek (po úspěšné validaci lze na stránkách zobrazit ikonu, ohlašující správnost stránek podle standardů konsorcia) pomocí HTML validátoru na adrese http://validator.w3.org/. Stránky Perpetua dosud neprošly úspěšnou validací (validátor indikuje 94 chyb na úvodní stránce), odstranění sporných částí textu by však vedlo k nežádoucím změnám, proto bylo prozatím rozhodnuto nezískat validaci v zájmu zachování příslušných funkcí. 13

7. PRAMENY Co je to PHP?, [online]. [cit.2007-2-6]. Dostupný na WWW: http://php.interval.cz/clanky/co-je-to-php/. Quo vadis HTML, [online]. [cit.2007-2-6]. Dostupný na WWW: http://www.kosek.cz/clanky/cw/html.html. Termíny jazyka HTML, [online]. [cit.2007-2-7]. Dostupný na WWW: http://www.jakpsatweb.cz/html/terminologie.html. Hypertext, aneb umění cestovat odněkud někam, [online]. [cit.2007-2-6]. Dostupný na WWW: http://www.vesmir.cz/clanek.php3?cid=5271. Jazyk HTML, [online]. [cit.2007-2-7]. Dostupný na WWW: http://www1.cuni.cz/~michal/clanky/html.html. 14