Ecco come apparirà la nostra google maps una volta caricato l’indirizzo di un utente

Nell’articolo precedente abbiamo visto come è possibile aggiornare latitudine e longitudine semplicemente cliccando su un punto della mappa o trascinando il marker alla posizione voluta.

Oggi vi presento uno script più completo che, oltre a quanto detto sopra, ci darà la possibilità di convertire un indirizzo fisico in coordinate con la semplice pressione di un tasto. Una volta recuperate le coordinate in questo modo, saranno aggiornati anche gli input che contengono le nuove latitudine e longitudine. Trattandosi di un semplice form, potrete poi gestirlo a vostro piacimento (per esempio salvarlo nel database).

Per lo scopo sarà utile aver letto l’articolo precedente, perché le nozioni spiegate non saranno ripetute qui ma soltanto riprese: si darà quindi per assodato il fatto di aver compreso il funzionamento del javascript per creare l’evento “aggiorna coordinate in caso di click sulla mappa o di trascinamento del marker”. Si tratta comunque di un codice fisso e se non avete necessità di personalizzarlo, anche in questo caso potete limitarvi a scaricare lo script e a modificarne solo la struttura grafica.

Funzionamento dello script

Lo script è commentato dove serve. Nel codice sarà adoperato un misto di html, javascript, jquery, php e mysql.
Per quanto riguarda il php e il mysql, sono richieste soltanto conoscenze di base: uso delle variabili, come connettarsi a un database di tipo mysql e recuperare i dati da una tabella. Per chi avesse poca dimestichezza con l’interazione php-mysql, è a disposizione un articolo di base dettagliato.

La completa comprensione dello script richiede, naturalmente, una conoscenza approfondita del javascript e delle api di Google Maps, ma se quello che cercate è un codice pronto da usare vi basterà prenderlo così com’è e cambiare la grafica per adattarla al vostro sito.

Vediamo in breve le funzionalità che lo script vi metterà a disposizione:
– possibilità di caricare la pagina con una mappa predefinita
– possibilità di cambiare le coordinate (latitudine e longitudine) con un click sulla mappa o trascinando il marker; gli input saranno di conseguenza aggiornati
– possibilità di scrivere un indirizzo e di trasformarlo in coordinate alla pressione di un tasto, aggiornando la mappa

All’interno dello zip troveremo sei file:
– index.php : la pagina principale, che richiamerà tutti gli altri file. Al suo interno troveremo dunque il form, la mappa stampata e i campi di input.
– config.inc.php: contiene i dati per la connessione al database.
– jquery.js: include le librerie JQuery, necessarie per gli aggiornamenti in tempo reale degli input.
– google_maps.js: contiene le funzioni javascript che si preoccupano di interagire con la Google Maps. E’ il cuore dello script.
– style.css: il foglio di stile per formattare l’aspetto del form e della mappa.
– utenti.sql: è la tabella degli utenti, che potete importare nel vostro database.

Leggi Tutto >>

Ecco come apparirà la nostra mappa non appena sarà caricata la pagina

Qualche mese fa vi ho presentato lo script base per integrare e personalizzare una mappa nel vostro sito, attraverso le API v3 che Google Maps ci mette a disposizione.

Adesso facciamo un passo avanti e vediamo uno script più complesso, ma che farà un’ottima impressione davanti agli utenti nel caso in cui abbiano la possibilità (o la necessità) di inserire il proprio indirizzo civico.
Nel complesso, ci sarà utile nel caso in cui l’utente debba scegliere una posizione leggermente più discostata rispetto a quella che gli propone Google Maps. In questo caso, gli basterà cliccare sul punto voluto della mappa oppure trascinare il marker (il segnaposto della mappa) nella posizione voluta: le coordinate di latitudine e di longitudine cambieranno automaticamente e appariranno all’interno di due campi input. La mappa sarà centrata sulla nuova posizione.
Questi due campi input potranno, naturalmente, essere poi salvati nel database come attraverso un normale form.

