html5
Corso html 5,lezioni 9, 10, 11.
Roberto Abutzu su uiciechi.it, 2013-06, e 07-08.
Sommario:
a)Nona parte: I link, terza ed ultima parte.
b)Decima parte: il linguaggio Css, introduzione.
c)Undicesima parte: il linguaggio Css, i colori, accenni preliminari.
d)html 5: rettifica su la tag hgroup

a)Nona parte: I link, terza ed ultima parte.

`**********`

I link: terza parte.

Proseguiamo l'apprendimento dei link, introducendo le ancore. Queste sono
dei segnaposti che consentono a dei link appositi di spostarsi in maniera
rapida all'interno della stessa pagina dove si sta navigando.

Riconosciamo questa tipologia di link dallo screen reader che vocalizza:
"Link sulla stessa pagina".

Molto frequentemente, nelle pagine web dei siti accessibili, incontriamo i
seguenti link:

- Vai ai contenuti.
- Torna al menu principale.
- Salta il menu.
- Torna ai contenuti.

Questi sono tutti link sulla stessa pagina e sono collegati a delle ancore,
dei riferimenti che, tanto per farne una similitudine, possono essere
paragonati a dei segnalibri.

L'ancora non  altro che un punto ben definito della pagina, indicato con un
apposito codice html. Quindi, attivando ad esempio il link: Vai ai
contenuti, il link stesso punter all'inizio dei contenuti della pagina,
dove noi avremo inserito il codice html dell'ancora. Per,  importante
sapere che queste ancore possono funzionare anche facendo puntare il link in
pagine diverse da quella in cui stiamo navigando, ma sempre all'interno
dello stesso sito. La differenza sta nel fatto che, se il link punta a
un'ancora in una pagina diversa, questa, appena si aprir, posizioner il
cursore, non all'inizio della pagina, bens direttamente nel punto dove
abbiamo inserito il codice html dell'ancora.

Passiamo nel dettaglio del codice.

La prima cosa da fare  inserire il codice dell'ancora nel punto della
pagina dove vogliamo essere spostati dal link quando lo attiveremo con un
click o con invio.

Inseriremo in questo esempio un link per saltare il menu di navigazione,
andando direttamente ai contenuti della pagina.

Apriamo il nostro file Index.html con il blocco note e spostiamoci nella
riga precedente alla prima intestazione dei contenuti.

Inseriremo questa stringa: ``a id="contenuti"/a``

Notiamo che abbiamo la tag del link in apertura e chiusura, e un attributo,
id, che sarebbe l'identificativo, ovvero il nome proprio dell'ancora. Il
nome deve essere inserito tra virgolette, consiglio in minuscolo senza
punteggiatura e senza spazi. Scrivendo il codice sempre in minuscolo, saremo
salvaguardati da errori di lettura del codice da parte dei browser.
Comunque, se decidete di metterlo in maiuscolo, bisogna ricordarsi poi nel
link che ora inseriremo di scriverlo in maiuscolo. In ogni caso, evitate di
scrivere codice in maiuscolo. Infatti, dove  possibile,  sempre
consigliato di scrivere nomi e percorsi in minuscolo per evitare di
incappare in errori. Naturalmente  consigliato utilizzare nomi che
permettano di identificare l'ancora facilmente.

Adesso, inserita l'ancora, ci portiamo nella nostra index, proprio sopra
l'apertura della tag Nav e inseriamo il link che far riferimento proprio
all'ancora e che, una volta attivato, sposter il nostro focus all'inizio
della prima intestazione dei contenuti. Ecco il codice html del link per il
salto ai contenuti: ``a href="#contenuti"Vai ai contenuti/a``

Come possiamo notare,  un link normalissimo con all'interno delle
virgolette, il nome dell'ancora, preceduta da un cancelletto, che si ottiene
premendo sulla tastiera: Alt Grafico + la a accentata. Prima della chiusura
del link, la parte testuale che viene vista a video dall'utente, quella che
si chiama etichetta.

E' proprio il simbolo del cancelletto che richiama l'ancora. Nei link, come
specificato nelle precedenti lezioni, all'interno delle virgolette, viene
inserito il percorso dove punta il link stesso. Qui  la stessa cosa, solo
che il percorso sarebbe il punto esatto della stessa pagina dove 
posizionata l'ancora. Riepilogando, tra le virgolette, l'identificativo
dell'ancora, preceduta da un cancelletto sempre senza spazi.

Facciamo un altro esempio, inseriremo a fondo pagina, nel footer, due link.
Uno ci permetter di tornare al menu principale, mentre il secondo ci
porter ai contenuti, esattamente alla stessa ancora che abbiamo gi
inserito. Vorrei sottolineare che le ancore devono avere un nome univoco per
ogni pagina. Non  possibile usare lo stesso identificativo per due ancore
diverse sulla stessa pagina. Diversamente,  possibile inserire pi link che
portino alla stessa ancora, anche in pagine diverse.

In questo caso, sia per saltare il menu principale, sia per tornare ai
contenuti quando siamo a fondo pagina, possiamo utilizzare l'ancora:
"contenuti".

Procediamo con l'immissione dei due link di salto come indicato. Spostandoci
nel footer della nostra index, esattamente dove si trova il mio indirizzo di
posta elettronica, subito dopo la chiusura della lista di definizione:
``/dl``

Posizioniamoci a fine della riga e premiamo invio per andare a capo, creando
una riga nuova. Per prima cosa, tanto per fare esercizio, apriamo una lista
non ordinata. Inseriamo i due link di nostro interesse e chiudiamo la lista.
Ecco il codice corretto:

``ul``

``li``

``a href="#contenuti"Torna ai contenuti/a``

``/li``

``li``

``a href="#torna_al_menu"Torna al menu principale/a``

``/li``

``/ul``

Dobbiamo per inserire anche un'ancora, quella per tornare al menu
principale.

Osserviamo attentamente quello che ho scritto all'interno delle virgolette
del link: Torna al menu principale.

Ho inserito il cancelletto e poi: torna_al_menu.

