Web design, css design e programmazione web - Mario Carboni

Avere tutti i browser nello stesso computer è una gran cosa, si può testare tutto senza dover trasportare i files; se poi da Windows possiamo vedere e far girare anche Apache è il massimo! Sul MacBook Pro ho installato MAMP per testare in locale siti fatti in php e MySql e Parallels con Win Xp “potenziato” con alcune superversioni di IExplorer.

Settare dei virtual hosts sul Mac è abbastanza semplice, basta aprire il file hosts col terminale:

sudo pico /etc/hosts

digitiamo la password e modifichiamo il file così:

###
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
###
127.0.0.1 localhost secondolocalhost terzolocalhost
127.0.0.1 quartolocalhost quintolocalhost etclocalhost
255.255.255.255 broadcasthost

Contro+O e Invio per salvare.
Supponendo di aver già creato le rispettive cartelle nella directory “htdocs” di Apache, ora occorre solo modificare il file httpd.conf, lo apriamo con un editor di testo, si trova in: /MAMP/conf/Apache/

Andiamo quasi alla fine del file e per ogni virtualhost aggiungiamo le seguenti righe:
<VirtualHost *>
DocumentRoot "/Applications/MAMP/htdocs/secondolocalhost"
ServerName www.secondo.local
</VirtualHost>


Per vedere il sito, ora basta digitare nella barra degli indirizzi del browser semplicemente: www.secondolocalhost.local , anziché: http://localhost:8888/secondolocalhost/ (8888 è la porta di ascolto del demone http sul mio computer).

Impostare i virtual hosts su Windows

Innanzitutto dobbiamo connetterci da Windows ad Apache che sta su OSX, per fare questo digitiamo l’indirizzo IP del Mac sul browser, per sepere con quale IP il Mac entra in rete possiamo andare a vedere nelle impostazioni di rete, oppure possiamo digitare “netstat” nella finestra DOS.

Se per esempio l’IP con cui il Mac viaggia in rete è 192.168.1.50 (nel caso di una rete locale), digitando sulla barra degli indirizzi del browser: 192.168.1.50:8888 avremo in risposta la pagina di Apache sul Mac; aggiungendo lo slash ed il nome della cartella che vogliamo raggiungere, ci verrà restituito il sito locale desiderato. Però c’è un problema, tutti i links assoluti che per esempio caricano le immagini o i file CSS non funzionano; per risolvere impostiamo un virtual host anche su Windows.

Apriamo il file hosts,
facciamo click su start > esegui e digitiamo:
wordpad c:\\windows\\system32\\drivers\\etc\\hosts
impostiamo il virtual host così:
# Copyright (c) 1993-1999 Microsoft Corp.
#
# Questo è un esempio di file HOSTS usato da Microsoft TCP/IP per Windows.
#
# Questo file contiene la mappatura degli indirizzi IP ai nomi host.
# Ogni voce dovrebbe occupare una singola riga. L'indirizzo IP dovrebbe
# trovarsi nella prima colonna seguito dal nome host corrispondente.
# L'indirizzo e il nome host dovrebbero essere separati da almeno uno spazio
# o punto di tabulazione.
#
# È inoltre possibile inserire commenti (come questi) nelle singole righe
# o dopo il nome del computer caratterizzato da un simbolo '#'.
#
# Per esempio:
#
# 102.54.94.97 rhino.acme.com # server origine
# 38.25.63.10 x.acme.com # client host x
127.0.0.1 localhost
127.0.0.1 .psf
192.168.1.50 www.secondo.local

in questo modo sia da Windows sia dal Mac all’indirizzo www.secondo.local risponderà il nostro sito in locale, con tutti i links assoluti funzionanti.

Da tempo avevo intenzione di pubblicare un articolo sulla realizzazione completa di un template basato sugli standards xhtml/css; un articolo che partendo dal canvas bianco di photoshop arrivasse alla realizzazione passo passo di un template:

• da Photoshop al sito xhtml/css
• l’articolo è stato pubblicato anche su html.it

Un tutorial sulla realizzazione di un menu realizzato con una lista orizzontale in xhtml e CSS, associato ad un semplice script PHP per gestire lo stato corrente della navigazione.
Visualizza l’esempio del CSS menu

Lista non ordinata

Partiamo da una lista non ordinata e quindi da una struttura di questo tipo:

xhtml


<div id="menu">
<ul>
<li>
<a xhref=”menucss.php” accesskey=”1″><span>link1</span></a>

</li>
<li>
<a xhref=”menucss1.php” accesskey=”2″><span>link2</span></a>

