Creare una veste aziendale online personalizzata con una combinazione di SharePoint 2013 e delle tecnologie Web già note

Articolo originale pubblicato lunedì 25 febbraio 2013

In questo post viene introdotto l'utilizzo di Gestione progettazione insieme agli strumenti di progettazione Web con cui si ha maggiore familiarità per definire senza difficoltà una veste aziendale online personalizzata. A tale scopo, vengono utilizzate le funzionalità avanzate di gestione del contenuto che costituiscono SharePoint 2013.

Con SharePoint 2013 è possibile personalizzare il proprio sito di pubblicazione di SharePointutilizzando le tecnologie Web già conosciute, gli strumenti preferiti e i dispositivi desiderati, in modo da acquisire facilmente familiarità con le attività di progettazione e sviluppo in SharePoint. Tutto questo non deve destare preoccupazione nei professionisti SharePoint, poiché la conoscenza di SharePoint acquisita finora è sempre valida e il modello Pagina per la pubblicazione con SharePoint continua a essere incredibilmente utile.

In questo post viene fornita una panoramica dell'utilizzo di Gestione progettazione e Canali dispositivi di SharePoint 2013 insieme agli strumenti Web con cui si ha maggiore familiarità per definire senza difficoltà una veste aziendale online personalizzata. Pur lasciando invariata l'infrastruttura di rendering delle pagine, sono stati apportati tre miglioramenti principali al processo di personalizzazione di un sito di pubblicazione di SharePoint.

Utilizzare le tecnologie Web già conosciute

In SharePoint continuano a essere disponibili le pagine master e i layout di pagina ASP.NET, ma oraè anche possibile progettare le pagine master e i layout di pagina in HTML, utilizzando tra l'altro frammenti di codice HTML di controlli di SharePoint. In background viene creato da SharePoint il file ASP.NET corrispondente necessario, ma l'utente ignora tale processo.

Nelle versioni precedenti è possibile utilizzare i fogli di stile CSS e JavaScript per applicare uno stile al sito, ma ora queste funzionalità sono completamente integrate nelle funzionalità di sviluppo Web di SharePoint. Abbiamo lavorato molto alla visualizzazione HTML in anteprima in modo da rendere possibile l'applicazione diretta dello stile HTML senza dover utilizzare il server per la visualizzazione. Se inoltre si visualizza un'anteprima sul server, è possibile eseguire questa operazione nel contesto di qualsiasi pagina SharePoint desiderata.

L'utilizzo delle tecnologie Web conosciute non si limita al layout di pagina. La web part Query contenuto che nelle versioni precedenti richiede di progettare in XSLT è ancora presente, ma la nuova web part Ricerca contenuto rappresenta una novità importante per la creazione di funzionalità basate sulla ricerca in SharePoint 2013. Garantire funzionalità di progettazione avanzate nel prodotto era molto importante e da questa esigenza è scaturita la possibilità di personalizzazione con JavaScript, HTML e CSS.

Poiché non si presuppone una conoscenza di SharePoint da parte dell'utente, è stata definita la funzionalità Gestione progettazione per assistere l'utente nella personalizzazione del sito di pubblicazione. In Gestione progettazione è disponibile un'interfaccia simile a una procedura guidata in cui vengono fornite indicazioni per lo sviluppo in SharePoint insieme a punti di ingresso per visualizzare e utilizzare i file di progettazione. Per ognuno dei passaggi è disponibile inoltre un articolo di documentazione corrispondente in MSDN:

• Panoramica
• Gestione canali dispositivi
• Carica file di progettazione
• Modifica pagine master
• Modifica modelli di visualizzazione
• Modifica layout di pagina
• Pubblica e applica progettazione
• Crea pacchetto di progettazione

Personalizzare SharePoint con gli strumenti preferiti

La personalizzazione della progettazione di un sito va oltre la conversione da HTML ad ASP.NET. Per facilitare la creazione di un sito, vengono forniti segnaposto comuni in cui inserire contenuto. Per quanto riguarda i layout di pagina, sono stati inseriti tutti i campi pagina univoci per il tipo di contenuto scelto dall'utente. In questo modo, la creazione di file di progettazione di SharePoint prevede solo attività di modifica e adattamento, anziché di creazione.

