Odbor AKR3 je specializačním oborem digitálního designu. Implementuje teoretické znalosti ze základních grafických designérských oborů a rozšiřuje je o oblast specializovaného navrhování a publikování – pro webovou stránku. Absolvent oboru Webdesign a tvorba webstránek tedy bude ovládat specifika a principy webového designu, uživatelskou přístupnost rozhraní webových stránek a pomocí editoru pro tvorbu webstránek v jazycích HTML5 a CSS3 + frameworků Bootstrap a jQuery – v Adobe Dreamweaveru – se naučí prakticky vytvářet responzivní sídla s interaktivními objekty a multimédii. Zároveň se seznámí také se základní tvorbou a správou webstránek v redakčním systému WordPress.
Uvedený odbor primárně vyučujeme ve dvojici programů Adobe XD + Adobe Dreamweaver. V případě zájmu je po dohodě možnost výuky v alternativním softwaru – Adobe Figma (UX/UI) + Brackets (HTML/CSS).
INFORMACE
Organizační forma výuky: Kombinovaná, viceformní (PREZENČNĚ V UČEBNĚ nebo PREZENČNĚ ONLINE + DISTANČNĚ v online učebně mLearning LMS)
- PREZENČNĚ V UČEBNĚ nebo PREZENČNĚ ONLINE – přednášky, nácvik, demonstrace, cvičení, designové rozbory praktických projektů, tipy a triky, konzultace, otázky a odpovědi
- DISTANČNĚ V ONLINE UČEBNĚ LMS – teoretické předměty, podrobné videokurzy – kompletní přehledy teoretických předmětů a videokurzů
Požadované vstupní vzdělání
- Minimálně SŠ vzdělání, obvyklá práce s PC
- Vhodné pro začátečníka v grafice a designu: ano
Jazykové prostředí
- Během prezenční výuky: čeština nebo slovenština
- Online systém: čeština a slovenština (teorie), angličtina (videokurzy)
Metody a formy výuky
- Teoretická příprava v online učebně
- Startovací a pokročilá softwarová školení v online učebně
- Přednášky a praktický výcvik prezenčně v učebně nebo prezenčně online
- Praktické cvičení a zadání (kombinovane)
- Pokročilá témata a techniky, diskuze (kombinovaná)
- Podrobněji o formách vzdělávání v sekci: >> Formy vzdělávání
Ceny a přihláška
- Cena: 10 700 Kč (428 €)
- Přihláška a postup: >> Přihláška na kurz / Akreditované studium mLearning.cz
Rozsah a termíny
- Rozsah kurzu: 48,00 hodin / 2-5 týdnů (dle intenzity střetek)
- Vyhlášení termínů: veřejné termíny nebo individuálně dle zájmu, na míru
- Slevy za více oborů: ano, dohodou
Rozvrh výuky
- 1 týden: Přístup do vzdělávacího systému, přípravné kurzy, teorie, předměty – distanční LMS
- 2. týden: Praxe a dovednosti práce v aplikacích – prezenčně + studium v online učebně a domácí úkoly
- 3. týden: Řešení praktických úkolů a projektů – prezenčně + studium v online učebně a domácí úkoly
- 4. týden: Řešení praktických úkolů a projektů – prezenčně + studium v online učebně a domácí úkoly
- 5. týden: Vypracování projektu, závěrečný test, obhajoba závěrečné práce
Poznámka: rozvrh je přizpůsobitelný požadavkům účastníků, pokud se celá skupina kompromisně dohodne na úvodním online setkáni.
UČEBNÍ OSNOVY A PLÁNY
AKR3: Webdesign a tvorba webstránek
Jazyk HTML5
- Co je HTML?
- Základní struktura webových stránek
- Základní HTML5 tagy hlavičky – HTML, HEAD, !DOCTYPE, TITLE, DESCRIPTION, META, LINK, SCRIPT
- Základní struktúrní HTML5 tagy – BODY, DIV, HEADER, MENU, ASIDE, FOOTER
- Základní obsahové HTML5 tagy – LINK, PARAGRAPH, HEADING, IMAGE, AUDIO, VIDEO
Co jsou CSS 3 (kaskádové styly)
- Styly CSS a jejích vztah k HTML tagům
- Styly pro definování elementů – blokové prvky
- Styly pro definování elementů – řádkové prvky
- Styly pro odkazy
- Styly pro textové prvky a titulky
- Typografická pravidla – specifiká pro web
- Rozvržení pomocí DIV kontejnerů
- Tŕídy CLASS a ID
- Boxy a okraje – Box model
- Responzivní vlastnosti DIV kontejnerů a jejích obsahu
Principy a specifiká webdesignu
- Co je webdesign – specifika designování pro webový prohlížeč
- Ještě dříve než začneme vyrábět – design & prototyping
- Principy UX/UI s ohledem na webové stránky a obsahy
- UI: Vizuální složka rozhraní produktu – design, layout
- UX: Uživatelská složka rozhraní produktu – struktura, navigace, uživatelská přístupnost
- Teorie interakce pro produkty na různých obrazovkách
- Responzivní webdesign – principy, specifika
- Teorie multimédií – technologické a funkční principy
- Software a vývojová prostředí pro tvorbu webových stránek
- Praktická doporučení
Adobe XD / Figma I.+II. – rozšířený softwarový trénink se zaměřením na návrh webových stránek
Rozhraní: Design (XD) / Draft (Figma)
- Vytváření nového projektu a nastavení jeho vlastností
- Návrhové plochy – Artboards
- Zoming a navigace v dokumentu
- Panel Properties
- Nástroj Text a formátování textů
- Základní nástroje pro geometrické tvary
- Nástroj pero
- Kombinování tvarů
- Barvy, přechody, výplně
- Import grafiky – bitmapy, vektory, nativní soubory AI, PS (XD)
- Management objektov a štýlov – panel Document assets
- UI Kits – hotové ikony prvků a rozhraní – Android, iOS, Windows
- Komponenty – koncept, práce – panel Components
- Menu pluginů a rozšíření – panel Plugins
Rozhraní: Protoype (XD) / Wireframing (Figma)
- Jak funguje prototypování
- Interaktivní propojování obrazovek
- Propojování obrazovek pomocí objektů
- Panel Interaction – události Tap, Drag, Keys, Voice
- Panel Action – Transition, Auto-animate, Hyperlink, Scroll, Overlay…
Export
- Přehled možností exportu – JPG, PNG, SWF, PDF, icons
- Export objektů vs. Export artboardů
- Označení assetu pro export
- Dávkový export
Adobe Dreamweaver I.+II. – rozšířený softwarový trénink se zaměřením na tvorbu webstránek HTML, CSS a Bootstrap
ZAČÍNÁME
- Základní pojmy a vztahy DW a workflow
- Začínáme – pracovní rozhraní – základní přehled
- Založení webového projektu
- Panely Files, Insert, Properties
- Správa zdrojů v panelu Files
- Vytvoření první webstránky
- Základné vlastnosti stránky
- Vložení názvu stránky a meta tagů do záhlaví
- Úpravy panelů a používání ploch v aplikaci Dreamweaver
TEXTY
- Psaní textů v režimu Design
- Vložení textu z jiných aplikací
- Formátování textů 1 – titulky
- Formátování textů 2 – odstavce
- Formátování textů 3 – seznamy
- Psaní textů HTML značkami v režimu Code
- Vkládání speciálních znaků
TABULKY
- Vkládání tabulek do HTML stránek – panel Insert
- Úpravy tabulek v režimech Design a Code
- Vkládání obsahu do tabulek
OBRÁZKY A EXTERNÍ MÉDIA
- Vkládání z panelu Insert:
- obrázků – JPG, PNG, SVG, GIF
- videa – mp4 (H264)
- audia – mp3, wav
- objektů .OAM
ODKAZY A ODKAZY
- Relativní a absolutní odkazy
- Relativní odkazy a cesty v sídle aplikace Dreamweaver
- Přidávání odkazů textem a obrazem
- Absolutní odkazy na soubory
ZÁKLADY STYLŮ CSS V PRAXI
- Koncept práce s CSS v Dreamweaveru – panel CSS Designer
- Aplikování CSS štylů na HTML elementy:
- Předefinování výchozího vzhledu HTML tagů
- Vytváření vlastních CSS stylů – řádkové elementy (ID, CLASS)
- Vytváření vlastních CSS stylů – blokové elementy (ID, CLASS)
- Nové štyly v jazyce CSS3 – tín, zaoblení rohů, sloupce, přechody
KONTEJNERY DIV
- O kontejnerech DIV – koncept
- Kontejnery DIV typu ID (unikátní)
- Kontejnery DIV typu CLASS (znovupoužitelné)
- Nové struktúrní HTML5 značky pro layout – header, menu, aside, article, footer
FRAMEWORK BOOTSTRAP V APLIKACI DREAMWEAVER
- O frameworku Bootstrap
- Možnosti tvorby responzivních layoutů pomocí Bootstrap
- Vytvoření projektu Bootstrap – iniciace framewworku
- Kopírování závislých souborů Bootstrapu – Depended files
- Panel Insert > Bootstrap components:
- responzivní layout pomocí fluid kontejnerů a sloupců na mřížce Bootstrapu
- responzivní objekty Jumbotron, Cards, Image, Video, Nav, Buttons…
- další objekty Bootstrapu – Panel Snippets
- Vkládání HTML elementů do layoutu Bootstrap
- Editace výchozích vlastností elementů pomocí CSS stylů
- Další objekty a kódy na www.getbootstrap.com
MANAGEMENT A PUBLIKOVÁNÍ WEBU
- Informace o odeslání lokálního webového místa na internet pomocí Dreamweaveru
- Nastavení přístupu k serveru pomocí protokolu FTP – definování serveru
- Synchronizace lokálních a vzdálených webů – remote server
- Ukázka nahrání webu na web – zpráva aplikace Dreamweaver
Základy práce v redakčním systému WordPress I.
- Doména a hosting pro web
- Možnosti hotové instalace WordPressu
- Nainstalujte si vybrané téma do WordPress
- Seznamte se s rozhraním – práce v prostředí pro správu obsahu
- Základní nastavení WordPressu
- Ponuka Přizpůsobení
- Články, Kategorie, Stránky a Widgety
- Pluginy a rozšíření
- Nahrávání a aktualizace obsahu
Praktická a projektová část
- Projekt budovaní kompletní webstránky pro firmu počas celého vzdělávání – nejprve provedeme UX/UI wireframe v Adobe XD a následne jej postupne prakticky vytvoříme v Adobe Dreamweaveru pomocí HTML, CSS a knižnic frameworku Bootstrap a jQuery. Projekt bude obsahovat také multimédiá (audio, video, youtube, google mapy) s kompletním exportem a nasazením celého sídla na webhosting
Forma závěrečné zkoušky
- závěreční test (teorie, požadovaná úspěšnost 85%)
- obhajoba závěrečné práce na vlastní téma: kompletní webstránka ve frameworku Bootstrap
Studijní materiály
- interaktivní přednášky, demonstrace, simulace, elektronické testy, podrobné videokurzy o software (slovensky a anglicky), odborná školení
- >> Přejít do online učebny
Knihovna
Software pro studium našich kurzů:
- ADOBE: Na stránce www.adobe.com si nejprve vytvořte bezplatný účet Adobe ID. Jako účastníci řádného státem akreditovaného studia máte nárok na zakoupení studentské verze Creative Cloud s kompletní funkčností! Ušetříte tak až 65% z ceny za celý rok!
- V případě oboru AKR3: Návrh webu a vývoj webových stránek si stáhněte a nainstalujte aplikaci Adobe XD a Dreamweaver z aplikace Creative Cloud.