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

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)

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

- allora non tutte le banche sono uguali (ovvio?) un aumento minimo dello spread (il guadagno "teoricamente" effettivo della banca) può portare tranquillamente a 50€ in più al mese.

- dalla offerta più bassa a quella più alta per un tasso fisso passa una differenza di 100€ al mese senza troppi sforzi per un mutuo medio (purtroppo non sto scherzando, dopo 30 anni sono almeno 36000€ e io questi soldi me li voglio tenere)

- una buona scelta può essere poste italiane in questo momento che offre diverse agevolazioni e condizioni speciali per abbassare lo spread fino a 0.90% ma se - invece - non avete agevolazioni considerate anche banche tipo BNL, MPS e CARIPARMA hanno buoni tassi ma prima di andare da queste andate dalle altre cercate di spuntare già lì un buon prezzo che userete come specchietto per le allodole a queste 3 (che ho messo in ordine in cui io ci andrei).

- attualmente un buon spread viste le varie offerte valutate è sotto il 1.15% attenti perchè non è solo questo da guardare!! è solo UN parametro (importante) ma guardate anche l'ISC (il nuovo TAEG)!! Soprattutto molti offrono uno spread basso a condizioni più ristrette, tipo durata inferiore e un basso capitale erogato alla minima variazione di queste condizioni lo spread schizza su, fate attenzione.

- portatevi un foglio con scritto su i vari tassi per EURIBOR o EURIRS così potrete SUBITO vedere lo spread perchè alla domanda di quanto effettivamente è lo spread, alcuni mi han risposto .. "no ma noi calcoliamo solo il tasso finito" e a quel punto noi toglieremo l'indice e diremo.. thò.. spread del 1.9% non è forse alto? ;)

Ecco una lista delle cose - secondo me - da chiedere sempre:

• modulo ESIS (documento per la condotta di trasparenza!)
• spese rinegoziazione
• spese sostituzione
• spese / costo di preammortamento (se vi serve)
• spese assicurative obbligatorie
• spese polizze non obbligatorie ma incluse
• costi perizia
• costi di istruttoria
• imposta sostitutiva
• se è obbligatorio avere il conto corrente domicialiato da loro
• spese di tenuta conto
• eventuali vincoli su conti correnti
• eventuali fidi attivabili
• penali di estinzione / costi di chiusura pratica e mutuo (non si sa mai)
• maggiorazione degli interessi di mora
• dopo quanto ritardo si è morosi
• frequenza della rata
• tipo indice usato (se è variabile e scelgono EURIBOR3MESI bisogna pagare ogni 3 mesi altrimenti per i mensili è quello a 1MESE, stop!)
• indice usato effettivamente (EURIRS, EURIBOR, BCE)
• spread netto (solo lo spread netto, il loro guadagno anzi uno dei loro guadagni, qui anche se vi sembra poco diverso dalle altre banche fa una grande differenza dopo metto dei casi)
• TAEG o ISC (INDICE SINTETICO DEI COSTI) ecco il parametro di riferimento per eccellenza fatevelo conteggiare (non il TAN ma questo soprattutto!!)
• TASSO FINITO / TAN quello che molti spacciano per TAEG perchè lo chiamano tasso finito ma che proprio finito non è a mio avviso..
• numero rate (30 anni x 12 mesi = 360)
• spese per riscossione rata (in media da 0 a 1.5 euro al mese, le poste 0€)
• importo rata
• capitale erogato netto!
• eventuali agevolazioni (ad esempio alcuni danno la possibilità di bloccare la rata per 3 mesi una volta nella vita del mutuo, altri una copertura ecc.. altri niente)
• in che modo varia lo spread rispetto al rapporto fra capitale e importo richiesto (in media sopra 80% meglio non andarci se si può, altrimenti si pagano delle maggiorazioni.. cornuti e mazziati in pratica)

Io delle domande sopra ho fatto e stampato diverse copie in forma tabellare poi vado lì, tiro fuori il foglio e inizio a chiedere.. tutto! Non importa se ci vuole minimo un 1h e mezza in confronto a quanto si risparmia.

Detto questo vi porto alcuni esempi per farvi capire perchè è importante prendersi tutto il tempo necessario quando si è in banca (spero di non sbagliare .. nel caso correggetemi pls :P) per semplicità stesse condizioni, stesse spese accessorie e stesse polizze quindi considero il tasso finito dato da INDICEIRS+SPREAD (e non il TAEG che sarebbe anche più corretto da usare ma per fare questa prova va bene anche solo il TAN):

