facebook twitter youtube rss
Sprint24
Visualizzazione risultati 1 fino 2 di 2

Discussione: Creazione di un ePub 3.0 con componenti interattive

  1. #1

    Predefinito Creazione di un ePub 3.0 con componenti interattive

    Quando IDPF ha reso standard la versione 3.0 del formato ePub ha di fatto concesso la possibilità di introdurre negli ePub elementi di interattività, audio, video e animazioni.
    In questo post vedremo gli step principali per creare un epub 3.0 con l’inserimento di questi plus.


    Premessa.
    McLoughlin Bros, editore di libri per bambini presente a New York dal 1828 al 1920 divenne famoso per l’utilizzo di tecniche di stampa e supporti assolutamente innovativi per quel periodo. Il catalogo della sua produzione era amplissimo e spaziava anche nel campo dei puzzle e dei giochi da tavolo per i quali fu tra i primissimi produttori in America.






    La società scomparve di fatto nel 1920 dopo l’acquisizione da parte di Milton Bradleyl (MB edizioni, altro marchio storico, produttore di Scarabeo e altri famosi table games)



    Questa premessa solo per introdurre l’ultimo ePub che ho prodotto: un remake in versione digitale di un libretto per bambini pubblicato nel 1850 appunto da McLoughln Bros.
    Ero sollecitato da vari lettori del mio blog, che volevano imparare le specifiche introdotte dal nuovo standard epub 3.0.
    Non volendo fare una cosa troppo teorica e pesante, decisi per quella che si rivelò la scelta migliore: trovare un vecchio documento cartaceo libero da diritti, sul quale ‘innestare’ componenti digitali come esempi, per poi chiudere il tutto in formato ePub.


    Questi gli step che mi ero fissato:

    1. Individuazione e recupero di materiale cartaceo già digitalizzato.
    2. Creazione del Fixed Layout ‘statico’ (immagini, testi con css e prima fase di convalida con ePubCheck)
    3. Generazione e inserimento della parte interattiva e animata
    4. Chiusura e convalida definitiva con ePubCheck
    5. Distribuzione


    Ecco lo sviluppo.

    1. Individuazione e recupero di materiale cartaceo già digitalizzato
    L’obiettivo era un ePub a layout fisso (Fixed Layout) dovevo quindi recuperare del materiale illustrato. Gli archivi da cui recuperare simili materiali sono abbastanza diffusi specialmente negli USA (ed è una fortuna visto che si tratta di un patrimonio inestimabile)
    Una delle collezioni che più apprezzo è quella offerta dalla Library of Congress



    nella quale ho effettuato la mia ricerca. Questo il link alla scheda tecnica del libro scelto.
    Visto che spesso, nei caso di libri molto vecchi, mancano pagine o sono comunque rovinate, è importante verificare l’integrità dell’archivio e la qualità della digitalizzazione.

    2 Creazione del Fixed Layout ‘statico’ (immagini, testi con css e fase di convalida con ePubCheck) (Strumenti Photoshop; Editor HTML)

    2.1 - Immagini.

    Scaricato il documento potevo finalmente iniziare la produzione.
    La prima cosa da fare era la pulizia delle immagini e soprattutto l’eliminazione fisica del testo stampato perché questo deve essere ricreato come testo e non lasciato come immagine. Quest’ultima non è una scelta. Il testo deve essere tale per permettere a chi legge di effettuare ricerche, copiare, attivare eventuali links etc etc. Apple (e non solo) rispedisce al mittente epub che presentino testo esclusivamente rasterizzato.
    Photoshop con l’utilizzo degli strumenti corretti permette la cancellazione del testo stampato senza penare troppo.



    Rese ‘mute’ tutte le immagini si può passare alla creazione in formato xhtml delle pagine del libretto.
    Ricordo che nei Fixed ad ogni pagina deve corrispondere un file xhtml.


    In modo molto semplice e ripetitivo utilizzando il codice seguente si ottengono una per una, tutte le pagine del libro.
    Le dimensioni 1200x1539 dipendono ovviamente dalle dimensioni del materiale originale.
    In neretto le parti variabili da differenziare pagina per pagina. In rosso le directory per raggiungere i files che sono ovviamente personali e modificabili a piacere.



    Codice:
    <?xml version="1.0" encoding="UTF-8"?>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta name="viewport" content="width=1200,height=1539"></meta>
            <meta charset="utf-8" />
            <title>LM letters</title>
            <link href="../css/book.css" type="text/css" rel="stylesheet" />
            <link href="../css/st08.css" type="text/css" rel="stylesheet" />
        </head>
        <body>
            <div> <img src="../images/bck08.jpg" alt=“LM Letters" />
        </body>
    </Html>
    bck08.jpg è il nome dell’immagine che rappresenta questa pagina. Rispetto alle immagini consiglio di seguire il suggerimento di Apple nelle sue linee guida, di non superare mai i 2.000.000 di pixel di area a 72 dpi. Altrettanto importante, e non solo per le immagini, una corretta denominazione dei file che concorrono al documento. Ne avevamo già accennato in questo post.


    2.2 - Testi
    Una cosa molto importante in una rivisitazione di un’antica edizione tipo questa è il mantenimento sostanziale dell’aspetto e, lasciatemelo dire, il ‘rispetto’ per la sua storia. Fondamentale la scelta di un carattere in linea con l’età del documento.
    Ho optato per un Essays1743 medium decisamente ‘irregolare’ e assolutamente datato.



    Inserire i pochi testi e ‘vestirli’ dello stile voluto è cosa decisamente rapida.

    Codice:
    <?xml version="1.0" encoding="UTF-8"?>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta name="viewport" content="width=1200,height=1539"></meta>
            <meta charset="utf-8" />
            <title>LM letters</title>
            <link href="../css/book.css" type="text/css" rel="stylesheet" />
            <link href="../css/st08.css" type="text/css" rel="stylesheet" />
        </head>
        <body>
            <div> <img src="../images/bck08.jpg" alt=“LM Letters" />
    
    
            <div class="page008-L"> <p class="line1">L stands for LEFT-FIELD, who catches FLY-BALLS.</p>
            <div class="page008-M"> <p class="line2">M stands for MUFF, who cannot catch at all. </P>
            </Div>
    
        </body>
    </html>


    E questo il relativo CSS

    Codice:
    @font-face { 
        font-family: "Essays1743";     
        font-style: medium;
        font-weight: normal; 
        src: url(../fonts/essays1743webfont.otf); 
    }
    
    
    
    
    .page008-L > p { z-index:3; text-align: left; font-family: "Essays1743"; top: 640px; left: 265px; width: 900px; font-size: 28px; }
    .page008-M > p { z-index:3; text-align: left; font-family: "Essays1743"; top: 1347px; left: 170px; width: 600px; font-size: 28px; }
    Ecco a destra la pagina ricreata, nel confronto con l’originale:




    A questo punto non resta che verificare con ePubcheck il superamento della fase di convalida.

    Il validatore può essere scaricato gratuitamente da questa pagina
    Importante utilizzare sempre la versione più aggiornata.
    Dalle pagine del gruppo informazioni importanti sule modalità di utilizzo e dialogo sul tool di convalida.
    Superata la fase di convalida, possiamo dire finalmente che la parte ‘statica’ è pronta.
    Si tratta sostanzialmente della ‘versione’ digitale del libretto cartaceo originale.



    Pitcher.gif

    [Continua …]
    [SIGPIC][/SIGPIC]
    ePUB, eBook and so on

  2. #2

Regole di scrittura

  • Non puoi postare nuovi argomenti
  • Non puoi postare repliche
  • Non puoi postare allegati
  • Non puoi editare i tuoi post
  •