CSS secondo ComIn!

Piccola guida alle basi del CSS Il CSS (Cascading Style Sheets - Fogli di stile a cascata) un linguaggio di programmazione complementare a html; infatti esso stato creato non per editare i contenuti (parte lasciate appunto al linguaggio html), ma per costruire la struttura e la parte grafica di un sito (dei font, dei colori, dei margini, delle linee, delle altezze, delle larghezze, delle immagini di sfondo, ecc). C' da specificare che in passato, ma anche oggi in alcuni casi, questi elementi vengono impostati attraverso l' html. Con i CSS possibile creare layout dal design accattivante e modificarne l'aspetto in modo semplice ogni qual volta se ne presenti la necessit: questa funzione una delle cause del successo dei fogli di stile, prima infatti se si voleva apportare una modifica ad esempio ad un titolo o un'immagine di sfondo bisognava prendere per mano una ad una le varie pagine di un sito per cambiare il codice, ora invece semplicemente basta modificare le stringhe interessate in un solo documento e queste verranno automaticamente a tutto il sito, visto che il foglio di stile inserito all'interno del codice html (nell'head, che contiene informazioni che riguardano la poi reale visualizzazione e interpretazione del documento) di un sito con il codice <link rel="stylesheet" href="nomedelcss.css">. La caratteristica principale dei CSS che a differenza dell'html non contengono tabelle (in html le tabelle, nate come semplice strumento per dati, sono state poi utilizzate come elemento per dare una struttura grafica ai siti) : in un documento CSS i vari tag (stringhe di codice che possono essere elenchi, testo, men, contenuto) si raggruppano all'interno di contenitori generici di block-level chiamati div ( l'apertura di un contenitore div avviene con la stringa <div> e si chiude con </div>) e ad ogni div viene assegnata una sezione della pagina. Un sito che ha una struttura basata solamente sull'utilizzo di div, quindi senza tabelle, viene chiamato box model. Esistono anche altri tipi di contenitori tra cui il pi importante lo snap, che solitamente viene usato per modificare delle semplici parti di testo. I block-level sono elementi che occupano tutto lo spazio disponibile nel div che li contiene, questo significa che una volta impostate le dimensioni del div i suoi contenuti verranno visualizzati interamente (a meno che le dimensioni che abbiamo impostato non siano pi piccole dei contenuti, per ovviare a questo di solito si creano anteprime o strumenti di navigazione per poter visualizzare tutti i contenuti del div). Es. Prova di un div Un sito diviso in varie sezioni che contengo al suo interno i div; le sezioni che solitamente sono presenti sono le seguenti: header, dove viene inserito il titolo del sito menu o navbar o navigation che chiaramente presenta dei collegamenti ai vari dati contenuti nel sito (ad esempio articoli, presentazioni, news ecc.) contenuto dove vengono visualizzati gli articoli footer che si trova sempre in fondo alla pagina e contiene i dati di copyright e informativi su chi possiede il sito o l'ha creato

Queste sezioni anche se al loro interno contengono dei div, sono esse stesse contenute in essi, per far chiarezza vi mostro un esempio di codice:
<div class=Footer> <div class=Footer-text> <p> Copyright ComIn! Solutions! 2009 <br> All Rights Reserved </p> </div> </div>

Nella prima riga viene aperta una sezione Footer; nella seconda si apre un div per indicare che li si inserisce una parte di semplice testo; nella terza e quarta riga tutto quello che sta tra <p> e </p> viene letto come normale testo , il comando <br> invece serve solo ad indicare al browser che in quel punto deve andare a capo; nella quinta e sesta riga vengono rispettivamente chiusi il div della seconda e quello della prima (notare che sia in html che in css i codici vanno chiusi a specchio). Riassumendo fino ad ora abbiamo visto che nei CSS i singoli codici stanno nei contenitori div, e che questi a loro volta sono contenuti nelle sezioni, comunque create attraverso dei div.

Se i CSS si limitassero solo a questo nei siti i vari elementi comparirebbero a caso creando solo confusione, invece vedremo ora come disporre tutto ci che viene inserito in modo funzionale, cos da creare il nostro personale layout. Innanzitutto c' da chiarire che esistono vari modelli di layout: a una colonna, a due colonne e a tre colonne, e per questi esistono vari tipi di categorie: fisso: si impostano delle dimensioni per il layout e in qualsiasi browser e pc si apra il sito, esso avr sempre le stesse dimensioni (solitamente si imposta a 800 x 600) fluido: le varie sezioni si adattano automaticamente alla pagina del browser elastico: il layout elastico oltre a ridimensionare le varie sezioni a seconda della risoluzione e del browser utilizzato riesce ad adattare anche le parti di semplice testo. Visto che nel nostro caso stiamo usando solo layout a due colonne studieremo gli esempi su questo, e di esempi di layout a una colonna e a tre verranno inseriti solo due esempi grafici (correlati di file html e CSS).L'inserimento dei codici nel modello a una e tre colonne non presenta comunque

grosse differenze. Layout a una colonna (fluido e fisso) Layout a tre colonne (fluido e fisso) Per cominciare bisogna dire che la colonna dei contenuti dev'essere la pi grande, e che per le colonne laterali ci sono tre opzioni di ridimensionamento: a larghezza percentuale (poco usato in quanto con alcuni browser pu creare degli errori di visualizzazione), a larghezza fissa (il pi usato, che permette di inserire un numero di pixel preciso per la larghezza delle colonne) e elastiche (che ridimensionano il contenuto in base al browser e alla risoluzione, ma che forniscono un controllo poco preciso e grossolano). Per gli elementi all'interno delle varie colonne invece ci sono due metodi di inserimento: il floating (che permette di spostare un elemento a destra o a sinistra del suo contenitore)e il posizionamento (relativo o assoluto, che permette di impostare la posizione dell'elemento secondo nostre precise indicazioni). Layout a due colonne (fluido e fisso) Graficamente la soluzione fluida e fissa hanno non si differenziano se non per un particolare: nel modello fisso la colonna dei contenuti e le colonne laterali devono avere la stessa lunghezza altrimenti il footer avrebbe una dimensione ridotta. Tuttavia il modello fisso (nonostante le tendenze maggiori a usare il modello fluido) presenta una stabilit e accessibilit migliore, e al momento dell'indicizzazione i motori di ricerca tendono a farlo salire maggiormente nel ranking. Per le nostre esigenze in ogni caso il modello fisso quello che ci interessa maggiormente, in quanto ci di cui abbiamo bisogno (e che non riusciamo ad ottenere attraverso Artisteer e Joomla) il poter spostare degli elementi gi esistenti in modo pi specifico o addirittura creare delle nuove posizioni per tali elementi in modo da ottenere il completo controllo sul lavoro che stiamo facendo e non avere problemi nel creare un sito secondo le richieste del cliente. Faremo ora una breve e basilare analisi delle vere e proprie stringhe di contenuto di un documento CSS (per due motivi: a) perch studiare ogni elemento del codice richiede molte ore di studio e prove, mentre qui si vuole dare solo una spiegazione a grandi linee di come funziona e cosa si pu ottenere dal linguaggio CSS; b) perch molte delle funzioni CSS sono modificabili all'interno di Joomla facilmente e in pochi secondi, e sarebbe superfluo (a parte per gli addetti a questo specifico campo) spiegarne il funzionamento attraverso l'inserimento di codice che comporta molta perdita di tempo). Questo il contenuto di un documento CSS per un layout fisso a due colonne (per non creare confusione il codice sar inserito in azzurro e le spiegazioni in nero):
html,body{margin: 0;padding:0} body{font-family: arial,sans-serif;font-size: 76%;text-align: center} div#container{position:relative; top: 20px; width: 760px;margin: 0 auto;textalign: left; border-left: 6px solid #36c;border-right: 6px solid #36c; background-color: #ff8}

