En la actualidad, es relativamente fácil encontrar plantillas gratuitas o comerciales que podemos adaptar a las necesidades de nuestros proyectos web basados en Joomla! Pero también es cierto que, muchas veces, nos hemos visto en la tentación de forzar que el proyecto se adapte a las limitaciones de las plantillas creadas por terceras personas. Esto nunca será una buena práctica.

Considerando que cada proyecto web tiene características y requerimientos diferentes, es necesario que cada plantilla se desarrolle según este criterio. La gran ventaja de crear nuestras propias plantillas es que siempre tendremos el control total del diseño y la maquetación; por lo tanto, podremos realizar cualquier modificación cuando sea necesario.

Este artículo está dirigido a todos aquellos usuarios entusiastas de Joomla! que, como tú, desean dar el primer paso en la creación de sus propias plantillas sin depender de nadie.

Contenido y apariencia: juntos pero no revueltos

Una plantilla es una extensión de Joomla! que nos permite cambiar la apariencia de nuestro sitio. Recordemos que Joomla!, como cualquier CMS, separa el contenido del sitio y su apariencia. Por un lado, el contenido será gestionado por una base de datos (PHP y mySQL) y por otro lado la apariencia estará determinada por la plantilla (HTML, CSS, JavaScript). Por lo tanto, cuando modifiquemos una plantilla, solamente cambiará la apariencia del sitio mientras que el contenido permanecerá inalterable.

Existen dos tipos de plantillas para Joomla!:

• La plantilla pública (front-end), que controla la apariencia del contenido que se muestra a los visitantes de nuestro sitio.
• La plantilla de administración (back-end), que controla la apariencia de la interfaz del panel de administración de Joomla!

En esta oportunidad nuestro objetivo será crear nuestra propia plantilla para el front-end.

Conocimientos previos

Debes tener dominio de las dos herramientas básicas de la maquetación web: HTML5 y CSS3. Como ya estamos en el año 2014, se supone que ya sabes que el "responsive web design" ya no es una tendencia sino que se ha convertido en una obligación. La idea es que nuestro sitio se adapte correctamente a cualquier dispositivo conectado a Internet.

Y aunque no es necesario ser un gurú de la programación, es altamente recomendable que tengas nociones básicas de PHP o que al menos estés familiarizado con su sintaxis. Además, no vamos a tocar ni la base de datos ni el core PHP de Joomla!. Eso se lo dejamos a los programadores. "Zapatero a tus zapatos".

Herramientas de desarrollo

Para escribir el código será suficiente un editor de textos como Sublime Text, Brackets, Notepad++ o el que sea de tu preferencia. Por favor, evita el uso de software más complejo (como Dreamweaver y similares) porque, además de derrochar los recursos de tu ordenador, en realidad no es necesario.

Siempre es una buena práctica disponer de varios navegadores para probar si nuestra maquetación se muestra correctamente en cada uno de ellos. Seguramente ya tienes instalado Google Chrome e Internet Explorer. Si eres usuario de Mac, pues estás acostumbrado a navegar con Apple Safari. Te recomiendo que también instales Mozilla Firefox y Opera Browser. Estos son los cinco navegadores más utilizados para ordenadores de escritorio y laptops.

Como también probaremos nuestra plantilla en dispositivos móviles, dejo a tu criterio y elección el uso de un smartphone (o iphone) y una tablet (o ipad).

Al principio nos centraremos en la maquetación con HTML5 y CSS. Pero, considerando que las plantillas de Joomla! son archivos PHP, en algún momento se presentará la necesidad de realizar las pruebas en un servidor local antes de “subir” nuestra plantilla al sitio de producción. Por lo tanto, también dejo a tu criterio y elección la instalación de un servidor local en tu ordenador. Por ejemplo, si eres usuario de Windows, puedes elegir entre WampServer, Xampp o el que sea de tu preferencia.

Ahora sí, ¡empecemos!

Boilerplate como punto de partida

El proceso de creación de una plantilla desde cero no implica, de ninguna manera, el tener que reinventar la rueda. Para empezar tenemos que estar seguros de que nuestra plantilla esté optimizada para cualquier navegador por una sencilla razón: cada navegador interpreta las etiquetas HTML de diferente manera y también muestra el contenido de distinta forma. Felizmente, para nosotros, la Internet pone a nuestra disposición muchos frameworks HTML/CSS que nos ayudan a no perder tiempo en la optimización y concentrarnos en la maquetación con HTML y CSS.

Entre los principales frameworks “front-end” están Boilerplate, 320andup, Rock Hammer, Bootstrap, Foundation y muchos más.

En esta oportunidad elegiremos a Boilerplate como nuestra plataforma de trabajo porque, en mi opinión, es el que nos brinda lo mínimo indispensable para iniciar cualquier proyecto web. Es menester indicar que, por ahora no necesitamos de todas las características que nos ofrece este potente framework; así que elegiremos solamente las opciones que utilizaremos en el desarrollo de nuestra plantilla.

En la página oficial de Boilerplate hacemos clic en el botón “Get a custom build” para personalizar las opciones de descarga.

En la sección de "pre-configuración" seleccionamos la primera opción (“Classic H5BP) que nos brinda las características básicas de Boilerplate.

En la sección de "sintonía fina" marcamos solamente las opciones que se muestran en la figura.

Finalmente ya podemos descargar nuestro framework en el archivo comprimido initializr-verekia-4.0.zip.

Estructura preliminar de los archivos de nuestra plantilla

Al descomprimir el archivo, tendremos una carpeta llamada "initializr". Copiamos dicha carpeta en nuestro directorio de trabajo y la renombramos con el nombre de nuestra plantilla; en este caso será "miplantilla" y tendrá el siguiente contenido preliminar.

Ya tenemos las herramientas necesarias para dar el primer paso en el desarrollo de nuestra plantilla. Ahora veamos cuáles son los requerimientos y las características de nuestro sitio.

¿Qué queremos hacer?

Nuestro sitio de Joomla! consta de cuatro secciones:

• Inicio.
• Portafolio.
• Blog.
• Contacto.

En principio, además del contenido, también se desea mostrar dos módulos:

• El acceso de usuarios.
• Una lista con los artículos recientes del blog.

Es indispensable que el contenido del sitio se adapte correctamente a cualquier dispositivo conectado a Internet, según los siguientes esquemas.

Para smartphone e i-phone.

Para tablet e i-pad en posición “portrait” (vertical).

Para tablet e i-pad en posición “landscape” (horizontal).

Para laptop.

Para ordenadores de escritorio y otros dispositivos de pantalla grande.

¿Cómo lo haremos?

Una vez que hayamos definido todos los requisitos de nuestro sitio y seguros de que con Boilerplate nuestra plantilla está optimizada para todos los navegadores, ahora podremos configurar nuestra plantilla y concentrarnos en la maquetación con HTML5 y CSS3. Así que no te pierdas la segunda parte de esta serie de artículos.

Hasta la próxima. ¡Abur!