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 designu 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 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 mieru
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 – dištančne LMS
• 2. týždeň: Nácvik a zručnosti práce v aplikáciach – prezenčne + štúdium v online učebni a domáce zadania
• 3. týždeň: Riešenie praktických zadaní a projektov – prezenčne + štúdium v online učebni a domáce zadania
• 4. týždeň: Riešenie praktických zadaní a projektov – prezenčne + štúdium v online učebni a domáce zadania
• 5. 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 pri dohode celej skupiny. Počas COVID situácie sú prezenčné stretnutia modifikované.

• 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ý design
• 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á designu – jednota, účelnosť, prehľadnosť

• Čo je webdesign
• Základný postup tvorby webstránok
• Ešte než začneme tvoriť – plánovanie – 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
• Prototyp – Adobe XD

• 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á pre web

• 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úrne 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.)

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
• SEO prvky a optimalizácia pre vyhľadávače
• Ú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: titulky, odstavce, zoznamy, odrážkové zoznamy, tabuľky
• Sledovanie práce v režime Kód
• Vloženie špeciálnych znakov
• Typografické vlastnosti jazyka CSS pre texty

Obrázky a médiá

• O formátoch obrázkov – JPG, PNG, SVG
• Vloženie obrázkov
• Úprava obrázkov v Dreamweaver
• Vloženie videa na stránku
• Vloženie balíčka .OAM – animovaná kompozícia

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 v Dreamweaveri

• Kaskádové štýly v Dreamweaveri – panel CSS Designer
• 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
• Jedinečné kontajnery DIV ID
• Znovupoužiteľné kontajnery DIV CLASS
• Responzívne vlastnosti kontajnerov DIV

Tvorba responzívnych layoutov pomocou Bootstrap

• Predstavenie frameworku
• Založenie projektu Bootstrap
• Vkladanie responzívnych objektov z knižnice Boostrap
• Tvorba layoutu pomocou Bootstrap preddefinovaných šablón
• Tvorba vlastného layoutu pomocou elementov 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:

• Založenie webového sídla a responzívneho projektu Bootstrap
• Vkladanie kontajenrov Bootstrap – tvorba layoutu stránok
• Vkladanie obsahov na stránky (zo zložky médií – texty, video, animácia)
• Úpravy vzhľadu elementov Bootstrap pomocou dodatočných vlastností CSS
• Ukážka uploadovania sídla na web – správa v Dreamweaveri

Forma záverečnej skúšky: 

• 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