Il blog sull'informatica

Qualunque form HTML che si rispetti, deve garantire delle contromisure valide contro gli spammer bot, avvelendosi di un sistema captcha.

Dopo aver fatto un breve "giro in rete" mi sono imbattuto in questo prodotto (open source).

Diciamo che le operazioni di implementazione e quelle di personalizzazione sono estremamente semplici ed intuitive, basta leggere questa Quickstart Guide per comprendere appieno il funzionamento del tool in questione.

Non vi resta che includere i file PHP richesti, inserire l'apposito campo di input nel vostro form ed il gioco è fatto.

Alla prossima.

Ormai il pulsante "like" di Facebook è diventato una moda ed in quanto tale sono sempre di più i siti che usufruiscono di questo gadget. L'inserimento del suddetto pulsante all'interno del codice HTML del proprio sito è praticamente un gioco da ragazzi (basta copiare ed incollare il sorgente autogenerato mediante questa interfaccia user-friendly). I problemi, però, iniziano quando si vuole customizzare pesantemente il "like" di Facebook, ad esempio implementando un evento on click oppure "nascondendo" la barra dei commenti.

Nel primo caso è sufficiente utilizzare un codice javascript simile al seguente

<!--
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(href, widget) {
//action
});
 };
//-->

Se ad esempio si volesse implementare l'apertura di una finestra pop-up immediatamente dopo il click sul "like", il codice diventerebbe:

<!--
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(href, widget) {
window.open('vostraurl', '_blank');
});
 };
//-->

Nel caso in cui, invece, si volesse nascondere la barra dei commenti, è necessario lavorare di CSS. Nella fattispecie, occorre attribuire un display:none alla classe .fb_edge_widget_with_comment, utilizzando la keyword !important per evitare possibili sovrascritture di tali impostazioni all'interno della pagina HTML (attraverso il tag style):

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;}

Ed il gioco è fatto.

A presto.

Ecco una semplice funzione Javascript che consente di ottenere l'invio del contenuto di un campo di input semplicemente pigiando il tasto enter:

<script type="text/javascript">
  function onEnter(evt, frm)
  {
      var keyCode = null;
   
    if( evt.which )
    {
         keyCode = evt.which;
     }
    else if( evt.keyCode )
    {
         keyCode = evt.keyCode;
     }
    
    if( 13 == keyCode )
    {
         document.searchForm.searchbutton.click();
         return false;
     }
   
     return true;
  }
  </script>

Il codice HTML ad essa associato è il seguente:

<form id="searchForm" name="searchForm" class="searchform">
                <input id="input" name="input" type="text" value="Search..." onFocus="if (this.value == 'Search...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search...';}" onKeyPress="return onEnter(event,this.form)"/>
                <input id="searchbutton" name="searchbutton" class="searchbutton" type="button" value="a" onClick="document.forms['searchForm'].submit()"/>
</form>

Alla prossima.

L'attributo z-index, utilizzato nell'ambito dei fogli di stile (CSS), consente di ordinare gli elementi grafici di una pagina Web secondo la coordinata spaziale z. Purtroppo però, quando si ha a che fare con degli *.swf e si utilizza Google Crome come browser, l'attributo z-index viene totalmente ignorato, ragion per cui il filmato sarà sempre posizionato "più in superficie" rispetto agli altri elementi.

Inutile dire che tale comportamento "anomalo" non si verifica nè con Mozilla Firefox nè con IE8 ed IE9.

Esiste tuttavia un workaround. Esso consiste, sostanzialmente, nell'uso dell'attributo wmod relativo al tag embed. Il valore associato all'attributo in questione dovrà essere transparent.

Ad esempio:

<embed wmode="transparent">

Inoltre, occorre inserire il seguente codice HTML tra i tag <object></object>:

<param name="wmode" value="transparent" />

Adesso anche Google Chrome sarà in grado di visualizzare gli elementi grafici della pagina nel giusto ordine di profondità.

A presto.

Recentemente ho avuto la necessità di creare due action diverse per un unico form, le quali puntano rispettivamente a 2 iframe separati (in cui visualizzare i risultati di una query eseguita mediante PHP/SQL).

Per fare una cosa di questo tipo è stato necessario utilizzare due pulsanti di submit, ad ognuno dei quali, mediante javascript, è stata assegnata una action ed un target specifico.

Ma bando alle ciance ed ecco il codice:

<form name="filtro" id="filtro" method="post">

<strong>da:</strong><input class="bordotar" type="text" name="datain" tabindex="1" id="datain"/>

<strong>a:</strong> <input class="bordotar" type="text" name="datafin" tabindex="2" id="datafin"/>

