Oggi vediamo come creare uno script che trasforma un comune form in uno “ajax style”. Cominciamo con il mostrarlo tutto per intero:

$('form').submit(function()
 {
 $.ajax({
 cache: false,
 type: $(this).attr('method'),
 url: $(this).attr('action'),
 data: $(this).serialize(),
 dataType: "json",
 success: function(result) {
 //cosa fare se tutto va bene
 },
 error: function() {
 //cosa fare se qualcosa va storto
 }
 });
 return false;
 });

Come potete vedere lo script si avvia quando il form viene inviato. Per evitare che le cose vadano come di default (il browser ci manda verso dove è indicato dall’attributo action) si mette alla fine di quest’apertura la seguente stringa di codice:

return false;

Fatto ciò, viene la vera e propria “parte ajax”. Recuperiamo tutti gli attributi che servono alla funzione ajax dal form con la semplice riga di codice:

$(this).attr('ATTRIBUTO DA RECUPERARE')

La funzione “serialize” serve a serializzare tutti i campi di un form usando come nome di un dato, l’attributo name dell’elemento “input”.

Ora che la richiesta ad una pagina è stata inviata, possono accadere due cose:

• La pagina risponde in modo appropriato restituendo un codice in formato JSON (come indicato nella funzione ajax).
• La pagina non esiste o si genera qualsiasi altro tipo d’errore. Questa eccezione viene gestita in modo da non “rompere” lo script e permettere all’utente di ricevere un feedback (così almeno può provare a  rinviare il form e non rimanere ad aspettare invano).

Se tutto va bene possiamo usare la variabile result per recuperare tutte le informazioni che ci sono state mandate dalla pagina interrogata. Se questa restituisce un valore in JSON è possibile usare i dati in esso memorizzati in questo modo:

result.campo

dove campo è proprio il campo che contiene il dato che ci serve.

PS: in PHP per trasformare un array in JSON si usa la funzione json_encode.

Come sempre vi invito ad abbonarvi al feed della sezione hi-tech. Alla prossima.

jQuery: inviare in ajax i parametri di un form
Fortunecat.it Web Marketing

Queste sono le fasi principali che accompagnano il lavoro di uno sviluppatore. Capita però che vi siano dei tempi “morti” tra un impegno e l’altro: come sfruttarli per imparare qualcosa e non annoiarsi?

Di seguito riporto alcuni siti che visito quando non ho nulla da fare (ma non spargete troppo la voce…).

Quora

Si tratta di una rete sociale che consente di fare domande e ricevere risposte. A chi non lo conosce verrebbe di accomunarlo a Yahoo! Answer, ma dovrebbe ricredersi subito dopo averlo provato.

Quora infatti permette di rimanere aggiornati sulle domande appartenenti ad argomenti di nostro interesse. Sarà quindi possibile seguire solo i topic e le persone che affrontano temi che ci riguardano.

Non solo scopriremo cose nuove sul mondo della programmazione, ma impareremo nuove curiosità sugli argomenti più disparati.

Stackoverflow

Il suo funzionamento è molto simile ad un comune sito si Domande & Risposte, ma Stackoverflow è dedicato solamente agli sviluppatori. Infatti le domande senza codice incollato sono mosche bianche.

Il tutto è regolato da un sistema di punteggi che indica l’attività di un utente all’interno del sito. Non è uno di quei servizi pieni di snob che ad una domanda semplice rispondono incollando una ricerca su google.

Vi accorgerete che è un sito così attivo, che se avrete un dubbio non avrete neanche la necessità di postare la domanda, perché qualcuno l’ha già fatta. Non immaginate quante volte mi abbia salvato…

YCombinator Hacker News

YCombinator è un importante incubatore e Venture capital che ha aiutato a decollare startup del calibro di Reddit, Wufoo, Scribd, Weebly, Disqus, Dropbox, Justin.tv, Heroku e Posterous.

Sul sito, oltre ad avere la possibilità di presentare la propria idea di startup e sperare di essere selezionato per partecipare ai loro corsi ed alle loro riunioni (rimborsano massimo 600$ per il viaggio), è presente una sezione Hacker News che raccoglie news postate dagli utenti sul mondo della tecnologia in generale.

