Consiglio la lettura questo articolo che ho trovato molto interessante perché mi ha aperto gli occhi su alcuni aspetti di javascript che non conoscevo.

Mi ha molto colpito il fatto che javascript è largamente utilizzato anche fuori dai browser.

I 5 miti da sfatare sono questi:

• javascript = java (chi non ha mai sentito questa affermazione? )
• javascript è un linguaggio “giocattolo”
• javascript si trova solo nei browser
• javascript è inconsistente e pieno di bug
• javascript non è “orientato agli oggetti”

Per approfondire i motivi per cui queste affermazioni sono sbagliate non ti resta che continuare a leggere l’articolo su sitepoint.com!

Come sempre le dichiarazioni di Steve Jobs hanno fatto tanto parlare, bloggare e twittare.

Fra le news di Apple.com è stato pubblicato un articolo in cui Steve Jobs, dopo una lunga argomentazione, spiega i motivi per cui i dispositivi Apple non saranno dotati della tecnologia Adobe Flash:

Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short.

The avalanche of media outlets offering their content for Apple’s mobile devices demonstrates that Flash is no longer necessary to watch video or consume any kind of web content. And the 200,000 apps on Apple’s App Store proves that Flash isn’t necessary for tens of thousands of developers to create graphically rich applications, including games.

New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.

Il succo è questo:

• Flash è nato negli anni dei personal computer, intesi come “display + case + mouse + tastiera”
• le funzionalità dei dispositivi Apple e delle centinaia di migliaia di “apps” dimostrano che Flash non è indispensabile per raggiungere determinati livelli di grafica e multimedialità
• questi sono gli anni dei dispositivi mobili, cioé dei dispositivi a basso consumo, touch screen, e che utilizzano gli standard web “aperti”, campi in cui Flash sembra essere inadatto e un po’ arretrato

Infine, Jobs conclude dicendo che Adobe dovrebbe concentrarsi nel creare strumenti che sfruttino le potenzialità di HTML5.

Partendo dal fatto che non sono un fanatico Apple, che ho solo un iPod (della prima generazione! ), e che non ho nulla contro Adobe… secondo me, Steve Jobs ha ragione! E anche Microsoft la pensa così.

Audio e Video player

Prima che i multimedia player venissero implementati con Flash, si faceva largo uso di Real Player e Windows Media. Funzionavano. Ma quanto tempo si perdeva a scaricare e installare i plugin e gli ActiveX!?

Se andava tutto liscio, in pochi minuti era tutto pronto; se per qualche strano motivo il browser o il sistema operativo non erano compatibili si rischiava di perdere delle ore fra riavvii, download e installazioni.

Poi è arrivato Flash con un plugin di gran lunga più leggero, semplice e immediato nell’installazione.

La prima volta che ho visto un video player realizzato con Flash è stato su YouTube (probabilmente uno dei primi siti con un video player Flash) il cui successo, secondo me, è dovuto anche ai vantaggi del plugin di Flash.

Gestire audio e video con Flash significa programmare in ActionScript un player che gestisca lo streaming e che permetta le operazioni più comuni (es. play, stop, volume). Oppure, se si prende la via più facile, si cerca un player realizzato da altri, si impara e si inserisce nella pagina.

Gestire audio e video con Html5 significa inserire nella pagina i tag <audio> e <video> (proprio come si fa per le immagini con il tag <img />), segnalare al tag il file da riprodurre e basta! Queste sono le operazioni minime per riprodurre un file multimediale. Un player più complesso lo si può sempre realizzare con un po’ di html, css e javascript.

Senza sprecare ulteriori parole, ecco cosa può fare l’HTML5:

• 7 stupendi e funzionanti video player | http://speckyboy.com/2010/04/23…
• Javascript Audio Interface | http://hyper-metrix.com/misc/jai/
• jPlayer, plugin jquery per la gestione di file audio| http://www.happyworm…

Grafica e animazioni

Flash ha il merito di aver introdotto molti ottimi strumenti che hanno permesso di realizzare siti graficamente complessi e ricchi di animazioni, mantenendo comunque una certa efficienza. Fra gli svantaggi c’era ancora la necessità del plugin e l’acquisto del software, però i risultati ottenuti erano sorprendenti.

Tuttavia javascript, grazie ai miglioramenti e alla maggiore compatibilità con i vari browser, ha iniziato ad essere sempre più utilizzato per ottenere le piccole interattività della pagina (es. tooltips, ridimensionamenti, validazione form).

Attualmente nel campo della grafica web e delle animazioni non si può dire che Flash sia obsoleto. Ci sono però delle animazioni realizzate con javascript e canvas che ti lascererebbero a bocca aperta!

Se non ci credi dai uno sguardo a Chrome Experiments: animazioni bellissime e complesse realizzate interamente con javascript e canvas.

I nuovi tag HTML5 per il multimedia

Come utenti e come web designer, il fatto di aver bisogno di plugin e ActiveX per far funzionare correttamente un sito o un’applicazione web è qualcosa di estremamente fastidioso e limitante.

Infatti, il maggior vantaggio dell’HTML5 consiste proprio nella gestione di contenuti grafici e multimediali senza installare componenti aggiuntivi. In fondo era quello che volevamo, giusto?!

A questo proposito, ecco i nuovi tag HTML5 per la gestione della grafica e dei contenuti multimediali:

<audio>, gestisce i flussi audio (anche in streaming).

<canvas>, contenitore per grafica creata con appositi script.

<source>, tag generico per sorgenti multimediali di vario tipo (funziona come i tag <audio> e <video>).

<video>, gestisce i flussi video (anche in streaming).

Documentazioni utili

• Documentazione ufficiale del W3C | http://www.w3.org/TR/html5/
• Dive Into HTML5 by Mark Pilgrim | http://diveintohtml5.org/
• Native Audio in the browser | http://html5doctor.com/native-audio…

Curiosità

• HTML 5 or HTML5? | http://meiert.com/en/blog/20090911/html-5-or-html5/
• HTML5 Video Destruction | http://www.craftymind.com/factory/html5video…
• HTML5 Canvas and Audio Experiment | http://9elements.com/io/projects…

In questo articolo non verranno descritti dei metodi per la riduzione delle richieste HTTP ma parlerò delle modifiche e degli strumenti che ti permetteranno di ottimizzare i componenti della pagina per velocizzarne le relative richieste HTTP.

Ottimizzare le immagini

Anche se l’ottimizzazione non riduce le richieste http, è comunque importante per abbassare i tempi di caricamento delle pagine.

Ottimizzare un’immagine non è immediato; spesso sono necessarie molte prove e test per individuare il giusto bilanciamento fra qualità e dimensione del file.

Generalmente la compressione di un immagine è un’operazione da eseguire manualmente prima di caricare l’immagine nel proprio sito. Per fare ciò esistono numerosi script e tool gratuiti. Eccone alcuni.

Compressione di file CSS e Javascript

Questa pratica (in inglese chiamata “minification”) consiste nel rimuovere dal codice tutti i caratteri non necessari in modo da ridurre la dimensione del file. Tecnicamente avviene quanto segue:

• vengono ristretti i nomi di variabili
• caratteri di spaziatura come tab, a capo e spazio vengono eliminati (dove possibile)
• vengono cancellati tutti i commenti

ATTENZIONE. Dopo la compressione il funzionamento degli script e i nomi delle funzioni rimangono invariati, quindi non è necessario modificare i file di template. In altre parole, i nomi delle variabili che vengono modificati sono i parametri locali delle funzioni, che non influenzano la modalità di chiamata delle funzioni.

Offuscare il codice Javascript

Offuscare il codice (in inglese “obfuscate”, “obfuscation”) significa comprimerlo e trasformarlo in modo che risulti illeggibile (per i programmatori) per evitare che venga effettuato il cosiddetto reverse engineering, il procedimento attraverso cui è possibile leggere, capire ed utilizzare il codice di uno script.

PRO: si raggiunge un ottimo livello di compressione, riducendo notevolmente la dimensione dello script.

CONTRO: è un procedimento molto complesso attraverso cui si rischia di generare bug e malfunzionamenti; pertanto si consiglia di limitarsi esclusivamente a comprimere il codice anziché offuscarlo.

Servizi web, librerie, software

Ecco un po’ di strumenti e servizi web per la compressione e l’offuscamento di file Javascript e CSS. Inizialmente trovi quelli riguardanti Javascript; in basso potrai vedere tutti quelli per la compressione di CSS.

YUI Compressor

YUI Compressor è la più famosa libreria (open source) per la compressione di file CSS e Javascript. La compressione Javascript elimina commenti, caratteri di spaziatura e accorcia i nomi delle variabili. La compressione CSS utilizza un compressore basato su espressioni regolari.

JSMin

JSMin è un filtro che rimuove commenti e caratteri di spaziatura dai file Javascript. Generalmente la dimensione del file viene dimezzata. Questa libreria incoraggia i programmatori a esprimersi liberamente evitando che si preoccupino di risparmiare spazio. In fondo alla pagina puoi trovare i link per scaricare l’eseguibile MS-DOS.exe oppure i codici sorgenti in C, C#, Java, JavaScript, Perl, PHP, Python, OCAML, Ruby.

DojoToolkit ShrinkSafe

Dojo, il famoso toolkit javascript, utilizza uno strumento per ridurre la dimensione, e quindi il tempo di caricamento, dei file Javascript. La particolarità sta nel fatto che invece di ricorrere alle solite espressioni regolari, Dojo Compressor è basato su Rhino, un javascript engine del progetto Mozilla. Quindi, poiché legge il flusso effettivo del codice javascript, può avere una visione migliore del contesto in cui una variabile viene letta e/o scritta, rispetto alle espressioni regolari.

Packer

Semplice servizio web per la compressione e l’offuscamento di codice Javascript. La libreria è disponibile anche per PHP e .NET. Download: http://dean.edwards.name/download/#packer.

JavaScript Obfuscator and Minifier

Librerie PHP per l’esecuzione da riga di comando. Richiedono la versione 5.2 (o superiore) di PHP CLI binary. Windows non è supportato e, a detta dello sviluppatore, non lo sarà mai.

jsobf: compressa e offusca codice Javascript.

jsfmt: effettua il processo inverso su un codice che ha subito compressione e offuscamento.

Download: http://web.2point1.com/2008/09/07/jsfmt-and-jsobf-available-for-download/.

Demo: http://timwhitlock.info/plug/examples/JavaScript/j_obfuscate.php.

SmartOptimizer

SmartOptimizer (precedentemente chiamata JSmart) è una libreria PHP che si occupa di comprimere, offuscare, memorizzare in cache, fondere più file o stampare gli script direttamente nella pagina.

pack:tag

Libreria JSP che compressa e combina risorse (come Javascript e CSS) e li memorizza nella cache del browser o in un file generato dinamicamente. Questo script si può inserire facilmente all’interno delle pagine e lavora in maniera trasparente sia all’utente sia allo sviluppatore.

ObfuscateJS

Progetto Java per la compressione e l’offuscamento di codice javascript. Si occupa di rimuovere caratteri di spaziatura e commenti, e di accorciare i nomi delle variabili locali.

JsCompress

Servizio web per la compressione di codice javascript. Si può scegliere di eseguire la compressione con JsMin o con Packer. Molto interessante.

Javascript Minifier

Servizio web (basato su JsMin) per la compressione di codice javascript. Puoi decidere se effettuare direttamente il download oppure visualizzare il risultato in una textarea.

Free Javascript Obfuscator

Servizio web che si occupa di comprimere e offuscare codice javascript. Offrendo diverse opzioni ti lascia libero di decidere completamente l’aspetto finale del codice.

Online Javascript Obfuscator

Servizio web per la compressione e l’offuscamento di codice javascript.

PHP CSS Compressor

In questo articolo vengono fornite alcune righe di codice PHP da inserire direttamente nei file CSS. Questo codice provvede automaticamente alla compressione del contenuto del file CSS. In fondo all’articolo vengono descritte le modifiche da apportare al file .htaccess in modo che il file .css venga elaborato come file .php.

