MASARYKOVA UNIVERZITA PEDAGOGICKÁ FAKULTA

Katedra technické a informační výchovy

Internetové stránky základní školy

Bakalářská práce

Brno 2010

Vedoucí práce: Ing. Martin Dosedla Autor práce: Petr Symerský Bibliografický záznam SYMERSKÝ, Petr. Internetové stránky základní školy. Brno: Masarykova univerzita, Fakulta pedagogická, Katedra technické a informační výchovy, 2010. Vedoucí diplomové práce Ing. Martin Dosedla.

Anotace Bakalářská práce „Internetové stránky základní školy“ pojednává o moţnostech, jakým způsobem můţe škola získat internetové stránky, případně jaké metody můţe pedagog pro tvorbu stránek pouţít, pokud se rozhodne pro tvorbu vlastních stránek. V práci také srovnávám programy, které mohou usnadnit tvorbu internetových stránek.

Annotation B. A. Thesis „Web sites of primary school“ deals with .the possibilities how the school can gain the internet web site or what methods of work the teacher can use for creating these web sites, if he decides for creating his own sites. I compare some computer programmes in my work, which can make easier creating internet web sites.

Klíčová slova Informační technologie, internetové stránky, základní škola, HTML, PHP, CSS.

Keywords Information technology, web sites, grammar school, HTML, PHP, CSS.

2

Prohlášení

Prohlašuji, že jsem tuto bakalářskou práci vypracoval samostatně, dle pokynů vedoucího bakalářské práce. Podklady, ze kterých jsem čerpal, jsou řádně uvedeny na konci práce v seznamu použité literatury.

V Bystřici pod Hostýnem dne 9. prosince 2009 Petr Symerský

3

Poděkování

Rád bych poděkoval vedoucímu své bakalářské práce Ing. Martinu Dosedlovi za odborné vedení, cenné rady a poznámky, které mi poskytl při jejím zpracování. Také děkuji své rodině, přátelům a kolegům za podporu a trpělivost při tvorbě mé práce, kterou se mnou po celou dobu měli.

4

Obsah

Úvod ...... 6 1. Tvorba nových webových stránek ...... 7 1.1. Stránky „na klíč“ ...... 7 1.2. Redakční nebo publikační systém ...... 7 1.2.1. Staţení zdrojového kódu ...... 8 1.2.2. Tvorba pomocí webové aplikace ...... 8 1.3. Tvorba vlastních stránek ...... 9 1.3.1. Webhosting ...... 9 1.3.2. Registrace domény ...... 10 1.3.3. NIC ...... 10 2. Jak napsat zdrojový kód...... 11 2.1. HTML kód ...... 11 2.1.1. Historie HTML ...... 11 2.1.2. Zdrojový text HTML ...... 12 2.1.3. XHTML ...... 13 2.2. CSS ...... 13 2.3. PHP ...... 15 2.4. ASP ...... 16 2.5. MySQL ...... 16 2.6. JavaScript ...... 16 2.7. ...... 17 3. Programy pro tvorbu internetových stránek ...... 18 3.1. Strukturní editory ...... 18 3.1.1. Homesite ...... 18 3.1.2. PSPad ...... 19 3.1.3. HTML-Kit ...... 20 3.1.4. HTMLPad ...... 21 3.2. Wysiwyg editory ...... 22 3.2.1. Microsoft FrontPage ...... 22 3.2.2. ...... 22 3.3. Porovnání jednotlivých editorů ...... 24 4. Školní web ...... 25 4.1. Obecná pravidla pro tvorbu školního webu ...... 26 5. Návrh konkrétního webu ...... 29 6. Anketa úspěchu nového webu ...... 31 7. Závěr ...... 35 8. Seznam pouţité literatury ...... 36 Seznam příloh ...... 37 Přílohy ...... 38

5 Úvod

Počítače, internet a informační technologie jsou dnes nedílnou součástí běţného ţivota. Téměř kaţdý člověk se s nimi denně potkává. Informační technologie nyní zasahují do většiny odvětví lidské činnosti. Mnoho firem a institucí, ale i obyčejných lidí, by si dnešní svět bez jejich přítomnosti nedokázalo představit. S počítačem se setkáváme denně, například při převodech peněz pomocí internetového bankovnictví nebo v obchodech, kde jsou pokladny napojeny na centrální síť prodejny, dále většina komunikace, objednávky firem a podobné věci probíhají pomocí internetu a e-mailů.

S rozvojem internetu a jeho snadné dostupnosti se většina firem a institucí začala orientovat na prezentace své práce pomocí webových stránek na internetu. Pro jejich zákazníky, partnery, ale i obyčejného zvědavého člověka je to dobrý způsob jak představit svou firmu nebo instituci. Lidé si mohou z pohodlí domova a nikým nerušeni prohlíţet jednotlivé webové stránky a sami si mohou vybrat, co potřebují vědět a co je zajímá.

Škola, jako vzdělávací instituce, má určitě také pomocí internetu co nabídnout svým zaměstnancům, ţákům a jejich rodičům. Pro rodiče je velice výhodné, pokud si mohou o škole, kam jejich dítě chodí, zjistit důleţité informace přes internet. Proto si myslím, ţe by kaţdá škola měla mít své kvalitní webové stránky, na nichţ bude nabízet aktuální informace o dění na škole. Tyto stránky by měly slouţit i jako pomocník ţáka při studiu.

6 1. Tvorba nových webových stránek

Škola má několik moţností jak získat nové webové stránky. Můţe si nechat vyrobit stránky takzvaně „na klíč“, další moţností je tvorba stránek pomocí nějakého zavedeného redakčního nebo publikačního systému a poslední volbou je kompletní tvorba vlastních stránek. Záleţí na tom, kolik financí je škola ochotna do stránek investovat, na informatické zručnosti pedagogů nebo na znalostech a ochotě učitele informatiky. Dále je důleţité si uvědomit, jak velkou část pedagogického sboru chce škola do provozování projektu zapojit.

1.1. Stránky „na klíč“

Nejjednodušší způsob jak získat nové webové stránky je nechat si je kompletně vytvořit nějakou firmou, která se zabývá tvorbou stránek. Na internetu existuje obrovské mnoţství firem, které dokáţí vytvořit stránky na zakázku. Stačí si jen vybrat podle referencí dané firmy (zjistíme jaké stránky jiţ firma vytvořila a zda se nám jejich styl práce líbí), dále si vybereme technologii, jakou jsou stránky vytvořeny a v neposlední řadě podle ceny, která se můţe dost lišit.

Tato moţnost je elegantní a pohodlná, výsledkem jsou profesionální stránky přímo šité na míru. Nevýhodou této moţnosti je poměrně velká cena za tvorbu stránek. Propracované stránky, které jsou dynamické, dokáţí s uţivatelem komunikovat a obsahují vetší databázový systém, se mohou cenově vyšplhat do desetitisíců. Tyto stránky jsou ve většině případů tvořeny tak, ţe i méně zkušený uţivatel dokáţe měnit a doplňovat obsah stránek, nicméně pro provedení nějaké zásadnější změny je potřeba opět kontaktovat danou firmu.

1.2. Redakční nebo publikační systém

