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. ;)

Le mappe di Google sono un must per qualsiasi pagina contatti, ma possono diventare anche un accattivante elemento di design di una pagina web, se non addirittura l’elemento fondamentale di un sito. Ogni tanto è bello poterle personalizzare, coi propri colori e il proprio design. Con la versione 3 delle API di Google Maps, è possibile cambiare lo stile alle mappe e personalizzarle.. ma bisogna perderci tempo, per i pigri coloro che credono nella condivisione ecco Snazzy Maps, una raccolta di mappe pronte all’uso modificate nei colori e negli elementi visualizzati, ad esempio togliendo il nome delle città o delle strade, cambiando il colore all’acqua e quant’altro..

Questo è il mio personale elenco di stili da tenere in considerazione:

• Subtle Grayscale: va bene sempre, una mappa sulla scala dei grigi, non c’è luogo in cui non si possa mettere.
• Blue Water: sempre scala di grigi, ma il blu dell’acqua accende tutto.
• Lunar landscape: dark style, una mappa nera nera per chi non può rinunciare alla notte.
• Paper: da architetto, punto.
• Unimposed topography: senza nulla, nemmeno le strade.

Buone mappe a tutti.

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..

Il primo passo per poter far funzionare il meccanismo è la definizione di una Secure Store Target Application, ovvero di un elemento che memorizza le credenziali di accesso al sistema esterno, al quale Sharepoint farà riferimento per evitare che vengano chieste all’utente che in quel momento visualizza i dati. E’ tuttavia possibile evitare questo passo, se si desidera che per l’accesso al database esterno vengano utilizzate le credenziali dell’utente connesso anzichè credenziali comuni.
La Secure Store Target Application si crea dalla Central Administration. Navigando nella sezione Application Management, e cliccando su Manage Service Applications sotto a Service Applications. Apparirà una schermata con la lista delle service applications, clicchiamo su Secure Store Service. A questo punto clicchiamo su Generate New Key nel ribbon, si apre una finestra che chiede di impostare una pass phrase, servirà per poter modificare la target application, va quindi appuntata da qualche parte (ma questo appunto è superfluo, no?).

A questo punto si può creare una nuova target application e compilare tutti i campi necessari, come da figura sotto. Come email mettiamo quella di un amministratore di sistema, mentre come Target Application Type in genere si mette Group, perchè in questo modo è possibile associare la target application a un gruppo di utenti.

Nel passaggio successivo è possibile quali campi associare alla target application, in genere sono sufficienti username e password: saranno poi valorizzati con le credenziali che dovranno impersonificare l’utente che si collega al database.

Ora bisogna specificare per quali utenti sarà disponibile questa target application, e quali sono gli utenti amministratori.

Ora che la target application è creata, non resta che settare le credenziali che utilizzerà per gli accessi al database esterno. Selezioniamo la target application dalla lista e premiamo il tasto set credential nel ribbon.

Si aprirà una finestra dove inserire username e password, questo utente deve ovviamente avere accesso ai dati sul database esterno al quale vorremo collegare le liste di Sharepoint.

Ora l’attività si sposta su Sharepoint Designer 2010, per impostare i contenuti esterni e creare le liste che puntano ad essi. La prima cosa da fare è definire un External Content Type: ovvero un contenuto esterno dal quale attingere. Dopo aver aperto un sito, bisogna andare sul menù External Content Type e tramite il comando ribbon crearne uno nuovo.

Diamo un nome al contenuto esterno e clicchiamo sul link per impostare la connessione verso il sistema esterno.

Ora bisogna cliccare sul tasto Add Connection per aggiungere una connessione.

Apparirà una serie di schermate dove compilare i dati per l’accesso al database esterno.

Selezionare come opzione di connessione Connect with Impersonated Custom Identity e mettere il nome della secure store application definita prima sulla Central Administration.

Premendo OK il sistema chiederà le credenziali, inserire quelle dell’utente definito come amministratore della secure store application ai passi precedenti. Una volta validata la connessione, nell’Operation Designer apparirà tra le connessioni disponibili anche quella appena impostata: si espande l’albero per trovare la tabella o la vista contenente i dati che dovranno popolare la lista esterna di Sharepoint.

Una volta individuata, cliccando col tasto destro sulla tabella o sulla lista, è possibile generare le operazioni che servono (lettura, modifica, cancellazione, ecc..). E’ possibile crearle tutte assieme, cliccando su Create All Operation. Nelle finestre successive dovremo dare un nome alle operazioni, si potranno settare filtri e sarà necessario marcare almeno un campo come identifier (ID di lista).