CSS Compressor

Servizio web per la compressione di codice CSS. L’applicazione è un’applet Java.

CSS Tidy

Software, eseguibile da riga di comando, per la compressione di file CSS. La pagina del progetto è completa di tutta la documentazione necessaria per iniziare a utilizzarlo.

Conclusione

Imparare a utilizzarli tutti è impossibile. Quindi, prima perder tempo tra download e righe di codice ti consiglio di analizzare il tuo sito per individuare i componenti che ne influenzano maggiormente le prestazioni.

Ad esempio, se il tuo sito è una galleria di immagini gestita con un paio di file javascript la cosa migliore da fare è scegliere il miglior tool per ottimizzare le foto, considerando anche il loro formato. Se, invece, hai un sito dinamico che fa un largo uso di javascript e tecniche Ajax, comprimere (e offuscare) il codice dei tuoi file javascript sarà fondamentale per migliorare il caricamento e la reattività del tuo sito web.

Crediti

• Yahoo! Developer Network – Best Practices for Speeding Up Your Web Site
• Foto1: forty-nine: compressed work week di dead_squid
• Foto2: fog over Istanbul skyscrapers di WhatCouldPossiblyGoWrong?
• Foto3: MAGNIFYING GLASS di andercismo

Per quale motivo? Innanzitutto perché è interessante vedere come da jquery si possa passare ai classici oggetti javascript e poi perché in alcuni casi si preferisce programmare in javascript senza rinunciare ad alcune potenzialità di jquery come, ad esempio, i selettori, spesso argomento di scontro (e confronto) fra i vari framework. Inoltre, come dice ImpressiveWebs, alcuni sviluppatori si trovano a dover lavorare a progetti già avviati nei quali non è possibile (o non è sicuro) utilizzare librerie come jquery, mootools, dojo, ecc.

Un ringraziamento speciale va a ImpressiveWebs che mi ha gentilmente autorizzato a tradurre buona parte dell’articolo orginale.

getElementById: selezionare un elemento conoscendo l’id

Sappiamo che quasi tutti i tag html hanno l’attributo id. Questo attributo serve a identificare univocamente un elemento all’interno del documento html. Non è possibile specificare lo stesso id per due elementi diversi e, se ciò accade, il w3c validator segnalerà l’errore.

Supponiamo di avere un tag html con l’id “my_element_id”:

<div id="my_element_id">Questo è un elemento generico</div>

La caratteristica fondamentale dell’id ci permette di selezionare esattamente un elemento che ha come id un certo valore. Non a caso infatti la funzione restituisce un solo elemento e non un array di elementi, come avviene per funzioni che effettuano selezioni più generiche.

var elemento = document.getElementById("my_element_id");

Con jquery è possibile fare lo stesso ma, al contrario della precedente, la funzione jquery prevede la restituzione di un array di elementi poiché viene utilizzata anche per selezioni più generiche. Quindi sarà necessario selezionare il primo, nonché l’unico, elemento dell’array restituito. L’elemento ottenuto è esattamente uguale a quello ottenuto con la funzione getElementById.

var elemento = $("#my_element_id")[0];

Ottenuto l’elemento che si fà?

Si possono utilizzare tutte le proprietà e le funzioni (o meglio, metodi) javascript previste dal quel tipo di oggetto. Ad esempio:

elemento.style.border = "1px solid #000";
elemento.disabled = "true";

Se, invece, preferisci utilizzare jquery dovrai ricorrere necessariamente alle proprietà e ai metodi definiti nella libreria jquery. Ad esempio:

$("#my_element_id").css("border",""1px solid #000"");
$("#my_element_id").attr("disabled","true");

ATTENZIONE. Spesso si sbaglia la scrittura della funzione scrivendo getElementByID anziché getElementById (notare la “d” minuscola).

Vantaggi. L’utilizzo di questa funzione impone la definizione di identificatori per i vari elementi che si vogliono gestire all’interno di funzioni javascript. Questo rappresenta un vantaggio poiché si tende a migliorare la scrittura del codice html. Un’altro possibile vantaggio è la maggior velocità della selezione per id rispetto alla selezione fra un’insieme di più elementi, che vedremo di seguito.

getElementByTagName: selezionare un gruppo di tag

Se per qualche motivo non puoi o non vuoi specificare un id per alcuni elementi, questa funzione ti viene in aiuto. L’unico argomento della funzione è il tag degli elementi da selezionare i quali verranno poi restituiti in un array.

Esempio. Supponiamo di avere una lista di link e di voler selezionare solo quelli che hanno l’attributo “target” uguale a “_blank” in modo da modificare il valore di questo attributo in “_top”.

<ul id="lista_5link">
	<li><a href="link1.html" target="_blank">Primo link</a></li>
	<li><a href="link2.html">Secondo link</a></li>
	<li><a href="link3.html" target="_blank">Terzo link</a></li>
	<li><a href="link4.html" target="_top">Quarto link</a></li>
	<li><a href="link5.html" target="_self">Quinto link</a></li>
</ul>

Per selezionare i tag “<a>” con l’attributo “target” uguale a “_blank” dobbiamo innanzitutto ottenere un’array di tutti i tag “<a>” e successivamente modificare quelli che rispettano la nostra condizione.

var myLinks = document.getElementsByTagName("a");

for(i=0; i<myLinks.length; i++)
{
	if (myLinks[i].getAttribute("target") == "_blank")
	myLinks[i].setAttribute("target","_top");
}

Con jquery il tutto si riduce a:

$("a[target='_blank']").attr("target","_top");

Con “a” si chiede di selezionare tutti i tag “<a>” e con “[target='_blank']” si chiede che questi tag abbiano l’attributo “target” uguale a “_blank”. Infine con attr("target","_top"), che viene eseguito solo se è stato trovato il tag richiesto, si imposta l’attributo “target” con il valore “_top”.

Miglioramento. Per evitare che la ricerca dei tag “<a>” venga effettuata all’interno dell’intero documento, si può impostare l’id  alla lista in modo da restringere la ricerca agli elementi interni alla lista.

Al tag “<ul>” ho precedentemente assegnato l’id “lista_5link”. Ora vediamo come restringere la ricerca.

// Seleziona l'elemento con l'id "lista_5link"
var oggettoLista = document.getElementById("lista_5link");

// Dell'elemento "oggettoLista" ricaviamo l'insieme dei tag <a>
var myLinks = oggettoLista.getElementsByTagName("a");

// Il ciclo for rimane uguale al precedente
for(i=0; i<myLinks.length; i++)
{
	if (myLinks[i].getAttribute("target") == "_blank")
	myLinks[i].setAttribute("target","_top");
}

Con jquery si aggiunge il vincolo “#lista_5link”:

$("#lista_5link a[target='_blank']").attr("target","_top");
/* Invece di $("a[target='_blank']").attr("target","_top"); */

Soluzione ibrida

// Seleziona gli elementi <a> con jQuery
var myLinks = $("#lista_5link a")

// Il ciclo for rimane uguale al precedente
for(i=0; i<myLinks.length; i++)
{
	if (myLinks[i].getAttribute("target") == "_blank")
	myLinks[i].setAttribute("target","_top");
}

Osservazione. Potresti dirmi “perché non assegniamo lo stesso id a tutti i tag <a>?“. Questa operazione non si può fare poiché l’id, per sua natura, deve necessariamente essere unico all’interno del documento, cioè solo un elemento può avere un certo id. Infatti, come spiegato prima, l’id deve servire a identificare univocamente un solo elemento all’interno del documento html.

Leggere e scorrere i nodi del documento

Cosa sono i nodi? Un nodo è un qualsiasi elemento, tag, contenitore, blocco autonomo (es. <br />, <hr />), frammento di testo. I nodi hanno una relazione genitore-figlio. Ad esempio, nel caso della lista illustrata precedentemente, <ul> è il genitore e <li> il figlio, che a sua volta è il genitore di <a>.

Ogni elemento è un nodo e come tale ha alcune proprietà e metodi che ci permettono di ricavare i suoi figli diretti (children), il suo genitore (parent), e di manipolarli in vari modi.

Codice html che utilizzeremo per tutti gli esempi

<div id="parent_div">
	<p>Paragrafo1</p>
	<p>Paragrafo2</p>
	<a href="#">Link</a>
	<p>Paragrafo3</p>
	<h5>Titolo h5</h5>
</div>

Ottenere i nodi figli con childNodes e children

Le due proprietà, childNode e children, sono costituite da un array dei figli diretti.

La differenza fra le due consiste nel fatto che children ignora i nodi di tipo testo concentrandosi sugli elementi html e xml.

• La proprietà childNodes rileva come “figli del contenitore” tutti gli elementi: tag, elementi, testo, ecc. Come si può vedere in figura, l’array childNodes avrà 10 elementi: gli indici pari saranno gli elementi “testuali” e gli indici dispari i tag html. N.B. i blocchi evidenziati sono i figli “testuali”, quelli non evidenziati sono i figli “html”
• La proprietà children rileva come “figli del contenitore” solo i tag html. Quindi l’array children avrà solo 5 elementi: i tag contenuti nel div “parent_div”

Esempio. Supponiamo di voler assegnare a tutti i figli del div “parent_div” la classe “newclass”.

La proprietà children

// Otteniamo i figli diretti di "parent_div"
var div_children = document.getElementById("parent_div").children;

for(i=0;i<div_children.length;i++)
{
	// Assegniamo la classe "newclass"
	div_children[i].className="newclass";
}

ATTENZIONE. Ho riscontrato alcuni problemi legati a questa proprietà, ad esempio su Firefox. L’alternativa è proprio childNodes, da utilizzare con qualche piccolo accorgimento.

La proprietà childNodes e nodeType

Gli stessi risultati della proprietà children possono essere ottenuti con la proprietà childNodes, controllando il tipo di nodo che si sta leggendo grazie alla proprietà nodeType. Questa proprietà può avere 12 valori diversi (interi, da 1 a 12). La lista completa la puoi trovare qui: http://www.w3schools.com/Dom/dom_nodetype.asp . In particolare, poiché la proprietà children non considera i nodi testuali, controlliamo che nodeType non sia 3 (codice corrispondente ai nodi testuali).

// Otteniamo i figli diretti di "parent_div"
var div_children = document.getElementById("parent_div").childNodes;

for(i=0;i<div_children.length;i++)
{
	// Controlliamo il tipo di nodo: noteType=3 se è un nodo testuale
	if(div_children[i].nodeType==3) continue;

	// Assegniamo la classe "newclass"
	div_children[i].className="newclass";
}

Il risultato è identico al codice precedente in cui si utilizza la proprietà children.

Soluzione ibrida

// Selezione figli con jquery
var div_children = $("#parent_div").children();

// Ciclo for uguale al precedente
for(i=0;i<div_children.length;i++)
{
	// Assegniamo la classe "newclass"
	div_children[i].className="newclass";
}

N.B. la selezione con jquery ha lo stesso effetto della proprietà children, ovvero seleziona tutti i figli tranne quelli di tipo testuale.

Soluzione con jquery

// Selezione figli con jquery e assegnazione della classe "newclass"
$("#parent_div").children().addClass("newclass");

Con $("#parent_div").children() otteniamo i figli e con addClass("newclass") assegniamo la classe “newclass” ai figli trovati.

Ottenere il primo e l’ultimo nodo figlio con firstChild e lastChild

Normalmente per recuperare il primo o l’ultimo nodo figlio di un elemento si dovrebbero scrivere le seguenti righe di codice:

// Primo nodo figlio
var first_child = document.getElementById("parent_div").firstChild;

// Ultimo nodo figlio
var last_child = document.getElementById("parent_div").lastChild;

Problema. Come per la proprietà childNodes, anche queste leggono qualsiasi tipo di nodo. Quindi, se fra due elementi c’è un carattere di spaziatura o un tab, questo verrà considerato un nodo.

Soluzione. Con un semplice ciclo while possiamo leggere i successivi (o precedenti) nodi di tipo non testuale.

// Primo nodo figlio
var first_child = document.getElementById("parent_div").firstChild;

// Se il nodo letto è di tipo testuale leggiamo il successivo
while(first_child!=null && first_child.nodeType==3)
first_child = first_child.nextSibling;

// Ultimo nodo figlio
var last_child = document.getElementById("parent_div").lastChild;

// Se il nodo letto è di tipo testuale leggiamo il precedente
while(last_child!=null && last_child.nodeType==3)
last_child = last_child.previousSibling;

Osservazioni. Le condizioni del ciclo while controllano che il nodo sia stato trovato (cioé che sia diverso da null) e che il tipo sia testuale (cioé nodeType = 3). Se entrambe le condizioni sono verificate il nodo attuale viene rimpiazzato con il successivo (nel caso del primo nodo) o con il precedente (nel caso dell’ultimo nodo). Questo procedimento si ripete finché non ci sono più nodi figli o non viene trovato un nodo di tipo “non testuale”. La proprietà nextSibling permette di ottenere il nodo successivo; la proprietà previousSibling permette di ottenere il nodo precedente.

Soluzione ibrida con jquery

Poiché il metodo children() di jquery legge i nodi figlio di tipo “non testuale”.

Per ricavare il primo e l’ultimo nodo figlio si passa come argomento “:first” (per il primo nodo) e “:last” (per l’ultimo nodo).

// Primo nodo figlio
var first_child = $("#parent_div").children(":first");

// Ultimo nodo figlio
var last_child = $("#parent_div").children(":last");

Ottenere il genitore di un nodo con parentNode

Supponiamo di avere il seguente codice html:

<div id="parent_div">
	<p id="child1">Paragrafo1</p>
	<p id="child2">Paragrafo2</p>
	<p id="child3">Paragrafo3</p>
</div>

Per ottenere il genitore dei tre paragrafi utilizzeremo la proprietà parentNode su uno dei tre paragrafi.

var parent_node1 = document.getElementById("child1").parentNode;
var parent_node2 = document.getElementById("child2").parentNode;
var parent_node3 = document.getElementById("child3").parentNode;

Le tre variabili (parent_node1, parent_node2, parent_node3) avranno lo stesso nodo: il div “parent_div”.

Soluzione con jquery

// parent() restituisce un array di un solo elemento
var my_node = $("#ciaociao").parent()[0];

Ottenere i “fratelli” dei nodi con nextSibling e previousSibling

Per ottenere il fratello di un nodo si possono utilizzare due funzioni:

• nextSibling, per leggere il fratello successivo
• previousSibling, per leggere il fratello precedente

Supponiamo di avere il seguente codice html:

<div id="parent_div">
	<p id="child1">Paragrafo1</p>
	<p id="child2">Paragrafo2</p>
	<p id="child3">Paragrafo3</p>
</div>

Vogliamo ottenere il nodo corrispondente al paragrafo di id “child2″.

Problema. Anche queste proprietà selezionano i nodi di tipo “testuale”.

Soluzione. Inseriamo un ciclo while identico a quello scritto per le proprietà firstChild e lastChild.

// Ottenere il nodo "child2" partendo dal paragrafo "child1"
var node_child2_mod1 = document.getElementById("child1").nextSibling;

// Se il nodo letto è di tipo testuale leggiamo il successivo
while(node_child2_mod1!=null && node_child2_mod1.nodeType==3)
node_child2_mod1 = node_child2_mod1.nextSibling;

// Ottenere il nodo "child2" partendo dal paragrafo "child3"
var node_child2_mod2 = document.getElementById("child1").previousSibling;

// Se il nodo letto è di tipo testuale leggiamo il precedente
while(node_child2_mod2!=null && node_child2_mod2.nodeType==3)
node_child2_mod2 = node_child2_mod2.previousSibling;

Soluzione con jquery

Fortunatamente i metodi next() e prev() di jquery selezionano solo i nodi “non testuali” e restituiscono un set di nodi costituito di fatto da un solo nodo.

// Ottenere il nodo "child2" partendo dal paragrafo "child1"
var node_child2_mod1 = $("#child1").next()[0];

// Ottenere il nodo "child2" partendo dal paragrafo "child3"
var node_child2_mod2 = $("#child3").next()[0];

Attraversare i “fratelli” dei nodi con nextSibling e previousSibling

Supponiamo di voler modificare tutti i fratelli di un certo nodo. Per fare ciò è necessario scorrere tutti i nodi “fratelli” modificandoli in base alle nostre esigenze. In realtà l’attraversamento dei nodi fratelli l’abbiamo già fatto in occasione dei cicli while utilizzati per risolvere il problema della selezione dei nodi testuali.

Utiliziamo il codice html dell’esempio precedente.

// Otteniamo il nodo corrispondente al paragrafo "child1"
var node_child1 = document.getElementById("child1");

// Scorriamo tutti i fratelli di node_child1
while(node_child1!=null && node_child1.nodeType!=3)
{
	// Leggiamo il fratello di node_child1 e lo inseriamo nella stessa variabile
	node_child1 = node_child1.nextSibling;

	// Esempio: applichiamo la classe "newclass"
	node_child1.className="newclass";
}

Conclusioni

Queste sono alcune delle principali tecniche per selezionare e scorrere gli elementi html con il codice javascript “puro” e utilizzando il famoso framework jquery che, come avrai potuto notare, semplifica la scrittura di codice javascript e ne riduce drasticamente la lunghezza.

In queste situazioni preferisci utilizzare javascript puro o jquery? Hai avuto problemi durante l’utilizzo di queste tecniche? Si possono migliorare in qualche modo?

Crediti

• ImpressiveWebs – 10 Essential DOM Methods & Techniques for Practical JavaScript
• Libro. Javascript – La guida di Danny Goodman, Michael Morrison (McGraw-Hill)
• Foto1: Catch me if you can! di Josh n Jerry
• Foto2: http://www.freerepublic.com/focus/f-chat/2096935/posts
• Foto3: Node di dixit M
• Foto5: Climbing di docman

Senza dubbio, il modo migliore per farlo consiste nell’utilizzo delle espressioni regolari, chiamate anche RegEx (da “regular expressions”).

Perché è il modo migliore? Anziché scrivere un’intera funzione composta da decine e decine di righe di codice, grazie alle RegEx basta defire il modello (o pattern) della stringa email e far eseguire il confronto da un’apposita funzione.

Caratteristiche di un indirizzo email

Il primo passo consiste nell’individuare le caratteristiche di un indirizzo email in modo da definirle successivamente in un modello (pattern).

Local part

Questa parte, che indica spesso l’username, può essere costituita da:

• un massimo di 64 caratteri
• lettere minuscole e maiuscole dell’alfabeto inglese, cioè a-z e A-Z
• numeri, da 0 a 9
• caratteri speciali . ! # $ % & ' * + - / = ? ^ _ ` { | } ~. Alcuni servizi email non permettono di creare indirizzi solo con i caratteri speciali più comuni come “.” , “-”, e “_”

N.B. il carattere “.” non può trovarsi né all’inizio né alla fine.

Domain name

La parte successiva alla “@” è il nome del dominio (es. example.com) che può essere costituito da:

• un massimo di 255 caratteri
• lettere minuscole dell’alfabeto inglese, cioè a-z
• numeri, da 0 a 9
• caratteri speciali “.” e “-”

N.B. il carattere “.” non può trovarsi né all’inizio né alla fine. Inoltre deve essere presente almeno un punto.

Il pattern per un indirizzo email

Ora che sappiamo la struttura di un indirizzo email possiamo definire precisamente il pattern che verrà confrontato all’indirizzo email da controllare.

Definiamo un pattern per indirizzi email semplici che contengano sono lettere, numeri, punti “.”, underscore “_” e trattini “-”. In seguito vedremo come modificare i pattern in modo da accettare anche i caratteri speciali.

Pattern per la “local part”

La prima parte impone che l’indirizzo inizi almeno con una lettera (maiuscola o minuscola) o con un numero. Vengono esclusi i caratteri con cui non può iniziare l’email.

La seconda parte è un po’ più complicata:

• vengono definiti tutti i caratteri accettati dall’email
• corrisponde a un punto seguito da a-z, A-Z, 0-9, – o 0
• il codice “\.?” indica che i successivi caratteri possono (opzionalmente) essere preceduti da un solo punto
• la parte [a-zA-Z0-9\-\_] è seguita dal carattere + perché deve essere trovato un carattere del tipo a-z, A-Z, 0-9, – o 0 almeno una volta
• viene racchiusa nelle parentesi tonde e seguita dal carattere * per impostare la condizione in base alla quale la seconda parte può essere presente facoltativamente

Pattern per il “domain name”

La prima parte impone che l’indirizzo inizi almeno con una lettera (maiuscola o minuscola) dell’alfabeto inglese. Vengono esclusi i caratteri con cui non può iniziare un nome di dominio.

Nella seconda parte, come per la “local part”:

• vengono definiti tutti i caratteri accettati dall’email
• corrisponde a un punto seguito da a-z, A-Z, 0-9, – o 0
• il codice “\.?” indica che i successivi caratteri possono (opzionalmente) essere preceduti da un solo punto
• la parte [a-zA-Z0-9\-\_] è seguita dal carattere + perché deve essere trovato un carattere del tipo a-z, A-Z, 0-9, – o 0 almeno una volta
• viene racchiusa nelle parentesi tonde e seguita dal carattere * per impostare la condizione in base alla quale la seconda parte può essere presente facoltativamente

La terza parte impone la presenza di un punto fra il nome del dominio e il codice del dominio di primo livello. In pratica, se il dominio è example.com, il punto di cui si impone la presenza è quello che si trova fra example e com.

L’ultima parte stabilisce il formato del codice del dominio di primo livello. Questo deve essere composto da almeno due caratteri e da sole lettere (del tipo a-z e A-Z) dell’alfabeto inglese.

Lunghezza della “local part” e del “domain name”

Purtroppo non è possibile imporre la lunghezza totale dei due segmenti (o almeno io non ci sono riuscito).

Scrivendo (\.?[a-zA-Z0-9\-\_]){0,63} la condizione {0,63} viene attribuita sia \. sia a [a-zA-Z0-9\-\_]. Quindi, l’indirizzo email risulterà troppo lungo se sia i punti sia i restanti caratteri corrispondenti a [a-zA-Z0-9\-\_] saranno più di 63. Ecco cosa succederebbe:

• punti<=63, caratteri<=63: indirizzo ok
• punti>=63, caratteri<=63: indirizzo errato
• punti<=63, caratteri>=63: indirizzo ok (non è ciò che vogliamo)
• punti>=63, caratteri>=63: indirizzo errato

Il terzo caso non va bene a causa dei controlli sul numero dei caratteri. Infatti, se i caratteri sono più di 63 l’indirizzo email viene considerato corretto.

Ho fatto diverse prove ma ho sempre avuto esiti negativi. Come ho detto prima, probabilmente non ci sono riuscito io.

Sono ben accetti suggerimenti e soluzioni alternative.

La mia soluzione

In seguito vedremo che per controllare se i due segmenti rispettano le dimensioni massime, rispettivamente 64 e 255, si possono scrivere un paio di righe di codice per:

• dividere l’indirizzo email in due in corrispondenza della @
• controllare la lunghezza di ciascuna stringa

Accettare i caratteri speciali

Per fare in modo che la tua funzioni accetti alcuni o tutti i caratteri speciali basterà sostituire la stringa [a-zA-Z0-9\-\_] (presente nella “local part”) con la stringa [a-zA-Z0-9\-\_\!\#\$\%\&\'\*\+\/\=\?\^\`\{\|\}\~].

Se non vuoi accettare alcuni caratteri bisogna eliminare il carattere speciale e il “\” che lo precede.

Codice Javascript

function isEmail(string)
{
	/* Confronta la stringa con il pattern RegEx */
	if(string.search(/^[a-zA-Z0-9]+(\.?[a-zA-Z0-9\-\_]+)*\@[a-zA-Z]+(\.?[a-zA-Z0-9\-\_]+)*\.[a-zA-Z]{2,}$/)==-1)
	return false;

	/* Divide l'indirizzo in due parti: "local part" e "domain name" */
	var parts = string.split("@");

	/* Controlla se "local part" supera i 64 caratteri */
	if(parts[0].length>64) return false;

	/* Controlla se "local part" supera i 255 caratteri */
	if(parts[1].length>255) return false;

	return true;
}

Codice PHP

function isEmail($string)
{
	/* Confronta la stringa con il pattern RegEx */
	if(!eregi("[a-zA-Z0-9]+(\.?[a-zA-Z0-9\-\_]+)*\@[a-zA-Z]+(\.?[a-zA-Z0-9\-\_]+)*\.[a-zA-Z]{2,}$",$string))
	return false;

	/* Divide l'indirizzo in due parti: "local part" e "domain name" */
	$parts = explode("@",$string);

	/* Controlla se "local part" supera i 64 caratteri */
	if(strlen($parts[0])>64) return false;

	/* Controlla se "local part" supera i 255 caratteri */
	if(strlen($parts[1])>255) return false;

	return true;
}

Demo e download

Per vedere lo script vai su http://test.jblog.it/email_checker/email_checker.txt

Per vedere una demo vai su http://test.jblog.it/email_checker/

Per scaricare l’esempio vai su http://download.jblog.it/email_checker.zip

Conclusione

Le espressioni regolari sono un potente strumento, ma fanno lavorare la cpu.

Quindi, ti consiglio di utilizzare le espressioni regolari solo quando la stringa da controllare ha un formato complesso come, appunto, un indirizzo email o un numero di telefono. Se invece devi verificare che contenga solo caratteri numerici è meglio ricorrere a funzioni che controllano carattere per carattere.

Per quanto riguarda le funzioni email, personalmente le ritengo buone ma non le migliori. Le ho provate e sembrano funzionare adeguatamente. Per qualsiasi errore o malfunzionamento io sono qui… Sono graditi consigli, critiche e opinioni in genere.

Crediti

Wikipedia (english) – E-mail address

Foto1 – Formatear cadenas de Texto/String como númericas con o sin decimales – Regex – Expresiones Regulares

Gestire la cache è fatica sprecata?

Assolutamente no! Il fatto è che ogni utente che accede al sito la prima volta deve comunque attendere il caricamento completo della pagina e dei suoi componenti, che vengono subito memorizzati in cache. Il miglioramento di prestazioni si verifica a partire dalla seconda pagina che viene visitata in quanto i componenti vengono letti dalla cache, evitando di effettuare nuove (e inutili) richieste http.

Vantaggi immediati

Diminuire i componenti di una pagina consente di avere un notevole aumento delle prestazioni che migliora l’esperienza tutti gli utenti, vecchi e nuovi, dalla prima all’ultima pagina.

In questo articolo vedremo alcune tecniche che riducono drasticamente il numero e il tempo di caricamento relativo a immagini, script e css. Queste tecniche non fanno altro che combinare questi componenti in modo da caricarne pochi ma più pesanti anziché molti ma leggeri. Parleremo di image maps, sprite css, dello schema data:URL, di generatori di sprite css, di come combinare automaticamente javascript e css, vedremo che a volte è meglio inserire il codice direttamente nella pagina html, e come è possibile evitare gli script duplicati.

Pochi ma buoni

A primo impatto potrebbe sembrare un’assurdità affermare che “è meglio caricare un file da 300 kbyte anziché 10 file da 40kb”. Fortunatamente non lo è!

Infatti, se prendiamo 10 immagini e le copiamo all’interno di un solo file immagine, quest’ultimo file occuperà molto meno rispetto alla somma delle 10 immagini. Il motivo è che nei file vengono memorizzate tantissime informazioni oltre al contenuto che i software ci mostrano.

Ad esempio, se apriamo una fotografia quello che vediamo è semplicemente un’immagine. Tuttavia, quel file contiene anche una serie di informazioni come: modello fotocamera, altezza, larghezza, risoluzione, ecc.

Caricare una sola immagine (ed un set di informazioni) è meglio che caricare dieci immagini (e dieci set di informazioni) perché:

• la dimensione del file più grosso è minore della somma di tanti file più piccoli
• tante richieste http si riducono a una sola

Mentre sulla riduzione delle richieste http possiamo essere d’accordo, credo che tu abbia qualche dubbio sul fatto che diminuisca la dimensione del file più grande. Bene, fai questo semplice esperimento:

• prendi un’immagine e fanne 10 copie
• crea un’immagine grande abbastanza da contenere perfettamente 10 immagini uguali
• confronta la dimensione dei 10 file immagine con quella del file immagine più grande

I componenti incriminati

Generalmente si focalizza l’attenzione su immagini, javascript e css perché sono presenti in tutte le pagine e, se mal gestiti, non solo provocano un eccessivo numero di richieste http ma rallentano il normale caricamento delle pagine.

Combinare le immagini: “image maps”

Se vogliamo inserire due immagini affiancate basta combinarle in un unico file immagine e inserire quest’ultimo all’interno della pagina.

I problemi nascono nel momento in cui, ad esempio, vogliamo applicare un diverso link a ciascuna immagine. Infatti, essendo un’unica immagine, non possiamo racchiuderla all’interno di un tag <a>, ma dobbiamo “mappare” le immagini.

Prima di illustrare i tre metodi è necessario descrivere gli strumenti a nostra disposizione.

Il tag <area>

Serve per creare le singole aree, cliccabili o meno, dell’immagine. Non richiede il tag di chiusura completo (</area>).

Formato. <area shape="..." coords="..." href="http://example.com/link1.html">

Per creare documenti più accessibili, si può utilizzare il tag <a>…</a> con gli stessi attributi di <area>. Infatti, grazie al tag <a> si può specificare un testo alternativo per l’area.

Formato. <a href="http://example.com/link1.html" shape="..." coords="..." />Area1</a>


shape: (default, rect, circle, poly), cioè (default, rettangolo, cerchio, poligono). Specifica la forma di una regione.

coords: coordinate. Specificano la posizione e la sagoma. Il numero e l’ordine dei valori dipendono dalla forma specificata da shape.

• rect: left-x, top-y, right-x, bottom-y. I vertici opposti del rettangolo.
• circle: center-x, center-y, radius. Coordinate del centro e lunghezza del raggio.
• poly: x1, y1, x2, y2, …, xN, yN. Coordinate di tutti i vertici del poligono.

href: link associato alla regione.

nohref: impostare con true per specificare che la regione non ha link associati, altrimenti non impostare.

Il tag <map>

Specifica una mappa da far richiamare da un oggetto. È richiesto il tag di chiusura </map>.

All’interno dei tag <map>…</map> si inseriscono tutte le aree relative alla mappa.

name. Assegna un nome alla mappa.

Associare una mappa a un elemento

Utilizzare l’attributo usemap fra gli attributi dell’elemento, specificando un URI.

Ricorda che un URI può essere un indirizzo del tipo http://www.example… o un id del tipo #nome-mappa.

Formato. <img src="foto.jpg" alt="La mia foto" usemap="mappafoto" />

Image maps lato client

La presenza di usemap implica che l’oggetto sia un immagine. Se non lo è, i browser potrebbero comunque implementare un’interazione con l’utente simile a quella per le immagini. Purtroppo non tutti i browser eseguono correttamente la mappatura di un immagine o di un oggetto.

Un blocco <map> può contenere sia elementi <area> sia elementi a livello di blocco come <a> per aumentare la compatibilità con i browser più datati.

Alcune osservazioni

1. Se sono presenti contemporaneamente <a> ed <area>, i browser recenti ignorano il tag <area>
2. Se due o più regioni si sovrappongono, la prima regione avrà la precedenza sulle altre
3. L’elemento <map> non è compatibile con i browser HTML 2.0

Demo e download

Per vedere una demo vai a http://test.jblog.it/imagemap_cs/

In quest’altro esempio le aree sono rettangolari, circolari e poligonali. http://test.jblog.it/imagemap_cs2/

Per scaricare entrambi gli esempi vai a http://download.jblog.it/imagemap_cs_cs2.zip

Esempio 1

Classico esempio con <map> all’interno dell’oggetto, ed i tag <a> all’interno di <map>.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
		<MAP name="map1">
			Navigate the site:
			<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
			<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
			<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
			<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
		</MAP>
	</OBJECT></P>
	</BODY>
</HTML>

Esempio 2

Come utilizzare la mappa richiamandola con usemap, senza inglobarla all’interno dei tag <object>.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT></P>
	<MAP name="map1">
		Navigate the site:
		<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
	</MAP>
</HTML>

Esempio 3

Utilizzo degli elementi <area>.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT></P>
	<MAP name="map1">
		Navigate the site:
		<AREA href="guide.html" alt="Access Guide" shape="rect" coords="0,0,118,28">
		<AREA href="search.html" alt="Search" shape="rect" coords="184,0,276,28">
		<AREA href="shortcut.html" alt="Go" shape="circle" coords="184,200,60">
		<AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
	</MAP>
</HTML>

Esempio 4

Questo è un utilizzo concreto della condivisione di una mappa fra più immagini. Questo codice carica l’immagine più interna (navbar1.gif) se l’immagine esterna (navbar1.png) non viene processata correttamente dal browser. Ad entrambe le immagini viene associata la stessa mappa.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.png" type="image/png" usemap="#map1">
		<OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT>
	</OBJECT></P>
	<MAP name="map1">
		Navigate the site:
		<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
	</MAP>
</HTML>

Esempio 5

Utilizzo combinato di <area> e <a> per avere una maggiore compatibilità. I browser più recenti non considerano gli elementi <area>.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1"></OBJECT></P>
	<MAP name="map1">
		Navigate the site:
		<AREA href="guide.html" alt="Access Guide" shape="rect" coords="0,0,118,28">
		<AREA href="search.html" alt="Search" shape="rect" coords="184,0,276,28">
		<AREA href="shortcut.html" alt="Go" shape="circle" coords="184,200,60">
		<AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
		<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
	</MAP>
</HTML>

Esempio 6

Come sovrapporre due aree. Da notare l’ultima coordinata specificata, il raggio). I due cerchi hanno lo stesso centro, ma il primo ha un raggio minore del secondo.

Il risultato è che posizionandosi sul primo (che non ha link) non appare la “manina”. Spostandosi leggermente fuori dal primo ci si posiziona sul secondo (che ha un link) ed appare la “manina”. In pratica, l’area specificata prima ha la precedenza sulle altre che sovrascrive.

<MAP name="map1">
	<A shape="circle" coords="100,200,50">Non ho link</A>
	<A href="outer-ring-link.html" shape="circle" coords="100,200,250">Ho un link</A>
</MAP>

Image maps lato server

A volte la mappatura delle immagini può essere troppo complicata da scrivere come html.

In questi casi è meglio ricorrere a tecniche lato server.

Partiamo dal codice html. Da notare l’attributo ismap.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<A href="map_script.php">
		<IMG src="navbar1.png" alt="Navigazione" ismap />
	</A>
</HTML>

Come funziona? Quando ci si posiziona sull’immagine, il browser aggiunge all’url di <a>, quindi a map_script.php, le due coordinate. Ad esempio, se ci posizioniamo sul pixel di coordinate (18,46), il link del tag <a> verrà trasformato automaticamente da map_script.php a map_script.php?18,46.

Lo script lato server ha il compito di leggere i due parametri $_GET relativi alle coordinate e comportarsi a seconda dei valori letti.

<?php
/* $_GET array associativo. Ottiene le chiavi dell'array. */
$keys = array_keys($_GET);

/* Prende la prima chiave, la divide e inserisce i due valori in $x e $y */
list($x,$y) = explode(",",$keys[0]);

/* Comportamenti */
if(($x>=0 && $x<=118) && ($y>=0 && $y<=28))	 include("guide.html");
elseif(($x>118 && $x<=184) && ($y>=0 && $y<=28)) include("shortcut.html");
elseif( ($x>=(184-30) && $x<=(184+30)) && ($y>=(200-30) && $y<=(200+30)) ) include("search.html");
elseif(($x>220 && $x<=280) && ($y>=30 && $y<=54)) include("top10.html");
?>

Nel codice dell’esempio 1, l’area relatva a top10.html è un poligono. Non è semplice controllare se un punto è presente in un poligono. Bisogna trovare e utilizzare appositi algoritmi e funzioni. Potresti trovarli su geometryalgorithms.com (che nel momento in cui scrivo è “temporaneamente sospeso”).

Script, demo e download

Per vedere e scaricare lo script vai a http://test.jblog.it/imagemap_ss/map_script.txt

Per vedere una demo vai a http://test.jblog.it/imagemap_ss/

Per scaricare l’esempio vai a http://download.jblog.it/imagemap_ss.zip

Image maps lato client e lato server

Per avere la compatibilità con i vecchi browser è bene combinare le due tecniche.

<HTML>
	<HEAD><TITLE>The cool site!</TITLE></HEAD>
	<BODY>
	<A href="map_script.php">
		<IMG src="navbar1.gif" alt="Navigazione" usemap="#map1" ismap />
	</A>
	<MAP name="map1">
		Navigate the site:
		<A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
		<A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
		<A href="search.html" shape="circle" coords="184,200,60">Search</A> |
		<A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
	</MAP>
	</BODY>
</HTML>

Il testo alternativo

I tag <a> con il testo all’interno si utilizzano per avere un testo alternativo nel caso in cui l’immagine non venga caricata.

Naturalmente questo comportamento non è gestito dal browser, infatti il testo dei link appare sempre.

Per nasconderlo è necessario operare con i css. Consiglio anche di guardare le tecniche di “image replacement”.

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/imagemap_css/map_script.txt

Per vedere una demo vai a http://test.jblog.it/imagemap_css/

Per scaricare l’esempio vai a http://download.jblog.it/imagemap_css.zip

Lo schema data:URL

Questa tecnica permette di inserire i dati direttamente nel codice html, risparmiando quindi la relativa richiesta http.

Scopriamo le carte e vediamo subito un esempio.

<IMG ALT="Foto" SRC="data:image/gif; base64,
	R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAwhhx4dbgYKAAA7B72VFgl2Tf7452
	AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz
	ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp
	a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl
	ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis
	F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH" />

Dopo la paura iniziale, in genere ci si domanda: cosa sono quei caratteri e come faccio a inserirli?

Quell’ammasso di caratteri è la codifica in base64 dell’immagine. In pratica, è il contenuto del file immagine codificato in base64.

Per codificare un’immagine in base64 si utilizza una semplice funzione php: base64_encode.

L’ultima questione riguarda il tipo MIME che si può ottenere in due modi:

• utilizzando la funzione mime_content_type. Deve essere abilitata l’estensione php_mime_magic.dll.
• leggendo le informazioni su un file grazie le funzioni File Information di php. Era un’estensione PECL, ma ora non lo è più. Bisogna utilizzare la libreria esterna magic_open

Nel caso non si possano utilizzare queste funzioni si dovrà scrivere manualmente.

Come inserire un’immagine in base64 (senza funzioni per il tipo MIME)

<img src="data:image/jpeg;base64,<?
echo base64_encode(file_get_contents("img.jpg")); ?>" alt="Immagine" />

Come inserire un’immagine in base64 (con funzioni per il tipo MIME)

<? $mime = mime_content_type("img.jpg"); ?>
<img src="data:<? echo $mime; ?>;base64,<?
echo base64_encode(file_get_contents("img.jpg")); ?>" alt="Immagine" />

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/img_base64/index.txt

Per vedere una demo vai a http://test.jblog.it/img_base64/

Per scaricare l’esempio vai a http://download.jblog.it/img_base64.zip

Gli sprite CSS

Partiamo dalla situazione più comune. Supponiamo di voler realizzare un menù composto da 5 pulsanti grafici che cambino colore quando si passa sopra col mouse. La cosa più logica sarebbe quella di creare 10 immagini: 5 per il pulsante in modalita “normale”, 5 per il pulsante in modalità “mouse sopra”.

Poiché caricare 10 immagini significa effettuare 10 richieste http, utilizziamo la tecnica degli sprite CSS.

Questa tecnica consiste nel:

• creare un file immagine abbastanza grande da contenere tutte e 10 le immagini del menù (come ho detto all’inizio dell’articolo, è meglio un’immagine grande anziché tante piccole immagini)
• impostare questa immagine come sfondo agli elementi del menù (cioè <a>, <li>, <div>, ecc.)
• per ogni elemento impostare la proprietà background-position per spostare lo sfondo all’interno dell’elemento in modo da avere l’immagine desiderata

Gli utilizzi di questa tecnica sono infiniti: dal menù al singolo rollover, dalla serie di immagini allineate al contenitore con gli angoli arrotondati.

VANTAGGI

• riduce notevolmente le richieste http e migliora il caricamento delle pagine
• elimina del tutto i ritardi relativi ai rollover poiché non viene caricata una nuova immagine ma viene spostato lo sfondo

SVANTAGGI

• richiede un po’ più di lavoro nell’impostazione dei css e nella creazione delle immagini
• non è sempre possibile combinare in una sola immagine tutte le immagini del sito, a causa delle difficoltà che si incontrano nel posizionamento dello sfondo con le regole dei css

Esempio 1

Inserire le immagini con il tag <img>. Questo metodo è a dir poco geniale poiché permette di inserire le immagini come si è sempre fatto col vantaggio di ridurre le richieste http. In pratica viene impostato lo sfondo al tag <img>.

L’articolo completo è di CssGlobe. Lo puoi trovare qui.

Abbiamo bisogno di un’immagine gif trasparente 1px x 1px (spacer.gif), e l’immagine sprite (tuttelefoto.jpg).

tuttelefoto.jpg – L’immagine sprite che utilizzeremo

<html>
<head><title>Sprite CSS - Esempio 1</title></head>
<body>
	<img src="spacer.gif" id="foto1" alt="Foto1" />
	<img src="spacer.gif" id="foto2" alt="Foto2" />
	<img src="spacer.gif" id="foto3" alt="Foto3" />
</body>
</html>

L’immagine trasparente serve per far assumere al tag <img> il suo normale comportamento (ad es. in modo che quando selezioni l’immagine si colora l’area di <img>).

Codice css

#foto1, #foto2, #foto3 { background:url(tuttelefoto.jpg) no-repeat; }
#foto1 { width:100px; height:50px; background-position:0px 0px; }
#foto2 { width:120px; height:90px; background-position:0px -50px; }
#foto3 { width:90px; height:130px; background-position:-120px 0px; }

Demo e download

Per vedere una demo vai a http://test.jblog.it/img_sprite1/

Per scaricare l’esempio vai a http://download.jblog.it/img_sprite1.zip

Esempio 2

Un’altro modo per inserire delle immagini è impostarle come sfondo ad elementi flottanti.

spriteimg.png – L’immagine sprite che utilizzeremo

<html>
<head><title>Sprite CSS - Esempio 2</title></head>
<body>
	<a href="#" id="feedburner"></a>
	<a href="#" id="subscribe"></a>
	<a href="#" id="bookmarks"></a>
</body>
</html>

Demo e download

Per vedere una demo vai a http://test.jblog.it/img_sprite2/

Per scaricare l’esempio vai a http://download.jblog.it/img_sprite2.zip

Codice css

#feedburner { margin-right:20px; background:url(spriteimg.png) no-repeat -5px -5px; float:left; width:91px; height:29px; }
#subscribe { margin-right:20px; background:url(spriteimg.png) no-repeat -5px -35px; float:left; width:127px; height:18px; }
#bookmarks { background:url(spriteimg.png) no-repeat -5px -55px; float:left; width:127px; height:18px; }

Esempio 3

Gli sprite css sono ideali per sviluppare menù di navigazione.

spritemenu.png – L’immagine sprite che utilizzeremo

<html>
<head><title>Sprite CSS - Esempio 3</title></head>
<body>
	<ul id="navmenu">
		<li id="nav_homepage"><a href="#"></a></li>
		<li id="nav_informazioni"><a href="#"></a></li>
		<li id="nav_catalogo"><a href="#"></a></li>
		<li id="nav_indirizzi"><a href="#"></a></li>
		<li id="nav_contact"><a href="#"></a></li>
	</ul>
</body>
</html>

Codice css

#navmenu ul { list-style:none; }
#navmenu li { float:left; list-style:none; }
#navmenu a { display:block; height:30px; width:135px; background:url(spritemenu.png) no-repeat;  }

#nav_homepage a:link, #nav_homepage a:visited { background-position:0px 0px; }
#nav_informazioni a:link, #nav_informazioni a:visited { background-position:-270px 0px; }
#nav_catalogo a:link, #nav_catalogo a:visited { background-position:-560px 0px; }
#nav_indirizzi a:link, #nav_indirizzi a:visited { background-position:-420px 0px; }
#nav_contact a:link, #nav_contact a:visited { background-position:-135px 0px; }

#nav_homepage a:hover, #nav_homepage a:focus, #nav_homepage a:active { background-position:0px -30px; }
#nav_informazioni a:hover, #nav_informazioni a:focus, #nav_informazioni a:active { background-position:-270px -30px; }
#nav_catalogo a:hover, #nav_catalogo a:focus, #nav_catalogo a:active { background-position:-560px -30px; }
#nav_indirizzi a:hover, #nav_indirizzi a:focus, #nav_indirizzi a:active { background-position:-420px -30px; }
#nav_contact a:hover, #nav_contact a:focus, #nav_contact a:active { background-position:-135px -30px; }

Demo e download

Per vedere una demo vai a http://test.jblog.it/img_sprite3/

Per scaricare l’esempio vai a http://download.jblog.it/img_sprite3.zip

Generatori di Sprite CSS

I generatori di sprite css semplificano la creazione di un’immagine abbastanza grande da contenere tutte le immagini da utilizzare nel proprio sito. Questi, secondo me, sono i migliori.

Generatore di Sprite CSS
http://spritegen.website-performance.org/
https://launchpad.net/css-sprite-generator (codice sorgente)

CSS Sprites Generator
http://www.csssprites.com/

CSS sprites for humanoid beings (and the like)
http://printf.ru/spritr/

SmartSprites (Alpha!)
http://smartsprites.osinski.name/

Combinare javascript e css

Spesso una pagina richiama più di uno script e più di un css. Per ridurre le richieste http relative ai css (o agli script) basta copiare il contenuto di tutti i file css (o script) in un unico file.

Il bello di questa tecnica è che, a differenza delle immagini, è quasi sempre possibile combinare tutti i file dello stesso tipo in un unico file. Il “quasi” è dovuto al fatto che alcuni script, se inseriti nello stesso file, potrebbero dare dei problemi. Quindi è sempre meglio testare il funzionamento dello script combinato. Se si verificano dei problemi, basta escludere dalla fusione i file “incompatibili”.

La combinazione degli script in un unico file può essere eseguita in due modi:

• manualmente, cioé copiando il contenuto di ogni script all’interno di un file più grande
• dinamicamente, ricorrendo a semplici script lato server

Gli script lato server che vedremo sono strutturati in 5 fasi:

• lettura dei nomi dei file da includere passati come parametri $_GET
• impostazione delle opzioni
• inclusione effettiva dei file
• stampa dei campi di intestazione con la funzione header() per la gestione della cache, il tipo mime, ETag
• stampa del contenuto finale del file

Script php: combinare più file css

La particolarità dello script relativo ai file css è che per ogni file da includere è necessario specificare l’attributo media (all, screen, print, ecc.), cioé quell’attributo che indica il tipo di dispositivo per cui deve valere quel file css. Non è necessario specificare l’estensione dei file poiché viene aggiunta automaticamente all’interno dello script.

Attenzione. Non passare nomi di file contenenti il carattere “.” in quanto, nelle richieste $_GET, viene convertito automaticamente in “_”.

Codice html

<link rel="stylesheet" type="text/css"
href="combined.css?file1:all&file2:screen&file3:print" />

Impostare Apache

Poiché lo script che ha l’estensione .css è necessario impostare il server Apache affinché processi il file combined.css come un file .php. Basterà aggiungere un paio di righe.

<FilesMatch "combined.css$">
	AddHandler application/x-httpd-php .css
</FilesMatch>

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/combine_css/combine.txt

Per vedere una demo vai a http://test.jblog.it/combine_css/combine.css?file1:all&file2:screen&file3:print

Per scaricare l’esempio vai a http://download.jblog.it/combine_css.zip

Script php: combinare più file javascript

Non è necessario specificare l’estensione dei file poiché viene aggiunta automaticamente all’interno dello script.

Attenzione. Non passare nomi di file contenenti il carattere “.” in quanto, nelle richieste $_GET, viene convertito automaticamente in “_”.

Codice html

<script type="application/javascript" src="combined.js?file1&file2&file3"></script>

Impostare Apache

Poiché lo script che ha l’estensione .js è necessario impostare il server Apache affinché processi il file combined.js come un file .php. Basterà aggiungere un paio di righe.

<FilesMatch "combined.js$">
	AddHandler application/x-httpd-php .js
</FilesMatch>

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/combine_js/combine.txt

Per vedere una demo vai a http://test.jblog.it/combine_js/combine.js?file1&file2&file3

Per scaricare l’esempio vai a http://download.jblog.it/combine_js.zip

Stampare javascript e css nel codice html

Sappiamo che per utilizzare codice javascript o css ci sono 3 modi:

1. stamparli direttamente nel codice html
2. dividerli su più file esterni (da richiamare)
3. stamparne alcuni e richiamare gli altri

Il terzo metodo

Come succede in tante occasioni, la “via di mezzo” è da preferire. La successiva domanda è: su che criterio si scelgono i file da stampare nel codice html e quelli da richiamare esternamente?

Sinceramente, non saprei dirlo con precisione. Probabilmente esistono degli studi che potrebbero aiutarti in questo. Secondo me, il codice da stampare nel documento html è quello che presumibilmente potrebbe essere utilizzato prima. Ad esempio:

• per javascript, il codice e le funzioni che verranno eseguite nell’evento “onload” dell’oggetto “document”
• per i css, il codice che serve a formattare gli elementi principali della pagina, come html, layout, contenitori, ecc.

Come automatizzare il tutto

Fortunatamente, questa tecnica si può automatizzare con un paio di righe di codice lato server (php).

<html>
<head>
<title>Javascript e Css nella pagina</title>

<style type="text/css">
<?
	/* Array dei file css */
	$css_array = array("file3.css","file2.css");
	foreach($css_array as $css)
	{
		if(file_exists($css))
		include($css);
		echo "\n\n";
	}
?>
</style>

<script type="application/javascript">
//<![CDATA[
<?
	/* Array dei javascript */
	$js_array = array("file1.js","file3.js");
	foreach($js_array as $js)
	{
		if(file_exists($js))
		include($js);
		echo "\n\n";
	}
?>
//]]>
</script>

<!-- File css esterni -->
<link rel="stylesheet" type="text/css" href="file1.css" />

<!-- File javascript esterni -->
<script type="application/javascript" src="file2.js"></script>

</head>
<body>
	<h1>Javascript e Css nella pagina</h1>
	<p>Guarda il codice html</p>
</body>
</html>

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/inhtml/inhtml.txt

Per vedere una demo vai a http://test.jblog.it/inhtml/

Per scaricare l’esempio vai a http://download.jblog.it/inhtml.zip

Eliminare gli script duplicati

Quando si gestiscono grandi progetti si rischia di stampare e richiamare gli stessi script.

Alcuni browser, come Firefox, evitano di effettuare una nuova richiesta http per un file che è stato già scaricato. Purtroppo Internet Explorer non lo fa. Allora è necessario trovare una soluzione che valga per tutti.

Una semplice soluzione consiste nel fare una funzione php che riceva il nome del file da linkare e si occupi di stampare i tag <script>. Per registrare gli script che vengono inseriti di volta in volta si utilizza un array in modo che la funzione, prima di inserire uno script, controlla se il nome dello script non è già presente nell’array.

Normalmente per inserire script e css si dovrebbe scrivere:

<link rel="stylesheet" type="text/css" href="print_style.css" media="print" />
<script src="library.js" type="application/javascript"></script>

Classe PHP: noDuplicate (per php 4 e php 5)

Ti descrivo brevemente la classe “noDuplicate”.

La struttura

class noDuplicate
{
	/* Array dei file javascript */
	var $js_array = array();

	/* Array dei file css */
	var $css_array = array();

	/* Stampa i file specificati. */
	function incScript() { ... }

	/* Privata: registra il file e stampa il link al file javascript */
	function __js($file) { ... }

	/* Privata: registra il file stampa il link al file css */
	function __css($file) { ... }
}

Creare l’oggetto

$noDuplicateObj = new noDuplicate();

La funzione incScript()

• il primo argomento deve essere “js” o “css”
• dal secondo argomento in poi accetta da uno a più file dello stesso tipo
• se si devono inserire file .css è necessario passarli nella forma [nomefile]:[media] (ad es. “style.css:print”). Se vengono passati nella forma normale (“style.css”,”file.css”) verrà automaticamente impostato “all” come media

// singolo file
$noDuplicate->incScript("css","file2.css:all");
$noDuplicate->incScript("js","file1.js");

// più di un file
$noDuplicate->incScript("css","file2.css:all","mystyle.css:screen");
$noDuplicate->incScript("js","file1.js","jquery.js","prototype.js");

// file css senza specificare il "media"
$noDuplicate->incScript("css","file1.css","file3.css");

Risultato

<!-- singolo file -->
<link rel="stylesheet" type="text/css" href="file2.css" media="all" />
<script src="file1.js" type="application/javascript"></script>

<!-- più di un file -->
<link rel="stylesheet" type="text/css" href="file2.css" media="all" />
<link rel="stylesheet" type="text/css" href="mystyle.css" media="screen" />
<script src="file1.js" type="application/javascript"></script>
<script src="jquery.js" type="application/javascript"></script>
<script src="prototype.js" type="application/javascript"></script>

<!-- file css senza specificare il "media" -->
<link rel="stylesheet" type="text/css" href="file1.css" media="all" />
<link rel="stylesheet" type="text/css" href="file3.css" media="all" />

Script, demo e download

Per vedere lo script vai a http://test.jblog.it/rem_duplicate/rem_duplicate.txt

Per vedere una demo vai a http://test.jblog.it/rem_duplicate/

Per scaricare l’esempio vai a http://download.jblog.it/rem_duplicate.zip

Conclusione

Queste tecniche esprimono la massima utilità e potenza se utilizzate contemporaneamente. La riduzione di richieste http e, quindi, l’abbassamento dei tempi di caricamento saranno notevoli.

Spero di essere stato abbastanza esaustivo e chiaro. Se non lo sono stato basterà dirmelo in modo da ritoccare l’articolo nelle sezioni meno comprensibili.

Hai mai utilizzato una di queste tecniche? Gli script hanno funzionato correttamente? È stato semplice metterle in pratica? Hai avuto concreti miglioramenti?

Prossimo appuntamento

L’ultima questione sull’ottimizzazione dei siti web riguarda appunto l’ottimizzazione dei componenti da caricare cioé:

• compressione delle immagini, degli script e dei css
• offuscamento del codice javascript
• utilizzo di gzip per la compressione delle pagine html, script e css

Non perdere il prossimo articolo sull’ottimizzazione dei componenti delle pagine web: codice html, immagini, script e css.

Crediti

• Libro. Creare siti web ad alte prestazioni di Steve Soulders
• WebSiteOptimization – Combine Images to Save HTTP Requests
• Yahoo Developer Network – Best Practices for Speeding Up Your Web Site
• W3C – Objects, Images, and Applets: Image maps
• The Internet Engineering Task Force – The “data” URL scheme
• CssGlobe – Creating easy and useful CSS Sprites
• Foto1: Mast Farm Picnic – 030 di JasonBechtel
• Foto2: Davide Rebellin Argento, la prima medaglia italiana di queste Olimpiadi di olimpiadi.blogosfere.it
• Foto3: Cats Puzzle di kaibara87
• Foto4: icone per sviluppatori
• Foto5: Puzzle di Egan Snow
• Foto6: Do not duplicate di Sam UL

Ajax è una tecnica di programmazione (non un linguaggio) che ti permette di sviluppare applicazioni web interattive. In pratica, grazie ad Ajax puoi aggiornare alcuni dati della pagina senza ricaricare completamente la pagina, migliorando le prestazioni del tuo sito.

In questo articolo: effettuare le richieste e gestire le risposte, formati per lo scambio dati, utilizzare librerie e framework javascript, memorizzare Ajax in cache, evitare risposte duplicate, migliorare l’usabilità delle applicazioni ajax.

Il termine “Ajax” è l’acronimo di Asynchronous JavaScript and XML.

Vedremo che, nonostante la tecnica Ajax preveda l’utilizzo di XML, si potranno utilizzare altri formati per lo scambio dati.

Il termine “Ajax” è stato coniato da Jesse James Garret nel post “Ajax: A New Approach to Web Applications“, il 18 febbraio 2005.

Cosa succede con e senza Ajax

Supponiamo di avere una pagina con un form composto da tre campi di testo: nome, cognome e telefono. Lo script lato-server deve ricevere i tre dati, cercarli nel database e stampare l’indirizzo associato.

Importante. Generalmente, lo script utilizzato con una chiamata Ajax è diverso da quello utilizzato per l’esecuzione senza javascript.

L’esecuzione standard dello script

N.B. i rettangoli tratteggiati indicano cosa viene caricato.

Prima fase. Si carica la pagina html, si scrivono i dati nel form e si inviano al server premendo il pulsante “invia”. Oltre a quelle dei dati, il server riceverà le richieste http degli altri componenti della pagina che dovranno essere ricaricati.

Seconda fase. Il server cerca l’indirizzo nel database, e il browser ricarica completamente la pagina con i nuovi dati o con un messaggio di errore (es. “indirizzo non trovato”).

L’esecuzione dello script utilizzando Ajax

Prima fase. Si carica la pagina html, si scrivono i dati nel form e si inviano al server premendo il pulsante “invia”. Al server arriva solo una richiesta http: quella dei dati inviati. Inoltre vengono stampati i componenti da mostrare successivamente (“tutto ok!”, “i dati … correttamente”, ecc.) nascondendoli con le regole dei css.

Seconda fase. Il server cerca l’indirizzo nel database e, una volta trovato, viene rispedito al browser che aggiornerà il componente riservato all’indirizzo. Gli altri contenuti stampati precedentemente (“tutto ok!”, “i dati … correttamente”, ecc.), vengono resi visibili, mentre i componenti relativi al form vengono nascosti. Per nascondere e mostrare i componenti si utilizzano le regole dei css.

Framework e librerie javascript

Un framework javascript è un insieme di librerie che facilita la scrittura di codice e applicazioni javascript.

Perché utilizzare un framework?

• Ti permette di scrivere in poche righe quello che in javascript “puro” richiderebbe centinaia di righe
• Elimina il problema della compatibilità browser-javascript eseguendo istruzioni diverse a seconda del browser che si sta utilizzando

Ecco i framework più famosi.

Prototype

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications.

http://www.prototypejs.org/

jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

http://jquery.com/

MooTools

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

http://mootools.net/

Dojo

Solve problems faster. Create better user experiences. Liberally licensed. Everything you need, all in one place.

http://dojotoolkit.org/

Ajax, jQuery e Php all’opera

Generalmente un’applicazione Ajax è composta dalla pagina html e dallo script lato-server da richiamare successivamente via javascript.

Il framework che utilizzo è jQuery, soprattutto perché, nel complesso, è molto più leggero e veloce rispetto agli altri.

Analizziamo ora il codice dell’applicazione Ajax di cui ho parlato prima.

Requisiti. Php 5.2, MySql 5, jQuery 1.3.

Demo dell’applicazione. Puoi provare l’applicazione Ajax qui.

Pagina html e codice javascript

Questa pagina si può dividere in due parti.

• codice html
• codice javascript per la gestione delle chiamate ajax e del codice html

Puoi vedere il file completo qui.

Html

All’interno del tag <body> si possono distinguere due <div>. Il primo (id=”form_panel”) ospita il form e un <h3> per la scrittura degli errori (id=”errors”); il secondo (id=”address_panel”) ospita un <div> (id=”the_address”) in cui si scriverà l’indirizzo trovato.

<body>
	<!-- Area del form -->
	<div id="form_panel">
		<h1>INSERISCI I DATI</h1>
		<h3 id="errors" style="display:none;color:#CC0000;"></h3>
		<form action="">
			<p>
				<div><b>Nome</b> <small>(solo lettere)</small></div>
				<input id="firstname" name="firstname" type="text" value="" />
				<small id="firstname_msg" style="color:#CC0000;"></small>
			</p>
			<p>
				<div><b>Cognome</b> <small>(solo lettere)</small></div>
				<input id="lastname" name="lastname" type="text" size="30" value="" />
				<small id="lastname_msg" style="color:#CC0000;"></small>
			</p>
			<p>
				<div><b>Telefono</b> <small>(numeri, trattino "-", parentesi "(" e ")", spazio " ")</small></div>
				<input id="phone" name="phone" type="text" value="" />
				<small id="phone_msg" style="color:#CC0000;"></small>
			</p>
			<p><input id="send" name="send" type="button" value="Invia" /></p>
		</form>
	</div>

	<!-- Area dell'indirizzo (trovato) -->
	<div id="address_panel" style="display:none;">
		<h1>INDIRIZZO</h1>
		<p id="the_address"></p>

		<a href="#" id="back_to_form">&lt; indietro</a>
	</div>
</body>

Javascript

Il codice javascript viene scritto direttamente nel codice html, ma potrebbe essere scritto in un file esterno (.js).

Vengono specificate 3 funzioni e 3 variabili.

$(document).ready(function(){ … }). In realtà, questa non è una funzione, ma un metodo di jQuery che, al posto dei “…”, consente di specificare il codice javascript da eseguire quando la pagina ha completato il caricamento.

function form_check(). Esegue dei controlli sui valori dei campi e restituisce “true” se non ci sono errori, altrimenti “false”.

function form_ajax_send(). Invia i dati del form allo script “myscript.php”, attende e gestisce la risposta.

var form_msgs = new Array(…). Array degli errori relativi al form (es. “dati non corretti”).

var error_msgs = new Array(…). Array degli errori relativi all’invio e alla risposta dei dati (es. “errore del db”).

var regexps = new Array(…). Espressioni regolari utilizzate in form_check() per controllare i caratteri dei dati inseriti.

L’oggetto XMLHttpRequest

Per inviare richieste http dinamiche bisogna utilizzare l’oggetto XMLHttpRequest. Questo oggetto ha una serie di proprietà e metodi.

Uno dei principali svantaggi legati all’utilizzo di questo oggetto sta nel fatto che non è standardizzato, quindi non è riconosciuto universalmente da tutti i browser. Infatti, Internet Explorer 6 e precedenti lo vedono come un ActiveX da richiamare in maniera diversa rispetto ai browser Mozilla.

La soluzione è quella di utilizzare un framework e lasciare che sia lui a occuparsi di effettuare i controlli di compatibilità e differenziare la chiamata e il funzionamento dell’oggetto XMLHttpRequest.

Per conoscere meglio l’oggetto XMLHttpRequest puoi consultare la pagina ufficiale del w3c (in inglese) oppure la pagina su Wikipedia.

Per approfondire la gestione di Ajax con jQuery puoi leggere la pagina della documentazione ufficiale di jQuery relativa ad Ajax: http://docs.jquery.com/Ajax.

Ajax

Analizziamo le righe di codice javascript relative alla gestione della richiesta e della risposta asincrona.

$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
	// funzione "callback", cioé eseguita quando vengono restituiti i dati dallo script "myscript.php"
	function(data,status)
	{
		if(status=="success") { ... }
		else { ... } // status=="failure"
	}
);

