Cómo crear una plantilla front-end para Joomla! desde cero (parte 4)

Escrito por | 01 Diciembre 2014 | Publicado en Diciembre 2014
Y llegó el momento. Veremos cómo aplicar el principio “Mobile First” del diseño adaptable (“responsive design”) y aprovecharemos las ventajas que nos brinda la propiedad CSS “flex” para lograr que nuestro sitio se muestre correctamente en cualquier dispositivo conectado a Internet: smartphones (o iPhones), tablets (o iPads), ordenadores portátiles (notebooks, laptops), ordenadores de escritorio y otros dispositivos con pantallas más grandes.

Las hojas de estilos

Boilerplate nos brinda dos hojas de estilos ubicadas en la carpeta templates/miplantilla/css.

figura-01-las-hojas-de-estilo

El archivo normalize.min.css contiene muchos estilos predefinidos que sirven para uniformizar o “estandarizar” la forma en que cada navegador mostrará el contenido de nuestro sitio. Como Boilerplate ya hizo el “trabajo sucio” por nosotros, no necesitamos modificar el contenido de este archivo.

El archivo main.css también contiene algunos estilos predefinidos que podemos modificar y nos brinda dos zonas donde podemos escribir nuestras propias reglas CSS.

figura-02-main.css

Las reglas de estilo generales las colocaremos en la zona titulada como “Author’s custom styles” (en la figura, inicialmente a partir de la línea 64). Las reglas de estilos adaptables (o “responsive”) las colocaremos en la zona titulada como “Media queries” (en la figura, inicialmente a partir de la línea 82).

El principio “Mobile first”: empezar desde 20em

Se considera una buena práctica empezar a maquetar nuestro sitio desde la vista en dispositivos móviles (smartphones o iPhones) cuyo ancho de pantalla es 320px (equivalente a 20em). Según los requisitos de nuestro proyecto, el esquema es el siguiente:

figura-05-mobile

Considerando que todo elemento HTML es una caja, lo primero que haremos es garantizar que el contenido de todos los elementos se ajuste al borde de su caja. De esta manera, no tendremos que realizar ¿complicados? cálculos aritméticos para establecer los márgenes (margin y padding) y evitar que aparezca esa desagradable barra de desplazamiento horizontal (scroll) cuando las dimensiones de nuestra web sobrepasa los límites del ancho de la pantalla.

figura-04-box-sizing

Para fines didácticos, aplicaremos un color de fondo a cada sección del sitio según el esquema mostrado líneas arriba.

figura-05-colores-de-fondo

Inicialmente, nuestro sitio debe verse así en un dispositivo móvil:

figura-06-vista-previa-320px

De aquí en adelante y cuando sea conveniente, aprovecharemos las ventajas que nos brinda el uso de las “cajas flexibles” (o “flexbox”) para obtener un diseño adaptable (o “responsive”).

Si aplicamos la propiedad CSS “flex” a un elemento HTML, éste se convierte en un “contenedor flexible” de manera que los otros elementos HTML que se encuentran dentro de él ajustarán sus dimensiones para llenar el espacio disponible.

La propiedad CSS “flex” es relativamente nueva y ya es compatible con todos los navegadores modernos.

Continuemos con la maquetación. El <header> es un contenedor flexible cuyos elementos <div class=”logo”> y <nav class=”mainmenu”> deben situarse en una columna (verticalmente) ocupando todo el ancho de la pantalla.

figura-07-header-320px

Hemos asignado al <div class=”logo”> una altura de 80px (que es la misma altura de la imagen), hemos centrado el contenido y con el “overflow” ocultamos las etiquetas <h1> del título y <p> del eslogan.

El módulo del menú principal es una lista desordenada <ul> que se encuentra dentro de la etiqueta <nav class=”mainmenu”>. Por lo tanto, dicha lista <ul> actuará también como contenedor flexible cuyos elementos de lista <li> deben ubicarse en una fila (horizontalmente) justificados al centro del contenedor.

Se ha ocultado el título <h3> del módulo del menú principal mediante una regla CSS. Sin embargo, también es posible hacerlo desde el panel de administración al momento de configurar el módulo.

Ahora nuestro sitio se mostrará así desde 320px (o 20em):

figura-08-final-320px

Primer media-query: desde 35em

Según los requerimientos del proyecto, el sitio debe mostrarse en tablets o iPads en posición vertical (o “portrait”) según el esquema de la figura:

figura-09-tablet-portrait

Observamos que los módulos de las posiciones “left” y “right” deben colocarse en una fila (horizontalmente) ocupando la mitad del ancho de la pantalla.

El <section class=”main”> será un contenedor flexible y sus elementos deben acomodarse de la siguiente manera:

  • El <article class=”content”> ocupará todo el ancho de la pantalla.
  • Los <aside class=”left”> y <aside class=”right”> se desplazarán debajo del <article class=”content”> y ocuparán el 50% del ancho de la pantalla.

figura-10-media-query-35em

Nuestro sitio debe verse así en una tablet o en un iPad en posición vertical (o “portrait”) desde los 560px (o 35em).

figura-11-vista-previa-35em

Segundo media-query: desde 48em

Nuestro sitio debe mostrarse según el siguiente esquema en tablets o iPads en posición horizontal (o “landscape”) desde los 768px (o 48em).

figura-12-tablet-landscape

Ahora el <div class=”logo”> y el <nav class=”mainmenu”> deben ubicarse en una fila (horizontalmente). Será suficiente orientar los elementos del contenedor flexible <header> en una fila y centrarlos verticalmente.

figura-13-media-query-48em

Nuestro sitio se verá así en una tablet o en un iPad en posición horizontal (o “portrait”) desde los 768px (o 48em).

figura-14-vista-previa-48em

Tercer media-query: desde 60em

Ahora tenemos que lograr que nuestro sitio se vea según el siguiente esquema en ordenadores portátiles.

figura-15-laptop

Los elementos del contenedor flexible <section class=”main”> deben colocarse horizontalmente en una misma línea. El <aside class=”left”> debe ubicarse a la izquierda del <article class=”content”> y el <aside class=”right”> debe estar a la derecha. También debe modificarse los anchos de los tres elementos de manera que el ancho del <article> sea el doble del ancho de cada <aside>.

figura-15-media-query-60em

Nótese que la propiedad CSS “order” nos permite cambiar el orden en que se muestran los elementos del contenedor flexible sin necesidad de modificar la estructura HTML.

En la siguiente imagen se muestra el aspecto que tendrá nuestro sitio en ordenadores portátiles desde los 960px (o 60em).

figura-16-vista-previa-60em

Último media-query: desde 80em

Veremos cuál será el aspecto de nuestro sitio en ordenadores de escritorio y pantallas más grandes.

figura-17-desktop

El ancho máximo del <header>, <section class=”main”> y <footer> será de 80em (o 1280px) y todo el sitio se mostrará centrado horizontalmente. El ancho del <article class=”main”> debe ser el triple del ancho de cada <aside>.

figura-18-media-query-80em

Nuestro sitio ahora se verá así en un ordenador de escritorio y en dispositivos con pantallas más anchas desde los 1280px (u 80em).

figura-19-vista-previa-80em

En la siguiente figura se muestran todas las modificaciones que hemos hecho en la hoja de estilos css/main.css.

figura-20-maincss-final

Finalmente, nuestra plantilla cumple con todos los requerimientos del proyecto: está optimizada para verse correctamente en cualquier navegador web y se adapta a cualquier dispositivo conectado a Internet. En otras palabras, hemos logrado crear una plantilla “responsive” para el front-end de nuestro sitio en Joomla!

El trabajo “pesado” ya está hecho y es obvio que todavía tenemos que ajustar los estilos del componente y los módulos de Joomla! para que nuestro sitio tenga un aspecto más atractivo. Pero eso lo dejamos para el próximo artículo de esta serie.

Hasta la próxima. ¡Abur!

Visto 24865 veces Etiquetado como Spanish, Desarrollador
César Vargas-Machuca B.

César Vargas-Machuca B.

Freelance web developer (front-end). I am focused on responsive web design, SEO and Joomla!

Frequent reader. Passionate about good music. Amateur chef. Friend of animals. Overly punctual. I hate spam. Single yesterday and today. Peruvian, always!

Desarrollador web independiente (front-end). Diseño websites en Joomla!, adaptables al entorno del usuario y optimizados para los motores de búsqueda.

Lector frecuente. Apasionado por la buena música. Cocinero aficionado. Amigo de los animales. Excesivamente puntual. Detesto el spam. Soltero ayer y hoy. Peruano, ¡siempre!