La Raccolta frammenti di codice rappresenta un buon punto di partenza per l'aggiunta della funzionalità SharePoint al sito. Coloro che hanno familiarità con le versioni precedenti di SharePoint possono considerare questa raccolta come un insieme di controlli accessibili da SharePoint Designer, ma non solo. Nella Raccolta frammenti di codice è disponibile una versione HTML di un insieme di componenti comuni, tra cui tutte le web part della raccolta web part. In molti casi è inclusa anche un'anteprima statica in cui viene visualizzato il lavoro mentre si modifica il file, ad esempio come una doppia visualizzazione Dreamweaver. È sufficiente adattare le proprietà di un frammento di codice e copiarlo nella pagina master o nel layout di pagina HTML perché in background SharePoint lo trasformi nel controllo ASP.NET necessario.

Figura 1. Nella parte superiore della pagina della Raccolta frammenti di codice è presente una barra multifunzione di tutti i frammenti di codice. Nel corpo della pagina sono contenuti la descrizione, le proprietà e il codice HTML del frammento di codice, nonché un'anteprima dinamica. In ogni pagina master è disponibile la stessa raccolta frammenti di codice, ma leggermente diversa rispetto a quella dei layout di pagina, che invece dipende dal tipo di contenuto (poiché i campi pagina cambiano).

Provare SharePoint in qualsiasi dispositivo

L'accesso a un sito Web non viene più effettuato semplicemente utilizzando il mouse e un computer desktop o portatile. È disponibile ormai un'ampia gamma di dispositivi, tra cui tablet, telefoni e Surface. In che modo è possibile garantire agli utenti un'esperienza ottimale in base alle dimensioni dello schermo del dispositivo utilizzato? Come è possibile ottimizzarla per i dispositivi di tocco? In SharePoint 2013 la funzionalità Canali dispositivi consente di presentare un sito nel modo più adatto al dispositivo utilizzato da un visitatore. Il progettista deve pensare all'esperienza che desidera offrire con il proprio sito considerando tutti i diversi fattori di forma, differenziati in base alla sottostringa agente utente assegnata a un massimo di 10 canali diversi.

Ogni canale può essere utilizzato per più dispositivi. È ad esempio possibile utilizzare uno stesso canale per dispositivi Windows Phone e iPhone, che presentano dimensioni di schermo simili, e un canale separato per iPad. È possibile utilizzare una pagina master e un foglio di stile CSS diversi per canale, nonché associare il contenuto ai canali, lasciando comunque invariato l'URL (soluzione ottimale per l'usabilità e l'ottimizzazione del motore di ricerca).

L'infrastruttura Canali dispositivi consente di utilizzare i riquadri canale dispositivi, che costituiscono una valida risorsa per l'assegnazione di contenuto. Il contenuto inserito in uno di questi riquadri viene visualizzato solo nei canali specificati in base alla logica sul lato server, che consente di ridurre il tempo di caricamento delle pagine e il numero di byte inviati via cavo. Combinando questi riquadri con una struttura CSS reattiva, è possibile garantire un'esperienza utente più rapida e semplice. Anziché proporre canali diversi in base alle dimensioni dello schermo come nell'esempio precedente, è possibile utilizzare un canale in base a una sottostringa "iOS" che acquisisce iPad, iPhone e iPad mini e invia una singola pagina master che carica fogli di stile CSS diversi a seconda della risoluzione dello schermo del dispositivo. Il team di Windows Phone ad esempio potrebbe utilizzare come riferimento i dispositivi iOS e creare un riquadro in cui pubblicizzare Windows Phone. 

Figura 2 e figura 3. Modelli di progettazione affiancati delle interfacce di un browser e di un dispositivo mobile per un sito di news basato sulla funzionalità Pubblicazione di raccolte intersito, in cui vengono utilizzati fogli di stile CSS reattivi, riquadri canale dispositivi e un modello di visualizzazione che consente di modificare l'aspetto dei risultati della web part Ricerca contenuto in base ai canali dispositivi.

In questo post è stata fornita un'introduzione della definizione di una veste aziendale online personalizzata tramite gli strumenti con cui si ha maggiore familiarità e le funzionalità avanzate di gestione del contenuto disponibili in SharePoint 2013. Per ulteriori informazioni, vedere il contenuto disponibile su MSDN. Gli articoli Creare siti per SharePoint 2013, Panoramica di Gestione progettazione in SharePoint 2013 e Sviluppare la progettazione di un sito in SharePoint 2013 rappresentano un ottimo punto di partenza. Buona progettazione a tutti!

- Alyssa Levitz, SharePoint Program Manager 

Questo è un post di blog localizzato. L'articolo originale è disponibile in Create your online brand with a combination of SharePoint 2013 and the web technologies you already know.