Sesión 1 de 3 de Responsive Web Design

Fuente: Desarrolloweb

Enlace: http://desarrolloweb.com/articulos/fundamentos-responsive-web-design.html

Sesión 1 de 3 de Responsive Web Design preparatoria para el curso que vamos a organizar en DesarrolloWeb.com y EscuelaIT, donde veremos los fundamentos del diseño adaptable y diversos trucos útiles con CSS.

Esta es la primera de las tres sesiones gratuitas que vamos a impartir en DesarrolloWeb.com sobre Responsive Web Design, en la que hemos repasado algunos aspectos teóricos y diversos aspectos prácticos sobre las hojas de estilo en Cascada.A lo largo de una hora y 20 minutos Daniel Martínez nos ofrece diversas guías para comenzar a pensar en Responsive cuando encaramos el diseño de una web. El objetivo es que se adapte a todos los dispositivos que puedan visitarla, independientemente de sus características. Además, yo ofrezco una introducción en la que explico cuál es el objetivo de estas tres sesiones y la dinámica que vamos a implementar para ellas y en el curso que realizaremos en breve.

En cuanto a contenido sobre Responsive Web Design, aunque esta ha sido una sesión mayormente teórica, el ponente nos ha dejado diversos trucos y análisis de las posibilidades de Responsive, como son los siguientes:

• Nuevas maneras de navegar por Internet, cómo debemos encarar el trabajo de diseñar una web en la Internet Multidispositivo
• Cómo utilizan Responsive sitios web de referencia y los diferentes layouts que se adaptan a dispositivos según su anchura
• Estilos CSS para adaptar las cajas a distintas anchuras, min-width y max-width
• Diferencias entre Float e Inline-block
• Modelo de caja en CSS3 y mejoras con el atributo box-sizing
• Trucos para compatibilizar algunos atributos de CSS en Internet Explorer

Luego pasamos a una ronda de preguntas en la que los asistentes participaron con diversas preguntas en las que Daniel que fue aportando muchas otras ideas y trucos relacionados con el contenido visto previamente.Entre las preguntas que se realizaron se tocaron asuntos relacionados con el modelo de caja, resoluciones necesarias a tener en cuenta al hacer responsive, compatibilidad de CSS con exploradores viejos, tamaños de imágenes para distintos dispositivos, etiquetas semánticas del HTML5, proporciones deseables al asignar espacios para maquetar una web, etc.

En definitiva, se realizaron diversas aproximaciones a la temática del Responsive Web Design que servirán para poder comprender mejor esta nueva manera de concebir el diseño de un sitio web. Aclaramos por último que estas son nuestras primeras pruebas en la retransmisión de aulas en vívo a través de GoToMeeting, que salieron bastante dignas aunque hay diversos aspectos que se mejorarán en siguientes entregas.

Por último, antes de dejaros con la grabación, proporcionamos un enlace para descargar el código de los ejemplos realizados por Daniel a lo largo de este vídeo.