Responsive CSS. Redimensionado de imagenes con Skeleton

0
39287

Responsive CSS. Redimensionado de imagenes con Skeleton

0. Índice de contenidos.


1. Introducción

En este tutorial vamos a ver como podemos redimensionar las imágenes de nuestro portal, de nuestro blog o de nuestra página web personal para que se vean de forma adecuada en la mayoría de dispositivos.

Para ello nos vamos a basar en Skeleton. Si aún no lo conoces, Skeleton es una colección de recursos css y javascript que te pueden ayudar a costruir sitios web accesibles a los distintos dispositivos que hoy en día cuentan con internet. Básicamente lo que hace Skeleton es dividir en columnas tu página, de tal forma que cuando se reescala el navegador estas columnas cambian automáticamente de tamaño, permitiendo su correcta visualización en distintos dispositivos.


2. Entorno

  • Hardware: Portátil MacBook Pro 15′ (2.0 GHz Intel i7, 8GB DDR3 SDRAM, 500GB HDD).
  • AMD Radeon HD 6490M 256 MB
  • Sistema Operativo: Mac OS X Snow Leopard 10.6.7
  • Software relacionado con el tutorial: Eclipse Helios, Spring 3.1.1.RELEASE, Apache Tomcat 7


3. Redimensionando la imagen en función del ancho del navegador

Skeleton determina el dispositivo navegando por la página Web mediante Media Queries en función del ancho del navegador. Las estimaciones son las siguientes:

  • 960+ pixeles de ancho para la pantalla del ordenador
  • 768-959 pixeles de ancho para las tablets
  • 480-767 pixeles de ancho para un dispositivo móvil en apaisado
  • 0-479 píxeles de ancho para un dispositivo móvil en modo natural

Para continuar os recomiendo que os descarguéis Skeleton. Si os dais cuenta al descargar el ZIP, lo que tenemos es básicamente un index.html, y 3 css. Os recomiendo que limpieis un poco el index.html para poder seguir este tutorial. Vamos a hacer 3 ejemplos, que podéis ver en los siguientes apartados.


3.1 Imagen normal

Vamos a usar para el ejemplo una de las imágenes que tenemos en adictos. Supongamos que en nuestra página web tenemos esta imagen maquetada de la siguiente forma:

lo que en HTML quedaría así:

  
  
  
  
   
  
  
      
      
    Tutorial Css  
      
      
  
      
      
  
      
      
      
      
  
      
  
      
      
      
      
      
  
  
  
  
  
  
      
  
      
  
    

Skeleton

Css dinámico

¿Qué es Terrakas?

Terrakas es la nueva serie que estamos haciendo desde Autentia. En ella podrás ver las alocadas aventuras de unos alienígenas en su paso involuntario por la tierra, más concretamente por Torrejón de Ardoz, Madrid.


Las líneas importantes son desde la 46 hasta la 63. En la 53 indicamos que el espacio que queremos reservar para el texto explicativo de Terrakas será de tamaño 6. Este tamaño está redefinido para cada tipo de dispositivo. Podéis ver el tamaño exacto dentro de las CSS que os habéis descargado
al bajar Skeleton, en concreto lo podéis mirar en skeleton.css. En la línea 60 indicamos que para la imagen queremos reservar un tamaño de 10. Si sumanos los tamaños que se definen en la CSS para 6 (340px) + 10 (580px) = 16 (920 px), más los 20 px que Skeleton otorga extras por capa serían justamente los 960px que Skeleton toma como medida por defecto para el ancho de las webs que se van a visualizar desde ordenador. Os pongo abajo la imagen extraida de skeleton.css para que sepais de donde salen estas cantidades, ya que al principio puede resultar algo lioso.

Podéis apreciar ahora también la utilidad de la línea 46. Para que Skeleton aplique tendremos que poner las capas dentro de una de la clase container.

Esta «mini-página web» se vería perfectamente en la mayoría de ordenadores, si tienes el navegador maximizado y tu monitor tiene una resolución de más de 960 píxeles de ancho. El problema viene porque si alguien ahora intentara entrar en la web mediante un tablet, y el navegador de ese tablet contara con poco mas de 768 píxeles
de ancho esta imagen se dejaría de ver entera. Se cortaría por la derecha y no veríamos en este caso a «Cristina», que es una terraka protagonista de nuestra serie.

