Con Google Apps Script il concetto è semplice, bisogna accedere a Drive e creare un nuovo documento. Andare su Altro e poi Collega altre applicazioni.

Filtrando tra quelle di Google, dobbiamo aggiungere Google Apps Script.

Ora tra i documenti disponibili abbiamo anche Google Apps Script.

Creiamo quindi un nuovo documento script.

Si aprirà un documento dove possiamo scrivere codice javascript.

Come si legge nella documentazione:

Quando uno script viene pubblicato come una web app , la funzioni speciali di callback doGet( ) e doPost( ) vengono invocate quando viene effettuata una richiesta per l’URL dello script . Invece di restituire un oggetto dell’interfaccia utente creato con l’UI Service o l’HTML Service, il Content Service può essere utilizzato per restituire contenuto testuale crudo. Questo consente di scrivere script che agiscono come “servizi” , rispondendo alle richieste GET e POST e servono dati di vario tipo MIME.

Possiamo quindi costruire il nostro servizio web, scrivendo ad esempio queste poche righe di codice:

function doGet(){
returnContentService.createTextOutput('Hello, world!');}

Di fatto abbiamo realizzato un servizio che risponde a una chiamata GET scrivendo “Hello, world!”.

Ora siamo pronti per pubblicarlo, per capire come funziona la pubblicazione. Poi potremmo fare qualcosa di più utile, come ad esempio rispondere con un JSON contenente qualche dato elaborato a partire da un parametro passato nella chiamata.

Le istruzioni per la pubblicazione sono riportate qui, ma di fatto è sufficiente andare da menu Pubblica > Distribuisci come applicazione web.. e vedremo apparire questa finestra. Dopo aver salvato la versione del progetto, ci verrà chiesto come pubblicare la nostra applicazione.

Esegui applicazione come: stabilisce qual’è l’utente che esegue lo script. Se scegliamo di farlo eseguire dall’utente che accede, quest’ultimo dovrà approvare l’esecuzione dello script prima di poterlo lanciare, se invece si sceglie di farlo eseguire come se stessi, l’utente sviluppatore dovrà approvare lo script la prima volta, poi chiunque accede potrà lanciarlo senza doverlo approvare. Con questa seconda opzione sarà quindi possibile distribuire il web service che stiamo creando anche a utenti anonimi (non loggati in Google).

Chi accede all’applicazione: abbiamo diversi gradi, possiamo scegliere di tenere il servizio privato, oppure pubblico per utenti loggati in google o addirittura per qualsiasi utente, e di conseguenza anche qualsiasi applicazione di terzi.

Di fatto ora possiamo chiamare da browser l’url che Google ci restituisce dopo la pubblicazione, per vedere apparire il nostro “Hello, world!”.

Vediamo come fare qualcosa di più evoluto, ad esempio un servizio che prende in pasto un numero e restituisce un JSON con scritto se è pari o dispari.

Scriviamo questo codice:

function doGet(request) {
var number = request.parameter.number;
if (number % 2 == 0) { var type = "pari"; } else { var type = "dispari"; }
var result = {
numero: number,
tipologia: type,
};
return ContentService.createTextOutput(JSON.stringify(result))
.setMimeType(ContentService.MimeType.JSON);
}

Abbiamo aggiunto l’oggetto request tra i parametri della funzione doGet(), ci salviamo il parametro “number” in una variabile e calcoliamo se è pari o dispari. Poi scriviamo tutto nell’oggetto result, restituendolo come JSON.

Dovremo salvare una nuova versione dello script, andando su File > Gestisci Versioni.. e poi tornare a pubblicare lo script in questa nuova versione. Se all’url ora aggiungiamo la stringa ?number=42, otterremo questo risultato, chiamandolo dal browser:

{"numero":"42","tipologia":"pari"}

Di fatto abbiamo realizzato un web service o lo abbiamo reso pubblico in un attimo, il tutto senza mai lasciare il nostro browser.

Se poi volessimo spingerci oltre, potremmo addirittura anche andare a leggere un foglio spreadsheet e restituire i valori delle celle che contiene. Pensiamo a quante mirabolanti applicazioni potremmo costruire se avessimo una infrastruttura basata sulle Google Apps for Enterprise, potremmo ad esempio costruire web service che pubblicano i dati di un foglio condiviso, dove più utenti di una stessa azienda collaborano alla definizione di dati che poi vengono distribuiti ad applicazioni terze.

E per restituire le prime 9 celle di un foglio chiamato “Foglio1″ sarebbe sufficiente un pezzo di codice così:

function doGet(request) {
var key = request.parameter.key;
if (key == "chiave_di_autenticazione") {
var ss = SpreadsheetApp.openById(id_del_documento);
var values = ss.getSheetByName("Foglio1").getRange(1,1,3,3).getValues();
return ContentService.createTextOutput(values);
} else {
return ContentService.createTextOutput("Invalid Key");
}
}

Bello vero? :)

Esiste quindi la chiamata perfetta? Si, ma come tutte le cose perfette, è sicuramente perfettibile.

Nell’esempio che segue c’è una pagina con due pulsanti: il primo esegue una chiamata ajax per caricare una pagina locale, il secondo esegue una chiamata cross-domain (nello specifico a Facebook) attraverso JSONP.

Sono arrivato all’esempio finale partendo da questi tre utilissimi spunti:

• 4 jQuery cross domain ajax request methods
• The perfect jquery ajax request
• Create crawlable, link-friendly ajax websites using pushState()

Ed ecco il risultato finale in funzione.

Il codice html della pagina è il seguente:

<div id="container">
<h1>Esempi Chiamate Ajax con jQuery</h1>
<a class="button" id="call" href="test.html" >Esegui chiamata normale</a>
<a class="button" id="call-cross" href="facebook.html">Esegui chiamata Cross Domain</a>
<div id="ajax-panel">Questo div contiente il risultato della chiamata</div>
</div>

Il codice javascript della chiamata locale è il seguente: di fatto viene usato il metodo $.ajax() per fare la chiamata. Nel beforeSend – codice eseguito prima di fare la chiamata vera e propria – viene eseguita una funzione che carica una immagine di cortesia; nel success – codice eseguito in caso di chiamata con esito positivo – viene elaborata la risposta, cambiando il contenuto di un div della pagina; nell’error – codice eseguito in caso di errore – viene mostrato un messaggio all’interno dello stesso div.

$("#call").click(function (e) {
//SEO friendly
url = $(this).attr('href');
//aggiorno l'indirizzo sulla barra del browser ed evito che si apra il link
history.pushState({}, '', url);
e.preventDefault();
//chiamata ajax
$.ajax({
url: 'test.html',
beforeSend: function () {
// qui mettiamo un'immagine di caricamento: appare solo se dobbiamo caricare qualcosa di pesante
$('#ajax-panel').html('<div class="loading"><img src="http://lab.diplod.it/ajaxcall/images/ajax-loader.gif" alt="Loading..." /></div>');
},
success: function (data) {
// richiesta riuscita
$('#ajax-panel').empty();
$('#ajax-panel').html(data);
},
error: function () {
// richiesta fallita
$('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Qualcosa &egrave; andato storto.</p>');
}
});

Il codice della chiamata cross domain differisce di poco da quello precedente, se non per l’utilizzo di JSONP (attenzione: non JSON) come dataType.

$('#call-cross').click(function (e) {
//SEO friendly
url = $(this).attr('href');
//aggiorno l'indirizzo sulla barra del browser ed evito che si apra il link
history.pushState({}, '', url);
e.preventDefault();
//chiamata ajax
$.ajax({
type: "POST",
url: "https://graph.facebook.com/emergency.ong",
dataType: "jsonp",
beforeSend: function () {
// qui mettiamo un'immagine di caricamento: appare solo se dobbiamo caricare qualcosa di pesante
console.log('loading..'); //scrivo qualcosa in console: si può omettere
$('#ajax-panel').html('<div class="loading"><img src="http://lab.diplod.it/ajaxcall/images/ajax-loader.gif" alt="Loading..." /></div>');
},
success: function (data) {
// richiesta riuscita
console.log(data); //scrivo il risultato in console: si può omettere
var obj = $.parseJSON(JSON.stringify(data));
$('#ajax-panel').html('<p>Tutto ok</p><p>Descrizione dell\'oggetto JSON restituito: ' + obj.about + '</p>');
},
error: function () {
// richiesta fallita
$('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Qualcosa &egrave; andato storto.</p>');
}
});
});

Vuoi provare l’esempio completo in azione e lavorarci su? Scarica tutti i sorgenti in uno zip oppure guardalo direttamente in funzione.

Commenti e suggerimenti sono ben accetti. ;)

La demo? Eccola! Provare è sempre più rapido che leggere.. ;) Attenzione che la cosa funziona bene la prima volta, poi la pagina viene messa nella cache e l’immagine di caricamento sparirà in fretta. Per chi vuole scaricare l’esempio completo e guardarlo in santa pace, basta fare il download.

