Zadání
V rámci výuky HTML a CSS jsme zatím podle instrukcí formátovali připravené stránky a experimentovali s předpřipraveným externím stylopisem. Pololetí ale završíme výrazně tvořivější prací: cílem bude sice jednoduchý, ale naprosto VÁŠ autorský web.
Vytvoříte působivý internetový one-pager: jednostránkovou prezentaci, která kompaktně (ale přitom komplexně) a jednoduše (ale přitom poutavě) představí jedno z těchto témat:
- vás jako člověka, který je něčím zajímavý, něčeho schopný či něco tvoří (například osobní portfolio fotografa, umělkyně, sportovce,...)
- tým, kterého jste součástí a který se má čím pochlubit (váš sportovní oddíl, fanklub, dramatický kroužek, klub tvůrčího psaní, dobrovolnickou partu,...)
- váš výtvor, který stojí za představení (naprogramovaná hra z loňska, složená symfonie, napsaný soubor básní či povídek,...)
- místo, ke kterému máte vztah a chtěli byste ho virtuálně přiblížit světu (zámek, technická památka ve vašem okolí, vaše vesnice,...)
- událost, na kterou máte silné vzpomínky a ze které se vám dochovaly záznamy, o které se chcete podělit (školní akce, vaše dovolená nebo výlet, festival…)
Je na vás, jestli budete web tvořit s tím, že ho posléze skutečně zveřejníte, nebo bude sloužit jen pro školní účely. K tvorbě byste ale měli přistupovat „vážně“ – tvoříte skutečný web o daném tématu. Najděte si tedy takové téma, se kterým se skutečně budete chtít pochlubit, ať to není jen ztráta času a školní povinnost, ale smysluplně vynaložená práce.
Důraz bude kladen na původní tvorbu (z hlediska vzhledu webu, ale i obsahu) – dejte si na své práci záležet, v maximální možné míře používejte vlastní texty, fotky a podobně. Nekraďte cizí obsah z internetu, a když už budete něco chtít použít, ověřte si, zda a za jakých podmínek to můžete udělat:
- Není problém použít fotku z Wikipedie, pokud na webu uvedete autora a odkaz na ni.
- Můžete citovat cizí text, ale neměl by tvořit většinu vaší stránky a musí být zdrojován.
- Není možné použít fotku z fotobanky (s výjimkou těch zcela volných) nebo zpravodajského webu bez souhlasu (a obvykle bez zaplacení)
Termín publikace finálního webu na itkid.cz je 2. ledna 2023.
Celkem dostanete dvě známky – jednu za projekt (0–24 bodů) a jednu zkoušecí (0–10) za jeho ústní obhajobu – dokážete mi, jestli jednotlivým částem vašeho kódu rozumíte a tedy mohu věřit, že jde o vaši práci.
Kritéria
Základní parametry
| Stránka bude mít aspoň čtyři hlavní sekce, na které povedou odkazy pomocí vytvořených (a funkčních) kotev. | 2 body |
| Stránka bude strukturovaná pomocí standardů HTML5 (minimálně čtyři různé logické celky). | 2 body |
| Stránka bude vkusně a originálně designovaná externím CSS stylopisem. | 2 body |
| Stránka bude mít správně nastavené kódování, české znaky budou funkční (pokud je web v angličtině, vmáčkněte někam aspoň jednu českou větičku). | 2 body |
| Stránka bude mít interaktivní (přinejmenším změny barev) tlačítkové menu vytvořené ze seznamu (horizontální či vertikální). | 2 body |
| Veškeré prezentované soubory budou nahrané na serveru itkid.cz a odkazované lokálně (relativní zápis adresy). | 1 bod |
| Na serveru bude pořádek – stránka index.html bude v kořenovém adresáři, obrázky a soubory potřebné pro design budou uloženy v podadresářích. | 1 bod |
Povinný obsah
| Na stránce bude několik odstavců textu, který nebude psán černým písmem Times New Roman velikosti 12. | 2 body |
| Stránka bude využívat aspoň tři úrovně standardizovaných a vhodně formátovaných nadpisů (h1, h2, h3). | 2 body |
| Objeví se alespoň tři obrázky k tématu. | 2 body |
| Bude použit aspoň jeden číslovaný či nečíslovaný seznam (nepočítá se ten v navigaci). | 2 body |
| Stránka bude obsahovat několik externích odkazů otvíraných v nové záložce. | 2 body |
| Ze stránky povede interní odkaz na nějaký (bezpečný) soubor ke stažení. | 2 body |
| Kdo si s webem vyhraje a přidá něco, co oficiálně podle ŠVP zatím neumí (a bude mi umět vysvětlit, jak to vyrobil), může dostat předem nespecifikovaný počet bonusových bodů. | |
Sankce
| Opožděné odevzdání práce | 1 bod / den |
| Stránka bude využívat aspoň tři úrovně standardizovaných a vhodně formátovaných nadpisů (h1, h2, h3). | 2 body |
| Zpoždění delší než týden. | 0 bodů – neklasifikace z informatiky |
| Chyby narušující funkčnost webu | 2 body / chyba |
| Drobné chyby | 0,5 bodu / chyba (srážka se zaokrouhlí dolů) |
| Drobné plagiátorství | 5 bodů |
| Výrazné plagiátorství | 12 bodů |
| Využití písma Comic Sans MS | 3 body a vytahání za uši |
| Vyučující může ve výjimečném a odůvodněném případě sankci prominout či snížit, zejména pokud jde o zpoždění (rozhodně neplatí pro třetí bod). Případné problémy je třeba řešit aktivně a včas! | |
Příklady
- Příkladem správně udělaného webu je stránka, na kterou se právě díváte. Můžete si stáhnout a prozkoumat její zdrojové soubory.
- Nebojte se využít její zdrojový kód nebo externí stylopis a zkopírovat si z nich nějaké pasáže, které chcete využít nebo pozměnit.
- Vaše zásahy do struktury a designu by ale měly být tak výrazné, aby nemohlo dojít k obvinění z plagiátorství (s tímto už máme jisté zkušenosti :)).
- Vynikající psí kusy dělal na své itkidí doméně Ríša ze 7.O, možná vás některé jeho triky inspirují.
Odkazy
Zde jsou odkazy na stránky, články a příručky, kde mám dojem, že by vám mohly výrazně pomoci. Jejich studium není povinné, ale možná některým z vás sedne i lépe než můj výklad ve škole, protože HTML se zkrátka lépe učí přímo v akci, když se v klidu a tvůrčím zápalu o něco pokoušíte, snažíte se napravit vlastní chyby a objevujete inspiraci na jiných pěkných webech.
Nástroje pro ulehčení práce
- HTML Color Codes – namíchejte si barvu, která se vám líbí, a zkopírujte její šestnáctkový kód.
- CSSmatic – nástroj pro nastavení stínů, zaoblených okrajů, přechodů (nastavíte a zkopírujete kód do stylopisu).
- Google Fonts – pokud chcete použít font, který není běžně v počítačích, zde si ho můžete najít a importovat na svůj web.
- Noise Texture Generator – zde můžete vytvořit texturu na míru svému webu.
Návody na konkrétní vylepšení webu (W3schools)
- Navbar – návod na interaktivní navigační lišty (horizontální i vertikální).
- Background – vše o pozadí stránky a bloků (barvy, obrázek a jeho parametry, průhlednost prvku).
- Links – odkazy a jejich formátování (a:link, a:active, a:hover, a:visited)
- Dropdowns – rozbalovací menu (tohle zde na stránce nenajdete, je to pro fajnšmekry).
- W3Schools HowTo – návody na ledacos (třeba slideshows), které už vymyslel někdo před vámi a mohou být velmi efektní.
Výukové seriály a referenční příručky
- Referenční příručky k HTML5 a CSS – krok za krokem od úplkných základů po delikátní triky (anglicky).
- Webové stránky krok za krokem – skvělá série článků na ITnetwork.cz v češtině, pro každého, kdo se u mne nechytá nebo jsem na něj naopak ve škole moc pomalý!
- Český HTML5 manuál – abecední rejstřík tagů a jejich možných atributů
- Český CSS3 manuál – abecední rejstřík kaskádových stylů.
Kdykoli v době realizace projektu je možné se mnou cokoli konzultovat, webařinu mám velmi rád a můžeme se domluvit na setkání i mimo naše (trochu hektické) hodiny.
Preferuji postup, kdy mi předem napíšete, v čem je problém (a pošlete odkaz na itkid, kde máte pověšené stránky), já promyslím řešení a pak vám buď rovnou napíšu odpověď, nebo se potkáme (zde bych rozhodnutí nechal asi na mne – bude záležet především na složitosti problému a mé (ne)schopnosti vysvětlit vám jeho podstatu na dálku.
Držím vám palce a těším se na famózní weby!
