mercoledì 27 giugno 2012

Pagina indietro con JavaScript

Vediamo come realizzare un semplice pulsante « indietro con JavaScript

Spesso può capitare di volere inserire in una nostra pagina il pulsante « indietro. Può essere utile ad esempio in una schermata dove controlliamo i dati inseriti in un form, e qualora i dati siano errati, con il pulsante «  indietro si può rimandare il nostro utente alla pagina di provenienza, per controllare eventuali errori o dati mancanti.

Vediamo il codice

<a href="" onClick="javascript:history.back();return false">« indietro</a>

Spieghiamo

Per controllare lo storico della navigazione dell'utente, utilizziamo history.back() di JavaScript.
Possiamo ottenere lo stesso risultato anche utilizzando history.go(-1)

Vediamo come

<a href="" onClick="javascript:history.go(-1);return false">« indietro</a>

Spieghiamo

Utilizzando history.go(-1) l'utente verrà rimandato indietro di una pagina, rispetto allo storico della sua navigazione.
Volendo posso impostare un numero diverso di "passi indietro".

Vediamo come

<a href="" onClick="javascript:history.go(-3);return false">« indietro</a>

Spieghiamo


In questo caso, cliccando « indietro l'utente farà 3 passi indietro sullo storico della sua navigazione.

Nota bene

Se inseriamo il link « indietro su una pagina B che normalmente l'utente raggiunge da un'altra pagina A del nostro sito, ma per un caso fortuito la pagina B può essere raggiunta anche da un sito esterno C, chiaramente il pulsante « indietro invierà l'utente, al sito esterno C dal quale proviene.

martedì 26 giugno 2012

Trovare e gestire URL con PHP

Vediamo come trovare e gestire l'URL della pagina con PHP

La gestione dell'URL con PHP è molto semplice e sicura, essendo realizzata lato server.
PHP offre diverse soluzioni per individuare l'URL intero o una parte di esso.

Vediamo un esempio

Il tuo URL attuale è:
http://free-html-scripts.blogspot.it/2012/06/trovare-e-gestire-url-con-php.html

Vediamo il codice

<!DOCTYPE HTML>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>URL CON PHP</title>
 </head>

<body>

 <?php 
  $url_attuale = 'http://'.$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
  echo '<p>Il tuo URL attuale è: <span style="color:red">';
  echo $url_attuale;
  echo'</span></p>'; 
 ?>

</body>
</html>

Spieghiamo

Ho impostato una variabile $url_attuale (vedi riga 11 dell'esempio riportato sopra) e grazie a $_SERVER["HTTP_HOST"] trovo il nome del dominio, poi concateno con il punto $_SERVER["REQUEST_URI"] che mi fornisce la parte di URL restante.

Il risultato è l'URL completo.
Da adesso in poi potremo utilizzare la variabile $url_attuale tutte le volte che vorremo all'interno della pagina PHP.

Nota bene

L'estensione della pagina deve essere necessariamente .php esempio: example.php.

Trovare URL pagina con JavaScript

Vediamo come conoscere e utilizzare l'URL della nostra pagina attuale con JavaScript.

Trovare l'url della pagina con JavaScript è molto semplice, basta utilizzare self.location.href.

Vediamo come

<!DOCTYPE HTML>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>URL con JavaScript</title>
	
		<script>
		function mio_url(){
			document.getElementById('scriviqui').innerHTML="Il tuo URL è: <span style='color:red'>" + self.location.href + "</span>";
		}
		</script>
	
	</head>
	<body>
	
		<a href="#" onClick="mio_url()">Stampa a video il mio URL</a>
		
		<p id="scriviqui"></p>
	
	</body>
</html>

Spieghiamo

In questo semplice esempio, creo la funzione mio_url(), con la quale individuo l'elemento che nella pagina ha id=scriviqui e ci stampo dentro l'url della mia pagina, trovato con self.location.href. Da notare che per stampare l'URL ho utilizzato innerHTML (vedi riga 9 dell'esempio riportato sopra).

Volendo posso utilizzare l'URL così recuperato, per stampare un alert, un piccolo messaggio a video con il risultato.

Vediamo come

<!DOCTYPE HTML>
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>URL con JavaScript</title>
	
		<script>
		function mio_url(){
			alert("Il tuo URL è:\n" + self.location.href);
		}
		</script>
	
	</head>
	<body>
	
		<a href="#" onClick="mio_url()">Visualizza alert con il mio URL</a>
	
	</body>
</html>

Spieghiamo

In questo caso stamperemo l'URL della nostra pagina attuale in un messaggio alert (vedi riga 9 dell'esempio riportato sopra).

domenica 24 giugno 2012

Overlay Banner con chiusura a tempo

Vediamo come realizzare un overlay, ovvero un livello sopra i contenuti, con chiusura a tempo.

Esempio


Con un Overlay possiamo facilmente e con poche righe di codice, visualizzare un div contenente testo e foto, o solitamente un banner pubblicitario, che scompare dopo un tempo prestabilito.

Vediamo il codice Java Script

<script type="text/javascript">
function timeout(){
 setTimeout(function(){
  document.getElementById('banner').style.display="none"
 }, 5000);
}
</script>

Un po' di CSS

<style type="text/css">
body {
 margin:0 auto;
}
#content {
 position: absolute;
 height: 70%;
 width: 70%;
 left:15%;
 top:15%;
 text-align:center;
 background: #EAEAEA;
}
#banner {
 position: absolute;
 z-index: 1;
 height: 100%;
 width: 100%;
 background-color: rgba(0, 0, 0, 0.8);
 left:0;
 top:0;
}
#banner img{
 position: absolute;
 left: -234px;
 margin: 50% 0 0 50%;
 top: -30px;
}
</style>

E in fine i contenuti

<body onLoad="timeout()">

<div id="content"><p>Contenuto</p></div>

 <div id="banner">
        <img name="banner" src="" width="468" height="60" alt="Il banner si chiuderà in 5 sec..." style="background-color: #FFCC00">
    </div>
Niente paura a fine guida ho riportato il codice completo dell'esempio.

Spieghiamo

Sfruttiamo SetTimeout del JavaScript, indicando il nome del <div> che contiene il nostro banner, (vedi riga 4 del codice JavaScript).
Il valore che ho preimpostato, 5000, (vedi riga 5 del codice JavaScript) corrisponde a 5 secondi e può essere modificato a piacimento.
A seguire, c'è un po' di CSS che serve a impostare una velina semitrasparente sopra i contenuti, così da far capire all'utente che "sotto c'è qualcosa".
Molto probabilmente il codice CSS andrà ottimizzato in base al sito esistente.

E in fine, un paio di <div>, uno per i contenuti della pagina (vedi riga 3 del codice HTML), l'altro per contenere il banner o quello che vogliamo (vedi riga 5 del codice HTML).

Nota bene

È importante non sottovalutare la riga 1 del codice HTML, dove ho richiamato la funzione JavaScript timeout().
Quella riga richiama e avvia la funzione JavaScript, ed è fondamentale per il funzionamento dell' Overlay.

Tutto il codice dell'Overlay

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OVERLAY</title>

<script type="text/javascript">
function timeout(){
 setTimeout(function(){
  document.getElementById('banner').style.display="none"
 }, 5000);
}
</script>

<style type="text/css">
body {
 margin:0 auto;
}
#content {
 position: absolute;
 height: 70%;
 width: 70%;
 left:15%;
 top:15%;
 text-align:center;
 background: #EAEAEA;
}
#banner {
 position: absolute;
 z-index: 1;
 height: 100%;
 width: 100%;
 background-color: rgba(0, 0, 0, 0.8);
 left:0;
 top:0;
}
#banner img{
 position: absolute;
 left: -234px;
 margin: 50% 0 0 50%;
 top: -30px;
}
</style>
</head>

<body onLoad="timeout()">

<div id="content"><p>Contenuto</p></div>

 <div id="banner">
        <img name="banner" src="" width="468" height="60" alt="Il banner si chiuderà in 5 sec..." style="background-color: #FFCC00">
    </div>


</body>
</html>

venerdì 22 giugno 2012

Aprire link in una finestra personalizzata


Vediamo come fare per aprire il nostro link in un pop up con caratteristiche personalizzate.

Premetto che personalmente non amo molto le finestre personalizzate, perché ho l'impressione di forzare la volontà dell'utente, nell'aprire una finestra "come dico io".

