Croce Rossa Italiana - Comitato Locale di...






Il nostro nuovo sito!

Ecco qui il nuovo layout del nostro sito fatto con i fogli di stile e senza tabelle.

Il sito è scritto in linguaggio Xhtml 1.1 validato dal W3C e viene letto da tutti browsers, rispettando tutti i parametri della accessibilità.
Per la validazione del validatore del World Wide Web Consortium fare clic qui

per sapere cosa sia il W3C potete leggere questa pagina della Wikipedia italiana (enciclopedia libera).

Questo nostro sito è fluido (fluid) e quindi viene visto con qualsiasi tipo di risoluzione di schermo (dal 640x480 all'800x600 al 1024x768 eccetera).

Il nostro eventuale lettore può a suo piacimento ingrandire o diminuire la grandezza dei caratteri (in Internet Explorer = Visualizza --> Carattere) visto che facciamo uso di una grandezza di font relativa (in percentuale) e non fissa.

Inoltre avendo il nostro sito un foglio di stile per la stampa potrete comodamente stampare le nostre pagine senza che vengano stampati il menu orizzontale e quello laterale ma solo il contenuto vero e proprio di ogni singola pagina (potete rendervene conto provando una "Anteprima di stampa").




Scopo ed obiettivi

Sono anni che lavoro nella costruzione di pagine web per la Croce Rossa in Umbria, sono anni che sento dire "Adesso faremo anche noi il nostro sito" e sono anni che questi nascenti siti non li vedo nascere.

Convinto, come sono, che bisogna condividere quello che si sa e non sapendo come poter "scavalcare" certe tipiche reticenze italiote fatte più di gelosie ed invidie che altro, ho deciso di mettere questo template a disposizione di quelle persone che sentono il desiderio di avere il proprio sito in internet.

Grazie a questo template ed ai due fogli di stile che lo accompagnano chiunque potrà finalmente avere questa opportunità mentre noi finalmente avremo il piacere di veder nascere altri siti con nuove idee con cui confrontarsi.



Un punto delicato

Ci vuole una grossa onestà mentale ad ammettere che non si sa costruire una pagina web.
Ma, non ammettendolo, il bivio si dovrebbe conoscere: a quel punto o non si fa nulla adducendo scuse varie (e questo è un peccato perché magari si hanno idee bellissime da condividere con gli altri) o ci si butta a fare la propria dove, a parte i contenuti magari anche interessanti, chi ci si imbatte capisce subito che non è certo il massimo nella sua struttura.
Sì struttura, perché una pagina web è come una casa: è fatta di cemento, muri portanti, finestre, balconi e tutto il resto.
Non ci si può improvvisare quello che non si è solo perché abbiamo, magari, il programma dedicato che costruisce per noi le pagine; così al massimo otterremo qualcosa di passabile ma di cui non abbiamo alcuna padronanza.
Se invece vorrete approfittare di questa opportunità seguendo inizialmente i miei consigli vedrete che un poco alla volta il tutto (ricordate però che non si finisce mai di imparare) vi sarà chiaro e diventerà vostro come è giusto che sia e allora sì che avrete padronanza della vostra pagina e inizierete quelle modifiche che la faranno diventare sempre più vostra.
Ma, nel frattempo, il vostro sito sarà stato indicizzato dai grandi motori di ricerca perché ben strutturato e quindi avrete i vostri lettori che sono la ragione per cui si fanno le pagine.
Qui in internet una cosa è chiara: viene prima la gallina (la struttura principale) e poi l'uovo (le singole pagine con la loro estetica).
Bisogna sempre ricordarsi che chi cerca qualcosa in internet non cerca voi e la vostra bellissima e vuota pagina di contenuti: cerca, magari, una biografia e vuole una biografia.
Il resto, se gli date quello che cerca, lo vedrà - forse - dopo.
Altrimenti cliccherà sul tasto "Indietro" del suo browser e cercherà in siti altrui quello che sta cercando.



Parlando di punti delicati...

Ricordo ai vari webmasters di Croce Rossa in Umbria che con Ordinanza Commissariale del 19 marzo 2003 (girata a tutte le sedi di Croce Rossa in Regione) sono passato da webmaster regionale dei VdS a webmaster del Comitato Regionale e quindi intercomponente.
Avendo sempre pensato che non c'è alcuna differenza fra noi in quanto tutti facenti parte di un'unica grande famiglia non vorrei ricredermi con alcuni atteggiamenti che vedo qui da noi (mi avete capito).
Quindi, visto che conosco la materia di cui parlo (sicuramente meglio di voi), non capisco come mai alcuni non abbiano ancora messo la partita iva in home page nonostante i miei ripetuti inviti, non capisco come mai nascano siti a mia insaputa, non capisco l'aria di superiorità di alcuni che nemmeno mi rispondono (vero signor "sette prinipi" che sono due anni che te lo dico?).
E mi fermo qui.
Ho detto che non capisco, ma è purtroppo chiaro che capisco.
Non approfittatevi del fatto che sono persona accomodante: brutta razza la mia.



Spiegazioni

Questa pagina è nel suo interno commentata dal webmaster per facilitare la comprensione dei vari passaggi.
Per poter leggere i commenti basta vedere l'Xhtml qui sotto; i commenti sono scritti in questo modo:

<!-- commento del webmaster -->

per usare questo template di pagina basta salvarlo come (cliccare per aprirlo, selezionare tutto e salvarlo)

index.htm

non vi si apre con internet explorer, eh?
Già perché è stupido; non a caso avrete visto nel vostro girare in internet tanti siti che vi consigliano di navigare con Mozilla/Firefox che è rispettoso dei parametri, pesa pochissimo e non è stupido (chiamiamo le cose col loro nome).
In questo caso cliccateci sopra col tasto destro e "Salva oggetto con nome".
A questo punto lo "stupido" vi proporrà di salvare il file come index.xml avendo visto che il nostro template inizia con una dichiarazione di xml appunto (dalla serie che lo stupido pensa che gli stupidi siete voi); salvate invece il file come index.htm e imparate a cambiare browser...

creare un cassetto col nome css al cui interno mettere i seguenti files (cliccare per salvarli)

skidoo_too.css

skidoo_too_print.css

quindi nel server che ci ospita creare il cassetto (directory) css e copiarci i 2 files di appartenenza mettendo invece il file index.htm nella directory principale del server stesso.

L'idea originale di questo template è di Ruthsarian che l'ha messa a disposizione di chiunque ne voglia far uso, mentre la traduzione del codice, l'aggiustamento di alcuni parametri, l'aggiunta di altri ed altro ancora sono stati fatti dal webmaster della Croce Rossa dell'Umbria, Maurizio Prattico.

Sperando di avervi fatto cosa gradita rimango a vostra disposizione per eventuali chiarimenti su come lavorare con questo template.
Potete scrivermi qui:
Maurizio Prattico (apre il vostro programma di posta elettronica)



Varie

Questo template, una volta presaci confidenza, vi permette di lavorare sul vostro sito senza alcun programma dedicato alla costruzione di pagine internet.
Basterà far uso di un buon editore di testo come quello da me usato per scrivere a mano le pagine web.
E' gratuito, molto ben fatto e tradotto anche in italiano:
EditPad
(e, rimanendo in tema di stupidi, se andrete a vedere con EditPad i due fogli di stile come per miracolo diventeranno qualcosa di intelligibile cosa che non è con il Blocco note).

Caricata la pagina con EditPad basta andare a cambiare solo alcune semplici cose (avendo messo nelle Opzioni di EditPad l'a capo automatico).

In ordine partendo dall'alto del template:

  • il titolo della stessa (title) col nome appropriato della nuova pagina che vogliamo creare (ad esempio: I sette principi fondamentali) - non crediate che tutti sappiano questo: persino nella mia Regione c'è un sito che in ogni sua pagina riporta sempre lo stesso titolo (naturalmente ha vinto un premio - si guarda all'estetica e non ai contenuti - e naturalmente ha in tutte le sue pagine la voce "i sette prinipi" - avete letto bene)

  • il meta tag description come vi consiglio con il mio commento

  • il meta tag keywords anche questo da me commentato

  • la ripetizione del titolo che in questo esempio è:
    Croce Rossa Italiana - Comitato Locale di...
    (qui sopra prima del menu orizzontale)

  • e una volta create a proprio piacimento le pagine Xhtml dei menu orizzontale e verticale e la scritta a fondo pagina (i miei sono semplici esempi)

  • passare direttamente al vero e proprio contenuto della singola pagina che tratterà nell'esempio che sto facendo i Sette principi fondamentali della Croce Rossa

  • con un semplice copia-incolla aumentare le voci dei menu cambiando solo i nomi dei files nuovi che andrete ad aggiungere, lasciando al menu orizzontale le voci più importanti del vostro sito
tutto qui.

Questo modo di lavorare vi porterà ad impadronirvi davvero della conoscenza su come sia costruita una pagina web ed al piacere di approfondire un argomento che, altrimenti, vi sarebbe sconosciuto.

Col tempo sentirete il desiderio di "camminare" con le vostre gambe come è giusto che sia.

Ma il mio scopo, quello di darvi l'opportunità di far conoscere a noi tutti i vostri pensieri senza sentirvi "bloccati" nella costruzione della pagina (cosa che molti improvvisati webmasters credono di saper fare e non è vero per niente), il mio scopo dicevo è e sarà stato raggiunto in barba a chi certe cose non le condivide con voi.

Avete qui fra le mani un template fra i più precisi e rispettosi di quei tanti parametri che molti nemmeno conoscono; adesso pensate solo a farci conoscere le vostre idee - quello che davvero conta davvero qui e che non sono certo le suonerie o altre amenità che trovano il tempo che trovano.

Questo template, poi, potrebbe far comodo a chi ha già il suo sito con tanto di pagine ma che non è soddisfatto della struttura: un semplice copia-incolla con relativo cambiamento dei parametri che ho detto e in meno di un'ora avrà il nuovo sito.

Inoltre

Leggendo la pagina vedrete ad alcune voci di menu la scritta accesskey="UnaLetteraAlfabeto"; si chiamano tasti di accesso rapido e servono ad aiutare i portatori di alcune tipologie di handicap a navigare nel vostro sito senza dover necessariamente cliccare col puntatore del mouse su di un link.
Dovrete creare una pagina, che nel menu orizzontale ho chiamato "Tasti accesso" per spiegare quali siano i tasti usati.
Potete prendere spunto dalla mia pagina che trovate qui.

La pagina dei tasti di accesso rapido insieme alla "Mappa del sito" aiutano un sito a diventare accessibile; quindi vi consiglio di crearle.

Cercare, dove è possibile, di mettere le voci di menu in ordine alfabetico per facilitare la lettura degli stessi - una regola della "navigabilità" -; quindi i Pionieri verranno prima della Sezione Femminile...
(a buon intenditor).

Quando inserite una immagine accompagnatela con un alt descrittivo e quando inserite un link accompagnatelo con un title; come esempio fate riferimento alle immagini e ai links sul menu laterale dedicati al W3C; anche questo per rispetto ad alcune categorie di disabili.

Avete a disposizione 6 tipi di heading h:

h 1

h 2

h 3

h 4

h 5
h 6
fatene un buon uso per titoli e titoletti di paragrafo.
Ad esempio:

Titolo

sottotitolo


Prima di pubblicare una nuova pagina controllatela col validatore del W3c (gli improvvisati webmasters non sanno nemmeno cosa sia il W3C e non sanno che devono dichiarare il linguaggio con cui scrivono le pagine; voi adesso lo sapete e potete far leggere al validatore la vostra pagina direttamente sul computer prima della pubblicazione).

Avrete notato che quando cliccate su di un link esterno a questa pagina questo non si apre su una nuova finestra.
Il linguaggio da noi qui usato (Xhtml 1.1) infatti vieta questo "trucchetto" che non si può certo dire etico visto che il povero navigante vedrà aprirsi tante di quelle nuove finestre nel suo navigare che alla fine perderà il senso della sua stessa navigazione.
Lasciando a lui la decisione di aprire un eventuale link in un'altra finestra avremo rispettato anche quest'etica molto poco rispettata al giorno d'oggi come se ogni sito si considerasse così importante da voler rimanere sempre presente.
Non è così, lo sappiamo bene.

Mettete nella home page -index.htm- dove volete il numero di partita iva (che per la Croce Rossa Italiana è uguale su tutto il territorio nazionale) come richiesto da legge pena da 258,23 a 2.065,83 €.
Cosa disattesa dai più fino a che qualcuno non decide che può fare tanti soldini per le casse dello Stato.
Come pure la devono mettere tutti coloro che creano un sito aziendale e hanno la partita iva.

Apparentemente il validatore del W3C del foglio di stile trova due errori: non sono errori ma 2 così detti hacks voluti per essere visti in maniera uguale da tutti i browsers (che hanno il potere di vedere ognuno a modo suo le pagine costruite con i fogli di stile)

Ricordate che ci sono regole varie su come scrivere e tanto altro da seguire e, se vi fa comodo, potete leggere queste cose nella sezione da me dedicata all'Xhtml in queste pagine



E per finire

Chi eventualmente avrà fatto uso di questo master di pagina e me lo comunicherà dandomi l'indirizzo del suo sito lo inserirò qui e, visto che questa pagina sarà spesso letta dai motori di ricerca, la cosa sarà a suo vantaggio oltre a dare a noi il piacere di leggere un nuovo sito.

grazie e buon lavoro!
Maurizio Prattico


torna all home page del Comitato Regionale Umbria


Altro titolo

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."



Ancora

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."