Modern Branding en SharePoint
-
Upload
santiago-porras-rodriguez -
Category
Technology
-
view
161 -
download
0
Transcript of Modern Branding en SharePoint
![Page 1: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/1.jpg)
#spsmad
May 7th, 2016SharePoint Saturday Madrid
Modern Branding en SharePointSantiago Porras Rodríguez
![Page 2: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/2.jpg)
Gold sponsors
Silver sponsors
Bronze sponsors
Collaborate
![Page 3: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/3.jpg)
#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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/4.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/5.jpg)
Introducción al Branding
![Page 6: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/6.jpg)
¿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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/7.jpg)
¿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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/8.jpg)
¿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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/9.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/10.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/11.jpg)
Sitios de publicación
![Page 12: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/12.jpg)
Click to insert photo.
Elementos de diseño
![Page 13: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/13.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/14.jpg)
Administrador de diseños de SharePoint
![Page 15: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/15.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/16.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/17.jpg)
Demo Design Manager
![Page 18: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/18.jpg)
CSS y JavaScript en SharePoint
![Page 19: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/19.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/20.jpg)
CSS y JavaScript en SharePoint
![Page 21: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/21.jpg)
Enriqueciendo la visualización de resultados con display templates
![Page 22: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/22.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/23.jpg)
Demo Display Templates
![Page 24: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/24.jpg)
Composed looks & Theming
![Page 25: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/25.jpg)
![Page 26: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/26.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/27.jpg)
Creando un esquema de colores .spcolor
![Page 28: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/28.jpg)
Creando y aplicando Temas de SharePoint
![Page 29: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/29.jpg)
Sobreescribiendo estilos de página maestra
![Page 30: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/30.jpg)
![Page 31: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/31.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/32.jpg)
Sobreescribiendo estilos de página maestra
![Page 33: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/33.jpg)
What about the future…
![Page 34: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/34.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/35.jpg)
Q & A
![Page 36: Modern Branding en SharePoint](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/36.jpg)
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](https://reader036.fdocuments.in/reader036/viewer/2022081604/58715dc21a28ab8e5b8b6d29/html5/thumbnails/37.jpg)
Gold sponsors
Silver sponsors
Bronze sponsors
Collaborate