<p align="center"><input type="submit" name="filtra" id="filtra" value="Filtra i ricavi" onclick="javascript:filtro.action='ris_ricavi.php'; filtro.target='frame1'" tabindex="3" /></p>

<p align="center"><input type="submit" name="filtra" id="filtra" value="Filtra i costi" onclick="javascript:filtro.action='ris_costi.php'; filtro.target='frame2'" tabindex="4" /></p>

<iframe name="frame1" id="frame1" src ="ris_ricavi.php" align="middle" width="750" height="300">

<iframe name="frame2" id="frame2" src ="ris_costi.php" align="middle" width="750" height="300">

</form>

Per qualunque chiarimento contattatemi.

A presto.

Recentemente ho dovuto modificare parzialmente uno dei CRM che ho sviluppato. Non volendo inficiare il DB in produzione ho dovuto "clonarlo", in modo da poter fare i miei esperimenti in assoluta libertà.

Poichè volevo essere sicuro che ciascuna pagina utilizzasse effettivamente il database "clone" (avendo a disposizione un solo server), ho implementato un controllo in PHP che mi restituisse il nome del DB in uso all'apertura della pagina.

Ecco lo script:

$db = $mysqli -> query("SELECT DATABASE()");

while($riga1 = $db -> fetch_assoc())
{
    echo $riga1["DATABASE()"];
}

La chiave di lettura delle righe di codice sopra riportate sta proprio nella funzione DATABASE() di MySQL, la quale consente di individuare il nome del DB in uso.

Da riga di comando avremo una situazione simile alla seguente:

mysql> SELECT DATABASE();
+------------+
| DATABASE() |
+------------+
| prova        |
+------------+
1 row in set (0.00 sec)

mysql>

Il post termina qui, a presto.

Poco tempo fa un cliente mi ha chiesto di aggiungere all'interno della sua homepage l'addon like-box di Facebook. Purtroppo però, tale addon non è validato W3C per XHTML 1.0 (sia Strict che Transational), quindi ho dovuto fare un giro sul Web per cercare qualche soluzione alternativa.

Ed ecco il risultato della mia ricerca:

<script type="text/javascript">
//<![CDATA[
(function() {
    document.write('<fb:like-box href="http://www.facebook.com/pages/Rooms-2-Rent-Bed-Breakfast-Relax/183795715015987" width="200" height="100" show_faces="false" border_color="" stream="false" header="true"></fb:like-box>');
    var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1';
    s1.parentNode.insertBefore(s, s1);
})();
//]]>
</script>

Grazie a questo script è possibile aggirare la validazione W3C poichè non si tratta di codice XHTML. Il suo funzionamento è abbastanza semplice: viene creato un elemento, il cui nome è SCRIPT, nel quale viene inserito il tag <fb:like-box> con i relativi attributi.

Spero di esservi stato utile.

A presto.

Recentemente ho controllato il codice HTML di alcuni siti Web che ho realizzato, ponendo particolare attenzione sulla validazione w3c.

Poichè in una di queste pagine era presente il tag <marquee> (piuttosto datato ed incompatibile con molti browser), non è stato possibile validarla. Quindi ho deciso di sostituire il tag in questione con un piccolo script client side che svolgesse le stesse funzioni del vertical marquee.

Per prima cosa ho creato un file *.js, chiamato marquee.js, il cui contenuto è il seguente:

/* This script and many more are available free online at
The JavaScript Source :: http://javascript.internet.com
Created by: Mike Hudson :: http://www.afrozeus.com */

/*
To change the values in the setupLinks function below.
You will notice there are two arrays for each of Titles and
Links. Currently there are 3 items in each array, but you can easily
expand on that by adding to the array. For example, to add a 4th record,
you would simply include the following 2 lines at the end of setupLinks
function:

arrLinks[3] = "someURL.htm";
arrTitles[3] = "Some title";
*/
function setupLinks() {
  arrLinks[0] = "http://forums.webdeveloper.com/forumdisplay.php?s=&forumid=3";
  arrTitles[0] = "If you have any questions, be sure to visit our forums.";
  arrLinks[1] = "http://javascript.internet.com/new/";
  arrTitles[1] = "Don't miss anything - check our new additions.";
  arrLinks[2] = "http://www.webreference.com/programming/javascript/diaries/";
  arrTitles[2] = "Want to learn JavaScript? Start at the beginning.";
}

var m_iInterval;
var m_Height;
//window.onload = wl;
var iScroll=0;

var arrLinks;
var arrTitles;

var arrCursor = 0;

var arrMax;
window.onload=wl;

