El documento presenta una charla sobre branding moderno en SharePoint. Explica conceptos como branding, portales de publicación y el administrador de diseños de SharePoint. Detalla formas de personalizar páginas maestras, diseños de página, CSS, JavaScript y plantillas de visualización en SharePoint. También cubre temas y lookups compuestos. El orador comparte su experiencia aplicando branding en SharePoint y sugiere tendencias futuras.

1. May 7th, 2016
SharePoint Saturday
Madrid
Modern Branding en SharePoint
Santiago Porras Rodríguez

2. Gold sponsors
Silver sponsors
Bronze sponsors
Collaborate

3. Santiago Porras Rodríguez
Cloud & Mobile Experience Lead
ENCAMINA
http://geeks.ms/santypr
@saintwukong
MVP Windows Platform Development
MVP Visual Studio and Development Technologies

4. Contenidos
 Introducción al Branding
 Introducción los portales de publicación
 El administrador de diseños de SharePoint
 Personalización de páginas maestras y diseños de página
 CSS y JavaScript moderno en SharePoint
 Enriqueciendo los resultados de las búsquedas mediante display
templates
 Themes & Composed Lookups
 Inyectando CSS

6. ¿Qué es el Branding?
Branding es un anglicismo empleado en mercadotecnia que hace
referencia al proceso de hacer y construir una marca (en inglés, brand
equity) mediante la administración estratégica del conjunto total de
activos vinculados en forma directa o indirecta al nombre y/o símbolo
(logotipo) que identifican a la marca influyendo en el valor de la marca,
tanto para el cliente como para la empresa propietaria de la marca.
(Wikipedia)

7. ¿Qué es el Branding?
Branding es una palabra que está de moda en Internet, aunque su
utilización no siempre es todo lo adecuada que debiera. El significado
real de branding es crear imagen de marca, o dicho de otra forma,
presentar un único mensaje sobre la empresa, sus productos o sus
servicios.
(mercadeoglobal.com)

8. ¿Qué es el Branding?
El branding corporativo consiste en la construcción de una marca. ¿Qué es
una marca? Una marca no es ni más ni menos que la identidad reconocible
de una empresa, identidad que se transfiere a todos sus productos. Más que
una identidad visual, con un logo corporativo, lo que se busca al construir una
marca es dotar de cierta personalidad a la marca (aunque obviamente la
identidad visual es parte importante del branding). Por ejemplo, Smart, la
conocida empresa de minicoches, dado su público objetivo, intenta
posicionarse como como una marca joven, moderna y urbana. Eso lo
consiguen, además de con el diseño de sus coches, realizando todo tipo de
acciones de marketing, como la financiación de festivales de música pop. Una
marca reconocible y bien definida ayuda mucho a posicionarte en tu nicho de
consumidores
(mercadeoglobal.com)

9. Branding en SharePoint
 Llegada de HTML5
 Designer Manager
 Nuevos conceptos y elementos
 Cambios en SharePoint Designer
 Con Sharepoint 2016 desaparece SharePoint Designer

10. Cómo aplicar Branding en SharePoint
 Definir arquitectura de la información
 Definir Wireframes y Flujo de Navegación
 Diseño gráfico
 Aplicar usando SharePoint Designer
 Aplicar usando Design Manager
 Aplicar usando Visual Studio
 Inyectar estilos en la página maestra

13. Igual que en
SharePoint 2010
Páginas maestras
Diseños de página
Plantillas XSLT
SharePoint 2013
Plantillas de
elementos de
contenido
(Display
Templates)

15. Subir diseños
Administrar Páginas Maestras
Administrar Diseños de Página
Administrar Plantillas de elementos de contenido
Administrar canales para dispositivos
Publicar y aplicar diseños
Crear paquetes de diseño

16.  Desde cualquier IDE
 SharePoint Designer 2013 sin Vista Diseño
 Identificar elementos pertenecientes a la página maestra
 Convertir diseño a HTML
 Subir al catálogo de diseño de SharePoint 2013
 Crear página maestra
 Crear diseños de página
 Crear plantillas XSLT
 Crear plantillas de elementos de contenido

19.  Principio de responsabilidad
 Sass – CSS con superpoderes
 Protección de jQuery
 Módulos/Namespaces
 Plugings de jQuery
 JavaScript como “CodeBehind”
 Uso de TypeScript

22. Las Display Templates son plantillas que se usan en Web Parts que hacen
uso de las búsquedas como el Content Search Web Part (CSWP) para
modificar/personalizar el renderizado de los resultados de la búsqueda.
¿Qué son y para qué se usan?

26. Composed Looks & Theming
Modificación de colores y fuentes NO
INTRUSIVA
Protección ante cambios del sistema
Aplicación de colores y fuentes corporativos
de forma rápida en los sitios
Actualizaciones “sin peligro”
Aplicación en subsitios por separado si se
desean temas específicos por ser una lista
Poca profundidad de personalización
Alta complejidad para definir colores
Alta complejidad para definir fuentes
Ventajas Desventajas

27. Creando un esquema de colores .spcolor

31. Ventajas y desventajas de sobreescribir estilos
Modificación del renderizado de forma
inmediata
Fácil actualización
NO INTRUSIVO
Protección ante cambios del sistema
Una única hoja de estilos
Poca profundidad de personalización
Sobreescritura de estilos
Posibles modificaciones forzadas por
actualización del sistema
Ventajas Desventajas

34. Qué ocurrirá en el futuro
 Microsoft ya está introduciendo cambios en los sitios de SharePoint
Online
 Menos posibilidades de personalización
 Mayor riesgo de que una actualización impida que nuestros sitios se
ejecuten correctamente

35. Q & A

36. http://geeks.ms/blogs/santypr
@saintwukong
http://blogs.encamina.com/en-tu-casa-o-en-la-mia/
MVP Windows Platform Development
UX Developer
Nokia Developer Champion

37. Gold sponsors
Silver sponsors
Bronze sponsors
Collaborate