MASARYKOVA UNIVERZITA F}w¡¢£¤¥¦§¨ AKULTA INFORMATIKY !"#$%&'()+,-./012345<yA| Archív Fotoateliéru DIPLOMOVÁ PRÁCA Bc. Štefan Sakala Brno, jar 2014 KÓPIA LISTU ZADANIA DIPLOMOVEJ PRÁCE KÓPIA LISTU ZADANIA DIPLOMOVEJ PRÁCE ii Prehlásenie Prehlasujem, že táto diplomová práca je mojím pôvodným autorským die- lom, ktoré som vypracoval samostatne. Všetky zdroje, pramene a literatúru, ktoré som pri vypracovaní používal alebo z nich ˇcerpal,v práci riadne citu- jem s uvedením úplného odkazu na príslušný zdroj. Vedúci práce: Mgr. JiˇríVíšek Konzultant: RNDr. Jaroslav Pelikán, Ph.D. iii Pod’akovanie Dakujemˇ Mgr. JiˇrímuVíškovi a RNDr. Jaroslavovi Pelikánovi, Ph.D. za od- borné vedenie diplomovej práce a za cenné rady. Dalejˇ d’akujem všetkým, ktorí mi verili a ešte viac tým, ktorí nie. V neposlednom rade patrí azda najväˇcšiavd’aka mojej rodine a priatel’om, menovite Bc. Martinovi Makar- skému, Márii Straskej a Mgr. Jakubovi Zajacovi. iv Zhrnutie Diplomová práca pozostáva z dvoch hlavných ˇcastí.Prvou ˇcast’ou je vý- voj webovej aplikácie s využitím vzoru MVC. Aplikácia bude obsahovat’ kompletný archív prác študentov Fotografie I-III, spolu s možnost’ou pri- dávania d’alších roˇcníkov. Bude implementovaný odovzdávací systém prác pre študentov fotografie, ˇcímvzniká možnost’ konzultácie s vyuˇcujúcimuž poˇcaspráce. Druhá ˇcast’ práce, je vypracovanie 15 portrétnych štúdií, za úˇcelomvytvorenia študijného materiálu pre študentov Fotografie III. Tieto študijné materiály budú prístupné vo webovej aplikácii formou jednodu- chých návodov ako tieto práce reprodukovat’. Fyzický výstup obrazovej formy bude dostupný vo forme makety knihy formátu A4. v Kl’úˇcovéslová ASP.NET, digitální fotografie, fotografický ateliér, fotografický portrét, fra- mework, MVC, návrhový vzor, svetelná konštrukcia, webová aplikácia vi Obsah 1 Úvod ...................................3 1.1 Vol’ba témy . .3 1.2 Metodika práce . .3 1.3 Popis kapitol . .4 2 AGDaMM FI MU ............................5 2.1 Fotografický ateliér . .5 2.2 Priebeh výuky . .6 3 Webová aplikácia ............................7 3.1 Model klient-server . .7 3.2 Webová aplikácia . .7 3.3 Webová vs. Desktopová aplikácia . .8 3.4 Štruktútra webovej aplikácie . .9 4 Dostupné riešenia ........................... 10 4.1 Aplikaˇcnýframework . 10 4.2 Model-View-Controller . 11 4.2.1 Návrhový vzor . 11 4.2.2 Push vs. Pull . 11 4.3 Trojvrstvá architektúra . 12 4.4 Systémy pre správu obsahu . 12 5 Analýza a návrh systému ....................... 14 5.1 Funkˇcnéa nefunkˇcnépožiadavky . 14 5.2 Návrh dátovej štruktúry . 17 5.2.1 Užívatel’ . 18 5.2.2 Kurz . 19 5.2.3 Album . 19 5.2.4 Fotografia . 19 5.2.5 Komentár . 20 5.2.6 Informácie uˇcitel’a . 20 5.2.7 Udalosti v systéme . 20 6 Implementácia ............................. 21 1 6.1 Serverová strana . 21 6.1.1 .NET Framework . 21 6.1.2 ASP.NET MVC . 22 6.1.3 Knižnica ExifLib . 22 6.1.4 Autentizácia a autorizácia . 24 6.2 Databázová vrstva . 25 6.2.1 Microsoft SQL Server . 25 6.2.2 Entity Framework . 26 6.3 Užívatel’ské rozhranie . 28 6.3.1 Razor View Engine . 28 6.3.2 WebSecurity . 30 6.3.3 Bootstrap . 30 6.3.4 Internacionalizácia . 32 7 Nasadenie ................................ 34 8 Rozšírenie fotografického archívu .................. 36 8.1 Študijné materiály . 36 8.2 Štandardné úpravy . 37 9 Vlastné práce .............................. 38 9.1 9 pozícií bodového svetla . 38 9.2 Autoportrét . 39 9.3 Dva typy svetla a pohybová neostrost’ . 40 9.4 Dvojica zadných prieˇcnychsvetiel . 41 9.5 Dvojportrét a h´lbka ostrosti . 42 9.6 Nízky kl’úˇc. 43 9.7 Portrét dáždnikom . 44 9.8 Portrét so štvoricou svetiel . 45 9.9 Portrét so zadným efektovým svetlom . 46 9.10 Ciastoˇcnásiluetaˇ . 47 9.11 Spodné svetlo . 48 9.12 Štúdia ruky . 49 9.13 Trojportrét horným vel’koplošným svetlom . 50 9.14 Výrazné detaily hlavy . 51 9.15 Vysoký kl’úˇc . 52 9.16 Vlasový efekt . 53 10 Záver ................................... 54 2 1| Úvod 1.1 Vol’ba témy Výuka fotografie v ateliéri na Fakulte Informatiky zaˇcalav roku 2006. Po- ˇcasuplynulých rokov sa výuka rozšírila na trojicu predmetov, v ktorých študenti postupne získajú teoretické a praktické znalosti z oblasti fotografo- vania v ateliérovom prostredí. Výstupom každého semestra výuky je sada fotografických prác absolventov, ktoré však nie sú dostupné d’alším gene- ráciam. Práve to bolo prvou motiváciou, ktorá viedla k osloveniu vedenia fotografického ateliéru s myšlienkou vytvorenia systému, v ktorom by tieto práce boli dostupné d’alším študentom. Predmet VB044:Fotografie III je najmladším z tejto trojice. Medzi výuko- vými materiálmi absentuje súhrnná publikácia, ktorá by pomohla študen- tom poˇcasštúdia. Práve tento dôvod vedie k druhej ˇcastizadania diplomo- vej práce. Ciel’om je vytvorenie súhrnnej publikácie, ktorá pokrýva všetky témy, ktoré sú preberané poˇcasvýuky. Jedná sa o rozmanité svetelné kon- štrukcie, používané v portrétnej fotografii. 1.2 Metodika práce Vytvorenie online systému, ktorý by zastával archív fotografických prác, zaˇcaloanalýzou dostupných možností vhodných pre daný úˇcel.Následne bola zvolená platforma ASP.NET MVC, na ktorej bola implementovaná we- bová aplikácia archívu fotoatelíeru. Samotnému vývoju systému predchá- dzala analýza a návrh, vd’aka ktorej bola stanovená sada funkˇcnýcha ne- funkˇcnýchpožiadaviek na systém. Následne bol systém implementovaný pomocou vývojového prostredia Microsoft Visual Studio 2012, knižných publikácii a návodov vol’ne dostupných na internete. Pri tvorbe študijného materiálu bol využívaný fotografický atelíer na Fakulte Informatiky. S pomocou dostupnej svetelnej techniky boli postupne zostavené svetelné konštrukcie, ktoré sú preberané poˇcasvýuky. Po zosta- vení danej konštrukcie boli vytvorené vlastné fotografie, ktoré demonštrujú 3 1. ÚVOD preberané efekty v praxi. Vlastné fotografie boli vytvorené pomocou digi- tálnej jednookej zrkadlovky Nikon D7000 a objektívov NIKKOR 105mm f/2,8 a NIKKOR 50mm f/1.8. Následne boli fotografické práce upravené za pomoci software. 1.3 Popis kapitol Po úvodnej kapitole nasleduje kapitola 2, ktorá predstaví prostredie atelié- ru, v ktorom práca vznikla. Popíše jeho históriu, ˇcinnost’ a podrobnejšie ˇcitatel’ovi ozrejmí dôvody, ktoré viedli k zadaniu diplomovej práce. Tretia kapitola zastáva funkciu struˇcnéhoúvodu do problematiky. Ro- zoberá suˇcasnémožnosti webových aplikácií a ich porovnanie s deskto- povými. Porovnanie sumarizuje najväˇcšieklady a zápory oboch prístupov. Záverom kapitoly je vysvetlená základná štruktúra webovej aplikácie. Štvrtá kapitola je zameraná na základný prehl’ad dostupných riešení pre vývoj webovej aplikácie, ktorá má plnit’ úˇceldefinovaný zadaním. Po- pisuje návrhový vzor Model-View-Controller, ktorý je základom vyvinutej aplikácie. Záverom popisuje alternatívu k vývoju vlastného riešenia, ktorou sú systémy pre správu obsahu. Piata kapitola sa venuje analýze a návrhu webovej aplikácie Fotogra- fického informaˇcnéhosystému. Kapitola obsahuje diagram použitia a di- agram tried spolu so slovným opisom úˇcastníkov, respektíve entít, ktoré boli identifikované. Šiesta a siedma kapitola popisuje samotný vývoj a nasadenie apliká- cie. Podsekcie implementaˇcnejˇcastirozdel’ujú vývoj na serverovú, dátovú a prezentaˇcnúvrstvu. Opísané sú knižnice ˇciframeworky, ktoré aplikácia využíva. Kapitola osem a devät’ popisujú vytvorené študijné materiály, ktoré budú dostupné vo vyvinutej aplikácii. Najskôr boli zadefinované pojmy, dôležité k pochopeniu vytvorených materiálov. Deviata kapitola obsahuje 16 pod- sekcií, priˇcomkaždá z nich zastáva jednu svetelnú konštrukciu, ktoré boli v práci skúmané. 4 2| AGDaMM FI MU Cinnost’ˇ Ateliéru grafického dizajnu a Multimédií na Fakulte Informatiky zaˇcalav roku 1998 zlúˇceníms vyuˇcovanýmpredmetom Výtvarní infor- matika. Spoˇciatkuzaˇcalavýuka typografie, grafického dizajnu a písma v spolupráci s vyuˇcujúcimdoc. VítˇezslavomŠvalbachom. S rozvojom ate- liéru postupom ˇcasuvznikla špecializácia grafický dizajn, ktorý rozširuje znalosti študentov v danej oblasti a zapadá tak k štúdiu informatiky ako matematicko-technickej disciplíny. Postupné personálne rozširovanie umož- nilo vznik d’alších predmetov ako Základy vizuální komunikace, (Digi- tální) Fotografie, Výtvarná anatomie, Architektonický prostor a Výtvarný plenér. Ateliér sa d’alej venuje výstavnej ˇcinnosti,prezentácii tvorby jej štu- dentov, organizuje zájazdy na výstavy ˇciexkurzie a prispieva k rozvoju kultúrneho života v Brne. [7] 2.1 Fotografický ateliér Výuka fotografie na Fakulte Informatiky je v súˇcasnostivedená Mgr. Jiˇrím Víškom ako trojica nadväzujúcich kurzov Fotografie I,II,III. Úvodný kurz uvedie poslucháˇcado základov exponometrie, práce s farbou, základného ateliérového svietenia a vo forme praktických cviˇcení umožní vytvorit’ vlastný súbor fotografií. Pokraˇcovanievýuky je zamerané na pochopenie štylizaˇcnýchprvkov vo fotografii, prvé zoznámenie s figúrou, portrétnou fotografiou a špecifikám ako napríklad makrofotografia, mal’ovanie svetlom ˇcipohybová neostrost’. Závereˇcnýkurz je zameraný primárne na samostatnú prácu študentov v ateliéri v oblasti portrétnej fotografie. Poˇcasvýuky sú preberané historické a súˇcasnéštýly, ˇcisvetelné konštrukcie súvisiace s fotografovaním l’udí. Jedná sa o najmladší a najnároˇcnejšíkurz, ktorý absentuje súborné študijné materiály. Práve to viedlo k vytvoreniu študijných materiálov, ktoré popíšu 16 svetelných konštrukcií a štýlov v portrétnej fotografii pomocou svetel- ných diagramov, popisu práce v ateliéri a následných úprav. 5 2. AGDAMM FI MU 2.2 Priebeh výuky Výuka jednotlivých kurzov prebieha na Fakulte informatiky