22.1.2014 9:00

Záverečné prezentácie projektov 22.1.2014 v čase od 9:00 do 9:30

22.1.2014 9:30

Záverečné prezentácie projektov 22.1.2014 v čase od 9:30 do 10:00

22.1.2014 10:00

Záverečné prezentácie projektov 22.1.2014 v čase od 10:00 do 10:30

22.1.2014 10:30

Záverečné prezentácie projektov 22.1.2014 v čase od 10:30 do 11:00

22.1.2014 11:00

Záverečné prezentácie projektov 22.1.2014 v čase od 11:00 do 11:30

22.1.2014 11:30

Záverečné prezentácie projektov 22.1.2014 v čase od 11:30 do 12:00

22.1.2014 13:00

Záverečné prezentácie projektov 22.1.2014 v čase od 13:00 do 13:30

22.1.2014 13:30

Záverečné prezentácie projektov 22.1.2014 v čase od 13:30 do 14:00

22.1.2014 14:00

Záverečné prezentácie projektov 22.1.2014 v čase od 14:00 do 14:30

22.1.2014 14:30

Záverečné prezentácie projektov 22.1.2014 v čase od 14:30 do 15:00

23.1.2014 9:00

Záverečné prezentácie projektov 23.1.2014 v čase od 9:00 do 9:30

23.1.2014 9:30

Záverečné prezentácie projektov 23.1.2014 v čase od 9:30 do 10:00

23.1.2014 10:00

Záverečné prezentácie projektov 23.1.2014 v čase od 10:00 do 10:30

23.1.2014 10:30

Záverečné prezentácie projektov 23.1.2014 v čase od 10:30 do 11:00

23.1.2014 11:00

Záverečné prezentácie projektov 23.1.2014 v čase od 11:00 do 11:30

23.1.2014 11:30

Záverečné prezentácie projektov 23.1.2014 v čase od 11:30 do 12:00

23.1.2014 13:00

Záverečné prezentácie projektov 23.1.2014 v čase od 13:00 do 13:30

23.1.2014 13:30

Záverečné prezentácie projektov 23.1.2014 v čase od 13:30 do 14:00

23.1.2014 14:00

Záverečné prezentácie projektov 23.1.2014 v čase od 14:00 do 14:30

23.1.2014 14:30

Záverečné prezentácie projektov 23.1.2014 v čase od 14:30 do 15:00

RIA: GRAFVIEWER

Aplikácia pre vstupné dáta vykresli graf.

RIA: FOTOGALÉRIA

Naprogramovať vlastnú fotogalériu v Javascripte.

RIA: TrafMa HRA

Naprogramujte v Javascripte minihru, ktorej pointou bude mierenie a strieľanie guličkou do objektov.

RIA: VyhniSa HRA

Naprogramujte v Javascripte minihru, ktorej pointou bude uhýbanie sa, poprípade rozhýbanie, pred pohybujúcim sa objektom.

RIA: Hypotekárna Kalkulačka

Naprogramujte kalkulačku.

RIA: Kalendárium

Naprogramujte v Javascripte aplikáciu, ktorá bude zobrazovať kalendár.

RIA: ChyťMa HRA

Naprogramujte v Javascriptet minihru, ktorej pointa je v chytaní objektov.

RIA: (náročnejšie) Interaktívne video

Naprogramujte v Javascripte aplikáciu, ktorá bude prehrávať videá a zároveň interaktívne videá, ktoré po prehratí zvolenej pasáže dajú používateľovi možnosť ako má video ďalej pokračovať.

RIA: Voľná téma

Vymyslite si vlastné zadanie pre RIA. Pošlite ho Kamilovi na schválenie.

Téma: Umelecký web

Pri umeleckom webe je možné porušiť asi všetky pravidlá. Návštevníkov nie je nutné si udržiavať, predpokladá sa, že sú dostatočne motivovaní, a preto sa dôraz kladie hlavne na originalitu, hravosť, niekedy až provokáciu. V prípade tejto témy bude nutné do návrhu webu zapracovať nie len hlavnú stránku ale aj 1-2 podstránky, pretože u umeleckého webu sa často výrazne líšia. Príklady hľadajte medzi hudobníkmi či dizajnérmi.

Téma: Luxusná značka

Web luxusnej značky buduje predovšetkým imidž, textové informácie sú druhoradé. Veľký priestor sa dáva obrázkom a celkovému vytváraniu atmosféry a budovaniu dojmu. Často sa zdôrazňuje tradícia a exkluzivita. Klientská základňa je často úzko vyprofilovaná. Príklady môžeme nájsť medzi drahými autami, hodinkami, šperkami ale aj hotelmi či kúpeľmi.

Téma: Komerčný web

