AKR3: Webdesign a tvorba webstránok – webdesigner, webprogramátor

• PREZENČNE v učebni (praktické projekty, dizajnérske rozbory, tipy a triky, otázky a odpovede),
• LIVE – online stretká prezenčne (konzultácie a pokročilé témy, naživo, výklad, diskusia, zdieľanie obrazoviek),
• LMS – kurzy v online učebni (prípravné témy, teórie, predmety, ukážky a simulácie, videokurzy) – kompletné prehľady predmetov a kurzov – Vstup do online učebne
• Podrobnejšie o formách vzdelávania v sekcii: >> Formy vzdelávania

• osoby so záujmom o získanie odbornosti a praktických zručností vo zvolenej oblasti digitálneho dizajnu a multimédií – navrhovanie webstránok a tvorba a správa webových sídiel a obsahov

• Minimálne SŠ vzdelanie, práca s PC
• Kurz je vhodný aj pre úplných začiatočníkov

• Absolvent modulu je schopný samostatne pripravovať webovú grafiku, vytvárať a spravovať webstránky pre svojich klientov

• teoretická predpríprava v online učebni,
• podrobné softvérové výcviky v online učebni (videokurzy),
• výklad a praktický nácvik osobne v učebni alebo online naživo,
• projekty a zadania (kombinovane),
• pokročilé témy a techniky, diskusia (kombinovane).
• Podrobnejšie o formách vzdelávania v sekcii: >> Formy vzdelávania

CENY A FORMY VZDELÁVANIA:

• Prezenčne: 328 €, kombinované vzdelávanie: učebňa Košice + LIVE + LMS, stretnutia naživo, výklad, zdieľanie obrazoviek, audio, video
  (počas mimoriadnej covid situácie stretnutia LIVE + LMS)
• Podrobnejšie o formách vzdelávania v sekcii: >> Formy vzdelávania

Rozsah kurzu:  48,00 hodín / 2-4 týždne (podľa intenzity stretiek)
Vypísanie termínov: verejné termíny alebo individuálne podľa záujmu, na mieruz
Možnosť ďalšej odbornej nadstavby: áno, kurzy AKR1, AKR2, alebo AKR4
Zľavy za viac odborov: áno, dohodou

VIAC INFORMÁCIÍ:

Tel. 0948 203 003, info@digitaldesign.sk

• 1 týždeň: Prístup do vzdelávacieho systému, prípravné kurzy, teórie, predmety
• 2. týždeň: Nácvik a zručnosti práce v aplikáciach – prezenčne, 2x  týždenne po 8 vyuč. hodín
• 3. týždeň: Riešenie praktických zadaní a projektov – prezenčne, 2x  týždenne po 8 vyuč. hodín
• 4. týždeň: Vypracovávanie projektu, záverečný test, obhajoba záverečnej práce

Poznámka: časový rozpis je prispôsobovateľný individuálnym požiadavkám účastníkov a dohode celej skupiny.

• Základné pojmy a rozhľad v odbore
• Vektorová a bitmapová grafika (princípy, výhody, použitie)
• Farebné režimy RGB a CMYK
• Formáty súborov – pre tlač, web

• Čo je to grafický dizajn
• Dizajn a vedomie jednotlivca – biologické, kultúrne, sociologické aspekty
• Interakcia s okolím – podnet, reakcia, asociácie
• Prvky a ich vlastnosti – farba, tvar, velkosť, povrch, symetria
• Nezámerné hľadanie vzťahov a vzorov – harmónie, kontrasty, línie
• Zámerné vytváranie prvkov a ich vzťahov – grafický dizajn
• Základné pravidlá dizajnu – jednota, účelnosť, prehľadnosť

• Čo je webdesign
• Základný postup tvorby webstránok
• Ešte než začneme tvoriť – plánovanie a rozkres
• Grafický dizajn webstránky s ohľadom na užívateľa
• Na čo sú používatelia zvyknutí
• Prístupnosť a uplatniteľnosť
• Rozmery stránky
• Vzhľad a kompozícia stránky
• Dôležité prvky stránky
• Praktické odporúčania

• Sadzba, písmo a zlom
• Písmo a anatómia
• Písmo – základné pojmy
• Fonty a ich delenie
• Základné typografické prvky
• Typografické pravidlá
• Niektoré najčastejšie chyby

• Farba vo fyzike
• Viditeľné spektrum
• Odraz svetla a vnímanie farieb
• Miešanie farieb
• Farebný priestor RGB a CMYK
• Model HSV, LAB a ďalšie
• Farby a bitový zápis
• Delenie farieb
• Farebný kruh a vlastnosti farieb
• Vnímanie a delenie farieb
• Farebné harmónie
• Psychologické pôsobenie rôznych farieb

