Alcuni degli ebook che abbiamo prodotto:

Servizio di conversione e creazione ebook per editori ed autori.
Conversione da Word, inDesign, XPress, pdf, odt... in ePub e mobi

Per informazioni scrivere a: info@guidaebook.com


Home » Realizzare il contenuto di un ePub

Realizzare il contenuto di un ePub

Il contenuto di un eBook in ePub deve essere realizzato con file scritti in XHTML, con qualche restrizione e regola in più. Non importa se l’estensione del file sia “.xhtml”, “.html” o “.xml”, l’importante è che il contenuto risponda ai requisiti richiesti, primo fra tutti la dichiarazione XHTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

La codifica da usare è “UTF-8″ o “UTF-16″, anche se non è garantita la resa dell’intero set di caratteri, e non vanno usate altre codifiche (come la codifica “iso-8859-1″ che viene usata spesso nei file HTML).

Nell’intestazione del file, ad esempio:

<head>
<title>Capitolo 1</title>
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
</head>

è inutile inserire una qualsiasi informazione che non sia semplicemente il titolo del file (più che altro per nostra comodità, perché il titolo visualizzato sarà quello mostrato nei file “content.opf” e “toc.ncx”, ma usare lo stesso titolo anche qui è utile per organizzare il contenuto ed orientarci negli eBook con molti file) e il riferimento al foglio stile. La path del file “CSS” è relativa, quindi se è contenuta in una sottocartella è necessario indicarla.

Il body

Dopo di che inizia il “<body>”, tag che di solito non ha ulteriori specificazioni.
Le specifiche XML/XHMTL richiedono che in questo file vi siano solamente i contenuti e le indicazioni strutturali, mentre ogni particolare ed indicazione sulla forma deve essere demandato al foglio stile. Quindi anche i margini della pagina non sono specificati nella tag “<body>” ma devono essere inseriti nel foglio CSS con una opportuna indicazione, come:

body {
   margin-left: 5%;
   margin-right: 5%;
   margin-top: 5%;
   margin-bottom: 5%; }

La struttura

E’ importante, sia per una buona riproduzione, sia per una buona compatibilità con i diversi reader e software di lettura, sia per una nostra interpretazione del codice per le modifiche, che la pagina sia chiaramente strutturata e che le diverse parti siano chiaramente contrassegnate. Occorre anche che la struttura sia omogenea in tutto l’eBook, quindi in tutti i file.
Ad esempio:

  • H1 per il titolo del libro
  • H2 per l’intestazione dei capitoli
  • H3 per l’intestazione dei sottocapitoli
  • H4 per l’intestazione dei paragrafi

… e così via fino ad “H6″. Per le intestazioni del libro, capitoli, sottocapitoli, ecc…, è meglio usare le tag “<h1>”, “<h2>”,”<h3>”… fino a “<h6>” invece di stili personalizzati, per consentire ai software di lettura ed ai reader, nonché ai software di conversione fra formati, di interpretare in modo corretto la struttura del contenuto.
La formattazione di questi elementi (dimensioni, stile, spazio sopra e sotto…) deve essere indicata nel foglio stile, ad esempio:

h3 {
   font-size: 1.5em;
   line-height: 1.2em;
   font-weight: normal;
   margin-top: 1em;
   margin-bottom: 0.5em;
   font-style: italic; }

Le diverse parti del testo devono essere racchiuse fra tag “<div>”, con diversi attributi “class” a seconda della loro posizione e funzione all’interno del contenuto.
Ad esempio:

<div class="text">
<h2>Capitolo 1</h2>
   <div class="text-block">
   <p>Testo testo....</p>
   <p>Testo testo....</p>
   <p>Testo testo....</p>
   </div>
   <h3>Sottocapitolo 1</h3>
     <div class="text-block">
     <p>Testo testo....</p>
     <p>Testo testo....</p>
     </div>
     <h4>Esempio</h4>
     <div class="code-block">
       <p>Code code....</p>
       <p>Code code....</p>
       </div>
   <h3>Sottocapitolo 2</h3>
     <div class="text-block">
     <p>Testo testo....</p>
     <p>Testo testo....</p>
     </div>

Il testo

