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
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: 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.