Forståelse for grafisk workflow

Transkript

1 2 Forståelse for grafisk workflow I designet af den trykte bog har jeg haft et vågent øje til de overvejelser og design problematikker det medfører at bogen skulle klare at laves til en E-bog. Her vil jeg klarlægge nogle af de design overvejelser der er gjort for at gøre dette muligt med de restriktioner e-bøger har. Produkt Sammenhængende produktserie bestående af en trykt bog, en hjemmeside og en e-bog, med en visuel identitet der binder produkterne sammen. Hvad er en E-bog? E-bøger er et term der bliver smidt rundt meget nutildags, og det variere fra alt mellem interaktive pdf 'er til hjemmelavede formater der er begrænset til bestemte forlag. I mit tilfælde tager jeg udgangspunkt i det åbne format.epub som bliver brugt til langt de fleste e-bogs hjemmesider. Nøglepunkter Behold det visuelle design Funktionelle links og henvisninger Cover EPubcheck godkendt Problematiske elementer Fonte Grafiske elementer Billeder Forståelse for grafisk workflow Overvejelser og design problematikker

2 Overvejelser og design problematikker Forståelse for grafisk workflow 3

3 4 Filformater i en E-bog Opbygningen af en E-bog E-bøger er baseret på xhtml kodesproget, dog med visse begrænsninger, baseret på hvilken læser der bruges til at vise e-bogen, ligesom forskellige browsers fortolker xhtml forskelligt. Dette betyder, at når man laver e-bøger er man ofte tvunget til at kode til de mest brugte på forskellige platforme. Mest populære E-bogslæsere Apple: Bruger deres egen læser, kaldet Ibook. Denne læser er opdateret med de nyeste koder og virker med de fleste xhtml og html 5 koder. Fordelen ved Ibook og apples strenge regler for udgivelsen af Apps gør det nemt at finde ud af hvordan en E-bog vil se ud på en Apple. Android: Da android er en åben platform gør det også at der findes et utal af forskellige læsere. Den mest almindelige er BluFire Reader. Alle disser fortolker koderne meget forskelligt og hvad der ser rigtigt ud på en, virker overhovedet ikke på andre. Dog fungere fonte på de fleste, men visse læsere har tendens til at ignorere top margener. Windows: Windows platformen har ligesom Android en del forskellige læsere tilgængelige, men modsat Android er over 80% af alle E-bøger læst på den samme platform, nemlig Adobe Digital Editions. Denne læser klarer de fleste ting nemt og er den bedste læser til at tjekke general funktionalitet igennem, dog har den en tendens til at pixelere billeder når den skalere dem. Specifikke filformater og deres brug.opf: Denne fil fortæller læseren hvilket indhold ebogen består af og i hvilken rækkefølge filerne skal læses..xhtml: Disse filer består af en eller flere sider i E-bogen og hver er typisk et kapitel. Når man splitter et dokument ved eksporten af Indesign laver den en ny.xhtml fil..ncx: Denne fil laver en indholdsfortegnelse som bliver importeret af læseren. Denne fil skal bygges op på en helt bestemt måde, ellers vil E-bogen fejle i godkendelsen hos mange online butikker. Forståelse for grafisk workflow Overvejelser og design problematikker

4 Font typer 5 TrueType: Udviklet af Apple i 1980'erne til at erstatte ældre fontyper såsom Type 1. Selvom TrueType er licenseret af Microsoft, kan brugen af True- Type på tværs af Apple og Microsoft systemer stadig skabe problemer, hvor der f.eks. skal bruges forskellige fonte til hvert system. Derudover har mange TrueType fonte ikke et særligt stort bibliotek af karaktere. OpenType: Udviklet i samarbejde mellem Adobe og Microsoft, og blev annonceret tilbage i 1996, Adobe har siden lavet samtlige af deres fonte til dette format. I modsætning til TrueType kan OpenType fonte bruges på både Apple og Microsoft systemer, og følger de samme typografiske regler på begge systemer. Dette gør også OpenType fonte til den foretrukne font type til E-bøger. Specielt til e-bøger: E-bøger understøtter som basis kun et begrænset antal fonte, alt efter hvilken læser der bruges, med kun få fonte tilfælles. Overvejelser Ved design af min trykte bog, blev jeg nødt til at tænke over designet med det udgangspunkt at bogen skulle laves til en E-bog, da der er unikke regler til.epub formatet. Fonte Da jeg designede min bog, valgte jeg at bruge en font til min brødtekst, som findes på alle læsere, nemlig Minion Pro. Jeg har valgt at beholde min Agency FB font til overskrifter, og vedhæfte fonten i min E-bog. Dette er normalt ikke gjort, da ikke alle læsere tager hensyn til vedhæftede fonte. Dog har den sidste opdatering af Ibook gjort at den acceptere flere OpenType fonte, og det gjorde at jeg følte mig tryg ved brugen af Agency FB, da 9 ud af 10 e-bøger nu bliver læst på en læser der understøtter det. Grafik og billede elementer Grafik og billeder E-bøger læser billeder som en hjemmeside gør det, og bruger samme css regler, heriblandt primært margins til at bestemme hvordan den interagere med andre elementer. Da min bog består af mange elementer med rammer omkring, både billeder og tekst (som vist til ventre), er jeg blevet nødt til at lægge dem ind i e-bogen som billeder med teksten inkluderet. Normalt ville jeg kunne gøre det med <div> bokse og float, men ikke alle læsere acceptere float reglen, så for at ramme så bredt som muligt var dette løsningen. For at mindske pixeleringen af teksten, som kan ske på visse læsere når de skalere billedet, har jeg lagt dem i 100% størrelse og låst den til dette i css filen. Jeg har valgt at droppe den pagina bar i siden af bogen, da ebøgers pagina er dynamisk opdaterede baseret på læseren. Overvejelser og design problematikker Forståelse for grafisk workflow

