Creando páginas web adaptables

He de reconocer que he estado un par de años desconectado del mundo de la programación web, a pesar de que he estado años trabajando en ello. La gran revolución que ha sido HTML5 y lo que le rodea me es familiar aunque no he podido ponerlo en práctica más allá de algún ejemplo. En concreto todas las mejoras introducidas en CSS3 me resultan sumamente interesantes y me recuerda aquella época en la que tenía que programar complejas funciones en JavaScript que iban modificando el aspecto de la web en función de lo que el usuario hacía o dónde veía la web.

Uno de los proyectos que recuerdo era Skyweb, un proyecto de editor HTML experimental y que adaptaba su interfaz a la ventana del navegador. En aquellos días, en los que no todos los navegadores funcionaban igual y en los que esos parámetros de tamaño que se asignaban a «100%» no querían funcionar como debían había que tirar de la estructura DOM (Modelo de Objetos del Documento), JavaScript y eventos para realizar ciertas cosas, obteniendo datos de la página, calculando y modificando otros para que lo que se mostraba tuviese el aspecto que se deseaba.

Hoy en día ya no hace falta complicarse la vida de esa forma o desarrollar diferentes versiones de una misma web para diferente dispositivos, llevando al usuario a la versión adaptada para su tamaño de pantalla, la propia web puede cambiar su aspecto para adaptarse en lo que se llaman webs adaptables (responsive web en inglés). El tema que utiliza este blog es una muestra y cambia el ancho o situación de sus columnas dependiendo del tamaño de pantalla. Modificar el tamaño de la ventana en un PC sirve para ver ese comportamiento.

CSS3 ha introducido un montón de opciones de cálculo, por ejemplo antes a la hora de tener dos columnas era común definir su tamaño en píxeles si se quería que fuese un tamaño fijo o en porcentaje (por ejemplo 70% y 30%) si se quería variable según otro aspecto, el problema era cuando se quería una de ellas variable y otra fija, en esos casos había que calcular el tamaño que debía tener en píxeles mediante métodos nada bonitos (de nuevo, de cara a que fuese compatible con todos los navegadores posibles), ya que unas veces la variable sería el 80% y otras podía ser el 30%. Ahora es posible decirle al navegador que una columna puede ser tan grande como se pueda con una reducción del tamaño de la otra columna:

 

width:calc(100% – 200px);

 

Pero eso no es nada comparado con lo que se puede hacer. CSS3 no ha incluido sólo funciones matemáticas como esa, sino también condicionales de forma que una sección del código que defina ciertos parámetros se ejecute únicamente si el tamaño de la pantalla (o ventana mejor dicho) es superior y/o inferior a cierta resolución:

 

body{ width: 800px; }
@media only screen and (max-width:800px) {

body{ width: 100%; }

}

 

El código anterior hace que una página tenga un ancho de 800px, algo que en resoluciones de anchura inferior a 800px mostrase una barra de scroll lateral, pero la segunda parte sobrescribe el atributo de la anchura de la página (no olvidemos que en CSS se ejecuta el último parámetro en leerse si están repetidos) al 100%, por lo que si la ventana tiene una anchura de 600px, la página se adaptará a esa anchura. Igualmente se pueden modificar tamaños de fuente, imágenes, ocultar elementos (propiedad visibility: hidden) o hacer que dos elementos bloques DIV utilizados como columnas pasen a ser filas (pasando de utilizar las propiedades float:left o float:right a float:none, por ejemplo).

Ya es cuestión de ir moviendo cada elemento de la web o modificando su tamaño (incluso ocultando algunas partes) para que se adapte a diferentes resoluciones y especialmente a las que utiliza una tablet o un móvil.

1 respuesta

  1. CSS3 y HTML5 son una maravilla y da gusto la cantidad de cosas que permiten hacer. En mi caso, para que tuvieran un diseño responsive las pocas webs que hice, utilicé Bootstrap que no está nada mal, sobre todo en su versión 3 (la 2 era un poco cáncer).

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.