Compartir a través de

Guía de personalización de marca para los portales de SharePoint Online

  • Artículo

Poder aplicar una marca personalizada en un portal es una funcionalidad crítica, y este artículo le proporciona una descripción general de las opciones de personalización de marca y procedimientos recomendados de personalización de marca.

Nota:

Aunque esta guía está destinada principalmente a SharePoint Online, la mayor parte también se aplica a portales alojados en un entorno de SharePoint local.

Qué debe evitar

La siguiente lista contiene las acciones clave que no debe hacer cuando se aplica la personalización de marca en el portal.

No:

  • Reemplace la marca de la barra de conjunto de aplicaciones de Office 365.
  • Personalice la marca para sitios personales.
  • Implemente de forma predeterminada la personalización de marca mediante páginas maestras personalizadas.

Requisitos de marcas y principios generales

Normalmente, las organizaciones quieren que su portal sea único. La personalización de marca puede ayudar a aumentar la marca y los valores de empresa, y por eso una solución de personalización de marca es esencial para los portales (empresariales).

Requisitos de personalización de marca habituales al crear portales de SharePoint Online personalizados

  • Personalizar la apariencia:

    • Implementar un esquema de color personalizado.
    • Mostar un logotipo personalizado.
    • Personalizar el color de la página de inicio de sesión.
    • Cambiar el aspecto de los controles de navegación.

  • Ajustar el diseño:

    • Cambiar el diseño general de la información de las páginas.
    • Hacer que el portal sea “dinámico”.
    • Mostrar un pie de página personalizado.

  • Agregar más funciones:

    • Personalizar el comportamiento de la navegación del portal.
    • Agregar controles personalizados (elementos web) en las páginas.

En las siguientes secciones se explica cómo afrontar estos requisitos.

Principios generales

Considere los siguientes principios generales al hacer la personalización de marca de portales en un entorno de SharePoint Online:

  • El servicio SharePoint Online está mejorando constantemente. Las actualizaciones aprovisionadas al servicio pueden afectar a la estructura del Document Object Model (DOM) de páginas de fábrica y el contenido de archivos de fábrica (por ejemplo, las páginas maestras). Los desarrolladores deben tener esto en cuenta y no deben basarse en métodos de personalización no compatibles (por ejemplo, la posición de los elementos específicos en la estructura DOM de la página).

  • Evite la personalización de páginas maestras. Las actualizaciones en el servicio pueden afectar a la estructura de las páginas maestras de fábrica. Si ha implementado una página maestra personalizada al copiar el contenido de cualquier página maestra de fábrica, debe supervisar si no se actualiza esta página de fábrica y volver a implementar estos cambios en la página principal personalizada. En caso contrario, algunas funciones de SharePoint pueden comportarse de forma incorrecta cuando se usa la página principal personalizada. Por este motivo, personalizar páginas maestras lleva a riesgos y costes de mantenimiento adicionales y le recomendamos que lo evite siempre que sea posible.

  • No se admite la personalización de marca de los sitios personales (sitios de OneDrive para la Empresa). Puede aplicar combinaciones de colores personalizadas a través de la configuración de personalización de marca del nivel de inquilino de Office 365). Tenga en cuenta que esto se aplica a la experiencia moderna predeterminada de OneDrive para la Empresa.

  • Los portales de SharePoint Online deben considerarse como parte del ecosistema de Office 365 general. Por eso cada portal ahora tiene una barra de conjunto de aplicaciones de Office 365 y no se admite la personalización de la misma (vea la sección Barra de conjunto de aplicaciones de Office 365).

  • Al planear la personalización de marca y la estructura de los componentes de exploración, es importante seguir las recomendaciones que se describen en Navigation solutions for SharePoint Online portals (Soluciones de navegación para portales de SharePoint Online).

  • Cuando se amplíe la funcionalidad del portal con controles personalizados (elementos web), es importante seguir las recomendaciones de la Performance guidance for SharePoint Online portals (Guía de rendimiento para los portales de SharePoint Online).

  • Existen diferencias significativas entre los métodos de personalización de marca de sitios y páginas “clásicos” frente a los de los “modernos”. Para obtener información acerca de sitios y páginas “modernos”, vea Personalizar sitios de grupo "modernos" y Customizing "modern" site pages (Personalizar páginas de sitio “modernas”).

Personalizar la apariencia

Hay varias maneras de fábrica para personalizar el aspecto de los portales de SharePoint:

  • Los administradores pueden personalizar el tema de Office 365 para un inquilino entero.
  • Puede aplicarse un tema personalizado a un sitio específico.

Estas técnicas pueden usarse para “obtener” los colores necesarios y permitir coloración flexible en diferentes sitios de portales. Si necesita más flexibilidad, recomendamos que los clientes inicien desde una página maestra de fábrica (seattle.master) y apliquen un tema personalizado o usen la configuración de CSS personalizada de sitios (Web.AlternateCSSUrl) para enlazar los archivos CSS necesarios. Puede establecerse una imagen de logotipo personalizada mediante la propiedad Web.SiteLogoUrl.

Estas técnicas se muestran en los siguientes artículos y ejemplos Plug and Play:

Siga estas recomendaciones al desarrollar archivos CSS personalizados para SharePoint:

  • Limite el reemplazo de clases CSS de fábrica.
  • Use la propiedad Web.AlternateCssUrl para incluir los archivos CSS personalizados.
  • No reemplace la personalización de marca de la barra de conjunto de aplicaciones de Office 365 ya que ocasiona una experiencia desconectada cuando los usuarios salen del portal.

Página de inicio de sesión de Office 365

Los clientes pueden aplicar la personalización de marca de la empresa en la página de inicio de sesión de Office 365. El proceso se describe en Add your company branding to Office 365 sign-in page (Agregar la personalización de marca de su empresa a la página de inicio de sesión de Office 365).

