Home
  1. Informatica
  2. Corso ePub Completo
  3. Creare un libro digitale con EPUB, dalla A alla Z

Creare un libro digitale con EPUB, dalla A alla Z

Nella guida apprenderai come creare un libro digitale con EPUB, dalla A alla Z. Costruisci passo passo l'ebook nel formato .epub.

    Aggiornato     Livello: Iniziale 

Foto: pixabay.com.

Menu della lezione

1. Prima di partire. Obiettivi del corso e prerequisiti6. La pagina XHTML in un EPUB
2. Cosa è il formato EPUB7. CSS per l'EPUB
3. Anatomia di un file EPUB8. Compattare e validare il file EPUB
4. Creare un libro digitale con EPUB9. EPUB di esempio e documentazione utile
5. Crea le cartelle e i file di contenuto10. Libri per approfondire e diventare professionisti

In questo articolo apprenderai come creare un libro digitale con EPUB, dalla A alla Z. Una guida ampia e completa, divisa in capitoli, per acquisire le basi del formato EPUB. Imparerai come costruire manualmente un EPUB, come impacchettare il libro digitale e come validarlo.

Prima di partire. Obiettivi del corso e prerequisiti

La guida si prefigge di farti comprendere i meccanismi che sono alla base del funzionamento di un EPUB. Per intenderci, questo è un passo prima dell'uso di Sigil o dell'editor di EPUB incluso in Calibre o BlueGriffon. Apprendendo "cosa c'è dietro", sarai più consapevole nell'uso degli applicativi menzionati. Non solo, questa è una base di partenza per quanti intendono diventare degli specialisti nella realizzazione di EPUB.

Obiettivi

  • Cosa è un EPUB.
  • La struttura interna di un file EPUB: i files necessari e gli schemi.
  • Creare un EPUB valido.
  • Compattare e validare il tuo primo EPUB.

Prerequisiti

Per la creazione di un EPUB con questo tutorial è necessaria una conoscenza base di HTML 5, XHTML, XML, CSS.

Per la realizzazione del primo EPUB avrai bisogno di un software front-end per la creazione di siti web. Ad esempio Expression Web, BlueGriffon, Dreamweaver, va bene anche Visual Studio, ecc.

Cosa è il formato EPUB

EPUB significa electronic publication, pubblicazione elettronica. L'EPUB è un formato di ebook aperto basato su XML. Esso è diventato uno standard, il cui sviluppo è stato gestito dall'IDPF (International Digital Publishing Forum), ora assorbito dal W3C sotto il nome di [email protected]

Un file .epub è un file compresso al cui interno troviamo pagine web con estensione .xhtml. I metadata sono in XML, il contenuto in XHTML 1.1 (EPUB 2) o HTML 5 (EPUB 3). Per il suo corretto funzionamento è gestito da files specifici che vedremo appresso e da uno o più fogli di stile CSS. Se aggiunti, un .epub contiene file immagini, sonori e video.

Un EPUB è un ipertesto, un sito web, compresso e leggibile su svariati dispositivi sui quali è installato un lettore EPUB, come può essere Readium per PC e notebook.

Con il formato EPUB fai molto di più di un libro digitale. Puoi creare documentazione tecnica e manuali ad uso interno dell'ufficio o dell'azienda; trasformare un sito web in un ebook.

Anatomia di un file EPUB

Quella che segue è l'anatomia di un file EPUB, la struttura delle cartelle e i files essenziali, alcuni dei quali assolutamente necessari perché possa funzionare.

  • mimetype
  • META-INF/
    • container.xml
  • OEBPS/
    • content.opf
    • title.xhtml
    • content.xhtml
    • stylesheet.css
    • toc.ncx
    • images/
      • cover.jpg

META-INF, OEBPS, images, sono cartelle. Tutti gli altri sono files.

Creare un libro digitale con EPUB

Entriamo nel vivo del come creare un libro digitale con EPUB. Procediamo col creare i singoli file e inserire in ciascuno di essi il codice di base richiesto.

Il file mimetype

Crea il file mimetype. Non ha estensione. Nel file scrivi:

application/epub+zip

Il mimetype non deve contenere altre linee: cancella eventuali linee vuote. Il mimetype risulta come primo file nell'archivio compresso, ma non viene compresso dai compattatori di file EPUB: lo vedremo più avanti.

Assicurati che il file sia al livello di root nel progetto EPUB.

META-INF/container.xml

Crea la cartella META-INF in maiuscolo. Al suo interno crea il file container.xml. Apri il file XML e inserisci il codice qui sotto riportato.