• Čo je to HTML?
• Štruktúra webovej stránky – HTML5
• Základné značky hlavičky – Tag !DOCTYPE, HTML, HEAD, TITLE, META, LINK, SCRIPT
• Základné značky v tele webstránky – štruktúrové značky, textové elementy, odkazy, div, blokové elementy, obrázky, tabuľky, formuláre, médiá
• Čo je to CSS (kaskádové štýly)
• CSS štýly – redefinovanie východzieho vzhľadu tagov HTML
• CSS štýly – vytváranie tried
• CSS štýly pre textové elementy
• CSS štýly pre odkazy a linky
• CSS štýly – predefinovanie elementov image, table, form
• CSS štýly pre definovanie blokových elementov DIV – class, ID
• CSS štýly pre vizuálne efekty – tiene, zaoblené rohy, prechody
• Typografické vlastnosti pomocou CSS
• Rámčeky a okraje – box model
• Layout v HTML5 – fixný a responzívny

Adobe Dreamweaver – kľúčová aplikácia – podrobný tréning (I.+II.+III.)

Základné pojmy a vzťahy

Začíname 
Uvítacia obrazovka
Pracovné rozhranie – základný prehľad
Vytvorenie prvej webstránky
Panely Files, Insert a Properties
Vytvorenie webového sídla
Správa zdrojov v paneli Files
Určenie základných vlastností stránky
Vloženie názvu stránky a meta tagov do hlavičky
Úprava panelov a používanie pracovných plôch v Dreamweaver

Texty
Písanie textov v režime Design
Vkladanie textov z iných aplikácií
Formátovanie textov 1 – titulky
Formátovanie textov 2 – odstavce
Formátovanie textov 3 – zoznamy
Sledovanie práce v režime Kód
Vloženie špeciálnych znakov

Tabuľky
Vkladanie tabuliek do stránok HTML
Úpravy tabuliek
Vkladanie obsahov do tabuliek

Obrázky a médiá
O formátoch obrázkov
Vloženie obrázkov
Úprava obrázkov v Dreamweaver
Vloženie videa na stránku
Vloženie SWF objektu na stránku

Linky a odkazy
O relatívnych a absolútnych odkazoch
Relatívne odkazy a cesty v sídle Dreamweaver
Priraďovanie odkazov textom a obrázkom
Absolútne odkazy na súbory
E-mailové odkazy

Základy kaskádových štýlov
Princíp fungovania kaskádových štýlov
Kaskádové štýly v Dreamweaveri
Predefinovanie HTML tagov
Vytváranie vlastných štýlov – riadkové elementy
Vytváranie vlastných štýlov – blokové elementy
Nové štýly v jazyku CSS3 – tieň, zaoblenie rohov, stĺpce, prechody

Layout
O kontajneroch DIV
Princípy vytvárania layoutov z kontajnerov DIV
Štruktúra layoutu z kontajnerov DIV ID
Znovupoužiteľné kontajnery DIV CLASS
Tvorba layoutu pomocou nových značiek HTML5

Tvorba responzívnych layoutov pomocou Bootstrap
Predstavenie frameworku
Založenie projektu Bootstrap
Vkladanie responzívnych objektov
Layoutovanie pomocou Bootstrap

Manažment miestneho a vzdialeného webového sídla
Prepojenie stránok vo webovom sídle
O odosielaní miestneho webu na internet pomocou Dreamweavera
Nastavenia FTP prístupu na server
Synchronizácia miestneho a vzdialeného webu

Praktické cvičenia a projekty:

• Návrh a prototyp webu v aplikácii Adobe XD, export pre Dreamweaver,
• Vkladanie obsahov na stránky (zo zložky médií – texty, video, animácia)
• Štýlovanie elementov pomocou CSS
• Vytvoriť layouty od zelenej lúky (fixný a responzívny) v Dreamweaveri
• Objekty jQuery a Ajax a šablóny DW
• Ukážka uploadovania sídla na web – správa v Dreamweaveri

Adobe XD CC  – základný tréning (I.)

• Čo je to XD CC?
• Rozhranie aplikácie
• Nástroje tvarov
• Zoming
• Kombinovanie tvarov
• Import grafiky
• Maskovanie
• Manažment objektov
• Nástroj Text
• Nástroj Pero
• Návrhové plochy
• Návrh – úvodná obrazovka
• Návrh – obrazovka konta
• Funkcia Repeat grid
• Funkcia Prototype mode
• Náhľad projektu
• Zdieľanie projektu
• Export obsahov

Praktický nácvik: tvorba prototypu webovej aplikácie

• Vedomostný test – 55 otázok – požadovaná úspešnosť 65 %
• Záverečný praktický projekt – vytvorenie kompletnej webovej stránky pre fiktívnu firmu
• Obhajoba, diskusia, záver

• interaktívne prednášky, ukážky, simulácie, elektronické testy, podrobné softvérové videokurzy (v angličtine aj slovenčine),odborný výcvik,
• >> Prejsť do online učebne

Literatúra: (všetky publikácie dostupné účastníkom na zapožičanie):

• >> Prejsť do knižnice