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

Ak plánujete kariéru ako programátor webstránok, prípadne ste grafický designér a chcete si rozšíriť odborný záber ako tvorca a správca  webstránok, môžete začať tým, že absolvujete u nás kurz tvorby webstránok pomocou HTML5 CSS3, responzívnej knižnice Bootstrap a interaktívneho JavaScript frameworku jQuery. Svoj návrh spracujete od úplného začiatku a naprogramujete v Adobe Dreamweaver, ktorý je profesionálnym editorom pre komplexnú tvorbu a správu responzívnych webstránok. Oboznámite sa aj s tvorbou a správou webstránok v redakčnom systéme WordPress.

INFORMÁCIE

Organizačná forma vzdelávania: Kombinovaná (prezenčne + live + online učebňa)

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

Profil absolventa

Absolvent modulu je schopný samostatne navrhovať a vytvárať funkčné webstránky v jazykoch HTML, CSS a s pomocou frameworkov jQuery a Bootstrap v programe Adobe Dreamweaver. Ovláda rozhranie a administráciu redakčného systému WordPress.

Požadované vstupné vzdelanie

  • Minimálne SŠ vzdelanie, základy práce s PC

Metódy a formy vzdelávania

  • teoretická predpríprava v online učebni,
  • štartovacie aj pokročilé softvérové výcviky v online učebni,
  • 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 prihláška

Rozsah a termíny

  • 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.
  • Zľavy za viac odborov: áno, dohodou

Časový rozpis priebehu vzdelávania

  • 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áciách – 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é podľa aktuálnych možností.Učebné osnovy a plány.

UČEBNÉ OSNOVY A PLÁNY

Základy jazykov HTML a CSS

Čo je to HTML?
Štruktúra webovej stránky
Základné značky hlavičky – Tag !DOCTYPE, HTML, HEAD, TITLE, META, LINK, SCRIPT
Základné značky v tele webstránky – odkaz, textové elementy, div, blokové elementy, obrázky, tabuľky, formuláre, médiá

Čo sú to CSS (kaskádové štýly)
Štýly pre redefinovanie tagov HTML
Štruktúrne tagy HTML5
Štýly pre definovanie elementov
Štýly pre odkazy a linky
Štýly pre textové elementy, blokové elementy
Typografické pravidlá
Rámčeky a okraje
Layout pomocou kontajnerov DIV
Responzívne vlastnosti kontajnerov DIV a obsahov

Princípy a špecifiká webdesignu

Čo je webdesign
Základný postup tvorby webstránok
Ešte skôr než začneme tvoriť – plánovanie, rozkres, wireframing
Grafický design webstránky s ohľadom na užívateľa – UI design, mockup
Užívateľská prístupnosť a použiteľnosť – UX design, prototyping
Rozmery, vzhľad a kompozičné pravidlá vo webdesigne
Responzívny webdesign – princípy, špecifiká
Praktické odporúčania

Adobe XD I. – základný softvérový tréning

Čo je to Adobe XD?
Teoretické koncepty UI/UX design – design experience
Praktické možnosti UX/UI designu s aplikáciou Adobe XD
Rozhranie aplikácie

Design mode – rozhranie pre návrh
Vytváranie projektov
Návrhové plochy*
Zoming a navigácia po dokumente
Nástroj Text
Font management system
Nástroje základných geometrických tvarov
Nástroj Pero
Kombinovanie tvarov
Farby, prechody, výplne
Import grafiky – bitmapy, vektory, natívne súbory AI, PS
Manažment objektov Assets, Vrstvy

Prototype mode – rozhranie pre wireframing
Ako funguje prototypovanie v XD
Prepájanie obrazoviek
Prepájanie obrazoviek pomocou objektov
Možnosti animácií a časovania prechodov

Špeciálne funkcie pre navrhovanie a prototyping
UI Kits – hotové ikonky elementov a rozhraní – vzhľad Android, iOS, Windows,
Komponenty – koncept, práce,
Ponuka pluginov a rozšírení v Adobe XD,
Export obsahov – Design specs,

Ukážka prototypu webstránky od úplných základov po funkčný prototyp a export

Adobe Dreamweaver I.+II. – rozšírený softvérový tréning

ZAČÍNAME
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 OAM 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 CSS ŠTÝLOV V PRAXI
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
Framework Bootstrap – responzívny webdesign

MANAŽMENT A PUBLIKOVANIE 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
Ukážka uploadovania sídla na web – správa v Dreamweaveri

O FRAMEWORKOCH V APLIKÁCII DREAMWEAVER

BOOTSTRAP – princípy tvorby a správy responzívnych webstránok
jQUERY – princípy tvorby a správy interaktívnych objektov webstránok

Úpravy a editácia redakčných systémov 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
Oboznámenie sa s rozhraním – práce v redakčnom prostredí
Pluginy a rozšírenia
Upload a aktualizácia obsahov

Praktická a projektová časť

Návrh a výroba kompletnej webstránky od zelenej lúky, práca s médiami, v responzívnom frameworku Bootstrap.

Forma záverečnej skúšky

záverečný test (požadovaná úspešnosť 85 %) + obhajoba záverečnej práce (vytvorených produktov – vizitky, letáku, inzerátu, plagátu, webových obrázkov a reklamného banneru pre sociálne siete, vytvorených na praktickom výcviku).

Študijné materiály

  • interaktívne prednášky, ukážky, simulácie, elektronické testy, podrobné videokurzy k softvérom (slovensky aj anglicky), 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
  • Affinity Designer a Affinity Photo: https://affinity.serif.com/en-us/photo/desktop/

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ť!

VIAC INFO: Tel. 0948 203 003, info@digitaldesign.sk