GUIDA PER LA REALIZZAZIONE DEI SITI WEB ASSOCIAZIONI LOCALI SCIENZA & VITA

Transcript

1 GUIDA PER LA REALIZZAZIONE DEI SITI WEB ASSOCIAZIONI LOCALI SCIENZA & VITA Febbraio 2007

2 1. Premessa Questo breve manuale ha lo scopo di fornire le indicazioni tecniche per lo sviluppo dei siti web delle Associazioni Locali, aderenti all Associazione Scienza&Vita. Tale manuale si inserisce in un kit composto da: una versione demo, perfettamente funzionante, di un sito web che deve essere preso come modello da ciascuna Associazione Locale da un file contenente tutti gli elementi grafici, con i quali è stato realizzato il sito Web fornito, necessari per sviluppare correttamente nuove funzionalità all interno dello stesso sito. Tutti i file HTML, presenti nella cartella Template HTML possono essere aperti e modificati attraverso tutti i programmi di creazione e modifica di pagine HTML (Microsoft Frontpage, Macromedia Dreamweaver, ), oltre che attraverso programmi di editing direttamente del codice sorgente (EditPlus, HomeSite, ). Il file grafico invece è in formato PSD e può essere aperto e modificato attraverso il programma Adobe Photoshop, il più comune e completo software di creazione e modifica di immagini presente sul mercato. 2. Competenze necessarie per lo sviluppo del proprio sito web Nelle pagine che seguono in questo manuale e direttamente nel codice HTML realizzato nelle pagine web, sono presenti tutte le istruzioni necessarie a effettuare l inserimento dei testi con semplicità. Pertanto, se non si vogliono aggiungere particolari funzionalità alla versione demo proposta, chiunque anche se non dotato di particolari competenze HTML può personalizzare tale versione del sito web ed essere pronto per la sua pubblicazione. Nel caso si vogliano aggiungere o eliminare sezioni o nel caso in cui si vogliano aggiungere particolari funzionalità interattive, sarà necessario dotarsi di minime competenze HTML / grafiche o rivolgersi a un webmaster che, attenendosi alle istruzioni presenti in questo kit, potrà operare con estrema semplicità e velocità. Il sito web in versione demo presente nella cartella Template HTML è stato realizzato prevedendo un menu di navigazione che può soddisfare le esigenze di un associazione aderente all Associazione Scienza&Vita. Affinché tale versione demo possa essere pubblicata online è sufficiente inserire i contenuti specifici dell associazione locale nelle pagine già predisposte, oltre che acquistare uno spazio web (vedi anche paragrafo seguente).

