Uso de Dreamweaver y del administrador de diseño con SharePoint 2013

Article
09/20/2012

Artículo original publicado el sábado, 28 de julio de 2012

SharePoint 2013 contiene nuevas características que facilitan más que nunca el diseño y la publicación de sitios web. Una de estas características es el Administrador de diseño, que le permite hacer cosas como crear distintos canales para el contenido (un conjunto de páginas para exploradores de tamaño completo, uno para dispositivos móviles, otro para tabletas, etc.) Puede asociar diferentes páginas maestras a cada canal. Una de las características más interesantes es que puede crear una página en cualquier herramienta de edición HTML estándar, como Dreamweaver, y cargarla a SharePoint para utilizarla como página maestra. SharePoint se hace cargo de esto automáticamente creando una página .aspx que mantiene en sincronización con el archivo .html. Tras haberse producido la conversión, su única opción no es recurrir a otra herramienta para realizar los cambios, sino que puede continuar editando el archivo .html con la herramienta de edición que prefiera, y, cada vez que lo guarde, SharePoint sincronizará el archivo .aspx que se utiliza para representar la página web.

Además, existe algo llamado Fragmentos que le permite apropiarse de partes de la perfección de SharePoint e insertarlas en la página maestra. Solo tiene que seleccionar el tipo de fragmento que desea (un cuadro de búsqueda, una exploración rápida, etc.) y copiar el código autogenerado de la característica para pegarlo en la página maestra. Pero no todo es un camino de rosas: quedan aún unas cuantas particularidades de SharePoint que necesita conocer para convertir totalmente la página .html estándar a una página maestra de SharePoint.

