Template WordPress responsive per il mio blog!

responsive

Come avrete potuto sicuramente notare in questi ultimi giorni, ho finalmente pubblicato la nuova versione del template per il mio blog personale! Siamo arrivati alla versione 4!

Ho deciso di sviluppare un tema WordPress totalmente nuovo, partendo da un foglio bianco ed ispirandomi a “cose” viste qua e là.

La mia esigenza era quella di ottenere, con il minimo sforzo, un template ottimizzato per tutti i dispositivi, da quelli con schermi ad alta risoluzione fino ai “mobile”, sempre più in voga negli ultimi tempi. Ho perciò utilizzato lo standard de facto dei framework CSS: Bootstrap 3! Ed ecco il risultato, un template adatto a desktop, tablet e smartphone!

Mi sono servito di una classe walker scritta ad hoc per utilizzare i menu WordPress con Boostrap, in modo da poter sfruttare la navbar fissata in alto. Per il resto la giusta miscela di codice php e html, qualche file css/js ed ecco qua, il nuovo template!

Il font che ho scelto è l’Open Sans, uno dei più utilizzati ultimamente sul web, e mi viene servito direttamente da Google Fonts.

Spero di essere riuscito nell’intento di fornire una navigazione più piacevole e al tempo stesso più completa. Presto cercherò di rendere disponibile gratuitamente e sotto licenza open source questo tema nel repository di WordPress. Nel frattempo se avete domande/curiosità non esitate a commentare l’articolo o a scrivermi tramite la solita pagina dei contatti.

Invece il prossimo passo che ho in mente per il blog sarà qualche cambiamento “sotto il cofano”, ma non voglio svelarvi niente e mi tengo un po’ di tempo per fare ancora qualche test!

A presto!

Evitare il caching del css di WordPress

wordpress_logo

In questo brevissimo articolo vi dimostrerò come evitare che il browser degli utenti usi una versione non aggiornata del vostro css di WordPress.

Con questa breve funzione andremo ad inserire un parametro in fondo al richiamo del foglio di stile che inserisca il timestamp dell’ultima modifica del file, in modo che la cache continui a funzionare fino a quando non sarete voi a modificare il file.

<link href="<?php echo get_bloginfo('template_url'); ?>/style.css?v=<?php echo filemtime(get_stylesheet_directory().'/style.css'); ?>" rel="stylesheet" media="screen">

Come potete vedere abbiamo applicato il concetto al css principale di wordpress ma si può applicare a qualsiasi file css, js o di immagini. La funzione di php utilizzata è la filemtime.

Aggirare le limitazioni delle API di Google Maps per il calcolo dei percorsi

Google Maps API

Torno a scrivere sul mio blog per trattare un argomento a mio giudizio interessante, anche se un po’ specifico.
Per conto di un cliente mi sto occupando delle API di Google Maps, in particolare l’ultima versione, ossia la V3.
Premetto, per chi non conoscesse l’argomento, che dalla versione 2 c’è stato un grande passo avanti, con ottime nuove funzionalità e tanti metodi che fanno risparmiare un sacco di tempo… D’altronde stiamo parlando di Big G!

Lo script che pubblico in questa pagina serve per rimediare al problema delle limitazioni poste da Google su ogni singola richiesta di calcolo di un percorso. Il cliente in questione deve visualizzare sulla mappa il tragitto tra due punti, passando però per un numero indefinito di punti intermedi.

Per fare questo Google rende disponibili le directions API impostando però il limite di 2500 richieste giornaliere e 8 punti intermedi per richiesta. L’idea è semplice, ottimizzare le richieste includendo al massimo 8 punti intermedi, settando però, dalla seconda richiesta in avanti, il punto di partenza uguale al punto finale della richiesta precedente.

