Le applicazioni Ajax, nel web, sono state una vera rivoluzione, visto che permettono di ricaricare un codice specifico senza dover fare il refresh completo della pagina.
Se ancora non avete ben chiaro come funziona l’Ajax o vi scontrate con la prima volta con questo meccanismo, vi invito a dare un’occhiata a un mio vecchio articolo prima di proseguire, dove mostro le basi del suo utilizzo con un esempio completo.

In tempi recenti mi sono trovato nella situazione di dover “contattare” un server esterno usando Ajax, cioè a dover effettuare una chiamata Ajax dal sito www.primosito.it al sito www.altrosito.it . E qui mi sono scontrato con la sua più grossa limitazione.
Per questioni di sicurezza, infatti, questo tipo di chiamate esterne (che prendono il nome di cross domain) sono proibite dai browser. La limitazione è utile per evitare reindirizzamenti da parte di craker, ma può darci fastidio quando – per esempio – dobbiamo controllare la login dell’utente passando attraverso un sito (e un database) che non è nostro.

Fortunatamente esistono dei sistemi per aggirare il problema.
L’esempio in questo articolo mostra come inviare dei POST (le cui chiavi sono “email” e “password”) attraverso una chiamata Ajax.
Per la comprensione delle script si richiede che abbiate almeno una conoscenza di base dell’ajax. Si richiede inoltre che abbiate la possibilità di chiedere ai gestori del secondo server (dove risiede www.altrosito.it) di salvare una riga di codice nel loro file, che sarà la pagina di ricezione dei post.

Chiamata.php

Innanzitutto scaricatevi l’ultima versione di jquery, che potete trovare a questo indirizzo.
Il nostro file di chiamata (presente sul nostro sito www.primosito.it) prenderà il nome di “chiamata.php”: qui dovrete includere il jquery scaricato:

1

<script type="text/javascript" src="jquery.js"></script>

Adesso passiamo al codice vero e proprio della pagina.
Al click del link “premi”, sarà avviata la funzione jquery, che effettuerà la chiamata ajax. Come è facile vedere, ho imposto che i parametri “email” e “password” siano inviati come POST.
Questi sono gli unici elementi che dovrete modificare nello script, oltre all’url di destinazione: quest’ultimo dovrà puntare alla pagina del secondo sito che si occuperà di raccogliere i dati POST (nel nostro caso avrà nome “risposta.php”).

Leggi Tutto >>

La settimana scorsa ho passato in rassegna le basi per l’uso di SmartImage, una classe che permette di ritagliare le immagini al volo subito dopo un upload. In quel caso abbiamo visto come ridimensionare le immagini secondo le proporzioni (larghezza e altezza) che gli impostiamo noi in precedenza.

Facciamo un passo avanti.
In questo articolo vedremo come fare per mantenere le proporzioni in base alle dimensioni dell’immagine originale. In altre parole, dati due parametri (altezza e larghezza), faremo in modo di ridimensionare le immagini in modo che stia “all’interno” di questi valori.
Sulle nuove dimensioni ottenute applicheremo quindi la classe SmartImage che abbiamo visto nel precedente articolo. Il concetto non cambia, soltanto lo renderemo dinamico.

Anche in qui trovate il codice liberamente scaricabile, da personalizzare in base alle vostre esigenze.

Scarica gli script di questo articolo in formato zip

Leggi Tutto >>

Navigando per la rete si possono trovare delle immagini riepilogative davvero interessanti.
Una di queste riportava alcuni dati di base sui linguaggi di programmazione: la loro “popolarità” tra la gente (ovvero la classifica in base alla loro diffusione) e la linea temporale dei maggiori linguaggi entrati nella storia.

Come vedete dal grafico, ogni programmatore che si rispetti dovrebbe conoscere come minimo il Java o il C (e suoi derivati).
Perché sono i più popolari? Semplicemente perché si adattano a diverse strutture, a diverse piattaforme e vengono utilizzati tanto per i servizi online quanto per quelli offline.
Linguaggi web-oriented (come sono, per esempio, il php e il javascript) sono un po’ più di élite, considerando che il loro scopo è di far funzionare applicazioni per lo più online.

