Posts Tagged ‘tag’

Utilizzare lightbox su immagini caricate con innerHTML

Il lightbox è un’applicazione javascript per la visualizzazione delle immagini in maniera elegante. Per maggiori informazioni sull’utilizzo e per il download dei files andate qui.

Il lightbox è uno strumento molto utilizzato. Di recente mi è capitato di dover utilizzare il lightbox su immagini caricate dinamicamente all’interno di un div; dopo svariate prove sono giunto a utilizzare la seguente funzione javascript:

<script type="text/javascript" language="javascript">
function showImage(w,h,image) {
 var obj=document.getElementById("id_div");
 obj.innerHTML="";
 obj.innerHTML+="<a href='"+image+"' rel='lightbox'><img src='"+image+"' width='"+w+"' height='"+h+"'></a>";
 initLightbox();
 }
</script>

<div id="id_div">
</div>

La funzione showImage() va a scrivere all’interno del div con id uguale a “id_div” inserendo sia il tag <a> che il tag <img> con il metodo innerHTML, passando anche l’altezza e la larghezza che dovrà avere l’immagine. Ovviamente per poter far funzionare il lightbox bisogna inserire all’interno del tag <a> l’attributo rel=”lightbox”.
Dopodiché bisogna reinizializzare il lightbox tramite la funzione initLightbox(), questo accade perché ogni variazione dinamica dell’HTML sul codice delle immagini richiede la reinizializzazione del lightbox.
Nota: il primo innerHTML con argomento vuoto serve a evitare che le chiamate della funzione successive alla prima abbiano come effetto la sovrapposizione delle immagini precedentemente caricate.

Un’altra soluzione molto simile alla prima è la seguente:

<script type="text/javascript" language="javascript">
function showImage(w,h,image) {
 var obj=document.getElementById("linkID");
 var objIMG=document.getElementById("imgID");
 obj.href=image;
 objIMG.src=image;
 objIMG.width=w;
 objIMG.height=h;
 initLightbox();
 }
</script>

<div id="id_div">
<a id="linkID" rel="lightbox"><img id="imgID"  /></a>
</div>

La differenza rispetto al caso precedente sta nell’inserire a priori all’interno del div i tag <a> e <img> e nell’inserire dinamicamente i contenuti degli attributi.
L’utilizzo della funzione è molto semplice, basta richiamarla in un qualsiasi punto della pagina web, ad esempio tramite onclick dentro un tag.

Entrambe le soluzioni proposte sono state testate su firefox 4/5 e su IE9.

SEO – L’head, i tag meta e il file robots.txt

Per un buon posizionamento nei motori di ricerca è importante strutturare la prima parte della pagina Web in maniera appropriata popolando la parte <head> attraverso i principali tag. Tra questi citeremo i tag <title> e <meta>.

<title>

Il più importante tra i tag dell’<head> è sicuramente il tag <title> che deve contenere il titolo della pagina Web. E’ un parametro molto utilizzato dai motori di ricerca per l’indicizzazione della pagina quindi le parole contenute al suo interno devono rispecchiare le principali keyword contenute nella pagina.

<meta>

Vi sono diversi parametri che si possono impostare attraverso il tag <meta>, tra di essi però quelli che interessano maggiormente il SEO sono i parametri description, keywords e robots. Il loro utilizzo è del tipo:

<meta name="description" content="contenuto del tag"></meta>
<meta name="keywords" content="contenuto del tag"></meta>
<meta name="robots" content="contenuto del tag"></meta>

Vediamoli in dettaglio:

  • description, è utilizzato per fornire una descrizione della pagina e deve essere significativo in quanto viene spesso utilizzato dai motori per visualizzare quella pagina tra i risultati. Conviene non inserire mai troppe informazioni e limitarsi a una descrizione breve e concisa che contenga le principali keyword contenute nella pagina cercando di non superare i 100-150 caratteri;
  • keywords, contiene le principali keywords (una o più parole) della pagina in maniera non discorsiva, quasi ad elenco. Le keyword vengono separate tra loro da virgole e conviene non andare oltre le 25-30 keywords per pagina. Un tempo questo tag forniva una importante indicazione per i motori, oggi invece è quasi “evitato” (google lo considera ormai pochissimo) per l’uso improprio e indiscriminato che ne è stato fatto negli anni passati;
  • robots, serve a indicare al motore di ricerca se seguire e/o indicizzare la pagina Web. Il content di questo tag non è libero come per gli altri 2 ma bensì può assumere solo 4 configurazioni:


<meta name="robots" content="index, follow"></meta>
<meta name="robots" content="noindex, follow"></meta>
<meta name="robots" content="index, nofollow"></meta>
<meta name="robots" content="noindex, nofollow"></meta>

La parte index sta a indicare al motore di ricerca che può indicizzare la pagina e quindi può farla, eventualmente, visualizzare tra le SERP; viceversa, noindex comunica al motore che quella pagina non deve essere indicizzata. La parte follow indica al motore che può seguire i link contenuti nella pagina in questione per poter indicizzare le pagine ad essa collegate; nofollow indica al motore di non seguire i link all’interno della pagina. E’ preferibile utilizzare il meno possibile il tag robots e preferire l’inserimento del file robots.txt che vedremo tra poco. NOTA: se tale tag viene omesso di default la configurazione è index,follow.

