Transcript
#spsmad
May 7th, 2016SharePoint Saturday Madrid
Modern Branding en SharePointSantiago Porras Rodríguez
Gold sponsors
Silver sponsors
Bronze sponsors
Collaborate
#spsmad
Santiago Porras RodríguezCloud & Mobile Experience LeadENCAMINA
http://geeks.ms/santypr@saintwukong
MVP Windows Platform DevelopmentMVP Visual Studio and Development Technologies
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
Introducción al Branding
¿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)
¿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)
¿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)
Branding en SharePoint Llegada de HTML5 Designer Manager Nuevos conceptos y elementos Cambios en SharePoint Designer Con Sharepoint 2016 desaparece SharePoint Designer
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
Sitios de publicación
Click to insert photo.
Elementos de diseño
Igual que en SharePoint
2010Páginas
maestrasDiseños de
página
Plantillas XSLT
SharePoint 2013
Plantillas de elementos de
contenido (Display
Templates)
Administrador de diseños de 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
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
Demo Design Manager
CSS y JavaScript 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
CSS y JavaScript en SharePoint
Enriqueciendo la visualización de resultados con display templates
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?
Demo Display Templates
Composed looks & Theming
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
Creando un esquema de colores .spcolor
Creando y aplicando Temas de SharePoint
Sobreescribiendo estilos de página maestra
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
Sobreescribiendo estilos de página maestra
What about the future…
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
Q & A
http://geeks.ms/blogs/santypr @saintwukong http://blogs.encamina.com/en-tu-casa-o-en-la-mia/
MVP Windows Platform DevelopmentUX DeveloperNokia Developer Champion
Gold sponsors
Silver sponsors
Bronze sponsors
Collaborate
top related