Inserire pulsanti “sociali” nel proprio sito

 03/10/2010

Facebook Like e Google Buzz
Per celebrare le (quasi) 1000 visite mensili del blog e ringraziarvi ho deciso di implementare una nuova funzionalità.

Da oggi potete condividere gli articoli del blog che vi piacciono su facebook o buzz, cliccando sulle icone nel riquadro grigio al fondo dei post.

Per quanto riguarda facebook, l’inserimento del plugin prevede l’utilizzo delle Facebook javascript SDK. Per prima cosa si deve registrare il proprio sito come applicazione, in modo da ottenere un “application id”. Una volta fatto ciò potete aggiungere in fondo alla vostra pagina il codice javascript per caricare le sdk:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Ora potete aggiungere il tag FBML che caricherà il pulsante “mi piace”:

<fb:like href="URL da segnalare" layout="button_count"></fb:like>

Potete personalizzare il tipo di pulsante tramite il tag “layout”:

  • “standard” per avere il pulsante con la frase a fianco
  • “button_count” per avere il pulsante con il contatore dei “like”
  • “box_count” per avere il pulsante e il contatore su due righe diverse

e tramite il tag “colorscheme”:

  • “light” per lo schema di colori default
  • “dark” per lo schema di colori grigio scuro

Nel tag href dovete inserire l’url che volete sia segnalata quando qualcuno clicca sul pulsante.

Per quanto riguarda Google buzz invece, non è necessario registrare nessuna applicazione, si dovrà solamente includere il codice javascript per le Google Buzz SDK in fondo alla pagina:

<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>

e il codice del pulsante per condividere il link

<a href="http://www.google.com/buzz/post"
  class="google-buzz-button" title="Google Buzz"
  data-message="Here’s Buzz!"
  data-url="http://www.google.com/buzz"
  data-locale="it"
  data-button-style="normal-count"></a>

È anche possibile personalizzare il pulsante modificando il tag “data-url” inserendo l’url alla pagina che si vuole segnalare, e il tag “data-button-style” con le seguenti voci:

  • normal-count
  • small-count
  • normal-button
  • small-button
  • link

Sincronizzare Google Calendar con iCal su Mac e iPhone

 26/08/2010

iCal e Google Calendar

Bentornati a tutti dalle vacanze, oggi ritorno con un articolo dedicato ai macachi come me.

Avete bisogno di tener traccia dei vostri appuntamenti, eventi, ricorrenze? Be’ esistono i calendari elettronici, oppure le agendine elettroniche, oppure le agende cartacee…. oppure Google Calendar

Ieri sera, parlavo con Denny (che devo ringraziare per l’input di questa mattina, SENZA di lui non sarei riuscito a scoprire questa sciccheria… :-P ) e mi ha detto che usava un’estensione di thunderbird per tenere traccia di tutti gli appuntamenti, eventi ecc… Siccome anche io, a lavoro, uso la stessa estensione per thunderbird, gli ho spiegato secondo me cosa non funzionava di quel sistema e cioè che gli eventi creati rimanevano sul pc e non c’era nessun metodo per ricevere avvisi via mail o meglio ancora sms. Avevo infatti provato Google Calendar e notato che aveva la splendida funzionalità di impostare gli avvisi via sms.

Stamattina perciò dopo esserci ritrovati su gtalk abbiamo cercato qualche sistema per sincronizzare i calendari software con il servizio di google, scoprendo che quasi tutti i calendari supportando lo standard calDav.

Vi spiego ora come sincronizzare iCal, il software per il calendario su mac, con Google Calendar:

  • nella barra dei menu, selezionare iCal->Preferenze
  • selezionare il tab “Account” e poi premere “+” per aggiungere un nuovo account.
  • come “Tipo account” dovreste già avere “Google”, se non ci fosse selezionate la voce “calDav”
  • a questo punto vi basterà inserire l’indirizzo del server google (google.com), la vostra mail completa che usate per accedere ai servizi di google e la relativa password

Ora quando creerete un nuovo evento su iCal, questo verrà automaticamente sincronizzato on-line.

