Proprio in questi giorni (sotto consiglio…) stavo dando un’occhiata a jQuery, un’ottima libreria sullo stile di prototype.js, scriptaculous.js, mooTools, per intenderci… ed ecco che oggi tutto il sito è stato completamente ridisegnato:
Ottimo inizio per allargare i miei orizzonti su questo tipo di librerie! Prossimamente pubblicherò qualche articolo interessante, soprattutto sulle differenze tra jQuery e le altre librerie “simili”.
Rispondo alla richiesta di Yuri, che chiedeva come utilizzare il Plugin per WordPress WP Add Browser Search per aggiungere la ricerca di Google AdSense per la ricerca! Così ho rilasciato un aggiornamento del Plugin (scaricabile qui) che permette di impostare, tramite un classico pannello delle opzioni, i parametri per il file XML descrittore dello standard OpenSearch.
Il codice necessario e sufficiente per inviare una semplice email in formati HTML, tramite il comando mail() di PHP è:
1 2 3 4 5 6 7 | // preparo l'header per indicare il formato HTML $headers = "MIME-Version: 1.0\n". "Content-type: text/html; charset=utf-8\n". "From: Undolog.com <info@undolog.com>\n". "Bcc: Copia <g.fazioli@undolog.com>\n"; mail( "Destinatario <info@e-lementi.com>", "Oggetto della mail", "<p>Corpo della mail in <strong>HTML</strong></p>", $headers ); |
Apre – in beta – Skypemote.com, un progetto nato da un’idea mia e di Nicola (flussodigitale.com), che propone un semplice editor per realizzare simpatici disegni da “incollare” in Skype. L’editor è stato realizzato in Adobe Flash CS3 e, tempo permettendo, vorrei rilasciare anche una versione – desktop – Adobe AIR.
Se utilizzate Skype per “chattare”, con questo editor potrete stupire sicuramente i vostri interlocutori. Se trovate questo servizio utile e divertente, non dimenticate di contribuire con proposte, suggerimenti e – se volete – con qualche donazione!! 
Seguite il progetto perchè ci saranno prossimamente altre “simpatiche” novità.
OpenSearch è uno standard che definisce una serie di formati per la condivisione dei risultati di ricerca. Questo standard è utilizzato, ad esempio, da Social Network come Facebook, che possiedono uno proprio sistema di ricerca. Uno degli utilizzi di questo standard, per i browser che lo supportano, è la possibilità di riconoscere in automatico e quindi aggiungere, il proprio sito web o blog alla lista dei motori di ricerca presenti nel menu a tendina del browser:
Se visitate (con FireFox o Flock) il motore di ricerca Divoogle, potrete inserirlo tra i motori di ricerca presenti nel menu.
Questa operazione, tuttavia, potrebbe essere svolta manualmente selezionando “Gestione motori di ricerca…” in Firefox, ad esempio. Ma oltre ad essere un’operazione particolare, ogni utente singolarmente dovrebbe svolgere. Browser di ultima generazione, come Flock, permettono grazie allo standard OpenSearch di automatizzare questa funzione, segnalando in automatico all’utente che il sito web o blog propone un suo motore di ricerca:
Il procedimento manuale, utile per attivare questa funzione dappertutto, lo vedremo più sotto. Nel frattempo, se avete un Blog WordPress, potete installare questo semplice Plugin (wp-abs.zip) che svolge tutto il lavoro per voi. Una volta installato e attivato non dovrete configurare nulla! Caricando il vostro Blog WordPress su Firefox o Flock, troverete magicamente il vostro Blog elencato nel menu a tendina dei motori di ricerca.
Per il sorgente fate riferimento qui.
Per chi volesse svolgere l’installazione dello standard OpenSearch in modo manuale può seguire il semplice tutorial di esempio esposto qui sotto e/o fare riferimento alla documentazione presente sul sito OpenSearch.
Per segnalare la presenza di un motore di ricerca al browser è sufficiente creare un file XML sul nostro sito o Blog. Eccone ad esempio il file opensearch_desc.xml di undolog.com:
1 2 3 4 5 6 7 8 9 | <?xml version="1.0"?> <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/"> <ShortName>Undolog</ShortName> <Description>Open Search Undolog.com</Description> <Image height="16" width="16" type="image/x-icon">http://www.undolog.com/favicon.ico</Image> <Url type="text/html" method="get" template="http://www.undolog.com/?s={searchTerms}"/> <moz:SearchForm>http://www.undolog.com/</moz:SearchForm> </OpenSearchDescription> |
Come potete vedere il suo formato è abbastanza semplice. Il punto importate è la riga 7:
1 2 3 | ... <Url type="text/html" method="get" template="http://www.undolog.com/?s={searchTerms}"/> ... |
Questa indica al browser dove e come effettuare la ricerca. Normalmente, come in questo caso, WordPress usa lo standard:
1 | http://mioblog.com/?s=stringa da cercare |
Tuttavia a seconda delle esigenza, come ho fatto per Divoogle, questa parte di codice può variare. Una volta creato questo file è sufficiente inserire un tag link all’interno della sezione head della nostra home page:
1 2 | <!-- opensearch --> <link rel="search" type="application/opensearchdescription+xml" href="http://www.undolog.com/opensearch_desc.xml" title="Undolog" /> |
Tramite l’attributo rel="search", questo link segnalerà al browser (che lo supporta) dove recuperare tutte le informazioni per aggiungere il motore di ricerca.
La classe USimpleTabStrip, presentata in Unobtrusive Simple TabStrip, può essere utilizzata anche per realizzare un semplice menu Accordion.
Utilizzando gli effetti di BlindUp() e BlindDown() offerti da Scriptaculous:
1 2 3 4 5 6 7 8 9 10 | function init(){ uts = new USimpleTabStrip(); uts.Init(); uts.onShow = function(e) { new Effect.BlindDown(e); } uts.onHide = function(e) { new Effect.BlindUp(e); } } |
E riposizionando gli elementi HTML (sorgente HTML):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class="accordion"> <a href="#acc1">Accordion 1</a> <a name="acc1"></a> <div> <h1>Content #1</h1> <p>Bla bla bla....</p> </div> <a href="#acc2">Accordion 2</a> <a name="acc2"></a> <div> <h1>Content #2</h1> <p>Bla bla bla....</p> </div> <a href="#acc3">Accordion 3</a> <a name="acc3"></a> <div> <h1>Content #3</h1> <p>Bla bla bla....</p> </div> </div> |
Si ottiene un semplice menu Accordion che può essere utilizzato in modo estremamente rapido.
Se c’è una cosa che Mozilla sa fare bene sono i browser!
Flock è un browser con tutta una serie di funzioni per i social network e i blog. Disponibile per Mac, Linux e Windows propone una nuova esperienza di navigazione a chi, come me, possiede diversi account nei social network (FaceBook, Twitter, YouTube, … ) e vuole anche gestire i Feed RSS in modo armonico e rapido.
Se avete FireFox (che non dovete disinstallare) tutte le vostre impostazioni possono essere trasferite in Flock durante il primo utilizzo: cookie, password, preferiti, tutto insomma. Dopo aver utilizzato Flock per qualche minuto, mi è venuto spontaneo rimuovere l’ottimo FeedReader, ormai inutile vista l’eccellente gestione dei Feed di Flock.
Oltre a possedere numerose caratteristiche simili a FireFox, cosa che lo rende immediatamente fruibile, Flock permette:
In Actionscript 3.0 for beginners: lesson #1 abbiamo visto i passi necessari per la creazione di un progetto in Flash CS3. Così mi è venuta l’idea di automatizzare, in qualche modo, questo processo grazie alle caratteristiche di Adobe AIR.
USimpleTabStrip è un Unobtrusive Javascript in grado di migliorare i classici link anchor (ancora) all’interno di una pagina HTML. Questo sorgente è un miglioramento della funzione presentata in Unobtrusive Tabstrip. In questa versione oltre ad allineare il codice alle release 1.6 di prototype.js è stata creata una vera e propria classe per gestire i TabStrip. La release qui presentata è molto semplice e lineare. Il suo principale lavoro risiede nell’aggiungere un evento click ai normali link anchor. Non sono inoltre presentati stili CSS, proprio per lasciare la massima libertà d’azione; tuttavia è possibile ottenere un efficace TabStrip con poche righe di codice CSS aggiuntivo; vedi Aggiungere degli stili CSS più sotto.
La classe USimpleTabStrip lavora su un HTML molto semplice, sftuttando gli anchor (<a name></a>):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!-- Semplice lista di link all'interno della pagina --> <ul> <li><a href="#tbs1">Link 1</a></li> <li><a href="#tbs2">Link 2</a></li> <li><a href="#tbs3">Link 3</a></li> </ul> <!-- Blocchi/tabs --> <a name="tbs1"></a> <div> <h1>Scheda #1</h1> <p>Bla bla bla....</p> </div> <a name="tbs2"></a> <div> <h1>Scheda #2</h1> <p>Bla bla bla....</p> </div> <a name="tbs3"></a> <div> <h1>Scheda #3</h1> <p>Bla bla bla....</p> </div> |
Il tag div subito sotto l’anchor a funziona da contenitore.
In data 26 gennaio 2009 sono stato contattato dal responsabile del personale di Pixelfabrica che molto onestamente e con rara sincerità mi ha spiegato il motivo dell’errata “clonazione” del sito, ciò che è accaduto, scusandosi e dando immmediatamente inizio alla revisione “corretta” del sito Pixelfabrica. Come già avevo sottolineato nel post, trovare ispirazione in altri lavori Web non è certo un crimine, anzi. In alcuni casi può risultare addirittura gratificante. Quello che mi aveva colpito maggiormente era stato il comportamento di Google Analytics, che non si era assolutamente accorto del “doppio” codice utente presente contemporaneamente su due Web diversi (sia per IP che per Referer).
Comunque sia ringrazio Pixelfabrica per la rettifica e l’onesta ammissione e giuro che questa non è un’operazione di Viral Marketing 
Oggi stavo dando un’occhiata ai report generati da Google Analytics quando osservando alcune pagine del mio sito e-lementi.com mi accorgo di una serie di “strani” link:
Chi diavolo è PixelFabrica? Come diavolo è finito quel link sulle statistiche? Ho un virus?! Così cerco su Google e vado a capitare su:
Incredibile! Mi hanno copiato il “vecchio” (vedi anche: Case Study) Layout…!! Non solo hanno copiato il layout nel senso grafico… dopotutto è più che normale ispirarsi a lavori altrui. Ma costoro hanno proprio copiato il codice! Dall’HTML al CSS. Tra l’altro non sono stati nemmeno attenti, infatti passando con il mouse sopra il titolo “digitalcodices.org” delle tre news appare la scritta “Nasce undolog.com”!
Inoltre non hanno capito nemmeno il funzionamento “sottile” dei CSS. Cliccando sui menu della navigazione la selezione della pagina visualizzata rimane sempre sulla Home, cosa che non succedeva con il mio layout: cara PixelFabrica, se vuoi una consulenza mi puoi contattare! Insomma, se volete proprio “copiare” fatelo almeno bene!!
Qualcuno dirà che segnalando tutto questo gli sto facendo “pure” un favore… una bella operazione di Viral Marketing… tuttavia è la prima volta che vengo “clonato” in questo modo spudorato, e la sensazione che provo la devo ancora decifrare! Ecco come si presentava infatti e-lementi.com prima del restyling del 2008:
Ultimi Commenti
Giovambattista Fazioli: @kOoLiNuS: Tranquillo, ti posso anticipare che probabilmente WPX cleanfix sarà gratuito, e...
kOoLiNuS: @kOoLiNuS: mancava un
e un 
kOoLiNuS: @Giovambattista Fazioli: mi sono iscritto, ma al momento io mio è un uso amatoriale della piattaforma...
Giovambattista Fazioli: @kOoLiNuS: Si, questo è un problema noto. Si verifica quando le tabelle in questione sono di...
kOoLiNuS: @Giovambattista Fazioli: Grazie per la patch! Però ho rilevato che su un paio di tabelle (se serve ti dico...