Vídeo: Medidas e imágenes relativas en Responsive Web Design

  • Por
Vídeo que trata sobre medidas relativas en las CSS e imágenes flexibles para realizar Responsive Web Design.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

marco

08/5/2012
yo si he hecho slideshows con responsive
Los slideshows con responsive solo es cuestion de hacer las modificaciones al CSS de slideshow en cuestion aveces no es facil porque algunos usan demaciado javascript pero hay otros mas amables con el css que solo utilizan javascript para las coordenadas y siempre estan muestreando el tamaño del contenedor por eso es facil tomar ese tipo de slideshows para ponerles responsive design

a la mano no tengo el ejemplo pero se que si se puede

ernestosoto

08/5/2012
Esperando este vídeo
Gracias! estaba esperando este vídeo. Muy interesantes todas las técnicas de CSS aprendidas!
Salu2!

Oscar

10/5/2012
Sprites
Me encanta este tema, muy interesante, por cierto...me hizo mucha gracia cuando Miguel Angel pronunció "sprites", es que yo la pronunciación en inglés también la llevo fatal. Bueno fuera bromas, se aprende un montón con vosotros, gracias por enseñarnos.

flor

18/5/2012
imagen mas grande que contenedor y scroll
queria saber que apsa si al imagen que utilizo excede al contendor es decir más grande y utilizo un scroll, ya que no puedo aplicarle el ancho en %, hay alguna solucion, y a su vez en dreamweaver no puedo sobre dicha imagen colocar links, gracias

Ban

21/8/2012
reset eric meyer
Saludos a todos, aqui os dejo un link de la página para hacer un copy/paste de un excelente reset de Eric Meyer para vuestras webs: http://meyerweb.com/eric/tools/css/reset/
que es de donde lo toman, ya que si mal no recuerdo, Eric Meyer forma parte del equipo del proyecto Boilerplate . Que lo disfrutéis.