Webová stránka. Matěj Klenka

Rozměr: px

Začít zobrazení ze stránky:

Download "Webová stránka. Matěj Klenka"

Denis Bezucha
před 8 lety
Počet zobrazení:

1 Webová stránka Matěj Klenka

2 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

Klenka, prohlašuji, že má webová stránka byla vytvořena

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

4 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,

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.

5 š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: <INPUT type=text> pro zadání ové adresy návštěvníka stránek a pro zadání dalších textových informací <INPUT type=checkbox> pro určení žádné, několika nebo všech nabízených možností <INPUT type=radio> nebo <SELECT> pro určení právě jedné z několika nabízených možností <INPUT type=submit> nebo <BUTTON type=submit> pro odeslání formuláře (po kontrole správnosti zadných údajů) <INPUT type=reset> nebo <BUTTON type=reset> 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ší ové adresy uložené na bezpečném místě, na tuto adresu bude následně odeslán s vyplněnými údaji) dalsi URL Vaší stránky, kam má být prohlížeč přesměrován (např. Před odesláním formulář zkontroluje, zda je zadaná hodnota skutečně ovou 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 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

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.

6 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.

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.

7 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

menu vybere. Menu je tak rafinované, že po stisknutí položky Obrázky se zobrazí stránka s obrázky atd.

8 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.

html formulář nezname.html mělo by se zobrazit po odeslání formuláře odkazy.

9 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.

Při vytváření stránek jsem měl pouze jeden větší problém

Podobné dokumenty

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

Internet 2 css, skriptování, dynamické prvky Martin Hejtmánek hejtmmar@fjfi.cvut.cz http://kmlinux.fjfi.cvut.cz/ hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 26. března 2009 Dnešní