Ma effettivamente, in alcuni casi, può risultare interessante offrire all'utente un pop up che, per la tipologia di informazione fornita, può risultare comodo se visualizzato estemporaneamente alla pagina. Vediamo perciò come fare per aprire con un link, una piccola finestra di dimensioni personalizzate.

Per aprire la nostra finestra personalizzata chiediamo aiuto a JavaScript che grazie a window.open e a pochi parametri, ci permette di personalizzare ogni aspetto della nuova finestra.

Esempio

Il codice di base è semplice

<a href="#" onClick"javascript:window.open('http://www.example.com', '', 'width=600,height=400,menubar,toolbar,resizable');">Example.com</a>

Struttura

window.open(url,nome,specifiche,replace)

Spieghiamo

  • Con window.open chiediamo al JavaScript di aprire una nuova finestra;
  • Con url, specifichiamo l'url della pagina da raggiungere;
  • Sarebbe possibile aprire una nuova finestra vuota, semplicemente omettendo l'url;
  • Con nome possiamo specificare l'attributo di destinazione o il nome della finestra.
    I valori possibili sono: 
    • _blank (l'url viene aperto in una nuova finestra, impostazione predefinita);
    • _parent  (l'url viene aperto nel frame principale);
    • _self  (l'url sostituisce  la pagina corrente);
    • _top  (l'url sostituisce ogni set di frame presente);
    • nome (si può impostare il nome della finestra);
  • Con specifiche possiamo impostare una serie di valori separati da virgola.
    I valori possibili sono:
    • channelmode=yes/no  oppure 1/0  predefinito no
    • directories=yes/no  oppure 1/0   predefinito yes
    • fullscreen= yes/no  oppure 1/0  predefinito no
    • height=valore in pixels  predefinito minimo 100
    • left=valore in pixels  predefinito 0
    • location= yes/no  oppure 1/0  predefinito yes
    • menubar= yes/no  oppure 1/0  predefinito yes
    • resizable=yes/no  oppure 1/0  predefinito yes
    • scrollbars= yes/no  oppure 1/0  predefinito yes
    • status= yes/no  oppure 1/0  predefinito yes
    • titlebar= yes/no  oppure 1/0  predefinito yes
    • toolbar= yes/no  oppure 1/0  predefinito yes
    • top=valore in pixels  predefinito 0
    • width=valore in pixels  predefinito minimo 100
  • Con replace si gestisce l'elemento nella cronologia.
    I valori possibili sono:
    • true  (l'url si inserisce in cronologia);
    • false (l'url crea una nuova storia cronologica);

Spieghiamo

In questo esempio linchiamo la pagina http://www.example.com, lasciando vuoto il secondo parametro obbligatorio che quindi di default sarà _blank, poi impostiamo la larghezza della pagina a 600px, l'altezza a 400px, impostiamo il menù della pagina, che senza un valore settato risulta yes di default, lo stesso per la toolbar e per resizabile che hanno sempre yes di default.

Volendo si può scorporare la funzione, se ad esempio si deve utilizzare più volte nella pagina lo stesso link, questa soluzione può essere sicuramente più versatile.

Vediamo un esempio con JavaScript in head


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Nuova Finestra Example.com</title>
<script type="text/javascript">
 function nuova_finestra()
 {
  window.open('http://www.example.com', '', 'left=100,top=100,width=600,height=400,menubar,toolbar,resizable')
 }
</script>
</head>

 <body>
  <a href="#" onclick="nuova_finestra()">Example.com</a>
  <input type="button" value="Button Nuova Finestra" onclick="nuova_finestra()" />
   
 </body>
 
</html>

Spieghiamo

Ho scorportato la funzione JavaScript e l'ho posta in <head> tra i tag <script>.
Tutte le volte che dalla pagina vorrò richiamare la funzione nuova_finestra(), righe nell'esempio da 6 a 11, basterà inserire nel link o nell'onclick nuova_finestra() come riportato nell'esempio alle righe 15 e 16, rispettivamente un link e un button.
Sia il link che il button producono lo stesso risultato.

mercoledì 20 giugno 2012

Tabella che scrolla con intestazione fissa

Vediamo come realizzare una tabella che scrolla in verticale, con la testatina che rimane fissa

Esempio

test co1 1 col 2 col 3 col4
aaa 124 23555 346 4575
bbb 51 984 98456 984
ccc 651 651 65 5
ddd 51 23434 5456 1651
eee 18 835 51 651
fff 1 6513535 833 289
ggg 19 8135 854 81
hhh 51 651 33456 21
iii 15 1535 1456456 55
lll 651 650651 06501 560
mmm 51 984 984 984
nnn 651 6513 65 5
ooo 51 651 54545 1651
ppp 18 84545 51 651
qqq 1 651 8545
rrr 19 81 8 81
sss 51 651 3 21
ttt 15 15 1 55
uuu 651 650651 06501 560
vvv 51 984 984 984
zzz 651 651 65 5

Può capitare di dover pubblicare i dati impaginati in una tabella, e a causa delle molte righe, o a causa della impaginazione del sito, si voglia lasciare fissa la testatina della tabella e scrollare i dati. Con questo esempio, realizzato utilizzando poche righe di codice CSS, vediamo come fare.

Vediamo il codice CSS

<style type="text/css">
/*il div che contiene lo scroll*/
.article {
 height: 355px;
 width: 462px;
 overflow-y:auto;
 overflow-x:hidden;
}
/*la tabella*/
.article table {
 border-collapse:collapse;
}
/*tutte le righe*/
.article table tr {
 height:30px;
}
/*tutte le celle*/
.article table tr td {
 border:1px solid #EBD13F;
 color: #C60;
 background: #F3F4D0;
 text-align:center;
}
/*la colonna di sinistra*/
.article table tr th {
 border: 1px solid #039;
 color:#069;
 background: #D7EBEE;
}
/*la testata riga fissa*/
.article table .testata {
 position: fixed;
}
/*le celle della riga fissa*/
.article table .colonna {
 background-color: green;
 color: white;
 border:1px solid #0C0;
}
/*correggo la prima riga della tabella*/
.article table .primariga {
 padding-top:30px;
}
</style>

E il codice HTML della tabella

<div class="article">
 <table cellspacing="0" cellpadding="0">
  <tr class="testata">
   <th width="52" class="colonna" scope="col">test</th>
   <th width="62" class="colonna" scope="col">co1 1</th>
   <th width="122" class="colonna" scope="col">col 2</th>
   <th width="102" class="colonna" scope="col">col 3</th>
   <th width="102" class="colonna" scope="col">col4</th>
  </tr>
  <tr class="primariga">
   <th width="52" class="primariga" scope="row">aaa
   <td width="62" class="primariga">124</td>
   <td width="122" class="primariga">23555</td>
   <td width="102" class="primariga">346</td>
   <td width="102" class="primariga">4575</td>
  </tr>
  <tr>
   <th scope="row">bbb</th>
   <td>51</td>
   <td>984</td>
   <td>98456</td>
   <td>984</td>
  </tr>
  <tr>
   <th scope="row">ccc</th>
   <td>651</td>
   <td>651</td>
   <td>65</td>
   <td>5</td>
  </tr>
  <tr>
   <th scope="row">ddd</th>
   <td>51</td>
   <td>23434</td>
   <td>5456</td>
   <td>1651</td>
  </tr>
  <tr>
   <th scope="row">eee</th>
   <td>18</td>
   <td>835</td>
   <td>51</td>
   <td>651</td>
  </tr>
  <tr>
   <th scope="row">fff</th>
   <td>1</td>
   <td>6513535</td>
   <td>833</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row">ggg</th>
   <td>19</td>
   <td>8135</td>
   <td>854</td>
   <td>81</td>
  </tr>
  <tr>
   <th scope="row">hhh</th>
   <td>51</td>
   <td>651</td>
   <td>33456</td>
   <td>21</td>
  </tr>
  <tr>
   <th scope="row">iii</th>
   <td>15</td>
   <td>1535</td>
   <td>1456456</td>
   <td>55</td>
  </tr>
  <tr>
   <th scope="row">lll</th>
   <td>651</td>
   <td>650651</td>
   <td>06501</td>
   <td>560</td>
  </tr>
  <tr>
   <th scope="row">mmm</th>
   <td>51</td>
   <td>984</td>
   <td>984</td>
   <td>984</td>
  </tr>
  <tr>
   <th scope="row">nnn</th>
   <td>651</td>
   <td>6513</td>
   <td>65</td>
   <td>5</td>
  </tr>
  <tr>
   <th scope="row">ooo</th>
   <td>51</td>
   <td>651</td>
   <td>54545</td>
   <td>1651</td>
  </tr>
  <tr>
   <th scope="row">ppp</th>
   <td>18</td>
   <td>84545</td>
   <td>51</td>
   <td>651</td>
  </tr>
  <tr>
   <th scope="row">qqq</th>
   <td>1</td>
   <td>651</td>
   <td>8545</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row">rrr</th>
   <td>19</td>
   <td>81</td>
   <td>8</td>
   <td>81</td>
  </tr>
  <tr>
   <th scope="row">sss</th>
   <td>51</td>
   <td>651</td>
   <td>3</td>
   <td>21</td>
  </tr>
  <tr>
   <th scope="row">ttt</th>
   <td>15</td>
   <td>15</td>
   <td>1</td>
   <td>55</td>
  </tr>
  <tr>
   <th scope="row">uuu</th>
   <td>651</td>
   <td>650651</td>
   <td>06501</td>
   <td>560</td>
  </tr>
  <tr>
   <th scope="row">vvv</th>
   <td>51</td>
   <td>984</td>
   <td>984</td>
   <td>984</td>
  </tr>
  <tr>
   <th scope="row">zzz</th>
   <td>651</td>
   <td>651</td>
   <td>65</td>
   <td>5</td>
  </tr>
 </table>
</div>

Spieghiamo

Come prima cosa notiamo nel codice HTML della tabella, la presenza di un div con class article.
Ho utilizzato questo div per realizzare lo scroll della tabella, vedi riga n. 6 del codice CSS.

Alla riga n. 31 del CSS imposto la riga che rimarrà fissa anche scrollando. Quella che nel codice HTML si trova alla riga di codice n. 3.

Ho dovuto impostare una correzione sulla prima riga di dati della tabella, per evitare che finisca sotto la riga di intestazione fissa. Per fare questo ho utilizzato una classe primariga, che nel CSS si trova alla riga di codice n. 41.

Nota bene

Questa soluzione non è particolarmente adatta, se i dati della tabella provengono da un database e possono variari di molto in larghezza, in modo incontrollato. Potrebbe succedere che il contenuto di una cella sia più lungo del valore width da noi impostato inizialmente, e quindi si verifichi un disallineamento delle celle.

giovedì 7 giugno 2012

Download file con password

Vediamo come realizzare un elenco di link per il download, protetti da password

Esempio


Download file tramite password

Inserisci la password e avvia il download del tuo file

Capita spesso di avere documenti più o meno riservati, che si desidera condividere solo con una cerchia ristretta di persone e non con tutti gli utenti del nostro sito.
In questa guida vediamo come fare per visualizzare un elenco di documenti pronti al download, ma che possono essere scaricati solo dopo avere inserito una password (che avremo comunicato solo a chi deve scaricare il nostro file).

Vedremo anche come creare e proteggere con password una serie di link interni o esterni al nostro sito.

Come sempre anticipo il link dello script completo (si tratta di uno ZIP con tutti i file dell'esempio) per i frettolosi che non vogliono leggere tutta la guida. Il link è ripetuto anche in fondo, per chi invece vuole seguire la guida passo passo.

Per spiegare meglio lo script PHP ho suddiviso il codice in varie sezioni, così da poterle individuare più semplicemente.

Vediamo prima di tutto se il nostro server supporta PHP

Se siamo sicuri che il nostro server supporti PHP possiamo saltare questo passaggio e andare avanti al punto successivo.
Altrimenti è molto semplice verificare la presenza di PHP sul nostro server, basta seguire questi semplici passi.

Analizziamo lo script

Lo script è composto da 6 sezioni di codice:
  1. nel primo blocco di codice definiamo le nostre preferenze (url del sito), messaggi ecc...;
  2. nel secondo blocco di codice definiamo dove si trova il file da scaricare, la password da inserire e come si chiama il file;
  3. il blocco successivo si occupa di verificare la password e avviare il download;
  4. poi come sempre ho inserito un po di CSS per rendere il tutto gradevole (anche l'occhio vuole la sua parte) questo codice può essere modificato o cancellato completamente;
  5. due righe di codice per visualizzare i messaggi che lo script rende;
  6. finalmente i link che visualizzerà l'utente finale;

Prima sezione di codice le preferenze

//imposto messaggio di password corretta
$ok = '<p class="green">Ok password corretta inizio il download tra 5 secondi...</p>';

// imposto messaggio di errore
$errore = '<p class="red">Attenzione password errata, prova nuovamente!</p>
<p><a href="mailto:info@example.com?subject=Richiesta nuova password">Richiedi nuova password</a></p>';

// imposto messaggio di benvenuto
$plain = '<p class="plain">Inserisci la password e avvia il download del tuo file</p>';

// imposto l'url dove si trova questo file
// se ad esempio si vuole installare lo script nella cartella download
// $site sarà: http://www.example.com/download
$site = 'http://www.example.com';

Seconda sezione di codice i file e le password

// inserisco il nome, la password e la cartella del file 1
if(isset($_POST["submit1"])){
 $dir  = "dir-dwnload-1234";     /*nome cartella dove si trova il file da scaricare*/
 $file = "file1.zip";            /*nome file da scaricare*/
 $pswd = "pippo";                /*password per questo file*/
}

// inserisco il nome, la password e la cartella del file 2
else if(isset($_POST["submit2"])){
 $dir  = "dir-dwnload-1234";     /*nome cartella dove si trova il file da scaricare*/
 $file = "file2.pdf";            /*nome file da scaricare*/
 $pswd = "pluto";                /*password per questo file*/
}

// inserisco il nome, la password e la cartella del file 3
else if(isset($_POST["submit3"])){
 $dir  = "";                     /*nome cartella dove si trova il file da scaricare*/
 $file = "";                     /*nome file da scaricare*/
 $pswd = "paperino";             /*password per questo file*/
 $site = 'http://www.google.it'; /*l'url del link da raggiungere con la password*/
}

Tersa sezione di codice controllo e download

// controllo 
if($_POST["_pswd"] != $pswd){
 $msg = $errore;
}
if(($_POST["_pswd"] == $pswd)&&($pswd != "nopsw")){
 $msg = $ok;
 // avvio il download
 header("Refresh: 5; URL=".$site."/".$dir."/".$file."");
}

Quarta sezione il codice CSS

<style type="text/css">
* {
 padding:3px;
 margin:3px;
}
body {
 font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: #333;
 width:500px;
}
ul, li, p {
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
ul {
 background: #039;
}
li {
 background: #D7F2F4;
 list-style:none;
}
label {
 font-size: 0.8em;
 color: #009;
}
.red {
 color: #FFF;
 background: #F00;
}
.green {
 color: #FFF;
 background: #0C0;
}
.plain {
 color: #FFF;
 background: #CCC;
}
</style>

Quinta sezione di codice stampa dei messaggi

// gestiamo i messaggi proventienti da controllo 
if((isset($msg))&&($pswd != "nopsw")){
 echo $msg; 
}else{
 echo $plain;
}

Sesta sezione di codice i link ai file

<ul>
  <li>
    <form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
      <label>Download <strong class="re">file1.zip</strong></label>
      <input type="password" name="_pswd">
      <input type="submit" name="submit1" value="download">
    </form>
  </li>
  <li>
    <form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
      <label>Download <strong>file2.pdf</strong></label>
      <input type="password" name="_pswd">
      <input type="submit" name="submit2" value="download">
    </form>
  </li>
  <li>
    <form name="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
      <label>Apri la <strong>Home Page di Google</strong></label>
      <input type="password" name="_pswd">
      <input type="submit" name="submit3" value="download">
    </form>
  </li>
</ul>

Spieghiamo

Nella prima parte è fondamentale impostare la variabile $site con l'url della cartella contenente tutti i file (sia PHP che le cartelle contenenti i file da scaricare). Se ad esempio si vuole installare lo script e i file da scaricare, nella cartella download-file (quella che si trova nel file ZIP dell'esempio) l'url sarà: http://www.example.com/download-file;

Nel secondo blocco di codice si impostano: il nome della cartella dove si trova il file da scaricare, il nome del file e la password. Da notare che per inserire un link protetto da password basta inserire la password e aggiungere la riga di codice con l'url del link esempio: $site = 'http://www.google.it'; (vedi riga 20 del secondo esempio di codice). Gli altri valori vanno lasciati vuoti;

Il terzo blocco di codice controlla la password. Qui non va modificato nulla;

Quarto blocco è composto da codice CSS per rendere più gradevole la parte visiva. Questo codice si può modificare a proprio piacimento o direttamente cancellare, senza compromettere il funzionamento dello script;

Anche il quinto blocco di codice non va modificato. Serve a visualizzare i messaggi dello script.

Nel sesto blocco di codice c'è l'HTML per visualizzare i vari link.

Se dobbiamo aggiungere altri link, basta duplicare le righe contrassegnate nel secondo esempio (dalla 8 alla 13) e le righe del sesto esempio (dalla 9 alla 15). Nei due blocchi di codice va impostato lo stesso valore submitX che dovrà essere corrispondente e univoco, per collegare il link dell'HTML con l'if del PHP.

Nota bene

Questo script è utile per celare l'effettivo link del tuo download. Tuttavia per file molto importanti, potrebbe essere interessante aumentare la sicurezza dei download, proteggendo la cartella in altro modo, con sistemi che utilizzano protezioni lato server direttamente sulle cartelle e sui file stessi.

Per questo motivo ti consiglio di utilizzarlo con cautela, a tuo rischio e pericolo, e soprattutto su file di relativa importanza.

Download

Da questo link è possibile scaricare l'intero script

mercoledì 6 giugno 2012

Inviare messaggi dal sito

Vediamo come realizzare un form per inviare messaggi dal sito

Esempio


Scrivi un messaggio

Tutti i campi sono obbligatori

Con questo Script in PHP sarà possibile inviare messaggi dal sito, direttamente sulla nostra casella di posta. Lo Script controlla che tutti i campi siano compilati, prepara la mail e la spedisce su una casella di posta predefinita. Unico requisito richiesto, è che il nostro Server supporti PHP.
Se vuoi scaricare subito il file completo senza leggere tutta la guida puoi trovarlo qui.

Vediamo se il nostro server supporta PHP

Se siamo sicuri che il nostro Server supporti PHP possiamo saltare questo passaggio e andare avanti al punto successivo.
Altrimenti è molto semplice verificare la presenza di PHP sul nostro server, basta seguire questi semplici passi.

Analizziamo lo script per inviare mail dal sito:

Lo script che ho preparato appositamente per questa guida, è suddiviso in 4 parti:
  1. una sezione per impostare le preferenze del nostro FORM MAIL: la casella email che riceverà i messaggi dal sito, l'oggetto del messaggio, il testo dei vari messaggi resi dal form ecc...;
  2. lo script che invia fisicamente la mail alla nostra casella di posta;
  3. un po' di codice CSS per dare un aspetto gradevole al form e ai messaggi di errore o consenso che il form rende;
  4. il codice HTML del form che servirà all'utente per compilare il messaggio da inviare tramite il sito;

Impostiamo le preferenze dello Script

/** MODIFICA CON I TUOI DATI ******************************************/

//imposta il tuo indirizzo email
 $miamail = "miaemail@example.com";
// imposta l'oggetto della mail che riceverai 
 $oggettomail = "Messaggio dal sito";
// imposta un messaggio per email inviata correttamente
 $inviato = '<p class="green">Ok e-mail inviata correttamente.</p>';
// imposta un messaggio per errore invio
 $errore = '<p class="red">Attenzione: non &egrave; stato possibile inviare l&acute;email...</p>';
// imposta un messaggio per tutti i campi obbligatori
 $tutticampi = '<p class="red">Attenzione: tutti i campi sono obbligatori...</p>';
// etichetta per input Nome e Cognome
 $_nomecognome = "Nome e Cognome";
// etichetta per input email
 $_email = "Email";
// etichetta per textarea messaggio
 $_messaggio = "Messaggio";
 
/* FINE MODIFICA CON I TUOI DATI **************************************/ 

Vediamo lo script che prepara e invia la mail

//recupero i dati dal form per l'invio
 $nome      = $_POST['nome'];
 $email     = $_POST['email'];
 $messaggio = $_POST['messaggio'];

//vediamo se l'utente sta componendo il form o ha cliccato su scrivi
if($_POST['submit'] == 'scrivi'){
 
//controllo tutti i dati 
//se aggiungi altri campi obbligatori al form devi aggiungerli anche qui nell'if
  if(($nome != $_nomecognome) && ($email != $_email) && !empty($messaggio)){ 
      
//imposto il mittente della mail  
  $headers .= 'From: "'.$nome.'" <'.$email.'>';
//spedisco la mail
  $mail = mail($miamail, $oggettomail, $messaggio, $headers);
      
//controllo il corretto invio dei dati
  if($mail){
       
//stampo un messaggio dopo l'invio dei dati
  $msg = $inviato;

  }else{
//stampo un messaggio in caso di errore
  $msg = $errore;
      
//fine se tutti i campi sono compilati
  }
 }else{
//stampo un messaggio se mancano i campi obbligatori
  $msg = $tutticampi;
 }
}

Un po' di CSS per rendere gradevole il Form

<style type="text/css">
body {
 font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
}
input, textarea {
 font: 1em "Trebuchet MS", Arial, Helvetica, sans-serif;
 color: #900;
 border: 1px solid #CCC;
 background-color: #FFFEF0;
 display:block;
}
input[type="submit"]:hover {
 background-color: #0C0;
 color:#FFF;
}
label {
 font-size: 0.7em;
 color: #CCC;
}
.red {
 color:#FFF;
 background-color: #C00;
 width:375px;
 padding:2px;
}
.green {
 color:#FFF;
 background-color: #0C0;
 width:375px;
 padding:2px;
}
</style>

Vediamo l'HTML del form per compilare il messaggio

<h2>Scrivi un messaggio</h2>
<p><em>Tutti i campi sono obbligatori</em></p>
<form name="form-mail" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
 <input type="text" name="nome" value="<?php echo $_nomecognome; ?>" onblur="if(this.value=='') this.value='<?php echo $_nomecognome; ?>';" onfocus="if(this.value=='<?php echo $_nomecognome; ?>') this.value='';" />
 <input type="text" name="email"  value="<?php echo $_email; ?>" onblur="if(this.value=='') this.value='<?php echo $_email; ?>';" onfocus="if(this.value=='<?php echo $_email; ?>') this.value='';"/>
 <label><?php echo $_messaggio; ?></label>
 <textarea name="messaggio" cols="50" rows="7"></textarea>
 <input type="submit" name="submit" value="scrivi" />
</form>

Spieghiamo

Nelle prime righe del codice trovo le variabili che una volta impostate fanno funzionare lo script secondo le nostre impostazioni.
Nel personalizzare le variabili, è importante rispettare la sintassi, senza cancellare gli apici che aprono e chiudono i valori impostati. Nell'esempio che segue, la parte in rosso è il contenuto della variabile che va modificato a proprio piacimento, la parte in grigio non va modificata:
$miamail = "miaemail@example.com";

Nella seconda parte del codice c'è il motore dello script, la parte cioè che confeziona il messaggio e lo spedisce alla nostra casella di posta. In questa sezione di codice non c'è nulla da modificare. Il codice va lasciato così com'è.

La terza parte di codice è  composta da un po' di CSS che ho inserito per rendere gradevole la visualizzazione del form. Questo codice può essere modificato, ampliato o anche cancellato completamente.

La quarta e ultima parte di codice è l'HTML che serve per marcare il FORM.

Download

Seguendo questo link puoi scaricare il file completo e funzionante.

Verificare se il server supporta PHP

Spesso ci capita di volere installare piccoli script per il nostro sito internet, ma la prima condizione che ci viene richiesta per installare lo script, è che il nostro server supporti PHP...

Vediamo come verificare se il nostro server supporta PHP

Normalmente se il nostro server è su piattaforma UNIX / LINUX il supporto a PHP è nativo. A volte è anche possibile usufruire di PHP su alcuni server in ambiente WINDOWS che lo hanno installato.

Per verificare la presenza di PHP sul nostro server, basta seguire questi semplici passi:
  1. creiamo un file vuoto
  2. lo chiamiamo phpinfo.php
  3. nel file scriviamo questa semplice riga: <?php phpinfo(); ?>
  4. carichiamo il file sul nostro server via FTP
  5. navighiamo il file con un browser esempio: http://www.example.com/phpinfo.php
  6. se compaiono le specifiche del nostro server OK altrimenti non abbiamo PHP

Downlaod

Se vuoi, da questo link puoi scaricare il file phpinfo.php già pronto per l'upload sul tuo server.

mercoledì 30 maggio 2012

Come sapere quale Browser ha il nostro utente

Vediamo come fare per sapere quale Browser sta utilizzando il nostro utente


Questo fantastico script gratuito scritto in PHP si chiama Browser.php. Grazie a un'attenta analisi del Browser riesce ad individuare:
  1. Tipo di Browser dell'utente
  2. Versione del Browser
  3. User Agent completo
  4. Piattaforma del supporto
Esempio:


Spieghiamo:

Lo script si occupa di individuare e immagazzinare i dati proveniente dal Browser dell'utente, come riportato nell'esempio sopra. Sta poi a noi interpretarli e utilizzarli.

L'autore ad esempio consiglia un utilizzo di questo tipo:
$browser = new Browser();
if( $browser->getBrowser() == Browser::BROWSER_FIREFOX && $browser->getVersion() >= 2 ) {
echo 'Stai Navigando con FireFox versione 2 o superiore';
}
In pratica controllo con if se il Browser è FireFox e se la versione è uguale o superiore a 2 quindi stampo il messaggio con echo.

Ho fatto un paio di test con Smartphone Android, iPhone e Tablet Android, e in ogni situazione lo script ha risposto segnalando puntualmente il Browser la sua versione, l'user agente e la piattaforma utilizzata, senza commettere mai errori.

Può sembrare superfluo dirlo, ma per il corretto funzionamento dello script è meglio non dimenticare di includerlo nel nostro file padre.

Esempio di inclusione nel nostro file:

<?php
//includo il file Browser.php nel mio file padre (ad esempio: example.php)
include("Browser.php");

//imposto il browser
$browser = new Browser();

//controllo con if se il Browser dell'utente 
//risponde alle caratteristiche impostate
if( $browser->getBrowser() == Browser::BROWSER_FIREFOX && $browser->getVersion() >= 2 ) {

//stampo il messaggio Firefox SI
echo 'Stai Navigando con FireFox versione 2 o superiore';
}else{

//altrimenti stampo il messaggio FireFox NO o inferiore a 2
echo 'Stai Navigando con un Browser diverso da FireFox o inferiore a 2';
}
?>

martedì 29 maggio 2012

DOCTYPE HTML 5

L'HTML5 è un linguaggio di markup per la progettazione delle pagine web attualmente in fase di definizione (bozza) presso il World Wide Web Consortium. La definizione delle specifiche iniziali del linguaggio è stata effettuata da un gruppo di lavoro esterno al W3C: il WHATWG. Attualmente i lavori sono seguiti sia dal WHATWG che dal W3C HTML working group. L'intento iniziale che ha guidato il gruppo di lavoro è stato quello di proporre nuovi comandi e funzionalità fino ad allora ottenute in maniera non-standard, ossia mediante il ricorso a plug-in o a estensioni proprietarie dei vari browser. Altro obiettivo è garantire una buona compatibilità con i browser esistenti, compresi quelli obsoleti o presenti su piattaforme mobili.

L'HTML5 si propone come evoluzione dell'attuale HTML 4.01 ed è stato concepito in alternativa all'ormai fallito XHTML 2[1]. Il World Wide Web Consortium ha annunciato che sarà pronto per il luglio 2014.

Fonte: Wikipedia

Struttura

<header>
<nav>
<article>
<section>
<aside>
<footer>

Codice

<!DOCTYPE HTML>

<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>DTD HTML 5.0</title>
 </head>

 <body>
  <p>CONTENUTO</p>
  </body>

</html>

Sito del W3C HTML Working Group

DOCTYPE XHTML Mobile 1.0

DTD Versione ridotta per supporti Mobile.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>DTD XHTML Mobile 1.0</title>
 </head>

 <body>
  <p>CONTENUTO</p>
 </body>

</html>

DOCTYPE XHTML 1.1

L'ultima versione di XHTML è la XHTML 1.1, che è una riformulazione dell'XHTML Strict, quindi ha una sola DTD. Non accetta i tag e gli attributi più criticati della precedente versione (come la struttura a frameset). Questa versione invece supporta i tag del cosiddetto markup «ruby», che consente di visualizzare i set di caratteri delle lingue orientali.

Fonte: Wikipedia
<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>DTD XHTML 1.1</title>
 </head>

 <body>
  <p>CONTENUTO</p>
 </body>

</html>

DOCTYPE XHTML 1.0 Strict

XHTML 1.0 Strict rispetto alla versione Transitional non accetta i tag HTML definiti deprecati, non è tollerante a non conformità sintattiche e prevede controlli più rigorosi anche rispetto al valore di alcuni attributi dei tag (per esempio, l'attributo id deve avere valori univoci all'interno dello stesso documento).

Fonte: Wikipedia
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>DTD XHTML 1.0 Strict</title>
 </head>

 <body>
  <p>CONTENUTO</p>
 </body>

</html>

Includere un file con PHP

Includere un file HTML figlio in un file HTML padre con PHP

Questo tipo di inclusione lato-server, permette la ripetizione di uno stralcio di codice in uno o più file padre.

Per includere lo stralcio di codice, utilizzeremo il costrutto include. L'unica accortezza che dovremo rispettare, sarà cambiare l'estensione del file padre in PHP. Il file padre si dovra chiamare ad esempio: example.php.

Vediamo il codice

<?php include("menu.htm"); ?>

Spieghiamo

Grazie al costrutto include possiamo inserire lo stralcio di codice contenuto in menu.htm all'intero del nostro file padre.
Ci sono da notare alcuni aspetti importanti affinché l'inclusione vada a buon fine:
  1. l'url del file figlio è relativo rispetto al file padre. Il file riportato nell'esempio menu.htm si troverà nella stessa cartella del file padre.
  2. Volendo possiamo inserire codice PHP nel file figlio, ma in questo caso dovremo rinominare il file da menu.htm a menu.php. Inoltre il codice PHP contenuto in menu.php dovrà essere aperto e chiuso con php.

Esempio di contenuto dinamico nel file menu.php:

<?php echo"Ciao"; ?>
In alcuni casi sarà possibile "forzare" l'inclusione con il costrutto require.

<?php require("menu.htm"); ?>
Esiste infine la possibilità di utilizzare il costrutto include_once o require_once, particolarmente utile in script complessi, per evitare l'inclusione multipla indesiderata

<?php include_once("menu.htm"); ?>
<?php require_once("menu.htm"); ?>

Slide Show semplice con JavaScript

Vediamo come visualizzare immagini in un div, senza ricaricare la pagina.

Con poche righe di codice, e con l'ausilio di JavaScript, realizzeremo un semplice visualizzatore di foto, che non ricarica necessariamente tutto il codice della pagina. Utile ad esempio, per allegare più foto a un articolo.

Esempio:

Foto di Ilari Blasi




Per realizzare questo semplice visualizzatore di foto, abbiamo bisogno di tre cose:
  1. Il codice JavaScript che prende l'url della foto cliccata e lo memorizza in una variabile
  2. Un menù di link alle foto da visualizzare
  3. Il <div id="fotozoom">  nel quale pubblicheremo la foto cliccata

Vediamo il codice

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Foto Show</title>
  <script type="text/javascript">
  <!--
  function zoom(foto)
  {
   var image = foto;
   document.getElementById('fotozoom').innerHTML='<img src=' + image + '>'; 
  }
  //-->
  </script>
 </head>

 <body>
 
  <ul>
   <li><a href="#" onclick="javascript:zoom('2.jpg');">Foto 1</a></li>
   <li><a href="#" onclick="javascript:zoom('3.jpg');">Foto 2</a></li>
   <li><a href="#" onclick="javascript:zoom('1.jpg');">Foto 3</a></li>
  </ul>
  
  <div id="fotozoom"><img src="1.jpg" alt=""></div>
  
 </body>
 
</html>

Spieghiamo

Il codice dalla riga 6 alla riga 14 memorizza il link al clic, lo rende una variabile e predispone il codice HTML da stampare per visualizzare la foto;

Il codice HTML dalla riga 19 alla 23 serve soltanto a visualizzare un menù di esempio, che potremo ricreare a nostro piacimento;

Il div alla riga 25 serve a contenere la foto che sceglieremo con il clic sul menù.

Da notare che ho preimpostato la prima foto nel div, che ho anche riporposto sul link 3. Questo per fare in modo che alla prima visualizzazione della pagina ci sia già una prima foto visualizzata, senza dovere cliccare nulla.

Download

Per comodità è possibile scaricare il file ZIP con il codice di esempio.

lunedì 28 maggio 2012

Includere file esterno con JavaScript

Includere un file HTML figlio in un file HTML padre con JavaScript

Le inclusioni sono comode per inserire uno stralcio di codice in più pagine, senza doverlo ripeterlo ogni volta uguale.

Esistono sostanzialmente due metodi per includere uno stralcio di codice esterno, in un file HTML: lato-server e lato-client. Quello che vediamo adesso è realizzato con JavaScript e appartiene alle inclusioni lato-client, cioè realizzate dal browser dell'utente.

Per includere lo stralcio di codice, che nell'esempio è un menù, abbiamo bisogno di:
  1. Una pagina padre, che chiameremo example.htm 
  2. Lo stralcio di codice da includere che scriveremo nel file che chiameremo menu.js

vediamo il codice della pagina padre example.htm

<!DOCTYPE HTML>
<html>
 <head>
  <script type="text/javascript" src="menu.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Inclusione con JavaScript</title>
 </head>

 <body>

  <noscript>
   <strong>
    <p style="color:red;">Attenzione: per visualizzare correttamente questa pagina è necessario avere JavaScript attivato.</p>
   </strong>
  </noscript>

 <script type="text/javascript">
  document.write(inclusione);
 </script>

 </body>

</html>

e vediamo anche il codice del menù da includere nella pagina padre menu.js

inclusione="<ul><li><a href='home.htm'><span>Home</span></a></li><li><a href='prodotti.htm'><span>Prodotti</span></a><li><a href='chi.siamo.htm'><span>Chi siamo</span></a></li><li><a href='contatti.htm'><span>Contatti</span></a></li></ul>";

Spieghiamo:

Il primo codice di esempio è il file che chiameremo example.htm. È la nostra pagina padre, nella quale includeremo lo stralcio di codice.

Da notare il codice alla riga 4 che richiama il file esterno menu.js;

Il codice dalla riga 11 alla 15 serve per stampare un alert, nel caso in cui l'utente abbia JavaScript disabilitato sul browser;

Il codice dalla riga 17 alla 19 stampa il contenuto del file incluso;

Il secondo codice di esempio è il file che chiameremo menu.js.
Guardandolo bene ha una stranezza: è scritto tutto su una riga senza andare mai a capo...
Questo perché  la stringa che nell'esempio si chiama inclusione, non permette codice a capo.

Altra cosa che dovremo tenere a mente per evitare che il JavaScript generi un errore, è evitare l'utilizzo dei doppi apici ". Basterà utilizzare l'apice singolo '.

Ad esempio:

inclusione"<a href="http://www.example.com" title="Example">pippo</a>";

diventerà:

inclusione"<a href='http://www.example.com' title='Example'>pippo</a>";

oppure potrebbe diventare...:

inclusione"<a href=\"http://www.example.com\" title=\"Example\">pippo</a>";

Download

Per chiarezza è possibile scaricare i due file example.htm e menu.js (ZIP)

Includere un file con SSI

Includere un file HTML figlio in un file HTML padre, con SSI

Questo metodo di inclusione lato server, è molto utile quando si vuole utilizzare una parte di codice, ripetuto in più pagine di un sito internet, come ad esempio un menù, il logo in alto o gli indirizzi di solito in basso nella pagina.
Vediamo prima di tutto il codice:
<!--#include virtual="menu.htm"-->

Spieghiamo:

la sintassi del Server Side Include (SSI) è molto semplice: comando parametro e valore, dove valore è l'url del nostro spezzone di codice da includere.

Nell'esempio ho riportato l'url relativo riferito al menù che voglio inserire nella mia pagina. Se il menù si trovasse in una cartella chiamata INC l'esempio cambierebbe in:
<!--#include virtual="INC/menu.htm"-->

Nel file menu.htm non ci devono essere i tag strutturali della pagina HTML ma soltanto lo spezzone di codice da includere.

Un esempio completo di pagina padre e inclusione di spezzone potrebbe essere questo:

file padre example.shtml

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Inclusione con SSI</title>
 </head><body>
  <p>Contenuto della pagina padre parte superiore della pagina</p>

  <!--#include virtual="menu.htm"-->

  <p>Contenuto della pagina padre parte inferiore della pagina</p>
 </body>
</html>

file figlio menu.htm

  <ul>
    <li><a href='#'><span>Home</span></a></li>
    <li><a href='#'><span>Prodotti</span></a>
    <li><a href='#'><span>Chi siamo</span></a></li>
    <li><a href='#'><span>Contatti</span></a></li>
  </ul>

Nota:

Affinché l'inclusione vada a buon fine dobbiamo rispettare due vincoli:

  1. Il nostro server deve avere SSI attivato
  2. La nostra pagina padre deve avere l'estensione shtml. Si dovrà chiamare ad esempio: example.shtml.
    Va invece bene qualsiasi estensione per il file figlio che può essere nominato, come riportato nell'esempio: menu.htm. Nel file figlio sarà possibile inserire solo codice HTML.

Includere un filmato flash

Vediamo come includere un filmato in Flash nella nostra pagina HTML

Diamo per scontato che il filmato sia già pronto per essere pubblicato sul web.
Significa che abbiamo già realizzato il nostro filmato con Flash, lo abbiamo salvato in formato .FLA e abbiamo già esportato il file che nell'esempio riportato sotto ho chiamato miofile.swf dove .SWF è il file compilato da visualizzare nella nostra pagina HTML.

Con questo semplice codice posso includere un file con estensione SWF in una pagina HTML

<p>
 <object 
  type="application/x-shockwave-flash" 
  data="http://www.example.com/miofile.swf" 
  width="800" 
  height="650">

 <param 
  name="movie" 
  value="http://www.example.com/miofile.swf "/>

 </object>
</p>

Spieghiamo:

Da notare che ho inserito <object...> all'interno di un tag paragrafo.
Questa accortezza serve solo a non "infastidire" il validatore, nel caso in cui utilizziamo un DTD Strict, altrimenti possiamo tranquillamente fare a meno del tag <p>.

In pratica se non utilizzo un DTD Strict potrò avere un codice validato anche cancellando la prima e l'ultima riga dell'esempio.

Consiglio:

Sarebbe meglio non scalare il filmato importato, questo per evitare che la grafica venga ricampionata dal browser. Per fare questo, basta realizzare il filmato flash direttamente delle dimensioni che verranno utilizzate nella pagina HTML.

Nell'esempio ho ipotizzato un filmato con width="800" ed height="650", in questo caso il foglio di lavoro del filmato flash dovrà essere creato base 800px e altezza 650px.

domenica 27 maggio 2012

Redirect con JavaScript

Semplice redirect con JavaScript

Con questo semplice codice è possibile inviare automaticamente l'utente a una nuova pagina.
<script type="text/javascript">
<!-- 
top.location.replace("http://www.example.com");
-->
</script>

Spieghiamo:

Si tratta dell'oggetto location.replace grazie al quale è possibile sostituire il nostro documento con il nuovo url.

È possibile utilizzare, con lo stesso risultato anche altri due oggetti del JavaScript: location.reload e location.href utilizzandoli come illustrato nei due esempi che seguono:
<script type="text/javascript">
<!-- 
top.location.reload("http://www.example.com");
-->
</script>
<script type="text/javascript">
<!-- 
top.location.href("http://www.example.com");
-->
</script>

Redirect con PHP

Semplice redirect con PHP

Con questo semplice codice è possibile effettuare un redirect della nostra pagina con PHP.
Sarà possibile impostare anche l'intervallo di tempo dopo il quale dare corso al redirect.
<?php
header("Refresh: 5; URL=http://www.example.com");
exit;
?>

Spieghiamo:

Tramite questo redirect in PHP è possibile impostare un tempo e un url.
Se ad esempio impostiamo il parametro Refresh a 5, il nostro redirect verrà avviato dopo 5 secondi.

Se nella pagina è presente altro codice che non voglio eseguire, blocco lo script con exit;
Altrimenti non serve e lo posso tranquillamente togliere.

È possibile anche utilizzare la forma contratta, senza impostare un tempo al redirect, che avrà quindi effetto immediato:
<?php
header("Location: http://www.example.com");
exit;
?> 

Spieghiamo:

Anche in questo caso è possibile togliere exit; se nella pagina non c'è altro codice che non si desidera venga eseguito.

È possibile con una piccola astuzia, utilizzare questo redirect, ad esempio, per aggiornare la nostra pagina ogni 30 secondi: basterà impostare il parametro Refresh a 30, e indicare come url la pagina attuale.

In questo modo si avrà, in effetti, il reload della nostra pagina ogni 30 secondi
Esempio:
<?php
header("Refresh: 30; URL=http://www.url-della-mia-pagina.it");
echo"Questa pagina viene ricaricata ogni 30 secondi...";
?>

Redirect con HTML

Semplice redirect in HTML

Con questo semplice codice è possibile inviare automaticamente l'utente a una nuova pagina.
Sarà possibile impostare anche l'intervallo di tempo dopo il quale dare corso al redirect.
<meta http-equiv="Refresh" content="5; url=http://www.example.com">

Spieghiamo:

Si tratta del metatag Refresh grazie al quale è possibile impostare un tempo e un url al nostro redirect.
Se ad esempio impostiamo il content a 5, il nostro redirect verrà avviato dopo 5 secondi.

È possibile con una piccola astuzia, utilizzare questo metatag, ad esempio, per aggiornare la nostra pagina ogni 30 secondi: basterà impostare il parametro content a 30, e indicare come url la pagina attuale.

In questo modo si avrà, in effetti, il reload della nostra pagina ogni 30 secondi

<meta http-equiv="Refresh" content="30; url=http://www.url-della-mia-pagina.it">

Link che apre in _blank con JavaScript

Creare un link che apre in una nuova pagina del browser

Se vogliamo che il nostro clic apra in una nuova pagina del browser, possiamo farlo modificando con JavaScript il codice <a href come segue:

Vediamo il codice JavaScript:

<a href="http://www.example.com/" 
title="Apri EXAMPLE in una nuova pagina" 
onClick="window.open(this.href);return false">Example</a>

Spieghiamo:

Questa soluzione utilizza l'onClick del JavaScript per generare una nuova pagina del browser.

PRO:

È utile se utilizziamo un DOCTYPE XHTML 1.0 Transitional oppure un DOCTYPE HTML 4.01 Transitional e vogliamo mantenere la validazione W3C del codice.

CONTRO:

Non funziona correttamente se l'utente ha JavaScript disabilitato sul browser
Se utilizzeremo questa soluzione, sarà buona norma inserire un <noscript> nella pagina, che visualizzerà un messaggio se l'utente non ha JavaScript abilitato:

<noscript>
  <p style="color:red; text-align:center;">
    Attenzione: per visualizzare correttamente 
il contenuto della pagina occorre avere JavaScript abilitato.
  </p>
</noscript>

Menù orizzontale con sottomenù

Vediamo come creare un semplice menù con sottomenù

Esempio:

Questo semplice menù è realizzato esclusivamente utilizzando codice CSS.
Con una semplice struttura HTML composta da <ul> e <li>, sarà possibile creare tutti i menù e sottomenù necessari al nostro sito.

Browser

Ho testato il funzionamento e la rappresentazione grafica del menù con tutte le ultime versioni dei browser più utilizzati:
 

Vediamo il codice 

CSS:
<style type="text/css">
.cssmenu {
 border:none;
 margin:0px;
 padding:0px;
 font-family:verdana, geneva, arial, helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
}
/*1° livello*/
.cssmenu ul {
 list-style:none;
 margin:0;
 padding:0;
}
.cssmenu li {
 float:left;
 padding:0px 8px 0px 8px;
}
.cssmenu li a {
 color:darkGoldenrod;
 display:block;
 font-weight:bold;
 line-height:43px;
 padding:0px 25px;
 text-align:center;
 text-decoration:none;
}
.cssmenu li a:hover {
 color:green;
 text-decoration:none;
 text-decoration:underline;
}
/*2° livello*/
.cssmenu li ul {
 background:green;
 display:none;
 height:auto;
 position:absolute;
 width:225px;
 z-index:1;
}
.cssmenu li:hover ul {
 display:block;
}
.cssmenu li li {
 display:block;
 float:none;
 padding:0px;
 width:225px;
}
.cssmenu li ul a {
 display:block;
 font-size:12px;
 font-style:normal;
 padding:0px 10px 0px 15px;
 text-align:left;
 color:white;
}
.cssmenu li ul a:hover {
 background:darkgreen;
 color:greenyellow;
}
.cssmenu p {
 clear:left;
}
/*link active*/
.cssmenu .active > a {
 color:red;
}
.cssmenu .active > a:hover {
 text-decoration:underline;
 color:maroon;
}
</style>


HTML:
<div class='cssmenu'>
  <ul>
    <li class='active'><a href='#'><span>Home</span></a></li>
    <li><a href='#'><span>Prodotti</span></a>
      <ul>
        <li><a href='#'><span>Prodotto 1</span></a></li>
        <li><a href='#'><span>Prodotto 2</span></a></li>
      </ul>
    </li>
    <li><a href='#'><span>Chi siamo</span></a></li>
    <li><a href='#'><span>Contatti</span></a></li>
  </ul>
</div>

Spieghiamo:

Nel Css ho indicato dove apportare modifiche. Se vogliamo personalizzare il primo livello di menù, quello visibile senza intervento del mouse basterà modificare il codice CSS preceduto da:
/*1° livello*/

Per modificare graficamente il secondo livello basterà modificare il codice CSS preceduto da:
/*2° livello*/

È anche possibile modificare l'aspetto grafico del menù appartenente alla pagina che stiamo visualizzando, ossia la pagina attiva. Basterà modificare il codice CSS preceduto da:
/*link active*/


Nel codice HTML dovremo semplicemente specificare il link che appartiene alla pagina attuale modificando <li> in
<li class='active'>
ossia link attivo.

Per comodità è possibile scaricare l'intero file HTML + CSS.

sabato 26 maggio 2012

Layout 2 colonne 100%

Vediamo come impostare un layout 2 colonne con larghezza 100%

Il layout prevede 4 macro aree:

  1. Header per contenere il logo in testa alla pagina
  2. Navigation per un menù a sinistra
  3. Content per una colonna centrale di contenuti
  4. Footer per indirizzo telefoni ecc. a pié di pagina

HEAD:
<!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>
<title>Layout 2 colonne larghezza in percentuale</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
CSS:
<style type="text/css">
* {
 margin:0;
 padding:0;
}
div#wrapper {
 float:left;
 width:100%;
}
div#header {
 height:80px;
 background: #FF9;
}
div#content {
 margin: 0 0% 0 25%;
 background-color:#FFF;
}
div#navigation {
 background:#E8E8FF;
 float:left;
 width:25%;
 margin-left:-100%;
}
div#footer {
 background: #CCC;
 clear:left;
 width:100%;
}
</style>
BODY:
</head>
<body>
<div id="container">
  <div id="header">
    <H1>HEADER</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit</p>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>CONTENUTI</h2>
      <p><img src="https://www.google.com/images/srpr/logo3w.png" alt="" width="275" height="95" align="left" id="segnaposto" style="background-color: #CCCC33" />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div id="navigation">
    <h2>MENU</h2>
    <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
      <li>menu 4</li>
    </ul>
    <br style="clear:both" />
  </div>
  <div id="footer">
    <h2>FOOTER</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit</p>
  </div>
</div>
</body>
</html>

Spieghiamo: 

Con questo layout suddiviso in 2 colonne, visualizzeremo una pagina al 100% della finestra del browser.
Chiaramente le modifiche che si possono fare sono infinite.

Ad esempio potremmo voler distanziare il layout a destra e a sinistra rispetto alla finestra del browser,
in questo caso basterebbe aggiungere al codice CSS riportato sopra:
#container {
 margin: 0 5%;
}
per avere uno spazio a destra e a sinistra corrispondente al 5% della finestra del browser.

Download:

Per comodità è possibile scaricare il file HTML completo.

Layout 3 colonne 100%

Vediamo come impostare un layout 3 colonne con larghezza 100%

Il layout prevede 5 macro aree:

  1. Header per contenere il logo in testa alla pagina
  2. Navigation per un menù a sinistra
  3. Content per una colonna centrale di contenuti
  4. Extra per una colonna a destra
  5. Footer per indirizzo telefoni ecc. a pié di pagina
HEAD:
<!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>
<title>Layout 3 colonne larghezza 100%</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
CSS:
<style type="text/css">
* {
 margin:0;
 padding:0;
}
div#wrapper {
 float:left;
 width:100%;
}
div#header {
 height:80px;
 background: #FF9;
}
div#content {
 margin: 0 25%;
 background-color:#FFF;
}
div#navigation {
 background:#E8E8FF;
 float:left;
 width:25%;
 margin-left:-100%;
}
div#extra {
 background:#EFFFAE;
 float:left;
 width:25%;
 margin-left:-25%
}
div#footer {
 background: #CCC;
 clear:left;
 width:100%;
}
</style>
BODY:
</head>
<body>
<div id="container">
  <div id="header">
    <H1>HEADER</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit</p>
  </div>
  <div id="wrapper">
    <div id="content">
      <h2>CONTENUTI</h2>
      <p><img src="https://www.google.com/images/srpr/logo3w.png" alt="" width="275" height="95" align="left" id="segnaposto" style="background-color: #CCCC33" />Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
  <div id="navigation">
    <h2>MENU</h2>
    <ul>
      <li>menu 1</li>
      <li>menu 2</li>
      <li>menu 3</li>
      <li>menu 4</li>
    </ul>
    <br style="clear:both" />
  </div>
  <div id="extra">
    <h2>EXTRA</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
  </div>
  <div id="footer">
    <h2>FOOTER</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisici elit</p>
  </div>
