CSS y XSL para SharePoint

Las hojas de estilo CSS (style sheets) son “conjuntos de instrucciones y atributos gráficos” que se asocian a las páginas maestras y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, justificación del texto, posición, colores y fondos, etc. Las hojas de estilo son útiles para separar el contenido de los aspectos visuales.

SharePoint también utiliza las XSL, que son hojas de estilo basadas en el estándar XML, para “describir cómo la información contenida en un documento XML cualquiera debe ser transformada o formateada para su presentación en una página”. Éstas son empleadas, por ejemplo, en los vínculos de resumen (summary links) o en el WebPart de consulta de contenido.

SharePoint hace referencia a dos principales CSS:

• Estándares: las hojas de estilo por defecto de SharePoint que se interpretan en primer lugar. Estas hojas contienen las clases y el diseño de los webparts y páginas administrativas (core.css).
• Personalizadas: aquellas creadas específicamente para cada sitio, que son renderizadas después que las CSS por defecto.

Estos archivos CSS permiten modificar:

• Los estilos predeterminados y los personalizados.
• Imágenes para los elementos de la interfaz de usuario, como viñetas, flechas, fondos, etc.
• Formato de los textos: color, tamaño, estilo, alineación.
• Posición y tamaño de los elementos.

Más adelante hablaremos sobre la herencia de estilos.

ContentPlaceHolder: componentes de las páginas maestras

Un ContentPlaceHolder es un marcador de posición de contenido, es decir, un contenedor donde la información o contenido almacenado en las páginas será insertado. Estos ContentPlaceHolders pueden estar rodeados por código HTML y clases CSS para modificar su estilo o diseño.

Este es un ejemplo de TAG de un ContentPlaceHolder:

<asp:ContentPlaceHolder id="MyPlaceholder" runat="server" />

Existen ContentPlaceHolders indispensable para que SharePoint funcione sin los cuales el sitio simplemente no se mostrará, ya que son necesarios para soportar todas las características de colaboración y publicación. Por este motivo, si la página maestra no contiene los mínimos necesarios mostrará un error:

En caso de que sea necesario ocultar algún ContentPlaceholder determinado, es posible cambiar su propiedad visible a false, pero nunca deben eliminarse:

<asp:ContentPlaceHolder id="MyPlaceholder" runat="server" visible="false" />

Para personalizar un sitio, siempre debemos incluir todos los ContentPlaceHolders necesarios para que el masterpage funcione dentro de SharePoint. Si únicamente se necesita cambiar ligeramente la apariencia gráfica, podemos crear un tema personalizado y partir de la master básica de SharePoint, aplicando cambios de fuente, color, tamaño y estilo.

Páginas maestras de SharePoint

Las páginas maestras de ASP.NET son archivos que permiten definir los elementos comunes que cada página ASPX asociada a ellas contendrá. Estos master pages nos permiten crear un diseño homogéneo y coherente para un sitio de SharePoint, ya que en ellas se define el aspecto y estilo gráfico que tendrán todas las páginas en un archivo único, sin tener que redefinirlo en cada una de ellas. Cuando un usuario consulta una página de contenido, SharePoint la combina con la página maestra uniendo el diseño con el contenido.

Las páginas maestras determinan el comportamiento y el aspecto del sitio pues contienen el diseño y los controles (como navegación, búsqueda o herramientas), mientras que las páginas de diseño o layout (explicadas a detalle más adelante) hacen uso de las páginas maestras para mostrar los controles de contenido y elementos web.

Comúnmente, cada colección de sitios utiliza una misma página maestra para presentar una interfaz de usuario homogénea a lo largo del sitio. Sin embargo, dependiendo de las necesidades, es posible utilizar diferentes páginas maestras en un mismo sitio para distinguir jerarquías, áreas, categorías, audiencias, etc.

Normalmente, las páginas maestras contienen:

• Referencias a los CSS (Cascading Style Sheet) y XSL (Xml Style Sheet) utilizados.
• Funciones de Javascript propias de SharePoint y del menú de navegación superior.
• HTML base (como colores de fondo del cuerpo, imágenes, estilos, tablas, etc.).
• ContentPlaceHolders
• SharePointControls

Todas páginas maestras se almacenan en Galería de páginas maestras, la cual se encuentra en la ruta /_catalogs/masterpages de cada colección de sitios.

En resumen, el layout y diseño de numerosos sitios y páginas web se centra en un único archivo, separando el diseño del contenido. Por esta misma razón, modificar el estilo de una colección de sitios es más sencillo.