Jinou moţností, jak mít vlastní stránky, je tvorba pomocí redakčního nebo publikačního systému. Jedná o předpřipravenou funkční stránku, kterou si zkušenější uţivatel dokáţe upravit podle svých představ. Jedná o systém, který je buď distribuován jako balíček obsahující zdrojový kód celého projektu (většinou volně šiřitelný a upravitelný) včetně návodu na instalaci a správu, který se dá stáhnout z internetu, nebo o webovou aplikaci, pomocí které uţivatel tvoří stránky přímo v internetovém prohlíţeči pouhým vyplňováním příslušných políček.

7 1.2.1. Stažení zdrojového kódu

Webové stránky získáme staţením zdrojového kódu některého volného redakčního systému (na internetu existuje pár takových systémů). Tyto programy jsou ve většině případů volné programové vybavení; můţete jej šířit a modifikovat podle ustanovení Obecné veřejné licence GNU. To znamená, ţe si stáhnete kompletní funkční systém, který můţete umístit na svůj web. Můţete ho dále upravovat a také kopírovat uţ vytvořené skripty a části kódu. Tento způsob je kompromisem mezi tvorbou vlastních stránek a „stránek na klíč“. Administrátor těchto stránek by měl mít základní znalosti programování pomocí HTML, PHP a CSS. Takto vytvořený projekt si škola můţe umístit na internet. Součástí tohoto systému bývá i administrátorské prostředí, pomocí kterého můţe více uţivatelů přidávat různé příspěvky. Například učitelé dostávají moţnost jak přidávat články a tím se podílet na chodu celého školního webu. Největší nevýhodou je docela velké omezení jak změnit stránky ke své úplné spokojenosti. Většina systémů je tvořena v určitém duchu a administrátor nemá mnoho prostoru pro zásadnější změny systému. Dále není vţdy jednoduché zjistit, jak určité elementy fungují a jejich případná změna proto bývá sloţitá. Jedním z takovýchto systémů je redakční systém a publikační systém phpRS. U této moţnosti musí mít škola zajištěn hosting stránek, aby bylo moţno hotové stránky umístit na internet.

1.2.2. Tvorba pomocí webové aplikace

Na internetu existují i webové aplikace, které dokáţí zaloţit, vytvořit a spravovat internetové stránky. Jedná se o webové rozhraní, ve kterém uţivatel dokáţe navrhnout stránky. Uţivatel vytvoří a spravuje stránky tím, ţe vyplňuje přednastavené šablony a do připravených formulářů vkládá příslušný text. Změna vzhledu, fontů, barev a jakékoliv úpravy se provádějí pouhým klikáním na příslušná tlačítka. Při této tvorbě uţivatel nepotřebuje ţádné znalosti programování. Překlad do příslušného kódu zajistí samotná webová aplikace. U této tvorby je nabízeno několik šablon vzhledů, které uţivatel můţe drobně upravit.

Příkladem takovéto webové aplikace jsou www.estranky.cz, které zadarmo nabízejí pouze omezenou kapacitu úloţného prostoru a omezené moţnosti, včetně zobrazení reklamy poskytovatele stránek. Pokud bychom chtěli více místa pro soubory a více moţností, je nutné platit roční poplatek. Podobně fungují i stránky www.webgarden.cz, kde je webhosting i tvorba zadarmo. Výhodou této volby je, ţe uţivatel nemusí znát programovací jazyk a tvorba stránek je velice jednoduchá a škola se nemusí starat o webhosting stránek, jelikoţ

8 stránky jsou umístěny na serveru poskytovatele stránek. Nevýhodou bývá omezený výběr vzhledu, to ţe se jedná většinou o doménu třetího řádu (internetová adresa kromě našeho vlastního názvu obsahuje i doménu, kde máme stránky vytvořeny), zobrazení reklamy poskytovatele stránek a to, ţe uţivatel nemůţe moc zasahovat do změny nastavení stránek (je dána určitá šablona, kterou nelze radikálně měnit).

1.3. Tvorba vlastních stránek

Časově nejnáročnější a co do znalostí nejrozsáhlejší moţností je kompletní tvorba vlastních internetových stránek. Při zvolení této cesty musí učitel informatiky nebo příslušný pedagog, který se rozhodne vytvořit stránky, znát nějaké techniky tvorby internetových stránek. Při tvorbě vlastních stránek je nutná a důleţitá příprava. Je nutné si rozmyslet, co vše se bude na stránkách školy nacházet, jaké funkce budou stránky plnit a jakým způsobem budou stránky fungovat. Dále je velice důleţité navrhnout grafický design stránek a celkový vzhled. Jelikoţ se jedná o stránky školy, je nutné si posbírat velké mnoţství informací, které budou na stránkách školy umístěny.

Je také potřeba mít zajištěn webhosting stránek a registraci domény, aby bylo moţné stránky umístit na internet. Existuje mnoho firem, které se zabývají sluţbou webhostingu, registrací a parkováním domény.

1.3.1. Webhosting

Webhosting je pronájem prostoru pro internetové stránky na cizím serveru na internetu. Pronajímatel serveru bývá označován jako poskytovatel webového prostoru. Díky tomu si škola můţe své internetové stránky umístit na internet, aniţ byste museli mít vlastní webserver. Webhosting je ve většině případů placená sluţba. Platí se obvykle pravidelný roční poplatek po dobu trvání webhostingu. Existuje i bezplatná varianta, kterou nazýváme freehosting. Freehosting nezahrnuje ţádné záruky ohledně funkčnosti a často je podmíněn umístěním reklamy na stránkách. Součástí webhostingových sluţeb jsou většinou také emailové schránky s antispamovými a antivirovými filtry, moţnost staţení pošty do poštovního klienta (například Outlook Express nebo Mozilla Thunderbird) pomocí protokolu POP3 a odesílání pošty protokolem SMTP. Coţ je výhoda, protoţe tak si škola můţe vytvořit své vlastní emailové adresy, které jsou zakončeny doménou školních stránek. Nevýhodou webhostingu je to, ţe jeden server poskytovatele je často sdílen s více uţivateli a můţe se tedy stát, ţe v případě poruchy či přetíţení jednoho webu jsou významně ovlivněny funkce

9 ostatních webů na serveru poskytovatele. To můţe mít za následek pomalejší načítání stránek, či dokonce dočasné omezení přístupu na stránky. Webhosting je pouze samotné umístění stránek na serveru. Aby se uţivatelé internetu ke stránkám dostali, je potřeba mít zaregistrovánu doménu a zajištěné její udrţování.

1.3.2. Registrace domény

Registrace domény druhého řádu není v dnešní době nic zvláštního a drahého, znamená to zvolit si jméno svých internetových stránek, které uţivatelé budou zadávat do internetových prohlíţečů. Tuto doménu si musíme zaregistrovat u společnosti, která se zabývá registrací domén. Registraci předchází výběr příslušného jména domény (u této práce je doména naší školy zsmasa). Pokud si zvolíme název, dále si vybereme doménu prvního řádu (například .cz, .eu, atd.) a ověříme, zda naše doména jiţ není zaregistrovaná. Pokud je celé doménové jméno včetně domény prvního řádu volné, můţeme úspěšně doménu zaregistrovat. Registrace domény je placená sluţba, za registraci se platí jednorázový poplatek. Pokud chceme doménu vlastnit delší dobu, platí se za její udrţování roční poplatek. Většina firem, které nabízí webhosting, zároveň zajistí registraci a udrţování domény. Tato webová prezentace naší školy pouţívá doménové jméno www.zsmasa.cz . Správcem domény nejvyššího řádu (u nás tedy .cz) je společnost NIC.