5 6 Udsnit af kode fra trykt bog side 10: Timeline Fra InDesign til E-pub E-bøger i.epub formatet laves ved at eksportere dokumentet, hvor en masse hensyn er taget inden eksporten, dette gælder især afsnitsformater og tegnformater. Alle formater bliver lavet om til koder som vist til højre, dog er ikke alle format funktioner understøttet ved eksport til.epub. Derudover skal man tænke på bogen, som ville man lave en hjemmeside. F.eks. må der ikke være specialtegn eller mellemrum i formatnavne og filnavne, inklusiv billeder. Formater til kode Afsnitsformater = <p></p> Tegnformater = <span></span> Både afsnitsformater og tegnformater får en class, der har samme navn som formatet har i InDesign, dette er grunden til at man ikke må bruge specialtegn og mellemrum i navnene. En vigtig note er også, at hvis en font har en kursiv der ikke hedder italic, skal man manuelt ind og rette den i koden, da den ellers ikke følger med. Alle kapitler har et id tag, som bruges som link destination fra indholdsfortegnelsen. Udsnit af kode fra content.opf Forståelse for grafisk workflow Overvejelser og design problematikker

6 Indholdsfortegnelse Indholdsfortegnelse Når man eksportere til en e-bog er et indholdsfortegnelsesformat en nødvendighed, da den bruges til at definere de indbyggede indhodsfortegnelser i forskellige e-bogslæsere, og hvis den ikke indeholder en, vil den ikke blive godkendt. Da jeg lavede mit indholdsfortegnelsesformat, gjorde jeg således: 3 1 Definer format: Her medtager jeg alle afsnitsformater der skal med i indholdsfortegnelsen. Derefter indstiller jeg dem alle til ikke at medtage sidetal, da e-bøger er reflowable, og dette gør at deres sider ændre sig alt efter læser og skriftstørrelse der er valgt. 2 Eksportindstillinger: Her indsætter jeg mit indholdsfortegnelsesformat under TOC-format. 3 toc.xhtml: Bruger informationen fra formatet til at lave en ordered list med list elementer til hver punkt i indholdsfortegnelsen. Disse bliver brugt til læsere med xhtml baserede indholdsfortegnelser. 4 toc.ncx: Ligesom.xhtml filen bruger denne informationen fra formatet til at generere en indholdfortegnelse. NCX filen bruger et <navmap> tag i stedet for en ordered list. NavMap tagget er specifikt til e-bøger og bliver brugt i de fleste læsere, såsom IBooks og Adobe Digital editions. 4 Overvejelser og design problematikker Forståelse for grafisk workflow

7 8 Udsnit af kode fra idgeneratedstyles.css Stylesheet Udseendet af en e-bog er defineret udfra et stylesheet der bliver automatisk genereret når man eksportere fra InDesign. Efter eksporteringen skal man dog ind og rette i stylesheetet, for at sikre at bogen kan blive godkendt og for at finjustere mange af koderne da eksporten ikke er perfekt. 1 Et eksempel på css koden der importere en font, der er vedhæftet i.epub filen. Her er det Agency FB fonten der er importeret hvor dens egenskaber er defineret. 2 Her bliver de generelle indstillinger for hele e-bogen sat, dette er defineret udfra indstillingerne når man eksportere fra InDesign. Koden -epub-hyphens giver bogen rettigheder til at dele ord efter det sprog der er defineret i content.opf filen. 3 Den autogenerede css kode for Afsnitsformatet Brødtekst med indryk eller som jeg skriver for at sikre at det virker i.epub br_m_indryk. Koden -epub-text-align-last: left; gør at en tekst med text-align: justify lader den sidste linie stå med text-align: left i stedet for justify, hvilket er vigtigt i eksempelvis en e-bogs roman Forståelse for grafisk workflow Overvejelser og design problematikker

8 Uddrag Pixels Cover Når man eksportere en InDesign fil til en.epub fil har man 2 muligheder. Enten tager man og laver et cover billede af den første side, eller også kan man importere et.jpg billede. Cover billeder har nogle bestemte regler for opløsning de skal leve op til. De skal være i 300 dpi og have en max pixelmængde på (dvs. at bredde * højde ikke må overstige 2 millioner pixels). Jeg har valgt at bruge samme cover billede som den trykte bog til mit cover, dog med et lille E-Pub-tag i øverste venstre hjørne Pixels EPubcheck godkendelse For at sikre en vis standard, som.epub bøger skal leve op til for at de kan uploades til online butikker, har organisationen IDPF (International Digital Publishing Forum) lavet en validater som læser koden i e-bogen og finder potentielle fejl. Dette er et java program der kan downloades, og jeg bruger det til samtlige e-bøger jeg laver for at sikre standarden overholdes * = Pixels Overvejelser og design problematikker Forståelse for grafisk workflow