AKR3: Kurz Webdesign a tvorba webstránok – webdesigner, web programátor

mu   ps

Spoznajte princípy grafického designu so špecializáciou na webdesign a tvorbu webstránok v dvoch alternatívach (výber je na vás):

WEBDESIGNER:  Navrhujte a vytvárajte moderné a plne funkčné responzívne webstránky s multimédiami, vo vizuálnom prostredí aplikácie Adobe Muse – bez potreby poznania či písania kódu HTML, CSS a JavaScript, ktorý za vás vygeneruje samotný Muse. Optimalizujte grafiku v aplikácii Photoshop pre všetky vaše webové projekty v Muse.

WEB PROGRAMÁTOR: Ak plánujete kariéru ako programátor webstránok, môžete svoju kariéru začať tým, že absolvujete u nás kurz tvorby webstránok pomocou HTML, CSS a JavaScript. Najprv sa naučte navrhnúť funkčný interaktívny prototyp webstránky v aplikácii Adobe XD CC, ktorý prezentujete klientovi. Následne svoj návrh naprogramujete v Adobe Dreamweaver, ktorý je profesionálnym editorom pre komplexnú tvorbu webstránok. 

Základné informácie o kurze

Organizačná forma vzdelávania: Kombinovaná (prezenčne + dištančne)

  • prezenčne v učebni (praktické projekty, dizajnérske rozbory, tipy a triky, otázky a odpovede),
  • online stretká prezenčne (konzultácie a pokročilé témy, naživo, výklad, diskusia, zdieľanie obrazoviek),
  • dištančne vo vzdelávacom systéme (prípravné témy, teórie, predmety, ukážky a simulácie, videokurzy) – kompletné prehľady predmetov a kurzov – Vstup do online učebne

>> viac info: Formy vzdelávania

Cieľová skupina

  • 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
Požadované vstupné vzdelanie

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

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

  • Teoretická príprava v špecifikách počítačovej grafiky a webdizajnu, praktický softvérový výcvik (podľa zvolenej aplikácie), simulácie v online systéme
Rozsah kurzu: 48,00 hodín / 4 týždne
Cena komplet: 328 €
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 €
Ďalšie informácie: 0948 203 003, info@mlearning.sk
Časový rozpis priebehu vzdelávania:

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

Učebné plány a osnovy

AKR0: Teórie počítačovej grafiky a odborov dizajnu

Úvod do počítačovej grafiky – 4 hod., z toho 3 hod. dištančne a 1 hod. prezenčne
  • 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
Teória grafického dizajnu – 6 hod., z toho 5 hod. dištančne a 1 hod. prezenčne
  • Č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ť
Princípy webdizajnu – 4 hod., z toho 4 hod. dištančne a 0 hod. prezenčne
  • Č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
Texty a typografia – 4 hod., z toho 3 hod. dištančne a 1 hod. prezenčne
  • 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
Farby a psychológia farieb – 2 hod., z toho 2 hod. dištančne a 0 hod. prezenčne
  • 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

AKR3: Webdizajn a tvorba webstránok – WEBDESIGNER

Adobe Muse – kľúčová aplikácia – podrobný tréning (I.+II.+III.)
12 hod., z toho 6 hod. prezenčne a 6 hod. dištančne
ZAČÍNAME S MUSE

  • 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 X8/
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í

AKR3: Webdizajn a tvorba webstránok – WEB PROGRAMÁTOR

Základy HTML a CSS

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

Odborný praktický výcvik – 14 hod., z toho 7 hod. prezenčne a 7 hod. dištančne
Praktický projekt:
Vytvorenie interaktívnej webovej stránky s multimédiami pre fiktívneho klienta

Doplnkový seminár: Osobné a odborné kompetencie pre profesie grafikov a dizajnérov na dnešnom trhu práce

  • 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
Študijné materiály

  • 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):

Skúšobné verzie produktov pre štúdium našich kurzov:

  • ADOBE: Skúšobné verzie produktov  sťahujte na www.adobe.com – vytvorte si najprv bezplatné Adobe ID konto a po prihlásení sa doň si stiahnite ako prvú aplikáciu CreativeCloud, v ktorej následne nájdete skúšobné verzie jednotlivých programov podľa zvoleného kurzu a zamerania
  • COREL: sťahujte podľa pokynov zo stránky www.corel.com
  • QuarkXPress: sťahujte podľa pokynov zo stránky www.quarkxpress.com
  • iSpringSuite: sťahujte podľa pokynov výrobcu zo stránky www.ispringsolutions.com

Upozornenie: pred prihlásením sa na kurz alebo na prvom zácvikovom stretku sa poraďte s lektorom, ktoré konkrétne programy si potrebujete stiahnuť!

CERTIFIKAT_DTP