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?

• Web Service su Wikipedia
• Guida Web Service

L’obiettivo di questo articolo è fissare un esempio pratico per interrogare un web service e sfruttare i risultati che restituisce utilizzando C# e Visual Studio.

Supponiamo di dover accedere al webservice di esempio su W3C, descritto a questa pagina: http://www.w3schools.com/webservices/tempconvert.asmx
La descrizione del servizio è fornita a questo URL:  http://www.w3schools.com/webservices/tempconvert.asmx

Il servizio ha 2 metodi  - FahrenheitToCelsius() e CelsiusToFahrenheit() - che accettano entrambi un solo parametro di input e convertono la temperatura da gradi fahrenhait a Celsius e viceversa.

La risposta del server è un XML di questo tipo:
<?xml version="1.0" encoding="utf-8" ?><string xmlns="http://tempuri.org/">38</string>

Su Visual Studio, cliccando sul nome del progetto web col tasto destro, si apre un menu dove è possibile aggiungere una Web Reference.

Qui si inserisce l’indirizzo della descrizione WSDL del web service.

Il software identifica l’interfaccia del servizio web, con i metodi che mette a disposizione.
Per aggiungerlo al progetto si clicca sul tasto Add Reference. Fatto questo ci troveremo l’oggetto nel Solution Explorer.

Ora nel codice della pagina aspx su cui vogliamo consumare il web service è necessario aggiungere il riferimento con questo codice:
using com.w3schools.www;

Ora dichiariamo un oggetto per la web reference, che sarà possibile utilizzare con tutti i sui metodi come qualsiasi altro oggetto:

com.w3schools.www.TempConvert MyProxy = new com.w3schools.www.TempConvert();

L’esempio finale completo potrebbe essere una pagine con una textbox che nella quale l’utente scrive la temperatura, un bottone di invio invoca il webservice e il risultato appare in una label. In questo caso il codice della classe sarebbe il seguente:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using com.w3schools.www;
public partial class _Default : System.Web.UI.Page{
com.w3schools.www.TempConvert MyProxy = new com.w3schools.www.TempConvert();
protected void Page_Load(object sender, EventArgs e)    { }
protected void Button1_Click(object sender, EventArgs e)    {
Label1.Text = MyProxy.CelsiusToFahrenheit(TextBox1.Text);
}
}


Mentre il codice della pagina il seguente:

<%@ 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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>&nbsp;<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" /><br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
</body>
</html>


E ora non resta che sbizzarrirsi, una volta imparato il mestiere va affinato.

Lascio qualche link per chi i web service li vuole anche costruire:

• How to create and invoke Java web service
• Your first C# Web Service

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

Davide: Che cosa dovrebbe avere una buona intranet?
Jane: Una buona intranet deve avere 3 cose:

1. essere incentrata sull’utente,
2. avere una strategia allineata al business
3. Avere una governance e politiche di gestione integrate al modo con cui viene gestita l’impresa

Davide: Quali sono le best practices per adottare l’enterprise 2.0? Esiste una roadmap comune?
Jane: Ma dispiace ma non esistono roadmap comuni e collaudate. Alcune aziende definiscono prima la strategia, poi la implementano. Altre iniziano con sperimentazioni dal basso, poi ufficializzano ciò che funziona. Altri mettono in campo un minimo di strategia e un po’ di sperimentazione dal basso, per poi farne una sintesi!

La chiave del successo è iniziare da ciò che è necessario al business, non dalla tecnologia. Fate progetti pilota dove c’è allo stesso tempo un bisogno e una sfida.

Davide: Wiki e blog dovrebbero essere utilizzati in una intranet? Se si, esiste un approccio da consigliare per spiegare agli utenti qual è il tool migliore da utilizzare , in base ai contenuti da pubblicare e al feedback che si desidera ricevere?
Jane: I Wiki servono per la co-creazione: fare cose assieme, fornendo uno strumenti per  ”la voce del popolo”. Sono di proprietà del popolo o del singolo gruppo. Sono multi-dimensionali: i contenuti si creano spontaneamente. Potrebbero emergere talvolta anche cose inattese.
I blog servono per fare esprimere una voce individuale, il punto di vista di un team, per condividere l’esperienza. Si fanno portatori del punto di vista di un singolo o di un gruppo di persone. Sono bi-dimensionali: viene riportato un certo punto di vista o una notizia, mentre tutte le altre persone possono commentare o fare domande.
E’ interessante notare che le mie ricerche degli ultimi anni, condotte per la Global Intranet Strategies survey, evidenziano che solo nell’ultimo anno i blog hanno assunto rilevanza al pari dei wiki nelle aziende. Entrambi hanno raggiunto il 45 % dell’utilizzo nell’inchiesta del 2009, su un campione di circa 300 organizzazioni in tutto il mondo.
Fino all’anno scorso, i wiki la facevano da padrone. Credo che le società stiano famigliarizzando coi blog. I blog ottengono spesso più visibilità: persone che esprimono punti di vista. Richiedono probabilmente maggior tempo per la gestione rispetto ai wiki, basati sulla collaborazione, cosa che le imprese fanno da diverso tempo.

Davide: Connessioni col sistema ERP: è utile averle all’interno della intranet?
Jane: Assolutamente. Più che utile, è essenziale. E’ la chiave di volta per far sì che la intranet diventi il luogo di lavoro all’interno dell’impresa.

Davide: Credi che esista una killing application? Si parla spesso di Sharepoint.. Lavoro su Sharepoint da quasi due anni, credo che sia una buona piattaforma per realizzare applicazioni web, molto malleabile per poter mappare i processi di business
Jane: Sharepoint è solo una delle tante soluzioni. Non penso che una soluzione da sola si possa considerare una killer app.

Davide: Accesso dall’esterno e tramite dispositivi mobili: credi che sia un obiettivo primario?
Jane: Non è primario ma è molto importante. E’ uno dei 5 key trends che ho individuato per il 2010.

Davide: Qual è il miglior progetto che hai realizzato? Perchè?
Jane: Ce ne sono parecchi! I migliori sono quelli in cui la intranet ha cambiato il modo di lavorare dell’azienda, e il modo di fare business. La intranet esiste, in estrema sintesi, per servire i clienti. Per clienti, intendo i clienti esterni.
Le intranet aiutano le organizzazioni a lavorare meglio: le aziende lavorano per servire i loro clienti.

Davide: Grazie mille per questa intervista Jane, spero di sentire qualche utile consiglio all’E2.0 Forum!

100.000 persone marciano da Perugia ad Assisi per chiedere a gran voce un mondo di Pace ed uguaglianza sociale; assieme a migliaia di studenti delle scuole italiane e a innumerevoli “testimoni” venuti da diverse nazioni del mondo, assieme a Don Ciotti di Libera e all’AVIS: il tutto mediamente ignorato dai media e dall’italiano medio.

100.000 persone si riversano nelle strade di Milano per festeggiare lo scudetto dell’inter tra petardi, fumogeni e dita medi al cielo, il tutto in diretta RAI e idolatrato dall’italiano medio; che allo stadio ci vuole il ferro.

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!