Precisiamo una cosa importante: nei tag appena visti sopra, ovvero title, meta description e meta keywords utilizzate sempre parole e frasi contenuti nella pagina Web! L’utilizzo indiscriminato di parole e frasi non contenute nella pagina ma inseriti in tali tag potrebbe portare a penalizzazioni e quindi alla visualizzazione della pagina molto più in basso nelle SERP!

Terminiamo questo articolo spendendo due parole sul file robotx.txt che, come accennato sopra, serve a indicare al motore di ricerca quali pagine indicizzare e quali no. Tale file va inserito nella root del sito, ovvero dove può essere visualizzato attraverso l’url principale. Un esempio molto semplice di tale file è il seguente:


User-Agent: *
Disallow: /pag_protetta/
Allow:/

Questo robots.txt si riferisce a tutti i motori di ricerca (User-Agent: *) e ci dice che i file all’interno della cartella “pag_protetta” (la vostra cartella che non volete far indicizzare) non vanno indicizzati mentre ciò non vale per tutte le altre pagine (Allow:/). Si possono personalizzare le regole in base ai motori di ricerca inserendo al posto di “User-Agent: *” il nome dello spider desiderato (googlebot per google, slurp per yahoo ecc…).

Principali funzioni php per lavorare sulle stringhe

PHP mette a disposizione molte funzionalità utili per lavorare sulle stringhe e facilitando il lavoro del programmatore. In questo articolo vedremo come utilizzare alcune funzioni che sono di uso ricorrente nel trattamento delle stringhe.

Le prime funzioni che andremo a vedere riguardano la forma del testo. PHP permette di modificare una stringa (intesa come singola parola o come intera frase) in modo da trasformarla in tutto o in parte in maiuscolo o minuscolo. Le funzioni strtoupper() e strtolower() permettono di modificare la stringa trasformando ciascuna lettere rispettivamente in maiuscolo o in minuscolo. Si potrebbero usare ad esempio per modificare un indirizzo in email tutto in minuscolo oppure un codice fiscale tutto in maiuscolo come di solito vengono rappresentati. Possiamo modificare solo la prima solo la prima lettera di una stringa portandola maiuscola con ucfirst() oppure tutti i primi caratteri di ogni parola con ucwords().

La funzione strlen() ci permette di conoscere il numero di caratteri all’interno di una stringa mentre se volessimo ottenere una sottostringa  potremmo utilizzare la funzione substr() che accetta 3 parametri: la stringa, il punto di partenza e la lunghezza della sottostringa partendo da quel punto.  Il punto di partenza può anche essere negativo, in questo caso si inizia a contare dalla fine della stringa da elaborare.  Un’altra funzione ricorrente è str_replace() che accetta in ingresso 3 parametri:  il primo è la frase (o parola) da sostituire, il secondo la frase in sostituzione e il terzo la stringa da elaborare.

Adesso passiamo a funzioni molto utili quando si lavora in con delle form html. La prima di esse è la funzione nl2br() che trasforma i caratteri di new line (ovvero gli \n, a capo) nei corrispondenti tag <br> di html, che si possono ritrovare dalla compilazione di una textarea. Per eliminare invece qualsiasi tag html e/o javascript  si può utilizzare strip_tags(). La funzione trim(), invece, permette di eliminare gli spazi bianchi all’esterno della stringa (all’inizio e alla fine) ma anche i caratteri di \n e \r. Le varianti di questa funzione sono ltrim() e rtrim() che ripuliscono la stringa allo stesso modo di trim() ma rispettivamente all’inizio e alla fine.

Se non si vuole far interpretare il codice html inserito si possono utilizzare le funzioni htmlspecialchars() e htmlhentities(). La prima trasforma in entità html i caratteri &, “, < e >; la seconda, invece, codifica in entità html tutti i caratteri che hanno una corrispondenza con tale codifica. Vengono spesso usate per motivi di sicurezza quando non si vogliono far inserire all’utente tag html che posso pregiudicare la grafica del sito o per altri scopi di sicurezza. Legata alla sicurezza è anche la funzione addslashes() che immette i caratteri di escape davanti a quei caratteri che possono generare errore utilizzando un dbms. La funzione inversa a addslashes() è stripslashes() che rimuove invece tutti i caratteri di escape inseriti dalla prima funzione. Da tenere in considerazione è la configurazione del php.ini: infatti, se la direttiva magic_quotes_gpc è impostata su on non vi è il bisogno di utilizzare addslashes() in quanto tutti i dati provenienti da form o da cookie verranno automaticamente modificati.

Vediamo infine come trasformare una stringa in un array e viceversa. La funzione explode() accetta in ingresso 2 parametri: un carattere separatore e la stringa. Il risultato della funzione è un array che ha gli elementi della stringa, ogni volta che si incontra un carattere separatore viene impostato un nuovo elemento nell’array. La funzione inversa è la funzione implode() che trasforma un array in una stringa. Anch’essa ha 2 parametri, il carattere separatore e l’array da convertire; il risultato è una stringa composta dalla sequenza di stringhe contenute nell’array separate dal carattere separatore voluto.

Presto posterò gli esempi per ogni funzione illustrata. Naturalmente queste non sono le sole funzioni che PHP mette a disposizione per manipolare le stringhe, ma sono quelle che una volta imparate verranno utilizzate ogni volta ce ne sia il bisogno.