Utilizzo di Dreamweaver e Gestione progettazione con SharePoint 2013

Article
09/20/2012

Articolo originale pubblicato sabato 28 luglio 2012

SharePoint 2013 include una serie di nuove caratteristiche che semplificano l'ideazione e la pubblicazione di siti Web. Una di queste caratteristiche è Gestione progettazione che permette, tra le altre cose, di creare diversi canali per il contenuto, ad esempio un insieme di pagine per browser di dimensioni standard, uno per i dispositivi mobili, un altro per i Tablet PC e così via. È possibile associare diverse pagine master a ogni canale. E una caratteristica interessante è che si può creare una pagina in qualsiasi strumento di modifica HTML standard, ad esempio Dreamweaver, per poi caricarla in SharePoint e usarla come pagina master. SharePoint crea automaticamente una pagina con estensione aspx che viene costantemente sincronizzata con il file HTML. Dopo questa conversione, non è necessario usare un altro strumento per modificare la pagina. È infatti possibile continuare a modificare il file HTML con lo strumento preferito, e ogni volta che si salva il file, SharePoint sincronizza il file con estensione aspx usato per il rendering della pagina master.

Sono inoltre disponibili frammenti di codice che consentono di inserire nella pagina master elementi interessanti di SharePoint. È sufficiente selezionare il tipo di frammento di codice desiderato, ad esempio una casella di ricerca o una barra di spostamento, e quindi copiare il codice generato automaticamente per la caratteristica e incollarlo nella pagina master. Non è proprio un gioco da ragazzi, però. È infatti necessario avere una conoscenza approfondita di SharePoint per convertire completamente la pagina HTML standard in una pagina master di SharePoint.

In questo post prenderò la pagina di sito Web che create con l'esercitazione di Dreamweaver (https://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html) e la convertirò in una pagina master di SharePoint e nella home page del mio sito personale. Per iniziare, ecco come apparirà il sito di Dreamweaver una volta completato:

Guardando la pagina si può notare che ci sono alcune cose specifiche di SharePoint di cui ci dobbiamo occupare:

Immagini usate per l'intestazione, lo sfondo della visualizzazione principale della pagina e delle singole storie
Contenuto della parte principale della pagina e delle aree delle tre storie
Altre caratteristiche di SharePoint che potrebbe essere interessante aggiungere, ad esempio una casella di ricerca e una barra di spostamento.

Per prima cosa occupiamoci del contenuto. I tipi di contenuto predefiniti sono adatti per il contenuto principale, ma abbiamo bisogno di qualcosa di personalizzato per i tre frammenti di storie in fondo alla pagina. Inizieremo da questi ultimi e creeremo un nuovo tipo di contenuto. Poiché le immagini sono intrinsecamente collegate al contenuto, aggiungeremo colonne sito per le immagini e colonne sito per il testo. Il tipo di contenuto Pagina di benvenuto è probabilmente una buona base di partenza per questo tipo di pagina, per cui ho creato un nuovo tipo di contenuto basato su Pagina di benvenuto e l'ho chiamato DW Layout. Per supportare il mio layout ho aggiunto le seguenti colonne:

LeftStoryImage
LeftStoryText
CenterStoryImage
CenterStoryText
RightStoryImage
RightStoryText

Le colonne delle immagini sono tutte definite come Immagine con formattazione e vincoli per la pubblicazione e le colonne di testo sono definite come Contenuto HTML completo con formattazione e vincoli per la pubblicazione.

A questo punto siamo pronti per dare avvio alla prima fase con Gestione progettazione, in cui caricheremo il nostro foglio di stile e la nostra pagina HTML di Dreamweaver per convertirla in una pagina master.

Ora aprite il browser sul computer in cui è installato Dreamweaver (o il vostro strumento di modifica HTML preferito) e andate al vostro sito di SharePoint. Dal menu Azioni sito scegliete Gestione progettazione. Nell'elenco delle attività a sinistra fate clic su Carica file di progettazione. Fate clic sul collegamento per eseguire il mapping dell'unità locale alla cartella di SharePoint, in cui verranno memorizzati il foglio di stile e la pagina master. Dovrebbe aprirsi una visualizzazione albero del sito di SharePoint affinché sia possibile trascinare i file direttamente da SharePoint a Dreamweaver. Se per qualche motivo ciò non funziona, potete sempre andare alla raccolta di pagine master e aprire la raccolta in visualizzazione albero.

