Cílem práce je vytvoření učební pomůcky pro předmět webové technologie, která byla zpracována v programu PSPad. Teoretická část je zaměřena na vybrané programy, které umožňují zápis různých jazyků. Následuje popis základní struktury HTML5 dokumentu a jeho náležitosti. Každý záznam vytvořený v HTML dokumentu je potřeba objasnit za použití kaskádových stylů. Závěr teoretické části je věnována struktuře Bootstrap. Praktická část je zaměřena hlavně na praktické znalosti využití HTML, CSS a Bootstrap. Tyto jazyky nám pomáhají k zobrazení názorného popisu a vysvětlení kódu. Výsledný zápis je vyobrazen přes webový prohlížeč. Součástí práce jsou také prezentace pro výuku se vzorovými příklady.
Anotace v angličtině
The aim of this thesis is to create learning aids for the web-based technology which was developed in PSPad. The theoretical part is focused on selected programs that allow wri-ting of different languages. The next part is a description of the basic structure HTML5 do-cument and its elements. Each record created in the HTML document is needed to be clari-fied by the use of cascading style sheets. The ending of the theoretical part is devoted to the structure Bootstrap. The practical part is focused mainly on practical use of the knowledge of HTML, CSS and Bootstrap. These languages help us to show illustrative description and explanation of the code. The final entry is shown via a Web browser. This thesis also includes presentations for teaching with sample examples.
Cílem práce je vytvoření učební pomůcky pro předmět webové technologie, která byla zpracována v programu PSPad. Teoretická část je zaměřena na vybrané programy, které umožňují zápis různých jazyků. Následuje popis základní struktury HTML5 dokumentu a jeho náležitosti. Každý záznam vytvořený v HTML dokumentu je potřeba objasnit za použití kaskádových stylů. Závěr teoretické části je věnována struktuře Bootstrap. Praktická část je zaměřena hlavně na praktické znalosti využití HTML, CSS a Bootstrap. Tyto jazyky nám pomáhají k zobrazení názorného popisu a vysvětlení kódu. Výsledný zápis je vyobrazen přes webový prohlížeč. Součástí práce jsou také prezentace pro výuku se vzorovými příklady.
Anotace v angličtině
The aim of this thesis is to create learning aids for the web-based technology which was developed in PSPad. The theoretical part is focused on selected programs that allow wri-ting of different languages. The next part is a description of the basic structure HTML5 do-cument and its elements. Each record created in the HTML document is needed to be clari-fied by the use of cascading style sheets. The ending of the theoretical part is devoted to the structure Bootstrap. The practical part is focused mainly on practical use of the knowledge of HTML, CSS and Bootstrap. These languages help us to show illustrative description and explanation of the code. The final entry is shown via a Web browser. This thesis also includes presentations for teaching with sample examples.
Seznamte se s webovými technologii (HTML 5, CSS, Jquery,Bootstrap) v aktuální verzi.
Zpracujte popis těchto technologií.
Zpracujte podklady pro výuku - teroretickou i praktickou.
Realizujte sadu vzorových příkladů.
Navrhněte sadu 60 testovacích úkolů včetně řešení.
Uveďte možné směry rozvoje učební pomůcky.
Zásady pro vypracování
Seznamte se s webovými technologii (HTML 5, CSS, Jquery,Bootstrap) v aktuální verzi.
Zpracujte popis těchto technologií.
Zpracujte podklady pro výuku - teroretickou i praktickou.
Realizujte sadu vzorových příkladů.
Navrhněte sadu 60 testovacích úkolů včetně řešení.
Uveďte možné směry rozvoje učební pomůcky.
Seznam doporučené literatury
BROWN, Tiffany B, Kerry BUTTERS a Sandeep PANDA. HTML5 okamžitě: \matsymb{lbrack}ovládněte HTML5 za víkend\matsymb{rbrack}. 1. vyd. Brno: Computer Press, 2014, 256 s. ISBN 978-80-251-4296-7.
PÍSEK, Slavoj. HTML: začínáme programovat. 4., aktualiz. vyd. Praha: Grada, 2014, 181 s. ISBN 978-80-247-5059-0.
CASTRO, Elizabeth a Bruce HYSLOP. HTML5 a CSS3: názorný průvodce tvorbou WWW stránek. 1. vyd. Brno: Computer Press, 2012, 439 s. ISBN 978-80-251-3733-8.
HOGAN, Brian P. HTML5 a CSS3: výukový kurz webového vývojáře. Vyd. 1. Brno: Computer Press, 2011, 272 s. ISBN 978-80-251-3576-1.
LUBBERS, Peter, Brian ALBERS a Frank SALIM. HTML5: programujeme moderní webové aplikace. Vyd. 1. Brno: Computer Press, 2011, 304 s. ISBN 978-80-251-3539-6.
LAZARIS, Louis. CSS okamžitě. 1. vyd. Brno: Computer Press, 2014, 168 s. ISBN 978-80-251-4176-2.
DOMES, Martin. 333 tipů a triků pro CSS. 2., aktualiz. vyd. Brno: Computer Press, 2011, 272 s. ISBN 978-80-251-3366-8.
Seznam doporučené literatury
BROWN, Tiffany B, Kerry BUTTERS a Sandeep PANDA. HTML5 okamžitě: \matsymb{lbrack}ovládněte HTML5 za víkend\matsymb{rbrack}. 1. vyd. Brno: Computer Press, 2014, 256 s. ISBN 978-80-251-4296-7.
PÍSEK, Slavoj. HTML: začínáme programovat. 4., aktualiz. vyd. Praha: Grada, 2014, 181 s. ISBN 978-80-247-5059-0.
CASTRO, Elizabeth a Bruce HYSLOP. HTML5 a CSS3: názorný průvodce tvorbou WWW stránek. 1. vyd. Brno: Computer Press, 2012, 439 s. ISBN 978-80-251-3733-8.
HOGAN, Brian P. HTML5 a CSS3: výukový kurz webového vývojáře. Vyd. 1. Brno: Computer Press, 2011, 272 s. ISBN 978-80-251-3576-1.
LUBBERS, Peter, Brian ALBERS a Frank SALIM. HTML5: programujeme moderní webové aplikace. Vyd. 1. Brno: Computer Press, 2011, 304 s. ISBN 978-80-251-3539-6.
LAZARIS, Louis. CSS okamžitě. 1. vyd. Brno: Computer Press, 2014, 168 s. ISBN 978-80-251-4176-2.
DOMES, Martin. 333 tipů a triků pro CSS. 2., aktualiz. vyd. Brno: Computer Press, 2011, 272 s. ISBN 978-80-251-3366-8.
Přílohy volně vložené
CD ROM
Přílohy vázané v práci
ilustrace, tabulky
Převzato z knihovny
Ne
Plný text práce
Přílohy
Posudek(y) oponenta
Hodnocení vedoucího
Záznam průběhu obhajoby
Studentka nejprve seznámila komisi s výsledky své diplomové práce. Poté byly prezentovány posudky vedoucí a oponentky.
Následně byla vedena rozprava, během které byly položeny následující otázky a komentáře:
Jakým způsobem budete zavádět učební pomůcky pro předmět webové technologie na střední škole?
Jak bude provedeno zaškolení učitelů, pro používaní technologi a jaký zde vidíte přínos pro výuku? Mohou nastat překážky s lektory předmětu? (dr. Němcová)
Ke konci práce jste měla srovnání kódu. Proč jste na srovnání nepoužila stejný formulář? (dr. Sysala)
Studentka pružně reagovala a všechny dotazy správně zodpověděla.