I filtri sono necessari per limitare il numero di record restituiti: di default è 2000 e a volte questo valore potrebbe non essere sufficiente, causando errore nella visualizzazione della lista tramite il browser sul sito Sharepoint.

Per l’operazione Read List, conviene settare qualche campo per la visualizzazione nel picker, altrimenti di default saranno visualizzati tutti e lato utente questa cosa risulta scomoda.

andando su List and Libraries, nei ribbon appare il comando Elenco Esterno.

Per chi volesse approfondire:

http://blog.concurrency.com/sharepoint/accessing-external-data-using-business-connectivity-services-in-sharepoint-2010/

Immagina che questa band voglia avere una sezione dove presenta i propri dischi, magari un widget sulla sidebar o una pagina dedicata. Servirà quindi un tipo di post personalizzato: non sono articoli semplici, non sono pagine. Sono dischi. E a questi dischi verranno associati anche una serie di campi personalizzati, come ad esempio l’anno di produzione, l’etichetta, i crediti per il missaggio. E poi, perchè no, anche il video di youtube, se questo esiste. Infine, questi dischi possono appartenere a due diverse categorie: album o singoli.

Si tratta insomma di un oggetto a parte, da usare nel pannello di amministrazione di wordpress, che poi apparirà come rappresentato nell’immagine sotto.

Per fare ciò, il punto centrale è il famoso file di template functions.php, vediamo quali sono le cose da fare.

Dovremo innanzi tutto dichiarare il nuovo tipo post, dicendo che questo nuovo oggetto sarà “catalogabile” con due tassonomie: i tag e le tipologie. I tag sono i conosciuti tag nativi di wordpress che vengono utilizzati anche nei normali post del blog, mentre le tipologie sono una nuova tassonomia custom, che andremo a definire in seguito, e ci servirà per contraddistinguere i singoli dagli album, o comunque per creare una sorta di categorie per i post di tipo disco. Partiamo quindi aggiungendo il codice qui sotto:

/*******************************
DISCHI
aggiunge un tipo post custom dal nome "disco"
che avrà un titolo, un contenuto esteso, un riassunto,
il riferimento all'autore e una immagine in evidenza,
oltre ad alcuni attributi custom
********************************/

add_action( 'init', 'register_cpt_disco' );
function register_cpt_disco() {
$labels = array(
'name' => _x( 'Dischi', 'disco' ),
'singular_name' => _x( 'Disco', 'disco' ),
'add_new' => _x( 'Aggiungi Nuovo', 'disco' ),
'add_new_item' => _x( 'Aggiungi Nuovo Disco', 'disco' ),
'edit_item' => _x( 'Modifica Disco', 'disco' ),
'new_item' => _x( 'Nuovo Disco', 'disco' ),
'view_item' => _x( 'Visualizza Disco', 'disco' ),
'search_items' => _x( 'Cerca Dischi', 'disco' ),
'not_found' => _x( 'Nessun disco trovato', 'disco' ),
'not_found_in_trash' => _x( 'Nessun disco trovato nel cestino', 'disco' ),
'parent_item_colon' => _x( 'Disco Padre:', 'disco' ),
'menu_name' => _x( 'Dischi', 'disco' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => false,
'description' => 'Dischi della Band',
//specifico quali proprietà avrà questo nuovo tipo di post
'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields' ),
'taxonomies' => array( 'tipologie', 'post_tag' ),
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => true,
'capability_type' => 'post'
);
register_post_type( 'disco', $args );
}
/* aggiungo dei custom fields (year_completed, videoid, labelc,credits) al tipo post "disco"
il primo (year_completed) lo aggiungo come "year_completed-meta"
gli altri (videoid, labelc,credits) li aggiungo come "credits_meta" */
add_action("admin_init", "admin_init");
function admin_init(){
add_meta_box("year_completed-meta", "Year Completed", "year_completed", "disco", "side", "low");
add_meta_box("credits_meta", "Credits", "credits_meta", "disco", "normal", "low");
}
function year_completed(){
global $post;
$custom = get_post_custom($post->ID);
$year_completed = $custom["year_completed"][0];
?>
<label>Year:</label>
<input name="year_completed" value="<?php echo $year_completed; ?>" />
<?php }
function credits_meta() {
global $post;
$custom = get_post_custom($post->ID);
$videoid = $custom["videoid"][0];
$labelc = $custom["labelc"][0];
$credits = $custom["credits"][0]; ?>
<p><label>Youtube Video ID:</label><br />
<textarea cols="50" rows="5" name="videoid"><?php echo $videoid; ?></textarea></p>
<p><label>Label credits:</label><br />
<textarea cols="50" rows="5" name="labelc"><?php echo $labelc; ?></textarea></p>
<p><label>Mastering credits:</label><br />
<textarea cols="50" rows="5" name="credits"><?php echo $credits; ?></textarea></p>
<?php } ?>