Copiate quindi la pagina master index.html dall'unità locale alla raccolta di SharePoint aperta in visualizzazione albero. Poiché l'esercitazione di Dreamweaver parte dal presupposto che il foglio di stile si trovi in una sottocartella chiamata styles, create tale cartella e copiatevi il foglio di stile.

Nel browser fate clic su Modifica pagine master nell'elenco delle attività Gestione progettazione. Fate clic sul collegamento Converti file HTML in pagina master di SharePoint. Verrà visualizzata una finestra di dialogo di tipo selezione file di SharePoint dove appare il file index.html che avete copiato nella raccolta di pagine master. Fate clic sul file per selezionarlo e quindi fate clic su Inserisci. Verrà eseguita la conversione e nella pagina Gestione progettazione sarà visualizzato il file nell'elenco delle pagine master con un messaggio che comunica il completamento della conversione. A questo punto, se si aggiorna la visualizzazione albero della raccolta di pagine master, dovrebbe essere visualizzato un nuovo file chiamato index.master. Questa è la "copia" del file index.html che avete caricato sul sito. Da questo momento, SharePoint aggiornerà automaticamente questo file master e voi dovrete solo occuparvi del file HTML.

Vale probabilmente la pena visualizzare adesso la nuova pagina master per vedere ciò con cui dovrete lavorare. A tale scopo, potete fare clic sul collegamento index.html in Gestione progettazione. La pagina verrà visualizzata in modalità anteprima e potrete così vedere l'aspetto della pagina. Ecco l'aspetto della pagina non appena viene completata la conversione:

Alcuni punti da sottolineare:

Il foglio di stile sembra funzionare in quanto ci sta fornendo i tipi di carattere e la formattazione che desideriamo
Le immagini non vengono visualizzate e pertanto dovremo risolvere questo problema. Tuttavia, alcune immagini sono contenuto e alcune fanno parte della pagina master, e dovremo pertanto tenerne conto mentre continuiamo a modificare la pagina master.
Il testo visualizzato non dovrebbe far parte della pagina master e pertanto dovremo eliminarlo e inserirlo come contenuto nella nostra home page.

Cominciamo a dare un'occhiata alle correzioni che dobbiamo eseguire. Dobbiamo caricare l'immagine usata per lo sfondo della sezione del corpo principale e correggere il collegamento all'immagine nella pagina master. Ma dobbiamo eliminare tutte le altre immagini nella parte inferiore della pagina. Dobbiamo anche eliminare tutto il testo nella pagina perché si tratta di contenuto che deve essere associato a una singola pagina, non alla pagina master. A tale scopo, trascinate i file HTML e CSS dalla visualizzazione albero della raccolta di pagine master di SharePoint a Dreamweaver. All'improvviso noterete che la pagina HTML contiene molti elementi di SharePoint. Abituatevi, perché anche se potete usare lo strumento di modifica HTML che preferite, dovrete usare i tag e i controlli di SharePoint per dare vita al tutto.

Scorrendo la pagina HTML, troviamo le immagini mancanti e che dovrebbero far parte della pagina master. Sono banner.gif (del file HTML) e main.jpg (del foglio di stile che definisce lo sfondo del DIV main_image); risolveremo per prima cosa questo problema.

Nel browser fate clic sul menu Azioni sito e quindi sul menu Visualizza contenuti sito. Fate clic sul collegamento Immagini raccolta siti per aprire la raccolta documenti. Ora caricheremo le nostre due immagini nella raccolta. L'URL della raccolta è /sitecollectionimages, pertanto usando Dreamweaver modificheremo il percorso di entrambe le immagini affinché porti alla raccolta. Se aggiornate la pagina di anteprima, vedrete che stiamo facendo progressi:

Una cosa che noterete e che non avete visto nell'immagine precedente è il DIV di colore giallo nella parte inferiore della pagina. A dire il vero, c'era anche nella prima immagine, ma le dimensioni del browser erano troppo grandi per vederlo. La cosa importante di questo div giallo è che è stato introdotto da SharePoint durante il processo di conversione e contiene il segnaposto per il contenuto della pagina principale. La cosa che faremo quindi sarà quella di eliminare il contenuto che dovrebbe far parte di una pagina contenuto, e non della pagina master. Rimuoveremo allora il testo nella sezione principale ed elimineremo le immagini di cui non viene eseguito il rendering, così come il testo al di sotto di queste immagini. Sposteremo inoltre il segnaposto DIV (ad eccezione del colore giallo) nella sezione principale della pagina. Aggiungeremo inoltre controlli segnaposto per le tre aree dove ci sono immagini e testo. Li uniremo quando faremo la pagina di layout.

La pagina HTML risultante ha una combinazione di commenti, tag di elaborazione di SharePoint speciali e segnaposto che indicano la posizione del contenuto. Ecco qual è l'aspetto di ogni sezione:

Corpo principale:

Colonna sinistra:

Colonna centrale:

Colonna destra:

La pagina adesso è un po' vuota, ma va bene così, è quello che vogliamo da una pagina master:

A questo punto abbiamo quasi finito con la nostra pagina master. Vogliamo ancora aggiungere alcuni menu e una casella di ricerca, ma ci ritorneremo tra poco. La prossima cosa che faremo è creare una pagina di layout. La pagina di layout è il luogo in cui "colleghiamo" i campi dati con il layout corrispondente nella pagina. A tale scopo, scegliamo Impostazioni sito…Pagine master e layout di pagina. Facciamo clic su Nuovo sulla barra multifunzione e selezioniamo Layout di pagina. Quando viene visualizzata la schermata Nuovo layout di pagina potrò selezionare il tipo di contenuto che desidero associare a questo layout di pagina. Vi ricorderete forse che più indietro in questo post ho creato un tipo di contenuto personalizzato chiamato DW Layout. Nel campo Tipo di contenuto associato seleziono pertanto il mio tipo di contenuto DW Layout. Gli assegno un URL, un titolo e una descrizione, detto fatto, ora posso creare la mia pagina di layout. In questo caso l'URL della pagina è DWLayoutPage.aspx, il titolo è Dreamweaver Layout Page e ho aggiunto la descrizione Layout page based on Dreamweaver tutorial site.

La pagina di layout è creata ma non ha ancora alcun controllo. Dobbiamo aggiungere i controlli alla pagina e associarli ai campi personalizzati nel tipo di contenuto che ho descritto in precedenza: LeftStoryImage, LeftStoryText, e così via. Devo inoltre aggiungere controlli segnaposto ASP.NET che corrispondono ai contenitori segnaposto che ho aggiunto alla pagina master. In questo modo, i dati di ogni campo vengono associati a un contenitore, che a sua volta viene trasmesso al contenitore segnaposto corrispondente nella pagina master. È in questo modo che il rendering dei dati viene eseguito nel punto corretto nella pagina master.

Se date un'occhiata ai dettagli sopra dalla pagina master, noterete che ho aggiunto quattro segnaposto contenuto: PlaceHolderMain, PlaceHolderLeft, PlaceHolderCenter e PlaceHolderRight. Devo aggiungere questi segnaposto alla mia pagina di layout e quindi devo inserire il campo di tipo di contenuto appropriato in ogni segnaposto. A tale scopo, trascinerò nuovamente la mia nuova pagina di layout, DWLayoutPage.aspx, dalla visualizzazione albero della Raccolta pagine master in Dreamweaver. Per impostazione predefinita, la pagina di layout ha un controllo segnaposto già denominato PlaceHolderMain, non è pertanto necessario che lo aggiunga. Aggiungo gli altri, però, utilizzando markup di controllo ASP.NET standard come il seguente:

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

</asp:Content>

Come potete notare ho appena assegnato al segnaposto un ID PlaceHolderLeft e ne ho quindi aggiunti altri due con ID PlaceHolderCenter e PlaceHolderRight.

