Sesión 2 de 3 de Responsive Web Design

Publicado: 17 de septiembre de 2012 en Responsive Web Design

Fuente: Desarrolloweb

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

En este vídeo vamos a seguir con las sesiones sobre Responsive Web Design, abordando la manera de hacer sitios que se adapten a las características de cada dispositivo. Es la segunda entrega de unas clases impartidas por el diseñador Daniel Martínez @Wakkos.

A lo largo de más de una hora, veremos muchas cosas que, estamos seguros, serán de mucha utilidad a todos aquellos que se dedican al diseño web en cualquiera de sus expresiones. Esto es porque, en realidad, aunque todo el material que se va a ofrecer está pensado para hacer webs adaptables a los dispositivos, son básicamente consejos de hojas de estilo en cascada que todos debemos conocer.

Para profundizar en este nuevo modelo de diseño web, Responsive Web Design, hablaremos sobre algunos de los asuntos más consultados, como las unidades CSS o las imágenes flexibles.

 

Nota: Estas sesiones están siendo realizadas en vivo entre un grupo de participantes reducido, aunque la grabación está mediante esta entrega a disposición de todos los interesados en aprender diseño web multidispositivo.

Comenzamos explicando qué son las medidas relativas de las CSS, las conocidas por las siglas “em” y las medidas de porcentaje. Estas medidas son las más básicas en los diseños “responsive”, sin embargo y aunque debemos amar lo relativo y odiar lo absuluto, no debemos olvidarnos de otras medidas como los píxeles, que nos servirán para hacer cosas como asignar la anchura máxima o mínima a un elemento.

Luego explicaremos muchos aspectos relacionados con las unidades y cómo aplicarlos a tamaños de fuentes tipográficas y a tamaños de los elementos. Veremos que las unidades relativas basan su tamaño en una proporción del contenedor padre, y cómo podemos definirlas de un modo que nos resulten cómodas de calcular. Aquí, calculadora en mano, se explicarán algunas fórmulas que nos harán entender cómo se deben especificar las unidades “em”, junto con algunas referencias destacadas a webs que tratan sobre las medidas relativas y el uso de las mismas en el Responsive Web Design.

Luego se verá de qué manera trabajar con imágenes flexibles, es decir, que se redimensionan para ocupar todo el espacio disponible en el contenedor. Se explicará de qué manera asignar las dimensiones de las imágenes y cómo evitar algunos efectos indeseables como el pixelado que se produce al estirarlas.

A continuación se pasará a la ronda de preguntas donde se tocarán aspectos de diverso calado, como presentaciones “slider” adaptables, librerías para adaptar imágenes, frameworks CSS, imágenes de background, sprites CSS, el modo de definir medidas relativas sin perder la noción del nivel de anidación de etiquetas, la posibilidad de usar medidas absolutas en algunos casos en diseños responsive, etc.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s