1.3.3. NIC

CZ.NIC, z. s. p. o. je zájmové sdruţení právnických osob zaloţené roku 1998 předními poskytovateli internetových sluţeb. Hlavní činností sdruţení je provozování registru doménových jmen .CZ a 0.2.4.e164.arpa (ENUM), zabezpečení provozu domény nejvyšší úrovně CZ a osvěta v oblasti doménových jmen. CZ.NIC je členem mezinárodních organizací, které sdruţují obdobné organizace ve světě (CENTR, ccNSO a dalších), a také členem sdruţení EURid spravujícího evropskou doménu .EU.

Příklady webových stránek, kde je možná registrace domény a webhosting:

http://www.nic.cz http://www.czechia.com http://www.cesky-hosting.cz http://www.regzone.cz https://www.domena.cz/domain/easy.html

10

2. Jak napsat zdrojový kód.

S postupným rozvojem internetu vznikají a vyvíjí se různé moţnosti a standardy jak psát zdrojový kód. Původním a jediným jazykem pro tvorbu webových stránek byl jazyk HTML. S postupem času a s přibývajícími nároky na vzhled a funkci stránek vznikají i jiné jazyky, které doplňují nebo nahrazují jazyk HTML. Jedná se například o jazyk na vytváření stylů a úpravu vzhledu stránek, jazyk CSS.

Jelikoţ pomocí samotného HTML se dají tvořit jenom takzvané statické stránky (prezentace, která dokáţe jen představit obsah, uţivatel nemůţe moc ovlivnit chod stránek), vznikají různé doplňkové jazyky jako Javascript, PHP nebo ASP. Aby byly stránky plně dynamické a uţivatel mohl měnit jejich obsah i z prostředí stránek, doplňuje se jazyk PHP i databázovým jazykem MySQL. Poslední a také nejmladší způsob tvorby a úpravy stránek je pomocí Adobe Flash. Adobe Flash je nástroj pro tvorbu interaktivních webových animací a prezentací.

2.1. HTML kód

HTML (HyperText Markup Language) je značkovací jazyk pro hypertext. Jedná se o kód, který slouţí k zobrazování dat předem zadaným způsobem. Kód HTML je tedy přesným a stručným vyjádřením toho, co chceme zobrazit v internetovém prohlíţeči. Jedná se tedy o jazyk, který slouţí k popisu webové stránky. HTML kód si můţeme představit jako návod, jak vytvořit stránky. Jedná se o posloupnost příkazů, kterou si můţeme přestavit takto:

Vezmi obrázek s logem školy, který se jmenuje logo.jpg, a umísti jej na obrazovku nahoru na střed. Pod tento obrázek napiš červeným písmem o velikosti 4: „ Vítejte na stránkách ZŠ T. G. Masaryka“. Posuň se na další řádek, změň písmo na kurzivu o velikosti 3 a napiš: „Naše stránky“.

Aby prohlíţeč rozuměl takovémuto návodu, je potřeba jej přesně zapsat pomocí jazyka HTML.

2.1.1. Historie HTML

V roce 1989 spolupracovali Tim Berners-Lee a Robert Caillau na propojeném informačním systému pro CERN, výzkumné centrum fyziky poblíţ Ţenevy ve Švýcarsku. V té době se pro tvorbu dokumentů obvykle pouţívaly jazyky TeX, PostScript a také SGML.

11 Berners-Lee si uvědomoval, ţe potřebují něco jednoduššího a v roce 1990 byl tedy navrţen jazyk HTML a protokol pro jeho přenos v počítačové síti – HTTP (HyperText Transfer Protocol – přenosový protokol hypertextu). Zároveň také Tim Berners-Lee napsal první webový prohlíţeč, který nazval WorldWideWeb.

V průběhu let vývoje Internetu se samozřejmě vyvíjel i jazyk HTML. Nejedná se v ţádném případě o jednou navrţený kód. HTML se dynamicky mění v souladu s technologickým vývojem a poţadavky vývojářů softwaru a jeho uţivatelů. Na vývoji HTML se nepodílí jen jedna skupina lidí. Největší vliv na formování kódu mají firmy zabývající se tvorbou internetových prohlíţečů. Jelikoţ kaţdá z firem implementuje do jazyka své značky, aby se předešlo tomu, ţe v různých prohlíţečích bude jedna stránka vypadat odlišně, vzniklo W3C (WWW Consorcium), které výslednou podobu HTML schvaluje. Existují proto různé schválené verze HTML kódu. V roce 1991 byla vydána první verze kódu nesoucí název HTML 0.9. Momentálně plně funkční a pouţívaná je verze HTML 4.01, nicméně je schválená nová verze nesoucí název HTML 5, které má být pouţívána vývojáři kolem roku 2010.

2.1.2. Zdrojový text HTML

Kaţdý programovací jazyk má svůj zdrojový text vytvořený programátorem. Stejně tak má HTML svůj zdrojový text, který popisuje grafickou podobu stránky v prohlíţeči. Jako kaţdý programovací jazyk má i HTML svou přesnou syntaxi, kterou je nutno dodrţovat. Díky velice rychlému vývoji a změnám HTML kódu zde však existuje jistá flexibilita. Jelikoţ prohlíţeče počítají s tím, ţe se dopustíte nějakých drobných chyb, dokáţí některé prohlíţeče zobrazit tyto chyby korektně. Ne vţdy tomu tak je, a nemusí se tak dít u různých prohlíţečů stejně, proto se doporučuje ověřit validitu stránek pomocí internetového validátoru. Nicméně HTML kód se oproti jiným programovacím jazykům velice dobře ladí, jelikoţ chybu, a to, ţe se nechová kód jak má, vidíme hned v prohlíţeči. Narozdíl od klasických programovacích jazyků nemusíme nic dlouze ladit a zkoušet, stačí jeden pohled a vidíme, zda se stránka chová jak má, či nikoli.

Zdrojový text HTML je vţdy pouze textový formát ASCII, který má příponu HTM nebo HTML. V tomto samém textovém formátu stránku interpretuje i prohlíţeč, proto není třeba jako v jiných programovacích jazycích program kompilovat do ţádného binárního souboru. Z toho plyne jedna obrovská výhoda, nepotřebuje ţádný speciální program ani kompilátor a postačí nám jakýkoliv textový editor ukládající text jako sled znaků ASCII. Coţ je například

12 Poznámkový blok, dodávaný s operačním systémem Windows. Můţeme pouţít i některé specializované programy pro tvorbu internetových stránek. Více v kapitole Programy pro tvorbu internetových stránek.

2.1.3. XHTML

XHTML (zkratka anglického eXtensible HyperText Markup Language – „rozšiřitelný hypertextový značkovací jazyk“) je značkovací jazyk pro tvorbu hypertextových dokumentů v prostředí WWW vyvinutý W3C. Jedná se o jakousi implementaci XML do HTML. Původně se předpokládalo, ţe se stane nástupcem jazyka HTML, jehoţ vývoj byl verzí 4.01 ukončen. V roce 2007 však došlo k zaloţení pracovní skupiny, která má za cíl vytvořit novou verzi HTML, která ponese označení HTML 5 a její XML variantu XHTML 5. Vedle toho paralelně pokračuje i vývoj XHTML 2.0.