$.get. Questa funzione effettua una richiesta GET. Alternativamente si poteva utilizzare $.post. A seconda del tipo di richiesta, nell0 script lato server bisogna utilizzare gli array $_GET e $_POST per ottenere i dati inviati.

“myscript.php”. Il primo argomento della funzione $.get. Specifica lo script da utilizzare.

{firstname_get:firstname,lastname_get:lastname,phone_get:phone}. Il secondo argomento della funzione $.get. Questo è un tipo di dati chiamato “Map”, dove “firstname”, “lastname” e “phone” sono le variabili riempite con i valori del form, e “firstname_get”, “lastname_get” e “phone_get” sono i nomi delle variabili passate allo script. Quindi, in myscript.php per leggere il cognome non utilizzeremo $_GET['lastname'] ma $_GET['lastname_get'].

function(data,status). Il terzo argomento della funzione $.get. Rappresenta la funzione “callback”, ovvero la funzione da utilizzare quando si riceve la risposta. Poiché la risposta è asincrona, cioé avviene in un secondo momento rispetto all’invio dei dati, non possiamo scrivere:

if(form_check())
{
	ajax_invia_dati();
	ajax_gestisci_risposta();
}

poiché, quando verrà chiamata la funzione ajax_gestisci_risposta() sicuramente la risposta non sarà ancora arrivata.

