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.

1. Branding en SharePoint 2013:
Aplicando HTML5 y Responsive Design

2. Teresa Cebrián
UX Designer
Encamina
http://blogs.encamina.com/filling-the-gap
@teresacebrian

3. Santiago Porras Rodríguez
UX Designer
SolidQ
http://geeks.ms/blogs/santypr
@saintwukong

4. Branding en SharePoint 2013:
Aplicando HTML5 y
Responsive Design

5. Introducción

6. Branding en SharePoint 2013
•
•
•
•
Llegada de HTML5
Designer Manager
Nuevos conceptos y elementos
Cambios en SharePoint Designer

7. ¡Voy a hacer una
web!
¿Por dónde
empiezo?

8. ¿Por dónde empiezo?
• Arquitectura de la información
• Wireframes y Flujo de Navegación
• Diseño Gráfico

9. 1º Arquitectura de la Información
• Hablar con el equipo de trabajo
¿qué necesitamos?
• Propuesta de AI
• Acuerdo de AI

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. 3º Diseño Gráfico: Efectos especiales

12. Elementos de
Diseño

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. Design
Manager

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. Cómo crear un nuevo
diseño
Qué necesito saber para empezar a aplicar Branding a mi sitio de
SharePoint 2013

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. Empezando
Elección del IDE
Identificación de elementos del diseño
Convertir a HTML

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. Identificación de los elementos del
diseño
• Masterpage
• Page Layout
• Elementos de
contenido (Web
parts, contenido,
imágenes, …)

21. Identificación de los elementos de diseño
Masterpage
Page Layout

22. Páginas maestras
Administración de las páginas maestras

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. Demo

25. Diseños de página
Administración de los diseños de página

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. Demo

28. Elementos de contenido
Qué son y cómo crearlas

29. Elementos de contenido
• Cómo crearlas
• Establecer parámetros
• Aplicar estilos CSS
• Uso de JavaScript

30. Demo

31. Responsive
Web Design

32. Frameworks de
Responsive Design
Twitter bootstrap
Foundation
Skeleton
HTML Boilerplate
…
http://designinstruct.com/roundups/html5-frameworks/

33. MediaQueries
Qué son
Cómo usarlas

34. Tipos de diseño
Identificación de los diseños por dispositivo

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. Demo

37. Q&A

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