Qui gli utenti loggati potranno votare le notizie più interessanti che saliranno così in cima alla lista. YCombinator però ha pensato bene di imporci un limite di tempo per la visualizzazione delle news, in modo da non farci distrarre troppo.

DZone

E’ un aggregatore di news simile a Hacker News di YCombinator. In questo caso però troveremo una veste grafica più curata, con un’anteprima del sito, e i pulsanti di condivisione totalmente assenti in YCombinator. Una nota dolente: diverse news presenti qui sono le stesse che potete vedere su Hacker News.

Grazie a questi siti ho scoperto ed imparato cose che nessun libro e nessun corso universitario potrà mai insegnarmi.

Come sempre vi ricordo che potete seguire gli aggiornamenti della sezione Hi-Tech abbonandovi al feed.

Imparare a programmare sfruttando i tempi morti
Fortunecat.it Web Marketing

Dalla sitemap dei profili Google possiamo però individuare con esattezza quanti utenti sono registrati su G+. Attenzione non parliamo di utenti attivi, ma semplicemente di utenti che hanno creato un profilo.

Controlliamo la sitemap

Date un’occhiata a questo link. La sitemap contiene 39’000 link a delle altre sitemap testuali, contenenti ciascuna 5000 link a profili pubblici su Google.

Basta fare un semplice calcolo

39’000 x 5’000 = 195’000’000

Gli utenti registrati sarebbero circa 195 milioni. Se consideriamo come attendibili le informazioni fornite da Larry Page si ha che:

• Gli utenti attivi sono 90 milioni, il 46% del totale.
• Circa 105 milioni di utenti hanno creato un profilo, ma non utilizzano Google+.

Se questi dati ti sembrano interessanti, abbonati al feed della sezione Hi-Tech e seguici su Twitter, Facebook e Google+.

Quanti utenti ha Google+? Ce lo rivela una sitemap
Fortunecat.it Web Marketing

Avete capito bene: “disponeva”. Ora quest’opzione è stata eliminata. (E’ ancora accessibile con un trucchetto, ma forse è il caso di iniziare ad utilizzare altri servizi.)

E’ ora di cercare delle alternative

La prima scelta è chiaramente Twitterfeed che consente la pubblicazione automatica non solo su Twitter, ma anche su Facebook e Linkedin. Con Twitterfeed è anche possibile scegliere quale servizio di url shortening utilizzare.

Il secondo servizio consigliato è Dlvr.it con funzioni molto molto simili a Twitterfeed.

Oppure…

C’è una terza opzione. Gestire il proprio account “manualmente”, rinunciando a qualsiasi forma di automazione. Sembra noioso vero?

Eppure i risultati si vedono. La pagina Facebook di Fortunecat.it (giusto per fare un esempio) l’ho sempre gestita “a mano” pubblicando solo i link più interessanti, editando titoli e descrizioni, scegliendo le immagini di anteprima, ecc…

Vi assicuro che la differenza rispetto ad una pagina completamente automatizzata si nota eccome (anche in termini di engagement).

Almeno per quel che mi riguarda è arrivato il momento di fare lo stesso anche con Twitter.

Voi invece quale opzione sceglierete?

Feedburner disattiva l’integrazione con Twitter!
Fortunecat.it Web Marketing

Se da un lato si è più efficienti perché si evitano errori dovuti a comunicazioni ambigue, è anche vero che se il progetto è abbastanza corposo diventa conveniente suddividere il lavoro in sotto-problemi da affidare a persone diverse.

Bisogna stare molto attenti a suddividere per bene il lavoro ma, sopratutto, evitare come la peste i fraintendimenti: spesso è difficile comunicare chiaramente un concetto che a noi sembra tanto semplice.

Come tentare di arginare questo problema e forse anche risolverlo? Servirebbe uno strumento in grado di tener traccia di tutte le task e che nel contempo metta a disposizione potenti strumenti comunicativi e decisionali.

Qualcuno c’ha pensato ed ha realizzato Trello.

Trello, attraverso una veste grafica semplice ed abbastanza intuitiva, ci permette di gestire le azioni da compiere per il completamento di un lavoro/progetto. L’applicazione ordina i concetti appena espressi grazie all’utilizzo delle liste.