All'interno delle virgolette, pi parole possono essere divise anche dal
segno di trattino (meno) e dal maiuscolo iniziale per ogni parola, sempre
senza spazi, per far leggere bene a Jaws, ma  preferibile usare i due
metodi precedenti, dividendo le parole con il trattino o il sottolineato.
L'importante  poi inserire correttamente lo stesso testo
nell'identificativo dell'ancora.

Quest'ancora dovr essere inserita subito prima della tag Nav, esattamente
nella riga precedente al link che abbiamo inserito precedentemente. Ecco la
stringa dell'ancora: ``a id="torna_al_menu/a``

Salviamo il lavoro fatto, premendo shift pi F12, e apriamo la nostra home
page, index.html, con il browser predefinito. Facciamo tutte le nostre
prove, attivando i vari link di salto inseriti, e ne verifichiamo il
funzionamento corretto.

Nel caso si verificassero degli errori, riaprire il file index.html con il
blocco note e verificare il codice, navigando per carattere. Quando tutto
funziona correttamente, riportiamo tutto il lavoro eseguito sulla home page,
index.html, in tutte le altre pagine del sito.

Ovviamente, anche se si pu utilizzare il copia ed incolla, consiglio di
scrivere il codice per ogni pagina che dobbiamo modificare, nell'ottica di
imparare a scriverlo per esercitazione e prendere confidenza con queste
stringhe. In futuro, quando vorrete aggiungere voi stessi qualche ancora ed
il suo link di riferimento, conoscere il codice vi aiuta tanto, evitandovi
di doverne cercare una gi fatta e modificarla, pratica che pu indurre pi
facilmente in errore.

Utilizziamo gli stessi link per introdurre altri attributi dei link. Riporto
qui sotto la stessa lista non ordinata, con i link completi di questi nuovi
attributi e spiegandoli nel proseguimento della lezione. Ecco il codice
completo:

``ul``

``li``

``a href="#contenuti" title="torna ai contenuti (alt + z)"
accesskey="z"Torna ai contenuti/a``

``/li``

``li``

``a href="#torna_al_menu" title="Torna al menu principale (alt + b)"
accesskey="b"Torna al menu principale/a``

``/li``

``/ul``

Analizziamo i nuovi attributi inseriti nel codice modificato.

Subito dopo la chiusura delle virgolette, dove viene inserito l'indirizzo a
cui punta il link, troviamo uno spazio, e l'attributo: "title". Il title 
un fumetto che appare a video quando il puntatore del mouse viene
posizionato sopra il link. Si inserisce title, un uguale e tra virgolette
quello che vogliamo far apparire scritto nel fumetto.

Come avete constatato, ho inserito: uno spazio, la parola title, un uguale,
le virgolette, la scritta Torna al menu principale, uno spazio, una
parentesi tonda aperta, la parola alt, uno spazio, un segno pi, uno spazio,
la lettera b, una parentesi tonda chiusa e le virgolette.

Notate che ho scritto tra le parentesi tonde il tasto di accesso rapido per
questo link. Comunque, questo testo non ha nessuna funzione attiva come
codice, ma  solo il testo che appare a video quando siamo sul link. In
pratica, ho indicato nel fumetto la combinazione ``Alt + b`` affinch possa
saperlo anche il vedente.

Lo Screen-reader riconosce da un altro attributo il tasto di accesso e lo
vocalizza automaticamente. Vediamo quindi un altro attributo, "accesskey"
che assegna ad un elemento una combinazione di tasti rapidi, per spostare il
focus direttamente con comandi da tastiera.

Nota importante:

- I browser hanno comportamenti diversi tra loro.
- Internet Explorer utilizza il tasto alt e la lettera indicata dal
programmatore per spostare il focus sul link. Una volta spostato il focus,
bisogna premere invio per attivare l'elemento.
- Mozilla Firefox utilizza lo stesso il tasto Alt, ma bisogna aggiungere
anche lo Shift oltre alla lettera indicata. Nelle ultime versioni, Firefox
attiva l'elemento direttamente con la combinazione di tasti, senza dover
premere invio successivamente.
- Google Chrome utilizza il tasto Alt insieme alla lettera indicata, e
attiva direttamente l'elemento.

Attributo "Accesskey".

Come specificato sopra,  possibile attribuire ai link e ad altri elementi
html, delle combinazioni di tasti per spostare il focus su di essi e, per i
browser che lo consentono, attivare anche questi elementi stessi. Per i non
vedenti le accesskey sono utilissime, ma anche l'utente vedente ne fa buon
uso.

Accesskey, come abbiamo visto sopra,  un attributo e, nel link che abbiamo
inserito, ho inserito questo codice: ``accesskey="b"``

Dopo le virgolette che chiudevano l'attributo title, ho inserito uno spazio
e poi l'attributo accesskey. In pratica, un uguale dopo la parola accesskey
e tra le virgolette la lettera che vogliamo assegnare all'elemento.

E' di fondamentale importanza fare attenzione a non assegnare la stessa
lettera a due elementi diversi, perch mentre con Internet Explorer ci si
pu spostare sui link diversi con la stessa combinazione di tasti, per i
browser che attivano direttamente l'elemento, il comando non funzioner.

Ritornando al codice dei link, al termine degli attributi, ho inserito un
maggiore per chiudere la tag di apertura del link, poi ho inserito il testo
visualizzato nella etichetta del link ed ho chiuso il link.

Ecco di seguito un ottimo esercizio per le accesskey: le inseriremo in ogni
link del menu principale della nostra home page, index.html. Dopo aver
salvato e verificato il funzionamento delle accesskey sulla home page,
bisogner riportare il menu principale modificato in tutte le pagine del
sito.

Nota importante:

- Non  fondamentale, neanche per le varie certificazioni del w3c, inserire
le accesskey a tutti i link.
- Per avere un inserimento corretto e non dispersivo dell'attenzione del
navigatore,bisogna inserire queste scorciatoie da tastiera solo per gli
elementi veramente importanti del sito.

