OneBlackCatOneBlackCat

Facebook: fare click su mi piace per mostrare la pagina

alemux — Wed, 10 Apr 2013 13:46:50 +0000

A moltissimi di voi sarà capitato di dover creare una pagina sul vostro sito con del contenuto visibile solo a chi ha fatto “mi piace” su Facebook in una pagina aziendale.

Innanzitutto bisogna creare la propria app in http://developers.facebook.com, perchè, per fare quello che ci serve, abbiamo bisogno di un app ID che Facebook ci deve rilasciare.
Una volta creata la vostra app (usando il tasto Crea Applicazione in alto a destra), vi verrà assegnato un App ID/API Key: è un codice numerico.

Ora quello che ci serve è una pagina .html ed una .php, che useremo per caricare le API di Facebook e indicheremo come gestire la cache al browser.

Create un file e nominatelo facebookapi.php:

Ora create un file index.html:


  
    
    
  
  
    

    
      Non hai fatto mi piace sulla mia pagina!
    

    
      Ti piace eh?

Come potete notare non c’è ancora traccia del codice javascript per gestire gli eventi. Un attimo di pazienza! Abbiamo semplicemente inserito la libreria jQuery ( una versione non nuovissima, a voi le eventuali implementazioni…) e i due div che dovranno apparire a seconda degli eventi del codice per gestire gli eventi su Facebook.
Sono entrambi nascosti, perchè starà al codice javascript mostrare uno piuttosto che un altro. Viene da sp

Ora dobbiamo inserire il codice javascript nell’head, possibilmente dopo che il DOM è pronto per rispondere. Come si fa? Beh, facile…

$(document).ready(function(e){
    //codice...
});

Aggiungiamo ora il codice all’interno del mio document.ready…

      window.fbAsyncInit = function() {
        FB.init({
          appId      : '[il vostro APP ID senza le parentesi]',
          channelUrl : 'facebookapi.php',
          status     : true, // controlla lo status su FB
          cookie     : true, // attiva i COOKIES
          xfbml      : true  // fa il parsing XFBML
        });

        FB.getLoginStatus(function(response) {
          var page_id = "[l'id della vostra pagina di Facebook]";
          if (response && response.authResponse) {
            var user_id = response.authResponse.userID;
            var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
            FB.Data.query(fql_query).wait(function(rows) {
              if (rows.length == 1 && rows[0].uid == user_id) {
                //console.log("Ha già fatto LIKE, mostro la pagina");
                $('#container_like').show();
              } else {
                //console.log("Non ha fatto like");
                $('#container_notlike').show();
              }
            });
          } else {
            FB.login(function(response) {
              if (response && response.authResponse) {
                var user_id = response.authResponse.userID;
                var fql_query = "SELECT uid FROM page_fan WHERE page_id = "+page_id+"and uid="+user_id;
                FB.Data.query(fql_query).wait(function(rows) {
                  if (rows.length == 1 && rows[0].uid == user_id) {
                   // console.log("Ha fatto il Like");
                    $('#container_like').show();
                  } else {
                   // console.log("Non ha fatto il Like");
                    $('#container_notlike').show();
                  }
                });
              } else {
                //console.log("Non ha fatto il Like");
                $('#container_notlike').show();
              }
            }, {scope: 'user_likes'});
          }
        });
      };

      // Load the SDK Asynchronously
      (function(d){
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
      }(document));

Ora tutto dovrebbe funzionare a dovere.
Chiaramente non sarebbe male implementare la pagina facendo si che, invece di mostrare il div con la scritta “hai fatto like”, venisse caricato del contenuto con una chiamata ajax.
Se non vi funziona, commentate pure esprimendo tutto il vostro disappunto

Phonegap e Android: missing one of the following

alemux — Fri, 05 Apr 2013 21:40:04 +0000

Oggi ho provato ad installare tutto il sistema per poter esportare la mia Phonegap App su ambiente Android. Più facile a dirsi che a farsi.
Giusto per non farsi mancare nulla, Windows comincia sempre con rispondere con messaggi di errori del tipo: comando non riconosciuto. E già bestemmie come se piovesse…

Scarico Phonegap 2.5.0 e provo, così, senza aver letto niente altro, a lanciare il comando create..

create c:\apps com.nomeazienza.nomeapp nomeapp

Ovviamente terremoto e tragedia, non funziona niente.
Mi accorgo immediatamente che, differentemente da quanto pensassi, non ho installato nè il Java SDK nè ANT, di cui ignoravo l’esistenza fino a qualche minuto prima.

Nel dubbio mi riscarico tutto:

Java SDK da qui: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
ANT da qui: http://ant.apache.org/bindownload.cgi
Android SDK ( nell’ADT Bundle, dove c’è anche Eclipse ): http://developer.android.com/sdk/index.html

Non grandi cose, siamo sui 300mb.
Installo il tutto e per controllare che tutto sia funzionante apro la shell e rilancio il comando create come sopra.

Nonostante tutto, continua a non funzionare, mi viene presentato un messaggio Missing one of the following (JDK, SDK, ANT).
Per ovviare a tutto ciò, dovete controllare che tutti i comandi elencati qui siano funzionanti:

java
javac
ant
adb
android

Non funzionano? Probabilmente nelle variabili di sistema mancano i riferimenti alle cartelle dei vari SDK.
Un esempio su tutti, per far funzionare il comando javac si può inserire in variabile di sistema il riferimento alla cartella JavaSdk:

set path="%path%;c:\program files\java\jdk7\bin"

Cosa fa questo comando?
Semplicemente setta la variabile di sistema path con un nuovo valore, c:\program files\java\jdk7\bin, e lo aggiunge al contenuto della variabile stessa %path%.

Per tutti i comandi elencati sopra il discorso è lo stesso.

Ok, il comando create ora funziona, ma cosa fa?

Una volta indicato al comando create dove creare il progetto, dovete semplicemente aprire la cartella generata ( nel mio caso sarà c:\apps\nomeapp ). Troverete tutti i files necessari per generare la vostra Phonegap App per Android.

Ora non vi resta che aprire Eclipse, seguire le istruzioni indicate sulla pagina di Phonegap, Getting started per Android.

Elenco links utili:
Android SDK: http://developer.android.com/sdk/index.html
java sdk: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
Apache Ant: http://ant.apache.org/bindownload.cgi
Phonegap per Android: come iniziare: http://docs.phonegap.com/en/2.5.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android
Aggiungere alle variabili di sistema: http://stackoverflow.com/questions/1678520/javac-not-working-in-windows-command-prompt
far funzionare il comando create di phonegap per android: http://simonmacdonald.blogspot.ca/2012/11/getting-create-command-to-work-on.html

Sottoporre ad Apple una app creata con Phonegap

alemux — Thu, 04 Apr 2013 16:36:02 +0000

Ho letto su molti forum, Phonegap forum stesso su tutti, che moltissima gente ha problemi a sottoporre ad Apple la propria app, e che spesso gli viene rifiutata perchè “non abbastanza app”.

