My Personal Budget

Da un pò di tempo a questa parte sto sviluppando un progettino in php identificato dal nome provvisorio (che però potrebbe diventare definitivo in mancanza di alternative) di “My Personal Budget” (facile, no?). Scopo del progettino è realizzare un sistemino di contabilità personale per tenere traccia delle mie spesucce (che nei prossimi mesi tenderanno ad aumentare, mentre le entrate tenderanno a diminuire, ma questa è un’altra storia :-) ). Si tratta di una web application basata su php e un database SQLite3, con massiccio uso di JQuery, JQuery UI e css e l’ottimo appoggio del framework css Blueprint e di Php Activerecord.

Al momento il progettino vanta features quali:

  • una (semplice) gestione utenti e livelli;
  • diversi conti per ciascun utente;
  • categorie e tag;
  • chiusura contabile di fine mese con saldo;
  • traccia del saldo per tutto l’anno fiscale;
  • un’interfaccia colorosa e pastellosa :-) per la quale però si accettano suggerimenti visto che a detta di molti è un tantino psichedelica :-) .

Altre cosucce sono in cantiere: grafici, resoconti, resoconti stampabili (e magari anche in pdf!), cose così.. se qualcuno vuole giocherellare con il progetto il codice è ovviamente open e liberamente scaricabile da GitHub (https://github.com/PicciMario/My-Personal-Budget). Sono aperto a qualunque tipo di commento o suggerimento, e qualunque supporto è ben accetto!

Server2Go: server web standalone per Windows

E’ sempre comodo nella vita di tutti i giorni poter disporre di un server web pronto per ogni evenienza, che ci si trovi in un ambiente ostile (ad esempio su una macchina Windows senza i permessi di amministrazione) o sul computer (ovviemtne Windows) di un cliente cui si debba mostrare una webapp non ancora online. Un server web standalone altro non è che un eseguibile che gira su una macchina (normalmente senza richiedere permessi di amministrazione) e fa le veci di un server web più normalmente qualche altro orpello interessante (tipo un database).

Server2Go fa proprio questo: si scarica, si modificano un paio di file di configurazione, si copiano in una cartella i file della propria web app, si lancia l’eseguibile e voilà!

Un pò di caratteristiche interessanti:

  • pò funzionare da disco fisso, da un disco rimovibile (ad esempio una chiavetta usb) o addirittura da CD;
  • è donationware (e vale la pena fare una piccola donazione, vista la qualità del software);
  • è disponibile per Windows;
  • è disponibile in varie versioni in base ai servizi offerti. La più completa al momento porta PHP 5.3.2, SQLite, MySQL 5.1.46, Perl 5.8;
  • è facilmente configurabile e completamente customizzabile;
  • non richiede installazione.

Giusto l’altro giorno me lo sono scaricato su un computer windows per fare girare un’applicazioncina web basata su PHP e SQLite3, e lascio ai posteri qualche nota circa la configurazione. Sostanzialmente bisogna modificare due file:

pms_config.ini

Questo file contiene informazioni generali circa l’aspetto e il comportamento di Server2Go. I parametri sono semplici e ben commentati, i più importanti (per me) sono:

  • ServerName: il nome mostrato all’avvio e nella tray icon che indica che il programma è in esecuzione.
  • UserSplash: nome di un file grafico da usare come splash screen all’avvio.
  • KeepRunningAfterBrowserClose: quando il programma si avvia lancia automaticamente un browser (configurato in seguito), e si chiude alla chiusura del brower. Poichè voglio poter lanciare il servizio e chiuderlo quando voglio imposto questo valore a 1.
  • ShowTrayIcon: imposto il valore a 1 per mostrare una tray icon quando il programma è in esecuzione (e avere modo di chiuderlo senza passare dal task manager).
  • Port: la porta sul quale mettere in ascolto il web server. Io ho usato il valore 4001, va bene qualunque valore purchè sia sopra il 1024 (viceversa il server richiede permessi di amministratore).
  • BrowserType: io metto NONE, così il programma non tenta di aprire automaticamente un browser.
  • UseMySql: metto 0 (zero), poichè non mi occorre MySql.

server/config_tpl/php.ini

Configurazione del motore PHP, basta apportare un paio di modifiche per abilitare SQLite3: nella sezione “Windows Extensions” bisogna togliere il “;” dalle righe:
extension=php_sqlite.dll
extension=php_pdo_sqlite.dll
inoltre bisogna aggiungere, se non c’è, la riga:
extension=php_sqlite3.dll

A questo punto basta piazzare i file della propria applicazione nella cartella HTDOCS, lanciare l’eseguibile Server2Go.exe e puntare il proprio browser di fiducia a http://localhost:4001

Voilà!

Appunti Javascript: i div magici che scompaiono

Altro appuntino facile facile per realizzare un trucchetto che può tornare utile senza bisogno di andarsi a cercare librerie aggiuntive. In un’applicazioncina che sto scrivendo mi serve un help contestuale in presenza di alcune parole chiave, e tra i tanti metodi che ho vagliato il quello che mi è sembrato meglio è riportare l’help dentro un div direttamente sotto la parola; questo div normalmente non è visibile, ma appare se clicco sulla suddetta parola (e scompare se clicco un’altra volta). Il meccanismo è semplice:

1) Una funzioncina javascript da mettere in cima al body della pagina:

<script type="text/javascript">
function toggleDiv(divid){
 if(document.getElementById(divid).style.display == 'none'){
 document.getElementById(divid).style.display = 'block';
 }else{
 document.getElementById(divid).style.display = 'none';
 }
 }
</script>

La funzione riceve il nome di un div nella pagina, ne valuta il parametro “display” (che definisce se il div è visibile “block” o invisibile “none”) e ne cambia il valore.

2) Un div (ovviamente :-) ):

<div id="aiuto"> Un aiutino: sii deciso e usa parole inventate fingendoti esperto. </div>

3) Un link nella pagina:

<!-- pagina -->
La funzione del giorno è: <a href="togglediv('aiuto')">Foniuglia  e Lordizzazione IRPEF</a>

Ecco fatto, dovrebbe funzionare.

PS: quanto esposto sopra va benissimo per progetti semplici o paginette php singole.. per un progetto più strutturato, come evidenziato precedentemente dall’illustre collega Frasten, conviene appoggiarsi a una libreria ben fatta come jQuery. Qui potete trovare un tutorial di come fare quanto descritto sopra con jQuery.

Appunti AJAX: caricamento asincrono di HTML in un DIV

Giusto un breve post su una cosa sulla quale sto giocherellando in questi giorni. Sto scrivendo un’applicazioncina web php/sqlite3 di una paginetta; in questa applicazione appaiono sigle e simboli arcani, che richiedono un help contestuale: io clicco su una stringa (che camuffa un link) e da qualche parte nella pagina una sezione cambia contenuto per andare a contenere il testo di un help. Come fare? Mi servono tre cose:

1) Nella pagina principale dell’applicazione il div che andrà a contenere il testo. Basta una cosa qualunque

<div id="helpdiv">Help in linea</div>

2) Una pagina esterna destinata a creare l’help online a partire da un parametro “codice” fornito mediante GET. La chiameremo “decodifica.php”, e inizierà con qualcosa del tipo:

<!-- pagina decodifica.php  -->
<?php
if (!isset($_GET['formula'])) return "Beh?";
else return $_GET['formula'];
?>

Una cosina semplice, che se chiamata senza parametro restituisce un accigliato warning mentre se viene richiamata correttamente con il parametro “formula” fa un echo di quanto passato.. giusto per provare!

3) una funzioncina javascript nella pagina principale.

<script type="text/javascript">

Questa prima funzione viene richiamata dal link con un parametro, l’url della pagina di decodifica. La funzione lancia la richiesta della pagina di decodifica e poi resta in attesa dell’acknowledge, all’arrivo del quale lancerà la funzione “scriviDiv”

function impostaDiv(url) {
 if (window.XMLHttpRequest) { // Non-IE browsers
 req = new XMLHttpRequest();
 req.onreadystatechange = scriviDiv;
 try {
 req.open("GET", url, true);
 } catch (e) {
 alert(e);
 }
 req.send(null);
 } else if (window.ActiveXObject) { // IE
 req = new ActiveXObject("Microsoft.XMLHTTP");
 if (req) {
 req.onreadystatechange = scriviDiv;
 req.open("GET", url, true);
 req.send();        
 }
 }
}

Questa funzione invece viene richiamata al termine della chiamata alla pagina di decodifica, e scrive il testo restituito nel div di destinazione “helpdiv”.

function scriviDiv() {
 if (req.readyState == 4) { // completato
 if (req.status == 200) { // risposta affermativa
 document.getElementById("helpdiv").innerHTML = req.responseText;
 } else {
 alert("Problem: " + req.statusText);
 }
 }
}
</script>

