Archivi categoria: Web Editing

Alternativa Javascript al vertical marquee

Web Editing, , , , ,

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 scrip 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 scrip and many more are available free online at
 The JavaScrip Source :: http://javascrip.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://javascrip.internet.com/new/";
 arrTitles[1] = "Don't miss anything - check our new additions.";
 arrLinks[2] = "http://www.webreference.com/programming/javascrip/diaries/";
 arrTitles[2] = "Want to learn JavaScrip? Start at the beginning.";
 }
var m_iInterval;
 var m_Height;
 //onload = wl;
 var iScroll=0;
var arrLinks;
 var arrTitles;
var arrCursor = 0;
var arrMax;
 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>
 <scrip type="text/javascrip" src="vertical.js"></scrip>
 </head>
 <body>
 <div align="center">
 <center>
 <div id="jump_base" onmouseover="pause()" onmouseout="resume()">
 <table>
 <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 JavaScrips provided<br>
 by <a href="http://javascripsource.com">The JavaScrip 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.

Aumentare la durata delle sessioni mediante il file php.ini

Web Editing, , , ,

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à.

PHP

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.

PHP: date in italiano

Web Editing, , , ,

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.

PHP

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

Javascript: campi dinamici mediante innerHTML

Web Editing, , , ,

Recentemente mi è capitato di dover creare un form in cui inserire più campi di tipo select. Fin qui tutto facile, se non fosse per il fatto che a parte il primo, tutti gli altri campi di questo tipo devono essere “a comparsa”. Per di più, l’unica discriminante in base alla quale viene deciso quale select inserire dinamicamente, si fonda solo ed esclusivamente sull’opzione scelta dall’utente nell’ambito della select immediantamente precedente.

javascript.jpg

 

Ma bando alle ciance, ecco il codice:

function dinamica() {
var tipologia = document.getElementById("tipologia");
if(tipologia.selectedIndex == 1)
{
document.getElementById('parah').innerHTML = "<br><strong>tipo entrata (*): </strong>
<select class='bordo' name='tipoentrata' id='tipoentrata' tabindex='3'>
<option>Seleziona tipo entrata</option>
<option>Finanziamenti</option>
<option>Biglietteria</option>
<option>Servizi</option>
<option>Banche</option>
</select>";
}
else if(tipologia.selectedIndex == 2)
{
document.getElementById('parah').innerHTML = "<br><strong>tipo uscita (*): </strong>
<select class='bordo' name='tipouscita' id='tipouscita' tabindex='3' onchange='javascrip:dinamica()'>
<option>Seleziona tipouscita</option>
<option>Cassa</option>
<option>Banca</option>
<option>Effetti</option>
</select>";
}
else if(tipologia.selectedIndex == 3)
{
document.getElementById('parah').innerHTML = "<br><strong>mastro impegno (*): </strong>
<select class='bordo' name='mastroimpegno' id='mastroimpegno' tabindex='3'>
<option>Seleziona mastro</option>
<?php while($riga = $risultato_mastro_impegno_di_spesa -> fetch_assoc()){?>
<option><?php echo $riga["Nome"]?></option>
<?php } ?>
</select>";
}
}

In particolare, mi sono avvalso dell’innerHTML per inserire stralci di codice HTML in punti ben precisi della pagina, identificati mediante il termine parah.

Se avete qualche dubbio chiedete pure.

A presto.

PHP: eliminare una variabile di sessione

Web Editing, ,

Recentemente mi è arrivata un’email di un tizio che non riusciva a rimuovere una variabile di sessione. In particolare, tale variabile rimaneva attiva nonostante la chiamata alla funzione unset(),effettuata nel modo seguente:

unset($_SESSION['variabile']);

Analizzando il codice, ho subito identificato il problema, ovvero la chiusura della sessione con un session_write_) prima ancora di svuotare la variabile incriminata.

Ergo, la soluzione consiste nel riaprire la sessione, svuotare la variabile e richiudere la sessione immediatamente:

session_start();

unset($_SESSION['variabile']);

session_write_);

See ya.