DEMO DOWNLOAD

Per fare ciò, la prima cosa necessaria è l’immagine di caricamento, una gif animata è l’ideale. Si possono generare con le proprie preferenze  tramite tools on line come ad esempio Preloaders o Animizer, col primo si ha a disposizione una nutrita serie di immagini eleganti e predefinite, col secondo si possono creare gif animate a partire da proprie immagini.

Ora veniamo all’HTML, al CSS e al caro jquery. Il riferimento principale è la documentazione del $(document).ready().

Per fare le cose fatte bene, ho utilizzato l’HTML5 Boilerplate, un blasonato framework di frontend che agevola la scrittura del codice ma soprattutto ci da una solida guida per scriverlo bene. Nel template responsivo generato su Initializr ho inserito flexslider, il famoso slider di woothemes. Ho scelto di impostare l’ambiente di demo in questo modo per avere a disposizione uno slider con alcune immagini ad alta risoluzione che impieghino un po’ di tempo per caricarsi, ma ovviamente la parte di javascript e html che riguarda il caricamento può essere utilizzata su qualsiasi sito web.

Vediamo nel dettaglio la tecnica utilizzata, partendo dall’HTML. Basta inserire questo div subito dopo il tag <body>:

<div class="loader">LOADING...</div>

Visualizziamo la scritta loading, a tutto il resto penserà il foglio di stile.

Questo il CSS:

.loader {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #fafafa url(../img/page-loader.gif) no-repeat center center;
text-align: center;
color: #999;
}

Mettiamo a tutta pagina il div, per coprire tutto il contenuto, con una immagine di caricamento come sfondo. Questo blocco verrà rimosso tramite javascript una volta che il caricamento è avvenuto.

Ecco appunto la parte javascript (utilizzando jquery):

$( document ).ready(function() {
//una volta caricato il DOM esegui questo codice
//console.log( "DOM ready!" );
$(window).load(function() {
//una volta caricata l'intera pagina (immagini e i frames..) esegui questo codice
//console.log( "Page ready!" );
//faccio scomparire l'immagine di caricamento
$(".loader").fadeOut("slow");
});
});

