MAD-511 Responsive Design: Diseño Web Adaptativo

Transcripción

1 MAD-511 Responsive Design: Diseño Web Adaptativo Introducción Introducción del responsive design a diseñadores de páginas web noveles así como actualiza la formación de los diseñadores más experimentados, al tiempo que proporciona una exploración más detallada de cómo las tendencias actuales de los dispositivos, conectividad, y la experiencia de usuario está conduciendo su adopción Objetivos Descubra cómo hacer que su sitio web sea más legible y eficiente a través de distintos tamaños de pantalla y dispositivos. Se muestra cómo utilizar la característica de cuadrícula de diseño de líquido en Dreamweaver para crear un sitio web único que ofrece diferentes diseños de tamaños de pantalla específicos Temario 1) Fundamentos de Responsive Design Introduciendo ResponsiveDesign Qué es el responsivedesign? Explorando las necesidades del responsivedesign Qué hace que un sitio sea responsivo? Explorando un sitio responsivo Conceptos comunes Examinar el viewport de móviles Controlar los viewports Comprender las densidades de pantalla Diseñar para múltiples densidades de pantallas Comprender las Media Queries Crear break points con Media Queries Usar rejillas fluidas Hacer imagines responsivas Examinar el futuro de las imágenes responsivas Crear formularios responsivos Mejorar el rendimiento de un sitio Estrategias de ResponsiveDesign

2 Diseñar el contexto apropiado Planificar el diseño responsivo Crear responsive mockups Desarrollar una estrategia de contenidos para sitios responsivos Comprender el contexto móvil Diseñar según las capacidades de los móviles Crear HTML flexible Testear diseños responsivos Conclusión Explorar los frameworks de rejilla fluida Herramientas de diseño responsivo Recursos adicionales 2) Crear un sitio completo con ResponsiveDesign Introducción Ver el sitio completo finalizado Software necesario Empezar el proyecto Consideraciones para usuarios de Dreamweaver La vista de Diseño en Dreamweaver Acceso al código HTML y CSS en Dreamweaver Empezar el proyecto Planificación del diseño Añadirlos principales contenedores HTML Añadirlos contenedores de la promoción Añadir enlaces y copyright Añadir contenido-tipo en los contenedores HTML Crear los gráficos web Crear y recortar las imagines a varios tamaños Exportar los contenidos Preparar el archivo HTML

3 Establecer archivos CSS para todas las dimensiones de pantalla Enlazar las hojas de estilo CSS según los tamaños de pantalla con media queries Permitir que Internet Explorer 7 y 8 entiendan HTML5 Configurar la escala de viewport Crear reglas CSS Rules según cada pantalla Añadir el patrón de fondo y el color del contenedor de página Poner estilos a los encabezados Poner estilos al texto del body y a los enlaces Poner estilos al footer Preparar el archivo HTML Comprender las reglas compuestos Poner estilos a los enlaces usando sprites Poner estilos al texto Añadir imágenes con las CSS Crear contenedores para los contenidos y la maquetación Añadir reglas CSS para la maquetación Poner estilos al encabezado para grandes pantallas Poner estilos a los artículos para grandes pantallas Poner estilos a las secciones Poner estilos a los enlaces de navegación Poner estilos a la navegación en caso de gran pantalla Posicionar la navegación en grandes pantallas Limpiando elementos que flotan Trabajar con reglas CSS Añadir reglas CSS de elementos inline con media queries Poner estilos para pantallas medianas Poner estilos al encabezado para pantallas medianas Poner estilos a la navegación para pantallas medianas Poner estilos a las secciones para pantallas medianas Poner estilos para pantallas pequeñas

4 Poner estilos al encabezado para pantallas pequeñas Poner estilos a la navegación para pantallas pequeñas Poner estilos a los enlaces para pantallas pequeñas Poner estilos a las secciones para pantallas pequeñas Poner estilos al footer para pantallas pequeñas Conclusiones 3) Responsive Design con Dreamweaver CS6 Comprender las webs con ResponsiveDesign Fundamentos de ResponsiveDesign Estructura de rejillas fluidas Comprender las media queries Maquetación con rejilla fluida en Dreamweaver Explorar la maquetación de rejilla fluida por defecto Añadir etiquetas de bloque (div) Insertar contenido Apuntar a diseños de teléfono Balancear los diseños Expandir la estructura de diseño fluido Modificar el número de columnas de rejilla Ajustar los anchos de columna y sus márgenes Incluir elementos de página avanzados Media Queries avanzados Construir media queries desde cero Trabajar con media queries adicionales Manejar los cambios de orientación Trabajar con displays de alta resolución Imágenes flexibles y multimedia Manipulación de las CSS Aplicar técnicas de JavaScript Preparar soluciones de servidor

5 Duración 25 horas teórico-prácticas