Orientação sobre Identidade Visual para os portais do SharePoint Online

  • Artigo

Aplicar uma identidade visual personalizada em um portal é um recurso crítico e este artigo fornece uma visão geral das opções de identidade visual e as práticas recomendadas de identidade visual.

Observação

Embora essa orientação vise principalmente o SharePoint Online, a maior parte também se aplica a portais hospedados em um ambiente local do SharePoint.

O que não fazer

A lista a seguir contém pontos principais do que não fazer quando aplicar a identidade visual no seu portal.

Não:

  • Substitua a identidade visual na barra do Office 365 Suite.
  • Personalize a identidade visual de sites pessoais.
  • Implemente, por padrão, sua identidade visual personalizada usando páginas mestras personalizadas.

Requisitos de identidade visual e princípios gerais

As organizações normalmente desejam que seu portal seja exclusivo. A identidade visual personalizada pode ajudar a promover a marca corporativa e os valores e é por isso que uma solução de identidade visual personalizada é essencial para (empresas) portais.

Requisitos de identidade visual típicos ao criar portais personalizados do SharePoint Online

  • Personalize a aparência:

    • Implemente um esquema de cores personalizado.
    • Mostre um logotipo personalizado.
    • Personalize a aparência da página de entrada.
    • Altere a aparência dos controles de navegação.

  • Ajuste o layout:

    • Altere o layout geral de informações em páginas.
    • Torne o portal "responsivo."
    • Mostre um rodapé personalizado.

  • Adicione mais funcionalidade:

    • Personalize o comportamento da navegação do portal.
    • Adicione controles personalizados (web parts) nas páginas.

Nas seções a seguir, vamos abordar como resolver esses requisitos.

Princípios gerais

Considere os seguintes princípios gerais ao criar a identidade visual de portais em um ambiente do SharePoint Online:

  • O serviço SharePoint Online está melhorando constantemente. Atualizações provisionadas para o serviço podem afetar a estrutura do Modelo do Documento do Objeto (DOM) de páginas prontas para uso e o conteúdo de arquivos prontos para uso (por exemplo, páginas mestras). Os desenvolvedores devem ter isto em mente e não devem confiar no abordagens de personalização sem suporte (por exemplo, a posição dos elementos específicos na estrutura DOM da página).

  • Evitar a personalização de páginas mestras. Atualizações no serviço podem afetar a estrutura de páginas mestras prontas para o uso. Se você tiver implementado uma página mestra personalizada copiando o conteúdo de qualquer página mestra pronta para uso, você deve monitorar se essa página mestra pronta para uso não foi atualizada e reimplementou essas alterações em sua página mestra. Caso contrário, algumas funcionalidades do SharePoint podem se comportar incorretamente quando a sua página mestra estiver em uso. Por isso personalizar páginas mestras pode levar a riscos adicionais e custos com manutenção, recomendamos evitá-la sempre que possível.

  • Não há suporte para a criação de identidade de Visual personalizada de sites pessoais (Site OneDrive for Business). Você pode aplicar esquemas de cores personalizadas por meio das configurações de identidade visual a nível de locatário do Office 365). Observe que isso se aplica à experiência moderna padrão do OneDrive for Business.

  • Portais do SharePoint Online devem ser considerados como parte do ecossistema geral do Office 365. É por isso que cada portal agora tem uma barra do Pacote do Office 365 e a personalização não é suportada (confira a seção Barra do Pacote do Office 365).

  • Ao planejar a criação da identidade visual e a estrutura dos componentes de navegação, é importante seguir as recomendações descritas em Soluções de navegação para portais do SharePoint Online.

  • Aoestender a funcionalidade do portal por meio de controles personalizados (web parts), é importante seguir as recomendações em Diretrizes de desempenho para os portais do SharePoint Online.

  • Há diferenças significativas entre as abordagens de identidade visual em sites e páginas "clássicos" vs "modernos". Para mais informações sobre sites e páginas "modernos", confira Personalizando sites de equipe "modernos" e Personalizando páginas de site "modernas".

Personalizar a aparência

Há várias maneiras de personalizar a aparência dos portais do SharePoint:

  • Os administradores podem personalizar o tema do Office 365 para um locatário inteiro.
  • Um tema personalizado pode ser aplicado a um site específico.

Estas técnicas podem ser usadas para "obter" as cores necessárias e permitir a flexibilização das cores em diferentes sites do portal. Se for necessário mais flexibilidade, recomendamos que os clientes iniciem de uma página mestra pronta para uso (seattle.master) e apliquem um tema personalizado e/ou usem as configurações de CSS personalizadas do site (Web.AlternateCSSUrl) para conectar os arquivos CSS necessários. Pode ser definida uma imagem de logotipo personalizado usando a propriedade Web.SiteLogoUrl.

Estas técnicas são mostradas nos seguintes artigos e exemplos PnP:

Siga essas recomendações ao desenvolver arquivos CSS personalizados para o SharePoint:

  • Limite a substituição de classes CSS prontas para usos.
  • Use a propriedade Web.AlternateCssUrl para incluir arquivos CSS personalizados.
  • Não substitua a identidade visual da Barra do Pacote do Office 365 porque isso resultará em uma experiência desconectada quando os usuários saiam do portal.

Página de entrada do Office 365

Os clientes podem aplicar a identidade visual da empresa na página de entrada do Office 365. O processo descrito em Adicionar identidade visual da empresa na página de entrada do Office 365.

