En la primera parte de esta serie definimos los requerimientos de nuestro sitio y elaboramos algunos esquemas que nos ayudaron a visualizar cuál será el aspecto que tendrá nuestra plantilla en teléfonos móviles, tablets, laptops y ordenadores de escritorio.
También vimos la gran ventaja de utilizar un framework "front-end" como Boilerplate para optimizar nuestra plantilla y tener la seguridad de que se mostrará correctamente en todos los navegadores.
Ahora podemos empezar a configurar nuestra plantilla front-end para nuestro sitio en Joomla!.
Organizando los archivos de nuestra plantilla
Después de descargar las opciones mínimas de Boilerplate, tenemos una carpeta llamada miplantilla que contiene tres carpetas y dos archivos:
El contenido específico de cada carpeta es la que se muestra en la figura:
Antes de empezar con la maquetación es indispensable que realices las siguientes modificaciones:
- Renombra el archivo index.html como index.php.
- Elimina el archivo normalize.css que se encuentra dentro de la carpeta css (específicamente en css/normalize.css).
- Con tu editor de textos, crea un nuevo archivo templateDetails.xml (en blanco) y guárdalo junto al index.php.
- Con tu editor de imágenes, crea una imagen de 320x80 píxeles correspondiente al logotipo y guárdalo como logo.png dentro de la carpeta img (específicamente en img/logo.png).
Ahora, la estructura de archivos será la siguiente:
Es una buena práctica que cada una de las carpetas de nuestra plantilla siempre contenga un archivo index.html (en blanco) para evitar el acceso a la lista de archivos desde el navegador. Por lo tanto, será necesario incluir copias de dicho archivo en las carpetas css, img, js y js/vendor.
Si seguiste las instrucciones al pie de la letra, deberías tener la siguiente estructura final:
Por el momento, trabajaremos con tres archivos:
- templateDetails.xml: es el archivo que contiene toda la información sobre nuestra plantilla.
- index.php: es nuestra plantilla propiamente dicha.
- css/main.css: es nuestra hoja de estilos.
Debido a que nuestra plantilla es un archivo PHP, necesitamos trabajar desde un servidor local (localhost). Tal como lo mencioné en la primera parte, se asume que ya has instalado un servidor local en tu ordenador y, obviamente, también tienes una instalación de Joomla! 3.x completamente operativa.
Primero, lo primero: el archivo templateDetails.xml
Este archivo contiene toda la información relacionada con nuestra plantilla como el nombre de la plantilla, la fecha de creación, los datos del autor, las carpetas y los archivos que contiene la plantilla, y lo más importante: las posiciones donde colocaremos los módulos que utilizaremos en nuestro sitio.
Según la estructura de archivos, la plantilla consta de dos archivos principales: index.php y templateDetails.xml. Y hay tres carpetas principales: css (contiene las hojas de estilo), img (contiene todas las imágenes de la plantilla) y js (contiene las librerías JavaScript).
Las carpetas y los archivos que contiene la plantilla se declaran en la sección comprendida entre las etiquetas <files>...</files>. Por ejemplo, si quisiéramos incorporar el archivo favicon.ico, agregaríamos la línea <filename>favicon.ico</filename>. Y si tuviéramos que incorporar una carpeta fonts con tipografías web sería suficiente con añadir la línea <folder>fonts</folder> en la misma sección.
Las posiciones para los módulos se declaran en la sección comprendida entre las etiquetas <positions>...</positions>.
Recordemos que, según los requerimientos de nuestro sitio web, la plantilla debe tener tres posiciones:
- "mainmenu": para colocar el módulo del menú principal.
- "left": para colocar el formulario de acceso de usuarios.
- "right": para colocar el módulo de los artículos recientes del blog.
Si en el futuro necesitáramos agregar otra posición, por ejemplo para colocar un "slideshow" con diapositivas, pues añadiríamos la línea <position>slideshow</position> en dicha sección.
Como podemos observar, la gran ventaja de crear nuestras propias plantillas es que siempre tenemos el control total y podemos realizar cualquier modificación cuando sea necesario.
En la tercera parte de esta serie de artículos nos concentraremos en el corazón de nuestra plantilla: el archivo index.php.
Hasta la próxima. ¡Abur!