A livello tecnico, il codice funziona lato client: questo significa che potremmo farlo partire dal nostro computer senza bisogno di un server esterno (come invece succede, per esempio, con pagine gestite tramite php).
Inoltre, oltre all’index.html, l’unico file javascript che dovremmo includere nella nostra cartella sarà quello di JQuery: il codice infatti sarà un mix tra html, javascript e jquery.

Nello script che potete liberamente scaricare qui sotto troverete tutti i file già pronti e a disposizione, completamente funzionanti, compreso il jquery.js necessario per farci lavorare con JQuery. Se avete qualche esperienza, potrete personalizzarlo senza troppi problemi.
Di seguito analizzeremo le sue parti. Se avete scaricato lo script, vi sarà facile seguire la spiegazione.

Nel prossimo articolo faremo un ulteriore passo avanti e aggiungeremo una funzionalità al nostro codice: la possibilità, da parte dell’utente, di scrivere un indirizzo fisico. Alla pressione di un tasto, lo script trasformerà l’indirizzo in coordinate (latitudine e longitudine) e aggiornerà automaticamente la mappa.

Leggi Tutto >>

Il nostro emulatore per Android avrà questo aspetto

Se siete alle prime armi con il sistema operativo Android e avete intenzione di imparare a programmare per crearvi delle vostre applicazioni, la prima cosa di cui avete bisogno è un software che vi permetta di usare i pacchetti nativi del linguaggio.

Non è intenzione di questo articolo spiegarvi le basi e le caratteristiche di Android, né di darvi un’infarinatura su linguaggio usato. Accennerò solo il significato dei componenti quando può esservi utile.

Lo scopo di questo articolo è spiegarvi:
– come installare il software Eclipse, con il quale avrete una gestione completa
– come integrare in Eclipse l’SDK di Android, cioè il pacchetto che contiene l’ambiente di sviluppo per programmare (funzioni native, classi, ecc.)
– come attivare il plugin ADT in Eclipse, cioè lo strumento che ci permetterà di programmare fisicamente per Android
– come configurare l’AVD, ovvero un emulatore che ci permetterà di vedere i nostri risultati sul pc come se li stessimo provando sul telefonino

I passaggi sembrano molti, ma in realtà il processo non è tanto complicato. Serve però del tempo e un po’ di pazienza (dopotutto, quando si inizia un nuovo linguaggio di programmazione si va sempre incontro a qualche difficoltà di base).

Le procedure saranno aiutate in alcuni punti da immagini. Cliccateci sopra se le volete vedere a pieno schermo.

Leggi Tutto >>

Nonostante la scoperta dei ricercatori, gli acquisti online continuano a essere in gran parte sicuri (1)

Quando comprate un prodotto su un sito web, questo finisce su un carrello (virtuale) e, una volta completato l’acquisto, vi vengono chiesti i termini per il pagamento: carta di credito, bonifico, ecc.

Il sistema è (deve essere) altamente sicuro. Non devono esistere buchi nella sicurezza, perché naturalmente il processo è delicato e se un cracker potesse “rubare” i dati di trasmissione per il pagamento, avrebbe la possibilità di recuperare una qualsiasi cifra disponibile dall’utente (ecco perché lo strumento preferito per i pagamenti online sono le carte di credito pre-pagate: al massimo possono trafugarvi il totale nella carta).

In effetti, il sistema di trasmissione dei dati è estremamente sicuro. Si fa uso, infatti, di un sistema di crittografia che genera in modo del tutto casuale due numeri primi con l’aggiunta di un terzo numero. Non c’è formula matematica che possa recuperare una chiave così casuale.
O almeno così dovrebbe essere ragionando in modo logico.

Leggi Tutto >>

Nell’articolo precedente abbiamo visto come una struttura efficiente sia la base per costruire un sito web adattabile a ogni situazione.
Se non lo avete ancora fatto, vi consiglio di scaricare qui sotto lo script completo, in modo da seguire la spiegazione con il codice sotto mano.

Il sito va costruito a moduli separati e il layout comune a tutte le sezioni deve essere richiamato grazie all’uso di funzioni.

