Modifiche dentro DW(e qualche ritorno su ID)

Altra overview di DW

modifiche:CSS

modifiche: audio/video

modifiche: font embeddati

Aggiungere nuovo browser

andare su Preferenze->Anteprima nei browser

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

stessa cosa si può ritrovare in qualsiasi altro editor appena visti, comeTextwrangler

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>

Modifiche:CSS

Modifiche: CSSdoppia modalità di visualizzazione anche per i

CSS

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

aggiungere nuovofile

selezionare ilpercorso

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

CSS Designer:primo esempio

CSS Designer Proprietà + modalità “Dividi”

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

In alternativa, possiamo salvare il nostro CSS in un file a parte (esempioAltroStile.css)

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

CSS Designer:secondo esempio

CSS Designer Selettori+ modalità “Codice”

con la doppia modalità di visualizzazione, si tengono sotto tracciatutte le modifiche che stiamo apportando al testo

la doppia visualizzazione può essere impostata mentre sicompiono modifiche sul CSS

Nell’esempio si modificano due proprietà:

• text-indent per modificare l’indentazione del testo• font-size per modificare la grandezza del font

Elementi Float

Si vuole rendere Float(=fluttuante) un elemento

vediamo la stessa struttura appena vista su ID all’interno di DW, utilizzando la doppia visualizzazione

aggiungiamo la proprietà Float:left;

Problemi: il testo è troppo attaccato al bordo dell’immagine

aggiungere la proprietà margin-right (nell’esempio sono solo 5px, ma possiamo aggiungere di più...)

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”

personalizzare ulteriormente lo stile con il pannello “Stile Oggetto”

aggiungere le seguenti proprietà

• border-style• position:• margin-left:• margin-right:• margin-top:• margin-bottom:

risultato finale su Readium

Adobe Kulerhttps://kuler.adobe.com

permette ulteriori combinazioni di colore

Ulteriori esempiaggiungere la proprietà background-color a

body

sistemare nel dettaglio il padding e il margin-left

aggiungere text-decoration al selettore sezione

controllare altre modifiche?

SECONDO STEPprima modifica: rendere float un'immagine

utilizzare “float:left;”

SECONDO STEPseconda modifica: aggiungere uno stile

personalizzato ad un'immagine

SECONDO STEPterza modifica: modifica dello stile CSS dello

stile di paragrafo "TITOLO"

Modifiche:audio/video

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>)

ecco il risultato su Readium

Inserire video da IDUtilizzare il pannello “File multimediali”

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://

ricordarsi l’esportazione in ePub 3.0

risultato finale standard

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 codice

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

Modifiche: font embeddati

Aggiungere un nuovo fontacquistare e scaricare un nuovo font

scaricarlo anche gratis, con il consenso del creatore

Da ID...

Selezioniamo il nuovo font agendo sul pannello Stili paragrafo

controlliamo se la voce “Includi font da incorporare” sia attiva

risultato finale su Readium

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)

aggiungere il nuovo font nello stile di paragrafo in cui lo vogliamo applicare

esempio font gratis: Ankefont reso disponibile dal suo stesso creatore

ankesans.com

Utilizzo pannello ProprietàDopo averlo installato, sul pannello Proprietà

andare a prendere il font in questione

utilizzo pannello Proprietàla proprietà font-family:Anke viene subito

assegnata

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...

il file <link> precede la dichiarazione del file

si comincia ufficialmente con <?xml....

assicurarsi che sia sempre nella prima riga del file!

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

Per la prossima volta...Provare a inserire un video

Provare ad aggiungere il seguente stile (con CSS Designer o meno) al videofluttuante a destra

ricordarsi di aggiungere “clear:both;” margine di 30px;padding di 10px;colore di sfondo arancioneborder-top:dotted red 10px;