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
- 358 €
- 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 / Figma I. – základný softvérový tréning
Čo je to Figma?
Teoretické koncepty UI/UX design – design experience
Praktické možnosti UX/UI designu s aplikáciou Adobe XD
Rozhranie aplikácie
Rozhranie Design (XD) / Draft (Figma)
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 Protoype (XD) / Wireframing (Figma)
Ako funguje prototyping
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í,
Export obsahov,
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 V APLIKÁCII DREAMWEAVER
O frameworku Bootstrap
Možnosti tvorby responzívnych layoutov a objektov
Panel Bootstrap components – Responzívne kontajnery a mriežka
Panel Bootstrap components – Jumbotron, Cards a ďalšie
Panel Snippets / Výstrižky
Media Query
Vkladanie HTML elementov do layoutu Bootstrap
Formátovanie elementov pomocou CSS štýlov
Ďalšie objekty a kódy na www.getbootstrap.com
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
Ú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):
Softvérová výbava pre štúdium našich kurzov:
- ADOBE: Na stránke www.adobe.com vytvorte si najprv bezplatné Adobe ID konto. Ako účastníci riadneho štátom akreditovaného štúdia ste oprávnení zakúpiť si študentskú verziu Creative Cloudu za 19,50 € / mesiac, s kompletnou funkcionalitou! Ušetríte tak až 65% ceny na celý rok!
- K vzdelávaciemu programu AKR3: Webdesign a tvorba webstránok, si z aplikácie Creative Cloud stiahnite a nainštalujte programy Adobe XD a Dreamweaver.