Il costrutto $( document ).ready(function() { .. } ci serve per far eseguire “qualcosa” una volta caricato tutto l’albero (DOM), in questo caso scriviamo semplicemente due righe sulla console del browser; mentre il costrutto  $(window).load(function() { .. } ci serve per fare eseguire “qualcosa” una volta caricata l’intera pagina, comprese appunto le immagini o roba contenuta negli iframe. E’ qui, che oltre a scrivere un log sulla console, andiamo a rimuovere il div di caricamento che copriva tutto il contenuto della pagina.

E’ tutto ciò che serve!

NB: ovviamente, se si vuole iniziare a far vedere la pagina e i suoi contenuti durante il caricamento, la stessa tecnica può essere applicata a un div che non copra tutta la pagina, ma ad esempio solo il box dello slider dove si caricheranno le immagini..

Per capire come utilizzare lo slideshow di immagini si può dare un’occhiata alle demo sul sito ufficiale, ma credo che il meglio di questo slider sia nelle possibilità di utilizzo con pezzi di codice formattato (con testo e immagini), per poter creare fluide e accattivanti presentazioni di news o quant’altro.

Andiamo subito al sodo e vediamo come si può utilizzare all’interno di un tema wordpress per presentare articoli o elementi di altro tipo.

Ci sono tre cose fondamentali: il codice javascript, il codice html e il codice CSS. Partiamo con javascript; all’interno del tag <head> dovremo mettere questo pezzo di codice:

<script type="text/javascript">
$(window).load(function() {
$('#flexslider').flexslider({
animation: "slide",
controlsContainer: "#flex-container",
prevText: "Prec",
nextText: "Succ"    });
});


Mentre nel codice php che presenta gli articoli, ad esempio nel file home.php, dovremo utilizzare questo:


<?php query_posts('showposts=6&cat=3'); //prendo gli ultimi 6 articoli delle top news ?>
<?php if (have_posts()) : ?>
<div>
<div id="flex-container">
<div id="flexslider">
<ul>
<?php while (have_posts()) : the_post(); ?>
<li>
<h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>
<div>
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail('medium', array('class' => 'img-news')); ?>
<?php endif; ?>
<?php the_excerpt(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Leggi tutto...</a>
<div><div data-href="<?php the_permalink() ?>" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false" data-font="lucida grande"></div>
</div>
</div>
</li>
<?php endwhile; ?>
</ul>
</div>
</div>
</div>
<?php endif; ?>
<?php // Reset Query
wp_reset_query(); ?>


Il mestiere di questo pezzo di codice non è altro che recuperare gli ultimi 6 articoli di una determinata categoria (con ID=3), tramite la function query_posts(); per poi presentare ogni articolo con la sua immagine in evidenza e il suo riassunto. Al di là delle classi css attribuite agli elementi, che sono comunque poco rilevanti per il nostro esempio, ciò che mi preme far notare è che tutti questi elementi stanno racchiusi in un elemento di lista <li>, che sarà uno dei 6 slide che ruoteranno.

Veniamo ora al bello: il foglio di stile. Di seguito il mio CSS riadattato partendo da quello di default.

/* jQuery FlexSlider v2.0 */
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
/*.flexslider .slides img {width: 100%; display: block;} */
.flex-pauseplay span {text-transform: capitalize;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slides {display: block;}
* html .slides {height: 1%;}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}
/* FlexSlider Default Theme
*********************************/
.flex-container { position: relative;}
.flexslider {margin: 0 0 5px 0; position: relative;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}
.carousel li {margin-right: 5px}
/* Direction Nav */
.flex-direction-nav { display: block; position: absolute; top: 50%; background: transparent; width: 100%;
opacity: 0.2;
transition:opacity 1s;
-moz-transition:opacity 1s; /* Firefox 4 */
-webkit-transition:opacity 1s; /* Safari and Chrome */
-o-transition:opacity 1s; /* Opera */ }
.flex-container .flex-direction-nav:hover { opacity: 1; }
.flex-direction-nav a {width: 30px; height: 30px; margin: -30px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; cursor: pointer; text-indent: -9999px; }
.flex-direction-nav .next {background-position: 100% 0; right: 5px;}
.flex-direction-nav .prev {left: 5px;}
/* Control Nav */
.flex-control-nav {width: 100%; position: relative; bottom: 0px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
.flex-control-nav li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-nav li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-nav li a.active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
.flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); }
.flex-control-paging li a.active { background: #000; background: rgba(0,0,0,0.9); cursor: default; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .active {opacity: 1; cursor: default;}


Con un pizzico di CSS3 è possibile fare in modo che le frecce di navigazione appaiano evidenti solo al passaggio del mouse, mentre rimangano in trasparenza mentre scorrono le notizie. Il risultato finale si può vedere qui.

Buono slideshow a tutti. ;)

Ma qualcuno di voi si è accorto di come hanno realizzato l’animazione che illustra l’atterraggio del Curiosity su Marte?

Se date una sbirciatina al codice troverete un sacco di “cose interessanti”: la prima operazione da fare è muovere la rotellina del mouse, e noterete che attraverso lo scrolling vengono gestite le informazioni che appaiono in alto a destra. La conferma, semmai ce ne fosse bisogno, che si può fare senza flash.

In attesa di tempi migliori per poter tornare a scrivere su queste pagine con più intensità (mi sono segnato davvero un sacco di appunti..), segnalo questo incantevole grafico fatto con sapienza. Si tratta del Better Life Index. Descrive l’indice di desiderabilità di una nazione in base ai propri valori, tenendo conto di una serie di indicatori sociali. Ecco il video di presentazione dell’iniziativa.

Tutte le informazioni sull’iniziativa sono disponibili a questa pagina; per farla breve: vengono confrontati i 34 Paesi facenti parte dell’OCSE, l’Organizzazione per la Cooperazione lo Sviluppo Economico. Non è soltanto un mero gioco di javascript, da questo sito si possono imparare svariate cose, cliccando sul “fiore” della nazione è infatti possibile leggere un report sulle performance in generale e sulle politiche messe in atto nei singoli aspetti del Better Life Index.

Si può creare il proprio Better Life Index e condividerlo come ho fatto sopra, sia su un blog che via Facebook o Twitter. Perchè provare e condividere? Ogni volta che si crea un indice, entrerà in una banca dati accessibile al pubblico. Nel corso del tempo, questo aiuterà l’OCSE a costruire un quadro di quello che i cittadini di tutto il mondo considerano come forme di benessere. Buona condivisione..

Si chiama Projekktor, ed è davvero ciò che cercavo da tempo. Un player senza fronzoli, che funzioni su tutti i browser. Senza flash, che quegli aggeggi piccoli e cool così come gli attrezzi grossi e prestanti non supportano. jQuery certo, ma anche il pulitissimo HTML5.

Adoro questo pezzo di codice:

<video id="player_a" poster="intro.png" title="this is Projekktor" width="640" height="385" controls>
<source src="intro.ogv" type="video/ogg" />
<source src="intro.mp4" type="video/mp4" />
<source src="intro.webm" type="video/mp4" />
</video>
<script type="text/javascript">$(document).ready(function() {projekktor('#player_a'); // instantiation
});</script>

Chiaro e leggibile, grazie al nuovo tag <video> HTML5 ormai supportato da diversi browser. In sostanza viene specificata nell’attributo poster una immagine di partenza da far visualizzare al caricamento dell’oggetto e diverse sorgenti video, questo per garantire una maggiore compatibilità sui diversi sistemi.

Il plugin jQuery si occupa del resto: playlist, gestione dei temi grafici.. ci sono pure le API disponibili.

Perfetto insomma!

Come ti sembra questo grafico? Prova a cliccare sugli elementi della legenda e vedrai che è interattivo, potresti utilizzarlo per simulare il rispetto degli obiettivi in assenza di fatturato ottenuto su alcune zone.. Prova a selezionare col mouse una zona del grafico e vedrai puoi fare lo zoom sui dati che ti interessano.. Queste e tante altre funzionalità si possono ottenere grazie ad Highcharts, un validissimo javascript open source che lavora con jQuery per renderizzare grafici più o meno complessi e molto accattivanti.

Il tutto senza flash, cosa a cui difficilmente si poteva rinunciare in era pre-jQuery se si volevano ottenere i medesimi risultati. Le tipologie di grafici sono molteplici: si va dalla immancabile torta alla più ricercata rappresentazione demografica, dal grafico a barre al potente grafico zoomabile sull’andamento delle quotazioni in borsa. E’ inoltre possibile caricare i dati direttamente da una tabella definita in HTML all’interno della pagina, con poche righe di codice javascript.

Sotto è riportato il codice, opportunamente commentato, dell’esempio mostrato in questo articolo.
//Carico il javascript di highcharts, dopo aver caricato jQuery
<script src="js/highcharts.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[

Data la sua natura di puro css e javascript, questo grafico è agilmente fruibile anche da dispositivi mobili come iPhone o Android, inoltre è ben renderizzato dai principali browser. Si tratta di un prodotto davvero interessante che potrebbe tornare utile in diverse applicazioni stand-alone, a costo zero. Ben diverso dal classico Google Charts, servizio comodissimo che però pecca in quanto ad interattività: all’utente viene infatti restituita in quel caso una immagine statica.

Cosa Manca? Mancano i “geo-grafici“, ovvero la possibilità di visualizzare i dati su una cartina; mancano i tachimetri, per visualizzare in un colpo d’occhio l’andamento più o meno positivo di un indicatore. Sono comunque cose a cui si può sopperire spulciando bene l’elenco dei plugin jQuery..
E voi? Che cosa utilizzate in questi casi?

Per chi non vuole impazzire con le classiche funzioni javascript, che sono utili ma non sempre funzionali, esiste questo comodo js da includere nei propri lavori per agire in maniera efficace sulle date. La funzione più importante è sicuramente il DateDiff(), comodissimo per fare somme e differenze al volo sulle date.

Ecco un po’ di giochetti che si possono fare grazie a questo script, lo schema esplicativo sottostante è stato preso direttamente dal sito dell’autore.

3) Ottieni questo risultato:

Volete stupire con componenti dinamici pronti all’uso? Creare applicazioni web avanzate non è poi così laborioso, oggi si trovano un sacco di risorse in rete. Una di queste è il DHTMLX UI Toolkit, una serie di librerie javascript corredate da tantissimi esempi. La documentazione è ciò che fa la differenza: gli script non documentati e con pochi esempi sono quasi inutilizzabili, se non perdendo un sacco di ore per studiarseli. UI Toolkit viene distribuito in uno zip con diverse pagine di pratiche demo.

Per chi lavora in ambiente .NET molto interessante è questo Ajax Control Toolkit, un insieme di controlli utilizzabili direttamente in Visual Studio con il drag and drop, per costruire form e applicazioni accattivanti. Da Codeplex si possono scaricare anche i sorgenti, corredati da diversi esempi. In questa pagina si può avere una panoramica di tutte le funzionalità disponibili, sono davvero parecchie:

• Accordion
• AlwaysVisibleControl
• Animation
• AsyncFileUpload
• AutoComplete
• Calendar
• CascadingDropDown
• CollapsiblePanel
• ColorPicker
• ComboBox
• ConfirmButton
• DragPanel
• DropDown
• DropShadow
• DynamicPopulate
• FilteredTextBox
• HoverMenu
• HTMLEditor
• ListSearch
• MaskedEdit
• ModalPopup
• MultiHandleSlider
• MutuallyExclusiveCheckBox
• NoBot
• NumericUpDown
• PagingBulletedList
• PasswordStrength
• PopupControl
• Rating
• ReorderList
• ResizableControl
• RoundedCorners
• Seadragon
• Slider
• SlideShow
• Tabs
• TextBoxWatermark
• ToggleButton
• UpdatePanelAnimation
• ValidatorCallout

Per chi vuole essere indipendente da javascript e piattaforma tecnologica, esiste questo Vaadin, tutto basato su Java. Quest’ultimo molto più simile ai più noti framewok come Mootools o JQuery: dispone di diversi componenti elementari che opportunamente combinati tra loro danno vita ad applicazioni web avanzate.

Da segnalare infine questo iWebKit, utile per chi vuole cimentarsi nella realizzazione di siti e applicazioni concepite specificatamente per iPhone.

Risorse di questo tipo ne esistono davvero a bizzeffe, ma non è facile distinguere quelle che sono effettivamente utilizzabili out of the box da quelle che invece necessitano di altro e magari nascondono limiti tali da sconsigliarne l’utilizzo. Personalmente ho utilizzato in un ambiente di produzione l’UI Toolkit di DHTMLX e posso confermare che si tratta di librerie pronte all’uso, davvero comode e funzionali. Ho intenzione di provare a breve l’Ajax Control Toolkit per .NET e vi farò sapere le mie considerazioni. Mi piacerebbe ovviamente sentire le vostre e capire se esistono altri strumenti oltre a quelli citati, che magari avete utilizzato direttamente.

Alcune utili consigli per chi sviluppa applicazioni ajax destinate ad essere fruibili attraverso dispositivi mobili:

• Blackberry: il browser deve essere abilitato per usare javascript. Inoltre, se si fa largo uso dello script lato client, è bene evitare di spuntare tra le opzioni il flag “Termina script in esecuzione lenti”, un semplice Bubble Sort lo manderebbe in tilt.
• Nokia (symbian): nel browser standard il metodo open(“GET”,”xml/test2.xml”,true) funziona solo in modalità asincrona, ovvero con l’ultimo parametro settato a true; scaricando il browser Opera Mini invece non ci sono problemi in entrambi i casi: sincrono/asincrono.
• iPhone: che dire.. finora nessun problem riscontrato: browser e processore appartengono a una categoria superiore.

Purtroppo non ho ancora avuto modo di fare test su dispositivi con Android..

Ma veniamo al dunque.. Tutto prende il via dagli esempi sul sito W3C, utilissimi per fare pratica.

L’obiettivo è realizzare una applicazione che va a interrogare un file xml, riportante i dati di produzione (magari estratti direttamente dal gestionale aziendale), visualizzandoli in maniera ottimizzata per schermi di modeste dimensioni.

L’esempio con il risultato finale è visibile qui.

Questa è la struttura dela file XML:
<?xml version="1.0" encoding="UTF-8"?>
<db>
<item>
<period>04.2010</period> <!-- Periodo: mese o giorno -->
<logunit id="0010">Italy Milan</logunit> <!-- Divisione di produzione-->
<delivered matcode="000123">268</delivered> <!-- Quantita' spedita -->
<finished matcode="100123">265</finished> <!-- Quantita' versata -->
<description>Product One</description> <!-- Descrizione codice materiale  -->
<update>15.04.2010 - 16:43</update> <!-- Ultimo aggiornamento -->
</item>
</db>

Supponiamo di voler offrire all’utente un menù per selezionare la divisione logistica su cui fare l’analisi e filtrare così i dati relativi alla singola divisione raggruppati in righe in base agli intervalli temporali, cliccando sulla singola riga è poi possibile vedere il dettaglio.

Ecco il codice della pagina web, con il suo javascript:
<html>
<head>
<title>Mobile Web Access</title>
<script type="text/javascript">
var xmlDoc;
var x; //array dove memorizzo la risposta xml
//inizio chiamata
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
if (xhttp.overrideMimeType) {
xhttp.overrideMimeType('text/xml');
}
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = alertContents; //gestione eventuali errori
xhttp.open("GET","xml/test2.xml",true); //chiamata asincrona
xhttp.send("");
// Questo metodo viene eseguito in modo asincrono quando arriva la risposta dal server
function alertContents() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
processResponse(); //gestione risposta
}
else {
document.write('<small>There was a problem with the request, sorry. Try later or contact your system administrator..</small>');
}
}
}
function processResponse() {
xmlDoc=xhttp.responseXML;
x=xmlDoc.getElementsByTagName("item");
}
//mostra i dati nel div in alto
function show(i) {
logunit=(x[i].getElementsByTagName("logunit")[0].childNodes[0].nodeValue);
logunitID=(x[i].getElementsByTagName("logunit")[0].getAttribute("id"));
period=(x[i].getElementsByTagName("period")[0].childNodes[0].nodeValue);
description=(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
delivered=(x[i].getElementsByTagName("delivered")[0].childNodes[0].nodeValue);
deliveredCode=(x[i].getElementsByTagName("delivered")[0].getAttribute("code"));
finished=(x[i].getElementsByTagName("finished")[0].childNodes[0].nodeValue);
finishedCode=(x[i].getElementsByTagName("finished")[0].getAttribute("code"));
update=(x[i].getElementsByTagName("update")[0].childNodes[0].nodeValue);
txt="<strong>Logistic Unit</strong>: "+logunitID+" - "+logunit+"<br /><strong>Period</strong>: "+period+"<br /><strong>Description</strong>: "+description+"<br /><img style='float:left; margin-right: 2px;' src='icon.png' alt='icon'/><strong>Delivered</strong>: "+delivered+"<br /><strong>Finished</strong>: "+finished+"<br /><div style='border: 1px dotted #fff; padding: 2px; background: #f9f9f9; color: #666;'><small><em>Last update: "+update+"</em></small><br/><small><a href='#item"+i+"'>Go Down To List..</a> | <a href='#show' onclick='show(" + (i-1) + ")'>Prev..</a> | <a href='#show' onclick='show(" + (i+1) + ")'>Next..</a></small></div>"  ;
document.getElementById("show").innerHTML=txt;
}
//crea tabella coi record relativi alla singola divisione
function createTable(t) {
document.getElementById("show").innerHTML="<em>"+t+": click on a table row to display the full production information.</em>";
txt="<table style='border: 2px solid #ccc; width: 100%;'>";
altStyle=0;
for (var i=0;i<x.length;i++)
{
if (x[i].getElementsByTagName("logunit")[0].getAttribute("id")==t) {
altStyle++;
if (altStyle % 2 == 0) { txt=txt+"<tr style='background: #e3efff;' onclick='show(" + i + ")'>"; }
else { txt=txt+"<tr style='border-bottom: 1px dotted #ccc;' onclick='show(" + i + ")'>"; }
txt=txt+"<td id='item"+i+"'><img src='cal.png' alt='ico'/><a href='#show'>";
txt=txt+(x[i].getElementsByTagName("period")[0].childNodes[0].nodeValue);
txt=txt+"</a></td><td><img src='car.png' alt='ico'/><a href='#show'>";
txt=txt+(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
txt=txt+"</a></td></tr>";
}
}
txt=txt+"</table>";
document.getElementById("table-content").innerHTML=txt;
}
</script>
</head>
<body>
<img src='mobile-logo.gif' alt='logo' /><br/>
<div id='show' style='background: #e3efff; padding: 3px; margin: 3px 0; border: 2px solid #ccc;'><em>Select Logistic Unit then click on a table row to display the full production information.</em></div>
<!--Per aggiungere una divisione, modificare questo menu -->
<img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0010")'>Italy Milan</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0020")'>Italy Rome</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0030")'>USA</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0040")'>Germany</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0050")'>China</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0060")'>Brasil</a>
<!-- fine menu selezione divisione -->
<div id='table-content'></div>
</body>
</html>


