CSS: maquetación de una página – diseño adaptable (7)

CSS: maquetación de una página – diseño adaptable (7)


Hola, soy Sergio Luján Mora, profesor de
informática de la Universidad de Alicante, y en este vídeo que forma parte del curso
“Introducción al desarrollo web”, te voy a mostrar los estilos de diseño que se
suelen emplear cuando se maqueta una página web. En este vídeo te voy a hablar del diseño
adaptable. En la parte anterior de este vídeo, vimos
el estilo de diseño líquido o fluido, que permite que la visualización de una página
web se adapte a los diferentes tamaños de pantalla de diferentes dispositivos. Sin embargo, en la actualidad existen tantos
dispositivos que permiten acceder a la Web, con tantos tamaños de pantalla tan diferentes,
que las ventajas que ofrece el diseño líquido son un poco limitadas para la situación actual
y es difícil lograr que una misma página web se muestre correctamente en un dispositivo
con una pantalla pequeña o en un dispositivo con una pantalla grande. Por ejemplo, si nos centramos sólo en los
dispositivos móviles, es decir, en los teléfonos y tabletas, en un estudio publicado en el
tercer cuatrimestre de 2014, se observa que existe una gran diversidad de tamaños de
pantalla y además existen diferencias significativas entre los diferentes continentes. En el siguiente gráfico de StatCounter encontramos
información similar: podemos ver la evolución de las resoluciones de pantalla desde marzo
de 2009 hasta octubre de 2014. El cambio producido en menos de 6 años ha sido impresionante. En la actualidad coexisten muchas resoluciones
de pantalla. ¿Y si hacemos un diseño para cada resolución
de pantalla? Bueno, eso sería una locura, sería mucho trabajo, pero lo que sí que
podemos hacer es organizar las diferentes resoluciones de pantalla en grupos y crear
diferentes diseños para cada grupo. Por ejemplo, imaginemos la siguiente maqueta
de una página web que tiene una cabecera, un menú principal a la izquierda, una zona
de contenido principal a la derecha con tres bloques y un pie de página. Comenzando por el diseño extra grande, se
pueden plantear diferentes transformaciones en la maqueta para adaptar la página web
a resoluciones de pantalla inferiores. Eso lo podemos lograr con un diseño adaptable,
pero ¿Cómo se diferencia un diseño adaptable
de un diseño líquido? En un diseño adaptable, el diseño de una
página puede sufrir transformaciones importantes. Por ejemplo, se puede pasar de un diseño
de varias columnas a un diseño de una sola columna. Para ello se suelen crear varias hojas de
estilo que mediante media queries permiten que el dispositivo
utilice la más adecuada. A veces, las transformaciones son tan importantes,
por ejemplo convertir una barra de menú en una lista desplegable, que es necesario la
utilización de JavaScript. En el sitio web Media Queries existe una galería
enorme de sitios web desarrollados con diseños adaptables. Aquí tenemos un ejemplo, el sitio web de
Stanford University. Este ejemplo me gusta mucho porque son pocas las universidades que
tienen una página principal con un diseño adaptable. Esta página web se visualiza correctamente
a 1920×1080 píxeles, a 1024×768 y a 640×480. Un detalle importante de esta página web
está en la transformación de la barra de menú principal, que se convierte en una lista
desplegable. ¿Cómo se realiza un diseño adaptable? Este es el esquema de la página de prueba
que estoy utilizando como ejemplo en estos vídeos. El código HTML es el mismo que he empleado
en ejemplos anteriores, pero hay una diferencia importante, esta instrucción meta es esencial
para que la página web se muestre con la escala apropiada en un dispositivo con una
pantalla pequeña o mediana. Los cambios más importantes de este diseño
los encontramos en el CSS. Este CSS no es un único CSS, en realidad
se puede entender como dos CSS en uno solo. Esto se logra con el empleo de las media queries,
unas condiciones que indican cuándo se debe utilizar un CSS. En esta página se han definido tres diseños:
cuando la resolución de pantalla sea igual o mayor que 1200 píxeles de ancho, cuando
la resolución de pantalla sea igual o mayor que 800 y menor que 1200, y cuando la resolución
sea menor que 800 píxeles, que no se ha definido nada. Así se ve la página con una resolución
de 1920 píxeles, es un diseño a tres columnas. Así se ve la página con una resolución
de 1024 píxeles, es un diseño a dos columnas. Así se ve la página con una resolución
de 640 píxeles, sin diseño. También podemos probar a visualizar la página
con resoluciones inferiores. Por ejemplo, esta es una captura de pantalla de Opera Mobile
Emulator simulando un Samsung Galaxy S II. Ya para terminar, ahora te aconsejo que veas
otros vídeos que tengo sobre el diseño adaptable. En particular, te recomiendo que veas un vídeo
dividido en tres partes en el que desarrollo paso por paso un diseño adaptable. Ahora te invito a que veas la siguiente parte
de este vídeo en el que explico el diseño basado en rejilla. Ya para terminar, me gustaría recordarte
algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre
mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico [email protected]
y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso
“Introducción al desarrollo web” que está disponible en la dirección idesweb.es. Muchas gracias por tu atención.

18 thoughts on “CSS: maquetación de una página – diseño adaptable (7)”

  1. Habría que buscar una traducción alternativa de "responsive design" ya que "adaptable" puede generar confusión con el "adaptive design"

  2. su correo electrónico para enviar algunos trabajos para ver si se esta ejecutando de manera correcta gracias

  3. el estilo.cc no me responde con media . cual es el simbolo que () media es un @media (min-width)
    y el simbolo que esta en 40 es un % ? por fa

  4. Osea para que se vea en una compu y también pueda verse en el celular sería @media(max-witdh: 1080) and (min-width) 480 ?? Sería así?

Leave a Reply

Your email address will not be published. Required fields are marked *