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? :)

Servizi operanti in Italia

Mangopay: di stampo francese, è indubbiamente il più competitivo. E’ stato concepito e viene utilizzato solamente da piattaforme di crowdfunding (ad esempio Ulule) e marketplaces (ad esempio Vinted). Ha però alcuni vincoli per quanto riguarda gli account base, oltre certe soglie di denaro ricevuto/scambiato bisogna inviare documentazione per validare la propria identità. Le API sono ben documentate e improntate a un facile utilizzo da parte dei programmatori.

Payza: attivo in diversi paesi tra cui anche l’Italia, offre tariffe vantaggiose se confrontato a PayPal, ma ha un processo di apertura del conto business per ricevere pagamenti un po’ macchinoso. E’ necessario inviare documentazione per validare la propria identità. E’ un servizio piuttosto utilizzato, esistono infatti plugin che permettono di usare questo gateway con noti plugin (ad esempio Easy Digital Download su WordPress, per creare il proprio marketplace).

Braintree: di fatto un ramo di PayPal dal 2013. E’ il gateway usato da Airbnb, Github e Uber, quindi non di certo l’ultimo arrivato. E’ stato acquisito da Paypal ed ora opera anche in Italia, con tariffe leggermente inferiori.

Google Wallet: è l’evoluzione del servizio Google Checkout. E’ forse ancora un po’ acerbo, è stato infatti concepito per un utilizzo principalmente mobile, tramite cellulare o tablet. L’utente deve possedere un account Google tramite il quale registra i dati della/e propria/e carta/e di credito che utilizzerà al momento dei pagamenti. In questa pagina i dettagli per aprire un account business per poter ricevere pagamenti.

2Checkout: opera in tutto il mondo, ma le tariffe non sono attualmente competitive rispetto a quelle di PayPal (sono infatti più alte).

Clickandbuy: è di fatto un portafoglio elettronico, dove gli utenti possono versare denaro per poi fare acquisti online sui siti che lo consentono. Il vincolo vero consiste appunto nell’apertura di un account da parte dei propri clienti. Esiste poi una piccola schiera di servizi domestici, mediamente cari soprattutto in virtù dei canoni o dei costi fissi di attivazione e con commissioni variabili in base al settore merceologico o ai volumi. Non tutti però, quindi un giro sui vari siti dei servizi è bene farlo. In genere si appoggiano tutti a singole banche, che hanno aperto un servizio per i pagamenti online, non si tratta quindi di vere e proprie piattaforme tipo paypal, ma di servizi che permettono al negozio online di ricevere denaro senza preoccuparsi della gestione dei dati delle carte di credito dei clienti.

• GestPay di Banca Sella
• xPay di CartaSi: si tratta del POS virtuale offerto dal circuito CartaSi
• Setefi di Intesa San Paolo
• IWSmile di IW Bank: POS elettronico per ricevere pagamenti che deve essere abbinato a un conto corrente della banca
• Secur Pay di Credem: POS virtuale

Per completezza, è bene citare anche un servizio di mobile POS, senza canoni fissi, da utilizzare per ricevere pagamenti al volo utilizzando il proprio smartphone. Cito solo Payleven, poichè è il più evoluto e semplice; esistono in ogni caso anche diversi servizi similari offerti da istituti di credito.

Servizi non ancora attivi in Italia

All’estero purtroppo le alternative esistono e sono davvero interessanti, certamente hanno tariffe competitive e servizi promettenti. Non resta che tenerle monitorate per capire quando e se saranno disponibili anche nel nostro paese.

Stripe: al momente attuale è in “private beta” per l’Italia, quindi candidato ad essere un servizio disponibile nel nostro paese a breve. Offre tariffe vantaggiose e stabilità, è infatti già presente in diverse nazioni del mondo, ha API ben documentate per diversi linguaggi e gestisce molte valute internazionali.

WePay: servizio pensato appositamente per le piattaforme (crowdfunding, marketplaces, SMB platform), può contare su clienti già affermati e delle API documentate al meglio.

Amazon Payments: è il sistema di pagamento di Amazon, aperto a tutti coloro che vogliono implementarlo sul proprio sito web. Può contare su una base utenti davvero notevole.

Swipe HQ: un sistema di pagamento che opera con diverse valute e può contare su una serie di plugin già preconfezionati per sistemi come Magento o WordPress