Il tutto rispecchia l’esigenza sul mercato di lavoro. Se sfogliate i giornali di offerte, troverete soprattutto richieste di programmatori Java.

Leggi Tutto >>

Le immagini sono un elemento fondamentale del layout di un sito. Su questo non ci sono dubbi.
Finché dobbiamo gestirle noi, in qualità di programmatori, i problemi si riducono al minimo: creiamo le immagini, le ritagliamo come si deve e le mettiamo online.

Ma cosa fare quando l’upload delle immagini è lasciato all’utente e si ha la necessità di ridimensionarle al volo?
Vi sarà capitato centinaia di volte di spiegare all’utente che le immagini vanno caricate «entro una certa dimensione» e di ritrovarvi, poi, a gestire immagini sproporzionate.
Fortunatamente esistono degli script già pronti che si occupano per noi di questi problemi – e lo fanno in modo eccellente, lasciandoci una buona libertà di azione e di personalizzazione. Sto parlando nello specifico di SmartImage, una classe integrabile nei nostri siti internet.

La sua gestione non è proprio immediata, ma è solo questione di prenderci le misure. Ne faccio uso da diverso tempo e, ve l’assicuro, una volta capito il meccanismo non vorrete più abbandonarla.
SmartImage è scaricabile gratuitamente online (per esempio a questo indirizzo). Troverete comunque la classe completa nel file zip qui sotto, nel quale avrete a disposizione tra l’altro un esempio di utilizzo.

In un altro articolo faremo un passo avanti e vedremo come ritagliare delle immagini su misura (sempre con SmartImage).

Scaricatevi lo zip, quindi procedete con la lettura. Vediamo qualche operazione elementare, e cioè come ridimensionare al volo un’immagine di cui si è fatto l’upload.
La versione a cui faccio riferimento è SmartImage 0.8.9. Al momento la classe è arrivata alla versione 0.9.6, ma le funzionalità di base restano le stesse.

Leggi Tutto >>

Vi è mai capitato che il vostro cliente faccia – per sbaglio – una modifica al sito e vi chieda di riportarlo com’era prima?
Un sito ben strutturato limita al minimo gli errori in lato codice (per esempio, la cancellazione di una categoria se questa contiene ancora elementi), ma dagli “errori umani” non c’è script che tenga. In questo campo ricadono, per esempio, le cancellazione di utenti registrati al sito, che diventano di fatto irrecuperabili – a meno che non abbiate un backup del database.

Il più delle volte il cliente sa di non dover coinvolgere il programmatore, visto che l’errore è esclusivamente suo, ma se trovate qualche personaggio ostico o con cui avete rapporti particolari vi potrebbe essere utile poter recuperare il record cancellato e riportarlo al suo posto.
Ecco quindi che una funzione di report farà al caso vostro.

Nel concreto, in questo articolo vedremo una semplice funzione da richiamare sotto ogni query “di modifica” (vi rientrano quindi update, insert e delete, ma non le comuni select, che non vanno a intaccare il database). Lo script si occuperà di salvare la query intera, con qualche informazioni in più a vostra discrezione. Io consiglio di tenere traccia per lo meno di queste informazioni:
– eventuale id dell’utente che ha effettuato la modifica (questo solo in caso che ci sia una fase di login)
– id del record modificato/cancellato/inserito
– la query completa
– la data dell’operazione
– un campo note da compilare per capire quale area del sito l’operazione ha coinvolto

Questi saranno, di fatto, i campi che andranno a formare la nostra tabella report nel database. Nello script ho aggiunto anche il campo tabella, per avere direttamente sottomano la tabella coinvolta dall’operazione.
Una nota: la funzione è predisposta per accettare anche report che non siano inerenti a query lanciate, cioè è predisposta per accettare semplici messaggi di “promemoria” (un esempio: se inviate email periodiche, potete compilare solo il campo data con la descrizione che l’email è stata inviata). In questo caso è sufficiente lasciare vuoti i campi della tabella non necessari.

Per la comprensione dello script basta una conoscenza di base del php e del mysql.

Leggi Tutto >>

