Online vizualizace PSD

M ASARYKOVA UNIVERZITA FAKULTA INFORMATIKY

}

w A| y < 5 4 23 1 0 / -. , )+ ( %&' $ # !"        

Æ  

   


Online vizualizace PSD souboru˚ D IPLOMOVÁ PRÁCE

Bc. Zbynˇek Nedoma

Brno, jaro 2014

Prohlášení Prohlašuji, že tato diplomová práce je mým puvodním ˚ autorským dílem, které jsem vypracoval samostatnˇe. Všechny zdroje, prameny a literaturu, které jsem pˇri vypracování používal nebo z nich cˇ erpal, v práci rˇ ádnˇe cituji s uvedením úplného odkazu na pˇríslušný zdroj.

Vedoucí práce: Ing. RNDr. Barbora Bühnová, Ph.D. ii

Podˇekování Rád bych podˇekoval Ing. RNDr. Barboˇre Bühnové, Ph.D., vedoucí mé diplomové práce, za její rady a návrhy na vylepšení této práce. Dále bych rád podˇekoval správcum ˚ Adobe Photoshop fóra za jejich názory a rady pˇri vytváˇrení rasterizaˇcního skriptu. A nakonec bych rád podˇekoval kamarádum ˚ s kterými jsme mˇel možnost diskutovat uživatelské rozhraní, fungování aplikace ale i gramatiku práce.

iii

Shrnutí Cílem diplomové práce bylo navrhnout a vytvoˇrit webovou aplikaci, která umožní uživateli zobrazit obsah PSD souboru. ˚ Po zobrazení bude možno vytvoˇrit interaktivní prezentaci daného obsahu. Výstupem diplomové práce je text práce a zdrojové kódy. Aplikace je zatím v testovacím provozu, do kterého se zapojilo 420 osob z celého svˇeta. V prubˇ ˚ ehu testování bylo pˇrevedeno 730 souboru. ˚

iv

Klíˇcová slova PSD soubor, interaktivní prototyp, rasterizaˇcní skript, Adobe Photoshop

v

Obsah 1

2

3

4

5

6

Úvod . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.1 Cíl práce . . . . . . . . . . . . . . . . . . . . . . 1.2 Struktura práce . . . . . . . . . . . . . . . . . . Terminologie . . . . . . . . . . . . . . . . . . . . . . 2.1 Adobe Systems . . . . . . . . . . . . . . . . . . 2.1.1 Adobe Photoshop . . . . . . . . . . . . . 2.1.2 Photoshop Document . . . . . . . . . . 2.2 Interaktivní prototyp . . . . . . . . . . . . . . . Existující nástroje . . . . . . . . . . . . . . . . . . . . 3.1 Nástroje pro prototypování . . . . . . . . . . . 3.1.1 Marvelapp . . . . . . . . . . . . . . . . . 3.1.2 Easel . . . . . . . . . . . . . . . . . . . . 3.1.3 Axure RP . . . . . . . . . . . . . . . . . 3.2 Nástroje pro extrakci/editaci obrázku˚ . . . . . 3.2.1 Paint.NET . . . . . . . . . . . . . . . . . 3.2.2 Photopea . . . . . . . . . . . . . . . . . . ˇ Rešené problémy . . . . . . . . . . . . . . . . . . . . 4.1 Pˇredzpracování vstupního souboru . . . . . . . 4.2 Zpracování inteligentních objektu˚ . . . . . . . 4.3 Uchování informací o textových vrstvách . . . 4.4 Porovnání vstupního a zpracovaného souboru Nástroje použité pˇri vývoji . . . . . . . . . . . . . . 5.1 Serverové technologie . . . . . . . . . . . . . . 5.1.1 JavaEE . . . . . . . . . . . . . . . . . . . 5.1.2 Spring Framework . . . . . . . . . . . . 5.1.3 Java Persistence API . . . . . . . . . . . 5.1.4 MySQL . . . . . . . . . . . . . . . . . . . 5.1.5 Java PSD library . . . . . . . . . . . . . 5.2 Zobrazovací technologie . . . . . . . . . . . . . 5.2.1 Java Server Pages . . . . . . . . . . . . . 5.2.2 HTML . . . . . . . . . . . . . . . . . . . 5.2.3 jQuery . . . . . . . . . . . . . . . . . . . Vývoj . . . . . . . . . . . . . . . . . . . . . . . . . . . 6.1 Automatické pˇredzpracování souboru . . . . . 6.1.1 Pˇreposlání souboru k pˇredzpracování .

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

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

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

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

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

1 1 1 3 3 3 3 4 5 5 5 7 8 9 9 11 13 13 13 13 14 15 15 15 15 16 16 16 17 17 17 17 19 19 20 vi

6.1.2 Procházení vrstev . . . . . . . . . . . 6.1.3 Výkonnost . . . . . . . . . . . . . . . 6.1.4 Nová verze skriptu . . . . . . . . . . 6.1.5 Viditelnost vrstev . . . . . . . . . . . 6.2 Inteligentní objekty . . . . . . . . . . . . . . 6.3 Efekty, Masky a Prolnutí . . . . . . . . . . . 6.4 Textové vrstvy . . . . . . . . . . . . . . . . . 6.5 Porovnání po rasterizaci . . . . . . . . . . . 6.6 Databázový model . . . . . . . . . . . . . . 7 Uživatelské testování . . . . . . . . . . . . . . . 7.1 Nalezené problémy pˇri testování . . . . . . 8 Popis použití . . . . . . . . . . . . . . . . . . . . 8.1 Pˇrihlášení a registrace . . . . . . . . . . . . 8.2 Pˇredzpracování . . . . . . . . . . . . . . . . 8.3 Porovnání . . . . . . . . . . . . . . . . . . . 8.4 Prototypování . . . . . . . . . . . . . . . . . 9 Závˇer . . . . . . . . . . . . . . . . . . . . . . . . . 9.1 Budoucí rozšiˇritelnost . . . . . . . . . . . . 9.1.1 Komentování výsledného prototypu 9.1.2 Zlepšení zadávání odkazu˚ . . . . . . 9.1.3 Aktualizace nahraného souboru . . Literatura . . . . . . . . . . . . . . . . . . . . . . . . . Seznam zdrojových kódu˚ . . . . . . . . . . . . . . . Seznam obrázku˚ . . . . . . . . . . . . . . . . . . . .

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

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

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

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

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

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

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

21 23 24 25 27 29 30 33 33 35 35 36 36 36 37 38 40 40 40 41 41 42 44 45

vii

1 Úvod Adobe Photoshop je jedním z nejpoužívanˇejších programu˚ pro vytváˇrení a editaci grafických podkladu˚ webových stránek. Využívají ho jak grafici, tak i vývojáˇri, pˇri pˇrevodu˚ designu do funkˇcní stránky. Bohužel pokud vývojáˇr nevlastní licenci k tomuto programu, nemá žádnou možnost jak zjistit, co jeho PSD soubor obsahuje. Pokud by chtˇel prezentovat navržený design zákazníkovi, musí požádat nˇekoho s licencí na Adobe Photoshop, aby mu vyexportoval obrázky jednotlivých stránek. Ty pak muže ˚ využít jako podklady pro prototypovací nástroj.

1.1 Cíl práce Cílem práce je vytvoˇrit webovou aplikace, která umožní zobrazovat obsah PSD souboru. ˚ Obsah by mˇel být zobrazen po vrstvách, tak aby bylo možné s nimi nadále pracovat. Jednotlivé vrstvy i složky bude možno skrýt cˇ i zobrazit. Ze zvolených (viditelných) vrstev lze vytvorˇ it interaktivní prototyp. Po dokonˇcení prototypování bude nabídnuta možnost vygenerovat odkaz pro pˇrístup k tomuto prototypu.

1.2 Struktura práce První kapitola popisuje cíl práce, motivaci pro její vytvoˇrení a strukturu textové cˇ ásti práce. V druhé kapitole je pˇriblížena terminologie, kterou by mˇel cˇ tenáˇr znát pˇred pokraˇcováním cˇ tení zbytku práce. Na internetu již existují nástroje urˇcené k prototypování. Kapitola cˇ íslo tˇri popisuje vybrané nástroje. U každého z nich je uveden struˇcný popis, výhody a nevýhody pro použití. Druhá cˇ ást této kapitoly se zamˇerˇ uje na popis aplikací, které se dají použít k extrakci obrázku˚ z PSD souboru. ˚ Bˇehem vývoje této aplikace bylo potˇreba rˇ ešit složité problémy týkající se fungování celého projektu. V kapitole cˇ íslo cˇ tyˇri jsou jednotlivé problémy popsány. Pˇred samotným vývojem je nutné se rozhodnout, pomocí jakých 1

1. Ú VOD nástroju˚ bude projekt vyvíjen. Pátá kapitola popisuje jak serverové technologie, tak zobrazovací. Kapitola cˇ íslo šest popisuje rˇ ešení otázek, které byly položeny ve cˇ tvrté kapitole. Pˇrevážnˇe je zde rozebírán rasterizaˇcní skript s ukázkami jeho zdrojových kódu. Každý z kódu˚ je funkˇcnˇe popsán. Testování je jednou ze souˇcástí vývoje každé aplikace. V sedmé kapitole je popsáno jakým zpusobem ˚ byli osloveni testovací uživatelé a jak celé testování probíhalo. V osmé kapitole je rozepsán pruchod ˚ cˇ tyˇrmi hlavními cˇ ástmi aplikace. U každé z cˇ ástí je uveden ilustraˇcní obrázek, aby bylo možno lépe pochopil celkové fungování. Poslední kapitola práce sjednocuje výsledky dosažené touto prací a navrhuje možnosti budoucí rozšíˇritelnosti.

2

2 Terminologie Pro lepší pochopení zbytku práce budou v této kapitole pˇriblíženy nejduležitˇ ˚ ejší pojmy. Mezi nˇe patˇrí firma Adobe Systems, její produkty a interaktivní prototyp.

2.1 Adobe Systems Adobe Systems1 je americká softwarová spoleˇcnost zabývající se tvorbou programu˚ v oblasti poˇcítaˇcové grafiky. Svuj ˚ svˇetový vˇehlas si získala jednak díky standardum ˚ PostScript2 a Portable Document File3 spíše známém jako PDF, ale také jako tvurce ˚ programu˚ Adobe Pho4 5 toshop , Adobe Illustrator a mnoha dalších sloužících právˇe k práci s grafikou. 2.1.1 Adobe Photoshop Adobe Photoshop [1] [2] je grafický editor pro úpravu bitmapové grafiky, který byl vydán v únoru roku 1990 pro operaˇcní systém Mac OS. O šest let pozdˇeji byla vydána verze 4.0, dostupná už i pro operaˇcní systémy Microsoft Windows [3]. Od té doby do souˇcasnosti se stal nejlepším programem svého druhu na trhu a je každodennˇe využíván miliony uživatelu. ˚ Používá se pro úpravu fotek, vytváˇrení grafických návrhu˚ aplikací cˇ i webových stránek a pˇri malování. Soucˇ asná verze 14.0 má oznaˇcení Creative Cloud (CC)6 , což znamená že aplikace je poskytována v cloudu. 2.1.2 Photoshop Document PSD (Photoshop Document) je formát bezeztrátového uchovávání dat používaný programem Adobe Photoshop [4]. Tento grafický for1. 2. 3. 4. 5. 6.

http://www.adobe.com/cz/ http://www.adobe.com/products/postscript/ http://www.adobe.com/cz/products/acrobat/adobepdf.html http://www.adobe.com/cz/products/photoshop.html http://www.adobe.com/cz/products/illustrator.html http://www.adobe.com/cz/products/creativecloud.html

3

2. T ERMINOLOGIE mát umožnuje ˇ ukládat jednotlivé obrázkové a textové vrstvy, jejich efekty, masky, aj. Na rozdíl od formátu˚ PNG a JPEG jsou v nˇem uloženy i všechny pˇredchozí úpravy. Vrstvy si mužeme ˚ pˇredstavit jako na sebe naskládané pruhledné ˚ obrázky, které se navzájem pˇrekrývají a pˇres pruhledná ˚ místa je vidˇet obsah nižších vrstev.

2.2 Interaktivní prototyp Interaktivní prototyp si lze pˇredstavit jako maketu aplikace, pomocí níž se dá nasimulovat interakce uživatele na navrhovaném rozhraní. V pˇríkladu webové stránky by takový prototyp obsahoval odkazy na podstránky, animace, apod. Prototyp lze využít i pro testování s koncovým uživatelem ještˇe pˇred samotným vývojem. Informace z tohoto testování mohou být využity pro zlepšení puvodního ˚ návrhu. Klient díky prototypu získá konkrétní pˇredstavu o budoucí funkˇcnosti uživatelského rozhraní. Interaktivní prototyp lze využít pro odhalení nesrovnalostí pˇri analýze návrhu aplikace. Vytvoˇrení prototypu pˇrináší zákazníkovi urychlení vývoje jeho aplikace a snížení celkových nákladu. ˚

4

3 Existující nástroje Prototyp designu webové stránky cˇ i aplikace mužeme ˚ zákazníkovi pˇredstavit nˇekolika zpusoby. ˚ Nejjednodušším a nejlevnˇejším rˇ ešením se jeví vytvoˇrení obrázku˚ jednotlivých stránek a pˇríprava struˇcného vysvˇetlení jak vše funguje. Toto rˇ ešení je velice snadné, ale chybí mu jakákoliv interakce. Právˇe díky interakci však mužeme ˚ odhalit spoustu nesrovnalostí. Nároˇcnˇejší možností je využití prototypovacího nástroje, jehož pomocí lze pˇridat mezi jednotlivými obrázky odkazy a tím vytvoˇrit požadovanou interakci.

3.1 Nástroje pro prototypování Následující cˇ ást popisuje tˇri vybrané nástroje urˇcené pro prototypování. Každý z nich je struˇcnˇe popsán a jsou uvedeny jeho výhody a nevýhody. Na trhu existují desítky podobných nástroju. ˚ Bohužel ty profesionální nejsou nijak levné a zaˇcínající vývojáˇri si je urˇcitˇe nemohou pro svou práci dovolit. Oproti tomu volnˇe dostupným chybí nˇekteré možnosti, jak s prototypem pracovat. Pro srovnání byly vybrány nástroje z obou tˇechto skupin. 3.1.1 Marvelapp Aplikace Marvelapp1 patˇrí mezi jednodušší prototypovací nástroje. Je urˇcena pro vytváˇrení prototypu˚ designu mobilních zaˇrízení. Už v základní verzi nijak neomezuje uživatele v poˇctu vytvoˇrených prototypu. ˚ Pro nahrávání vstupních dat prototypy je využívána externí aplikace Dropbox2 a úˇcet uživatele. Každý prototyp má unikátní odkaz, pˇres který je pˇrístupný. Marvelapp podporuje nahrávání PSD souboru. ˚ Tyto soubory jsou ale automaticky pˇrevedeny na obrázky a samotné vrstvy jsou ignorovány. Ztrácí se tím tedy možnost jakékoliv úpravy nahraného souboru. Naštˇestí nejsou bˇehem tohoto pˇrevodu ignorovány efekty vrstev, a tak bude obrázek vypadat jako obsah souboru. 1. http://marvelapp.com 2. http://dropbox.com

5

3. E XISTUJÍCÍ NÁSTROJE Výbˇer oblasti pro odkaz se provádí jednoduchým potažením myší a zvýraznˇením oblasti. Poté se zvolí obrázek na který se má odkazovat. Tento výbˇer bohužel není možné duplikovat i na další obrázky, které obsahují stejný odkaz. Což znamená, že pro každou novou stránku musíme vytvoˇrit všechny odkazy znovu. Ukázku vytváˇrení odkazu lze vidˇet na obrázku 3.1. Žádné další možnosti pro úpravu prototypu tento nástroj nenabízí.

Obrázek 3.1: Ukázka aplikace Marvel

Výhody •

nahrání více obrázku˚ k jednomu projektu

•

výbˇer oblasti pro odkaz tažením myší

Nevýhody •

nahraný PSD soubor je pˇreveden na obrázek a nejsou pˇrístupné jeho vrstvy

•

odkazy na další stránky se nedají duplikovat 6

3. E XISTUJÍCÍ NÁSTROJE 3.1.2 Easel Pro ty, kterým nestaˇcí jen základní pˇridávání odkazu˚ a rádi by svuj ˚ prototyp rozšíˇrili i o další HTML elementy, je urˇcena aplikace Easel3 . Tato aplikace je, díky svým rozšíˇreným možnostem (viz obr. 3.2), složitˇejší na ovládání a proto muže ˚ zaˇcínajícímu uživateli trvat trochu déle než se v programu zorientuje. Bohužel v žádné z verzí není podpora pro PSD soubory. Uživatel je tedy do programu musí nahrát jako obrázky. Velikou výhodou této aplikace je možnost pˇridávání poznámek k urˇcité cˇ ásti prototypu bˇehem prezentace. S tˇemito poznámkami muže ˚ pracovat více lidí zárovenˇ a tak se dají pˇripomínky velice rychle vyˇrešit. Výsledný prototyp je možné si na konci práce stáhnout jako HTML stránky. Takže pro prezentaci není potˇreba pˇripojení k internetu.

Obrázek 3.2: Ukázka aplikace Easel

Výhody •

více možností nastavení pˇri vytváˇrení prototypu

•

umožnuje ˇ komentování výsledného prototypu

3. https://www.easel.io

7

3. E XISTUJÍCÍ NÁSTROJE Nevýhody •

nelze nahrát soubor typu PSD

•

nároˇcná orientace v programu

3.1.3 Axure RP Axure RP4 je desktopový prototypovací nástroj. Díky svým profesionálním funkcím patˇrí mezi nejlepší nástroje na trhu. Dostupný je zdarma, v omezené licenci na 30 dní, nebo placený za cenu v rozmezí od 289 $ do 589 $ v závislosti na druhu licence. Mezi užiteˇcné funkce patˇrí generování HTML prototypu s podporou JavaScriptu pouhým stisknutím tlaˇcítka. Takto vytvoˇrený prototyp se tedy chová jako obyˇcejná webová stránka. Druhou užiteˇcnou funkcí je možnost vytvoˇrení opakovatelných prvku, ˚ které lze použít kdekoliv v prototypu. Ukázku vývojového prostˇredí aplikace Axure je možno vidˇet na obrázku 3.3.

Obrázek 3.3: Ukázka aplikace Axure RP

4. http://www.axure.com/

8

3. E XISTUJÍCÍ NÁSTROJE Výhody •

rychlý pˇrevod do HTML a JavaScriptu

•

možnost komentování výsledného prototypu

•

vytvoˇrení opakovatelných prvku˚

Nevýhody •

nelze nahrát soubor typu PSD

3.2 Nástroje pro extrakci/editaci obrázku˚ Všechny nástroje pro vytvoˇrení prototypu˚ designu jsou velice užiteˇcné, ale mají jeden velký problém, který nemusí být ze zaˇcátku viditelný. Uživatel musí nˇejakým zpusobem ˚ získat obrázky jednotlivých stránek/obrazovek, aby je pak mohl použít v prototypovacím nástroji. Pokud vlastní licenci Adobe Photoshopu, tak s tím nebude mít žádný problém. Bohužel licence tohoto programu není nijak levná a bˇežní weboví vývojáˇri si ji nemohou dovolit. Proto je nutné vyhledat jinou aplikaci, která nám by s extrakcí obrázku˚ mohla pomoci. Aplikace, které jsou zde popsané, nejsou urˇcené pro vytváˇrení prezentací cˇ i prototypu˚ ze souboru˚ typu PSD a také to ani jedna z nich neumí. Jedná se ale o jedny z mála aplikací, které dokáží pracovat s tˇemito soubory na úrovni vrstev. Proto jsem uznal za vhodné je zde uvést a struˇcnˇe popsat jejich výhody a nevýhody. 3.2.1 Paint.NET Paint.NET5 je volnˇe dostupný nástroj urˇcený k editaci obrázku˚ a fotografií. V základní verzi sice neumožnuje ˇ otevírat soubory typu PSD, ale toho se dá dosáhnout doinstalováním speciálního rozšíˇrení, které se jmenuje PSD Plugin6 . S tímto pluginem je možné soubory nejen otevírat, ale i ukládat. 5. http://www.getpaint.net/ 6. http://psdplugin.codeplex.com/

9

3. E XISTUJÍCÍ NÁSTROJE Bohužel kompatibilita PSD souboru a tohoto programu není nijak dokonalá. Paint.NET totiž patˇrí do skupiny programu, ˚ které u PSD ignorují duležité ˚ informace. To znamená, že výsledný soubor muže ˚ vypadat úplnˇe jinak než ten puvodní. ˚ Pˇríklad ignorování informací lze vidˇet na pˇriložených obrázcích 3.4 a 3.5. Na první pohled je patrné, že se oba obrázky liší. Obrázek 3.4 zobrazuje obsah souboru, je-li otevˇren v programu Adobe Photoshop. Vpravo je pak ukázka obrázku 3.5, jak je zobrazen pomocí aplikace Paint.NET. Tyto odlišnosti jsou zpusobeny ˚ právˇe ignorací efektu˚ jednotlivých vrstev programem Paint.NET.

Obrázek 3.4: Adobe Photoshop

Obrázek 3.5: Paint.NET

Výhody •

umožnuje ˇ editaci vrstev nahraného souboru

Nevýhody •

ignoruje nastavení efektu, ˚ masky, prolnutí, atd. u jednotlivých vrstev 10

3. E XISTUJÍCÍ NÁSTROJE •

zobrazuje vrstvy v jednom dlouhém seznamu místo puvod˚ ního rozˇrazení do složek

•

textové vrstvy jsou pˇrevedeny na obrázky a všechno jejich nastavení je ztraceno

Proto se muže ˚ zdát, že tento program pro otevˇrení souboru˚ PSD vhodný není. Bohužel Paint.NET není jediný s tˇemito problémy. I druhý velice používaný program GIMP7 , který dokáže pracovat s tˇemito soubory má podobné problémy. Pain.NET je výhodnˇejší na použití, jelikož na rozdíl od GIMPu dokáže otevˇrít všechny verze PSD souboru. 3.2.2 Photopea

Obrázek 3.6: Ukázka aplikace Photopea Mezi online nástroji patˇrí Photopea8 k nejlepším. Tato na podzim roku 2013 vydaná aplikace z dílny cˇ eského studenta dokáže to, co nezvládá vˇetšina široce rozšíˇrených programu. ˚ Nejen, že otevˇre PSD soubor se všemi efekty, ale také s nimi dokáže velice dobˇre pracovat. Uživatelské prostˇredí (viz obr. 3.6) se velice podobá prostˇredí Adobe Photoshop. 7. http://www.gimp.org/ 8. http://photopea.com

11

3. E XISTUJÍCÍ NÁSTROJE Sám autor považuje stav vývoje za poˇcáteˇcní. V blízké budoucnosti je plánována lepší podpora efektu˚ a pˇrímá editace textových vrstev. Ty jsou ted’ pˇrevádˇeny na obrázky, což je urˇcitým omezením pro uživatele. Ke své práci Photopea využívá novou specifikaci9 , kterou firma Adobe Systems vydala v rˇ íjnu 2013. PSD parser je napsán pomocí JavaScriptu, tudíž je místo výkonu serveru vytˇežován výkon uživatelského poˇcítaˇce. Toto rˇ ešení má své výhody i nevýhody. Za výhodu lze považovat ulehˇcení škálovatelnosti. Pokud bude do aplikace nahrávat data více uživatelu˚ zároven, ˇ není potˇreba rˇ ešit silnˇejší server. Nevýhoda je v neznalosti výkonu uživatelova poˇcítaˇce. Pokud je výkon slabý, nemusí se podaˇrit otevˇrít nˇekteré vˇetší soubory. Podle autora je plánováno i zvýšení výkonu samotného pˇrevodu, aby bylo možné otevˇrít soubory s vˇetším poˇctem vrstev. Výhody •

možnost editace jednotlivých efektu˚

Nevýhody •

z duvodu ˚ využití javascriptu pro parsování nahraného souboru muže ˚ být problém s nahráváním souboru˚ s velkým pocˇ tem vrstev

9. http://www.adobe.com/devnet-apps/photoshop/fileformatashtml/

12

ˇ 4 Rešené problémy V následující kapitole budou nastínˇeny podstatné problémy, které bylo potˇreba rˇ ešit pˇri vývoji této aplikace. Vˇetšina problému˚ se zabývá skriptem urˇceným ke zpracování. Plné rˇ ešení každého bodu˚ se nachází v kapitole 6.

4.1 Pˇredzpracování vstupního souboru Jednotlivé vrstvy mohou obsahovat efekty, masky, prolnutí a další nastavení. Tyto informace není možné pomocí souˇcasných nástroju˚ a knihoven z PSD souboru vytáhnout. Je tedy nutné celý soubor nˇejakým zpusobem ˚ pˇredzpracovat a tato nastavení bud’to získat nebo se jich zbavit. Pˇredzpracování by ale nemˇelo mít destruktivní charakter. Což znamená, že vrstva po zpracování by mˇela vypadat stejnˇe jako pˇred zpracováním.

4.2 Zpracování inteligentních objektu˚ PSD soubor se dá použít jako samostatná vrstva v jiném PSD souboru. Vkládat se dají i vektorové objekty, které jsou výstupem programu Adobe Illustrator. Jelikož tento rastrový objekt muže ˚ obsahovat další vrstvy, bylo by dobré, je vyexportovat, aby uživatel mohl pracovat s každou samostatnˇe.

4.3 Uchování informací o textových vrstvách Textové vrstvy obsahují informace, které mohou být pro vývojáˇre užiteˇcné. Vývojáˇr je muže ˚ použít pˇri pˇrevodu designu do funkˇcní verze. Jedná se o informace typu font, velikost písma, barvu, atd. Tyto informace by bylo dobré z jednotlivých vrstev vyexportovat. Jednou z možností je zobrazit samotnou vrstvu jako text a nastavit jí získané vlastnosti, nebo tyto informace uložit nˇekam mimo a textovou vrstvu pˇrevézt na obrázek. 13

4. Rˇ EŠENÉ PROBLÉMY

4.4 Porovnání vstupního a zpracovaného souboru Pˇri pˇredzpracování vstupního souboru existuje možnost ztráty nˇekterých informací o nastavení vrstvy. Bylo by tedy dobré uživatele informovat o tomto problému. Neuškodilo by i vizuální srovnání mezi vstupní a výstupní verzí souboru po zpracování.

14

5 Nástroje použité pˇri vývoji Pˇred popisem samotného vývoje je nutné stanovit si, pomocí jakých technologií bude aplikace vyvíjena. Pˇredstavení je rozdˇeleno na dvˇe cˇ ásti, serverové technologie 5.1, které jsou urˇcené k vývoji samotné aplikace, práci s daty a PSD soubory, a zobrazovací technologie 5.2, pomocí nichž bude aplikace zobrazovat obsah uživateli.

5.1 Serverové technologie Programová cˇ ást je plánována jako funkˇcnˇe rozsáhlá webová aplikace. Z tohoto duvodu ˚ padla volba základní technologie na jazyk Java. Pˇresnˇeji JavaEE s podporou Spring Frameworku, které jsou pro tento typ aplikace urˇceny. Ostatní technologie se odvíjí od hlavního programovacího jazyka. K uložení všech potˇrebných dat byla zvolena databáze MySQL,která s aplikací komunikuje pomocí frameworku Hibernate. Pro vývoj aplikace bude použito vývojové prostˇredí Eclipse. Extrakci vrstev z PSD souboru zajistí Java PSD knihovna.

5.1.1 JavaEE Java Enterprise Edition [5] zkrácenˇe Java EE je souˇcást platformy Java pomocí níž jsou vyvíjeny a provozovány podnikové aplikace a informaˇcní systémy.

5.1.2 Spring Framework Spring Framework1 [6] je framework urˇcený pro vývoj Jave EE aplikací. Pˇridává podporu pro nástroje urˇcené k práci s daty, jako Hibernate. Usnadnuje ˇ používání unit testu˚ a výbˇer možnosti implementace business vrstvy.

1. http://spring.io/

15

ˇ VÝVOJI 5. N ÁSTROJE POUŽITÉ P RI

5.1.3 Java Persistence API Jedná se o standard Java EE pro ukládání dat pomocí objektovˇe relaˇcního mapování (ORM), popisu rozhraní a chování knihoven pro objektovˇe-relaˇcní mapování [7]. Každá tabulka databáze je definována jako speciální tˇrída (Entita). Entitou mužeme ˚ oznaˇcit každou tˇrídu, které splnuje ˇ speciální podmínky. Takto definovaná tˇrída se ukládá jako jeden rˇ ádek databáze. 5.1.3.1 Hibernate Hibernate2 je jedna z implementací Java Persistence API [8]. Navíc poskytuje objektovˇe orientovaný jazyk HQL, který dovoluje za pomoci objektové notace získávat data z databáze jako objekty. Tento pˇrístup znaˇcnˇe usnadnuje ˇ následující práci s daty. Knihovna není databázovˇe specifikovaná, tudíž jeden kód je možné využít na ruzných ˚ databázích. 5.1.4 MySQL MySQL je multiplatformní databázový systém spoleˇcnosti Sun Microsystems [9]. Ke komunikaci využívá jazyk SQL s drobnými rozšíˇreními. Nelze v ní používat uložené procedury a triggery, ale tuto nevýhodu vynahrazuje svou rychlostí. Je dostupná ve dvou licencích Bezplatné GPL a komerˇcní placené. 5.1.5 Java PSD library Tato knihovna3 vytvoˇrená v jazyce Java umožnuje ˇ exportovat obrázky jednotlivých vrstev ze souboru˚ typu PSD. Aktuální verze umí pouze extrakci obrázku˚ vrstev. Nedokáže se vypoˇrádat s efekty, maskami cˇ i prolínáním. Vývoj této knihovny byl již ukonˇcen. 2. http://hibernate.org/ 3. https://code.google.com/p/java-psd-library/

16

ˇ VÝVOJI 5. N ÁSTROJE POUŽITÉ P RI

5.2 Zobrazovací technologie Jelikož je jako hlavní technologie použita JavaEE, padla volba u zobrazovacích technologii na Java Server Pages doplnený ˇ o HTML, CSS a jQuery. 5.2.1 Java Server Pages JavaServer Pages (JSP)4 [11] je jazyk pro psaní dynamických HTML stránek založený na jazyce Java. Pˇri tvorbˇe se používá primárnˇe HTML a Java. Do kódu HTML je možné vkládat Java kód. Zdrojový kód 5.1 znázornuje ˇ pˇríklad Java kódu zapsaného v JSP souboru. Tyto bloky kódu se nazývají skriptlety. Pˇri generování stránky jsou na stranˇe serveru zpracovány a vygenerovány jako HTML kód. Jde o podobný princip jako u PHP. 1 2 3 4 5 6 7 8 9

<% f o r ( i n t i ~= 0 ; i ~< a u t h o r s . l e n g t h ; ++ i ) { %> < l i ><%= a u t h o r s [ i ] %> <% } %>

Zdrojový kód 5.1: Ukázka zápisu Java kódu v JPS souboru 5.2.2 HTML HyperText Markup Language5 zkrácenˇe HTML je znaˇckovací jazyk urˇcený k tvorbˇe webových stránek. O jeho vývoj se stará mezinárodní konsorcium W3C6 . Poslední verze má oznaˇcení HTML 5. 5.2.3 jQuery jQuery7 je JavaScriptový8 framework, který byl vytvoˇren pro ulehcˇ ení práce s JavaScriptem. Oddˇeluje chování stránky od struktury 4. 5. 6. 7. 8.

http://www.oracle.com/technetwork/java/javaee/jsp/index.html http://www.w3schools.com/html/DEFAULT.asp http://www.w3.org/ http://jquery.com/ http://www.w3schools.com/js/DEFAULT.asp

17

ˇ VÝVOJI 5. N ÁSTROJE POUŽITÉ P RI

HTML. Pˇrináší množství efektu˚ a také podporu pro Ajax. Výhodou této knihovny je jednoduchost psaní pˇríkazu. ˚ 5.2.2.1 Ajax Ajax9 je technologie pro asynchronní zpracování webových stránek pomocí JavaScriptové knihovny. Asynchronní zpracování znamená odeslání dat na server, zpracování a jejich zpˇetný výpis bez nutnosti znovu naˇctení dané stránky. Kód 5.2 zobrazuje základní zápis Ajaxu v JavaScriptu. 1 2 3 4 5 6 7 8 9 10

$ . ajax ( { type : "POST" , u r l : "editor.html" , data : { /* pole dat pro odeslani */ } , s u c c e s s : f u n c t i o n ( data ) { // zpracovani prijatych dat } } ) . done ( f u n c t i o n ( msg ) { // dokonceni funkce }) ;

Zdrojový kód 5.2: Ukázka zápisu Ajax kódu

9. http://www.w3schools.com/ajax/default.ASP

18

6 Vývoj Následující kapitola popisuje rˇ ešení duležitých ˚ bodu˚ vývoje aplikace, které byly nastínˇeny v cˇ ásti 4. Ke každému z bodu˚ je uveden podrobný popis rˇ ešení. Jsou zde uvedeny i zdrojové kódy související s jednotlivými body.

6.1 Automatické pˇredzpracování souboru V kapitole 3 jsou struˇcnˇe popsány nástroje, které je možno použít pro vytvoˇrení prototypu designu. Pˇred samotným prototypováním je nutné pˇripravit podklady pro tyto prototypovací nástroje. Postup, kterým se podklady vytváˇrí, lze vyjádˇrit pomocí koneˇcné posloupnosti kroku. ˚ Díky tomuto faktu by mˇelo být možné je nasimulovat a provézt automaticky. Existují dva zpusoby, ˚ jakými lze PSD soubor zpracovat. Prvním je vytvoˇrit knihovnu, která by rozparsovala zdrojový kód PSD souboru a zjistila veškeré informace o vrstvách. Informace by se pak využily jako podklady pro CSS 3 styly. Bohužel ne všechny efekty jdou pomocí CSS nasimulovat a u tˇech, které nasimulovat lze, není na 100% zaruˇceno, že budou v ruzných ˚ prohlížeˇcích vypadat stejnˇe. Jelikož je CSS 3 stále ve vývoji, mohou jednotlivé prohlížeˇce vykreslovat stejná pravidla rozdílnˇe. Zámˇerem této aplikace je vykreslit obsah PSD souboru, který by se maximálnˇe podobal puvodnímu ˚ vzhledu. Je tedy nežádoucí, aby se v každém prohlížeˇci zobrazovaly stejné designy jinak. Byla tedy vybrána možnost cˇ íslo dvˇe, jež se zamˇerˇ uje na rasterizaci vrstev pˇred samotným exportem. Proces rasterizace slouˇcí efekty, pruhlednost, ˚ masky a další nastavení s puvodním ˚ obrázkem a vytvoˇrí obrázek nový, jenž tato nastavení neobsahuje, ale vypadá, jako by je obsahoval. Jelikož už jsou všechna nastavení souˇcástí nového obrázku, ulehˇcí se práce s jejich výpisem. Nástrojem pro vytvoˇrení skriptu na automatizaci rasterizace byl zvolen Adobe Photoshop CC Skript1 . Jedná se o speciální skripty, s jejichž pomocí nichž je možné simulovat uživatelské úkony v programu Adobe Photoshop. Podporovanými jazyky jsou Javascript, Ap1. http://www.adobe.com/devnet/photoshop/scripting.html

19

6. V ÝVOJ pleScript a Visual Basic. Ke každému z tˇechto jazyku˚ je dodávána speciální dokumentace obsahující soupis parametru˚ a funkcí, které je možno v daném jazyce použít. Dokumentace se liší v závislosti na verzi Adobe Photoshop. Firma Adobe dodává svuj ˚ specializovaný program ExtendScript Toolkit, který má pomoci programátorum ˚ s vytváˇrením skriptu. ˚ Umožnuje ˇ ladit a krokovat skripty, což pomáhá pˇri rˇ ešení problému. ˚ 6.1.1 Pˇreposlání souboru k pˇredzpracování Proces rasterizace, nasimulovaný pomocí Adobe Photoshop CC skriptu lze spouštˇet jen pˇrímo v programu Adobe Photoshop. Je tedy nutné nahraný soubor odeslat na poˇcítaˇc s tímto programem a skript spustit. Pˇredzpracování probíhá na stolním poˇcítaˇci s procesorem AMD Athlon II X4 641 Quad-Core o frekvenci 2.8 GHz. Operaˇcní pamˇet’ je 16 GB DDR3. Je na nˇem spuštˇen program napsaný v jazyce C# jenž se stará o kompletní zpracování. Model fungování programu je znázornˇen na obrázku 6.1.

Obrázek 6.1: Graf pˇredzpracování PSD souboru

20

6. V ÝVOJ Program po svém spuštˇení bˇeží v nekoneˇcnˇe smyˇcce a cˇ eká, dokud se neobjeví nový soubor pro zpracování. Pro toto zjišt’ování je kontrolována stránka2 . Na ní jsou zobrazeny soubory cˇ ekající na zpracování. Pokud se na této stránce objeví nový záznam, je automaticky stažen do poˇcítaˇce. Po jeho stažení se spustí poslední verze programu Adobe Photoshop a otevˇre se stažený soubor. Je-li potvrzeno otevˇrení souboru, pokraˇcuje se spuštˇením rasterizaˇcního scriptu. Tento skript na svém konci uloží výslednou podobu PSD souboru do nového souboru aby bylo možné v pˇrípadˇe problému získat pˇrístup k puvodnímu ˚ souboru. Zpracovaný soubor je odeslán zpátky do aplikace a skript cˇ eká na další soubor. Bˇehem každého z kroku˚ je zpátky do aplikace odesílána zpráva o aktuálním stavu zpracovávání. Tyto zprávy jsou ukládány do databáze a zobrazovány uživateli. 6.1.2 Procházení vrstev Vrstvy v PSD souboru se mohou nacházet v jednom dlouhém seznamu nebo jsou zanoˇreny do složek. Z tohoto duvodu ˚ byla jako první metoda procházení souboru zvolna metoda zanoˇrování. Nejprve byly zpracovány soubory, které nejsou v žádných složkách a poté by funkce pokraˇcovala postupným zanoˇrování do složek. První verze skriptu tedy využívá tuto metodu zpracování. Na zaˇcátku získá skript 6.1 všechny vrstvy, které nejsou zanoˇreny do složek. K tomu slouží parametr artLayers, který lze získat ze samotného souboru, ale i jednotlivých složek. Poté už pokraˇcuje zpracování samotných vrstev. Pokud vrstva neobsahuje žádné data a je tedy prázdná, není nutné ji zachovávat pro výsledný prototyp. Funkce deleteEmptyLayer se stará o toto ovˇerˇ ení a následující smazání. První verze skriptu poˇcítá také se získáváním informací o textových vrstvách. Samotné získávání informací se nachází až v dalších verzích skriptu. Pokud je vrstva obrázková, pokraˇcuje se v jejím zpracovávání. To muže ˚ probíhat dvojím zpusobem. ˚ Je-li aktuální vrstva svázána s jinou, oznaˇcí se všechny vrstvy, které patˇrí do tohoto spojení, a provede se slouˇcení do jedné vrstvy. U obyˇcejných vrstev se na zaˇcátku vytvoˇrí prázdná vrstva a spojí se s aktuální. Tím se z ní odstraní nepotˇrebné nastavení. Hlavní funkce konˇcí volám funkce 2. www.designborg.com/waiting-for-processing

21

6. V ÝVOJ folderItr, které jsou pˇredány všechny složky aktuální úrovnˇe. Ty se zpracovávají stejným zpusobem ˚ jako zde popsaný postup. 1 2 3 4 5 6 7 8 9 10 11 12 13 14

f u n c t i o n main ( ) { // vytahnou se vsechny vrstvy, ktere nejsou ve slozkach var imageLayers = app . activeDocument . a r t L a y e r s ; //projedou se vsechny vrstvy f o r ( var j = 0 ; j < imageLayers . l e n g t h ; j ++) { var image = imageLayers [ j ] ; deleteEmptyLayer ( image ) ; // zapamatovani aktualni viditelnosti vrstvy var i m g V i s i b l e = image . v i s i b l e ; // znazorneni aktualni vrstvy, automaticky nastaveno "visible = true" app . activeDocument . a c t i v e L a y e r = image ; i f ( image . kind ! = LayerKind . TEXT ) { // pokud je vrstva zgrupovana s~vrstvou podni, tak se vypocte jejich pocet a~spoji se i f ( image . grouped ) { // pocet vrstev, ktere se maji spojit var number = s p l i t A d j u s t m e n t L a y e r s ( imageLayers , j ) ; i f ( number > 1 ) { //vybere urceny pocet vrstev s e l e c t N e x t L a y e r s ( number−1) ; } // spoji vybrane vrstvy mergeDown ( ) ; // jinak se vytvori nova vrstva a~spoji se s~tou, ktera obsahuje efekty nebo masky } else { i f ( h a s L a y e r S t y l e ( ) || hasLayerMask ( ) || hasVectorMask ( ) || ( getSmartObjectType ( ) == "vectorData" ) ) { // vytvori se nova vrstva makeLayerBelow ( image . name ) ; // vyberou se obe vrstvy selectNextLayers ( 1 ) ; // spojeni vrstev mergeDown ( ) ; } } e l s e i f ( image . kind == LayerKind . SMARTOBJECT) { p r o c e s s S m a r t O b j e c t ( image , app . activeDocument . name ) ; app . activeDocument . a c t i v e L a y e r = image ; }

15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

} // nastaveni puvodni viditelnosti vrstvy app . activeDocument . a c t i v e L a y e r . v i s i b l e = i m g V i s i b l e ; } // spusteni funkce ktera projde vsechny slozky a~provede to stejne na vrstvach, ktere jsou v~nich f o l d e r I t r ( app . activeDocument . l a y e r S e t s ) ; }

Zdrojový kód 6.1: Procházení souboru 1. verze Poté co byla dokonˇcena první verze skriptu, následovaly výkon22

6. V ÝVOJ nostní testy. Výsledky testování i se závˇery, které z nˇeho vyplývají, lze nalézt v kapitole 6.1.3. 6.1.3 Výkonnost Hlavním kritériem testování byla výkonnost pˇri zpracování souboru. Optimální cˇ as zpracování by se mˇel pohybovat v rˇ ádech vteˇrin až minut. Pokud by daný proces dosáhl k desítkám minut, pˇredstavovalo by to pro uživatele spíše zpoždˇení než zrychlení jeho práce. Testováno bylo 30 souboru˚ s poˇctem vrstev od 15 do 1000 na notebooku s operaˇcním systémem Windows 7. Pamˇet’ poˇcítaˇce je 8 GB a obsahuje procesor Intel Core i7 s výkonem 2.2 GHz. Aby nebyly ovlivnˇeny výsledky testu, ˚ byly všechny ostatní aplikace bˇežící na tomto poˇcítaˇci ukonˇceny.

Obrázek 6.2: Výkonnostní test rasterizaˇcních scriptu˚ V grafu 6.2 jsou znázornˇeny výsledky testu. Modrou barvou je vyznaˇcena první verze skriptu. Ze získaných dat je patrné, že pˇri nízkém poˇctu vrstev se cˇ as zpracování pohybuje v rˇ ádech minut a tudíž 23

6. V ÝVOJ v normˇe. Pokud by ale vstupní soubor obsahoval více než 500 vrstev, cˇ as zpracování by narostl až k tˇriceti a více minutám. Tato doba již v normˇe rozhodnˇe není. Dané zpoždˇení je z cˇ ásti zpusobeno ˚ nedostatkem pamˇeti poˇcítaˇce. Program si do pamˇeti postupnˇe naˇcítá informace o jednotlivých vrstvách a když tyto informace pˇrerostou povolenou pamˇet’, zaˇcnou se následující kroky zpomalovat. Z výsledku˚ tohoto testu vyplývá, že bude nutné pˇrehodnotit celý koncept zpracovávání a pˇrijít s jiným, rychlejším a ménˇe nároˇcnˇejším rˇ ešením. Tento výkonnostní problém byl diskutován i s odborníky na Adobe Photoshop diskuzi. Z komunikace s nimi vyplynulo, že nˇekteré z funkcí, které jsou uvedeny v dokumentaci pro Adobe Photoshop Skripty jsou sice funkˇcní, ale jejich provedení je pomalé. Mezi tyto pomalé funkce patˇrí tˇreba získávání vrstev na aktuální úrovni nebo zjištˇení a nastavení viditelnosti vrstvy. Obˇe tyto funkce jsou použity v první verzi skriptu 6.1. Bohužel firma Adobe neplánuje žádný update a zrychlení tˇechto funkcí. ˇ Cervenou barvou jsou v grafu 6.2 znázornˇeny výsledky stejného testu pro pˇrepracovaný skript 6.1.4. Je z nˇej patrné, že pˇri nízkém poˇctu vrstev je jeho výkon srovnatelný s pˇredchozí verzí scriptu. Výhody jsou patrné až pˇri zpracovávání souboru˚ s poˇctem vrstev vˇetším než 500. Nový script je zhruba tˇrikrát rychlejší než ten puvodní. ˚

6.1.4 Nová verze skriptu Jak bylo zmínˇeno v kapitole 6.1.3, první verze skriptu postrádala výkonnost. Proto se druhá verze skriptu snaží vyvarovat všech implementaˇcních postupu, ˚ které zpomalení zpusobovaly. ˚ První odlišností je zmˇena pˇrístupu k samotnému procházení souboru. První verze procházela soubor metodou zanoˇrování. Od této metody bylo upuštˇeno a zvolena byla metoda zpracování všech vrstev v jednom cyklu bez potˇreby zanoˇrování. K získání všech vrstev slouží metoda getAllLayersByIndex()6.2, která vrací indexy všech vrstev v souboru. Funkce samotná nepracuje s metodami z oficiální dokumentace, ale ke své práci využívá tˇrídy ActionReference a ActionDescriptor. ActionReference poskytuje informace na co odkazují. ActionDescriptor poskytuje mechanismus pro ukládání dat metodou klíˇc-hodnota. 24

6. V ÝVOJ Tento pˇrístup umožnuje ˇ pracovat pˇrímo s daty dané vrstvy a není tedy nutné spoléhat se na implementaci tˇretí strany. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

function getAllLayersByIndex ( ) { f u n c t i o n getNumberLayers ( ) { var r e f = new A c t i o n R e f e r e n c e ( ) ; r e f . putProperty ( charIDToTypeID ( "Prpr" ) , charIDToTypeID ( "NmbL" ) ) ; r e f . putEnumerated ( charIDToTypeID ( "Dcmn" ) , charIDToTypeID ( "Ordn" ) , charIDToTypeID ( "Trgt" ) ) ; r e t u r n e x e c u t e A c t i o n G e t ( r e f ) . g e t I n t e g e r ( charIDToTypeID ( "NmbL" ) ) ; }; f u n c t i o n hasBackground ( ) { var r e f = new A c t i o n R e f e r e n c e ( ) ; r e f . putProperty ( charIDToTypeID ( "Prpr" ) , charIDToTypeID ( "Bckg" ) ) ; r e f . putEnumerated ( charIDToTypeID ( "Lyr " ) , charIDToTypeID ( "Ordn" ) , charIDToTypeID ( "Back" ) ) var desc = e x e c u t e A c t i o n G e t ( r e f ) ; var r e s = desc . getBoolean ( charIDToTypeID ( "Bckg" ) ) ; return res }; f u n c t i o n getLayerType ( idx , prop ) { var r e f = new A c t i o n R e f e r e n c e ( ) ; r e f . putIndex ( charIDToTypeID ( "Lyr " ) , idx ) ; var desc = e x e c u t e A c t i o n G e t ( r e f ) ; var type = desc . getEnumerationValue ( prop ) ; var r e s = typeIDToStringID ( type ) ; return res }; var c n t = getNumberLayers ( ) + 1 ; var r e s = new Array ( ) ; i f ( hasBackground ( ) ) { var i ~= 0 ; } else { var i ~= 1 ; }; var prop = stringIDToTypeID ( "layerSection" ) ; f o r ( i ; i < c n t ; i ++) { var temp = getLayerType ( i , prop ) ; i f ( temp ! = "layerSectionEnds" ) r e s . push ( i ) ; }; return res ; };

Zdrojový kód 6.2: Procházení souboru 2. verze

6.1.5 Viditelnost vrstev Bˇehem procesu testování skriptu byl nalezen problém s viditelností vrstev. Každá vrstva, složka, efekt cˇ i maska muže ˚ být viditelná nebo skrytá. Aby skript mohl s nˇejakou vrstvou pracovat, musí být vidi25

6. V ÝVOJ telná. U složek se tato neschopnost práce aplikuje na všechny vrstvy v ní obsažené. Pˇred samotným zpracováním musíme tedy zviditelnit všechny skryté vrstvy a složky. Na konci procesu zpracování je nutné nastavit viditelnost všech vrstev zase zpátky, tak jak byla na zaˇcátku. Pokud bychom nechali všechny vrstvy viditelné, byl by výsledný dokument vzhledovˇe rozdílný od toho puvodního. ˚ Což je nežádoucí. Jedním, a to jednodušším zpusobem ˚ 6.3, je získávat a nastavovat pˇrímo parametr visible. Všechny skryté vrstvy se na zaˇcátku práce uloží do pole, poté se jejich viditelnost nastaví na TRUE. Po dokoncˇ ení zpracovávání se projdou všechny vrstvy v tomto poli a jejich viditelnost se nastaví na FALSE. Pˇri zpracovávání je nutné udržovat pole se skrytými vrstvami aktualizované. Pokud je nˇejaká skrytá vrstva slouˇcená s jinou, nebo dokonce odstranˇena, je duležité ˚ propagovat tyto informace i do tohoto pole. 1 2

var v i d i t e l n o s t = l a y e r . v i s i b l e ; layer . visible = viditelnost ;

Zdrojový kód 6.3: Nastavení viditelnosti pˇres parametr Druhým zpusobem ˚ 6.4 je opˇet využití tˇríd Action Reference a Action Descriptor. Funkce getLayerVisibilityByIndex nejprve vytvoˇrí referenci na vlastnost, kterou od vrstvy požadujeme. V našem pˇrípadˇe je to viditelnost. Dále se této referenci pˇredá index vrstvy, od které danou vlastnost chceme získat. Takto vytvoˇrená reference se pak pˇredá funkci executeActionGet, která vytvoˇrí objekt s danou vlastností, a my poté pomocí get funkce získáme požadovanou hodnotu. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

f u n c t i o n g e t L a y e r V i s i b i l i t y B y I n d e x ( idx ) { var r e f = new A c t i o n R e f e r e n c e ( ) ; r e f . putProperty ( charIDToTypeID ( "Prpr" ) , charIDToTypeID ( "Vsbl" ) ) ; r e f . putIndex ( charIDToTypeID ( "Lyr " ) , idx ) ; return executeActionGet ( r e f ) . getBoolean ( charIDToTypeID ( "Vsbl" ) ) ; }; f u n c t i o n s e t L a y e r V i s B y I n d e x ( idx ) { var idHd = charIDToTypeID ( "Hd " ) ; var desc54 = new A c t i o n D e s c r i p t o r ( ) ; var i d n u l l = charIDToTypeID ( "null" ) ; var l i s t 2 = new A c t i o n L i s t ( ) ; var r e f 4 9 = new A c t i o n R e f e r e n c e ( ) ; var idLyr = charIDToTypeID ( "Lyr " ) ; r e f 4 9 . putIndex ( idLyr , invObj [ i ] ) ; l i s t 2 . putReference ( re f49 ) ;

26

6. V ÝVOJ 19 20 21 22

desc54 . p u t L i s t ( i d n u l l , l i s t 2 ) ; e x e c u t e A c t i o n ( idHd , desc54 , DialogModes .NO) ; };

Zdrojový kód 6.4: Nastavení viditelnosti pˇres Adobe Action

6.2 Inteligentní objekty Do PSD souboru lze vložit speciální vrstvy, které se nazývají inteligentní objekty. Tyto objekty jsou v podstatˇe samostatné soubory. Soubor z programu Adobe Photoshop se oznaˇcuje jako bitmapový objekt a soubor z programu Adobe Illustrator jako vektorový objekt. Oba tyto objekty by mˇely být urˇcitým zpusobem ˚ zpracovány. 1 2 3 4 5 6 7 8 9 10 11

f u n c t i o n getSmartObjectType ( ) { var r e f = new A c t i o n R e f e r e n c e ( ) ; r e f . putEnumerated ( charIDToTypeID ( ’Lyr ’ ) , charIDToTypeID ( ’Ordn’ ) , charIDToTypeID ( ’Trgt’ ) ) ; var desc = e x e c u t e A c t i o n G e t ( r e f ) ; i f ( desc . hasKey ( stringIDToTypeID ( ’smartObject’ ) ) ) { var enum = desc . g e t O b j e c t V a l u e ( stringIDToTypeID ( ’smartObject’ ) ) . getEnumerationValue ( stringIDToTypeID ( ’placed’ ) ) ; r e t u r n typeIDToStringID ( enum ) ; } r e t u r n ’’ ; }

Zdrojový kód 6.5: Zjištˇení typu inteligentního objektu Funkce 6.5 na zjištˇení typu inteligentního objektu nejprve vytvoˇrí referenci na cˇ íselník aktuální vrstvy. Poté ho pomocí funkce executeActionGet získá. Následnˇe se kvuli ˚ možné nekompatibilitˇe jednotlivých verzí Adobe Photoshop kontroluje, zda se v cˇ íselníku nachází hodnota pro inteligentní objekt. Pokud se v cˇ íselníku nachází, tak je vytažena a je zjištˇen její textový identifikátor. Každý z objektu˚ je nutné zpracovat odlišným zpusobem ˚ založeným na obsahu jednotlivých objektu. ˚ Bitmapové objekty obsahují stejnˇe jako samotný PSD soubor vrstvy. Proto je nejlepší tyto vrstvy rasterizovat a poté vykopírovat do hlavního souboru. Vektorové objekty neobsahují vrstvy, ale kˇrivky. S tˇemi se nedá v Adobe Photoshopu pracovat. K jejich otevˇrení je nutné vlastnit licenci k programu Adobe Illustrator. S kˇrivkami se pak nedá pracovat tak jako s vrstvami, takže bude nejlepší z nich vytvoˇrit obyˇcejnou vrstvu. 27

6. V ÝVOJ U bitmapových objektu˚ je na zaˇcátku potˇreba zapamatovat si jejich rozmˇery. Samotný objekt muže ˚ být zmenšený, ale po otevˇrení objektu jsou všechny vrstvy nezmˇenˇené v puvodní ˚ podobˇe. Pokud by byly zkopírovány do hlavního souboru, mˇely by tedy jiné, nezmenšené rozmˇery. Ve funkci 6.6 je na rˇ ádcích 2-5 vidˇet získávání tˇechto rozmˇeru. ˚ Ty jsou pˇredány funkci na kopírování. Samotné zpracování probíhá stejnˇe jako u hlavního souboru s tím, že se inteligentní objekty mohou zanoˇrovat. Po zpracování je pˇridána složka do které se nakopírují všechny vrstvy, které pak budou vykopírovány do hlavního souboru. Nakonec je spuštˇena funkce na kopírování. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

f u n c t i o n p r o c e s s S m a r t O b j e c t ( image , Fname ) { var boundX = image . bounds [ 0 ] . value ; var boundY = image . bounds [ 1 ] . value ; var width = image . bounds [ 2 ] . value − boundX ; var h e i g h t = image . bounds [ 3 ] . value − boundY ; var l a y e r P a t h = "" + g e t P a r e n t P a t h ( image . p a r e n t ) ; var i d A c t i o n = stringIDToTypeID ( "placedLayerEditContents" ) ; var idDesc = new A c t i o n D e s c r i p t o r ( ) ; e x e c u t e A c t i o n ( idAction , idDesc , DialogModes .NO) ; // opakovani kodu pro zpracovani vrstev var f o l d e r = app . activeDocument . l a y e r S e t s . add ( ) ; app . activeDocument . a c t i v e L a y e r . name = app . activeDocument . name ; copyLayers ( f o l d e r , app . activeDocument . l a y e r s , boundX , boundY , Fname , width , height , invObj ) ; }

Zdrojový kód 6.6: Zpracování inteligentního objektu Kopírovací funkce 6.7 nejprve zjistí jak moc musí zmenšit jednotlivé vrstvy. Poté ještˇe provádí kontrolu na prázdnost vrstev a nakonec následuje samotný pˇresun. Ta si bere na vstupu jméno vrstvy a složku, do které se má daná vrstva pˇresunout. 1 2 3 4 5 6 7 8 9 10

f u n c t i o n copyLayers ( f o l d e r , l a y e r s , boundX , boundY , Fname , width , height , invObj ) { app . activeDocument . t r i m ( TrimType .TRANSPARENT) ; var widthResize = ( width / app . activeDocument . width ) ∗ 1 0 0 ; var h e i g h t R e s i z e = ( h e i g h t / app . activeDocument . h e i g h t ) ∗ 1 0 0 ; f o r ( var j = l a y e r s . length −1; j >= 0 ; j −−){ var l a y e r = l a y e r s [ j ] ; i f ( deleteEmptyLayer ( l a y e r ) ) { continue ; }

28

6. V ÝVOJ 11 12 13 14 15 16 17 18 19 20 21 22 23

app . activeDocument . a c t i v e L a y e r = l a y e r ; i f ( layer != folder ) { moveLayer ( l a y e r . name , f o l d e r . name ) ; } } app . activeDocument . a c t i v e L a y e r = f o l d e r ; app . activeDocument . a c t i v e L a y e r . r e s i z e ( widthResize . value , h e i g h t R e s i z e . value , AnchorPosition . MIDDLECENTER) ; app . activeDocument . a c t i v e L a y e r . t r a n s l a t e ( boundX , boundY ) ; f o r ( var i = 0 ; i < invObj . l e n g t h ; i ++) { invObj [ i ] . v i s i b l e = f a l s e ; } DpLayer ( l a y e r . name , Fname ) ; }

Zdrojový kód 6.7: Zkopírování vrstvy inteligentního objektu výše

6.3 Efekty, Masky a Prolnutí V kapitole 6.1 bylo rozhodnuto, že se efekty a masky vrstev budou rasterizovat. Rasterizace 6.8 probíhá tím zpusobem, ˚ že se vytvoˇrí prázdná vrstva pod právˇe zpracovávanou, poté se obˇe vyberou a provede se jejich slouˇcení. Prolnutí je vlastnost, která pˇri aplikaci na jednu vrstvu ovlivnuje ˇ ostatní vrstvy, které jsou obsahovˇe pod ní. Tento efekt se nedá nijak replikovat pomocí CSS stylu˚ ani JavaScriptu. Vˇetšina profesionálních grafiku˚ je s touto informací seznámena, a tak prolnutí nepoužívá. Ale stále se najdou tací, kteˇrí využijí i 10 prolnutí v jednom souboru. Jedinou možností jak prolnutí zpracovat je vyˇríznout oblast obsahující prolnutí a slouˇcit ji se stejným výˇrezem ostatních vrstev pod ní. Bohužel tento pˇrístup není možné v Adobe Photoshop skriptu použít, protože by extrémnˇe zvýšil složitost rasterizace a snížil výkon. Proto se prolnutí ignoruje a uživatel je o této skuteˇcnosti informován. 1 2 3 4 5

makeLayerBelow ( l a y e r . name + "_rast" ) ; selectNextLayers ( 1 ) ; mergeDown ( ) ;

Zdrojový kód 6.8: Rasterizace vrstvy I složky mohou obsahovat masky. Zde bychom ale nechtˇeli provést slouˇcení všech vrstev v ní obsažených. Mohlo by se nám stát, že slouˇcíme všechny vrstvy do jedné. Lepším postupem bude duplikovat masku na všechny vrstvy v ní obsažené. Kopírování obsluhuje 29

6. V ÝVOJ kód 6.9. Tento skript postupnˇe projde všechny vrstvy ze zpracovávané složky a každé z nich nastaví stejnou masku. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

i f ( folderWithMask ) { var copyed = new Array ( ) ; groups = g e t A l l L a y e r s B y I n d e x ( ) ; f o r ( var i = 0 ; i < groups . l e n g t h ; i ++) { makeActiveByIndex ( groups [ i ] , t r u e ) ; var l a y e r = app . activeDocument . a c t i v e L a y e r ; var maskCopyed = f a l s e ; i f ( c o n t a i n s ( copyed , l a y e r ) ) { deleteFolderMask ( i ) ; deleteMaskedLayer ( copyed , l a y e r ) ; } i f ( ( l a y e r . kind == n u l l ) && ( hasLayerMask ( ) || hasVectorMask ( ) ) ) { i f ( i > 0) { var j = i −1; var a r = new Array ( ) ; a r . push ( l a y e r ) ; makeActiveByIndex ( groups [ j ] , t r u e ) ; var copy = app . activeDocument . a c t i v e L a y e r ; var c h i l d r e n = l a y e r . l a y e r s . l e n g t h ; var count = 0 ; var prev = n u l l ; while ( ( c o n t a i n s ( ar , copy . p a r e n t ) ) && ( j >=0) ) { i f ( copy . kind ! = n u l l ) { copyMask ( i , j ) ; ++count ; } else { a r . u n s h i f t ( copy ) } −−j ; i f ( j >=0) { maskCopyed = t r u e ; makeActiveByIndex ( groups [ j ] , t r u e ) ; var copy = app . activeDocument . a c t i v e L a y e r ; } } i f ( maskCopyed ) { copyed [ copyed . l e n g t h ] = l a y e r ; i = j; } } } }

Zdrojový kód 6.9: Kopirování masky ze složky na vrstvu

6.4 Textové vrstvy Jak je patrné z obrázku 6.3, textovým vrstvám lze v programu Adobe Photoshop nastavit velké množství vlastností. Všechny tyto infor30

6. V ÝVOJ mace by bylo dobré zachovat i ve výsledném prototypu. Uživatel by tak mohl rychle pˇrizpusobit ˚ jednotlivá nastavení podle potˇreby pˇrímo v prototypovacím nástroji. Nemusel by tedy upravovat samotný soubor a poté ho znovu nahrávat do aplikace.

Obrázek 6.3: Možnost nastavení textových informací Vˇetšinu tˇechto nastavení by bylo možné replikovat pomocí CSS stylu. ˚ Problém nastává, pokud bychom chtˇeli replikovat fonty. Adobe Photoshop obsahuje v základní verzi desítky fontu˚ a uživatel si muže ˚ bez vˇetších problému, doinstalovat vlastní. Ty mohou být zdarma, ale i placené. Právˇe u placených bychom narazili. Není možné nakoupit všechny fonty, které existují na internetu. A nabízením jen volnˇe dostupných by textové vrstvy ztratily svuj ˚ vzhled. Pokud by totiž uživatel použil nˇejaký placený font, tak bychom ho nemˇeli cˇ ím nahradit. Druhou možností je požádat uživatele aby do systému nahrál všechny fonty, které použil pˇri vytváˇrení designu. Bohužel uživatel je bud’ nemusí mít nebo se o nˇe nebude chtít podˇelit, protože za nˇe zaplatil, a nedá je zdarma nˇejaké tˇretí aplikaci. Jedinou možností, která tedy zbývá je rasterizace textových vrstev. Což znamená, že budou všechny pˇrevedeny na obrázky a poté také jako obrázky použity ve vytváˇreném nástroji. Bˇehem procesu 31

6. V ÝVOJ rasterizace ale pˇrijdeme o již zminované ˇ informace. Proto se je rasterizaˇcní skript snaží zachovat a ukládá je do externího csv souboru. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

f u n c t i o n g e t T e x t I n f o ( l a y e r , prevPath , t e x t L a y e r I n d e x ) { var l a y e r P a t h = prevPath + g e t P a r e n t P a t h ( l a y e r . p a r e n t ) ; var t I = l a y e r . t e x t I t e m ; i f ( t I . c o n t e n t s ! = "" ) { var fontName = "" ; var f o n t = NULL; var s t y l e s = new Array ( ) ; i f ( t I . f o n t . typename == n u l l ) { fontName = "" + t I . f o n t ; } else { f o n t = A p p l i c a t i o n . f o n t s . getByName ( t I . f o n t ) ; fontName = f o n t . f a m i l y ; styles = font . style . s p l i t (" ") ; } var name = l a y e r . name ; var r e s o l u t i o n = app . activeDocument . r e s o l u t i o n / 7 2 ; var s i z e = t I . s i z e . value ∗ r e s o l u t i o n ; var u n d e r l i n e = t I . u n d e r l i n e == "UnderlineType.UNDERLINEOFF" ? false : true ; var s t y l e = " " ; f o r ( var i = 0 ; i < s t y l e s . l e n g t h ; i ++) { style = style + styles [ i ] + " "; } s t y l e = s t y l e . s u b s t r ( 0 , s t y l e . length −1) ; var l e t t e r _ s p a c i n g = ( t I . t r a c k i n g /1000) ; var l i n e _ h e i g h t = "" ; i f ( t I . useAutoLeading ) { l i n e _ h e i g h t = "auto" ; } else { l i n e _ h e i g h t = t I . l e a d i n g . value ; } var rgbC = t I . c o l o r . rgb ; var c o l o r = "("+ Math . round ( rgbC . red ) + "," + Math . round ( rgbC . green ) + ","+ Math . round ( rgbC . blue ) + ")" ; var h o r i z o n t a l _ s c a l e = t I . h o r i z o n t a l S c a l e ; var v e r t i c a l _ s c a l e = t I . v e r t i c a l S c a l e ; } }

Zdrojový kód 6.10: Získání informací z textové vrstvy

Z pˇriložené funkce 6.10 je patrné, že se pro získávání informací o textové vrstvˇe využívá tˇrída textItem. Tato tˇrída v nˇekterých verzích Adobe Photoshopu opravdu obsahuje potˇrebné informace. Bohužel ty jsou tam ukládány dvˇema zpusoby, ˚ a tak se je script snaží rˇ ešit na rˇ ádcích 8-14. 32

6. V ÝVOJ

6.5 Porovnání po rasterizaci Je dobré provézt porovnání obrázku˚ pˇred a po provedení pˇredzpracování. Toto porovnání se provádí automaticky na základˇe pixelu. ˚ Postupnˇe se vezme pixel po pixelu ze vstupního obrázku a srovná se s pixelem na pˇríslušné pozici u obrázku po zpracování. V pˇriložené funkci 6.11 je patrné, že cyklus postupnˇe rˇ ádky a sloupce obrázku˚ a porovnává data v tˇechto pixelech. 1 2 3 4 5 6 7 8 9 10 11 12 13 14

f o r ( i n t row = 0 ; row< h e i g h t ; row++) { o r i g D a t a = o r i g . g e t P i x e l s ( 0 , row , width , 1 , o r i g D a t a ) ; r a s t e r D a t a = r a s t e r . g e t P i x e l s ( 0 , row , width , 1 , r a s t e r D a t a ) ; f o r ( i n t c o l = 0 ; c o l <width∗ c h a n n e l s ; c o l +=c h a n n e l s ) { boolean e q u a l s = t r u e ; f o r ( i n t i = 0 ; i
Zdrojový kód 6.11: Porovnání dvou obrázku˚

6.6 Databázový model Databáze byla navrhnuta takovým zpusobem, ˚ aby bylo možné v ní jednoduše vyhledávat pˇres jednotlivé sloupce. Z tohoto duvodu ˚ nejsou nˇekteré informace ukládány jako asociované pole, ale jako samostatné rˇ ádky. Pˇríklad tohoto ukládání je možné vidˇet na tabulkách page a page_layer. Tabulka page_layer ukládá identifikátory viditelných vrstev na dané stránce. Toto ukládání by šlo provádˇet pomocí pole uloženého ve sloupci u tabulky page. Ale pokud bude potˇreba zjistit kolikrát je urˇcitá vrstva použitá v celém designu, je výhodnˇejší ukládat tyto informace samostatnˇe. Pro ukládání dat byl zvolen databázový systém MySQL. Vice informací o tomto databázovém systému˚ lze nalézt v kapitole 5.1.4. Soupis tabulek databáze •

options - obsahuje hlavní nastavení pro aplikaci. Jsou zde ulo33

6. V ÝVOJ ženy informace jako maximální povolená velikost souboru, emaily pro podporu, pˇrednastavené emailové zprávy, atd •

users - obsahuje data o registrovaných uživatelích

•

psd_files - obsahuje data k jednotlivým nahraným PSD souborum ˚

•

layer - obsahuje informace o jednotlivých vrstvách urˇcitého PSD souboru

•

text_layer - obsahuje informace o textových vrstvách, které byly získány pomocí scriptu

•

page - obsahuje informace o vytvoˇrených stránkách prototypu

•

page_layer - obsahuje odkazy na vrstvy, které jsou na urˇcité stránce viditelné

Obrázek 6.4: Databázový model

34

7 Uživatelské testování Proces testování je duležitou ˚ souˇcástí každého projektu. Bˇehem vývoje byla aplikace podrobena výkonnostním testum, ˚ aby bylo zajištˇeno co nejrychlejší zpracování vstupních souboru. ˚ V kapitole 6.1.3 lze nalézt informace a graf výkonnosti obou verzí skriptu. ˚ Po dokonˇcení vývoje, byla aplikace nasazena do testovacího provozu. Na designérských a vývojáˇrských diskuzím byli osloveni uživatelé s žádostí o pomoc pˇri funkˇcním testování. Do testování se zapojilo 420 vývojáˇru˚ a designéru˚ z celého svˇeta. Nejvˇetší zastoupení ˇ mˇeli uživatelé ze Spojených Státu, ˚ Brazílie, Ceské Republiky a Indie. Tito uživatelé nahráli do aplikace 730 PSD souboru. ˚ Ne všechny se povedlo na první pokus zpracovat. Objevily se drobné problémy s rasterizaˇcním skriptem. Po jeho úpravách se povedlo pˇrevézt i zbytek nahraných souboru˚ a v souˇcasné dobˇe je pˇrevedeno 100% nahraných souboru. ˚ Nahrané soubory obsahovaly prumˇ ˚ ernˇe 267 vrstev, ale objevily se i extrémy jako 1036 vrstev.

7.1 Nalezené problémy pˇri testování Bˇehem dosavadního testovacího provozu se objevily problémy pˇrevážnˇe spojené s rasterizaˇcním scriptem. Nˇekteré z vˇetších chyb jsou rozepsány i s rˇ ešením v kapitolách 6.2 a 6.4. Problémy u textových vrstev vznikly nekompatibilitou Adobe Photoshop verze CS5 a CS6.

35

8 Popis použití Tato kapitola popisuje na jednoduchých pˇríkladech, jak celá aplikace funguje. Budou zde probrány jednotlivé kroky od pˇrihlášení až po generování odkazu prezentace. Ke každému z kroku˚ je pˇriložen a popsán obrázek samotného rozhraní.

8.1 Pˇrihlášení a registrace Pˇred samotnou prací s aplikací je nutné se registrovat a poté pˇrihlásit. Registrace je nutná z duvodu ˚ umožnˇení pozdˇejšího pˇrístupu k již zpracovaným souborum. ˚ Uživateli tedy postaˇcí nahrát soubor do systému jen jednou a dostane se k nˇemu kdykoliv bude chtít. Pˇri registraci jsou vyžadovány pouze email a heslo. Další údaje nejsou pro práci s aplikací potˇreba. Emailová adresa je povinná, jelikož uživatel na ni bude dostávat hlášení o ukonˇcení zpracovávání nahraného souboru. Nemusí tedy cˇ ekat až se nahraný soubor zpracuje.

8.2 Pˇredzpracování Je-li soubor úspˇešnˇe nahrán, stránka se automaticky pˇresmˇeruje na rasterizaci. V ukazateli prubˇ ˚ ehu zpracování (viz obr. 8.1) se postupnˇe objevují hlášení, v jaké fázi rasterizace se daný soubor nachází. Tato operace nemá pˇresnˇe urˇcený cˇ as trvání, závisí na velikosti vstupního souboru, poˇctu vrstev a složitosti designu. Hlavním ukazatelem je, kolik souboru˚ je ve frontˇe pˇred právˇe nahraným. Celkem muže ˚ uživatel vidˇet cˇ tyˇri druhy hlášení, které ho informují o prubˇ ˚ ehu rasterizace: •

Queued, waiting for processing - soubor cˇ eká ve frontˇe na zpracování

•

Rasterization in progress - právˇe probíhá rasterizace

•

PSD is ready for prototyping - vše bylo dokonˇceno a je možno zaˇcít s prototypováním 36

8. P OPIS POUŽITÍ •

Error - bˇehem rasterizace nastala chyba

Obrázek 8.1: Prubˇ ˚ eh rasterizace Uživatel si muže ˚ zkrátit dobu cˇ ekání na dokonˇcení tohoto procesu zkoumáním nápovˇedy pro prototypování, které ho cˇ eká v dalším kroku.

8.3 Porovnání Jak bylo popsáno v kapitole 4, je dobré uživatele upozornit, že se jeho vstupní soubor zmˇenil a jak. Proto je mu po ukonˇcení rasterizaˇcního procesu nabídnuto srovnání obsahu˚ souboru˚ pˇred a po zpracování. Procentuální hodnotou je vyjádˇrena pixelová podobnost obou obrázku. ˚ Prubˇ ˚ eh tohoto porovnání je popsán v kapitole 6.5. Najetím myší do jednoho z oken je možné si celý obrázek pˇriblížit a porovnat zmˇeny podrobnˇeji. 37

8. P OPIS POUŽITÍ

Obrázek 8.2: Porovnání souboru˚ pˇred a po úpravách

8.4 Prototypování Po dokonˇcení zpracovávání nahraného souboru se uživatel pˇresune k vytváˇrení prototypu. ˚ Prototypovací stránka (viz obr. 8.3) se skládá ze tˇrí cˇ ástí. Nejvˇetší prostor stránky zastupují obrázky jednotlivých vrstev. Kliknutím na vrstvu se v levém sloupci zobrazí informace o jejím jménˇe, velikosti a zda obsahuje nˇejaký odkaz. Pokud je daná vrstva textová, jsou pod již zmínˇenými informacemi zobrazena ještˇe získaná data o písmu a barvách. Vlevo se nachází sloupec obsahující funkcionalitu pro práci s vrstvami. Pomocí rozklikávacího menu jsou zde zobrazeny jednotlivé vrstvy. Poˇradí vrstev i zanoˇrení je shodné s tím v nahraném souboru. Ikona oka uvádí jejich aktuální viditelnost. Pomocí stejné ikony mu˚ žeme skrýt cˇ i zobrazit jednotlivé vrstvy cˇ i celé složky. Pod výpisem vrstev u informací se nachází možnost pˇridávání odkazu na jinou stránku. Pokud je na nˇejakou vrstvu pˇridán odkaz, je duplikován na další stránky obsahující stejnou viditelnou vrstvu. Tudíž není nutné na každé ze stránek pˇridávat odkaz znovu. 38

8. P OPIS POUŽITÍ Dolní cˇ ást stránky obsahuje tlaˇcítka pro práci se stránkami, prototypem a také nápovˇedu, pokud by si uživatel nevˇedˇel rady.

Obrázek 8.3: Prototypování Soupis tlaˇcítek •

Create Page - urˇceno pro vytvoˇrení nových stránek. Po kliknutí na nˇej, je ještˇe vyžadováno zadání názvu dané stránky. Do databáze se uloží informace o tom, které vrstvy jsou v daném souboru zrovna skryté

•

Save - je-li potˇreba uložit odkaz na jinou stránku nebo aktuálnˇejší nastavení

•

Generate - pokud je pˇríprava prototypu dokonˇcena je možné si nechat vygenerovat celkový prototyp

•

Download - je možné si stáhnout všechny obrázky, které byly vytaženy ze zobrazeného souboru. Stažený archiv obsahuje i CSV soubor s informacemi o jednotlivých textových vrstvách

•

Help - nápovˇeda jak pracovat s touto prototypovací aplikací

39

9 Závˇer Výsledkem diplomové práce je aplikace, která umožnuje ˇ uživatelum ˚ vytvoˇrit interaktivní prezentaci obsahu PSD souboru. ˚ Poslední verzi aplikace je možno si vyzkoušet na webu http://designborg. com Velice duležitou ˚ funkcionalitou, která vznikla bˇehem vývoje této aplikace, je skript pro program Adobe Photoshop, který znaˇcnˇe zrychluje práci s tímto programem. Script je možné využít samostatnˇe bez potˇreby návaznosti na zbytek aplikace. Tím se jeho užiteˇcnost ještˇe zvyšuje. Bˇehem vývoje se vyskytly ruzné ˚ problémy jako tˇreba rychlost zpracování nahraného souboru, nekompatibilita verzí programu Adobe Photoshop, aj. Všechny tyto problémy byly postupnˇe vyˇrešeny a aplikace již bˇeží bez problému. ˚

9.1 Budoucí rozšiˇritelnost Bˇehem testovacího procesu aplikace pˇricházely od uživatelu˚ emaily s návrhy na vylepšení, která by bylo dobré v budoucnu do této aplikace doprogramovat. Jelikož nebyla souˇcástí zadání, není ani jeden z nich souˇcástí výsledné aplikace. V následujících podkapitolách jsou struˇcnˇe popsána nejžádanˇejší rozšíˇrení.

9.1.1 Komentování výsledného prototypu Pokud je výsledný prototyp nˇekomu prezentován, nebo si ho jen urcˇ itá osoba prohlíží, bylo by vhodné dát jí možnost okomentovat jednotlivé cˇ ásti designu. Funkˇcní pˇredstava je taková, že po výbˇeru oblasti, která má být okomentována, se zobrazí jednoduché pole pro pˇridání komentáˇre. Jednotlivé komentáˇre by mˇely být sdílené mezi uživateli, kteˇrí mají k návrhu pˇrístup, aby mohli odpovídat na komentáˇre jiných uživatelu. ˚ 40

ˇ 9. Z ÁV ER

9.1.2 Zlepšení zadávání odkazu˚ Souˇcasná verze aplikace umožnuje ˇ pˇridávání odkazu˚ na jiné stránky tak, že uživatel vybere vrstvu a poté odkaz, kam má po kliknutí stránka smˇerˇ ovat. Pokud chce uživatel pˇridat více stejných odkazu˚ na jednu stránku, musí to udˇelat pro každou vrstvu zvlášt’. Bylo by dobré pˇridat možnost výbˇeru více vrstev nebo oblastí, kam chci pˇridat odkaz. 9.1.3 Aktualizace nahraného souboru Jsou-li ve vstupním souboru provedeny nˇejaké zmˇeny a uživatel je chce promítnout do prototypu, musí vytvoˇrit úplnˇe nový. Souˇcasná verze nepodporuje žádnou metodu verzování cˇ i aktualizace již nahraného souboru. Do budoucna by mohla být pˇridána právˇe možnost aktualizace celého souboru s tím, že všechna nastavení pro prezentaci zustanou ˚ nezmˇenˇená.

41

Literatura [1] DAYLEY, Lisa DaNae a Brad DAYLEY. Photoshop CS6 bible. Indianapolis, IN: Wiley, 2012, 1065 s. ISBN 9781118224779. [2] Adobe Photoshop CS6: oficiální výukový kurz. 1. vyd. Brno: Computer Press, 2013, 375 s. ISBN 978-80-251-3736-9. [3] WEST, Angela. 20 Years of Adobe Photoshop. [online]. 2010 [cit. 2013-09-17]. Dostupné z WWW: . [4] Adobe Photoshop: File Formats Specification. [online]. 2013 [cit. 2014-02-21]. Dostupné z WWW: [5] GONCALVES, Antonio. Beginning Java EE 6 Platform with GlassFish 3: from novice to professional. New ed. Berkeley, CA: Apress, 2009. ISBN 978-143-0219-545. [6] JOHNSON, Rod. Professional Java development with the Spring framework. Indianapolis: Wiley Publishing, 2005, 644 s. ISBN 07-6457483-3. [7] The Java EE 5 Tutorial. [online]. 2010 [cit. 2014-02-17]. Dostupné z WWW: [8] Hibernate ORM documentation. [online]. [cit. 2014-01-20]. Dostupné z WWW: http://hibernate.org/orm/ documentation/> [9] TURNER, James. MySQL and JSP Web applications. Indianapolis, Ind.: Sams, 2002, 560 s. ISBN 06-723-2309-5. [10] KEITH, Mike a Merrick SCHNICARIOL. Pro JPA 2: mastering the Java Persistence API. New York: Distributed to the Book trade worldwide by Springer-Verlag New York, 2009, 503 s. Expert’s voice in Java technology. ISBN 14-302-1956-4. 42

ˇ 9. Z ÁV ER

[11] BERGSTEN, Hans. JavaServer pages. 2nd ed. Sebastopol, Calif.: O’Reilly, 2002, 660 s. ISBN 05-960-0317-X. [12] Photoshop Constants Rosetta Stone. [online]. [cit. 2013-08-14]. Dostupné z WWW:http://www.pcpix.com/Photoshop/char. htm>

43

Seznam zdrojových kódu˚ 5.1 5.2 6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 6.9 6.10 6.11

Ukázka zápisu Java kódu v JPS souboru . . . . Ukázka zápisu Ajax kódu . . . . . . . . . . . . Procházení souboru 1. verze . . . . . . . . . . . Procházení souboru 2. verze . . . . . . . . . . . Nastavení viditelnosti pˇres parametr . . . . . . Nastavení viditelnosti pˇres Adobe Action . . . Zjištˇení typu inteligentního objektu . . . . . . . Zpracování inteligentního objektu . . . . . . . Zkopírování vrstvy inteligentního objektu výše Rasterizace vrstvy . . . . . . . . . . . . . . . . . Kopirování masky ze složky na vrstvu . . . . . Získání informací z textové vrstvy . . . . . . . Porovnání dvou obrázku˚ . . . . . . . . . . . . .

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

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

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

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

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

17 18 22 25 26 26 27 28 28 29 30 32 33

44

Seznam obrázku˚ 3.1 3.2 3.3 3.4 3.5 3.6

Ukázka aplikace Marvel 6 Ukázka aplikace Easel 7 Ukázka aplikace Axure RP 8 Adobe Photoshop 10 Paint.NET 10 Ukázka aplikace Photopea 11

6.1 6.2 6.3 6.4

Graf pˇredzpracování PSD souboru 20 Výkonnostní test rasterizaˇcních scriptu˚ 23 Možnost nastavení textových informací 31 Databázový model 34

8.1 8.2 8.3

Prubˇ ˚ eh rasterizace 37 Porovnání souboru˚ pˇred a po úpravách 38 Prototypování 39

45