1. un mutuo fisso indice IRS 30 anni 3,630, capitale erogato netto 100000 con spread 2.1% si ha una rata di 582€ (Usciamo dalla banca)
2. un mutuo fisso indice IRS 30 anni 3,630, capitale erogato netto 100000 con spread 1.8% si ha una rata di 563€ (Usciamo dalla banca)
3. un mutuo fisso indice IRS 30 anni 3,630, capitale erogato netto 100000 con spread 1.2% si ha una rata di 526€ (Da molti considerato buono)
4. un mutuo fisso indice IRS 30 anni 3,630, capitale erogato netto 100000 con spread 0.9% si ha una rata di 508€ (E con solo lo 0.3% in meno dal buono)

Come si vede la differenza massima è di 75€ quindi a essere pignoli : 75 euro x 12 mesi x 30 anni = 27000 euro e questo è solo per 100000, per mutui di 200000 euro si arrivano a differenze di 150€ al mese, quindi dopo 30 anni un disavanzo di 54000 eurozzi puliti puliti, esatto esatto 54.000€.

Alcuni strumenti e collegamenti utili per calcolare e confrontare i tassi:

Calcolatrice mutuo
Andamento grafico Eurirs 30 anni
Andamento Eurirs
Andamento Euribor

Ed ecco infine lo sfogo della formica quando si inc.. nell'essere io: scrivo questo post perché le bande .. oops scusatemi ... le banche creano troppa confusione (voluta?) e non bisogna arrendersi girate guardate e quando troverete quello buono, tornate pure dalle banche dicendo e ora? niente? ciao! e girate .. si sprecano diverse mezze giornate ma le cifre non sono poche!! anche solo avere risparmiato dopo 30 anni 15000 euro - ma sono di più - significa lasciare 15000 euro in più ai figli! o per i problemi gravi! o per andare a berseli tutti a Tahiti alla facciazza mia poco importa, sono soldi nostri non loro! giù le zampe.. o ve le taglio!

Siamo noi che facciamo il mercato, noi siamo la domanda voi siete solo l'offerta ;)

Ok, fine sfogo! Spero vi possa aiutare.

Collegamenti esterni: calcolatrice mutuo | Andamento grafico Eurirs 30 anni | Andamento Eurirs | Andamento Euribor

L'articolo originale in lingua inglese lo trovate sul sito di Jeremy Martin ma di seguito vi inserisco una traduzione libera con tutto il codice, esempi funzionanti e funzioni utilizzate. Buona lettura!



Titolo: Costruire il tuo primo plugin jQuery (Jeremy Martin)

L'architettura di jquery è così ben pensata e friendly che è possibile creare il proprio plugin molto facilmente. Prima di tutto è indispensabile avere preso confindeza col codice jQuery, sapere quindi bene la sintassi, le potenzialità e soprattutto cosa si vuole ottenere dal plugin (anche solo questo punto non è poi così semplice come sembra, ndt).

Questo tutorial passerà attraverso tutti i punti della creazione del tuo primo plugin, come esempio viene creato un plugin in grado di visualizzare il consiglio o messaggio del giorno da poter inserire nella propria pagina principale. Questo plugin dovrà troncare il messaggio a una specifica lunghezza se necessario e tramite un link espandere l'intero contenuto. Eccovi un esempio funzionante:

Da notare che se Javascript risulta disabilitato (o non supportato) il contenuto sarà visualizzato interamente (quindi pienamente accessibile, ndt).
Ok iniziamo..

step 1
il primo passo è implementare in jQuery la funzione che vogliamo aggiungere. Nel nostro caso, la funzionalità di troncare "truncate". Così prima di tutto bisogna creare un file jquery.truncate.js dopodichè è possibile aggiungere il codice per estendere questa funzionalità, ossia:

$.fn.truncate = function(options) {  
  
   return this.each(function() {  
  
   });  
};  

Ora, se hai programmato con altri frameworks o hai una certa esperienza con jQuery sicuramente saprai che non sempre è possibile usare il $ come alias, perchè potrebbe risultare in conflitto con altri frameworks. Questo è parzialmente vero, per non incappare in questo problema è necessario ritoccare la definizione precedente permettendo di utilizzare un differente alias.
In pratica è sufficiente:

(function($){  
 $.fn.truncate = function() {  
  
    return this.each(function() {  
  
    });  
 };  
})(jQuery);

step 2
prima di continuare nella scrittura del nostro plugin è consigliato creare una pagina di prova per provare il plugin di volta in volta. Quindi, creiamo una pagina whatever_you_want.html e inseriamo il codice seguente come esempio:

<html>  
<head>  
 <title>Truncation Plugin Test</title>  
 <script src="js/jquery.js" type="text/javascript"></script>  
 <script src="js/jquery.truncate.js" type="text/javascript"></script>  
   
 <script type="text/javascript">  
  $().ready(function() {  
   $('.tip').truncate();  
  });  
 </script>  
</head>  
<body>  
 <div class="tip" style="width:200px;background-color:#ccc;padding:10px;">  
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit,  
  odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum,  
  feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. Vestibulum eget lectus et ligula hendrerit  
  pharetra. Sed porta justo ac nisl. Aliquam nisi erat, pellentesque sed, sagittis eu, fringilla sit amet,  
  dolor. Nam ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh  
  ac massa. Integer eu tortor. Aenean convallis quam at nunc. Nunc mollis tincidunt nisi. Suspendisse mauris  
  odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque at elit. In hac habitasse platea dictumst.  
 </div>  
</body>  
</html>  

Guardando il codice è possibile notare che sono presenti sia la libreria jQuery sia quella da noi creata (ossia jquery.truncate.js) entrambe sono presenti in una cartella js. Nello script successivo abbiamo invocato il metodo che abbiamo definito nella classe, anche se di fatto non abbiamo ancora inserito del codice nella funzione truncate.

step 3
Il prossimo passo è inserire un meccanismo per personalizzare il plugin e il suo comportamento, anche perché altrimenti non avrebbe senso creare un plugin. L'ideale sarebbe creare il plugin il più flessibile possibile, dobbiamo anche prevedere dei defaults così che l'utente non sia costretto a inserire ogni volta una lunga lista di parametri. Per fare questo possiamo usare il metodo extend di jQuery e applicandolo al nostro plugin trasformiamo il contenuto del file jquery.truncate.js in:

(function($){  
 $.fn.truncate = function(options) {  
  
  var defaults = {  
   length: 300,  
   minTrail: 20,  
   moreText: "more",  
   lessText: "less",  
   ellipsisText: "..."  
  };  
  var options = $.extend(defaults, options);  
      
  return this.each(function() {  
  
  });  
 };  
})(jQuery);  

I default inseriti sono sufficienti per visualizzare l'esempio, di conseguenza per ora non modificheremo nessuno di questi parametri ma lo faremo alla fine per dimostrarne la funzionalità.

step 4
Prendendosi cura e il tempo necessario epr eseguire tutti i passi precedenti è possibile iniziare a scrivere il codice funzionale, il vero è proprio core del nostr o plugin. Guardando l'ultimo blocco di codice si vede che viene restituito this.each( ... )

Questa linea eseguirà una funzione per ogni elemento dell'array jQuery passato. Così, se per esempio noi chiamiamo $('p').truncate() il codice che scriveremo verrà eseguito su tutti i tag p presenti!!

Dal momento che ipotizzo una certa conoscenza di jQuery, non vi mostrerò nel dettaglio come vengono gestite attualmente le chiamate ai metodi e alle funzioni. Se qualcosa nel codice non è chiaro bisognerebbe far riferimento alla documentazione. Per completare il plugin viene implementato proprio la linea this.each( ... ) aggiungendoci il codice necessario per far funzionare il nostro plugin di esempio:

(function($){  
 $.fn.truncate = function(options) {  
      
  var defaults = {  
   length: 300,  
   minTrail: 20,  
   moreText: "more",  
   lessText: "less",  
   ellipsisText: "..."  
  };  
    
  var options = $.extend(defaults, options);  
      
  return this.each(function() {  
   obj = $(this);  
   var body = obj.html();  
     
   if(body.length > options.length + options.minTrail) {  
    var splitLocation = body.indexOf(' ', options.length);  
    if(splitLocation != -1) {  
     // truncate tip  
     var splitLocation = body.indexOf(' ', options.length);  
     var str1 = body.substring(0, splitLocation);  
     var str2 = body.substring(splitLocation, body.length - 1);  
     obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText +   
      '</span>' + '<span  class="truncate_more">' + str2 + '</span>');  
     obj.find('.truncate_more').css("display", "none");  
       
     // insert more link  
     obj.append(  
      '<div class="clearboth">' +  
       '<a href="#" class="truncate_more_link">' +  options.moreText + '</a>' +   
      '</div>'  
     );  
  
     // set onclick event for more/less link  
     var moreLink = $('.truncate_more_link', obj);  
     var moreContent = $('.truncate_more', obj);  
     var ellipsis = $('.truncate_ellipsis', obj);  
     moreLink.click(function() {  
      if(moreLink.text() == options.moreText) {  
       moreContent.show('normal');  
       moreLink.text(options.lessText);  
       ellipsis.css("display", "none");  
      } else {  
       moreContent.hide('normal');  
       moreLink.text(options.moreText);  
       ellipsis.css("display", "inline");  
      }  
      return false;  
       });  
    }  
   } // end if  
     
  });  
 };  
})(jQuery);  

