AKR3: Kurz Webdesign a tvorba webstránok – web designer, web programá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
• Prezenčne LIVE: 288 €, stretnutia naživo, výklad, zdieľanie obrazoviek, audio, video + 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 (už od 1. účastníka – bez zmeny ceny!)
Možnosť ďalšej odbornej nadstavby: áno, kurzy AKR1, AKR2, alebo AKR4
Cena kurzu za dva odbory, teda AKR3 + AKR2 / AKR1, alebo AKR4: 585 € /ušetríte až 71 €

VIAC INFORMÁCIÍ:

Tel. 0948 203 003, info@mlearning.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

• Prehľad kurzu
• Uvítacia obrazovka
• Vytvorenie a nastavenie nového webu
• Prehľad rozhrania aplikácie
• Vizuálne pomôcky a predvoľby

PLÁNOVANIE WEBOVÉHO PROJEKTU

• Vytváranie štruktúry stránok
• Vytváranie hlavných stránok
• Hierarchické hlavné stránky
• Možnosti vzhľadu stránky
• Náhľad v prehliadači a obrázky na pozadí
• Práca so záhlavím a pätičkou
• Zmena vlastností stránky
• Zmena usporiadania stránok

PRÁCE S MÉDIAMI

• Import bitmapových obrázkov
• Zmena veľkosti a orezanie obrázkov
• Vkladanie obsahov SWF a Animate
• Správa projektu
• Import PSD súborov
• Zmena vlastností obrázka
• Obrázky služby HiDPI

ÚPRAVA VZHĽADU A MANIPULÁCIA S OBJEKTAMI

• Zoskupovanie objektov
• Práca s vrstvami
• Zarovnanie prvkov
• Použitie zaoblených rohov
• Použitie efektov
• Vytváranie grafických štýlov
• Vytváranie objektov so šírkou 100%
• Používanie fixnej pätičky

PRÁCE S TEXTOM

• Pridávanie textu
• Možnosti formátovania textu
• Používanie webových bezpečných a systémových písiem
• Výber webových písiem od TypeKit
• Obaľovanie textu okolo obrázkov
• Používanie kontroly pravopisu
• Výber značky na úrovni oddielu
• Vytváranie štýlov odstavcov
• Vytváranie štýlov znakov

HYPERLINKY

• Vytvorenie hypertextového odkazu
• Zmena vzhľadu odkazu
• Prepojenie s kotvami
• Vytvorenie odkazu na e-mail
• Prepojenie so súborom

EXPORT A PUBLIKOVANIE

• Publikovanie do obchodného katalyzátora
• Aktualizácia vašej stránky
• In-Browser Úpravy
• Publikovanie pomocou FTP
• In-Browswer Editácia

VYTVORENIE NAVIGAČNÝCH SYSTÉMOV

• Vytvorenie tlačítka
• Práce so stavmi tlačítka
• Vkladanie tlačitka z Photoshopu
• Vkladanie ucelených menu
• Úpravy menu

POUŽÍVANIE INTERAKTÍVNYCH WIDGETOV

• Čo sú Widgety?
• Tvorba miniatúr (fotogalérie)
• Tvorba prezentácií Lightbox
• Prezentácia celej obrazovky
• Použitie widgetu Accordion
• Práca s tabuľkovými panelmi
• Práce s kartami widgetu Accordion
• Vytváranie popisov
• Prehliadanie ďalších miniaplikácií
• Vytvorenie kontaktného formulára
• Štartovacie tlačidlo Widget
• Panel knižnice
• Ďalšie rozšírenia – Muse Exchange

PRÁCE S HTML

• Vloženie kódu HTML
• Pridávanie videa cez YouTube
• Vloženie Google mapy
• Pridanie tlačidla typu Facebook
• Práca s Twitterom
• Použitie sociálnych miniaplikácií (NEW)

VYTVÁRANIE RESPONZÍVNYCH LAYOUTOV

• Prinícípy responzívneho webdizajnu
• Možnosti responzivity v Adobe Muse
• Responzívne vlastnosti rôznych objektov
• Prichytávanie objektov k webstránke alebo prehliadaču
• Vytváranie breakpoints
• Praktické práce v responzívnom projekte

NAJLEPŠIE POSTUPY A SEO

• Pridanie metadát k stránke
• Použitie titulov a Alt s obrázkami
• Formátovanie s oddielmi Styles
• Pridávanie poplachov
• Prečítajte si súbor Sitemap

Adobe Photoshop Start – základný tréning (I.) / alternatívne: Corel PHOTO-PAINT X / Affinity Phtoto
6 hod., z toho 2 hod. prezenčne a 4 hod. dištančne

• Úvod do aplikácie
• Rozhranie a pracovná plocha
• Otváranie obrázkov a ukladanie dokumentov PS
• Základné posúdenie úpravy a korekcie obrázkov
• Orezanie, vyrovnanie, zlatý rez
• Tóny, jas a kontrast
• Farebné vyváženie a farebný režim
• Rozlíšenie a rozmerová veľkosť bitmáp
• Niektoré dôležité retušovacie techniky – klonovacie razítko, červené oči…
• Ostrenie obrázkov
• Ukladanie optimalizovaných obrázkov pre web a mobilné zariadenia

ÚVOD DO REDAKĆNÉHO SYSTÉMU WORDPRESS

• Získanie domény a hostingu pre svoj web
• Inštalácia systému WordPress – možnosti
• Inštalácia zvolenej témy do WordPressu
• Práce v redakčnom prostredí
• Upload a aktualizácia obsahov vo webovom prostredí

• Č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.)
12 hod., z toho 6 hod. prezenčne a 6 hod. dištančne

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.)
6 hod., z toho 2 hod. prezenčne a 4 hod. dištančne

• Č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

• Rozhľad v odbore
• Možnosti a formy profesného pôsobenia pre grafikov a dizajnérov na trhu práce
• Kde hľadať pracovné ponuky z našich odborov
• Príprava do praxe – oslovenie zamestnávateľa, portfólio, časté otázky a odpovede
• Príprava do praxe – sebazamestnanie, komunikácia s klientmi, stanovenie ceny práce, pracovné toky
• Koncepty kľúčových kompetencií a T-zručností
• Celoživotné vzdelávanie a dovzdelávanie – osobné kariérne plány

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