Il codice è interamente commentato, e più che descriverlo a parole vale la pena scorrerlo e leggere i commenti. Se vuoi scaricare l’esempio completo, con sorgenti e immagini: ecco lo zip.

La scelta di incorporare css e javascript all’interno della stessa singola pagina è voluta, per ottimizzare il caricamento da parte di dispositivi mobili. Certo questa è solo una base di partenza, dalla quale si potrebbero sviluppare altre funzionalità: l’esigenza di avere dati disponibili anche su dispositivi mobili è sempre più sentita; è inevitabile che in futuro si debba far fronte a queste richieste.
In fondo è pure divertente!

Che ci sarà di così difficile? Nulla, se non il fatto che WSS è davvero poco user friendly quando si tratta di date.

Le prime cose da sapere riguardano la manipolazione delle date con XSL, bisogna partire dalle basi e poi da qualche esempio. Le date gestite su Sharepoint sono la @EventDate (data di inizio) e la @EndDate (data fine) e vengono restituite generalmente nel formato seguente: 2009-25-19T11:15:02Z.

Ovviamente l’ambiente di lavoro è Sharepoint Designer. Per prima cosa, una volta creata la nuova dataview webpart, bisogna associargli un form (una DataForm WebPart) tramite il quale passare gli intervalli di selezione delle date. Pubblico subito il codice sorgente di questo form:

<SCRIPT type="text/javascript" src="dhtmlgoodies_calendar/dhtmlgoodies_calendar.js?random=20060118"></script>
<link type="text/css" rel="stylesheet" href="dhtmlgoodies_calendar/dhtmlgoodies_calendar.css?random=20051112" media="screen"></LINK>
<table>
<script language="JavaScript">
function setStartTimeNow()
{
var d = new Date();
var currYear = d.getFullYear();
var currMonth = d.getMonth() + 1;
var currDate = d.getDate();
var currHour = d.getHours();
var currMin = d.getMinutes();
timeA = currYear + "" + currMonth + "" + currDate + "0001";
timeB = currYear + "" + currMonth + "" + currDate + "2359";
theInputA = document.getElementById('dataa');
theInputA.value = timeA;
theInputB = document.getElementById('datab');
theInputB.value = timeB;
}
</script>
<tr><td>Data e ora Inizio: </td><td><td><input id="dataa" type="text" value="" readonly name="T1"><input type="button" value="Seleziona data e ora.." onclick="displayCalendar(document.getElementById('dataa'),'yyyymmddhhii',this,true)"></td></tr>
<tr><td>Data e ora Fine: </td><td><td><input id="datab" type="text" value="" readonly name="T2"><input type="button" value="Seleziona data e ora.." onclick="displayCalendar(document.getElementById('datab'),'yyyymmddhhii',this,true)"></td></tr>
</table>
<br/>
<input type="button" value="Voglio sapere gli assenti di oggi.." onclick="setStartTimeNow()"/>
<input type="button" value="Mostra Risultati" onclick="javascript:_SFSUBMIT_"/>

Per creare questo form ho utilizzato il comodissimo javascript dhtmlgoodies_calendar, che permette di avere il classico calendarietto tramite il quale selezionare la data. La particolarità è che il formato della data passato all’input element del form è del tipo yyyymmddhhii, ovvero vengono passate data e ora sottoforma di numero. Ad esempio, la data 25/12/2009 – 13:52, viene passata come 200912251352. In questo modo sarà possibile confrontarla con altre date tramite gli operatori logici (maggiore, minore, uguale..).
T1 e T2 sono i parametri del form che verranno connessi alla web part XML.

Veniamo ora al dunque della web part che deve mostrare i dati, tramite Sharepoint Designer è necessario attivare due parametri: che chiameremo per comodità T1 e T2 (esattamente come gli elementi del form).

Una volta fatto ciò, il grosso del lavoro sta tutto nell’impostare correttamente il filtro attraverso una espressione XSL. Prima il codice, poi i commenti:

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[ ( ddwrt:FormatDateTime(string(@EventDate) ,1033 ,'yyyyMMddHHmm') &lt;= $T1 and ddwrt:FormatDateTime(string(@EndDate) ,1033 ,'yyyyMMddHHmm') &gt;= $T1 )  or  ( ddwrt:FormatDateTime(string(@EventDate) ,1033 ,'yyyyMMddHHmm') &lt;= $T2 and ddwrt:FormatDateTime(string(@EndDate) ,1033 ,'yyyyMMddHHmm') &gt;= $T2 )  or  ( ddwrt:FormatDateTime(string(@EventDate) ,1033 ,'yyyyMMddHHmm') &gt;= $T1 and ddwrt:FormatDateTime(string(@EndDate) ,1033 ,'yyyyMMddHHmm') &lt;= $T2 ) ]"/>

Cosa fa questa funzione? Posto che i parametri T1 e T2 identificano rispettivamente la data di inizio e la data di fine dell’intervallo di selezione (il periodo per cui vogliamo sapere chi era assente), il codice del filtro trasforma tutte le date nel formato numerico descritto sopra, e le confronta in base ai parametri T1 e T2, verificando se esistono eventi iniziati prima della data T1 e ancora in corso nell’intervallo [T1;T2], iniziati e conclusi all’interno dell’intervallo oppure iniziati in [T1;T2] e con conclusione dopo T2. In questo modo si ottiene la lista di tutti gli assenti all’interno di un determinato periodo, anche degli assenti per solo alcuni giorni e non per tutto l’intervallo stesso.

Nota bene, in linea di massima anche questo filtro dovrebbe essere corretto:

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[ ( substring(translate(translate(translate(translate(@EventDate,'-',''),':',''),'T',''),'Z',''),1,12) &lt;= $T1 and substring(translate(translate(translate(translate(@EndDate,'-',''),':',''),'T',''),'Z',''),1,12) &gt;= $T1 )  or  ( substring(translate(translate(translate(translate(@EventDate,'-',''),':',''),'T',''),'Z',''),1,12) &lt;= $T2 and substring(translate(translate(translate(translate(@EndDate,'-',''),':',''),'T',''),'Z',''),1,12) &gt;= $T2 )  or  ( substring(translate(translate(translate(translate(@EventDate,'-',''),':',''),'T',''),'Z',''),1,12) &gt;= $T1 and substring(translate(translate(translate(translate(@EndDate,'-',''),':',''),'T',''),'Z',''),1,12) &lt;= $T2 ) ]"/>

La funzione translate depura la stringa della data dai vari caratteri e lascia solo 14 numeri, la funzione substring leva gli ultimi due numeri (relativi ai secondi dell’ora della data). Ma così non funziona, per un qualche strano motivo Sharepoint anticipa di un’ora la data di tutti gli eventi, e ciò che concettualmente era infallibile, decade durante la prova effettiva, con buona pace per tutto il tempo trascorso sopra a ragionarci.. Argh!

L’utilità? Lasciare ai soli amministratori la possibilità di editing di determinati campi.

Questo il codice di base proposto:

<script language="javascript" type="text/javascript">
_spBodyOnLoadFunctionNames.push("avvioControlli");
function avvioControlli() {
hideFields();
}
function findacontrol(FieldName) {
   var arr = document.getElementsByTagName("!");
   // get all comments
   for (var i=0;i < arr.length; i++ )
   {
      // now match the field name
      if (arr[i].innerHTML.indexOf(FieldName) > 0)
      {         return arr[i];      }
   }
}
function hideFields() {
   var control = findacontrol("Stato");
   control.parentNode.parentNode.style.display="none";
   control = findacontrol("Comments");
   control.parentNode.parentNode.style.display="none";
}
</script>

Dove si mette? Appena soto al PlaceHolderMain, nella pagina NewForm.aspx della relativa lista, tramite Sharepoint Designer: una figura vale più di mille parole. Dopo aver aperto l’albero della lista su Sharepoint Designer, è sufficiente editare il codice della pagina.

L’approccio è perfetto e geniale, il javascript non fa altro che ricercare nel documento i commenti per poi oscurare tramite una proprietà CSS la visualizzazione. Ci sono però alcuni difetti su questo codice: piace a internet explorer e non agli altri browser.
Ecco allora come modificarlo per renderlo compatibile con i vari Firefox, Chrome e compagnia bella:

<script language="javascript" type="text/javascript">
_spBodyOnLoadFunctionNames.push("avvioControlli");
function avvioControlli() {
hideFields();
}
function findacontrol(FieldName) {
//se browser Internet Explorer cerco i commenti
if (navigator.userAgent.indexOf("MSIE")!=-1) {
   var arr = document.getElementsByTagName("!");
   // get all comments
   for (var i=0;i < arr.length; i++ )
   {
      // now match the field name
      if (arr[i].innerHTML.indexOf(FieldName) > 0)
      {         return arr[i];      }
   }
   }
//se browser diverso da Internet Explorer cerco i titoletti
   else {
   var arr = document.getElementsByTagName("H3");
   // get all comments
   for (var i=0;i < arr.length; i++ )
   {
      // now match the field name
      if (arr[i].innerHTML.indexOf(FieldName) > 0)
      {         return arr[i];      }
   }
}
}
function hideFields() {
   var control = findacontrol("Stato");
   control.parentNode.parentNode.style.display="none";
var control = findacontrol("Comments");
   control.parentNode.parentNode.style.display="none";
}
</script>

Se poi volessi piazzare da qualche parte un pulsantino per far riapparire questi campi, magari solo per determinati utenti, sarà sufficiente creare questa funzione:

function showFields() {
   var control = findacontrol("Stato");
   control.parentNode.parentNode.style.display="block";
var control = findacontrol("Comments");
   control.parentNode.parentNode.style.display="block";
}

Buona personalizzazione!

Quante volte abbiamo visto siti di magazine dotati di spettacolari slideshow a centro pagina che presentano gli ultimi articoli con immagini a ripetizione? Basta guardare il sito di wired o dell’Economist.. Molti temi wordpress per magazine presentano soluzioni di questo tipo, spesso però pescano le immagini da presentare tra i custom fields di wordpress.

La soluzione che propongo in questo articolo pubblica invece la prima foto allegata al post e la fa girare a rotazione assieme al titolo e all’excerpt (il riassunto). Il risultato finale è visibile in questa demo.

Per fare il tutto ho scelto un javascript gratuito: Slideshow2! Grazie a questa splendida classe per Mootools è possibile creare in pochi istanti effetti davvero accattivanti.
Ci sono diversi plugin per wordpress in giro che utilizzano i più noti script per generare slideshow e gallerie, ma tutti quelli che ho visto servono per creare una gallery a partire da un singolo post. Il mio obbiettivo era diverso: creare uno slideshow con la prima immagine degli ultimi articoli pubblicati. Vediamo come fare..

Prima di tutto il codice.

<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/slideshow.css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/mootools.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slideshow.js"></script>


Questa prima parte va aggiunta nell’elemento <head>, nel file header.php del template wordpress. Non fa altro che caricare un file CSS, la libreria mootools e lo script slideshow. Sempre all’interno dell’elemento <head> va inserito il codice sottostante. Si può posizionare questa porzione di codice anche appena prima del div in cui si desidera far apparire lo slideshow, tipicamente nel file index.php del template wordpress.

<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
<?php $temp_query3 = $wp_query; ?>
<?php query_posts('showposts=5&cat=4'); ?>
<?php if (have_posts()) : ?>
<?php $conta=0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php
// Rileva ID del post
$iPostID = $post->ID;
// Rileva immagini per questo post
$arrImages =& get_children('post_type=attachment&post_mime_type=image&post_parent=' . $iPostID );
// Se esistono immagini allegate al post
if($arrImages) {
// Rileva array con le chiavi che rappresentano le immagini allegate
$arrKeys = array_keys($arrImages);
// Rileva la prima immagine allegata
$iNum = $arrKeys[0];
// Rileva url thumbnail
// $sThumbUrl = wp_get_attachment_thumb_url($iNum);
// Rileva url full-size
$sUrl = wp_get_attachment_image_src($iNum,'full');
// Rileva excerpt - riassunto del post
$descrizione = get_the_excerpt();
// Rimpiazza caratteri particolari
$descrizione = str_replace("'", "\'", $descrizione);
$descrizione = str_replace("\n", " ", $descrizione);
?>
<?php if ($conta>0) { ?>, <?php } ?><?php } ?><?php $conta++; ?>
'<?php echo($sUrl[0]) ?>': { caption: '<p><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link a <?php the_title(); ?>"><?php the_title(); ?></a><br/><?php echo($descrizione) ?></p>' }

<?php } ?>
<?php endwhile; ?>
<?php endif; ?>
<?php //Reset Query
wp_reset_query(); ?>
};
var myShow = new Slideshow('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 780});
});
//]]>
</script>

Questa seconda parte serve per far apparire lo slideshow nel div con ID=”show”. All’inizio vengono indicati il numero di post e la categoria relativa che si desidera far apparire, nella funzione query_posts(). Il codice è ben commentato e non fa altro che rilevare la prima immagine di ogni post per pubblicarla assieme al titolo e al riassunto del post.
La parte HTML necessaria all’interno del <body> è questa:

<div id="show">
<img src="<?php bloginfo('template_url'); ?>/images/default.jpg" alt="welcome" />
</div>

Dove come default.jpg verrà caricata una immagine standard, utile nel caso non ci siano articoli da visualizzare oppure l’utente abbia disabilitato javascript.
Per aggiungere l’effetto di zoom in movimento è possibile utilizzare l’estensione kenburns dello script Slideshow. Caricando nell’ <head> un altro javascrip:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/slideshow.kenburns.js"></script>

e modificando le ultime righe dello script sopra in questo modo:

var myShow = new Slideshow.KenBurns('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 670, zoom: 50, pan: [25, 75]});

Le proprietà di zoom e pan sono da regolare per ottenere effetti diversi.

Il risultato HTML è il seguente:

<script type="text/javascript" src="http://lab.diplod.it/demo/wp-content/themes/diplo-magazine/js/slideshow.kenburns.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
//avvio slideshow
var data = {
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3691087551_74e61f4da0_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/campo-di-grano/" rel="bookmark" title="Permanent Link a Campo di Grano">Campo di Grano<\/a><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<\/p>' },
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3691896442_cafb3a1487_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/le-braccia-del-costruttore/" rel="bookmark" title="Permanent Link a Le braccia del Costruttore">Le braccia del Costruttore<\/a><br/>Le braccia del costruttore ha un riassunto molto breve..<\/p>' },
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3166795508_d5cd33c968_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/secondo-articolo-in-rilievo/" rel="bookmark" title="Permanent Link a Secondo Articolo in Rilievo">Secondo Articolo in Rilievo<\/a><br/>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem<\/p>' },
'http://lab.diplod.it/demo/wp-content/uploads/2009/08/3691094985_4327680ea2_b.jpg': { caption: '<p><a href="http://lab.diplod.it/demo/2009/08/29/primo-articolo-in-rilievo/" rel="bookmark" title="Permanent Link a Primo articolo in Rilievo">Primo articolo in Rilievo<\/a><br/> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat [...]<\/p>' },
};
var myShow = new Slideshow.KenBurns('show', data, {captions: true, controller: true, delay: 5000, duration: 2000, height: 300, thumbnails: false, width: 670, zoom: 50, pan: [25, 75]});
});
//]]>
</script>

Per quanto riguarda il CSS, quello proposto assieme allo script è sicuramente un buon punto di partenza, da sistemare se si vogliono cambiare le dimensioni del div che presenta lo slideshow.

Buon design a tutti..

PS: Nel caso in cui qualcuno si stesse domandando da dove provenga il design della demo sopra.. beh: seguite questo blog, prossimamente arriverà un tema wordpress in stile magazine, completamente personalizzabile dal pannello di amministrazione e soprattutto italianissimo. ;)

Google Earth è diventato ormai uno strumento dalle mille potenzialità: esplorazione degli oceani, fotografie, edifici e terreni in 3D, visione dei luoghi nel tempo, registrazione dello schermo, sono solo alcune delle meraviglie del prodotto.

La possibilità di utilizzare file KML generati da altri è un’altra delle cose che rendono Google Earth uno strumento eccezionale per far visualizzare percorsi, itinerari, foto dei luoghi e quant’altro. Le informazioni geolocalizzate permettono di dare al fruitore un contributo unico: vedere i posti vale molto di più che descriverli.