Il motivo, in verità, è piuttosto semplice: se creo una app che è semplicemente una trasposizione mobile di un sito web, al 99% verrà rifiutata da Apple, che argomenterà il rifiuto con la frase “La vostra app non utilizza alcuno strumento tipico di uno smartphone (gps, database, rubrica), quindi spostate il vostro sviluppo verso una versione mobile del sito”. Grazie tante…

A parte la condicio sine qua non di fare una app che non faccia vomitare, è piuttosto semplice utilizzare uno degli strumenti che Phonegap mette a disposizione, uno su tutti lo Storage.

Per utilizzare il database che mette a disposizione Phonegap, è necessario richiamarlo con la seguente funzione:

function activateDB(){
	var db = window.openDatabase("NOME_DB", "VERSIONE_DB", "DISPLAY_NAME_DB", 5*1024*1024);
    db.transaction(populateDB, errorCB, successCB);
}

function populateDB(tx) {

	tx.executeSql('CREATE TABLE IF NOT EXISTS tblPreferiti(id INTEGER PRIMARY KEY ASC, idarticoli INTEGER)');

	}

function errorCB(err) {
		console.log("!!! Error processing SQL: "+err.code + ' - ' + err.message );
}

function successCB() {
}

La funzione activateDB() mi carica nella variabile db il database NOME_DB, dopo di che mi lancia la funzione populateDB() che, a seconda del risultato positivo o negativo, mi richiama successDB() o errorDB(). Tutto chiaro, no?
Come vedete, è piuttosto semplice interfacciarsi con il DB e basta salvarvi qualcosa al suo interno per utilizzare uno degli strumenti messi a disposizione da Phonegap.
Nel mio caso, ho creato una APP ( non ancora disponibile su Apple Store, ma appena lo sarà posterò il link.. ) e ho utilizzato il db per salvarvi gli articoli preferiti.
In verità salvo esclusivamente l’ID degli articoli, che vengono poi caricati dal server remoto ogni volta. Un utilizzo minimo del DB, ma…sufficiente.

Jsonp e parse file json errato

alemux — Thu, 01 Nov 2012 16:03:54 +0000

Lavorando su un app con Phonegap mi sono imbattuto in una rogna non da poco, risolta grazie a qualche invocazione dell’Altissimo e un paio d’ore di sbattimento.
La problematica era di risolvere l’annoso problema dell’errore di console di Chrome Origin null is not allowed by Access-Control-Allow-Origin.
Leggendo vari post su internet, la problematica è capitata a tantissima gente e la risoluzione della stessa non sembra così palese come può sembrare.

Io stesso, soprattutto nei blog italiani, non ho trovato molte soluzioni rapide.
A parte la quantità indecente di soloni che si beano della propria conoscenza, cosa che mediamente fa incazzare come quando si paga l’IMU, che preferiscono rompere i maroni ore ed ore, invece che dare velocemente la soluzione, come se far faticare la gente fosse, in Italia, uno sport nazionale. Nei blog americani, invece, ci si imbatte più spesso in persone più malleabili e meno snob.

Veniamo velocemente al codice:

$.ajax({
		url:"http://www.vostrodom.it/pagina.asp",
		type:"GET",
		dataType:"json",
		data:"id=" + ID 
}) [...]

Molto semplicemente, una bella chiamata con jQuery.ajax, ad una pagina sul vostro sito, con il passaggio di una variabile querystring id.
Se usate Google Chrome, noterete un bel messaggio di errore, che avvisa che non possono essere effettuate chiamate CrossDomain, ossia fuori dal dominio della pagina stessa.
La problematica avviene soprattutto se avete lanciato una pagina da file:\\ .

Come ovviare al problema? Usando come dataType:jsonp e non json.
Occhio, le problematiche, usando questo sistema, diventano altre, però, per lo meno, una rogna, di dosso, ve la togliete. Per esempio, scordatevi il passaggio POST dei dati: con JsonP avvengono tutte via GET, con tutte le problematiche di dati e sicurezza che ne derivano. Se queste noie non vi interessano, risolvete in fretta il problema.

Risolto un problema, però, ne viene fuori un altro: jsonp utilizza una funzione javascript per ovviare al Domain Crossing. Non modificando niente, potrebbe venire fuori un errore del tipo Uncaught SyntaxError: Unexpected token.

Un passo alla volta.
Poniamo il caso che il vostro file json sia come nell’esempio seguente:

{
    "glossary": {
        "title": "example glossary" 
    }
}

Al file json manca un quid, ossia una funzione che conglobi tutto.
Modificate il vostro json aggiungendo, ad esempio, readJson([vostro-codice-json]).

readJson({
    "glossary": {
        "title": "example glossary" 
    }
})

Dopo di che, andiamo nel codice javascript a dirgli che la funzione callback che deve leggere si chiama readJson.

$.ajax({
		url:"http://www.vostrodom.it/pagina.asp",
		type:"GET",
		dataType:"json",
		data:"id=" + ID,
                jsonpCallback:	"readJson"
}) [...]

A questo punto, tutti gli odiosi messaggi d’errore della console dovrebbero sparire e, magicamente, potrete fare le vostre belle chiamate json esterne.

Phonegap: creare applicazioni native usando HTML e JS

alemux — Wed, 31 Oct 2012 18:35:12 +0000

Se pensate che il mondo delle applicazioni native sia un esclusiva dei relativi linguaggi di programmazione ( Obj-C, .NET, Java ), evidentemente non avete mai sentito parlare del progetto di Adobe, Phonegap.

Phonegap è un framework che permette di generare un’applicativo nativo per iPhone, Android, Windows Phone ed altri, partendo da codice javascript e html. Insignito alla fine del mese di Ottobre del 2012 Jolt Awards come migliore tool di sviluppo mobile, rende la vita facile a coloro che non hanno ( ancora ) conoscenze di sviluppo dedicate.

Un esempio vale più di mille parole:

function checkConnection() {
   var networkState = navigator.network.connection.type;

   var states = {};
   states[Connection.UNKNOWN] = 'Unknown connection';
   states[Connection.ETHERNET] = 'Ethernet connection';
   states[Connection.WIFI] = 'WiFi connection';
   states[Connection.CELL_2G] = 'Cell 2G connection';
   states[Connection.CELL_3G] = 'Cell 3G connection';
   states[Connection.CELL_4G] = 'Cell 4G connection';
   states[Connection.NONE] = 'No network connection';

   alert('Connection type: ' + states[networkState]);
}

document.addEventListener('deviceready',function(e){
   checkConnection();
}, false);

Cosa stiamo facendo? Molto semplicemente, Phonegap mette a disposizione un bell’evento, deviceready, che ci da la sicurezza di lanciare del codice custom non appena il dispositivo è disponibile.
Un bel vantaggio!
Nello specifico, lanciamo la funzione checkConnection(), che ci da alcune informazioni su quale connessione sia attualmente attiva sul nostro telefono.

