En mi último artículo, documenté cómo crear una página maestra en SharePoint 2013. Las páginas maestras definen los elementos globales de Chrome de tu sitio web. En este artículo se explica cómo crear diseños de página personalizados en SharePoint 2013. Para obtener más información sobre el modelo de página de SharePoint 2013, consulte este artículo de Microsoft.
Planificar el diseño de su página
Para este ejemplo, vamos a recrear una parte de una página en nuestro sitio web (www.navantis.com):
En nuestro artículo anterior, creamos una página maestra que definía el encabezado, el pie de página y las hojas de estilo globales para esta página. Ahora vamos a crear un diseño de página que siga este formato básico. El contenido será dinámico para que pueda crear tantas páginas como desee en función de este diseño.
En nuestro diseño de página, vamos a definir las siguientes áreas como»controles de campo». Vamos a crearlos todos en un único contenedor de contenido y a mostrarlos explícitamente para reflejar nuestro diseño:
La migaja de ruta en la parte superior izquierda podemos usar el rastro de migajas de ruta de SharePoint e incrustaremos la suscripción al boletín en el diseño de la página porque no queremos que esto se defina explícitamente en el diseño.
Definir Tu Tipo de contenido
Así que antes de hacer el trabajo HTML, vamos a crear un tipo de contenido (una definición para los campos de contenido) que defina cada uno de estos campos para nuestra página. De acuerdo con el plan anterior, necesitamos los siguientes campos:
- LargeHeadline
- RightHandBlurb
- LeftLinkList
- LeftColumnTitle
- LeftColumnText
- RightColumnText
En cada caso, estos serán los controles HTML. SharePoint 2013 le permite definir otros tipos de contenido para estos campos, como imágenes. Las imágenes de SharePoint 2013 se pueden representar en dimensiones específicas y SharePoint 2013 renderizará de forma dinámica cualquier imagen a la especificada para garantizar que se ajusten perfectamente a su diseño definido.
Para crear un tipo de contenido, vaya a Configuración del sitio – > Tipos de contenido del sitio (en Galerías de diseñadores web). Si observa los Tipos de Contenido de Diseño de página, verá los existentes para Artículo, Catálogo, Página de Bienvenida, etc. Vamos a crear un tipo de contenido para nuestro diseño. Haga clic en Crear y escriba un nombre para su nuevo tipo de contenido:
En Tipo de contenido principal, puede seleccionar el padre del que heredará su tipo de contenido. Si observa los tipos de contenido de diseño de página existentes, heredan de la página de tipo de contenido. La página se encuentra en el grupo Publicando tipos de contenido. También puede especificar el grupo en el que desea colocar su nuevo tipo de contenido: puede agregarlo al grupo de Tipos de contenido de diseño de página existente o crear su propio grupo personalizado.
Cuando haya creado su nuevo tipo de contenido, SharePoint 2013 mostrará las columnas que se heredaron automáticamente del tipo de contenido de página. Agreguemos algunos nuevos para representar nuestros campos personalizados. Haga clic en la columna Agregar desde nuevo sitio y agreguemos cada campo:
Para cada columna, podemos especificar el tipo. Para aquellos campos que queremos estilizar explícitamente, podemos usar la opción de Línea única de texto para que el autor del contenido se coloque en texto plano que será formateado por la plantilla. Para aquellos campos que queremos proporcionar más control al autor del contenido, podemos especificar el campo como contenido HTML completo y, a continuación, el autor del contenido podrá incluir cualquier HTML utilizando el editor de texto enriquecido. Para nuestros campos, utilicemos este enfoque:
- LargeHeadline – Sola línea de texto
- RightHandBlurb – Varias líneas de texto
- LeftLinkList – Full HTML
- LeftColumnTitle – Sola línea de texto
- LeftColumnText – Full HTML
- RightColumnText – HTML Completo
Para cada campo, crear una columna de sitio.
Ahora tenemos campos para almacenar el contenido, vamos a crear un Diseño de página.
Crear un diseño de página
Para crear un diseño de página, vaya al Administrador de diseño y haga clic en 6. Editar Diseños de Página. Haga clic en Crear un diseño de página. Dale un nombre al diseño de tu página, elige tu página maestra y el tipo de contenido que acabas de crear.
Si previsualiza el diseño de su página, verá que no parece mucho, necesitamos actualizar el HTML alrededor de los controles de campo para formatear correctamente el diseño.
Publicar su diseño de página
Antes de que pueda usar su diseño de página, debe publicarlo. Para publicar el diseño de su página, vaya a Configuración del sitio –> Páginas maestras y diseños de página. Verá dos archivos: uno es HTML y otro es ASPX. en SharePoint 2013, el HTML es ahora el maestro y puede editarlo utilizando un editor HTML. SharePoint 2013 genera el archivo ASPX automáticamente. Para publicar su diseño, haga clic en el archivo HTML y, a continuación, Publique:
Esto publicará los archivos HTML y ASPX, ahora los pondrá a disposición para crear una página basada en su diseño.
Crear una página
Para crear una página basada en nuestro nuevo diseño, vaya a Nueva página.
Si luego vas a Página – > Diseños de página, encontrarás nuestro nuevo Diseño de página en la lista de Diseños de página disponibles. Al cambiar el diseño de página, ahora debería ver todos los campos que creamos anteriormente en nuestro tipo de contenido.
Puede completar su contenido escribiéndolo o copiándolo y pegándolo desde su sitio web existente o desde documentos de office como Word. ¡Copiar y pegar ha mejorado drásticamente con respecto a las versiones anteriores!
Aquí el contenido de mi ahora llena:
Ahora podemos publicar nuestra página…
Nuestro contenido está ahí, pero el diseño no reflejan lo que queremos…así que ahora editar el código HTML para actualizar nuestra disposición.
Personalización de diseños de página
Los diseños de página de SharePoint 2013 son solo archivos HTML con muchos elementos de marcado adicionales para especificar dónde se inyectarán los controles. Ahora podemos personalizar el archivo HTML a través del administrador de diseño. Simplemente puede tomar una copia del archivo HTML, realizar los cambios y volver a cargar el archivo y SharePoint 2013 hará el resto. Hay dos formas de agarrar el archivo:
- Vaya al Administrador de diseño – > 3. Cargue archivos de diseño y asigne una unidad de red al directorio de la página maestra.
- Vaya a Configuración del sitio – > Páginas maestras y diseños de página y puede descargar su archivo.
Después de varias iteraciones con el diseño de página y mover los fragmentos proporcionados por SharePoint 2013 a los lugares apropiados, ahora tenemos una página con un buen formato:
Todo el contenido dentro del área de la página principal está completamente administrado por SharePoint y un autor de contenido puede cambiarlo fácilmente.
Este post fue escrito por Chris Woodill
Christopher Woodill es el Vicepresidente del Sector Público de Navantis. Con más de 15 años de experiencia en la planificación, gestión e implementación de estrategias tecnológicas tanto en el sector público como en el privado, Christopher es responsable de las ventas, la estrategia y la entrega de soluciones en el sector público para nuestros clientes en salud, gobierno, municipios y educación.