Per quanto riguarda i campi effettivi necessari nella nostra pagina di layout, non ce ne sono molti. C'è il campo del contenuto principale, incluso nella classe di base da cui ha ereditato il nostro tipo di contenuto predefinito. Tale campo è chiamato semplicemente PublishingPageContent. Poiché va nel corpo principale della pagina, ho aggiunto un controllo di pubblicazione per il campo nella sezione PlaceHolderMain, che avrà il seguente aspetto:

<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

<PublishingWebControls:RichHtmlField id="PageContent" FieldName="PublishingPageContent" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

Per ognuno degli altri tre segnaposto sono necessari due campi, un campo immagine e un campo RTF. Li aggiungo e uso nuovamente il nome del campo del tipo di contenuto nell'attributo FieldName del markup. Ecco un esempio di come appare il controllo PlaceHolderLeft; Center e Right sono naturalmente molto simili:

<asp:Content ContentPlaceholderID="PlaceHolderLeft" runat="server">

<PublishingWebControls:RichImageField FieldName="LeftStoryImage" runat="server"/>

<PublishingWebControls:RichHtmlField id="LeftTextContent" FieldName="LeftStoryText" DisableInputFieldLabel="true" runat="server"/>

</asp:Content>

A questo punto abbiamo quasi terminato per quanto riguarda la pagina master e la pagina di layout (a parte i menu e la casella di ricerca citati sopra). Ora vogliamo creare una nuova pagina e "dirle" di usare il nostro nuovo layout di pagina.

A tale scopo, andiamo nella raccolta Pagine. Faccio clic su Nuovo sulla barra multifunzione e seleziono DW Layout. Adesso è visualizzato nel nuovo menu perché si basa su un tipo di contenuto che ha ereditato dal tipo di contenuto Pagina di benvenuto:

Immetto le proprietà necessarie e l'aspetto è il seguente:

OK, ora siamo pronti per provarlo! Per prima cosa, torno alla raccolta di pagine master e pubblico la mia pagina master (index.html). Finché non eseguo questa operazione, non posso selezionare la pagina come pagina master per il sito. La cosa successiva che faccio è andare in Impostazioni sito e nelle impostazioni della pagina master per selezionare la mia pagina master come master per la Pagina master sito. Non la imposto mai per la Pagina master di sistema per assicurarmi che tutto funzioni. Se commettete un errore nella pagina master e l'assegnate alla Pagina master di sistema, potrebbe essere complicato ripristinare lo stato originale della pagina.

A questo punto, posso tornare alla raccolta Pagine per selezionare la pagina dwhome.aspx che ho appena creato. La pagina viene visualizzata nel browser e così la posso modificare. Come potete vedere, i nostri sforzi stanno dando un risultato interessante:

Ora continuo e inserisco i dati dal sito Dreamweaver originale. Poiché tutti i campi di testo sono in HTML formattato, posso copiare l'HTML raw dalla pagina di Dreamweaver e incollarlo nel campo in modalità HTML.

Le immagini sono un po' più interessanti. La prima cosa che faccio è caricarle dalla mia unità locale nella cartella Immagini in SharePoint. Una volta che sono nella cartella, posso usare un'altra delle nuove caratteristiche di pubblicazione di SharePoint 2013 chiamata Rendering immagini. Questa caratteristica consente di creare una dimensione personalizzata in cui deve essere eseguito il rendering dell'immagine. In questo caso, le immagini nel sito dell'esercitazione di Dreamweaver sono tutte delle stesse dimensioni, ovvero 316 pixel (larghezza) x 130 pixel (altezza). Per riprodurre questo comportamento scelgo Impostazioni sito…Rendering immagini (nella sezione Aspetto). Sono presenti tre rendering predefiniti. Ho fatto clic sul collegamento per aggiungere un nuovo elemento e ho creato un rendering con le dimensioni descritte e che ho chiamato Column Image. Quando ho aggiunto l'immagine alla pagine ho potuto selezionare quale rendering di immagine usare per visualizzare l'immagine sulla pagina; ho selezionato il rendering Column Image ed è stato sufficiente per disporre gli elementi nello stesso modo in cui appaiono nel sito di Dreamweaver.

