Su molti siti internet si è diffuso l’utilizzo di un plugin per ricevere i commenti dagli utenti Facebook direttamente all’interno del sito web. Questo plugin, utilizzando la proceduta guidata, genera del codice con una larghezza fissa di default. Questo non è ottimale per tutti i siti che hanno un layout liquido, progettati per adattarsi automaticamente alla larghezza dello schermo. Continua a leggere “Commenti Facebook per layout liquidi”
Categoria: Javascript & AJAX
Piccole librerie e consigli per aggiungere funzionalità, dinamicità e interattività altrimenti impossibili senza script, senza compromettere l’accessibilità ai contenuti del sito ai browser alternativi ed ai robot/spider dei motori di ricerca.
Debugging con la funzione dump e la console di Mozilla Firefox
Il sistema più semplice e diffuso per effettuare il debug di una applicazione JavaScript, è quello di piazzare un alert nel mezzo del codice sorgente, al fine di controllare il contenuto di alcune variabili.
alert("Hello Firefox");
Questo approccio, sicuramente immediato, purtroppo non può essere utilizzato in tutte le situazioni. Il classico esempio sono le richieste XMLHttpRequest negli script: la comparsa della finestra pop-up interrompe lo script finché non si preme il pulsante OK, e tutti gli eventi che occorrono nel frattempo – quali readyStateChange – non vengono gestiti, causando effetti imprevisti.
Per ottenere un monitoraggio molto più attendibile, si può utilizzare la console di Firefox, una caratteristica non molto conosciuta del browser di casa Mozilla, che richiede però alcuni interventi per essere utilizzata.
Avvio della console di Firefox
Innanzitutto la console di Firefox non va assolutamente confusa con la console degli errori, già abilitata di default in tutte le installazioni, ed accessibile attraverso il menù Strumenti. Si tratta di una vera e propria console, molto simile ad un terminale, che può essere usata anche per interagire con le sessioni aperte ed inviare comandi al browser.
Per avviare la console di Firefox, è necessario controllare che tutte le sessioni correnti siano chiuse, quindi riavviare il browser con il parametro -console. In Windows, si può utilizzare il prompt dei comandi oppure la finestra “Esegui” del menu start, e digitare il comando.
"%programfiles%\Mozilla Firefox\firefox.exe" -console
Se la console non dovesse aprirsi, controllate che il processo di Firefox non sia ancora in esecuzione (in Windows tramite Task Manager) ed eventualmente forzatene la chiusura. Per il futuro, per facilitare l’avvio della console, consiglio di creare un collegamento sul desktop.
Abilitazione della funzione window.dump
Per scrivere nella console si utilizza la funzione dump, che di default non è abilitata. Nella barra degli indirizzi è necessario accedere ad about:config ed aggiungere un nuovo valore booleano oppure modificare il file user.js nel proprio profilo.
browser.dom.window.dump.enabled = true
Una volta effettuata la modifica alla configurazione, è necessario riavviare nuovamente Firefox affinché abbia effetto.
Utilizzo della funzione window.dump
La sintassi è molto semplice ed è molto simile agli alert.
dump("Hello Firefox\n");
Come si può notare, è stato usato un carattere newline (capo riga) alla fine della stringa. Consiglio di aggiungerlo sempre, per rendere maggiormente leggibili i log sullo schermo della console.
Aggiungi ai segnalibri/preferiti
Può essere interessante e utile fornire un link all’interno del proprio sito web in cui si propone di aggiungere la pagina nei segnalibri o nei favoriti di Internet Explorer.
Esistono notevoli differenze tra i vari browser per implementare questa funzione, che hanno favorito l’abuso di JavaScript e rendendo tali link completamente inaccessibili. Fortunatamente Opera ha proposto una soluzione semplice, basata su puro HTML.
Il segreto di questo link è l’attributo rel="sidebar" che indica al browser una relazione con i segnalibri. Recentemente è stato implementato anche in Firefox e negli altri software basati su Gecko. Internet Explorer e le versioni precedenti di Gecko (in particolare Mozilla Suite) ignorano completamente l’attributo e lo considerano un normale collegamento ipertestuale. Per risolvere non c’è altra soluzione che aggiungere un semplice JavaScript.
function addbookmark_click( )
{
if(self.external)
{
self.external.AddFavorite(this.href, this.title);
return false;
}
else if(self.sidebar)
{
self.sidebar.addPanel(this.title, this.href, "");
return false;
}
else return true;
}
function body_load( )
{
if(document.getElementById)
var link_addbookmark = document.getElementById("addbookmark");
else if(document.all)
var link_addbookmark = document.all["addbookmark"];
if(link_addbookmark)
link_addbookmark.onclick = addbookmark_click;
}
if(typeof self.addEventListener != "undefined")
self.addEventListener("load", body_load, false);
else if(typeof self.attachEvent != "undefined")
self.attachEvent("onload", body_load);
Il vantaggio di questa soluzione è di essere trasparente nei confronti di tutti gli User Agent che non supportano JavaScript, siano essi browser o lettori vocali.
Passaggio di parametri dal server al client JavaScript
Molto spesso nello sviluppo di un sito Internet può capitare di dove inviare alcune informazioni salvate nel database ad uno script che andrà eseguito nel client dal browser.
Il metodo più semplice e diffuso è quello di passare i parametri direttamente in un blocco di codice JavaScript in linea, assieme al codice del documento HTML.
<?php myText = "Testo che proviene dal server"; myURL = "http://url-letto-dal-server.com"; ?>
alert("<?php echo myText ?>");
location.href = "<?php echo myURL ?>";
Per mantenere il codice maggiormente pulito, sarebbe ideale inserire tutti gli script JS e i fogli di stile CSS in file esterni, in modo da separare parte dinamica e la formattazione dai contenuti del documento HTML. In questo modo il nostro sito diventa più semantico, oltre che più accessibile. Si pone però il problema di far avere dei parametri agli script esterni senza richiamare ulteriori script lato server e consumare risorse.
Prima di HTML5
I tag META, nella sezione HEAD, sono da sempre usati per aggiungere informazioni al documento, normalmente per fornire l’autore, la data di modifica ed altre informazioni agli spider dei motori di ricerca. Le raccomandazioni del w3c non definiscono e non limitano quali siano le informazioni che possano essere trasmesse, quindi nessuno ci impedisce di creare dei meta-dati personalizzati. La soluzione che propongo è di inserire i valori di cui abbiamo bisogno in nostri tag META ed accedervi da JavaScript utilizzando le funzioni del DOM. Se il dato da trasmettere è un URI, le raccomandazioni del w3c consigliano di usare il tag LINK.
<meta name="myText" id="myText" value="<?php echo myText ?>" /> <link rel="myURL" id="myURL" href="<?php echo myText ?>" />
alert(document.getElementById("myText").value);
location.href = document.getElementById("myURL").href;
Il codice dello script ora può essere comodamente inserito in un file esterno con estensione JS da collegare al documento. Gli script del server dovranno generare un’unica pagina HTML, utilizzando le stesse risorse di calcolo della soluzione classica, ma sia la manutenzione del codice javascript che la sua leggibilità sono notevolmente migliorate.
Soluzione attuale per HTML 5
La soluzione precente, seppur perfettamente funzionante anche con HTML5, ha un problema: durante la convalida del codice con il validatore W3c causerà degli errori. Questo perché HTML5 non consente l’uso di meta e link tag personalizzati.
Lo stesso HTML5 però ha previsto la possibilità di utilizzare degli attributi aggiuntivi personalizzati, da inserire a piacere in qualsiasi tag, che non causeranno errori di convalida. Questi attributi devo iniziare con il suffisso data-.
<body data-myText="<?php echo myText ?>" data-myURL="<?php echo myURL ?>">
alert(document.body.getAttribute("myText"));
location.href = document.body.getAttribute("myURL");
.
PNG trasparenti in Internet Explorer 6
È noto tra gli sviluppatori di siti internet che nelle versioni di Microsoft Internet Explorer precedenti la versione 7, non è supportata la trasparenza del canale alpha delle immagini PNG in modo nativo.
Per abilitare la corretta visualizzazione della trasparenza dell’immagine con Internet Explorer 6, bisogna utilizzare un’estensione proprietaria Microsoft nei CSS.
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='nomefile.png');
Con questa tecnica il canale alpha viene effettivamente riconosciuto, tuttavia utilizzandolo direttamente nei nostri CSS, viene persa la conformità allo standard w3c e viene generato un errore sottoponendo il foglio di stile al servizio di convalida dei CSS. In aggiunta, è molto problematico creare un sito cross-browser: l’immagine che definiamo in un normale tag IMG per i browser che supportano nativamente il formato, quali Firefox ed Opera, verrà caricata anche in Explorer senza trasparenza.
Molti sviluppatori finora hanno privilegiato la conformità allo standard CSS, preferendo non deturpare il codice dei fogli di stile con le stravaganze introdotte da Microsoft, ed hanno utilizzato il vecchio formato GIF con tutte le sue limitazioni (massimo 256 colori, 1 bit di trasparenza, protetto da brevetti e royalty). Questo ha causato per anni il ristagno di un ottimo formato, ideato appositamente per rimpiazzare GIF.
Ora che le nuove versioni di Internet Explorer implementano correttamente il formato PNG, si sta rapidamente diffondendo e molti siti iniziano ad adottarlo. Rimane tuttavia il problema delle versioni precedenti, ancora ampiamente diffuse nei sistemi operativi Windows 2000, Windows Millennium Edition e Windows 98, che non possono essere aggiornate ad Internet Explorer 7.
Per risolvere questo problema possiamo utilizzare JavaScript per identificare Internet Explorer 6 e, solo per questo browser, modificare il sorgente della pagina HTML rimuovendo tutti i tag IMG e sostituendolo con un tag SPAN a cui viene applicata la regola proprietaria Microsoft. Questo approccio ci consente di conservare la conformità CSS.
/*
* PNG Patch 1.0 javascript library
*
* Copyright © 2003 - 2007 Davide Bia
* http://www.flyonthenet.com/
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 2
* as published by the Free Software Foundation;
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* http://www.gnu.org/licenses/gpl-2.0.txt
*
*/
function PNG_Replace(PNG_Image)
{
var PNG_Patched = false;
if(!PNG_Image)
PNG_Image = event.srcElement;
if(PNG_Image.src.search(/\.png$/i) > -1 && PNG_Image.className.search(/(?=^|\b)noalpha(?=\b|$)/i) == -1)
{
var PNG_Span = document.createElement("span");
PNG_Span.setAttribute("title", PNG_Image.title || PNG_Image.alt);
if(PNG_Image.className)
PNG_Span.className = PNG_Image.className;
if(PNG_Image.border)
PNG_Span.style.borderWidth = PNG_Image.border + "px";
PNG_Span.style.display = "inline-block";
PNG_Span.style.height = PNG_Image.offsetHeight + "px";
PNG_Span.style.width = PNG_Image.offsetWidth + "px";
PNG_Span.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + PNG_Image.src + "')";
PNG_Image.replaceNode(PNG_Span);
PNG_Patched = true;
}
return PNG_Patched;
}
function PNG_Patch( )
{
if(typeof document.images != "undefined" && typeof document.body.style.filter != "undefined")
for(var i=0; i
if(PNG_Replace(document.images[i]))
i--;
}
if(navigator.userAgent.indexOf("MSIE 6.0") > -1)
{
if(document.readyState != "complete")
document.attachEvent("onreadystatechange", PNG_Patch);
else PNG_Patch( );
}
Se siete intenzionati ad utilizzare il codice nel vostro sito, si consiglia di scaricare la libreria e salvare il codice in un file .js separato, da aggiungere nella sezione HEAD del documento.
[code lang=”html”][/code]