Administrador de diseño en SharePoint 2013: Diseños y Páginas Maestras más fáciles
En todas las versiones anteriores, crear páginas maestras y diseños definitivamente no era fácil para un diseñador teniendo en cuenta los aspectos técnicos de la misma. Los diseñadores tendrían que entender SharePoint y qué componentes son obligatorios en la página maestra y cómo hacen para hacer sus diseños cobran vida.
En SharePoint 2013, hay una nueva función llamada Administrador de diseño que ayudará a separar los aspectos de diseño de los requisitos técnicos para crear una página maestra. El diseñador no necesita saber qué componentes son necesarios en una página maestra. El Administrador de diseño ayuda a crear la página maestra a partir de simples archivos HTML y CSS. El diseñador ahora solo tiene que preocuparse por su diseño y convertirlo en HTML, CSS e Imágenes. Una vez que estos artefactos estén listos, el administrador de diseño puede procesarlos para generar una página maestra.
El proceso para crear una página maestra es muy simple:
1. Cree el diseño que desee utilizando el editor HTML de su elección.
2. Cree el archivo CSS que admita su diseño.
3. Agrega las imágenes que forman parte de tu diseño.
4. Sube todos los archivos a la galería de la página maestra. (Hay una manera muy conveniente de hacer esto y hacer ediciones mientras desarrolla y retoca su HTML).
a. Abra la galería de la página maestra en el explorador de Windows.
b. Copie la carpeta html, CSS e Imágenes a la galería de la página maestra.
5. Cuando cargue el archivo HTML, asigne la página maestra HTML como tipo de contenido. (optativo)
6. A todos los demás archivos se les puede asignar el tipo de contenido de Archivos de diseño. (optativo)
7. Ve a la página de Configuración del sitio.
8. Haga clic en Administrador de diseño en la categoría «Look & Feel».
9. O puede hacer clic en el botón de Acciones del sitio nuevo a la derecha y hacer clic en Administrador de diseño.
10. Vaya a las Páginas maestras de Importación.
11. Haga clic en el enlace «Convertir un archivo HTML a la página maestra de SharePoint».
a. Esto abrirá un cuadro de diálogo para que seleccione un archivo html de la galería de la página maestra.
b. Seleccione el archivo html que acaba de cargar.
12. Una vez que seleccione un archivo, SharePoint generará una página maestra para ese diseño. Si se encuentra algún error durante el proceso de conversión, se lo notificará.
13. En este punto, se ha generado la página maestra.
14. Para personalizar la página maestra, haga clic en el enlace «Conversión exitosa».
a. Esto te llevará a una página de vista previa. Como puede ver en la captura de pantalla a continuación, SharePoint ha convertido y creado la página maestra.
Adición de componentes de SharePoint a la página maestra mediante el Administrador de fragmentos de código:
1. Antes de personalizar la página maestra, en la ventana del explorador de Windows donde ha abierto la galería de páginas maestras, abra el archivo Html que ha cargado en el editor de su elección.
2. Para agregar los componentes de SharePoint, como la navegación superior y otros controles, partes web, haga clic en el enlace Fragmentos en la esquina superior derecha de la página de vista previa.
3. Esto abrirá la página de la galería de fragmentos de código.
4. Digamos que desea agregar la navegación superior a su página maestra.
a. Haga clic en el botón de navegación superior de la cinta.
b. Esto creará el fragmento HTML que necesita.
c. Copie el fragmento de código en el portapapeles.
d. (Puede personalizar las propiedades del control de navegación superior y hacer clic en «Actualizar» para generar el nuevo fragmento.
5. Cambie al archivo html que ha abierto en un editor en el paso 1.
6. Pega el fragmento html donde quieras que aparezca la navegación superior en tu diseño.
7. Guarde el archivo html.
8. Actualice la página de vista previa en su navegador y verá que la página maestra se generó de nuevo y sus cambios son visibles.
9. De esta manera, puede crear y trabajar rápidamente en su página maestra.
10. Para publicar la página maqueta, seleccione el archivo html en la galería de páginas maquetas y publíquelo. Esto también publicará automáticamente el archivo de página maqueta y podrá configurar la página maqueta para el sitio.Captura de pantalla
: La página maestra generada con la navegación superior.
Consejos:
1. El archivo html y la página maestra están asociados entre sí.
2. SharePoint no le permitirá eliminar la página maestra mientras la asociación siga allí.
3. Para eliminar la asociación, vaya a la galería de páginas maestras.
a. Seleccione el archivo Html
b. Editar propiedades
c. Desmarque la casilla de verificación» Archivo asociado».
d. Guardar
4. Ahora puede trabajar en la página maestra directamente editándola.
5. Además, si bien el html y los archivos maestros están asociados, no puede publicar el archivo de la página maestra directamente. Tienes que seleccionar el archivo html y publicarlo. Esto publicará la página maqueta y podrá configurar la página maqueta para el sitio.
6. Sugerencia: Una vez que cree la página maestra a su satisfacción, disocie el archivo html, empaquete la página maestra en un wsp y luego impleméntela en sus entornos de prueba y producción.
Sobre el Autor
Más de este Autor