Branding y personalización gráfica de SharePoint – Temas de Sitio

SharePoint nos ofrece un ámplio abanico de posibilidades muy últiles para la empresa como: blogs, calendarios, tareas…

Dentro de estas posibiliades también esta la de poder personalizar su apariencia gráfica para adaptarla a nuestra imagen corporativa y así tener una experiencia de usuario más acorde con lo definido en las guias de estilo de nuestra corporación.

Una de los primeros pasos que debemos dar a la hora de personalizar gráficamente nuestro SharePoint es el de crear un tema de sitio con nuestros colores y tipografías corporativos para poder utilizarlo en los sitios que estamos creando.

Crear un tema básico de SharePoint

Para crear un tema con los colores y tipografías corporativas debemos generar dos archivos que luego cargaremos en SharePoint para que este los pueda utilizar, por un lado los colores con el archivo .spcolor y por otro las tipografías con el archivo .spfont.

Estos archivos se guardan en la carpeta /_catalogs/theme/15/ a la que podemos acceder desde nuestro sitio de SharePoint o desde SharePoint Designer. Aquí es donde cargaremos los archivos nuevos que vamos a crear.

Temas.png

Crear un archivo .spcolor

Para crear un tema básico de SharePoint nos será muy util la herramienta SharePoint Color Palette (http://www.microsoft.com/en-us/download/details.aspx?id=38182).

image10
Esta herramienta nos da la posibilidad de crear un tema modificando la paleta de colores por defecto de SharePoint y adaptarla a la paleta de colores de nuestra empresa.

La forma más fácil de empezar es asignar el color principal  de la marca en el recuadro recolor. Co ello el programa recalculará todos los colores por defecto de SharePoint en base a este nuevo color para que podamos utilizalo.

SharePoint-Color-Palette.png

Podemos además hacer una previsualización de como quedan los colores con los layouts por defecto de SharePoint y hacer algun test de contraste para modificar los nuevos colores si existe algúna convinación que no se vea correctamente.

Cuando estemos contentos con el resultado creamos un archivo .spcolor que será el que nos defina los colores que vamos a ver en el tema del sitio que vamos a crear.

Crear el archivo .spfont.

Por otro lado tenemos que crear un archivo .spfont con nuestra fuente corporativa para que SharePoint lo utilice.

Para ello nos podemos valer por un lado de la herramienta online FontSquirrel (http://www.fontsquirrel.com/). Para generar todos los tipos de fuentes necesarios para que los distintos navegadores visualicen la fuente correctamente.

Una vez generados los archivos:

monserrat.png

Los cargaremos en una carpeta nueva que llamaremos fonts por ejemplo en la raiz del sitio o en la ruta que a nosostros nos convenga más.

Para llamar a estos archivos lo más facil es editar un archivo .spfont ya creado en la galeria y modificarlo con nuestras rutas.

rutas.png

Cuando las hayamos modificado ya tendremos el archivo .spfont preparado.

Una vez generados estos archivos los cargamos en la carpeta /_catalogs/theme/15/ con el nombre que queramos.

Crear el Tema de sitio.

Para crear el tema del sitio vamos a la galería de estilos compuestos Configuración del sitio/Galerías del diseñador web/Estilos compuestos.

Estilos compuestos

Aquí crearemos un nuevo item con las rutas a nuestros nuevos archivos .spcolor y .spfont quedando nuestro nuevo elemento de la siguiente manera:

nuevo-item-estilo-compuesto

Lo guardamos y por último nos queda ir a la Galería de estilos compuestos donde veremos el nuevo estilo que hemos creado para aplicarlo.

Configuración del sitio/Aspecto/Cambiar el aspecto

cambiar-aspecto

Lo aplicamos y veremos como SharePoint cambia sus colores y tipografías por las nuevas que le hemos aplicado.

Si quieres ampliar información sobre cómo aplicar un tema personalizado en SharePoint 2013 puedes acudir al siguiente link de la MSDN (https://msdn.microsoft.com/ES-ES/library/office/jj927175.aspx)

Muchas gracias.

Iconos gratuitos

300 iconos de gran calidad que podemos usar en nuestros proyectos de forma gratuita.

http://adamwhitcroft.com/batch/

Bién realizados y con variedad.

También podemos descargarnos la aplicación Metro Studio de Syncfusion si tenemos una alta necesidad de utilizar iconos.

http://www.syncfusion.com/downloads/metrostudio

Por último si nuestro trabajo con iconos es mas bien esporádico siempre podemos ir a:

http://www.iconfinder.com/

Affordance y la Fórmula 1

James J. Gibson acuñó este concepto en la década de los 70 para indicar la propiedad que se puede percibir de un objeto que nos indica qué es lo que se puede hacer con él.

Este concepto es muy intererante ya que cuanto más claro tengamos qué podemos hacer con un objeto más facil nos será utilizarlo.

Si seguimos con el ejemplo un volante nos proporciona la suficiente información sobre cómo debe ser usado y para qué sirve, aqui tenemos un ejemplo:

Volante Alfa Romeo

Este volante es de un Alfa Romeo 158, un antiguo coche de carreras y la affordance que percibimos es que se puede girar por lo que con toda seuridad sirve para dirigir la trayectoria.

Por otro lado tenemos este otro volante de un Ferrari actual.

Posiblemente el volante de un F1 sea uno de los componentes más caros del vehículo y además sirve tanto para dar información al piloto como para realizar cambios en los settings del coche además de conducir. Por lo que seguramente haya un buén puñado de ingenieros detrás de su diseño.

Yo no soy ningún experto en el tema pero sólamente mirando el volante podemos llegar a varia conclusiones.

  1. El display superior nos dará información sobre los parámetros del coche, aunque no lleguemos a comprender qué significan.
  2. Los deás elementos nos dan la información de cómo deben ser usados, este se puede apretar, este girar, este subir o bajar.

Por tanto aunque no sepamos cómo conducir un Fórmula 1 el volante nos da toda la información sobre su uso de una forma facil y directa.

Generador CSS3 y CSS Gradient

Seguimos con las utilidades via web que nos pueden servir a la hora de crear nuestros css compatibles con los distintos navegadores.

Por un lado tenemos CSS3 Generator

Funcionamiento

El funcionamiento de CSS3 Generator es muy sencillo, únicamente le defimos al generador la propiedad que queremos incluir y este nos desplegará un formulario con los campos que podemos modificar de dicha propiedad.

Al mismo tiempo tenemos una previsualización de lo que estamos modificando y una zona para poder copiar el código css resultante.

Por otro lado tenemos Ultimate CSS Gradient Generator

Esta herramienta online nos genera el código css del degradado que nosotros queramos poner en nuestra página.

Funcionamiento

Tiene un funcionamiento bastante sencillo similar al generador de gradientes de Photoshop, así que si estamos acostumbrados a trabajar con Photoshop no tendrá ningun secreto para nosotros.

Adicionalmente tiene una buena cantidad de degradados predefinidos por si no queremos perder mucho el tiempo en crearnos uno.

Responsive Design Test

Con esta herramienta online podemos testear de una forma facil cómo se va a ver nuestro sitio en los distintos dispositivos. Se trata de ScreenFly que esta dentro del paquete de herramientas de QuirkTools.

Funcionamiento

Funciona de manera muy sencilla, incluyendo la dirección del sitio que queramos testear dentro de un iframe en la página. Ofreciendonos una botonera con los dispositivos que puede simular.

Inconvenientes

Hay que tener en cuenta que el navegador es el que estemos usando nosotros ya que sólo simula la resolución y no el comportamiento real de cada dispositivo.

Aún así es una herramienta bastante útil.

Scroll vertical en Sharepoint con dispositivos móviles

A la hora de renderizar la página Sharepoint 2010 elimina el scroll de la página para calcularlo posteriormente y así posicionar bien la ribbon. Esto nos puede dar más de un quebradero de cabeza si estamos haciendo un sitio para ser visionado en dispositivos móviles ya que el scroll muchas veces será deshabilitado (Iphone) o directamente no funciona (Android).

Una forma de solucionarlo es utilizar condicionales en css y estableceremos una regla para estos dispositivos. Utilizando el css que pongo a continuación debería ser más que suficiente para corregir el problema.

@media screen and (-webkit-min-device-pixel-ratio:0) {
body {
overflow:scroll !important;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
body #s4-workspace {
overflow-x:hidden;
overflow-y:auto;
height:auto !important

}
}

Espero que os ayude.

Semáforo en París

Paseando por París me llamó la atención este semáforo:

Y es que no hace falta entrar en un museo para ver arte. Si tenemos suerte y nos fijamos bien segúramente podemos ver cosas que nuestra rutina y prisas del dia a dia no nos dejan.

Y si ya tenemos mucha suerte veremos cosas como estas:

Suerte!!

Cambiar la tipografía de una aplicación para Windows Phone

Según la documentación de diseño de las aplicaciones para Windows Phone la tipografía por defecto será Segoe WP. Pero todos sabemos que cada cliente tiene sus propias fuentes que necesita usar en sus aplicaiones para mantener el diseño corporativo.

Estos son los pasos que hay que seguir para poder utilizar la tipografía en nuestra aplicación:

    1. Abrir nuestro proyecto con blend y abrimos MainPage en la vista de diseño
    2. Hacemos clic en el elemento en el que queramos cambiar la tipografia
    3. Elegimos la tipografía que vamos a utilizar
    4. La comvertimos en un recurso, para poder utilizarla en toda la aplicación
    5. Pulsamos Ok
    6. Insertamos la fuente en el proyecto
    7. Verificamos que se ha creado el nuevo recurso en App.xaml

A partir de este momento podemos utilizar la nueva fuente como un recurso de nuestra aplicación dándole un Look&Feel acorde con la imagen corporativa de nuestro cliente.