Ora dobbiamo invece definire una nuova tassonomia per questo tipo di post, servirà quindi aggiungere anche il codice sottostante:

add_action( 'init', 'register_taxonomy_tipologie' );
function register_taxonomy_tipologie() {
$labels = array(
'name' => _x( 'Tipologie', 'tipologie' ),
'singular_name' => _x( 'Tipologia', 'tipologie' ),
'search_items' => _x( 'Cerca Tipologie', 'tipologie' ),
'popular_items' => _x( 'Tipologie Principali', 'tipologie' ),
'all_items' => _x( 'Tutte le Tipologie', 'tipologie' ),
'parent_item' => _x( 'Parent Tipologia', 'tipologie' ),
'parent_item_colon' => _x( 'Parent Tipologia:', 'tipologie' ),
'edit_item' => _x( 'Modifica Tipologia', 'tipologie' ),
'update_item' => _x( 'Aggiorna Tipologia', 'tipologie' ),
'add_new_item' => _x( 'Aggiungi nuova Tipologia', 'tipologie' ),
'new_item_name' => _x( 'Nuova Tipologia', 'tipologie' ),
'separate_items_with_commas' => _x( 'Separate tipologie with commas', 'tipologie' ),
'add_or_remove_items' => _x( 'Add or remove tipologie', 'tipologie' ),
'choose_from_most_used' => _x( 'Choose from the most used tipologie', 'tipologie' ),
'menu_name' => _x( 'Tipologie', 'tipologie' ),
);
$args = array(
'labels' => $labels,
'public' => true,
'show_in_nav_menus' => true,
'show_ui' => true,
'show_tagcloud' => false,
'hierarchical' => true,
'rewrite' => true,
'query_var' => true
);
register_taxonomy( 'tipologie', array('disco'), $args );
}
// al salvataggio dei post i valori dei custom fields devono essere memorizzati
add_action('save_post', 'save_details');
function save_details(){
global $post;
update_post_meta($post->ID, "year_completed", $_POST["year_completed"]);
update_post_meta($post->ID, "videoid", $_POST["videoid"]);
update_post_meta($post->ID, "labelc", $_POST["labelc"]);
update_post_meta($post->ID, "credits", $_POST["credits"]);
}

Si può scrivere questo codice a mano, oppure possono venirci in aiuto due comodissimi tool on line (entrambi di themergency):

• WordPress Custom Post Types Generator
• WordPress Custom Taxonomies Generator

A questo punto non resta che installare il nostro tema e popolare il sito di contenuti custom, che poi potranno essere utilizzati per creare layout specifici. Questo è un argomento che non viene trattato qui, ma giusto per dare un’imbeccata, basti pensare a come è possibile impostare la funzione query_posts() indicando di estrarre dei custom post types:


<?php
//prendo gli ultimi 16 dischi nella categoria album
query_posts('showposts=16&post_type="disco"&tipologie="album"');
?>


Per chi volesse approfondire il tema, ecco alcune utili risorse:

• http://net.tutsplus.com/tutorials/wordpress/rock-solid-wordpress-3-0-themes-using-custom-post-types/
• http://wp.tutsplus.com/tutorials/quick-tip-3-tools-for-making-instant-custom-post-types/
• http://justintadlock.com/archives/2010/04/29/custom-post-types-in-wordpress
• http://designwoop.com/2012/05/quality-tutorials-for-creating-wordpress-custom-post-types/
• http://wptheming.com/2011/11/event-posts-in-wordpress/

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.

Come fare? Ovviamente javascript e css. La rete è piena di esempi per disabilitare il cut&paste o evitare la stampa di una porzione di pagina su carta; per il primo obiettivo useremo uno script semplicissimo, per il secondo un foglio di stile associato alla stampa. Tutto qui:

<script language="JavaScript">
<!--
// Disable selection of content
function disableselect(e){return false}
function reEnable(){return true}
document.onselectstart=new Function ('return false')
if (window.sidebar){document.onmousedown=disableselectdocument.onclick=reEnable}
// -->
</script>

