E boekdesign in het e pub-formaat 22-3-2012 Jacob Molenaar
-
Upload
jacob-molenaar -
Category
Technology
-
view
263 -
download
0
description
Transcript of E boekdesign in het e pub-formaat 22-3-2012 Jacob Molenaar
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
• 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