Muestre su estilo con los temas de SharePoint
Artículo original publicado el martes, 30 de octubre de 2012
Lionel Robinson es un Administrador de programas del equipo de ingenieros de SharePoint especializado en la experiencia del usuario.
Con los temas de SharePoint 2013 resulta mucho más sencillo cambiar por completo la apariencia de un sitio para hacerlo propio. Y dicho esto, y teniendo en cuenta que la nueva apariencia de los sitios de SharePoint es fantástica, ¿por qué querría cambiarla? Considere este ejemplo personal:
Tras el nacimiento de los gemelos, yo no encajaba (literalmente) en el asiento del conductor de mi coche con las dos silletas instaladas. E incluso en el asiento del copiloto y sentado en diagonal, las rodillas me golpeaban en el salpicadero. Era el momento de cambiar a un coche más grande. Mi mujer y yo crecimos viajando en furgonetas y nos emocionaba la idea de encontrar la marca, modelo y color exacto que buscábamos. Además, en ellas cabía toda la familia y quedaba mucho espacio de carga libre. Era la solución perfecta.
Aunque posiblemente solo fuera una jugada psicológica, desde ese día parecía que todos los conductores llevaban el mismo coche: nuestra Honda Odyssey en azul claro metalizado. Y en más de una ocasión me sorprendí a mí mismo en un aparcamiento, pulsando el botón de desbloqueo de la llave de control remoto, solo para confirmar que mi coche se encontraba realmente a dos pasillos de distancia.
¿Qué opciones tenemos si queremos que nuestro coche sea un poco más nuestro? La opción económica es colocar un adhesivo en el parachoques o algún otro distintivo en la parte trasera. Al otro lado del espectro, podemos pagarle a un profesional para que nos tunee el coche conforme a nuestros deseos (o si nos envalentonamos, incluso podemos hacerlo nosotros mismos).
Algunos clientes nos han comentado este mismo problema con sus sitios de SharePoint. Si todos los usuarios usan las mismas plantillas, su sitio puede perderse entre una inmensidad de sitios extraordinariamente parecidos. Puede asumir esta uniformidad y esperar que los sitios se distingan entre sí con diferencias menores (como el adhesivo para el parachoques), o puede personalizar su sitio con el código HTML y las hojas CSS, un trabajo que puede resultar laborioso y requerir mucho tiempo.
Estos son los problemas que hemos pretendido solucionar con los nuevos temas de SharePoint, una nueva experiencia que permite personalizar un sitio en cuestión de minutos si se actúa en cuatro niveles básicos: colores, diseño del sitio, fuentes e imagen de fondo. Modifique estos elementos y aportará a su sitio una apariencia realmente exclusiva.
Tutorial resumido
- En "Comenzar un sitio”, haga clic en el mosaico "¿Cuál es su estilo?" (si los mosaicos están ocultos, haga clic en "Cambiar el aspecto" en el menú de configuración, o busque "Cambiar el aspecto" en Configuración del sitio, bajo el encabezado "Aspecto").
- La primera página muestra algunos puntos de partida que se han recopilado ahí para mostrarle la variedad de opciones que puede aplicar a la apariencia de un sitio. Para comenzar, seleccione cualquiera de estas opciones.
- Y ahora empieza lo mejor. Puede modificar cualquiera de los cuatro niveles que hemos mencionado anteriormente (fondo, diseño, colores y fuentes), y obtener una vista previa inmediata de los cambios. Arrastre la imagen de fondo al rectángulo de la esquina superior izquierda, seleccione la paleta de colores que desee aplicar, el diseño de sitio que más le guste y la combinación de fuentes que mejor refleje su personalidad.
- Tras seleccionar la combinación de opciones perfecta, haga clic en "Probar" (en la esquina superior derecha) para obtener una vista previa del sitio.
- Y entonces se produce la magia. Realizamos una copia de las hojas CSS de su sitio (los archivos que definen la apariencia y el formato) y los modificamos con las imágenes y los colores nuevos. Usted solo tiene que ver cómo queda el sitio y decidir si desea mantener esta nueva apariencia o seguir probando.
¿Tiene en mente alguna fuente o color en particular?
Hemos incluido un conjunto de paletas de colores y fuentes que a nosotros nos gustan mucho, pero usted siempre puede agregar las suyas propias. Solo tiene que ir a su editor de texto preferido. A partir de aquí, nos ponemos técnicos (y si ya conoce los temas de SharePoint 2010, cuenta con ventaja). La principal diferencia es que ya no se usa el formato de archivo THMX. Hemos creado una serie de nuevos formatos XML muy simples para describir las opciones de los temas: los archivos SPColor describen la paleta de colores, y los archivos SPFont la combinación de colores. La forma más sencilla de crear sus propias paletas y combinaciones de fuentes es partir de los elementos predeterminados del sitio de grupo. Navegue hasta el sitio raíz de la colección de sitios y, en el menú Configuración, haga clic en "Configuración del sitio" y en "Galería de temas". Las paletas de colores y las combinaciones de esquemas se encuentran en la carpeta "15".
Paletas de colores
Cada archivo SPColor contiene código XML simple que define el valor de los colores (en el sistema hexadecimal) para las distintas franjas de color disponibles. Si ya sabe qué franja de color desea cambiar, solo tiene que escribir el nuevo valor y guardar una copia del archivo en la misma carpeta de la galería de temas (si la funcionalidad de publicación o control de versiones está activada, asegúrese de proteger y publicar el archivo). La nueva paleta aparecerá en el Selector de colores disponible para los temas (vea el paso 3 que hemos descrito anteriormente).
Aquí tiene un fragmento de un archivo SPColor. También se incorpora a esta versión la capacidad de especificar valores de opacidad con el color. Para ello, use un valor hexadecimal de 8 dígitos, donde los dos primeros representarán la opacidad y los 6 dígitos restantes los valores tradicionales de rojo, verde y azul.
<?xml version="1.0" encoding="utf-8"?>
<s:colorPalette isInverted="false" previewSlot1="BackgroundOverlay" previewSlot2="BodyText" previewSlot3="AccentText" xmlns:s="https://schemas.microsoft.com/sharepoint/">
<s:color name="BodyText" value="444444" />
<s:color name="SubtleBodyText" value="777777" />
<s:color name="StrongBodyText" value="262626" />
<s:color name="DisabledText" value="B1B1B1" />
<s:color name="SiteTitle" value="262626" />
<s:color name="WebPartHeading" value="444444" />
<s:color name="ErrorText" value="BF0000" />
<s:color name="AccentText" value="0072C6" />
<s:color name="SearchURL" value="338200" />
<s:color name="Hyperlink" value="0072C6" />
<s:color name="BackgroundOverlay" value="D8FFFFFF" />
...
</s:colorPalette>
Combinaciones de colores
Las fuentes pueden agregar mucha personalidad a un sitio. Uno de los logros más interesantes de los temas de SharePoint es la compatibilidad con las fuentes web. Antes de esta característica, había que elegir entre las 8 o 10 mismas fuentes de siempre (las que se encuentran instaladas de forma predeterminada en la mayoría de dispositivos, como Arial, Times New Roman y Georgia). Las fuentes web permiten seleccionar entre la enorme variedad de fuentes disponibles en Internet. Los exploradores web descargan los archivos necesarios junto con el resto de la página.
De forma similar al archivo SPColor de una paleta de colores, el archivo SPFont define la fuente que se usa para las distintas franjas de fuentes disponibles. El modo más sencillo de personalizar una combinación de fuentes es partir de los elementos disponibles y modificarlos según convenga. SharePoint admite diversos lenguajes y scripts, y también varios temas de fuentes. Para cada franja de fuentes, puede definir la fuente que debe usarse en los distintos scripts y, con las fuentes web seguras, solo tiene que incluir el nombre en el atributo de tipo de letra para cada franja de fuentes. Si desea especificar una fuente web, escriba la dirección URL de los archivos de fuentes web en cuatro formatos de fuente (para obtener compatibilidad entre los distintos exploradores). En el Selector de fuentes, se representarán los nombres de las fuentes con dos imágenes en miniatura, una pequeña y otra más grande (vea el paso 3 que hemos descrito anteriormente).
<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="Impact" previewSlot1="title" previewSlot2="body" xmlns:s="https://schemas.microsoft.com/sharepoint/">
<s:fontSlots>
<s:fontSlot name="title">
<s:latin typeface="Impact"
eotsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.eot"
woffsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.woff"
ttfsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.ttf"
svgsrc="https://blogs.msdn.com/_layouts/15/fonts/Impact.svg"
largeimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactLarge.png"
smallimgsrc="https://blogs.msdn.com/_layouts/15/fonts/ImpactSmall.png" />
...
<s:font script="Arab" typeface="Segoe UI Light" />
<s:font script="Deva" typeface="Nirmala UI" />
<s:font script="Grek" typeface="Segoe UI Light" />
...
</s:fontSlot>
<s:fontSlot name="navigation">
<s:latin typeface="Segoe UI" />
...
<s:font script="Arab" typeface="Segoe UI" />
<s:font script="Deva" typeface="Nirmala UI" />
<s:font script="Grek" typeface="Segoe UI" />
...
</s:fontSlot>
...
</s:fontSlots>
</s:fontScheme>
Apariencias compuestas
Las apariencias compuestas son los puntos de partida que comentábamos en el primer paso para trabajar con los temas. Agregue nuevas apariencias compuestas para personalizar paletas de colores y combinaciones de fuentes, ya que suponen una herramienta excepcional para guardar una serie de diseños que podrá aplicar más adelante. Para obtener acceso a la lista de apariencias compuestas, vaya a "Galerías del diseñador web", en "Configuración del sitio". Puede administrar tanto el conjunto de apariencias compuestas existentes como las nuevas que decida agregar. Para agregar una apariencia compuesta, solo tiene que agregar un nuevo elemento de lista y asignar un nombre, un título, las direcciones URL necesarias para la página máster, el archivo SPColor, la imagen de fondo (opcional) y el archivo SPFont (opcional). A continuación, se agregará la vista previa de la nueva apariencia compuesta a la página "Cambiar el aspecto" como punto de partida.
Atrévase a probar. Revista sus sitios con una apariencia fantástica y realmente exclusiva, que muestre la personalidad de su equipo. Ojalá yo pudiera hacerlo con mi furgoneta...
Esta entrada de blog es una traducción. Puede consultar el artículo original en Show Off Your Style with SharePoint Theming.