Ebbene, da qualche tempo è disponibile un plugin che permette di portare Google Earth direttamente sulle pagine web, grazie alle Google Earth API. E’ infatti possibile inserire in una pagina web una finestra che visualizza il famoso mondo 3D, caricando un file KML.
Nel futuro non saremo più legati al 2D delle famosissime mappe di Google, ma potremo creare mashup direttamente in 3D. Gli esempi di codice sono davvero vasti e ben documentati.

Ecco il codice dell’esempio sotto, commentato nel javascript che carica il plugin:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT">
<head>
<title>Esempio Plugin Google Earth con file KML</title>
<script src="http://www.google.com/jsapi?key=LaTuaAPIKey"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
//inizializza la mappa prendendo come riferimento l'ID del div che la contiene: map3d
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// aggiunge i controlli di navigazione
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// aggiunge alcuni livelli: confini e strade
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
// codice per caricare e far visualizzare il file KML
function finished(object) {
if (!object) {
// Gestione degli errori per prevenire i deadlock di alcuni browsers
setTimeout(function() {
alert('Bad or null KML.');
}, 0);
return;
}
ge.getFeatures().appendChild(object);
// imposta latitudine, longitudine e zoom
var la = ge.createLookAt('');
la.set(44.258300, 10.411550, 25, ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 70, 400);
ge.getView().setAbstractView(la);
}
// carica il file KML
var url = 'http://www.diplod.it/wp-content/uploads/2009/08/AlbaCusna.kml';
google.earth.fetchKml(ge, url, finished);
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="width: 500px; height: 380px;"></div>
</body>
</html>
Ovviamente per far andare il tutto è necessario ottenere una API Key, fornita gratuitamente da Google per il proprio dominio.
Il giochino è davvero meraviglioso, ecco come appare il tutto:

Se vi interessa sapere come ho fatto a generare questo file KML, provate a sbirciare qui: con un cellulare Nokia potrebbe aprirsi un altro mondo.. ;)

Per vederlo subito all’opera basta dare un’occhiata agli esempi che ci sono sul sito ufficiale.

Questo plugin torna veramente utile se accoppiato ai classici menù per wordpress, dove tipicamente la sintassi html è la seguente:

<ul class="sf-menu">
<li class="page_item"><a href="#" title="Home">Home</a></li>
<li class="page_item page-item-1"><a href="#" title="About">About</a>
<ul>
<li class="page_item page-item-2"><a href="#" title="Sottopagina Uno">Sottopagina Uno</a></li>
<li class="page_item page-item-3"><a href="#" title="Sottopagina Due">Sottopagina Due</a></li>
</ul>
</li>
<li class="page_item page-item-4"><a href="#" title="Contatti">Contatti</a>
</ul>

Questa sintassi viene generata dalla funzione wp_list_pages(), indicando come argomento depth=2. E’ sufficiente assegnare la classe “sf-menu” alla lista (<ul>) che compone il menù e lo script farà il resto del lavoro, individuando le liste annidate e nascondendole. Quando l’utente passerà con il mouse sulla pagina padre, allora saranno mostrate a cascata le pagine figlie.

Ovviamente per far funzionare il tutto è necessario includere nella testata della pagina qualche riga di codice, per caricare jquery, il plugin e alcuni file css:

// link al file CSS
<link rel="stylesheet" type="text/css" media="screen" href="superfish.css" />
// link al javascript (hoverIntent è opzonale)
<script type="text/javascript" src="hoverIntent.js"></script>
<script type="text/javascript" src="superfish.js"></script>
// inizializzazione di Superfish, sf-menu è la classe su cui sarà attivo l'effetto
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish();
});
</script>

I temi rilasciati su eleganthemes fanno abbondantemente uso di questo plugin e gli effetti sono piuttosto gradevoli. Credo proprio che mi divertirò nei prossimi giorni.. Conoscete altri script altrettanto versatili e pronti all’uso?

Per chi sviluppa siti web, l’inclusione di un visualizzatore è semplicissima. E’ disponibile un wizard tramite il quale si può generare in automatico il codice da inserire nell’HTML, basta fare un copia&incolla ed il gioco è fatto. Il risultato lo potete vedere qui sotto:

Ma le possibilità di personalizzazione vanno al di là del semplice javascript esterno, gli sviluppatori possono infatti intervenire direttamente sul codice seguento le istruzioni fornite nella pagina di documentazione delle API, che illustra in maniera chiara come utilizzare le API. L’esempio base si capisce al volo:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Book Search Embedded Viewer API Example</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("books", "0");
function initialize() {
var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'));
viewer.load('ISBN:0738531367');
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="viewerCanvas" style="width: 600px; height: 500px"></div>
</body>
</html>


Uno script richiamato nell’head e un div nel quale caricare il visualizzatore, impostandone le dimensioni. In questo modo si può integrare il lettore direttamente nel proprio layout, i libri da caricare sono identificabili tramite diversi parametri:

• codice ISBN (come nell’esempio sopra): è il codice internazionale che identifica una pubblicazione
• OCLC: è il numero assegnato da OCLC quando il libro viene pubblicato su WorldCat
• LCCN: codice assegnato dal Library of Congress
• codice di Google Books Search: sia tramite l’id univoco che tramite l’url di visualizzazione del libro su Books Search.

Chi vuole sbizzarrirsi è libero di farlo..

La digitalizzazione dei libri da parte di Google partì in sordina tra mille polemiche, oggi invece si rivela in tutta la sua utilità. Se penso alla biblioteca cittadina, o ancora meglio alla biblioteca universitaria; se solo avesse un sito che permetta la consultazione a distanza di un libro a catalogo, sarebbe sicuramente un valore aggiunto.

All’interno di un indirizzo web vengono passati i dati per la costruzione del grafico, sottoforma di parametri, e Google ci restituisce una immagine realizzata a partire da quei dati. Quale migliore occasione dei dati elettorali per fare qualche prova?

La documentazione (in inglese) è impeccabile, sono presenti un sacco di esempi che aiutano lo sviluppatore. Ho costruito la torta dei risultati elettorali del mio paese, sulla base di questo url.

Vediamolo commentato:

chs=800x300 <!--dimensioni del grafico in pixel-->
&chd=t:4.1,2.96,23.69,6.69,2.19,4.55,52.33,0.37,3.12 <!--serie di dati: percentuali-->
&cht=p3 <!--tipo di grafico: a torta-->
&chco=ebebeb,ff0000,0090ff,1db000,373737,db4aff,31a142,bc424b,ffcc00 <!--colori delle fette--> &chl=UDC|SINISTRA%20L'ARCOBALENO|POPOLO%20DELLA%20LIBERTA'|LEGA%20NORD|LA%20DESTRA|ITALIA%20DEI%20VALORI|PARTITO%20DEMOCRATICO|PARTITO%20SOCIALISTA|ALTRI <!--etichette dei dati-->

Per ottenere l’immagine direttamente sulla pagina web, basta inserire l’url appena costruito nel tag <img> avendo cura di convertire i caratteri ‘&’ in ‘&’, in questo modo:

<img src="http://chart.apis.google.com/chart?
chs=800x300
&chd=t:4.1,2.96,23.69,6.69,2.19,4.55,52.33,0.37,3.12
&cht=p3
&chco=ebebeb,ff0000,0090ff,1db000,373737,db4aff,31a142,bc424b,ffcc00
&chl=UDC|SINISTRA%20L'ARCOBALENO|POPOLO%20DELLA%20LIBERTA'|LEGA%20NORD|LA%20DESTRA|ITALIA%20DEI%20VALORI|PARTITO%20DEMOCRATICO|PARTITO%20SOCIALISTA|ALTRI" alt="risultati senato" />


Ed ecco il risultato finale, per i voti al Senato della Repubblica.

Se vi interessa anche la Camera dei Deputati.. Tanto ormai avrete capito che vivo in Emilia. :)

