Il redirect permette di reindirizzare la pagine verso un’altra, senza interazione da parte dell’utente e inoltrando perciò le visite verso la nuova destinazione. Vi sono molti modi diversi di fare un redirect, noi vedremo i metodi per i principali linguaggi Web.
Metodo HTML
E’ sufficiente creare una pagina con il seguente codice:
con la quale sostanzialmente indichiamo che la pagina è appunto un redirect, che il redirect verrà effettuando entro 4 secondi e che la destinazione del redirect è la pagina http://www.google.it . Ovviamente se vogliamo che il redirect sia immediato è sufficiente inserire il valore 0 al posto del 4 . Fate attenzione a questo punto: i valori dallo 0 all’1 sono considerati dalla maggior parte dei motori di ricerca come permanent redirect ( codice html 301 ), mentre i valori maggiori di 2 sono considerati temporary redirect.
Metodo Javascript
Creiamo una pagina .html nella quale inseriamo il seguente codice:
In questo caso c’è poco da aggiungere: si crea un piccoloscript javascript nel quale appunto utilizziamo la direttiva location.replace per indicare la presenza di un redirect e dunque la nuova destinazione.
Metodo Php
Nella pagina php in cui vogliamo fare il redirect inseriamo il seguente codice:
In asp sostanzialmente il procedimento è molto simile al metodo php; ecco il codice da inserire nel nostro file asp su cui vogliamo effettuare il redirect:
In Coldfusion è sufficiente utilizzare la seguente riga:
<cflocation url=”http://www.google.it”>
Anche se non è fondamentale, è comunque molto importante conoscere i principali codici di stato HTML : bisogna fare molta attenzione se non si vuole perdere traffico o posizioni sui motori di ricerca. Ecco i principali:
300 Multiple Choices 301 Moved Permanently 302 Found 303 See Other 304 Not Modified 305 Use Proxy 306 (Unused) 307 Temporary Redirect
Una spiegazione più approfondita su tali codici è possibile trovarla in questa pagina , ovvero nelle pagine del World Wide web Consortium.
Assegnare una classe ad un elemento HTML è ovviamente una cosa molto semplice, ma spesse volte abbiamo bisogno di variare dinamicamente lo stile di un oggetto HTML, ad esempio a seguito di eventi come “onmouseover” o “onclick” .
Supponiamo ad esempio di voler gestire l’apparizione di due div, creando una sorta di menu. L’esempio che vogliamo realizzare è visibile qui.
Non soffermiamoci su come sono implementate le classi CSS: l’unica istruzione importante da tenere presente per le classi dei div che contenugono il testo è il valore di default display:none; , che appunto di default permette di nacondere il contenuto dei div in questione.
La tecnica per realizzare un menu di questo tipo è in realtà molto semplice: quando con il cursore ci troviamo sopra uno dei due link di menu ( “primo” o “secondo”, per interderci ), viene attivato l’evento javascript “onmouseover“, attraverso il quale richiamiamo la funzione “openDiv“.
Questa funzione non fa altro che settare alcune direttive in base al link menu in cui il cursore si trova: analizziamo il primo caso, il secondo è sostanzialmente uguale.
Nel primo caso, quando cioè il mouse si trova sul link menu “primo”, la funzione javascript “openDiv” setta i seguenti parametri:
La prima riga è la più importante, perchè è quella che di occupa di cambiare il valore dell’attributo class del div di riferimento, ovvero di cambiare la classe di stile per l’elemento (id) passato come parametro. La successiva riga non fa altro che impostare l’attributo display sul valore ‘inline‘ , in modo da visualizzare il contenuto del div corrispondente al link menu passato come parametro. Le ultime due righe compiono sostanzialmente i passi complementari sull’altro div (si imposta la classe css senza lo sfondo e si nasconde il div), in modo da creare l’effetto di alternanza.
Per chi avesse ancora dubbi, può rivedere il codice dell’esempio seguendo questo link.
Vi sono vari modi per controllare i dati che riceviamo da un form html: se stiamo utilizzando PHP possiamo servirci di alcune funzioni messe a disposizione dal motore PHP ( come ad esempio empty() ), ma possiamo anche sceglire un’altra strada, Javascript.
Il controllo di campi numeri e testuali è abbastanza banale, e in rete di trovano migliaia di esempi: ciò che non si trova molto spesso è il controllo delle mail, e soprattutto il controllo da effettuare per verificare la validità di una mail.
Supponiamo di avere un form fatto in questo modo:
<form name=”emailForm” method=”post” action=”">
<p>Inserisci il tuo nome:<br>
<input name=”name” type=”text”>
<br>
<span>Inserisci il tuo indirizzo e-mail:</span><br>
<input name=”email” type=”text”>
<br>
ecc.
<input name=”Submit” type=”submit” value=”Invia” onclick=”return validateForm();”>
</form>
Questo form ha diversi campi, a noi interessa il campo email e il campo Submit : quest’ultimo, una volta cliccato, chiama una funzione Javascript, validateForm(); che si occupa appunto di validare il form. Come abbiamo detto precedentemente, concentriamoci sul controllo e sulla validazione della mail. Le righe di codice da inserire nella funzione di cui sopra per raggiungere il notro obiettivo sono:
/*
Se il valore del campo email del form emailForm è vuoto, salviamo nella variabile errmsg, oltre a possibili errori per controlli precedenti, un messaggio che specifichi la mancanza della mail
*/
if ( !document.emailForm.email.value ) {
errmsg += ‘\nDovete immettere la MAIL’;
} else {
/*
Se il campo mail è stato effettivamente completato, controlliamo però la validità di tale campo: per fare questo utilizziamo le espressioni regolari e alcune funzioni native di Javascript. Quindi creiamo un oggetto “espressione regolare” che salviamo nella varibile “espressione“, recuperiamo il valore della mail inviato tramite il form e lo salviamo nella variabile stringa ; infine facciamo il confronto tra questi due valori.
Se stringa contiente un valore che non rispetta le regole imposte dall’espressione regolare, allora inseriamo un messaggio appropriato, altrimenti non si verificaheranno problemi e la computazione potra proseguire tranquillamente.
*/
var espressione = new RegExp(”^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+[\.]([a-z0-9-]+)*([a-z]{2,3})$”);
var stringa = document.emailForm.email.value;
if ( !espressione.test(stringa) )
errmsg += ‘\nDovete immettere una MAIL VALIDA’;
}
Le espressioni regolari vengono usate particolarmente per manipolare stringhe, e quindi in linguaggi come Perl, che bene si adattano alla gestione e configurazioni di alcune caratteristiche particolari dei server.
L’argomento delle espressioni regolari è molto vasto, e lo rimandiamo ad ulteriori chiarimenti futuri: per chi volesse iniziare ad approfondire questo affascinante studio può dare un’occhiata a questo indirizzo qui.
Nell’utilizzare sistemi di commenti o post, a volte diventa necessario mettere un limite al numero di caratteri che è possibile inserire nella textarea dedicata, per evitare la copiatura di articoli o l’inserimento di commenti che diventano più lunghi dell’articolo stesso.
Questo esempio è utilie a tale scopo: in pochi passi si configura un contatore javascript che blocca l’inserimento dei caratteri all’interno della textarea controllata una volta che viene superato il limite imposto. L’esempio è scaricabile qui.
In un file javascript .js salviamo il seguente codice:
A questo punto non ci resta che richiamare con il solito tag ‘<script src”..”></string>’ il file javacript appena creata, ed infine configurare la texarea che vogliamo controllare:
Il valore “2000″ è configurabile, e rappresenta il massimo numero di caratteri che è possibile inserire: lo “span” invece è dove verrà visualizzato il numero di caratteri rimanenti, calcolati a mano a mano che vengno inseriti.
Nel post di qualche giorno fa abbiamo introdotto JQuery con un esempio pratico, implementando un div a comparsa con un effetto davvero elegante e graficamente accattivante.
L’esempio che vedremo in questo articolo è quello di una gallery di immagini da aggiungere sul vostro sito, una gallery però veramente accattivamente, con un incredibile effetto 3D per “sfogliare” le foto e l’effetto lightbox per l’ingrandimento dell’immagine. Una demo dell’esempio che andremo a completare è disponibile qui.
L’esempio si basa sull’utilizzo del framework JQuery in collaborazione con un plugin per JQuery , il plugin Interface. Per lavorare,dunque, dobbiamo scaricare il framework e il plugin che potete trovare rispettivamente qui e qui.
Una volta inclusi i file .js scaricati, è sufficiente sostituire nel div ‘<div id=”carousel”>’ le immagini che intendete includere nella vostra gallery. Nel caso in cui fossero molte, potreste pensare di fare un ciclio o un array, che sicuramente semplificato di parecchio la vita.
Potete scegliere se le immagini devono aprire un lik o l’ingradimento della stessa con un effetto davvero molto accattivante: nell’esempio, l’immagine di Alonso, quella che una volta caricata la pagina si trova nel centro, si apre con l’effetto lightbox, mentre le altre puntano a pagine dedicate ad alcune squadre di calcio del nostro quotidiano sportivo preferito, Realsports.it .La differenza sta nel come impostiamo il link, vediamo un esempio:
Il link al punto 1. è quello che utilizza l’effetto lightbox per aprire ed ingrandire l’mmagine, mentre nel punto 2. viene utilizzato il link ad una pagina, nel nostro esempio link2.php .
L’ultimo passo che ci rimane da fare è inserire lo script che richiama le funzioni di gestione della gallery. Analizziamo lo script:
/*
I comandi seguenti rappresentano le direttive che configurano la gallery: la larghezza, l’altezza, la larghezza delle immagini che compaiono dietro alle altre per dare l’effetto 3D, l’elemento html utilizzato per riconoscere gli oggetti della gallery ( nel nostro caso il tag <a> ) , il livello di riflessione e di velocità di rotazione.
*/
itemWidth: 110,
itemHeight: 62,
itemMinWidth: 50,
items: ‘a’,
reflections: .5,
rotationSpeed: 2.7
}
);
$.ImageBox.init(
{
/*
Link all’immagine di Loading che verrà utilizzata durante il caricamento della foto ingrandita usando link del tipo 1. nell’esempio precedente
*/
loaderSRC: ‘images/imagebox/loading.gif’,
/*Link all’immagine di Chiusura su cui cliccare per chiudere la foto ingrandita usando link del tipo 1. nell’esempio precedente */
closeHTML: ‘<img src=”http://www.realsports.it/resources/tRealSportsTemplate/arrow_realsports.gif” />’
}
);
};
</script>
A questo punto dovrebbe essere chiaro il funzionamento di questa gallery: aggiungiamo solo una precisazione. Per chi intesse personalizzare lo stile, può tranquillamente modificare a piacimento gli stili presenti nella pagine di esempio, l’importante è ovviamente non modificare gli identificati di classe (es. #ImageBoxCaption) .
Ajax ( Asynchronous JavaScript and XML ) è una tecnica di sviluppo web che ha lo scopo di proporre interattivà senza tuttavia dover ricaricare la pagina ad ogni interazione con l’utente. In sostanza, Ajax permette attività in backgroud rispetto ad eventi principali: un esempio tipico di utilizzo di questa tecnica è l’aggiornamento dinamico di elenchi, per esempio utilizzato ultimamente nei social networks. Mentre l’utente può scorrere le notizie e qundi interagire con la pagina, l’elenco delle news inserite si autoaggiorna senza tuttavia dover attedere che sia l’utente stesso ad effettuare l’aggiornamento della pagina.
Questa tecnica ha ormai aperto le porte a nuove tipologie di applicazioni, sempre più interattive e sempre più accattivanti. Ma come funziona Ajax? Ecco un esempio passo-passo di utilizzo di queste tecnologie: i commenti si possono leggere direttamente sul codice, in modo da facilitare la comprensione e velocizzare l’apprendimento. Supponiamo che questo codice sia contenuto in un file
“ajax1.js” :
/*
Questa è la funzione principale di creazione: si crea la variabile obj che conterrà il riferimento all’oggetto XMLHttpRequest l’oggetto principale su cui si agisce. Per garantire la compatibilità viene eseguito un controllo sul tipo di browser, visto che a seconda della tipologia l’oggetto obj viene creato in modi diversi. Se il browser è “non - Internet Explorer”, allora si utilizza la funzione XMLHttpRequest altrimenti se il browser è Internet Explorer si utilizza ActiveXObject(”Microsoft.XMLHTTP”). Questa differenza ha una base teorica, che non trattiamo in questa sede, occupandoci qui di “pura pratica”. Se volete approfondimenti scriveteci, e provvederemo ad esaudire le vostre richieste!
*/ function createXHR() {
var obj;
if (window.XMLHttpRequest) { // Non Internet Explorer
obj = new XMLHttpRequest();
} else if (window.ActiveXObject) { // Internet Explorer
obj = new ActiveXObject(”Microsoft.XMLHTTP”);
}
return obj;
}
obj=createXHR();
/*Questa è la funzione che gestisce e analizza lo stato dell’applicazione: si procede innanzittutto con dei controlli, che possiamo fare analizzando lo stato dell’oggetto obj precedentemente istanziato. Se durante il cambiamento si stato dell’oggetto obj non si sono verificati errori, allora le funzioni readyState e status ritorneranno rispettivamente i valori 4 e 200, valori che indicano appunto l’avvenuto caricamento con successo. A questo punto possiamo scrivere il codice che deve eseguire l’appilcazione per raggiungere il suo obiettivo. Nel nostro caso, una volta ricevuta la richiesta, la nostra piccola applicazione Ajax provvedrà a creare una select caricando il contenuto dinamicamente, cioè una select che cambia le opzioni in base ad una scelta fatta dall’utente ma senza il bisogno di ricaricare l’intera pagina.
*/
function onStateChange() { // Cambiamento Stato
if (obj.readyState == 4) { // Caricamento Avvenuto
if (obj.status == 200) { // con successo
var div = document.getElementById(’risultato’);
if ( document.uniqueID ) {
var select = document.createElement(”<select id=’district’ name=’district’ ></select>”);
} else {
var select = document.createElement(”select”);
}
select.setAttribute(”name”,”district”);
select.setAttribute(”id”,”district”);
select.setAttribute(”onchange”,”invia2();”);
list = new Array();
list1 = new Array();
list2 = new Array();
/*IMPORTANTE: tramite la proprietà responseText dell’oggetto obj è possibile recuperare valori prodotti dal file che si occupa di gestire la richiesta al server, per esempio il file che effettua una query e che nel nostro caso è xmlHttpRequest.php*/
string = obj.responseText;
list = string.split(”;”);
list1 = list[0].split(”\n”);
list2 = list[1].split(”\n”);
for ( i=0; i < list1.length; i++ ) {
op = new Option(list2[i], list1[i]);
select.options[i] = op;
}
document.getElementById(”risultato”).innerHTML=”";
div.appendChild(select);
/*La funzione invia() è quella da cui inizia l’attività: infatti questa funzione non fa altro che inviare alla funzione inviaXHR() il riferimento all’oggetto obj e il link del file di gestione
*/
function invia() {
/*Questo è il cuore dell’applicazione: attraverso una richiesta POST, inviamo con la funzione send() i dati al file xmlHttpRequest.php, chepotrà svolgere il suo compito indipendentemente dalle altre interazioni che l’utente potrà avere con la pagina. Nel nostro caso, supponiamo che in questo file ci sia il codice per effettuare una query al database, e che con i risultati ottenuti si crei l’insieme delle opzioni che andranno a “riempire” la select di cui sopra. Supponiamo di aver creato una stringa in cui ogni attributo value dell’opzione è separato dal valore visibile dal carattere “|”, cioè:
// caricamento in corso…fornisce il feedback all’utente document.getElementById(”risultato”).innerHTML=”caricamento in corso…”;
obj.setRequestHeader(’Content-Type’, ‘application/x-www-form-urlencoded’);
//richiamiamo la funzione onStateChange analizzata precedentemente obj.onreadystatechange = onStateChange;
/*IMPORTANTE: a seconda del valore country possiamo gestire la select
che vogliamo creare, e quindi possiamo aggiornarla in base a determinati valori che vengono assegnati a country
*/
country=escape(document.myform.country.value);
//Inviamo al file di gestione .php alcuni parametri, attraverso il metodo POST
obj.send(”country=”+country); // Trasferimento
} catch (e) {
/* Se si verificano problemi, l’elemento HTML che doveva diventare una select verrà sostituiro con un ?, che indica appunto il verificarsi di errori o problemi
*/
document.getElementById(”risultato”).innerHTML=”?”;
alert(”Errore: “+e);
}
}
Per chi avesse le idee ancora confuse, riassumiamo brevemente ciò che succede.
Creaimo l’oggetto obj.
Supponiamo di cliccare su un pulsante che richiama la funzione javascript “invia()”; attiviamo così una richiesta al server.
Tramite la funzione inviaXHR gestiamo effettivamente la richiesta: il metodo utiliaazto è il POST (con cui possiamo inviare dati al file di gestione) e il file di gestione è xmlHttpRequest.php, che nel nostro caso è scritto in PHP ma che potrebbe essere scritto in un qualsiasi linguaggio di programmazione. La funzione send() ci permette di inviare parametri al file di gestione, parametri che vengono inviati attraverso il metodo POST, appunto.
Il file di gestione può fare qualsiasi cosa per svolgere il suo compito: supponiamo nel nostro caso che il file effettui una query al database e restituisca una stringa.
Viene richiamata la gestione di stato dell’oggetto, onStateChange, che analizza l’andamento della richiesta che abbiamo effettuato. Se tutto è andato bene, recuperiamo attraverso la proprietà responseText dell’oggetto obj la stringa prodotta dal file di gestione. Possiamo lavorare sulla stringa restituita, creando ad esempio una select con delle option che dipendono dal valore di un parametro scelto dall’utente, nel nostro caso country.
Tutto questo lavoro viene svolto in background, senza che l’utente di accorga di nulla, ma soprattutto permettendo all’utente di continuare ad interagire con la pagina liberamente e come se nulla stia accadendo.
Questo articolo spiega come sia possibile utilizzare file javascript di grandi dimensioni senza tuttavia appesantire il caricamento del proprio sito web. Quando si lavora framework di ultima generazione, è assolutamente necessario adottare un sistema per accellerare il caricamento dei file .js .
Ma qui ci occupiano di tutt’altro: nonostante le innumerevoli risorse disponibili, non è facile trovare una guida che spieghi in modo chiaro e utile come in effetti sia possibile utilizzare uno tra i framework javascript più potenti in circolazione, JQuery.
Per questo motivo, andremo a scrivere il codice per creare qualche simpatico effetto: imparerete così le basi dell’utilizzo del framework, e non vi rimarrà che studiare in dettaglio la documentazione per approfondire le vostre conoscenze.
Eseguiti i passi come indicato nell’articolo a questo indirizzo qui, abbiamo a disposizione il framework per iniziare il nostro lavoro…vediamo qualche esempio!
Esempio 1
Visto che qualsiasi cosa noi facciamo con JQuery manipola o “legge” il DOM (Document Object Model), dobbiamo assicurarci che tutto ciò che intendiamo svolgere (comandare eventi con il click del mouse, ad esempio) sia “letto” non appena è letto il DOM. Per questo motivo, la prima funzione che vedremo sarà:
$(document).ready(function() {
// azioni da svolgere quando il DOM è pronto
});
Questa è la funzione principale per JQuery, quella che solitamente non mancherà mai nei vostri script. Ma vediamo il nostro primo effetto, un div che compare e scompare cliccando su un link:
Potremmo spiegare questa funzione a parole in questo modo:
- Quando si clicca [ click(function(){… ] sul link identificato dall’id “link-toggle” [ $(’a#link-toggle’) ] si richiama la funzione “toggle(400);” sul div identificato dall’id “div-box” [ $(’#div-box’) ]. Fatto questo ritorna”false”;
A questo punto, possiamo creare la nostra pagina html, in cui richiamiamo lo script e inseriamo gli elementi che ci servono, ovvero il link e il div:
<a id=”link-toggle” href=”#”>Clicca qui</a>
<div id=”div-box”>Qui ci vuole un testo abbastanza lungo</div>
A questo punto, se tutto è stato fatto correttamente, sarà possibile cliccare sul link che abbiamo creato e…..avete visto che effetto?? E abbiamo scritto solo 3-4 righe di codice!! Provate ora ad immaginare cosa è possibile fare con JQuery…
Per chi avesse dubbi, segue il codice della pagina come dovrebbe risultare a conclusione lavori:
<html>
<head>
<title>JQuery - Div scorrevole</title>
<script src=”jquery-1.2.1.js”></script>
<script>
$(document).ready(function() {
$(’a#link-toggle’).click(function(){$(’#div-box’).toggle(400);
return false;});
});
</script>
</head>
<body>
<a id=”link-toggle” href=”#”>Clicca qui</a>
<div id=”div-box”>
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
Qui ci vuole un testo abbastanza lungo
</div>
</body>
</html>
Esempio funzionante disponibile al seguente indirizzo Esempio scaricabile al seguente indirizzo
Non vi resta che salvare questo codice in un file html, scaricare JQuery a questo indirizzo e sistemare il file nella stessa cartella della pagina html…ed ecco a voi un div a comparsa con un gran effetto grafico!!