Al termine di queste operazioni, il risultato ha un aspetto molto simile al sito di Dreamweaver originale; ecco un'immagine dell'originale in alto e la versione di SharePoint immediatamente sotto:

Sito di Dreamweaver:

Sito di SharePoint:

Niente male, vero? La principale differenza che salta all'occhio sono il colore e il tipo di carattere di alcuni tag predefiniti quali H2 e H3. Per il momento risolvo questo inconveniente semplicemente regolando gli elementi nel mio foglio di stile relativi a tali aree. Potete scegliere di correggere un tag alla volta, oppure di applicare la modifica a tutti i tag H2, H3, e così via.

Dopo aver eseguito queste piccole modifiche nel foglio di stile mi ritrovo con una pagina che è in tutto e per tutto simile al sito di Dreamweaver originale. A questo punto continuo e accedo alla pagina dwhome.aspx per impostarla come home page del sito. L'ultima cosa che voglio fare è aggiungere alcune caratteristiche di SharePoint, che ho citato prima (casella di ricerca e barra di spostamento superiore), alla pagina master.

Per iniziare, trascino la mia pagina master dalla visualizzazione albero in Dreamweaver. Nel browser scelgo Gestione progettazione dal menu Azioni sito. Faccio clic sull'opzione Modifica pagine master e quindi su index.html, ovvero sulla pagina master di questo esercizio. Visualizzo di nuovo l'anteprima e quindi faccio clic sul menu Snippets nell'angolo superiore destro. In questo modo potrò usare questa fantastica nuova caratteristica, che consente di selezionare diversi elementi di pagina standard di SharePoint, ad esempio una barra di spostamento verticale superiore, il titolo e il logo del sito, una casella di ricerca, web part e così via. Affinché sia tutto un po' più visivamente "interessante" per questo scenario, ho aggiunto al sito un paio di nuove pagine chiamate Products e Careers e ho creato collegamenti a tali pagine.

Nella mia pagina master ho aggiunto nuovi elementi DIV nei punti in cui inserire la barra di spostamento e la casella di ricerca. Sono quindi andato nella pagina Snippets e ho copiato il codice per la casella di ricerca e la barra di spostamento, che ho quindi incollato nel DIV appropriato. Ora la mia pagina master ha questo aspetto (il frammento di codice è stato rimosso per motivi di spazio; il vostro potete copiarlo e incollarlo dalla pagina del frammento):

<div>

</div>

<div>

</div>

Ed ecco il prodotto finito, completo di menu e casella di ricerca di SharePoint:

Ora che abbiamo terminato, ci sono due cose che vale la pena sottolineare. Innanzitutto, questo è un cattivo esempio di pagina master. Perché? Perché il layout è perfetto per una home page, ma per la maggior parte delle vostre pagine di contenuto questo layout non è sufficientemente flessibile. L'obiettivo di questo post era quello di prendere un esempio noto nel mondo di Dreamweaver e farlo funzionare nel mondo di SharePoint usando lo strumento Dreamweaver e la nuova caratteristica Gestione progettazione di SharePoint 2013. Sotto questo punto di vista, direi che abbiamo fatto un buon lavoro. In un mondo ideale avremmo messo immediatamente più elementi della pagina master nella pagina di layout. Ad esempio, se si imposta questa pagina master come Pagina master di sistema, non sarete senz'altro soddisfatti; ecco un esempio dell'aspetto che avrebbero le pagine modulo e delle impostazioni quando si esegue questa operazione (questa è la pagina Impostazioni sito):

Sì! A questo punto, correggere la pagina master nell'interfaccia utente è praticamente impossibile. Fortunatamente potete eseguire questo frammento di codice PowerShell per ripristinare la pagina master predefinita:

$w = Get-SPWeb https://yourWebApp

$w.MasterUrl = "/_catalogs/masterpage/v15.master"

$w.Update()

Per il secondo punto uso una pagina master diversa. Diamo un'occhiata alla pagina master Contoso di esempio:

Niente male, vero? Niente di speciale, ma ha gli elementi di base di un sito. Ma impostiamola come Pagina master di sistema e andiamo alle impostazioni di un elenco o una raccolta:

Manca niente secondo voi? La barra di navigazione che è normalmente presente nella parte superiore della sezione Informazioni elenco e che permette di tornare al contenuto dell'elenco con un semplice clic non è presente. Ecco perché ve lo faccio notare. Se andate alla pagina Snippets, non vi troverete il codice della barra di navigazione necessario. La pagina Snippets contiene frammenti di codice interessanti, ma non copre ogni singolo controllo per ogni singola situazione. Allora? Come risolviamo il problema? Bè, quando non trovate quello che cercate nella pagina Snippets, dovete aprire il file v15.master e cercarvi i frammenti di codice di cui avete bisogno. Ecco l'aspetto del codice del file v15.master necessario per la barra di navigazione:

<SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">

<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">

<SharePoint:SPTitleBreadcrumb

runat="server"

RenderCurrentNodeAsLink="true"

SiteMapProvider="SPContentMapProvider"

CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider">

<SharePoint:ThemedForegroundImage ThemeKey="spcommon" ImageUrl="/_layouts/15/images/spcommon.png" CssClass="ms-pageTitle-separatorImg" runat="server" />

</span>

</PATHSEPARATORTEMPLATE>

</SharePoint:SPTitleBreadcrumb>

</asp:ContentPlaceHolder>

</SharePoint:AjaxDelta>

Ora, se provate a copiare e incollare questo codice nella pagina master HTML, vedrete che non funzionerà. Il motivo è perché questo codice contiene markup ASP.NET e stiamo lavorando con una pagina HTML. SharePoint 2013 usa tag speciali che consentono di "includere" i tag ASP.NET per aggiornare automaticamente la pagina master creata e che è "accoppiata" alla pagina HTML. A tale scopo, è necessario inserire il markup ASP.NET in tag di commento; i tag di inizio devono essere preceduti da "MS:", mentre i tag di chiusura da "ME:". Ecco come apparirà lo stesso codice con i wrapper indicati sopra, e sarà questo il codice che incollerò nella mia pagina master HTML:

</span>

</PATHSEPARATORTEMPLATE>

Adesso che abbiamo incollato il codice nella pagina master, possiamo vedere come la barra di navigazione appare nuovamente nella pagina delle impostazioni dell'elenco:

E con questo chiudo il mio lungo post. Avete potuto vedere come la nuova caratteristica Gestione progettazione di SharePoint 2013 vi consenta di usare il vostro strumento di modifica HTML preferito per eseguire attività di gestione del contenuto quotidiane. Abbiamo potuto ricreare il sito dell'esercitazione di Dreamweaver in SharePoint 2013 usando Dreamweaver, cosa che è un grande passo avanti rispetto alle versioni precedenti di SharePoint. Vi ho anche mostrato come usare caratteristiche quali la raccolta Snippets per aggiungere caratteristiche di SharePoint alle vostre pagine master, e cosa fare quando avete bisogno di una caratteristica che non è disponibile in Snippets. Inoltre, questo metodo di usare lo strumento di modifica HTML preferito può essere applicato anche a un'altra importante caratteristica di SharePoint 2013 chiamata Modelli di visualizzazione. Questa caratteristica viene usata principalmente con i risultati di ricerca, ma la ricerca è talmente ben integrata in questa versione di SharePoint che scoprirete tante possibilità d'utilizzo interessanti per questi modelli. Cercate in questo sito blog informazioni dettagliate su come creare una soluzione usando regole di query e tipi di risultati.

L'allegato al post include la versione formattata in Word del post, nonché gli elementi di origine che ho usato per creare la versione finale di SharePoint del sito dell'esercitazione di Dreamweaver.

Questo è un post di blog localizzato. L'articolo originale è disponibile in Using Dreamweaver and Design Manager with SharePoint 2013

Partager via

Utilizzo di Dreamweaver e Gestione progettazione con SharePoint 2013

Ressources supplémentaires