Masarykova univerzita Fakulta informatiky Elektronická autorská prezentácia do mobilných zariadení Bakalárska práca Miroslav Kolesár Brno, jar 2014 Prehlásenie Prehlasujem, že táto bakalárska práca je mojím pôvodným autorským dielom, ktoré som vypracoval samostatne. Všetky zdroje, pramene a literatúru, ktoré som pri vypracovaní používal alebo z nich čerpal, v práci riadne citujem s uvedením úplného odkazu na príslušný zdroj. Miroslav Kolesár Vedúci práce: MgA. Jana Malíková ii Poďakovanie Ďakujem predovšetkým MgA. Jane Malíkovej za odborné vedenie a konzultácie, ktoré mi pomohli pri spracovaní tejto práce. Ďalej ďakujem mojej priateľke Dine za trpezlivosť a podporu. V neposledom rade ďakujem mojej mame za to, že mi umožnila štúdium na tejto škole. iii Zhrnutie Teoretická časť práce sa zaoberá problematikou autorského portfolia, jeho grafickou a typografickou úpravou pre tlač aj elektronické zariadenia. Praktická časí popisuje proces tvorby osobného autorského portfolia. Výstupom praktickej časti je autorské portfolio pre tlač a tablety spolu s podrobným návodom na tvorbu elektronických publikácií v Adobe InDesign. iv Kľúčové slová digitálna publikácia, portfólio, layout, autorská prezentácia, typografia, tab-let, aplikácia v Obsah 1 Úvod................................... 3 1.1 Teoretické ciele .......................... 3 1.2 Praktické ciele........................... 3 2 Autorská prezentácia.......................... 4 2.1 Vysvetlenie pojmu ........................ 4 2.2 Fyzická prezentácia........................ 4 2.2.1 Vizitka........................... 4 2.2.2 Portfolio.......................... 4 2.3 Elektronická prezentácia..................... 5 2.3.1 Internetová stránka.................... 5 2.3.2 Sociálne siete....................... 6 2.3.3 Tablety........................... 7 3 Layout .................................. 8 3.1 Základné pravidlá a pojmy................... 8 3.1.1 Zlatý rez.......................... 8 3.1.2 Pravidlo tretín....................... 9 3.1.3 Vizuálny stred ...................... 9 3.1.4 Fibonacciho čísla pri tvorbe layoutu.......... 9 3.1.5 Renardove čísla...................... 10 3.2 Mriežky a objekty......................... 10 3.3 Adaptívny layout......................... 12 3.3.1 Vefkost a rozlíšenie displeja............... 12 3.3.2 Hustota pixelov displeja................. 13 3.4 Rozdiely v layoutepre tlač a elektronické zariadenia..... 14 4 Typografia a písmo........................... 15 4.1 Sadzba textu............................ 15 4.1.1 Rozpal písma....................... 15 4.1.2 Preklad........................... 15 4.1.3 Ligatúry.......................... 16 4.2 Rozdiely v typografii medzi elektronickými a tlačenými dokumentárni ............................. 16 5 Digitálne publikovanie........................ 17 5.1 Príklady použitia a výstupné formáty............. 17 5.1.1 PDF............................. 17 5.1.2 ePub............................ 17 5.1.3 Aplikácia ......................... 17 5.2 Adobe InDesign.......................... 19 1 5.2.1 Alternate layout a Liquid layout............ 20 5.2.2 Content Collector/Placer/Conveyor.......... 21 5.2.3 Adobe Content Viewer.................. 21 5.2.4 Adobe Digital Publishing Suite............. 22 5.3 Alternatívny softer ....................... 24 5.3.1 iBooks Author....................... 24 5.3.2 Booktype.......................... 24 5.3.3 Inkling Habitat...................... 24 5.3.4 Baker Framework..................... 25 5.4 Rozdiely medzi elektronickou a tlačenou publikáciou .... 25 6 Distribúcia................................ 26 6.1 Apple App Store ......................... 26 6.2 Google Play............................ 26 6.3 Stiahnutelhý PDF súbor..................... 26 7 Návrh a príprava autorskej prezentácie............... 27 7.1 Analýza trhu............................ 27 7.2 Výber materiálu.......................... 27 7.3 Tvorba skíc............................. 27 7.4 Finálny návrh v Adobe Illustrator................ 29 7.5 Voľba technológie......................... 31 7.6 Príprava dát............................ 31 7.6.1 Obrázky.......................... 31 7.6.2 Video............................ 31 8 Práca v Adobe InDesign........................ 32 8.1 Alternatívny layout dokumentu pre tlač............ 32 8.2 Interaktívne objekty........................ 32 8.2.1 Slideshow......................... 32 8.2.2 Video............................ 35 8.2.3 Audio ........................... 39 8.2.4 Webový obsah ...................... 40 8.2.5 Posúvanie obsahu .................... 43 8.2.6 360°Slideshow....................... 48 8.2.7 Odkazy .......................... 49 8.3 Layout pre rôzne zariadenia................... 51 8.4 Testovanie, export a distribúcia................. 51 8.4.1 Testovanie na PC a mobilných zariadeniach ..... 51 8.4.2 Vytvorenie aplikácie................... 53 9 Záver................................... 55 10 Prílohy.................................. 60 2 1 Úvod Popularita tabletov a mobilných telefónov s dotykovou obrazovkou po predstavení telefonu iPhone v roku 2007 a tabletu iPad v roku 2010 spoločnosťou Apple priniesla nové možnosti v oblasti elektronických publikácií. Spoločnosť The Condé Nast Publications v roku 2010 predstavila elektronickú verziu časopisu Wired určenú pre tablety a ukázala tak možnosti využitia týchto zariadení a naznačila novú cestu, ktorou sa bude uberať publikovanie. [12] Príklad tejto firmy nasledovalo mnoho ďalších vydavateľstiev, a portfolio svojich tlačených časopisov rozšírili o elektronické publikácie. Týmto krokom svojim čitateľom sprístupnili obsah, ktorý klasické publikácie obsahovať nemôžu. Podobný proces nastal aj u prezentácie firmy, alebo osobného portfolia - interaktívne prezentácie, ktoré dokážu svojou užívateľskou prívetivosťou vzbudiť záujem začína mnoho spoločností i jednotlivcov využívať ako formu propagácie. Vizuálne prezentovanie produktov a služieb napomáha zákazníkovi pri jeho rozhodovaní o kúpe výrobku alebo služby. 1.1 Teoretické ciele Teoretická časť práce sa zaoberá problematikou autorského portfolia, analýzou foriem a možností interaktívnych elektronických prezentácií pre tablety, ich typografickou a grafickou úpravou. Nasledujúca časť bakalárskej práce porovnáva návrh layoutu1 pre mobilné zariadenia a tlačené dokumenty a rozoberá kľúčové rozdiely medzi nimi. Zaoberá sa dostupným softvérom a kapitola venovaná distribúcii rozoberá možnosti cesty prezentácie k zákazníkovi. 1.2 Praktické ciele Cieľom praktickej časti je vytvorenie osobnej autorskej elektronickej prezentácie obsahujúcej fotografie, grafiku a video v programe Adobe InDe-sign na základe grafického manuálu vytvoreného v predmete Grafický Design II a dodržania jednotného vizuálneho štýlu. Výstupom je autorské portfolio vo formáte DPS aplikácie, jeho tlačená verzia a podrobný návod na tvorbu digitálnych publikácií v aplikácii Adobe InDesign. 1. Pojem layout je definovaný v tretej kapitole tejto práce. 3 2 Autorská prezentácia 2.1 Vysvetlenie pojmu V oblasti fotografie a grafického designu pojem autorská prezentácia chápeme pod významom predstavenia najlepších diel autora. Účelom prezentácie je zvyčajne predaj produktu, alebo služby, no využitie je takmer neobmedzené - od ukážok tvorby na pracovných pohovoroch u grafických designerov alebo architektov, až po získavanie odozvy od kolegov pri výskume a vývoji. [20] Autorskú prezentáciu je podľa formy možné rozdeliť do dvoch kategórií, a to prezentácia fyzická a elektronická. [33] 2.2 Fyzická prezentácia 2.2.1 Vizitka Vizitka je v sfére marketingu štandardným spôsobom podávania základných informácií o spoločnosti, alebo osobe. Vizitka je súčasťou celkovej vizuálnej identity a svojím vzhľadom jednoznačne definuje osobu, alebo spoločnosť od ktorej vizitka pochádza. S cieľom odlíšenia sa od konkurencie sa v praxi okrem štandardnej veľkosti 9x5cm používajú rôznorodé veľkosti, formáty a materiály vizitiek. 2.2.2 Portfolio V čase digitálnych technológií drvivá väčšina kreatívnych ľudí používa internetové portfolio, zatiaľ čo jeho klasická hmatateľná podoba ostáva čoraz viac v zabudnutí. Práve preto, ak designér takýmto portfóliom disponuje, je to jeho osobná výhoda voči ostatným konkurentom. Fyzické portfolio môže mať mnoho podôb, ktoré závisia od rôznych faktorov, napríklad, ako často je portfolio aktualizované. Môže to byť viazaná brožúra, alebo aj samostatné listy. V oblasti grafiky, fotografie či architektúry je časté použitie tlačeného portfolia ako doplnku k životopisu pri prijímacích pohovoroch. [20] Podľa knihy Graphic Design: A user's manuál od Adriana Shaughnes-syho má fyzická verzia portfolia dva hlavné aspekty. Prvým je samotný obsah portfolia, práce designéra či fotografa a druhým, nemenej dôležitým aspektom je, akým spôsobom je obsah podávaný klientovi. Tieto dva aspekty musia existovať v harmónii, pretože bez kvalitného obsahu je forma úplne nepodstatná a naopak, zlý spôsob prezentovania anuluje kvalitu obsahu. 4 2. Autorská prezentácia Pozastavím sa najskôr pri druhom aspekte. Prezentovaný materiál by v prvom rade mal byť bezchybný, úhľadne uložený a hlavne nepokrčený a bez akýchkoľvek známok nečistôt, či odtlačkov prstov. Obsahom portfolia je výber najreprezentatívnejších prác logicky usporiadaných do sekcií. Podľa druhu zamerania, daná práca môže obsahovať krátky popis. Pri dostatku obsahového materiálu je vhodné, ak internetové a tlačené portfolio obsahujú aspoň čiastočne odlišné práce. Nedochádza potom k momentu, keď klient po prelistovaní portfolia nenarazil na nič nové a všetky práce už zhliadol na webovej stránke. [33] 2.3 Elektronická prezentácia 2.3.1 Internetová stránka Prvým miestom, kde klient, alebo agentúra začína hľadanie fotografa, designéra, alebo inej osoby u ktorej sa o jej najatí rozhoduje na základe predchádzajúcej práce, je internet. Preto je v súčasnosti absolútnym základom prezentovania tvorby internetové portfolio. V digitálnej dobe je oveľa väčším problémom vyčnievať z radu svojím online elektronickým portfóliom, ako jeho tlačenou verziou z dôvodu obrovskej konkurencie v tejto oblasti. Internetové portfolio je veľmi dostupným spôsobom ako sa prezentovať a tomu odpovedá aj kvantita prezentácií. Z tohto dôvodu je nesmierne dôležité zaujať internetovým portfóliom hneď v prvom okamžiku. O úspechu, alebo neúspechu internetového portfolia rozhodujú štyri kľúčové faktory [33]: 1. Jasné a zrozumiteľné vyjadrenie kto sme 2. Čo robíme 3. Ukážky samotnej práce 4. Možnosť jednoduchého kontaktu Definovaním osobných údajov, vzdelania, prípadne dosiahnutých úspechov a určením presného zamerania je klientovi podaná informácia na základe ktorej sa dozvie, či sú poskytované služby pre neho vhodné. Obsahová stránka portfolia by mala pokrývať všetky základné kategórie práce a rozsah jednotlivých kategórií by mal byť minimalistický v zmysle - radšej jedna či dve skvelé práce, ako 10 priemerných. Internetové portfolio by malo klientovi umožňovať jednoduchú formu kontaktu - e-mail, telefónne číslo, prípadne kontaktný formulár. 5 2. Autorská prezentácia 2.3.2 Sociálne siete K internetové]' prezentácii, mimo vlastného portfolia, neoddeliteľne patria sociálne siete. Pre potreby grafického designu a fotografie môžeme sociálne siete rozdeliť do dvoch kategórií: 1. Sociálne siete slúžiace na prezentovanie a propagáciu prác širokej verejnosti. Napríklad Facebook, Twitter, Google+. 2. Komunitné sociálne siete zamerané na zviditeľnenie sa v danom odbore, získanie konštruktívnej kritiky alebo pracovných príležitostí. Príklady komunitných sociálnych sietí: Behance Network, Dribble, Lin-kedln, DeviantArt, DesignRelated, 500px... Nie je nevyhnutné vlastniť účet na každej sociálnej sieti, pomôcť pri výbere môže nasledujúci stručný rozbor profesionálnych sociálnych sietí s uvedeným zameraním, dôvodmi ich používania a krátkou históriou. Behance Network Behance Network je jedna z najznámejších a najúspešnejších sociálnych sietí určených pre grafikov a designerov. Jej vznik sa datuje do roku 2006 a odvtedy poskytuje možnosti vytvárania portfolií, komunikácie či hľadania práce. Registrovanie používateľov na tejto sociálnej sieti nie je žiadnym spôsobom obmedzené. Sociálna sieť Behance Network sa stala súčasťou služby Creative Cloud od spoločnosti Adobe. Pridávanie novej tvorby a získavanie odozvy integrované priamo v aplikáciách môže byť dôvodom pre použitie práve tejto sociálnej siete. [16] DesignRelated Projekt DesignRelated odštartoval v roku 2009. Používateľom umožňuje vytvárať vlastné portfolia, komunikovať s ostatnými designermi, získavať inšpiráciu v ich práci, ale aj pracovné príležitosti. Kvalita obsahu tejto ko-munitnej sociálnej site je zabezpečená obmedzením registrácie nových používateľov na základe posúdenia aktuálneho portfolia. [18] 500px Webstránka 500px je v prevádzke od roku 2009 a jej popularita má stúpajúcu tendenciu. Je určená pre fotografov a vyznačuje sa veľmi kvalitným obsahom, možnosťou tvorby portfolií a predaja fotografií. [1] 6 2. Autorská prezentácia Linkedln Narozdiel od vyššie uvedených sociálnych sietí, portál Linkedln nie je zameraný primárne na prezentovanie tvorby a komunikáciu s ostatnými ľuďmi v odbore, ale zameranie je viac komerčné. Jednotlivci, alebo spoločnosti túto sociálnu sieť využívajú s cieľom nájsť pracovnú silu, alebo prácu v rôznych odboroch. V prevádzke je od roku 2003. [29] 2.3.3 Tablety Elektronická prezentácia na mobilných zariadenia ako je tablet spája výhody fyzickej a internetovej prezentácie tým, že záujemcovi o produkt, alebo službu dovoľuje zariadenie s prezentáciou fyzicky chytiť do rúk a listovať v nej podobne ako v tlačenom katalógu a zároveň si zachováva nízkoná-kladovosť a možnosť jednoduchej a rýchlej aktualizácie obsahu. Pridanou hodnotou oproti tlačenej verzii sú médiá nedostupné v tlači ako audio a video, prípadne väčšie množstvo obsahu. Možnosťami a výberom vhodného formátu digitálnej prezentácie pre tablet sa zaoberá kapitola Digitálne publikovanie. 7 3 Layout Gavin Ambrose a Paul Harris vo svojej knihe Layout, definovali tento pojem ako umiestnenie objektov, obrázkov a typografie na stránku. Primárnym účelom takéhoto rozmiestňovania je pripraviť pre diváka obsah v čo najčitateľnejšej, logicky usporiadanej a zrozumiteľnej podobe. Niektoré la-youty pôsobia pre ľudské oko zaujímavejšie, príjemnejšie zatiaľ čo iné vytvárajú opačný dojem. [10] Grafické rozloženie objektov na stránke sa riadi princípmi, ktoré sú výsledkom stáročí vývoja tlačiarenských techník a ktorých základné myšlienky sú aplikovateľné aj na elektronické publikácie. 3.1 Základné pravidlá a pojmy Niektoré zavedené a používané normy pri rozvrhovaní stránky sú výsledkom práce stredovekých učencov, iné vznikli postupným vývojom v neskorších obdobiach. Všetky významné diela výtvarných umelcov nesú v sebe zakomponované poznatky a objavy vtedajších matematikov a tieto vedomosti môžeme uplatniť aj v dnešnom designe. Namiesto náhodného určovania pomeru, použitím číselných radov zachováme vzájomný pomer a vzájomnú harmóniu medzi jednotlivými objektmi. [10] 3.1.1 Zlatý rez Za zlatý rez je považované rozdelenie v pomere 8:13, pri tomto rozdelení, je vzťah väčšej časti k menšej rovnaký, ako väčšej časti k celku, je označovaný gréckym písmenom <í> a jeho hodnota je približne 1.618. V prírode sa tento pomer vyskytuje pri rastových obrazcoch ulít, včelích plástoch, alebo v pomere plutiev delfína k jeho telu [10]. Zlatý rez je v tvorbe layoutu používaný pri navrhovaní sadzobného obrazca. a b a+b Obr. 3.1: Zlatý rez [10] a+b _ a _ q a b 8 3. Layout 3.1.2 Pravidlo tretín Známy prostriedok fotografov je možné použiť aj pri návrhu rozloženia obsahu, väčšinou ide o umiestnenie značky alebo logotypu v ľavej hornej časti, či navigácia v ľavej, alebo hornej časti. [26] Obr. 3.2: Diagram zobrazuje oblasti v priesečníkoch tretín, kde divák najskôr začína hľadať objekty [10] 3.1.3 Vizuálny stred Je bod na ktorom spočinie pohľad diváka, oproti matematickému stredu, sa vizuálny stred nachádza o niečo vyššie a vpravo. V prípade umiestnenia do matematického stredu má divák pocit, že objekt sa nachádza nižšie ako v skutočnosti. 3.1.4 Fibonacciho čísla pri tvorbe layoutu Fibonacciho čísla sú matematickou postupnosťou v ktorej každé číslo je súčtom predchádzajúcich dvoch čísel v rade. Pri tvorbe layoutu designérovi 9 3. Layout pomáhajú s vytvorením primerane umiesteného sadzobného obrazca. Napríklad v mriežke o veľkosti 34x55 jednotiek je textová časť umiestená 8 jednotiek od horného kraja, 8 od vonkajšieho 5 od vnútorného a 13 jednotiek od dolného okraja. [10] 3.1.5 Renardove čísla Renardov systém delí interval od 1 do 10 na 5,10,20 alebo 40 zaokrúhlených hodnôt. Renardove čísla sú špecifikované v štandarde ISO 3. Pri vychádzaní zo základného radu R5 (1.00, 1.60, 2.50, 4.00, 6.30) môže designér rozdeliť stránku o veľkosti A4 na časti s veľkosťou lOmm, 16mm, 25mm, 40mm, 63mm lOOmm, 160mm a 250mm. [10] 3.2 Mriežky a objekty Mriežky sú pri tvorbe layoutu nenahraditeľným, aj keď na prvý pohľad neviditeľným stavebným prvkom. Umiestňovanie pomocou mriežok je pre človeka prirodzené, a navyše pridáva designu pravidelnosť a logickú štruktúru. Základnými stavebnými prvkami mriežky sú stĺpce, moduly, okraje, zóny a linky. [41] Príkladom využitia mriežok v designerskej praxi sú periodické publikácie. Tvorba rozloženia stránok pre noviny a časopisy si vyžadovala flexibilitu, rýchlosť a presnosť, preto v 60. rokoch 20. storočia navrhol švajčiarsky typograf Karl Gerstner systém 58 dielnej mriežky, ktorá umožňovala jednoducho a rýchlo vytvárať rozloženie stránok s rôznorodým obsahom. [39] _..........................................ill............II_.........I.......i.......................i.......I......... Obr. 3.3: Mriežka vytvorená Karlom Gerstnerom pre časopis Capital[39] 10 3. Layout Pri práci rozlišujeme niekoľko základných druhov mriežok. Príklady ich využitia sú analyzované na nasledujúcich riadkoch. V prílohe A je dostupná ukážka každého popisovaného druhu mriežky. Jednostĺpcová mriežka Najvýznamnejším pôsobiskom tohto druhu mriežky sú prípady, kde podstatu designu tvorí dlhý súvislý text, napríklad beletria. Dvoj stĺpcová mriežka Taktiež často používaná v prípade veľkého množstva textu, ktorý však pomocou sekundárneho stĺpca môže byť doplnený o obrázky, alebo vysvetlivky. Viacstĺpcová mriežka Viacstĺpcová mriežka najčastejšie nachádza uplatnenie v časopisoch, alebo webových stránkach, pretože disponuje veľkou flexibilitou umiestňovania textu, obrázkov a v prípade webových portálov aj reklám či animácií. Modulárna mriežka Disponuje najvyššou mierou flexibility a je používaná napríklad pri tvorbe novín, kalendárov, alebo rôznych tabuliek. Hierarchická mriežka Narozdiel od predchádzajúcich prípadov, pomocou hierarchickej mriežky je obsah umiestňovaný do horizontálnych blokov a nie vertikálnych. Takýto prístup je často používaný na webe alebo pri tvorbe plagátov. Mriežka účiaria Učiarie je pomyselná linka ktorá predstavuje základnú doťažnicu písma a vizuálne vodítko pre umiestnenie a vyrovnanie ostatných prvkov na stránke. Veľkosť mriežky účiaria sa viaže na veľkosť použitého písma. Takže napríklad v layoute s mriežkou účiaria o veľkosti 12b môže byť použité písmo o veľkosti 10b a preklad s veľkosťou 2b. [10] [11] Prázdne miesto Prázdne miesto je dôležitým a často podceňovaným prvkom designu, je to priestor bez grafických prvkov a textu. Švajčiarsky typograf Jan Tschichold o ňom hovoril ako o „pľúcach designu". [10] V divákovi môže vyvolávať dojem luxusu a extravagancie. Prázdne miesto vytvára priestor okolo jednotlivých objektov, uľahčuje divákovi pochopiteľnosť a zvyšuje čitateľnosť 11 3. Layout designu. Vedie zrak pozorovateľa na želané miesto a môže tak byť aj kompozičným prvkom layoutu. Prázdne miesto tiež slúži ako oddeľovač prvkov, ktoré spolu logicky nesúvisia. 3.3 Adaptívny layout Popularizácia tabletov a mobilných telefónov priniesla výrazné zmeny v tvorbe a vôbec v uvažovaní o layoute. Zásadným problémom tvorby layoutu pre tieto zariadenia je obrovský počet tabletov a mobilných telefónov s rôznorodou veľkosťou displeja a hustotou pixelov a pomerom strán. Designér sa v tomto prípade už nemôže viac spoliehať na pevnú veľkosť papiera a musí sledovať technické parametre cieľových zariadení. Potrebná je príprava dokumentu tak, aby sa jeho vzhľad prispôsobil zariadeniu na ktorom je prehliadaný a zároveň faktu, že zariadenie je možné používať tak vo vertikálnej ako aj horizontálnej polohe. Adaptívny layout je ovplyvňovaný faktormi analyzovanými v nasledujúcich podkapitolách. 3.3.1 Veľkosť a rozlíšenie displeja Veľkosť a rozlíšenie displeja priamo vplývajú na rozhodovanie o návrhu layoutu, veľkosti ovládacích prvkov, veľkosti a type písma. Vo všeobecnosti, pred samotným začiatkom procesu grafického návrhu, je žiadúce zistiť tieto parametre na webových stránkach výrobcu zariadenia.Typicky sa však u tabletov s displejom v rozmedzí 7-10 palcov rozlíšenie pohybuje v hodnotách. [21] QXGA: 2048x1536 pixelov WXGA: 1366x768 alebo 1280x800 pixelov XGA: 1024x768 pixelov WSVGA: 1024x600 pixelov U mobilných telefónov sa veľkosť displeja pohybuje v medziach od 2 do 5 palcov a rozlíšenie v rozsahu [21]: QVGA: quarter VGA (240x320 pixelov) HVGA: half VGA (320x480 pixelov) WVGA: wide VGA (480x800 pixelov) FWVGA: full wide VGA (480x854 pixelov) 12 3. Layout nHD: one-ninth high definition (360x640 pixelov) qHD: one-quarter high definition (540x960 pixelov) 3.3.2 Hustota pixelov displeja K problémom s rozlíšením a pomerom strán displeja s ktorým webdesignéri zápasia už roky sa v poslednom období pridáva nový fenomén a to zvyšovanie hustoty pixelov. HiDPI, alebo Retina displeje sú definované ako zobrazovacie zariadenia s hustotou pixelov udávanou v DPI, alebo PPI takou vysokou, že ľudské oko nedokáže rozlíšiť jednotlivé pixely. Táto hodnota hustoty obrazových bodov však nie je jednotná pre všetky zariadenia a líši sa v závislosti od vzdialenosti medzi okom pozorovateľa a plochou obrazovky. Vzdialenosť z akej sa užívateľ pozerá na mobilný telefón je iná, vzdialenosť pri sledovaní obrazovky počítača. To aký veľký môže byť bod, aby nebol samostatne rozoznateľný z určitej vzdialenosti, určuje obrázok 3.4 a z neho vychádzajúci vzorec. [24] Vzdialenosť pixelov(s) Pozorovacia vzdialenosť (d) Obr. 3.4: Hustota pixelov [24] Hustota pixelov je udávaná v PPI (pixels per inch) u iOS zariadení a v DPI (dots per inch) u Android zariadení. U mobilných zariadení došlo k výraznému nárastu hustoty pixelov zo 132PPI v prípade Apple iPad prvej generácie na 264PPI pri iPad-e štvrtej generácie. Obdobným procesom prešli zariadenia aj u iných výrobcov. Pri vytváraní layoutu pre mobilné zariadenia je preto potrebné používať bitmapovú grafiku v dostatočne veľkom rozlíšení, aby pri jej škálovaní nedochádzalo k efektu posterizácie. 13 3. Layout 3.4 Rozdiely v layoute pre tlač a elektronické zariadenia Rôznorodosť zobrazovacích zariadení nutné zohľadňovať pri návrhu rozloženia stránky a pripraviť aspoň dve alternatívne situácie - layout pre mobilný telefón a layout pre tablet. V prípade zobrazenia obsahu na tablete je možné zvážiť použitie viacstĺpcovej sadzby, zatiaľ čo pri zobrazení na malej obrazovke mobilného telefónu je z hľadiska zachovania čitateľnosti obsahu vhodné použitie jednostĺpcovej sadzby. Alternatívnou možnosťou pri tvorbe je vedomé vylúčenie niektorého typu cieľových zariadení - napríklad mobilu. Takýto postup je pomerne častý v prípade digitálnych časopisov s veľkým množstvom obsahu. Ďalšou z komplikácií pri vytváraní elektronických publikácií je fakt, že mobilné zariadenia je možné používať v horizontálnej aj vertikálnej polohe. Prezentácia by na tieto zmeny mala reagovať a využívať možnosti zariadenia. Z tohto dôvodu je potrebné v každej elektronickej publikácii pre mobilné zariadenia pripraviť dva rôzne layouty -pre vertikálnu i horizontálnu polohu prístroja. 14 4 Typografia a písmo Kniha Typografie od Gavina Ambrosa a Paula Harrisa definuje typografiu ako spôsob, akým sa napísanej myšlienke prepožičiava vizuálna forma. [11] Typografia výrazne ovplyvňuje emočné vlastnosti designu a môže byť neutrálna, ale aj symbolicky ladiť s obsahom textu. 4.1 Sadzba textu Sadzbu môžeme definovať ako súbor pravidiel pre prácu s textom umiestnený na stránke s cieľom dosiahnutia želaného efektu. Účel sadzby textu veľmi dobre definuje citát z knihy Typografie od G. Ambrosa, Paula Harrisa: „Promyšlená sazba textu umožňuje řízené sdělování informací. Správnou sazbou můžete dosáhnout libovolného záměru, aí už má být vaše dílo naléhavé, stylizované, historizující archaické, nebo moderní." [11] 4.1.1 Rozpal písma Rozpal písma je úprava medzier medzi dvoma znakmi v slove, nakoľko niektoré dvojice písmen majú tendenciu opticky sa od seba vzďaľovať, alebo naopak približovať sa. Všeobecné pravidlo rozpalu podľa prednášky doc. Mgr.Vítězslava Svalbacha: „Čím uzavřenější jsou písmena, tím menší část jejich vnitřní plochy se stává součástí plochy mezi písmeny; proto se tato písmena staví ve větších vzájemných vzdálenostech. Čím otevřenější jsou písmena, tím větší část vnitřní písmene se zahrnuje do plochy mezi písmeny; proto se tato písmena kreslí v menších vzájemných vzdálenostech." [38] Jedná sa napríklad o problematické dvojice písmen A V, alebo O Q. S potrebou rozpalu písma sa stretávame zväčša u verzálok. U mínusiek tento problém nie je tak výrazný. [11] 4.1.2 Preklad Preklad udáva veľkosť medzery medzi riadkami v bloku textu. Táto medzera pridáva do textového bloku prázdne miesto a tým zvyšuje čitateľnosť. 15 4. Typografia a písmo 4.1.3 Ligatúry Termín ligatúra pochádza z latinského slova ligare, čiže zviazať. Ligatúra je typografický prvok, ktorý sa používa v prípade znakov, ktoré do seba zasahujú, alebo sa vzájomne rušia. V takomto prípade sa z danej skupiny písmen prepojením horných doťahov, alebo predĺžením priečky vytvorí jedna litera nazývaná ligatúra. Najčastejšie ide o skupiny znakov ako fi, ffi, fl u mínusiek a znaky TY, alebo TW u verzálok. [11] 4.2 Rozdiely v typografii medzi elektronickými a tlačenými dokumentárni Rozdiel v použití písem v tlačovom a digitálnom výstupe už nie vďaka displejom s vysokou hustotou pixelov taký markantný ako v minulosti. Kvôli nedostatočnému rozlíšeniu displejov dochádzalo k rozmazaniu jemných šerifov u šerifových písiem a to spôsobovalo zníženie ich čitateľnosti. Riešením tohto problému bolo používanie bezserifových písiem v prípade, že bol dokument určený pre zobrazenie na displeji. [23] Avšak s nástupom obrazoviek s vysokou hustotou pixelov prestáva byť tento problém relevantný. Takzvané retina displeje, alebo dispeleje s vyššou hustotou pixelov ako dokáže vnímať ľudské oko, sa chovajú rovnako, ako ich papierový ekvivalent, teda nedochádza k rozpixelovaniu, či rozmazaniu šerifov a použitie týchto písiem teda nepredstavuje problém. Napriek tomuto faktu, zariadenia s nižšou hustotou pixelov tvoria veľkú väčšinu zobrazovacích zariadení. Použitie šerifových písem je na uvážení designéra, no vrámci zachovania spätnej kompatibility, je dobré obmedziť použitie šerifových písiem, a to hlavne v malých veľkostiach. Výhodou použitia aplikácie Adobe InDesign na sadzbu elektronických publikácií je dostupnosť rovnakých nástrojov ako na sadzbu tlačených dokumentov vrátane nastavenia rozpalu, ligatúr či mriežky účiaria. V prípade použitia technológií HTML5 a CSS3 takéto možnosti práce s textom nie sú dostupné, alebo sú výrazne obmedzené - napríklad komplikované použitie viacstĺpcovej sadzby textu. 16 5 Digitálne publikovanie 5.1 Príklady použitia a výstupné formáty Medzi dostupnými formátmi elektronickej publikácie sú značné rozdiely v ich možnostiach a celkovom chovaní sa daného formátu na určitej platforme. Tvorba elektronickej publikácie preto vyžaduje dôkladné naplánovanie a zváženie výhod a nevýhod dostupných formátov. V nasledujúcich odstavcoch sa nachádza popis výhod, nevýhod, dostupných funkcií a vhodného použitia jednotlivých formátov. 5.1.1 PDF Formát stránkových dokumentov so širokou škálou využitia, môže byť voľne dostupný na webe, pripojený ako príloha e-mailu. PDF dokumenty je možné prehliadať na takmer ľubovoľnom zariadení. Formát nie je vhodný na distribuovanie spoplatneného obsahu, nakoľko PDF súbory nie je možné predávať v obchodoch Apple App Store či Google Play. [17] 5.1.2 ePub Zväčša používaný na publikovanie dlhých textových dokumentov ako sú knihy alebo používateľské manuály. [17] Formát je vhodný na distribuovanie jednorázovo plateného obsahu (napríklad knihy). ePub súbory môžu byť predávané v elektronických obchodoch Amazon, iBooks a ďalších. Nevýhodou je nutnosť špecializovanej aplikácie na prezeranie ePub súborov. 5.1.3 Aplikácia Aplikácia určená pre tablety s operačným systémom Android, alebo iOS. Výhodou je možnosť predaja prostredníctvom obchodov s aplikáciami pre danú platformu formou jednorázového poplatku, alebo predplatného. Nevýhodou zase zložitejší vývoj digitálnej publikácie. [17] Samostatná aplikácia slúži ako špecializovaný prehliadač obsahu vytvoreného v Adobe InDesign alebo technológiou HTML5 (napr. Baker Framework x) 1. Baker Framework je popísaný v kapitole 5.3 tejto práce 17 5. Digitálne publikovanie Tabuľka č.l priraďuje k rôznym typom publikácií vhodné formáty. [22] PDF ePub Aplikácia Časopis - - Ano Katalóg Ano - Ano Portfolio - - Ano Kniha - Ano - Dokument Ano - - Tabuľka č.2 zobrazuje dostupnosť interaktívnych prvkov v jednotlivých formátoch. [22] PDF ePub Aplikácia Video Ano Ano Ano Audio Ano Ano Ano Viacstavové - - Ano objekty Panorámy - - Ano Tlačidlá a od- Ano Ano Ano kazy Vkladanie - Ano Ano HTML Animácie Ano - Ano Rolovanie Ano - Ano obsahu Možnosti - Ano Ano analýzy Časopis: National Geographic Digitálna verzia časopisu National Geographic je ukážkou možností elektronických publikácií. Čitateľa na stránke upúta množstvo pridaného obsahu oproti tlačnej verzii magazínu. Jedná sa o video, interaktívne prezentácie, galérie, 360°prezentácie či dokonca zvuky prírody. Časopis National Geographic je vytvorený pomocou programu Adobe InDesign a distribuovaný ako multi-folio 2 DPS (Digital Publishing Suite) aplikácia . Snímky obrazoviek publikácie sú súčasťou prílohy C. 2. Pojem multi-folio je objasnený v kapitole 5.2 tejto práce 18 5. Digitálne publikovanie Katalóg: The University of British Columbia Interaktívny katalóg prezentujúci univerzitu, študijné odbory či priestory školy. Publikácia obsahuje množstvo interaktívnych prvkov vrátane videa. Katalóg je vytvorený v Adobe InDesign a distribuovaný ako single-folio 3 DPS aplikácia. Snímky obrazoviek publikácie sú súčasťou prílohy C. Portfolio: Jon Low Portfolio fotografa obsahujúce obrazové dáta a video. Digitálna publikácia je vytvorená technológiou HTML5 a CSS3, následne pomocou Baker Fra-meworku „zabalená" a distribuovaná ako samostatná aplikácia. Použitie Baker Frameworku umožňuje do aplikácie neskôr pridávať ďalšie samostatné vydania (obdoba multi-folio DPS aplikácie ). Snímky obrazoviek publikácie sú súčasťou prílohy C. Kniha: Martin Štefunko - Ekonómia slobody Elektronická kniha vo formáte ePub, obsahuje množstvo textu a minimum interaktivity. Vhodne zvolený Formát ePub je ideálny na zobrazovanie dlhých textov ako knihy alebo manuály. Jeho výhodou je zobraziteľnosť na širšom spektre zariadení: čítačky kníh, tablety, mobilné telefóny a bežné desktopové počítače. Publikácie vo formáte ePub je možné predávať v špecializovaných obchodoch ako Amazon a iBooks. Snímky obrazoviek publikácie sú súčasťou prílohy C. Dokument: SABMiller Annual Report Interaktívny PDF dokument obsahujúci základnú navigáciu (nasledujúca strana, predchádzajúca strana, úvodná stránka dokumentu) a klikateľný obsah dokumentu. Vhodne zvolený formát PDF je možné zobraziť na takmer ľubovoľnom zariadení, umiestniť voľne na stiahnutie na webstránke alebo pripojiť ako e-mailovú prílohu. Snímky obrazoviek publikácie sú súčasťou prílohy C. 5.2 Adobe InDesign Spoločnosť Adobe vo svojom balíku Creative Suite 6 zareagovala na rastúcu popularitu tabletov a nadviazala na pridávanie nástrojov pre tvorbu mul-timediálnych publikácií z predošlých dvoch verzií programu. Uľahčila tým tvorbu multimediálnych publikácií pre designerov používajúcich tento soft- 3. Pojem single-folio je objasnený v kapitole 5.2 tejto práce 19 5. Digitálne publikovanie vér k tvorbe klasických tlačených publikácií. Aplikáciu InDesign používa mnoho významných svetových vydavateľstiev k tvorbe svojich magazínov - napríklad Nation Geographic, ELLE, Culture, Best Life, ale aj mnoho firiem využíva elektronické brožúry ako formu propagácie aktuálnych produktov, napríklad Panasonic, Canon či Nikon. [3] Adobe Digital Publishing Suite umožňuje bez nutnosti programovania, so znalosťami nástrojov a pracovného prostredia programu InDesign vytvoriť interaktívnu digitálnu publikáciu, ktorá je distrubuovaná vo forme natívnej aplikácie mobilného operačného systému. 5.2.1 Alternate layout a Liquid layout Medzi najvýznamnejšie novinky patrí tzv. Alternate layout, ktorý umožňuje adaptovať jeden InDesign dokument na zariadenia s rôznou veľkosťou a zároveň horizontálnu aj vertikálnu polohu displeja týchto zariadení. Alternate layout však nie je určený výhradne pre elektronické zariadenia, ale je možné ho použiť taktiež pri tlačených médiách, kde výrazne uľahčuje vytváranie variácií dokumentu s inou veľkosťou, či pomerom strán. [17] Designér nie je limitovaný len jedným alternatívnym layoutom. Dokument ich môže obsahovať ľubovoľné množstvo. Alternatívne layouty sú prepojené so základným návrhom vzťahom rodič potomok - a teda všetky zmeny vykonané v rodičovskom layoute sa prejavia v jeho potomkoch. Pri opačnom postupe - editovaní potomka sa zmeny neprejavujú v ostatných dokumentoch, ale vznikne objekt, ktorý je nezávislý od ostatných. Funkcia alternatívnych layoutov je veľmi úzko prepojená s funkciou liquid layout, ktorá sa stará o transformovanie layoutu do zmenených rozmerov podľa predpísaných pravidiel [17]: • Scale: všetky objekty na stránke sú zväčšené, alebo zmenšené podľa potrieb so zachovaným pomerom strán. • Re-center: obsah si zachová pôvodnú veľkosť a bude umiestnený do stredu novej stránky. • Object based: Umožňuje nastaviť ku ktorej strane/stranám bude objekt prichytávaný a ktorý z rozmerov výška/šírka sa bude meniť. Vyžaduje individuálne nastavenia každého objektu. • Guide based: Špeciálne pomocné linky (Liquid Guides) určujú kde sa má meniť výška alebo šírka objektu. Linky sú vytvárané zapnutím nástroja Page Tool. 20 5. Digitálne publikovanie Názov Liquid layout na prvý pohľad nabáda k myšlienke, že pomocou tejto technológie sa obsah vytvorený v Adobe InDesign prispôsobí zariadeniu na ktorom je prehliadaný. To však nie je pravda a technológia Liquid Layout slúži len na prispôsobenie rozloženia v aplikácii InDesign, nie na koncovom zariadení. V prípade, že koncové zariadenie má iný pomer strán ako dokument, tak dokument bude zväčšený resp. zmenšený a zobrazený v pôvodnom pomere strán s potrebnými čiernymi pásmi po stranách. 5.2.2 Content Collector/Placer/Conveyor Trojica nástrojov s funkcionalitou podobnou vylepšenej schránke, umožňuje umiestňovať a prenášať objekty v rámci jedného, ale aj medzi viacerými dokumentárni. [17] Pracovný postup s nástrojmi vyzerá nasledovne: pomocou nástroja Content Colector zvolíme textový rámček, rámec s grafikou, alebo iným obsahom. Zvolený obsah bude zobrazený v lište Content Con-veyor. Takýmto spôsobom môžeme zvoliť samostatný objekt, alebo skupinu objektov a vytvoriť tak kolekciu. V novom dokumente potom pomocou nástroja Content Placer zvolíme a umiestnime objekty v novom dokumente s možnosťou zachovania prepojenia - objekty tak ostanú navzájom prepojené. & L.ü L.Ü L-Ü Content Collector Tool Content Placer Tool Po umiestnení do dokumentu objekt ostane v Content Conveyor Umiestnenie viacerých objektov Dočastné uloženie - po umiestnenído dokumentu bude objekt z Content Conveyor odstránený Obr. 5.1: Popis nástrojov v palete Content Collector/Placer/Conveyor 5.2.3 Adobe Content Viewer Aplikácia Adobe Content Viewer slúži na testovanie aplikácií v procese tvorby priamo na koncovom zariadení, alebo v okne operačného systému na ktorom je aplikácia vytváraná. Testovanie prebieha pomocou panelu Fo- 21 5. Digitálne publikovanie Ho Builder v Adobe InDesign, alebo spustením súboru vo formáte folio priamo v programe Adobe Content Viewer. K dispozícii je pre platformy iOS, Android, Mac OS X a Microsoft Windows. 5.2.4 Adobe Digital Publishing Suite Služba Digital Publishing Suite umožňuje zjednodušiť tvorbu natívnych aplikácií pre platformy iOS, a Android zo súboru vytvoreného v Adobe InDesign. Digital Publishing Suite okrem toho umožňuje analýzu jednotlivých článkov, ktoré druhy médií sú u užívateľov najpopulárnejšie, ktorá stránka prezentácie je najdlhšie prezeraná. Publikáciu je možné distribuovať ako samostatnú aplikáciu - zobrazenú na pracovnej ploche, alebo ako súčasť aplikácie Newsstand (v operačnom systéme iOS určenej pre časopisy - novinový stánok). Služba Digital Publishing Suite je dostupná v troch verziách s rôznym odstupňovaním ponúkaných možností. [7] Single-folio aplikácia iOS aplikácia jedno fólio Článok (Article) InDesign alebo HTML dokument Horizontálny layout (Horizontal layout) Obr. 5.2: Single-folio aplikácia obsahuje práve jedno fólio skladajúce sa z ľubovoľného množstva článkov[17] Digital Publishing Suite - Single Edition Najdostupnejšia verzia, ktorá predplatiteľom služby Creative Cloud (61€me-sačne) umožňuje publikovať neobmedzené množstvo Single Edition aplikácií pre tablety iPad. Pre ostatných zákazníkov je tu možnosť poplatku 362€za publikovanie jednej aplikácie. DPS Single Edition umožňuje vytvorenie a zverejnenie Single-folio publikácie (vnútri aplikácie nie je možné kupovať/sťahovať ďalšie publikácie) bez možnosti predplatného. Vlastnosti Single-folio aplikácie sú znázornené na obrázku 5.2. Táto varianta teda nie je vhodná na publikovanie časopisov, ale postačuje napríklad pri zverejňovaní katalógov, kníh alebo portfolií. V čase 22 5. Digitálne publikovanie Multi-folio aplikácia iOS alebo Android aplikácia ľubovoľný počet fólií InDesign alebo HTML dokument Horizontálny layout (Horizontal layout) Vertikálny layout (Vertical layout) Obr. 5.3: Multi-folio aplikácia môže obsahovať ľubovoľné množstvo fólií. [17] písania bakalárskej práce služba nie je dostupná pre operačný systém Android, Windows ani mobilné telefóny iPhone. Single Edition aplikácia môže byť umiestnená v obchode AppStore, nie však zobrazená v aplikácii Newsstand. [7] [8] Digital Publishing Suite - Professional Edition Edícia v cene 436,65€mesačne umožňuje vytvorenie a zverejnenie ľubovoľného počtu publikácií, ich editáciu a aktualizáciu. Pomocou digital Publishing Suite - Professional Edition je možné vytvárať publikácie pre mobilné platformy iOS a Android. Podpora operačného systému Windows je vo fáze prípravy. Oproti verzii Single Edition pridáva možnosť vytvárania multi-folio aplikácií a predplatného. Multi-folio aplikácia je „obálka" do ktorej je možné neskôr pridávať a spoplatňovať jednotlivé fólia - napríklad vydania časopisov. Vzťah aplikácia/folio je načrtnutý na obrázku 5.3. Takáto aplikácia môže byť zobrazená v aplikácii Newsstand. [7] [8] Digital Publishing Suite - Enterprise Edition Verzia určená pre veľké vydavateľstvá a korporácie, vychádza z Professional Edition. Ponúka výhodnejšie poplatky za distribúciu veľkého množstva aplikácií. Cena je určovaná po konzultácií s firmou Adobe. [7] [8] 23 5. Digitálne publikovanie 5.3 Alternatívny softvér Adobe InDesign nie je jediná aplikácia pre tvorbu elektronických publikácií - jej výhodou je však multiplatformovosť ako samotnej aplikácie, ktorá je dostupná pre operačný systém Mac OS X a Microsoft Windows, tak univerzálnosť výstupných aplikácií. Nevýhodou softvéru od spoločnosti Adobe je finančná náročnosť a niektoré technické obmedzenia popísané v predchádzajúcej kapitole. Kapitola alternatívny softvér obsahuje súhrn aplikácií z rôznych oblastí digitálneho publikovania - od knihy až po digitálny časopis. 5.3.1 iBooks Author Aplikácia iBooks Author od spoločnosti Apple disponuje jednoduchým užívateľským rozhraním a množstvom preddefinovaných upraviteľných šablón. Program je distribuovaný zadarmo. Medzi výhody aplikácie patrí okamžitý náhľad spracovávaného dokumentu na iPad-e. Nevýhodami tohto programu je dostupnosť len pre Mac OS X, nemožnosť exportovať publikáciu do iného formátu ako PDF, prípadne odoslať priamo do obchodu iBooks Store. [13] 5.3.2 Booktype Cloudová open-source služba umožňujúca spoluprácu viacerých autorov pri písaní kníh. Služba má webové drag&drop rozhranie a podporuje výstup publikácií prispôsobených ako pre tlač, tak aj pre elektronické zariadenia vo formátoch pdf, epub, mobi a html. Reálne využitie tejto služby je skôr vo vytváraní publikácií zameraných na textový obsah ako sú firemné správy či knihy pre mobilné zariadenia. [35] 5.3.3 Inkling Habitat Spoločnosť Inkling vytvorila kompletnú platformu slúžiacu na distribúciu digitálnych publikácií pre iOS a Android. Digitálne publikácie od spoločnosti Inkling vytvorené v HTML5 a CSS3 sa vyznačujú veľkým množstvom multimediálneho obsahu, ako videá, zvuk, či animácie. Tieto elektronické publikácie boli vytvorené interným nástrojom firmy nazývaným Inkling Habitat, ktorý bol vo februári 2013 sprístupnený verejnosti. [40] Jedná sa o webovú službu s možnosťou kooperácie viacerých autorov počas tvorby elektronickej publikácie, ktorú je následne možné exportovať do formátu ePub, alebo priamo publikovať v obchode Inkling Store. [28] 24 5. Digitálne publikovanie 5.3.4 Baker Framework Jednou z najzaujímavejších alternatív k Adobe InDesign je Open Source projekt Baker Framework. Pre menšie vydavateľstvá, alebo jednotlivcov, vyžadujúcich minimalizáciu cenových nákladov ponúka export pre zariadenia s operačným systémom iOS a Android, možnosť predplatného vnútri aplikácie (porovnateľná funkcionalita s Adobe DPS Professional Edition za 436€mesačne). Nevýhodou je nemožnosť využitia aplikácie Adobe InDesign v procese tvorby a s tým spojená väčšia časová náročnosť na prípravu publikácie. Obsah je nutné prevádzať do HTML5 a CSS3. Výsledná elektronická publikácia je distribuovaná vo forme samostatnej aplikácie, alebo aplikácie pre Newsstand (miesto pre zobrazovanie časopisov na zariadeniach s operačným systémom iOS). [15] 5.4 Rozdiely medzi elektronickou a tlačenou publikáciou Základným rozdielom pri vytváraní dokumentov pre tlač a elektronické publikovanie je použitie farebného priestoru. V prípade tlače je používaný farebný priestor CMYK a v elektronických dokumentoch farebný priestor RGB. Významným rozdielom je závislosť od veľkosti a rozlíšenia obrazovky zariadenia, na ktorom je elektronický dokument prehliadaný. Digitálne a tlačené dokumenty sa líšia v množstve obsahu, v tlačených médiách je množstvo limitované nákladmi, zatiaľ čo u elektronických médií tento problém nenastáva a môžu tak za rovnakú cenu priniesť zákazníkovi väčšie množstvo obsahu. Výhodou digitálneho publikovania je možnosť využívať druhy médií nedostupné v klasických publikáciách a to video, audio, interaktívny a online obsah. 25 6 Distribúcia 6.1 Apple App Store S možnosťou exportu do formátu natívnych aplikácií mobilných zariadení prostredníctvom Adobe Digital Publishing Suite sa otvorila možnosť zverejnenia autorskej prezentácie veľkému množstvu ľudí používajúcich mobilné zariadenia od spoločnosti Apple - umiestnenie v obchode App Store. Nevýhodou tohto riešenia, je nutnosť členstva v iOS Developer Program, ktorého cena je 99$ za rok a potreba použitia počítača s operačným systémom Mac OS pri vytváraní aplikácie. Aplikáciu je možné nahrať na webe https: / /it-unesconnect.apple.com/. V prípade multi-folio aplikácie existuje možnosť voľby medzi samostatnou aplikáciou a aplikáciou pre Newsstand. [17] 6.2 Google Play Alternatívou voči App Store pre používateľov mobilných zariadení s operačným systémom Android je internetový obchod Google Play. Podobne ako v prípade App Store je nutný registračný poplatok vo výške 25$. V prípade operačného systému Android je výsledná aplikácia nahrávaná na webe https: / / play.google.com/apps/publish/ 6.3 Stiahnuteľný PDF súbor Všetky vyššie spomenuté alternatívy slúžiace na distribúciu digitálnych publikácií sú pomerne finančne náročné a pre začínajúcich designerov, či fotografov nedostupné. Pri osobnom kontakte s klientom úplne postačuje, ak je publikácia vo formáte PDF umiestená v tablete. V prípade, že ju chceme zverejniť širšej verejnosti, je možné elektronickú publikáciu umiestniť vo svojom internetovom portfóliu na voľné stiahnutie. 26 7 Návrh a príprava autorskej prezentácie 7.1 Analýza trhu Prvou fázou návrhu autorskej prezentácie bol prieskum aktuálnej situácie na trhu v oblasti počítačovej grafiky a fotografie. Po vyhľadaní elektronických i tlačených portfolií grafických štúdií, fotografov aj grafikov na voľnej nohe, nasledovalo porovnanie úrovne obsahu, grafického spracovania a typu prezentácie. Výsledkom prieskumu bolo zistenie, že väčšina portfolií je veľkostne prispôsobená prehliadaniu na tablete. V prípade tlačených verzií je formát zvyčajne odvodený od velkosti strany minimálne A4. Najčastejšou formou distibúcie bol súbor vo formáte PDF a natívna aplikácia v App Store. Preskum trhu je súčasť ou prílohy B. 7.2 Výber materiálu Jednou z najdôležitejších častí pracovného postupu je správny výber materiálu, ktorý bude prezentácia obsahovať. Výber bol prevádzaný v niekoľkých krokoch. Prvým bol širší výber prác z grafického a fotografického portfolia. V nasledujúcej fáze boli vybrané práce v menšom formáte vytlačené na fotografický papier a zvolený užší okruh prác a ich tématické zameranie. Zvolené kategórie portfolia: • Fotografia • Webdesign • Vizuálna identita • Video • Tlač 7.3 Tvorba skíc Pri návrhu layoutu bol kladený dôraz predovšetkým na priestor pre prezentovanú tvorbu, nakoľko ide o hlavnú úlohu autorského portfolia a textové informácie nie sú v tomto prípade veľmi obsiahle. 27 7. NÁVRH A PRÍPRAVA AUTORSKEJ PREZENTÁCIE Obr. 7.1: Návrh obsahu/navigácie portfolia. Ifctŕ ■ .10*2. Obr. 7.2: Návrh rozloženia grafického obsahu a textu. 28 7. NÁVRH A PRÍPRAVA AUTORSKEJ PREZENTÁCIE 7.4 Finálny návrh v Adobe Illustrator Hlavné písmo autorskej prezentácie bolo zvolené podľa Grafického manuálu značky. Jen ním bezserifové písmo Helvetica Neue. Písmo má moderný charakter a poskytuje dostatok rezov pre variabilitu použitia. Voľba bezse-rifového písma umožňuje zároveň zachovať dobrú čitateľnosť aj na disple-joch s nižším rozlíšením. HELVETICA NEUE ABC D E FG HU KLM NOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 12345 67890 »&?!(,.) Obr. 7.3: Písmo Helvetica Neue bolo zvolené podľa grafického manuálu. Návrh designu bol zo skíc prenesený do vektorového grafického editora Adobe Illustrator. Na základe teoretických poznatkov z kapitoly Layout tejto práce bola na rozloženie grafických prvkov použitá dvojstĺpcová mriežka. Širší stĺpec obsahuje obrazové dáta, a doplnkový užší stĺpec je určený pre text. V procese návrhu bol zvolený jednotný layout pre tlač i digitálnu publikáciu. Prínosom digitálnej verzie publikácie sú obsahové dáta navyše. 29 7. NÁVRH A PRÍPRAVA AUTORSKEJ PREZENTÁCIE 7. NÁVRH A PRÍPRAVA AUTORSKEJ PREZENTÁCIE 7.5 Voľba technológie Zvážením ceny, výhod a nevýhod jednotlivých variant Adobe Digital Publishing Suite bola zvolená verzia Single Edition. Výsledná Adobe DPS aplikácia obsahujúca jedno folio je na účely publikovania autorského portfolia dostačujúca. Nevýhodou tejto voľby je možnosť vytvorenia aplikácie len pre tablety iPad1. Vytvorenie aplikácie pre zariadenia s operačným systémom Android ani mobilné telefóny iPhone nie je možné. 7.6 Príprava dát 7.6.1 Obrázky Príprava obrazových dát sa značne líši podľa cieľového výstupu - závisí od toho, či produktom bude tlačená verzia dokumentu a zároveň digitálna, alebo iba digitálna. Zároveň záleži na fyzickej veľkosti tlačeného dokumentu. V prípade samostatnej digitálnej publikácie bude pre zachovanie maximálnej kvality obrazového výstupu bitmapových súborov potrebné orientovať sa podľa maximálneho rozlíšenia cieľového zriadenia. Vo všeobecnosti je lepšie pripraviť dáta pre zariadenia s displejmi s vysokou hustotou pi-xelov. Napríklad tablet iPad s retina displejom disponuje rozlíšením 2048x-1536 pixelov, zatiaľ čo staršie verzie používali dispelej s rozlíšením 1024x768 pixelov. [17] Pokiaľ výstupom bude aj tlačený dokument, rozlíšenie obrázkov sa bude odvíjať od velkosti tlačového média a kvality výstupu (zvyčajne 300dpi). Takto pripravené podklady je možné využiť i vo verzii pre tablet. Adobe InDesign samozrejme umožňuje aj používanie vektorových formátov ako SVG, EPS či AI. [17] 7.6.2 Video Najuniverzálnejším a odporúčaným formátom videa pre DPS je MP4 s kódovaním H.264. Rozlíšenie videa závisí od jeho použitia, a teda či bude prehrávané v režime celej obrazovky, alebo iba v preddefinovanej veľkosti bez možnosti spustenia režimu celej obrazovky. V prvom prípade je odporúčané rozlíšenie fullHD(1920xl080 px), v druhom prípade, podľa veľkosti okna v ktorom bude video prehrávané. [5] 1. Výslednú publikáciu je možné prostredníctvom panelu Folio Builder v Adobe InDesign odtestovaŕ aj na tabletoch s operačným systémom Android, nie však distribuovať 31 8 Práca v Adobe InDesign 8.1 Alternatívny layout dokumentu pre tlač Častým scenárom pri tvorbe elektronických publikací je, že slúžia ako doplnok ku klasickej tlačenej verzii dokumentu a priamo z neho vychádzajú. Takýto postup má výhodu v předpřipravených obrazových dátach z tlačenej verzie. V prvom kroku je spracovaná tlačená verzia dokumentu, z ktorej neskôr pomocou Alternate layout, a Liquid layout bude vytvorená digitálna verzia. Takýto postup bol použitý pri tvorbe autorského portfolia - z návrhov layoutu vytvorených v Adobe Illustator bola v aplikácii Adobe InDesign spracovaná verzia pre tlač. Z tohto dokumentu bolo pomocou technológie Alternate layout a Liquid layout vytvorené nové rozloženie určené pre horizontálnu polohu tabletu iPad. Nastavenie pravidla transformovania na Guide-based a vytvorenie vodiacich liniek (Liquid Guides) zabezpečilo transformáciu do nového alternatívneho layoutu.1 Nasledovalo pridanie interaktívnych prvkov - klikateľných galérií, videa, webového obsahu a rolovacích rámcov. Podrobný postup vytvárania interaktívnych prvkov je popísaný v nasledujúcej kapitole. 8.2 Interaktívne objekty 8.2.1 Slideshow Adobe InDesign umožňuje autorom elektronických publikácií pridať vloženie interaktívnych galérií a slideshow. Princíp spočíva v tom, že požadované obrázky budú „naskladané" v dokumente nad sebou vo forme viacstavové-ho objektu a prepínanie medzi stavmi objektu bude vykonávané prostredníctvom tlačidla, alebo viacerých tlačidiel (nasledujúci/predchádzajúci). U-kážka postupu práce pri vytváraní interaktívnej prezentácie fotografií: 1. Nástrojom Rectangle Frame Tool vytvoríme rovnako veľké rámce do ktorých umiestnime fotografie (File->Place). 2. Označíme rámce a pomocou palety nástrojov Align umiestnime tak, aby sa prekrývali. 3. Vyberieme viditeľnú fotografiu a v palete nástrojov Object States ju prevedieme na viacstavový objekt. 1. Kapitola 5.2.1 obsahuje podrobnejšie informácie o nástrojoch Alternate a Liquid layout 32 8. Práca v Adobe InDesign 4. Zobrazíme si vrstvy dokumentu v palete Layers a skryjeme viacsta-vový objekt. Vyberieme ďalšiu z fotografií, vystrihneme (CTRL-X, resp CMD-X). V palete layers znovu zobrazíme viacstavový objekt a vytvoríme v ňom nový stav, do ktorého vložíme vystrihnutú fotografiu (kliknutie pravým tlačidlom myši na nový stav ->Paste Into State). Postup opakujeme so všetkými fotografiami. 33 8. Práca v Adobe InDesign 0 Object States |_» | ~= Object Name: ej_^ b a (a) Nový viacstavový objekt (b) Nový stav objektu Obr. 8.3: Panel Object States 0 Layers 1 1 T= m n ▼ Layer 1 j} □ mr\ mr\ «ď)£C_01 06-Edit.jpg> Page: lr 1 Layer H Obr. 8.4: Vrstvy prezentácie 5. V ďalšom kroku vytvoríme tlačidlo, ktorým budeme prepínať stavy objektu. V ukážke použijeme neviditeľné tlačidlo, ktoré bude prekrývať celú fotografiu, tlačidlo však môže byť akýkoľvek vytvorený, alebo importovaný grafický objekt. Nástrojom Rectangle Frame Tool vytvoríme rámec prekrývajúci celý viacstavový objekt. Zobrazíme panel Buttons and Forms a prevedieme ho na tlačidlo (Button), pomenujem, zvolíme udalosť, pri ktorej sa akcia spustí (v ukážke je to on Release or Tap, teda po kliknutí, alebo ťuknutí prstom) pridáme vykonávanú akciu - v ukážke je to Go To Next State. Táto akcia prepne stav objektu na nasledujúci. Zvolíme na ktorý objekt sa akcia aplikuje (InDesign automaticky vyberie posledný vytvorený objekt). Výsledným produktom je prezentácia fotografií, ktoré sa po stlačení menia. 0 Object S La ta* | | Object Name! 'Multi-state 1 j E^J 1 [statel Hjjjy SME Z j Q 1 All states selected Q Q j ,:: .......... 34 8. Práca v Adobe InDesign 8.2.2 Video Do elektronickej publikácie je možné zakomponovať video dvoma rôznymi spôsobmi. Prvým z nich je vloženie videa do samotného dokumentu a druhým je streamovanie z internetu. Prvý menovaný spôsob má výhodu v tom, že je dostupný vždy, aj bez prístupu k internetu, nevýhodou je že výrazne zvyšuje veľkosť výslednej aplikácie. Druhý spôsob, je streamovanie videa z internetu, ktoré neovplyvňuje veľkosť samotnej aplikácie, no vyžaduje pripojenie k internetu. Oba spôsoby majú svoje využitie, ale výhodnejšie je pridanie videa priamo do aplikácie, vzhľadom na to, že mnoho ľudí číta a prezerá vopred stiahnuté elektronické publikácie napríklad na dovolenke, alebo vo vlaku, teda často bez pripojenia k internetu. [5] Video súčasťou aplikácie 1. Video v predpripravenom formáte vložíme do aplikácie Adobe InDe-sign rovnakým spôsobom ako ostatné médiá, zvolíme položku Plače z menu File. Obr. 8.5: Video v InDesign dokumente 2. Označené video môžeme upravovať nasledovne, zobrazíme paletu media, v ktorej môžeme nastaviť tzv. poster, teda obrázok z videa, ktorý sa bude zobrazovať pred samotným prehrávaním. InDesign ďalej v tejto palete umožňuje nastaviť ktoré ovládacie prvky videa budú zobrazené. 35 8. Práca v Adobe InDesign 1911 BIODOÍ1 C5:05 ■' ;0:3J.ií Options: |_| Play «1 Page Laad Q Limp (Except PDF) Poster: | From Clin í>ií--. r;it'5l-:- í-. p; : T Navigator Points (a) Panel Media (b) Nový úvodný obrázok Obr. 8.6: Nastavenia nového úvodného obrázku videa 3. V palete Folio Overlays sa nachádzajú ďalšie nastavenia videa, ako je prehrávanie v režime celej obrazovky alebo automatické prehrávanie. 0 Folio Overlays 4 Video ® URL or File □ /Uiere,■ 3 lee pwal tE r,■ Drcpboxficha o'f Bakal-arka,' 1 I I Auto Play Delay: |-Í-| [ I I Play Full Screen I I Tap to View Ca ntroll er I I Do Not Allow Pause I I Stop on Last Frame Obr. 8.7: Panel Video 36 8. Práca v Adobe InDesign Streamované video 1. Nástrojom Rectangle Frame Tool vytvoríme rámec o požadovanej veľkosti videa. 2. V paneli Folio Overlays zvolíme Video a vložíme odkaz na video súbor. 0 Folio Overliys | -= 1 Video © URLorFile: Ď [^np7ymirokoleía.r.eQrTi/sk.Dla/^idcoydafujrTiuni-\| | | Auto Play Delay: 0 ~j eěce Q Play Ful I Siireen | | Tap ta View Cnntroller Q Do- Not Allaw Píuíe | | Stop nn Last Frame Obr. 8.8: URL adresa streamovaného videa 3. Ostatné nastavenia fungujú rovnako ako v prechádzajúcom prípade Video z Youtube(resp. iného webu) Videá zo serverov ako je Youtube, Vimeo či DailyMotion je nutné vkladať do elektronickej publikácie ako webový obsah. 1. Na stránke s videom otvoríme záložku Share, zvolíme Embed a skopírujeme kód. 37 8. Práca v Adobe InDesign 0:01/0:34 Scala je tu pro Vás! www.darujscale.cz 1 if Like MasarykUniv 26 videos 70 views *1 f ľ* Share this video Embed Email íiframe width-'"56 0" height-" 315" srn-" I/www.youtube. coiri/embed/FVZleElíiirBg" f rameboĽder-"0M a 11 owf u 11 seresnx / i f ľ ame> Video size: 560 »315 @J Show suggested videos when the video finishes □ Enable privacy-enhanced mode [?] □ Use old embed code [?] Obr. 8.9: Video zo servera Youtube v Adobe InDesign 2. V Adobe InDesign zvolíme Object->Insert HTML, vložíme kód. Pozor, s kódom generovaným serverom Youtube si InDesign neporadí a preto je potrebná drobná úprava. Na začiatok URL adresy je potrebné dopísať „http:". 38 8. Práca v Adobe InDesign (a) Vkladanie HTML (b) Úprava kódu Obr. 8.10: Vloženie a úprava kódu 3. V paneli Folio Overlays zvolíme Video a zaškrtneme Auto Play. í Folio Overlays 11 -. 4 Web Content © Lľí_ cr File □ 1 @ Aute Play Delay: 0 | wo 1 1 Tranipariril Background Scile Content to Fit □ All™atc,„,.i„.ill,m,„. (a) Web content, označenie voľby Autoplay (b) Výsledný dokument v Adobe Content Viewer Obr. 8.11: Nastavenie a odtestovanie. 8.2.3 Audio Vkladanie audio súborov. 1. Z menu File zvolíme položku plače a vyberieme požadovaný audio súbor 39 8. Práca v Adobe InDesign Obr. 8.12: Pridanie audio súboru V palete Folio Overlays ->Audio zvolíme adresár so súbormi ovládacích prvkov(pause, play) vo formáte png. Formát názvu súborov je nasledovný: názov_play.png, názov_pause.png. Názov súboru môže byť ľubovoľný, no musí obsahovať príponu _play, resp. _pause. C Folio Ovflnys I 4 Audio i:Om- [tp.te-ít.mpä ContrallerFiles: ľ~l | i''Use-L|'5l6ep\va.lltEri'Daslt1op/au-dia-icaris 0 5howF rtc Imagí Inľtially | | Aute Play "•■SO- □ Play in Backgmund Acrcss FoIid (a) Voľba adresára (b) Ikona play (c) Ikona pause Obr. 8.13: Voľba ikon prehrávača hudby 8.2.4 Webový obsah Zaujímavým doplnkom elektronickej publikácie môže byť online webový dokument, napríklad aktuálne tweety zo sociálnej siete Twitter, statusy z Fa-cebooku na kontaktnej stránke, alebo interaktívna mapa s adresou spoloč- 40 8. Práca v Adobe InDesign nosti. Primárne by však elektronická publikácia mala fungovať bez pripojenia k internetu a tak nie je vhodné týmto spôsobom pridávať do dokumentu kľúčové informácie. Ukážka pridávania webového obsahu: 1. Nástrojom Rectangle Frame Tool vytvoríme rámec, v ktorom chceme text zobrazovať. 2. V paneli Folio Overlays zvolíme položku Web Content, vyplníme URL adresu webového dokumentu, alebo zvolíme lokálny HTML súbor a zaškrtneme Autoplay (inak bude webový obsah spustený až po ťuknutí) Ďalšou možnosťou je pridať tzv. HTML snippet, teda kúsok HTML kódu priamo do elektronickej publikácie. Túto funkcionalitu je možné využiť napríklad na zobrazenie máp od spoločnosti Google. 1. Na stránke http:/ /maps.google.com vyhľadáme časť mapy ktorú chceme zobraziť. V pravom dolnom rohu klikneme na ikonu ozubeného kolieska a zvolíma Share and embed map. Obr. 8.14: Google Mapy 2. Zvolíme položku Embed map a skopírujeme kód. 3. V Adobe InDesign zvolíme z menu Object položku Insert HTML, kam skopírujeme kód zo stránky Google. 41 8. Práca v Adobe InDesign Share link Embed map X ■dframe src="h1tps://www.google.com/rnap£/ernbed?pb=!l ml4!lmS!l m3!ld2605. Palackého třída 2377/105 View on Google Maps Pol» Directions n_.„ ^...... .......-X This map is built for you x 1 When you view 1 hi s m a p on you r site, \ m you'll see your saved places on the map. Your site's visitors won't see those saved places - they'll see a map built for them. P&ik Boželěd ■ : Městsky slfidion Srbská ^e^0 ^ Nebesky mlyn ^ y Fakulta informačních tfchnologiíVUTrBmě^ -» n~i-.pl.h , 1L.ZQ 14 jC'íg c - Map data ^iQK Gocglc Tínrs ar usa F apa n a map trror By embedding this mapr you agree to the terms of service. Obr. 8.15: Získanie kódu mapy HTML Code: <íframe src="https://www.googlecom/mapsyembed?pb=!lml4!lm8!lm3! ld2605.53u646Su9262!2dl6.5916S56!3d49.228427?!3m2!lilO24!2iľ6B! 4fl3.1!3rn3llm2!lsOx4 71?9407de7910d7%3AOx4ecbf7367d2abOd6i 2zUGFsyWNrw6lobvBOxľnDrWRblDlzNzcvMTA5!;eO!3m2!lser"2s" 4vl39860409714B" width="600M height="450M ŕrameborder=M0" style="border:0"x/íframe>| I Cancel | ( OK | Obr. 8.16: Vloženie mapy do Adobe Indesign 4. V paneli Folio overlays ->Web content zaškrtneme Autoplay (inak bude webový obsah spuštěný až po ťuknutí) 42 8. Práca v Adobe InDesign 0 Folío Overlay; 4 Web Content © URL ar File □ 1 1 0 Ayto Play Delay: 0 | sees | | Transparent Background 0 Allow User Interaction 1 1 Stale Content to Fit I I Allow Access to Entitlement Information (a) Automatické prehrávanie webového obsahu ;s;lí I P.UckélinBiila 2377/10.9 a . J, (b) Odtestovanie mapy Obr. 8.17: Google mapy v Adobe InDesign 8.2.5 Posúvanie obsahu Jednou z výhod elektronickej publikácie oproti klasickej je možnosť pridania dodatočného obsahu či už textového, alebo obrazového bez potreby pridať ďalšie strany dokumentu. Spomínaná vlastnosť je dobre využiteľná napríklad v prípade, že množstvo obsahu presahuje jednu stranu dokumentu, ale nedostačuje na zaplnenie dvoch strán. V takomto prípadne je možné použiť funkciu Scrollable frame (Rámec s posuvným obsahom). Vytváranie posuvného textového obsahu 1. Nástrojom Type Tool vytvoríme rámec, ktorý vyplníme požadovaným textovým obsahom. Rámec musí byť vyplnený tak, aby text nepresahoval okraj rámca. 2. Nástrojom Rectangle Frame Tool vytvoríme rámec, v ktorom chceme text zobrazovať. Rámec by mal byť o 5-10px širší, ako textový obsah, kvôli zobrazovaniu scrollbaru. 43 8. Práca v Adobe InDesign 0 3 l n- :■> iní- i % % y]\ i l|7H" ;' n'™ Hla sl in -i | Marl ' h *° d a % T. / l ■y \ z 3 m 0. □. H m u B \ Illliii % ■é m i g a A| K / \ i É 1 - > > f II Obr. 8.18: Vytvorenie rámca a textu ktorý vňom bude zobrazený Označime textový rámec a vystrihneme ho - pomocou stlačenia klávesovej skratky (CTRL+X, resp CMD+X), alebo z položky Edit ->Cut v menu programu. Označíme cieľový rámec a znovu v menu edit zvolíme položku past into (pozor, nie paste!) S; Obr. 8.19: Vloženia textu do rámca 8. Práca v Adobe InDesign 5. Následne zobrazíme panel Folio Overlays v ktorom zvolíme položku Scrollable Frame. Nastavíme požadované parametre. © O O Adobe® Content Viewer @ 100% tsL, -lIl.lIc eiijiilli: tm \-i:.Ji.i:-j-(>j- 1,1-: scJLl pori:, Housed uos mi, Lmlius ■ iLi- vuli; vol on: i|ll,ld] fu^il. .in: »:i :llic di.ik-m ii: iiiiiin.il.-.l.il t:.■>'' tlLii-i iL>)Lsliis:i ii.u.-.r !—L]ll vr..nv ct .:a: ^-j:.\u.i.j. \ iu lAibruiirwii iv, i.ic cxtv,i;|u.ui .ilv.iiui:: [",iLi-us i-i ,i^i:ir»L .lillil corpus -J !jisa:-.1 i'.kl-.i jLiLvji :± ut i:Liisii]ij.:u Hirihus .ilk|:.i at cum voluptat quiatra mm niatuaam, quam quam, Earn et inmo -Lp \ll|Ul1l-i:ii::i yl-Jci :i^pc molY.pLu:. Sit vita corepudat" corpe-ic :ii.i : vo.Lim siti dest ipsam Il,lili::::|li ossnio uonscd me,:is =iLlii ,ijjs voluyl:! ssv.jij::is pLivJ'.LLa !ll:u iinvm idci ul i'.ky.ilur c\ti::'LiMkin. [': vi-inc: :lv..s lIll. Imili- ,isi:io. R.i: ur, KziriLiu pi).- rcic, si or.'.mew him ic^U Mini, i:Li(i5-HH'.:ulc]iJiii:-.i:'ic::J: :pissi: ,un l.iLtwv i|u,i:i:nL corLiupci: emus pcuibus. i'lcimpo r.eti.itiis sulu^L-.;:' im.i^ni:: iL.ihcr mos v.ilcs cos ports por erspt-mnt as endignatem id eturciu repcliqiii tern qui qur delimit al hid I cipck'Siquc ventem et ea qLiatquijs as.pt-1 mulorum acepern ,ilin:-t Lik •inii.oliLtiJ t'sL •e:Ju:-.t cl -.diq-.-.:.m e\-.vpl.L:i .lis ilchis volutes: ivrj Jeileinei omnilij ei-i.rplai:am Ul^j. Es int, quo blandis ne-m inidloril ,ikiiL_vkmp(^ m.i^u icnl Pudis ei dCut, alebo CTRL+X, resp. CMD+X. 4. Označíme cieľový rámec v ktorom chceme obrázky rolovať a zvolíme Edit->Paste Into (pozor, nie paste!) 46 8. Práca v Adobe InDesign Obr. 8.22: Vloženie obrázkov do rámca 5. Následne zobrazíme panel Folio Overlays v ktorom zvolíme položku Scrollable Frame. Nastavíme požadované parametre. Adobe® Contenr Viewer® 100% ml Obr. 8.23: Testovanie v Adobe Content Viewer 47 8. Práca v Adobe InDesign 8.2.6 360°Slideshow Vizuálne zaujímavým prvkom elektronickej prezentácie firmy môže byť ukážka produktu, ktorý si používateľ môže pohybom prsta otáčať a prezerať z požadovaného uhla. Princíp fungovania spočíva podobne ako u sli-deshow z prekrývajúcich sa navzájom nadväzujúcich fotografií a prepínania ich viditeľnosti. [17] Sekvenciu obrázkov z 3D modelu je možné vyrende-rovať v takmer ľubovoľnej 3D grafickej aplikácii. 1. Pomocou nástroja Rectangle Frame Tool vytvoríme rámec o rozmeroch obrázku. b n o Id t 5o» - d- >E- M- Obr. 8.24: Vytvorenie 360°prezentácie 2. Vyplníme ho prvou fotografiou zo série 3. V paneli Folio Overlays zvolíme Image Sequence a vyberieme adresár s obrázkami, ktoré sú pomenované rovnakým názvom so vzostupnou príponou, teda napríklad image001.jpg, image002.jpg... 48 8. Práca v Adobe InDesign 0 Folio Overlays |_n | • 4 Image Sequence © Load Images: f3"! 1 /Usersr'sleepwalkgr/Desktopr'stpl | 0 Shaw First Image Initially 1 I Auto Play rj Tap to Play/Paus» Delay: L±-| 3 | sets Speed: |-^-| IS | Ips Flay: |—j 1 j time I I Loop I I Stop it Last Image 0 Swipe tp Change Image nj Stop at Fi rst and Last Image 1 I Play in Reverse (a) Nastavenia sekvencie obrázkov Obr. 8.25: Naseba nadväzujúce obrázky 8.2.7 Odkazy Odkaz na URL adresu / e-mail 1. Pomocou File ->Place importujeme objekt, ktorý chceme používať ako tlačidlo, alebo vytvoríme neviditeľné tlačidlo pomocou Rectangle Frame Tool. 2. Označíme objekt a v paneli Buttons and Forms ho prevedieme na tlačidlo. Pridáme požadovanú akciu - v tomto prípade Go To URL a vyplníme URL adresu. 3. V prípade e-mailu zmeníme http:// na mailto://, teda odoslanie e-mailu na adresu meno@server.com bude vyzerať nasledovne: mailto: / / meno@server.com [17] Odkaz na stránku dokumentu 1. Pomocou File ->Place importujeme objekt, ktorý chceme používať ako tlačidlo, alebo vytvoríme neviditeľné tlačidlo pomocou Rectangle Frame Tool. n n p n n ex n n 5 i i i (b) Sekvencia obrázkov 49 8. Práca v Adobe InDesign 2. Označíme objekt a v paneli Buttons and Forms ho prevedieme na tlačidlo. Pridáma požadovanú akciu - v tomto prípade Go To Page a vyplníme číslo stránky. [17] Odkaz na článok 1. Pomocou File->Place importujeme objekt, ktorý chceme používať ako tlačidlo, alebo vytvoríme neviditeľné tlačidlo pomocou Rectangle Frame Tool. 2. Zmeníme http:/ / na navto:/ /. Odkaz na článok Obsah bude vyzerať nasledovne: navto://Obsah [17] ; Buttons aná Forms Name: URL odkaz Event: | On Release or Tap Actions: [Qj Go To URL ■ LRL: http:/y server.cum (a) Odkaz na URL adresu 0 Buttons ana Forms Type: | Button Nime: E ma I Event: | On Release or Tap Actions: Q ^ Go Tu URL LRL: ma i Ito: //mfl n ogiBerver.com (b) lOdkaz na E-mail Obr. 8.26: Odkazy na URL adresu a E-mail ; Buttons and Forms Type: | Button Event: | On Release or Tap Actions: Q gf Go Tü Page Zoom: I Inherit Zoom Page: [Í I] (a) Odkaz na stránku dokumentu ! Buttons d rid Forms Type: | Button Name: Kapitála Obsah Event: | On Release or Tap Actions: r{J gf Go Tn URL LRL: 'navto:/y Obsah (b) Odkaz na článok Obr. 8.27: Odkazy na stránku dokumentu a článok 50 8. Práca v Adobe InDesign 8.3 Layout pre rôzne zariadenia Po odtestovaní funkčnosti v programe Adobe Content Viewer bolo na základe už spracovaného interaktívneho dokumentu pomocou technológií Alternate a Liquid layout vytvorené nové alternatívne rozloženie pre tablet iPad vo vertikálnej polohe. Pri vytváraní tohoto alternatívneho layutu bolo použité nastavenie Object-based a prevedené potrebné manuálne úpravy rozloženia po transformácii. Takto vzniknuté rozloženie (iPad V) je navzájom previazané so zdrojovým dokumentom (iPad H). Všetky obsahové zmeny (nie však zmeny v umiestené objektov) vykonané v zdrojovom dokumente sa prenesú do dokumentov odvodených. Podľa potrieb upravíme rozmiestenie a veľkosť objektov, v layoute iPad V. Následne boli rovnakým spôsobom z rozložení pre iPad vytvorené alternatívne rozloženia pre tablety s operačným systémom Android ktorých rozlíšenie je v Adobe InDesign definované ako 1280x800px, (pomer strán 16:10). Vzhľadom na veľké množstvo tabletov s rôznym pomerom strán a veľkosťou displeja nie je osobitný layout pre OS Android nutne potrebný. Ak v dokumente nebude definovaný, bude prispôsobený layout určený pre iPad (s pomerom strán 4:3). Pomer strán publikácie však na všetkých zariadeniach ostane 4:3 a v prípade potreby budú pridané čierne pásy po stranách. [17] 8.4 Testovanie, export a distribúcia 8.4.1 Testovanie na PC a mobilných zariadeniach InDesign umožňuje testovanie vytváraného dokumentu v priebehu práce prostredníctvom aplikácie Adobe Content Viewer, na PC, alebo priamo na cieľovom mobilnom zariadení s iOS, alebo operačným systémom Android. Aplikácia je voľne na stiahnutie v obchodoch AppStore, resp. Google Play. 1. V paneli Folio Builder klikneme na Create new folio. 2. Zvolíme cieľové zariadenie a nastavíme parametre. 51 8. Práca v Adobe InDesign Pridáme nový článok (Article) zvolením súboru, alebo vložením práve otvoreného súboru. Označíme požadované folio a v možnosti Preview vyberieme zariadení na ktorom chceme fólio zobrazil Zariadenie musí byť pripojené prostredníctvom USB kábla a musí na ňom byť spustená aplikácia Adobe Content Viewer. Inak sa zariadenie v tejto ponuke nezobrazí. Výber testovacieho zariadenia Light housing Magazine Portfolio-öl Í4 H 768 24 *768 Í4 k 758 ?4 <758 Vytvorenie nového fólia Pridanie nového článku Obr. 8.28: Testovanie dokumentu pomocou panelu Folio Builder 52 8. Práca v Adobe InDesign 8.4.2 Vytvorenie aplikácie iOS Požiadavky: 1. iOS Developer Program (99$ ročne) [14] 2. Počítač s operačným systémom Mac OSX 3. Xcode V paneli Folio Builder vyberieme Fólio, ktoré chceme previesť na aplikáciu a z menu v pravom hornom rohu panelu zvolíme Create App. Týmto spustíme aplikáciu DPS App Builder v ktorej po zadaní prihlasovacích údajov a overení, že užívateľ je členom CreativeCloud, DPS Single, Professional, alebo Enterprise Edition vygenerujeme finálnu aplikáciu, ktorú je možné nainštalovať prostredníctvom iTunes na testovací tablet iPad, alebo odoslať do Apple App Store. V procese vytvárania aplikácie je potrebné zadať UDID (unikátny kód) testovacích zariadení. To znamená, že výslednú aplikáciu je pred odoslaním do Apple App Store možné nainštalovať len na tieto zariadenia.[6] Obr. 8.29: Vytvorenie aplikácie 53 8. Práca v Adobe InDesign Android Na vytvorenie aplikácie operačného systému Android je nutné vlastniť Adobe DPS vo verzii Professional, alebo Enterprise. Samotné vytvorenie Android aplikácie prebieha na webe https://appbuilder.digitalpublishing.ac-robat.com/ [7] Požiadavky: 1. Google Play Developer účet (25$ ročne) [25] 2. Ikona aplikácie vo formáte .png v rozlíšení minimálne 96x96px 3. Platný certifikát [9] App Detail Account Details 3 -i.iMiiii-fi iV.lmií'^iUímiiiU Obr. 8.30: Webová aplikácia DPS App Builder [4] 54 9 Záver Výsledkom praktickej časti bakalárskej práce je digitálne i tlačené osobné autorské portfolio a návod na tvorbu elektronických publikácií v Adobe InDesign. Výsledok práce je súhrnom teoretických poznatkov tlačových médií a rozsiahlej problematiky digitálneho publikovania. Významný prínos praktickej časti práce vidím v získaní nových poznatkov a skúseností v oblasti digitálneho publikovania ktoré by som rád rozširoval ďalej. Nezanedbateľným prínosom je vytvorenie osobného portfolia zahŕňajúceho výber prác z oblasti grafického designu. Prínos práce ďalej vidím v prepojení teoretických poznatkov a praktických postupov tvorby elektronických publikáciií. Moju prácu je tak možné využiť ako návod, ktorý zahŕňa pracovné postupy od prípravy dát, cez interaktívne prvky a testovanie až po export publikácie. Myslím si, že takýto návod môže pomôcť napríklad študentom Ateliéru grafického designu v rýchlejšom zvládnutí techniky tvorby elektronických publikácií, a tým prispeje k tvorbe bohatých elektronických publikácií. 55 Literatura [1] 500px.com. The premier photography community [online]. Dostupne z: http://500px.com/about, [cit. 2012-11-24]. [2] abduzeedo.com. Awesome brochure and print design inspiration [online]. Dostupne z: http:/ / abduzeedo.com/awesome-brochure-and-print-design-inspiration, [cit. 2013-04-16]. [3] adobe.com. Adobe digital publishing suite: Showcase gallery [online]. Dostupne z: http://blogs.adobe.com/digitalpublishinggallery/, [cit. 2012-11-24]. [4] adobe.com. Building native dps apps for android devices [online]. Dostupne z: http://helpx.adobe.com/digital-publishing-suite/help/building-android-apps.html, [cit. 2013-10-16]. [5] adobe.com. Digital publishing suite help: Video overlays [online]. Dostupne z: http:/ /helpx.adobe.com/digital-publishing-suite/help/video-overlays.html, [cit. 2014-02-11]. [6] adobe.com. Step by step guide to publishing ipad apps. Dostupne z: http:/ /help.adobe.com/en_US/ppcompdoc/Step_by_step_guide_to_d-ps_se.pdf, [cit. 2014-04-06]. [7] adobe.com. Adobe digital publishing suite [online]. Dostupne z: http://www.adobe.com/products/digital-publishing-suite-fami-lyhtml, [cit. 2014-04-19]. [8] adobe.com. Understanding different types of dps apps [online]. Dostupne z: http://helpx.adobe.com/digital-publishing-suite/help/dps-publishing-overview.html, [cit. 2014-04-19]. [9] adobe.com. Dps publishing process for android devices [online]. Dostupne z: http:/ /helpx.adobe.com/digital-publishing-suite/kb/publishing-process-android-amazon-mobile.html, [cit. 2014-04-22]. 56 9. záver [10] G. Ambrose and P. Harris. Layout: velkýprúvodcegrafickou úpravou. Computer Press, Brno, 2009. [11] G. Ambrose and P. Harris. Typografie: Grafický design. Computer Press, Brno, 2010. [12] C. Anderson. Wired magazine's ipad edition goes live [online]. Dostupné z: http://www.wired.com/2010/05/mag_editorsJetter/, [cit. 2012-11-24]. [13] apple.com. ibooks author [online]. Dostupné z: http://www.apple.com/ibooks-author/, [cit. 2013-05-17]. [14] apple.com. ios developer program [online]. Dostupné z: https://developer.apple.com/programs/ios/, [cit. 2014-04-22]. [15] bakerframework.com. Baker framework [online]. Dostupné z: http://www.bakerframework.com, [cit. 2014-04-18]. [16] behance.com. Behance :: About behance [online]. Dostupné z: https://www.behance.net/about, [cit. 2012-11-24]. [17] S. Cohan and D. Burns. Digital Publishing with Adobe InDesign CS6. Adobe Press, Berkeley, 2012. [18] designrelated.com. The all new design:related [online]. Dostupné z: http://www.designrelated.com/main/about, [cit. 2012-11-24]. [19] distriqt Pty Marija ivkovic portfolio [online]. Dostupné z: https:/ / itunes.apple.com/us/app/marija-ivkovic-portfolio/id459956316?mt=8, [cit. 2013-10-21]. [20] J. Dytrtová. Prezentační design. Tribum EU, Brno, 2009. [21] equasys.de. Standard resolutions [online]. Dostupné z: http://www.equasys.de/standardresolution.html, [cit. 2012-11-06]. [22] H. Ford. What's the difference between an epub, a pdf and a digital publication? [online]. Dostupné z: http: / / floatlearning.com/2013/05/whats-the-difference-between-an-epub-a-pdf-and-a-digital-publication/, [cit. 2013-03-07]. [23] L. Franz. Typographic web design: how to think like a typographer in HTML an CSS. John Wiley & Sons, Chichester, 2012. 57 9. záver [24] R. Gaywood. Retina display macs, ipads, and hidpi: Doing the math [online]. Dostupne z: http:/ / www.tuaw.com/2012/03/01 / retina-display-macs-ipads-and-hidpi-doing-the-math/, [cit. 2013-03-07]. [25] google.com. Google play developer [online]. Dostupne z: https://play.google.com/apps/publish/signup/, [cit. 2014-04-22]. [26] A. Gupta. Applying mathematics to web design [online]. Dostupne z: http:/ / www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/, [cit. 2012-12-01]. [27] M. Hlozka. Architectural portfolio [online]. Dostupne z: http: / / issuu.com/martinhlozka/docs/martin_hlozka_portfolio, [cit. 2014-04-30]. [28] inkling.com. The only collaborative publishing environment designed for professionals [online]. Dostupne z: https://www.inkling.com/habitat/, [cit. 2014-04-18]. [29] linkedin.com. About us — linkedin [online]. Dostupne z: http://www.linkedin.com/about-us], [cit. 2012-11-24]. [30] J. Lura. John lura: Architecture portfolio [online]. Dostupne z: https://itunes.apple.com/cz/app/john-lura-architecture-portfolio/id540878727?mt=8, [cit. 2013-10-21]. [31] S. Neagu. Stefan neagu portfolio [online]. Dostupne z: https:/ / itunes.apple.com/us/app/stefan-neagu-photographer/id649242083?mt=8, [cit. 2013-10-22]. [32] sabmiller.com. Sabmiller annual report [online]. Dostupne z: http://www.sabmiller.com/files/reports/ar2013/2013_annual_repo-rt_interactive.pdf, [cit. 2014-04-29]. [33] A. Shaughnessy. Graphic Design: A User's Manual. Laurence King Publishing Ltd, 2009. [34] N. G. Society. National geographic magazine [online]. Dostupne z: https:/ / itunes.apple.com/us/app/national-geographic-magazine /-id418671597?mt=8, [cit. 2014-04-29]. [35] sourcefabric.org. The open source platform to help you write and publish print and digital [online]. Dostupne z: http://www.sourcefabric.org/en/booktype, [cit. 2014-04-17]. 58 9. záver [36] M. Štefunko. Ekonómia slobody ekonómia slobody ekonómia slobody [online]. Dostupné z: https:/ / itunes.apple.com/cz/book/ekonomia-slobody/id73974423-8?mt=ll, [cit. 2014-04-29]. [37] J. L. Studios. Jon low studios portfolio. Dostupné z: https:/ / itunes.apple.com/us/app/jon-low-stu-dios/id568827957?mt=8, [cit. 2014-04-29]. [38] V. Svalbach. Základy vizuální komunikace: Rozpal písma [online]. Dostupné z: http:/ / is.muni.cz/th/172976/fi_b/prezentace/prednaska_rozpalpisma. [cit. 2012-12-01]. [39] thinkingform.com. Thinking capital magazine no:l designed by kari gerstner [online]. Dostupné z: http: / / thinkingform.com/2011/11/28/thinking-capital-magazine-nol-designed-by-karl-gerstner/, [cit. 2012-12-01]. [40] S. Tibken. Inkling takes on amazon, apple with new e-book publishing tool [online]. Dostupné z: http: / / www.cnet.com/news/inkling-takes-on-amazon-apple-with-new-e-book-publishing-tool, [cit. 2013-03-14]. [41] B. Tondreau. Layout Essentials: 100 design principles for using grids. Number ISBN 978-1-59253-472-2. Rockport publishers, Inc, 2009. [42] UBC. Ubc undergraduate viewbook 2014 [online]. Dostupné z: https:/ / itunes.apple.com/tc/app/ubc-undergraduate-viewbook/id-725050532?mt=8, [cit. 2014-04-29]. 59 10. Prílohy Obr. 10.2: Jednostĺpcová mriežka [41] Obr. 10.3: Dvojstĺpcová mriežka [41] 61 10. Prílohy Obr. 10.4: Viacstĺpcová mriežka [41] Modulárna mriežka Modular Obr. 10.5: Modulárna mriežka [41] 62 10. Prílohy Obr. 10.6: Hierarchická mriežka [41] 63 Príloha B 10. Prílohy Príloha C Obr. 10.10: National Geographie - interaktívny článok [34] 10. Prílohy Obr. 10.11: National Geographie - 360°prezentácia [34] NOW 40 Winks? Life is hard, and mammals need their z's to slog through it But why does a chipmunk need about 15 hours of shut-eye a day, when a giraffe needs only 4.5? One answer, says UCLA sleep researcher Jerome Siegel, lies in the varied ways animals have adapted to be energy efficient and to stay safe. Consider elephants, which nod off just three-plus hours a day. "To be so big, they have to eat most of the time,' Siegel says. In contrast, it makes evolutionary sense for brown bats to conserve energy except during the few hours a night when their insect prey is out A platypus also can feed less and slumber more (14 hours). Why? Maybe because Utile brown Ivit 2.9 Obr. 10.12: National Geographic - interaktívny článok [34] 67 10. Prílohy Obr. 10.13: UBC - úvodná stránka publikácie [42] Place Vancouver Okanagan British Columbia Discover what it's like to The majestic scenery Study in a place where yo j live and study in one of the of this stunning valley can't help but be inspired world's most liveable cities. matches the atmosphere to grow. on campus. Reputation Obr. 10.14: UBC - klikateľný obsah [42] 68 10. Prílohy Oil Obr. 10.15: UBC - ukážka z publikácie [42] ARE TAP on orange links to launch web content. Wi-Fi connection required. YOU READY? A KEY PIECE OF YOUR APPLICATION UBC WANTS TO GET TO KNOW YOU Knowing more about applicants through the Personal Profile section of the application helps us identify students who will flourish at UBC, not just becajse of high grades but also because of the experiences and ambition that they bring with them. The Personal Profile section Is also used for merit award evaluation. ltJs your chance to show us what you are most proud of, what is most important to you, and what you've learned from your experiences. This is where you tell us why you would be a great fit for UBC. Obr. 10.16: UBC - ukážka z publikácie [42] 69 10. Prílohy Obr. 10.18: Jon Low - ukážky z publikácie [37] 70 10. Prílohy Ekonómia ale b od y Ekonómia slobody Centrálne riadenie aloi il úzia V knihe Disairst: :V: lil* e:ikn:itiimcf i'ť In Cíiiiií'iriín 7V/rfiií.íií i) Ľrriiľri'ííV.'í .iĽririŕríi'/rii! úíílí) klirá :olíi vvľIlIiií po jeho siru li. Mariana kiili/.'.iv.ll y.:íl n-.k.' Líhali i/.'" iľ. I li 111' IV ľľ li I u l'.yAlii-.k'llľ IlÍ-.MI. Co Jľ • šLik d"l'-/.iL'jpi'j. vvt:c. vil-, u] posl.L-liv. Lvpioké p n.' Ii: u áhi ■.. ti filozofov a rakúsku ekonomickú školu (Mises. J layek15) o nemožnosti šÍLiintlio l"ľ Lil ni-'h.' l ij. 1.i1.t1í.1. kíiuciriu piu ľľ.'d.^Lia.'k in.ľi iíuíľíi chýba koordinačný obsah. Slovami Juana de Mariana: ..... moc a yl-Iľiiíľ --ú po.riäle.. Klin jc ddc-o. generál n.pi/.."a ľudí a -;*l loČli-. -li. Ll-.poň II.Ľ \-lL1.l- '.'k'.:lliľ-li. kU'lĹ i ."ll "L"'k. Op lljl. l": Oll Vplyv scholas noho chýb, a ľ„dia h .. Je veľkým omylom < i.i ti'j I ŕ i o generácie .i p'.: ru'iti sa do-LaĽ rímskokatolícka dikev ■ Uanv pivlĽsi.in.oY, rc-kor lacioral.s.ov. Alo V priebehu 16. stoi pod í i Iný tlak: najpi • v-sĽdk.'m nobola [a -. ľ im i n.''" n v -Iv ^ li scho a-lkkého učenia, ako jeho zamaskovanie. Napríklad vvf: ijmnv holandský protestantský právnik Hugo Grotius <15ä3 - 1645) prevzal zo scho!a-(i_"k<.'i d.'kLiírv rinoiii, viá.ano ľIľ'li ii.i potrubo a li^íLolVo-:' a ko hla'Ti''' l- rl.i min; iV.v hod nulv i m:/ii.ii!1.i • -v ;'LK-."n^l"i: ■ ocononia trhom. C-roli lis c.ioval niri-diveli -dioai-.tiko1. (A;: p Holil La a CuvavLíhkí.-.]. Ko ľ", o ra-.lodavník -lólI-k y luioiv/.iv k\ právnik I. HISTORICKÉ A OBSAHOVÉ VYMEDZENIE HÁKU S KEJ S KOLY 1.1. Koróne rakúskej ekonomickej školy 1.2. Zrod rakiiskoj c