Per quelli che conoscono l'emulatore sicuramente non vorranno etichettare il sistema AVD come il più prestante, sia per i tempi di attesa nell'avvio davvero titanici e sia perché una volta partito comunque il sistema risulta lento e davvero ingestibile. Per venire incontro a questi problemi che rendono questo ottimo strumento un "peso" è possibile agire con dei semplici consigli che possono migliorare di molto il risultato ottenuto.
Per quanto mi riguarda ho provato un paio di soluzioni su internet che elenco brevemente:

• Utilizzo di PC con 16GB di RAM
• Utilizzo di SSD per migliorare il caricamento della VM
• Utilizzo della modalità Snapshot
• Utilizzo della modalità GPU accelerata (che però è esclusiva rispetto allo Snapshot)
• Utilizzo di CPU di tipo x86 (quindi Atom)
• Utilizzo di VirtualBox

Ma dopo diversi tentativi (a parte i primi due che volevo evitare) alla fine ho ottenuto quello che per me è una soluzione molto buona nel seguente modo:

• Utilizzo di un RAM drive (o RAM disk che dir si voglia)

Per chi non avesse dimestichezza con questi applicativi di fatto - facendola molto breve - riservano una parte della RAM e la rendono disponibile come una partizione accessibile proprio come una chiavetta o un piccolo hdd ma con la caratteristica di essere performante in tutto e per tutto come la RAM quindi velocità molto alte (per maggiori informazioni vi rimando alla ormai ottima RAMDisk | wikipedia).

Questa modalità è usata anche da alcuni gamers o da chi utilizza applicativi davvero pesanti e che soprattutto facciano largo uso del nostro HDD. Una volta identificata la soluzione ho quindi cercato un applicazione che mi permettesse di gestire questo RAMDisk e ho trovato Dataram RAMDisk che vi consiglio caldamente di provare.

L'installazione è immediata, e il pacchetto da scaricare pesa poco più di 2M. La versione a uso personale ha un limite di 4GB mentre quella a pagamento che ovviamente risulta sbloccato costa sui 15€ circa. Per ora mi trovo molto bene con la personale.

Ecco la mia configurazione, ma vedrete che è davvero facile ma al contempo ben fornito di possibilità.


Il resto l'ho lasciato tutto uguale tranne una spunta che ho messo nell'ultima pagina alla voce "Clear RAMDisk memory on exit".

Ora resta un punto: come faccio a spostare l'AVD sul disco RAM appena creato?
Semplice, basta fare così..


1° Soluzione