Il testo, che deve sempre essere compreso fra tag “<p>”, viene formattato tramite il foglio stile “CSS”. Evitare le “brutte abitudini” date dall’HTML di inserire il testo direttamente e di usare il “<br>” invece del tag di paragrafo “<p>”. Ovviamente si può usare il tag “<br />”, ma comunque sempre all’interno di un tag di paragrafo.
I diversi tipi di testo devono essere compresi in “div” che li qualificano per posizione e funzione e che gli rendano le opportune formattazioni. Quindi, iniziando a creare i file bisogna domandarci quali e quanti tipi di testo abbiamo e che formattazioni devono avere. Ciascun tipo di testo e ciascun insieme di formattazione porta alla definizione di una “class” diversa.
Ad esempio, abbiamo un testo corrente che ha determinate caratteristiche, ma abbiamo bisogno che, ad un certo punto, vi sia uno spazio bianco nel testo che separi il testo anche senza la presenza di alcun sottoparagrafo. Non possiamo usare, come faremmo nell’HTML od in “Word”, dei ritorni a capo con paragrafo vuoti, perché potrebbero essere interpretati in modo diversi da diversi software o reader, od addirittura ignorati. Dobbiamo creare nel foglio stile una “class” apposita che preveda un “margin-top” od un “margin-bottom” a seconda se vogliamo lo spazio sopra o sotto.
Avremo:

   <div class="text-block">
    <p>Testo testo....</p>
    <p>Testo testo....</p>
    <p>Testo testo....</p>
   </div>
   <div class="text-block-break">
    <p>Testo testo....</p>
   </div>
   <div class="text-block">
    <p>Testo testo....</p>
    <p>Testo testo....</p>
    <p>Testo testo....</p>
   </div>

oppure:

   <div class="text-block">
    <p>Testo testo....</p>
    <p>Testo testo....</p>
    <p>Testo testo....</p>
    <p class="text-block-break">Testo testo....</p>
    <p>Testo testo....</p>
    <p>Testo testo....</p>
    <p>Testo testo....</p>
   </div>

“text-block-break” è la “class” che, tramite l’opportuna definizione nel foglio stile, spezzerà il testo imponendo uno spazio fra i paragrafi, pur avendo tutte le altre definizioni identiche alla “text-block”.

I “div”

Come abbiamo visto occorre un uso intensivo di “div” per formattare il nostro contenuto. Dobbiamo esaminare bene le caratteristiche del testo nel suo complesso all’interno non solo di un singolo file, ma dell’intero eBook e progettare una struttura a “div” che corrisponda alle nostre necessità.
Le caratteristiche di formattazione vanno attribuite ai “div” tramite l’attributo “class” o “id”. Nell’HTML siamo abituati ad usare sia “class” che “id” per attribuire la formattazione senza grosse distinzioni (altra cattiva abitudine), qui “id” è utilizzato anche ai fini di indicizzare il testo e le diverse “class” possono essere differenziate in base a quale “id” le contiene.
Il principio che dobbiamo seguire è che ogni “id” può apparire una sola volta per ciascun file, mentre le “class” si possono ripetere sia all’interno dello stesso “id” che in differenti “id” e che possono avere diverse formattazioni a seconda dell’”id” in cui di trovano.
Non abbiamo a disposizione neppure la possibilità di usare il “float” nei fogli stile, perché il flusso del testo è sempre dall’alto al basso e non può esservi nessun elemento a fianco di un altro. Nessuna immagine affiancata da testo, ad esempio, ma sempre interrompendo il testo.
A proposito dell’uso di “div” con “class” e “id”, dobbiamo tenere presente che l’uso degli “id” semplifica la struttura dei file complicati, ma complica la struttura dei file semplici. Per un romanzo, ad esempio, od una raccolta di racconti o poesie, ci possiamo limitare ad usare “class”, mentre gli “id” si giustificano solamente quando in un testo vi sia del testo corrente che debba avere formattazione differente a seconda della sua posizione all’interno del file.
Una struttura come questa:

<div class="text">
<h2>Capitolo 1</h2>
   <div class="block">
   <p>Testo testo....</p>
   <p>Testo testo....</p>
   <p>Testo testo....</p>
   </div>
<h2>Capitolo 2</h2>
   <div class="block">
   <p>Testo testo....</p>
   <p>Testo testo....</p>
   </div>
</div>

è abbastanza semplice e basta l’uso di “div” con attributo “class”. Realizzando il codice, o rileggendolo a posteriori per modificarlo, non è possibile fare confusione ed è facile da interpretare.
Una struttura come questa:

<div id="header">
  <h2>Capitolo 1</h2>
  <h3>Sottotitolo</h3>
  <div class="sommario">
    <p>Sommario del contenuto</p>
  </div>
  <div class="summary">
    <p>Summary in English....</p>
  </div>
<div>
<div id="content">
  <h3>Sottocapitolo 1</h3>
  <h4>Sommario del sottocapitolo 1</h4>
  <div class="text">
    <p>Testo testo....</p>
    <p>Testo testo....</p>
    <p>Testo testo....</p>
  </div>