Vediamo il codice javascript:

    var map = null;
    var markers = new Array();
    var coordinates = new Array();
    var directionsDisplay = new Array();
    var directionsService = new google.maps.DirectionsService();
    function placeMarker(lat, lng){
        var markerPos = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({
            position: markerPos,
            map: map,
            draggable: true,
            animation: google.maps.Animation.DROP
        });
        markers.push(marker);
    }

    function removeRoutes(){
        for(var i = 0; i &lt; directionsDisplay.length; i++){
            directionsDisplay[i].setMap(null);
        }
        directionsDisplay = new Array();
    }

    function drawRoute(begin, end, waypts){
        var request = {
            origin: begin,
            destination: end,
            waypoints: waypts,
            optimizeWaypoints: true,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
            if (status === google.maps.DirectionsStatus.OK) {
                var dirDisp = new google.maps.DirectionsRenderer({suppressMarkers: true});
                dirDisp.setMap(map);
                dirDisp.setDirections(response);
                directionsDisplay.push(dirDisp);
            }
        });
    }

    function calculateRoutes(){
        removeRoutes();
        var begin = new google.maps.LatLng(coordinates[0][0], coordinates[0][1]);
        var end = null;
        var waypts = new Array();
        var wCount = 0;
        var REQUEST_WAYPOINTS_LIMIT = 8;
        var i;
        for(i = 1; i &lt; (coordinates.length-1); i++){
            if(wCount === REQUEST_WAYPOINTS_LIMIT){
                i++;
                end = new google.maps.LatLng(coordinates[i][0], coordinates[i][1]);
                drawRoute(begin, end, waypts);
                begin = end;
                wCount = 0;
                waypts = new Array();
            }
            waypts.push({
                location: new google.maps.LatLng(coordinates[i][0], coordinates[i][1]),
                stopover: true
            });
            wCount++;
        }
        if(waypts.length &gt; 0){
            end = new google.maps.LatLng(coordinates[coordinates.length-1][0], coordinates[coordinates.length-1][1]);
            drawRoute(begin, end, waypts);
        }
        for(var i = 0; i &lt; coordinates.length; i++){
            placeMarker(coordinates[i][0], coordinates[i][1]);
        }
    }

Nel codice qui sopra come potete vedere ho un array di coordinate che contiene i vari punti da rappresentare sulla mappa, e il percorso deve essere calcolato partendo dalla prima coordinata presente in array per arrivare all’ultima cella dell’array, passando per tutte le altre.

Ho dato per scontato che la mappa sia già stata inizializzata e che la variabile map contenga l’oggetto google.maps.Map.

Un’ulteriore miglioria già fatta (che tratterò in un futuro articolo) sarà quella di colorare e numerare i marker dinamicamente e di adattare automaticamente lo zoom della mappa ai markers attivi sulla mappa visualizzata.

Visualizzare ed eliminare foreign keys in MySQL

MySQL

Con l’avvento di InnoDB su MySQLci si trova sempre più spesso a dover trattare tabelle con chiavi esterne. A volte per modificare una tabella si rende indispensabile eliminare le chiavi prima di eseguire la modifica, chiavi che però non sono elencate insieme alla struttura della tabella. Per estrarre quindi la lista delle chiavi di una tabella la query da eseguire è quindi la seguente:

select * from KEY_COLUMN_USAGE WHERE TABLE_SCHEMA = '<em>database_name</em>' AND TABLE_NAME = '<em>table_name</em>'

Come si può intuire, al posto di database_name si dovrà inserire il nome del database in cui risiede la tabella, e al posto di table_namesi dovrà scrivere il nome della tabella dalla quale estrarre le chiavi.
Una volta ottenuta la lista di foreign key, per elimare una chiave il codice sql da eseguire è:

ALTER TABLE <em>table_name</em> DROP FOREIGN KEY <em>foreign_key_name</em>

Table_name è come sopra il nome della tabella in cui risiedono le chiavi esterne, mentre foreign_key_name è il nome della chiave ottenuto dalla lista estratta con la query precedente.

