Uso del Framework "Twitter Bootstrap" para construir desde 0, una plantilla adaptable para Joomla
En este artículo vamos a comprender los conceptos básicos usados en el sistema de plantillas de Joomla. Cuando se inicia la construcción de algún sitio, nos planteamos las interrogantes siguientes: ¿Construyo una plantilla desde 0? ¿Adquiero una de algún club de plantillas? ¿Modifico una existente? Para poder tomar una decisión útil es necesario comprender el proceso de creación de una plantilla en Joomla, lo cual, no es algo científico.
Las Plantillas en Joomla
Joomla se compone de una interfaz de usuario y una zona de administración. Ambas partes tienen sus propias plantillas, las cuales se almacenan en las carpetas:
- / templates - Para la interfaz de usuario
- / administrator / templates - Para la zona de administración
Cada plantilla tiene su propia carpeta. En Joomla 2.5 se encuentran dos plantillas preinstaladas no adaptables (Beez 2 y 5) y una designada a ejemplo del aspecto que tiene una plantilla básica (Atomic).
- / templates / atomic - Plantilla base para crear una propia
- / templates / beez_20 - Plantilla estándar de Joomla
- / templates / beez_5 - Es la versión HTML5 de la plantilla beez 2
- / templates / system - En esta carpeta Joomla almacena todos los archivos que son comunes para todas las plantillas, por ejemplo, la “página de error” y la de “fuera de línea”
Para la administración, se sigue la misma configuración:
- / administrator / templates / bluestork - Plantilla estándar y predeterminada de la administración
- / administrator / templates / hathor - Plantilla opcional para la administración. Es accesible y los colores son personalizables.
- / administrator / templates / system - En esta carpeta Joomla almacena todos los archivos que son comunes para todas las plantillas, por ejemplo, la “página de error”
¿Cómo crear una nueva plantilla?
Existen dos opciones para crear una nueva plantilla:
- Empezar desde el principio con la creación de una carpeta con todos los archivos necesarios
- Copiar una plantilla existente y modificarla
En este artículo nos centraremos en la primera opción. Vamos a crear una plantilla para la interfaz de usuario desde 0 basada en el Framework “Twitter Bootstrap”, que sea adaptable y compatible con Joomla 2.5. Lo haremos de la forma más simple posible, ya que el objetivo de este artículo es comprender la estructura de las plantillas en Joomla.
Nombre de la Plantilla
En primer lugar, necesitamos un nombre para nuestra plantilla. Dicho nombre aparecerá en el archivo XML, en la base de datos y en el sistema de archivos del servidor web. Evite caracteres especiales y espacios en blanco en el nombre. Para este ejemplo, la plantilla se llamará “cocoate”.
Archivos y Carpetas
Creamos una carpeta en / templates con el nombre “cocoate”.
Dentro colocamos una subcarpeta con el nombre “css” y los siguientes archivos.
- / templates / cocoate / index.php
- / templates / cocoate / templateDetails.xml
index.php
<?php
defined('_JEXEC') or die;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
</head>
<body >
<jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
<jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="right" style="xhtml" />
<jdoc:include type="modules" name="footer" style="none" />
</body>
</html>
El archivo index.php es la “página principal” de la plantilla, o lo que es lo mismo, el “panorama general”. Dentro de este archivo todas las partes y piezas de la plantilla (CSS, JavaScript, contenido de Joomla) van a ser cargadas. En nuestro ejemplo, hemos cargado el contenido de Joomla con los comando<jdoc:include ...>, los cuales cargan el “head” (encabezado), el contenido de los módulos en función de la posición del módulo (Que es un módulo) y, por supuesto, un component (componente). Sólo puede mostrarse un único componente por página.
templatesDetails.xml
El archivo de configuración que contiene toda la información acerca de archivos, opciones y posiciones necesaria para mostrar la plantilla en el gestor de plantillas, y para poder crear un paquete instalable comprimido. Sin este archivo, Joomla no será capaz de encontrar tu plantilla.
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "https://www.joomla.org/xml/dtd/1.6/template-install.dtd"> <install version="2.5" type="template" method="upgrade"> <name>cocoate</name> <creationDate>2012-07-17</creationDate> <author>Hagen Graf</author> <authorEmail>Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo. </authorEmail> <authorUrl>http://cocoate.com</authorUrl> <copyright>Copyright (C) 2012 cocoate</copyright> <version>1.0</version> <description><![CDATA[ <p>cocoate is a template exercise from scratch.<p> ]]></description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <folder>css</folder> </files> <positions> <position>top</position> <position>breadcrumbs</position> <position>footer</position> <position>left</position> <position>right</position> <position>footer</position> </positions> </install>
Descubre e Instala tu Plantilla
Después de crear los dos archivos y las carpetas, tenemos que descubrir e instalar la plantilla. Ir a Extensiones -> Gestor de Extensiones -> Descubrir. Haga clic en el icono en la parte superior “Descubrir”. Verá su plantilla recién creada (Figura 1). Marque la plantilla y haga clic en instalar (Figura 2). Desde Joomla 1.6, una plantilla se "registra" en la base de datos en la tabla “_extensions”.
Figura 1: Descubrir la plantilla cocoate
Figura 2: Instalar la plantilla cocoate.
Durante el proceso de instalación, se ha creado automáticamente un estilo para su plantilla. Marque este estilo (Extensiones -> Gestor de plantillas) y conviertalo en el estilo de plantilla por defecto (Figura 3).
Figura 3: Ponga la plantilla cocoate, como la plantilla por defecto.
Ahora visite su sitio web para ver una primera visión de nuestro sitio (Figura 4)
Figura 4: El sitio web con la plantilla nueva
Integrar los Archivos de Twitter Bootstrap
Ahora bien, es necesario integrar Twitter Bootstrap antes de continuar. En el momento de escribir este texto, la versión 2.1.1 es la última versión.
En el ejemplo que estoy creando, voy a usar el paquete de Twitter Bootstrap que viene con la documentación incluida, (http://twitter.github.com/bootstrap/getting-started.html) (Figura 5). Descargue y descomprima el paquete y copie la carpeta “assets” en la carpeta de la plantilla cocoate (Figura 6).
Figura 5: Sitio web de Twitter Bootstrap
Figura 6: Copiar y mover la carpeta "assets"
La carpeta “assets” contiene los archivos necesarios como son, los CSS y JavaScript y viene con imágenes predefinidas e iconos.
Más tarde, cuando se tenga más experiencia con las plantillas de Joomla, usted puede poner los archivos necesarios de Twitter Bootstrap en una carpeta diferente. Para nuestro ejemplo, es más fácil utilizar la carpeta “assets”.
Integrar Twitter Bootstrap en la plantilla
Twitter Bootstrap viene con tres plantillas de ejemplo llamadas “hero”, “fluid” y “starter-template”. Puede verlas haciendo clic en los archivos de la carpeta “example”.
Nuestro objetivo es combinar los comandos relacionados con Joomla a uno de estos ejemplos. Para el ejemplo he elegido la plantilla “fluid” (fluid.html).
El archivo / templates / cocoate / index.php contiene todas las partes necesarias de una plantilla en Joomla.
<?php
defined('_JEXEC') or die;
// detecting site title
$app = JFactory::getApplication();
?>
Esto es código php y un típico comienzo de una plantilla en Joomla. El objeto $app contiene datos útiles acerca de su sitio en Joomla, por ejemplo, el nombre de su sitio web.
<!DOCTYPE html> <html lang="en">
Este Doctype es la versión en HTML5 , y viene del ejemplo de Twitter Bootstrap.
En la sección head tenemos que crear los Metatags de Joomla a través de un comando
<head>
<meta charset="utf-8">
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/bootstrap.css" type="text/css" media="screen" />
...
<!-- ... more Bootstrap files ... -->
...
<link rel="apple-touch-icon-precomposed" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ico/apple-touch-icon-57-precomposed.png">
</head>
La sección <body> puede ser en su mayoría copiada del ejemplo fluid.html. Es importante incorporar los comandos <jdoc> en el lugar correcto.
Este es un ejemplo para el menú superior. Tiene que poner un módulo de menú en la posición top-menu y puede, por ejemplo mostrar el nombre del sitio del objeto $app.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
...
<a class="brand" href="#"><?php echo $app->getCfg('sitename'); ?></a>
<div class="nav-collapse">
<jdoc:include type="modules" name="top-menu" style="none" />
</div>
</div>
</div>
La página principal se encuentra en la clase "Fluid Container". Cuenta con un sistema de grillas de 12 filas por defecto. Utilizamos 9 de ellas para la visualización del componente de Joomla y 3 más para una barra lateral a la derecha, llamada “right”. El lado derecho sólo se muestra si hay módulos publicados.
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<div class="hero-unit">
<jdoc:include type="component" />
</div>
</div><!--/row-->
</div><!--/span-->
<div class="span3">
<?php if($this->countModules('right')) : ?>
<div class="well sidebar-nav">
<jdoc:include type="modules" name="right" style="none" />
</div><!--/.well -->
<?php endif; ?>
</div><!--/span-->
</div><!--/row-->
</div><!--/.fluid-container-->
La última parte de nuestra plantilla son los archivos JavaScript de Twitter Bootstrap.
<script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/jquery.js"></script>
<script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
Como puede ver, el Framework JavaScipt, jQuery se carga y también la versión mínima de Twitter Bootstrap. Se puede ver el contenido del archivo index.php completo aquí /templates/cocoate/index.php.
El resultado como pueden apreciar no es el esperado (Figura 7), pero se ve como un sitio web y es ... adaptable. ¡Pruebe con la ventana de su navegador!.
Figura 7: Primera vista a la nueva plantilla.
Overrides en Joomla
Hasta ahora, todo ha sido fácil. Ahora el trabajo real comienza. Hay que reemplazar el valor predeterminado de salida de Joomla HTML para obtener el máximo provecho del Framework Twitter Bootstrap (Figura 8). Si usted no sabe lo que quiero decir con Overrides, eche un vistazo aquí (para desarrolladores) y aquí (para los usuarios).
Figura 8: HTML Overrides
El menú desplegable
Joomla no tiene un menú por defecto con una opción desplegable pero Twitter Bootstrap ofrece soporte para los menús desplegables y, por supuesto, queremos tener exactamente esta función en nuestra plantilla. Es bastante difícil de aprender todos los detalles sobre la salida HTML de los módulos. Para este capítulo, sugiero usar distribuciones existentes. Gracias al trabajo de Gary Gisclair es posible descargar la plantilla Strapped y usar los overrides existentes. Para hacer esto solamente hay que copiar toda la carpeta /html de dicha plantilla en la carpeta / templates / cocoate.
Ahora, utilizando los datos por defecto de Joomla asignamos el módulo main menu a la posición top-menu. Para que la clase CSS coincida con la correcta, añadimos "nav-dropdown" en el sufijo de la clase del módulo (Extensiones -> Gestor de módulos -> Menú principal -> Editar -> Opciones avanzadas) (Figura 9).
Figura 9: Main Menu - Opciones avanzadas
¡Funciona!
La comunicación entre Joomla y Twitter Bootstrap está trabajando. El menú desplegable es totalmente adaptable e incluso las imágenes se cambian de tamaño automáticamente (Figura 10).
Figura 10: Plantilla adaptable basada en Twitter Bootstrap
Próximos Pasos
Desde mi punto de vista, los próximos pasos son:
- Simplemente jugar con otras tecnologías (CSS, JS, HTML5, Joomla, PHP, Twitter Bootstrap)
- Vea la documentación de Twitter Bootstrap
- Crear un CSS personalizado
- Utilice los parámetros de Joomla para configurar la plantilla
Conclusión
Espero que ahora sean capaces de decidir si desean profundizar en las plantillas de Joomla integrando el Framework Twitter Bootstrap o simplemente elegir una plantilla ya hecha.
Versión original: Using the Twitter Bootstrap Framework to build a responsive Joomla! Template from Scratch por Hagen Graf
Traducido por: Carlos Rodríguez
Miembro de: Joomla! equipo de Marketing y Difusión en español
Sobre el autor
By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/
Comentarios