3 3. Pubblicazione online Una volta terminata la personalizzazione del proprio sito, è possibile la pubblicazione online. A tal fine l associazione nazionale mette disposizione, gratuitamente per il primo anno di messa on line, i seguenti servizi: 1. Indirizzo web del tipo (es. firenze.scienzaevita.org); 2. Indirizzo del tipo info@nomecitta.scienzaevita.org (o altro a scelta); 3. Spazio su server web, fino ad un massimo di 100 MB, con aggiornamento in modalità FTP; 4. Assistenza tecnica per eventuali problemi legati alle operazioni di pubblicazione del sito. I vantaggi dell adozione di una immagine coordinata al sito dell associazione Nazionale e di una denominazione standard per tutti i siti delle associazioni locali sono evidenti sia in termini di coerenza istituzionale, sia in termini pratici: una volta conosciuto un indirizzo, i navigatori potranno facilmente risalire ai siti delle altre associazioni territoriali. Considerazione analoga per l indirizzo di posta elettronica. Riguardo allo spazio fisico messo a disposizione, le dimensioni (100 MB) consentono di pubblicare un sito molto ricco composto anche da diverse centinaia di pagine o documenti. La modalità di pubblicazione, via FTP, garantisce la possibilità di aggiornare in autonomia il sito in qualsiasi momento. I servizi possono essere utilizzati anche dalle associazioni locali che hanno già registrato un dominio autonomo e attivato un sito e intendono mantenerlo attivo (ad es. può essere reindirizzare al nuovo dominio (ad es. : In questo modo anche i navigatori che già conoscono l indirizzo precedente verranno collegati, automaticamente, al nuovo servizio. Per usufruire di questi servizi e ricevere tutte le indicazioni necessarie è necessario inoltrare una richiesta via all indirizzo: segreteria@scienzaevita.org. 4. File File_master.psd E il file Photoshop nel quale viene riportata la matrice grafica del sito web. Il file è organizzato su livelli modificabili (o layer) e può essere preso come traccia per effettuare modifiche o aggiunte all organizzazione di navigazione prevista.

4 I livelli sono organizzati nel modo seguente: Nella cartella Voci di menu sono presenti le scritte con le voci di menu ipotizzate per il sito web nella modalità off (voce non evidenziata) Nel caso di voci in modalità off il loro colore è il #031B38, ad eccezione della Home, che è #FFFFFF Nel caso in cui le voci siano in modalità on il colore della Home diventa #031B38, così come per le voci non riguardanti i quattro temi principali Il fondo delle voci di menù in modalità on è #9FAFC2, tranne che nel caso della Home, che è #FFFFFF Tutte le scritte sono previste con il font Arial, grandezza 13 pt, in grassetto e sottolineato Nella cartella Evidenza, valida solo per la Home Page, sono presenti due livelli, relativi alla scritta da inserire nel box nel corpo centrale della pagina, posizionato in alto, e il relativo fondo La scritta è realizzata in Verdana, grandezza 12 pt, in grassetto, sottolineato e corsivo e deve essere centrata all interno del box Il colore del fondo è #A5B9D3

5 Gli altri layer sono: Titolo della Home Page, indicativo del titolo della Home Page e di tutte le altre pagine, realizzato in font Verdana, 24 pt, colore #031B38, grassetto Lorem ipsum dolor sit, che serve per la prova di ingombro del testo del corpo della pagina. Tale scritta deve essere realizzata in Verdana, 12 pt e, nel file Photoshop, non deve essere realizzata con alcun antialias, per rendere al meglio la resa della pagina HTML Background, con gli elementi di fondo della pagina La larghezza della pagina è di 777 px, comprensivi di due piccole colonne ai lati, utili per impostare il colore di fondo della pagina HTML, che deve essere #031B38 Le dimensioni degli elementi del menu di sinistra, da tagliare per la realizzazione dell HTML sono: Home: 202x43 Legge 40 e sterilità: 202x30 Tutte le altre: 202x28 Prima di effettuare i tagli occorre effettuare la seguente operazione: Layer -> Flatten Image -> Save As (ciò consente di salvare una copia dell immagine in qualsiasi formato con un unico livello e con un nome diverso dall immagine master che quindi non viene modificata). Come si vede nell immagine riportata di seguito, tutti i livelli sono scomparsi ad eccezione di quello nominato Background.

6 Per effettuare il taglio di una nuova immagine, ad esempio di una nuova voce di menu, occorre tenere presenti le seguenti condizioni: La distanza tra il limite più alto della parola e la riga delimitatrice tra una voce e l altra (di colore #2B5995) deve essere di 7 px La distanza a sinistra, partendo dal confine tra il bianco e il blu, della prima lettera deve essere di 20 px La distanza tra la sottolineatura di ogni parola e la riga delimitatrice tra una voce e l altra deve essere di 6 px Ogni immagine relativa ad ogni voce di menu deve essere tagliata in modo da comprendere 1 px a sinistra di colore bianco e finire sul lato destro prima di comprendere il nero di 1 px

7 5. Cartella Template HTML Tutti i file HTML rispondono alla stessa struttura di impaginazione: 1 tabella larga 777 px e suddivisa in due righe (<tr>), contenente la testata 1 tabella larga 777 px e suddivisa in due sottotabelle indipendenti, larghe 214 px e 563 px, contenenti rispettivamente la colonna con le voci di menu di sinistra e il corpo centrale della pagina 1 tabella larga 777 px e suddivisa in due righe (<tr>), contenente il piè di pagina E importante che le due tabelle di 214 e 563 px siano indipendenti, in modo che nel caso in cui il corpo della pagina sia molto alto (a causa di un testo copioso), i bottoni con le voci di menu sulla sinistra non si stacchino verticalmente. Tutte le tabelle sono centrate orizzontalmente nella pagina per fare in modo che qualunque sia la risoluzione del browser, il sito web sia centrato. E previsto un margine verticale di 5 px. Nella tabella con la testata la quarta cella (<td>) della seconda riga prevede la possibilità di inserire il testo identificativo della specifica Associazione Locale (dove è scritto NOME DELLA CITTA ).

8 Nel codice HTML si trova la seguente traccia identificativa: Per personalizzare questa parte è sufficiente scrivere in maiuscolo il nome della città, che comunque dovrà essere Times New Roman, dimensione 18 pt e colore # L effetto on mouse over realizzato sulle voci di menu di sinistra è regolato da un Javascript, che viene di seguito trascritto: <script LANGUAGE="JavaScript"> <!-- // Detect if browser is Netscape 3 + or IE 4 +. bname = navigator.appname; bver = parseint(navigator.appversion); if ((bname == "Netscape" && bver >= 3) (bname == "Microsoft Internet Explorer" && bver >= 4)) br = "n3"; else br = "n2"; // Create image objects, preload all active and inactive images. if (br== "n3") { home_off = new Image(); home_off.src = "img/home_off.jpg"; legge_40_off = new Image(); legge_40_off.src = "img/legge_40_off.jpg"; questione_femminile_off = new Image(); questione_femminile_off.src = "img/questione_femminile_off.jpg"; malattie_rare_off = new Image(); malattie_rare_off.src = "img/malattie_rare_off.jpg"; eutanasia_off = new Image(); eutanasia_off.src = "img/eutanasia_off.jpg"; chi_siamo_off = new Image(); chi_siamo_off.src = "img/chi_siamo_off.jpg"; attivita_off = new Image(); attivita_off.src = "img/attivita_off.jpg"; appuntamenti_off = new Image(); appuntamenti_off.src = "img/appuntamenti_off.jpg"; documenti_off = new Image(); documenti_off.src = "img/documenti_off.jpg"; sala_stampa_off = new Image(); sala_stampa_off.src = "img/sala_stampa_off.jpg"; aderisci_off = new Image(); aderisci_off.src = "img/aderisci_off.jpg"; link_off = new Image(); link_off.src = "img/link_off.jpg"; contatti_off = new Image(); contatti_off.src = "img/contatti_off.jpg"; home_on home_on.src legge_40_on = new Image(); = "img/home_on.jpg"; = new Image();

9 legge_40_on.src = "img/legge_40_on.jpg"; questione_femminile_on = new Image(); questione_femminile_on.src = "img/questione_femminile_on.jpg"; malattie_rare_on = new Image(); malattie_rare_on.src = "img/malattie_rare_on.jpg"; eutanasia_on = new Image(); eutanasia_on.src = "img/eutanasia_on.jpg"; chi_siamo_on = new Image(); chi_siamo_on.src = "img/chi_siamo_on.jpg"; attivita_on = new Image(); attivita_on.src = "img/attivita_on.jpg"; appuntamenti_on = new Image(); appuntamenti_on.src = "img/appuntamenti_on.jpg"; documenti_on = new Image(); documenti_on.src = "img/documenti_on.jpg"; sala_stampa_on = new Image(); sala_stampa_on.src = "img/sala_stampa_on.jpg"; aderisci_on = new Image(); aderisci_on.src = "img/aderisci_on.jpg"; link_on = new Image(); link_on.src = "img/link_on.jpg"; contatti_on = new Image(); contatti_on.src = "img/contatti_on.jpg"; } // Function to "activate" images. function ImgAct(ImgName) { if (br == "n3") { document[imgname].src = eval(imgname + "_on.src"); } } // Function to "deactivate" images. function ImgInact(ImgName) { if (br == "n3") { document[imgname].src = eval(imgname + "_off.src"); } } // --> </script> Nel caso di aggiunta di una nuova voce di menù è fondamentale aggiungere le due righe di codice relative, sia nella prima parte del Javascript (la versione off ), sia nella seconda (la versione on ). Il codice relativo poi a ciascuna voce di menù sarà come il seguente: <tr> <td width="202"><a href="chi_siamo.htm" onmouseover="imgact('chi_siamo')" onmouseout="imginact('chi_siamo')"><img border="0" src="img/chi_siamo_off.jpg" width="202" height="28" name="chi_siamo"></a></td> </tr> <tr> <td width="202"><x href="attivita.htm" onmouseover="imgact('attivita')" onmouseout="imginact('attivita')"><img border="0" src="img/attivita_on.jpg" width="202" height="28" name="attivita"></a></td> </tr> In questo caso possiamo notare come ci si trovi nella pagina attivita.htm perché l <a href> è disabilitato (<x href>) e perché l immagine iniziale del bottone con la relativa voce di menù è nella versione on (attivita_on.jpg).

10 Per personalizzare il contenuto di ciascuna pagina è sufficiente sostituire il testo Lorem ipsum con il testo desiderato. Nel codice sorgente si troverà questa scritta: <!-- #################################################################### # TRA <b> E </b> DOVE E' SCRITTO "TITOLO DELLA PAGINA" SCRIVO IL # # TITOLO DELLA PAGINA # #################################################################### --> <b>titolo della pagina</b> <br></font><font face="verdana" color="#0b3b79" size="2"> <!-- #################################################################### # TRA <br> E <br> DOVE INIZIA IL TESTO "LOREM IPSUM..." SCRIVO IL # # TESTO DELLA PAGINA. PER ANDARE A CAPO INSERISCO, DOVE VOGLIO, I # # TAG <BR>. SE NE METTO DUE DI SEGUITO CREO UNO SPAZIO DI UNA RIGA # # TRA UNA RIGA E L''ALTRA # #################################################################### --> <br>lorem ipsum dolor sit amet consectetuer adipiscit elit.<br> </font> Infine, per i collegamenti ipertestuali (hyperlink), è stato creato uno stile, che si trova definito all inizio della pagina, in questo modo: <!-- ################################################################## # DALL'INIZIO DEL TAG <STYLE> ALLA SUA CHIUSURA </STYLE> SI PUO' # # DEFINIRE LO STILE DEI LINK # ################################################################## --> <style type="text/css"> <!-- a:link, a:visited { text-decoration: underline; color: #001E60 } A:hover { text-decoration: underline; color: #001E60 } --> </style> N.B. TUTTE LE PARTI DEL CODICE CHE SONO COMPRESE TRA <! - - E - - > NON SONO MAI VISUALIZZATE DALL UTENTE FINALE MA SONO SOLO DELLE INIDICAZIONI PER CHI MODIFICA I CONTENUTI DELLA PAGINA