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 cómo crear un diseño adaptable sencillo.

Antes de empezar, 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 sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.

En otro vídeo te he explicado qué es un diseño adaptable, adaptativo o flexible y te he mostrado algunos patrones de diseño adaptable. En este vídeo vamos a ver cómo crear un diseño adaptable desde cero.

Voy a utilizar dos herramientas para mostrar el funcionamiento del diseño adaptable. Por un lado, tenemos la extensión “Window Resizer”, para Google Chrome, que permite cambiar el tamaño de la ventana del navegador. Por otro lado, tenemos la aplicación “Opera Mobile Emulator”, que permite emular la visualización de una página web con diferentes dispositivos móviles, como teléfonos o tabletas.

Al realizar un diseño adaptable, hay gente que defiende realizar primero el diseño para el ordenador, es decir, para el dispositivo de mayor resolución, y luego adaptarlo para el móvil, el dispositivo de menor resolución. Sin embargo, también hay gente que defiende lo contrario, lo que se llama “mobile first”. Yo voy a aplicar el primer método: voy a realizar un diseño para el ordenador, y luego lo voy a adaptar al móvil.

Vamos a utilizar como ejemplo para explicar cómo hacer un diseño adaptable esta página web, que estamos viendo ahora mismo sin CSS. Estos elementos son el subtítulo de la página, y en realidad no van a aparecer los tres a la vez, sino que cada vez aparecerá uno solo. Yo voy a definir tres diseños en el diseño adaptable: un diseño que he llamado “Grande”, otro “Mediano”, y otro “Mini”.

Aparecerá escrito “Grande” cuando el tamaño del área de visualización de la ventana del navegador sea mayor o igual que 981 píxeles. “Mediano” cuando el tamaño del área de visualización de la ventana del navegador esté comprendido entre 481 píxeles y 980. Y “Mini” cuando sea menor o igual que 480 píxeles.

Para el menú hemos definido dos estilos de presentación: mediante una lista y mediante una lista desplegable de tipo . Además, en el pie aparece repetido el menú mediante una lista desplegable de tipo . A cada módulo o bloque principal de la página web le hemos puesto un color de fondo para identificarlo correctamente.

Esta es la presentación de la página web en la pantalla de un ordenador con la resolución máxima, en concreto, 1920 píxeles de ancho. Se ha optado por un diseño basado en dos columnas, con el menú principal situado a la izquierda y la zona de contenido a la derecha. Esta es la presentación con una resolución de 640 píxeles de ancho. En este caso, como se ha reducido el ancho, se emplea un diseño basado en una sola columna: primero aparece el menú principal y después la zona de contenido.

Finalmente, esta es la presentación en un dispositivo móvil como un teléfono móvil, con una resolución de 320 píxeles de ancho. En este caso, se ha optado por convertir el menú en una lista desplegable para ganar algo de espacio. Podemos ver que se pueden apreciar diferencias entre las diferentes presentaciones. Además de lo comentado respecto a la maquetación, el cambio de dos a una columna, también hay cambios en el tipo de letra y en la alineación del texto, que pasa de centrado a alineado a la izquierda. Lo importante no es que se vea exactamente igual en todos los casos, eso es imposible, lo importante es que se pueda ver correctamente.

Vamos a ver el código HTML y CSS que he escrito para lograr este efecto. En primer lugar, vamos a comprobar cómo al cambiar el tamaño de la ventana del navegador, se activan los diferentes diseños adaptables que he definido. Cambio el tamaño de la ventana del navegador y podemos ver cómo llegará un momento en el que se activa el diseño mediano. He puesto aquí estos títulos, cambio el título de la página para que se vea el cambio. Fijaros como aquí tenemos el diseño grande, y a continuación pasamos al diseño mediano.

En el cambio del diseño grande al diseño mediano, podemos ver que hay un cambio en la maquetación, en el número de columnas, y también hay un cambio en el tipo de letra empleado, en la fuente. Este cambio del tipo de letra simplemente lo hago para indicar que podemos cambiar muchos aspectos en el diseño de nuestras páginas. Si sigo haciendo más pequeña la ventana del navegador, llegará un momento en el que se activará el diseño pequeño, el diseño que he llamado mini. Aquí lo tenemos, vuelvo a hacer la ventana más grande, se activa el diseño mediano, y aquí tenemos el diseño mini.

En el diseño mini, sigue la maquetación a una sola columna, pero hay un cambio importante: esta lista, este menú, se convierte en una lista desplegable, como podemos ver aquí, que contiene exactamente el mismo contenido. Y también aparece en el pie de la página, la misma lista desplegable repetida, para tener un acceso rápido al menú. También hay un cambio en el tipo de letra que se emplea. Podemos apreciar cómo cambia el tipo de letra, de un tipo serif que tenemos ahora, a un tipo sans-serif.

