SharePoint 2010 - Branding

Diciamo la verità: SharePoint è un ottimo strumento, versatile e potente, ma (per alcuni) un po’ bruttino da vedere, soprattutto se confrontato con i nuovi trend in fatto di UI; nonostante ciò personalizzarne l’aspetto grafico non è una delle cose più semplici da fare.

Vediamo come è possibile rendere più accattivante dal lato estetico la piattaforma Microsoft.

L’esperienza mi fatto individuare tre livelli di intervento per le personalizzazioni grafiche che ho fantasiosamente denominato Easy, Medium, Hard. Non necessariamente i nomi rispecchiano la reale difficoltà che si incontra nella personalizzazione (un grafico potrebbe benissimo trovarsi più a suo agio con il livello Medium rispetto al livello Easy), diciamo piuttosto che i livelli sono suddivisi per immediatezza dell’intervento e per gli strumenti richiesti per le modifiche.

Livello Easy

Il primo livello di personalizzazione grafica riguarda la possibilità di cambiare la palette di colori utilizzati nel portale.

A tale scopo vengono utilizzati strumenti nativi di SharePoint e appositi tool di semplice utilizzo. Non sono richieste competenze particolari, se non un po’ di gusto nell’abbinare i colori.

Temi OOB e logo

Un primo strumento di facile utilizzo e messo a disposizione dalla piattaforma SharePoint è il menù “Aspetto” raggiungibile attraverso “Azioni Sito” > “Impostazioni Sito”

Da qui possiamo, tra le altre cose, caricare un logo per il portale, modificare i collegamenti della barra di navigazione e del pannello Quick Launch, ma soprattutto modificare lo schema dei colori.

Cliccando infatti sulla voce “Tema Sito” viene data la possibilità di scegliere tra diversi schemi, tra quelli nativi di SharePoint:

Pochi click ed il nostro portale cambia faccia.

Temi di PowerPoint

I temi applicati al punto precedente non sono altro che file in formato .thmx, che possono essere creati anche attraverso PowerPoint: una volta realizzata la palette che più ci piace, è sufficiente caricarla nel portale (vedremo a breve come fare) ed attivarla con il metodo visto al punto precedente.

Theme Builder

Theme Builder  è un programma Microsoft che permette di creare file .thmx con un maggior controllo rispetto ai temi PowerPoint. Qui  c’è un’ottima e dettagliata guida all’utilizzo.

La galleria di temi

Che si voglia modificare un tema già presente in SharePoint, o se ne voglia caricare uno nuovo, la galleria di temi è lo strumento che ci permette di farlo. Non è direttamente accessibile dall’interfaccia classica di SharePoint, ma è sufficiente digitare

http://<sitoSharePoint>/_catalogs/theme/Forms/AllItems.aspx

per trovarsi di fronte ad una classica raccolta documentale liberamente gestibile.

Livello Medium

Questo livello di personalizzazione richiede conoscenze più avanzate rispetto al precedente: gli interventi riguardano infatti fogli di stile, pagine master, e richiedono una conoscenza non superficiale dell’architettura di SharePoint.

Dal momento che l’argomento è ampio ( Randy Drisgill  - MVP Microsoft - ha scritto sull’argomento “ Professional SharePoint 2010 Branding and User Interface Design ” , un libricino di circa 900 pagine) in questa sezione traccerò le linee guida e fornirò i link necessari per affrontare al meglio l’argomento, riportando anche le mie esperienze e qualche trucco del mestiere.

Componenti HTML

SharePoint fonda le proprie radici sull’HTML ed in virtù di questo è possibile intervenire direttamente sul codice della pagina utilizzando le funzionalità proprie dell’HTML.

Strumento sufficiente e necessario a tale scopo è SharePoint Designer  2010: apriamo in modalità di modifica avanzata la pagina che ci interessa, passiamo alla visualizzazione codice, e, una volta trovato il punto su cui intervenire, impostiamo lo stile desiderato.

SharePoint Designer è inoltre dotato di un efficace sistema IntelliSense che permette di scrivere codice corretto con poca fatica.

Come se si trattasse di un classico sito web, anche SharePoint permette di gestire gli stili a 3 livelli:

1. Stile in-line definito direttamente nel tag del componente : con questo metodo è possibile personalizzare ogni singolo componente in modo indipendente, applicando particolarità ed eccezioni rispetto al resto del contenuto. Di contro però è una modalità poco controllabile e per nulla riutilizzabile.
2. Classi definite a livello di pagina : offrono un maggior livello di riutilizzabilità rispetto allo stile in-line (l’utilizzo delle classi è limitato alla pagina in cui è definita la classe), ma perde in granularità per la gestione delle eccezioni.
3. Fogli di stile : offrono un maggior livello di controllo e la massima riutilizzabilità, ma offrono pochissima (direi quasi nulla) granularità.

