Upload
lab-nova
View
51
Download
0
Embed Size (px)
Citation preview
Prima di iniziarecome fatto con InDesign, per ragioni di brevità
nelle slide Dreamweaver verrà abbreviato in DW
Non ci sono nuove nozioni di base, si prendono come riferimento le nozioni apprese nella prima parte del corsobackground-colorcolordisplayuso del tag <span>
All’interno del Manifest, ritroviamo i tag che gestiscono i metadati, quelli che avevamoimpostato nel pannello “Info File” in InDesign
La Spine contiene la struttura del file.Ritroviamo i documenti che compongono il nostro libro
La Guide serve a iBooks per gestire la semantica del libro- indicare quale copertina deve essere visualizzata all’interno di iBooks- la Tabella dei Contenuti che abbiamo sviluppato con ID
Dalla voce di menù modifica (o con il comando veloce CMD+F per Mac e CRTL+F per Windows) troviamo la finestra “Trova e Sostituisci”, dove possiamo cercare specifiche porzioni di testo per sostituirlo con altro
• utilizzabili anche le espressioni regolari per cercare particolari stringhe di testo
i link vengono gestiti come fossero contenuti dentro un sito web.In questo caso si distingue tra:
- link assoluti, quelli che puntano in un altro sito<a href=“http://www.labnova.it”>ulteriori info</a>
- link relativi, quelli che puntano in un altro punto del testo- <a href=“ferrara.xhtml”>altra città</a>
CSS Designer4 pannelli:
Origini, per aggiungere e vedere i file CSS
@Oggetto multimediale, per eventuali media queries
Selettori, per selezionare i selettori CSS desiderati
Proprietà, per aggiungere, modificare, togliere proprietà CSS
possibilità di andare direttamente sul selettore cssall’interno del foglio di stile che abbiamo appenacollegato
CSS Designer:selettoriquando selezioniamo un foglio di stile nel
pannello Origini, spuntano tutti i selettori contenuti al suo interno
si può aggiungere, togliere, cercare un determinato selettore
ePub Zen Garden
su ePub Zen Garden si trovano varie fonti di ispirazione per strutturare unparticolare stile CSS
ePub Zen Garden
andando a vedere con il browser il codice sorgente, possiamo risalire allo stile CSS utilizzato
ePub Zen Garden
ricopiamolo il codice sul foglio di stile (creato in maniera automatico da ID)e salviamo
PRIMO STEPStudio dell’interfaccia
Importare la cartella OeBPS
Possibili collegamenti ai fogli di stileUtilizzare il pannello “Origini” del CSS Designer
Utilizzo del pannello proprietàCambiare lo stile di font allo stile di paragrafo
“Sezione”
Gli stili vengono generati in manieraautomatica da ID.L’indentazione del codice è automatica.
I colori del codice rappresentanole parti del CSS che vengono visualizzateIn maniera predefinita:
- fucsia per le classi- blu scuro per le proprietà- blu elettrico per i valori- verde per le stringhe comprese tra caratteri
colore del testo
stile del testo
margine del testo
settaggi per il flusso testuale
settaggi generali per il testo
numero minimo di vedove che possono essere presenti
Proprietà CSS specialipage-break-before
page-break-inside
page-break-after
orphans
widows
disciplinano la struttura del testo
regolano quante righe devono apparire all’inizio e alla fine della pagina
Proprietà CSS specialile aggiungiamo anche dal pannello proprietà,
selezionando la voce “+” e scrivendo la proprietà voluta
con la doppia modalità di visualizzazione, si tengono sotto tracciatutte le modifiche che stiamo apportando al testo
Nell’esempio si modificano due proprietà:
• text-indent per modificare l’indentazione del testo• font-size per modificare la grandezza del font
vediamo la stessa struttura appena vista su ID all’interno di DW, utilizzando la doppia visualizzazione
risultato finale su Adobe Digital Editions
procedura fattibile anche con le versioni CS6, CS5.5 etc.
combo ID+DW
aggiungere una nuova casella di testo, ancorarla all’ultimo paragrafo.Cliccare con il tasto destro e selezionare la voce “Testo”
aggiungere le seguenti proprietà
• border-style• position:• margin-left:• margin-right:• margin-top:• margin-bottom:
Adobe Kulerhttps://kuler.adobe.com
permette ulteriori combinazioni di colore
Modifiche:audio/videoVediamo due procedure
Inseriamo un file audio direttamente su DW Inseriamo un file video su ID
Inserire elemento audio• inserire un nuovo elemento nella cartella OEBPS
• aggiornare il manifest con un nuovo elemento <item>
• inserire il corrispettivo tag HTML5 dell’elemento audio (l’omonimo <audio>)
Possibilità di scegliere la modalità di riproduzionevedere anche l’anteprima del file in questione
Possibilità di inserire un’immagine (scegliendo tra i vari fotogrammi)
utili per altriformati, come.swf
inserire video da URL evitabile, a meno che non diamo per certo la
possibilità di collegamento del lettorenell’esempio, non posso inserire il file con
protocollo https://
Problemi file multimedialia volte vi è una cattiva esportazione, oppure i
nuovi aggiornamenti degli standard non fanno più funzionare le vecchie procedure
<audio src=“../Audio/file.mp3” type=“audio/mpeg”>
il modo migliore è assicurarsi che la dichiarazione effettiva del file multimediale sia
<audio type=“audio/mpeg”>
<source id=“sorgente” src=“../Audio/file.mp3”></source>
</audio>
assicurarsi di avere il tag <source>
Problemi file multimedialiLato progettazione (con pulsante “dal vivo”)
se la modalità “progettazione” non fa andare la visualizzazione, premere sempre tasto “dal vivo”
TERZO STEPaggiungere un elemento video dentro InDesign
aggiungere un elemento video dentro Dreamweaver
EXTRA: aggiungere uno stile CSS personalizzato all’elemento video
Aggiungere un nuovo fontacquistare e scaricare un nuovo font
scaricarlo anche gratis, con il consenso del creatore
Alternativa su DW
• dichiarare il nuovo font come nuovo <item> nel Manifest
• scrivere una regola @font-face dove si specifica il nome del nuovo fonte il percorso dove trovarlo (in questo caso nella cartella Font)
Utilizzo pannello ProprietàDopo averlo installato, sul pannello Proprietà
andare a prendere il font in questione
creata nuova cartella “webfonts”, con uno stile apposito
creato il file apposito .xml com.apple.ibooks.display-option.xml
Se dovesse dar problemi sul tablet....
impostare questa configurazione: mettere la cartella webfonts dentro l’OeBPS principalemodificando anche la directory, nella proprietà src
QUARTO STEPAggiungere un font embeddato con DW
selezionarlo con il pannello Proprietà importarlo con il CSScontrollare il risultato su Readium
problemi con l’attributo controls del tag <video>
è dichiarato senza valore, sarebbe corretto cambiato in controls=“controls”
Validazione!due tipi: WARNING
ed ERROR di solito, mancano
dei riferimenti nel manifest
sono stati cancellati i file senza aggiornare il manifest stesso
potrebbero dar problemi in fase di upload sullo store