Webdesign a typografie
| Typický ročník | 2. SŠ |
| Interval vhodných ročníků | 1. SŠ – 4. SŠ |
| Učivo | typografie a písmo, úprava textu, sazba, interpunkce, barvy a jejich reprezentace, RGB, principy webdesignu, HTML (struktura, značky, seznamy, tabulky), CSS (vlastnosti, barvy, rozvržení) |
| Předcházející modul | Tvorba digitálního obsahu |
| Bezprostřední výsledky učení |
|
| Související RVP výsledky učení |
|
Modul nabízí úvod do webdesignu se zaměřením na základní principy typografie, práci s barvami a tvorbu jednoduchých webových stránek pomocí HTML a CSS. Žáci se seznámí s tím, jak vhodná úprava textu, volba barev a rozvržení stránky ovlivňují čitelnost a použitelnost webu. Toto téma nespadá přímo do jádra SŠ výuky informatiky, jde o bonusovou specializační oblast, která však je aktuální a atraktivní. Téma má také přesah k obecnějšímu tématu informačních systémů, protože typická realizace informačních systémů je v dnešní době formou online webových systémů a vývoj uživatelského rozhraní je úzce provázán s webdesignem.
Bloky a dosažený postup
|
1. Typografie I
|
|||
 Souhrn tématu |
Typy písma | ||
| Typografické pojmy | |||
 Rozhodovačka |
Typy písma • těžké | 
Typy písma (těžké) • NK3Typicky zabere: 8 min
|
|
 Označování |
Typy písma • těžké |
Typy písma (těžké) • NXDTypicky zabere: 5 min
|
|
 Pexeso |
Typy písma • střední |
Typy písma (střední) • NBBTypicky zabere: 4 min
|
|
| Rozhodovačka |
Typografické pojmy • těžké |
Typografické pojmy (těžké) • MR4Typicky zabere: 7 min
|
|
| Označování |
Typografické pojmy • střední |
Typografické pojmy (střední) • NOFTypicky zabere: 5 min
|
|
| Typografické pojmy • těžké |
Typografické pojmy (těžké) • NXGTypicky zabere: 5 min
|
||
|
2. Typografie I
|
|||
| Souhrn tématu |
Interpunkce a speciální znaky | ||
| Rozhodovačka |
Interpunkce a speciální znaky • střední |
Interpunkce a speciální znaky (střední) • MR9Typicky zabere: 5 min
|
|
| Interpunkce a speciální znaky • těžké |
Interpunkce a speciální znaky (těžké) • MSATypicky zabere: 6 min
|
||
| Označování |
Interpunkce a speciální znaky • střední |
Interpunkce a speciální znaky (střední) • NODTypicky zabere: 4 min
|
|
| Interpunkce a speciální znaky • těžké |
Interpunkce a speciální znaky (těžké) • NXFTypicky zabere: 3 min
|
||
| Typografické chyby • těžké |
Typografické chyby (těžké) • NUHTypicky zabere: 9 min
|
||
| Rozhodovačka |
Typografie: mix • střední |
Typografie: mix (střední) • MSGTypicky zabere: 5 min
|
|
| Typografie: mix • těžké |
Typografie: mix (těžké) • MSHTypicky zabere: 6 min
|
||
|
3. Webdesign: přehled, pojmy
|
|||
| Rozhodovačka |
Webdesign: pojmy, technologie • střední |
Webdesign: pojmy, technologie (střední) • MSJTypicky zabere: 7 min
|
|
| Webdesign: uživatelské prostředí • střední |
Webdesign: uživatelské prostředí (střední) • MSKTypicky zabere: 6 min
|
||
|
4. Barvy
|
|||
| Souhrn tématu |
Reprezentace barev | ||
| RGB barvy | |||
| Rozhodovačka |
Reprezentace barev • střední |
Reprezentace barev (střední) • M1CTypicky zabere: 6 min
|
|
| Barvy: obecné principy • střední |
Barvy: obecné principy (střední) • M1DTypicky zabere: 6 min
|
||
| RGB barvy • střední |
RGB barvy (střední) • MNBTypicky zabere: 4 min
|
||
 Doplňování textu |
Reprezentace barev • střední |
Reprezentace barev (střední) • NLATypicky zabere: 5 min
|
|
 Přesouvání |
RGB barvy • střední |
RGB barvy (střední) • MGTTypicky zabere: 7 min
|
|
| Označování |
RGB barvy • střední |
RGB barvy (střední) • NPZTypicky zabere: 4 min
|
|
|
5. HTML
|
|||
| Souhrn tématu |
HTML: základy | ||
| HTML: tabulky a seznamy | |||
| Rozhodovačka |
HTML: základy • lehké |
HTML: základy (lehké) • MFHTypicky zabere: 5 min
|
|
| Pexeso |
HTML: základy • lehké |
HTML: základy (lehké) • MKUTypicky zabere: 4 min
|
|
| Přesouvání |
HTML: základy • lehké |
HTML: základy (lehké) • MGKTypicky zabere: 6 min
|
|
| Rozhodovačka |
HTML: základy • střední |
HTML: základy (střední) • MFJTypicky zabere: 8 min
|
|
| HTML: tabulky a seznamy • lehké |
HTML: tabulky a seznamy (lehké) • MGXTypicky zabere: 7 min
|
||
|
6. CSS
|
|||
| Souhrn tématu |
CSS: základy | ||
| CSS: hlavní vlastnosti a jejich použití | |||
| Rozhodovačka |
CSS: základy • střední |
CSS: základy (střední) • MZ9Typicky zabere: 7 min
|
|
| CSS: hlavní vlastnosti a jejich použití • střední |
CSS: hlavní vlastnosti a jejich použití (střední) • MZ7Typicky zabere: 7 min
|
||
| CSS: barvy a jejich použití • střední |
CSS: barvy a jejich použití (střední) • M1ATypicky zabere: 6 min
|
||
| Pexeso |
CSS: hlavní vlastnosti a jejich použití • střední |
CSS: hlavní vlastnosti a jejich použití (střední) • NBDTypicky zabere: 4 min
|
Náměty na doplňkové aktivity
Tvorba vlastního webuU tohoto tématu je přirozené postavit jako klíčovou průběžnou aktivitu tvorbu vlastního webu. Může jít o fiktivní stránky (např. neexistujícího města či hudební kapely) nebo může zobrazovat reálná data na základě zájmů žáků.
Zhodnocení webuŽáci si vyberou existující web a provedou jeho zhodnocení. Které aspekty webu jsou zpracovány dobře? Proč je hodnotí jako dobře zpracované? Které asi jsou nevhodné? Jak by se daly vylepšit?
