Post on 20-Jun-2015
description
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