Webdesign a typografie
| Typický ročník | 11. |
| Interval vhodných ročníků | 10.–13. |
| 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.
| 1. Typografie | |||
 Souhrn tématu | Typy písma | ||
 Rozhodovačka | Typy písma • střední |  Typy písma • středníTypicky zabere: 5 min  | |
| Typy písma • těžké | Typy písma • těžkéTypicky zabere: 7 min  | ||
 Pexeso | Typy písma • střední | Typy písma • středníTypicky zabere: 5 min  | |
| Souhrn tématu | Typografické pojmy | ||
| Rozhodovačka | Typografické pojmy • těžké | Typografické pojmy • těžkéTypicky zabere: 6 min  | |
| Souhrn tématu | Interpunkce a speciální znaky | ||
| Rozhodovačka | Interpunkce a speciální znaky • střední | Interpunkce a speciální znaky • středníTypicky zabere: 5 min  | |
| Interpunkce a speciální znaky • těžké | Interpunkce a speciální znaky • těžkéTypicky zabere: 6 min  | ||
| Pexeso | Interpunkce a speciální znaky • střední | Interpunkce a speciální znaky • středníTypicky zabere: 3 min  | |
| Rozhodovačka | Typografie: mix • lehké | Typografie: mix • lehkéTypicky zabere: 3 min  | |
| Typografie: mix • střední | Typografie: mix • středníTypicky zabere: 5 min  | ||
| Typografie: mix • těžké | Typografie: mix • těžkéTypicky zabere: 6 min  | ||
| 2. Webdesign: přehled, pojmy | |||
| Rozhodovačka | Webdesign: pojmy, technologie • střední | Webdesign: pojmy, technologie • středníTypicky zabere: 6 min  | |
| Webdesign: uživatelské prostředí • střední | Webdesign: uživatelské prostředí • středníTypicky zabere: 6 min  | ||
| 3. Barvy | |||
| Souhrn tématu | Reprezentace barev | ||
| RGB barvy | |||
| Rozhodovačka | Reprezentace barev • střední | Reprezentace barev • středníTypicky zabere: 6 min  | |
| Barvy: obecné principy • střední | Barvy: obecné principy • středníTypicky zabere: 6 min  | ||
| RGB barvy • střední | RGB barvy • středníTypicky zabere: 4 min  | ||
 Doplňování textu | Reprezentace barev • střední | Reprezentace barev • středníTypicky zabere: 4 min  | |
| Pexeso | RGB barvy • střední | RGB barvy • středníTypicky zabere: 5 min  | |
 Přesouvání | RGB barvy • střední | RGB barvy • středníTypicky zabere: 6 min  | |
| 4. HTML | |||
| Souhrn tématu | HTML: základy | ||
| HTML: tabulky a seznamy | |||
| Rozhodovačka | HTML: základy • lehké | HTML: základy • lehkéTypicky zabere: 4 min  | |
| Pexeso | HTML: základy • lehké | HTML: základy • lehkéTypicky zabere: 4 min  | |
| Přesouvání | HTML: základy • lehké | HTML: základy • lehkéTypicky zabere: 5 min  | |
| Rozhodovačka | HTML: základy • střední | HTML: základy • středníTypicky zabere: 8 min  | |
| HTML: tabulky a seznamy • lehké | HTML: tabulky a seznamy • lehkéTypicky zabere: 7 min  | ||
| 5. 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íTypicky zabere: 7 min  | |
| CSS: hlavní vlastnosti a jejich použití • střední | CSS: hlavní vlastnosti a jejich použití • středníTypicky zabere: 7 min  | ||
| CSS: barvy a jejich použití • střední | CSS: barvy a jejich použití • středníTypicky zabere: 6 min  | ||
| Pexeso | CSS: hlavní vlastnosti a jejich použití • střední | CSS: hlavní vlastnosti a jejich použití • středníTypicky zabere: 3 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?