Fogli di stile

I fogli di stile sono LO strumento per eccellenza per personalizzare l’aspetto grafico di SharePoint; certo, è possibile ricorrere anche alle altre modalità accennate in precedenza, ma limiterei il loro impiego esclusivamente alla gestione delle eccezioni e delle particolarità.

SharePoint utilizza una serie di fogli di stile, legati alle diverse pagine master di sistema. Il foglio di stile principale è il corev4.css , che contiene tutte le classi che gestiscono aspetto e comportamento del portale. Il file viene utilizzato nella pagina master di sistema ( v4.master ) con il metodo

        <link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>

La best practice (che condivido appieno) vuole che questo file non sia modificato nemmeno di una virgola, ma che siano invece sovrascritte in un ulteriore foglio di stile le classi che necessitano di modifiche.

A questo punto, quindi, è sufficiente creare e caricare un nuovo foglio di stile, ad esempio custom.css , e collegarlo alla pagina master che ci interessa tramite il comando

         <SharePoint:CssRegistration name=”<path>/custom.css” After=”corev4.css” runat=”server”/>

Particolare importanza riveste l’opzione After=”corev4.css” , grazie alla quale sopperiamo al caricamento non ordinato dei fogli di stile della pagina; imponiamo così che il nostro foglio di stile personalizzato sia caricato dopo il completo caricamento del foglio base, impedendo che le nostre classi personalizzate possano essere  sovrascritte dalle classi di base.

Le classi base dei CSS SharePoint

Il passo successivo consiste nell’individuare le classi che permettono di cambiare l’aspetto dei componenti del sito SharePoint. Se si apre il foglio di stile di SharePoint si notano le centinaia di classi, dai nomi spesso incomprensibili, che vengono utilizzate; individuare la classe da modificare potrebbe rivelarsi un’impresa titanica.

Fortunatamente possiamo fare ricorso a due risorse che ci semplificano le attività di branding:

4. SharePoint CSS chart : diversi SharePointers (che definirei santi) hanno redatto delle tabelle che riportano il nome della classe SharePoint ed i component che la utilizzano. Alcuni esempio sono qui  e qui  ma è sufficiente una ricerca per i termini “SharePoint 2010 css chart” per ottenere ulteriori risorse.
5. Strumento per sviluppatori di Internet Explorer: si tratta di un tool che permette di analizzare in dettaglio i siti web; tra le varie funzioni (si veda qui  per i dettagli) c’è quella che, selezionato un oggetto della pagina, ne mostra la classe CSS associata e le relative proprietà.

Pagine master

Figlio della tecnologia ASP.NET, SharePoint fa uso delle pagine master.

Un’attività di branding che si rispetti prevede anche la modifica della pagina master. Come per i fogli di stile è buona norma non apportare le modifiche direttamente alla pagina master di sistema ( v4.master ) ma ad una nuova pagina master personalizzata; in questo modo le pagine di sistema continueranno a funzionare regolarmente, mentre le pagine di contenuto del sito utilizzeranno la nuova veste grafica data dalla master page personalizzata.

Una pagina master di SharePoint è composta da diversi componenti che devono essere obbligatoriamente tutti presenti, pena il non funzionamento più o meno grave della stessa; si tratta per lo più di ContentPlaceHolder che vengono popolati a runtime dalle pagine di contenuto. Una lista completa dei componenti della master page è presente sul sito Microsoft all’indirizzo http://sharepoint.microsoft.com/Blogs/GetThePoint/Lists/Posts/Post.aspx?ID=386 .

Per creare una pagina master personalizzata esistono due strade:

6. Copiare e modificare la pagina master di sistema (v4.master)
7. Utilizzare la starter master page  di Randy Drisgill

La master page così creata è pronta per essere stravolta.

Livello Hard

A questo livello la personalizzazione delle pagine di front end dei siti SharePoint avviene attraverso l’utilizzo e/o lo sviluppo di nuove componenti, come ad esempio JavaScript e Web Part, unitamente a quanto visto nei punti precedenti.

Con JavaScript, ad esempio, è possibile inserire funzionalità di accordion  ai diversi menù di SharePoint (barra del menù principale e menù quick launch), gallerie di immagini a scorrimento con vari effetti grafici, mentre con le web part è possibile manipolare e presentare i dati in forme e strutture non previste dalle funzionalità OOB.