4) Per concludere, occorrono i link nella pagina principale per richiamare la funzione impostaDiv, una cosa del tipo:

<a href="javascript:impostaDiv('decodifica.php?formula=sorpresa')">Scritta strana</a>

Ecco fatto! A questo punto dovremmo avere un sistema che si comporta così:
- l’utente preme il link “scritta strana”;
- viene chiamata una funzione javascript impostaDiv con parametro formula=sorpresa;
- la funzione impostaDiv richiama la pagina decodifica.php?formula=sorpresa;
- la pagina ritorna la scritta “sorpresa” (la stessa che gli è stata passata!);
- appena la pagina è pronta si attiva la chiamata di ritorno scriviDiv, che va a scrivere l’output di cui sopra (ovvero la scritta “sorpresa”) nel div “helpDiv”, che fino a poso tempo fa conteneva solo il testo “Help in linea”.

Facile, no?

Saluti!

Le cose che solo la Rete ci può dare: Mercury Familiarization Manual

Di recente mi sono spesso soffermato a riflettere sull’influenza che lo sviluppo della Rete degli ultimi anni ha avuto sulle nostre vite. Stavolta però ho accantonato i massimi sistemi (ovvero il flusso libero e non censurato della verità) e mi sono concentrato sull’aspetto più pratico: in rete si trovano documenti, filmati e informazioni di cui posso fruire in massima libertà, informazioni che non avrei mai e poi mai potuto sperare di incontrare senza l’ausilio di internet; pensiamo ad esempio il progetto Wikipedia: basta un click per avere sotto i propri occhi informazioni su qualunque (ripeto: qualunque) argomento mi venga in mente.

E ho ripensato a un documento che ho letto tempo addietro, il Mercury Familiarization Manual. Ovvero il manuale operativo delle Mercury, le prime navicelle spaziali degli Stati Uniti in grado di portare un essere umano in orbita. Avete capito bene: il manuale operativo, quello dedicato agli astronauti e ai tecnici specializzati; un documento segretissimo dei primi anni 60, poi liberato verso la fine degli anni 70 e quindi ora liberamente consultabile, ma ovviamente introvabile.

460 pagine scritte a macchina corredate di disegni e schemi fatti a mano che descrivono nei minimi dettagli la realizzazione di tutti i sistemi elettrici ed elettromeccanici della capsula (ricordiamo che all’epoca erano tutti relè temporizzatori e contattori, non esistevano se non per un minimo sistemi elettronici).

Una manna incredibile per qualunque appassionato di astronautica; senza la rete probabilmente ne esisterebbero una mezza dozzina di copie conservate gelosamente in qualche teca di qualche museo americano; con la rete ne esistono milioni di copie digitali, e ciascuno può avere la sua e leggerla liberamente. Io la mia copia l’ho trovata a questo indirizzo, ma basta una breve ricerca su google!

Siete ancora convinti che la rete sia solo per i porno?

Un esempio di phishing credibile..

Oggi sono stato toccato da un tentativo di phishing.. e fin qui nulla di strano, ovviamente: prima di passare agli ottimi filtri di GMail ne ricevevo parecchi ogni giorno, e anche con la protezione di Google ogni tanto qualcuno riesce comunque a farsi strada verso la mia inbox.

Prima di proseguire vediamo di chiarire, per chi non lo sapesse, che significa phishing:

…è una attività illegale che sfrutta una tecnica di ingegneria sociale, ed è utilizzata per ottenere l’accesso a informazioni personali o riservate con la finalità del furto di identità mediante l’utilizzo delle comunicazioni elettroniche, soprattutto messaggi di posta elettronica fasulli o messaggi istantanei, ma anche contatti telefonici. Grazie a messaggi che imitano grafico e logo dei siti istituzionali, l’utente è ingannato e portato a rivelare dati personali, come numero di conto corrente, numero di carta di credito, codici di identificazione, ecc..

(tratto da Wikipedia, ovvviamente)

Sarà capitato a tutti voi, anche se neofiti della posta elettronica, di ricevere email scritte in un italiano improponibile che chiedevano di recarsi a un determinato link e inserire i dati della propria carta di credito o del proprio conto corrente per non meglio precisati motivi “di sicurezza”, salvo poi scoprire che tale link non porta ovviamente al proprio sito di home banking ma a un sito molto, molto simile realizzato al solo scopo di raccogliere le password degli ignari utilizzatori.

