+ All Categories
Home > Technology > Modern Branding en SharePoint

Modern Branding en SharePoint

Date post: 08-Jan-2017
Category:
Upload: santiago-porras-rodriguez
View: 156 times
Download: 0 times
Share this document with a friend
37
#spsmad May 7 th , 2016 SharePoint Saturday Madrid Modern Branding en SharePoint Santiago Porras Rodríguez
Transcript
Page 1: Modern Branding en SharePoint

#spsmad

May 7th, 2016SharePoint Saturday Madrid

Modern Branding en SharePointSantiago Porras Rodríguez

Page 2: Modern Branding en SharePoint

Gold sponsors

Silver sponsors

Bronze sponsors

Collaborate

Page 3: Modern Branding en SharePoint

#spsmad

Santiago Porras RodríguezCloud & Mobile Experience LeadENCAMINA

http://geeks.ms/santypr@saintwukong

MVP Windows Platform DevelopmentMVP Visual Studio and Development Technologies

Page 4: Modern Branding en SharePoint

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

Page 5: Modern Branding en SharePoint

Introducción al Branding

Page 6: Modern Branding en SharePoint

¿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)

Page 7: Modern Branding en SharePoint

¿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)

Page 8: Modern Branding en SharePoint

¿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)

Page 9: Modern Branding en SharePoint

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

Page 10: Modern Branding en SharePoint

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

Page 11: Modern Branding en SharePoint

Sitios de publicación

Page 12: Modern Branding en SharePoint

Click to insert photo.

Elementos de diseño

Page 13: Modern Branding en SharePoint

Igual que en SharePoint

2010Páginas

maestrasDiseños de

página

Plantillas XSLT

SharePoint 2013

Plantillas de elementos de

contenido (Display

Templates)

Page 14: Modern Branding en SharePoint

Administrador de diseños de SharePoint

Page 15: Modern Branding en SharePoint

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

Page 16: Modern Branding en SharePoint

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

Page 17: Modern Branding en SharePoint

Demo Design Manager

Page 18: Modern Branding en SharePoint

CSS y JavaScript en SharePoint

Page 19: Modern Branding en SharePoint

Principio de responsabilidad Sass – CSS con superpoderes Protección de jQuery

Módulos/Namespaces Plugings de jQuery

JavaScript como “CodeBehind” Uso de TypeScript

Page 20: Modern Branding en SharePoint

CSS y JavaScript en SharePoint

Page 21: Modern Branding en SharePoint

Enriqueciendo la visualización de resultados con display templates

Page 22: Modern Branding en SharePoint

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?

Page 23: Modern Branding en SharePoint

Demo Display Templates

Page 24: Modern Branding en SharePoint

Composed looks & Theming

Page 25: Modern Branding en SharePoint
Page 26: Modern Branding en SharePoint

Composed Looks & Theming

Modificación de colores y fuentes NO INTRUSIVAProtección ante cambios del sistemaAplicación de colores y fuentes corporativos de forma rápida en los sitiosActualizaciones “sin peligro”

Aplicación en subsitios por separado si se desean temas específicos por ser una listaPoca profundidad de personalizaciónAlta complejidad para definir coloresAlta complejidad para definir fuentes

Ventajas Desventajas

Page 27: Modern Branding en SharePoint

Creando un esquema de colores .spcolor

Page 28: Modern Branding en SharePoint

Creando y aplicando Temas de SharePoint

Page 29: Modern Branding en SharePoint

Sobreescribiendo estilos de página maestra

Page 30: Modern Branding en SharePoint
Page 31: Modern Branding en SharePoint

Ventajas y desventajas de sobreescribir estilosModificación del renderizado de forma inmediataFácil actualizaciónNO INTRUSIVOProtección ante cambios del sistema

Una única hoja de estilosPoca profundidad de personalizaciónSobreescritura de estilosPosibles modificaciones forzadas por actualización del sistema

Ventajas Desventajas

Page 32: Modern Branding en SharePoint

Sobreescribiendo estilos de página maestra

Page 33: Modern Branding en SharePoint

What about the future…

Page 34: Modern Branding en SharePoint

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

Page 35: Modern Branding en SharePoint

Q & A

Page 36: Modern Branding en SharePoint

http://geeks.ms/blogs/santypr @saintwukong http://blogs.encamina.com/en-tu-casa-o-en-la-mia/

MVP Windows Platform DevelopmentUX DeveloperNokia Developer Champion

Page 37: Modern Branding en SharePoint

Gold sponsors

Silver sponsors

Bronze sponsors

Collaborate


Recommended