Odbor AKR3 je specializačním oborem digitálního designu. Implementuje teoretické znalosti ze základních grafických designérských oborů a rozšiřuje je o oblast specializovaného navrhování a publikování – pro webovou stránku. Absolvent oboru Webdesign a tvorba webstránek tedy bude ovládat specifika a principy webového designu, uživatelskou přístupnost rozhraní webových stránek a pomocí editoru pro tvorbu webstránek v jazycích HTML5 a CSS3 + frameworků Bootstrap a jQuery – v Adobe Dreamweaveru – se naučí prakticky vytvářet responzivní sídla s interaktivními objekty a multimédii. Zároveň se seznámí také se základní tvorbou a správou webstránek v redakčním systému WordPress.

Uvedený akreditovaný odbor primárně vyučujeme ve dvojici programů Adobe XD + Adobe Dreamweaver. V případě zájmu je po dohodě možnost výuky v alternativním softwaru – Adobe Figma (UX/UI)Brackets (HTML/CSS).

INFORMACE

Organizační forma výuky: Kombinovaná, viceformní (PREZENČNĚ V UČEBNĚ nebo PREZENČNĚ ONLINE + DISTANČNĚ v online učebně mLearning LMS)

  • PREZENČNĚ V UČEBNĚ nebo PREZENČNĚ ONLINE – přednášky, nácvik, demonstrace, cvičení, designové rozbory praktických projektů, tipy a triky, konzultace, otázky a odpovědi
  • DISTANČNĚ V ONLINE UČEBNĚ LMS – teoretické předměty, podrobné videokurzy – kompletní přehledy teoretických předmětů a videokurzů

Požadované vstupní vzdělání

  • Minimálně SŠ vzdělání, obvyklá práce s PC
  • Vhodné pro začátečníka v grafice a designu: ano

Jazykové prostředí

  • Během prezenční výuky: čeština nebo slovenština
  • Online systém: čeština a slovenština (teorie), angličtina (videokurzy)

Metody a formy výuky

  • Teoretická příprava v online učebně
  • Startovací a pokročilá softwarová školení v online učebně
  • Přednášky a praktický výcvik prezenčně v učebně nebo prezenčně online
  • Praktické cvičení a zadání (kombinovane)
  • Pokročilá témata a techniky, diskuze (kombinovaná)
  • Podrobněji o formách vzdělávání v sekci: >> Formy vzdělávání

Ceny a přihláška

Rozsah a termíny

  • Rozsah kurzu: 48,00 hodin / 2-5 týdnů (dle intenzity střetek)
  • Vyhlášení termínů: veřejné termíny nebo individuálně dle zájmu, na míru
  • Slevy za více oborů: ano, dohodou

Rozvrh výuky

  • 1 týden: Přístup do vzdělávacího systému, přípravné kurzy, teorie, předměty – distanční LMS
  • 2. týden: Praxe a dovednosti práce v aplikacích – prezenčně + studium v online učebně a domácí úkoly
  • 3. týden: Řešení praktických úkolů a projektů – prezenčně + studium v online učebně a domácí úkoly
  • 4. týden: Řešení praktických úkolů a projektů – prezenčně + studium v online učebně a domácí úkoly
  • 5. týden: Vypracování projektu, závěrečný test, obhajoba závěrečné práce

Poznámka: rozvrh je přizpůsobitelný požadavkům účastníků, pokud se celá skupina kompromisně dohodne na úvodním online setkáni.

UČEBNÍ OSNOVY A PLÁNY

AKR3: Webdesign a tvorba webstránek

Jazyk HTML5

  • Co je HTML?
  • Základní struktura webových stránek
  • Základní HTML5 tagy hlavičky –  HTML, HEAD, !DOCTYPE, TITLE, DESCRIPTION, META, LINK, SCRIPT
  • Základní struktúrní HTML5 tagy – BODY, DIV, HEADER, MENU, ASIDE, FOOTER
  • Základní obsahové HTML5 tagy – LINK, PARAGRAPH, HEADING, IMAGE, AUDIO, VIDEO

Co jsou CSS 3 (kaskádové styly)

  • Styly CSS a jejích vztah k HTML tagům
  • Styly pro definování elementů – blokové prvky
  • Styly pro definování elementů – řádkové prvky
  • Styly pro odkazy
  • Styly pro textové prvky a titulky
  • Typografická pravidla – specifiká pro web
  • Rozvržení pomocí DIV kontejnerů
  • Tŕídy CLASS a ID
  • Boxy a okraje – Box model
  • Responzivní vlastnosti DIV kontejnerů a jejích obsahu

Principy a specifika webdesignu

  • Co je webdesign – specifika designování pro webový prohlížeč
  • Ještě dříve než začneme vyrábět – design & prototyping
  • Principy UX/UI s ohledem na webové stránky a obsahy
  • UI: Vizuální složka rozhraní produktu – design, layout
  • UX: Uživatelská složka rozhraní produktu – struktura, navigace, uživatelská přístupnost
  • Teorie interakce pro produkty na různých obrazovkách
  • Responzivní webdesign – principy, specifika
  • Teorie multimédií – technologické a funkční principy
  • Software a vývojová prostředí pro tvorbu webových stránek
  • Praktická doporučení

Adobe XD / Figma I.+II. – rozšířený softwarový trénink

Rozhraní: Design (XD) / Draft (Figma)

  • Vytváření nového projektu a nastavení jeho vlastností
  • Návrhové plochy – Artboards
  • Zoming a navigace v dokumentu
  • Nástroj Text
  • Základní nástroje pro geometrické tvary
  • Nástroj pero
  • Kombinování tvarů
  • Barvy, přechody, výplně
  • Import grafiky – bitmapy, vektory, nativní soubory AI, PS (XD)
  • Management objektov  a štýlov – panely Datové zdroje, Vrstvy
  • Komponenty – principy, tvorba, využití
  • Animování prvků designu