Ti accorgerai che ovunque ho avuto la necessità di selezionare un elemento all'interno del plugin, ho sempre usato obj come contesto (per esempio moreLink = $('.truncate_more_link', obj)). Questo è necessario per limitare le selezioni nell'attuale elemento troncato, senza avresti dei risultati imprevedibili.

Ecco, questo è il vostro primo plugin! Anche se, non abbiamo completamente finito dal momento che vi avevo promesso di mostrarvi come modificare le opzioni predefinite.

Nell'esempio successivo - infatti - ogni opzione è stata sovrascritta, anche se era comunque possibile modificare solo una o più opzioni a seconda delle necessità.

$().ready(function() {  
 $('.tip').truncate( {  
  length: 120,  
  minTrail: 10,  
  moreText: 'show more',  
  lessText: 'show less',  
  ellipsisText: " [there's more...]"  
 });  
});  

E' sufficiente sostituire lo script precedente nella pagina di test ottenendo quindi:

<html>  
<head>  
 <title>Truncation Plugin Test</title>  
 <script src="js/jquery.js" type="text/javascript"></script>  
 <script src="js/jquery.truncate.js" type="text/javascript"></script>  
   
 <script type="text/javascript">  
$().ready(function() {  
 $('.tip').truncate( {  
  length: 120,  
  minTrail: 10,  
  moreText: 'show more',  
  lessText: 'show less',  
  ellipsisText: " [there's more...]"  
 });  
}); 
 </script>  
</head>  
<body>  
 <div class="tip" style="width:200px;background-color:#ccc;padding:10px;">  
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit,  
  odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum,  
  feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. Vestibulum eget lectus et ligula hendrerit  
  pharetra. Sed porta justo ac nisl. Aliquam nisi erat, pellentesque sed, sagittis eu, fringilla sit amet,  
  dolor. Nam ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh  
  ac massa. Integer eu tortor. Aenean convallis quam at nunc. Nunc mollis tincidunt nisi. Suspendisse mauris  
  odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque at elit. In hac habitasse platea dictumst.  
 </div>  
</body>  
</html>  

Questo codice produrrà un risultato leggermente diverso dal primo mostrato, eccovi l'esempio funzionante:


Questo è quanto, complimenti il vostro primo plugin è pronto per essere utilizzato!

Collegamenti esterni: jTruncate Plugin (jeremymartin.name) | jTruncate Plugin (jQuery.com) | jTruncSubstr Plugin (jQuery.com) | Tutorial originale (jeremymartin.name, in inglese) | jQuery

Questo tutorial è molto interessante perché mostra delle funzionalità di jQuery come creare dei floating dialog, avvisi per l'utente o anche solo del contenuto per ricordare eventi, inviare email, inserire una opinione etc.

Prima di tutto abbiamo bisogno di alcune librerie esterne che non sono vitali concettualmente per il tutorial ma solo al fine di utilizzare o manipolare l'esempio, queste sono:

jQuery Form Plugin
jQuery Interface Plugin

Nell'esempio verrà spiegato come creare un form per salvare le preferenze.

Prima di tutto, dobbiamo creare il form per salvare le impostazioni. Associamo #layer1_form come attributo id del form (id = 'layer1_form') e creiamo una serie di componenti per simulare le preferenze:

<form id="layer1_form" method="post" action="save_settings.php"> 
    Display Settings<br /> 
    <input type="radio" name="display" checked="checked" 
value="Default" /> 
    Default<br /> 
    <input type="radio" name="display" value="Option A" /> 
    Option A<br /> 
    <input type="radio" name="display" value="Option B" /> 
    Option B<br /><br /> 
    Autosave settings<br /> 
    <input type="radio" name="autosave" checked="checked" 
value="Enabled" /> 
    Enabled<br /> 
    <input type="radio" name="autosave" value="Disabled" /> 
    Disabled<br /><br /> 
 
    <input type="submit" name="submit" value="Save" /> 
</form> 

nel nostro esempio abbiamo due impostazioni, una per visualizzare delle impostazioni e l'altra per eseguire l'auto salvataggio delle preferenze.