<?xml version="1.0"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
  <rootfiles>
   <rootfile full-path="OEBPS/content.opf"
   media-type="application/oebps-package+xml" />
  </rootfiles>
</container>

L'unico valore a variare è il contenuto di full-path: OEBPS/content.opf. Tutto il resto rimane invariato. Nota che il mimetype e il container.xml non sono mostrati in Sigil, mentre l'editor di Calibre mostra container.xml.

Crea la cartella OEBPS. Essa serve a contenere i files del libro digitale.

Open Packaging Format metadata file

Il file .opf è comunemente chiamato content.opf, ma puoi nominarlo in qualsiasi altro modo. Se cambi il nome, ricorda di modificare il collegamento in container.xml. Il file è da includere nella cartella OEBPS come tutti quelli che seguiranno. Inserisci il codice sotto, nel file .opf.

<?xml version='1.0' encoding='utf-8'?>
<package version="2.0" unique-identifier="BookId" xmlns="http://www.idpf.org/2007/opf">
  <metadata xmlns:opf="http://www.idpf.org/2007/opf" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <dc:title>Nome Epub</dc:title>
  <dc:creator>Nome autore libro</dc:creator>
  <dc:description>descrizione</dc:description>
  <dc:identifier id="BookId" opf:scheme="UUID">urn:uuid:edde3c2a-f8bc-41e2-b57b-7d1c6221a748</dc:identifier>
  <dc:language>it</dc:language>
  <dc:subject></dc:subject>
  <dc:type>Text</dc:type>
<dc:publisher>Casa Editrice</dc:publisher>
<dc:creator>Nome Cognome creatore</dc:creator>
<dc:date>2017-01-01T00:00:00+01:00</dc:date>
<dc:rights>Copyright 2017</dc:rights>
<meta name="cover" content="cover-image"/>
  </metadata>
  <manifest>
  <item id="cover-image" href="images/cover.jpg" media-type="image/jpeg"/>
  <item id="cover" href="text/00_copertina.xhtml" media-type="application/xhtml+xml"/>
  <item id="prima-pagina-titolo-opera" href="text/01_prima-pagina-titolo-opera.xhtml" media-type="application/xhtml+xml"/>
  <item id="colophon" href="text/02_colophon.xhtml" media-type="application/xhtml+xml"/>
  <item id="intro-autore" href="text/03_introduzione-dell-autore.xhtml" media-type="application/xhtml+xml"/>
  <item id="pag-titolo-opera" href="text/04_pagina-titolo-opera.xhtml" media-type="application/xhtml+xml"/>
  <item id="contenuto" href="text/05_pagina-del-libro.xhtml" media-type="application/xhtml+xml"/>
  <item id="elenco-opere" href="text/06_pagina-elenco-opere-stesso-autore.xhtml" media-type="application/xhtml+xml"/>
  <item id="css" href="css/page_styles.css" media-type="text/css"/>
  <item id="css1" href="css/stylesheet.css" media-type="text/css"/>
  <item id="ncx" href="toc.ncx" media-type="application/x-dtbncx+xml"/>
  </manifest>
  <spine toc="ncx">
  <itemref idref="cover" linear="no"/>
  <itemref idref="prima-pagina-titolo-opera"/>
  <itemref idref="colophon"/>
  <itemref idref="intro-autore"/>
  <itemref idref="pag-titolo-opera"/>
  <itemref idref="contenuto"/>
  <itemref idref="elenco-opere"/>
  </spine>
  <guide>
  <reference href="text/00_copertina.xhtml" type="cover" title="Cover"/>
  </guide>
</package>

Il codice fa riferimento ad EPUB 2.0. Il codice per la versione 3.0 lo troverai nella lezione dedicata.

Gli schemi OPF e namespaces

Nel documento OPF si dichiara il namespace http://www.idpf.org/2007/opf e per quanto riguarda i metadata, si dichiara il namespace http://purl.org/dc/elements/1.1/ in accordo con il Dublin Core Metadata Initiative (DCMI).

I Metadata

I metadata sono importanti per fornire agli ebook reader delle informazioni di base sul libro. Una parte delle informazioni sono mostrate all'utente finale nel riassunto dell'ebook. Quelli necessari sono tittle e identifier. In accordo con le specifiche EPUB identifier deve contenere un valore unico, quale l'ISBN, oppure un UUID generato da un sistema random apposito.