<h3>Sottocapitolo 1</h3>
  <h4>Sommario del sottocapitolo 1</h4>
  <div class="text">
    <p>Testo testo....</p>
    <p>Testo testo....</p>
    <p>Testo testo....</p>
  </div>
[.....]
</div>
<div id ="footer">
<h3>Note</h3>
  <div class="text">
    <p>Testo testo....</p>
    <p>Testo testo....</p>
    <p>Testo testo....</p>
  </div>
</div>

è molto più complesso e vi sono elementi, come il tag “<h3>” e la “class=’text’” che devono avere una formattazione diversa a seconda della loro posizione nel testo.Inoltre l’uso degli “id” consente di redigere un sommario e/o link interni che puntino alle diverse parti del testo (ad esempio per andare direttamente alle note di un capitolo). L’uso degli “id”, quindi, non solo è opportuno, ma necessario.

I link interni

Nel redigere il sommario o nei riferimenti interni siamo abituati, nell’HTML, ad usare l’ancoraggio tramite il tag “a”. In HTML inseriamo una riga “<a name=’sezione’></a>” e poi vi facciamo riferimento tramite un link “<a href=’file.htm#sezione’>Vai alla sezione</a>” che consente di andare a quel punto preciso di quel file.
Qui, invece, non è possibile. Dobbiamo inserire un “id” in un “div” creato appositamente, o già esistente. Ad esempio “<div id=’sezione’>” oppure, se già abbiamo un “div” nella giusta posizione, “<div class=’text-block’ id=’sezione’>”. In questo modo potrà essere usato il link “<a href=’file.xhtm#sezione’>Vai alla sezione</a>” per andare a quel punto preciso di quella pagina.
Oltre che nei “div” l’attributo “id” può essere usato anche nei tag “hx” e “span” per andare in un punto preciso del testo.

Le pagine

L’entità “pagina” è alquanto astratta e non è possibile farvi riferimento. Abbiamo una pagina nuova sia quando andiamo da un file all’altro nello scorrere il nostro libro all’interno della struttura descritta nella parte “spine” del file “content.opf”, ma anche all’interno di ciascun file possiamo avere più pagine.
I tasti “pagina” del software o del reader ci fanno andare alla pagina successiva sia all’interno dello stesso file che, quando finisce un file, all’inizio del successivo. Quanto sia grande una pagina, quante righe, quanto testo contenga, non è possibile stabilirlo a priori. Negli eBook in formato “PDF”, chi crea il file stabilisce all’origine quanto debba essere grande, dove si interrompa, quanto testo contenga una pagina e quindi di quante pagine sia formato l’eBook. Negli eBook in formato ePub, invece, dimensione e numero della pagine dipendono sia dal software o dal reader, che dalle singole scelte del lettore.
I software ed i reader hanno finestre e schermi di diverse dimensioni e risoluzione, possono visualizzare caratteri diversi ed il lettore può scegliere dimensioni diversi del carattere ed in alcuni casi, come nel Kindle, anche una diversa quantità di caratteri per ciascuna riga di testo. Non esiste alcuna possibilità quindi di dire che siamo a “pagina 45″, né dire “vai a pagina 45″ ha alcun senso in un eBook in ePub (e negli altri formati tranne il “PDF”).
Purtroppo non esiste neppure un sistema per navigare nei capitoli e/o nei file all’interno di un eBook, tranne andando nel sommario se questo è stato realizzato con i link interni. La suddivisione in file è del tutto trasparente al lettore. Per quel che ne sa lui l’eBook è costituito da un singolo file.

Le immagini

Come detto, negli eBook in ePub non è possibile avere immagini affiancate da testo. Le immagini interrompono sempre il testo e possono essere allineate a destra, centro o sinistra tramite i fogli stile.
Allo stesso modo del testo, anche le immagini devono essere sempre incluse in un tag “<p>” o “<div>”. Non si può, ad esempio, inserire direttamente una immagine dopo un tag “</h2>”, ma si dovrà sempre aprire un “p” od un “div” prima dell’immagine.
Nel preparare le immagini si dovrà tenere presente che la risoluzione di alcuni reader è limitata (600 pixel in orizzontale) e quindi è inutile se non sgradevole alla lettura inserire immagini troppo grandi. Le immagini con molti colori non sempre sono ben rese dai reader, che spesso hanno solo 4 od 8 livelli di grigio.
E’ possibile inserire immagini solamente nei formati gif, jpg, png e svg.
Per razionalizzare il contenuto sarà bene inserire le immagini in una apposita sottocartella.
Secondo i requisiti XML, il tag dell’immagine deve avere la chiusura, al contrario dell’uso in HTML, cioè deve essere del tipo:

<p><img src="images/square.gif" alt="immagine" width="448" height="448" /></p>

E’ obbligatoria la presenza dell’attributo “alt” (anche se fosse vuoto). Gli attributi “width” e “height” sono facoltativi ma consigliabili. L’attributo “name” non può essere usato.

Caratteri accentati e simboli speciali

All’inizio del file abbiamo dichiarato l’uniformità XHTML e la codifica “UTF-8″, quindi i caratteri compresi nel testo non possono essere scritti in modo esplicito ma vanno codificati. Nei file XHTML si possono usare le codifiche HTML od Unicode. La prima è quella che viene normalmente usata nei file HTML, ad esempio quando usiamo “&agrave;” per rappresentare la “à”. La codifica Unicode vede due forme, quella decimale, in cui “à” si codifica “&#0224;”, o esadecimale, in cui “à” si codifica “&#xe0;”.
E’ meglio usare la codifica HTML, essendo più semplice e per di più viene resa in modo automatico da alcuni software, come Adobe “Dreanweaver”. Tuttavia bisogna fare molta attenzione quando si prepareranno il file “content.opf” per la struttura dell’eBook e il file “toc.ncx” che ne rappresenta l’indice. Questi due file sono in XML puro e quindi non consentono l’uso della codifica HTML dei caratteri, ma solamente quella Unicode. Quindi, facendo copia e incolla dei titoli dei capitoli, ad esempio, o dei cognomi, è necessario convertire la codifica HTML dei caratteri accentati e dei simboli speciali in Unicode.

La validazione

Sarà sempre bene validare i singoli file come XHTML, od almeno il file campione, template o modello base da cui partire per inserire il testo. La validazione può essere fatta online alla pagina: http://validator.w3.org/. E’ possibile validare il file anche se non è online, copiandone il testo ed incollandolo nell’apposito riquadro. Il risultato dirà se corrisponde ai requisiti XHTML dichiarati all’inizio del file.

Avvertenze

Dobbiamo sempre ricordare che tutti i file che realizziamo dovranno essere dichiarati nel “manifest” del file “content.opf”. Non solo i file XHTML, ma anche i fogli stile e tutte le immagini che utilizziamo nei file XHTML. In nessun file, da nessuna parte, deve esservi un elemento usato direttamente o indirettamente, che venga usato senza che sia dichiarato nel “manifest” del file “content.opf”.

Ricordarsi che in XHTML tutte le tag devono avere una chiusura e che quando non esiste un tag di chiusura è necessario inserirla nella stessa tag, es: “<br />”. Sempre a proposito dei tag, occorre accertarsi che non vi siano tag accavallati, cioè che un tag aperto non venga chiuso prima che sia chiuso il tag che contiene, ad esempio evitare “<div><p>xxxxx</div></p>” ma usare “<div><p>xxxxx</p></div>”.

Non si possono usare molti tag come quelli per le form o per i frameset. Invece di usare i tag per la formattazione, come “strong”, “em”, “center” e così via, sarebbe sempre meglio usare i fogli stile.

Nel caso si trasformi un codice HTML prima presente su una pagina web, ricordarsi di togliere tutti gli eventi, es. “onmouseover”, tutte le script, come Javascript, e tutto ciò che sia “server-side”.

Comvertendo file HTML, o comunque essendo abituati ad usare l’HTML, bisogna tener presente che alcune delle proprietà delle sue tag non sono “garantite”, nel senso che possono essere usate, sono permesse, ma il software od il reader potrebbe ignorarle. Ad esempio è possibile usare la proprietà “border” in una riga od una cella di una “table” o nella “table” stessa, ma il reader potrebbe interpretare solo i valori “0″ ed “1″ e visualizzare tutti i valori superiori come “1″.


Leggi:



Vuoi pubblicare un libro in eBook e venderlo online?
Sei un autore od un editore che vuole pubblicare uno o più eBook e vendere su Amazon o su qualche altra libreria online? Vuoi farli leggere sul Kindle o sugli altri reader? Non sai come fare tecnicamente?
Se sei un editore abbiamo un servizio di pubblicazione di eBook in outsourcing per te.
Se sei un autore ti proponiamo una offerta speciale: per soli €50.00 (più iva) trasformiamo il tuo libro in un eBook nel formato di tua scelta (Kindle, ePub) in modo professionale e pronto per essere utilizzato.
Leggi la nostra proposta per gli editori e per gli autori o .


Scrivi il tuo commento

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

|