Attualmente alla versione 2.1, questa pagina ci da una dettagliata panoramica su quali oggetti siano messi a disposizione a noi sviluppatori.

Ogni evento è anche descritto con un minimo di troubleshooting, a seconda del device obiettivo della vostra app. Ad esempio, per quanto riguarda Windows Phone, l’avviso è:” Windows Phone Emulator always detects navigator.network.connection.type as Connection.UNKNOWN“. Quindi … occhio alle eccezioni.

Facebook: invitare tutti gli amici a fare “Mi piace” su una pagina

alemux — Wed, 31 Oct 2012 10:20:22 +0000

Una delle cose che non sopporto assolutamente dell’interfaccia di Facebook è la totale assenza di un aiuto per l’utente nell’evitare di fare un milione di click ogni qual volta ci sia da selezionare gli utenti destinatari di un messaggio o di un invito.

Aspettando una sorta di Facebook Pro, dove, pagando, si possa agire normalmente ed agevolmente tra le amicizie e gli utenti delle pagine, inviando loro messaggi privati e quant’altro in libertà, ora come ora bisogna fare di necessità virtù.

La maggior parte dei siti che offrono automazione sui social non fanno quello che serve a me, come Sproutsocial o SendSocialMedia: l’unica cosa è manipolare gli oggetto di Facebook stesso, piegandoli alle proprie necessità.

Un esempio lampante è l’invito a fare mi piace su una pagina di cui si è amministratori.
La sola idea di fare 5000 click per selezionare 5000 amici è di per se stupida, figurarsi un’interfaccia dove non esiste un semplice bottone che selezioni tutte le checkbox.
Chissà come sono gli stipendi di coloro che si occupano del frontoffice di FB…

Se conoscete javascript e avete dimestichezza con la console di Chrome, il gioco sarà molto più semplice di quello che può sembrare.

Andate su Facebook usando Google Chrome, entrate nella vostra pagina e, in alto, cliccate su: Espandi il pubblico –> Invita i tuoi amici
Se non conoscete Google Chrome, fatevi vedere da uno bravo.

Una volta apertosi l’elenco degli amici, fate click destro –> Ispeziona elemento su uno degli amici. Vi si aprirà la finestra della console, con la porzione di codice selezionata evidenziata.

Andando a spulciare nel codice html, cercate il primo form che contiene il codice selezionato. Dovrebbe essere qualcosa del tipo:

u9y2dfy31“>

L’id in grassetto è importante, segnatevelo da qualche parte, poichè ci sarà da inserirlo via codice manualmente.

Ora andare nella sezione console, cliccando in alto nella finestra del codice di Chrome.
Non stupitevi se troverete, come nell’immagine, un elenco di errori.

Eliminate il contenuto della console, giusto per non confondervi le idee. Per fare ciò usate il tasto di divieto che trovate in basso a sinistra ( quarta icona ).

Ora siamo pronti per selezionare gli oggetti dal DOM; carichiamo in una variabile il form:

var f = document.getElementById('u7h83jn34');

Dopo di che possiamo ciclare tutti gli elementi presenti.
Fate attenzione: sostituite il valore u7h83jn34 con l’id del vostro form.