Di solito, si inseriscono solo ai link principali che si presentano in tutto
il sito, come, ad esempio, quelli del menu principale e nemmeno tutti. E'
importante, quando si inserisce una accesskey, riportarla correttamente in
tutte le pagine del sito.

Per esempio, se inseriamo una accesskey nel link: " Chi siamo", alt pi C,
in tutto il sito, questo link dovr avere la stessa accesskey, alt pi C,
ovunque sia usato tale link.

Ecco di seguito tutto il menu principale della nostra Home Page, index.html,
con tutte le accesskey inserite da me.

Potete tenere le lettere da me inserite o cambiarle, ma  consigliabile
creare questo nostro sito esattamente come indicato nel corso, in modo che
qualsiasi spiegazione fornita, sar aderente alle modifiche che man mano
apporteremo alle pagine.

Quando poi vi avventurate nella costruzione di un sito vero e proprio,
sarete voi a decidere che tasti assegnare ai link dei vostri siti, cosa che
farete anche in funzione delle etichette che assegnerete ai link. Vediamo
quali tasti ho assegnato ai link del menu principale. Ecco il codice:

``nav``

``h1Menu di navigazione/h1``

``ul``

``li``

``a href="index.html" title="home page (alt + h)" accesskey="h"Home
Page/a``

``/li``

``li``

``a href="chi_siamo.html" title="chi siamo (alt + c)" accesskey="c"Chi
siamo/a``

``/li``

``li``

``a href="lezioni.html" title="lezioni (alt + i)"
accesskey="i"Lezioni/a``

``/li``

``li``

``a href="html_5.html" title="html 5 (alt + t)" accesskey="t"html 5/a``

``/li``

``li``

``a href="Css.html" title="Css-fogli di stile a cascata (alt + s)"
accesskey="s"Css-fogli di stile a cascata/a``

``/li``

``li``

``a href="download.html" title="Download (alt + d)"
accesskey="d"Download/a``

``/li``

``li``

``a href="java_script.html" title=" Java Script(alt + j)"
accesskey="j"Java script/a``

``/li``

``/ul``

``/nav``

Il mio consiglio  di leggersi bene questo codice, scrivendolo manualmente
almeno nella index.html, anche se sarebbe molto istruttivo scriverlo a
memoria per tutte le pagine.

Se siete sfaticati, salvate il codice della Home Page e, solo se il tutto 
funzionante, copiate e incollate nelle altre pagine del sito, stando bene
attenti a non cancellare nulla che non sia compreso dentro la tag nav.

Anche immagini, o grafici in genere, possono essere usati come link. Vedremo
nella lezione dedicata alle immagini come crearli. Inoltre, vi anticipo che
le immagini comunque vanno poi gestite tramite i Css, quindi solo dopo aver
affrontato le prime nozioni del css, la prossima lezione, affronteremo le
immagini e i link grafici.

Ora inserisco due link che vanno copiati ed incollati all'interno sia della
Home Page, Index.html, sia all'interno di tutte le altre pagine del sito. Si
tratta dei link che permettono di richiamare i vari file css dall'interno
delle pagine html, per acquisire la formattazione degli elementi per poterli
mostrare come stabilito da noi sulla pagina web. Ecco i link da copiare:

``link rel="stylesheet" type="text/css" href="css/style.css" media="screen"
/``

``link rel="stylesheet" type="text/css" href="css/template.css"
media="screen" /``

Questi due link devono essere scritti o incollati all'interno della tag
"head", quella parte iniziale della pagina dove vengono inserite tutte le
informazioni non visibili nella pagina, ma utili al suo buon funzionamento.
Essendo abbastanza complessi da spiegare, rimando la spiegazione del loro
funzionamento a lezioni successive, non ritenendo opportuno esagerare con
termini ed attributi complessi. In questo momento del corso  preferibile
iniziare l'introduzione al linguaggio css. Per ora,  sufficiente sapere che
questi due link vi servono per caricare i CSS che vi permetteranno di poter
iniziare a dare un minimo di stile e un layout al sito. Tenete presente che,
se i futuri file Css non vi danno i risultati desiderati, analizzate in
questi due link il percorso dei file CSS. Verificate che sia corretto e che
siano corrette le cartelle e i file creati nelle prime lezioni.

Per comodit, comunque vi riepilogo velocemente:

1. Dovreste avere una cartella chiamata css.

2. All'interno di questa cartella, dovreste avere due file vuoti, creati
con blocconote e rinominati in: style.css e template.css.

Noi lavoreremo proprio su questi due file. Spero che sia tutto corretto come
indicato, altrimenti provvederete a ripassare le parti precedenti e mettervi
nelle condizioni indicate sopra.

Vi rimando alla prossima lezione, quando cominceremo a trattare
l'introduzione al linguaggio dei css, fogli di stile a cascata.

`***********`

Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu
``roberto@evyweb.it``

***

b)Decima parte: il linguaggio Css, introduzione.

`**********`

Il linguaggio Css, introduzione.

Col passare del tempo e l'evoluzione del linguaggio html, ma soprattutto con
l'ampliamento delle funzionalit dei siti web, si  percepita la necessit
di separare la gestione degli elementi html dalla loro formattazione.

In origine ogni elemento veniva formattato direttamente nel file html,
quindi, oltre al codice html, nella pagina erano inseriti anche i codici di
formattazione del singolo elemento. Per questo motivo, ne risultavano pagine
lunghissime, con un codice molto complesso per la gestione e la
comprensione, soprattutto in fase di modifica.

Da qui l'idea di creare un altro file, con un linguaggio diverso, collegato
al file originale, con l'incarico di assegnare la formattazione agli
elementi. Tale file ha un suo nome e come estensione CSS.

Cosa significa CSS ?

CSS  un acronimo e significa: "Cascading Style Sheets". La traduzione
italiana potrebbe essere "fogli di stile a cascata". Per, in genere, Si
dice " foglio di stile", senza aggiungere altro.
Per capire l'utilit di questi file particolari, tanto per fare un esempio
molto semplice, se io desiderassi avere tutte le intestazioni di livello 1
(h1) con un colore verde, lo scriverei una volta sola nel file css, e tutte
le intestazioni h1 del sito sarebbero verdi. Lo stesso vale per il font del
carattere, lo stile e le sue dimensioni.