Ne conoscete altre? Segnalatelo nei commenti!

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

Supponiamo di aver realizzato un function module in SAP semplicissimo: due parametri in ingresso (un numero e una stringa) e due parametri in uscita (lo stesso numero al quadrato e la stessa stringa).
Di seguito il codice ABAP di tale funzione:

FUNCTION Z_TEST000.
*"----------------------------------------------------------------------
*"*"Interfaccia locale:
*" IMPORTING
*" VALUE(NUM) LIKE BAPISDHD1-DUN_COUNT DEFAULT 4
*" VALUE(TEXTTEST) LIKE MARA-MATNR
*" EXPORTING
*" VALUE(RETURNNUM) LIKE BAPISDHD1-DUN_COUNT
*" VALUE(RETURNCHAR) LIKE MARA-MATNR
*"----------------------------------------------------------------------
returnnum = num * num.
returnchar = texttest.
ENDFUNCTION.

Supponiamo anche di averla pubblicata come web service, in modo da avere l’indirizzo del WSDL per poter aggiungere il riferimento al servizio nella nostra soluzione di Visual Studio. Le indicazioni che trovate qui, per aggiungere il servizio in modo da poterlo utilizzare nel codice restano valide, in estrema sintesi: tasto destro sul nome della soluzione (il nodo root del nostro sito web) poi aggiungi.. -> riferimento al servizio..

Nella maschera che appare basta mettere l’url del documento WSDL e dare un nome al servizio, che nel nostro caso è ztestoneee.

Questo il codice del front-end, una pagina in cui c’è solamente un pulsante che lancia un metodo per chiamare il web service e una label in cui visualizzeremo i risultati di questa chiamata.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Vai bello!" OnClick="button_click" />
<asp:Label ID="Label1" runat="server" Text="incrocia le dita"></asp:Label>
</div>
</form>
</body>
</html>

A questo punto non resta che vedere il codice C# per consumare effettivamente il web service. Ci servono di fatto 3 oggetti:

• input: contiene i parametri da inviare al web service
• client: è l’oggetto che esegue la chiamata
• response: è l’oggetto che raccoglie la risposta dal web service

Leggendo il codice sotto e i relativi commenti si può capire al volo il concetto.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Globalization;
using ztestoneee;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//al caricamento della pagina non succede nulla
}
protected void button_click(object sender, EventArgs e)
{
//inizializzo oggetti: input, client e response
ztestoneee.Z_TEST000 input = new ztestoneee.Z_TEST000();
ztestoneee.ztestoneClient client = new ztestoneee.ztestoneClient();
ztestoneee.Z_TEST000Response response = new ztestoneee.Z_TEST000Response();
//inserisco valori da passare alla chiamata
input.NUM = 3;
input.NUMSpecified = true;
input.TEXTTEST = "Nice!";
//chiamata a web service
response = client.Z_TEST000(input);
//elaboro e pubblico la risposta
decimal returnnum = response.RETURNNUM;
string returnchar = response.RETURNCHAR;
Label1.Text = "Hey dude: " + returnnum + returnchar;
}
}

Il gioco è fatto.

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 prerequisito di base è che la function abbia alcune proprietà basilari: “Modulo accessibile in remoto”, vedi figura dalla transazione SE37.

Per pubblicarla come servizio web, basta andare da menu, sempre nella SE37: Utilities -> Altre Utilities -> Generare servizio web -> Dal function module (vedi figura)

Bisognerà poi seguire il wizard come da figure sotto, dando un nome al web service.

Per pubblicare senza richiesta di autenticazione, selezionare come da figura sottostante:

Scegliere il pacchetto e la richiesta di trasporto.

Cliccare su “completare”, si aprirà la maschera di creazione del servizio e resterà solamente da attivare il servizio (con l’icona di attivazione).

Ora bisognerà terminare il lavoro dalla transazione SOAMANAGER (introdotta con l’ECC 6).
Si aprirà una finestra del browser, da qui bisogna andare su “Web service configuration”

Da qui è possibile ricercare il web service appena creato, selezionarlo, premere “apply selection” e andare sulla tab “configuration”

Qui bisogna creare un nuovo servizio.

Bisogna inserire un nome per il servizio e per il binding, poi premere “Apply Settings”

