Estrarre i messaggi dalla casella di posta di Facebook

Per tutti coloro che si trovano spesso con la casella della posta di Facebook, piena zeppa di messaggi, e vorrebbero magari salvarne alcuni o tutti, prima di fare un po' di pulizia, ecco un sistema veloce, seppur abbastanza grezzo e semplice, per estrarre il contenuto dei messaggi dalla mail box di Facebook.

La prima cosa da fare è trascinare il pulsante qui sotto nei propri bookmark:
(Compatibile Chrome/Safari per il momento)
Fatto ciò, dobbiamo aprire la sessione di messaggi che ci interessa estrarre ed assicurarci di cliccare su Messaggi precedenti (altrimenti estrarremo solo gli ultimi messaggi visualizzati) per ottenere la lista completa di tutti i messaggi scambiati tra voi e l'altro utente in quella sessione.
Ora, clicchiamo sul nostro segnalibro appena salvato ed dopo un attimo (dipende dalla quantità di messaggi presenti nella sessione) comparirà sulla pagina, una piccola sezione contenente il testo di tutti i messaggi nel formato NOME UTENTE (DATA MESSAGGIO): TESTO MESSAGGIO.
Non ci resta che richiamare il menu a comparsa, cliccando con il tasto destro del mouse su questo testo, e scegliere Seleziona tutto, quindi fare copia-incolla in un normalissimo file testuale e salvare il tutto.
Per chiudere il riquadro, basta un semplice doppio-clic in un punto qualsiasi del riquadro stesso.

Come già accennato, non è un modo molto elegante, ma ci permette di estrarre velocemente i nostri messaggi e riporli in un posto sicuro.

Un saluto a tutti! :-)

...continua a leggere...

jQuery Multimedia Portfolio 2.0 beta - Tutorial

Recentemente, ho avuto modo di poter utilizzare l'interessante Multimedia Portfolio nella sua nuova versione 2 beta, un plug-in per la famosa libreria jQuery, che ci permette di arricchire le pagine dei nostri siti, con un'accattivante quanto semplice - sia nell'utilizzo che nella preparazione del codice - galleria di immagini, ma non solo....

Multimedia Portfolio, è un plug-in che ci permette di aggiungere quel tocco in più alle nostre gallerie di immagini, dandoci la possibilità di mostrare anche video in formato FLV e direttamente da YouTube, e file audio MP3.

Il suo utilizzo è abbastanza semplice, anche se necessita di alcuni altri plug-in per jQuery, per poter funzionare correttamente. Il codice necessario al suo utilizzo è il seguente (con le opportune sostituzioni in caso di directory o versioni di libreria differenti):

<link rel="stylesheet" href="css/jquery.fancybox-1.3.0.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/multimedia-portfolio.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.swfobject.1-0-9.min.js"></script>
<script type="text/javascript" src="js/jquery.multimedia-portfolio-2.0.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.0.pack.js"></script>

e prevede l'utilizzo, oltre alla libreria jQuery (ovviamente ;-)), anche della libreria jQuery User Interface e dei plug-in per la gestione di: rotella del mouse (Mouse Wheel), filmati Flash (SWFObject), visualizzazione delle immagini (Fancy Box) ed ovviamente il plug-in questione (Multimedia Portfolio). Inoltre, è richiesto l'utilizzo di un paio di fogli di stile (i nomi dei file sono autoesplicativi) per l'aspetto della fancy box e del contenitore della galleria immagini, ed un paio di file SWF per la gestione dei player relativi a video e audio MP3.

Questo plug-in, funziona appoggiandosi ad una semplice lista non ordinata di elementi, che intendiamo andare a visualizzare nella nostra galleria, quindi prepariamo una lista di elementi:

<ul class="multimedia-portfolio">
<!-- Immagine -->
<li>
<a href="link-immagine" title="titolo-immagine">
<img src="link-miniatura" width="larg-miniatura" height="alt-miniatura" alt="" />
</a>
</li>
<!-- Filmato FLV -->
<li>
<a href="link-video" title="titolo-video">
<img src="link-miniatura" width="larg-miniatura" height="alt-miniatura" alt="" />
</a>
</li>
<!-- Audio MP3 -->
<li>
<a href="link-audio" title="titolo-audio" >
<img src="link-miniatura" width="larg-miniatura" height="alt-miniatura" alt="" />
</a>
</li>
<!-- Video da Youtube -->
<li>
<a href="http://www.youtube.com/watch?v=id-del-video" title="titolo-video">titolo-video</a>
</li>
<li>...</li>
...
</ul>

Come si può vedere, è sufficiente definire una lista non ordinata (<ul>) degli elementi che si desidera mettere a disposizione degli utenti, ed impostarne la classe a multimedia-portfolio. Fatto ciò, non ci resta che andare ad aggiungere una linea di codice JavaScript alla nostra pagina web, e cioè il classico:

<script type="text/javascript">
$(document).ready(function(){
$("ul.multimedia-portfolio").multimedia_portfolio({width: 500, baseDir: '.'});
});
</script>

Questo frammento di codice verrà solitamente posizionato alla fine della sezione <HEAD> della pagina web. Qui, dobbiamo prestare attenzione ai valori passati alla funzione multimedia_portfolio(). Il parametro width andrà a specificare la larghezza complessiva del contenitore delle immagini, mentre baseDir indicherà la directory nella quale cercare i file SWF (player_flv_maxy.swf e player_mp3_maxi.swf) precedentemente menzionati.

Et voilà! Il gioco è fatto.... beh, non proprio... dobbiamo ricordarci di effettuare alcune modifiche ai fogli di stile precedentemente importati, se la struttura delle directory del vostro sito fosse differente da quella prevista dal plug-in. Quindi, dobbiamo prima assicurarci che nel file multimedia-portfolio.css, i seguenti elementi abbiano impostato correttamente l'attributo background-image, in modo che punti alla giusta directory:

.portfolio-bg-left, .portfolio-bg-right { ... }
.portfolio-bg-bottom-left, .portfolio-bg-bottom-right { ... }
.portfolio-container .portfolio-object-border { ... }
.portfolio-container .masque-left, .portfolio-container .masque-right { ... }
.ui-slider-handle { ... }

Quindi dobbiamo controllare che nel foglio di stile jquery.fancybox-1.3.0.css, i seguenti elementi abbiano l'attributo background-image impostato sulla directory corretta:

#fancybox-loading div { ... }
#fancybox-close { ... }
#fancybox-title-over { ... }
#fancybox-title-left { ... }
#fancybox-title-main { ... }
#fancybox-title-right { ... }
#fancybox-left, #fancybox-right { ... }
#fancybox-left-ico { ... }
#fancybox-right-ico { ... }
#fancy-bg-n { ... }
#fancy-bg-ne { ... }
#fancy-bg-e { ... }
#fancy-bg-se { ... }
#fancy-bg-s { ... }
#fancy-bg-sw { ... }
#fancy-bg-w { ... }
#fancy-bg-nw { ... }

e, dato che Internet Explorer (croce e delizia di tutti i webdesigner) non poteva non renderci la vita difficile, assicuriamoci che l'attributo src del filtro progid:DXImageTransform.Microsoft.AlphaImageLoader, presente della sezione in fondo al file, dedicata ad Internet Explorer, punti anch'esso alla directory corretta.

Terminati questi passaggi, obbligatori, ma piuttosto semplici, avremo finalmente la nostra bella galleria multimediale funzionante.

Come al solito, buona programmazione e buon divertimento a tutti! ;-)

...continua a leggere...