SharePoint 2013 ofrece muchas nuevas características que no se encontraban presentes en la versión SharePoint 2010, una de las más importantes y la que nos corresponde en este caso es poder crear una master page personalizada a partir de una plantilla html. De esta forma se genera el archivo .master al cual estamos acostumbrados y el archivo html que se utiliza para el diseño del mismo, esto facilita mucho la personalización de la master page.
Dicho lo anterior, el objetivo de este blog es mostrar de forma general como crear una master page personalizada a partir de una plantilla html anteriormente creada.
Paso 1: Tener la plantilla html creada:
El primer paso para crear la master page personalizada es tener el html template del cual se va a partir anteriormente creado, se recomienda tener los estilos css en un archivo aparte para no generar conflictos, de igual formas los archivos de javascript.
Paso 2: Subir los archivos de la plantilla html:
El paso a seguir es subir los archivos html al servidor en la Galeria SharePoint Master Page, para subir los archivos voy a utilizar SharePoint Designer 2013, a continuación se crea la carpeta donde se subirán los archivos de la plantilla para la master, como forma de ejemplo cree la carpeta llamada TestMaster.
En la carpeta que crean deben subir todos los archivos (html, imágenes, css, scripts, etc.)
Paso 3: Crear la master page a partir del html:
En este punto se va a convertir la plantilla html en la master page, para eso hay que entrar al sitio desde el navegador web y loguearse como administrador, luego entrar a las opciones y hacer clic sobre Desing Manager.
El paso siguiente es hacer clic sobre la cuarta opción, Edit Master Pages y luego sobre el enlace que aparece a la derecha Convert an HTML file to a SharePoint master page.
Luego se abre una ventana emergente donde se debe seleccionar el archivo html de la plantilla de la cual se va a crear la master page.
Una vez seleccionada la plantilla, se debe esperar a que se convierta y si todo sale bien, se puede visualizar de la siguiente forma, aquí también se encuentras las master por defecto que vienen con SharePoint 2013, Oslo y Seattle.
Ahora si se hace clic sobre el nombre de la nueva master page creada se puede visualizar el preview de como quedo luego de la conversión:
Aquí se puede apreciar que si la conversión fue correcta visualmente no hubo ningún cambio, esto representa una gran ventaja a diferencia de la versión de SharePoint 2010 donde el proceso era muy complejo para alguien sin experiencia.
Si entra nuevamente a la carpeta de la master en SharePoint Designer puede apreciar que ahora además del archivo html esta creado el archivo .master.
Paso 4: Los Snippets
En este punto la master ya está creada pero solo a nivel de diseño, aún falta acoplar los elementos de SharePoint, es decir debemos indicarle a SharePoint donde va el logo, el editor de contenido, el menú superior, o cualquier otro elemento.
Para esto SharePoint 2013 ofrece una herramienta muy práctica y fácil de comprender llamada Snippets, para acceder a esta hay que dar clic sobre la parte superior derecha de la master que se acaba de crear al enlace que dice Snippets.
En las opciones de Snippets se ofrecen un amplio grupo de herramientas que se pueden utilizar para personalizar el sitio y hacerlo dinámico, por ejemplo si entra a Vertical Navigation ya que desea ubicar el menú vertical que ofrece SharePoint en su nueva master debe configurar los parámetros que se encuentran a la derecha de la interfaz y presionar el botón Update. Esto actualiza el preview que se muestra en la parte izquierda de la interfaz y de igual forma actualiza el código del Snippet para que sea ingresado a la nueva master.
Si desea agregar un Snippet a la master debe copiar el código del mismo que se encuentra en el cuadro de texto HTML Snippet, o presionando sobre el botón Copy to Clipboard que está debajo del cuadro de texto.
Luego hay que descargar o si lo prefiere puede editar desde el mismo SharePoint Designer el archivo .html generado, es recomendado hacer y almacenar una copia del mismo antes de editarlo para tener una copia de respaldo en caso de que algo falle.
Se debe pegar el código copiado del Snippet en el archivo .html, el archivo .master no se debe tocar, ya que todo lo referente al diseño del sitio tiene que ver solo con el archivo .html, lo cual facilita mucho cambiar la apariencia del mismo.
Una vez pegado el código se deben guardar los cambios y actualizar la vista de la master, se debe tener en cuenta de que es un proceso de prueba y error debido a que la ubicación puede que no sea la deseada o los estilos no quedan como se querría, para esto toca jugar un poco con los estilos css del sitio y buscar el resultado, deseado.
A grandes rasgos estos son los pasos para crear una master page personalizada, si tienen alguna duda al respecto pueden escribir a mi correo electrónico jesus.hernandez@itsynergy.co, y espero que les sea de ayuda esta guía.
Leave a Reply