Seznam témat
- Úvod do webových technologií [slidy]
- Jazyk HTML [slidy]
- Kaskádové styly (CSS) [slidy]
- JavaScript [slidy]
- jQuery a Bootstrap [slidy]
- Server-side technologie
Zkouška
Součástí zkoušky bude prezentace vytvořené HTML/CSS/JavaScript šablony. Pro pro pohodlnější vytvaření je lepší využit přesné podklady ve formátu PSD. Obrázky lze převzít z JPEG podkladů, nebo můžete použít vlastní (nezapomeňte, že první dojem je důležitý), případně z volně dostupných fotobank (například Freepik nebo Pexels). Během návrhu je možné použít službu Placeholder.
Font použitý v grafickém návrhu je Libre Baskerville a Futura PT. Jako ikony jsou použité Font Awsome a Flaticons ikony.
Jak pracovat s grafickými podklady
Grafické podklady lze otevřít v programu Gimp, Photopea případně v Adobe Photoshop. Podklady obsahují tzv. vrstvy ve kterých jsou uloženy jednotlivé prvky stránek. Při vytváření šablony je potřeba držovat parametry, které jsou v nich uvedé (např. velikost písma, šířka stránky, velikost okrajů a další).
Doporučený postup prací:
- Vytvoření základní struktury pomocí čistého HTML.
- Vytvoření grafické podoby pomocí CSS. Ta by měla být co nejvěrnější grafické předloze. Tzv.
pixel perfect design
, tedy že předloha na pixely odpovídá grafické předloze. Součástí tohoto bodu je i vytvoření responzivní (určená pro zobrazení ma mobilních zařízeních) verze. Pro účely zkoušky stačí testovat v prohlížeči Google Chrome. - Oživení dynamických prvků (listování, tabulátory, slideshow).
- Odladění chyb a testování. Pro zkoušku bude stačit odladění v prohlížeči Google Chrome. Pro zajímavost je dobré se podívat i na jiné prohlížeče.
Pro vývoj webových aplikací je zapotřebí webový a databázový server a podpora skriptovacího jazyka. Na lokálním počítači lze všechnu potřebnou funkcionalitu emulovat pomocí nástrojů AMP. Ty v sobě obsahují webový server (obvykle Apache), databázový server (obvykle MySQL) a podporu skriptovacího jazyka PHP. Pro práci na OS Windows doporučuji WAMP nebo XAMP. Na Mac OS je k dipozici MAMP. Všechny rozumné distribuce Linuxu podporují instalaci PHP, MySQL a Apache. Při instalaci na OS Windows 8 a vyšší může nastat problém se spuštěním webového serveru Apache, který pro svou funkcionalitu využívá port 80. Ten je defaultně používán již předinstalovným programem Skype, je tedy třeba změnit výchozí port u jednoho z programů.