Ogni lista può contenere le famigerate task che possono essere associate a uno o più partecipanti. Avremo, quindi, sempre sotto controllo i nomi di chi sta lavorando su cosa.

Nelle task è possibile inserire dei commenti, domande a risposta multipla ed anche allegati. C’è anche la facoltà di inserire dei labels colorati, utili per marcare la loro urgenza o, eventualmente, il completamento.

Come avrete potuto notare il servizio è ottimo per lo sviluppo di software, ma la sue possibili applicazioni spaziano anche in altri campi, come ad esempio l’editoria online. Trello si presta bene anche nel caso in cui i partecipanti lavorino a distanza.

Per gruppi piccoli di persone non ne vale la pena, ma quando si perde il controllo della situazione è meglio chiedere aiuto a Trello. Conoscete altri sistemi per non impazzire durante un lavoro di gruppo?

Trello, per collaborare online
Fortunecat.it Web Marketing

• “Come funziona questo?”;
• “Come posso fare per ottenere le stesse cose?”;
• “Come posso migliorare queste funzioni?”.

Spesso ne passa di acqua sotto i ponti prima che trovi una risposta. Proprio in queste settimane ho finalmente scovato una soluzione a questa domanda: “Come fa Facebook a cambiare l’URL senza ricaricare l’intera pagina?“.

Se ci fate caso, quando scorrete le foto di un’album o cambiate pagina all’interno di un profilo, noterete che la pagina non viene ricaricata, eppure l’URL si modifica. Tutti sanno che ajax ci viene in contro per cambiare il contenuto di una pagina, ma quanti sanno come cambiare l’URL?

Ansiosi di conoscere la risposta? Vi accontento subito: si tratta di un’API di HTML5, per essere più precisi la “HTML5 History API“.

Immaginate di inviare ad un vostro amico un link ad una foto appena vista in un album. Senza questa API vedrà la sua bacheca principale o cose simili. Comprenderete ora l’importanza di questa nuova funzione introdotta nell’HTML5.

Tutto bello, anzi bellissimo, ma c’è un ma… Cosa fare per browser come le vecchie versioni di Internet Explorer (che dio le abbia in gloria) che non sanno minimamente cosa sia l’HTML5? In questo caso ci viene in soccorso un ottimo plugin disponibile per jQuery, Mootools, Right.js e Zepto. Si chiama History.js.

Come prima cosa, importiamo il plugin inserendo nella pagina queste due stringhe:

<script src="http://balupton.github.com/history.js/vendor/jquery.js"></script>
<script src="http://balupton.github.com/history.js/scripts/bundled/html4+html5/jquery.history.js"></script>

Per cambiare l’URL sarà necessario utilizzare la funzione:

History.pushState(data,titolo,url);

Dove “titolo” ed “url” sono rispettivamente il titolo della pagina ed il nuovo URL mostrato dal browser, mentre “data” sono informazioni che vogliamo passare (fra poco sarà più chiaro).

In questo modo si creeranno delle task nella cronologia. Cliccando il pulsante del browser per andare nella pagina precedente si ritorna all’URL precedente, ma il contenuto della pagina? Come accorgersi che lo stato (URL e titolo della pagina) è cambiato? Rispondo subito con questa funzione:

    History.Adapter.bind(window,'statechange',function(){
        var State = History.getState();
        var Data = State.data;
        var Titolo = State.title;
        var URL = State.url;
    });

Questa funzione va in esecuzione quando lo stato del browser cambia e registra informazioni come “Data” passati in precedenza dalla funzione “History.pushState”, “Titolo” che è il nuovo titolo della pagina e “URL” che è l’URL appena cambiato.

Starà a noi, poi, creare delle funzioni che cambino il contenuto della pagina. Ora si spiega come mai cliccando su una foto su Facebook, si apre una cornice nella pagina stessa, senza ricaricarla, ma se si prova ad andare all’indirizzo indicato dall’URL, si approda in una zona totalmente diversa (quella della foto senza effetto modal).

Ci sono anche altri due siti che conosco e che usano questo sistema: Google+ e GitHub. Ne conoscete altri?

Abbonatevi al feed della sezione Hi-Tech per scoprire altri trucchi simili a questo.

History API: cambia l’url senza ricaricare la pagina
Fortunecat.it Web Marketing