Per questo motivo è necessario specificare la cosiddetta funzione “callback” che verrà eseguita non appena ajax fornirà una risposta. Questa funzione ha due parametri: data (dati ricevuti), status (stato della risposta). Se status è “success” significa che tutto è andato a buon fine, altrimenti status sarà “failure”.

Come ottenere l’oggetto XMLHttpRequest. Le funzioni $.get, $.post, ecc. restituiscono l’oggetto XMLHttpRequest che potrà essere utilizzato con tutti i suoi metodi e le sue proprietà.

Script lato server (php)

• Effettua una connessione al database
• Esegue la query con i dati ricevuti
• Stampa una stringa fra queste: “db error”, “no data”, o l’indirizzo trovato

Puoi vedere il file completo qui.

<?php

header('Expires:'.date("D, d M Y H:i:s",time()+2600000).' GMT');
header('Cache-Control:public,max-age=2600000');

$mydb = @new mysqli('localhost', 'root', 'root', 'mydb');

if(mysqli_connect_errno()!=0) { echo 'db error'; }
else
{
	// effettua la query
	$result = @$mydb->query("
	SELECT	`Address`
	FROM	`info`
	WHERE	`Lastname`='".$_GET['lastname_get']."' AND
		`Firstname`='".$_GET['firstname_get']."' AND
		`Phone`='".$_GET['phone_get']."'		;");

	// controlla quanti record sono stati trovati (se 0: indirizzo non trovato)
	if($mydb->affected_rows==0)	{ echo 'no data'; }

	// indirizzo trovato
	else
	{
		$address = $result->fetch_array(MYSQLI_NUM);
		echo $address[0];
	}
}
?>

Dati restituiti dallo script

• “db error”, se si verifica un errore relativo al database (in fase di connessione)
• “no data”, se non viene trovato l’indirizzo
• stringa dell’indirizzo, se viene trovato l’indirizzo

Come impostare lo script per i test

Se vuoi testare lo script è necessario effettuare alcune semplici operazioni.

• All’interno di myscript.php individua la riga $mydb = @new mysqli(‘localhost’, ‘root’, ‘root’, ‘mydb’); e sostituisci i valori del tuo database: host, username, password, database.
• Crea la tabella “info” nel tuo database. Nello script c’è una query (CREATE TABLE … ) da copiare e far eseguire subito dal tuo dbms (es. phpMyAdmin). Se la crei manualmente è necessario creare 5 campi chiamati ID, Lastname, Firstname, Phone, Address.
• Infine, inserisci un paio di record in modo che l’applicazione Ajax possa trovare qualc0sa nella tabella.

Formati di scambio dati

Per i dati da inviare come risposta possono essere utilizzati vari formati: testo semplice, html, xml, json, ebml.

Lo script dell’esempio precedente stampa testo semplice.

Testo semplice e html

Preferibile se si devono sviluppare applicazioni semplici che non richiedono massicci scambi di dati e complesse elaborazioni.

Il maggior vantaggio sta nel fatto che testo semplice e codice html non richiedono ulteriori elaborazioni per rendere i dati rappresentabili all’interno di una pagina xhtml o html.

Json

Json, acronimo di JavaScript Object Notation,  è un ottimo formato per lo scambio dati.

Si possono rappresentare oggetti e array:

var object = { name : "Giacomo", phone: "123456789", object2: { msg: "Ciao" } };
var array = ["mystring", 100, { msg: "Ciao" }, object, 5*2, 0.134];

Per processare una risposta in formato Json, anziché $.get è necessario utilizzare$.getJson. Questa funzion processa automaticamente una risposta in formato Json in modo da poter utilizzare subito i dati.

Ad esempio, se la risposta è:

var object = { name : "Giacomo", phone: "123456789", object2: { msg: "Ciao" } };
var array = ["mystring", 100, { msg: "Ciao" }, object, 5*2, 0.134];

all’interno della funzione “callback” potremmo utilizzare le due variabili scrivendo semplicemente:

object.name.length; // per ottenere la lunghezza della stringa "Giacomo"
alert(object.object2.msg); // per stampare un alertbox con il messaggio "Ciao"
newvar = array[4] + 3; // per assegnare alla variabile newvar il valore (5*2)+3, cioé 13

Per saperne di più vai alla pagina ufficiale di Json: http://json.org/.

XML

XML, acronimo di eXtensible Markup Language, è un metalinguaggio di markup che permette di definire tag personalizzare per strutturare documenti complessi. Una volta ottenuta una risposta formattata in XML è necessario elaborarla per poterla gestire.

La lettura e l’elaborazione di un testo XML consiste nello scorrere la struttura del documento per recuperare i dati contenuti nei tag XML. Per scorrere la struttura del documento esistono librerie javascript che consentono di farlo semplicemente.

Utilizzare questo formato è vantaggioso nel caso in cui ci siano molti dati da ricevere, mentre è sconsigliabile nel caso in cui ricevano pochi dati in quanto i caratteri per i tag XML potrebbero superare quelli per i dati effettivi.

Memorizza le risposte Ajax in cache per evitare richieste duplicate

Come detto prima, le risposte Ajax non sono altro che risposte HTTP e, come in tutte le risposte HTTP, possono essere inviati gli header.

Naturalmente, gli header devono essere inviati dallo script lato server, prima di qualsiasi output.

Per memorizzare le risposte Ajax nella cache si possono utilizzare i campi di intestazione Cache-Control, Expires, Pragma, ETag. Nei casi in cui non si possa utilizzare la cache del browser ricorreremo a una tecnica javascript.

Per approfondire la gestione della cache dai uno sguardo al post precedente: http://jblog.it/2009/04/24/ridurre-richieste-http-come-utilizzare-cache-browser_124.html.

Richieste GET e POST: come si comporta il browser

Nell’esempio, utiliziamo un solo script lato server che restituisce 3 output diversi a seconda dell’esito dell’operazione: “db error” per l’errore del database, “no data” se non è stato trovato l’indirizzo, e la stringa dell’indirizzo trovato nel database.

Ti consiglio di leggere questo interessante articolo (in inglese) del w3c: URI, indirizzabilità, e l’uso di GET e POST.

Il comportamento del browser cambia in base al tipo di richiesta (GET e POST) e agli header inviati dallo script lato server. Analizziamo alcuni casi più da vicino.

Le richieste GET

L’indirizzo di una richiesta GET ha la forma:

http://localhost/ajax_phone/myscript.php?par1=ciao&par2=hello

Il comportamento di default del browser consiste nell’inviare sempre una nuova richiesta.

Tuttavia, se vogliamo che il browser memorizzi per 1 ora la risposta dello script lato server, inviamo i seguenti header:

header('Expires:Sun, 03 May 2009 23:18:45 GMT');
header('Cache-Control:public,max-age=3600');
header('Pragma:public');

In questo caso, quando l’applicazione Ajax invia la prima richiesta, il browser legge lo script e lo memorizza in cache. La volta successiva possono verificarsi due casi:

• se si inviano dei dati diversi (ad es., se invece di “par2=hello” inviamo “par2=welcome”) il browser effettua una nuova richiesta e la memorizza in cache
• se si inviano gli stessi dati, il browser si accorge che l’indirizzo della richiesta è uguale, quindi legge i dati dalla cache evitando di effettuare una nuova richiesta

Differenziare gli header. Se alcune richieste non devono essere memorizzate in cache, puoi inviare degli header diversi a seconda dell’ouput generato dallo script (prima di stampare qualsiasi output). Ad esempio:

if($output!="error")
{
	header('Expires:Sun, 03 May 2009 23:18:45 GMT');
	header('Cache-Control:public,max-age=3600');
	header('Pragma:public');
}
else
{
	header('Expires:Sun, 01 Jan 1970 02:00:00 GMT');
	header('Cache-Control:no-cache');
	header('Pragma:no-cache');
}

Forzare la richiesta. Per fare in modo che il browser effettui una nuova richiesta, anche se questa è già presente nella cache, basta inviare un ulteriore parametro con un valore variabile, ad esempio un numero casuale.

$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone,random:Math.random()},
	function(data,status){...});