Comunque, visto che dobbiamo visualizzare il form in una dialog mobile dobbiamo identificare il layer che risulterà essere il contenitore spostabile ad esempio con #layer1 (questo vuol dire associare il suo id a 'layer1').

Bisogna a queso punto definire un handle delle finestra dove sarà possibile premere per eseguire lo spostamento, in modo analogo definiamo un id #layer1_handle.

Il passo successivo consiste nel rendere disponibile un pulsante per la chiusura, l'esempio mostra un testo però è facilmente modificabile con una immagine o con un pulsante. In questo caso il link viene marcato e identificato con #close.

Di seguito il codice per creare il form sopra descritto:

<div id="layer1"> 
    <div id="layer1_handle"> 
            <a href="#" id="close">[ x ]</a> 
            Preferences 
    </div> 
    <div id="layer1_content"> 
        <form id="layer1_form" method="post" action="save_settings.php"> 
            Display Settings<br /> 
            <input type="radio" name="display" checked="checked" 
value="Default" /> 
            Default<br /> 
            <input type="radio" name="display" value="Option A" /> 
            Option A<br /> 
            <input type="radio" name="display" value="Option B" /> 
            Option B<br /><br /> 
            Autosave settings<br /> 
            <input type="radio" name="autosave" checked="checked" 
value="Enabled" /> 
            Enabled<br /> 
            <input type="radio" name="autosave" value="Disabled" /> 
            Disabled<br /><br /> 
 
            <input type="submit" name="submit" value="Save" /> 
        </form> 
    </div> 
</div> 

Per verificarne il funzionamento lato server si è deciso di stampare semplicemente le impostazioni scelte tramite una semplice classe php, ossia save_settings.php:

<b>Preferences:</b><br /> 
Display Setting: 
<?php echo htmlspecialchars($_POST['display'], ENT_QUOTES); ?><br /> 
Autosave Setting: 
<?php echo htmlspecialchars($_POST['autosave'], ENT_QUOTES); ?><br />

Ora che abbiamo definito il form e la classe server, che riceve i dati, dobbiamo definire l'uscita alla chiamata Ajax che mostrerà la risposta. Per questo motivo viene creato un nuovo container identificato con #content.

Inizialmente conterrà un pulsante per impostare le preferenze e quando il form verrà eseguito correttamente verrà sostituito proprio con la risposta Ajax:

<div id="content"><input type="button" id="preferences" 
value="Edit Preferences" /></div> 

A questo punto bisogna implementare le funzioni jQuery e agganciare i plugin.
Prima di tutto, dobbiamo importare le librerie inserendelo nel tag head del nostro documento:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="interface.js"></script> 
<script type="text/javascript" src="jquery.form.js"></script> 

Una parte importante, spesso sottovalutata, è quelal di caricare le funzioni e il codice jQuery dop oaver definito tutta la parte DOM soprattutto dopo il rendering così da avere tutti i componenti disponibili e funzionali, questo è facilmente assicurato se si usa la funzione $(document).ready( ... ) come nell'esempio seguente:

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
        //jQuery events go here 
    } 
<script> 

Viene definito un wrapper con id #layer1 del nostro form coem una finestra draggabile con alcune impostazioni (fra le quali uno z-index di 20 e uan opacità di 0.7 che corrisponde al 70%):

$('#layer1').Draggable( 
        { 
            zIndex:    20, 
            ghosting:false, 
            opacity: 0.7, 
            handle:    '#layer1_handle' 
        } 
    ); 

per nascondere la finestra basta nascondere proprio questo wrapper:

$("#layer1").hide(); 

menter per visualizzare la finestra quando viene premuto il pulsante associato:

$('#preferences').click(function() 
{ 
    $("#layer1").show(); 
}); 

come vedete risulta molto semplice il codice di controllo, a questo punto in modo analogo per nascondere il form quando si preme sul link #close (o come dicevamo immagine / pulsante) viene nascosto il form con questa istruzione:

$('#close').click(function() 
{ 
    $("#layer1").hide(); 
}); 

Ecco questo è tutta la parte che bisogna inserire per controllare la dialog, non resta che processare la risposta Ajax e se la richiesta viene eseguita correttamente chiudere la dialog, che nel nostro caso significa:

$('#layer1_form').ajaxForm({ 
    target: '#content', 
    success: function() 
    { 
        $("#layer1").hide();
        // se vuoi, fai qualcosa al termine della operazione
        // ....
    } 
}); 

Nei collegamenti esterni qui sotto trovate il link alla demo e la possibilità di scaricare i sorgenti completi. Questo è quanto!

Collegamenti esterni: jQuery | Form Plugin | Interface Plugin| demo | download source