Webová stránka. Matěj Klenka

Webová stránka

Matěj Klenka

Osobní webová stránka Toto je dokumentace k mé webové stránce This is a documentation to my web page

Já, Matěj Klenka, prohlašuji, že má webová stránka byla vytvořena mnou a bez větších zásahů vnějších sil. Matěj Klenka, 3.E, 2011

Obsah Zadání Uživatelské rozhraní Popis souborů Zdroje Závěr

Zadání Zadání PP: Osobní webové stránky 1. Navrhněte své osobní webové stránky. Na svých stránkách uveďte své osobní informace (jméno, navštěvovanou školu, záliby apod.). Rozdělte informace do několika stránek podle obsahu a sestavte tzv. mapu webu (strukturovaný soupis stránek). Mapa webu bude jednou ze stránek vytvářeného webu. Poznámka: Webové stránky budou veřejně dostupné, neuvádějte takové osobní údaje, které si nepřejete zveřejnit. Alternativně můžete vytvořit osobní stránky smyšlené osoby. V takovém případě na stránky uveďte, že jde o smyšlené informace.

2. Pro vytvoření webových stránek použijte jazyk HTML podle striktní specifikace 4.01, alternativně (v odůvodněných případech) můžete dokumenty formátovat ve verzi 5 nebo XHTML 1.0, avšak všechny vytvořené HTML dokumenty stejným způsobem. Poznámka: Pokud se rozhodnete pro rozložení stránek metodou frameset, pro indexový soubor použijete DTD frameset, nikoliv strict.

3. Pro grafické zpracování použijte kaskádové styly CSS v úrovni 2 revize 1. Alternativně (v odůvodněných případech) můžete styly vytvořit v úrovni 3, avšak všechny vytvořené CSS dokumenty stejným způsobem.

4. K implementaci dynamických reakcí na činnost uživatele použijte jazyk JavaScript. Skriptování použijte pro implementaci chování, které nelze vytvořit prostředky HTML/CSS. Při zachování licenčních podmínek můžete v odůvodněných případech použít veřejně přístupné javascriptové knihovny cizích autorů.

5. Všechny vytvořené dokumenty budou validní a odpovídat zvolené verzi specifikace a budou obsahovat komentáře pro snazší orientaci se v kódu. V komentářích každého dokumentu bude navíc uvedeno autorství dokumentu (značka "©" nebo "(c)", rok vytvoření, jméno autora,

škola). HTML dokumenty budou obsahovat povinné značky včetně DOCTYPE a autorství také ve viditelném bloku (např. v zápatí stránek).

6. Vytvořené stránky umístěte na veřejně trvale dostupný webový server podle vlastní úvahy (např. vlastní webový server nebo prostor poskytovaný webhostingovými společnostmi, např. webzdarma.cz) vč. všech souborů stylů, javascriptu, obrázků apod. Aplikace musí být funkční i v režimu off-line, tedy bez připojení k internetu, spuštěná z kopie souborů na lokálním disku počítače.

7. Do stránek zakomponujte nejméně jeden HTML formulář obsahující alepoň následující ovládací prvky: • • • • •

pro zadání e-mailové adresy návštěvníka stránek a pro zadání dalších textových informací pro určení žádné, několika nebo všech nabízených možností nebo <SELECT> pro určení právě jedné z několika nabízených možností nebo pro odeslání formuláře (po kontrole správnosti zadných údajů) nebo pro obnovení výchozích hodnot formuláře

Do formuláře zahrňte také dvě skrytá pole: student

Vaše příjmení malými písmeny a bez diakritiky (v cíli bude jméno použito pro vyhledání Vaší e-mailové adresy uložené na bezpečném místě, na tuto adresu bude následně odeslán e-mail s vyplněnými údaji) dalsi

URL Vaší stránky, kam má být prohlížeč přesměrován (např. http://jaracimrman.wz.cz/mail_odeslan.html) Před odesláním formulář zkontroluje, zda je zadaná hodnota skutečně e-mailovou adresou (alespoň test na přítomnost znaku "@") a zda jsou vyplněny všechny povinné údaje (zvolte si alespoň jedno textové pole jako povinné), v opačném případě bude odeslání zablokováno, ovládací prvek, který je chybně vyplněn, bude barevně zvýrazněn a zaměřen (přijme ohnisko), příp. bude navíc uživateli sděleno, jaké chyby se dopustil. Uživatelem vložená data formulář odešle na adresu http://gyarab.idk.cz/form.php.

8. K vytvořeným webovým stránkám sepište dokumentaci, která se bude skládat z následujících částí: Záhlaví souhrn práce (v českém a anglickém jazyce), klíčová slova práce, prohlášení o samostatnosti zpracování, jméno, třída, školní rok

Obsah obsah dokumentace Úvod zadání, cíle, zpracování, použité technologie Uživatelské rozhraní popis způsobu práce s webovými stránkami z pohledu návštěvníka stránek, schéma (mapa stránek), grafický návrh Technologie zvolené verze specifikací, popis souborů, rozdělení do složek SEO optimalizace úspěšnosti ve vyhledávacích službách, metainformace, statistika návštěvnosti Závěr vlastní zhodnocení dosažení stanovených cílů Zdroje veškeré zdroje použité pro vytvoření díla (RFC, ISO, W3C apod.) Dokumentaci ve formátu PDF uložte k webovým stránkám. Odkaz na dokumentaci uveďte na vytvořených stránkách (ke stažení).

9. Vytvořte prezentaci díla (např. PowerPoint) v rozsahu 5-10 minut. Prezentací osobně představíte své dílo spolužákům.

10. Veškeré dokumenty vytvořené v rámci díla (HTML, CSS, JS, PDF, prezentace apod.) včetně použitých knihoven v jejich konečné podobě také uložte na CD. Dokumentaci vytiskněte, svažte spolu s pošetkou, vložte CD do pošetky a kompletní dokumentaci odevzdejte učiteli.

Cílem tedy bylo vytvořit vlastní webové stránky za použití HTML a CSS.

Uživatelské rozhraní Orientace na webu je pro uživatele velice jednoduchá. Pokud uživatel není slepý, tak vidí v horní části stránky menu, na které může najet myší a po stisknutí levého tlačítka na myši se požadovaná položka menu vybere. Menu je tak rafinované, že po stisknutí položky „Obrázky“ se zobrazí stránka s obrázky atd., navíc stránka obsahuje různé zajímavé odkazy, třeba na lepší stránky spolužáků.

Mapa webu: Úvod O mně Obrázky Formulář Odkazy

Co na mé stránky řekli ostatní: U1: „No hele, vidíš, že to jde.“ U2: „Hezký, tak už se běž najíst.“ U3: „A tos udělal ty? To bys mi mohl udělat moji stránku.“ U4: „good“

Popis souborů e – obrázek pozadí stránek styly.css – obsahuje nastavení menu a pozadí index.html – uvítací stránka omne.html – informace o autorovi stránek obrazky – obrázky formular.html – formulář nezname.html – mělo by se zobrazit po odeslání formuláře odkazy.html – obsahuje odkazy na různé stránky mapa.html – mapa stránek

Zdroje Nejvíc jsem využíval stránky jakpsatweb.cz, poté jsem se na něco podíval i na w3c.org.

Závěr Nakonec se mi podařilo ty stránky vytvořit, vypadají lépe, než jsem si na začátku představoval. Při vytváření stránek jsem měl pouze jeden větší problém (menu nechtělo fungovat správně), ale po radě příbuzného se i tato záludnost vyřešila.