E-boekdesign in hetePub-formaat

Introductie

Motto

Back to the Basics!

“ePub, it’s like the web in 1996!”

Even voorstellen

• Jacob Molenaar• Adviseur e-learning en online publishing• Docent cursus ‘Succesvol E-boeks uitgeven’

van MyBusiness Academy

• De basics:– Vorm en inhoud– Markup-talen– Stylesheets– Browsers

• ePub– HTML5

• PDF• ePub en Apps• E-boeken opmaken

Onderwerpen

Onderwerpen

• De basics:– Vorm en inhoud– Markup-talen– Stylesheets– Browsers

• ePub– HTML5

• PDF• ePub en Apps• E-boeken opmaken

Dit woord is BELANGRIJK.

Dit woord is BELANGRIJK.

Vorm: vet, corpsgrootte +, rood

Dit woord is BELANGRIJK.

Vorm: vet, corpsgrootte +, rood

Inhoud: nadruk

MARKUP-TALEN

Wikipedia

“A markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. The idea and terminology evolved from the "marking up" of manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts. Examples are typesetting instructions such as those found in troff and LaTeX, or structural markers such as XML tags. Markup is typically omitted from the version of the text that is displayed for end-user consumption. Some markup languages, such as HTML, have presentation semantics, meaning that their specification prescribes how the structured data are to be presented, but other markup languages, like XML, have no predefined semantics.”

Markup-talen

• HTML• XML• LaTeX

Is PDF een markup-taal? Nee!Is ePub een markup-taal? Nee!

Dit woord is BELANGRIJK.

Dit woord is BELANGRIJK.

Dit woord is <b><font color=“red” size=“larger”>belangrijk</font></b>.

HTML

‘tag’

Dit woord is BELANGRIJK.

Dit woord is <nadruk>belangrijk</nadruk>.

XML

Dit woord is BELANGRIJK.

Dit woord is <nadruk>belangrijk</nadruk>.

XML

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

Mediumneutraliteit

HTML en XML

• HTML heeft een presentatiegeoriënteerde semantiek:– Kop– Opsomming

• XML heeft een inhoud/functiegeoriënteerde semantiek:– Trefwoord– Inleiding

XHTML?

• Huwelijk van HTML en XML• De presentatiegeoriënteerde semantiek 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

XML

• Publicatieneutraal• 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 Information Typing Architecture)

Kernbegrippen

• Markup-taal• Scheiden van vorm en inhoud/functie• Syntaxis: structuur/opbouw van een zin of een

tag• Semantiek: betekenis van een zin of een tag• Mediumneutraliteit

Filosofisch uitstapje: Taal

• Markup-taal• Waarom een taal?• Omdat het over uitwisseling = communicatie gaat• Vormgeven = interpreteren = vertalen• Een vormgegeven document zit boordevol

semantiek en syntaxis die we intuïtief begrijpen• Maar een computer moet het ook kunnen.

Vandaar XML…

• De basics:– Vorm en inhoud– Markup-talen– Stylesheets– Browsers

• ePub– HTML5

• PDF• ePub en Apps• E-boeken opmaken

Onderwerpen

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

Dit woord is BELANGRIJK.

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

“Loop door de tekst heen. Alle karakters die je aantreft tussen de tags <trefwoord> en </trefwoord> maak je vet, twee punten groter en rood.”

Dit woord is BELANGRIJK.

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

“Loop door de tekst heen. Alle karakters die je aantreft tussen de tags <trefwoord> en </trefwoord> maak je vet, twee punten groter en rood.”

Dit noemen we een stylesheet

Stylesheets

• Zijn eigenlijk ook een transformatie• Voorbeelden:– XSL: eXtensible Stylesheet Language, met XSL-FO

(Formatting Objects) en XSLT (transformations) als derivaten

– CSS: Cascading Stylesheets

E-boeken opmaken…

…is een proces van transformaties/vertalingen:1. Van een XML-bestand met bijvoorbeeld een

DITA-XSD m.b.v. een XSLT-transformatie naar een XHTML5-bestand

2. Van een XHTML5-bestand m.b.v. een CSS naar een representatie in een browser op een tablet

E-boeken opmaken…

…is een proces van transformaties/vertalingen:1. Van een XML-bestand met bijvoorbeeld een

DITA-XSD m.b.v. een XSLT-transformatie naar een XHTML5-bestand

2. Van een XHTML5-bestand m.b.v. een CSS naar een representatie in een browser op een tablet

Hier concentreren wij ons vandaag op

• De basics:– Vorm en inhoud– Markup-talen– Stylesheets– Browsers

• ePub– HTML5

• PDF• ePub en Apps• E-boeken opmaken

Onderwerpen

Wikipedia

“Een webbrowser (ook wel (internet)browser of bladerprogramma genoemd) is een computerprogramma om webpagina's te bekijken.”

Een browser is een computerprogramma ome-boekbestanden mee te bekijken.

BrowserContent

Stylesheet