</li>
<li>
<a xhref=”menucss2.php” accesskey=”3″><span>link3</span></a>

</li>
<li>
<a xhref=”menucss3.php” accesskey=”4″><span>link4</span></a>

</li>
<li>
<a xhref=”menucss4.php” accesskey=”5″><span>link5</span></a>

</li>
</ul>
</div>
Che produce questo:

• link1
• link2
• link3
• link4
• link5

Trasformiamo la lista verticale in una orizzontale applicando una prima formattazione CSS:

CSS


#menu ul{
list-style: none;
}

#menu ul li{
display: block;
float: left;
}
che produce:

• link1
• link2
• link3
• link4
• link5

Image-replacement

Vogliamo sostituire ogni link con un immagine diversa, quindi abbiamo bisogno di un identificatore univoco che ci permetta di gestire ogni singolo link. Creiamo quindi degli id con width e height uguali alle immagini create (in questo caso di larghezza 50px e altezza 21px) e li associamo ad ogni tag <li> della lista. Fatto questo, per rendere invisibile il testo adottiamo la ben nota tecnica di image-replacement, ovvero inseriamo un tag <span> all’interno del tag <a> in modo da poter applicare la regola:

#menu li a span{
display: none;
}
associamo , inoltre, un bordo rosso allo stato hover dei link e ad una classe che utilizzeremo per evidenziare la voce della lista corrispondente alla pagina corrente:

CSS


#menu ul{
list-style: none;
}

#menu ul li{
display: block;
float: left;
width: 50px;
height: 21px;
}

#menu li a{
display: block;
width: 50px;
height: 21px;
}

#menu li a:hover{
border-bottom: 1px solid #f00;
}

.corrente{
border-bottom: 1px solid #f00;
}

#menu li a span{
display: none;
}

#link1{
background: url(link1.gif) no-repeat;
}
#link2{
background: url(link2.gif) no-repeat;
}
#link3{
background: url(link3.gif) no-repeat;
}
#link4{
background: url(link4.gif) no-repeat;
}
#link5{
background: url(link5.gif) no-repeat;
}
Modifichiamo il codice xhtml per inserire gli identificatori:

xhtml


<div id=”menu”>
<ul>
<li id=”link1″>
<a xhref=”menucss.php” accesskey=”1″><span>link1</span></a>

</li>
<li id=”link2″>
<a xhref=”menucss1.php” accesskey=”2″><span>link2</span></a>
</li>
<li id=”link3″>
<a xhref=”menucss2.php” accesskey=”3″><span>link3</span></a>
</li>
<li id=”link4″>
<a xhref=”menucss3.php” accesskey=”4″><span>link4</span></a>
</li>
<li id=”link5″>
<a xhref=”menucss4.php” accesskey=”5″><span>link5</span></a>
</li>
</ul>
</div>


Mettiamo tutto insieme con lo script PHP

Vogliamo fare in modo che la voce di menu corrispondente alla pagina corrente venga evidenziata e non sia cliccabile. Possiamo, quindi, associare al link corrispondente una classe che ne modifichi l’aspetto e rimuovere il collegamento ipertestuale; questo però ci costringe a modificare ogni singola pagina. Posizioniamo allora, il menu in un file esterno e includiamo tale file in ogni pagina tramite la direttiva include(); di PHP, in questo modo:

<? include(”menu.php”); ?>

Passiamo ora alla realizzazione dello script in PHP che ci permette di modificare lo stato del menu in base all’URI della pagina corrente.

Memorizziamo con degli array, i nomi delle pagine, i nomi accesskey, il testo per i link e gli id. Avviamo un ciclo for e facciamo un controllo fra il nome dello script, che preleviamo dalla variabile $_SERVER(PHP_SELF), e l’array dove sono contenuti i nomi delle pagine:

PHP


<div id="menu">
<?
$links = array("menucss.php", "menucss1.php", "menucss2.php", "menucss3.php", "menucss4.php");
$access = array("a", "b", "c", "d".'e');
$testolink = array("link1", "link2", "link3", "link4", "link5");

echo “<ul>”;

for($i=0; $i<=count($links)-1; $i++) {
if($links[$i] == basename($_SERVER[’PHP_SELF’])) {
echo “<li id=\”$testolink[$i]\” class=\”corrente\”> <span>$testolink[$i]</span> </li>”;
}
else {
echo “<li id=\”$testolink[$i]\” >
<a xhref=\”$links[$i]\” accesskey=\”$access[$i]\” > <span>$testolink[$i] </span> </a></li>”;
}
}
?>
</div>

Visualizza l’esempio del CSS menu