</div>
</body>
</html>

Spieghiamo: 

Con questo layout suddiviso in 3 colonne, visualizzeremo una pagina al 100% della finestra del browser.
Chiaramente le modifiche che si possono fare sono infinite.

Ad esempio potremmo voler distanziare il layout a destra e a sinistra rispetto alla finestra del browser,
in questo caso basterebbe aggiungere al codice CSS riportato sopra:
#container {
 margin: 0 5%;
}
per avere uno spazio a destra e a sinistra corrispondente al 5% della finestra del browser.

Download:

Per comodità è possibile scaricare il file HTML completo.

DOCTYPE XHTML 1.0 Transitional

Codice HTML di un documento con DOCTYPE XHTML 1.0 Transitional

L'XHTML (acronimo di eXtensible HyperText Markup Language, Linguaggio di marcatura di ipertesti estensibile) è un linguaggio di marcatura che associa alcune proprietà dell'XML con le caratteristiche dell'HTML: un file XHTML è un pagina HTML scritta in conformità con lo standard XML.

Il linguaggio prevede un uso più restrittivo dei tag HTML sia in termini di validità che in termini di sintassi per descrivere solo la struttura logica della pagina, mentre il layout e la resa grafica sono imposti daifogli di stile a cascata (Cascading Style Sheets, CSS).