Ovviamente, utilizzando degli identificativi, posso comunque creare colori e
stili diversi per gli stessi elementi. Posso quindi avere tre intestazioni
h1, una verde, una rossa, una nera, e tutte con font diversi.

Il linguaggio Css non crea nessuna limitazione all'elemento e alla sua
formattazione, anzi, ci consente di stabilire quello che vogliamo e per gli
elementi che vogliamo, una sola volta. In pratica, tutto quello che sar
stabilito sar applicato in tutte le pagine del sito.

In rete  possibile reperire diverse nozioni sulla storia e sullo sviluppo
di questo linguaggio, quindi, c' solo l'imbarazzo della scelta per il tanto
materiale reperibile. L'argomento  molto vasto e molto interessante, ma
rimando alla ricerca in rete tutti i curiosi e gli esigenti.

In questo corso, si parte immediatamente nello studio del linguaggio che,
pur non essendo complesso,  diverso come codice dal linguaggio html.
Naturalmente i codici che andremo a inserire nei nostri file css saranno
collegati e funzioneranno col nostro sito, procedendo parallelamente allo
studio del linguaggio html 5.

Cosa sono i file css.

Per creare i nostri file css sar sufficiente aprire e salvare con nome due
file di testo creati con il blocco note di Windows. Appena creati, cambiamo
l'estensione da txt a css ed il gioco  fatto. I file css sono semplicemente
dei file di testo e vengono aperti da blocconote.

Nella creazione del nostro sito, se vi ricordate, avevamo creato nella
cartella principale una sottocartella chiamata css. Al suo interno avevamo
creato due file: style.css e template.css.

Questi nomi non sono obbligatori, ma sar bene assegnare a questi file dei
nomi significativi. La ragione  presto detta: serve per avere sotto
controllo, in fase di modifica del layout del sito, la possibilit di capire
subito su quale file agire per correggere o modificare. Questi sono i nomi
che io preferisco assegnare, ma  comunque una cosa soggettiva. Niente vieta
al programmatore di assegnare nomi differenti, l'importante  poi riportare
correttamente i parametri giusti in esso dichiarati in modo corretto nel
codice del file html.

Per mia abitudine, utilizzo questi due nomi, assegnando al file style tutta
la formattazione dei caratteri, mentre al template rimando l'impaginazione
delle pagine del sito. Qualora dovessi assegnare qualche formattazione
specifica, quindi ad un solo determinato elemento, creer un altro file,
pcss.css e ne inserisco all'interno il codice. Si lascia a ognuno la libert
di decidere sia quanti file css utilizzare e i nomi da assegnare loro.

Mi limito solo a consigliarvi di evitare di creare pochi file troppo lunghi,
difficili poi da gestire, soprattutto quando bisogna apportare modifiche, e
di assegnare nomi ai file che possiate raggiungere subito senza doverli
cercare. Inoltre, se una pagina del mio sito necessita di una formattazione
particolare e unica,  buona norma assegnare lo stesso nome css della pagina
html. Per esempio, se si trattasse della pagina Turismo.html,  bene creare
il file CSS con il nome Turismo.css.

Nei file css,  possibile inserire lo stile dei caratteri, il loro colore,
il font con le rispettive dimensioni. Possiamo assegnare la formattazione
alle intestazioni, ai link, ai pulsanti e a tutti gli elementi. Inoltre, con
i file css  possibile posizionare un elemento in un determinato punto della
pagina, come  possibile dare le dimensioni alle immagini, oltre che
specificarne la corretta collocazione nella pagina.

Le possibilit sono infinite e man mano che il corso procede, le
affronteremo. Siccome questo corso nasce fondamentalmente per persone
disabili della vista, esattamente come il sottoscritto che  non vedente
totale da venti anni, si fa questa precisazione perch  importante
comprendere e accettare che, per formattare una pagina web, l'aiuto di una
persona vedente pu essere fondamentale. Non intendo dire che serve un
vedente per inserire un'immagine o per dare il colore a un link, ma di certo
qualcuno dovr vedere per noi se il risultato  gradevole per chi vede,
perch poi alla fine saranno proprio i vedenti i maggiori utilizzatori del
nostro sito.

Per esempio, potrei dover inserire un'immagine, ma qualcuno dovr pur dirmi
se va ridimensionata o spostata, e soprattutto se quell'immagine realmente
abbellisce il sito. Quello che voglio dire  che questa  la normalit per
chi non vede e bisogna accettarla. E' mio interesse fare in modo che anche i
non vedenti possano scrivere pagine web, ma costruendole sempre senza
sminuirne la bellezza e costruendo dei siti che rispettino le giuste
proporzioni. Quindi mi sento in dovere di specificare anche i limiti che
abbiamo noi disabili della vista e come farsi aiutare. Tanto per capirci,
anch'io chiedo a mia moglie l'abbinamento dei colori e chiedo di scegliermi
le immagini pi adatte. L'importante  che noi si sia in grado poi di
inserire il codice corretto.

Fatta la premessa, la prima cosa da fare, dopo aver creato i nostri file
css,  inserire i link nelle pagine html affinch questi possano richiamare
la formattazione che noi andremo a scrivere nei file css. Inizieremo aprendo
con il blocco note il nostro file index.html e andremo ad incollare queste
stringhe che sono i link che richiamano i file css. Queste stringhe,
abbastanza complesse, le spiegheremo successivamente.

Scrivo tenendo conto che avete creato una cartella css e che avete inserito
al suo interno i file: style.css e template.css.

Qualora avete deciso di utilizzare altri nomi per questi file, analizzate le
stringhe e sostituite i nomi dei file, anche se per il momento vi consiglio
di mantenere i nomi indicati nel corso, in modo che non ci saranno
incomprensioni o errori. Queste sono le stringhe da incollare nel file
index.html:

``link rel="stylesheet" type="text/css" href="css/style.css" media="screen"
/``

``link rel="stylesheet" type="text/css" href="css/template.css"
media="screen" /``

Queste stringhe, vanno incollate all'interno della tag: Head. Vi ricordo che
all'interno della Head vengono inserite quelle informazioni che non sono
visualizzate all'utente finale ma che comunque servono al buon funzionamento
del sito. Siccome nella head andranno inserite parecchie stringhe, bisogna
stare attenti a non inserire delle tag all'interno di altre tag, quindi, 
importante accertarsi di inserire del nuovo codice dopo la chiusura di tag
precedenti.

Io vi consiglio di fare come segue:

- Aperto i file index.html, scendiamo fino a trovare la chiusura della tag
head: ``/head``.
- Premiamo il tasto home per portarci ad inizio riga.
- Creiamo un paio di righe vuote sopra a questa tag di chiusura, premendo
ripetutamente il tasto invio.
- Con freccia su, troviamo le righe vuote appena create ed incolliamo il
codice sopra riportato.
- Chiudiamo la nostra index salvando le modifiche eseguite.

Questa modifica, quindi le operazioni sopra descritte, dobbiamo eseguirle
per tutti i nostri file html che abbiamo nella nostra cartella del sito.
Cos facendo, ogni file html richiamer i due file di stile: style.css e
template.css per la formattazione degli elementi come sar da noi prevista.

Una volta indicato a tutte le pagine dove cercare i codici di formattazione
degli oggetti in esse contenuti, iniziamo a compilare i file css spiegandone
il codice, anche se prima dobbiamo vedere un po' di teoria, in modo da
semplificare la comprensione pratica degli elementi di un CSS.

Le varie indicazioni di stile che noi scriveremo nei file css, seguono una
struttura ben precisa:

Selettore ``{propriet:valore; }``

Semplificando al massimo questa struttura, possiamo affermare che il
selettore :

- L'elemento con il quale possiamo modificare lo stile.
- La sua propriet  il tipo di modifica allo stile che vogliamo apportare.
- Il valore  la misura che assegneremo alla propriet.

Ci precisato, facciamo alcune considerazioni:

- Tra la propriet e il valore va inserito il segno di due punti e si
consiglia uno spazio non obbligatorio.
- Ogni coppia Propriet:valore (vedi segno di punteggiatura), viene chiusa
col punto e virgola.
- Tutte le propriet:valore di un selettore vanno all'interno delle
parentesi graffe.
- E' possibile indicare pi coppie di propriet:valore, chiudendo ogni
propriet:valore con il punto e virgola.
- Ogni coppia Propriet:valore pu essere scritta anche in righe
consecutive.

Esistono vari tipi di selettori e man mano ne vedremo l'utilizzo. Il pi
semplice  quello che indica come formattare una tag html. Eccolo:

``h1 {propriet: valore; }``

Iniziamo con il notare che i selettori non hanno i segni di maggiore o
minore.

E' possibile assegnare una coppia di Propriet:valore a pi selettori. Un
esempio:

``h1, h2, h3, h4 {propriet:valore; }``

Notare che tra ogni intestazione ho inserito una virgola e uno spazio.

Questa propriet e il suo valore verranno applicati agli elementi: h1, h2,
h3 ed h4.

Volendo assegnare uno stile per ogni intestazione sar sufficiente scriverle
singolarmente:

``h1 {propriet:valore; }``

``h2 {propriet:valore; }``

``h3 {propriet:valore; }``

``h4 {propriet:valore; }``

Gli esempi sopra riportati possono servire anche quando si vogliono
aggiungere delle altre coppie di propriet:valore agli elementi. Per
esempio, alle intestazioni h1, h2, h3 ed h4 posso prima assegnare una stessa
coppia propriet:valore come il font, e poi, per, riscrivendole separate
posso dare ad ognuna di esse un colore diverso.

Esistono altri selettori molto specifici. Per esempio:

- I selettori contestuali. Si intende per questi selettori la possibilit di
dare delle regole particolari. Significa dare delle regole specifiche per un
determinato contesto, cio, un selettore che si trovi in un determinato
punto della pagina, magari all'interno di una determinata tag, o che sia
figlio di un determinato elemento, applicher le propriet:valore che gli
abbiamo dato.
- I selettori adiacenti che, quindi, devono essere consecutivi per
attribuirgli una regola.

I selettori, comunque, essendo tanti, saranno spiegati nel dettaglio
successivamente, nella pratica, cosa che render tutto pi semplice.

Portiamoci nella cartella del nostro sito, entriamo nella cartella css e
premiamo invio sul file template.css. Il file  vuoto.

Ognuno, quando fa queste cose adotta dei metodi personali per tante cose,
come per esempio, inserire un titolo, una nota, il proprio nome piuttosto
che una sigla, oppure altro. L'accorgimento che uso sempre io quando faccio
programmazione,  quello di inserire in ogni file che modifico, quindi,
anche nei file css, la data dell'ultima modifica eseguita. Questo ci aiuta
quando dovremo apportare modifiche o aggiunte nel file che stiamo
modificando.

Inseriamo per ora la data, quindi, digitiamo:

``/* 01 Agosto 2013 */``

Per il browser che legge il file css, questo risulta essere un commento e,
non solo non influenzer il funzionamento del file css, ma sar ignorato
anche dal browser.

Come avete potuto notare, i commenti nei file css vengono identificati,
nella loro apertura e nella loro chiusura, inserendo dei caratteri
particolari:

- apertura del commento: una barra (shift pi 7), e un asterisco (shift pi
il tasto pi).
- Chiusura del commento: un asterisco (shift pi il tasto pi), e una barra
(shift pi 7).

Tra queste due coppie di caratteri sopra indicati, inseriremo tutto quello
che vogliamo indicare come note per leggere meglio il file css. Verificate
con cura l'apertura e la chiusura dei commenti, visto che, a causa di un
commento errato, il file css potrebbe anche non funzionare.