Decisamente comodo il servizio, soprattutto se dobbiamo trattare dati variabili, magari estratti da un database: come dati finanziari o altro. Non a caso infatti il servizio è utilizzato su Google Finance.
L’unica cosa che mi lascia perplesso è l’impossibilità di scrivere i valori sul grafico, cosa che potrebbe essere utile soprattutto per i grafici a torta. Nei grafici a barre invece è possibile assegnare valori sugli assi.

Google fornisce anche un esempio di javascript per la realizzazione automatica di un grafico a partire da un array di dati. Se invece volete qualcosa di più visuale, c’è già chi ha pensato al Google Chart Generator oppure al Google Graph Builder, dove è possibile ottenere il codice dell’url grazie a un comodo editor on-line.

Ma non è finita qui, le APIs Chart permettono anche di creare grafici sulla base di cartine geografiche. Il concetto è sempre quello: un url con diversi parametri. Ed ecco che cosa si può ottenere:

Questo il codice:

<img src="http://chart.apis.google.com/chart?cht=t&chs=440x220&chd=s:Af9&chtm=europe&chco=ffffff,edf0d4,13390a&chld=FRITNL&chf=bg,s,EAF7FE" alt="cartina europa" />


Si potrebbe sfruttare per segnalare la presenza di dispositivi mobili su un’area geografica, colorando con un gradiente le aree più dense.. Insomma: in tutte quelle situazioni in cui c’è esigenza di mappare in maniere automatica dati in evoluzione.

Se penso al diffondersi dei palmari e alle crescenti esigenze di geolocalizzazone gli scenari sono molteplici. Ma anche senza vagare troppo con l’immaginazione, basta pensare alla monitorizzazione degli accessi a una pagina web, a sondaggi, alla pubblicazione di dati finanziari.. Quello di Google Charts è un servizio veloce (i tempi di risposta sono immediati) e soprattutto gratuito.

L’unico limite sono 250000 chiamate al giorno, se pensate di superarle meglio avvisare via mail.

Ne ha parlato tom qualche giorno fa. Oltre ad essere cross-browser e compatibile agli standard, il vero punto di forza di questa galleria è il supporto a diversi framework javascript, questo permette di utilizzarla in tutti i contesti: supporta infatti YUI, Prototype + Scriptaculous, jQuery, Ext, Dojo e MooTools. Una meraviglia, visto che generalmente è proprio la difficile integrazione tra i diversi framework a impedire l’utilizzo di questi eleganti metodi di presentazione.

Ho cercato un plugin che integrasse su wordpress questa galleria, per utilizzarla nella presentazione del portfolio. Detto fatto: Shadowbox JS Plugin. Per onor di cronaca esiste pure un plugin italiano con lo stesso intento, ma non c’è la possibilità di scegliere quale framework javascript utilizzare. Questo è fortemente limitante, dato che l’arma vincente di shadowbox è proprio la possibilità di utilizzo sui diversi framework.

Ho fatto quindi una traduzione in italiano del suddetto plugin, nulla di travolgente: ho semplicemente modificato i commenti al file del plugin per impostare i parametri e cambiato le scritte “next” “prev” e “close”. Su un sito completamente italiano sta meglio la scritta “chiudi”.. ;)

Se volete provarlo, potete scaricare il plugin dal sito ufficiale e sovrascrivere questi files (tradotti in italiano):

Shadowbox – zip con files in italiano

Installazione

1. Caricare la cartella `shadowbox-js` in `/wp-content/plugins/`
2. Attivare il plugin dal ‘Plugins’ menu in WordPress
3. Aprire il file shadowbox-js.php e modificare $jsLib e $lightCSS in base alle istruzioni presenti nel file.

Utilizzo

Per far apparire un media all’interno di shadowbox basta inserire un link in questa forma:

<a href="http://domain.tld/directory/to/image.jpg" rel="shadowbox[album]">Image</a>

Il link può puntare a immagini, siti web, file flash, video su youtube, contenuto in linea. Basta assicurarsi di inserire `rel=”shadowbox”` poichè questo codice attiva il plugin.
Inserendo il codice `rel=”shadowbox[album]“` si possono inoltre raggruppare più immagini all’interno dello stesso album.

Integrazione con lightbox: se state già utilizzando lightbox sul vostro sito, non dovrete modificare nulla. Il plugin legge in automatico il codice ‘rel=”lightbox”‘ e lo interpreta normalmente.

Mi pare giusto scrivere due righe su alcuni gadget da domenica pomeriggio. Quelle cose che provi ad installare così per gioco e poi scopri che nella loro inutilità le consiglieresti ad altri.

Piclens

Piclens è la classica cosa che ti suggerisce l’amico, una estensione per il browser meravigliosa, esiste per Firefox, Internet Explorer o Safari. Se siete soliti navigare e fare ricerche su Flickr ne capirete immediatamente l’utilità. Se non lo siete, ma la installate ugualmente, ne coglierete subito l’eleganza.
In sostanza si tratta di un esploratore per siti che contengono immagini, funziona in automatico su Flickr, Google Images, Yahoo Image Search, SmugSmug, Photobucket, DeviantArt.. Quando si esegue una ricerca su questi siti e si clicca sul bottocino play che appare in alto a destra (in firefox), si apre un ambiente 3D sul quale si ha una panoramica completa delle fotografie che la ricerca ha restituito come risultato. Provatelo, e capirete avrete pietà per il mio entusiasmo.

Piclens Plugin per WordPress

Esiste pure un plugin per wordpress per riproporre ai propri visitatori l’eleganza di uno slideshow con piclens. Da questa pagina è possibile scaricarlo e trovare le istruzioni per l’installazione ed il suo utilizzo. Mi sarebbe piaciuto utilizzarlo sul mio blog ma purtroppo Aruba (la mia compagnia di hosting) ad oggi ha ancora la versione 4.4.7 di php, e questo plugin richiede la 5.1 o superiore.. Attenderò con pazienza.

Per la cronaca, esiste pure il programmino (win e mac) che permette di creare una galleria da aggiungere a qualsiasi pagina html, con tanto di javascript bello pronto. Utile ad esempio per inserire una galleria ad effetto su un sito che non giri con wordpress.

Google Screensaver

Google Scrensaver viene distribuito assieme al Google Pack (pacco a tutti gli effetti, nel suo complesso) e non è altro che uno screensaver che fa ruotare le fotografie quando il pc va in pausa. Funziona divinamente in parallelo a Picasa, dove è possibile marcare le foto per aggiungerle all’album “Salvaschermo”. Inoltre è possibile assegnare un feed di immagini dal quale pescare le foto e metterle in rotazione, quello predefinito di Google ad esempio offre fotografie d’autore di tutto rispetto.
Nulla di travolgente, solo qualche effetto un po’ più curato rispetto al salvaschermo classico di windows e la possibilità di aggiungere le immagini senza spostarle in una cartella apposita tutte assieme fanno di questo prodottino qualcosa a cui mi sono affezionato.
NB: per scaricarlo è necessario accedere alla pagina del google pack in inglese, in italiano infatti pare non esista..

Picasa

E’ tutta colpa delle compatte! Da quando ho questa benedetta fotocamera digitale le immagini sono al tempo stesso cruccio e passione. Mi piace catalogarle, ritoccarle, ma non troppo, ordinarle e naturalmente visualizzarle. Picasa è lo strumento ideale per tenere in armonia l’archivio delle fotografie: vacanze, gite domenicali e uscite con gli amici. E’ indicato sopratutto per un utilizzo personale, non è un software da professionisti, pochi semplici tasti che rispecchiano basilari funzioni: quando c’è troppa fretta un bel “mi sento fortunato” e la foto gode di nuovo vigore.
Probabilmente già lo conoscete, ma se non l’avessi citato mi sarei sentito in colpa.