Skype è il più noto programma di chat e videoconferenza. Purtroppo non ha la possibilità di salvare le sue conversazioni in formato leggibile: ecco perché occorre fare uso di programmi esterni (1)

Skype è un noto – e probabilmente il più usato – programma di videochat. Seduti a casa vostra, potete “conversare” tramite tastiera con un conoscente a migliaia di chilometri di distanza da voi e aprire addirittura una videoconferenza con lui.
Tra le funzioni più avanzate, a pagamento, permette di effettuare chiamate e videochiamate come un telefono qualsiasi, a costi ridotti rispetto alla linea telefonica normale.

Se avete avuto occasione di usarlo, avrete visto che Skype tiene traccia di tutte le conversazioni che fate con tutti i vostri contatti.
Questo succede, naturalmente, se non avete bloccato il salvataggio della cronologia. Per assicurarvene, andate sul menu Strumenti >> Opzioni. Nella categoria “privacy” troverete la voce “Conserva la cronologia per…”. Impostando la scelta potrete conservare la cronologia o non salvarla, e stabilire quando sarà automaticamente cancellata.

Poniamo il caso che abbiate scelto di conservare sempre la cronologia. Dove salva Skype le nostre conversazioni?
In Windows, il file fisico viene creato nella cartella delle impostazioni personali del proprio profilo, in genere sotto il percorso C:\Documents and Settings\PROFILO_PC\Dati applicazioni\Skype\NOME, dove PROFILO_PC è il vostro utente in Windows e NOME corrisponde al profilo che state attualmente usando. Il percorso varia a seconda del sistema operativo che usate sul vostro pc, ma l’importante è trovare la cartella dell’utente Skype voluto.
All’interno troverete una cartella chiamata “chatsync” e, al suo interno, altre sottocartelle. Lì si trovano dei file con estensione “.dat”, illeggibili da qualsiasi editor comune (che sia il notepad o il wordpad di Windows).

Per recuperare le conversazioni in formato leggibile, dovete servirvi di programmi esterni. SkypeLogView fa al caso nostro.

Leggi Tutto >>

In articoli passati abbiamo affrontato alcune funzionalità di Google Maps che ci permettono di gestire indirizzi e calcolo a distanza.
Visto che l’argomento ha suscitato l’interesse di molti lettori, facciamo il punto della situazione, per non perdersi i dettagli. Ricordo che tutti gli articoli hanno il rispettivo script da scaricare, del tutto gratuitamente.

Riassumendo, nella pratica abbiamo visto come:

– trovare la distanza tra due coordinate geografiche conoscendo latitudine e longitudine

– trasformare un indirizzo in latitudine e longitudine. Se cercate un esempio più complesso, sempre per trasformare un indirizzo in coordinate ma con delle aggiunte, lo potete leggere a questo link.

– integrare e personalizzare una mappa di Google Maps nel nostro sito

– cambiare le coordinate in modo automatico con un click sulla mappa oppure trascinando il marker

– personalizzare il tooltip e aggiungere uno o più marker

Esempio completo: trasformare un indirizzo e calcolare la distanza da un punto

In questo articolo vi propongo uno script che riassume, in modo chiaro e diretto, le funzionalità di Google Maps che abbiamo già visto. Il concetto è lo stesso dei precedenti articoli, ma il codice è più pulito e facilmente modificabile (e soprattutto, come sempre, potete scaricarlo e modificarlo come vi sembra più opportuno).

Il suo scopo è:
– prendere un indirizzo e trasformarlo in coordinate geografiche;
– trovare la distanza tra queste coordinate geografiche e uno o più indirizzi passati.
Nell’esempio, ho preso come punto di origine l’indirizzo “Via Vittorio Veneto Cerea Vr”. Lo script recupererà le sue latitudine e longitudine. Dopodiché, passo tutti i cap delle frazioni di Verona e stampo a video la distanza tra questi e il mio indirizzo di base.

Nello specifico, entrando in campo tecnico, questi sono i passaggi:
– con una funzione, passando l’indirizzo come parametro, estrae latitudine e longitudine e le inserisce in un unico array di due elementi
– con una seconda funzione, prende due indirizzi come parametri, li trasforma in coordinate geografiche (richiamando la prima funzione) e ritorna la loro distanza in chilometri
– attraverso un ciclo for estrae la distanza tra un punto di origine e, ricorsivamente, tutti i cap di Verona; poi li stampa a video