Tutti gli altri sono opzionali, ma utili ad arricchire di dati il libro digitale:

  • dc:language = la lingua dell'ebook.
  • dc:subject = le parole chiave dell'ebook. Si aggiunge una parola chiave per ciascun tag.
  • dc:type = il tipo di contenuto: Text.
  • dc:publisher = la casa editrice.
  • dc:creator = chi ha creato il contenuto dell'epub.
  • dc:date = la data, che può essere di creazione, modifica, pubblicazione, emissione. Ciascuno con il suo metadata specifico.
  • dc:rights = tutte le informazioni che riguardano i diritti d'autore. Se pubblichi sotto Creative Commons license, inserisci l'URL della licenza.

Il meta con attributo name contenente cover, non fa parte delle specifiche EPUB, ma rende il libro digitale più portabile. Assicurati che il valore testuale del content sia lo stesso di quello dichiarato nel manifest del file OPF.

Manifest

Il manifest è la lista di tutti i files che fanno parte del contenuto: le pagine del libro, le immagini, i video, l'indice, il foglio di stile CSS, ecc. In sintesi, tutti i files della cartella OEBPS devono essere dichiarati nel manifest. Il codice sopra riporta in modo esaustivo un esempio di manifest.

Ciascuna estensione di file ha il suo media-type specifico. I formati di immagine supportati da EPUB sono: JPEG, GIF, SVG, PNG.

Spine

Spine indica l'ordine lineare dell'EPUB. In altre parole, definisce l'ordine dei capitoli del libro digitale. Così come sono elencati in questa sezione del file OPF, così saranno letti dagli ebook reader. L'idref fa riferimento agli id degli item dichiarati nel manifest.

L'attributo linear indica se un determinato item fa parte oppure no dell'ordine lineare di lettura. Consigliabile dichiarare la cover come linear="no". In questo modo l'ebook si aprirà al primo elemento dello spine non dichiarato linear="no".

Guide

Guide è stato dichiarato deprecabile dalle specifiche EPUB 3 e seguenti. Nel formato EPUB 2 esso ha un valore semantico. Mentre il manifest definisce le risorse fisiche dell'e-book e lo spine l'ordine di lettura, Guide indica il significato delle risorse dichiarate.

L'indice dei contenuti toc.ncx

Il file toc.ncx è l'indice dei capitoli dell'e-book. EPUB mutua le specifiche del consorzio DAISY, il quale si occupa di sviluppare formati di dati per lettori che hanno difficoltà visive o l'impossibilità di leggere libri cartacei.

Crea il file toc.ncx e includi il codice che riporto qui sotto.

<?xml version='1.0' encoding='utf-8'?>
<!DOCTYPE ncx PUBLIC "-//NISO//DTD ncx 2005-1//EN" "http://www.daisy.org/z3986/2005/ncx-2005-1.dtd">
<ncx xmlns="http://www.daisy.org/z3986/2005/ncx/" version="2005-1">
<head>
<meta name="dtb:uid" content="urn:uuid:edde3c2a-f8bc-41e2-b57b-7d1c6221a748"/>
<meta name="dtb:depth" content="1"/>
<meta name="dtb:totalPageCount" content="0"/>
<meta name="dtb:maxPageNumber" content="0"/>
</head>
  <docTitle>
   <text>Titolo EPUB</text>
  </docTitle>
  <navMap>
   <navPoint id="navpoint-1" playOrder="1">
    <navLabel>
     <text>Introduzione dell'Autore</text>
    </navLabel>
    <content src="text/03_introduzione-dell-autore.xhtml"/>
   </navPoint>
  </navMap>
</ncx>

NCX metadata

L'NCX metadata, seguendo il DTD DAISY, richiede 4 elementi fondamentali nel head tag del file:

  • :uid = si inserisce l'ID univoco del libro digitale. Corrisponde al dc:identifier del file OPF.
  • :depth = riflette il livello della gerarchia nell'indice. Solo i titoli capitolo è 1; con i titoli paragrafo è 2; ecc.
  • :totalPageCount e :maxPageNumber = si applicano solo ai libri cartacei: il valore da attribuire è 0.

Il contenuto di docTitle/text è il titolo del libro, lo stesso di dc:title nel content.opf.

NCX navMap

La navMap è la parte centrale e più importante del file toc.ncx. In questa sezione definisci la tabella dei contenuti, l'indice, del libro. A differenza dello spine nel file OPF, in questa sezione puoi includere i capitoli, i paragrafi e i sotto paragrafi dell'e-book. Strutturando così l'indice, permetterai ai lettori di navigare nel libro digitale raggiungendo le parti più interne.