Sotto si aprire una maschera con le impostazioni del servizio, bisognerà configurarle. Se ad esempio si vuole impostare un utenza fissa, in modo tale che le applicazioni esterne chiamino il servizio senza autenticarsi ogni volta, si può configurare come in figura sotto. Alla fine premere “Save”.

A questo punto è tutto pronto.

Bisognerà premere su “Open WSDL document for selected binding or service” per ottenere l’url della definizione del web service, da utilizzare ad esempio su SOAP UI per poter consumare il web service e testarlo.

E se un giorno volessimo ripubblicare il servizio dopo aver cambiato la function?

Magari viene aggiunto un parametro di input/output, il web service non recepirà queste modifiche finchè non lo torniamo a pubblicare. Per fare ciò, da SAP, dobbiamo accedere alla transazione SE80. Selezionare il pacchetto in cui è stata salvata la function e poi selezionare il proprio servizio web sotto “Enterprise Service -> Service Provider”. Andare in modifica e da menù come da immagine sottostante.

Salvare e attivare.

Ora il web service avrà ereditato le modifiche.

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/

Lato SAP, dopo aver scritto il nostro function module in ABAP (che in questo esempio estrae una tabella di dati tramite alcuni parametri in input e averlo reso disponibile pubblicandolo come web service), per evitare che sia necessario passare le credenziali di accesso durante la chiamata al web service, possiamo pubblicarlo con un utente di default. Per fare ciò: dalla transazione SICF, individuare il web service nel ramo sap/bc/srt/rfc/sap/, entrare in modifica e settare l’utente nella sezione “Dati di logon anonimi”.

Avevo già appuntato qualche nota su come consumare un web service da una pagina ASPX, tutto quello che sta scritto in quell’articolo è ovviamente valido, ma questa volta aggiungeremo il servizio al nostro progetto in un modo leggermente diverso. Da Visual Studio 2010, cliccando col tasto destro sul nome del progetto e selezionando la voce di menù “Aggiungi riferimento al servizio..”

Nella popup che appare inseriremo l’url del servizio web di SAP e sceglieremo un nome: in questo caso d’esempio lo chiameremo “Ws_Factory”.

A questo punto siamo pronti per sfruttare il web service su una pagina aspx. La pagina avrà un DataGrid che servirà per pubblicare la tabella restituita dal web service, in questo datagrid vengono esplicitate solo le colonne da visualizzare, i nomi sono esattamente gli stessi nomi dei campi della tabella su SAP (se avessimo voluto far visualizzare tutta la tabella, bastava non riportare alcuna colonna). Ecco il codice aspx:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<head runat="server">
<title>Esempio Webservice</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div id="main-container">
<asp:GridView ID="GridVisual" AutoGenerateColumns="false" runat="server" CellPadding="0" CellSpacing="0">
<Columns>
<asp:BoundField HeaderText="CdL" DataField="ARBPL"></asp:BoundField>
<asp:BoundField HeaderText="Materiale" DataField="MATNR"></asp:BoundField>
<asp:BoundField HeaderText="Squadra" DataField="TEAMTXT" ItemStyle-CssClass="team"></asp:BoundField>
<asp:BoundField HeaderText="T Setup" DataField="SETUP_TIME"></asp:BoundField>
<asp:BoundField HeaderText="T Lavorato" DataField="WORKED_TIME"></asp:BoundField>
<asp:BoundField HeaderText="T Sospensione" DataField="TIMEOUT"></asp:BoundField>
<asp:BoundField HeaderText="Pz Teorici" DataField="QTY_THEORETICAL"></asp:BoundField>
<asp:BoundField HeaderText="Pz Reali" DataField="LMNGA"></asp:BoundField>
<asp:BoundField HeaderText="Pz Scarto" DataField="XMNGA"></asp:BoundField>
<asp:BoundField HeaderText="Efficienza Prod" DataField="EFFICIENCY"></asp:BoundField>
<asp:BoundField HeaderText="Pz da Produrre" DataField="QTY_TO_PROD"></asp:BoundField>
<asp:BoundField HeaderText="T al Setup Succ" DataField="NEXT_SETUP"></asp:BoundField>
<asp:BoundField HeaderText="Stato" DataField="VM_STATUS"></asp:BoundField>
</Columns>
</asp:GridView>
</div>
</div>
</form>
</body>
</html>

