Madrid, 10 de Octubre

Branding en SharePoint 2013: Aplicando HTML5 y Responsive Design

Madrid, 10 de Octubre #IberianSPC

Teresa CebriánUX Designer

Encamina

http://blogs.encamina.com/filling-the-gap

@teresacebrian

Madrid, 10 de Octubre #IberianSPC

Santiago Porras RodríguezUX Designer

SolidQ

http://geeks.ms/blogs/santypr

@saintwukong

Madrid, 10 de Octubre #IberianSPC

Branding en SharePoint 2013: Aplicando HTML5 y

Responsive Design

#IberianSPC

Introducción

#IberianSPC

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

#IberianSPC

¡Voy a hacer una web!

¿Por dónde empiezo?

#IberianSPC

¿Por dónde empiezo?

• Arquitectura de la información• Wireframes y Flujo de Navegación• Diseño Gráfico

#IberianSPC

1º Arquitectura de la Información

• Hablar con el equipo de trabajo ¿qué necesitamos? • Propuesta de AI• Acuerdo de AI

#IberianSPC

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

#IberianSPC

3º Diseño Gráfico: Efectos especiales

#IberianSPC

Elementos de Diseño

#IberianSPC

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)

#IberianSPC

Design Manager

#IberianSPC

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

#IberianSPC

Cómo crear un nuevo diseño

Qué necesito saber para empezar a aplicar Branding a mi sitio de SharePoint 2013

#IberianSPC

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

#IberianSPC

EmpezandoElección del IDE

Identificación de elementos del diseñoConvertir a HTML

#IberianSPC

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

#IberianSPC

Identificación de los elementos del diseño• Masterpage• Page Layout• Elementos de

contenido (Web parts, contenido, imágenes, …)

#IberianSPC

Identificación de los elementos de diseño

Masterpage

Page Layout

#IberianSPC

Páginas maestrasAdministración de las páginas maestras

#IberianSPC

Pasos para crear una masterpage

• Convertir el diseño con el Design Manager de SharePoint 2013• Editar masterpage• Añadir Fragmentos de código

Madrid, 10 de Octubre #IberianSPC

Demo

#IberianSPC

Diseños de páginaAdministración de los diseños de página

#IberianSPC

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

Madrid, 10 de Octubre #IberianSPC

Demo

#IberianSPC

Elementos de contenido

Qué son y cómo crearlas

#IberianSPC

Elementos de contenido

• Cómo crearlas• Establecer parámetros• Aplicar estilos CSS• Uso de JavaScript

Madrid, 10 de Octubre #IberianSPC

Demo

#IberianSPC

Responsive Web Design

#IberianSPC

Frameworks de Responsive Design

Twitter bootstrapFoundation

SkeletonHTML Boilerplate

…http://designinstruct.com/roundups/html5-frameworks/

#IberianSPC

MediaQueriesQué son

Cómo usarlas

#IberianSPC

Tipos de diseñoIdentificación de los diseños por dispositivo

#IberianSPC

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

Madrid, 10 de Octubre #IberianSPC

Demo

Madrid, 10 de Octubre #IberianSPC

Q&A

Madrid, 10 de Octubre #IberianSPC

Santiago Porras RodríguezUX Developer

Nokia Developer Champion

SolidQ Cloud Developer

http://geeks.ms/blogs/santypr

@saintwukong

GRACIAS POR SU ATENCIÓNTeresa Cebrián

PeñaUI Designer

Encamina

http://geeks.ms/blogs/santypr

@saintwukong

Madrid, 10 de Octubre

#IberianSPC