Finora tutti gli attacchi di phishing in cui mi sono imbattuto hanno sempre mostrato delle caratteristiche comuni, che li rendevano facilmente identificabili: la prima di queste era sempre l’italiano scorretto e sgrammaticato, frutto di una traduzione automatizzata da testi perlopiù inglesi; la seconda era l’assoluta mancanza del tono professionale che contraddistingue le comunicazioni ufficiali degli istituti di credito (cose del tipo “caro cliente” invece di “gentile cliente”, “il tuo conto” invece di “il Suo conto” o meglio “il Vostro conto”, “i dati” invece de “i Vs. dati”), se vogliamo sono piccolezze ma nel complesso creano un divario enorme tra una mail di un professionista e una mail di uno che prova ad imitarlo.

Ebbene, oggi le mie certezze hanno vacillato nel ricevere una mail truffaldina che non presentava queste caratteristiche di facile individuazione, e che riporto:

Gentile Utente,

Per i motivi di sicurezza abbiamo sospeso il Vostro conto corrente, una
misura di sicurezza progettata per contribuire a proteggere Voi ed il
Vostro conto. Dovete riconfermare i Vs. dati riguardanti il conto
corrente per ristabilire le funzionalità del vostro conto, e confermare
quindi che non siete stati vittime di furto informatico.

 

Dovete reinserire i Vs. dati alla seguente pagina per realizzare il
processo di verifica.

https://www.gruppocarige.it/grp/ws/gruppo/jsp/popupservizi.jsp

La ringraziamo per la Vostra cortese collaborazione.

Gruppo Banca Carige, 2009
Ufficio protezione contro atti fraudolenti.

AVVERTENZA Chi riceve la presente è tenuto a verificare che la stessa sia effettivamente a lui indirizzata; in caso contrario, considerate le conseguenze penali connesse alla cognizione e/o diffusione di corrispondenza non a sè diretta, lo si invita ad avvisare tempestivamente il mittente, distruggendo comunque le eventuali copie o stampe della medesima.

This e-mail may contain confidential and/or privileged information. If you are not the intended recipient (or have received this e-mail in error) please notify the sender immediately and delete this message. Any unauthorized copying, disclosure or distribution of the material contained in this e-mail is strictly forbidden.

Niente male, eh? Professionale, in un italiano più che buono, ordinata, con tanto di disclaimer in doppia lingua. Peccato che ovviamente sia una truffa: innanzitutto non ho conti sulla banca citata, e questo è più che sufficiente a farmi venire seri dubbi. Poi non vedo perchè una banca dovrebbe invitarmi a “reinserire i miei dati personali” sul loro sito per “motivi di sicurezza”. Inoltre la mail è firmata semplicemente “ufficio protezione contro atti fraudolenti”, mentre una vera mail con questi toni dovrebbe essere sempre firmata con il nome del responsabile di tale ufficio, e riportare indirizzi di contatto (minimo un indirizzo email e un numero di telefono dell’ufficio).

E poi, la prova del nove: il link della mail, ovvero il cuore della truffa, che nel testo riporta un indirizzo associabile al sito istituzionale della banca ma che in realtà conduce a un indirizzo totalmente diverso, che ho volutamente oscurato. Il sito truffaldino in questione ha questo aspetto:

Abbastanza buono da far cadere in inganno un utente sprovveduto e non adeguatamente informato sui rischi del phishing. A questo punto ho naturalmente segnalato a google il tentativo di phishing nella mia casella di posta elettronica e ho mandato una mail al riguardo ad alcuni siti che conosco nell’ambito della lotta al phishing.

Per concludere, i consigli per non cascarci sono sempre i soliti:

1) se vuoi andare sul sito della tua banca, scrivi a mano l’indirizzo nel tuo browser, non fidarti a cliccare su link che arrivano da fonti non sicure quali una mail!

2) la tua banca non ti chiederà mai di inserire la tua password perchè “l’ha persa” o perchè “ci sono problemi di sicurezza”; la tua banca ti chiederà la tua mail sono quando andrai spontaneamente sul suo sito, seguendo la regola di cui sopra, per svolgere delle regolari operazioni.

3) nel dubbio non fidarti di nessuno. Se qualcuno ti domanda la tua password, il tuo nome utente o altri dati sensibili devi immediatamente diffidare!

Spero che questo piccolo sipario di utilità sociale possa aiutare qualcuno a non ritrovarsi col conto ripulito. Ciao a tutti!

Google Wave Update: utenti online