Eseguire chiamate AJAX con jQuery e JSON in WordPress

Ajax and WordPress

Succede sempre più di frequente di dover effettuare delle chiamate ajax in WordPress. In questo articolo vedremo come effettuare delle chiamate asincrone senza dover creare nuove pagine WordPress ma sfruttando lo script utilizzato dall’interfaccia del wp-admin.
Nell’esempio in questione, la chiamata AJAX restituirà un file JSON formato davvero utile per rappresentare i dati restituiti da una query. Lato javascript useremo la funzione $.getJSON(…) di jQuery mentre lato server scriveremo il nostro script all’interno del file functions.php presente in qualsiasi tema WordPress.

Per prima cosa dobbiamo creare la corrispondenza tra una nuova action e la nostra funzione php:

add_action('wp_ajax_myaction', 'my_function');

Fatto ciò possiamo scrivere la nostra funzione my_function la quale corrisponderà all’azione myaction (il nome è puramente indicativo, potete chiamare l’azione e la funzione come preferite):

function my_function() {
  global $wpdb;
  $id = $_GET['id'];
  $rows = array();
  $q = "SELECT * FROM my_table WHERE id = ".$id;
  $rows['results'] = $wpdb->get_results($q, ARRAY_A);
  if(count($rows) <= 0){
    return false;
  }
  echo json_encode($rows);
  exit();
}

In questo script trovate tutto l’indispensabile per completare la parte lato server. Come si può intuire la query dovrà utilizzare un parametro passato in GET, poi utilizzando la variabile globale wpdb effettueremo la query sul database. La json_encode trasformerà l’array associativo con i record letti tramite la SELECT in una stringa JSON e la stamperemo a video tramite l’echo. Non dimenticate la exit() finale perchè altrimenti verrà stampato uno “0” che vi metterà in difficoltà nel parsificare il JSON.

Un ultimo particolare di cui tenere conto è che la add_action crea un’azione per l’admin-ajax.php che è un file accessibile solo da utenti loggati, quindi per consentire l’esecuzione dell’azione sia da utenti registrati sia da ospiti sarà necessario aggiungere un’ulteriore linea di codice come questa:

add_action('wp_ajax_nopriv_myaction', 'my_function');

Dopo aver completato lo script PHP possiamo passare al lato client, con il codice javascript per la chiamata della funzione:

$jQ.getJSON('<?php echo get_bloginfo('url'); ?>/wp-admin/admin-ajax.php',{action: 'myaction',id: 'tuo_id'}, function(json){...Codice javascript per parsificare il json...}

Ho omesso l’inclusione di jquery in WordPress, ma potete trovare come fare in un mio precedente articolo che trattava l’argomento nello specifico.

A questo punto non vi resta che sbizzarrirvi con le chiamate ajax nel vostro template oppure dai vostri plugin (in quest’ultimo caso basta spostare il codice PHP in un file del vostro plugin).

Piccoli traguardi… piccole soddisfazioni, 2000 visite mensili!

Report Google Analytics

Cari lettori del blog, oggi ho raggiunto un piccolo ma importante traguardo… I dati di google analytics parlano chiaro, sono state sorpassate le 2000 visite mensili e per questo voglio condividere con voi alcune statistiche di cui vado fiero.

Dal 27 agosto al 26 settembre questo blog ha ricevuto 2004 visite, con 1672 visitatori unici e 2369 visualizzazioni di pagina di cui 2175 uniche. L’80,84% delle visite sono nuove e ovviamente il paese predominante è l’italia con 1910 visite  delle quali 1853 in lingua italiana.

I tre articoli più popolari per il momento sono nell’ordine “Creare un web service con soap e php” con 401 visualizzazioni, “Sincronizzare Google Calendar con iCal su Mac e iPhone” con 395 visualizzazioni e “Calibrare la batteria di un Macbook Pro e non solo…” con 323 visualizzazioni.

Grazie a tutti voi che mi leggete, continuate a farlo! Mi auguro di poter continuare a scrivere articoli (spero) interessanti per accrescere questi numeri!

A presto, Davide.

Eseguire un’applicazione Django su ubuntu server con nginx, gunicorn, upstart e mysql (DUNG stack)

Gunicorn

Oggi torno a scrivere sul blog per raccontare come eseguire il deploy di un’applicazione Django su ubuntu server con Nginx come web server, Gunicorn come application server WSGI e MySQL come DBMS.

Inizialmente per ospitare un’applicazione scritta con il framework Django utilizzavo un classico stack in stile LAMPP (Linux + Apache + mod_wsgi). Successivamente per cercare di limitare l’utilizzo di ram ho scoperto (grazie al blog degli ingegneri di instagram) lo stack DUNG che rappresenta la configurazione con nginx + gunicorn + ubuntu.

Non appena si iniziano le configurazioni si comprendono la semplicità e la velocità di messa a punto del nuovo stack. Nginx usa file di configurazione scritti con una sintassi simile ad un linguaggio di programmazione, molto più semplici da comprendere e da scrivere per chi ha poca dimestichezza con queste cose.

Per prima cosa installiamo nell’ordine mysql e nginx, successivamente installiamo django.

Fatto ciò, tramite easy_install possiamo installare Gunicorn:

sudo easy_install gunicorn

A questo punto dobbiamo configurare nginx come proxy server per le richieste: tutto ciò che riguarda i file statici (immagini, css, js, ecc…) verrà servito direttamente da nginx mentre le richieste inerenti il codice python dovranno essere girate al server WSGI (gunicorn nel nostro caso) che le eseguirà e restituirà la pagina risultante.

Come per apache i file di configurazione dei vari siti sono in /etc/nginx/sites-available (invece di /etc/apache/sites-available), per cui creiamo il file di configurazione per la nostra applicazione django in questo modo:

upstream project {
        server 127.0.0.1:8200 fail_timeout=0;
        server 127.0.0.1:8201 fail_timeout=0;
}

server {
        listen 80;
        server_name mydomain.com www.mydomain.com;
        access_log /var/log/nginx/mydomain_access.log;
        error_log /var/log/nginx/mydomain_error.log;

        root /srv/django_srv/mydomain/app;

        location / {
                proxy_set_header Host $host;
                if (!-f $request_filename){
                        proxy_pass http://project;
                        break;
                }

        }
        location /upload  {
                alias /srv/django_srv/mydomain/uploads;
                }
        location /static  {
                alias /srv/django_srv/mydomain/app/_statics;
        }
        location /admin/media {
                alias /opt/Django-1.3.1/django/contrib/admin/media;
        }
}

Come potete vedere nel blocco di configurazione upstream project a questo punto dobbiamo configurare gunicorn in modo da farlo rispondere sulla porta 8200 e 8201. In questo modo quando caricheremo aggiornamenti del nostro progetto e dovremmo riavviare gunicorn, il sito non sarà mai irraggiungibile, inoltre se il processo gunicorn dovesse crollare per qualche motivo ce ne sarà sempre un altro disponibile. Gli alias che vedete sono per i file uploadati dagli utenti tramite l’applicazione, i file statici del sito e i file statici per il backend amministrativo (per questi ultimi dovete dare il path alla cartella di installazione di Django). Dopo aver salvato questo file create un link simbolico nella cartella effettiva dei siti di nginx:

ln -s /etc/nginx/sites-available/mydomain.com /etc/nginx/sites-enabled/mydomain.com

Per avviare gunicorn, essendo su ubuntu, utilizziamo upstart il nuovo sistema per avviare tasks e servizi all’avvio del sistema. Creiamo il file /etc/init/gunicorn_8200.conf e copiamo le seguenti istruzioni:

description "Gunicorn Django on 127.0.0.1:8200"
start on runlevel [2345]
stop on runlevel [06]
respawn
respawn limit 10 5
exec /usr/local/bin/gunicorn_django --bind=127.0.0.1:8200 --workers=2 --access-logfile=/var/log/gunicorn/8200_access.log --error-logfile=/var/log/gunicorn/8200_error.log --daemon /srv/django_srv/mydomain/app/settings.py

Con queste istruzioni diciamo al processo gunicorn di ripartire in caso di crash (respawn) di rispondere all’indirizzo 127.0.0.1 sulla porta 8200 (–bind) di partire come demone (–daemon) e gli diamo i percorsi dei file di log e del file di settings della nostra applicazione.

A questo punto riavviamo il server per verificare che anche upstart funzioni:

shutdown -r now

Il gioco è fatto e la nostra applicazione è pronta per essere utilizzata. I file del progetto django (in base a questa configurazione) devono risiedere in /srv/django_srv/mydomain/app, mentre i file di upload sono in /srv/django_srv/mydomain/uploads per fare in modo che non siano all’interno dell’applicazione e che siano facilmente backuppabili ;)