Le richieste POST

L’indirizzo di una richiesta POST ha la forma:

http://localhost/ajax_phone/myscript.php

E i parametri? Vengono inviati tramite protocollo HTTP, ma non sono visibili al browser.

Le richieste POST non possono essere memorizzate in cache.

Come evitare le richieste duplicate

Abbiamo visto che le richieste POST non possono essere memorizzate in cache.

Tuttavia è possibile evitare le richieste duplicate grazie a qualche riga di javascript.

Questa tecnica consiste nel memorizzare i dati inviati e ricevuti in un array, in modo che, prima di inviare una richiesta, si controlla se i dati da inviare sono già presenti nell’array. Se sono presenti, si leggono i dati ricevuti in corrispondenza dei dati richiesti e si procede con l’esecuzione dell’applicazione.

var my_array() = new Array();

/* Una volta riempito l'array avrà questo aspetto
myarray = Array(
	Array( Array('Mario','Rossi',3429752370), 'no data' ),
	Array( Array('Giacomo','Ratta',4325233), 'Via Beethoven, 21' ),
);
*/

Ogni elemento dell’array è un array di due elementi. Il primo è l’array dei dati inviati; il secondo è la stringa dell’output restituito.

// Esegue le operazioni con i dati ricevuti
function esegui_le_operazioni(data) { ... }