Il codice è completamente commentato e non avrete difficoltà a seguirlo, anche perché non richiede grandi modifiche. Vediamo nel dettaglio lo script.

Leggi Tutto >>

Generare una password casuale con javascript è molto semplice.

Dal lato del codice, è sufficiente importare un javascript di poche righe che si occupa di personalizzare la tipologia di password voluta e la sua lunghezza.
Il codice che trovate qui sotto, liberamente scaricabile, è completo e funzionante e permette di generare una password alfanumerica con maiuscole e minuscole, di una lunghezza casuale compresa tra 6 e 15.

Download script

Pagina diretta alla scheda e al download del codice

Vediamo in breve come personalizzarlo.

Il form

Nel mio caso ho deciso di immagazzinare la stringa-password in un campo input. Alla pressione sul link, si richiamerà lo script javascript che genererà la password e la metterà in automatico come valore al campo input.
Nulla vieta, però, che possiamo semplicemente immagazzinarla in una variabile per inviarla via posta o stamparla a video.

Leggi Tutto >>

Sports Tracker è un’app gratuita che permette di tracciare i progressi negli allenamenti sportivi e di condividerli sulla comunità e sui social network come Facebook (1)

Nome: Sports Tracker
Google Play Store: link all’app per Android
Lingua: Italiana
Costo: gratuito

Nata come un’applicazione per cellulari Symbian, l’enorme successo che ha ottenuto ha portato il team sviluppatore a creare una nuova versione per Android e per iPhone.

Sports Tracker è un programma completo per gli sportivi: tiene traccia di tutti i vostri allenamenti e calcola il consumo di calorie in base ai dati che gli fornite, sia che facciate uno sport all’aperto che al chiuso.
Attraverso Google Maps, mostra anche l’eventuale percorso effettuato all’aperto e permette di condividere i dati su Facebook. Non solo: sulla mappa potrete seguire altri sportivi che, come voi, hanno fatto uso di quest’app.

L’unica cosa che dovrete ricordarvi è di accendere il GPS dello smartphone: in caso contrario l’applicazione ve lo ricorderà all’avvio di un allenamento.

Accedendo al sito, poi, potrete rivedere i vostri progressi e modificare i dati a vostro piacimento.

Le opzioni disponibili

Una volta installato sul vostro smartphone e aperto, vi troverete davanti un menu molto semplice e con un aspetto gradevole.
Innanzitutto vi consiglio di entrare nel menu Impostazioni e di modificare i parametri con i vostri dati personali: sesso, peso ed età. Queste informazioni saranno utili al programma per calcolare il consumo di calorie (non saranno visibili agli altri).
In questo menu avrete anche la possibilità di:
– impostare la vostra “fascia cardio”, cioè le frequenze cardiache
– attivare un feedback vocale che vi avvisarà quando completerete un giro (cioè una distanza preimpostata)
– impostare un’altitudine
– vedere come appare il proprio profilo al pubblico

Leggi Tutto >>

Attraverso l’uso di jquery e di alcune sue classi implementate, possiamo costruire una slide (galleria) di immagini a scorrimento.
Lo script che trovate qui sotto, liberamente scaricabile, contiene già tutti i codici occorrenti e tre immagini di presentazione. Il codice è assolutamente stand-alone, il che significa che non ha bisogno di server per girare (e lo potete avviare anche nel vostro computer): infatti fa uso esclusivamente di html e jquery.

Innanzitutto, diamo un’occhiata ai file presenti nello script. Dopo ci occuperemo di visionarli nel dettaglio.
– index.html: è la pagina che visualizzerà la slide
– style.css : il foglio di stile che gestisce l’aspetto della pagina e della slide
– jquery.js : contiene le librerie necessarie a utilizzare jquery
– jquery.cycle.all.js : è il cuore del funzionamento della slide e si appoggia al file jquery.js

La slide può contenere, virtualmente, un numero infinito di immagini, che dovranno essere posizionate nella cartella img.

Leggi Tutto >>