InDesign e il Web
Scritto da Salvo il 7 febbraio 2010 con 1 commento
Tags: articolo , cs4 , flash , indesign , tutorial
ATTENZIONE: Sto preparando un aggiornamento per questo articolo, date le non poche novità introdotte da CS5 per InDesign e il web
Quando venne presentata la Creative Suite 4 e specialmente InDesign , la prima promessa (mantenuta, ma non del tutto) che venne fatta fu che questa nuova versione, se pur sempre dedicata alla stampa e all’impaginazione, avrebbe aiutato i grafici “da stampa” a muovere i primi passi verso il web. Gran parte delle chiavi di ricerca che portano a questo sito sono prorpio di persone che cercano tutorial in italiano su come usare InDesign nel web, basti vedere il precedente tutorial su come creare un Swf sfogliabile che è stato segnalato in moltiplici siti, il che mi ha convinto a dedicare un post su questo argomento.
Sebbene i concetti dovrebbero essere comprensibili a molti, l’articolo è pensato/dedicato per chi gia conosce a livello intermedio InDesign e alcune opzioni a cui faccio riferimento sono presenti solo nella versione CS4!
Quindi rimbocchiamoci le maniche… e vediamo alcuni concetti basilari per balzare dalla stampa al web con il caro InDesign!
1. Preparare bozze di siti web
Qui ci sono molte correnti di pensiero, chi usa Photoshop/Gimp, chi usa Illustrator, chi usa Fireworks… anche se per ora il dominio sul trend del tool grafico utilizzato per realizzare layout di siti web è dominato da Photoshop (cosa che io personalmente non approvo a pieno), InDesign , per chi lo conosce bene, può tranquillamente essere utilizzato per questo scopo.
I motivi: gli strumenti da disegno vettoriale (basilari) ci sono, invece di creare livelli da visualizzare/nascondere come si fa in Photoshop o Illustrator per creare le varie pagine del sito abbiamo a disposizione le pagine mastro (dove possiamo posizionare gli elementi che si ripetono in ogni pagina del nostro sito, come testata e footer per esempio..) e le varie zone di testo, anche divise in più pagine, possiamo gestirle simultaneamente con gli stili di paragrafo, che concettualmente non sono cosi diversi dal linguaggio Css, ma questo argomento lo trattiamo tra qualche paragrafo…
2. InDesign loves Flash… il formato XFL
Se abbiamo intenzione di imparare a usare Flash, o se collaboriamo con chi lo utilizza, possiamo sfruttare una nuova sinergia tra questi due programmi… il formato XFL! Questo nuovo formato “trasversale” ci permette di esportare il nostro documento InDesign in un file (.xfl appunto) che può essere aperto nativamente da Flash CS4. In fase di esportazione possiamo anche decidere alcuni opzioni di compatibilità, come ad esempio se trasformare il testo di InDesign in testo Flash o renderlo un tracciato vettoriale, e quando apriremo il nuovo file in Flash ritroveremo gli oggetti nelle stesse posizioni, gli oggetti vettoriali modificabili, i livelli di InDesign in livelli di Flash e le pagine convertite in keyframes… se avete un minimo di familiarità con entrambi i programmi avrete gia capito cosa significa tutto ciò 
Nota negativa: dall’esportazione saranno esclusi gli oggetti interattivi (quindi bottoni e link) e le transizioni di pagina, comprese lo sfoglia-pagina!
3. “File -> Esporta per Dreamweaver”, anche se non è proprio cosi…
Purtroppo una funzione dalla quale molti grafici speravano di ottenere aiuto in realtà si è dimostrata molto deludente… ovverò la possibilità di esportare per Dreamweaver. Oltre ad esportare uno scarno Html, non vengono “creati” Css, non vengono esportati link, non vengono esportati oggetti interattivi, non vengono esportati gli oggetti vettoriali. Non viene esportato granché di utilizzabile, specialmente per chi intende lavorarci e non solo esplorare, tuttavia niente panico! Il mondo del web per alcuni aspetti non è poi cosi diverso dagli impaginati…
4. Stili di paragrafo/carattere/oggetto = CSS
Se volete buttarvi nel mondo di Html e Css per convertire voi stessi i layout grafici dei siti che avete creato in InDesign in solide e reali pagine web, iniziate sapendo che per alcuni aspetti siete avantaggiati… in genere una schermata di codice non è molto ambita da grafici/impaginatori e i motivi possono essere comprensibili, ma per quanto riguardo il linguaggio Css (acronimo di Cascading Style Sheet – Fogli di Stile a Cascata), siete messi molto bene, perche li state gia usando!
Con InDesign siete abituati a creare stili (di paragrafo o di carattere o di oggetto) per fare in modo che l’aspetto di tanti elementi venga gestito con una sola impostazione che è proprio quello che fanno le regole Css! La differenza sta nel fatto che con InDesign gestite gli stili tramite il pannello e l’interfaccia visiva mentre in Css gli stili si definiscono con delle parole chiave, quindi anche se si scrive codice in realtà non avrete a che fare con un linguaggio di programmazione, ma semplicemente un linguaggio che descrive gli aspetti.
Articoli correlati:
- Tutorial: riviste sfogliabili in Flash con InDesign CS4 In realtà questo non è proprio un tutorial, semplicemente vi mostrerò una delle funzioni più interessanti di InDesign CS4, avendo notato un notevole afflusso di visite al mio sito tramite [...]...
- 10 anni di InDesign Visto i miei pochi ma molto popolari post (e relative discussioni) su InDesign, come non segnalare il suo decennale? Con solo 10 anni di attività e 9 anni di presenza [...]...
- CS5 in azione: InDesign Se con Illustrator dicevo che non ci sono state particolari grosse novità nella versione CS5, su InDesign al contrario c’è tantissimo da dire! Partendo proprio dal fatto che l’intero programma [...]...
Riguardo Salvo...
Web designer/developer (aka Interactive Designer) dal 2006, ho lavorato in varie aziende che operano dall'e-commerce alla comunicazione multimediale, sono stato speaker a conferenze come Better Software, Codemotion e due WordCamp. Dal 2010 insegno linguaggi web alla scuola Mohole di Milano.
Se ti e' sembrato utile perche' non mi offri un caffe'?
Tutto quello che trovi su MoebiusMania.net puo' essere utilizzato liberamente e gratuitamente, se magari hai trovato qualcosa di particolarmente utile puoi mostrare il tuo apprezzamento con una minuscola donazione con Paypal o cliccando sui banner!
Scusa un’info:è possibile aggiungere delle funzioni tipo a piede pagina, grazie Attilio