XHTML se od HTML na první pohled moc neliší. Jedná se o pár rozdílů a zpřísnění některých pravidel pro tvorbu dokumentu. Rozdíly mezi XHTML a HTML jsou tyto:

Všechny atributy mají hodnoty v uvozovkách, je zakázáno kříţení tagů, tagy a atributy jsou malými písmeny, nepárové tagy končí lomítkem, párové tagy jsou párové povinně, všechny atributy musejí mít hodnotu, interní a styly se zapisují jiným způsobem, dokument má mít XML prolog, dokument poţaduje správný doctype.

2.2. CSS

CSS (zkratka anglického Cascading Style Sheets) se česky „překládá“ jako tabulka kaskádových stylů. Je to jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. Jazyk byl navrţen standardizační organizací W3C. Byly vydány zatím dvě úrovně specifikace CSS1 a CSS2. Verze CSS3 je nyní ve vývoji a pracuje se na testování funkcí.

13 Hlavní smysl CSS je umoţnit těm, kdo tvoří internetové stránky, oddělit formátování vzhledu dokumentu od jeho struktury a obsahu. Původně to měl umoţnit uţ jazyk HTML, ale v důsledku nedostatečných standardů a konkurenčního boje výrobců prohlíţečů se vyvinul jinak. Starší verze HTML obsahují celou řadu elementů, které nepopisují jen obsah a strukturu dokumentu, ale i způsob jeho zobrazení. Z hlediska zpracování dokumentů a vyhledávání informací není takový vývoj ţádoucí.

Pouţívání kaskádových stylů má mnoho výhod. První výhodou je daleko větší moţnost formátování dokumentu neţ v běţném HTML. Další výhodou je konzistence jednotlivých stylů vzhledu. V CSS stačí pro určitý druh nadpisu stejné úrovně, tabulky nebo textu nastavit jednou, jak má vypadat, a pak mohou všechny nadpisy, které mají stejnou úroveň, vypadat stejně. Narozdíl od HTML, kdy bychom museli pro kaţdý nadpis zvlášť vypsat formátování. Vytvoří se jeden soubor se stylem, ten bývá většinou zakončen příponou . a následně se připojí k HTML dokumentu. Tento dokument se styly můţe slouţit všem HTML dokumentům a můţe formátovat celý web. Dynamická práce se styly umoţní, ţe pokud je potřeba změnit styl konkrétního elementu, stačí přepsat styl toho určitého elementu a vzhled se změní u všech prvků, které jsou podle příslušného stylu. V HTML bychom museli vyhledat veškeré elementy a u všech měnit atributy. S tímto souvisí i změna designu celého webu, obvykle stačí jen přepsat soubor se styly. Mohou také existovat různé styly pro různá zařízení. Například pokud chceme, aby na papíře při tisku vypadal dokument jinak neţ na monitoru počítače. Tohle se hojně vyuţívá, protoţe pro tisk nepotřebujeme většinu formátování, která se zobrazuje na monitoru.

Pouţívání CSS má i své nevýhody. Tou hlavní je ne vţdy plná podpora všech funkcí v různých prohlíţečích (jedná se o majoritní prohlíţeče jako Internet Explorer, Firefox nebo Opera). Prohlíţeče obsahují v implementaci CSS chyby a výsledek nemusí být v jednotlivých prohlíţečích stejný. Podle mých zkušeností fungují správně CSS v Mozille Firefox, i kdyţ i tady jsou některé výjimky. Například zarovnání pomocí text-align:center se musí řešit pomocí margin: auto, aby to fungovalo i v Mozilla Firefox. S Internet Explorerem je více problémů se správným zobrazováním všech prvků, neţ bychom si představovali. Je zde samozřejmě moţnost vytvoření více stylů a podle internetového prohlíţeče se můţe volit příslušný styl, který se má zobrazovat. Tím se dají vyřešit problémy s různou interpretací stylu a tím i s různým zobrazováním.

14 2.3. PHP

PHP (zkratka anglického PHP: Hypertext Preprocesor) PHP je skriptovací jazyk pro tvorbu dynamického webu a jeho počátky spadají do roku 1994. Tehdy se Rasmus Lerdorf rozhodl vytvořit jednoduchý systém pro počítání přístupu ke svým stránkám a zkratka PHP tehdy ještě označovala „Personal Home Page“. Původně se jednalo o program vytvořený pomocí jazyku . Za nějakou dobu byl systém přepsán do jazyka C, protoţe kód Perlu dost zatěţoval server. U toho však nezůstalo. V polovině roku 1995 se systém PHP spojil s jiným programem stejného autora, a to sice s nástrojem "Form Interpreter" neboli zkráceně FI. Tak vzniklo PHP/FI 2.0. Koncem roku 1998 byla jiţ k dispozici verze PHP 3.0, která byla mnohem rychlejší (a vybavenější) neţ "dvojka" a která byla k dispozici rovněţ pod operačními systémy Windows. PHP 4, přidává do jazyka mnoho nových funkcí a rovněţ přináší přepracované a tudíţ podstatně rychlejší jádro Zend. V dnešní době je aktuální verze PHP 5 a přidává do PHP nové objektově orientované funkce jazyka, které usnadňují správu rozsáhlých projektů.

Díky své flexibilitě a velice krátké době osvojení se z PHP stal velice oblíbený skriptovací jazyk. Je to i tím, ţe je veden jako open source. Výhodou open source je, ţe je zadarmo a nezávislý na platformě. Jeho obliba i nadále roste a někdy je vnímán jako alternativa ASP od společnosti Microsoft.

Hlavním rozdílem PHP oproti klasické tvorbě stránek je to, ţe skripty se nezpracovávají v počítači, ale přímo na serveru. V praxi to funguje tak, ţe pokud někdo klikne na element obsahující PHP skript, server, na kterém je stránka uloţena, tento příkaz provede a výsledek operace pošle prohlíţeči. Uţivatel vidí výsledek práce skriptu a nevidí skript. To znamená, ţe zdrojový kód nelze zobrazit v prohlíţeči. Uţivateli se zobrazí jiţ vykonaný skript. Tvůrce stránek si tedy nemusí lámat hlavu s kompatibilitou jednotlivých prohlíţečů. O to se postará server. Lze bez problémů kombinovat HTML a PHP do jednoho dokumentu, je však důleţité si uvědomit, jak bude výsledek vypadat.

Díky tomu, ţe se výsledné skripty provádí na serveru, je nutné, aby server měl nainstalován PHP a dokázal skripty přeloţit. S tím souvisí i ladění stránek na počítači. Aby programátor viděl výsledek práce, musí si nainstalovat na počítač nějaký webový server, který umí zobrazovat PHP skripty. Nejčastěji se pouţívá Apache, který je distribuován zdarma stejně jako PHP. Pokud bychom Apache nebo jiný web server neměli, PHP skripty prohlíţeč

15 vynechá a na jejich místě se nic nezobrazí. Pokud chce programátor vidět výsledek, musí se na stránku dívat přes internetový prohlíţeč a mít zapnutý web server.

2.4. ASP

ASP (zkratka anglického ) je skriptovací platforma společnosti Microsoft, primárně určená pro dynamické zpracování webových stránek na straně serveru. V dnešní době se pouţívá nástupce ASP.NET. Jedná se o jinou koncepci tvorby dynamických stránek neţ PHP. Jelikoţ stránky školy jsou tvořeny pomocí PHP, zmiňuji zde ASP jako alternativní skriptovací jazyk místo PHP.