Mozilla Firefox 3.6.8: aumentare il numero di popup visualizzabili

Web Editing,

Recentemente ho sviluppato un CRM per un’agenzia turistica. Tale CRM prevede una procedura di pre-emissione dei biglietti, la quale consente all’operatore di poter stampare in un colpo solo tutti i ticket relativi ad una data partenza, semplificandogli notevolmente la vita. Ho notato, però, che quando il numero di biglietti da stampare è superiore a 20, Firefox si rifiuta di aprire le finestre popup successive, annullando in parte l’utilità della pre-emissione.

Come agire dunque? Semplice, aumentando il numero di popup visualizzabili dal browser in questione. Per fare ciò basta digitare:

about:config

nella barra degli indirizzi.

Visualizzeremo quindi il messaggio riportato nell’immagine sottostante:

attenzione.png

 

Clicchiamo su Farò attenzione, prometto e successivamente accederemo alla pagina di configurazione vera e propria:

config.png

 

Selezioniamo il parametro dom.popup_maximum e sostituiamo il valore di default (20) con il valore che preferiamo, non troppo alto per evitare rallentamenti più o meno marcati (nel mio caso l’ho impostato a 50). Bene, adesso Firefox sarà in grado di aprire ben 50 finestre popup.

Il post termina qui, see ya.

 

Joomla! o non Joomla!: questo è il problema

Web Editing, , ,

Joomla! o non Joomla!: questo è il problema. Già, proprio così, ed è anche un problema abbastanza serio. Da quando è nato questo magnifico CMS (insieme ai suoi fantastici fratelli, quali Drupal, Mambo e compagnia bella) la vita per noi web-developer (se così possiamo definirci) è diventata quasi un inferno. Ed è così che mi ritrovo magicamente in una sorta di limbo, in cui programmare vecchio stile è diventata una pratica fuori moda, per non dire sconveniente e controproducente. Parole grosse le mie? Forse, ma rispecchiano (quasi interamente) la realtà. Ed è così che giornalmente devo fare i conti con un branco di wannabe web-developer che si vantano di questa o quell’applicazione, di questo o di quel portale, nonostante la loro unica abilità consista nel saper installare qualche plugin di Joomla! e saper rimuovere (non con poche difficoltà) qualsiasi richiamo al vero creatore dell’applicazione. Ma che senso ha tutto questo? Cosa ne è del controllo del codice, della logica di programmazione, dell’analisi dei requisiti, ecc.?

Così finiremo per ritrovarci in un mondo fatto per il 90% da finti programmatori PHP e da finti webmaster, che rivendono i loro lavori per 4 soldi (ho visto portali venduti alla modica cifra di 190 €), perchè effettivamente di risorse mentali per le loro creazioni ne hanno impiegate ben poche.

E che dire poi dell’aspetto relativo alla sicurezza? Se io sul mio portale (relativamente sicuro) installo un plugin di un “indiano” semi-sconosciuto e semi-ignorante che non ha provveduto a realizzare i meccanismi più elementari di controllo dell’input e che crede che OWASP sia una specialità culinaria turca, posso dire allegramente addio a tutte le altre politiche di sicurezza, ed il defacing sarà solo questione di tempo.

C’è poi la questione dei colloqui di lavoro. Direte voi: cosa diamine c’entrano i colloqui di lavoro con Joomla!? C’entrano… eccome! Alla domanda (che puntualmente mi viene posta) “conosci Joomla!?” Io puntualmente rispondo: “si, ma faccio volentieri a meno di usarlo!”. Ed ecco che negli occhi del mio interlocutore leggo (non necessariamente in quest’ordine): smarrimento, delusione, derisione e compassione, seguite dalla fatidica frase: “ti faremo sapere”. E la mia reazione è sempre la stessa: no comment (anche se dovrei reagire in modo diverso, ad esempio chiedendogli se conosce il significato dei tag <tr> e <td>).

Certo, Joomla! è intuitivo da usare, ci semplifica notevolmente la vita ma… ricordate… non è tutto oro quello che luccica!

Alla prossima.

PHP: lock delle tabelle e restituzione dell’ID relativo all’ultimo record inserito