La stessa cosa può essere fatta su iPhone:

  • per prima cosa collegatevi all’indirizzo https://www.google.com/calendar/iphoneselect e confermate di voler usare il calendario di google dal vostro iPhone.
  • ora andate nelle impostazioni e selezionate la voce “Mail, contatti, calendari”
  • selezionate la voce “aggiungi account” e scegliete “altro”
  • qui troverete la voce “aggiungi account calDav”
  • inserite di nuovo le informazioni relative al vostro login e al server google (google.com)

Ora avrete iCal sul vostro mac e sul vostro iPhone che salverà le informazioni su google Calendar e in qualsiasi momento potrete accedere ai vostri appuntamenti, eventi e ricorrenze

Ancora grazie a Denny per il supporto, nonostante sia dichiaratamente anti-apple :-P

Installare un server VPN con OpenVPN su Ubuntu Server

 02/08/2010

Qualche giorno fa, a lavoro ho configurato il mio primo server vpn. Avevamo la necessità di accedere alla rete dell’ufficio anche dall’esterno. Insomma ci avrebbe fatto comodo essere “virtualmente” in ufficio quando fisicamente non è possibile. Avevo ricevuto consigli in merito a queste necessità, e mi era stato detto che come OpenVPN non ce n’erano molti. Ovviamente Open VPN è un software gratuito e multipiattaforma, aveva quindi tutti i prerequisiti necessari per piacermi.

Diciamo che prima di intraprendere il lavoro ho perso qualche minuto a cercare la documentazione necessaria, che mi avrebbe accompagnato durante il cammino.

Inizialmente avevo preso un pc davvero modesto (con processore AMD Duron, qualcosa di simile al Sempron ma un po’ più vecchio ;-) ) con 40 ghiga di disco e 512 Mb di ram SO DIMM, credendo di usarlo come test per la macchina vera. Ovviamente ho installato Ubuntu server come sistema operativo, scaricando l’ultima versione (10.04) siccome è un LTS. Nell’installazione del S.O. non c’è stato alcun inghippo, oramai queste ultime versioni sono una pacchia, filano dritte dritte in pochi minuti verso il traguardo ;-).

Una volta installato Ubuntu ho seguito il wiki in inglese per la corretta installazione di open vpn. Come prima passo, la guida consiglia di configurare un bridge sulla scheda ethernet per consentire al segmento LAN di essere connesso al segmento WAN, consentendo (se si vuole) di filtrare i pacchetti che li attraversano con un firewall. Per fare ciò basta installare un pacchetto chiamato bridge-utils con il comando:

sudo apt-get install bridge-utils

Fatto ciò si deve editare il file di configurazione della rete con il comando:

sudo vim /etc/network/interfaces

modificarlo come segue:

auto lo
iface lo inet loopback

auto br0
iface br0 inet static
        address 192.168.0.10
        network 192.168.0.0
        netmask 255.255.255.0
        broadcast 192.168.0.255
        gateway 192.168.0.1
        bridge_ports eth0
        bridge_fd 9
        bridge_hello 2
        bridge_maxage 12
        bridge_stp off

Così facendo si assegna il bridge all’interfaccia eth0 con l’ip 192.168.0.10.

Adesso potete riavviare il servizio networking:

sudo /etc/init.d/networking restart

(per evitare di dover digitare sempre il comando sudo davanti ad ogni comando vi consiglio di digitare sudo su una volta per tutte)

Ora possiamo passare all’installazione vera e propria di OpenVPN:

apt-get install openvpn

Finita l’installazione del pacchetto creiamo una cartella che conterrà i programmi per generare le chiavi e le chiavi stesse:

cp -r /usr/share/doc/openvpn/examples/easy-rsa/2.0 /etc/openvpn/
mv /etc/openvpn/2.0 /etc/openvpn/easy-rsa

Dopodichè editiamo il file vars in modo da modificare le seguenti linee con le informazioni che ci riguardano:

export KEY_COUNTRY="US"
export KEY_PROVINCE="NC"
export KEY_CITY="Winston-Salem"
export KEY_ORG="Example Company"
export KEY_EMAIL="steve@example.com"

Salvate il file e chiudetelo. Accertandovi di essere loggati come utente di root, iniziate la procedura di generazione delle chiavi:

cd /etc/openvpn/easy-rsa/
source ./vars
./clean-all
./build-dh
./pkitool --initca
./pkitool --server server
cd keys
openvpn --genkey --secret ta.key
cp server.crt server.key ca.crt dh1024.pem ta.key /etc/openvpn/

Ora che abbiamo generato le chiavi e i certificati per il server procediamo a generare quelli per il client (basterà ripetere la prossima procedura modificando l’identificativo del client per generare altre chiavi/certificati):

cd /etc/openvpn/easy-rsa/
source vars
./pkitool client1

Copiate ora sul client i file:

  • /etc/openvpn/ca.crt
  • /etc/openvpn/easy-rsa/keys/client1.crt
  • /etc/openvpn/easy-rsa/keys/client1.key
  • /etc/openvpn/ta.key

Ora non ci resta che editare i file di configurazione per server e client (partiamo da una configurazione di esempio):

cp /usr/share/doc/openvpn/examples/sample-config-files/server.conf.gz /etc/openvpn/
gzip -d /etc/openvpn/server.conf.gz
vim /etc/openvpn/server.conf

Accertatevi di correggere le seguenti linee con i vostri dati:

local 192.168.0.10
dev tap0
script-security 3
up "/etc/openvpn/up.sh br0"
down "/etc/openvpn/down.sh br0"
proto tcp
;server 10.8.0.0 255.255.255.0
server-bridge 192.168.0.10 255.255.255.0 192.168.0.100 192.168.0.110
push "route 192.168.0.1 255.255.255.0"
tls-auth ta.key 0 # This file is secret
user nobody
group nogroup
cipher AES-256-CBC

La voce local sarà quella corrispondente all’indirizzo del vostro bridge, come la prima voce accanto a server-bridge. La seconda voce di server-bridge sarà la subnet mask mentre la terza e la quarta sarà il range di ip che openvpn assegnerà ai client che si connetteranno alla rete.
Il comando push “route… servirà per creare una rotta sugli indirizzi della LAN.
Fatto ciò, creiamo i due script per l’avvio e la chiusura dell’interfaccia virtuale (la tap0 che vedete nel file di configurazione). Creiamo il file up.sh come segue:

vim /etc/openvpn/up.sh
#!/bin/sh
BR=$1
DEV=$2
MTU=$3
/sbin/ifconfig $DEV mtu $MTU promisc up
/usr/sbin/brctl addif $BR $DEV

e il file down.sh così:

vim /etc/openvpn/down.sh
#!/bin/sh
BR=$1
DEV=$2
/usr/sbin/brctl delif $BR $DEV
/sbin/ifconfig $DEV down

Rendiamoli eseguibili:

chmod 755 /etc/openvpn/down.sh
chmod 755 /etc/openvpn/up.sh

Ora che il server è correttamente configurato, possiamo dare una riavviata al servizion openvpn:

/etc/init.d/openvpn/restart

Adesso passiamo al file di configurazione del client:

sudo cp /usr/share/doc/openvpn/examples/sample-config-files/client.conf /etc/openvpn

Il quale dovrà contenere:

dev tap
proto tcp
remote 192.168.0.10 1194
cert client1.crt
key client1.key
tls-auth ta.key 1
cipher AES-256-CBC

Ora copiate nella cartella di configurazione del client il file appena editato (chiamatelo client1.conf o client1.ovpn). Ovviamente si presuppone che i file delle chiavi e dei certificati siano nella stessa cartella di quest’ultimo file (sul client). Riavviate anche qui openvpn e il gioco è quasi fatto. Dico quasi perchè per potervi connettere al server dall’esterno dovrete dire al vostro router di aprirvi la porta 1194 e reindirizzare il traffico proveniente dall’esterno verso l’ip 192.168.0.10 (quello del bridge).