Barra de conjunto de aplicaciones de Office 365

Las instrucciones de la Barra del conjunto de aplicaciones desde la perspectiva de Microsoft son la siguientes:

  • La Barra del conjunto de aplicaciones es un componente de navegación de nivel de inquilino que permite a los usuarios desplazarse fácilmente entre todos los servicios de Office 365.
  • La aplicación de portal no "posee" la Barra de conjunto de aplicaciones, ni debe suponer que lo hace.
  • Trate la Barra del conjunto de aplicaciones como lo haría con la barra de herramientas del explorador que no es parte de la aplicación.
  • Puede modificar o configurar la Barra de conjunto de aplicaciones, pero solo en el nivel de inquilino y solo a través de las páginas de administración de Office 365.
  • No debe usar código para modificar (mover, ocultar) la Barra de conjunto de aplicaciones dentro de la aplicación.
  • No debe volver a usar aspectos de la Barra de conjunto de aplicaciones (por ejemplo, el icono del iniciador de aplicaciones) en la aplicación.
  • Si opta por una solución “inteligente”, lo más probable es que experimente problemas inesperados en el futuro.

Ajustar el diseño

Al hablar de ajustar el diseño de los portales de SharePoint, normalmente la primera opción que consideran los desarrolladores es crear una página maestra personalizada. Aunque todavía se admiten las páginas maestras personalizadas, no se recomienda este enfoque debido a las razones mencionadas anteriormente, las páginas maestras personalizadas provocan riesgos y costes de mantenimiento a largo plazo adicionales.

Los desarrolladores deben considerar métodos alternativos que permitan ajustar el diseño de los portales de SharePoint. Entre ellos se incluyen:

  • Implementar CSS personalizado.
  • Usar diseños de página personalizados.
  • Implementar elementos de personalización de marca comunes (por ejemplo, "pie de página)" insertando scripts del lado cliente (este método se describe en la siguiente sección).

Combinar estos métodos permite conseguir el diseño del portal de SharePoint deseado sin desarrollar páginas maestras personalizadas.

Los siguientes soluciones y ejemplos PnP en GitHub muestran cómo puede lograrse esto:

Agregar funcionalidades

Insertar scripts del lado cliente en las páginas le permite personalizar el aspecto y la funcionalidad del portal. Por ejemplo, este método puede usarse para personalizar los controles de navegación, agregar encabezados y pies de página personalizados a todas las páginas del portal, o implementar otros bloques de interfaz de usuario personalizados.

Pueden usarse los siguientes métodos para insertar JavaScript:

  • Agregar una acción personalizada en el sitio o el nivel de colección de sitios. Esto puede desencadenar la ejecución de un fragmento de JavaScript en todas las páginas del sitio o la colección de sitios.

  • Agregue un elemento web de Editor de contenido o el Editor de scripts en una página con código JavaScript real o un vínculo a un archivo de JavaScript. Esto puede desencadenar la ejecución de código JavaScript en una página específica.

  • Incluya código JavaScript o un vínculo a un archivo de JavaScript en el contenido de un archivo de diseños de página. Esto puede desencadenar la ejecución de JavaScript en todas las páginas de publicación que usen este archivo de diseños de página.

Nota:

El método de acción personalizada funciona solo en sitios clásicos, incluidos los portales de publicación actuales.

Los siguientes ejemplos de PnP muestran cómo se puede realizar la inserción de JavaScript:

Nota:

Cuando se amplíe la funcionalidad del portal con JavaScript es fundamental seguir las recomendaciones descritas en la Performance guidance for SharePoint Online portals (Guía de rendimiento para los portales de SharePoint Online).

Aprovisionamiento de recursos de personalización de marca

El último paso para implementar una solución de personalización de marca es el aprovisionamiento de recursos de personalización de marca. Normalmente, esto incluye archivos de imágenes, CSS y JavaScript.

Hay varios métodos para implementar estos archivos:

  • Publicar archivos en las bibliotecas de colecciones de sitios individuales. En este caso, cada colección de sitios puede usar su propia versión de los recursos de personalización de marca. El acceso a los archivos se controla mediante mecanismos de seguridad de SharePoint estándares. Sin embargo, para actualizar archivos es necesario volver a cargarlos para cada colección de sitios.

  • Publicar archivos en una biblioteca de una colección de sitios (ubicación central). En este escenario, todas las colecciones de sitios pueden usar la última versión única de los recursos de personalización de marca. Los archivos actualizados solo deben cargarse en una ubicación. Los administradores deben asegurarse de que los usuarios de todas las colecciones de sitios tengan acceso a los archivos que se publican en la ubicación central.

  • Publicar archivos en la red CDN (aplicación web, Azure CDN u Office 365 CDN). En este caso, todas las colecciones de sitios pueden usar la última versión única de los recursos de personalización de marca. Los archivos actualizados solo deben cargarse en una ubicación. El uso de redes CDN puede mejorar el rendimiento, pero el contenido se almacena fuera de SharePoint, y por eso no se pueden proteger los recurso mediante los mecanismos de seguridad de SharePoint estándares (excepto la capacidad de red CDN privada de Office 365, que puede proteger los archivos en una red CDN).

Puede usarse el motor de aprovisionamiento PnP para implementar los recursos de personalización de marca en bibliotecas de SharePoint. Al usar la funcionalidad de Office 365 CDN, los archivos se aprovisionan automáticamente en la red CDN. Al usar otras soluciones de red CDN, se necesita un sistema de aprovisionamiento personalizado para publicar archivos en las redes CDN.

Para obtener más información acerca de las redes CDN, vea:

Vea también