
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á, viacformová (PREZEČNE V UČEBNI alebo PREZENČNE ONLINE + DIŠTANČNE v online učebni LMS)
- PREZENČNE V UČEBNI alebo PREZENČNE ONLINE – výučba a výklad, nácvik, ukážky, designérske rozbory praktických projektov, tipy a triky, konzultácie, otázky a odpovede,
- DIŠTANČNE V ONLINE UČEBNI LMS – prípravné témy, teórie, predmety, ukážky a simulácie, podrobné 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 prezenčne v učebni alebo prezenčne online,
- 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
- 328 €
- Prihláška a postup: Prihláška na akreditovaný kurz / akreditované štúdium – DigitalDesign.sk
Rozsah a termíny
- Rozsah kurzu: 48,00 hodín / 2-5 týždňov (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 na úvodnej zácvikovej hodine.
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