Ora siete davvero pronti per collegarvi dall’esterno alla vostra LAN (così com’è stato configurato openvpn non è possibile accedere da dentro la LAN alla vpn appena creata).

Spero di non aver dimenticato niente! ;-)

Che ve ne pare?

Riempire dinamicamente una jTable in Java

 10/07/2010

Ultimamente sto utilizzando intensamente Java per lavoro. Sto realizzando un gestionale abbastanza corposo, dove ho potuto sperimentare diverse cose interessanti.

Nel disegnare le interfacce, uno degli oggetti che sto trovando sempre più utile, è la jTable, nient’altro che una semplice tabella (la vecchia DataGrid di visual basic). Inizialmente avevo trovato un po’ ostico capire come funzionasse, nonostante ci fossero parecchi esempi che danno molti consigli su come usarle. Una delle pagine di esempi più complete è questa sul sito oracle.

Voglio però spendere qualche riga per spiegare come poter facilmente caricare una jTable leggendo i dati da un resultset o da un elenco qualsiasi.

Penso che il concetto più semplice per utilizzare al meglio le jTable sia implementare una List<T> (dove T può essere un array di Object o di String o una vostra classe personale, fate voi) con una ArrayList o una LinkedList. Questa lista terrà aggiornata la jTable.

Personalmente creo sempre un metodo che chiamo “refreshTable” che legge i dati dalla lista e li inserisce nella tabella. Il metodo non farà altro che usare un iteratore per scorrere la lista e creare una matrice di Object da passare alla nostra jTable per riempirla.

        //Creo array di intestazioni
        String [] headers=this.getTableHeaders();
        //Creo matrice di dati
        Object[][] data=new Object[this.lista.size()][headers.length];
        int i=0;
        for(Iterator<String[]> it=lista.iterator();it.hasNext();){
            String[] tmp=it.next();
            for(int j=0;j<tmp.length;j++){
                data[i][j]=tmp[j];
            }
            i++;
        }
        //Setto dati e intestazioni della tabella
        this.myJTable.setModel(new javax.swing.table.DefaultTableModel(data, headers){@Override public boolean isCellEditable(int rowIndex, int mColIndex) { return false; }});
        //Setto larghezza colonne
        this.setTableCellsSize(this.myJTable);
        //Imposto allinamento delle celle al centro
        DefaultTableCellRenderer renderer=new DefaultTableCellRenderer();
        renderer.setHorizontalAlignment(DefaultTableCellRenderer.CENTER);
        this.myJTable.setDefaultRenderer(this.myJTable.getColumnClass(0), renderer);
        this.myJTable.updateUI();

Così facendo abbia riempito la nostra jTable. Il metodo che fa ciò è il setModel(), al quale io passo sempre una matrice di Object che contiene i dati veri e propri e un array di String che contiene le intestazioni della tabella (che leggo dal mio metodo this.getTableHeaders() ). Oltre a questo ho creato un metodo (this.setTableCellsSize() ) che imposta la larghezza delle varie colonne della tabella:

        int prefWidth=(this.getWidth()/2)/(this.getHeadersTable()).length;
        tbl.setAutoResizeMode(jTable.AUTO_RESIZE_OFF);

        tbl.getColumnModel().getColumn(0).setPreferredWidth(prefWidth+20);
        tbl.getColumnModel().getColumn(1).setPreferredWidth(prefWidth+100);
        tbl.getColumnModel().getColumn(2).setPreferredWidth(prefWidth+20);
        tbl.getColumnModel().getColumn(3).setPreferredWidth(prefWidth-30);
        tbl.getColumnModel().getColumn(4).setPreferredWidth(prefWidth+20);
        tbl.getColumnModel().getColumn(5).setPreferredWidth(prefWidth+20);
        tbl.getColumnModel().getColumn(6).setPreferredWidth(prefWidth-20);
        tbl.getColumnModel().getColumn(7).setPreferredWidth(prefWidth+20);

Nelle ultime righe ho invece dichiarato un Renderer per settare l’allineamento al centro delle celle della jTable.

