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.

Al instalar SharePoint 2013 en la pantalla inicial se tiene la opción de elegir el tipo de plantilla que se desea utilizar para el sitio, al principio es un poco confuso si no se está familiarizado con las opciones a elegir, ya que hay una amplia variedad de plantillas, el objetivo de este blog es hacer una breve introducción sobre cada uno de las plantillas que se tienen a disposición.

Plantillas de Collaborate Site Template

· Team Site: Es la opción más frecuente la cual está orientada a los grupos de trabajo ya que provee opciones para crear y compartir información y documentos, además se puede personalizar para cada usuario.

· Blog: Este tipo de plantilla está orientada a la creación de contenido de opinión y de información desde una perspectiva personal, la cual se puede compartir y puede estar soportada por un usuario o un grupo de usuarios.

· Developer Site: Está orientado a la creación de Apps para Office, las aplicaciones se pueden probar y publicar.

· Project Site: Esta plantilla está enfocada en la administración y la colaboración de contenido de los proyectos, se puede cargar información y documentos referentes al proyecto y ver el estado de los mimos.

· Community Site: Plantilla enfocada a comunidades, donde se puede crear y compartir información y crear discusiones en las que los miembros de la comunidad pueden participar.

Plantillas de Enterprise Site Template

· Document Center: Este tipo de plantillas para el sitio está enfocada en administrar documentos para las empresas.

· eDiscovery Center: Esta plantilla se especializa para administrar sitios dedicados a la investigación en general, se permite crear, buscar y exportar el contenido:

· Records Center: Este sitio se especializa en almacenar y buscar documentos importantes los cuales necesitan estar almacenados por largo tiempo.

· Business Intelligence Center: Este tipo de sitios está enfocado a la inteligencia de negocio, permite tener información de bases de datos, reportes, dashboards, etc.

· Enterprise Search Center: Este sitio es principalmente un buscador de contenido empresarial, donde los usuarios pueden tener acceso a diferente tipo de información de la empresa, de empleados, de videos o de conversaciones.

· My Site Host: Este tipo de plantilla permite crear páginas de perfiles públicos para los empleados de la empresa.

· Community Portal: Este tipo de sitios está enfocado para la administración de contenido de comunidades empresariales:

 

· Basic Search Center: Este sitio contiene un buscador empresarial básico dedicado a la búsqueda de información.

 

· Visio Process Repository: Sitio dedicado a administrar y compartir diagramas de procesos de Microsoft Visio.

 

Plantillas de Publishing Site Template

· Publishing Portal: Este tipo de sitios está dedicado a la creación de sitios parecidos a páginas de internet, también se usa para la creación de portales de intranet para las empresas.

 

· Enterprise Wiki: Esta plantilla permite crear sitios para compartir conocimientos enfocados en el entorno empresarial, se basa en páginas estilo wiki como Wikipedia.

 

· Product Catalog: Este tipo de sitios está enfocado en administrar catálogo de contenido para las empresas.

 

Estos son los sitios que ofrece SharePoint 2013 al instalarlo, además está la opción de crear master pages personalizadas si ninguno de estos sitios suple las necesidades que tiene, 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.

Al crear una master page a partir de un archivo html se genera una página en base a la plantilla web pero SharePoint no sabe dónde ubicar el Editor de Contenido ya que no puede saber en qué parte de la página el usuario desea tenerlo.

Para solucionar esto SharePoint genera el script del Editor de Contenido al final del código de la plantilla .html, este código se encuentra antes de cerrar la etiqueta <body> contenido en un div que se puede identificar como <div data-name=”ContentPlaceHolderMain”>, el código del Editor de Contenido

Lo que hay que hacer es cortar ese código y pegarlo donde quiere que este el Editor de Contenido, es recomendable que antes de modificar los archivo de la master se realice una copia de los mismos para tenerlos como respaldo.

Es posible que al mover el Editor de Contenido de lugar no queden los estilos como es deseado, para esto toca jugar un poco con los estilos css propios de la master y cuadrarlos según sean sus necesidades de diseño.

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.