MANUALE PER LA PRODUZIONE DI TESTI PER IL WEB Questo manuale fornisce una guida tecnica per scrivere testi da copiare all interno di siti web minimizzando il lavoro necessario per adattare tali testi affinché siano correttamente visualizzati dai browser (programmi per navigare su internet). Il manuale non tratta argomenti quali l ottimizzazione dei testi e non entra nel merito dei criteri da adottare affinché i contenuti siano efficaci dal punto di vista comunicativo. Quando citeremo Word intenderemo il programma di scrittura di Microsoft, ma anche qualsiasi altro editor di testo, purché consenta l utilizzo di evidenziazioni (sottolineatura, grassetto e italico), la suddivisione dello stesso in elementi (titoli, sottotitoli e paragrafi) e l inserimento di elenchi puntati e numerati. Gli strumenti di scrittura La scrittura del testo da inserire in una pagina web può avvenire in diversi modi e con diversi strumenti. I più diffusi sono: direttamente scrivendo il codice HTML della pagina; utilizzando l editor di testo web della sezione amministrativa del sito (via browser); scrivendo in Word e copiando successivamente il contenuto nell editor del punto precedente. Il primo prevede una conoscenza approfondita del linguaggio HTML e solitamente è utilizzato dagli sviluppatori. Il secondo non richiede competenze particolari, l editor si comporta come un piccolo Word, è veloce, ma per utilizzarlo occorre essere connessi ad internet e spesso non è possibile salvare il testo temporaneamente, stamparlo o controllarlo con un correttore ortografico. Il terzo è complementare al secondo. Utilizzando Word si possono salvare i testi, stamparli, correggerli, ma per portare a termine l operazione occorre poi copiare il testo ed incollarlo nell editor web. Quest ultima operazione di trasferimento potrebbe essere delegata a qualcun altro, ad esempio ad uno sviluppatore o al web master, aggiungendo un ulteriore vantaggio a tale metodo. In questo manuale vediamo come adottare correttamente il terzo metodo scrivendo con Word testi che, una volta copiati nel web, non necessitino di operazioni di pulitura o di trasformazione impegnative per lo sviluppatore. Il risparmio di tempo derivante dall impiego della giusta tecnica si tradurrà ovviamente in un minor costo. Separazione tra contenuto e formattazione Nel web, e non solo lì, il testo è diviso in elementi con un loro valore semantico. Un titolo, un sottotitolo, un paragrafo, una sottolineatura, sono esempi di elementi ed il loro valore è chiaro a tutti: non è necessario specificare che se una frase è sottolineata la si vuole rendere più evidente al lettore. Ognuno di noi, quando scrive un testo, lo organizza utilizzando tali elementi per renderlo maggiormente comprensibile a chi lo leggerà. 1
Dopo aver terminato la scrittura può capitare di soffermarci sulla formattazione, che non altera, e non deve farlo, il valore semantico degli elementi. Si limita a dargli una veste grafica. Il titolo può diventare più grande di quello che già è o di un colore diverso. I paragrafi possono distanziarsi tra di loro per rendere più evidente la loro suddivisione. Questo concetto prende il nome di separazione tra contenuto e formattazione. Il contenuto è composto dal testo e dal valore semantico dei suoi elementi; la formattazione è l insieme di regole che danno ad ogni elemento una veste grafica (colore, grandezza, margine, spaziatura, ). Quando ci troveremo a copiare un testo correttamente diviso in elementi semantici da Word al web non avremo problemi, perché anche nel web, o meglio, nell insieme di tecniche adottate per visualizzare una pagina web, c è una netta separazione tra quello che si scrive e come lo si mostra. Le indicazioni che seguono sono finalizzate ad ottenere questo: un testo scritto in Word copiabile in una pagina web minimizzando la necessità che debba essere manipolato per renderlo idoneo. Per ribadire quanto abbiamo appena scritto si può affermare che la formattazione non è quindi un operazione necessaria. Questo assunto è da tenere a mente. Se si ricorre alla formattazione per dare valore semantico ad un elemento c è qualche cosa che non va. Prima di farlo dobbiamo fermarci a riflettere e vedere se non sia possibile utilizzare un tipo di elemento con il quale ottenere lo stesso effetto creato dalla formattazione. Se indichiamo con Word che una riga deve avere lo stile Titolo 1 è naturale aspettarsi che Word formatti tale riga in modo differente dal resto del testo. Non importa se poi, nella futura pagina web, la formattazione sarà differente. Quello che conta è aver chiaramente indicato, con l utilizzo dello stile, che quella riga è un titolo di primo livello. Sarà poi altrettanto probabile che anche nel web, una volta copiato quel testo, esso avrà il titolo più evidente rispetto al paragrafo che lo segue, anche se per ottenere quell effetto il progettista web non scrive le regoli di formattazione insieme al testo, ma in documenti separati che si chiamano css. Ecco perché si desidera che copiando il testo la formattazione non venga copiata, mentre è fondamentale che venga copiato il tipo di elemento: un titolo deve rimanere un titolo. Dalla teoria alla pratica Vediamo ora come ottenere la separazione di cui abbiamo parlato utilizzando Word. Scriviamo una riga, andiamo a capo e scriviamo un altro insieme di righe, ottenendo un esempio simile: Questa è la prima riga Questo è un insieme di righe. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula consequat justo non molestie. Donec molestie dui quis quam faucibus quis varius felis adipiscing. Se decidiamo che la prima riga deve essere il titolo la prima cosa da fare è selezionarla e scegliere nella barra degli stili di Word lo stile Titolo 1. Se stiamo lavorando con un documento di Word nuovo, con gli stili originali o con stili modificati da una mano competente, ci aspettiamo di vedere la prima riga assumere un aspetto diverso. 2
Probabilmente avrà un carattere più grande e sarà in grassetto: Questa è la prima riga Questo è un insieme di righe. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vehicula consequat justo non molestie. Donec molestie dui quis quam faucibus quis varius felis adipiscing. Potremmo ottenere un effetto visivo identico selezionandola e modificando direttamente la dimensione del testo o attivando il grassetto, ma commetteremmo un grave errore, perché in questo modo non diciamo a Word che il valore semantico della prima riga è titolo di primo livello. Per lui rimante una riga (probabilmente un paragrafo). Solo il lettore umano interpreterà la prima riga come un titolo. Quando copieremo quel testo nella pagina web avremo due effetti che aumenteranno il lavoro dello sviluppatore web: la riga con il titolo non verrà riconosciuta come titolo ma come paragrafo e dovrà essere modificata; sempre la stessa riga porterà con sé notazioni di formattazione, che dovranno essere cancellate. Ciò non toglie che se desideriamo che il titolo sia ancora più evidente o assomigli a come sarà quando apparirà nella pagina web, allora ricorreremo alla formattazione. Ma qui dovremo stare attenti. Per evitare che durante l operazione di copiatura del testo nel web vengano trascinate informazioni non pertinenti, la modifica alla formattazione deve avvenire modificando lo stile di Word e non selezionando la frase e cambiandone le caratteristiche visuali tramite i comandi di formattazione. Prima di farlo però vale la pena di farci questa domanda: è veramente necessario, ho bisogno di vedere il testo come lo vedrei nella pagina web? Se la risposta è no o forse no è meglio lasciare tutto come propone Word. NO SI Per mettere in pratica quanto abbiamo detto possiamo seguire queste istruzioni. 1. Aprire Word e generare un documento nuovo, vuoto. Nota bene: non utilizzare modelli personalizzati, se possibile, perché si corre il rischio di importare con il modello un set di stili mal costruiti che inficerebbero il risultato finale. 3
2. Controllare che nella barra degli stili siano presenti i tipi di elemento che andrò ad utilizzare. Probabilmente Normale, Titolo 1, Titolo 2,. Se così non fosse scegliere un set di stili standard forniti con il programma, che possiedono già tali elementi. 3. Scrivere il testo avendo cura di associare ad ogni parte di esso lo stile giusto. I paragrafi sono associati allo stile Normale. 4. Per alcuni elementi semantici particolari si dovranno utilizzare altri comandi che non prevedono l impiego di stili. In questi casi è buona norma partire da un testo con stile Normale. I comandi possibili sono: a. elenco puntato b. elenco numerato c. grassetto (nel paragrafo) d. sottolineatura (nel paragrafo) e. italico (nel paragrafo) Nota bene: grassetto, sottolineatura e italico non devono essere utilizzati in porzioni di testo differenti dal paragrafo. Se si vuole ad esempio rendere italico un intero titolo di primo livello è opportuno modificare lo stile del Titolo 1 aggiungendo la formattazione italico, ma ricordiamoci della domanda che ci siamo posti nella pagina precedente: è veramente necessario? 5. Evitare assolutamente di eseguire le seguenti azioni utilizzando i comandi di formattazione delle barre di Word: a. alterare i margini di singoli elementi (è invece possibile alterare i margini dell intero documento) b. modificare il colore del testo e dello sfondo c. modificare le interlinee d. modificare gli spazi prima e dopo l elemento e. aggiungere righe vuote per creare spaziature maggiori f. modificare l allineamento del paragrafo (a sinistra, centrato, giustificato, ) 6. Salvare il documento con un nome che lo riconduca alla pagina web alla quale si riferisce. Come trattare i documenti Word esistenti Non sempre si può partire dalla situazione ideale, cioè da un documento Word nuovo e vuoto (punto 1 nell elenco precedente). Se dobbiamo partire da documenti esistenti abbiamo due possibilità: - il documento è ben strutturato, la divisione in elementi semantici è già rispettata, gli elementi non gestibili con gli stili (grassetto, sottolineatura, elenchi, ) non hanno subito trasformazioni rispetto a come li visualizza Word in un documento nuovo; - il documento non coincide con il punto precedente in tutto o in parte. 4
Nel primo caso siamo ovviamente in una situazione felice: possiamo consegnare il documento allo sviluppatore o al web master e provare ad eseguire l importazione. Nel secondo caso possiamo correggere manualmente i documento se le difformità sono minori, oppure proviamo ad incollarlo in un documento nuovo. La tecnica della copia su nuovo funziona bene su Word 2007 e 2010, non l abbiamo testata su altre versioni. Ecco le istruzioni. 1. Copiare il testo dal documento di origine. 2. Incollarlo nel documento di destinazione. 3. In Word 2007/2010 appare in basso alla zona incollata un selettore come in figura con diverse opzioni. Scegliendo Unisci formattazione si attiva una piccola magia (quando riesce): Word cerca nel testo gli elementi semantici esistenti e li associa a quelli presenti nel documento con stili standard. In pratica si ottiene un documento pulito e correttamente diviso, con titoli, elenchi, sottolineature e quant altro al posto giusto. Se il miracolo avviene solo a metà lo si può correggere a mano. Conclusioni Questo documento è una guida sintetica. Probabilmente alcuni casi particolari dovranno essere gestiti con modalità differenti da valutare di volta in volta. In caso di dubbio è sempre buona norma rivolgersi all area web di Puntoit prima di aver scritto un insieme significativo di testo. Eventualmente è possibile scrivere alcuni esempi e chiedere a Puntoit di eseguire i test d importazione per valutare se si sta producendo i testi in modo corretto. Il personale dell area web è sempre disponibile per ogni chiarimento. 5