Rzhraní: Protoype (XD) / Wireframing (Figma)

  • Jak funguje prototypování,
  • Spojování obrazovek,
  • Propojení obrazovek pomocí objektů,
  • Možnosti časování animací a přechodů,

Speciální funkce pro návrh a prototypování

  • UI Kits – hotové ikony prvků a rozhraní – Android, iOS, Windows,
  • Komponenty – koncept, práce,
  • Menu pluginů a rozšíření,
  • Export obsahu,

Ukázka prototypu webu od úplných základů až po funkční prototyp a export.

Adobe Dreamweaver I.+II.

ZAČÍNÁME

  • Základní pojmy a vztahy
  • Začínáme
  • Úvodní obrazovka
  • Základní přehled pracovního rozhraní
  • Vytvoření prvního webu
  • Panely Soubory, Vložit a Vlastnosti
  • Vytvoření webu
  • Správa zdrojů na panelu Soubory
  • Určení základních vlastností stránky
  • Vložení názvu stránky a meta tagů do záhlaví
  • Úpravy panelů a používání ploch v aplikaci Dreamweaver

TEXTY

  • Psaní textů v režimu návrhu,
  • Vložení textu z jiných aplikací,
  • Formátování textů 1 – titulky,
  • Formátování textů 2 – odstavce,
  • Formátování textů 3 – seznamy,
  • Sledování práce v režimu Kód,
  • Vkládání speciálních znaků,

TABULKY

  • Vkládání tabulek do HTML stránek,
  • Opravy tabulek,
  • Vkládání obsahu do tabulek,

OBRÁZKY A MÉDIA

  • Formáty obrázků,
  • Vkládání obrázků,
  • Úpravy obrázků v aplikaci Dreamweaver,
  • Vložení videa na stránku,
  • Vložení objektu OAM na stránku,

ODKAZY A ODKAZY

  • Relativní a absolutní odkazy
  • Relativní odkazy a cesty v sídle aplikace DreamweaverS
  • hoda odkazů s textem a obrazy
  • Absolutní odkazy na soubory
  • E-mailové odkazy

ZÁKLADY STYLŮ CSS V PRAXI

  • Zkoukněte, jak fungují kaskádové styly
  • Kaskádové styly v aplikaci Dreamweaver
  • Předefinování tagů HTML
  • Přiřiři vytváření vlastních stylů – čárové prvky
  • Vytváření vlastních stylů – blokové prvky
  • Nové styly CSS3 – stín, zaoblení rohů, sloupce, přechody

Kontejnery LAYOUTO DIV

  • Ukázky pro vytváření layoutů z DIV kontejnerů
  • Layoutová struktura z DIV kontejnerů – ID
  • Opakovaně použitelné kontejnery DIV – CLASS

ROZHRANÍ BOOTSTRAP V APLIKACI DREAMWEAVER

  • O frameworku Bootstrap,
  • Možnosti tvorby responzivních layoutů a objektů,
  • Panel Bootstrap components – Responzivní kontejnery a mřížka,
  • Panel Bootstrap components – Jumbotron, Cards a další,
  • Panel Snippets / Výstřižky,
  • Media Query,
  • Vkládání HTML elementů do layoutu Bootstrap,
  • Formátování elementů pomocí CSS stylů,
  • Další objekty a kódy na www.getbootstrap.com

MANAGEMENT A PUBLIKOVÁNÍ WEBU

  • Propojení stránkek na webu,
  • Informace o odeslání lokálního webového místa na internet pomocí Dreamweaveru,
  • Nastavení přístupu FTP k serveru,
  • Synchronizace lokálních a vzdálených webů,
  • Ukázka nahrání webu na web – zpráva aplikace Dreamweaver,

Editace a editace redakčního systému WordPress CMS I.+II.

  • Doména a hosting pro web,
  • Možnosti hotové instalace WordPressu,
  • Nainstalujte si vybrané téma do WordPress,
  • Seznamte se s rozhraním – práce v prostředí pro správu obsahu,
  • Základní nastavení wordpressu,
  • Ponuka Přizpůsobení,
  • Články ,Kategorie, Stránky a Widgety,
  • Pluginy a rozšíření,
  • Nahrávání a aktualizace obsahu,

Praktická a projektová část

  • Návrh a výroba kompletního webu v responzivním frameworku Bootstrap.

Forma závěrečné zkoušky

  • závěrečný test (požadovaná úspěšnost 85%) + obhajoba závěrečné práce (vytvořená webstránka)

Studijní materiály

  • interaktivní přednášky, demonstrace, simulace, elektronické testy, podrobné videokurzy o software (slovensky a anglicky), odborná školení
  • >> Přejít do online učebny

Bibliografie: (všechny publikace k zapůjčení účastníkům):

Software pro studium našich kurzů:

  • ADOBE: Na  stránce www.adobe.com si  nejprve vytvořte bezplatný účet Adobe ID. Jako účastníci řádného státem akreditovaného studia máte nárok na zakoupení studentské verze Creative Cloud s kompletní funkčností!  Ušetříte tak až 65% z ceny za celý rok!
  • V případě oboru AKR3: Návrh webu a vývoj webových stránek si stáhněte a nainstalujte aplikaci Adobe XD a Dreamweaver z aplikace Creative Cloud.

VÍCE INFO:
Jaroslav Verlík
tel.: 0703 351 198
email: info@mlearning.cz