Mostrate il vostro stile con i temi di SharePoint
Articolo originale pubblicato martedì 30 ottobre 2012
Lionel Robinson è Program Manager nel team di progettazione di SharePoint, che si occupa dell'esperienza utente.
L'applicazione di temi in SharePoint 2013 semplifica notevolmente la modifica e la personalizzazione dell'aspetto di un sito. Detto questo, il nuovo aspetto dei siti di SharePoint è incredibile, allora perché modificarlo? Ecco un mio esempio personale.
Dopo la nascita dei nostri gemelli, letteralmente non riuscivo più a sedermi al posto di guida con entrambi i seggiolini montati. E persino stando sul sedile del passeggero, le mie ginocchia sbattevano contro il cruscotto mentre mi sedevo ad angolo. Era giunto il momento di acquistare un'automobile più grande. Mia moglie e io siamo cresciuti spostandoci in minivan, perciò eravamo eccitati all'idea di trovare la casa produttrice giusta, nonché il modello e il colore desiderati. Sarebbe stata perfetta per l'intera famiglia e in più avremmo avuto tanto spazio per i bagagli. Grandioso!
Forse è solo un fattore psicologico, ma da quel giorno in poi sembrava che chiunque incrociassimo in strada stesse guidando la stessa auto: la nostra Honda Odyssey azzurro metallizzato. In più occasioni mi sono ritrovato in un'area di parcheggio a premere disperatamente il pulsante di apertura sul telecomando per poi rendermi conto che la mia vettura era invece due file più avanti.
Quali opzioni avete per far diventare un'auto veramente vostra? Il metodo più economico è quello di applicare un adesivo sul paraurti oppure una decalcomania sulla parte posteriore. All'estremità opposta del ventaglio di possibilità, potete pagare qualcuno affinché modifichi la macchina come desiderate. Oppure coraggiosamente potete decidere di farlo voi direttamente.
Abbiamo visto che alcuni clienti hanno avuto questo tipo di problema con i siti di SharePoint correnti. Quando tutti utilizzano gli stessi pochi modelli, il vostro sito finisce per perdersi in un mare di siti incredibilmente simili. Potete accettare questa somiglianza e sperare che i siti siano distinguibili da piccole differenze (l'adesivo sul paraurti) oppure dovete utilizzare CSS e HTML per personalizzare il vostro sito, attività che possono essere lunghe e complesse.
Con la nuova esperienza di utilizzo dei temi di SharePoint intendiamo affrontare proprio questi problemi. Grazie a questa esperienza, potete personalizzare il vostro sito in pochi minuti giocando con quattro elementi di base, ovvero colori (Colors), layout del sito (Site layout), tipi di carattere (Fonts) e immagine di sfondo. Cambiando questi elementi, potete creare un look veramente univoco per il sito.
Dimostrazione rapida
- In "Introduzione all'uso del sito" fare clic sul riquadro "Quale stile si preferisce?". Se i riquadri sono nascosti, è anche possibile scegliere "Cambia aspetto" (Change the look) dal menu delle impostazioni oppure trovare "Cambia aspetto" (Change the look) in Impostazioni sito (Site Settings) sotto l'intestazione "Aspetto".
- Nella prima pagina vengono visualizzati alcuni punti di partenza che abbiamo raggruppato per dare un'idea della gamma di opzioni disponibili per l'aspetto del sito. Selezionare una qualsiasi di queste opzioni per iniziare.
- E ora inizia il divertimento. È possibile cambiare uno o più dei quattro elementi sopra indicati (sfondo, layout, colori e tipi di carattere) e visualizzare immediatamente un'anteprima della modifica. Trascinare la propria immagine di sfondo sul rettangolo nell'angolo in alto a sinistra, selezionare una tavolozza dei colori da abbinare, selezionare il layout desiderato per il sito e scegliere la combinazione tipi di carattere più adatta alla propria personalità.
- Dopo avere selezionato la combinazione di opzioni perfetta, fare clic su "Provare" (Try it out) nell'angolo in alto a destra per visualizzare un'anteprima del sito.
- Ed è qui che si compie la vera magia! Viene effettuata una copia dei fogli CSS del sito, ovvero dei file che definiscono l'aspetto e la formattazione, ma applicandole i nuovi colori e le nuove immagini. Dopo averla visualizzata, è possibile decidere di mantenerla oppure di riprovare con altre impostazioni.
Avete un colore o un tipo di carattere specifico in mente?
Abbiamo incluso nel prodotto un set di tavolozze dei colori e di tipi di caratteri a nostro gusto, ma è sempre possibile aggiungere i propri preferiti. È sufficiente utilizzare il proprio editor di testo. Ora la spiegazione diventa leggermente più tecnica e, se si ha familiarità con l'utilizzo dei temi in SharePoint 2010, sarà tutto più semplice. La differenza principale è rappresentata dal fatto che non viene più utilizzato il formato di file THMX. Abbiamo infatti creato una serie di nuovi e semplici formati XML per descrivere le opzioni relative ai temi: i file SPColor descrivono la tavolozza dei colori, mentre i file SPFont descrivono la combinazione tipi di carattere. Il modo più semplice per creare tavolozze dei colori e combinazioni tipi di carattere personalizzate consiste nell'iniziare con le impostazioni predefinite del sito del team. Passare al sito radice della raccolta siti, scegliere "Impostazioni sito" (Site Settings) dal menu delle impostazioni e quindi fare clic sulla "raccolta temi". Le tavolozze dei colori e le combinazioni tipi di carattere sono disponibili nella cartella "15".
Tavolozze dei colori
In ogni file SPColor è incluso codice XML semplice che definisce il valore di colore, in esadecimale, per i singoli slot di colore disponibili. Se si è certi dello slot di colore da modificare, scrivere il nuovo valore e salvare una copia del file nella stessa cartella della raccolta temi. Se il controllo delle versioni o la pubblicazione è attivata, archiviare e pubblicare il file. La nuova tavolozza sarà disponibile nella selezione colori dell'esperienza di applicazione dei temi (passaggio 3 sopra descritto).
Di seguito è riportato un frammento di codice di un file SPColor. Un'altra novità di questa versione è la possibilità di specificare i valori di opacità insieme al colore. A tale scopo, è possibile utilizzare un valore esadecimale a otto cifre, in cui le prime due rappresentano l'opacità e le successive sei cifre tradizionali rappresentano i valori di rosso, verde e blu.
<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="https://schemas.microsoft.com/sharepoint/">
<s:color name="BodyText" value="444444" />
<s:color name="SubtleBodyText" value="777777" />
<s:color name="StrongBodyText" value="262626" />
<s:color name="DisabledText" value="B1B1B1" />
<s:color name="SiteTitle" value="262626" />
<s:color name="WebPartHeading" value="444444" />
<s:color name="ErrorText" value="BF0000" />
<s:color name="AccentText" value="0072C6" />
<s:color name="SearchURL" value="338200" />
<s:color name="Hyperlink" value="0072C6" />
<s:color name="BackgroundOverlay" value="D8FFFFFF" />
...
</s:colorPalette>
Combinazioni tipi di carattere
I tipi di carattere possono aggiungere molta personalità a un sito. Uno degli aspetti più entusiasmanti dell'applicazione di temi in SharePoint è il supporto dei tipi di carattere Web. Prima di questa funzionalità, era necessario scegliere tra gli stessi otto-dieci vecchi tipi di carattere "web-safe", ovvero i tipi di carattere che notoriamente vengono installati in quasi tutti i dispositivi per impostazione predefinita, come Arial, Times New Roman e Georgia. Utilizzando tipi di carattere Web, è possibile selezionare tra la vasta gamma di tipi di carattere disponibile in Internet, in quanto i file necessari vengono scaricati dai Web browser insieme al resto della pagina.
Analogamente al file SPColor per le tavolozze dei colori, un file SPFont definisce il tipo di carattere utilizzato per ognuno degli slot di tipo di carattere disponibili. Il modo più semplice per creare una combinazione tipi di carattere personalizzata è quello di iniziare da una delle combinazioni già disponibili e di apportare i miglioramenti necessari. SharePoint supporta molti linguaggi e script e lo stesso vale per i temi dei tipi di carattere. Per ogni slot di tipo di carattere, è necessario definire il tipo di carattere da utilizzare in ogni script. Per i font web-safe, includere semplicemente il nome nell'attributo typeface per ogni slot. Se si desidera specificare un tipo di carattere Web, sarà necessario specificare l'URL dei relativi file in quattro formati (per il supporto in browser diversi), nonché una miniatura piccola e una grande da utilizzare per il rendering del nome del tipo di carattere nella selezione tipi di carattere (vedere il passaggio 3, descritto in precedenza).
<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="Impact" previewSlot1="title" previewSlot2="body" xmlns:s="https://schemas.microsoft.com/sharepoint/">
<s:fontSlots>
<s:fontSlot name="title">
<s:latin typeface="Impact"
eotsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.eot"
woffsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.woff"
ttfsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.ttf"
svgsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.svg"
largeimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactLarge.png"
smallimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactSmall.png" />
...
<s:font script="Arab" typeface="Segoe UI Light" />
<s:font script="Deva" typeface="Nirmala UI" />
<s:font script="Grek" typeface="Segoe UI Light" />
...
</s:fontSlot>
<s:fontSlot name="navigation">
<s:latin typeface="Segoe UI" />
...
<s:font script="Arab" typeface="Segoe UI" />
<s:font script="Deva" typeface="Nirmala UI" />
<s:font script="Grek" typeface="Segoe UI" />
...
</s:fontSlot>
...
</s:fontSlots>
</s:fontScheme>
Aspetti composti
Gli "aspetti composti" sono i punti di partenza mostrati nel primo passaggio dell'esperienza di applicazione dei temi. È possibile aggiungere nuovi aspetti composti che utilizzano le tavolozze dei colori e le combinazioni tipi di carattere personalizzate. Questo è un pratico sistema per salvare una serie di progettazioni da poter applicare in qualsiasi momento. L'elenco degli aspetti composti è disponibile in "Impostazioni sito" (Site Settings) sotto "Raccolte Designer Web". È possibile gestire il set esistente di aspetti composti e aggiungerne di nuovi. Per aggiungerne uno, aggiungere una nuova voce di elenco, quindi inserire un nome, il titolo e gli URL della pagina master, del file SPColor, dell'immagine di sfondo (facoltativa) e del file SPFont (facoltativo). Dopo l'aggiunta della voce di elenco, l'anteprima del nuovo aspetto composto viene aggiunta come punto di partenza nella pagina "Cambia aspetto" (Change the look).
Allora cominciate a divertirvi! Rendete fantastici i vostri siti, mostrate la personalità del vostro team e cercate di essere unici. Se solo potessi fare lo stesso con il mio minivan.
Questo è un post di blog localizzato. L'articolo originale è disponibile in Show Off Your Style with SharePoint Theming.