Spero di essere stato esaustivo, di sicuro con questa configurazione vi potrete accorgere del notevole risparmio di ram rispetto ad un classico stack che utilizza apache come webserver.

Server virtualizzato con VirtualBox 4.0 su Ubuntu Server 10.04 LTS

Oracle Virtualbox

Oggi inauguro la nuova grafica del blog con un articolo molto interessante. Questo tutorial vi aiuterà a virtualizzare dei server con VirtualBox da linea di comando.
Ho installato virtualbox 4.0 su una macchina ubuntu server 10.04, ma repository a parte penso che vada bene su qualsiasi versione di ubuntu e più in generale su qualsiasi debian.

Per chi lavora come me su ubuntu server 10.04 per prima cosa bisogna aggiungere il repository di virtualbox nei sorgenti apt. Aprite il file source.list:

sudo vim /etc/apt/sources.list

E aggiungete in fondo la linea:

deb http://download.virtualbox.org/virtualbox/debian lucid contrib

Salvate e chiudete e scaricate la chiave pubblica:

wget -q http://download.virtualbox.org/virtualbox/debian/oracle_vbox.asc -O- | sudo apt-key add -

A questo punto aggiornate:

sudo apt-get update

..e installate il software necessario:

sudo apt-get install linux-headers-$(uname -r) build-essential virtualbox-4.0 dkms

Il pacchetto dkms serve per far sì che ogni volta che il kernel verrà aggiornato verrà aggiornato automaticamente anche virtualbox.

A questo punto scaricate l’extension pack di virtualbox

cd /tmp
wget http://download.virtualbox.org/virtualbox/4.0.16/Oracle_VM_VirtualBox_Extension_Pack-4.0.16-75491.vbox-extpack
sudo VBoxManage extpack install Oracle_VM_VirtualBox_Extension_Pack-4.0.16-75491.vbox-extpack

Ora dovrete aggiungere il vostro utente al gruppo utenti di virtualbox:

sudo adduser your_user vboxusers

Ora la configurazione di virtualbox è terminata, possiamo procedere con la creazione di una nuova virtual machine.

VBoxManage createvm --name "ubu_srv_1" --register
VBoxManage modifyvm "ubu_srv_1" --memory 512 --acpi on --boot1 dvd --nic1 bridged --bridgeadapter1 eth0
VBoxManage createhd --filename /home/your_user/vbox/ubu_srv_1/ubu_srv_1.vdi --size 10000
VBoxManage storagectl "ubu_srv_1" --name "IDE Controller" --add ide
VBoxManage storageattach "ubu_srv_1" --storagectl "IDE Controller" --port 0 --device 0 --type hdd --medium /home/your_user/vbox/ubu_srv_1/ubu_srv_1.vdi
VBoxManage storageattach "ubu_srv_1" --storagectl "IDE Controller" --port 1 --device 0 --type dvddrive --medium /home/your_user/downloads/ubuntu-10.04.4-server-amd64.iso