function wl() {
  m_iInterval = setInterval(ontimer, 10);
  var base = document.getElementById("jump_base");

  m_Height = base.offsetHeight;

  var divi = parseInt(m_Height/5);
  m_Height = divi*5;

  var td1 = document.getElementById("td1");
  var td2 = document.getElementById("td2");
  var td3 = document.getElementById("td3");
  td1.height = m_Height-5;
  td2.height = m_Height-5;
  td3.height = m_Height-5;

  arrLinks = new Array();
  arrTitles = new Array();

  setupLinks();
  arrMax = arrLinks.length-1;
  setLink();
}
function setLink() {
  var ilink = document.getElementById("jump_link");
  ilink.innerHTML = arrTitles[arrCursor];
  ilink.href = arrLinks[arrCursor];
}
function ontimer() {
  var base = document.getElementById("jump_base");
  iScroll+=5;
  if (iScroll>(m_Height*2)) {
    iScroll=0;
    arrCursor++;
    if (arrCursor>arrMax)
      arrCursor=0;
    setLink();
  }
  if (iScroll==m_Height) {
    pause();
    m_iInterval = setTimeout(resume, 4000);
  }
  base.scrollTop=iScroll;
}
function pause() {
  clearInterval(m_iInterval);
}
function resume() {
  m_iInterval = setInterval(ontimer, 10);
}

Successivamente, ho aggiunto il seguente codice al foglio di stile:

#jump_base {
  overflow-y:hidden;
  width: 200px;
  height: 100px;
  border: 2px dotted #000099;
  margin: auto;
  padding: 0 10px 0 10px;
  font-size: .9em;
  font-family: Verdana, Arial, sans-serif;
}

#jump_base a {
  color: #000099;
  background-color: inherit;
}

.news {
  background-color: #DDDDDD;
  color: inherit;
}

Infine, nella pagina HTML ho digitato:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Vertical Scroll</title>
<script type="text/javascript" src="vertical.js"></script>
</head>
<body>
<div align="center">
<center>
<div id="jump_base" class="news" onmouseover="pause()" onmouseout="resume()">
  <table class="news">
    <tr>
    <td id="td1"> </td></tr>
    <tr><td id = "td2" valign="middle" align="center"><a id="jump_link" href="" target="_new"></a></td></tr>
    <tr><td id="td3"> </td></tr>
  </table>
</div>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>
</center>
</div>
</body>
</html>

Come avrete certamente notato, il codice riportato in questo post non è farina del mio sacco ma può tornarvi certamente utile.

Per eventuali chiarimenti e personalizzazioni del codice contattatemi.

A presto.

Recentemente si è manifestata la necessità di aumentare la durata delle sessioni relative ad uno dei CRM che ho sviluppato, in modo da non costringere l'utente ad effettuare nuovamente il login dopo un certo periodo di inattività.

Il modo più semplice ed efficace per ottenere tale risultato consiste nel modificare il valore associato al parametro session.gc_maxlifetime del file php.ini, portandolo da 1440 (24 minuti) a 28800 (8 ore).

Per fare ciò occorre editare il suddetto file mediante il comando:

nightfly@nightbox:~$ sudo nano /etc/php5/apache2/php.ini

Una volta completata l'operazione, è necessario riavviare apache2 digitando:

nightfly@nightbox:~$ sudo service apache2 restart

ed abbiamo finito.

A presto.

NB: ovviamente la sessione verrà comunque terminata alla chiusura del browser.

La funzione date() è sicuramente un ottimo strumento per rappresentare le date nel formato gg/mm/aaaa et similia, ma diventa deltutto insufficiente quando si ha a che fare con le date in italiano.

A tal proposito, torna certamente utile la funzione strftime() che abbinata alla funzione setlocale() ci consente di ottenere la visualizzazione della data nella lingua che preferiamo.

Ma facciamo un esempio pratico. Per prima cosa richiamiamo la funzione setlocale() nel modo seguente:

setlocale(LC_TIME, 'ita', 'it_IT.utf8');

Il secondo parametro, ovvero ita è essenziale per il i server Windows, mentre il terzo parametro, ovvero 'it_IT.utf8' è indispensabile per i server *nix.

Richiamiamo adesso la funzione

$data = strftime("%A, %d %B %Y");

Dove %A è il nome del giorno della settimana, %d è il giorno del mese in notazione gg, %B è il nome del mese e %Y è l'anno nel formato yyyy.

Ora, poichè la funzione echo di per sè non visualizza correttamente i caratteri accentati (per i giorni Lunedì, Martedì, ecc.) è necessario utilizzare la funzione utf8_decode(). Avremo quindi:

echo utf8_encode($data)

Un esempio di output così ottenuto è il seguente:

martedì, 14 giugno 2011

Alla prossima.

NB: per ottenere una lista delle localizzazioni attive sulla nostra linux box basta lanciare il comando:

nightfly@nightbox:~$ locale -a