if(form_check())
{
	// Leggo i valori dei 3 campi del form
	firstname = $('#firstname').val();
	lastname = $('#lastname').val();
	phone = $('#phone').val();

	// Indica se sono state trovate i dati da inviare
	// Contiene l'indice dell'elemento contenente dati inviati e dati ricevuti
	found = -1;

	// Cerco i dati nell'array
	for(i=0;i<my_array.length;i++)
	{
		// (riga da adattare in base alle proprie esigenze)
		if(my_array[i][0][0]==firstname && my_array[i][0][1]==lastname && my_array[i][0][1]==phone)
		{ found=i; break; }
	}

	// I dati sono stati trovati
	if(found>=0)
	{
		esegui_le_operazioni(my_array[found][1]);
	}

	// Dati non trovati: nuova richiesta
	else {
		$.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
		// funzione "callback", cioé eseguita quando vengono restituiti i dati dallo script "myscript.php"
		function(data,status)
		{
			if(status=="success")
			{
				// Inserisco dati inviati e dati ricevuti nell'array
				// riga da adattare in base alle proprie esigenze)
				my_array.push(new Array(new Array(firstname,lastname,phone), data));

				esegui_le_operazioni(data);
			}
			else { ... } // status=="failure"

		}); //end-callback

	} //end-if
}