• Create un AVD normalmente (io l'ho chiamato AVDTEST), se ne avete già uno passate al punto successivo
• Andate nella cartella dove avete salvato gli AVD (se non lo sapete niente paura aprite in Eclispe l'AVD Manager e leggete nel primo tab la directory usata .. poco sopra l'elenco dei AVD confiugrati)
• Andate nella cartella (normalmente simile a C:\Users\\.android\avd)
• Nella cartella avete un file AVDTEST.ini e una cartella AVDTEST.avd, bene copiate la cartella sul RAM Disk (mi raccomando a non fare sposta, per sicurezza)
• Aprite il file ini associato (nel mio caso AVDTEST.ini)
• Modificate il path dell'avd (es. da path=C:\Users\\.android\avd\AVDTEST.avd a path=E:\AVDTEST.avd). Non toccate path.rel o le altre voci, non è necessario.

Oppure una soluzione alternativa e definitiva (quella precedente soffre di problemi nel riavvio delle AVD è quello di specificare una nuova locazione come variabile d'ambiente, ossia:

2° Soluzione

• Tasto destro sull'icona "My Computer" o "Computer" e premete su "Proprietà"
• Andate sulla schead (tab) "Avanzate" e premete sul pulsante "Variabili d'ambiente"
• Aggiungete una nuvoa variabile di sistema se volete farla veder a tutti gli utenti dove mettete come nome variabile ANDROID_SDK_HOME mentre come valore il percorso voluto compresa la barra finale (es E:\).
• Se avete Eclipse aperto dovete hiedere tutte le AVD che avete e riavviarlo

Nota: Personalmente avevo iniziato con la prima soluzione ma alla fine ho abilitato RAMDisk a prepararmi in automatico la partizione all'avvio e a caricarmi l'immagine del disco al riavvio del pc.
Per dare qualche numero anche se non l'ho misurato nel dettaglio son passato da diversi minuti del caricamento a pochi secondi (AVD x86 Atom con allocati 768M di RAM) e una fruibilità delle App installate e delle gesture fatte col mouse davvero incredibili.

Finalmente, basta attese inutili!! AVD è tornato più veloce che mai.



Collegamenti esterni: RAMDisk (Wikipedia) | Dataram RAMDisk

..ma solo se ci mettiamo tutti gli strumenti che ora facilitano di molto il compito e rendono accessibile a tutti il provare a creare dei siti e che si differenzia comunque molto bene dall'essere -considerato- un bravo webdesigner di professione, in grado di apportare idee e soluzioni vincenti.

Ma anche perché, basta conoscere il CSS, HTLM, JS o qualche bella piattaforma per essere "ispirati"? o piuttosto un bravo webdesigner deve conoscere sì queste cose ma anche avere bene in mente il taglio da dare al sito, apportare idee, puntare alle heatmap, focalizzarsi sulle palette utilizzabili, alla scelta delle immagini e agli effetti scenici.. il tutto senza compromettere la praticità o ancor peggio penalizzando i contenuti?

Come se non bastasse è facile sfociare nel territorio del webmarketing, dell'essere "SEO".

Ritornando all'immagine, sebbene del Gennaio 2011 (lo si vede nella parte bassa), si trovano centrati e schematizzati in maniera pratica quello che i colori stimolano come sensazioni; ovviamente è una forzatura, sia perché non si considera l'interazione fra i colori stessi sia perché non si considerano i settori di riferimento (es un sito istituzionale difficilmente avrà colori scuri come base, così come discoteche e locali notturni difficilmente avranno colori tendenti al bianco come base.. esempio come qui su Ondare).



Da questa immagine -ammetto- che sono abbastanza soddisfatto degli attuali colori di ondare.


Collegamenti esterni: Test King | Infographicsmania

Fatto sta, che continuando a girare per i blog ho ritrovato lo stesso modulo su altri siti che seguo più o meno costantemente quindi ho pensato di registrare il mio profilo e finirla lì così da capire come funzionava.

Ma sorpresa, a registrazione conclusa mi è comparsa la possibilità di integrare la gestione dei commenti su diverse piattaforme fra le quali WP, blogger (questa) e molte altre. Solitamente preferisco fare a mano l'integrazione degli script anche perchè ho sempre avuto cattive sorprese e se faccio qualche cavolata di mio almeno so con chi prendermela ma per questa volta mi son fidato e tempo un paio di minuti avevo la nuova gestione dei commenti attivi.

C'è anche la possibilità di importare i commenti già esistenti, e -cosa che mi ha convinto definitivamente- di tenere allineati i commenti che verranno inseriti col widget Disqus in blogger (o sulla piattaforma blog che usiamo).

Interessante, davvero molto veloce, grafica pulita.. ora aspettiamo di vedere se funziona bene - soprattutto la sincronizzazione dei commenti con blogger e l'importazione dei vecchi commenti fatti - ma le premesse ci sono tutte.

Se vi interessa nei collegamenti esterni (cioè subito qui sotto) vi metto il link alla piattaforma Disqus. Dategli una possibilità, secondo me merita.



Collegamenti esterni: Disqus

La libreria di base la trovate sul sito dello sviluppatore, vi consiglio ovviamente l'ultima versione. Prima di continuare date una lettura anche alla licenza di tipo MIT, ossia una GPL compatibile. Per maggiori informazioni guardate anche su Wikipedia.

Prima di iniziare e bene sapere che un Tag contiene delle informazioni, ma di che tipo? Attualmente possiamo trovare informazioni di varia natura:

• URITag: contiene un indirizzo Web
• FreeTextTag: contiene del testo libero
• DialerTag: contiene un numero di telefono
• VCardTag: contiene un biglietto da visita elettronico

Per utilizzare i MSTag è necessario registrarsi sul sito microsoft tag dove basta possedere un account hotmail e richiedere la chiave per generare i codici Tag (c'è un modulo sempre sul loro sito). la risposta generalmente è molto veloce da poche ore a un paio di giorni massimo.

Bene ora che abbiamo tutti i strumenti possiamo iniziare, l'esempio è stato preso e semplificato da quello presente sul sito di riferimento. Di fatto, utilizzerò solo i tag di tipo URI ci aggiungo le note e modifico leggermente dei metodi per renderlo riusabile come classe di interfaccia unica di appoggio a queste librerie. Ecco il codice completo:

import java.io.File;
import java.io.FileOutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.TimeZone;

import net.suddenelfilio.ws.tag.BarcodeGenerationSettings;
import net.suddenelfilio.ws.tag.ImageTypes;
import net.suddenelfilio.ws.tag.MSTagService;
import net.suddenelfilio.ws.tag.TagDecorations;
import net.suddenelfilio.ws.tag.URITag;

public class TestMyTag
{

    /**
     * @param args
     */
    public static void main(String[] args)
    {
        TestMyTag tmt = new TestMyTag();
        
        tmt.setUp();
        URITag tag = tmt.createURITag();
        tmt.activateURITag(tag);
        tmt.createURITagImage(tag);
    }

    public URITag createURITag()
    {
        MSTagService svc = new MSTagService();

        URITag tag = new URITag();
        tag.CategoryName = "Main";
        tag.Title = "Ondare Blog";
        tag.MedFiUrl = "http://ondare.blogspot.com";
        Date now = new Date();
        SimpleDateFormat sdf = new SimpleDateFormat("MM-dd-yyyy HH:mm:ss");
        sdf.setTimeZone(TimeZone.getTimeZone("UTC"));
        tag.UTCStartDate = sdf.format(now);

        try
        {
            String result = svc.Create(tag);
            System.out.println("createURITag : "+result);
        }
        catch (Exception e)
        {
            e.printStackTrace();
            return null;
        }
        
        return tag;
    }

    public boolean activateURITag(URITag tag)
    {
        if (tag == null)
            return false;

        MSTagService svc = new MSTagService();

        try
        {
            String result = svc.Activate(tag);
            System.out.println("activateURITag : "+result);
            return true;
        }
        catch (Exception e)
        {
            e.printStackTrace();
            return false;
        }
    }

    public boolean createURITagImage(URITag tag)
    {
        if (tag == null)
            return false;
        
        MSTagService svc = new MSTagService();

        BarcodeGenerationSettings settings = new BarcodeGenerationSettings();
        
        settings.CategoryName = tag.CategoryName;
        settings.TagTitle = tag.Title;
        settings.ImageType = ImageTypes.Jpeg;
        settings.Decoration = TagDecorations.HCCBRP_DECORATION_NONE;
        settings.Size = 0.75;

        try
        {

            byte[] barcode = svc.GenerateBarcode(settings);

            FileOutputStream fos = new FileOutputStream(System.getProperty("user.dir")+"/barcode.jpg");

            fos.write(barcode);
            fos.close();

            File f = new File(System.getProperty("user.dir")+"/barcode.jpg");
            System.out.println("createURITagImage : "+f.exists());
            
            return f.exists();
        }
        catch (Exception e)
        {
            e.printStackTrace();
            return false;
        }
    }
    
    protected void setUp()
    {
        MSTagService.SVCAPITOKEN = "<MY-PRIVATE-CODE-FROM-MICROSOFT>"; //codice privato assegnato da MS
    }
}

Okay, l'esempio risulta abbastanza semplice tuttavia porto alcune considerazioni sui diversi blocchi di codice per meglio spiegare funzioni e caratteristiche. Non ho usato un package di riferimento e ho anche minimizzato le classi importate per non appesantire inutilmente l'esempio, come vedete le classi della libreria MSTag usata fa riferimento al package net.suddenelfilio.ws.tag. Potete anche importare tutto il package ma trovo interessante "esploderli" e utilizzare sempre e solo el vere classi coinvolte.

import java.io.File;
import java.io.FileOutputStream;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.TimeZone;

import net.suddenelfilio.ws.tag.BarcodeGenerationSettings;
import net.suddenelfilio.ws.tag.ImageTypes;
import net.suddenelfilio.ws.tag.MSTagService;
import net.suddenelfilio.ws.tag.TagDecorations;
import net.suddenelfilio.ws.tag.URITag;

public class TestMyTag
{

// Codice tolto solo per spiegazione

}

Il metodo createURITag è molto semplice e si presta per essere implementato, per esempio accettando in ingresso il tipo di Tag da creare (URI, vCard, FreeText o Dialer):

public URITag createURITag()
    {
        MSTagService svc = new MSTagService();

        URITag tag = new URITag();
        tag.CategoryName = "Main";
        tag.Title = "Ondare Blog";
        tag.MedFiUrl = "http://ondare.blogspot.com";
        Date now = new Date();
        SimpleDateFormat sdf = new SimpleDateFormat("MM-dd-yyyy HH:mm:ss");
        sdf.setTimeZone(TimeZone.getTimeZone("UTC"));
        tag.UTCStartDate = sdf.format(now);

        try
        {
            String result = svc.Create(tag);
            System.out.println("createURITag : "+result);
        }
        catch (Exception e)
        {
            e.printStackTrace();
            return null;
        }
        
        return tag;
    }

Col metodo precedente abbiamo quindi creato il tag, una volta che questo avviene correttamente creato è necessario attivarlo, questo viene fatto tramite la classe MSTagService che eseguirà una chiamata (tramite l'indirizzo http://tag.ws.suddenelfilio.net/mstagrest.svc/ ) al servizio MS.

    public boolean activateURITag(URITag tag)
    {
        if (tag == null)
            return false;

        MSTagService svc = new MSTagService();

        try
        {
            String result = svc.Activate(tag);
            System.out.println("activateURITag : "+result);
            return true;
        }
        catch (Exception e)
        {
            e.printStackTrace();
            return false;
        }
    }

Di fatto il nostro Tag se l'attivazione è avvenuto correttamente, risulta presente nel repository della MS. Infatti, se ci colleghiamo sul sito tag.microsoft.com troviamo nella categoria "Main" il tag "Ondare Blog". Di fatto il tag è quindi registrato e utilizzabile, se vogliamo possiamo creare

    public boolean createURITagImage(URITag tag)
    {
        if (tag == null)
            return false;
        
        MSTagService svc = new MSTagService();

        BarcodeGenerationSettings settings = new BarcodeGenerationSettings();
        
        settings.CategoryName = tag.CategoryName;
        settings.TagTitle = tag.Title;
        settings.ImageType = ImageTypes.Jpeg;
        settings.Decoration = TagDecorations.HCCBRP_DECORATION_NONE;
        settings.Size = 0.75;

        try
        {

            byte[] barcode = svc.GenerateBarcode(settings);

            FileOutputStream fos = new FileOutputStream(System.getProperty("user.dir")+"/barcode.jpg");

            fos.write(barcode);
            fos.close();

            File f = new File(System.getProperty("user.dir")+"/barcode.jpg");
            System.out.println("createURITagImage : "+f.exists());
            
            return f.exists();
        }
        catch (Exception e)
        {
            e.printStackTrace();
            return false;
        }
    }

Come vedete è possibile specificare il formato dell'immagine da creare e come "decorare" il tag, per la precisione:

 

C'è anche un metodo che si chiama setUp() che di fatto serve solo per impostare il codice assegnatovi da MSTag, quindi per rendere funzionante tutto l'esempio nel metodo è necessario sostituire il testo presente fra doppi apici proprio con la stringa inviatovi via email.

    protected void setUp()
    {
        MSTagService.SVCAPITOKEN = "<MY-PRIVATE-CODE-FROM-MICROSOFT>"; //codice privato assegnato da MS
    }

Ma ora che abbiamo generato il codice come possiamo testarlo? Semplice basta collegarsi - ad esempio - tramite un cellulare che abbia una fotocamera integrata al sito gettag.mobi (sito Microsoft) e automaticamente verrà scaricata l'applicazione.

Dalle prove mi sono stupito dalla velocità di acquisizione, davvero interessante soprattutto perché è possibile acquisirlo in movimento (sena correre mi raccomando), da angolazioni non proprio perpendicolari e soprattutto non dovendo eseguire fastidiosi zoom o elaborazioni dell'immagine.

Se non volete generare un codice ma volete verificare la compatibilità del vostro cellulare una volta installato l'applicazione sul cellulare scansionate l'immagine dell'articolo (richiama a un sito sicuro.. questo!)

Buona scansione!

Collegamenti esterni: Microsoft Tag | Librerie MSTagJava | Gettag (Per dispositivi Mobile) | Licenza MIT (Wikipedia)

Anche quando siamo scollegati da internet, questi dati possono essere catturati attraverso dei programmini malefici (ma cattivi proprio) creati ad hoc, presenti sul pc a nostra insaputa e inviati solo durante una connessione valida. Per di più che il nostro PC può essere utilizzato per eseguire degli attacchi verso siti o servizi pubblici.

Da tempo mi affido ad alcuni programmini e metodi che se fatti quotidianamente possono aiutare (anche se non eliminano mai completamente) a non cadere in problemi almeno quelli più grossolani, purtroppo una copertura al 100% senza chiudere il pc in cassaforte senza possibilità di dialoghi con l'esterno.. e forse neanche in questo caso..

Di seguito una serie di consigli e programmi (gratuiti per uso domestico, ovviamente verificate le licenze):

Reti anonime: queste sono reti sicure, anonime, solitamente senza server fissi e realizzata sulla condivisione di tutti i pc di chi si collega. Ovviamente questa rete è più lenta e non si presta ad abusi quali download, bombing, spam e quant'altro di illegale. E' un modo per oltrepassare le censure. Fra le più note sicuramente si trovano: Tor, Freenet e Netsukuku. Se siete interessati ad approfondire su Wikipedia trovate delle pagine dedicate.

Proxy anonimi: non sono come le reti anonime ma sono comunque delle buone soluzioni per filtri e censure. Visto che se ne trovano davvero molti su internet non pubblico una lista, i migliori prevedono di bloccare o eseguire codice script, immagini, codificare la pagina, il titolo e altre funzionalità del genere.

Antivirus: ci sono degli antivirus gratuiti validi come ad esempio Avira, Avast e Avg. Curiosità: ho visto utilizzare anche più AV sullo stesso pc purtroppo questa soluzione rallenta di molto tutte le operazioni fatte e per di più non è che si raddoppi la sicurezza. Quindi meglio sceglierne uno solo o se ci si sente più sicuri spendere qualche soldino per un prodotto a pagamento.

Firewall: fra i migliori anche se paragonato a soluzioni commerciali troviamo Comodo, sicuramente una ottima scelta. Altre soluzioni prevedono diverse funzionalità quali antivirus, antispyware e firewall insieme, ne è un esempio Kaspersky Internet Security.

Password: troppo spesso usiamo password banali e facilmente riconducibili a noi, è facile cadere in questo errore ma è possibile evitare diversi problemi semplicemente scegliendole con più attenzione. Non a caso le password più facili sono 123456, password, password2 oppure nomi religiosi, amori, film, animali e così via. Se volete valutare la "forza" della vostra password provate a inserirla QUI (è un sito della microsoft). Consiglio di usare lettere, numeri e caratteri speciali (solitamente l'underscore, il trattino, il punto o la chiocciola) per rafforzare ed enfatizzare il tutto.

Se avete tante password, suddivise per complessità, siti e/o categoria potete (dovete?) utilizzare un programma di storicizzazione apposito. Nel caso vi consiglio KeePass, il programma è molto leggero, non bisogna installarlo, facile da trasportare e se usato a dovere è davvero molto sicuro.

Credenziali e utenti PC: se vi collegate a internet (e anche negli altri casi a dire il vero) è bene usare degli utenti con credenziali limitate, ossia con poche funzionalità. Su linux questo avviene quasi in automatico (guai ad accedere come root) mentre in windows è possibile andare in gestione utenti sotto al pannello di controllo e crearne uno limitato.
Sicuramente molti rimangono legati all'utente admin perché alcuni programmi (generalmente sotto windows) non funzionano bene con utenti limitati, bhé prima di rinunciare provate a utilizzare il comando RunAs e al più modificare i permessi limitando dove possibile le cartelle del programma prima di ritornare a usare il povero (e abusato) admin.

Aggiornare il SO e i vari browser: sebbene non sia una legge assoluta, si spera, che gli aggiornamenti riguardino oltre a nuove funzionalità e ottimizzazioni anche e soprattutto la sicurezza e le correzioni di anomalie. Solitamente sia i programmi sia i vari sistemi operativi hanno la possibilità di aggiornarsi automaticamente.

Cronologia: che si tratti di browser o del sistema operativo solitamente non vengono mai cancellate le cronologie, da qui è possibile risalire alle ricerche fatte, alle pagine aperte, programmi e files usati insomma per evitare è meglio pulirla costantemente (con programmi ad hoc per la cancellazione).

Cancellazione sicura: Io uso eraser, se fate una ricerca veloce anche su sourceforge ne trovate parecchi. Questo tipo di programma permette di cancellare files, cronologie, cestini con diversi gradi di sicurezza (e quindi sfruttando diversi algoritmi di riscrittura). Può essere eseguito anche sullo spazio libero (ossia l'ex spazio occupato dai nostri dati che ancora potrebbero esser letti) del nostro hard disk in modo pianificato così da evitare di utilizzare sempre questo programma.

Crittografia: qui si potrebbe parlare di molti argomenti, in realtà penso che per un uso domestico basti affidarsi a un programma che renda sicura una partizione, una cartella o una parte della nostra chiavetta usb e che ci permetta di copiare dentro cosa più vogliamo. La mia scelta è ricaduta su truecrypt che permette di creare un "contenitore" invisibile anche all'interno di altri contenitori creati sempre tramite truecrypt, rendendoli di fatto invisibili e non leggibili.

Email sicure: questo vuol dire dove possibile accedere a siti di una certa fama meglio se con protocollo https e certificati. Un'altra buona norma visti anche lo spazio offerto dalle varie caselle è non mantenere copia dei messaggi su pc, al più creare degli archivi protetti per evitare eventuali perdite più o meno accidentali.

Maggior sicurezza e controlli: oltre ai virus ci sono altri problemi ed è indispensabile correre ai ripari. Per farvi una idea guardate quante categorie di Malware ci sono. Consiglio quindi di affiancare al firewall e all'antivirus anche un Anti-Trojan (alcuni gratuiti) e un Anti-Spyware (alcuni gratuiti) che potrete lasciare residenti in memoria o avviare manualmente ogni tanto. Provate anche Spybot S&D, attivando i moduli TeaTimer e SDHelper.

Ci sarebbero altri consigli quali: evitare siti di dubbia fiducia, non inserire codici di documenti personali, numeri di carte di credito (al più usare delle ricaricabili). Non fornire mai le proprie password, render privati i contenuti personali sui vari social network. E più in generale fare affidamento alle comuni norme in fatto di privacy e sicurezza. Buona navigata.

Collegamenti esterni: MS Password Checker | Comando RunAs | MS Permessi a file e cartelle | Antivirus gratuiti | SourceForge | Tor | Freenet | Netsukuku | Categorie malware (Wikipedia) | Lista Anti-Trojan | Lista Anti-Spyware | Spybot S&D

Visto che ultimamente ne ho scritto uno molto semplice in PHP che mi sembra funzioni bene ve lo propongo, naturalmente in rete ne trovate a centinaia.

Prima di tutto dobbiamo creare una classe, ad esempio captcha.php (evviva la fantasia) dove possiamo inserire il codice di creazione dlel'immagine:

<?php
while (@ob_end_clean());
ob_start();

session_start();

$secureimg['imagetype'] = "JPG";        // tipo di immagine, supporta JPG, PNG e GIF
$secureimg['image'] = "code_bg.jpg";    // nome del file immagine (compresa estensione)
$secureimg['size']    = "28";             // dimensione del font
$secureimg['length']= "5";              // numero caratteri del codice di sicurezza
$secureimg['angle']    = "4";              // angolo del testo
$secureimg['x']        = "15";             // punto X di partenza del testo
$secureimg['y']        = "40";             // punto Y di partenza del testo
$secureimg['width']    = "130";            // larghezza immagine (o porzione da considerare per scrivere il font)
$secureimg['height']= "45";             // altezza immagine (o porzione da considerare per scrivere il font)
$secureimg['font']     = "font.ttf";       // file font da usare
$secureimg['textcolor'] = "218,16,73";  // codice colore RGB del testo
$secureimg['linecolor'] = "128,128,73"; // codice colore RGB delle linee di disturbo
$secureimg['linecount'] = "0";          // numero di linee può valere 0, nel caso non ci sono linee di disturbo

if (!isset($secureimg['length']))
    $secureimg['length'] = 5;

// creazione codice unico, vista la possibilità di avere un codice predicibile
// cerchiamo di complicare leggermente le cose
$length = intval($secureimg['length']);
$tmp = md5(uniqid(rand(), true));
$offset = rand(0, strlen($tmp) - $length);
$privcode = substr($tmp, $offset, $length);

if(isset($secureimg['imagetype']))
{
    if ($secureimg['imagetype'] == 'JPG')
        $image =imagecreatefromjpeg($secureimg['image']);
    else if ($secureimg['imagetype'] == 'PNG')
        $image =imagecreatefrompng($secureimg['image']);
    else if ($secureimg['imagetype'] == 'GIF')
        $image =imagecreatefromgif($secureimg['image']);
    else
        $image =imagecreatefromjpeg($secureimg['image']);    
}
else 
{
    $secureimg['imagetype'] = 'JPG'; // serve per il content type
    $image =imagecreatefromjpeg($secureimg['image']); // cerca immagine formato jpg se formato non è specificato
}

if(isset($secureimg['textcolor']))
{
    $tmp = explode(",",$secureimg['textcolor']);
    $textcolor = imagecolorallocate($image,$tmp[0],$tmp[1],$tmp[2]);
}
else
{
    $textcolor = imagecolorallocate($image, 218, 16, 73);
}

if(isset($secureimg['linecolor']))
{
    $tmp = explode(",",$secureimg['linecolor']);
    $linecolor = imagecolorallocate($image,$tmp[0],$tmp[1],$tmp[2]); //line color  233,239,239
    
    for ($i = 1; $i <= $secureimg['linecount']; $i++) {
        
        imageline($image,rand(0,$secureimg['width']),rand(0,$secureimg['height']),rand(0,$secureimg['width']),rand(0,$secureimg['height']),$linecolor);
    }
}

if(isset($secureimg['font']) && is_readable($secureimg['font']))
{
    imagettftext($image, $secureimg['size'],$secureimg['angle'], $secureimg['x'], $secureimg['y'], $textcolor, $secureimg['font'], $privcode);
}
else
{
    imagestring($image, $secureimg['size'], $secureimg['x'], $secureimg['y'], $privcode, $textcolor);
}

// il codice deve essere disponibile nella sessione (al sicuro) per eventuali controlli
$_SESSION['key'] = $privcode;

// preparazione content type per invio
header("Content-type: image/".strtolower($secureimg['imagetype']));

// invio l'immagine al browser
if ($secureimg['imagetype'] == 'JPG')
    imagejpeg($image);
else if ($secureimg['imagetype'] == 'PNG')
    imagepng($image);
else if ($secureimg['imagetype'] == 'GIF')
    imagegif($image);
else
    imagejpeg($image);

//ok, non serve più
imagedestroy($image);

//ob_end_clean();
?>

Bene nel codice trovate tutti i commenti, per essere utilizzato al meglio è sufficiente impostare come si vuole generare il codice, questo va fatto una volta sola e precisamnetenelle prime file del codice php precedente trovate le seguenti righe:

$secureimg['imagetype'] = "JPG";        // tipo di immagine, supporta JPG, PNG e GIF
$secureimg['image'] = "code_bg.jpg";    // nome del file immagine (compresa estensione)
$secureimg['size']    = "28";             // dimensione del font
$secureimg['length']= "5";              // numero caratteri del codice di sicurezza
$secureimg['angle']    = "4";              // angolo del testo
$secureimg['x']        = "15";             // punto X di partenza del testo
$secureimg['y']        = "40";             // punto Y di partenza del testo
$secureimg['width']    = "130";            // larghezza immagine (o porzione da considerare per scrivere il font)
$secureimg['height']= "45";             // altezza immagine (o porzione da considerare per scrivere il font)
$secureimg['font']     = "font.ttf";       // file font da usare
$secureimg['textcolor'] = "218,16,73";  // codice colore RGB del testo
$secureimg['linecolor'] = "128,128,73"; // codice colore RGB delle linee di disturbo
$secureimg['linecount'] = "0";          // numero di linee può valere 0, nel caso non ci sono linee di disturbo

I commenti sono stati inseriti su ogni riga, ora non resta che decire l'immagine che io ho chiamato code_bg.jpg ovviamente modificabile e il font da usare, per la scelta di quest'ultimo io mi sono affidato all'ormai celebre e affidabile dafont.com, in questo sito potete trovare davvero tantissimi font.

Fate attenzione solo a un paio di cosette, primo il font deve essere di tipo TTF (ossia True Type Font) e secondo che non sia coperto da una licenza, giusto per evitarvi delle grane. Per la scelta poi consiglio dei font non troppo lineari o standard.

Ok, ora passiamo all'applicazione. Come usare lo script? In modo molto semplice quello che segue è un piccolo esempio di come verificare il codice captcha generato:

<?php 
session_start();

echo '<html><body>';
if (isset($_SESSION['key']) && !empty($_SESSION['key']) 
    && isset($_POST['code']) && !empty($_POST['code']))
    {
    if (strcmp($_SESSION['key'], $_POST['code']) == 0)
        {
        echo '<br/>Ok, umani alla riscossa!<br/><br/>';
        }
    else
        {
        echo '<br/>Mi spiace, non conosco nessun Connor :P<br/><br/>';
        }
    }
?>
<br/><br/>
<img style='margin-left:50px;margin-bottom:10px;' src="php_captcha.php">
<form action="prova.php" method="post">
Codice&nbsp;<input id='code' style='width:120px;' name='code' />
<input type="submit" value="Invia" />
</form>
</body>
</html>

Nell'esempio si vede che il form risulta essere davvero banale, cos' come il codice php di controllo. Attenzione, non salvate il codice reale in altri posti come variabili etc meglio evitare di portarsi in giro questa preziosa chiave.

Bene questo è tutto, ora abbiamo un semplice file captcha che possiamo usare o integrare facilmente dove vogliamo.

A tal proposito ci dovrebbe essere una pagina proprio sul sito di Blogger se non ricordo male.

In ogni caso, sfruttando questo protocollo opensearch e json è possibile recuperare gli articoli che corrispondono a una certa o più parole chiave (tags) e visualizzarli con un semplice slideshow.

In questo tutorial si vedranno due fasi: la prima quella di realizzo del plugin, sicuramente per molti di voi molto banale e la seconda quella di applicazione sul proprio blogger.

Ok, iniziamo: l'idea di base è quella di non dover gestire cosa metterci dentro in maniera statica... questo ha dei vantaggi, primo fra tutti l'auto aggiornamento in base a cosa scriviamo. In pratica pensandoci quasi tutti i blog (quasi certo) hanno una particolarità .. ossia una immagine (a volte anche abbastanza grande) dentro al post e le prime righe solitamente sono una sorta di cappello all'articolo che segue, quasi a invogliare a leggere.

Se avete questi requisiti lo script che vedremo da adesso dovrà avere davvero poche modifiche, nel caso chiedete e vedremo come applicarlo alla vostra situazione.

Ho intenzione di inserire una demo in fondo a questo articolo quindi per chi volesse vederlo in azione, scorra la pagina.. ma tornate poi a leggere da qui mi raccomando!!

Premesse: Di query ho usato soprattutto gli effetti, il metodo id selezione davvero veloce e la sua grande caratteristica di chaining ossia l'incatenamento dei metodi.. fai questo quando finisci questa azione etc all'infinito. Di javascript ho usato il DOM per recuperare l'element e quello per gestire il timeout (non l'interval per paura che per qualche motivo non si interrompesse e anzi iniziassero a esserci n chiamate contemporanee).

Codice script jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>

var fadeInTime = 1000;
var fadeOutTime = 2000;
var showInTime = 2500;
var showOutTime = 1000;
var intervalTime = 6000;
var numchars = 250;

var cur;
var cur2;
var intid;

function cstfade(direction) {

    clearTimeout(intid);
    if (cur) {

            if (direction == 'right') {
                
                cur2.hide();
                if ( cur2.attr('class') == 'last' ) cur2 = $('#ppt2 li:first');
                else cur2 = cur2.next();
                cur2.show();
            } 
            else {
            
                cur2.hide();
                if ( cur2.attr('class') == 'first' ) cur2 = $('#ppt2 li:last');
                else cur2 = cur2.prev();
                cur2.show();
            }
        $('#ppt2').animate({"z-index": 1, "opacity":1 }, showInTime, "linear", function() {});
        

        //fadeOut
        cur.slideUp(fadeOutTime, function () {

            if (direction == 'right') {

                if ( cur.attr('class') == 'last' ) cur = $('#ppt li:first');
                else cur = cur.next();
                //fadeIn
                cur.slideDown(fadeInTime, function() { intid = setTimeout( "right()", intervalTime ); });
            } 
            else {
            
                if ( cur.attr('class') == 'first' ) cur = $('#ppt li:last');
                else cur = cur.prev();
                //fadeIn
                cur.slideDown(fadeInTime, function() { intid = setTimeout( "left()", intervalTime ); });
            }
            
            $('#ppt2').animate({"z-index": 0, "opacity":0 }, showOutTime, "linear", function() {});

        });
    }
}

function right() { cstfade('right'); }
function left()  { cstfade('left');  }

function slidenews(json)
{
var divppt = document.getElementById('ppt');
divppt.innerHTML = '';

var divppt2 = document.getElementById('ppt2');
divppt2.innerHTML = '';


for (var i = 0; i < json.feed.entry.length; i++)
    {
    var entry = json.feed.entry[i];
    var link = '';
    for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
        link = entry.link[k].href;
        break; } }

    divppt.innerHTML = divppt.innerHTML + '<li><span>' + entry.title.$t + '</span><br/>'
        + '<br/>'+ entry.content.$t.replace(/(<([^>]+)>)/ig,"").substr(0,numchars)+'..'
        + '&nbsp;&nbsp;<a class="linkart" href="'+link+'">continua a leggere</a>'
        + '</li>';
    
    //find "src=blabla" and store everything after it (up to a space)
    var geturl = new RegExp(/src=([^ ]+)/i);
    //run the regex on z and return the stored result
    var url = geturl.exec(entry.content.$t)[1];

    // remove domain
    //url = url.replace(/http:\/\/[^\/]+/i,"");

    divppt2.innerHTML = divppt2.innerHTML + '<li><img src='+url+'></li>';
    }

$('#ppt li:gt(0)').hide();
$('#ppt li:last').addClass('last');

cur = $('#ppt li:first');
cur.addClass('first');

$('#ppt2 li:gt(0)').hide();
$('#ppt2 li:last').addClass('last');

cur2 = $('#ppt2 li:first');
cur2.addClass('first');

clearTimeout(intid);
intid = setTimeout( "right()", intervalTime );
}

</script>

Dando uno sguardo veloce sicuramente avrete notato due metodi importanti:

• cstfade: che si occupa dell'aspetto grafico viene chiamato in modo ciclico, ossia ogni volta che viene cambiato articolo o che viene premuto su avanti o indietro.
• slidenews: che viene richiamato quando vengono recuperati gli articoli da visualizzare, naturalmente tramite json come dicevamo e opensearch. Attenzione che viene richiamato solitamente una sola volta.

Bene, dentro slidenews viene attivato il setTimeout e cstfade viene richiamato dopo l'intervallo impostato. Ovviamente al termine di cstfade (ossia dell'effetto grafico) viene richiamato nuovamente il setTimeout (se si stava già aspettando viene terminato per evitare sovrapposizioni). Tutti i tempi sono modificabili e sono le variabili:

• fadeInTime: apparizione dell'articolo nuovo (default 1000 ms)
• fadeOutTime: dissolvenza dell'articolo a video (default 2000 ms )
• showInTime: tempo di apparizione immagine (default 2500 ms )
• showOutTime: tempo di dissolvenza immagine (default 1000 ms )
• intervalTime: intervallo fra un articolo e l'altro (default 6000 ms )

Il resto dello script è da modificare per esigenze particolari o correzioni (ovviamente).
Bene questa era la parte difficile, davvero!!
Passiamo al blocco HTML: per far funzionare il tutto, ovviamente, abbiamo bisogno dei vari elementi.. ossia di queste 7 righe.

<div id="news">
<a id="lefta" href="javascript:left();"></a>
<a id="righta" href="javascript:right();"></a>
    <ul id="ppt"></ul>
    <ul id="ppt2"></ul>
</div>
<script src='http://ondare.blogspot.com/feeds/posts/default/-/jQuery?alt=json-in-script&amp;callback=slidenews&amp;max-results=4' type='text/javascript'></script>

Come si vede, c'è un div news contenitore, due anchors lefta e righta (ossia per andare avanti e indietro), e due elementi ul che conterranno la lista di articoli e immagini da alternare.
La riga script ovviamente identifica la chiamata (opensearch / json) e deve essere posizionata dopo il blocco div news.

Se volete modificare il numero di articoli che visualizza dovete cambiare il numero che segue a max-results nella riga script precedente. Di default è max-results=4.

Bene ora non resta che impostare il blocco CSS così da concludere questa prima parte di realizzo:

<style type="text/css">
div#news { /* box padre */

    border:1px solid #D38561;background-color:white;width:370px;height:160px;
    padding:0;margin:0;overflow:hidden;position:relative;
}
ul#ppt { /* box articolo */

    width:290px;height:160px;background-color:white;padding:0;margin:0;overflow:hidden;
    float:right;position;absolute;top:0;left:40px;z-index:1;
}
#ppt li { /* corpo articolo */

    list-style-type: none;font-size:12px;width:100%;height:100%;padding:0;color:#333333;
    background-color:white;position;absolute;top:0;left:40px;
}
#ppt2 li { /* corpo articolo */

    list-style-type: none;font-size:12px;width:100%;height:100%;padding:0;margin:auto;
    color:#333333;background-color:white;position;absolute;top:0;left:40px;
}
#ppt li span { /* titolo articolo */
    
    position;absolute;top:0;left:40px;font-weight:bold;font-size:14px;color:#D38561;
}
#ppt2 {
    
    /*z-index:2;*/ position:absolute;top:0;left:40px;width:290px;height:160px;padding:0;
    margin:0; /*float:right;*/ overflow:hidden;filter:alpha(opacity=25);-moz-opacity:.0;
    opacity:.0;background-color:white;/* background-image:url(sfondo.png); */
}
#ppt2 img {

    display:block; /*allows the element to take auto margins*/ 
    margin:0 auto; /*centers in compliant browsers*/ 
    text-align:center; /*centers in old versions of IE*/ 
}
#lefta { /* pulsante sx */

    float:left;width:35px;height:160px;border:0;margin:0;padding:0;background-image:url(left.png);
}
#lefta:hover { background-image:url(lefta.png); }