Le quattro righe qui sopra danno indicazioni generali al browser su come interpretare il layout: nella prima riga viene scritto che l'intero contenuto occupa tutto lo spazio senza margini e rientranze. Nella seconda vengono invece inserite informazioni sul tipo di carattere che pu essere visualizzato (da notare che possono essere inseriti pi di un carattere e che l'utente potr scegliere fra quelli scritti qui), sulla sua dimensione e sull'allineamento del testo. Nella terza, quarta e quinta riga si trovano le informazioni riguardanti le dimensioni e il

posizionamento vero e proprio del corpo del documento, in particolare a noi interessano i comandi top: 20px (che indica la distanza in pixels che deve tenere dal margine superiore il documento), width: 760px (che ne indica la larghezza)e border-left: 6px e border-right: 6px (che indicano la presenza di barre laterali e ne danno informazioni sullo spessore). Modificando questi elementi possiamo impostare a nostro piacimento le dimensioni generali del documento e la sua posizione:tali elementi resteranno uguali in qualsiasi browser. Oltre a questi si possono inserire altri comandi come ad esempio height: 26px per indicare l'altezza massima che pu avere un documento.
div#header{background-color:#af8;color: #al6} h1,h2{margin: 0;padding:0} h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif} h2{color: #999;font-size: 1.5em} div#footer a{color: #fff;font-weight: bold;text-decoration: underline}

Le righe qui sopra invece danno informazioni sulle sezioni header e footer descrivendo i colori che devono avere (background-color per lo sfondo e color per il colore del testo) e i margini e le rientranze. I comandi h1 e h2 sono parti di codice html che servono ad indicare svariate misure di titoli nel documento; le particelle em (equivale a 16 px) che si trovano in queste righe sono unit di misura relative che adattano automaticamente la misura dei caratteri a quella impostata o alla risoluzione in uso (nel caso di layout fluidi). Nelle righe seguenti si trovano invece informazioni sulla sezione navigation (nel nostro caso la colonna dove inserito il menu) e su quella del content (dove noi inseriamo gli articoli).
div#navigation{background-color:#ff8; float:right;width: 13em} div#content{background-color:#fff; margin-right: 13em;padding: 1em} div#navigation ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none;} div#navigation li{margin: 0;padding: 0} div#navigation a{color:#fs4;font: normal bold 1.2em/1.6em arial,sans-serif;textdecoration: none} div#navigation a:hover{color: #fff;text-decoration: underline} div#navigation a#activelink{color: #033;text-decoration: none}