Quando utilizzare GET e quando POST

• Il metodo GET è da preferire quando si devono inviare dati per il normale funzionamento della pagina e degli script
• Il metodo POST si deve utilizzare quando quelli da scambiare sono dei dati sensibili (username, password, telefono)

Migliorare l’usabilità e l’accessibilità delle applicazioni Ajax

Spesso nella progettazione delle applicazioni Ajax l’usabilità lascia un po’ a desiderare: nessun messaggio di successo/errore, caricamenti infiniti senza segni di vita, ecc.

Certo, l’usabilità è un tema complesso e progettare siti e applicazioni usabili richiede tempo e buone competenze.

Tuttavia, ci sono alcune cose che devono essere fatte e che, fortunatamente, non richiedono troppo tempo.

Potrai vedere queste modifiche nello script di esempio.

Errori e messaggi

• Ogni campo di input deve avere la relativa area dedicata ai messaggi di errore (“dati obbligatori”, “caratteri non validi”, ecc.)
• La pagina deve avere un’area destinata ad ospitare i messaggi relativi all’esecuzione dello script (“ricerca eseguita con successo”, “errore dell’applicazione”, “errore del database”, ecc.)

Barra di caricamento

Nella maggior parte della applicazioni, per motivi tecnici, non è possibile inserire una barra di caricamento che rilevi la percentuale reale dei dati caricati fino a quel momento.

Generalmente, si preferisce mostrare un’immagine gif che può essere una barra di caricamento o un’animazione generica in modo che faccia sapere all’utente che l’applicazione sta lavorando.

Svantaggio. Durante il caricamento dei dati si potrebbe verificare un malfunzionamento che non blocca la richiesta. In questo caso il caricamento sarebbe infinito provocando l’abbandono del sito da parte dell’utente.

Soluzione 1. Puoi inserire un pulsante da far premere all’utente per fermare la richiesta http.

<button type="button" onclick="stopAjaxRequest();">Stop</button>

Soluzione 2. Analizza il tuo script e prevedi un tempo massimo entro cui restituire l’output, e, con javascript, impostare un timer che faccia fermare la richiesta Ajax una volta trascorso il tempo previsto.

// esegue la funzione stopAjaxRequest() dopo 10 secondi
setTimeout(stopAjaxRequest(),10000);

Come creare la funzione stopAjaxRequest().

• L’oggetto XMLHttpRequest ha il metodo abort() che permette di fermare una richiesta http.
• Le funzioni $.ajax, $.get, $.post, $.getScript, $.getJSON di jquery restituiscono un oggetto XMLHttpRequest.

1. Creiamo una variabile globale per l’oggetto XMLHttpRequest, che chiamiamo XHR

var XHR;

2. Creiamo la funzione stopAjaxRequest() che richiama XHR ed esegue il metodo abort()

function stopAjaxRequest() { XHR.abort(); }

3. Assegnamo a XHR l’oggetto restituito dalla funzione $.get che utilizziamo per inviare i dati

XHR = $.get("myscript.php",{firstname_get:firstname,lastname_get:lastname,phone_get:phone},
	function(data,status) { ... });

Se javascript è disabilitato…

Purtroppo, ancora oggi ci sono utenti che utilizzano browser che non eseguono codice javascript, che hanno scarsa compatibilità oppure con javascript disattivato.

La soluzione è quella di progettare applicazioni che funzionino sia con javascript che senza.

Questo potrebbe andare bene per la piccola applicazione Ajax realizzata per questo post. Tuttavia, se le applicazioni sono di un certo livello, il carico di lavoro aumenta notevolmente. Quindi progettare applicazioni ibride ha senso solo quando le applicazioni da realizzare devono offrire il massimo della compatibilità con i browser usati dagli utenti (ad es. siti governativi, pubblica amministrazione, ecc.)

Secondo me, data la piccola percentuale di browser non compatibili e di utenti che disattivano (erroneamente) javascript, e la presenza di siti importanti come ebay, microsoft, youtube che non offrono l’alternativa “no javascript”, si può benissimo sviluppare un sito senza preoccuparsi degli utenti che non potranno eseguire javascript.

Nel tag <noscript> è possibile inserire il codice html da eseguire in caso di “javascript disabilitato”.

Alcune volte l’ho utilizzato per nascondere dei componenti che avevano senso solo con javascript disabilitato. Lo so… sintatticamente non è corretto, però potrebbe esserti utile.

Supponiamo di avere un link che fa apparire un alert:

<a id="alert_click" href="#" onclick="javascript:alert('Ciao!');">Clicca qui</a>

Per nasconderlo, in caso di javascript disabilitato, scriviamo:

<noscript>
<style type="text/css">
#alert_click { display:none; }
</style>
</noscript>

Svantaggi di Ajax

• Le chiamate effettuate non vengono registrate nella cronologia, a differenza di quanto avviene utilizzando iframe nascosti
• I pulsanti “avanti” e “dietro” non sono utilizzabili poiché le chiamate Ajax non vengono memorizzate nella cronologia
• L’utilizzo esclusivo di javascript viola il requisito 15 della legge Stanca: “la pagina deve essere fruibile anche in assenza di script”
• L’oggetto XMLHttpRequest non è compatibile con tutti i browser. Internet Explorer 6 e precedenti lo vedono come oggetto ActiveX, e il browser potrebbe essere impostato a un livello di sicurezza tale da non permettere l’esecuzione di controlli ActiveX
• L’oggetto XMLHttpRequest può comunicare solo all’interno del dominio. Se la destinazione è esterna al dominio bisogna creare un proxy lato server per poter comunicare all’esterno.
• Poiché i motori di ricerca non eseguono codice javascript, essi non possono indicizzare i contenuti generati dinamicamente con javascript e Ajax

Libri e risorse utili

Ajax. Guida per lo sviluppatore. Seconda edizione. Hoepli (2007).

Con Ajax guida per lo sviluppatore scoprirete come sfidare le regole tradizionali di quello che può accadere sul Web e come liberarvi del consueto approccio “click and wait”, approfondendo le tecniche, i pattern e i casi di utilizzo di Ajax, così da crearvi un’esperienza d’uso senza precedenti nelle vostre applicazioni.

Link: http://www.hoepli.it/editore/visbook.asp?id=978-88-203-3923-4.

Ajax e Php. Sviluppare applicazioni web dinamiche. Hoepli (2007)

AJAX e PHP. Sviluppare applicazioni web dinamiche è la risorsa più pratica ed efficiente che possiate utilizzare per entrare nell’entusiasmante mondo di AJAX. Questo libro vi spiegherà infatti come creare applicazioni web in PHP che sfruttino al massimo le tecnologie Ajax.

Link: http://www.hoepli.it/libro/ajax-php.asp

Siti e pagine

Ajax: A New Approach to Web Applications

W3C: The XMLHttpRequest Object

Wikipedia: l’oggetto XMLHttpRequest

jQuery: Ajax

JSON.org

Ridurre le richieste HTTP (parte 1): come utilizzare la cache del browser

W3C: URIs, Addressability, and the use of HTTP GET and POST