#righta { /* pulsante dx */

    float:right;width:35px;height:160px;border:0;margin:0;padding:0;background-image:url(right.png);
}
#righta:hover { background-image:url(righta.png); }

.linkart { color:#D38561; }
</style>

Ok, di questo ultimo blocco possiamo cambiare tutte le parti grafiche. Background, border, margin, dimensioni, facendo attenzione a non toccare i vari float e i position (a meno di non voler cambiare il flusso degli oggetti, nel caso sperimentate pure).

Per i più smanettoni che vogliono mettere subito le mani in pasta a tutto qui c'è tutto html+script+css (ossia i pezzi precedenti) ovviamente mancano le immagini.

<html>
<head>

<style type="text/css">
div#news { /* box padre */

    border:1px solid #D38561;background-color:white;width:370px;height:160px;
    padding:0;margin:0;overflow:hidden;position:relative;
}
ul#ppt { /* box articolo */

    width:290px;height:160px;background-color:white;padding:0;margin:0;overflow:hidden;
    float:right;position;absolute;top:0;left:40px;z-index:1;
}
#ppt li { /* corpo articolo */

    list-style-type: none;font-size:12px;width:100%;height:100%;padding:0;color:#333333;
    background-color:white;position;absolute;top:0;left:40px;
}
#ppt2 li { /* corpo articolo */

    list-style-type: none;font-size:12px;width:100%;height:100%;padding:0;margin:auto;
    color:#333333;background-color:white;position;absolute;top:0;left:40px;
}
#ppt li span { /* titolo articolo */
    
    position;absolute;top:0;left:40px;font-weight:bold;font-size:14px;color:#D38561;
}
#ppt2 {
    
    /*z-index:2;*/ position:absolute;top:0;left:40px;width:290px;height:160px;padding:0;
    margin:0; /*float:right;*/ overflow:hidden;filter:alpha(opacity=25);-moz-opacity:.0;
    opacity:.0;background-color:white;/* background-image:url(sfondo.png); */
}
#ppt2 img {

    display:block; /*allows the element to take auto margins*/ 
    margin:0 auto; /*centers in compliant browsers*/ 
    text-align:center; /*centers in old versions of IE*/ 
}
#lefta { /* pulsante sx */

    float:left;width:35px;height:160px;border:0;margin:0;padding:0;background-image:url(left.png);
}
#lefta:hover { background-image:url(lefta.png); }

