Responsive design: Introducción al diseño adaptativo II


Continuando con el post anterior, en esta ocasión comenzaremos con un diseño de 3 columnas de texto para mostrar los conceptos básicos que mencionamos con anterioridad.

Recordemos que en HTML las capas nos permiten colocar elementos web en distintas posiciones y que estas se crean a través de la etiqueta DIV, pero en HTML 5 se han añadido variantes de esta etiqueta que describen elementos como secciones, artículos y encabezados, pero aun así siguen siendo capas que deberemos de acomodar en su lugar.

Veamos el código fuente que produce la pagina de la imagen superior.

Si observamos con cuidado, veremos que existen 4 capas (DIV) en el documento, 1 para cada columna de texto y una mas que contiene a las otras 3, el motivo de esto, es que la capa contenedora nos permitirá después darle margen y centrar nuestro documento. Las tres capas de las columnas de texto pertenecen a la misma clase, recordemos que en HTML las clases son nombre con los que agrupamos etiquetas a las que deseamos aplicar un mismo estilo.

Si lo dejamos sin una hoja de estilo, la pagina parecerá ajustarse al tamaño de la pantalla, pero esto solo se deberá a las etiquetas de párrafo  (P) que estamos usando y que son indispensables en cualquier diseño adaptativo.

Para este ejemplo estamos usando una hoja de estilo almacenada en un archivo .CSS y para incluirla en nuestro documento hacemos uso de la etiqueta LINK, ahora veamos el código de la misma.

En la primera regla de la hoja de estilo definimos que todos las etiquetas que pertenecen a la clase columna (.columna) flotaran a la izquierda (estarán una al lado de la otra) y tendrán un ancho del 33% ( atributo width).

Una parte esencial de el diseño adaptativo son los media query, con las que definimos que un conjunto de reglas CSS se aplicaran en un momento determinado, en este caso el media query que tenemos esta orientado a la pantalla (@media screen) y se activara cuando el ancho máximo de la ventana del navegador sea de 600 pixeles, también podemos detectar la orientación de la pantalla, pero eso será en otro ejemplo,  ahora bien, dentro del media query tenemos que la regla que se aplicará será que las etiquetas de la clase columna, ahora ocuparan todo el ancho de la pantalla, por lo que nuestras columnas se convertirán en franjas apiladas de la siguiente forma:

Ya para terminar les dejamos los archivos HTML y CSS de este ejemplo

http://db.tt/mDlY60nt

Anuncios

Acerca de sistemasumma

Blog dedicado a la tecnología y a todos los estudiantes de sistemas, informatica, computación y afines
Esta entrada fue publicada en General y etiquetada , , , , . Guarda el enlace permanente.

¿Qué estas pensando?

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