Prima di vedere nel dettaglio il file struttura.inc.php, diamo un’occhiata ai file di esempio, contenuti nella cartella “pagina_di_esempio” dello script: vi renderà la spiegazione molto più comprensibile.

Download script

Pagina diretta alla scheda e al download del codice

Un esempio minimale: l’uso a moduli del sito

L’idea è di strutturare il sito a moduli, cioè a sezioni indipendenti l’una dall’altra. Se, per esempio, nel vostro sito ci saranno la sezione dei contatti e quella dell’elenco prodotti, dovrete creare due cartelle chiamate “contatti” e “prodotti”. Ognuna di queste cartelle sarà popolata dei file usati esclusivamente per quella sezione.
In questa ideologia, il foglio di stile dei contatti non sarà incluso nella sezione dei prodotti, e viceversa.

Perché strutturare a moduli? E’ una comodità non da poco: se nella sezione “prodotti” dovrete includere un file javascript complesso (es: un calendario interattivo), eviterete così di includerlo anche nella sezione dei contatti e di caricare codice inutile nella pagina.

Leggi Tutto >>

La costruzione di un sito web non deve mai essere lasciata al caso. Prima di iniziare a buttare giù il contenuto e lo scheletro grafico, serve innanzitutto immaginare quale potrebbe essere la struttura migliore che potrebbe eventualmente subire modifiche nel modo più indolore possibile.

Sto parlando a livello di codice, naturalmente, e in particolare quando abbiamo a disposizione un linguaggio PHP su cui lavorare (ma con l’uso di un altro linguaggio, come l’ASP, il concetto è identico). La struttura del nostro sito deve essere semplice, flessibile e adattabile a ogni situazione.
In pratica deve permetterci:
– di integrare un header, un footer e una sidebar comune a tutte le pagine; in caso di bisogno, però, deve lasciarci la possibilità di integrare una sidebar diversa (o addirittura un layout senza sidebar)
– di apportare facilmente delle modifiche grafiche
– di richiamare variabili e funzioni senza doverle continuamente includere in ogni pagina

In questo esempio vi presento la struttura minimale da usare per costruire un sito efficiente a livello di codice. Per comodità di esposizione, sarà diviso in due articoli.

Una nota importante: la struttura di questo esempio è buona perché flessibile, visto che permette di essere riutilizzata per qualsiasi tipologia di sito. Si tratta però di una struttura di base, che può e deve essere migliorata (per esempio facendo uso di classi invece che di funzioni o creando una sottocartella che gestisca i vari temi del sito). L’esempio è rivolto a chi non ha molta esperienza alle spalle e desidera avere una struttura di base efficiente su cui mettere le mani.

Per la comprensione dell’articolo si richiede una buona conoscenza del php e dell’uso di funzioni. I principianti, comunque, potranno facilmente usarla nel proprio sito: potranno incontrare qualche difficoltà quando decidessero di modificarla alla radice.
Tutte le pagine sono commentate in ogni loro parte.
Il layout grafico all’interno è solo di esempio. Le classi css dovranno essere implementate da voi con un foglio di stile esterno e secondo le vostre esigenze, così come eventuali funzioni javascript o php.

Vi consiglio di scaricare prima di tutto lo script, perché la parte più comprensibile del codice non sarà riportata in questo articolo. Inoltre, così avrete sottomano un confronto diretto.

Si accettano (anzi, sono graditi) suggerimenti per migliorare lo script e soprattutto la segnalazione di eventuali errori. Vi sarò grato io come chi scaricherà lo script e dovrà metterci le mani.

Leggi Tutto >>

Ci sono diversi metodi per costruire un menu o una sidebar, una barra di navigazione laterale che mostra l’elenco di categorie e sottocategorie (o di pagine e sottopagine).
Il codice da usare dipende da diversi fattori, quali la conoscenza o meno a priori del livello massimo di profondità delle pagine e il fatto che l’amministratore possa gestire a sua discrezione il contenuto delle pagine.