#righta { /* pulsante dx */

    float:right;width:35px;height:160px;border:0;margin:0;padding:0;background-image:url(right.png);
}
#righta:hover { background-image:url(righta.png); }

.linkart { color:#D38561; }
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type='text/javascript'>

var fadeInTime = 1000;
var fadeOutTime = 2000;
var showInTime = 2500;
var showOutTime = 1000;
var intervalTime = 6000;
var numchars = 250;

var cur;
var cur2;
var intid;

function cstfade(direction) {

    clearTimeout(intid);
    if (cur) {

            if (direction == 'right') {
                
                cur2.hide();
                if ( cur2.attr('class') == 'last' ) cur2 = $('#ppt2 li:first');
                else cur2 = cur2.next();
                cur2.show();
            } 
            else {
            
                cur2.hide();
                if ( cur2.attr('class') == 'first' ) cur2 = $('#ppt2 li:last');
                else cur2 = cur2.prev();
                cur2.show();
            }
        $('#ppt2').animate({"z-index": 1, "opacity":1 }, showInTime, "linear", function() {});
        

        //fadeOut
        cur.slideUp(fadeOutTime, function () {

            if (direction == 'right') {

                if ( cur.attr('class') == 'last' ) cur = $('#ppt li:first');
                else cur = cur.next();
                //fadeIn
                cur.slideDown(fadeInTime, function() { intid = setTimeout( "right()", intervalTime ); });
            } 
            else {
            
                if ( cur.attr('class') == 'first' ) cur = $('#ppt li:last');
                else cur = cur.prev();
                //fadeIn
                cur.slideDown(fadeInTime, function() { intid = setTimeout( "left()", intervalTime ); });
            }
            
            $('#ppt2').animate({"z-index": 0, "opacity":0 }, showOutTime, "linear", function() {});

        });
    }
}

function right() { cstfade('right'); }
function left()  { cstfade('left');  }

function slidenews(json)
{
var divppt = document.getElementById('ppt');
divppt.innerHTML = '';

var divppt2 = document.getElementById('ppt2');
divppt2.innerHTML = '';


for (var i = 0; i < json.feed.entry.length; i++)
    {
    var entry = json.feed.entry[i];
    var link = '';
    for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
        link = entry.link[k].href;
        break; } }

    divppt.innerHTML = divppt.innerHTML + '<li><span>' + entry.title.$t + '</span><br/>'
        + '<br/>'+ entry.content.$t.replace(/(<([^>]+)>)/ig,"").substr(0,numchars)+'..'
        + '&nbsp;&nbsp;<a class="linkart" href="'+link+'">continua a leggere</a>'
        + '</li>';
    
    //find "src=blabla" and store everything after it (up to a space)
    var geturl = new RegExp(/src=([^ ]+)/i);
    //run the regex on z and return the stored result
    var url = geturl.exec(entry.content.$t)[1];

    // remove domain
    //url = url.replace(/http:\/\/[^\/]+/i,"");

    divppt2.innerHTML = divppt2.innerHTML + '<li><img src='+url+'></li>';
    }