Y también apreciamos otro cambio importante en la zona de contenido: en los diseños grande y mediano, en la zona de contenido aparecen unos enlaces a distintas entradas con una pequeña descripción. Sin embargo, cuando pasamos al diseño pequeño, esa descripción, ese resumen de la entrada, desaparece. Vamos a ver cómo hacemos todo esto con HTML y CSS.

Este es el código HTML de la página de ejemplo. Primero vamos a revisar rápidamente el HTML para ver que no hay nada especial. He empleado HTML5 y estoy usando alguna de las nuevas etiquetas semánticas de HTML5. Por ejemplo aquí tengo el , la cabecera de la página. Aquí tengo este elemento el elemento principal de navegación, mi menú, y luego tengo un apartado que está compuesto de diferentes artículos. Tenemos aquí un artículo, otro artículo y otro artículo. Y por último tenemos el pie.

Como vemos, por ejemplo aquí en el pie, tenemos la lista desplegable que hemos visto que aparece aquí en el pie de página pero unas veces aparece y otras veces como vemos aquí desaparece aquí en el diseño mini aparece. ¿Cómo logro eso? Pues, en mi CSS me he declarado unas clases, ahora después lo veremos para activar los elementos que quiero ver o que no quiero ver, según el tamaño de pantalla. Aquí por ejemplo tengo esta clase “display-mini” para que este elemento se visualice solamente cuando estamos en diseño adaptable mini. Aquí por ejemplo, el resumen de las entradas, que en el diseño mini no aparece, pero sí que aparece en el diseño mediano y en el diseño grande, lo podemos ver aquí.

Pero en el diseño mini desaparece, pues le pongo a cada resumen estas dos clases: “display-great” para decir que quiero que aparezca en el diseño grande y “display-medium” para indicar que quiero que también aparezca en el diseño medio. Como no le he puesto “display-mini”, cuando se active el diseño pequeño, el diseño mini, estos elementos no se visualizarán. Fijaros que voy a tener el mismo HTML sea cual sea el dispositivo con el que se consulte esta página web. Eso sí, tengo que, en algunos casos, poner algún contenido extra que aparecerá y desaparecerá según el dispositivo.

Vamos a ver el CSS que he definido para mi página. En realidad, como vemos aquí, no hay un solo CSS, sino en realidad hay varios ficheros CSS y ahora explicaré por qué. Pero antes de ir a ver cada uno de estos ficheros, vamos a ver esta instrucción que es muy importante y la clave para que todo esto funcione en los dispositivos móviles. Si se me olvida poner esta etiqueta , realmente no funcionará. Vamos a comprobarlo.

Para ello tengo aquí el emulador de dispositivo móvil, el Opera Mobile Emulator, y he elegido el dispositivo Samsung Galaxy SII, que tengo aquí ya abierto. Y tengo cargada mi página de ejemplo. Fijaros que como aquí en la presentación vertical en este dispositivo móvil, como el ancho de pantallas son 480 píxeles, se activa el diseño mini. Sin embargo, si giro el dispositivo, se activa el diseño mediano porque ahora el ancho de pantalla son 800 píxeles y podemos ver como en esta presentación sí que me aparece el resumen, me aparece el menú normal. Y cuando vuelvo a girar, cambia la presentación, cambia el diseño y aparece la lista desplegable y el resumen de las entradas no aparece. Fijaros como sí que funciona el diseño adaptable y cómo se ve bien la página web.

Sin embargo, ahora voy a quitar la etiqueta . La quito, simplemente la comento y veamos qué pasa. Grabo la página, vuelvo al emulador y le doy a recargar. El problema que aparece es que ahora no se está aplicando el diseño adaptable. Ahora lo que el navegador de este dispositivo móvil intenta hacer es mostrar la página como se mostraría en un ordenador, y por tanto no se ve correctamente, y yo tengo que realizar zoom para poder moverme por la página. Pero como vemos, la navegación con el zoom no es correcta, tengo que estar desplazándome y tengo dificultades para leer todo el contenido de la página.

Vamos a volver a activar la etiqueta y veremos otra vez cómo se activa el diseño adaptable o adaptativo. Le doy a recargar, y me aparece otra vez el diseño esperado.

Bien, vamos a ver los CSS que he definido para lograr este efecto. En primer lugar, tengo un CSS que he llamado colors.css que simplemente me define los colores de mi página. En este ejemplo solamente he definido unos colores de fondo para los distintos bloques que componen mi página, y también he definido el color para los enlaces y el color principal del texto, que lo he puesto negro. Fijaros que he dividido el CSS en varios ficheros, lo podría haber escrito todo en uno solo, pero al dividirlo en varios ficheros me permite de una forma más cómoda saber a qué fichero debo ir para cambiar algo. Cuando yo quiera cambiar solamente los colores, me iré a este fichero; cuando quiera cambiar otra cosa, me iré al fichero correspondiente.