2.5. MySQL

MySQL je databázový systém vytvořený švédskou firmou MySQL AB. Jeho hlavními autory jsou Michael „Monty“ Widenius a David Axmark. MySQL je k dispozici jak pod bezplatnou licencí GPL, tak pod komerční placenou licencí. MySQL je multiplatformní databáze. Komunikace s ní probíhá pomocí jazyka SQL. Podobně jako u ostatních SQL databází se jedná o dialekt tohoto jazyka s některými rozšířeními.

Pro svou snadnou implementovatelnost (lze jej instalovat na Linux, MS Windows, ale i další operační systémy), výkon a především díky tomu, ţe se jedná o volně šiřitelný software, má vysoký podíl na v současné době pouţívaných databázích. Velmi oblíbená a často nasazovaná je kombinace MySQL, PHP a Apache jako základní software webového serveru.

2.6. JavaScript

JavaScript je programovací jazyk, který se pouţívá v internetových stránkách. Zapisuje se přímo do HTML kódu. JavaScript je klientský skript, to znamená, ţe se program odesílá se stránkou do prohlíţeče a teprve tam je vykonáván. (Protikladem klientských skriptů jsou skripty serverové, například PHP, které jsou vykonávány na serveru a na klienta jdou uţ jen výsledky.) JavaScript je interpretovaný objektově orientovaný jazyk. Nemusí se tudíţ kompilovat a vyuţívá zabudovaných objektů i objektů prohlíţeče. JavaScript má však několik omezení. Funguje pouze v prohlíţeči, uţivatel můţe JavaScript zakázat, existují různé odlišné verze jazyka i prohlíţečů, coţ vede k častým chybám, neumí přistupovat k souborům (kromě cookies) ani k ţádným systémovým objektům a neumí ţádná data uloţit (kromě cookies).

16 2.7. Adobe Flash

Flash je grafický vektorový program, momentálně ve vlastnictví společnosti Adobe (dříve Macromedia). Pouţívá se především pro tvorbu internetových interaktivních animací, prezentací a her. Rozšíření Flashe na internetu pomohla malá velikost výsledných souborů, protoţe se uchovávají ve vektorovém formátu, a proto ve většině případů vytlačily flashové bannery ty klasické, dříve pouţívané ve formátu GIF. Flash má také vlastní implementovaný programovací jazyk ActionScript, který slouţí k rozvinutí všech moţností interaktivní animace a vývoji robustních aplikací, v aktuálních verzích je ActionScript poměrně vyspělý, objektově orientovaný programovací jazyk.

17 3. Programy pro tvorbu internetových stránek

Pokud nechceme vytvářet internetové stránky přímo v Poznámkovém bloku, můţeme pouţít nějaký program, který nám usnadní práci. Existují dva základní typy HTML editorů – strukturní a wysiwyg. Strukturními editory se píše a upravuje přímo zdrojový kód, je tedy nutné znát jazyk HTML. Wysiwyg editory zobrazují stránku uţ při psaní tak, jak bude vypadat v prohlíţeči a kód generují automaticky, ţádná znalost jazyka HTML není potřeba.

3.1. Strukturní editory

K tvorbě stránek pomocí strukturního editoru je potřeba znát HTML kód. I kdyţ by se mohlo zdát, ţe zde není rozdíl proti tvorbě v Poznámkovém bloku, skutečnost je jiná. Strukturní editory jsou velice oblíbené mezi pokročilejšími a profesionálními programátory dynamických a jinak specifických stránek, kde je třeba mít naprostou kontrolu nad vytvářeným kódem. Jelikoţ oproti Poznámkovému bloku dokáţí zdrojový kód barevně rozlišovat, nabízejí příkazy i s jejich parametry. Některé programy dokáţí nastavit dokument podle příslušné normy. Existují programy, které mají dokonce implementován validátor zdrojového kódu. Mezi zástupce těchto programů patří například: Macromedia Homesite, PSPad, HTML-Kit, HTMLPad a jiné.

3.1.1. Macromedia Homesite

Macromedia HomeSite (původně Allaire HomeSite, nyní vlastní společnost Adobe) je editor internetových stránek pro zkušenější vývojáře, kteří rozumí HTML. HomeSite vám ovšem psaní kódu maximálně usnadní a zrychlí. Od zvýraznění syntaxe, přes automatické doplňování, aţ po integrovaný průzkumník a FTP klient. Výsledný kód pak můţete překontrolovat validátorem pro HTML, XHTML a navíc upravit pomocí Code Sweeper a HTML Tidy. Homesite umí převést kód dokumentu z HTML do XHTML. Můţete si také ukládat často pouţívané kusy kódu, které pak snadno přetáhnete do zdroje. Podpora W3C standardů navíc umoţňuje integraci nejnovějších technologií. HomeSite rozhodně patří mezi špičku profesionálnách HTML editorů a nechybí mu ţádná důleţitá funkce. Navíc je plně nastavitelný, včetně editace samotných tagů. Nyní je dostupný pouze ve verzi 5.5 a jedná se o placený software. Program Homesite je také dostupný jako 30-ti denní trial verze, která je volně ke staţení na stránkách společnosti Adobe (www.adobe.com). Od 26. 5. 2009 byl vývoj nových verzí ukončen, protoţe program byl implementován do Adobe Dreamweaver CS4.

18 Obrázek 1. Prostředí Macromedia Homesite

3.1.2. PSPad

Je to velmi zajímavý free unicode vývojářský editor určený programátorům nejrůznějších programovacích jazyků (HTML, XHTML, PHP, JavaScript …). Program PSPad je původní český program a je šířen jako , coţ znamená, ţe je zdarma. Program neobsahuje velkou řadu zbytečných funkcí, které většina tvůrců stránek stejně nikdy nevyuţije, a soustředí se spíše na jednoduchost, přehlednost a rychlost. Zajímavá je na tomto programu funkce šablony, která umoţňuje definovat určitou část programové kódu pod definovaný příkaz a při programování tento kód rychle vyvolat. V poslední verzi byla přidána moţnost definice vlastních klávesových zkratek pro určité příkazy, coţ je velmi oblíbená funkce. Program PSPad je zdarma ke staţení na stránkách www..com/cz.

Obrázek 2. Prostředí PSPad

19 3.1.3. HTML-Kit

HTML-Kit je freewarový a velmi vyspělý HTML editor, který obsahuje snad všechny funkce drahých konkurentů. Samozřejmostí programu je zvýraznění syntaxe, nabízení příslušných parametrů aktuálního tagu, automatické dokončování slov, náhled rozepsaného zdrojového kódu. Menší nevýhodou je, ţe ve výchozím nastavení nejsou nadefinovány klávesové zkratky pro rychlé vkládání tagů. Naštěstí si můţete klávesové zkratky nadefinovat, a to nejen pro vkládání kódu, ale také k provádění většiny programových funkcí. Pokud tedy potřebujete pořádný HTML editor a nebojíte se asi 300 poloţek nastavení, určitě naučíte tento program dělat vše podle vás. HTML-Kit rozhodně není pro začátečníky.

Obrázek 3. Prostředí HTML-Kit

20

3.1.4. HTMLPad