$('#ppt li:gt(0)').hide();
$('#ppt li:last').addClass('last');

cur = $('#ppt li:first');
cur.addClass('first');

$('#ppt2 li:gt(0)').hide();
$('#ppt2 li:last').addClass('last');

cur2 = $('#ppt2 li:first');
cur2.addClass('first');

clearTimeout(intid);
intid = setTimeout( "right()", intervalTime );
}

</script>

</head>
<body>

<div id="news">
<a id="lefta" href="javascript:left();"></a>
<a id="righta" href="javascript:right();"></a>
    <ul id="ppt"><!--- NOTHING HERE, VOID ---></ul>
    <ul id="ppt2"><!--- NOTHING HERE, VOID ---></ul>
</div>
<script src='http://ondare.blogspot.com/feeds/posts/default/-/jQuery?alt=json-in-script&amp;callback=slidenews&amp;max-results=4' type='text/javascript'></script>

<!--
<script src='http://keytrading.blogspot.com/feeds/posts/default/-/broker+online?alt=json-in-script&amp;callback=slidenews&amp;max-results=4' type='text/javascript'></script>
-->

</body>
</html>

Bene, ora per chi volesse integrarlo in posti diverso da blogger o comunque in modo proprio l'articolo è finito qui, per gli altri che come me hanno blogger bisogna fare ancora un'ultimo sforzo.