Temas para SharePoint

Un tema es útil para que un usuario modifique, de forma rápida y sencilla, la apariencia de un sitio en SharePoint mediante cambios en colores, fuentes e imágenes. La plataforma incluye por defecto algunos temas preinstalados que pueden aplicarse desde la configuración del sitio.

De esta forma, los usuarios con permisos de administrador o diseñador pueden cambiar las fuentes y esquema de colores de la interfaz de sus sitios mediante la aplicación de un tema, sin necesidad de modificar las hojas de estilo o las páginas maestras.

Al momento de crear un sitio nuevo, en automático, éste utiliza el tema de SharePoint predeterminado. Posteriormente, será posible cambiar el tema o apariencia desde la configuración del sitio.

El tema solamente se aplica al sitio para el cual se seleccionó. En el caso particular de los sitios de publicación, al configurar o cambiar el tema de un sitio puede decidir si heredará el tema del sitio primario, o bien, si utilizará algún otro personalizado. Además, puede decidir si el tema deberá aplicarse a todos los sitios que se encuentren por debajo en la jerarquía de sitios.

También es posible modificar los temas existentes para que los propietarios de sitios puedan aplicarlos a sus sitios. Si se modifica un tema preinstalado, se creará automáticamente un nuevo tema personalizado. Como sólo puede haber un tema personalizado por cada sitio, SharePoint sobreescribirá los cambios que se realicen al cambiar de tema.

Si fuese necesario tener varios temas personalizados, puede crearse nuevos temas. Para ello, deberán cargarse en la Galería de temas para la colección de sitios en archivos con extensión .thmx. Una vez cargados en esta galería, estarán disponibles para todos los sitios de la colección de sitios. Más adelante se explicará a detalle como crearlos.

Personalizando SharePoint

Después de una brevísima introducción a SharePoint, entraremos de lleno al tema que nos interesa: la personalización de sitios o Branding.

Cuando creamos un sitio de SharePoint basándonos en alguna de las plantillas, éste hereda la apariencia por defecto de la platilla utilizada. Si deseamos que los sitios sean más atractivos y vendedores para cautivar al usuario, debemos modificar su diseño y crearles una identidad.

Para personalizar este tipo de sitios es deseable tener conocimiento sobre:

• HTML y CSS (indispensable)
• Master pages y ASP.NET (deseable)
• Funcionamiento de SharePoint (básico)
• SharePoint Designer (si estás familiarizado con otros editores HTML, no te costará trabajo)
• Algunos conceptos básicos de SharePoint como: temas de sitio, plantillas, páginas de layout, elementos web, etc.

En la siguiente entrada hablaremos sobre estos conceptos básicos.

¿Cómo funciona SharePoint?

Si en tu trabajo como diseñador web te encuentras de repente en un proyecto con SharePoint, necesitas entender la forma en que trabaja. Para ello debes conocer la arquitectura de WSS 3.0 y el concepto de "Colaboración".

Windows SharePoint Services 3.0 provee la plataforma y características de colaboración necesarias para los productos SharePoint. La arquitectura de WSS 3.0 está constituida de la siguiente manera:

En el diagrama se muestran los servicios y características de WSS 3.0. No es tan complicado como parece, va de abajo hacia arriba: las capas inferiores proporcionan los servicios que las capas superiores consumen. Ya que como diseñadores no estamos familiarizados con algunos de estos términos, repasaremos de forma muy general cada uno de ellos.

Operating System Services.

Windows Server Operative System, en sus versiones 2003 y 2008, provee el sistema operativo y los servicios de red básicos para que los productos SharePoint funcionen.

Entre estos servicios podemos mencionar: Directorio Activo (para cuentas de usuario), SQL Services (para Bases de datos), Windows Search (para búsqueda), .NET Framework 3.0 (plataforma de desarrollo que contiene ASP.NET y Windows Workflow Foundation[1]), IIS (para servicios de internet), y SMTP Server (para correo electrónico).

WSS 3.0 Foundation Services.

Los servicios generales que la plataforma ofrece son:

Storage – Security – Management – Deployment – Site Model – Extensibility

