Obiettivo
Scrivere una pagina web attraverso un editor di testo che contenga la tipica architettura di un sito:
xhtml
- Definizione del Doctype
- dichiarazione html
- dichiarazione head
- il titolo
- i meta
- link css, javascript, etc.
- dichiarazione body
- Il contenitore: un div cornice che comprende tutti gli altri elementi del corpo della pagina
- La testata: un div che copra in larghezza tutta la pagina, altezza a piacere (non superare 300-400px)
- La barra dei contenuti: segue immediatamente la testa ed elenca in orizzontale tutte le sezioni principali del sito
- Il contenuto del sito. Esso può essere articolato in 2 o 3 colonne. Solitamente si permette la navigazione delle sezioni del sito anche attraverso un menu di navigazione che sarà posto in una delle colonne laterali
- Una colonna sola: il div id="centrale" prende il 100% della larghezza del div genitore (quello che abbiamo chiamato contenuto)
- Due colonne: abbiamo un div id="centrale" e, a piacere, a sinistra o destra, una colonna dedicata ai menu di navigazione ed altre informazioni che vogliamo l'utente abbia sempre sotto mano.
- Tre colonne: abbiamo un div id="centrale" e due colonne dedicate ai menu di navigazione ed altre informazioni.
- Il piede: qui metteremo informazioni addizionali sul sito come i credits, i contatti etc.
- Chiusura di tutti i tag
- Il contenuto
- Il contenitore centrale: costruiremo la struttura di un div class=notizie che potremo ripetere più volte, questo potrebbe avere all'interno un'immagine ed un paragrafo
- Il menu di navigazione: attraverso una lista non ordinata potremo dare lo scheletro del menu di navigazione
CSS
- Secondo l'indicazione della head <link href="home.css" rel="stylesheet" type="text/css" /> creiamo il file css esterno
Creiamo un background per il body di colore bianco (la dichiarazione per il body, così come per tutti gli altri elementi "nudi", vale a dire senza classi o id, è semplicemente il nome del tag, nel nostro caso body, seguito dalle graffe.
body {
background: #fff;
}
Potremmo mettere un bordo di 1px solido e colorato al div cornice, indicheremo, per rendere il bordo visibile, un margine. Dovremmo ancora indicare quanto spazio rispetto alla finestra del browser la cornice dovrà prendere (teniamo conto del fatto che un bordo ed un margine, essendo esterni al div cornice in sé prendono un certo spazio da calcolare per non far apparire al fondo della finestra del browser la barra di scorrimento in verticale
Esercizi più complessi
Vorrei aprire qui una parentesi sugli usi di sistemi di gestione dei contenuti, che potrebbero aiutarci nello studio da autodidatta. Questi sistemi solitamente constano di piattaforme scritte per la gran parte in php, un linguaggio di scripting che interagisce con il materiale archiviato in database nel nostro sito. Attraverso questo linguaggio ci è dunque possibile salvare scritti, immagini, o qualsiasi altro tipo di documento digitale in un ordinato database. Il sistema ci permetterà inoltre di impostare categorie, sezioni del sito, archiviazioni di pagine ordinate a nostro piacimento, sempre attraverso interfacce semplificate ad uso di utenti anche inesperti. I contenuti saranno dunque richiamati dal php e dati in output attraverso il codice html.
L'esempio di Wordpress
Uno degli esempi maggiormente popolari e semplice è il sistema di gestione contenuti inizialmente creato per gestire un blog, wordpress. Per brevità non ci soffermeremo qui sulle caratteristiche particolari del sistema, ma passeremo direttamente ad un'analisi della struttura del codice, per permetterne l'uso immediato.
Premessa
Prima di scaricare ed installare il nostro wordpress, se vogliamo lavorare sulla nostra macchina necessiteremo di una piattaforma su cui ci sia possibile lavorare con il php e un database. Prendiamo qui in considerazione la famiglia AMP, pacchetti di software Apache, MySQL, PHP che permettono di lavorare in locale per la creazione di siti dinamici. Sommariamente indico i pacchetti più popolari: WAMP per piattaforme windows, LAMP per piattaforme Linux (configurazione in italiano, in inglese su Ubuntu) e MAMP per Mac
L'installazione è molto semplice grazie anche alle copiose informazioni dedicate in rete, cui chiedo di far riferimento se aveste dei dubbi.
Una volta installato il nostro pacchetto AMP siamo pronti ad installare Wordpress (così come molti altri cms in php)
Installazione
- Scarichiamo da Wordpress.org l'ultima versione disponibile di Wordpress.
- Spacchettiamo il file compresso.
- Nella cartella var/www per Linux o .../wamp/www per Windows creiamo una cartella chiamata per esempio wp e vi copincolliamo il contenuto della cartella di wordpress che abbiamo appena scompattato
- Ora apriamo il nostro browser e indichiamo come indirizzo: localhost
- Ci dovrebbe apparire la pagina di introduzione di wamp, possiamo trovare verso il fondo il contenuto della cartella www, nel nostro caso vedremo la cartella wp, clicchiamo, dando sempre uno sguardo alla barra degli indirizzi.
- Non ci rimane ora che installare il vero e proprio wordpress, non ci dovrebbero essere intoppi seguendo le indicazioni date dall'interfaccia stessa.
- Se guardiamo il sito, in seguito all'installazione, noteremo una grafica molto scarna, ma che ci permetterà di avere una basa sulla quale lavorare
Alla scoperta del codice
- Torniamo ora alla cartella di wordpress che abbiamo copincollato in /var/www o wamp/www.
- All'interno di questa cartella troveremo tre cartelle principali ed altri file in uso da wordpress, noi entreremo nella cartella wp-content
- Ci troveremo di fronte a due cartelle: plugins e themes. A noi interessa la cartella themes, al cui interno troveremo due temi per il nostro wordpress. Apriamo la cartella del tema default, che è il tema di base del nostro wordpress. Siamo ora pronti per muovere i primi passi nella costruzione del design del nostro nuovo sito.
- Il tema "default" contiene molti file. Come avrete notato l'estensione di questi è principalmente in php, tranne un file immagine che riproduce come si vedrà il nostro sito ed un file css che contiene tutto il css usato da questo tema.
- Cerchiamo di capire come è strutturato il sito aprendo il file index.php, cioè il primo file recuperato all'apertura di una cartella. All'inizio del file troviamo scritto <?php get_header(); ?>. Cerchiamo di capire in soldoni cosa vuol dire questa riga. Essa indica innazitutto con il codice <?php che sta iniziando uno script php mentre ?> ne indica la chiusura: rimane da spiegare cosa significhi get_header();. Nel nostro caso essa indica il richiamo ad una funzione, lo capiamo dalle parentesi, chiamata get_header. Con un briciolo di perspicacia, se andiamo a cercare nella cartella aperta, del nostro tema di default di wordpress, capiremo che questo script di php va a richiamare un altro file cioè header.php. Non è mia intenzione qui addentrarmi nel php, tantomeno andare a cercare le funzioni ad esso collegate, ma questa maniera di scrivere le funzioni, tipica di wordpress ci aiuterà a capire quali altri file vengano richiamati nel corso del codice.
- Apriamo dunque il file header.php. Cosa notiamo? La dichiarazione dal doctype, quella tipica linea che come abbiamo visto sta alla testa di ogni nostro file html. Noteremo in seguito che benché ci sia codice php in tutti questi file, esso non verrà mai esplicitato nell'output del codice del nostro sito, esso servirà solo per richiamare altre pagine o contenuti. Andiamo avanti sul codice, vediamo che ingloba tutte quelle regole che abbiamo visto delineando le regole necessarie per la costituzione di un file .html dalla testa fino a... ed ecco che il codice si ferma ad un div posto poco dopo l'inizio del body. Che cosa succede? Perché il tag body non è chiuso? Come abbiamo detto, noi richiamavamo questo file dalla pagina index.php, torniamo là per capire come proseguirà il codice.
- Ritroveremo, dopo il richiamo al file header.php attraverso la funzione get_header(), il codice <div id="content" class="narrowcolumn">, conosciamo la sintassi, ci indica un div di contenuto che al suo interno contiene molto codice php che va a richiamare i contenuti del sito.
- In seguito, alla linea 37 (preceduta dalla chiusura del div chiamato contenuto, un'altra funzione, che andrà a chiamara la pagina sidebar.php, e poi ancora un'ulteriore funzione che raccoglierà il contenuto della pagina footer.php
- Guardiamo le pagine sidebar.php e footer.php. In sidebar.php troviamo molte liste <ul> che contengono, grazie ai richiami del php, dei menu con categorie, archivi di notizie, etc. Nel file footer.php, nelle ultime righe troviamo finalmente la fine del codice della nostra pagina con la chiusura dei tag body e html.
- Cosa abbiamo potuto notare? Che header apre la pagina del sito, footer la chiude. Lavorando attraverso i css sulle classi contenute nei file che abbiamo richiamato, potremo cambiare totalmente l'aspetto del nostro sito.
- Vi invito ora a provare a cambiare il codice css contenuto in style.css per visualizzare con il refresh della pagina le modifiche via via apportate. Proviamo prima a cambiare i colori di background, le immagini, i bordi, i margini. Dopo un po' di allenamento, non vi assicuro che conseguirete immediatamente gli esiti sperati, i css necessitano di esperienza e pazienza, ma sicuramente sarà una gran soddisfazione quando otterrete esattamente quel piccolo risultato grafico...
- Potrete lavorare anche aggiungendo elementi xhtml ai file contenuti nella cartella, ricordando la successione dei file richiamati (header è richiamato prima del contenuto di index, sidebar dopo il contenuto ed infine footer etc.). È anche importante avere sempre in mente la visione "architettonica" della pagina che risulterà ed in questo senso pensare alle proporzioni e posizioni degli elementi xhtml che immetteremo nel codice di wordpress.
Non mi rimane che augurarvi un buon divertimento, consigliandovi anche di scaricare qualche altro tema che potrete installare in wordpress, semplicemente copincollandolo nella cartella themes e scegliendolo dall'interfaccia di amministrazione di wordpress.
Altri temi per wordpress sono raggiungibili un po' ovunque nel web, consiglio come punto di partenza il sito stesso di wordpress