L'elemento principale nel NavMap è il navPoint, questi ultimi possono essere tanti quanti sono necessari a meglio definire l'indice. Ciascun navPoint contiene i seguenti attributi e tag:

  • playOrder è l'attributo che stabilisce l'ordine di lettura dell'indice.
  • navLabel/text è l'elemento in cui scrivere il titolo del capitolo, paragrafo, sezione di riferimento.
  • content include il tag src. Al suo interno si riporta il percorso fisico del file che contiene il contenuto. File che ovviamente è stato dichiarato nell'OPF manifest. Per indicare i sotto paragrafi è ammesso l'uso degli ancoraggi nei file XHTML. Esempi: content.xhtml#par1; capitolo12.xhtml#sottopar2.

Ricorda che per includere i sotto paragrafi e sezioni di un capitolo, devi nidificare un navPoint figlio nel principale. Scarica l'EPUB decompresso in fondo alla guida per un esempio pratico.

Crea le cartelle e i file di contenuto

Terminata la creazione delle pagine che formano l'ossatura dell'EPUB è ora il momento di creare le cartelle ed i file .xhtml dove inserirai i contenuti dell'e-book.

Nella cartella OEBPS crea le seguenti cartelle: css; text; images; video; audio. Ovviamente, crea solo quelle che sono utili.

Nella cartella images copia la cover, copertina, del libro e tutte le immagini che faranno parte del book digitale.

Nella cartella text crea i file in formato .xhtml dove inserire i testi. L'EPUB di esempio in fondo alla guida contiene quelli fondamentali.

Nella cartella css crea il foglio di stile con il quale formattare, da un punto di vista grafico, l'ebook.

La pagina XHTML in un EPUB

Vediamo ora come si struttura una pagina XHTML in un EPUB con il DTD XHTML 1.1 della versione EPUB 2.0. Mentre come si struttura una pagina dei contenuti in un EPUB 3.0 lo vedremo in un articolo a parte.

  • Il contenuto deve seguire la specifica per l'XHTML 1.1.
  • Il tag img può fare riferimento a immagini esclusivamente contenute nel progetto multimediale e non a immagini disponibili nel web.
  • Non usare JavaScript, i lettori di EPUB potrebbero non leggere correttamente lo script.

Riporta il codice sotto in un file di nome, ad esempio, capitolo1.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">
<head>
<title> - Introduzione dell'autore</title>
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css"/>
<link href="../css/page_styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h3 class="introduzione-titolo">L'autore</h3>
<p class="ctr"><i>Morbi et justo malesuada, lobortis magna sed, varius est.</i></p>
<p class="rgt"><i>L'autore</i></p>
</body>
</html>

CSS per l'EPUB

La grafica e il set di caratteri dell'EPUB s'impostano nel foglio di stile CSS. EPUB 2 usa CSS 2.1; EPUB 3 usa CSS 3. Qui sotto riporto un esempio di foglio di stile ridotto. Una versione più ampia è nell'EPUB di esempio allegato alla guida.

body {display:block;font-size:1em;padding:0;margin:0 5pt;font-family:Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif}
p {display:block;text-indent:5mm;line-height:160%;color:#000;text-align:justify}
h1, h2, h3, h4 {color:#000;font-weight:bold;line-height:30px;margin-top:40px;padding:0px}

Compattare e validare il file EPUB

Per compattare il progetto digitale ti rimando alla lezione dedicata a ePubPack, un compattatore di file nel formato .epub. Per validare il tuo primo EPUB, hai tre possibilità:

EPUB di esempio e documentazione utile

Qui puoi scaricare l'EPUB di esempio. Ho preparato anche una versione non compressa, scaricabile da qui.

In fine, o meglio per iniziare ad approfondire, ti presento i siti ufficiali dove troverai documentazioni e utili strumenti di approfondimento. Il formato EPUB è uno standard internazionale e come tale ha delle dettagliate specifiche dove troverai molto più di quanto esposto qui.

Libri per approfondire e diventare professionisti

Per concludere. A questo link trovi alcuni libri utili per diventare un o una professionista, nella progettazione di libri digitali nel formato aperto basato su XML: EPUB.

 

Articoli Recenti

⟩⟩ Roma Capitale vista dal Satellite Sentinel-2A    ⟩⟩ The Good Fight in streaming su TIMVISION    ⟩⟩ MasterCard come Bitcoin userà blockchain per pagamenti istantanei    ⟩⟩ Eurosport Player gratis per un anno su TIMVISION    ⟩⟩ Creare sondaggi online gratis con Moduli Google