Codemotion 2013 - Desarrollo de videojuegos dirigido por pruebas
Codemotion - Modern Branding en SharePoint desde todos los ángulos
-
Upload
santiago-porras-rodriguez -
Category
Software
-
view
618 -
download
1
Transcript of Codemotion - Modern Branding en SharePoint desde todos los ángulos
![Page 1: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/1.jpg)
Modern Branding en SharePoint Santiago Porras RodríguezMADRID · NOV 27-28 · 2015
![Page 2: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/2.jpg)
Santiago Porras
MVP Windows Platform Development
ENCAMINA
http://geeks.ms/blogs/santypr
http://blogs.encamina.com/en-tu-casa-o-en-la-mia
@saintwukong
SharePoint Developer
![Page 3: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/3.jpg)
Modern Branding en SharePoint desde todos los ángulos con HTML5 y Responsive Web Design
![Page 4: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/4.jpg)
Contenido■Introducción al Branding■Introducción los portales de publicación■El administrador de diseños de SharePoint 2013■Personalización de páginas maestras y diseños de página■CSS y JavaScript avanzado en SharePoint■Enriqueciendo los resultados de las búsquedas mediante display templates
■Uso de JSLink para mejorar las listas de SharePoint
![Page 5: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/5.jpg)
Introducción al Branding
![Page 6: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/6.jpg)
Branding en SharePoint 2013■ Llegada de HTML5■Designer Manager■ Nuevos conceptos y elementos■ Cambios en SharePoint Designer
■Con Sharepoint 2016 desaparece SharePoint Designer
![Page 7: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/7.jpg)
¿Cómo debemos aplicar Branding?■ Definir arquitectura de la información■ Definir Wireframes y Flujo de Navegación■ Diseño gráfico■
![Page 8: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/8.jpg)
Introducción a los sitios de publicación
![Page 9: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/9.jpg)
Elementos de Diseño
![Page 10: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/10.jpg)
Elementos que componen un diseñoIgual que en SharePoint
2010Páginas maestras
Diseños de página
Plantillas XSLT
SharePoint 2013
Plantillas de elementos de
contenido (Display
Templates)
![Page 11: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/11.jpg)
El administrador de diseños de SharePoint 2013
![Page 12: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/12.jpg)
Opciones del administrador de diseñosSubir 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 13: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/13.jpg)
Cómo crear un nuevo 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
![Page 14: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/14.jpg)
Usando el administrador de diseños de SharePoint 2013
![Page 15: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/15.jpg)
CSS y JavaScript avanzado en SharePoint 2013
![Page 16: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/16.jpg)
Recomendaciones■Principio de responsabilidad■Sass – CSS con superpoderes■Protección de jQuery
■Módulos/Namespaces■Plugings de jQuery
■JavaScript como “CodeBehind”
![Page 17: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/17.jpg)
CSS y JavaScript avanzado en SharePoint 2013
![Page 18: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/18.jpg)
Desplegando archivos de diseño desde Visual Studio
![Page 19: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/19.jpg)
Despliegue desde Visual Studio■Por qué usar Visual Studio■¿Recursos en Style Library o en carpeta Layouts?■Los módulos son nuestros aliados■XML para configurar nuestros recursos
![Page 20: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/20.jpg)
Demo: Desplegando archivos de diseño
![Page 21: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/21.jpg)
Enriqueciendo la visualización de resultados con display templates
![Page 22: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/22.jpg)
Display Templates■¿Por qué y para qué?
![Page 23: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/23.jpg)
Demo: Display Templates
![Page 24: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/24.jpg)
Modificando visualización de elementos con JSLink
![Page 25: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/25.jpg)
Demo: JSLink
![Page 26: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/26.jpg)
Q&A
![Page 27: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/27.jpg)
Santiago Porras
MVP Windows Platform Development
ENCAMINA
http://geeks.ms/blogs/santypr
http://blogs.encamina.com/en-tu-casa-o-en-la-mia
@saintwukong
SharePoint Developer
![Page 28: Codemotion - Modern Branding en SharePoint desde todos los ángulos](https://reader035.fdocumento.com/reader035/viewer/2022062903/58a3d0081a28ab98588b62fd/html5/thumbnails/28.jpg)