Prestate attenzione alla linea dove viene eseguita la setModel(): qui ho riscritto il metodo isCellEditable, in modo che restituisca sempre false. Così facendo qualsiasi cella della nostra jTable non potrà essere editata.

Se vi servissero esempi più dettagliati (ad esempio per inserire delle checkbox in una delle colonne o per aprire menu al pressione del tasto destro del mouse sulla tabella) fate un fischio! ;-)

Servire dinamicamente le immagini con php, Mysql e Imagick

 10/04/2010

Nessuno se ne sarà accorto ed effettivamente è un po’ impossibile notarlo se uno non lo sa ;-)

Ormai da una settimana però ho messo in funzione uno strumento “self-made” per la gestione delle immagini del mio blog.

Spulciando un po’ più attentamente google webmaster tools tra le funzioni sperimentali ho trovato un prestazioni del sito…

In questa sezione google presenta un’analisi delle prestazioni del proprio sito (in termini di tempo e kilobyte di dati) e fornisce consigli su come ridurre i tempi di caricamento.

Siccome il mio hosting mi limita lo spazio web, utilizzavo un piccolo escamotage per caricare le foto del blog: le caricavo su picasa e sfruttavo i server di google per fornirle. Webmaster tools mi consigliava però di ridurre al minimo le ricerche DNS e infatti molto spesso le foto venivano reperite da diversi server di picasa. Tutto ciò contribuiva ad incrementare il tempo di caricamento del sito per cui ho preso la decisione di darmi da fare :-P

Come detto, il mio hosting mi limita lo spazio web, ma non ho limiti per quanto riguarda il db MySQL, per cui ho deciso di realizzare una mini-applicazione in php per salvare le immagini su database e servirle dinamicamente. Tutto questo con due funzioni che sfruttano la classe Imagick (installata sul server dove risiede il mio dominio).

Il concetto si basa in sostanza su tre pagine.

La prima sarà un form per far scegliere all’utente l’immagine da uploadare:

<form action="....." method="POST" enctype="multipart/form-data">.....</form>

La seconda, una pagina che riceve il parametro con l’immagine e la salva nel database:

il file è contenuto nell’array

$_FILES['image']['tmp_name']

dove image è il nome del parametro ricevuto via POST.

Qui ci servirà la prima funzione che sfrutterà la classe Imagick:

        public static function prepare_image($file){
		$img=new Imagick();
		$handler=fopen($file,'r');
		$ret=null;
		if(!feof($handler)){
			$fstr=fread($handler,filesize($file));
			$img->readImageBlob($fstr);
			/*Richiamo il metodo resize*/
			$img->setFormat('jpg');
			$img->setImageCompression(Imagick::COMPRESSION_JPEG);
			$img->setImageCompressionQuality(100);
			$ret=addslashes($img->getImageBlob());
			$img->destroy();
		}
		fclose($handler);
		return $ret;
	}

Dove la variabile $file sarà il contenuto dell’array di cui parlavamo prima. A questo punto potremo salvare il valore restituito dalla funzione nel database (il campo dovrà essere di tipo blob o meglio ancora longblob).

Fatto ciò possiamo passare alla terza pagina, quella che servirà l’immagine letta dal db.

Quest’ultima dovrà ricevere come parametro l’id dell’immagine da leggere sul db. La query la lascio fare a voi, io vi spiego la seconda funzione che ci servirà ;-) (molto più “leggera” della prima):

        public static function get_image_from_blob($blob){
		 $img=new Imagick();
		 $img->readImageBlob($blob);
		 $img->setFormat('jpg');
		 return $img;
	}

In questo caso il parametro $blob sarà il valore blob letto dal db, e la funzione ci restituirà l’immagine. A questo punto non vi resta che stampare l’immagine:

header('Content-Type: image/jpeg);
echo $img;

Abbastanza semplice no?
E dopo la prima settimana di utilizzo lascio a voi valutare i risultati ;-) :

Ovviamente tramite Imagick potete anche fare il resize dinamico delle immagini, ma non vorrei confondervi troppo le idee :-P

← Articoli successivi