L'XHTML è nato ufficialmente il 26 gennaio 2000 come standard del World Wide Web Consortium (W3C), e può essere definito tecnicamente una riformulazione dell'HTML 4.01 in XML 1.0; è una sorta di "ponte" tra questi due linguaggi.

Fonte: Wikipedia
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>DTD XHTML 1.0 Transitional</title>
 </head>

 <body>
  <p>contenuto</p>
 </body>

</html>

Link WRC al DTD XHTML 1.0

venerdì 25 maggio 2012

Visualizzare un testo a seconda del click

Come visualizzare un testo, a seconda del link cliccato

Vediamo come fare, con poche righe di codice PHP, per visualizzare un testo, che cambia a seconda del link cliccato.

Esempio dopo aver cliccato il link 2:

link1 | link2 | link3

Hai cliccato il link n. 2



<ul>
 <li><a href="?v=1"<?php if($_GET["v"]==1){echo' style="color:red"';}?>>
  link1
 </a> | </li>
 <li><a href="?v=2"<?php if($_GET["v"]==2){echo' style="color:red"';}?>>
  link2
 </a> | </li>
 <li><a href="?v=3"<?php if($_GET["v"]==3){echo' style="color:red"';}?>>
  link3
 </a></li>
</ul>
<h1>
 <?php 
    if(!$_GET["v"]){
     echo"Non hai cliccato ancora nessun link";
    }else{
     echo"Hai cliccato il link n. ".$_GET["v"];
    }
 ?>