Il codice C# necessario è riportato sotto, con relativi commenti che spiegano tutti i passaggi:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ws_factory; //riferimento al Web Service di SAP
public partial class _Default : System.Web.UI.Page
{
// Inizializzazione oggetti
Ws_factory.YSVISUAL_MNGT MyVisual = new Ws_factory.YSVISUAL_MNGT();
Ws_factory.ys_ws_factory_vmClient MyClient = new Ws_factory.ys_ws_factory_vmClient();
Ws_factory.YS_FACTORY_VMRequest MyRequest = new Ws_factory.YS_FACTORY_VMRequest();
Ws_factory.YS_FACTORY_VMResponse MyResponse = new Ws_factory.YS_FACTORY_VMResponse();
protected void Page_Load(object sender, EventArgs e)
{
/* YSVISUAL_MNGT[] è la tabella dove vengono restituiti i dati dal web service di SAP
* Inizializzo come vuota */
YSVISUAL_MNGT[] MyVisual = new YSVISUAL_MNGT[] { };
/* Compilo i parametri della richiesta mettendo i filtri che mi interessano */
//MyRequest.CT_YSVISUAL_MNGT = MyVisual;
MyRequest.IV_ARBPL = "";
MyRequest.IV_DTOEE = "";
MyRequest.IV_NEW_RUN = "";
MyRequest.IV_WERKS = "P100";
/* Lancio il metodo via web passando i parametri appena impostati sopra,
* il riferimento della tab da popolare coi risultati è la tabella MyVisual */
MyClient.YS_FACTORY_VM(ref MyVisual, MyRequest.IV_ARBPL, MyRequest.IV_DTOEE, MyRequest.IV_NEW_RUN, MyRequest.IV_WERKS);
MyResponse.CT_YSVISUAL_MNGT = MyVisual;
/* Ora elaboro i dati restituiti per farli visualizzare sulla pagina */
GridVisual.DataSource = MyResponse.CT_YSVISUAL_MNGT;
GridVisual.DataBind();
}
}

Questo è semplicemente il punto di partenza, da qui è ovviamente possibile spingersi oltre e perdere tempo a volontà.. ;)

SAP è un mondo, ma ogni tanto questo mondo deve poter essere “visto” e “manipolato” dall’esterno. Senza infinte elucubrazioni sulla SOA (Service Oriented Architecture), venendo subito al sodo: l’obiettivo di questo articolo è fissare i passaggi per pubblicare come web service un function module di SAP scritto in ABAP.

Dopo aver creato il function module (transazione SE37), dovremo avviare il wizard per la pubblicazione (il wizard funziona correttamente con il logon in inglese):

• Su ECC5.0:  Menu Utilities > Altre utility > Generare servizio web > Dal function module
• Su ECC6.0:  Tasto destro > Creare Web Service

In seguito attivare i servizi sulla transazione SICF:

• /default_host/sap/bc/soap
• /default_host/sap/bc/srt
• Ogni web service è rappresentato come servizio ICF nel ramo /default_host/sap/bc/srt/rfc/sap/

Bisognerà poi recuperare l’url del web service pubblicato. Le transazioni disponibili dipendono dalla versione del Service Pack:

• WSADMIN
• WSCONFIG
• SOAMANAGER

I passaggi sono i seguenti:

• Cercare e selezionare il web service nel nodo SOAP Application for RFC-Compliant FMs
• Menu Web Service > WSDL
• Nella popup selezionare Document Style
• Si apre il browser con il link e  la definizione del WSDL
  • Non serve la configurazione del J2EE. Nel caso sia attivata, configurarla da Menu: Passaggio a > Parametrizzazione Amministrazione (esempio http://dominio.it:50000)
  • Se non è attivata la parte J2EE, il WSDL lavora sulla porta dell’ITS (esempio http://dominio.it:8000/sap/bc/srt/rfc/sap/Z_WS_TEST_CUSTOMER_DETAIL?sap-client=600&wsdl=1.1 )
• Il link per le BAPI standard è: http://dominio.it:8000/sap/bc/soap/wsdl11?services=BAPI_CUSTOMER_GETDETAIL2&sap-client=600

Per testare il web service si può utilizzare un programma come SOAP UI. Dopo averlo installato, i passaggi da fare sono i seguenti:

• Creare nuovo progetto
• Nel progetto aggiungere un WSDL
• Indicare il link recuperato dalla transazione WSADMIN
• Inserire username e password dell’account SAP nel riquadro in basso a sinistra

Nella zona di sinistra vanno inseriti i parametri di input, rimuovendo i punti interrogativi. Poi premere il tasto con la freccia verde e nella parte di destra comparirà il risultato restituito dal web service.

Non vado oltre anche se il tema meriterebbe molti approfondimenti, riporto queste poche informazioni come promemoria per chiunque si debba cimentare; nel caso qualcuno voglia maggiori informazioni lascio qualche link utile:

• http://help.sap.com/saphelp_nwpi71/helpdata/en/bb/ddb33d2ae46b3be10000000a114084/frameset.htm
• http://help.sap.com/saphelp_nwpi71/helpdata/en/9b/dad1ae3908ee44a5caf57e10918be9/frameset.htm
• http://www.dataxstream.com/2009/09/turn-any-sap-remote-enabled-function-module-into-a-web-service-%E2%80%93-part-1/
• http://www.dataxstream.com/2009/10/turn-any-sap-remote-enabled-function-module-into-a-web-service-%E2%80%93-part-2/

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

Fotolia è un noto servizio online tramite il quale si possono acquistare immagini di qualità a prezzi relativamente bassi e contenuti. Si tratta di materiale Royalty Free, generato da utenti comuni che desiderano vendere qualcosa on line oppure altre volte da agenzie vere e propria che hanno scoperto in questo portale un ottimo canale di vendita.

Presentazioni aziendali, fotografie accattivanti, trame per background, file vettoriali: questo è ciò che si può acquistare per pochi spiccioli sul portale.
Ho avuto modo di utilizzarlo negli scorsi giorni per preparare una presentazione aziendale, basta guardare una serie come questa per farsi venir voglia di iscriversi. Si riescono a fare cose piuttosto accattivanti con poco sforzo; quando è necessario figurare bene, quale miglior biglietto da visita della propria presentazione? :)

Il sistema di acquisto può essere a crediti, ovvero si paga una quota per ottenere determinati crediti da utilizzare scaricando files, oppure ad abbonamento, pagando quindi una quota fissa che da diritto a scaricare un certo numero di file al giorno o al mese. Per chi ne fa un utilizzo spot credo che la modalità a crediti sia la più indicata.

Un interessante parente di Fotolia è AudioMicro: stesso concetto ma ribaltato sui file audio, in cui Fotolia ha investito un buon gruzzoletto. Se state facendo un montaggio video e avete bisogno di effetti o colonne sonore è il posto giusto.

Ne conoscete altri? Sono ben accetti suggerimenti..

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/

Sono arrivati in vendita i notebook con Chromium OS preinstallato, anche in Italia. Per la cronaca: trattasi del sistema operativo di Google, concepito per vivere completamente on-line. La notizia non è pù fresca fresca, e ti viene voglia di provare questo sistema operativo di cui tutti parlano.

Come fare? E’ un attimo. Abbiamo due possibilità, metterlo su un supporto esterno USB oppure utilizzare VMware Player e avere a disposizione una macchina virtuale sul proprio computer. Ho scelto la seconda strada e metto per iscritto due appunti per chi volesse cimentarsi.

1. Se già non è installato, scaricare e installare VMware Player, il tool di virtualizzazione gratuito di VMware. Per un’utenza domestica è più che sufficiente.
2. Scaricare la Vanilla Nightly Build di Chromium OS. Vanilla che? Si tratta di una versione del sistema operativo di Google che ogni notte viene compilata fresca fresca dalla fabbrica e messa a disposizione per il download, così tutti coloro che non possono permettersi il notebook  riescono comunque a godersela. Ovviamente bisognerà scaricare la versione per VMware.
3. Una volta scaricato lo zip, scompattarlo, ad esempio nella cartella C:\ChromeOS\
4. Rinominare il file ChromeOS-Vanilla-xxxxxxxxxxxxxxxxxxxxx-VMWare.vmdk in ChromeOS-Vanilla-VMWare.vmdk
5. Aprire VMware player e cliccare su Open a Virtual Machine
6. Selezionare la macchina virtuale dalla cartella C:\ChromeOS\ ed il gioco è fatto.

Al primo avvio il sistema chiede di fare il logon con le proprie credenziali Google, ovviamente è necessario un account. La prima impressione è che si tratti di un sistema ancora un po’ acerbo, ma prima di sbilanciarmi serve un minimo di esplorazione in più.

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?