HTMLPad je editorem určeným přímo pro tvorbu internetových stránek. Podporuje všechny základní jazyky pouţívané při jejich programování a urychluje a ulehčuje tak práci. Mezi základní funkčnosti programu patří:

zvýraznění syntaxe pro HTML, CSS, JavaScript, VBScript, PHP, ASP, Perl a XML zabudovaná podpora standardů automatické dokončování tagů moţnost náhledu generátory kódu s knihovnami a nápovědami moţnost připojení k FTP serveru rozšířená podpora pro editaci CSS

Obrázek 4. Prostředí HTMLPad

21 3.2. Wysiwyg editory

Wysiwyg je anglická zkratka, která znamená "What you see is what you get", tedy "co vidíš, to dostaneš". Práce s těmito editory je tedy velice jednoduchá. Umoţňují rychlejší tvorbu internetových stránek, aniţ by vyţadovaly hlubší znalost jazyka HTML. Program funguje tak, ţe uţivatel tvoří stránku vkládáním textu, tabulek, obrázků a jiných elementů klikáním na příslušné ikony. Můţe měnit barvu, velikost a různé nastavení.

Na první pohled se zdá, ţe tyto editory jsou mnohem lepší neţ strukturní, ale opak je pravdou. Výsledkem těchto editorů bývá zbytečně sloţitý a nepřehledný kód, který je mnohdy několikanásobně větší, neţ kdyby byl napsán programátorem. Tento druh editorů je hojně vyuţíván začátečníky a laiky, kterým dává šanci začít tvořit internetové stránky. Odborníci na tvorbu webů tyto nástroje příliš nepouţívají. Všechny slušné wysiwyg editory dnes nabízejí moţnost přímé úpravy kódu, akorát jej potom zkontrolují. Nevýhodou je, ţe neexistuje moc wysiwyg editorů, které by byly zadarmo. Většina pouţitelných programů jsou placené verze. Mezi wysiwyg editory patří například: Microsoft FrontPage, Macromedia Dreamweaver.

3.2.1. Microsoft FrontPage

Microsoft FrontPage je program na tvorbu internetových stránek. Všechny internetové stránky vytvořené v tomto programu jsou psány pouze jazykem HTML. FrontPage neumí nic víc, neţ vytvářet soubory v HTML. Microsoft FrontPage, jak jiţ název napovídá, je program od společnosti Microsoft a je distribuován v balíku Office (nebývá v základní verzi, ale jde i dokoupit). Jelikoţ je součástí kancelářského balíku Microsoft Office, funguje většina funkcí jako v ostatních programech včetně klávesových zkratek. Pro ty, kdo jsou zvyklí pracovat v Microsoft Word, je FrontPage ideální volba jak začít s wysiwyg editorem.

3.2.2. Adobe Dreamweaver

Podle mě se jedná o nejkvalitnější wysiwyg editor, co znám. V dnešní době se jiţ nejedná jen o klasický wysiwyg editor, ale obsahuje také velice propracované prostředí strukturovaného editoru (od verze CS4 byl do Adobe Dreamweaveru implementován program Macromedia Homesite). Tomu odpovídá i jeho vyšší cena. Dokáţe překládat stránku do docela přehledného kódu. Umí opravit zdrojový kód vytvořený pomocí Microsoft FrontPage. Program obsahuje obrovské mnoţství funkcí. K dispozici je editor pro úpravu zdrojového kódu nebo CSS stylů. Podporuje tvorbu interaktivních Flash tlačítek za docela krátkou dobu.

22 Tento program je vytvářen společností Adobe, na internetových stránkách je k dispozici jeho 30-ti denní trial verze. Momentálně je k dispozici verze Adobe Dreamweaver CS4.

Obrázek 5. Adobe Dreamweaver

23 3.3. Porovnání jednotlivých editorů

V následující tabulce číslo 6 je porovnání jednotlivých editorů, co se týče licence, ceny, moţnosti získání a jejich funkčnosti. Jednotlivé programy lze sehnat v těchto verzích:

možnost program strukturní wysiwyg cena vyzkoušení Adobe ANO – ANO - 30-ti denní 6.212- Kč * Dreamweaver kompletně kompletně trial verze Částečně, FrontPage ANO NE 1075,- Kč ** omezeně Macromedia ANO – 30-ti denní NE 5890,- Kč Homesite kompletně trial verze PSPad ANO NE freeware freeware HTML-Kit ANO NE freeware freeware ANO – 30-ti denní HTMLPad NE 1130,- Kč kompletně trial verze Tabulka 6. Porovnání software pro tvorbu stránek

* Jedná se o licenci Adobe Dreamweaver CS4 WIN CZ EDU – multilicence pro školství

** Jedná se o dokoupení programu FrontPage 2003 ke kancelářskému balíku Microsoft Office 2003. Cena je za multilicenci pro školství.

24 4. Školní web

Mohlo by se zdát, ţe kvalitní školní webové stránky jsou jiţ v dnešní době samozřejmostí. Ne vţdy tomu tak musí být. Je pravda, ţe většina škol uţ nějakou internetovou prezentaci má, ale některé školní weby neplní vţdy svou úlohu správně. U školních internetových stránek je upřednostňována kvalita před kvantitou. Stránky obsahující nepravdivé a neaktuální informace jsou pro školu horší vizitkou, neţ kdyby neměla stránky ţádné. Dále je potřeba dbát na to, aby stránky byly přehledné a zajímavé jak pro ţáky, učitele, tak i pro rodiče. To jsou důvody, pro které se návštěvníci budou na stránky vracet.

Neţ začneme stránky tvořit, je dobré se seznámit s důvody, kvůli kterým uţivatelé navštěvují stránky školy. Stránky by tedy měly obsahovat jen informace, které uţivatele zajímají, a tím se vyvarujeme zahlcení webu nepodstatnými informacemi, které jenom komplikují přehlednost stránek. Zde jsou hlavní důvody návštěvy školních stránek:

Obecně představují školu (kontakty na pedagogické pracovníky, informace o škole, krouţky, zaměření školy, nabízené předměty,…), informují rodiče o organizaci školního roku (prázdniny, rozvrh hodin,…), prohlubují komunikaci školy s ţáky a rodiči (informace a třídních schůzkách, ), informují o formách a výsledcích výchovně vzdělávacího procesu školy, slouţí jako výkladní skříň prací ţáků školy (výsledky olympiád, soutěţí, úspěchy ţáků, …), informace o dění na škole (účast na různých projektech, akce školy – lyţařský výcvik, plavecký výcvik, …), podporují samotnou výuku (zobrazení studijních materiálů, …).

Záleţí také na kaţdé škole, jakým způsobem se chce prezentovat, které činnosti chce zdůraznit, na které funkce stránek dbá a na ochotě pedagogů zapojit se do rozvoje webu. Je totiţ velice obtíţné udrţovat školní web, pokud většina pedagogů nemá zájem dodávat informace na stránky školy a podílet se na jejich zajímavosti. Proto je důleţité, aby správce školního webu (nejčastěji učitel informatiky) správně motivoval své kolegy k tomu, aby mu rádi a pravidelně dodávali informace týkající se jejich předmětu nebo jejich působení na škole (výsledky olympiád, zajímavé akce, účast na projektech, …).

25 4.1. Obecná pravidla pro tvorbu školního webu

