Inserire pulsanti “sociali” nel proprio sito

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

Apertura Apple Store Le Gru, Torino – Foto e Video

Come detto ieri, questa mattina Bove ed io ci siamo alzati all’alba e ci siamo recati al centro commerciale Le Gru di Grugliasco, a pochi km dal centro di Torino per l’apertura del terzo Apple Store italiano. Eccovi il video della giornata(disponibile anche in HD ;-) ) e le foto (per le quali ringrazio l’iFotografo nonchè mio compagno di avventura iBove http://www.matteobovetti.com).

Come potete notare al nostro arrivo, c’erano già i mac genius che distribuivano caffè e brioches per tutte le persone in coda.

Alle 7,45 avevamo già una cinquantina di persone davanti a noi…

Qualche minuto prima dell’apertura i dipendenti del negozio, sono usciti per fare il “giro d’onore” lungo la coda. Cantando cori da stadio e urlando schiacciavano “un cinque” alle persone in fila…

Alle 10,00 in punto, le porte si sono aperte e i genius hanno accolto i primi della fila facendo la ola e distribuendo ad ognuno la maglietta celebrativa dell’evento (nera con la mela bianca e “Le Gru” scritto a fianco)

Apple Store Le Gru – prime immagini

Oggi, uscito dall’ufficio di Beinasco dove ero a lavorare, mi son detto:”Sono a 3km da Le Gru perchè non fare un salto a vedere com’è l’Apple Store Le Gru in anteprima?”.

E così che in meno di 10 minuti mi son ritrovato nel parcheggio del centro commerciale. Dopo un attimo di “smarrimento” ho trovato la retta via e ho notato un gruppetto di persone che scattavano foto in lontananza… Camminando in quella direzione mi son trovato di fronte a ciò che cercavo.

Come tutti gli Apple Store visti in foto, anche quello torinese è identico agli altri. Ampie vetrate con la mela bianca e luminosa piazzata in alto sulla vetrata centrale. Sulla destra due iPhone 4 giganti con al posto dello schermo due monitor che proiettano delle demo di iOs 4. Lo store è davvero molto grande (me lo aspettavo più piccolo e non ho visto gli altri dal vivo), ci sono diverse file degli ormai noti banconi in legno chiaro, con sopra tutti i vari dispositivi made in Cupertino.

Sono arrivato lì intorno alle 18,00 e il negozio era davvero molto affollato al suo interno nonostante l’apertura sia domani. Se gli occhi non mi hanno ingannato ho contato almeno una trentina di dipendenti (in rigorosa t-shirt blu) e credo che tutti i visitatori fossero addetti della carta stampata e da quanto ho visto venivano fatti entrare da un’entrata posteriore.

Per ora vi lascio alle prime immagini che ho scattato davanti allo store, per tutto il resto dovrete attendere domani, quando sarò di ritorno dalla gita torinese insieme al mio iSocio Bove sperando di essere riusciti ad accaparrarci la tanto agognata maglietta! :)

Ci siamo! Apple Store a Torino!!

Apple Store Torino Le GruRagazzi ci siamo, sabato prossimo (18 settembre 2010) aprirà il terzo Apple Store italiano presso il centro commerciale Le Gru a Torino. Io sto facendo un pensierino di una gita, chi si aggrega? Ci andrei più che altro per avere la maglietta dell’evento e partecipare alla iFesta ;-). Chi si vuole aggregare commenti il post, dicendomi quanti siete e da dove partite, così cerchiamo di organizzare le macchine. Fatemi sapere.

Ps: Se non ci credete, credeteci seguendo il link http://www.apple.com/it/retail/legru/

Sincronizzare Google Calendar con iCal su Mac e iPhone

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

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

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! ;-)

Nuovo tema per il blog!

Come (spero) vi siate accorti, sono riuscito finalmente ad ultimare il nuovo tema per il mio blog.

Mi sono sempre promesso che prima o dopo avrei lavorato alla realizzazione di un mio tema, visto che fino ad oggi avevo sempre utilizzato temi scaricati dalla sezione apposita di wordpress e oggi ho finalmente un tema tutto mio.

Ho cercato di renderlo più leggero del precedente, riducendo al minimo il codice javascript, alleggerendo il css ed ispirandomi a design minimalisti, senza troppi fronzoli per rendere il tema intuitivo e cercando di ricordare qualche regola di HCI.

Spero vi piaccia, ma aspetto critiche e suggerimenti e ovviamente se trovate dei bugs, segnalatemeli, thanks!

iOs 4 e iPhone 3G: prime impressioni e commenti (meditati)

iOs4

Come (quasi) tutti voi bene sapete, sono un felice possessore di iPhone 3G da ormai più di 1 anno e mezzo.

Durante i primi 6 mesi di utilizzo (pre iOs 3) mancavano ancora diverse funzionalità che potevano rendere iPhone un telefono serio e non un giocattolo iper-tecnologico. Con l’arrivo dell’estate e l’introduzione di iOs 3 vennero apportate numerose aggiunte che resero iPhone un cellulare a tutti gli effetti, più tutto il resto (mentre prima era solo tutto il resto). E proprio quel “tutto il resto” permette di dire a chiunque che iPhone ha cambiato il mondo dei cellulari (non dite di no, perchè sapete di avere torto :-P ).

Quest’estate è stato nuovamente aggiornato il software di iPhone (insieme all’introduzione di iPhone 4) e dal 21 giugno scorso è disponibile per tutti i possessori di iPhone (dal 3G in avanti) iOs 4

Be’ di primo impatto si può pensare: figo, un telefono di 2 anni fa, che viene ancora aggiornato (gratuitamente, non dimentichiamocelo). Bisogna dire che ovviamente il mio FerrePhone non possiede tutte le nuove funzionalità, pari pari ad iPhone 4, però alcune migliorie ci sono state. Tralasciando il dock 3d (di cui non me ne potrebbe fregare di meno) e gli effetti grafici allo sblocco del telefono, la funzione che trovo più utile è la cosidetta “folder” ovvero la suddivisione in cartelle delle applicazioni. Trascinando l’icona di una app sopra un’altra, queste due vengono inserite in una cartella, che prende il nome automaticamente a seconda delle affinità che ci sono tra le due app (ma che si può tranquillamente modificare).

Dopo alcuni minuti di utilizzo però, mi sono accorto che iOs4 sul mio iPhone sembrava avere qualche difficoltà. Testandolo per qualche giorno mi sono accorto che effettivamente iOs4 ha bisogno (probabilmente) di hardware più prestante, si nota infatti in alcuni momenti un rallentamento nell’apertura delle app (anche quelle di default) o effetti grafici non perfettamente fluidi. A questo punto voi mi direte: “ma che cacchio pretendi da un telefono di 2 anni fa’?”. Ok avete ragione, non posso pretendere nulla, Apple ha probabilmente deciso di rilasciare iOs4 anche per iPhone 3G nonostante probabilmente si fosse accorta che non sarebbe stato così prestante, ma per evitare critiche che sarebbero piovute a raffica, se così non avessero fatto. Ovviamente queste difetti sono “minimi” e non pregiudicano l’utilizzo normale di tutti i giorni, ma ad un occhio critico risaltano abbastanza nell’immediato. Che dire? Speriamo che a breve Apple noti questo problema e rilasci qualche aggiornamento, anche se non credo si possa fare molto (se non passare ad iPhone 4 ;) )

Javatar!

Ho trovato oggi su facebook questo fantastico trailer, e non vedo l’ora di andarlo a vedere al cinema! Chi viene? :-P