Credo che converrete con me nel pensare al “principio” come la parte più dura della nostra vita da programmatori.

Iniziare a programmare è molto difficile, insomma…

Non mi riferisco a quando si decide di imparare un nuovo linguaggio, ma proprio a quando ci si affaccia per la prima volta su questo affascinante mondo.

La difficoltà principale sta nel comprendere i meccanismi che stanno alla base del “linguaggio macchina”.

Da questa fase non ne escono solo i migliori, ma già si può notare una bella scrematura dei candidati programmatori.

Molti abbandonano perché proprio non riescono a capire i concetti più semplici ma fondamentali. Le guide che si trovano in giro, solitamente, sono un po’ troppo tecniche per i “nuovi arrivati”.

Sono fermamente convinto che imparare da qualcuno che le cose te le spiega a voce e “dal vivo” sia la cosa migliore. Fare domande, ricevere immediatamente risposte, farsi ripetere in modo diverso i concetti. Queste sono cose che in una guida online non si possono ottenere.

Oggi voglio presentarvi un servizio online che tenta di riparare a questa mancanza e ci riesce anche abbastanza bene. Si chiama Codecademy.

Cosa rende questo servizio diverso da una comune guida? Semplice: utilizzandolo si avrà l’impressione di chattare con qualcuno. Infatti, i corsi sono strutturati in forma di dialogo, il programma ci dirà cosa fare e mentre lo facciamo impariamo anche qualcosa di nuovo. Impariamo a programmare, appunto.

La teoria è relativamente poca (in inglese), mentre molto spazio  viene riservato alle esercitazioni. Infatti, sarà possibile testare quello che si è appena imparato durante il corso.

Il servizio è appena nato, quindi ci sono solamente 3 corsi: uno di introduzione e gli altri 2 sul javascript. Decisamente pochini per decidere se si tratti di un buon servizio. Restiamo ad aspettare, sicuramente compariranno altri corsi a breve.

Ovviamente questo è un servizio utile solamente nella fase iniziale, non sognatevi di passare qualche giornata a studiare con Codecademy e di poter iniziare a sviluppare siti o altro.

Dopo dovrete passare settimane se non mesi a studiare in maniera più approfondita quel che Codecademy vi ha solamente introdotto.

Cosa ne pensate? E’ un valido servizio?

Come sempre vi invito ad abbonarvi al feed della sezione Hi-Tech e a ricondividere il post. Alla prossima.

Codecademy, e impari a programmare
Fortunecat.it Web Marketing

Prendiamo ad esempio Facebook: è molto complesso, eppure anche gli utenti più “all’antica” riescono ad utilizzarlo senza problemi. Forse è stata proprio questa una delle chiavi della sua incredibile diffusione.

Il Fattore Tempo

Uno dei fattori che caratterizza l’usabilità di un sito è il tempo impiegato dall’utente per compiere un’azione. Se ad esempio la registrazione è troppo lunga, aumenterà il tempo necessario al suo completamento e con esso le probabilità di un ripensamento dell’utente (ossia: perdiamo potenziali clienti).

Vi sarà sicuramente capitato, durante una registrazione, di dover scegliere la vostra nazionalità…

Personalmente clicco ripetutamente la “i” sulla tastiera per arrivare velocemente alla voce “Italia”, ma cosa succede il 70% delle volte?

Salto ciò che vorrei selezionare e ricomincio dalla prima “i”. Per farvi comprendere come mi sento quando succede, pensate al meme ”Rage Guy”.

Migliorare i campi select dei form con jQuery e Chosen

E’ proprio dei select che voglio parlare oggi. Se i valori tra cui scegliere sono al massimo una decina, allora non c’è problema, riusciamo ancora a selezionare ciò che ci serve evitando inutili perdite di tempo.

Cosa succede se invece le voci sono tante quanto gli stati del mondo? Qui qualche problemino lo incontriamo ma ci siamo – se non abituati – rassegnati.

Come possiamo risolvere questo problema che colpisce le nostre creazioni? Come donare ai nostri utenti un’esperienza innovativa e rilassante? Semplice, usando un plugin jQuery creato appositamente per risolvere questo tipo di problema: Chosen.