El siguiente fichero que he definido es el base.css. En el fichero base.css aplico aquellas propiedades que quiero que siempre se apliquen y además he definido estas tres clases que son el truco para esconder o mostrar cierto contenido según el diseño que se esté aplicando. Entonces por defecto, en base, voy a ocultar todo aquello que lleve estas clases, “display-great”, “display-medium” o “display-mini”. Luego tengo tres ficheros, “great”, “medium” y “mini”, que se activarán según el tamaño de la pantalla, ahora lo veremos. Se activa con la instrucción media, media queries, y en cada uno de estos ficheros, en “great”, “medium” y “mini” voy activando para que se muestre la clase correspondiente. Por ejemplo, en “great” activo el “display-great” para que aquello que lleve esta clase, realmente se muestre. En “medium”, activo aquello que lleve la clase “display-medium”. Y finalmente, en “mini” activo aquello que lleve la clase “display-mini”.

Si vuelvo a mi página HTML, vamos a ver los media queries, que es realmente el truco para que funcione todo esto. Más que un truco, no es un truco, es una técnica y consiste en indicar para qué medio quiero que se aplique este CSS. Aquí estoy indicando que este CSS quiero que se active para pantalla y cuando la anchura mínima de la pantalla sea 981 píxeles. Cuando se cumpla esta condición, se cargará y se aplicará este CSS. Si no se cumple esta condición, no se aplica este CSS.

El segundo CSS “medium”, lo he definido también para pantalla y para un ancho mínimo de 481 píxeles y un ancho máximo de 980 píxeles. Fijaros que es justo un píxel menor que el tamaño anterior. Y el último CSS, el “mini”, el que se aplica en dispositivos con una pantalla pequeña, es también para pantalla, para “screen” y cuando la máxima anchura sean 480 píxeles. Por tanto, cuando yo estoy viendo la página web así de grande, no se están cargando todos los CSS. ¿Qué CSS se aplica? Se aplica “colors”, se aplica “base” y de estos tres se aplicará sólo “great”.

En “base” estoy escondiendo en principio todo lo que le he puesto la clase display-mini, display-medium y display-great. Todo eso por defecto aparecerá escondido. Pero, como estoy diciendo que se está cargando este CSS, el “great” me activará, me mostrará, todo aquello que lleve la clase display-great. Por tanto, consigo que sólo se vea lo que lleve esta clase y los que lleven otra clase quedarán ocultos. Y la misma filosofía se aplica con “medium” y con “mini”.

Como podemos ver, puedo también en cada uno de los CSS aplicar ciertas propiedades que solamente se aplicarán cuando se cargue este CSS. Por ejemplo, cuando se cargue el CSS “great”, es decir, cuando la anchura mínima sea 981 píxeles, se alinea el texto de los encabezados , , se realiza la maquetación en dos columnas del menú de navegación y de la sección principal y se centra todo el contenido de la página, ya que el contenido de la página va encerrado; por un lado tenemos el y por otro lado tenemos el wrapper que encierra el menú y la zona de contenido principal. Todo eso es lo que hacemos en el CSS “great”, para tamaños de pantalla grande.

Fijaros que aquí está la maquetación a dos columnas, una maquetación típica realizada con float. En “medium” realizamos realmente poco, dejamos que todo se presente en su forma normal y únicamente cambiamos el tipo de letra a “Georgia”. Vamos a verlo. Aquí tenemos la presentación grande y al hacer pequeña la ventana del navegador se presenta con la presentación mediana que únicamente ha cambiado el tipo de letra.

Y por último, la presentación mini, volvemos a cambiar el tipo de letra, ponemos “Arial”. Vamos a verlo, cómo cambia el tipo de letra y se muestra “Arial” y también cambio el tipo de letra de la lista desplegable para que ocupen todo el ancho de pantalla y salgan con un tipo de letra ligeramente mayor que el tipo de letra normal. De esta forma logro que el menú sea más ancho, sea más grande y sea más fácil de activar cuando estamos trabajando con un dispositivo de pantalla táctil como un teléfono móvil.

Ya para terminar, algo que se me ha olvidado antes explicar, el componente “Windows Resizer” que tengo instalado aquí en Google Chrome. Una vez instalado se activa este icono que me permite cambiar el tamaño de la ventana del navegador a alguno de estos tamaños prefijados. Por ejemplo, puedo fácilmente cambiar el tamaño a 320 por 480, como si fuese un teléfono móvil, o puedo ponerle 640 por 480, o por ejemplo 1024 por 768. Es una herramienta muy cómoda para cambiar el tamaño de la ventana del navegador e intentar simular distintos dispositivos.

Para finalizar, te invito a ver la tercera parte de este vídeo, en el que te indico varias referencias y fuentes de información que te pueden ayudar a continuar aprendiendo el diseño adaptativo. 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.