<script language="JavaScript">
<!--
// Disable right mouse click Script
var message="Function Disabled!";
function clickIE4() {if (event.button==2) {alert(message);return false;}}
function clickNS4(e) {if (document.layers||document.getElementById&&!document.all)
{if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById) {document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>

<style type="text/css"> @media print { body { display:none } } </style>

Con Sharepoint 2010 non è possibile però inserire javascript su una webpart di contenuto, inoltre per raggiungere lo scopo serve mettere alcune righe di codice nel tag <head> della pagina. Dovremo quindi utilizzare Sharepoint Designer, dove possiamo entrare nell’editor della pagina wiki e cliccando su Modalità Avanzata nel ribbon siamo in grado di modificare il codice. Ogni pagina Sharepoint contiene un tag, PlaceHolderAdditionalPageHead, pensato appositamente per aggiungere codice custom nell’head della pagina.

Nell’immagine sopra ecco un esempio pratico: risultato raggiunto! :)

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..

Tutto parte dal menù del sito su cui si intende intervenire: Site Action -> Site Settings. Sotto al gruppo Look and Feel troveremo varie voci, come nell’immagine a sinistra. Una prima veloce sistemata ai colori si può dare cliccando su Site theme, da qui possiamo impostare la tavolozza cromatica che desideriamo. Va detto, a onor del vero, che se vogliamo salvare un nuovo tema cromatico dovremo utilizzare Power Point, ma l’idea di lavorare su un sito web attraverso power point mi sconvolge talmente tanto che non l’ho presa nemmeno in considerazione. Ma volenti o nolenti prima o poi sarà da fare.

Una volta decisi i colori, possiamo cimentarci nella creazione di una master page personalizzata, da utilizzare come base per la nostra web application, a cui associare un foglio di style CSS che conterrà le nostre personalizzazioni ed una eventuale favicon. Per fare ciò è necessario aprire Sharepoint Designer 2010 e caricare il sito web, dal menù di sinistra dobbiamo quindi selezionare la voce “List and Libraries” e successivamente entrare nella cartella “Style Library” (vedi figura sotto).

In questa cartella andremo a creare una nuova cartella, chiamandola “mystyle” dove posizioniamo il CSS e la favicon, oltre a eventuali immagini utili per abbellire tramite CSS il nostro sito web.

A questo punto è il momento di creare la master page. Come prima, da menù, andiamo sulla voce “Master Pages” (vedi figura sotto).

Noteremo che ci sono due pagine fondamentali, una dal nome “default.master” e l’altra “v4.master”. Le pagine master definiscono una struttura comune per tutte le pagine Web in Microsoft SharePoint Server. Per impostazione predefinita, quando viene richiesta una pagina, la pagina master e la pagina di contenuto sono combinate per produrre una singola pagina. Utilizzando una pagina master, tutte le pagine di contenuti e applicazioni condividono la stessa struttura della pagina e hanno lo stesso look & feel. La pagina default.master è utile per la retro compatibilità con SharePoint 2007, la versione 2010 utilizza la pagina v4.master, famosa per l’interfaccia a ribbon tipica di Office.

Per completezza, ecco la descrizione delle master page di default dal sito Microsoft:

Copiamo quindi la pagina v4.master e nominiamola ad esempio mypage.master. Ora doppio clic sulla pagina appena creata e si presenterà davanti a noi una schermata, al centro c’è la voce “edit file”, clicchiamoci sopra per fare il check-in della pagina e iniziare a modificarla secondo le nostre esigenze. L’obiettivo è inserire il riferimento a un CSS che utilizzeremo per modificare esclusivamente ciò che ci interessa. Passiamo quindi alla visualizzazione del codice.

All’interno del tag <head> possiamo inserire i riferimenti al CSS e ad una favicon specifici.

<SharePoint:SPShortcutIcon runat="server" IconUrl="/Style Library/mystyle/favicon.ico"/>
<SharePoint:CssRegistration name="/Style Library/mystyle/style.css" After="corev4.css" runat="server"/>

Abbiamo messo il riferimento ai file salvati in precedenza nella cartella appositamente creata. A questo punto dobbiamo salvare e impostare la master page appena creata come pagina di default. Per fare ciò, si può cliccare col tasto destro sul nome del file e selezionare la voce “Imposta come pagina master predefinita” oppure dal menù Site Action sul browser selezionare la voce “Master page” e impostare la pagina custom come quella predefinita (vedi immagine sotto).

Ora siamo liberi di modificare il CSS come meglio crediamo, nel mio caso ad esempio ho inserito questo codice:

body { background: #fff url(bg_erbetta.png) repeat-x bottom left;}
.s4-title { background: #fafafa url(header_bg.png) no-repeat bottom right;}
.s4-socialdata-notif, s4-socialdata {
background: #fafafa;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(250, 250, 250);
/* RGBa with 0.6 opacity */
background: rgba(250, 250, 250, 0.9);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99fafafa, endColorstr=#99fafafa);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99fafafa, endColorstr=#99fafafa)"; }
.s4-ca { background: transparent;}

Ovviamente le possibilità di personalizzazione della master page sono tante altre, si possono spostare gli elementi o inserire pezzi di codice specifici. In questi appunti ho trascritto solo l’ABC, chi più ne ha più ne metta..

Chiudo con alcune utili risorse per chi vuole approfondire il tema:

• http://msdn.microsoft.com/en-us/library/gg430141.aspx
• http://office.microsoft.com/en-us/sharepoint-designer-help/customize-a-master-page-to-brand-your-site-HA102449505.aspx
• http://www.thesharepointmuse.com/sharepoint-2010-branding/
• http://nonsolosharepoint.wordpress.com/2010/01/26/its-a-ribbon-behaviour/ -> utile riferimento sul tema ribbon..
• http://nonsolosharepoint.wordpress.com/2009/12/23/migrare-una-master-page-da-sharepoint-2007-a-sharepoint-2010/

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.

Leggere i dati di un documento XML è un’operazione semplice e veloce, farli visualizzare su una pagina web è altrettanto rapido, ma è bene sapere alcune nozioni per potersi muovere con tranquillità e sicurezza.

Andiamo con ordine e vediamo subito un esempio di un file XML che vogliamo trattare:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<DataSet>
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
<data>
[..]
</data>
</DataSet>

Questo file potrebbe rappresentare dei dati produttivi, riguardanti ad esempio i materiali entrati in magazzino, i materiali prodotti e il venduto.

Il modo più rapido e banale per leggere questo file e farlo visualizzare su una pagina ASPX è tramite il seguente codice:

DataSet ds = new DataSet();
ds.ReadXml(@"C:\test.xml", XmlReadMode.Auto);
DataView MyDataView = new DataView(ds.Tables[0]);
MyDataGrid.DataSource = MyDataView;
MyDataGrid.DataBind();

Il codice non fa altro che creare un nuovo DataSet per contenere i dati che andremo a leggere, leggere il file tramite il metodo ReadXml(), creare una DataView con la tabella creata nel dataset e assegnare quest’ultima come DataSource per la DataGrid.

All’interno della pagina .aspx ci sarà quindi una DataSource così fatta:

<asp:DataGrid id="MyDataGrid" runat="server" >
    <HeaderStyle CssClass="th">
    </HeaderStyle>
</asp:DataGrid>

Tralasciamo lo stile attribuito alla testata della datagrid, ciò che è importante in questo caso è solo l’ID. 

Così facendo però ottengo una tabella di questo tipo:

E tutti gli altri dati che fine hanno fatto? Sono stati salvati in altre tabelle del DataSet, assieme a tutti gli attributi dell’xml; queste tabelle avranno come riferimento il data_Id e potrò utilizzarle come meglio credo.

Se infatti cambiamo il primo codice, mettendo una tabella diversa, in questo modo:

DataView MyDataView = new DataView(ds.Tables[1]);

Verrà visualizzata una pagina con la seguente tabella:

Se cambio e metto la terza tabella:

DataView MyDataView = new DataView(ds.Tables[2]);

Il risultato sarà:

Mentre per le tabelle successive, avrò questi risultati visualizzati:

Incrociando queste tabelle attraverso il campo data_Id potrei ricavare tutti i dati contenuti nell’XML, attributi e testi all’interno dei tag.
Il mio obiettivo era però quello di far visualizzare questi dati senza gli attributi riportati nell’XML. Ciò che mi interessa sono solo i dati riportati all’interno dei tag. Vorrei avere un risultato di questo tipo:

In questo caso potrebbe fare al caso nostro l’ XML Schema. Si tratta di un file con estensione XSD, che descrive i dati contenuti in un file XML. Ogni file XML può avere uno schema associato che lo descrive. Esistono diversi tool che possono creare un file XSD a partire da un XML, uno di questi, che trovo molto pratico è quello di Flame-Ware completamente on-line. 

Il nostro file XML iniziale potrebbe essere descritto da questo XSD, supponendo che tutti i campi siano stringe.

<?xml version="1.0"?>
<!-- Generated using Flame-Ware Solutions XML-2-XSD v2.0 at http://www.flame-ware.com/Products/XML-2-XSD/ -->
<xs:schema id="DataSet" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
  <xs:element name="DataSet" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
    <xs:complexType>
      <xs:choice minOccurs="0" maxOccurs="unbounded">
        <xs:element name="data">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="period" type="xs:string" minOccurs="0" />
              <xs:element name="description" type="xs:string" minOccurs="0" />
              <xs:element name="updated" type="xs:string" minOccurs="0" />
              <xs:element name="note" type="xs:string" minOccurs="0" />
              <xs:element name="logunit" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="logunit_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="id" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
              <xs:element name="entered" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="entered_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="matcode" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
              <xs:element name="produced" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="produced_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="matcode" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
              <xs:element name="delivered" nillable="true" minOccurs="0" maxOccurs="unbounded">
                <xs:complexType>
                  <xs:simpleContent msdata:ColumnName="delivered_Text" msdata:Ordinal="1">
                    <xs:extension base="xs:string">
                      <xs:attribute name="matcode" type="xs:string" />
                    </xs:extension>
                  </xs:simpleContent>
                </xs:complexType>
              </xs:element>
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:choice>
    </xs:complexType>
  </xs:element>
</xs:schema>

Per associare questo schema al file XML, è necessario dichiararlo nell’intestazione, in questo modo:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<DataSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="schema.xsd">
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
</DataSet>

Così facendo però, se rilanciamo la pagina costruita in precedenza, il risultato sarà identico: un unico dataset con diverse tabelle collegate tra loro dal campo data_Id.

Quindi? La soluzione c’è. Dobbiamo solo definire uno schema XSD semplificato all’interno dell’XML stesso. In questo modo:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<DataSet>
<xs:schema id="NewDataset" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
  <xs:element name="NewDataset" msdata:IsDataSet="true" msdata:UseCurrentLocale="true">
    <xs:complexType>
      <xs:choice minOccurs="0" maxOccurs="unbounded">
        <xs:element name="data">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="period" type="xs:string" minOccurs="0" />
              <xs:element name="description" type="xs:string" minOccurs="0" />
              <xs:element name="updated" type="xs:string" minOccurs="0" />
              <xs:element name="note" type="xs:string" minOccurs="0" />
              <xs:element name="logunit" type="xs:string" minOccurs="0" />
              <xs:element name="entered" type="xs:string" minOccurs="0" />
              <xs:element name="produced" type="xs:string" minOccurs="0" />
              <xs:element name="delivered" type="xs:string" minOccurs="0" />
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:choice>
    </xs:complexType>
  </xs:element>
</xs:schema>
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
<data>
<period>2010-06-06</period>
<logunit id="myID">Milano</logunit>
<entered matcode="ABC001">100</entered>
<produced matcode="ABC002">101</produced>
<delivered matcode="ABC002">100</delivered>
<description>Caramelline alla fragola</description>
<updated>2010-06-06T13:05:21+01:00</updated>
<note>tante belle cose..</note>
</data>
</DataSet>

Il risultato finale sarà quindi una DataGrid che può essere visualizzata come sotto, utilizzando pari pari il codice C# definito all’inizio di questo articolo.

Buon divertimento con l’XML..

Ricerche Maestre è un motore di ricerca per bambini, genitori e maestri che seleziona siti scelti da esperti insegnanti della Scuola Primaria. Si possono trovare risorse scolastiche per la scuola elementare e si può navigare all’interno di siti adatti a bambini dai 3 ai 14 anni, cercando contenuti educativi e di svago. La ricerca è immediata ed efficace. Il motore va dritto al bersaglio, tecnologia Google.

E il design? Una paginetta che mi ha dato un sacco di soddisfazioni. Nulla di sconvolgente, ma c’era una piccola sfida da affrontare: mettere tutto  su una stessa pagina html, dal form di ricerca ai risultati, compresi i testi informativi e di corredo. Con un po’ di javascript, si può.

Innanzi tutto, un plugin di jQuery per riprodurre il famoso effetto del sito di Coda. Una valida alternativa potrebbe essere questo coda-slider, anch’esso plugin jquery, con una buona documentazione sugli esempi demo. In secondo luogo alcuni div che contengono i risultati di ricerca ed il gioco è fatto!

Questo fantastico effetto è facilmente replicabile, l’idea è quella di riutilizzarlo per il prossimo tema wordpress, è un’anteprima!

Insomma, Ricerche Maestre è un motore di ricerca personalizzato a cura del Maestro Alberto Piccini, al quale collaborano Paola Limone, Lidia Pantaleo, Annarita Ruberto, Renato Murelli. Ricerche Maestre al momento indicizza circa 3.000 siti selezionati tra i migliori reperibili in rete, per bambini e famiglie, a carattere divulgativo e informativo, educativi, scolastici e di insegnanti.

Se avete bambini: il luogo giusto per iniziare le esplorazioni della rete!

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!

In realtà la laurea è avvenuta a Marzo, i festeggiamenti pure.. in un poetico irish pub addobbato a festa per San Patrizio.

Durante lo stage e nei mesi a seguire mi sono occupato di PDM (Product Data Management) e di intranet (sorprendendomi di un versatilissimo Sharepoint) in un gran bel gruppo industriale. Avevo già pubblicato qualche idea, ora è il momento del pdf. Pubblico solo in parte, per ovvi motivi di riservatezza, il capitolo 7 relativo alla intranet sviluppata in azienda.

L’intero lavoro è rilasciato con licenza Creative Commons.
Scarica il PDF: Tecnologie ICT per l’Enterprise 2.0: tra Project Management e Collaborazione

Tecnologie ICT per l’enterprise 2.0: tra project management e collaborazione by Davide Del Monte is licensed under a Creative Commons Attribuzione-Non commerciale-Non opere derivate 2.5 Italia License.
Permissions beyond the scope of this license may be available at www.diplod.it.

Di cosa parla questo lavoro? Il sommario vale più di mille parole:

1.Introduzione……………………………………………………………………………….. 11

2.Lo scenario…………………………………………………………………………………. 13
(a)Project Management in R&D………………………………………………. 14
(b)La struttura organizzativa…………………………………………………… 18
(c)Importanza della gestione progetti e Open Innovation………….. 21
(d)Intranet: condivisione e architetture Service Oriented…………… 25
(e)Gestione documentale abbinata ai progetti…………………………. 27

3.Gli strumenti per l’innovazione…………………………………………………….. 31
(a)Ai confini del Knowledge Management……………………………….. 32
(b)Crowdsourcing…………………………………………………………………. 35
i.caso Goldcorp………………………………………………………… 37
ii.caso Colgate-Palmolive…………………………………………… 38
(c)Triz Innovation…………………………………………………………………. 38

4.Social Network e analisi delle reti di persone…………………………………. 45
(a)Enterprise 2.0 e reti sociali………………………………………………….. 44
(b)I bisogni emergenti: Social Network e Appartenenza aperta……. 47
(c)Social Network Analysis e Value Network Analysis…………………. 53
(d)Gli strumenti per l’analisi delle reti sociali…………………………….. 59
Approfondimento tecnico: il software Ucinet……………… 64
(e)Small world network e i 6 Degrees su Facebook…………………….. 68
(f)Le reti a invarianza di scala e la dinamica dei sistemi complessi.. 70
(g)Elementi teorici per la costruzione di un Social Network…………. 74

5.Governance ICT: integrazione e architetture service oriented…………… 83
(a)complessità crescente e bisogno di integrazione……………………. 84
(b)Service Oriented Architecture (SOA) e Software as a Service
(SaaS), Business Process Management (BPM) e Rich Internet Applications (RIA) nei modelli organizzativi rizomatici…………… 85
(c)Dalle prime forme di scambio informazioni alla Enterprise
Application Integration (EAI)………………………………………………. 93
(d)Accoppiamento del software: bene o male?…………………………. 97
(e)Il ruolo dell’ICT: Perché i progetti falliscono………………………….. 99

6.Gli strumenti della Social Era…………………………………………………………. 103
(a)Virtual workspaces: tra wiki, blog e team di lavoro…………………. 104
i.caso Lago………………………………………………………………… 109
ii.caso Serena……………………………………………………………. 111
(b)Sharepoint e Project Web Access: la collaborazione sui progetti
secondo Microsoft…………………………………………………………….. 112
(c)Qualche cenno sui vendor internazionali e i player italiani……… 119
(d)Qualche cenno sul mondo Open Source………………………………. 124

7.Il caso LandiRenzo SpA: intranet per il reparto R&D……………………….. 129
(a)L’azienda e l’unità R&D………………………………………………………. 130
(b)L’analisi di partenza…………………………………………………………… 133
i.Persone e progetti………………………………………………….. 133
ii.Metodologie e prassi lavorative……………………………….. 134
iii.La collaborazione e gli strumenti……………………………… 136
iv.I network relazionali………………………………………………. 138
v.I rapporti con le sedi estere…………………………………….. 141
(c)Il re-design della intranet R&D: metodologie e problematiche.. 142
(d)Sharepoint e PWA: personalizzazioni della piattaforma e Web Parts……………………………………………………………………………….. 145
i.Utenti, sincronizzazione Active Directory e
ristrutturazione RBS……………………………………………….. 149
ii.Calendari condivisi per i banchi e la strumentazione
tecnica………………………………………………………………….. 152
iii.Template Landi………………………………………………………. 155
Approfondimento tecnico: Creazione tema Sharepoint…………………………………………………… 156
iv.Realizzazione prototipo di project workspace: uno spazio collaborativo con wiki e blog……………………………………. 159
(e)Product Data Management con il software CoCreate Model
Manager: workflow e integrazione SAP……………………………….. 166
i.Creazione di una nuova classe documentale………………. 174
ii.Creazione di nuovi materiali…………………………………….. 176
iii.Definizione workflow di approvazione disegni……………. 178
(f)Punti di forza e debolezza dei sistemi e ipotesi di sviluppo……… 180
i.PWA: i Key Users…………………………………………………….. 181
ii.PDM: integrazione SAP…………………………………………….. 183
iii.Scarso utilizzo e mancanza di incentivi………………………. 184
iv.Web Services con PDM……………………………………………. 185
v.Integrazione tra Sharepoint e SAP Portal……………………. 186

8.Conclusioni: una nuova intranet di Gruppo…………………………………….. 191

Riferimenti Bibliografici………………………………………………………………… 199
Appendice A: Una Web Part con le news da Google, XML e XSL all’opera 202
Appendice B: procedura per il deploy di un Application Template Sharepoint…………………………………………………………………………………… 206
Ringraziamenti…………………………………………………………………………….. 209

Mi piacerebbe se da questo lavoro nascessero spunti di riflessione, se qualcuno si facesse avanti per indicarmi esperienze simili, per scambiare pareri e conoscenze. Buona lettura ;)

Questa dei libri in azienda l’ho sentita per la prima volta ad una conferenza su Sharepoint organizzata da Amicucci Formazione. A detta di molti, Sharepoint sembra essere il non plus ultra per creare una intranet 2.0 come si deve: ormai è pubblicizzato in ogni dove come miglior piattaforma, io ancora devo convircermi fino in fondo: il basso supporto di browser diversi da IE e la non validità del codice secondo i canoni di accessibilità W3C mi fa pensare.. Vuoi per il buon marketing che sanno fare dalle parti di Microsoft, vuoi perchè effettivamente si tratta di una piattaforma duttile, questo cosino inizia a piacermi sul serio.

Così, tra le verie idee, ve n’era una che mi ha catturato più di altre: Libri in Azienda. Alla base di tutto c’è la volontà di diffondere proposte di lettura ai dipendenti; la novità è che il tutto viene realizzato secondo le logiche 2.0. Ai dipendenti è lasciata facoltà di commentare e recensire i libri proposti, loro stessi possono proporli. L’azienda può limitarsi a dare consigli di lettura oppure istituire una biblioteca vera e propria, in qualche stanzino vicino alla sala caffè: dove le persone possono recarsi per prendere in prestito i libri.

Ho pensato di mettere in pratica la faccenda (solo a livello virtuale), con ciò che avevo a disposizione: WSS e Sharepoint Designer. Ecco allora che che i titoli sono presentati attraverso la intranet, che l’azienda apre un profilo su Anobii e tramite i feed RSS la libreria viene presentata su una xml web part.

Le strade possibili erano due:

• Utilizzare due liste Sharepoint, dove vengono catalogati libri e recensioni.
• Utilizzare un social network esterno come Anobii, presentandone l’attività tramite i feed RSS

Cosa è meglio? Beh.. non si tratta di business, semmai di formazione collaterale del personale. Non ci sono dati sensibili, non ci sono dati da salvare; la scelta è presto fatta: servizio esterno!

Tramite un tenplate XSL si può processare il feed di Anobii e il codice è piuttosto snello:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:foo="http://purl.org/rss/1.0/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:admin="http://webns.net/mvcb/"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
version="1.0" xmlns:ddwrt2="urn:frontpage:internal">
<xsl:template match="/rss" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:foo="http://purl.org/rss/1.0/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:admin="http://webns.net/mvcb/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">
<html>
<head>
<style type="text/css">
img {border: none;}
</style>
</head>
<body>
<div>
<ul style="list-style: none; margin: 0; padding:0">
<xsl:for-each select="channel/item">
<li style="border: 1px dotted #ccc; margin: 5px; padding: 5px; background: #f9f9f9;">
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="link"/>
</xsl:attribute>
<xsl:value-of select="title"/>
</xsl:element>
<br/>
<small style="color: #666; text-align: right"><xsl:value-of select="pubDate" /></small>
<xsl:value-of select="content:encoded" disable-output-escaping="yes" />
</li>
</xsl:for-each>
</ul>
</div>
<div id="footer" style="display: none;">
<xsl:value-of select="channel/copyright" />
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>


Dal punto di vista tecnico è tutto ok, adesso si tratta solo di seguire gli sviluppi e i risultati dell’esperimento! Qualcuno ha provato cose del genere?