E- boekdesign in het epub- formaat. Introduc:e

Transcriptie

1 Jutoh Azardi

2

3 E- boekdesign in het epub- formaat Introduc:e

4 Mo<o Back to the Basics! epub, it s like the web in 1996!

5 Even voorstellen Jacob Molenaar Adviseur e- learning en online publishing Docent cursus Succesvol E- boeks uitgeven van MyBusiness Academy

6 De basics: Vorm en inhoud Markup- talen Stylesheets Browsers epub HTML5 PDF epub en Apps E- boeken opmaken Onderwerpen

8 Dit woord is BELANGRIJK.

9 Dit woord is BELANGRIJK. Vorm: vet, corpsgroo<e +, rood

10 Dit woord is BELANGRIJK. Vorm: vet, corpsgroo<e +, rood Inhoud: nadruk

11 MARKUP- TALEN

12 Wikipedia A markup language is a modern system for annota:ng a document in a way that is syntac:cally dis:nguishable from the text. The idea and terminology evolved from the "marking up" of manuscripts, i.e., the revision instruc:ons by editors, tradi:onally wri<en with a blue pencil on authors' manuscripts. Examples are typese\ng instruc:ons such as those found in troff and LaTeX, or structural markers such as XML tags. Markup is typically omi<ed from the version of the text that is displayed for end- user consump:on. Some markup languages, such as HTML, have presenta:on seman:cs, meaning that their specifica:on prescribes how the structured data are to be presented, but other markup languages, like XML, have no predefined seman:cs.

13 Markup- talen HTML XML LaTeX Is PDF een markup- taal? Nee! Is epub een markup- taal? Nee!

14 Dit woord is BELANGRIJK.

15 Dit woord is BELANGRIJK. HTML Dit woord is <b><font color= red size= larger >belangrijk</font></b>. tag

16 Dit woord is BELANGRIJK. XML Dit woord is <nadruk>belangrijk</nadruk>.

17 Dit woord is BELANGRIJK. XML Dit woord is <nadruk>belangrijk</nadruk>. Dit woord is <trefwoord>belangrijk</trefwoord>. Mediumneutraliteit

18 HTML en XML HTML heeb een presenta:egeoriënteerde seman:ek: Kop Opsomming XML heeb een inhoud/func:egeoriënteerde seman:ek: Trefwoord Inleiding

19 XHTML? Huwelijk van HTML en XML De presenta:egeoriënteerde seman:ek van HTML in de syntaxis van XML Niet- mediumneutraal XML of XHTML uit Indesign is meestal niet meer dan opmaak- markup met vierkante haken er omheen

20 XML Publica:eneutraal Uitbreidbaar (x van extensible) Arbeidsintensief Want je moet je eigen tags verzinnen En vastleggen in een apart bestand (DTD, XSD) Duur Vandaar bijvoorbeeld DITA (Darwin Informa:on Typing Architecture)

21 Kernbegrippen Markup- taal Scheiden van vorm en inhoud/func:e Syntaxis: structuur/opbouw van een zin of een tag Seman:ek: betekenis van een zin of een tag Mediumneutraliteit

22 Filosofisch uitstapje: Taal Markup- taal Waarom een taal? Omdat het over uitwisseling = communica:e gaat Vormgeven = interpreteren = vertalen Een vormgegeven document zit boordevol seman:ek en syntaxis die we intuï:ef begrijpen Maar een computer moet het ook kunnen. Vandaar XML

24 Dit woord is <trefwoord>belangrijk</trefwoord>.

25 Dit woord is <trefwoord>belangrijk</trefwoord>. Loop door de tekst heen. Alle karakters die je aantreb tussen de tags <trefwoord> en </trefwoord> maak je vet, twee punten groter en rood. Dit woord is BELANGRIJK.

26 Dit woord is <trefwoord>belangrijk</trefwoord>. Loop door de tekst heen. Alle karakters die je aantreb tussen de tags <trefwoord> en </trefwoord> maak je vet, twee punten groter en rood. Dit noemen we een stylesheet Dit woord is BELANGRIJK.

27 Stylesheets Zijn eigenlijk ook een transforma:e Voorbeelden: XSL: extensible Stylesheet Language, met XSL- FO (Forma\ng Objects) en XSLT (transforma:ons) als derivaten CSS: Cascading Stylesheets

28 E- boeken opmaken is een proces van transformajes/vertalingen: 1. Van een XML- bestand met bijvoorbeeld een DITA- XSD m.b.v. een XSLT- transforma:e naar een XHTML5- bestand 2. Van een XHTML5- bestand m.b.v. een CSS naar een representa:e in een browser op een tablet