Webové stránky lze tvořit jakýmkoliv způsobem. Musíme však počítat s tím, ţe tyto stránky budou navštěvovat různí lidé s různým zájmem. Dále je nutné počítat s tím, ţe návštěvníci stránek mohou pouţívat odlišné prohlíţeče webových stránek. Proto by stránky měly být tvořeny podle nějakých standardů, aby se v různých prohlíţečích zobrazovaly korektně. Webové standardy a webové prohlíţeče se za uplynulé roky vyvíjely a dodnes se vyvíjejí. Těmito standardy a normováním se zabývá společnost W3C, která má k dispozici na svých stránkách i validátor, kde je moţné funkci stránek ověřit. Někteří výrobci prohlíţečů se často od standardu odkloňují oběma směry – někde něco vynechají, někde přidají vlastní funkci. Stránky, které vyuţívají tyto funkce, pak nefungují stejně v ostatních prohlíţečích. Proto je dobré dodrţovat určité zásady.

Pravidla pro tvorbu přístupného webu obsahují doporučení pro tvorbu webových stránek. Zde jsou základní pravidla, která by měla být vodítkem a inspirací pro kaţdého tvůrce školního (ale i jiného) webu.

. Obsah webových stránek je dostupný a čitelný Kaţdý netextový prvek nesoucí významové sdělení má svou textovou alternativu, informace sdělované prostřednictvím skriptů, objektů, kaskádových stylů, obrázků a jiných doplňků na straně uţivatele jsou dostupné i bez kteréhokoliv z těchto doplňků, informace sdělované barvou jsou dostupné i bez barevného rozlišení, barvy popředí a pozadí jsou dostatečně kontrastní. Na pozadí není vzorek, který sniţuje čitelnost, předpisy určující velikost písma nepouţívají absolutní jednotky, předpisy určující typ písma obsahují obecnou rodinu písem. . Práci s webovou stránkou řídí uţivatel Obsah webové stránky se mění, jen kdyţ uţivatel aktivuje nějaký prvek, webová stránka bez přímého příkazu uţivatele nemanipuluje s uţivatelským prostředím, nová okna se otevírají jen v odůvodněných případech a uţivatel je na to předem upozorněn, na webové stránce nic nebliká rychleji neţ jednou za sekundu,

26 webová stránka nebrání uţivateli posouvat obsahem rámů, obsah ani kód webové stránky nepředpokládá ani nevyţaduje konkrétní způsob pouţití ani konkrétní výstupní či ovládací zařízení. . Informace jsou srozumitelné a přehledné webové stránky sdělují informace jednoduchým jazykem a srozumitelnou formou, úvodní webová stránka jasně popisuje smysl a účel webu. Název webu či jeho provozovatele je zřejmý, webová stránka i jednotlivé prvky textového obsahu uvádějí své hlavní sdělení na svém začátku, rozsáhlé obsahové bloky jsou rozděleny do menších, výstiţně nadepsaných celků, informace zveřejňované na základě zákona jsou dostupné jako textový obsah webové stránky, na samostatné webové stránce je uveden kontakt na technického správce a prohlášení jasně vymezující míru přístupnosti webu a jeho částí. Na tuto webovou stránku odkazuje kaţdá stránka webu. . Ovládání webu je jasné a pochopitelné Kaţdá webová stránka má smysluplný název, vystihující její obsah, navigační a obsahové informace jsou na webové stránce zřetelně odděleny, navigace je srozumitelná a je konzistentní na všech webových stránkách, kaţdá webová stránka obsahuje odkaz na vyšší úroveň v hierarchii webu a odkaz na úvodní stránku, všechny webové stránky rozsáhlejšího webu obsahují odkaz na přehlednou mapu webu, obsah ani kód webové stránky nepředpokládá, ţe uţivatel jiţ navštívil jinou stránku, kaţdý formulářový prvek má přiřazen výstiţný nadpis, kaţdý rám má vhodné jméno či popis vyjadřující jeho smysl a funkčnost. . Odkazy jsou zřetelné a návodné Označení kaţdého odkazu výstiţně popisuje jeho cíl i bez okolního kontextu, stejně označené odkazy mají stejný cíl, odkazy jsou odlišeny od ostatního textu, a to nikoliv pouze barvou, obrázková mapa na straně server je pouţita jen v případě, ţe nebylo moţné pomocí dostupného geometrického tvaru definovat oblasti v obrázkové mapě. V ostatních

27 případech je pouţita obrázková mapa na straně uţivatele. Obrázková mapa na straně server je vţdy doprovázena alternativními textovými odkazy, uţivatel je předem jasně upozorněn, kdyţ odkaz vede na obsah jiného typu, neţ je webová stránka. Takový odkaz je doplněn sdělením typu o velikosti cílového souboru. . Kód je technicky způsobilý a strukturovaný Kód webových stránek odpovídá nějaké zveřejněné finální specifikaci jazyka HTML či XHTML. Neobsahuje syntaktické chyby, které je správce stránek schopen odstranit, v metaznačkách je uvedena pouţitá znaková sada dokumentu, prvky tvořící nadpisy a seznamy jsou korektně vyznačeny ve zdrojovém kódu. Prvky, které netvoří nadpisy či seznamy, naopak ve zdrojovém kódu takto vyznačeny nejsou, pro popis vzhledu webové stránky jsou upřednostněny stylové přepisy, je-li tabulka pouţita pro rozvrţení obsahu webové stránky, neobsahuje záhlaví řádků ani sloupců. Všechny tabulky zobrazující tabulková data naopak záhlaví řádků nebo sloupců obsahují, všechny tabulky čtené po řádcích zleva doprava dávají smysl.

28 5. Návrh konkrétního webu

Školní web jsem začal navrhovat při svém působení na základní škole, jelikoţ naše škola měla jednouchý web, který byl vytvořen pomocí redakčního systému. Prezentace byla umístěna na serveru, který poskytuje umístění stránek zdarma s podmínkou domény třetího řádu a umístěním reklamního banneru v prezentaci. Tato moţnost měla několik nevýhod. První byla doménová adresa třetího řadu, dále omezená velikost místa pro ukládání dat na stránkách a v neposlední řadě omezená moţnost měnit vzhled a obsah webu. Z těchto důvodů jsem zvolil moţnost kompletní tvorby vlastního webu. Jelikoţ se jednalo a první projekt tohoto rozsahu, naučil jsem se při jeho tvorbě pouţívat nové jazyky a způsoby tvorby HTML stránek. Ukázka školních stránek je na obrázku číslo 6.

Obrázek 6. Ukázka školních stránek

Při návrhu stránek jsem zvaţoval několik moţností, jak by měl výsledný web vypadat. Po zváţení mnoha aspektů jsem došel k závěru, ţe vytvořím jednoduchý web, který zatím nebude moţno upravovat běţným uţivatelem, přímo z prostředí internetu. Úpravy webu je moţné provádět pouze zásahem do zdrojového kódu stránek. Stránky mají zaloţen webhosting pomocí serveru www.cesky-hostong.cz, kde jsme registrovali doménu zsmasa. Za tuto doménu platí škola roční poplatek cca 1500 Kč. (v ceně zahrnut poplatek za hosting a udrţovací poplatek za doménové jméno ) Adresa školních stránek je tudíţ www.zsmasa.cz.

