harveyev/cviceni

Podklady pro cvičení kurzu 4IZ268 na VŠE Praha

4iz268 - cvičení

Podklady pro cvičení kurzu 4iz268 - Webové technologie na VŠE v Praze

Web předmětu: http://4iz268.github.io

Plán cvičení

1. Základy HTML

• základy syntaxe, formátování
• adresování dokumentů a tvorba odkazů
• příprava zdrojového kódu v HTML (HTML editory) a prohlížení výsledku v prohlížeči
• přístupnost stránek pro různé typy zařízení, typy prohlížečů

2. Pokračování HTML

• tabulky, seznamy, vložení obrázku
• kontrola stránky pomocí validátoru

3. Kaskádové styly

• základy syntaxe, připojení stylu ke stránce
• formátování textu, odstavců
• box model, rámečky, okraje
• nové tagy v HTML5

4. Kaskádové styly a layout

• možnosti pozicování (float, flex box, grid)
• typické layouty a rozmístění prvků na stránce
• pokročilejší vlastnosti CSS3
• kontrola stylu pomocí validátoru CSS

5. Multimédia

• formáty obrázků vhodné pro web
• základní úpravy obrázků v editoru – ořez, zmenšení rozlišení, optimalizace
• úpravy vzhledu obrázku pomocí CSS
• vkládání zvuku a videa
• ikony a fonty

6. SVG

• vložení SVG do stránky
• příprava SVG v grafickém editoru

7. Pokročilé techniky

• model animací a transformací používaný v CSS a SVG
• responzivní layout
• responzivní obrázky (SVG, element)
• formátovani stranky pro různá zařízení a pro tisk
• využití knihovny Bootstrap

8. JavaScript – úvod

• vložení skriptu do stránky
• obsluha událostí
• základy syntaxe JavaScriptu
• debugging JS v konzoli

9. DOM a jQuery

• průchod a manipulace s DOM
• využití querySelectAll()
• jQuery
• použití existujících JS aplikací a komponent (kalendáře, WYSIWYG editory atp.)
• Bootstrap a jQuery

10. Formuláře

• čtení a zápis dat do formulářových polí
• validace hodnot ve formuláři (pomoci JS i HTML 5)
• odeslání formuláře hotovému skriptu

11. AJAX

• odeslání a zpracování XHR požadavku
• držení stavu a historie
• zpracování odpovědi ve formátech XML a JSON
• aktualizace části stránky na základě odpovědi XHR

12. HTML5 API

• práce s lokálním úložištěm
• detekce offline/online stavu
• offline aplikace (appcache, service worker)
• geolokace
• další HTML5 API

13. Aplikace

• Vypracování ukázkové aplikace
• Obsah jednotlivých cvičení se může lišit v závisloti na rychlosti jednotlivých skupin a harmonogramu aktuálního semestru.

Co naleznete v tomto úložišti?

• textové poznámky k jednotlivým cvičením
• ukázkové příklady
• souhrn informací nutných pro absolvování předmětu

Požadavky na absolvování

• hodnocení se skládá ze čtyřech částí:
  • statická prezentace (max. 25 bodů)
  • javascriptová aplikace (max. 25 bodů)
  • závěrečný test (max. 40 bodů)
  • body za aktivitu na cvičeních a při plnění domácích úkolů (10 bodů)
• je použita standardní bodová škála, tj. je nutné celkem získat minimálně 60 bodů
• z každé hlavní části hodnocení (test, web, aplikace) je nutné získat minimálně polovinu možných bodů

Zdroje informací

• Prezentace z přednášek
• Plán cvičení
• HTML 5 primární zdroj, final verze specifikace z 28.10.2014
• Twitter: https://twitter.com/4iz268
• kniha Dive into HTML5 - zdarma, kus přeložený, můžete pomoci s překladem
• HTML5 tvorba dokonalých webových stránek: http://htmlguru.cz/
• http://www.w3.org/standards/webdesign/htmlcss
• http://www.w3schools.com/tags/
• W3C validátor: http://validator.w3.org/
• další validátor (používá ho i W3C): http://validator.nu/
• plus zdroje uvedené v sylabu předmětu