• Storage. Ofrece un repositorio central para almacenar información con sus respectivos metadatos y en múltiples formatos. Los contenedores pueden ser listas, bibliotecas, carpetas, páginas y sitios.
• Security. Ofrece mecanismos de autorización y autenticación para garantizar el acceso a los usuarios a través de diferentes niveles de permisos.
• Management. Permite monitorear y administrar la información de forma centralizada.
• Deployment. Soporta implantación en ambientes de Intranet y Extranet, así como actualizaciones (de versión) graduales y en sitio.
• Site Model. Brinda al usuario una experiencia uniforme en cuanto a navegación y plantillas (o definiciones) de sitio, así como la posibilidad de desarrollar las propias.
• Extensibility. Es una plataforma escalable ya que es posible desarrollar aplicaciones a la medida que se integren con SharePoint.

Collaboration Service.

Podemos definir colaboración como el proceso en el cual dos o más personas trabajan en equipo para lograr los mismos objetivos. Esta colaboración implica compartir conocimientos, información y mantenerse en estrecha comunicación.

Mediante el servicio de colaboración de SharePoint se ofrece una plataforma orientada a la web para el trabajo interdisciplinario, es decir, brinda el ambiente para crear espacios de trabajo y publicar información en ellos desde Internet.

Las características de colaboración de WSS 3.0 son:

• Online Presence. Ofrece al usuario la posibilidad de comunicarse con su equipo de trabajo de forma síncrona o en tiempo real.
• Team Sites. Es una definición de sitio de trabajo para la colaboración entre empleados mediante bibliotecas, listas y páginas web.
• Wikis. Son sitios web abiertos cuyas páginas web pueden ser editadas por múltiples usuarios o colaboradores a través del navegador web, de forma sencilla.
• Blog. También llamado bitácora o diario, es un sitio web actualizado periódicamente que recopila cronológicamente artículos de uno o varios autores, con la posibilidad de que el lector publique comentarios.
• Web Parts. Son componentes modulares y reusables que pueden ser instalados en páginas de SharePoint para mostrar diferentes tipos de información, contenidos y datos de Listas y Librerías. Estos componentes pueden ser modificados o editados desde su panel de herramientas en el navegador web.
• Discussion Board. Es un medio de reunión asíncrona, donde distintas personas conversan en torno a un tema de interés común. Se realiza en grupos y está basada en un contenido de interés que origina una “discusión” o debate informal, dirigida por un moderador, con la finalidad de conocer la opinión del grupo al respecto. Tienen diferentes herramientas para la moderación, aprobación y administración de comentarios.
• Issue tracking. Ofrece las herramientas para que el equipo de seguimiento a tareas y problemas.
• Contact list. Permite almacenar datos e información sobre los miembros del equipo, de forma centralizada en una lista.
• Integration features. WSS se integra de forma natural con todos los productos de Microsoft. Los más usuales son: Microsoft Office, SharePoint Designer, Microsoft Exchange, Active Directory, entre otros.

———-

[1] .NET Framework: plataforma de desarrollo que provee y unifica servicios básicos y avanzados del sistema operativo y que provee componentes comúnmente utilizados.

SharePoint para diseñadores

Como diseñadores web tenemos la necesidad de adquirir conocimientos técnicos que creíamos nunca necesitar. ¿Por qué? Sencillo: la web es un medio multidisciplinario y trabajamos en estrecha relación con otras áreas (como desarrolladores, líderes de proyecto, arquitectos IT, etc.). Esto nos demanda ciertas habilidades y conocimientos técnicos que hacen más eficiente nuestro trabajo y facilitan la colaboración con el resto del equipo.

Las soluciones SharePoint no están exentas de esta forma de trabajo y también necesitan de nuestra participación para destacar entre la competencia. Para ello, a la funcionalidad ofrecida por la plataforma debemos agregar contenidos bien elaborados y, por supuesto, un buen diseño gráfico.

El objetivo principal del diseñador en los sitios de SharePoint consiste en, mediante la personalización (también llamada branding), convertirlos en un medio de comunicación eficiente y visualmente atractivo que cautive al público hacia el cual están dirigidos. Aunque cuenta con plantillas o temas de diseño predefinidos, SharePoint permite diseñar y aplicar temas personalizados con imágenes, colores, fuentes y formato diferentes. Es aquí donde nosotros los diseñadores nos vemos involucrados.

Para lograr una personalización efectiva en este tipo de sitios, el diseñador debe familiarizarse con el funcionamiento y estructura de SharePoint. Además, es indispensable contar con conocimientos avanzados de hojas de estilo en cascada (CSS), HTML y páginas maestras de ASP.NET.

Por último, una buena práctica es planear con mucho cuidado la personalización o diseño de un sitio y prestar especial atención a otros aspectos como la navegación, estructura del sitio, funcionalidad de la herramienta, administración del contenido y el tiempo de desarrollo.