Branding en SharePoint 2013:
Aplicando HTML5 y Responsive Design
Teresa Cebrián
UX Designer
Encamina
http://blogs.encamina.com/filling-the-gap
@teresacebrian
Santiago Porras Rodríguez
UX Designer
SolidQ
http://geeks.ms/blogs/santypr
@saintwukong
Branding en SharePoint 2013:
Aplicando HTML5 y
Responsive Design
Introducción
Branding en SharePoint 2013
•
•
•
•

Llegada de HTML5
Designer Manager
Nuevos conceptos y elementos
Cambios en SharePoint ...
¡Voy a hacer una
web!

¿Por dónde
empiezo?
¿Por dónde empiezo?
• Arquitectura de la información
• Wireframes y Flujo de Navegación
• Diseño Gráfico
1º Arquitectura de la Información
• Hablar con el equipo de trabajo
¿qué necesitamos?
• Propuesta de AI
• Acuerdo de AI
2º Wireframes y flujo de navegación
• Estructura y esqueleto de los elementos
que componen la página
• Análisis de la nave...
3º Diseño Gráfico: Efectos especiales
Elementos de
Diseño
Elementos que componen un diseño
Igual que en
SharePoint 2010
Páginas maestras
Diseños de página
Plantillas XSLT

SharePoi...
Design
Manager
Opciones del administrador de diseños
Subir diseños

Administrar Páginas Maestras
Administrar Diseños de Página
Administra...
Cómo crear un nuevo
diseño
Qué necesito saber para empezar a aplicar Branding a mi sitio de
SharePoint 2013
Cómo crear un nuevo diseño
• Desde cualquier IDE
• SharePoint Designer 2013 sin Vista Diseño
• Identificar elementos perte...
Empezando
Elección del IDE
Identificación de elementos del diseño
Convertir a HTML
Elección del IDE
• En SharePoint 2013 podemos elegir el IDE con el que mejor nos
sintamos. WebMatrix, DreamWeaver, SharePo...
Identificación de los elementos del
diseño
• Masterpage
• Page Layout
• Elementos de
contenido (Web
parts, contenido,
imág...
Identificación de los elementos de diseño
Masterpage
Page Layout
Páginas maestras
Administración de las páginas maestras
Pasos para crear una masterpage
• Convertir el diseño con el Design Manager de SharePoint 2013
• Editar masterpage
• Añadi...
Demo
Diseños de página
Administración de los diseños de página
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 ...
Demo
Elementos de contenido
Qué son y cómo crearlas
Elementos de contenido
• Cómo crearlas
• Establecer parámetros
• Aplicar estilos CSS
• Uso de JavaScript
Demo
Responsive
Web Design
Frameworks de
Responsive Design
Twitter bootstrap
Foundation
Skeleton
HTML Boilerplate
…
http://designinstruct.com/roundup...
MediaQueries
Qué son
Cómo usarlas
Tipos de diseño
Identificación de los diseños por dispositivo
Tipos de diseño
• Identificación de los distintos dispositivos
• Diseño del sitio en función del dispositivo
• Diseño del ...
Demo
Q&A
GRACIAS POR SU
ATENCIÓN Porras
Santiago

Teresa Cebrián Peña

Rodríguez

UI Designer

UX Developer

Encamina

Nokia Develo...
Branding en SharePoint 2013 aplicando HTML5 y Responsive Design
Próxima SlideShare
Cargando en…5
×

Branding en SharePoint 2013 aplicando HTML5 y Responsive Design

2.944 visualizaciones

Publicado el

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.

Publicado en: Tecnología
0 comentarios
3 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
2.944
En SlideShare
0
De insertados
0
Número de insertados
92
Acciones
Compartido
0
Descargas
84
Comentarios
0
Recomendaciones
3
Insertados 0
No insertados

No hay notas en la diapositiva.

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

×