Nel caso in cui le categorie sono “fisse” e scritte staticamente all’interno della pagina, allora il problema è minimo: vi basta sistemare la grafica e indentare a piacere le categorie interne. Ma cosa fare quando le categorie sono prese da un database e non si conosce il livello di profondità in cui si arriva?
E’ una situazione che capita spesso a chi crea siti web e dota il cliente di un pannello di controllo attraverso il quale può generare, a volontà, categorie e sottocategorie per popolarle poi con i prodotti.

Nell’articolo mostrerò come comporre una barra di navigazione (o un menu) il cui livello di profondità non deve avere un limite imposto.
Nell’esempio le categorie e le sottocategorie sono prese dal database e hanno una struttura gerarchica molto semplice: la sottocategoria avrà come riferimento, in un campo, l’id della categoria padre.

La grafica è minimale, ma nello script da scaricare troverete tutti i file già pronti e con le classi css già implementate, che potrete modificare facilmente attraverso il foglio di stile esterno.
La sidebar così costruita può essere adattata senza problemi all’interno del vostro sito.

Leggi Tutto >>

Quando lasciate all’utente la possibilità di inserire un testo o un commento, che poi andrà a salvarsi nel vostro database, dovete assicurarvi che alcuni caratteri particolari (come gli apostrofi) non vadano a danneggiare la query, provocando degli errori sconfortanti.
Questo può avvenire intenzionalmente (l’utente, cioè, è consapevole del danno e sta cercando di attaccare volontariamente il vostro database; il termine tecnico è query injections), ma anche casualmente: in tal caso la colpa sarà solo nostra.

Per evitare simili disastri, ci vengono in soccorso due funzioni native del PHP:
– addslashes() aggiungerà il backslash (\) davanti agli apici (‘), doppi apici (“) e ai backslash (\) presenti nella stringa passata. Dovrà essere usata prima di salvare le stringhe nel database.
– stripslashes() farà il procedimento inverso, togliendo i backslash davanti ai suddetti caratteri e dovrà essere usata una volta estratta la stringa del database e prima di stamparla a video.

Leggi Tutto >>

Nella costruzione del layout di un sito web, è utile – anzi, necessario – avere un raffronto tra i possibili colori che potremmo applicare agli sfondi e al testo.
Anche nel realizzare immagini con programmi di grafica, quali Photoshop o Illustrator, avere a disposizione un confronto e reperire in un attimo il codice dei colori così determinati ci sarà comodo.

Esiste un’enorme varietà di siti web che mettono a disposizione dei tools di questo genere, spesso con opzioni molto avanzate che i più esperti in grafica riusciranno ad apprezzare.

Qui sotto propongo una carellata di questi siti, che provvederò ad aggiornare in futuro (se avete altri siti da segnalare, lasciate un commento o contattatemi per posta, e li aggiungerò alla lista con i dovuti ringraziamenti).

Tools online per il confronto dei colori

Color Rotate

Un tool di colori che offre funzionalità avanzate. I colori sono selezionabili da un prisma rotabile in 3D e su questo si fonda la sua potenzialità, anche se all’inizio non sembra immediatamente intuibile.
La grafica in 3D è accativante e lo rende diverso da qualsiasi altro tool. E’ senz’altro da provare.
Link: http://www.colorotate.org/

Leggi Tutto >>

Nell’articolo precedente abbiamo visto cos’è l’.htaccess e il suo funzionamento di base.
Adesso ci occuperemo di scendere nei dettagli e di mostrare le direttive più complesse, per gestire ogni situazione possibile.
Al termine dell’articolo sarete in grado di agire tanto sui link con valori statici quanto su quelli con valori dinamici, e di personalizzare eventuali pagine di errore.

L’uso delle regole: ignorare alcune cartelle e gestire i link con i get

Entriamo nel cuore dell’.htaccess. Sotto al codice che abbiamo visto prima, possiamo stabilire delle regole precise. Innanzitutto, dobbiamo specificare quali delle cartelle non saranno coinvolte dalle direttive: questo ci sarà utile, per esempio, per le cartelle contenenti le immagini o i javascript.

Leggi Tutto >>