+34 91 240 64 50 info@fiveshareit.es
SharePoint

Diseño Responsivo en SharePoint con Responsive UI

Blog SharePoint Responsive UI

Diseño Responsivo en SharePoint con Responsive UI

Introducción

De acuerdo con Wikipedia, el diseño web adaptable (también diseño web adaptativo o responsivo) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visitarla (tabletas, teléfonos inteligentes, libros electrónicos, portátiles, ordenadores, etc.).

Responsive UI 1

Esta tecnología pretende que, con un único diseño web, todo se vea correctamente en cualquier dispositivo.

No es raro encontrarse muchas veces que un cliente nos demanda estas especificaciones sobre nuestro site basado en SharePoint. En este artículo vamos a hablar sobre SharePoint UI que es una herramienta que nos permite realizar nuestro site con diseño web adaptable.

Responsive UI 2

Aunque algunos de los elementos de SharePoint son responsivos y se adaptan dependiendo de la resolución, algunas áreas de contenido y el cuadro de búsqueda no lo son. La vista de escritorio de SharePoint 2016 funciona para un tamaño de pantalla mayor que 768px y a medida que se reduce el tamaño de la pantalla no se reordenan ni se ajustan al espacio total.

 

Existen varias soluciones como emplear algún Framework como Bootstrap o Foundation, sin embargo, PnP (SharePoint Pattners & Practices) ha sacado un paquete GitHub que proporciona 3 diferentes opciones de rederizado dependiendo del tamaño de la pantalla (Escritorio, Tablet y Mobile View).

sp

PnP significa Prácticas y patrones de SharePoint y consiste en un proyecto de código abierto basado en la comunidad, en el que Microsoft y los miembros de la comunidad han creado un patrón de implementación para Office 365 y SharePoint. Como parte de la iniciativa PnP, se ha introducido el paquete Responsivo para SharePoint 2016 / Online.

El proyecto Responsive UI lo puedes encontrar en el siguiente Enlace

Esta solución contiene: scripts de PowerShell, archivos XML, hojas de estilos CSS y ficheros JS que facilitan la implementación del paquete. Este paquete se puede implementar en SharePoint2016 / Online mediante el cmdlet

 

PowerShell ‘Enable-SPOResponsiveUI

 

Esta implementación no hace uso de ninguna página maestra personalizada, en lugar de ello, los archivos JavaScript y CSS necesarios se incrustan en la página con el patrón de incrustación de JavaScript.

 

Implementación del paquete Responsivo

 

El paquete se puede implementar para una colección de sitios siguiendo 3 pasos:

  • Descargar los archivos de proyecto Github
  • Instalar PnP Powershell.
  • Ejecutar:  Enable-SPOResponsiveUIcmdlet

 

Descargar el fichero de GitHub

 

Los archivos necesarios para implementar el paquete se pueden descargar como un archivo comprimido zip desde el siguiente enlace. Esto descargaría el archivo zip llamado: ‘PnP-Tools-master‘ a la máquina local. Tras descomprimir el paquete podemos ver el contenido del mismo en la ubicación relativa.

“Solutions \ SharePoint.UI.Responsive”. SP-Responsive-UI

Los archivos CSS y JS son los archivos principales que proporcionan el comportamiento responsivo para SharePoint en función del tamaño. Puede personalizar el funcionamiento haciendo cambios en el archivo CSS y JS. Estos cambios se reflejarán en la interfaz de usuario al ejecutar el comando cmdlet Enable-SPOResponsiveUI.

Responsive UI 3

 

Instalar PnP PowerShell

Para ejecutar el cmdlet ‘Enable-SPOResponsiveUI’ debemos asegurarnos de que los comandos de SharePointPnP.PowerShell estén instalados en la máquina. Puede descargar el archivo ejecutable desde Enlace.

Haga clic en el botón Descargar y posteriormente ejecute el archivo msi. Pulse clic en “Accept the agreement” y pulse sobre la opción Install.

 

Siga los pasos hasta que complete la instalación.

sp4

 

Ejecutar el cmdlet Enable-SPOResponsiveUI

Ejecute SharePoint 2016 Management Shell con permisos de administrador.

Responsive UI 5

Ejecute los siguientes comandos en la consola de PowerShell:

.\Enable-SPResponsiveUI.ps1 -TargetSiteurlhttp://sharepoint  2016:51000/

TargetSiteurl – Colección de Sitio donde la solución va a ser implementada.

Al ejecutarlo le volverá a pedir las credenciales para autenticarse. Seleccione Usuario y contraseña y pulse OK. Al terminar el proceso nuestra solución responsiva estará activa en la Colección de Sitio que le hemos indicado en el paso anterior.

Responsive UI 6

Una vez que el mensaje de éxito de activación aparece en la pantalla, podemos ir a la biblioteca de estilos de la colección de sitios. Aquí podemos ver una nueva carpeta con el nombre ‘SP.Responsive.UI’ que se ha añadido. Esta carpeta contiene los archivos CSS y JS de la librería.

style library

 

Advertencia

Tenemos que asegurarnos de que la característica nativa de “Navegador móvil” no esté habilitada en la colección de sitios. Por lo tanto, cuando se ejecuta la interfaz de usuario de respuesta que habilita la secuencia de comandos de PowerShell (Enable-SPOResponsiveUI), se inhabilitará la función “Vista de navegador móvil” en el sitio raíz de la colección de sitios.

 

Resultado: Responsive UI para SharePoint

Cuando la resolución es entre 481px y 768px (Formato de vista Tablet), la navegación a la izquierda se convierte en un menú de hamburguesa colapsado y la barra de búsqueda se reajusta para acomodarse dentro de la ventana gráfica.

Al expandir el menú de navegación izquierda de la hamburguesa, muestra todos los elementos de navegación.

Responsive UI 7

sp9

 

 

 

 

 

 

 

 

 

Cuando la resolución se reduce una vez más a la vista móvil, donde el tamaño de la ventana es inferior a 480 píxeles, el menú de hamburguesas y el cuadro de búsqueda se realzan de nuevo con respecto al puerto de vista.

Al pulsar sobre el menú hamburguesa nos aparece un menú con los elementos de inicio rápido como una lista desplegable vertical

sp10sp11

 

 

 

 

 

 

 

 

 

Haciendo clic en ‘Documentos’ nos llevará a dentro de la biblioteca de documentos. El contenido y las áreas de la cinta son también sensibles dentro de las listas / librerías.

sp12

 

 

 

 

 

 

 

 

 

La página Contenido del sitio, aquí también se ven elementos afectados.

sp13

 

 

 

 

 

 

 

 

 

La página de Contenidos del sitio también ha heredado las propiedades que lo hacen responsivo haciendo que la colección de sitios completa responda con respecto a la resolución.

sp14

Desactivar Responsive UI

Para desactivar debemos ejecutar el siguiente comando desde la consola de PowerShell.

Disable-SPOResponsiveUI

sp15

 

Por Enrique Román Peláez, Analista Programador de SharePoint en MVP Cluster

No hay comentarios

Dejar un comentario

Comentario
Nombre
Email
Sitio Web