Web Editing, ,

Durante la realizzazione di un portale multiutente, ho riscontrato la necessità di ricavare l’ID dell’ultimo record inserito, in modo da salvarlo all’interno di un’altra tabella. Essendo però, come già detto, un portale multiutente, ho deciso di evitare eventuali comportamenti “imprevisti” semplicemente effettuando un LOCK/UNLOCK delle tabelle interessate. Nella fattispecie ecco il codice PHP:

$lock = $mysqli->query("LOCK TABLE cartaimbarco WRITE");

$insert = $mysqli->query("INSERT INTO cartaimbarco (DataPartenza, Prezzo) VALUES ('$datapartenza', '$prezzo')");

$idcarta = $mysqli -> insert_id;

$unlock = $mysqli->query("UNLOCK TABLES");

Per prima cosa “blocco” la tabella “cartaimbarco” in scrittura. Successivamente inserisco all’interno di tale tabella un record e ne ricavo l’ID utilizzando $mysqli -> insert_id; (come potete notare sto utilizzando il paradigma ad oggetti e non quello procedurale). L’equivalente nel paradigma procedurale di tale chiamata è la funzione mysql_insert_id().

Dopo aver ricavato l’ID del record “sblocco” le tabelle.

Ma perchè si rende necessario il LOCK/UNLOCK delle tabelle? Semplicemente perchè un altro utente potrebbe inserire un record immediatamente prima dell’istruzione $mysqli -> insert_id, la quale ci restituirà (erroneamente) l’ID del record inserito dall’altro utente (e non l’ID del record da noi inserito).

Spero di essere stato esauriente. A presto.

NB: $mysqli -> insert_id; restituirà 0 nel caso in cui L’ID non sia un campo AUTO_INCREMENT.

Javascript: bloccare un campo select

Web Editing, ,

E’ risaputo che i campi di un form disabilitati vengono ignorati dal server. Spesso, però, si verifica la necessità di dover inibire all’utente la possibilità di modificare il contenuto di un campo di input ed allo stesso tempo fare in modo che il server non lo ignori. Se il campo di input è testuale basta renderlo “readonly” (anzichè “disabled”), mentre se abbiamo a che fare con una select il discorso si fa più complesso. Una soluzione abbastanza rapida a tale problematica consiste nell’uso uno stralcio di codice Javascrip, riportato nell’esempio sottostante:

<select name="clienti" tabindex="1" id="clienti" onclick="old=this.selectedIndex; alert('Operazione non consentita')"  onchange="if(this.options[this.selectedIndex].className=='disable') this.selectedIndex=old"><option>Seleziona cliente</option></select>

In questo modo, ogni volta che l’utente proverà a fare una selezione, lo scrip riporterà il campo sull’opzione predefinita ed invierà in output l’avviso “Operazione non consentita”.

A presto.

Javascript: funzione per l’individuazione di stringhe nella pagina

Web Editing, , ,

Ho realizzato questa semplice funzione per Firefox che consente di cercare una determinata stringa all’interno della pagina. Il codice js è il seguente:

function Search()
{
txt = document.getElementById("data").value;
document.getElementById("data").value = "";
if(!self.find(txt) && txt != '')
alert('Data non trovata');
}

Ecco, inoltre, il codice HTML:

<form id="seleziona" name="seleziona" action="">
<label for="data">
<input type="text" name="data" tabindex="1" id="data"/>data partenza: (*)
</label>
<p align="center"><input type="button" name="cerca" id="cerca" tabindex="2" value="Cerca" onclick="javascrip:Search();" /></p>
</form>

Sostanzialmente, la funzione Javascrip che ho creato non fa altro che assegnare alla variabile txt il contenuto del campo di input data. Successivamente viene richiamata la funzione predefinita self.find(), passandogli come parametro proprio la variabile txt. A questo punto se la variabile txt non è vuota e se la funzione self.find() non trova alcun risultato, verrà stampato a vodeo un messaggio mediante la funzione alert().

Per ulteriori chiarimenti e/o suggerimenti contattatemi. A presto.