</h1>

spieghiamo:

  1. Ho creato una struttura in HTML con <ul> e <li>, ma naturalmente, si può costruire la struttura HTML che si vuole;
  2. Imposto sull'href del link un valore con ?v= che poi utilizzerò per stampare un messaggio;
  3. Recupero sul titolo <h1> il messaggio "Non hai cliccato ancora nessun link", se manca un valore sul get !$_GET["v"], altrimenti stampo il messaggio personalizzato ""Hai cliccato il link n." + il numero impostato sul link;

giovedì 24 maggio 2012

Evidenziare i link di un menù

Come evidenziare il link cliccato in un menù

Esempio se ho cliccato link2:



Per far funzionare correttamente questo semplice script, che utilizza il  $_GET(), è necessario avere una pagina di tipo PHP.
Ad esempio se la nostra pagina si chiama: example.html, dovremo cambiare l'estensione da .html a .php.
Quindi la nostra pagina si dovrà necessariamente chiamare:  example.php

Vediamo il codice necessario per colorare il link del nostro menù
<ul>
 <li style="display:inline;">
  <a href="?v=1"<?php if($_GET["v"]==1){echo' style="color:red"';}?>>
   link1
  </a> | 
 </li>
 <li style="display:inline;">
  <a href="?v=2"<?php if($_GET["v"]==2){echo' style="color:red"';}?>>
   link2
  </a> | 
 </li>
 <li style="display:inline;">
  <a href="?v=3"<?php if($_GET["v"]==3){echo' style="color:red"';}?>>
   link3
  </a>
 </li>