29 E- boeken opmaken is een proces van transformajes/vertalingen: 1. Van een XML- bestand met bijvoorbeeld een DITA- XSD m.b.v. een XSLT- transforma:e naar een XHTML5- bestand 2. Van een XHTML5- bestand m.b.v. een CSS naar een representa:e in een browser op een tablet Hier concentreren wij ons vandaag op

31 Wikipedia Een webbrowser (ook wel (internet)browser of bladerprogramma genoemd) is een computerprogramma om webpagina's te bekijken. Een browser is een computerprogramma om e- boekbestanden mee te bekijken.

32 Stylesheet Content Browser Adobe Digital Edi:ons, Mobipocket Reader, Stanza, Azardi, EPUBReader, ibooks Reader

33 Dubbele bril

34 Dubbele bril Stylesheet Browser

35 Dubbele bril Stylesheet Browser Interpreta:e 1 Interpreta:e 2 Interpreta:e 3

37 epub Technische standaard voor E- books Envelop voor het verpakken van alles wat je nodig hebt voor een e- boek Ontwikkeld door Interna:onal Digital Publishing Forum (IDPF) Open standaard Geen DRM Huidige versie: 3.0 (oktober 2011)

38 epub bestaat uit: epub Content Documents XHTML Content Documents epub Naviga:on Documents SVG Content Documents Scripted Content Documents epub Stylesheets (CSS)

39 epub 3.0 Ondersteunt HTML5 Ondersteunt mul:media (SVG) Ondersteunt CSS Ondersteunt scrip:ng

40 HTML5

41 HTML5 Opvolger van de huidige HTML- genera:e (HTML4): draait in een browser, plawormonaxankelijk Rijkere codering Scrip:ng (bijvoorbeeld camera aanroepen, formuliertje axandelen) Betere integra:e met XML Betere grafische mogelijkheden (bijvoorbeeld drag and drop) Preloading Makkelijker integra:e met andere applica:es en databases

42 Kortom HTML5 maakt van het houterige HTML een soepele mul:mediale omgeving (HTML5 = HTML4 + Java) HTML5 stelt je in staat een complete website te laden en eventueel ook offline te gebruiken, zodat deze op een applica:e gaat lijken HTML5 maakt je onaxankelijk(er) van Google of Apple Met HTML5 hoef je maar één versie van je E- book/app te ontwikkelen

43 epub- toepassingen Amazon gebruikt ook epub voor de Kindle- boeken, maar pakt de epub- content in een Mobipocket- envelop in Apple heeb epub aangepast tot een eigen formaat voor ibooks Author

45 PDF Portable Document Format Gesloten formaat van Adobe Is een de facto wereldstandaard geworden PDF bevriest de uiteindelijke publica:evorm van een document t.b.v. interoperabiliteit In PDF verlies je alle onderliggende syntaxis en seman:ek PDF bevat Adobe- func:onaliteiten/scrip:ng

46 epub versus PDF Beide formaten geven interoperabiliteit epub: Voordelen: flexibiliteit, interac:e met omgeving Nadeel: minder grafische kwaliteit PDF: Voordeel: meer grafische kwaliteit Nadeel: starheid, minder interac:e met omgeving

48 E- books en Apps Een E- book is een bestand Een App is een applica:e (interac:ef) Maar beide groeien naar elkaar toe: HTML5 Een App is niet per se een Apple- App! Apple- Apps: draaien alleen op ipad, iphone, ipod Webapps (HTML5): draaien op alle plaworms (bijvoorbeeld Financial Times)

49 Apple Apps Moeten ontwikkeld worden met door apple goedgekeurde sobware Worden inhoudelijk (geen poli:ek, geen seks) en technisch gekeurd Moeten worden verkocht/gedistribueerd via de App Store (of itunes of ibookstore ) Draaien op het Apple- plaworm

50 Android Apps Kunnen met verschillende pakke<en worden ontwikkeld Worden niet inhoudelijk en technisch gekeurd Mogen op verschillende manieren verkocht/ gedistribueerd worden Draaien op het Android- plaworm

52 Stylesheet- gedreven opmaak Tradi:onele opmaak = sta:sch (PDF) Stylesheet- opmaak = dynamisch (HTML/CSS, epub) Voordelen: flexibel, reflowable Nadelen: minder controle (fonts, paginering, posi:onering, tabellen, formules)

53 Voorbeeld: ADE

54 Voorbeeld: Mobi Reader

55 Voorbeeld: Kindle 2

56 epub- vormgeven Meer alsof je een website vormgeeb dan een document Voor verschillende user interfaces tegelijk It s like the web in 1996! : complexere opmaak lukt niet in epub Geen vaste paginering Zelfs tabellen kunnen al las:g zijn Versie 3.0: betere ondersteuning mul:media en interac:viteit

57 Schoonheid Maar epub kan ook mooi zijn Zie bijvoorbeeld