Este documento presenta una agenda para una sesión sobre diseño responsivo en SharePoint. La sesión cubrirá qué es diseño responsivo, cómo se puede implementar con cuadrículas, consultas de medios y representaciones de imágenes. También mostrará cómo crear y administrar diseños en SharePoint 2013 e incluirá una demostración rápida de cómo personalizar la apariencia de SharePoint.

1. SharePoint Saturday Day
Lima 2015

2. Auspiciadores
Platinum
Prize Only

3. Agradecimiento especial

4. Como me veo?
Branding SharePoint… RWD

5. Fernando Chiquiza
@fchiquiza
MundoSharePoint@outlook.com
Fernando Chiquiza Ramos
http://fernando-chiquiza.blogspot.com/

6. Agenda
• OPEN;
• ¿Que es RWD?
• Tenga en cuenta…
• Donde estamos y para donde vamos!
• ¿Como?
• Lo nuevo en SP 2013!
• Keep Calm
• Aplausos y felicitaciones

7. OPEN;

8. ¿Que es Responsive Web Design (RWD)?
• La Clave: todos los dispositivos
cargan la misma pagina*

9. Tenga en cuenta…
1. Tamaño de la pantalla (viewport, proporción, resolución)
2. Funcionalidad (clicks, hover, touch…)
3. Usabilidad (su sitio puede ser utilizado en cualquier dispositivo?)

10. Donde estamos y para donde vamos!

11. Como…..?....?
Grid´s – Flexible Media – CSS3 Media Queries

12. A fluid grid
%

13. Media queries
In-Line Media Query:
<link rel="stylesheet" media="screen and (min-width: 768px)" href=“tablet.css" />
<link rel="stylesheet" media="screen and (max-width: 599px)" href=“phone.css"/>
Media Query in style
sheets:

14. Grid Layout

15. Lo Nuevo en Branding sobre SharePoint 2013

16. Administrador de diseños
• Importar y Exportar paquetes de
diseño
• Creación y asociación de canales por
dispositivo
• de HTML a Master page
• Creación de paginas asociadas a tipos
de contenido
• Agregar Snipets

17. Mapeo WebDAV
(Web Distributed Authoring and Versioning)

18. Convertir .HTML a .Master

19. Representaciones de Imágenes
(Image Renditions)
Permite mostrar una imagen única de varias
maneras.
Reduce ítems en las galerías del sitio.
Mejora el rendimieto del sitio.

21. Comience con la planificación del sitio
Esto debería ser familiar ...
 Mapa del sitio
 Arquitectura de la Información
 Comience con el propósito de contenido y / o Zona
 Wireframing - incluso para dispositivos móviles
 High fidelity mockups (Maquetas de alta fidelidad) - incluyendo para
dispositivos móviles
Design to the extremes, then fill in the gaps

22. Recuerde siempre en “SharePoint”
1. ¿Qué va a ser parte de la página maestra?
2. ¿Cómo se define el contenido de las Pages Layout (diseños de página)?
3. ¿Cómo va a manejar la navegación?
4. ¿Incluirá el quick launch (inicio rápido) en todas las páginas?
5. Agregar controles de SharePoint, snippets and navigation (fragmentos y navegación)

23. Demo – Branding en
minutos!

24. Q & A

25. Fernando Chiquiza
@fchiquiza
MundoSharePoint@outlook.com
Fernando Chiquiza Ramos
http://fernando-chiquiza.blogspot.com/