Para solucionarlo podemos volver a mirar en el código html que os he puesto, en concreto en la línea 61, en donde estoy aplicando ten-din-img a la imagen. Para conseguir que la imagen reescale tendremos que definir esta propiedad. Con la maquetación que hemos elegido, esta imagen solo puede verse
con su tamaño original en monitores de ordenador. Por lo tanto en las CSS que se definen para el resto de dispositivos tendremos que definir ten-din-img de la siguiente forma:

.ten-din-img {width:100%;} 

Una vez hecho esto podemos hacer más pequeño el navegador e ir viendo como se reescala la imagen, y el texto de la izquierda, que al ser texto, se hace de forma automática. Ya hemos visto como se visualizaría en una pantalla normal. Veamos ahora los distintos dispositivos.

Tablet

Móvil Apaisado

Móvil en vertical


3.2 Imagen con background

La principal diferencia a tener en cuenta cuando una imagen tiene background, es que no debemos elegir el número de columnas de skeleton en función del ancho de la imagen, como hicimos con la imagen anterior, sino que tenemos que sumarle el ancho que le ponga el background. Lo vamos a ver con la imagen de «Prohibidos monos y lagartos». Esta imagen tiene 300 pixeles de ancho por lo que nos cabría en un tamaño 6 de Skeleton que son 340px, le vamos a poner 10 de padding por lo que aún estamos dentro, pero si pusiéramos 25 pixeles de padding tanto por la derecha como por la izquierda se nos saldría del tamaño 6, y tendríamos que ponerle un 7. El html nos queda así:

Monos y Lagartos

El logotipo de monos y lagartos reivindica el uso responsable y consciente de la tecnología, es decir, saber lo que se está haciendo, lo que demuestra interés y profesionalidad

La visualización en un ordenador sería:

Tablet

Móvil Apaisado

Móvil en vertical

La CSS que aplicamos es distinta. En este caso la hemos llamado six-din-img, que también tiene como única propiedad width:100%, pero es distinta porque en este caso no tiene que reescalar para los tablets, porque entra perfectamente en la pantalla. Por lo que solo debemos definir la css para los
móviles, tanto en posicion apaisada como normal.

Para terminar me gustaría añadir como nota, que si ponemos background, puede que se nos corte en los tamaños más pequeños. Podemos solucionarlo añadiendo max-width:XXX. Así conseguiríamos que nos entrara siempre en la pantalla.


4. Cambio de imágenes en función del dispositivo.

Esta técnica nos puede resultar muy útil en muchas ocasiones. Sin ir más lejos si subís un poco arriba del tutorial y os fijais en la imagen de terrakas para móvil en posición normal, (Apartado 3.1 –> Móvil en vertical), veréis como no se leen muy bien las letras, al menos cuesta un poco más leerlas.
En este caso podríamos pensar en diseñar una imagen específica para los móviles, y que en función del ancho del navegador se mostrara una u otra. Hacer esto es bastante sencillo y lo vamos a ver con un ejemplo. En nuestro HTML añadimos lo siguiente:

Dispositivo:

Ahora tenemos que definir dicha CSS para cada uno de los anchos. Voy a ir poniendo por pares la CSS a aplicar y el resultado visual. Podríamos poner lo siguiente para el ordenador:

.icon-device {  
            background-image:url(../images/computer.png);  
    width:128px;  
            height:128px;  
        } 

consiguiendo lo siguiente:

Tablet

.icon-device {  
            background-image:url(../images/tablet.png);  
    width:128px;  
            height:128px;  
        }  

Móvil Apaisado

.icon-device {  
            background-image:url(../images/mobile-2.png);  
    width:128px;  
            height:128px;  
        } 

Móvil en vertical

.icon-device {  
            background-image:url(../images/mobile.png);  
    width:128px;  
            height:128px;  
        } 


5. Conclusiones

He disfrutado muchísimo haciendo este tutorial. HTML5 y CSS3 son los temas que más me llaman la atención a día de hoy. Es importantísimo que el software no solo funcione de la mejor manera posible sino que además dado su diseño sea fácil de usar, intuitivo y entrañable. Entrañable significa para mi algo que está bien pensado y se nota, es por así decirlo, hasta obvio, como si no pudiera ser de otra forma. Por si queréis jugar con el tutorial, hacer vuestros experimentos o no habéis entendido bien algún apartado, os dejo los fuentes aquí.


6. Información sobre el autor

Alberto Barranco Ramón es Ingeniero Técnico en Informática de Gestión y Graduado en Ingeniería del Software por la Universidad Politécnica de Madrid

Mail: abarranco@autentia.com.

Twitter: @barrancoalberto

Autentia Real Business Solutions S.L. – «Soporte a Desarrollo».

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad