AKR3: Webdesign a tvorba webstránok (zahŕňa kurzy Adobe XD / Figma, HTML, CSS, Bootstrap)

Odbor AKR3 je špecializačným odborom digitálneho designu. Implementuje teoretické vedomosti zo základných grafických designérskych odborov a rozširuje ich o oblasť špecializovaného navrhovania a publikovania – pre webovú stránku.  Absolvent odboru Webdesign a tvorba webstránok teda bude ovládať špecifiká a princípy webového designu, užívateľskú prístupnosť rozhraní webových stránok a pomocou editora pre tvorbu webstránok v jazykoch HTML5 a CSS3 + frameworkov Bootstrap a jQuery – v Adobe Dreamweaver – sa naučí prakticky vytvárať responzívne webové stránky a webové sídla s interaktívnymi objektami a multimédiami. Zároveň sa oboznámi aj so základnou tvorbou a správou webstránok v redakčnom systéme WordPress.

Tento akreditovaný odbor primárne vyučujeme dvojici programov Adobe XD + Adobe Dreamweaver. V prípade záujmu je však po dohode možná aj výučba v alternatívnych softvéroch – Adobe Figma (UX/UI) a Brackets (HTML/CSS).

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

Požadované vstupné vzdelanie

  • Minimálne SŠ vzdelanie, obvyklá práca s PC
  • Vhodné pre začiatočníka v grafike a designe: áno

Jazykové prostredie

  • počas prezenčnej výučby: slovenčina alebo čeština
  • online systém: slovenčina a čeština (teórie), angličtina (videokurzy)

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

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

AKR3: Webdesign a tvorba webstránok

Jazyk HTML5

  • Čo je HTML?
  • Základná štruktúra webových stránok
  • Základné HTML5 tagy hlavičky –  HTML, HEAD, !DOCTYPE, TITLE, DESCRIPTION, META, LINK, SCRIPT
  • Základné štruktúrne HTML5 tagy – BODY, DIV, HEADER, MENU, ASIDE, FOOTER
  • Základné obsahové HTML5 tagy – LINK, PARAGRAPH, HEADING, IMAGE, AUDIO, VIDEO

Čo sú CSS 3 (kaskádové štýly)

  • Štýly CSS a ich vzťah k HTML tagom
  • Štýly pre definovanie elementov – blokové prvky
  • Štýly pre definovanie elementov – riadkové prvky
  • Štýly pre odkazy
  • Štýly pre textové prvky a titulky
  • Typografické pravidlá – špecifiká pre web
  • Layout pomocou DIV kontajnerov
  • Triedy CLASS a ID
  • Boxy a okraje – Box model
  • Responzívne vlastnosti DIV kontejnerov a ich obsahu

Princípy a špecifiká webdesignu

  • Čo je webdesign – špecifiká designovania pre webový prehliadač
  • Ešte skôr než začneme vyrábať – design & prototyping
  • Princípy UX/UI s ohľadom na webové stránky a obsahy
  • UI: Vizuálna zložka rozhrania produktu – design, layout
  • UX: Užívateľská zložka rozhrania produktu – štruktúra, navigácia, užívateľská prístupnosť
  • Teória interakcie pre produkty na rôznych obrazovkách
  • Responzívny webdesign – princípy, špecifiká
  • Teórie multimédií – technologické a funkčné princípy
  • Softvéry a vývojové prostredia pre tvorbu webových stránok
  • Praktické odporúčania

Adobe XD / Adobe Figma I. – základný softvérový tréning so zameraním na vizuálny návrh webstránok

Rozhranie Design (XD) / Draft (Figma)

  • Vytváranie nových projektov a nastavenie vlastností
  • Návrhové plochy – Artboards
  • Zoming a navigácia po dokumente
  • Panel Properties
  • Nástroj Text a formátovanie textov
  • 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 a štýlov – panely Assets
  • UI Kits – hotové ikonky elementov a rozhraní – vzhľad Android, iOS, Windows
  • Komponenty – koncept, práce – panel Components
  • Ponuka pluginov a rozšírení – panel Plugins