Modificando questi elementi possiamo ottenere tutti gli stili e le posizioni egli elementi possibili. Per completare questa guida ai CSS c' da esaminare ancora un aspetto, tra l'altro quello che pi ci interessa,ovvero l'inserimento di nuove posizioni in un sito. Per poter inserire una nuova posizione bisogna modificare sia la parte CSS che php (Hypertext Preprocessor, linguaggio Open Source utilizzato per la realizzazione di pagine web dinamiche ) di un layout e avremo bisogno di un software ftp (file transfer protocol) per i trasferimenti dei file da e verso il nostro sito. Come primo passo bisogna localizzare il template da modificare attraverso l'ftp, useremo ja_purity contenuto nella cartella template di joomlatest1. Ci posizioniamo quindi nella cartella www.cominsolutions.com/joomlatest1/templates/ja_purity, col tasto destro clicchiamo sul file templateDetails.xml e scegliamo scarica; col tasto destro clicchiamo sul file scegliamo apri con blocco note (o un altro editor) e navighiamo fino a che troviamo la stringa <positions>. Fra il comando <position> e </position> inseriamo questo codice: <position>prova</position>, salviamo il file e lo ricarichiamo nella sua stessa cartella d'origine, sovrascrivendolo a quello vecchio. Ora scarichiamo il file index.php presente nella stessa cartella lo apriamo con blocco note. Qui

dovremmo aggiungere la seguente stringa <jdoc:include type="modules" name="prova" style="xhtml" /> nel posto dove vogliamo che la nostra posizione vada ad aggiungersi, in questo caso la metteremo esattamente dopo la chiusura del div del footer. Salviamo il file e ripetiamo il processo di trasferimento e sovrascrizione. Entriamo quindi nel lato amministrativo di joomlatest1 e nella gestione moduli apriamo menu principale; nella pagina che si aprir, all'interno della sezione dettagli facciamo click su posizione e vediamo che fra quelle disponibile ora c' anche prova, la selezioniamo e facciamo clic su salva in alto a destra, dopodich clicchiamo sul tasto anteprima e vediamo che il menu dalla posizione precedente si spostato in fondo alla pagina proprio sotto al footer. Proviamo ora ad inserire una nuova posizione all'interno della colonna di sinistra. Quindi di nuovo seguiamo la procedura eseguita in precedenza per inserire <position>prova2</position> all'interno di templateDetails,xml e lo ricarichiamo. Nuovamente apriamo il file index.php e stavolta facciamo attenzione a navigare il documento fino a che troviamo <!-- BEGIN: LEFT COLUMN > e poco dopo <jdoc:include type="modules" name="left" style="xhtml" />: subito sotto inseriamo <jdoc:include type="modules" name="prova2" style="xhtml" />; salviamo e eseguiamo l'upload del file, di nuovo andiamo nel lato amministratore di joomlatest1 e come posizione per il modulo pathway scegliamo prova2 e salviamo. Apriamo ancora l'anteprima e vediamo com' cambiata la struttura del sito. Con la stessa procedura stata creata la posizione prova3, che si trova sopra la colonna di destra e dove inserito il modulo menu top. Per la creazione della posizione prova4 invece il discorso cambia in quanto bisogna modificare anche il file CSS, e vale la pena scriverla in maniera completa per evitare di fare confusione, anche se pu sembrare ripetitiva. Il primo passo consiste nello scaricare tramite ftp il file templateDetails.xml dalla cartella joomlatest1/templates/ja_purity e inserire fra <positions> e </positions> la riga <position>prova4</position> e ricaricare il file sovrascrivendo quello precedente. Si procede poi allo scaricamento del file index.php (dalla stessa cartella) e all'inserimento di questa stringa <?php if ($this->countModules('prova4')) : ?> <div id="prova4"> <jdoc:include type="modules" name="prova4" /> </div> <?php endif; ?> dopo la chiusura della posizione del footer; si salva il file e si esegue l'upload sempre sovrascrivendo il file gi esistente. L'azione da eseguire successivamente , sempre tramite ftp, di scaricare il file template.css dalla cartella joomlatest1/templates/ja_purity/css; apriamo anche questo file con un editor di testo e inseriamo questa stringa div#prova4{position:relative; width: 240px; border-left: 6px solid #36c;border-right: 6px solid #36c; top: 80px; margin: 60px; margin-left: 13em;padding: 1em; height: 260px; background-color: #FFFFCC}/* dopo la fine della parte dedicata al footer e prima della scritta MISCELLANOUS. Salviamo il file

e lo mandiamo alla sua cartella di origine sovrascrivendo quello vecchio. Ci portiamo ancora una volta nel alto amministrativo di joomlatest1 e nella sezione gestione moduli impostiamo il modulo di login nella posizione prova4. Apriamo l'anteprima di jomlatest1 e vediamo che fra il footer e la posizione prova1 c' ora la nostra prova4, personalizzata e esattamente dove vogliamo che sia; per modificarla basta riaprire il file template.css e settare nuovamente i parametri.