En este artículo se tomará el sitio web que usted haya creado con el tutorial de Dreamweaver (https://www.adobe.com/devnet/dreamweaver/articles/first_website_pt1.html) y se convertirá en una página maestra de SharePoint y en la página de inicio de mi sitio. Así que comencemos con el aspecto que tiene el sitio de Dreamweaver finalizado:

Si observa la página, puede ver que hay algunos aspectos específicos de SharePoint que se necesitará abordar:

Las imágenes que se utilizan para el encabezado, para el fondo de la vista principal de la página y para las historias individuales
El contenido de la parte principal de la página y las tres áreas de texto
Características adicionales de SharePoint que probablemente deseamos agregar. Por ejemplo, un cuadro de búsqueda y una exploración.

Primero, planteémonoslo desde una perspectiva de contenido. Los tipos de contenido integrados pueden transmitir el contenido principal, pero se necesita cierta personalización que se ajuste a los tres fragmentos de texto de la parte inferior de la página. Comenzaremos con eso y crearemos un nuevo tipo de contenido compatible. Como las imágenes están intrínsecamente vinculadas al contenido, les agregaremos columnas de sitio tanto a ellas como al texto propiamente dicho. El tipo de contenido de la Página principal es probablemente una buena clase base para este tipo de página, así que he creado un tipo de contenido basado en la Página de inicio que he llamado DW Layout. Para completar el diseño, he agregado las columnas siguientes:

LeftStoryImage
LeftStoryText
CenterStoryImage
CenterStoryText
RightStoryImage
RightStoryText

Todas las columnas de imagen se definen como Imagen con formato y restricciones de publicación y las columnas de texto se definen como Contenido HTML completo con formato y restricciones de publicación.

Llegados a este punto, estamos listos para comenzar la primera etapa con el Administrador de diseño, en la que cargaremos la página HTML y la hoja de estilo de Dreamweaver y la convertiremos en página maestra.

Ahora abra el explorador en la máquina en la que está instalado Dreamweaver (o su herramienta de edición HTML favorita) y vaya al sitio de SharePoint Haga clic en el menú Acciones del sitio y seleccione Administrador de diseño. En la lista de tareas de la izquierda, haga clic en #3, Cargar archivos de diseño. Haga clic en el vínculo para asignar una unidad local a la carpeta de SharePoint en la que se almacenará la página maestra y la hoja de estilo. Debería abrir una vista de Explorer del sitio de SharePoint para poder arrastrar y soltar archivos directamente de SharePoint a Dreamweaver. Si por algún motivo eso no funciona, siempre puede ir a la biblioteca de la página maestra y abrirla en la vista de Explorer.

Luego copie la página maestra de índice .html de la unidad local a la biblioteca de SharePoint que está abierta en la vista de Explorer. Como el tutorial de Dreamweaver da por hecho que la hoja de estilo está en una subcarpeta llamada Estilos, tendrá que crear la carpeta y copiar a ella la hoja de estilo.

Ahora, en el explorador, haga clic en #4, Editar páginas maestras, en la lista de tareas del Administrador de diseño. Se abrirá un diálogo de estilo de explorador de archivo de SharePoint y debería mostrarse el archivo de índice .html que se copió a la galería de la página maestra. Haga clic en él para seleccionarlo y luego haga clic en el botón Insertar. La conversión debería completarse y el Administrador de diseño mostrará el archivo en la lista de páginas maestras con el mensaje "Conversión correcta". Llegados a este punto, si actualiza la vista de Explorer de la biblioteca de la página maestra debería ver un archivo nuevo llamado index.master. Esta es la "pareja" del archivo index.html que cargó al sitio. A partir de este momento, SharePoint se encargará de actualizar el archivo maestro. Lo único que tiene que hacer usted es trabajar con el archivo HTML.

Seguramente ahora ya merezca la pena ver la nueva página maestra para identificar qué partes necesitan más trabajo. Para hacer esto, puede hacer clic en el vínculo index.html del Administrador de diseño Este abre la página en modo de vista previa para que pueda ver el aspecto que tiene la página maestra. El aspecto inmediato tras haber realizado la conversión por primera vez es interesante y es el siguiente:

Algunos aspectos destacables:

La hoja de estilo parece funcionar: se muestran las fuentes y el formato que esperábamos
Las imágenes no aparecen, así que tendremos que corregirlo. De todos modos, algunas imágenes son contenido y otras forman parte de la página maestra real, y esto tendrá que justificarse a medida que continúa modificándose la página maestra.
El texto que se muestra no debería formar parte de la página maestra, de modo que tendrá que eliminarse y luego incorporarlo como contenido de la página de inicio.

Primero echemos un vistazo a las correcciones necesarias. Se tiene que cargar la imagen utilizada para el fondo de la sección del cuerpo principal y corregir el vínculo a ella de la página maestra. También tienen que eliminarse todas las otras imágenes de la parte inferior de la página. Además de eso, también se tiene que eliminar todo el texto de la página porque es contenido que debería asociarse a una página única, no a la maestra. Para comenzar a trabajar con esto, arrastre los archivos HTML y CSS de la vista de Explorer de la galería de la página maestra de SharePoint y suéltela en Dreamweaver. Se dará cuenta inmediatamente de que ahora la página HTML tendrá mucho más "engorro" de SharePoint. Vaya acostumbrándose: aunque ahora ya sea capaz de utilizar su propio editor HTML, todavía tendrá que utilizar los controles y las etiquetas de SharePoint para hacer que todo cobre vida .

A medida que nos desplazamos por la HTML vamos encontrando las imágenes que nos faltan y que deberían formar parte de la página maestra. Estas son banner.gif (de la HTML) y main.jpg (de la hoja de estilo que establece el fondo del DIV de la imagen_principal) y son las que corregiremos primero.

De nuevo en el explorador, haga clic en el menú Acciones del sitio y luego en el menú Ver contenido del sitio. Para abrir la biblioteca de documentos, haga clic en el vínculo Imágenes de la colección de sitios. Ahora cargaremos las dos imágenes a la biblioteca. La dirección URL de la biblioteca es /sitecollectionimages, así que con Dreamweaver cambiaremos la ruta de las dos imágenes para que apunte a esa biblioteca. Si actualiza la página de la vista previa comprobará que estamos progresando:

Probablemente reparará en algo que no vio en la imagen anterior: el DIV amarillo que ocupa la parte inferior de la página. En la primera imagen sí estaba, pero el tamaño del explorador era demasiado grande como para que lo viera. Pues bien, lo que importa de este DIV amarillo es que lo añadió SharePoint durante el proceso de conversión y que contiene el marcador de posición del contenido de la página principal. El próximo paso será destruir el contenido que debería formar parte de una página de contenido y no de la página maestra. Quitaremos el texto de la sección principal y eliminaremos las imágenes que no se representan y el texto de debajo. También moveremos el DIV del marcador de posición (sin el color amarillo) a la sección principal de la página. Además de esto, agregaremos controles de marcador de posición a las tres áreas que contienen imágenes y texto. Las unificaremos a la hora de crear la página de diseño.

La página HTML resultante es una combinación de comentarios, etiquetas de procesamiento de SharePoint especiales y marcadores de posición del lugar en el que se colocará el contenido. Este es el aspecto de cada sección:

Cuerpo principal:

Columna izquierda:

Columna central:

Columna derecha:

Ahora la página parece un poco vacía, pero no pasa nada, es lo que se espera de una página maestra:

Una vez hecho esto, la página maestra ya está casi terminada. Aún será necesario agregar algunos menús y un cuadro de búsqueda, pero retomaremos este tema dentro de un rato. Lo siguiente que haremos será crear una página de diseño. En esta página los campos de datos se "conectan" con el diseño de la página. Para ello, vamos a Configuración del sitio, Páginas maestras y Diseños de página. Hacemos clic en el botón Nuevo de la cinta de opciones y seleccionamos Diseño de página. Cuando se muestra la pantalla Nuevo diseño de página seleccionamos el tipo de contenido que deseamos asociar al diseño de la página. Puede que recuerde que al principio de este artículo se describió la creación de un tipo de contenido personalizado y se le puso el nombre DW Layout. Pues bien: en el campo Tipo de contenido asociado, seleccionamos el tipo de contenido DW Layout. Le asignamos una dirección URL, un título y una descripción y listo: ya puedo crear la página de diseño. En este caso se ha creado la dirección URL para la página DWLayoutPage.aspx, el título es Página de diseño de Dreamweaver y la descripción Página de diseño basada en el sitio del tutorial de Dreamweaver.

La página de diseño ya está creada pero todavía no tiene controles. Se tienen que agregar los controles a la página y enlazarlos a los campos personalizados del tipo de contenido que se describió anteriormente: LeftStoryImage, LeftStoryText, etc. Además también se tienen que agregar controles de marcador de posición ASP.NET que correspondan a los contenedores de marcador de posición que se agregaron a la página maestra. De este modo, los datos de cada campo se asocian a un contenedor y ese contenedor se coloca en el marcador de posición del contenedor correspondiente de la página maestra. Los datos se representan así en la parte derecha de la misma.

Si observa la información que hay sobre la página maestra, verá que se han agregado cuatro marcadores de posición de contenido: PlaceHolderMain, PlaceHolderLeft, PlaceHolderCenter, y PlaceHolderRight. Estos marcadores de posición tienen que agregarse a la página de diseño y luego en cada uno de ellos se tiene que colocar el campo de tipo de contenido adecuado. Para ello, se arrastrará de nuevo la nueva página de diseño, DWLayoutPage.aspx, de la Galería de páginas maestras de la vista de Explorer, y se soltará en Dreamweaver. La página de diseño tiene un control de marcador de posición que siempre lleva el nombre PlaceHolderMain, así que no es necesario agregarlo. Los otros se agregan con la revisión de controles ASP.NET estándar del siguiente modo:

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

</asp:Content>

Como puede ver, acabo de agregarle un ID PlaceHolderLeft, y dos más: ID PlaceHolderCenter e ID PlaceHolderRight.

En cuanto a los campos realmente necesarios en la página de diseño, no hay demasiados. Está el campo de contenido principal, que viene con la clase base de la que heredó el tipo de contenido personalizado. Ese campo se llama simplemente PublishingPageContent. Como va en el cuerpo principal de la página, en la sección PlaceHolderMain se ha agregado un control de publicación, así que la sección tiene el siguiente aspecto:

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

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

</asp:Content>

Los otros tres marcadores de posición requieren dos campos: un campo de imagen y un campo de texto enriquecido Los agregamos y utilizamos el nombre del campo de tipo de contenido en el atributo FieldName de la revisión. He aquí un ejemplo del aspecto del control PlaceHolderLeft (evidentemente, PlaceHolderCenter y PlaceHolderRight son muy similares):

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

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

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

</asp:Content>

Llegados a este punto, y desde una perspectiva de página maestra y de página de diseño (aparte de los menús y los cuadros de búsqueda que se mencionaron anteriormente), el resto está todo listo. Ahora deseamos crear una página nueva y asignarle el nuevo diseño de página.

Para ello, vamos a la Biblioteca de páginas. Hacemos clic en Nueva, en la cinta de opciones, y seleccionamos DW Layout. Ahora aparece en el menú nuevo porque se basa en un tipo de contenido que heredó del tipo de contenido de la Página principal:

Rellenamos las propiedades necesarias y vemos lo siguiente:

Ya estamos listos para hacer la prueba Para empezar, volvemos a la galería de la página maestra y publicamos la página maestra (index.html). Hasta que no hagamos esto no podremos seleccionarla como página maestra del sitio. Lo próximo que haremos será volver a Configuración del sitio, ir a la configuración de la página maestra y seleccionarla como maestra de la Página maestra del sitio. Yo nunca la establezco al principio para la Página maestra del sistema para asegurarme de que todo funciona bien. Si mete la pata en la página maestra y la asigna a la Página maestra del sistema será terriblemente complicado revertir el proceso.

Hecho esto, podemos regresar a la Biblioteca de páginas y hacer clic en la página dwhome.aspx que acabamos de crear. Eso hace que aparezca en el explorador para poder editarla. Como puede ver, las cosas empiezan a tomar buena forma:

Ahora continuaremos con el proceso e incrustaremos los datos del sitio original de Dreamweaver. Como todos los campos de texto son código HTML enriquecido, podemos simplemente copiar el HTML sin procesar de la página de Dreamweaver y pegarlo en el campo en modo HTML.

Las imágenes son un poco más interesantes. Lo primero que hacemos es cargarlas de la unidad local a la carpeta Imágenes de SharePoint. Una vez allí, podemos aprovecharnos de otra característica de publicación nueva de SharePoint 2013 llamada Representaciones de imagen. Le permite crear un tamaño personalizado en el que debería representarse una imagen. En este caso, las imágenes del sitio del tutorial de Dreamweaver tenían todas el mismo tamaño (316 píxeles de ancho por 130 píxeles de alto). Para conseguir el mismo resultado, vamos a Configuración del sitio, Representaciones de imagen (en la sección Aspecto). Verá tres representaciones sin configuración. Para agregar un nuevo elemento, yo he hecho clic en el vínculo, he creado una representación con las dimensiones ya descritas y la he llamado Imagen de columna. Cuando he agregado la imagen a la página he podido seleccionar la representación de imagen que se utilizaría para mostrar la imagen en la página. He seleccionado la representación Imagen de columna y no he necesitado hacer nada más para alinear el contenido igual que en el sitio de Dreamweaver.

Hecho esto, obtengo esta vista, que es prácticamente el aspecto que tiene ahora el sitio original de Dreamweaver. He aquí una imagen del original, en la parte superior, y la versión de SharePoint justo debajo:

Sitio de Dreamweaver:

Sitio de SharePoint:

Tiene muy buena pinta. La principal diferencia destacable es el color y la fuente de algunas de las etiquetas integradas como H2 y H3. Por ahora lo arreglaremos ajustando lo que la hoja de estilo establece para estas áreas. Usted tiene la opción de hacer el ajuste como algo excepcional o hacerlo general para todas las etiquetas: H2, H3, etc.

Tras estos pequeños ajustes de CSS tenemos una página que es básicamente idéntica al sitio original de Dreamweaver. Ahora continuaremos registrando la página dwhome.aspx y la convertiremos en la página de inicio del sitio. Lo último que necesitamos hacer es agregar las características de SharePoint a la página maestra mencionadas anteriormente: la exploración superior y el cuadro de búsqueda.

Para comenzar, arrastramos la página maestra de la vista de Explorer a Dreamweaver. En el explorador, vamos al menú Acciones del sitio y seleccionamos Administrador de diseño. Hacemos clic en la opción #4, Editar páginas maestras y luego en index.html, que es la que utilizaremos en este ejercicio. Vuelve a mostrarse la vista previa y hacemos clic en el menú Fragmentos de la esquina superior derecha. Esto nos permitirá sacar provecho de esta estupenda nueva característica, que le permite seleccionar entre distintos elementos de página de SharePoint estándar, como la exploración superior y vertical, el título y el logotipo del sitio, el cuadro de búsqueda, los elementos web, etc. Para hacer las cosas un poco más "interesantes" visualmente en este escenario, he agregado al sitio un par de páginas nuevas llamadas Productos y Carreras profesionales y he creado vínculos de exploración a ellas.

De nuevo en la página maestra, acabo de agregar nuevos elementos DIV donde deseo que esté la navegación y el cuadro de búsqueda. Luego he ido a la página Fragmentos y he copiado el código de la Navegación superior y del Cuadro de búsqueda para luego pegarlo en el DIV adecuado. La página maestra tiene ahora este aspecto (el código de fragmento se quita para ganar brevedad, pero puede obtener el suyo haciendo una copia y pegándola desde la página de fragmentos):

<div>

</div>

<div>

</div>

He aquí el producto finalizado, con los menús y el cuadro de búsqueda de SharePoint incluidos:

Ahora que hemos terminado, hay un par de cosas que merece la pena señalar. Primero, que este es un ejemplo muy malo para una página maestra. ¿Por qué? Porque la presentación funciona perfectamente para una página de inicio, pero para la mayoría de las páginas de contenido no es lo suficientemente flexible. En realidad el objetivo de este artículo era tomar un ejemplo bien conocido en el mundo de Dreamweaver y hacer que funcionase en SharePoint con la herramienta Dreamweaver y las nuevas características del Administrador de diseño de SharePoint 2013. En este sentido, creo que la explicación ha sido bastante clara. En un mundo ideal, habríamos incluido más contenido del que contiene ahora la página maestra en la página de diseño. Por ejemplo, si convierte esta página maestra en la Página maestra del sistema, seguramente no se quede satisfecho. He aquí una idea del aspecto que tendrían las páginas de formularios y de configuración una vez hecho esto (esta es la página Configuración del sitio):

¡Caramba! Intentar corregir ahora la página maestra en la IU es casi imposible. Por suerte, puede ejecutar este pequeño fragmento de PowerShell para revertirla a la página maestra integrada:

$w = Get-SPWeb https://yourWebApp

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

$w.Update()

Para justificar el segundo argumento, lo que voy a hacer es cambiar de tercio e ir a una página maestra diferente. Vamos a echar un vistazo a la página maestra Contoso de ejemplo:

No está mal, ¿verdad? No es nada del otro mundo, pero tiene los elementos básicos de un sitio. Convirtámosla en la Página maestra del sistema y vayamos luego a una configuración de lista o biblioteca:

¿Ve que falte algo?. Falta la ruta de navegación que se ve normalmente encima de la sección de Información de lista, que le permite hacer clic para regresar al contenido de la lista. La razón por la que destaco esto es la siguiente: si va a la página Fragmentos, no encontrará el código de ruta de navegación que puede usarse para esto. La página Fragmentos contiene un montón de código válido, pero su función no es ocuparse de todos los controles de todas y cada una de las situaciones. ¿Cómo se corrige esto? Pues si no encuentra lo que necesita en la página Fragmentos, tendrá que abrir el archivo v15.master y buscar los fragmentos de código. Este es el aspecto que tiene el código en el v15.master responsable de esta ruta de navegación:

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

Ahora, si trata solo de copiar y pegar esto en la página maestra HTML, no funcionará, porque contiene marcado ASP.NET y nosotros estamos trabajando con una página HTML. SharePoint 2013 utiliza etiquetas especiales que le permiten "encapsular" las etiquetas ASP.NET para saber cómo actualizar la página maestra que creó y que está "asociada" a la página HTML. Para hacer esto, coloque el marcado ASP.NET en las etiquetas de comentario, porque las etiquetas de inicio van precedidas de "MS" y las etiquetas de cierre van precedidas de "ME". Este es el aspecto que tiene el código encapsulado, y es lo que pegaré en la página maestra HTML:

</span>

</PATHSEPARATORTEMPLATE>

Ahora que lo he copiado a la página maestra, puede apreciarse cómo la ruta de navegación vuelve a mostrarse en la página de configuración:

Con esto daré por concluida esta extensa publicación. Ha podido ver cómo las nuevas características del Administrador de diseño de SharePoint 2013 le permiten utilizar su editor de HTML favorito para realizar tareas diarias de administración de contenido. Hemos podido reconstruir el sitio del tutorial de Dreamweaver en SharePoint 2013 con Dreamweaver, lo que constituye un gran avance respecto de versiones previas del producto. También se ha explicado cómo utilizar funciones como la galería de Fragmentos para agregar características de SharePoint a las páginas maestras, y también qué hacer cuando se necesita una característica que no encuentra en los Fragmentos. Además, esta misma metodología de uso de su editor HTML favorito puede utilizarse para otra importante característica de SharePoint 2013 llamada "plantillas para mostrar". Se utilizan principalmente con resultados de búsqueda, pero la búsqueda está tan bien integrada en esta versión de SharePoint que les encontrará muchos otros usos posibles. Para obtener información sobre el proceso de creación de una solución con reglas de consulta y tipos de resultado, busque en el blog.

Los datos adjuntos a esta publicación contienen la versión en formato Word de la misma junto con los elementos originales utilizados para crear la versión final de SharePoint del sitio del tutorial de Dreamweaver.

Esta entrada de blog es una traducción. Puede consultar el artículo original en Using Dreamweaver and Design Manager with SharePoint 2013

Uso de Dreamweaver y del administrador de diseño con SharePoint 2013

Additional resources