Komerčne orientovaný web je kompromisom medzi širokým záberom korporátneho webu a úzkou profiláciou luxusnej značky. Dôraz sa kladie na promované produkty, ich atraktívne vlastnosti a na budovanie vizuálnej identity značky. Nemýľte si takýto web s eshopom. Ide tu síce v konečnom dôsledku o predaje, ale takýto web slúži skôr ako interaktívna reklama produktov danej značky. Príkladmi sú weby značiek ako Samsung, Apple, Heineken alebo Specialized, čiže produkty, ktore nie sú uplne pre každého, ale zase nie sú len pre vyvolených.

Téma: Korporátny web

Korporátny web je silne orientovaný na široké spektrum informácií, dizajn ustupuje do úzadia, dôraz sa kladie na text a nie na imidž. Korporátne orientované weby majú napríklad banky, poisťovne, telekomunikační operátori a podobné spoločnosti, ktorých klienti zasahujú do všetkých vekových a spoločenských skupín.

Mood board

Koláž inšpirácií pre dizajn vášho webu, ktorá slúži ako odrazový mostík pre ďalšiu prácu.

Patrí medzi povinné aktivity. Nezabudnite odovzdať do 13.10.2013.

Bonus z cvičení

Bonusové úlohy

Logo

Vytvorte logo pre vášho klienta. Odovzdaný ZIP obsahuje logo v krivkách (SVG) a v rastri (PNG)

Dizajn webu

Navrhnite dizajn webstránky v súlade so svojou témou, dizajn obsahuje homepage a minimálne 1 podstránku. Odovzdané PDF obsahuje export dizajnu z grafického editora (nie screenshot). Ak váš návrh stránky obsahuje aj zaujímavo riešené menu, obrázkovú slideshow alebo niečo iné dynamické, dajte do PDF náhľad viacerých fáz webu, aby si klient vedel spraviť predstavu o tom už teraz, keď ešte nie je dizajn implementovaný. Súčasťou návrhu je aj responsive design - dizajn stránky pre zariadenie s menším rozlíšením (napr. mobil alebo tablet) - aspoň jedna zmena v rozložení alebo vo vzhľade prvkov stránky.

Patrí medzi povinné aktivity.

Web stránka

Dizajn narežte a prepracujte do podoby funkčnej webstránky postavenej na XHTML/CSS. Implementovaný web musí byť W3C validný a interaktívne prvky v ňom (slideshow, menu,..) reálne fungujú. Odovzdaný ZIP obsahuje HTML kód a všetky potrebné štýly a obrázky a ide spustiť lokálne bez nutnosti web servera.

Patrí medzi povinné aktivity.

Požiadavky:

• webstránka musí byť HTML 5 a CSS 3 validná (-webkit-, -opera-, -moz- povolené) (2b)
• musí zodpovedat grafickému návrhu (2b)
• rovnaký vzhľad webstránky v najnovších verziách Mozilla Firefox, Opera, Chrome, Safari a IE 10 (3b)
• klaďte dôraz na sémantiku a nové sémantické tagy v HTML 5 - nav, header, footer, správne zanorenie nadpisov, title atribút na linkách, alt v obrázkoch... (2b)
• čo najmenší HTML markup (1b)

Mobilná verzia webu

Implementujte dizajn webu pre mobilné zariadenia (responsive design) pomocou CSS. Odovzdaný ZIP obsahuje HTML kód a všetky potrebné štýly a obrázky a ide spustiť lokálne bez nutnosti web servera.

Požiadavky:

• mobilná verzia webu musí byť zakomponovaná priamo do webstránky (nie ako nová stránka) (1b)
• musí zodpovedať grafickému návrhu (1b)
• musí byť HTML 5 a CSS 3 validná (-webkit-, -opera-, -moz- povolené) (1b)
• použite CSS media queries, pri použití CSS frameworku, ktorý media queries podporuje je nutné aj vami samostatne implementované použitie aspoň na 1 elemente (2b)

Pokročilá internetová aplikácia

Implementujte jednoduchú RIA aplikáciu použitím technológií ako Flash alebo HTML5, JavaScript či jQuery. Aplikáciu zabudujte do navrhnutého webu. Snažte sa o dizajnové prepojenie s webom a tiež aj aby obsah aplikácie súvisel s témou, ktorú ste si vybrali. Odovzdaný ZIP obsahuje lokálne spustiteľnú webstránku so zabudovanou aplikáciou.

Interaktívny 3D model na webe

Pomocou WebGL zobrazte na webe interaktívny 3D model. Model musí byť načítaný a otextúrovaný. Za interakciu sa nepovažuje pohyb kamery. Myslí sa tým napríklad animácia modelu reagujúca na klik alebo pohyb myšou. Môže ísť napríklad aj o procedurálnu animáciu (objekty utekajú pred myšou). Opäť platí, že sa snažte o zhodu s témou projektu. Odovzdaný ZIP obsahuje webstránku so zabudovaným interaktívnym 3D modelom a README file s popisom interaktivity a ovládania.

Midterm

Final test

Bonus z prednášky