Obecné cíle vyučovacího předmětu

Vyučování v předmětu Webdesign (WBD) sleduje obecné kognitivní cíle (1) seznámit žáky s konkrétními tématy a technikami (přímý cíl), (2) orientovat se v prostředí webdesignu a vývoje webových stránek a (3) nacvičit si v praktických příkladech a mini-projektech techniku vývoje webových stránek. Cíl (3) je hlavní způsob, jak si žáci uchovají znalosti a návyky z vyučované oblasti.

Charakteristika učiva

Učivo se skládá především z následujících částí:

  1. Teoretický úvod
    1. Co jsou to webové stránky, principy a zákonitosti, standardy W3C
    2. Třívrstvá architektura webu, příklady technik v jednotlivých vrstvách
    3. Principy designu webových stránek, práce s nástrojem Figma
    4. Proces tvorby webových stránek
    5. Kontrola kvality
    6. Proces testování webových stránek
    7. Redakční systémy
  1. Odborné části
    1. Statické webové stránky (HTML), kaskádové styly (CSS)
    2. Skriptovací jazyk na straně klienta (JavaScript)
    3. Programovací jazyk na straně webserveru (PHP)
    4. Práce s databází (mySQL)
    5. Redakční systémy (Wordpress)
  2. Praktické části
    1. Tvorba grafického návrhu webové prezentace (Figma)
    2. Tvorba statické webové prezentace (HTML, CSS)
    3. Tvorba statické webové prezentace s formulářem kontrolovaným na straně klienta (HTML, CSS, JavaScript)
    4. Tvorba dynamické webové prezentace s formulářem kontrolovaným na straně klienta a zpracovávaným na straně webserveru (HTML, CSS, JavaScript, PHP)
    5. Tvorba dynamické webové prezentace s formulářem kontrolovaným na straně klienta a zpracovávaným na straně webserveru pomocí databáze (HTML, CSS, JavaScript, PHP, mySQL)
    6. Tvorba webové prezentace pomocí redakčního systému (Wordpress, HTML, CSS, JavaScript, PHP, mySQL)
    7. Tvorba webové prezentace pomocí redakčního systému a vlastní šablony (Wordpress, HTML, CSS, JavaScript, PHP, mySQL)
    8. Tvorba webové prezentace s dynamickým formulářem pomocí redakčního systému, vlastní šablony a plug-inu (Wordpress, HTML, CSS, JavaScript, PHP, mySQL)

Formy výuky

Formy využívané při výuce jsou především:

  • frontální vyučování (úvod do nového tématu, ukázky)
  • individualizované vyučování (samostatné práce využívající moderních multimediálních prostředků výuky)
  • dyadické vyučování (práce ve dvojicích na mini-projektech využívajících moderních multimediálních prostředků výuky)
  • skupinové vyučování (společná diskuze, společná pomoc vybraným žákům)

s důrazem především na praktické, většinou dyadické vyučování, kdy žáci pracují na jimi vybraném tématu ve dvojicích. Prací ve dvojicích se žáci připravují na týmovou práci v budoucím zaměstnání, kde často daný úkol nebudou vykonávat individuálně, nýbrž jako součást týmu.

Zpracované téma (nebo mezistav zpracování) následně žáci prezentují před celou skupinou, čímž si procvičí schopnost přípravy prezentace, vlastní prezentaci i hodnocení prezentace ostatních. Tím, že každý si během roku postupně vyzkouší několik takových prezentací, dostávají žáci šanci se postupně zlepšit.

Syllabus

WBD1

Téma

Úvod do webových stránek, principy a zákonitosti webdesignu, standardy W3C 

Třívrstvá architektura

Úvod do značkovacího jazyka HTML, oddělení vzhledu od dat, základní struktura HTML stránky, základní značkovací prvky HTML5 (header, nav, main, footer), nadpisy, odstavec, div, span, odkaz, obrázek, formátování

Proces webdesignu – zadání, analýza, wireframe, grafický návrh, realizace

HTML tabulky, seznamy, formuláře

Úvod do kaskádových stylů, CSS formátování, třídy, box model, formátování textu, pozadí, rámečky

Grafický návrh webových stránek, principy designu, práce s nástrojem Figma

CSS pozicování, pseudo-třídy

Proces webdesignu – wireframe, grafický návrh, realizace, testování

Responzivní HTML stránky – konstrukce, praktické procvičování

Techniky pro CSS třídy – DRY do not repeat yourself, KISS keep it simple & stupid, praktické procvičování

Úvod do JavaScriptu – skriptovacího jazyka na straně prohlížeče, kontrola formuláře pomocí JavaScriptu

JavaScript – práce s DOM a CSS třídami pomocí událostí v JavaScriptu

Úvod do jazyka XML, transformace XML pomocí jazyka XSL, návrh vlastní struktury XML souboru pro uložení dat

WBD2

Téma

Opakování z minulého ročníku – statické webové stránky
(HTML, CSS, JavaScript) 

Úvod do dynamických webových stránek, třívrstvá architektura 

Úvod do tvorby stránek generovaných na straně aplikačního serveru, úvod do jazyka PHP 

PHP – proměnné, datové typy, syntaxe 

PHP – podmínky, smyčky 

PHP – formátování výstupu, práce s řetězci 

PHP a HTML – zakomponování dynamických prvků do statických stránek 

PHP – zpracování formuláře 

Javascript & PHP – ověření vstupních dat formuláře 

Úvod do databáze MySQL 

Ukládání dat z formuláře do jednoduché databázové struktury 

Výstup dat z jednoduché databázové struktury 

PHP & MySQL – práce s řetězci 

Vytvoření jednoduché webové aplikace (zadávání, ukládání a vyhodnocování dat) 

Integrace webové aplikace do webových stránek 

Kontrola kvality webových stránek, testování 

Komplexní webové stránky bez redakčního systému včetně webových aplikací 

WBD3

Opakování statických webových prezentací, dynamických webových stránek, PHP, napojení do MySQL databáze

    

Úvod do redakčních systémů, vlastnosti, dělení redakčních systémů, výhody a nevýhody jednotlivých skupin

    

Redakční systém Wordpress – úvod, instalace, pokusné naplnění

    

Wordpress – malý projekt na webovou prezentaci pomocí redakčního systému a standardní šablony

    

Wordpress – úvod do šablon, struktura souborů 

    

Wordpress – projekt na webovou prezentaci pomocí vlastní šablony

    

 

  

Wordpress – převedení dynamické části webové stránky do vlastního plug-inu

    

Wordpress – malé projekty na webovou prezentaci pomocí redakčního systému a nestandardní šablony, včetně implementace vybraných plug-inů / vlastního jednoduchého plug-inu 

    
Wordpress – úvod do plug-inů, customizing webové prezentace    
Testování webové prezentace – testovací scénáře, protokoly