Eccovi il secondo blocco di codice da eseguire:
var modulo = f.elements; for (i=0; i { if(modulo[i].type == "checkbox" && !modulo[i].disabled ) { modulo[i].checked = !(modulo[i].checked); } }

Come vedete, ho caricato in modulo il valore di f.elements ( per comodità ).
Per ogni elemento nel form, controllo che sia una checkbox e che non sia disabilitata da FB, modifico lo stato della checkbox.

Notate che se, nella console, usate il tasto freccia su riproporrete il comando immediatamente precedente. Se rilanciate nuovamente il secondo blocco di codice, noterete che le checkbox si deselezioneranno.

Spero vi sia utile!

Phonegap Cordova 2.1, XCode: errori in fase di Build

alemux — Tue, 30 Oct 2012 21:32:06 +0000

Molti di voi che usano abitualmente Phonegap per creare applicazioni mobili avranno notato qualche cosa di interessante, relativamente al pacchetto di installazione di Phonegap, che ora si chiama Cordova.

A differenza di qualche versione fa, dove si poteva tranquillamente installare il file .dmg, ora è necessario scaricare il pacchetto ed avviare il file create con la console.
Per coloro che non sono così scafati con il sistema Mac o comunque non sono pratici del codice via riga di comando, il sistema potrà rivelarsi un ostacolo non da poco.

Andate sul sito Phonegap.com e scaricate nella cartella Download.
Il file che dovete utilizzare per creare un nuovo progetto Cordova è situato, all’interno della cartella appena scompattata, in /lib/ios/bin.
Copiate la cartella bin all’interno della cartella Download.

Ora aprite la console ( basta andare in alto a destra e digitare terminal ) e andate in [nomeutente]/documents –> la cartella dove avete copiato il tutto.

Nella console digitate:
./create

La console vi risponderà con:
Usage: ./create
: Path to your new Cordova iOS project
: Package name, following reverse-domain style convention
: Project name

Digitiamo quindi, al fine di creare il nostro progetto:
./create /Users/[nomeutente]/documents/[nomeapp] com.[nomeapp] [nomeapp]

Vi consiglio di evitare spazi o caratteri strani nel nome del progetto, o XCode potrebbe non essere molto clemente

Ora quello che vi rimane da fare è un bel doppio click sul file di progetto XCode generato.
Se, per caso, aprendo il progetto in XCode, notate alcuni errori gravi ( segnalati in rosso ), oppure direttamente il Build fallisce miseramente, allora c’è una sola cosa da fare: aggiornare XCode. Nel caso in cui l’Aggiornamento Software del Mac non vi segnala la presenza della nuova versione, allora dovete andare nell’ App Store e scaricarlo direttamente.

Una volta aggiornato XCode all’ultima versione disponibile, il vostro Build avverrà senza particolari problemi, salvo alcune segnalazioni di InvokeString deprecato, che dipendono però da Cordova stesso.

Problemi con la cache di Facebook?

alemux — Wed, 19 Sep 2012 08:35:29 +0000

Vi sarà capitato moltissime volte di dover o voler postare un link ad una pagina o ad un articolo su Facebook, ed il più delle volte non avrete notato il fastidioso problema della cache del social network.

Se il link non fa parte di un vostro sito, ma di uno esterno, il problema non si pone, difficilmente avrete diretto accesso ai tag tipo title e description, ma nel momento in cui la pagina è vostra, o ne siete amministratore, beh, il discorso cambia eccome.

Nel mio caso l’obiettivo era pubblicizzare un articolo su un sito e-commerce di un cliente.
Ho postato il link e ho notato che i tag e <description> erano terrificanti. Procedo con la modifico dei suddetti tag, aggiorno la pagina, rivado in Facebook, posto nuovamente il link … e il risultato non cambia. Ma come è possibile? Da una parte l’HTML della pagina è perfetto, mentre Facebook mi ripropone i dati precedenti. Chiaramente FB salva in memoria i dati relativi a quel link, proprio per evitare un eccessivo traffico verso altri siti. Il problema, però, persiste. Ho notato che questo baco è facilmente aggirabile seguendo la seguente procedura. E’ sufficiente collegarsi al link <a href="http://developers.facebook.com/tools/debug">http://developers.facebook.com/tools/debug</a>, inserire il link che volete postare su FB , attendere il caricamento dei dati ed il gioco è fatto. Da questo momento, quando posterete nuovamente il link nella bacheca del Social Network di Mr.Zuckerberg, la cache sarà aggiornata all’ultima versione. Questa procedura, tra le altre cose, può essere ripetuta N volte, poichè ogni volta verrà aggiornata la versione in memoria. </article> <article> <h1>Nuovo blocco di GMail?</h1> alemux — Thu, 21 Jun 2012 08:27:00 +0000 Proprio in queste ore stiamo riscontrando alcuni problemi con alcuni nostri account GMail, mentre su altri funziona tutto regolarmente. Questa la schermata che ci si è presentata pochi minuti fa: <a href="http://www.oneblackcat.it/wp-content/uploads/2012/06/gmailerror1.png" rel="lightbox[286]" title="gmailerror1"></a> Andando negli strumenti di Google Chrome, il profilo pare avere qualche problema: <a href="http://www.oneblackcat.it/wp-content/uploads/2012/06/gmailerror2.png" rel="lightbox[286]" title="gmailerror2"></a> E come succede sempre, cliccando su maggiori informazioni… <a href="http://www.oneblackcat.it/wp-content/uploads/2012/06/gmailerror3.png" rel="lightbox[286]" title="gmailerror3"></a> </article> <article> <h1>jQuery: semplice validazione di un form</h1> alemux — Thu, 31 May 2012 19:42:13 +0000 A differenza di qualche tempo fa, in cui ero piuttosto interessato a librerie esterne per validare i miei form, oggi preferisco scrivere e ottimizzare la validazione di volta in volta a seconda del sito in questione. Troppe librerie, come jQueryTools o jQuery Validator, sono strettamente dipendenti dalla versione di jQuery utilizzata e vanno spesso in conflitto con altri elementi nel DOM. Come procedere, allora, se siamo alle prime armi? Un passaggio per volta, vediamo di arrivare ad una validazione completa. Partiamo con il creare una pagina HTML ed inserirvi il riferimento ad un foglio di stile ed alla libreria jQuery: <pre class="brush: plain; title: Codice:; notranslate"> <html> <head> <meta charset="utf-8"> <title>Form Validation ...

stile.css

body{ font-size:12px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; } /* selezioniamo tutti gli input con type=text e le textarea */ input[type=text], #form1 textarea{ background:#F9F8F6; border:1px solid #706f6f; width:90%; padding:3px; font-size:12px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; border-radius:3px; } /* diamo uno stile diverso alle select ed ai campi file */ select, #form1 input[type=file]{ background:#CCCCCC; border:1px solid #706f6f; width:90%; padding:3px; font-size:12px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; border-radius:3px; } button{ background-color:#CCCCCC; border:1px solid #999999; width:90%; padding:3px; font-size:12px; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; border-radius:3px; } button:hover{ cursor:pointer; background-color:#b1b1b1; } /* stile che assegno ai campi errati */ .redborder{ border:1px solid #C00 !important; box-shadow:0 0 3px #990000; } /* stile che assegno ai campi corretti */ .greenborder{ border:1px solid #0C0 !important; box-shadow:0 0 3px #009933; } .errormsg{ display:none; } .errormsg h2{ color:#C00; margin:0px; padding:0px; } .errormsg ul{ margin-top:0px; font-size:11px; color:#C00; font-weight:bold; } .waitmsg{ display:none; }

Form:

Inserisci il tuo nome: Inserisci il tuo cognome: Inserisci la tua E-Mail: Seleziona la marca della tua auto: *si, ho letto e accetto il trattamento dei miei dati personali

Attenzione

Attendere prego

Alcuni tag sono custom, come ad esempio data-description.
Ho preferito gestire in maniera facoltativa il tag data-description, così da poter descrivere in maniera diversa, dal nome standard del campo, la label del campo stesso.
Nel caso in cui il campo sia
(input id=”email” type=”text”) e volessi scrivere “Il campo E-Mail non è corretto”, allora inserirò il valore “E-Mail” nel tag data-description.
Un sistema veloce, facile da customizzare, non obbligatorio e compatibile anche su IE.

Alla fine del form invece ho un campo con id=errorState e default value=0.
Durante il processo di validazione, mi appoggio al value di id=errorState, modificandolo in value=1 nel caso di errore in qualsiasi campo.
I messaggi di errore, invece, sono listati in un
(ul) dentro il div con class=errormsg.
Non ho inserito alcun input type=submit, ma un semplice button e ne intercetto il click con un semplicissimo bind(), sostituibile ( consigliato ) con un on(), visto che le nuove release di jQuery saranno poco gentili nei confronti di metodi deprecati.

Inserisco prima alcune funzioni:

// per pura velocità di scrittura del codice, mi creo una funzione tolog() ne commento il console.log() quando testo su IE. function tolog(me){ console.log(me); } // funzione che inserisce nella lista degli errori il singolo errore di validazione function addToErroMsg(msg){ var msg_final = '

' + msg + '

'; $('.errormsg ul').append(msg_final); }

Ora intercetto il click del bottone di invio:

$('#submitform1').click(function(){ // a tutti i campi del form che hanno la class=redborder rimuovo sia la classe redborder che greenborder $('#form1 input.redborder, #form1 select.redborder').removeClass('redborder').removeClass('greenborder'); // svuoto la lista degli errori $('.errormsg ul').empty(); // rimetto il valore di default di errorState $('#errorState').val('0'); // valido i campi sottostanti. il tipo text può essere omesso, gli altri tipi devono essere citati // attualmente ho creato una validazione solamente per email, select e radio validField('nome'); validField('cognome'); validField('email','email'); validField('marca','select'); validField('privacy','radio'); // se errorState==1 allora c'è stato un errore if($('#errorState').val()==1){ $('.errormsg h2').html('Attenzione:'); $('.errormsg').fadeIn(); }else{ // non c'è stato errore di validazione $('#submitform1').attr('disabled','disabled'); // disabilito il pulsante di invio $('.errormsg').hide(); // nascondo l'eventuale messaggio di errore validazione $('.waitmsg').fadeIn(); // mostro il messaggio di attesa $('#form1').submit(); // submit del form } })

Ho commentato riga per riga il codice, così vi sarà molto semplice comprendere e personalizzare quando scritto.
Ora non resta che instanziare la funzione validField():

function validField(fieldName,tipo){ // l'ID è fieldName: ora valuto se ho messo una descrizione diversa var fieldDesc = $('#' + fieldName).attr('data-description'); if(fieldDesc==undefined){ // il campo ha una descrizione diversa fieldDesc = fieldName; } // validazione per campo TEXT if(tipo==undefined || tipo=='text'){ fieldValue = $('#' + fieldName).val(); if(fieldValue.length==0){ // validazione fallita, assegno la classe=redborder $('#' + fieldName).addClass('redborder').removeClass('greenborder'); // errorState=1 $('#errorState').val('1'); // messaggio di errore, qui potete personalizzarlo addToErroMsg('Campo ' + fieldDesc + ' obbligatorio'); }else{ // la validazione è corretta, assegno la classe=greenborder $('#' + fieldName).addClass('greenborder').removeClass('redborder'); } } // end type text if(tipo=='email'){ fieldValue = $('#' + fieldName).val(); if(fieldValue.length==0){ $('#' + fieldName).addClass('redborder').removeClass('greenborder'); addToErroMsg('Campo ' + fieldDesc + ' obbligatorio'); $('#errorState').val('1'); }else{ if(fieldValue.indexOf('.')==-1 || fieldValue.indexOf('@')==-1){ $('#' + fieldName).addClass('redborder').removeClass('greenborder'); addToErroMsg('E-Mail non valida'); $('#errorState').val('1'); }else{ $('#' + fieldName).addClass('greenborder').removeClass('redborder'); } } } // end type email if(tipo=='select'){ fieldValue = $('#' + fieldName + ' option:selected').val(); if(fieldValue==0){ $('#' + fieldName).addClass('redborder').removeClass('greenborder'); addToErroMsg('Campo ' + fieldDesc + ' obbligatorio'); $('#errorState').val('1'); }else{ $('#' + fieldName).addClass('greenborder').removeClass('redborder'); } } // end type select if(tipo=='radio'){ fieldValue = $('#' + fieldName).attr('checked'); if(fieldValue==undefined){ $('label[for="privacy"]').css('color','red'); addToErroMsg('Campo ' + fieldDesc + ' obbligatorio'); $('#errorState').val('1'); }else{ $('label[for="privacy"]').css('color','#999'); } } // end type radio } //end validField function

Abbiamo lavorato sullo stato di undefined di alcune variabili: su questa azione c’è sempre un aperto dibattito se non sia meglio operare diversamente.
Probabilmente si potrebbe procedere in maniera più “pulita”, ma in questo caso il tempo era poco e il risultato … accettabile.

Se volete vedere la demo di questo form, cliccate qui, mentre da qui scaricate lo zip con il codice.

Primi passi con jQuery Mobile: realizziamo la prima pagina

alemux — Tue, 29 May 2012 20:53:53 +0000

Per tutti coloro che hanno solamente sentito parlare di jQuery Mobile ed hanno bisogno di un piccolo tutorial sui primi passi in jQuery Mobile, vi proponiamo alcuni esempi su come procedere.

CODICE HTML INIZIALE:

La mia prima pagina jQuery Mobile

Iniziamo con l’includere alcune librerie ed il file CSS di jQuery Mobile, contenente i temi proposti di default da jQuery. Non dimenticate inoltre di includere la libreria di jQuery: nel nostro caso includeremo la libreria aggiornata alla versione 1.7.1.

Quello che vogliamo ottenere è la barra nel frontone, in alto, contenente un titolo d’esempio, ed un testo generico nel corpo.

Iniziamo, prima di tutto, inserendo nel BODY un oggetto che fungerà da pagina:

...

Come vedere, l’oggetto pagina è un semplice DIV. jQuery riconoscerà quel DIV come pagina grazie al tag data-role=page. Chiaramente andremo a dare un ID=page1 per poterla identificare facilmente.

All’interno di questa PAGE andiamo ad inserire due oggetti: un header ( con il titolo ) e un content.

...

...

Cosa abbiamo fatto?
Abbiamo semplicemente creato due oggetti diversi, un header ed un content, identificandoti grazie ai tag data-role=header e data-role=content. A questo elenco aggiungeremo, volendo, un data-role=footer, ma in questo caso non verrà affrontata.

Per poter evidenziare un titolo nell’header, andiamo ad inserire un H2:

Titolo nel frontone

...

Se avete fatto attenzione, ho inserito un tag html H3 e un riferimento al tema.
Il tema di default avrebbe visualizzato l’header con uno sfondo nero, mentre forzando il tema a visualizzare il tema=b, sarà di sfondo blu.

Ora non resta che inserire un testo di esempio dentro l’elemento content.

Titolo nel frontone

Lorem ipsum: titolo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis, dolor ultricies blandit molestie, nibh arcu eleifend purus, nec malesuada erat mi ut sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis, dolor ultricies blandit molestie, nibh arcu eleifend purus, nec malesuada erat mi ut sem.

Abbiamo inserito un semplicissimo codice html all’interno del div data-role=content.
Se tutto è andato come dovrebbe e abbiamo provato il codice soprastante con un browser come Chrome o Firefox, il risultato dovrebbe essere il seguente:

Vi siete persi qualche passaggio? Ecco il codice completo:

Titolo nel frontone

Lorem ipsum: titolo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis, dolor ultricies blandit molestie, nibh arcu eleifend purus, nec malesuada erat mi ut sem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam facilisis, dolor ultricies blandit molestie, nibh arcu eleifend purus, nec malesuada erat mi ut sem.

Piccolo off topic:

Tutta la nostra solidarietà va agli amici emiliani, così duramente colpiti dalle scosse di questi giorni. Non appena riceveremo le informazioni corrette, pubblicheremo le modalità di acquisto di prodotti agroalimentari dalle ditte così duramente colpite dal disastro. Perchè acquistare il parmigiano al supermercato, quando lo si può acquistare direttamente dai produttori, così bisognosi di aiuto?

Motherboard fritta e sostituzione rapida

alemux — Mon, 28 May 2012 19:46:31 +0000

Black Friday

Venerdì scorso il PC desktop che uso per programmare ha deciso, in seguito ad un fulmine, di friggere e spegnersi. Cose che capitano, ma la cosa molto strana è che, nonostante un gruppo di continuità ed un alimentatore OCZ da 1250w, l’unica cosa a friggere sia stata la scheda madre, una Asus P6T Deluxe Palm Edition.

E’ una scheda che ha sempre fatto il suo lavoro, anche se ultimamente mi ha dato da pensare che non fosse il massimo dell’ingegneria: sia la mia che quella di mio padre, identiche e comperate assieme, hanno sempre dato qualche piccolo difetto.

Appurato che fosse la MB a partire, il problema nasceva dal fatto che, essendo datata, trovarne una uguale era realmente un problema: le poche schede nuove avevano un costo veramente fuori dal mondo, più di 395£ + spedizione dall’UK. Una soluzione non percorribile.

Abbandonata l’idea di trovarne una uguale, mi sono fatto convincere da un amico sistemista di prenderne una con il medesimo socket 1366 per provare a sostituirla a caldo: devo ammettere che avevo forti dubbi sulle possibilità che tutto andasse bene, ma la mia esperienza in fatto di sistemi è molto limitata, quindi ho preso per buono quanto consigliatomi.

Una nuova scheda madre: Asus Sabertooth X58

La nuova scheda è una Asus Sabertooth X58, veramente una gran bella scheda, potente, completa e dal costo contenuto, circa 220€ ivata.

Dopo aver smontato tutto e assemblato tutti i componenti, collegati i 4 dischi SATA, il masterizzatore SATA, ho fatto che eliminare una periferica IDE inutile e montato il processore i7 920 oltre ai 24gb di RAM.

Accendo il PC e … niente. Il nulla cosmico.
Entro nel BIOS e noto che il mio disco C non è elencato tra i dischi di boot. Il problema, forse, nasce dal fatto di averlo collegato in prima istanza sul canale SATA 6gb/s: probabilmente è un problema di incompatibilità, ma non ho avuto abbastanza tempo per fare le prove del caso.

Spostando il cavo SATA del disco primario sul canale standard 3gb/s, tutto è tornato normale: il disco è presente nell’elenco degli hard disk di boot.

Una volta corretto il boot list, il sistema sale e, come d’incanto, Windows mi chiede se voglio uno start normale o in modalità provvisoria. Quasi un miraggio. Evitare di installare di nuovo da zero Windows, tutti gli applicativi, la Suite Adobe, l’infrastruttura virtuale: sapete bene cosa significhi non dover scaricare giga di dati da internet per una installazione, per non parlare delle configurazioni custom perse.

Lo faccio partire in modalità provvisoria, Windows non chiede di essere attivato, la suite di Adobe non riconosce il mio account di Creative Cloud e il sistema parte con l’installazione di una serie di driver standard. Vanno tutti a buon fine, tranne quelli Marvell e i driver video: inserisco il DVD della scheda madre, installo i driver mancanti. Riavvio.

Un sogno. Funziona praticamente tutto alla perfezione.
Mi è bastato scaricare ed installare i driver NVidia aggiornati per le mie due GT260 in SLI e il sistema mi configura nuovamente i monitor riportando il mio sistema completo allo status quo pre-frittura mista di condensatori di scheda madre.

Ora il sistema è stabile, più veloce di circa il 20% e mi ritrovo con l’USB3 nativo on board e il supporto per nuovi processori. La Adobe Creative Suite mi chiede l’Adobe ID e mi conferma la correttezza e lancia correttamente gli applicativi.

La morale è: se avete una scheda simile alla Asus P6T e dovete gioco forza cambiarla, forse la mia esperienza può tornarvi utile.

jQuery: differenze tra .bind() .live() .delegate() e .on()

alemux — Fri, 25 May 2012 08:35:50 +0000

bind(), live(), delegate(), on(): tutti uguali?

Una delle cose più incasinate in jQuery è capire la differenza che c’è realmente tra i vari metodi .bind(), .live(), .delegate() e .on(), poichè, di primo acchito, sembra che ognuno sia una semplice alternativa dell’altro.

Ovviamente così non è, magari qualche commento a riguardo può chiarire questi passaggi, permettendovi di decidere meglio cosa e come fare.

Per prima cosa dichiaro un po’ di codice HTML che userò per i miei esempi:

Mauro Bergamasco

Flanker

Nazionale italiana di Rugby

Il metodo bind()

$( "#giocatori li a" ).bind( "click", function( e ) {} ); $( "#giocatori li a" ).click( function( e ) {} ); $( "#giocatori li a" ).hover( function( e ) {} );

Il metodo bind() collega il tipo di evento e l’handler direttamente nell’elemento DOM in questione. E’ sicuramente il più usato, grazie alla facilità d’uso, ma qualche problema di prestazioni lo causa. Considerate che .click() non è nient’altro che un’abbreviazione di bind() stesso … ecco perchè affermo che bind() è il più usato .
Il problema di prestazioni è dato dal fatto che l’handler dichiarato viene applicato a tutti gli elementi del DOM coinvolti dal comando, e quello che succede è vedere reiterato lo stesso handler N volte. Questa cosa non è il massimo a livello di prestazioni.

Il metodo live()

Bastano veramente poche parole per descrivere il metodo live(). Siete soliti usarlo? Allora maggiore sarà il tempo che dovrete impiegare per sostituirlo con un metodo alternativo migliore e, sopra ogni cosa, che non sia deprecato ufficialmente da jQuery dalla 1.7. Ebbene si, notizia ferale.

La problematica principale di live() era quando lo si usava in presenza di pagine molto ricche e soprattutto quando veniva “invocato” in maniera non specifica, utilizzando un selettore generico:

$( "#giocatori li" ).live( "click", function( e ) {} );

Il metodo delegate()

$( "#giocatori" ).delegate( "li a", "click", function( e ) {} );

Live() collega l’handler dell’evento al documento generale, mentre delegate() collega le informazioni, la catena selettore/evento ( “li a”&”click” ) direttamente all’elemento nel DOM ( “#giocatori” ). Questo sistema di collegamento direttamente nel DOM element ha permesso di risolvere molte problematiche di funzionamento, rispetto che infarcire il document di una sfilza di informazioni una dietro l’altra e, cosa ancora più importante, funziona correttamente con gli elementi aggiunti dinamicamente DOPO la fine del caricamento iniziale della pagina.

Il metodo on()

Quello che, stando alle affermazioni di jQuery stessa, dovrebbe essere il vostro obiettivo futuro è proprio on(), che prenderà in un colpo solo il posto di bind(), unbind(), live(), die(), delegate() e undelegate(). Guardare per credere:

// Bind $( "#giocatori li a" ).on( "click", function( e ) {} ); $( "#giocatori li a" ).bind( "click", function( e ) {} ); // Live $( document ).on( "click", "#giocatori li a", function( e ) {} ); $( "#giocatori li a" ).live( "click", function( e ) {} ); // Delegate $( "#giocatori " ).on( "click", "li a", function( e ) {} ); $( "#giocatori " ).delegate( "li a", "click", function( e ) {} );

Come potete vedere, la potenza data a on() è notevole: a seconda di come lo chiamate in causa, lui diventa metamorfico e modifica il modo in cui l’evento è chiamato in causa.
Sicuramente l’instanziare un metodo solo, che prenda il posto di N metodi, aiuta a standardizzare il tutto, rendendolo anche più facile per jQuery da manipolare.
L’unico lato negativo, se così si può chiamare, è che, per poterlo usare, bisogna entrare un attimo nell’ottica di come cambia la gestione dell’evento a seconda di come richiamate il metodo.

Il suggerimento del maestro Zen è quello di studiare il metodo on() e cominciare ad usarlo in tutti i nuovi progetti dove userete la libreria jQuery dalla 1.7 in poi.

jQuery Mobile: prototipazione rapida con Codiqa

alemux — Thu, 24 May 2012 15:22:13 +0000

Che siate alle prime armi con jQuery Mobile o che sappiate già tutto quello che serve, Codiqa mette a disposizione uno strumento decisamente interessante per realizzare con un’interfaccia drag&drop le vostre applicazioni web.

L’idea di fondo è dare uno strumento semplice, veloce e intuitivo per creare una bozza di interfaccia da poter, alla fine della fase di design, scaricare e, magari, inviare a colui che dovrà mettere mano al codice.

Seguendo un po’ la falsariga del Sencha Architect 2, è uno strumento che permette di realizzare il vostro sito mobile senza conoscerne il codice, anche se l’ottimizzazione manuale è poi obbligatoria se si vuole raffinare il tutto.

Per quelli più attenti tra voi non sarà necessario aggiungere che il plugin di Codiqa è presente anche sul sito ufficiale di jQuery Mobile …

Essendo Codiqa un servizio cloud, ha un costo mensile differente a seconda del profilo che preferite, ma se fate attenzione, in fondo alla tabella, c’è un link per attivare un’utenza gratuita con delle forti limitazioni ma utile per provare.

Come effettuare lo scroll di un testo in jQuery Mobile

alemux — Wed, 23 May 2012 16:16:41 +0000

Il problema con jQuery Mobile

A molti di voi sarà capitato di dover realizzare una qualche interfaccia in jQuery Mobile, eccezionale soluzione per dare un appeal mobile alle vostre interfacce.
Il mio problema nasceva dal fatto che per alcuni contenuti particolarmente lunghi, dove non bastava lo spazio renderizzato in pagina, non potevo contare su un effetto Scroll On Tap, tipico dell’interfaccia sugli SmartPhone.

Alcune soluzioni esterne

Una delle soluzioni più usate è quella di usare iScroll 4, che trovate qui, realizzato Matteo Spinelli: la sua soluzione è molto usata, funziona bene e bisogna apporre qualche modifica agli stili CSS dei vari DIV che contengono i vostri dati.

La mia soluzione con Scrollview.js

Io ho risolto il mio problema utilizzando il plugin di Adobe jquery.mobile.scrollview.js.
Non ho avuto alcun bisogno di modificare le mie pagine e l’effetto è abbastanza fluido. Ad esser completamente sinceri, iScroll4 permette una maggiore fluidità di scroll ma il livello di smooth raggiunto da scrollview.js raggiungeva lo scopo adeguatamente.

La libreria stessa è offerta con la seguente dicitura:
” Note: Code is in draft form and is subject to change “

Siccome ho effettuato numerose prove di funzionamento, ho raggiunto la ( mia personalissima ) conclusione che l’ordine di caricamento in pagina dei vari file .js dovrebbe essere il seguente:

Per praticità, vi posto i links diretti su demo.oneblackcat.it, ma tenete conto che potrebbero esserci delle versioni più aggiornate sul web, quindi il mio consiglio è quello di cercare su Google, non vi sarà difficile trovare le fonti ufficiali.

jquery.mobile-1.1.0.min.css” />
jquery.mobile.scrollview.css” />

E’ molto semplice attivare lo scrollview sul content di una pagina:

Titolo della pagina

Lorem ipsum...

Aggiungete solamente, al DIV con data-role=content la classe ui.scrolllistview, mentre al DIV interno assegnate il ruolo di data-role=listview.

ASP: dividere una stringa mediante un carattere

alemux — Wed, 23 May 2012 14:54:05 +0000

La mia attività di nerd totale mi porta spesso a scrivere, partecipare e rispondere a quesiti, più o meno facili, riguardanti ASP, jQuery, jQuery Mobile, Sencha e tutti quei linguaggi per i quali credo di essere ferrato.

In questi giorni mi sono accorto che c’è ancora un grandissimo numero di persone che hanno a che fare con il Classic ASP, volenti o nolenti, e che sono ad un livello piuttosto basso, tale da dover chiedere continuamente suggerimenti su come procedere in date situazioni che, a mio avviso, sono un po’ l’ABC del VBScript.

E’ altresì vero che, ovviamente, non tutti sono allo stesso livello, e tutti devono avere la possibilità di superare i proprio ostacoli, facili o difficili che siano.

Nel caso specifico, il problema era dato da un elenco di nomi e cognomi, divisi da una virgola, che dovevano essere listati in una certa maniera.
Posto il caso e la soluzione, non sia mai che qualcuno ne ha bisogno e riesce, navigando nei meandri del web, a trovarla.

' la stringa in questione è la seguente elencoNomi = "Mario Rossi, Gianni Verdi, Alessandro Bianchi, Ivano Azzurri" ' la necessità è quella di avere, uno sotto l'altro, un elenco di nomi linkati ad una pagina X ' l'ultimo nome non dovrà avere la virgola dopo il nome e non dovranno comparire spazi prima o dopo ar_elencoNomi = Split( elencoNomi, "," ) ' carico nella variabile ar_elencoNomi l'array di tutti i nomi presenti nella lista elencoNomi ' ora devo fare un ciclo che, per ogni voce, mi scrive a video un link ed il relativo nome e cognome for x=0 to UBound(ar_elencoNomi) ' un ciclo che va da zero all'ultimo valore dell'array ar_elencoNomi if ar_elencoNomi(x)<>"" then ' tengo in considerazione solo quelle voci che sono diverse da "", ossia vuote. Può tornare utile nome = Trim( ar_elencoNomi(x) ) ' il Trim() mi elimina gli spazi prima e dopo il valore del nome if int(x) < int( UBound(ar_elencoNomi) ) then 'controllo che non sia l'ultima voce stringa = "" & nome & ", " else stringa = "" & nome & "" end if end if next ' prossima voce del ciclo

CSS: selezionare ed illuminare le textbox

alemux — Tue, 22 May 2012 07:09:27 +0000

Ecco una piccola soluzione ad un problema piuttosto comune: mi hanno chiesto di trovare la soluzione più semplice possibile per selezionare tutte le INPUT di tipo TEXT e illuminarne lo sfondo con effetto glow di colore verde.

Sicuramente la necessità era quella di utilizzare esclusivamente codice CSS, senza jQuery, javascript o altro: tutto quello che serve è li, nel file CSS, senza bisogno di altro.
La compatibilità con i browser meno recenti non è stata affrontata, ma può essere facilmente risolta con Modernizr o altro di simile.

Non potevo, ovviamente, fare riferimento a tutte le input con:

input{ /* codice css */ }

Questo si può facilmente risolvere inserendo:

input[type=text]{ /* codice css */ }

Assegnamo alle input delle proprietà di base:

input[type=text]{ outline: none; padding: 2px; border: 1px solid #CCC; }

Ora assegnamo il solito indigesto codice ad IE9 &

input[type=text]{ outline: none; padding: 2px; border: 1px solid #CCC; -webkit-transition: all 0.40s ease-in-out; -moz-transition: all 0.40s ease-in-out; -ms-transition: all 0.40s ease-in-out; -o-transition: all 0.40s ease-in-out; }

Ora assegnamo un’ombra all’onmouseover:

input[type=text]:hover{ box-shadow: 0 0 5px #43d034; border:1px solid #35bf26; }

Et voilà, il gioco dovrebbe essere fatto!

IE contro Chrome: Google sta vincendo la battaglia?

alemux — Mon, 21 May 2012 20:47:15 +0000

Modernità o Status quo

La battaglia dei browsers sta avendo un chiaro vincitore, stando alle statistiche che potete trovare facilmente su StatCounter qui.

Chiunque abbia mai giocato, lavorato, smanettato o studiato HTML, CSS3 e compagnia bella, non può non aver maledetto la mediocrità di IE, almeno fino alla versione 9 compresa. La verità è che, però, è sempre stato necessario fare i conti con la E blu e così sarà ancora per un lungo periodo.

Prendiamo con le molle il risultato di queste statistiche, il metodo di reperimento dei valori dipende da troppi fattori. E’ altresì vero che se i dati non sono troppo attendibili sia all’inizio che alla fine, danno comunque un indicazione interessante sull’affezione degli utenti verso una o l’altra soluzione. Se prima IE era sinonimo di “andare su internet”, ora il trend sta, finalmente, cambiando.

Certamente il fatto che Windows sia stata obbligata ad inserire la scelta del browser può aver indebolito IE, ma la verità è che la maggior parte degli utenti di livello “basso”, ossia coloro che hanno poca familiarità con le dinamiche informatiche, utilizza normalmente IE e ignora l’esistenza di altri browser alternativi, più veloci e, cosa non da poco, decisamente più sicuri.

L’obbligo di usare un vecchio sistema

Chi come me lavora anche con la PA sa benissimo che vengono quotidianamente utilizzati browser come IE 6 e 7, che sono in parole povere un baco con delle toppe, e che la colpa non è solo degli utenti finali, come si può erroneamente pensare: provate voi a collegarvi ai principali siti governativi con Firefox o Safari, oppure ad effettuare operazioni bancarie con Google Chrome sui vari portali bancari.
Una semplice operazione da pochi secondi può trasformarsi in un’odissea di Denied Request, Page not found o Session Timeout.

La verità è che nessuno di noi tifa per qualche browser in particolare, la speranza comune è che la concorrenza porti tutti a sviluppare browser sempre più stabili, più sicuri e innovativi, magari con un occhio un po’ più dedicato alla leggerezza del pacchetto di installazione: vero Google?

Semplice countdown in jQuery

alemux — Mon, 21 May 2012 14:56:12 +0000

Per continuare la nostra continua presentazione di plugin di jQuery che possano essere utili a tutti, oggi pongo alla vostra attenzione un semplice script per inserire, in qualsiasi punto della vostra pagina, un countdown verso una data indicata.

Lo script lo trovate all’indirizzo http://keith-wood.name/countdown.html, è molto semplice da configurare e fa semplicemente il suo dovere.

Eccovi un esempio del codice da inserire per visualizzare un countdown in jQuery in versione GIORNI-ORE-MINUTI-SECONDI:

var newYear = new Date(); newYear = new Date(newYear.getFullYear() + 1, 1 - 1, 1); $('#defaultCountdown').countdown({until: newYear}); $('#removeCountdown').toggle(function() { $(this).text('Re-attach'); $('#defaultCountdown').countdown('destroy'); }, function() { $(this).text('Remove'); $('#defaultCountdown').countdown({until: newYear}); } );

Responsive images e jQuery: cambiare immagine a seconda della risoluzione

alemux — Sat, 19 May 2012 09:56:03 +0000

Seguendo il trend delle ultime settimane, così come ha fatto Adobe nel nuovo Dreamweaver CS6 con il Responsive Design e le sue griglie fluide ( la cui traduzione in italiano suona, a mio avviso, veramente male ), mi sono immerso una mezz’ora in jQuery per risolvere un problema con un sito di un cliente.

La necessità parte dal fatto che l’immagine di sfondo, con proprietà width=100%, non può essere proposta sia sul mobile che su tablet e desktop alla stessa maniera, della stessa qualità. Bisogna essere cortesi nei confronti degli user su mobile, giusto?

Partendo da una immagine, ne realizzo una versione MidRes e una LowRes, e mi accingo a scrivere lo script che mi scali l’immagine in maniera dinamica.

L’immagine di partenza è la seguente:

Prima di tutto, inserisco qualche linea di CSS per eliminare i margini di default del BODY e per mostrare al 100% l’immagine presente in pagina:

Codice CSS:

body{ padding:0px; margin:0px; } img{ width:100%; height:auto; }

Codice HTML:

Come noterete, ho usato alcuni tag custom, dove ho indicato le tre versioni diverse della medesima immagine. Come noterete, inoltre, non ho inserito alcuna immagine in SRC. Noteremo più avanti questa anomalia.

Ora, prima di tutto, scrivo in console un messaggio ogni qual volta viene ridimensionata la finestra:

$(window).resize(function(){ var altezza = $(window).height(); var larghezza = $(window).width(); console.log('it\'s resizing, now it\'s ' + larghezza +'x'+ altezza); });

Ora, se tutto funziona a dovere, dovreste notare in Console la dimensione della finestra ogni qual volta ridimensionerete il tutto. Non funziona? Controllate di avere inserito il riferimento alla libreria jQuery.

Ora creiamo la funzione che controlla la dimensione e, eventualmente, cambiamo l’SRC dell’immagine.

function CheckRes(object){ // misuro la dimensione della finestra var window_width = $(window).width(); // controllo l'attuale SRC var original_src = $(object).attr('src'); var img_low = $(object).attr('data-lowres'); var img_mid = $(object).attr('data-midres'); var img_hd = $(object).attr('data-hd'); if(window_width var new_src = img_low; // smartphone }else{ if(window_width var new_src = img_mid; // iPad }else{ var new_src = img_hd; // desktop } } if(original_src!=new_src){ $(object).attr('src',new_src); } }

Cosa fa il codice?
Carica la larghezza della finestra nella variabile original_src, successivamente identifica le 3 versioni differenti dell’immagine e, a seconda della risoluzione, se l’SRC è differente dal nuovo, ne modifica il puntamento. Tutto molto semplice.

Aggiungiamo quindi, in fase di resizing, la funzione creata.

$(window).resize(function(){ var altezza = $(window).height(); var larghezza = $(window).width(); //console.log('it\'s resizing, now it\'s ' + larghezza +'x'+ altezza); CheckRes('#thisimg'); // Nota che CheckRes deve ricevere il selettore corretto, #thisimg });

Ora, al momento del caricamento, la pagina rimarrà vuota e l’immagine verrà caricata correttamente solo dopo un window resizing.
Non ci resta che aggiungere l’ultima riga di codice:

$(document).ready(function(e) { CheckRes('#thisimg'); });

Il gioco è fatto.
Fate le varie prove, noterete che ogni volta verrà caricata l’immagine corretta a seconda della dimensione della finestra. Buon responsive design!

Se volete vedere l’esempio in pratica, cliccate qui.