Ivana
Uhlíková

WEGA - Webovská grafika 2014

Predmet je zameraný na vytvorenie grafickej prezentácie na internete.

Na prednáškach sa študenti oboznámia s teoretickým zázemím mnohých intuitívne používaných princípov vizuálnej komunikácie a pochopia, ako ľudia vnímajú grafické informácie, alebo ako čítajú web stránky. Získané poznatky študentom pomôžu navrhnúť úspešné webové prezentácie.

Praktická časť predmetu simuluje skutočný svet dizajnéra, ktorého úlohou je vytvoriť webovú prezentáciu fiktívnej značky. Úlohou je navrhnúť logo, dizajn stránky a dizajn microsite. Následne je nutné tento dizajn implementovať a vytvoriť funkčnú web stránku. Web by mal obsahovať aj nejakú pokročilú aplikáciu a 3D model. Vďaka praktickej časti sa študent zorientuje v rýchlo sa rozvíjajúcej oblasti webových technológií, ako napr. HTML, CSS, JavaScript a WebGL.

Cvičenia

  1. Týždeň 22.9.2014 - 26.9.2014
    Úvodné informácie o cvičeniach, zadaniach a bodovaní v pdf (nové posunuté deadliny)
  2. Týždeň 29.9.2014 - 3.10.2014 - Inkscape - prezentácia v pdf
    Práca s vektorovým grafickým editorom
    Bonusová úloha za 0,5 boda: Urobte logo na jednu z nasledujúcich tém:
    • Firma zaoberajúca sa tvorbou web stránok
    • Reštaurácia
    • Cirkus
    Použite pri tom tieto techniky:
    • Práca s objektmi a farbami
    • Práca s vrcholmi
    • Vektorizovanie bitmapy a úprava vrcholov
    • Tieňovanie do priesvitna (odlesky alebo tiene) alebo medzi dvomi farbami
    • Booleovske operácie
    • Filtre alebo textúry
    Odovzdávanie na cvičeniach alebo mailom na: uhlikova@sccg.sk do 10.10.2014. Mailom je nutné poslať logo v png a svg formáte. Pre uloženie loga vo formáte png nepoužívajte "uložiť ako" ale v menu File/Súbor vyberte Export Bitmap/Exportovať Bitmapu. V opačnom prípade sa niektoré efekty ako blur, filtre, priesvitnosť a iné môžu stratiť alebo získať iný vzhľad.

    Návody a tutoriály:
  3. Týždeň 6.10.2014 - 10.10.2014 - GIMP - prezentácia v pdf
    Práca s rastrovým grafickým editorom
    Bonusová úloha za 0,5 boda:

    Zlepte tieto 2 fotky: kone.jpg a pozadie.jpg. Koníkom treba odstrániť pozadie a vložiť ich do druhej fotky (pozadie.jpg). Výsledok by mal vyzerať prirodzene. Pozadie treba preklopiť, aby sedeli tiene. Ďalej treba niečo vyretušovať, niečo rozmazať, doladiť farebnosť jednej a druhej fotky, úmerne zmeniť velkosti, ...

    Odovzdávanie na cvičeniach alebo mailom na: uhlikova@sccg.sk do 17.10.2014.

    Návody a tutoriály:
  4. Týždeň 13.10.2014 - 17.10.2014
    Wireframe, použitie gridov, pravidlo tretín, zlatý rez, narezanie dizajnu pre web
  5. Týždeň 20.10.2014 - 24.10.2014
    Novinky v HTML5 a CSS3, tvorba HTML šablóny
  6. Týždeň 27.10.2014 - 31.10.2014
    Typografia, Responsive web, CSS animácie, pravidlá napĺňania obsahu, základy seo
    Bonusová úloha:
    - Vytvorte 3 úrovňové vysúvacie menu bez použitia Javascriptu,
    iba pomocou css (1b)
    - Aplikujte na menu css animáciu (0.5 boda)
    Odovzdávajte mailom Martinovi Veselovi, do predmetu poprosím prefix WEGA, deadline cvicenie + 7 dní.
  7. Týždeň 3.11.2014 - 7.11.2014 - JavaScript
    Úvod a základná syntax JavaScriptu, jednoduchý program Paint v JavaScripte
    Štúdijné materiály: 

  8. Týždeň 10.11.2014 - 14.11.2014
    JavaScriptu, jednoduchý program Paint v JavaScripte. (príklad zip)
    Bonusová úloha (1.5b):
    - Rozšírte príklad Paint z cvičení o nasledujúcu funkčnosť:
    • paleta farieb obsahuje 256 farieb
    • určovanie farby pozadia, farby výplne a farby pera
    • gumovanie farbou pozadia
    • nastavovanie vzoru a veľkosti pre gumu (obdĺžnik, elipsa)
    • kreslenie obdĺžnikov a elíps podľa vybraných farieb
    • kreslenie lomených čiar s rôznymi vlastnostami (využitie lineCap a lineJoin)

    Odovzdávajte mailom na stanislav.stanek@gmail.com, predmet správy s prefixom WEGA, do 25.11.2014.

  9. Týždeň 18.11.2014 - 21.11.2014 - jQuery
    Úvod do jQuery.
    Štúdijné materiály: 
  10. Týždeň:
  11. Týždeň:
    • 1.12.2014 - WebGL
    • 2.12.2014 - 5.12.2014 - Three.js - JavaScriptová knižnica pre uľahčenie práce s WebGL
      Knižnica Three.js
      - cesta k addonu do Blendra pre export modelov vo formáte .js:
      mrdoob-three.js-f396baf/utils/exporters/blender

      stemkoski.github.io/Three.js - množstvo príkladov využitia knižnice Three.js
      Materials - Solid
      Color Explorer
      Načítanie modelu prostredníctvom Three.js
      Model s animáciou

      Bonusová úloha za 1 bod:

      Vytvorte interaktívnu scénu podľa nasledujúcich inštrukcií:

      • stiahnite si nejaký Blender model (najlepšie už aj s preddefinovanou animáciou - napr.: Monkey animation) alebo si vytvorte vlastný model s animáciou
      • model z Blendra exportujte vo formáte .js (do Blendra treba pridať vyššie spomenutý addon) aj s "Morph animation"
      • exportovaný model načítajte namiesto modelu v príklade z cvičení - animácia by mala fungovať
      • pridajte zapínanie a vypínanie animácie reagujúce na klik myšou na nejaký objekt - môže to byť načítaný model alebo iný pridaný predmet (Simple Mouse Hovering, Mouse Click)
      • do scény pridajte bodové svetlo, ktoré vrhá tiene: Spotlights and Shadow
      • zmeňte okolie - použite "skybox" z tohto: príkladu, ale s vlastnou textúrou

      Odovzdávanie mailom na: uhlikova@sccg.sk do 15.12.2014.

  12. Týždeň:
    • 8.12.2014 - Three.js
    • 9.12.2014 - 12.12.2014 Konzultácie po dohode emailom (je možné dohodnúť si aj iný termín konzultácie)
  13. Týždeň 15.12.2014 - 19.12.2014
    Konzultácie po dohode emailom (je možné dohodnúť si aj iný termín konzultácie)

Stránka predmetu: wega.nais.sk

Cvičenia:

Ak máte záujem o konzultácie, pošlite mi mail s tým, čo chcete konzultovať.

Moja mailová adresa: uhlikova@sccg.sk

. . . . . . . . . . . . . . . .