</ul>

Spieghiamo:

  1. Ho creato una struttura con <ul> e <li> per visualizzare i link, che chiaramente può essere realizzata con il codiche HTML che si preferisce;
  2. Imposto l'href del link con ?v=
    Se ad esempio il link1 dovesse collegare la pagina home.php, il link sarebbe: home.php?v=1
  3. Recupero con $_GET["v"] il valore dal link;
  4. Coloro il link che ha il $_GET corrispondente al link cliccato.

DOCTYPE HTML 4.01 Strict

Codice HTML di un documento con DOCTYPE HTML 4.01 Strict

Il DTD strict, è più "severo" rispetto al Transitional. Con Strict si è costretti ad un codice senza errori. Il DTD Strict è in alcuni casi meno permissivo. Per cui se si desidera validare il codice della propria pagina, bisognerà fare più attenzione a quali tag utilizzare e soprattutto come utilizzarli.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

<html>
 
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>DOCTYPE HTML 4.01 Strict</title>
 </head>

 <body>
  <p>CONTENUTO</p>
 </body>

</html>

Link WRC DTD 4.01 Strict

mercoledì 23 maggio 2012

DOCTYPE HTML 4.01 Transitional

Codice HTML di un documento con DOCTYPE HTML 4.01 Transitional

HTML 4.0 nella sottoversione 4.01 è stato rilasciato il 24 dicembre 1999.
Una pagina HTML dovrebbe iniziare con la dichiarazione del DTD document type declaration, (dichiarazione del tipo di documento).
Per assurdo sarebbe possibile anche omettere tale dichiarazione, moltissimi siti internet lo fanno, più o meno volutamente.
Omettendo la dichiarazione del DTD, si può incorrere in visualizzazioni incontrollate e a interpretazioni arbitrarie da parte dei diversi Browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>DOCTYPE HTML 4.01 Transitional</title>
 </head>

 <body>
  <p>CONTENUTO</p>
 </body>

</html>

Link WRC al DTD 4.01 Transitional