29 Internetové stránky jsou tvořeny pomocí XHTML, CSS a PHP. Jazyku PHP je zatím vyuţito v malé míře. Vzhled stránek je tvořen pomocí CSS stylování boxů. V budoucnu mám v plánu stránky rozšířit o databázi a vytvořit jednoduché rozhraní pro přidávání příspěvků učiteli. Stránky jsou optimalizovány pro Mozzila Firefox a Internet Explorer. Zdrojový kód celého webu je přiloţen na CD disku k tištěné formě práce jako příloha číslo 2.

Obsah stránek je členěn do tří kategorií. V horní části se nachází úvodní obrázek školy, pod ním nalevo je umístěno hlavní menu a napravo se zobrazuje vlastní obsah stránek.

Obrázek 7. Logo stránek

Obrázek 8. Hlavní menu

30

6. Anketa úspěchu nového webu

Se zavedením nových webových stránek jsem potřeboval zjistit, jaké ohlasy stránky budou mít. Proto jsem provedl mezi ţáky a učiteli malý průzkum, který se týkal pouţívání internetu a návštěvnosti stránek naší školy. V anketě jsem zjišťoval, jak často respondenti vyuţívají internet, zda navštěvují stránky školy a jak se jim stránky líbí. Celkem jsem anketou oslovil 100 ţáků a učitelů. Anketu, která byla pouţita v průzkumu, najdete v příloze číslo 1.

První otázka zjišťovala, jak často respondenti pouţívají internet. Zpracování této otázky je v tabulce a grafu číslo 1. Z průzkumu je jasné, ţe více neţ polovina dotazovaných pouţívá internet velice často. Zde se ukázalo, jak je důleţité mít prezentaci umístěnou na internetu.

Jak často používáte internet? několikrát denně 21 jednou denně 30 občas 42 velice málo 7

Tabulka 1.

Jak často používáte internet?

velice málo několikrát 7% denně 21%

občas 42%

jednou denně 30%

Graf 1.

31 Ve druhé otázce jsem chtěl zjistit, jak často ţáci a učitelé vyuţívají webové stránky naší školy. Zpracování této otázky je v tabulce a grafu číslo 2. Z této otázky je opět vidět, ţe více jak polovina dotazovaných navštěvuje stránky školy, proto je velice důleţité, aby na stránkách byly aktuální informace.

Navštěvujete stránky školy? ANO - často 11 ANO - občas 56 jednou jsem tam byl 31 nikdy 2

Tabulka 2.

Navštěvujete stránky školy?

nikdy ANO - často 2% 11% jednou jsem tam byl 31%

ANO - občas 56%

Graf 2.

Ve třetí otázce jsem zjišťoval, zda ţákům se a učitelům líbí školní stránky vzhledově. Dotazovaní měli ohodnotit stránky známkou jako ve škole, coţ je 1 aţ 5, kdy jedna je nejlepší hodnocení a 5 nejhorší. Zpracování otázky je v tabulce a grafu číslo 3.

Oznámkuj vzhled stránek. 1 19 2 52 3 28 4 1 5 0

Tabulka 3.

32

Oznámkuj vzhled stránek

4 1% 1 19% 3 28%

2 52%

Graf 3.

V další otázce měli respondenti za úkol ohodnotit známkou obsah stránek. Zpracování otázky je v tabulce a grafu číslo 4.

Oznámkuj obsah stránek. 1 15 2 47 3 35

4 3 5 0

Tabulka 4.

Oznámkuj obsah stránek

4 3% 1 15%

3 35%

2 47%

Graf 4.

33 V posledních dvou otázkách uţ respondenti neměli moţnost výběru odpovědi, ale museli napsat co se jim na stránkách líbí a co naopak na stránkách chybí. Tuto otázku jsem zpracoval do tabulky číslo 5, kdy v prvním sloupci jsou odpovědi na otázku: „Co Vám na stánkách školy chybí?“, ve druhém sloupci jsou odpovědi na otázku: „Co Vás zaujalo na stránkách školy?“. U kaţdé odpovědi je v závorce uveden počet respondentů, kteří měli stejnou nebo podobnou odpověď. Odpovědi, které se neobjevily více neţ jednou, jsem do tabulky nezahrnul.

Co Vám na stánkách školy chybí? Co Vás zaujalo na stránkách školy? Nic (42) Nic (38) Více fotografií (16) Fotogalerie, články (15) Seznam a fotogalerie učitelů (12) Jídelní lístek (15) Portál spoluţáci, informace o ţácích (7) Rozvh hodin (12) Internetová ţákovská kníţka (4) Vzhled stránek (6) Více barev (4) Nevím (5) Diskuze (3) Bez odpovědi (5)

Tabulka 5.

34 7. Závěr

Ve své bakalářské práci jsem se věnoval moţnostem, jak získat internetovou prezentaci školy. Vyjmenoval a popsal jsem moţnosti získání internetové prezentace od koupení stránek na míru, po tvorbu stránek informatikem, či jiným pedagogem školy. A dále jsem se zabýval obecnými pravidly pro tvorbu webových stránek pro vzhled i obsah.

Jelikoţ jsem v této práci vytvořil konkrétní internetovou prezentaci, zabývám se dále tvorbou internetových stránek, metodami, které je moţno pouţít, a také programy, které mohou pedagogovi ulehčit tvorbu a správu stránek. Zpětnou vazbou tvorby školní prezentace byla anketa spokojenosti ţáků a učitelů s novými stránkami na škole, pro kterou byly stránky vytvořeny.

35 8. Seznam použité literatury

. ULLMAN, Larry. PHP a MySQL :názorný průvodce tvorbou dynamických www stránek. Brno : Computer Press, 2004. 534 s. ISBN 80-251-0063-4. . NEUMAJER, Ondřej. Budujeme školní web. Brno: CP Books, a.s., 2005. 130 s. ISBN 80- 251-0612-8 . NARAMORE, Elizabeth. Vytváříme webové aplikace v PHP5. MySQL a Apache. Brno : Computer Press, 2006. 813 s. ISBN 80-251-1073-7. . BRÁZA, Jiří. PHP 5 :začínáme programovat. Praha : Grada, 2005. 244 s. ISBN 80-247- 1146-X. . http://www.ceskaskola.cz/ . http://www.wikipedia.cz . http://www.adobe.com/cz . http://www.microsoft.cz . http://www.pspad.com/cz . http://www.chami.com/html-kit/ . http://www.blumentals.net/htmlpad/ . http://www.jakpsatweb.cz . http://www.w3.org . http://www.stahuj.cz

36 Seznam příloh

Příloha číslo 1: Anketa úspěchu nového webu Příloha číslo 2: CD s prezentací základní školy

37 Přílohy Příloha číslo 1: Anketa úspěchu nového webu

Anketa ohledně webových stránek školy.

1)Jak často pouţíváte internet? několikrát denně jednou denně občas velice málo

2) Navštěvujete stránky školy? www.zsmasa.cz

ANO – často ANO – občas jednou jsem tam byl NIKDY

3) Ohodnoť, jak se ti stránky líbí graficky ( vzhledově) jako ve škole 1 aţ 5

4) Ohodnoť, jak se ti stránky líbí obsahově jako ve škole 1 aţ 5

5) Co Vám chybí na stránkách? Co bys chtěl(a), aby bylo na stránkách školy?

6) Je něco, co Vás zaujalo na stránkách?

38