Branding en SharePoint 2013 aplicando HTML5 y Responsive Design

3,500 views

Published on

Teresa Cebrián y yo, mostramos cómo debemos afrontar el reto de aplicar "Branding" en sitios de SharePoint 2013, haciéndolo además mediante el uso de HTML5 y responsive design.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,500
On SlideShare
0
From Embeds
0
Number of Embeds
92
Actions
Shares
0
Downloads
97
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Branding en SharePoint 2013 aplicando HTML5 y Responsive Design

  1. 1. Branding en SharePoint 2013: Aplicando HTML5 y Responsive Design
  2. 2. Teresa Cebrián UX Designer Encamina http://blogs.encamina.com/filling-the-gap @teresacebrian
  3. 3. Santiago Porras Rodríguez UX Designer SolidQ http://geeks.ms/blogs/santypr @saintwukong
  4. 4. Branding en SharePoint 2013: Aplicando HTML5 y Responsive Design
  5. 5. Introducción
  6. 6. Branding en SharePoint 2013 • • • • Llegada de HTML5 Designer Manager Nuevos conceptos y elementos Cambios en SharePoint Designer
  7. 7. ¡Voy a hacer una web! ¿Por dónde empiezo?
  8. 8. ¿Por dónde empiezo? • Arquitectura de la información • Wireframes y Flujo de Navegación • Diseño Gráfico
  9. 9. 1º Arquitectura de la Información • Hablar con el equipo de trabajo ¿qué necesitamos? • Propuesta de AI • Acuerdo de AI
  10. 10. 2º Wireframes y flujo de navegación • Estructura y esqueleto de los elementos que componen la página • Análisis de la navegación entre páginas
  11. 11. 3º Diseño Gráfico: Efectos especiales
  12. 12. Elementos de Diseño
  13. 13. Elementos que componen un diseño Igual que en SharePoint 2010 Páginas maestras Diseños de página Plantillas XSLT SharePoint 2013 Plantillas de elementos de contenido (Display Templates)
  14. 14. Design Manager
  15. 15. Opciones del administrador de diseños 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. 16. Cómo crear un nuevo diseño Qué necesito saber para empezar a aplicar Branding a mi sitio de SharePoint 2013
  17. 17. 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
  18. 18. Empezando Elección del IDE Identificación de elementos del diseño Convertir a HTML
  19. 19. Elección del IDE • En SharePoint 2013 podemos elegir el IDE con el que mejor nos sintamos. WebMatrix, DreamWeaver, SharePoint Designer o incluso Visual Studio son buenas opciones
  20. 20. Identificación de los elementos del diseño • Masterpage • Page Layout • Elementos de contenido (Web parts, contenido, imágenes, …)
  21. 21. Identificación de los elementos de diseño Masterpage Page Layout
  22. 22. Páginas maestras Administración de las páginas maestras
  23. 23. Pasos para crear una masterpage • Convertir el diseño con el Design Manager de SharePoint 2013 • Editar masterpage • Añadir Fragmentos de código
  24. 24. Demo
  25. 25. Diseños de página Administración de los diseños de página
  26. 26. Pasos para crear un diseño de página • Crear el archivo HTML con diseño de página • Añadir Fragmentos de código • Aplicar estilos CSS
  27. 27. Demo
  28. 28. Elementos de contenido Qué son y cómo crearlas
  29. 29. Elementos de contenido • Cómo crearlas • Establecer parámetros • Aplicar estilos CSS • Uso de JavaScript
  30. 30. Demo
  31. 31. Responsive Web Design
  32. 32. Frameworks de Responsive Design Twitter bootstrap Foundation Skeleton HTML Boilerplate … http://designinstruct.com/roundups/html5-frameworks/
  33. 33. MediaQueries Qué son Cómo usarlas
  34. 34. Tipos de diseño Identificación de los diseños por dispositivo
  35. 35. Tipos de diseño • Identificación de los distintos dispositivos • Diseño del sitio en función del dispositivo • Diseño del sitio en función del ancho disponible en cada dispositivo
  36. 36. Demo
  37. 37. Q&A
  38. 38. GRACIAS POR SU ATENCIÓN Porras Santiago Teresa Cebrián Peña Rodríguez UI Designer UX Developer Encamina Nokia Developer Champion http://geeks.ms/blogs/santypr @saintwukong SolidQ Cloud Developer http://geeks.ms/blogs/santypr @saintwukong

×