E’ dalla cura dei dettagli e dal costante miglioramento che si riconosce un progetto destinato ad un futuro radioso. Da stamattina in Google Wave gli utenti online vengono identificati da un pallino verde in basso a destra del loro avatar ovunque esso sia visualizzato: nell’elenco dei contatti, nella lista centrale e nella wave aperta. In questo modo è possibile capire immediatamente se l’utente cui sto scrivendo può rispondermi immediatamente.

waveonlinecont01 waveonlinecont02

Io amo Google :-)

Google Wave

Ieri sera grazie all’amico Pedro ho ricevuto un invito a provare Google Wave, il nuovo servizio sperimentalissimo di Google aperto solo a pochi fortunati. E dai primi esperimenti che ci ho fatto sopra sembra molto, molto promettente.

Ma di che si tratta? Sostanzialmente è un’evoluzione del concetto di email, che va a sovrapporsi al concetto di chat realtime realizzando qualcosa di completamente diverso che però fa le veci di entrambe. Una “wave” (“onda” in italiano) è una specie di lavagna bianca, creata da un utente che poi vi invita altri utenti. Ciascuno di questi utenti è in grado di aggiungere un messaggio su questa lavagna, e tutti gli altri collegati possono leggerlo in tempo reale e aggiungere risposte. Gli utenti non collegati troveranno questa wave in una sorta di “inbox” (analogamente all’email) e potranno leggere e rispondere o commentare anche in un secondo tempo, sempre su questa lavagna condivisa. Inoltre in questa lavagna è possibile inserire immagini, suoni, documenti e addirittura piccole applicazioni sviluppate su misura.

wave-prova

Come si può vedere l’interfaccia di Wave è composta da quattro elementi: un menu per selezionare la lista di wave (ad esempio, la inbox oppure quelle archiviate), un elenco di amici anch’essi utenti wave, una finestra con la lista delle wave selezionata in precedenza e una finestra per visualizzare la wave vera o propria.

Per ora ho utilizzato il sistema per giocherellare e chattare con gli amici, e posso dirmi assolutamente soddisfatto. Si tratta di una versione incompleta e in fase di costruzione, e mancano ancora molte funzioni (tanto per dire manca ancora la sezione “impostazioni”), e nonostante questo sono riuscito senza fatica o dubbi a chattare, condividere informazioni e documenti con pià amici contemporaneamente.

Ragazzi, questa roba è da urlo! Non vedo l’ora di avere la possibilità anche io di invitare qualche amico (gli inviti sono pochi e vengono attivati con calma, contrariamente a quello che è stato per gmail) per provare a creare qualche onda più frequentata.

Se qualcuno di voi è entrato in possesso di un invito ma non ha nessuno con cui comunicare mi potete trovare su mario.piccinelli@gmai.com

Ciao a tutti!

Piccole applicazioni crescono…

La mia applicazioncina Facebook, il famoso Numerologicon creato in un momento di frustrazione, continua a crescere… perlomeno questa è l’impressione sfogliando questi numeri:

facebook-app-stats-146

Si, non sono certo numeri da capogiro, ma magari sono destinati ad aumentare.. in particolare adesso che ho raggiunto un numero decente di utilizzatori ho potuto fare richiesta per inserirla nella directory applicazioni, il che dovrebbe darle maggiore risalto..

Comunque i 43 utenti che l’hanno installata hanno la mia piena gratitudine, e per ringraziarli, da buon sviluppatore, mi adopererò al fine di aggiungere funzionalità interessanti al software.. stay tuned! E se ancora non l’hai fatto, sii gentile e aggiungi anche tu il Numerologicon al tuo profilo! Non costa nulla ed è simpatico! :-)

Facebook e i nomi utente

Quella che è stata la caratteristica principe e vincente di Facebook nella lotta contro gli altri social network, ovvero l’iscrizione mediante nome e cognome, viene finalmente complementata dalla presenza del “nome utente”, un nickname che affianca le generalità comunque disponibili e rende più semplice la gestione del proprio profilo; ad esempio, le pagine personali, fino a ieri composte dal link a facebook seguito da un elenco impronunciabile di numeri, ora sono fatte così:

http://www.facebook.com/piccimario

(ovviamente quello sopra è il mio nuovo username :-) ). Comodo, no? Altro vantaggio è l’indicizzazione su google, a causa del nome “search engine friendly”: tra un pò cercando “piccimario” su google (o su qualunque altro motore di ricerca) potrete trovare anche il mio account facebook…

Per ulteriori informazioni e per impostare l’username sul vostro account fb potete andare qui. Sbrigatevi, però, i nomi utente sono unici e vengono assegnati in base all’ordine in cui sono richiesti!