Corso html 5. Di Roberto Abutzu. `***********` Decima parte: il linguaggio Css, introduzione. `**********` Il linguaggio Css, introduzione.

Transcript

1 Corso html 5. Di Roberto Abutzu. `***********` 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.

2 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

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

4 - 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

5 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

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

7 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

8 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 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

9 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>`_