Protoype (XD) / Wireframing (Figma)

  • Ako funguje prototyping
  • Interaktívne prepojovanie obrazoviek
  • Prepájanie obrazoviek pomocou objektov
  • Panel Interaction – udalosti Tap, Drag, Keys, Voice
  • Panel Action – Transition, Auto-animate, Hyperlink, Scroll, Overlay…

Export

  • Prehľad možností exportu – JPG, PNG, SWF, PDF, icons
  • Export objektov vs. Export artboardov
  • Označenie assetu pre export
  • Dávkový export 

Adobe Dreamweaver I.+II. – rozšírený softvérový tréning so zameraním na tvorbu webstránok HTML, CSS a Bootstrap

ZAČÍNAME

  • Základné pojmy a vzťahy – DW workflow
  • Začíname – Pracovné rozhranie – základný prehľad
  • Založenie webového projektu
  • Panely Files, Insert a Properties
  • Správa zdrojov v paneli Files
  • Základné vlastnosti 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
  • Písanie textov HTML značkami v režime Code
  • Vloženie špeciálnych znakov

TABUĽKY

  • Vkladanie tabuliek do stránok HTML – panel Insert
  • Úpravy tabuliek v režimoch Design a Code
  • Vkladanie obsahov do tabuliek

OBRÁZKY A EXTERNÉ MÉDIÁ

  • Vkladanie externých obsahov z panelu Insert > HTML:
    • obrázky – JPG, PNG, SVG, GIF
    • videa – mp4 (H264)
    • audia – mp3, wav
    • objekty .OAM

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

ZÁKLADY CSS ŠTÝLOV V PRAXI

  • Koncept práce s CSS v Dreamweaveri – panel CSS Designer
  • Aplikovanie CSS štýlov na HTML elementy:
    • Predefinovanie východzieho vzhľadu HTML tagov
    • Vytváranie vlastných CSS štýlov – riadkové elementy (ID, CLASS)
    • Vytváranie vlastných CSS štýlov – blokové elementy (ID, CLASS)
  • Nové štýly v jazyku CSS3 – tieň, zaoblenie rohov, stĺpce, prechody

KONTAJNERY DIV

  • O kontajneroch DIV
  • Kontajnery DIV typu ID (unikátne)
  • Kontajnery DIV typu CLASS (Znovupoužiteľné)
  • Nové štruktúrne HTML5 značky pre layout – header, menu, aside, article, footer

FRAMEWORK BOOTSTRAP V APLIKÁCII DREAMWEAVER

  • O frameworku Bootstrap
  • Možnosti tvorby responzívnych layoutov pomocou Bootstrap
  • Vytvorenie projektu Bootstrap – iniciácia framewworku
    • Kopírovanie závislých súborov Bootstrapu – Depended files
  • Panel Insert > Bootstrap components:
    • responzívny layout pomocou fluid kontajnerov a stĺpcov na mriežke Bootstrapu
    • responzívne objekty Jumbotron, Cards, Image, Video, Nav, Buttons…
    • ďalšie objekty Bootstrapu – Panel Snippets
  • Vkladanie HTML elementov do layoutu Bootstrap
  • Editácia východzích vlastností elementov pomocou CSS štýlov
  • Ďalšie objekty a kódy na www.getbootstrap.com

MANAŽMENT A PUBLIKOVANIE WEBOVÉHO SÍDLA

  • O odosielaní miestneho webu na internet pomocou Dreamweavera
  • Nastavenia prístupu na server pomocou protokolu FTP – definovanie servera
  • Synchronizácia miestneho a vzdialeného webu – remote server
  • Ukážka uploadovania sídla na web – správa v Dreamweaveri

Základy práce v redakčných systémoch WordPress I.

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

  • Projekt budovania kompletnej webovej stránky pre firmu počas celého vzdelávania – najprv vytvoríme wireframe produktu v Adobe XD a následne ho postupne prakticky vytvoríme v Adobe Dreamweaveri pomocou HTML, CSS a knižníc frameworku Bootstrap a jQuery. Projekt bude obsahovať aj multimédiá (audio, video, youtube, google mapy) s kompletným exportom a nasadením celého sídla na webhosting

Forma záverečnej skúšky

  • záverečný test (teórie, požadovaná úspešnosť 85 %)
  • obhajoba záverečnej práce na vlastnä tému – kompletná webstránka vo frameworku Bootstrap

Š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

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.

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