Chosen trasformerà gli odiosi select chilometrici in graziosi select contenenti un campo per il filtraggio che ci consentirà di trovare e selezionare ciò che vogliamo.

Anche i select multipli si trasformeranno dandoci l’impressione di “taggare” ciò che intendiamo selezionare.

Per avere questo gioiellino sui nostri siti basterà incorporare jQuery ed il file contenente lo script di Chosen. Tutto ciò che vi serve, compreso anche un esempio, lo trovate qui: https://github.com/harvesthq/chosen.

Diverse demo, invece, sono disponibili qui: http://harvesthq.github.com/chosen.

Il select che avrà la fortuna di ricevere il miglioramento dovrà essere del tipo:

<select data-placeholder="TESTO MOSTRATO QUANDO E' VUOTO." style="width:350px;" class="chzn-select"">

Ovviamente le dimensioni sono arbitrarie.

Per invocare il plugin basterà scrivere:

$(".chzn-select").chosen({no_results_text: "TESTO MOSTRATO QUANDO LA RICERCA NON PRODUCE RISULTATI"});

Credo che d’ora in poi utilizzerò sempre questo plugin per evitare “disastri da select”. Conoscete qualche sistema alternativo?

Come sempre vi invito ad abbonarvi al feed della sezione Hi-Tech e a ricondividere il post sui social.

Chosen, trasformare e migliorare i select
Fortunecat.it Web Marketing

Fortunatamente l’uomo ha trovato rimedio (o quasi) a questo problema inventando i CAPTCHA.

I CAPTCHA più diffusi sono costituiti da caratteri quasi illeggibili che dovrebbero in teoria non essere compresi dai bot. Questo è il funzionamento: semplice ma – a quanto pare – efficace.

E se invece di usare i soliti CAPTCHA utilizzassimo qualcosa di molto meno convenzionale e sicuramente più divertente? Sto infatti per presentarvi uno plugin jQuery che vi consentirà di riconoscere gli esseri umani dai bot grazie a dei disegni tanto elementari quanto divertenti.

Chi ha detto che i CAPTCHA devono essere per forza noiosi?

Stiamo parlando di MotionCAPTCHA. Permetterà ai vostri utenti di dimostrare la loro “umanità” semplicemente disegnando con il mouse delle forme che il plugin stesso indicherà. Qui trovate una demo realizzata dallo stesso creatore del plugin e qui la repository su Github.

Cominciamo

Per integrare nel nostro sito questo sistema sarà necessario, ovviamente, richiamare tutti i file necessari:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="jquery.motionCaptcha.0.2.min.js"></script>
<link href="jquery.motionCaptcha.0.2.css"></script>

Chiaramente bisognerà cambiare la directory in base alle proprie esigenze. Il file jquery.min.js è stato preso dai server di Google. I file richiesti nella seconda e terza riga li trovate andando nella repository su Github.

Il Form

Per creare il form ci serviremo del solito codice html:

<form action="#" id="MioForm" method="post">

A questo punto riempiamolo con tutti gli input che servono a noi (magari un email ed il commento per un post). Per aggiungere il CAPTCHA “speciale” bisogna inserire le seguenti righe di html:

<div id="mc">
    <p>Dimostra che sei umano, disegna la forma che vedi qui sotto:</p>
    <canvas id="mc-canvas"></canvas>
</div>

Ora aggiungiamo il pulsante disabilitato (che si attiverà al superamento della prova) e poi un input nascosto che contenga l’action del nostro form:

<input type="submit" disabled="disabled" value="Submit Form" />
<input type="hidden" id="fairly-unique-id" value="submitform.php" />

Il jQuery

Non ci rimane altro da fare che collegare il tutto e vedere il risultato. Per permettere al form di essere riconosciuto dal plugin usate le seguenti righe di codice javascript:

$('#MioForm').motioncaptcha({
    action: '#fairly-unique-id'
});

Questa qui sopra è la versione più semplice, con tutti i parametri lasciati di default. Ci sono però altre impostazioni con cui poter giocare, ecco un esempio alternativo:

$('#MioForm').motioncaptcha({
    // Basics:
    action: '#mc-action',        // L'ID dell'input contenente l'action
    divId: '#mc',                // L'ID del div contenente il CAPTCHA
    cssClass: '.mc-active',      // La classe CSS applicata quando #mc è attivo
    canvasId: '#mc-canvas',      // l'ID dell'elemento canvas MotionCAPTCHA

    // Un array contenente tutte le forme consentite:
    shapes: ['triangle', 'x', 'rectangle', 'circle', 'check', 'caret', 'zigzag', 'arrow', 'leftbracket', 'rightbracket', 'v', 'delete', 'star', 'pigtail'],

    // I messaggi mostrati:
    errorMsg: 'Prova ancora.',
    successMsg: 'Captcha superato!',

    // Messaggio mostrato se il browser non supporta il plugin:
    noCanvasMsg: "il tuo browser non supporta le canvas - prova Chrome, FF4, Safari o IE9."
});

Credo sia tutto, conoscete  altri metodi per provare che il vostro utente è costituito da materia organica?

Come sempre vi invito ad abbonarvi al feed della sezione Hi-Tech. Alla prossima!

MotionCAPTCHA, l’antispam geometrico
Fortunecat.it Web Marketing

Questo è un esempio elementare, ma si possono trovare situazioni molto più complesse come ad esempio quelle riscontrabili durante la realizzazione di un’agenda.

Salvare in un database una data in formato “umano” non è una buona mossa.

Diventerà difficile ordinare le tabelle utilizzando una colonna costituita da date (es.: ’22/07/1990′). Come possiamo cavarcela in maniera elegante ed efficiente? Semplice: utilizzando il tempo Unix (i secondi trascorsi dal 1° gennaio 1970).

Vedremo di creare 2 funzioni capaci di trasformare una data in tempo Unix e di riconvertire quest’ultimo in tempo umano.

La funzione DaiTempoUnix

Creiamo innanzitutto la funzione che a partire da data ed ora ci restituisce il tanto adorato tempo Unix.

Si tratterà di una funzione che in entrata richiede solamente due campi: data ed ora.

<?
function DaiTempoUnix($data,$ora){

$data_arr = explode("/", $data); //ricaviamo un array dalla data

$ora_arr = explode(":", $ora);  //ricaviamo un array dall'ora

$secondi = $ora_arr[2];
if(!$ora_arr[2]) $secondi =0; //serve nel caso in cui non siano stati scritti i secondi (spesso non sono considerati)

$UnixTime = mktime($ora_arr[0], $ora_arr[1], $secondi, $data_arr[1], $data_arr[0], $data_arr[2]); //mktime ci consente di ottenere il time Unix corrispondente alla data

return $UnixTime;

}

$TempoUnix = DaiTempoUnix("22/07/1990", "13:12:24"); // esempio di richiamo della funzione
?>

Nella funzione si è ipotizzato che le componenti della data siano separate da “/” e le componenti dell’ora da “:”. Per impostare altri simboli basterà applicare una piccola modifica all’explode.

Passiamo ora alla seconda funzione.

La funzione DaiData

Questa funzione è anche più semplice della prima. In ingresso avrà il tempo Unix mentre in uscita conterrà un array con due valori: data ed ora.

<?
function DaiData($UnixTime){

$data = date("d/m/Y", $UnixTime); //da time unix a data
$ora = date("H:i:s", $UnixTime);//da time unix a ora
$row_data = array('data' => $data, 'ora' => $ora); // Creo l'array
return $row_data;

}

$row_data = DaiData("1033902472"); //esempio di utilizzo della funzione

$data = $row_data[data];
$ora = $row_data[ora];

?>

Come potete vedere sono bastate pochissime righe di codice.

Utilizzando queste due funzioni sarà più semplice organizzare e gestire le date nelle nostre applicazioni. Forse l’unica nota dolente che vale la pena citare è che questo script potrebbe dare problemi dal 19 gennaio 2038 alle ore 03:14:08 (GMT).

In quel giorno, infatti, il tempo unix raggiungerà i 2³¹ caratteri (troppi per i sistemi operativi a 32bit). Questo evento è noto come Bug dell’anno 2038.

Conoscete altre soluzioni?

PS: Perdonate la scarsa fantasia dimostrata nel dare un nome alle due funzioni…

Trasformare una data in tempo Unix in PHP
Fortunecat.it Web Marketing