Barra do Pacote do Office 365

As diretrizes para a barra do Suite sob a perspectiva da Microsoft são as seguintes:

  • A Barra do Pacote é um componente de navegação de nível do locatário que permite que os usuários se movam facilmente entre todos os serviços do Office 365.
  • O aplicativo do portal não é o "proprietário" da Barra do Pacote nem deve tentar fazê-lo.
  • Trate a Barra do Pacote como a barra de ferramentas do navegador em que está e não como parte do seu aplicativo.
  • Você pode modificar/configurar a Barra do Pacote, mas apenas no nível do locatário e por meio das páginas do Administrador do Office 365.
  • Você não deve usar o código para alterar (mover, ocultar) a Barra do Pacote no seu aplicativo.
  • Você não deve reutilizar aspectos da Barra do Pacote (por exemplo, o ícone do Inicializador de Aplicativos) em seu aplicativo.
  • Se preferir ser "esperto", você provavelmente enfrentará problemas inesperados no futuro.

Ajustar o layout

Ao discutir sobre os ajustes do layout dos portais do SharePoint, normalmente a primeira opção considerada pelos desenvolvedores é criar uma página mestra personalizada. Embora ainda haja suporte para páginas mestras personalizadas, não recomendamos essa abordagem pelos motivos mencionado anteriormente, páginas mestras personalizadas trazem riscos adicionais e custos de manutenção a longo prazo.

Os desenvolvedores devem consideram abordagens alternativas que permitam ajustes no layout dos portais do SharePoint. Entre eles:

  • Implementar CSS personalizada.
  • Usar layouts de página personalizados.
  • Implementar elementos comuns de identidade visual (como "rodapé") ao inserir scripts do cliente (esta abordagem é discutida na próxima seção).

Combinar estas abordagens permite fazer o layout do portal do SharePoint desejado ser o desenvolvimento de páginas mestras personalizadas.

Os seguintes exemplos PnP e as soluções no GitHub demonstram como fazer isso:

Adicionar funcionalidades

Inserir scripts de clientes em páginas pode permitir que você personalize a aparência e a funcionalidade do portal. Por exemplo, esta abordagem pode ser usada para personalizar os controles de navegação, para adicionar cabeçalhos e rodapés personalizados a todas as páginas do portal ou implementar outros blocos de interface do usuário personalizados.

Os procedimentos a seguir podem ser usados para inserção de JavaScript:

  • Adicione uma ação personalizada no nível do conjunto de sites ou site. Isso pode iniciar a execução de uma parte do JavaScript em todas as páginas no site ou conjunto de sites.

  • Adicione uma web part de Editor de conteúdo ou Editor de scripts em uma página usando o código JavaScript atual ou um link para um arquivo JavaScript. Isso pode iniciar a execução do código JavaScript em uma página específica.

  • Inclua um código JavaScript ou um link para um arquivo JavaScript no conteúdo de um arquivo de layouts de página. Isso pode iniciar a execução de JavaScript em todas as páginas de publicação que usam esse arquivo de layouts de página.

Observação

A abordagem de ação personalizada funciona apenas em sites "clássicos", incluindo os portais de publicação atuais.

Os seguintes exemplos PnP demonstram como a inserção JavaScript pode ser obtida:

Observação

Ao estender a funcionalidade do portal usando o JavaScript, é fundamental seguir as recomendações descritas em Diretrizes de desempenho para os portais do SharePoint Online.

Provisionar ativos de identidade visual

A etapa final na implementação de uma solução de identidade visual é o provisionamento dos ativos de identidade visual. Geralmente, isso inclui imagens, CSS e arquivos JavaScript.

Há várias abordagem sobre como esses arquivos podem ser implantados:

  • Publicar arquivos em bibliotecas em conjuntos de sites individuais. Nesse caso, cada conjunto de sites pode usar sua própria versão de ativos de identidade visual. O acesso aos arquivos é controlado por mecanismos de segurança padrão do SharePoint. No entanto, atualizar arquivos requer que você os recarregue para cada conjunto de sites.

  • Publicar arquivos em uma biblioteca em um conjunto de sites (localização central). Nesse cenário, todos os conjuntos de sites podem usar a versão mais recente única de ativos de identidade visual. Arquivos atualizados devem ser carregados para apenas um único local. Os administradores devem garantir que os usuários de todos os conjuntos de sites tenham acesso aos arquivos publicados na localização central.

  • Publicar arquivos (aplicativo web, Azure CDN ou Office 365 CDN) . Nesse caso, todos os conjuntos de sites podem usar a versão mais recente única dos ativos de identidade visual. Arquivos atualizados devem ser carregados para apenas um único local. Usar CDNs pode melhorar o desempenho, no entanto, o conteúdo está armazenado fora do SharePoint e por isso os ativos não podem ser protegidos usando-se os mecanismos de segurança padrão do SharePoint (com exceção do recurso CDN privado do Office 365, que pode proteger os arquivos em um CDN).

O Mecanismo de provisionamento PnP pode ser usado para implantar os ativos da identidade visual nas bibliotecas do SharePoint. Ao usar o recurso do CDN do Office 365, os arquivos são provisionados automaticamente no CDN. Ao usar soluções CDN alternativas, uma abordagem de provisionamento personalizada é necessária para publicar arquivos CDNs.

Para mais informações sobre o CDNs, confira:

Confira também