Con queste istruzioni la nuova macchina virtuale è pronta.

Ora per il primo lancio vi consiglio di usare VBoxHeadless che oltre a lanciare la vm appena creata metterà in piedi un server VRDP, in modo che possiate accedere alla macchina con un client di desktop remoto. Per cui, settiamo la porta del vrdp:

VBoxManage modifyvm "ubu_srv_1" --vrde-port 9800

..e lanciamo la macchina virtuale (abbiate cura di mettere la “&” al fondo del comando in modo da poter continuare sulla stessa shell senza chiudere bruscamente il processo della virtual machine):

VBoxHeadless --startvm "ubu_srv_1" &

Quindi aprite il vostro client di desktop remoto preferito e collegatevi all’ip della vostra macchina su cui avete installato virtualbox aggiungendo “:9800″. Il mio indirizzo a cui rispondeva il server rdp era ad esempio 192.168.0.200:9800.
Potete quindi installare normalmente ubuntu server come se foste su una macchina fisica. Finita l’installazione riavviando la macchina partirà il sistema in automatico. Collegatevi e come prima cosa controllate l’ip (meglio assegnarne uno fisso). Prima di poter dire di avere la vm pronta dobbiamo fare in modo che al prossimo lancio non parta più l’immagine di installazione, per cui spegnete la macchina e ritornate sulla shell del server virtualbox:

VBoxManage modifyvm "ubu_srv_1" --boot1 disk

Adesso siete davvero pronti per lanciare la vostra nuova virtual machine. I passi successivi servono per ottimizzare l’utilizzo di ram del vostro server.

Riavviate la macchina fisica che ospita la/le macchina/e virtuale/i e ricollegatevi. Da shell modificate ancora la vm con il seguente comando per non lanciare il server vrdp quando avviate la vm, così da occupare la sola ram indicata per la vostra vm:

VBoxManage modifyvm "ubu_srv_1" --vrde off

Ora potete nuovamente lanciare la vostra macchina virtuale con il comando:

VBoxManage startvm "ubu_srv_1" --type headless &

Per tutti i comandi di VBoxManage fate riferimento all’help:

VBoxManage --help

Per spegnere o mettere in pausa la macchina i comandi sono:

VBoxManage controlvm "ubu_srv_1" poweroff
VBoxManage controlvm "ubu_srv_1" pause

Buon divertimento!

iPad 3 o iPad HD ?

I dubbi sono tanti.. Ad iniziare dal nome (o i nomi), le indiscrezione parlano di un iPad HD, ma siamo sicuri che si tratti davvero della nuova versione del gioiello di casa Apple e non di un?

Le indiscrezioni riguardano:

  • Retina display: stessa dimensione dello schermo ma doppia densità di pixel così da permettere una risoluzione dello schermo raddoppiata rispetto alle vecchie versioni.
  • Batteria con autonomia maggiore: probabilmente questo porterà un leggero incremento di spessore
  • Processore quad core: anche per questo serve una batteria più performante, ma sicuramente incrementerà le prestazioni
  • Assenza del pulsante home: un recente brevetto Apple parla di una nuova tecnologia per utilizzare nuove gestures che sarebbero in grado di sostituire le funzioni dell’ormai immancabile pulsante rotondo presente su tutti i device mobili di Apple
  • Fotocamera migliorata: l’attuale fotocamera non consente di scattare foto di buona qualità, probabilmente verrà inserita una fotocamera molto simile a quella di iPhone 4S

Per sapere quali di questi punti sono azzeccati, bisognerà aspettare le 19 di domani, quando Tim Cook salirà sul palco dello Yerba Buena Center di San Francisco.

Ci sarà anche il One More Thing?

Voi cosa ne pensate?

 

Se domani sera volete seguire tutte le novità in diretta, potrete farlo a questo indirizzo sul blog del mio amico Matteo Bovetti!