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
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?)
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:
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
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.
20.
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)