Per prima cosa, inseriremo il colore dello sfondo del sito, spiegando
successivamente la suddivisione e la codifica dei colori, con le loro
assegnazioni. Ecco la stringa da inserire:

``body {background-color: #F0FFFF; }``

Per chi non ne fosse a conoscenza, riporto le combinazioni di tasti per
scrivere le parentesi graffe:

- Aperta parentesi graffa ``({)``, = control pi alt pi Shift pi e
accentata.
- Chiusa parentesi graffa ``(})``, = control pi alt pi shift pi il tasto
pi.

In sostituzione delle combinazioni di tasti control pi Alt,  possibile
utilizzare l'Alt di destra, alt grafico.

Se si pu usare il tastierino numerico, con i numeri inseriti, queste due
parentesi si ottengono anche con alt pi 123 e con alt pi 125,
rispettivamente per parentesi graffa aperta e parentesi graffa chiusa.

Un altro simbolo che incontreremo nei file css  il simbolo cancelletto
``(#)``. Questo simbolo si ottiene premendo Alt grafico pi la a accentata.

Analizziamo la stringa inserita, in modo da capire meglio con che cosa
abbiamo a che fare.

La prima parola che incontriamo : body, un elemento html.

Scritto in minuscolo, ma fate attenzione sempre a come l'avete scritto nel
file html, perch quello che scriviamo in questo tipo di file  sensibile al
maiuscolo e al minuscolo. La parola body ci indica che tutte le modifiche
che apporteremo all'interno delle parentesi graffe, verranno apportate alla
parte di pagina delimitata da questa tag, dalla sua apertura alla sua
chiusura, parte che poi sarebbe tutta la nostra pagina visibile.

Riassumendo, body  la tag, quindi il selettore, tutto quello dentro le
parentesi sono le sue propriet e i rispettivi valori.

Dopo la parola body, digitiamo uno spazio, digitiamo la parentesi graffa
aperta e digitiamo un altro spazio.

Digitiamo ancora: ``background-color: #F0FFFF;``

Questa  la propriet che indica il colore da assegnare allo sfondo.

background-color:

Attenzione che  presente un trattino tra le due parole. A tale scopo,
ricordo a chi utilizza il solo Screen-reader, di impostare la punteggiatura
su "tutto" quando si lavora con il codice.

Dopo la propriet, inseriamo i due punti e uno spazio.

Scriviamo il valore dell'attributo che nel nostro caso specifico :
``#F0FFFF``

Abbiamo un cancelletto e successivamente sei caratteri che, a seconda del
colore scelto, possono essere lettere o numeri. (Codice Esadecimale come
vedremo pi avanti).

In pratica, questo  un modo di inserire i colori, utilizzando il codice
esadecimale di ogni singolo colore. Esistono in rete vari programmi e siti
per trovare le corrispondenze tra i colori e i codici esadecimali. E'
possibile poi utilizzare il nome del colore, scrivendolo in Inglese, se
compreso nei sedici colori primari, oppure, utilizzare delle percentuali.
Per ora noi vedremo e utilizzeremo solo questo sistema e nella prossima
lezione dar una spiegazione approssimativa dei colori esadecimali.

Attenzione! Preciso che questo cancelletto  una caratteristica dei colori,
non  un simbolo da inserire prima del valore di una propriet. In pratica,
i sei caratteri che identificano un colore sono preceduti dal cancelletto.

Subito dopo il valore, senza spazi, inseriamo un punto e virgola, chiudendo
la coppia propriet:valore.

Se non bisogna inserire altre propriet, inseriamo uno spazio e chiudiamo la
parentesi graffa.

Nota bene:

- E' importante rispettare le spaziature, il maiuscolo e minuscolo,
soprattutto nei nomi delle tag. Per non sbagliare, quando si scrive codice 
buona abitudine scrivere sempre in minuscolo.
- Ogni coppia, propriet:valore, viene chiusa con il punto e virgola e uno
spazio.
- E' possibile inserire svariate coppie.
- Inserita l'ultima coppia, inserire uno spazio e la parentesi graffa
chiusa.

Salvate le modifiche apportate al file Template.css. Aprite il file
index.html con Internet Explorer. Se avete fatto tutto correttamente,
dovreste avere uno sfondo celestino. Per chi utilizza lo screen reader Jaws,
utilizzando la combinazione di tasti: insert + 5 (tastiera estesa) vi viene
vocalizzato il colore del carattere e dello sfondo. Salvo modifiche
apportate alla grafica del computer o del browser, dovrebbe dirvi: nero su
azzurro. Il primo colore  il carattere, il secondo lo sfondo.

Nella prossima lezione faremo un po' di esercizi per entrare in confidenza
con i colori del nostro sito. Solitamente, i colori nei vari manuali per
apprendere l'uso dei fogli di stile, vengono spiegati a corso inoltrato,
dopo altre nozioni. Io preferisco darne una leggera infarinatura all'inizio,
perch ritengo che pu dare pi soddisfazioni e pi incentivi a chi inizia,
per il proseguimento del corso.

Se proprio vogliamo essere certi del risultato ottenuto, per non fidarsi
troppo di Jaws che tratta i colori a modo suo, sicuramente chiederemo a
qualche vedente di verificare il risultato del nostro lavoro. Generalmente,
se si mostra ad un vedente una pagina in bianco e nero, di solito, non
permette al vedente di apprezzarne il valore, mostrandogliela a colori,
anche se  un primo approccio,  sempre una cosa pi professionale.

Anche se basta inserire un colore sgargiante per ottenere pi soddisfazioni,
bisogna fare attenzione a non usare colori troppo spinti che causano
generalmente inaccessibilit per i soggetti Ipovedenti. Per avere qualche
indicazione su quali colori non usare, basta leggersi qualche intervista di
Massimiliano Martines, componente della Commissione OSI, sul sito
http://www.uiciechi.it/osi/

Oltre ai colori sconsigliati,  anche buona norma avere un contrasto
sufficiente tra testo e sfondo, per evitare che differenze minime, creano
problemi anche ai vedenti, oltre che agli anziani e agli ipovedenti. Di
questo ne parleremo in modo pi approfondito pi avanti.

Per quanto vi posso sembrare cinico, ricordate che la rete  prevalentemente
costituita da immagini e colori. Vedenti o no, noi se vogliamo realizzare
dei bei siti, dobbiamo obbligatoriamente attenerci alle regole del web. Se
queste cose le impareremo bene, costruiremo sicuramente dei bei siti, oltre
a programmarli accessibili.

Vi rimando alla prossima lezione, per trattare i colori dei css,
ricordandovi che sono fogli di stile a cascata.

`***********`

Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu roberto@evyweb.it`_

***
c)Undicesima parte: il linguaggio Css, i colori, accenni preliminari.

`**********`

I colori, accenni preliminari.

Nella parte precedente, volendo assegnare un colore allo sfondo del nostro
sito, abbiamo inserito un codice, una indicazione di stile, formato da un
cancelletto e altri sei caratteri. Stavamo lavorando nel file: template.css
e, dopo il commento, abbiamo inserito: ``body {background-color:
#F0FFFF; }``

Questa  una delle notazioni che abbiamo a disposizione per indicare i
colori di un elemento di una pagina web. Ne esistono anche altri, tra cui:

- Scrivere il nome in inglese, per esempio, red per rosso, green per verde,
black per nero, ecc, in sostanza i sedici colori in inglese.
-Utilizzare il metodo chiamato RGB.

Il discorso che affronteremo noi  quello che ho gi accennato nella parte
precedente e, precisamente, si tratta del sistema esadecimale.

Come funziona?

Sono 6 caratteri consecutivi che possono essere numeri o lettere e questi 6
caratteri vengono suddivisi in coppie. Lavorando insieme indicano:

- Il primo ed il secondo sono la gradazione del colore rosso.
- il terzo ed il quarto carattere sono la gradazione del verde.
- Il quinto ed il sesto sono la gradazione del blu.

La Sigla RGB, infatti, indica i colori Red (rosso), Green (verde) e Blue
(blu).

Nell'indicazione dei colori col sistema RGB, nei Css, invece dei caratteri
alfanumerici, vengono inserite le percentuali del singolo colore.

Il sistema esadecimale e il sistema RGB, anche se sono simili, sono scritti
nel codice in maniera differente. Lo vedremo in seguito e per ora diamo una
leggera spiegazione dei colori con la notazione esadecimale. Anche questi
lavorano con Red, Green, Blue, quindi Rosso, Verde e blu. I caratteri,
numeri e lettere, nel codice esadecimale, aumentando o diminuendo, aumentano
la gradazione dei tre colori, creando poi tutti i colori e le loro
sfumature.

L'unit di misura parte dallo zero e fino al nove, poi continua dalla
lettera A e fino alla lettera F. Quindi, da zero ad effe. Le lettere vanno
sempre scritte in maiuscolo. Partiamo con gli esempi che in parte
chiariscono la teoria.

``#000000``, corrisponde al nero. Lo zero  il valore pi basso.

``#FFFFFF``, corrisponde al Bianco. La lettera F, che v scritta sempre
maiuscola, indica il valore pi alto.

Altri esempi:

``#FF0000``, indicher il colore Rosso.

``#00FF00``, indicher il colore verde.

``#0000FF``, indicher il colore Blu.

Utilizzando lo screen reader Jaws, premendo Insert + 5 della tastiera
estesa, vi viene vocalizzato il colore del carattere e dello sfondo, per
esempio, nero su bianco. Purtroppo non sempre funziona questa
vocalizzazione. A volte pu essere necessario aggiornare con Insert + escape
prima di richiedere il colore sia del carattere che dello sfondo.

Per chi utilizza altri screen reader, verificate nella guida del vostro
programma il comando per la vocalizzazione dei colori di carattere e sfondo.
Vi consiglio di provare a sostituire il codice del colore nel vostro
Template.css e verificare nella Index come varia lo sfondo.

Come gi detto, in rete esistono vari siti per recuperare le varie
combinazioni e vi rimando alla rete per questa ricerca. Le combinazioni sono
migliaia e non potrei riportarle tutte. Vi consiglio comunque di visitare
questa pagina dove potrete trovare chiarimenti e vari colori con il codice
corretto: http://it.wikipedia.org/wiki/Lista_dei_colori

Per utilizzare l'indicazione dei colori con il sistema RGB bisogna indicare
la percentuale che si desidera per ogni colore, separando tale percentuale
da una virgola e uno spazio. Un paio di esempi:

``rgb(100%, 0%, 0%)``

Questo  un esempio che indica il colore rosso.

Per far capire meglio, riporto tutta la stringa che avevamo precedentemente
inserito nel file Template, sostituendo la notazione esadecimale con quella
RGB.

``body {background-color: rgb(0%, 100%, 0%); }``

Notate che ho azzerato il rosso e il blu, dando il valore massimo, 100%, al
verde. Dopo la propriet, la stringa che indica il colore del nostro sfondo,
si inseriscono i due punti e uno spazio. Poi l'indicazione rgb e
successivamente, all'interno delle parentesi tonde, i valori in percentuale
separati da una virgola. Dopo la chiusura della parentesi tonda, il punto e
virgola, uno spazio e chiudiamo la parentesi graffa.

Provate a modificare le percentuali e applicare come esercizio queste
percentuali allo sfondo. Potete anche variare a vostro piacimento e
verificarne poi il risultato, usando sulla pagina aperta con Internet
Explorer, il comando di Jaws insert pi 5 della tastiera estesa.

Possiamo applicare queste nozioni anche ai vari elementi di una pagina web,
quindi, anche alle pagine html del nostro sito. Facciamo un altro esempio
che servir poi per fare esercitazioni, mentre costruiamo il sito.

Apriamo il file style.css ed iniziamo a scrivere, anche in questo file,
qualche dato di formattazione. All'inizio inseriamo la data come indicato
precedentemente, inserendo i codici dei commenti, barra e asterisco
all'inizio, e, asterisco e barra alla fine del commento.

Nota bene, come gi spiegato nella parte precedente, nei file css, se non si
inseriscono i commenti mettendo una barra seguita dall'asterisco all'inizio,
e un asterisco seguito dalla barra alla fine del commento, il css non
funziona, dando anche errore di codice quando si verifica il codice con i
validatori che si possono usare.

Una volta che abbiamo inserito la data come commento, inseriamo il seguente
codice :

``h1 {color: rgb(100%, 0%, 0%); }``

Salviamo le modifiche e apriamo il nostro file Index.html, andando a
verificare che le intestazioni h1 siano realmente rosse.

Nota importante: ogni volta che effettuate una modifica al codice, sia a
quello html, sia a quello Css, quando aprite il file index.html, aggiornate
sempre la pagina con f5 prima di verificare le modifiche effettuate, per
evitare di visualizzare la pagina in memoria e non quella fisicamente
modificata. Infatti, si pu verificare che il computer mantenga il file
temporaneo, facendovi visualizzare la pagina precedente alla modifica
eseguita.

Premendo F5, siete certi che questo non pu accadere, perch si aggiorna la
visualizzazione e il browser ricarica la pagina nuovamente, anche se si
rende conto che  gi in memoria.

Per fare esercitazioni, provate ad effettuare il cambio dei colori per tutte
le intestazioni, o per altri elementi della nostra index. Volendo, potete
anche dare un colore diverso ad ogni livello di intestazione. Per questi
esercizi, come gi consigliato in precedenza, vi consiglio di utilizzare
magari una copia del vostro sito. L'importante  di avere sempre una copia
del sito originale del corso in linea con le modifiche eseguite nelle
lezioni, tanto, avrete in futuro tutto il tempo per applicare ai vostri siti
tutte le personalizzazioni che vorrete.

Nota importante: anche se sono certo che ci sono delle persone alle quali
certi comportamenti sono ritenuti lesivi della propria personalit e non le
accettano, questo  uno di quei casi per i quali  inutile farsi venire i
mal di pancia, perch senza la vista l'aiuto di una persona vedente non
guasta mai in fase di verifica. Inoltre,  sempre buona norma far visitare
il nostro sito a pi persone prima di metterlo visibile a tutti. Sempre
meglio avere pi opinioni e a volte, magari  necessario fare una media per
un buon risultato.

Per quanto possa sembrare sbagliato, il sito non deve piacere a chi lo crea,
ma a chi lo visita. Questo concetto vale sia per la disposizione dei colori,
ma anche per la struttura stessa del sito. Infatti, un sito viene giudicato,
secondo le indicazioni del W3c, nei primi secondi della sua apertura. Se
create siti disordinati o con colori sgradevoli, il sito verr richiuso e
mai pi riaperto da chi avr questa cattiva prima impressione. Il cercare di
colpire l'utente con colori troppo vivaci, o con troppi effetti speciali,
non solo pu avere esattamente l'effetto contrario a quello che si aspetta
il programmatore, ma crea anche, per gli ipovedenti e gli anziani, un
problema di fruizione dei contenuti, con la sgradita sorpresa, se fatto
analizzare da persone competenti, di aver realizzato un sito inaccessibile
alle persone che vedono male. Certamente non sarebbe una bella cosa Se un
cieco assoluto creasse un problema di questo genere, pensateci!

Riassumendo,  importante che voi vi rivolgiate a pi persone per avere
opinioni realistiche sullo stato dei vostri risultati. Non me ne vogliate,
ma mettiamoci bene in mente che il web nasce per le persone vedenti e tale
rimane. A noi la possibilit e la capacit di farne anche uno strumento
nostro, ma senza mai pretendere lo stravolgimento della rete. Sta a noi, non
solo pretendere l'accessibilit quando i siti li costruiscono gli altri, ma
anche saper costruire in modo accessibile il sito quando a costruirlo siamo
noi con le nostre mani.

Le indicazioni sulla notazione dei colori nei file css,  volutamente
ridotta allo stretto necessario solo per iniziare ad operare. Nelle lezioni
pi avanti di questo corso, spiegheremo altri concetti e abbreviazioni del
codice. Accontentiamoci per ora di quello che abbiamo visto, perch con
queste poche nozioni, avete ci che serve per inserire tutti i colori in un
sito web.

Vi rimando alla prossima lezione dove vedremo le indicazioni dello stile a
seconda dello stato dell'elemento. Esattamente vedremo i link visitati, non
visitati, col puntatore sopra e nel momento della sua attivazione. In
pratica, vedremo come si imposta il colore di un link in funzione di come
cambia il suo stato.

`***********`

Per ulteriori spiegazioni, scrivere a: `Roberto Abutzu roberto@evyweb.it`_

***
d)html 5: rettifica su la tag hgroup
Roberto abutzu su mondoinformatica, 29\07\2013, h. 18.50.

Questa mail  prevalentemente dedicata a chi segue il mio corso html 5  publicato mensilmente in 
pcciechi e in esclusiva in questa lista.
Nelle prime lezioni ho parlato di una tag: hgroup.
Questa era una nuova tag per raggruppare le intestazioni.
Ebbene  stata levata e non viene pi supportata in questo linguaggio.
Questo perch questa tag creava alcuni problemi di accessibilit che anch'io avevo notato.
Spiegher in una prossima lezione i motivi di questa decisione che arriva direttamente dal W3c.
Per ora, chi ha provato a creare le pagine col mio corso, potr direttamente riaprire la index e 
tutte le pagine dove questa tag  contenuta.
Cancellare fisicamente sia la tag di apertura e quella di chiusura.
Salvare le modifiche.
Attenzione che questa tag comunque non implica il funzionamento del sito.
Ma non  pi certificabile in quanto non rispetta pi le normative.
Ricordo che il linguaggio html5  ancora aperto a modifiche e dovrebbe risultare definitivo nel 
2015.
Quindi pu capitare che qualcosa venga modificato.
Un abbraccio a tutti e vorrei dirvi che questo mese sono previste le prime due lezioni del 
linguaggio css.
