Binario Etico – Soc.Cooperativa Aggiornare il sito www

Binario Etico – Soc.Cooperativa
Informatica Solidale
Aggiornare il sito www.centrodiculturaecologica.it
Come Scrivere codice HTML per mantenere il sito accessibile
Nella pagina di aggiornamento del sito, sotto ogni form di pubblicazione, appare
la lista di tag[1] che si possono usare nelle textarea di inserimento.
E' possibile scegliere il tipo di formato di codice che si sta usando,
consigliamo di usare “Filtered HTML” per evitare i maggiori rischi ma se si è
esperti di codice HTML si può scegliere anche “Full HTML” se si vogliono inserire
strutture che non sono permesse dal tipo “Filtered HTML”. Ricordiamo che è una
funzionalità per esperti.
Il codice del sito www.centrodiculturaecologica.it è definito come DocType[2]
XHTML 1.1 e charset[3] dei caratteri UTF-8.
Questo comporta che il codice HTML deve essere scritto secondo le specifiche
dettate dal W3C per quello specifico DocType. Alcuni tag o attributi di tag che
siamo normalmente abituati ad usare subiscono delle modifiche sostanziali o non
possono essere usati, di seguito elencheremo le modifiche e le eventuali
sostituzioni con altri tag.
La principale differenza è la direttiva per cui tutti i tag vanno "chiusi", di
conseguenza la loro non chiusura invaliderebbe il codice.
Significato
Tag
html 4.01
Inserimento di <img src=””>
un immagine
xhtml 1.1
Note
<img src=”” />
E' necessario aver prima inserito
un tipo di contenuto immagine,
l'url sarà del tipo
files/images/nomefile e di
aggiungere un contenuto alternativo
all'immagine grazie all'opzione
alt=”...” esiste anche un'altra
opzione title=”...” che dovrebbe
essere la descrizione
dell'immagine. Attenzione a non
generare ridondanza delle stesse
frasi inserendo lo stesso contenuto
sia per ALT che per TITLE.
Esempio:
<img src=”files/images/cce.png”
alt=”logo del centro di cultura
ecologica” />
Collegamenti
ipertestuali
(link)
<a
href=””></a>
<a
href=””></a>
Si possono inserire collegamenti
ipertestuali normali sempre
specificando l'attributo
title=”...”, che è chiamata LABEL
del link. E' possibile inserire
link che aprono in un'altra
pagina/tab, per farlo bisogna
scrivere quanto segue all'interno
del tag <a>:
Sede
Iscrizione
Legale - Via L. Montuori 5, 00154 Roma
P.I./C.F.- 08871021005
all'Albo delle Società Cooperative a Mutualità Prevalente
Roma - A173310
www.binarioetico.org
di
Binario Etico – Soc.Cooperativa
Informatica Solidale
rel="external"
class="external_link" title="testo
di spiegazione della meta del link.
In nuova finestra".
es. <a href="index.php"
rel="external"
class="external_link" title="testo
di spiegazione della meta del link.
In nuova finestra">Testo
collegamento</a>
Ritorno a capo <br>
<br />
Non è necessario inserire questo
tag il sistema riconosce i ritorno
a capo quando si schiaccia <ENTER>
all'interno della textarea.
Testo
grassetto
<b></b>
<strong></stro Nessuna specifica particolare
ng>
Linea
orizzontale
<hr>
<hr />
Inserimento
acronimo
<acronym></ac <acronym></acr Viene utilizzato per definire degli
ronym>
onym>
acronimi ("CE." per "Comunità
Europea " o "WCAG." per "Web
Content Accessibility Guidelines"
.). Marcando gli acronimi si danno
utili informazioni ai browser e
soprattutto ai motori di ricerca
che possono meglio indicizzare il
testo.
Nessuna specifica particolare
Esempio:
<acronym title="Domande poste di
frequente">FAQ</acronym>
Inserimento
abbreviazione
<abbr></abbr> <abbr></abbr>
Viene utilizzato per definire delle
abbreviazioni ("Desc." per
"Descrizione" o "Tip." per
"Tipologia" .).
Marcando le abbreviazioni si danno
utili informazioni ai browser e
soprattutto ai motori di ricerca
che possono meglio indicizzare il
testo.
Esempio:
<abbr title="Categorie">Cat.</abbr>
Testo
sottolineato
<u></u>
eliminato
Inserire una
citazione
<cite></cite> <cite></cite>
Non si usa più, i testi
sottolineati sono considerati
collegamenti ipertestuali
Viene utilizzato per introdurre una
citazione.
Generalmente l'effetto che rende è
un corsivo.
Sede
Iscrizione
Legale - Via L. Montuori 5, 00154 Roma
P.I./C.F.- 08871021005
all'Albo delle Società Cooperative a Mutualità Prevalente
Roma - A173310
www.binarioetico.org
di
Binario Etico – Soc.Cooperativa
Informatica Solidale
Inserire
codice
sorgente
<code></code> <code></code>
Viene utilizzato per introdurre il
codice sorgente di un programma nel
documento.
Lista non
ordinata
<ul></ul>
<ul></ul>
Viene usato per creare liste non
numerate, i seguenti attributi del
tag <ul> sono deprecati in HTML
4.01 e non sono supportati in XHTML
1.0 Strict DTD: “compact” e “type”
Lista ordinata <ol></ol>
<ol></ol>
Viene usato per creare liste
numerate, i seguenti attributi del
tag <ol> sono deprecati in HTML
4.01 e non sono supportati in XHTML
1.0 Strict DTD: “compact” e “type”
Elemento di
una lista
<li></li>
Viene usato per definire gli
elementi all'interno della lista
sia numerata che non.
<li></li>
Esempio:
<ol>
<li>Coffee</li>
<li>Tea</li>
</ol>
Lista di
definizione
<dl></dl>
<dl></dl>
Viene utilizzato per definire una
lista di definizioni.
Termine da
definire
<dt></dt>
<dt></dt>
Viene utilizzato in una lista di
definizioni per indicare il termine
da definire.
Il tag va inserito all'interno del
tag <dl>.
Indicare la
definizione
<dd></dd>
<dd></dd>
Viene utilizzato all'interno di una
lista per indicare la definizione
della voce introdotta dal tag <dt>.
Esempio:
<dl>
<dt>ICI</dt>
<dd>Tassa sugli immobili</dd>
</dl>
Essendo la codifica dei caratteri in UTF-8 si possono inserire i caratteri
accentati direttamente senza bisogno di trasformarli in entità HTML.
IMMAGINI
Le immagini che verranno caricate sul portale saranno ridimensionate in scala
alla dimensione verticali od orizzontale maggiore.
Un'immagine di 640x453 sarà ridimensionata a 480 di larghezza, mantenendo quindi
la proporzione tra altezza e larghezza. 480 pixel è la dimensione massima
accettabile per la corretta visualizzazione sul sito senza che ingrandimenti e
risoluzioni diverse rendano illeggibili i contenuti.
Sede
Iscrizione
Legale - Via L. Montuori 5, 00154 Roma
P.I./C.F.- 08871021005
all'Albo delle Società Cooperative a Mutualità Prevalente
Roma - A173310
www.binarioetico.org
di
Binario Etico – Soc.Cooperativa
Informatica Solidale
L'immagine originale sarà comunque accessibile direttamente dalla galleria
fotografica.
TIPI DI CONTENUTO
Il cms[4] installato e configurato (drupal.org) consente la pubblicazione di
diversi tipi di contenuto, come si può vedere nella pagina che li elenca:
http://www.centrodiculturaecologica.it/newcce/?q=node/add
Ogni tipo di contenuto ha delle proprie funzionalità:
Calendario Attività
Inserisci un'attività con una data di inizio e fine. Puoi anche inserire un'immagine e dei
riferimenti web (titolo e url di siti esterni o interni). Si può anche inserire un allegato
(magari un programma in pdf scaricabile).
Argomento di discussione del forum
Crea un nuovo argomento di discussione nel forum.
Immagine
Inserisci un'immagine che apparirà nella galleria fotografica, scegli a quale galleria deve
appartenere. Una thumbnail verrà creata automaticamente.
Libri
Inserisci i libri in vetrina
Pagina dei link
Inserisci i link del sito nella pagina apposita, scegli la giusta categoria.
Pagine statiche
Inserisce una pagina statica, come quasi tutte le pagine del menu nel footer del sito o le
pagine di descrizione del Centro e delle sue attività, attenzione a dare una url consona e
valida, che non sia già utilizzata.
Le immagini per questo tipo di contenuto vanno inserite direttamente nel corpo del testo,
bisogna quindi fare attenzione a chiudere il tag e dargli un contenuto alternativo tramite
l'opzione alt="".
Segnala evento
Segnala un evento esterno.
Testo Newsletter
Crea il testo della newsletter da spedire agli iscritti
Notizie
Inserisci una notizia scegli se metterla in primo piano o meno, hai la possibilità di inserire
anche immagini o allegati.
INSERIMENTO FILE ESTERNI
Sarà possibile inserire collegamenti ipertestuali a file se il contenuto di
questi file sarà reso accessibile in formato di semplice testo HTML.
Bisognerà indicare che il collegamento ipertestuale punta ad un file e
specificare il peso in Kilobytes[5] di questo file.
Abbiamo predisposto la possibilità di usare delle icone per supplire a ciò in
maniera da rendere gradevole alla vista questi doppi collegamenti, uno al file e
uno al testo semplice in HTML.
Esempio:
<a href="node/regolamento_biblioteca" title=”contenuto di un file in testo
semplice”><strong>regolamento di biblioteca</strong></a>
<a href="files/biblioreg.rtf" title="Contenuto scaricabile in formato rtf"><img
src="themes/xhtml_1_1/images/icons/document.png" /></a>&nbsp;(peso 304 Kb)
Sede
Iscrizione
Legale - Via L. Montuori 5, 00154 Roma
P.I./C.F.- 08871021005
all'Albo delle Società Cooperative a Mutualità Prevalente
Roma - A173310
www.binarioetico.org
di
Binario Etico – Soc.Cooperativa
Informatica Solidale
In questa maniera il primo collegamento punta alla pagina html con il contenuto
del file in testo semplice, il secondo collegamento, indicato con un icona
specifica al tipo di file, indica il contenuto “file” scaricabile direttamente.
Inoltre è necessario indicare il peso del file.
Il set di icone che abbiamo predisposto è visibile a questo indirizzo:
http://www.centrodiculturaecologica.it/newcce/themes/xhtml_1_1/images/icons/
COLLEGAMENTI IPERTESTUALI ADIACENTI
E' necessario dividere i collegamenti adiacenti tramite un carattere separatore.
Di norma sul sito abbiamo usato il | (pipe) associato a classi css particolari
dipendentemente da come è lo sfondo.
Per sfondi bianchi è necessario aggiungere la class s
“eparatore-link-adiacenti”.
Un esempio usato nella pagina
http://www.centrodiculturaecologica.it/cce/newcce/?q=node/organizzazione_bibliote
ca
<li><a href="index.php?q=node/regolamento_servizi_informatici">
<strong>regolamento per l'accesso ai servizi informatici e
telematici</strong>
</a>
<span class="separatore-link-adiacenti">|</span>
<a href="files/bibliotele.rtf" title="Contenuto scaricabili in formato rtf"
class="rtf_link"></a>&nbsp;(peso 24 Kb)</li>
OPZIONI DEI COLLEGAMENTI IPERTESTUALI
Quando vengono inseriti collegamenti ipertestuali che riferiscono a siti
stranieri è necessario aggiungere un attributo al codice HTML per il
collegamento. L'attributo indica la lingua utilizzata nel sito in questione che
viene collegato.
In questa maniera è quindi doveroso per alcuni siti inserire l'intero codice HTML
nella textarea del testo aggiungendo il collegamento per intero
Esempio:
Il sito <a href="http://www.gmcontaminationregister.org"
hreflang="en">www.gmcontaminationregister.org</a>, con un pratico motore di
ricerca .....
Se ci si riferisse all'interno dell'opzione href al solo
www.gmcontaminatioregister.org il CMS penserebbe che questo sia un collegamento
interno al sito e di conseguenza sarebbe errato.
CREAZIONE DI TABELLE
Le tabelle in XHTML sono usate solamente per incasellare informazioni che si
prestano ad essere visualizzate all'interno di tabelle e non per definire la
struttura della pagina e l'organizzazione spaziale della stessa.
Per esempio gli orari degli autobus o di apertura del centro sono informazioni
che bene si prestano ad essere messe all'interno di una tabella.
Sede
Iscrizione
Legale - Via L. Montuori 5, 00154 Roma
P.I./C.F.- 08871021005
all'Albo delle Società Cooperative a Mutualità Prevalente
Roma - A173310
www.binarioetico.org
di
Binario Etico – Soc.Cooperativa
Informatica Solidale
Le tabelle nel sistema possono essere create direttamente nel corpo della pagina
scegliendo come tipologia di input “FULL HTML” oppure attraverso la funzionalità
viste (views) presente nel pannello di amministrazione.
In tutti i casi bisogna prestare attenzione a scrivere la tabella in una forma
corretta, inserendo l'attributo SUMMARY all'interno del tag <table> e usando dei
particolari tag per definire l'intestazione della tabella (THEAD) e il contenuto
(TBODY)
Esempio:
<table summary=”inserire un sommario di quali dati la tabella elenca”>
<thead>
<th>intestazione colonna1</th>
<th>intestazione colonna2</th>
<th>intestazione colonna3</th>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<td>contenuto colonna1</td>
<td>contenuto colonna2</td>
<td>contenuto colonna3</td>
Nel caso la tabella si inserisce nel body basterà fare attenzione a scriverla
come sopra. Se invece si utilizza la funzionalità views, e si sceglie di inserire
i dati in tabella è assolutamente necessario inserire un contenuto per la voce
LABEL che apparirà come intestazione di colonna.
In quest'ultimo determinato caso non è possibile inserire una summary e questa
sarà quindi presente ma vuota.
Per visualizzare una tabella creata in questa maniera riferirsi a questo
collegamento nel pannello di amministrazione:
http://www.centrodiculturaecologica.it/newcce/?q=admin/build/views/edit/16
CONTENUTI BOZZE
Drupal consente di inserire dei contenuti e lasciarli come bozze, cioè
accessibili e visibili ai soli amministratori del sito.
Questa funzionalità può essere molto comoda per testare nuovi inserimenti e
controllare se il codice è valido.
Per poter fare ciò è necessario levare il check dal checkbox “Pubblicato”
presente sotto ogni form di inserimento di contenuti all'interno del menu
“Opzioni di pubblicazione”.
Dopo aver salvato il nuovo inserimento si ha una url[6] a cui accedere alla
notizia, copiando e incollando il codice creato all'interno della textarea che
trovate sul sito del w3c all'indirizzo http://validator.w3.org/#validate-by-input
potete controllare la validità del codice prodotto.
Sede
Iscrizione
Legale - Via L. Montuori 5, 00154 Roma
P.I./C.F.- 08871021005
all'Albo delle Società Cooperative a Mutualità Prevalente
Roma - A173310
www.binarioetico.org
di
Binario Etico – Soc.Cooperativa
Informatica Solidale
MODIFICHE DATI STATICI
Per modificare dati statici, in semplice html, nella pagina splash
(www.centrodiculturaecologica.it/index.php
www.centrodiculturaecologica.it/home/index.php
) bisogna innanzitutto scaricare la
pagina index.php (come sopra) e la pagina presente in
themes/xhtml_1_1/page.tpl.php.
All'interno della pagina index.php (la cosiddetta splash page) si potranno
modificare le immagini e i loro attributi ALT e TITLE. Le immagini vanno caricate
all'interno della cartella /fotine . Si possono anche modificare i contenuti dei
meta dati keywords e description che si riferiscono alle keywords e description
della pagina splash.
Quest'ultima operazione è applicabile anche alla seconda pagina (page.tpl.php).
BACKUP
Un backup[7] completo di tutto il sito va fatto in 2 operazioni distinte:
-la prima, backup delle pagine web e delle immagini che creano il sito la si può
eseguire semplicemente con un client ftp[8]
-la seconda procedura consiste nel backup del database, è necessario loggarsi nel
pannello di amministrazione di eticoweb, entrare nella sezione “services” ,
seguire il collegamento “action” di MySQL ed entrare nelMySQL Administration
Tool tramite username e password.
All'interno del tool per gestire MySQL, bisogna seguire il collegamento “Export”,
selezionare l'unico database presente, attivare il checkbox “Salva con nome” e
salvare in locale il file che viene offerto.
Si tratta di un file di testo scritto in linguaggio SQL, che potrà essere
caricato su un altro database se si ritiene necessario.
COSE DA NON FARE
E' importante mettere un contenuto alternativo dell'immagine congruo ed
esplicativo, una proprietà alt=”logo bianco” non dà nessun' ulteriore
informazione al lettore, inoltre è altresì importante non ridondare le stesse
informazioni in proprietà diverse dello stesso elemento: una scrittura del genere
<img src=”logo-bianco.gif” alt=”logo del centro” title=”logo del centro” /> e'
sbagliata perché la proprietà title non aggiunge niente all'elemento immagine.
In questo caso non si dovrebbe specificare.
E' assolutamente vietato inserire l'attributo TARGET per far aprire collegamenti
ipertestuali in nuove finestre, invaliderebbe il codice e di conseguenza la
certificazione di accessibilità.
E' assolutamente vietato scrivere in maiuscolo tag e attributi di tag.
RISORSE
Per avere più informazioni sui tag e il loro funzionamento ed utilizzo rimandiamo
a questa guida:
http://lau.csi.it/risorse/xhtml_tagxtag/index.shtml#a3
Sede
Iscrizione
Legale - Via L. Montuori 5, 00154 Roma
P.I./C.F.- 08871021005
all'Albo delle Società Cooperative a Mutualità Prevalente
Roma - A173310
www.binarioetico.org
di
Binario Etico – Soc.Cooperativa
Informatica Solidale
GLOSSARIO
[1] Tag : elemento chiave di un linguaggio di Markup come l'HTML.
http://it.wikipedia.org/wiki/Linguaggi_di_markup
[2] DocType : o DTD, Document Type Definition o tipo di documento
http://it.wikipedia.org/wiki/Doctype
[3] Charset : codifica dei caratteri, sono dei codici standard legati alla trasmissione di
informazioni.
http://it.wikipedia.org/wiki/Charset
[4] CMS : Content Management System, sistema di gestione dei contenuti
[5] Kilobytes: o anche Kb, peso in bytes di un determinato file.
http://it.wikipedia.org/wiki/Kilobytes
[6] Url: Uniform Resource Locator, in pratica l'indirizzo unico di una pagina o risorsa http
http://it.wikipedia.org/wiki/Url
[7] Backup, operazione che consiste nel duplicare su diversi supporti gli stessi dati con lo scopo
di diminuire le possibilità di perdita dei dati stessi
http://it.wikipedia.org/wiki/Backup
[8] FTP: File Transfer Protocol , protocollo per il trasferimento di file nella rete
http://it.wikipedia.org/wiki/File_Transfer_Protocol
Sede
Iscrizione
Legale - Via L. Montuori 5, 00154 Roma
P.I./C.F.- 08871021005
all'Albo delle Società Cooperative a Mutualità Prevalente
Roma - A173310
www.binarioetico.org
di