Come rendere dinamiche alcune sezioni di un sito web per ottimizzarne la manutenzione?
L’argomento che affronterò oggi potrebbe sembrarti banale e scontato ma a volte sono proprio le cose che consideriamo più ovvie a causarci enormi perdite di tempo: sono ancora in tanti, soprattutto chi è ancora alle prime armi, a commettere questo genere di mancanze.
Quando sei alle prese con lo sviluppo un sito web devi sempre prendere in considerazione il fatto che su quel sito tu, o chi per te, debba eseguirne una manutenzione periodica, anche banale, come potrebbe essere per esempio la modifica del nome di una voce del menù di navigazione (modifica che poi andrebbe apportata in tutte le pagine del sito in cui questa viene richiamata).
Hai mai pensato quanto tempo richiederebbe apportare una semplice modifica sul sito che stai sviluppando?
Se il sito non è sviluppato tenendo conto di questi accorgimenti anche una modifica apparentemente banale, come quella accennata in precedenza, potrebbe richiedere un’inutile perdita tempo, che ovviamente sarà proporzionata alle dimensioni del sito.
Pensa a un sito abbastanza grande composto da un centinaio di pagine che magari hai sviluppato qualche mese addietro. Il cliente adesso ti chiama per chiederti di modificare il semplice nome di una voce di menù la quale è richiamata in tutte le pagine del sito. Hai idea di quanto tempo potresti perdere ad apportare questa semplice variazione?
I problemi vanno eliminati sempre alla radice e per questo motivo è fondamentale prendere le giuste precauzioni già in fase di sviluppo del sito progettandolo con criterio e cognizione di quella che potrebbe essere in seguito una possibile attività di manutenzione.
A questo proposito ci vengono in aiuto i linguaggi di programmazione lato server, come il php per esempio, che permette di conferire dinamicità alle nostre pagine web.
Come ottimizzare il markup per rendere più semplice la manutenzione di un sito web?
Vediamo nel concreto come possiamo ottimizzare il markup di un sito web in fase di sviluppo e prendiamo come esempio il markup sviluppato per il sito internet dell’asilo nido che abbiamo realizzato nel corso della nostra guida “Come realizzare un sito internet dalla A alla Z”.
Il Markup riguardante il menù di navigazione dell’asilo nido preso in considerazione è il seguente:
<!-- START NAV -->
<ul id="nav">
<li id="home"><a href="#" title="Home page">home</a></li>
<li id="gestione"><a href="#" title="la gestione">la gestione</a></li>
<li id="struttura"><a href="#" title="la struttura">la struttura</a></li>
<li id="eventi"><a href="#" title="eventi">eventi</a></li>
<li id="contatti"><a href="#" title="contatti">contatti</a></li>
</ul>
<!-- END NAV -->
Questo markup andrebbe dunque ricopiato in tutte le altre pagine del sito nel punto in cui è richiamato il menù di navigazione.
Adesso, piuttosto che scrivere fisicamente questo markup su ciascuna pagina, realizziamo un file php che denominiamo “function.php” e sarà questo file a contenere il markup necessario a visualizzare il nostro menù di navigazione. Come?
Nel file “function.php” andiamo a creare una funzione in grado di produrre il markup interessato ogni qual volta questa sarà richiamata all’interno di una pagina.
Il codice della funzione che chiameremo “nav()” risulterà il seguente:
<?php
function nav() {
?>
<ul id="nav">
<li id="home"><a href="#" title="Home page">home</a></li>
<li id="gestione"><a href="#" title="la gestione">la gestione</a></li>
<li id="struttura"><a href="#" title="la struttura">la struttura</a></li>
<li id="eventi"><a href="#" title="eventi">eventi</a></li>
<li id="contatti"><a href="#" title="contatti">contatti</a></li>
</ul>
<?php
}
?>
Non ho fatto altro che ricopiare il markup del menù di navigazione all’interno della funzione “nav()”.
Adesso basterà includere il file “function.php” all’inizio di ogni pagina del nostro sito web (per avere a disposizione su tutte le pagine la funzione “nav()”) e sostituire al markup originale che richiama il menù di navigazione proprio la funzione “nav()”.
Vediamo nel dettaglio come procedere. Con le righe di codice (evidenziate in grigio) sotto includiamo il file “function.php” all’interno delle nostre pagine:
<?php
include_once("function.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Tramite la funzione php “include_once” stiamo inserendo tutto ciò che è contenuto nel file specificato (nel nostro caso “function.php”) all’interno della nostra pagina html.
Ovviamente le pagine del sito che conterranno questa funzione andranno rinominate con estensione .php piuttosto che .htm (il file “index.htm” diventerà “index.php”, ecc) in modo da permettere all’interprete php di riconoscere ed eseguire il codice php.
Fatto questo, possiamo eliminare, all’interno della nostra pagina, il markup che serviva a visualizzare il menù di navigazione e sostituirlo con la nostra funzione “nav()”creata in precedenza (che non fa altro che richiamare il markup interessato in modo dinamico), in questo semplice modo:
<!-- START NAV --> <?php nav() ?> <!-- END NAV -->
Quando l’interprete php processerà la nostra pagina, nel punto in cui è richiamata la funzione “nav()” verrà inserito in modo dinamico il markup html che abbiamo aggiunto all’interno della funzione.
In cosa consiste il vantaggio?
Con un sito sviluppato in questo modo, se il cliente ci dovesse chiedere di modificare una voce di menù del sito, esempio: “eventi” in “news”, basterà semplicemente aprire il file “function.php” e apportare una banale modifica alla funzione “nav()” cambiando la voce “eventi” con “news”.
Cinque secondi del nostro prezioso tempo contro alcuni minuti se avessimo progettato il sito in malo modo.
E se oltre al nome visualizzato avessimo dovuto cambiare anche il collegamento ipertestuale che puntava alla nuova pagina?
Sette secondi del nostro prezioso tempo contro diversi minuti se avessimo progettato il sito in malo modo.
E se il nostro sito fosse stato composto da un centinaio di pagine piuttosto che cinque pagine?
Sette secondi del nostro prezioso tempo contro diverse ore se avessimo progettato il sito in malo modo.
Conclusioni
E potrei andare avanti all’infinito, i casi delle modifiche banali da apportare potrebbero essere tantissimi, come per esempio aggiungere una ulteriore voce di menù (sempre che il layout grafico lo permetta), cambiare il collegamento ipertestuale a una pagina che è stata rinominata in funzione dell’ottimizzazione del sito per migliorarne l’indicizzazione sui motori, ecc.
Ti renderai conto da solo che sono parecchie le sezioni di un sito che possono essere rese dinamiche, come il footer, l’intestazione, il menù di navigazione e tutto ciò che generalmente è riprodotto con lo stesso markup in più pagine.
Prima di chiudere una piccola curiosità su cui confrontarci: quali sezioni di un sito rendi generalmente dinamiche e con che risultati? E quale linguaggio di programmazione utilizzi?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
30 commenti
Trackback e pingback
-
Come realizzare un modulo contatti in PHP | Your Inspiration Web
[...] ha spiegato molto bene Nando nel suo articolo rendere dinamiche alcune sezioni del proprio sito porta solo vantaggi. Ad…
Io di solito uso un file separato “menu.php”
per poi fare un include(‘menu.php’);
Ciao memic e benvenuto anche a te su YIW!
Beh, è lo stesso metodo che ho descritto nell’articolo, solo che invece di “function.php” lo chiami “menu.php” ;)
Ma richiami dinamicamente solo il menù di navigazione o anche altro?
di solito anche io uso l’include per i vari header, footer, menu ecc…
poi in un file function.php tengo una libreria di funzioni per usi particolari (es chiamate al database ecc)
Ciao Marco, benvenuto anche a te su YIW!
Io generalmente metto tutto all’interno di un unico file php (appunto function.php) che per siti di medie dimensioni (20/30 pagine) non arriva mai a superare i 10kb di dimensione.
Quindi funzione di connessione al database, funzioni di validazione dei moduli, sezioni dinamiche come header, footer, menù di navigazione, codici di monitoraggio (google analytics), ecc..
Ciao e grazie per il benvenuto, in effeti ho scoperto questo blog solo pocchi giorni fa. (compliementi per il contenuto, di blog cosi in italiano c’è ne ben pochi)
Veramente gestisco tutto in modo simile ai template per wordpres.. quindi file separati per header, footer, contenuto, sidebar ecc
Inizialmete usavo un file functions.php però diventava abbastanza lungo e pesante e cmq ho preferito separare il template da resto delle funzioni.
Grazie per i complimenti memic, fa sempre piacere sapere che il lavoro che svolgiamo viene apprezzato.
Per siti di piccole dimensioni mi sentirei di consigliare l’utilizzo di un unico file da includere, magari separando con dei vistosi commenti – all’interno del file php – la parte riguardante il template dal resto delle funzioni, ma più per praticità che per altro, hai un solo file da modificare.
Per siti più grandi il tuo metodo di sviluppo direi che è impeccabile, infatti secondo me il codice di sviluppo di wordpress sfiora la perfezione.
Sempre molto interessante da sapere, grazie Nando =)
Ciao Claudia, rientrata dalla lunga pausa natalizia?
Felice di esserti stato utile in qualche modo e a presto =)
wow, bellissimo articolo, complimenti :D l’unico dubbio che mi è venuto è se è lo stesso usare include o include_once, c’è un vantaggio nell’usare l’uno o l’altro?
In effetti sono pratiche di ottimizzazione che non vengono spesso considerate dai programmatori.
In effetti con una banale funzioncina php ci conserviamo determinate porzioni di codice delle nostre pagine, un approccio semplice e molto efficace secondo me.
Bell’ articolo Nando!
Ciao Marbio e grazie! Spesso sono le cose più semplici a risultare le più efficaci… e non solo nella programmazione ma anche nella vita di tutti i giorni.
@ nando: grazie mille del benvenuto, è da un po’ che vi seguo con interesse, se continuate così questa diventerà una communty di riferimento molto importante per l’Italia
@memic: faccio il tuo stosso ragionamento, tenendo file separati secondo me si mantiene un’ordine maggiore nel codice anche in prospettiva futura quando sarà magari qualcun’altro a prendere in mano quello da noi scritto..
@luca: la funzione include_once fa esattamente la stessa cosa dell’include con la differenza che se quello che vai ad inserire è già stato incluso non lo include nuovamente
Grazie a te per i complimenti, Marco. E’ l’obiettivo che ci siamo prefissati e fa piacere sentire – direttamente da chi ci segue – che stiamo proseguendo sulla giusta strada.
ah ok, quindi prima di includere qualcosa verifica se già è stato incluso. grazie per la delucidazione
io ultimamente tendo a fare il contrario.
Ho un unico file php che fa da “template”. Questo, a seconda della richiesta, richiama un diverso file con il contenuto principale.
Quindi uso le funzioni title() main() affinché ogni pagina abbia un title ed un testo differente partendo dallo stesso template.
Ovviamente poi uso mod rewrite per avere degli url amichevoli :)
Ciao scienzedellevanghe, posso chiederti perchè preferisci fare al “contrario”? Hai un effettivo vantaggio?
Così non hai una perdita maggiore nel creare le varie condizioni per la scelta delle pagine da richiamare?
Forse la mia preferenza è più mentale che altro, mi sembra più ordinato. Sembra quasi di usare un piccolo “database” :)
Penso che il vantaggio pratico sia che in questo modo è ancora più improbabile il dover effettuare la stessa modifica su più di un file.
Le condizioni per richiamare la pagina corretta sono appena 5 righe di php che restano sempre quelle. Nel file .htaccess invece ne sono necessarie 2.
Per ora non mi ha mai dato problemi e l’ho trovato molto comodo… è anche probabile che non mi sia mai trovato davanti ad un possibile limite di questo metodo.
Io utilizzavo un metodo più o meno simile molti anni addietro, quando sviluppavo le prime applicazioni in php che volevo rendere multilingua in modo semplice e rapido. Un unico template per la pagina che caricava dinamicamente il contenuto sulla base della lingua selezionata/configurata. Però per siti un po’ più grandi – di 30 pagine per esempio – dovevo utilizzare 30 condizioni differenti.
Per siti di piccole dimensioni in effetti le due tecniche sono quasi identiche, anche se io, per questo genere di siti, preferisco utilizzare un unico file da includere che contiene le varie funzioni, in ogni caso quindi sempre un file unico da modificare.
Grazie scienzedellevanghe per aver condiviso e confrontato le tue esperienze. A presto ;)
Per mia fortuna ho scoperto l’uso di php per rendere dinamica la modifica delle pagina quando ero ancora agli inizi, e mi si è rivelata sempre utilissimi per gli stessi motivi che hai elencato tu!
A differenza del metodo che usi tu, però, io creo una pagina .php e la chiamo con un nome che richiami il contenuto che devo rendere dinamico, e poi uso semplicemente la funzione include di php nel punto in cui voglio che venga inserito il contenuto senza creare altre funzioni e richiamare la funzione del richiamo all’inizio della pagina.
Usando il tuo metodo, però, potrei mettere tutti gli elementi da richiamare e altre funzioni in un’unica pagina; questo metodo probabilmente mi farebbe risparmiare in termini di byte e anche di comodità, quindi penso che cercherò di spostarmi gradualmente verso questa tecnica!
mm mh diciamo che nn sono proprio d’accordo con questo metodo anche se lo ritengo molto valido. Perche se abbiamo per caso nel menu l’effetto pulsante premuto nella pagna che stiamo visitanto, il metodo da voi egregiamente descritto non ci puovenire in aiuto… non so se mi sono spiegato ecco un esempio:
<a href="#" rel="nofollow">Home Page </a>
<a href="semi.html" rel="nofollow">Semi</a>
<a href="#" rel="nofollow">Risorse</a>
<a href="#" rel="nofollow">Tecniche</a>
<a href="#" rel="nofollow">Fertilizzanti</a>
<a href="#" rel="nofollow">Glossario</a>
questo codice serve per poter far rimanere evidenziato la voce del menu della pagina aperta… ecco con il php come i potrebbe risolvere?
grazie a YiW
wp ti avrà segato il codice che volevi postare…
Prima di ripsondere alla tua domanda una piccola annotazione: non ti conviene segnare i collegamenti del menù di navigazione di un sito con l’attributo “rel” impostato su “nofollow” perchè in questo modo i motori non seguiranno i link indicati, pratica assolutamente da evitare per una buona indicizzazione del sito.
Adesso veniamo al tuo dubbio: intanto toglimi una curiosità, in che modo il codice che hai riportato dovrebbe evidenziare la pagina corrente? I collegamenti ipertestuali sono tutti identici tra di loro.
Generalmente per assegnare uno stile diverso alla pagina corrente viene utilizzata una classe, ti riporto un esempio prendendo spunto dal codice che hai utilizzato:
<a class="current_page" href="#">Home Page </a>
<a href="semi.html">Semi</a>
<a href="#">Risorse</a>
<a href="#">Tecniche</a>
<a href="#">Fertilizzanti</a>
<a href="#">Glossario</a>
In questo modo nel nostro foglio di stile si può creare una regola ad hoc “a.current_page {…} a cui assegnare lo stile desiderato.
Come indicare di volta in volta alla nostra funzione php la pagina su cui ci stroviamo in modo da aggiungerle la classe “current_page” in modo dinamico?
In ogni pagina del tuo sito crei una variabile alla quale assegni il riferimento della pagina in cui ti trovi, per esempio nella pagina index.php:
<?php
$page = "home";
?>
Poi basta passare questa variabile come argomento della nostra funzione nel momento in cui la richiamiamo:
<?php
nav($page)
?>
In questo modo, utilizzando la variabile $page come parametro della nostra funzione, questa saprà sempre qual è la pagina corrente in cui ci troviamo.
La funzione che richiama il menù di navigazione dovrebbe essere leggermente modificata, su ogni voce del menù va aggiunta una condizione che controlla se ci troviamo all’interno della pagina indicata e in caso affermativo viene aggiunto al collegamento ipertestuale la classe “current_page” in modo dinamico.
<?php
function nav($page) {
?>
<a href="#" <?php if ($page == "home") { echo " class=\"current_page\"";}?>>Home Page</a>
<a href="semi.html" <?php if ($page == "semi") { echo " class=\"current_page\"";}?>>Semi</a>
<a href="#" <?php if ($page == "risorse") { echo " class=\"current_page\"";}?>>Risorse</a>
<a href="#" <?php if ($page == "tecniche") { echo " class=\"current_page\"";}?>>Tecniche</a>
<a href="#" <?php if ($page == "fertilizzanti") { echo " class=\"current_page\"";}?>>Fertilizzanti</a>
<a href="#" <?php if ($page == "glossario") { echo " class=\"current_page\"";}?>>Glossario</a>
?>
<?php
}
?>
Spero di essere stato abbastanza chiaro, scrivere il codice all’interno di un commento è un’impresa per nulla facile.
ciao graficando, ho da poco scritto un articolo che parla proprio di come evidenziare nel menù il link alla pagina in cui ci si trova: http://www.paitadesign.com/blog/php-e-css-come-evidenziare-la-pagina-corrente-nel-menu-di-navigazione/
In realtà non mi intendo molto di PHP, ma quesl metodo mi sembra fnzionare, e mi sembra più snello di quello postato più sotto.
Complimenti per il blog! Veramnete, in Italia di siti così ben fatti non ce n’è! Continuate così!
Ciao Giacomo, benvenuto su YIW!
Grazie per aver indicato un’altra valida alternativa al metodo che avevo suggerito. A presto.
P.s. Grazie anche per i complimenti!
si infatti se qualcuno dal back end puo rettificare grazie tanto
ciao nando e grazie per la tua risposta puntuale e precisa..! davvero persone professioniste amministrano questo blog.. tornando a noi, non so da dove è uscito fuori quel codice ma io non ho usato nessun codice nofollow (so il significato del no follow visto che seguo anche da vicino la seo di un sito di e-commerce e un portale). Ho usato un menu formato da e ma comunque il significato è quello che hai descritto benissimo tu. Grazie per aver chiarito un mio piccolo problema spero che sia stato di aiuto a tante persone e di aver arricchito l’articolo in modo costruttivo..
Ciao graficando, spesso le informazioni più importanti si trovano nei commenti degli articoli, il confronto e la condivisione arricchiscono ciascuno di noi, autori compresi.
Felice di esserti stato d’aiuto e a presto.
Figurati è sempre un piacere leggere questo blog…
Ciao Nando complimenti innanzi tutto per il tuo blog.
è da tempo che lotto per utilizzare queste funzioni per le pagine dinamiche ma ogni tentativo da me fatto non va a buon fine e non riesco a capire il perche