branding en sharepoint 2013 aplicando html5 y responsive design
DESCRIPTION
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.TRANSCRIPT
![Page 1: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/1.jpg)
Madrid, 10 de Octubre
Branding en SharePoint 2013: Aplicando HTML5 y Responsive Design
![Page 2: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/2.jpg)
Madrid, 10 de Octubre #IberianSPC
Teresa CebriánUX Designer
Encamina
http://blogs.encamina.com/filling-the-gap
@teresacebrian
![Page 3: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/3.jpg)
Madrid, 10 de Octubre #IberianSPC
Santiago Porras RodríguezUX Designer
SolidQ
http://geeks.ms/blogs/santypr
@saintwukong
![Page 4: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/4.jpg)
Madrid, 10 de Octubre #IberianSPC
Branding en SharePoint 2013: Aplicando HTML5 y
Responsive Design
![Page 5: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/5.jpg)
#IberianSPC
Introducción
![Page 6: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/6.jpg)
#IberianSPC
Branding en SharePoint 2013• Llegada de HTML5• Designer Manager• Nuevos conceptos y elementos• Cambios en SharePoint Designer
![Page 7: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/7.jpg)
#IberianSPC
¡Voy a hacer una web!
¿Por dónde empiezo?
![Page 8: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/8.jpg)
#IberianSPC
¿Por dónde empiezo?
• Arquitectura de la información• Wireframes y Flujo de Navegación• Diseño Gráfico
![Page 9: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/9.jpg)
#IberianSPC
1º Arquitectura de la Información
• Hablar con el equipo de trabajo ¿qué necesitamos? • Propuesta de AI• Acuerdo de AI
![Page 10: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/10.jpg)
#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
![Page 11: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/11.jpg)
#IberianSPC
3º Diseño Gráfico: Efectos especiales
![Page 12: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/12.jpg)
#IberianSPC
Elementos de Diseño
![Page 13: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/13.jpg)
#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)
![Page 14: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/14.jpg)
#IberianSPC
Design Manager
![Page 15: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/15.jpg)
#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
![Page 16: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/16.jpg)
#IberianSPC
Cómo crear un nuevo diseño
Qué necesito saber para empezar a aplicar Branding a mi sitio de SharePoint 2013
![Page 17: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/17.jpg)
#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
![Page 18: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/18.jpg)
#IberianSPC
EmpezandoElección del IDE
Identificación de elementos del diseñoConvertir a HTML
![Page 19: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/19.jpg)
#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
![Page 20: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/20.jpg)
#IberianSPC
Identificación de los elementos del diseño• Masterpage• Page Layout• Elementos de
contenido (Web parts, contenido, imágenes, …)
![Page 21: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/21.jpg)
#IberianSPC
Identificación de los elementos de diseño
Masterpage
Page Layout
![Page 22: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/22.jpg)
#IberianSPC
Páginas maestrasAdministración de las páginas maestras
![Page 23: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/23.jpg)
#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
![Page 24: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/24.jpg)
Madrid, 10 de Octubre #IberianSPC
Demo
![Page 25: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/25.jpg)
#IberianSPC
Diseños de páginaAdministración de los diseños de página
![Page 26: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/26.jpg)
#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
![Page 27: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/27.jpg)
Madrid, 10 de Octubre #IberianSPC
Demo
![Page 28: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/28.jpg)
#IberianSPC
Elementos de contenido
Qué son y cómo crearlas
![Page 29: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/29.jpg)
#IberianSPC
Elementos de contenido
• Cómo crearlas• Establecer parámetros• Aplicar estilos CSS• Uso de JavaScript
![Page 30: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/30.jpg)
Madrid, 10 de Octubre #IberianSPC
Demo
![Page 31: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/31.jpg)
#IberianSPC
Responsive Web Design
![Page 32: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/32.jpg)
#IberianSPC
Frameworks de Responsive Design
Twitter bootstrapFoundation
SkeletonHTML Boilerplate
…http://designinstruct.com/roundups/html5-frameworks/
![Page 33: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/33.jpg)
#IberianSPC
MediaQueriesQué son
Cómo usarlas
![Page 34: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/34.jpg)
#IberianSPC
Tipos de diseñoIdentificación de los diseños por dispositivo
![Page 35: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/35.jpg)
#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
![Page 36: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/36.jpg)
Madrid, 10 de Octubre #IberianSPC
Demo
![Page 37: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/37.jpg)
Madrid, 10 de Octubre #IberianSPC
Q&A
![Page 38: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/38.jpg)
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
![Page 39: Branding en SharePoint 2013 aplicando HTML5 y Responsive Design](https://reader036.vdocuments.co/reader036/viewer/2022081504/55849eccd8b42a05388b53ab/html5/thumbnails/39.jpg)
Madrid, 10 de Octubre
#IberianSPC