Adobe Digital Editions,Mobipocket Reader,

Stanza,Azardi,

EPUBReader,iBooks Reader

Dubbele bril

Dubbele bril

BrowserStylesheet

Dubbele bril

BrowserStylesheet

Interpretatie 1 Interpretatie 2 Interpretatie 3

Onderwerpen

• De basics:– Vorm en inhoud– Markup-talen– Stylesheets– Browsers

• ePub– HTML5

• PDF• ePub en Apps• E-boeken opmaken

• Technische standaard voor E-books• ‘Envelop’ voor het verpakken van alles wat je

nodig hebt voor een e-boek• Ontwikkeld door International Digital

Publishing Forum (IDPF)• Open standaard• Geen DRM• Huidige versie: 3.0 (oktober 2011)

ePub

ePub bestaat uit:

• ePub Content Documents– XHTML Content Documents– ePub Navigation Documents– SVG Content Documents– Scripted Content Documents

• ePub Stylesheets (CSS)

ePub 3.0

• Ondersteunt HTML5• Ondersteunt multimedia (SVG)• Ondersteunt CSS• Ondersteunt scripting

HTML5

• Opvolger van de huidige HTML-generatie (HTML4): draait in een browser, platformonafhankelijk

• Rijkere codering• Scripting (bijvoorbeeld camera aanroepen, formuliertje

afhandelen)• Betere integratie met XML• Betere grafische mogelijkheden (bijvoorbeeld drag and

drop)• Preloading• Makkelijker integratie met andere applicaties en databases

HTML5

• HTML5 maakt van het ‘houterige’ HTML een soepele multimediale omgeving (HTML5 =HTML4 + Java)

• HTML5 stelt je in staat een complete website te laden en eventueel ook offline te gebruiken, zodat deze op een applicatie gaat lijken

• HTML5 maakt je onafhankelijk(er) van Google of Apple

• Met HTML5 hoef je maar één versie van jeE-book/App te ontwikkelen

Kortom…

• Amazon gebruikt ook ePub voor de Kindle-boeken, maar pakt de ePub-content in een Mobipocket-’envelop’ in

• Apple heeft ePub aangepast tot een eigen formaat voor iBooks Author

ePub-toepassingen

Onderwerpen

• De basics:– Vorm en inhoud– Markup-talen– Stylesheets– Browsers

• ePub– HTML5

• PDF• ePub en Apps• E-boeken opmaken

PDF

• Portable Document Format• Gesloten formaat van Adobe• Is een de facto wereldstandaard geworden• PDF ‘bevriest’ de uiteindelijke publicatievorm

van een document t.b.v. interoperabiliteit• In PDF verlies je alle onderliggende syntaxis en

semantiek• PDF bevat Adobe-functionaliteiten/scripting

ePub versus PDF

• Beide formaten geven interoperabiliteit• ePub:– Voordelen: flexibiliteit, interactie met omgeving– Nadeel: minder grafische kwaliteit

• PDF:– Voordeel: meer grafische kwaliteit– Nadeel: starheid, minder interactie met omgeving

Onderwerpen

• De basics:– Vorm en inhoud– Markup-talen– Stylesheets– Browsers

• ePub– HTML5

• PDF• ePub en Apps• E-boeken opmaken

• Een E-book is een bestand• Een App is een applicatie (interactief)• 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 platforms

(bijvoorbeeld Financial Times)

E-books en Apps

• Moeten ontwikkeld worden met door apple goedgekeurde software

• Worden inhoudelijk (geen politiek, geen seks) en technisch gekeurd

• Moeten worden verkocht/gedistribueerd via de App Store (of iTunes of iBookstore…)

• Draaien op het Apple-platform

Apple Apps

• Kunnen met verschillende pakketten worden ontwikkeld

• Worden niet inhoudelijk en technisch gekeurd• Mogen op verschillende manieren

verkocht/gedistribueerd worden• Draaien op het Android-platform

Android Apps

Onderwerpen

• De basics:– Vorm en inhoud– Markup-talen– Stylesheets– Browsers

• ePub– HTML5

• PDF• ePub en Apps• E-boeken opmaken

• Traditionele opmaak = statisch (PDF)• Stylesheet-opmaak = dynamisch (HTML/CSS,

ePub)

• Voordelen: flexibel, ‘reflowable’• Nadelen: minder controle (fonts, paginering,

positionering, tabellen, formules)

Stylesheet-gedreven opmaak

Voorbeeld: ADE

Voorbeeld: Mobi Reader

Voorbeeld: Kindle 2

• Meer alsof je een website vormgeeft 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 lastig zijn• Versie 3.0: betere ondersteuning multimedia en

interactiviteit

ePub-vormgeven

Schoonheid

• Maar ePub kan ook mooi zijn• Zie bijvoorbeeld www.epubzengarden.com

Onderwerpen

• De basics:– Vorm en inhoud– Markup-talen– Stylesheets– Browsers

• ePub– HTML5

• PDF• ePub en Apps• E-boeken opmaken