Integrazione in blogger: ovviamente per integrarlo ci saranno da fare gli stessi passi che avevo descritto nell'articolo jQuery - lightBox e Blogger anche in galleria.

Per evitarvi lo sforzo però vi elenco i passi da fare, per fortuna sono semplici ma bisogna fare attenzione! Valgono le avvertenze di salvare tutto (commenti, stili, colonna, parti custom, posts, js etc etc giusto per evitarmi grane).

Prendete il codice che c'è in Codice script jQuery e copiatelo o in testa all'articolo se volete metterlo solo in una pagina o dentro il layout in modo che si carichi subito. Nel secondo caso andate su draft Blogger > Layout > Modifica HTML, una volta qui spuntate la voce "Espandi i modelli widget" e copiate il contenuto in un editor di testo (esempio notepad).

Cercate nella parte di head dove ci sono altri script e copiatelo subito dopo.
Ora fate lo stesso con il blocco CSS copiandolo nell'elemento:

<b:skin><![CDATA[/*

....

]]></b:skin>

Dove ci sono i puntini ovvimanete avrete il codice e proprio lì dentro facendo attenzione a non metterlo a casaccio copierete le righe del blocco.
Bene, questa era la parte più delicata.

Ora prendete il blocco HTML e copiatelo dovunque vogliate, ad esempio in un elemento della colonna (sempre tramite draft Blogger > Layout > Elementi) ossia aggiungendo un gadget HTML/JavaScript. Oppure in uno o più articoli etc. Ok il tutto è pronto e se abbiamo cambiato i percorsi delle immagini e la stringa di chiamata JSON a questo punto è tutto pronto.

Complimenti, anche voi avrete uno slideshow su blogger proprio come questo che segue:



Collegamenti esterni: jQuery

Prima di iniziare fate una copia del blog, del template, delle parti html e javascript custom, articoli e commenti. In pratica tutto il blog in modo da poterlo completamente ripristinare in caso di problemi, il tutto per dire cavoli vostri eheh. Ok senza indugi se il risultato vi piace, iniziamo:

1) Preparazione jQuery: ipotizzo che sul vostro blog non avete già fatto uso di jQuery, nel caso sia già caricata con le pagine del sito saltate questo punto. Esistono due modi per caricare la libreria jQuery è dipende dall'uso che ne fate. jQuery infatti contiene molte funzionalità, ma la libreria pesa un poco e sicuramente blogger non crea codice così leggero da trascurare questo aspetto. Se volete iniziare a includerlo solo in alcuni post / articoli allora dovete scrivere il vostro articolo normalmente è salvarlo. Ok, ora editatelo bene (meglio accedere ai propri post da draft.blogger.com) dopo qualche riga del vostro articolo dovrete metter questo codice (naturalmente passate alla modalità 'Modifica HTML'):

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>

che caricherà la libreria jQuery minimizzata (tanto per risparmiare il possibile).

2) Preparazione libreria Slideshow: Se ne avete già una bene, altrimenti potete usare quella che trovate QUI, creata da Leandro Vieira Pinho sicuramente valida e fruibile per i miei scopi. Sul sito potete trovare qualche esempio oltre all'ultima versione scaricabile, ovviamente.
Anche in questo caso accedete al vostro post e dopo lo script di jQuery aggiunto prima, metteteci questa riga (sempre in modalità HTML):

<script type='text/javascript' src='http://leandrovieira.com/projects/jquery/lightbox/js/jquery.lightbox-0.5.pack.js'></script>

3) Inserire le immagini: Potete creare una tabella, una lista oppure metterli in un div come volete. L'importante è associare come id (della table, del div o ul) #gallery e inserire delle anchor dentro questo elemento html. Questo codice purtroppo lo dovete mettere sempre modificando il post tramite 'Modifica HTML' e fra l'altro dovete assicurarvi che fra le Opzioni post (in basso) come Impostazioni di composizione sia selezionato Interpreta HTML digitato.

Un esempio HTML potrebbe essere questo:

<div id="gallery">
<table border="0" cellspacing="5">
<tr>
<td><a href="http://sites.google.com/site/ondareblog/lego/lego22.jpg" title="lego22"> <img src="http://sites.google.com/site/ondareblog/lego/lego22t.jpg" alt="" /></a></td>
<td><a href="http://sites.google.com/site/ondareblog/lego/lego26.jpg" title="lego26"> <img src="http://sites.google.com/site/ondareblog/lego/lego26t.jpg" alt="" /></a></td>
<td><a href="http://sites.google.com/site/ondareblog/lego/lego28.jpg" title="lego28"> <img src="http://sites.google.com/site/ondareblog/lego/lego28t.jpg" alt="" /></a></td>
<td><a href="http://sites.google.com/site/ondareblog/lego/lego01.jpg" title="lego01"> <img src="http://sites.google.com/site/ondareblog/lego/lego01t.jpg" alt="" /></a></td>
</tr>
</table>
</div>

Oppure se non volete usare le tabelle, questo:

<div id="gallery">
<ul>
<li><a href="http://sites.google.com/site/ondareblog/lego/lego22.jpg" title="lego22"> <img src="http://sites.google.com/site/ondareblog/lego/lego22t.jpg" alt="" /></a></li>
<li><a href="http://sites.google.com/site/ondareblog/lego/lego26.jpg" title="lego26"> <img src="http://sites.google.com/site/ondareblog/lego/lego26t.jpg" alt="" /></a></li>
<li><a href="http://sites.google.com/site/ondareblog/lego/lego28.jpg" title="lego28"> <img src="http://sites.google.com/site/ondareblog/lego/lego28t.jpg" alt="" /></a></li>
<li><a href="http://sites.google.com/site/ondareblog/lego/lego01.jpg" title="lego01"> <img src="http://sites.google.com/site/ondareblog/lego/lego01t.jpg" alt="" /></a></li>
</ul>
</div>

Analizzando il codice (in entrambi i casi) bisogna fare particolare attenzione al tag A dove href è l'immagine grande da visualizzare nello slideshow, title è l'etichetta che verrà utilizzata come didascalia e l'elemento img punterà (tramite src) all'immagine da usare come anteprima, quindi una piccola immagine da caricare (consiglio di dimensioni molto ridotte giusto per far capire il soggetto).

Attenzione che se avete più gallerie nella stessa pagina allora dovete assicurarvi che i due id siano differenti.

4) Abilitare lightbox: Basta inserire questo codice dopo aver creato la lista di immagini da usare nella nostra (quasi pronta) galleria:

<script type="text/javascript"><!--
$(function() { $('#gallery a').lightBox({

imageLoading:'http://iltuosito/lightbox-ico-loading.gif',
imageBtnPrev:'http://iltuosito/lightbox-btn-prev.gif',
imageBtnNext:'http://iltuosito/lightbox-btn-next.gif',
imageBtnClose:'http://iltuosito/lightbox-btn-close.gif',
imageBlank:'http://iltuosito/lightboxblank.gif'

}); });
//--></script>

Naturalmente dovete sostituire i percorsi con le vostre immagini, che potete ovviamente personalizzare come volete. Salvare l'articolo e uscire.

Le immagini che utilizzo io sono queste:

• lightbox-ico-loading.gif:
• lightbox-btn-prev.gif:
• lightbox-btn-next.gif:
• lightbox-btn-close.gif:

5) Inserire lo stylesheet del lightbox: potete benissimo personalizzarlo o rifarlo da capo quello che ho usato io è questo:

#jquery-overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; }
#jquery-lightbox { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#lightbox-container-image { padding: 10px; }
#lightbox-loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#lightbox-nav { position: absolute; top: 0; left: 0;    height: 100%; width: 100%; z-index: 10; }
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext { width: 49%; height: 100%;    zoom: 1; display: block; }
#lightbox-nav-btnPrev { left: 0; float: left; }
#lightbox-nav-btnNext {     right: 0; float: right; }
#lightbox-container-image-data-box { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em;
    overflow: auto; width: 100%; padding: 0 10px 0; }
#lightbox-container-image-data { padding: 0 10px;  color: #666; }
#lightbox-container-image-data #lightbox-image-details {  width: 70%; float: left; text-align: left; }
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber { display: block; clear: left; padding-bottom: 1.0em;    }            
#lightbox-secNav-btnClose { width: 66px; float: right; padding-bottom: 0.7em; }
#gallery { background-color: #fff; padding: 10px; width: 520px; }
#gallery table { align: center; }
#gallery tr, td { align: center; }
#gallery img { border: 5px solid #c0c0c0; border-width: 5px 5px 20px; }
#gallery a:hover img { border: 5px solid #FFF8B2; border-width: 5px 5px 20px; color: #FFF8B2; }
#gallery a:hover { color: #FFF8B2; }

Da inserire ovviamente in Blogger > Layout > Modifica HTML, una volta qui spuntate la voce "Espandi i modelli widget" e copiate il contenuto in un editor di testo (esempio notepad).

Per chi volesse invece una struttura tableless è possibile sfruttare gli elementi ul e li, la modifica risulta molto veloce. Ad esempio al posto delle righe #gallery, #gallery table e #gallery tr, td potete scrivere qualcosa del tipo:

#gallery { background-color: #22201d; padding: 5px ; width: 98%; clear:both; margin:0 auto;}
#gallery ul{ margin:0 auto; padding:0; clear:both;}
#gallery li { display:inline; padding:5px;margin:0 auto;border:0; }

Ovviamente, anche il codice html della gallery cambierà in particolare fare riferimento al punto 3) Inserire le immagini per vedere le differenze html.

Adesso non vi resta che cercare questo elemento che solitamente è presente e contiene il codice CSS che utilizza il blogger:

<b:skin><![CDATA[/*

....

]]></b:skin>

Dove ci sono i puntini ovvimanete avrete il codice e proprio lì dentro facendo attenzione a non metterlo a casaccio copierete le righe CSS precedenti. Finito, finalmente avete abilitato la galleria per il vostro articolo. Questi passi (tranne il 5) sono da ripetere tutte le volte che vorrete mettere una galleria in un vostro articolo, esiste la possibilità di evitarsi i punti 1 e 2 ma in questo caso il codice contenuto nel tag script in entrambi i casi va inserito subito dopo l'elemento skin che avete modificato per metterci il codice CSS. In quel caso sarà sempre disponibile e non vi resterà che compiere il passo 3 e 4.

Ciao e buona galleria.

Collegamenti esterni: jQuery | jQuery lightBox | Esempio su ondare

Per questi esistono diverse soluzioni "tutti in uno" che permettono di risparmiare tempo e fatica concentrando tutti questi codec in un unico programma da installare.

Quello che vi consiglio e che tuttora uso è CCCP, il suo ultimo aggiornamento risale al 21 ottobre 2008. La sigla sta per Combined Community Codec Pack, cosa credevate?

La procedura di installazione è abbastanza semplice:

• bisogna andare sul sito ufficiale CCCP Project (dove - se ancora ne avevate - risolverete eventuali dubbi sulla "casuale" sigla CCCP)
• scaricare il programma di installazione
• installarlo dove si vuole
• e dopo questa lunghissima procedura abbiamo finalmente finito

Ora possiamo ufficialmente sederci in poltrona o sul letto e gustarci lo spettacolo.
Voglio, però continuare questa breve recensione con alcune informazioni in più.

Fra i benefici e gli intenti degli sviluppatori possiamo trovare queste caratteristiche:

• Evitare o almeno minimizzare i problemi dovuti a incompatibilità fra i codec
• Garantire uno standard per riprodurre video per la comunità "anime"
• Permettere la riproduzione di tutti formati e i files multimediali che sono in circolazione
• Essere semplice da installare, disinstallare e aggiornare per tutti gli utenti
• Essere di dimensioni contenute e contenere solo quello che serve per visualizzare i video

Per chi volesse maggiori informazioni su questo programma può approfondire il discorso andando sull'ormai onnipresente wikipedia proprio alla pagina riservata al CCCP (in inglese).

Comunque è interessante vedere come questo progetto nato inizialmente per riprodurre filmati di anime fansubbati e mantenuto da alcuni di questi gruppi di fansubbing, sia in realtà evoluto fino a diventare un vero e proprio tocca sana per chi - come me - a volte si trova a corto di voglia e una soluzione tutto incluso risulta molto gradita!

Il pacco CCCP contiene anche il codec per il formato Matroska, molto usato per anime e non solo, oltre ai più noti MPEG-2, DivX, XviD, H.264/MPEG-4 AVC, WMV9, FLV1, Theora e Generic MPEG-4 ASP (3ivx, lavc, etc).

Anche per quanto riguarda l'audio vengono supportati la maggior parte dei codec famosi, fra i quali MP1, MP2, MP3, AC3, DTS, AAC, Vorbis, LPCM, FLAC, TTA e WavPack.

A questo indirizzo potete trovare la wiki ufficiale, considerate che potete seguire eventualidiscussioni su questo progetto anche attraverso il loro forum.

L'unica pecca è che il codec è installabile solo su sistemi Windows, se non è un problema provatelo e vi ritroverete soddisfatti.

Collegamenti esterni: Xvid | DivX | CCCP | CCCP (wikipedia in inglese) | wiki ufficiale | forum ufficiale

In parole povere chi aggrega:

- non deve scrivere dei post (alcuni comunque lo fanno proprio per una indole da blogger)
- raccoglie molte informazioni
- è difficile verificare tutte le notizie e le fonti, soprattutto se non è tematizzato
- può concentrarsi sulla parte di gestione e pubblicazione dei post
- può anche permettersi una buona gestione dei commenti e di valutazione da parte degli utenti per deciderne il peso durante le ricerche interne
- può stilare delle classifiche per incentivare i blogger più accaniti
- può ottenere un ritorno economico forte di molte visite dovuto ai tanti contenuti
- può permettersi di filtrare o meno una notizia se di argomento non consono al buon gusto o se viola le regole di aggregazione
- ha a disposizione una community e persone che seguono le notizie molto più corposa
- teoricamente, ha un pagerank maggiore per quanto riguarda le pagine pubblicate e i contenuti a disposizione

E per quanto riguarda i pubblicatori? bhè indubbiamente gli aggregatori, soprattutto quelli di un certo peso, offrono una ottima vetrina e, anzi, possono veramente allargare la popolarità di un blog. D'altro canto è anche vero che un blogger:

- dovrà concentrarsi sui contenuti e soprattutto rendere le prime righe molto accattivanti e interessanti, soprattutto il titolo, perché molti siti agreggano le prime righe.
- dovrà curare la pagina principale perché fra le immagini disponibili molti visualizzano proprio la homepage come frontespizio
- il contenuto video e fotografico possono essere anche questi oggetto di acquisizione
- dovrà farsi carico con alcuni di pingare la lettura delle ultime notizie (ossia richiedere un aggiornamento del feed) se si accorge che queste siano datate o per 'strane ragioni' (alcuni li chiamano bug?) essere saltati.
- avrà un buon ritorno se riuscirà ad apparire in cima alle classifiche (se previsto) o se otterrà una buona posizione durante le ricerche delle notizie

A dire il vero queste sono solo alcune considerazioni, sta di fatto che fin da subito ho dedicato del tempo a cercare di individuare alcuni aggregatori (e anche le directory dei blogs).

Sebbene pensavo fosse molto più semplice entrare nelle 'grazie' di questi servizi mi sono accorto che non è sempre così scontato e a volte ci si scontra davvero contro problemi oppure contro insoddisfazioni generali.

Di seguito quindi voglio stilare una piccola lista con quelli da me provati e soprattutto darvi le mie impressioni, valutando dove possibile il servizio offerto (sono tutti servizi gratuiti cosa da non sottovalutare affatto, anche se - certo - molti guadagnano sulla pubblicità..):


ilbloggatore.com mi ha sorpreso per la sua velocità di aggregazione, il migliore. Soprattutto mi è piaciuto il contatto immediato con lo staff de "il bloggatore" molto disponibile e cordiale, visto che trattano solo argomenti di informatica e io no, abbiamo concordato un feed specifico. Ogni volta che pubblico un articolo me lo ritrovo abbastanza velocemente sul loro sito (chiaramente è un beneficio per entrambi no?). Proprio perché mi ha sorpreso piacevolmente - sarà un caso se è il primo antipixel? - voglio muovergli delle critiche costruttive. Secondo la mia opinione deve aggiornare il layout e lo schema dei colori usati, risulta indietro rispetto ai concorrenti sebbene dal punto di vista del servizio non abbia nulla da invidiare, anzi per alcuni... Deve prevedere una pagina, tipo semplice bacheca, dove raccogliere alcuni dati sui blog (che già ha nel database) e una top list dei blog più cliccati. Per il resto resta il mio preferito, soprattutto perché tratta di argomenti legati alla informatica e perché la gentilezza su internet non è così scontata e quando è unita all'efficienza a me piace (dovrei forse chiedere una ricompensa? quasi quasi..).

blogcatalog.com completamente in inglese, anche se permette l'impostazione della lingua e della nazione in modo da rendere le ricerche localizzate se si vuole evitare di incappare in blog stranieri o di lingue sconosciute. La grafica è gradevole senza appesantire, la pubblicità risulta abbastanza ben dosata e contenuta e il riferimento alla fonte mi sembra comunque adeguato. Ogni utente che registra una fonte ha poi una dashboard e una bacheca pubblica con la propria homepage, peccato che non venga aggiornata spesso come nel mio caso. Un ottimo servizio da tenere in forte considerazione, anzi se non vi siete iscritti.. di corsa hop hop hop.

bloghissimo.it non ha inserito il mio blog, non c'è la possibilità di ricercare il proprio blog se è presente o in che classifica si trovi. Non evidenzia la fonte, anzi tende a rendere tutto omogeneo e a pensar male ci aggiungo che lo fa per tenersi il traffico sul suo sito senza restituirlo a chi quel post l'ha scritto. Se si entra nella notizia ti apre un bell'iframe dove mette il blog e sulla sinistra una pubblicità con la possibilità di votare la notizia.
Non mi piace è troppo improntato all'oscuramento della fonte cercando di trarne il massimo beneficio (economico ovviamente), ma sono pronto a ricredermi se mi dimostrano il contrario.

aggregatore.com i tempi di iscrizione si sono rivelati abbastanza lunghi, è anche vero che al secondo invio sono passati solo pochi giorni il che mi fa pensare a un problema non legato alla loro piattaforma. Aggregatore è un buon servizio, consigliato vivamente, tra le pecche mancano i link alla pagina principale ad esempio se si naviga fra le fonti iscritte e le notizie aggregate, per tornare alla pagina principale è quindi necessario cliccare sulla scritta/logo aggregatore in alto oppure agire sulla addressbar del browser. Un ottimo servizio che per ogni post non nega spazio e traffico alla fonte, mi piace!

blogtoplist.com non è un vero aggregatore anzi è solo una directory / una lista di blog inseriti però è da tenere in considerazione sia perché è gratuito e veloce iscriversi sia perché un backlink è meglio non sprecarlo visto che il sito raccoglie migliaia di fonti.

explicatum.com sebbene ondare non sia in elenco (attendo ormai risposta da diverso tempo) resta a mio avviso un buon servizio anche se il nome assomiglia a una magia degna di Harry Potter.. explicatuuuumm!! La grafica è essenziale ma efficace e soprattutto la pubblicità non è troppo invadente il che lascia spazio al contenuto, ai voti o agli eventuali commenti. Gradevole e consigliato sicuramente (sperando che vi aggiungano). Se devo muovere delle critiche, ehm a parte la mia iscrizione - ok ok la smetto - devono potenziare la grafica e avere un maggior rapporto con le proprie fonti perché sono loro che gli generano il traffico.

technorati.com è molto popolare, non ha bisogno di tante presentazioni, diventata una icona per il mondo 'aggregato' rende ogni sito una parte integrante della loro community. Offre una immagine della pagine principale del sito (anche in questo caso molto datata) senza apparente possibilità di aggiornarla, offre la possibilità di ricercare i posts/blog più popolari. Proprio perché molto famoso è importante iscriversi e avere un ritorno (poco o tanto lo faranno alla fine i nostri contenuti). Consigliato.

liquida.it è un altro aggregatore italiano, ben fatto, grafica molto bella e una attività sia nel loro blog che fuori molto buona. Nel complesso un ottimo servizio (gratuito) che resta sicuramente un must. Richiedono, come gli altri del resto, un antipixel posizionato nelle proprie pagine. Proprio perché è stato il primo servizio di aggregazione a cui ho aderito devo ammettere che ci sono affezionato vuoi perchè mi sembra giovanile, vuoi perché il nome è originale come ondare del resto!!

wiikio.it ancora un nome famoso, probabilmente lo conoscete meglio di me, offre una buona suddivisione delle notizie dei temi ricercabili. La grafica risulta essenziale anche in questo caso ma sicuramente gradevole. Una nota, il mio ultimo post (cioè quello prima di questo sul nofollow free) risulta associato a "il bloggatore" un altro aggregatore (meno male che me lo ha pubblicato lui) e non al mio blog iscritto.. così come non trovo gli altri miei articoli. Da approfondire meglio, non convinto anche se molto famoso!

socialblog.it anche in questo caso la mia domanda risulta ancora in fase di elaborazione, in ogni caso mi sembra un aggregatore carino senza lode ma senza infamia. Anche se, pure loro adottano al tecnica dell' iframe, stile bloghissimo.it ma non è che siete parenti??, dove mette il blog e sulla sinistra una pubblicità con la possibilità di rating della notizia.

badzu.net è un servizio on demand, per segnalare una notizia non è possibile registrare il nostro feed o il nostro blog direttamente ma sarà necessario segnalare tutte le notizie che vogliamo, anche quelle scritte da noi. Per questo motivo trovate il collegamento inserisci nuova segnalazione che vi porterà a un form da compilare (indirizzo, titolo, email, categoria ecc..). Se volete potete creare un collegamento alla pagina propri oattraverso le istruzioni date per velocizzare questo passo. Se poi, come me, siete molto pigri potete evitare di inserire il nick, l'email e il testo della segnalazione con due piccoli accorgimenti. Il primo è modificare il link che badzu stessa consiglia per fare la segnalazione come segue:

javascript:if(navigator.userAgent.indexOf('Safari') >= 0){Q=getSelection();}else{Q=document.selection?document.selection.createRange().text:document.getSelection();}location.href='http://www.badzu.net/tips/submit?action=it&segnalazione='+encodeURIComponent(Q)+'&link='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title)+'&email=ondare.blog@gmail.com&name=nickel'

Ossia aggiungendo l'email e il name di chi farà la segnalazione o l'autore del post (meglio secondo me, è più onesto!). Il secondo accorgimento è il testo della segnalazione, se volete indicare qualche riga del vostro post - meglio se le prime 2/3 - basta evidenziare col mouse queste righe e solo successivamente premere sul link che abbiamo modificato. In questo modo tutti i dati saranno pronti per essere inviati, a meno della categoria che va comunque specificata a mano. La grafica risulta molto limpida e ben curata, la pubblicità ben dosata e posizionata. Consigliato, ma attenti a non accumulare troppi posts da segnalare!!

booko è un servizio stile badzu, quindi manuale. Per le segnalazioni comunque basta il solo URL del post, la grafica non mi piace perché troppo retrò, la pubblicità fa cornice tutto intorno al sito e secondo me non è poi così integrata o bella da vedere. In ogni caso un servizio anche in questo caso facile da sfruttare e che può essere usato per allargare la popolarità / rintracciabilità del nostro blog. Un servizio consigliato, ma evito di dirvi la pronuncia esatta (la trovate però in testata al sito e se lo dice l'autore!)



In generale è buona norma iscriversi a questi servizi per acquisire popolarità, certo è che molti - soprattutto quelli non inseriti - hanno una tendenza a guadagnarci soltanto e fra questi c'è sicuramente "blog.ai-net.it" basato su google coop a cui aggiunge il nostro link, solo per visualizzare un annuncio.

A conti fatti quindi iscrivetevi, evitate quelli palesemente fake o poco affidabili e soprattutto monitorate i vostri posts. L'ultimo soprattutto è importante perché mi sembra che molti non importino completamente tutte le nostre notizie e se spesso su una notizia vi documentate e ci passate giorni forse è anche abbastanza seccante non poterla reclamizzare ai quattro venti.

Bhè che dire, spero che questa breve recensione sia di vostro gradimento. Buona bloggata!

Collegamenti esterni: ilbloggatore.com | blogcatalog.com | bloghissimo.it | aggregatore.com | blogtoplist.com | explicatum.com | technorati.com | liquida.it | wiikio.it | socialblog.it | badzu.net | booko