Construyendo mi Sitio Web Joomla 2.5 - Parte 1
Lo mejor de desarrollarte tus propias extensiones, es que las puedes personalizar a tu gusto y necesidad. Esto no quiere decir que tengamos que desarrollar todo en nuestro sitio, para construir un sitio Joomla o añadirles funcionalidades externas para ampliar el mismo, ya que en el directorio de extensiones de Joomla (JED), existen actualmente más de 10 000 extensiones, donde algunas son imprescindibles para cualquier sitio. Pero si eres de los que decides tomar el control casi total de tu sitio, pues aquí te traemos una serie de tutoriales para encaminarte por este camino difícil.
Hay muchos puntos que hay que tener en cuenta a la hora de comenzar un sitio Joomla desde cero, puntos que no son objetivos de este tutorial pero si deben de ser de conocimiento de nosotros. Por ejemplo, en este artículo, a pesar de ser para Joomla! 1.7 tratan una parte de estos puntos. Crear un sitio Joomla! 1.7 desde cero.
Ahora, suponiendo que ya sabemos cómo queremos construir nuestro sitio, es hora de pasar a la primera pregunta. ¿Que plantilla uso para mostrar públicamente mi sitio? La respuesta a esta pregunta a veces se nos torna un poco complicada, debido a la variedad de opciones que se pueden fusionar entre sí, y crear muy fácilmente un buen dolor de cabeza. Estas opciones pueden variar entre, por ejemplo, usar un framework de plantillas como Gantry de RocketTheme o T3 de JoomlArt, descargar e instalar una plantilla de algún club específico, ver de estas opciones cual es la más factible presupuestariamente para mi o para el cliente, etc, es una decisión que hay que tomar no muy a la ligera.
Existe otra vía para llegarnos hacer de una plantilla para nuestro interés, "Crearla nosotros mismos". Y es específicamente de esto, de lo que vamos a tratar en estos tutoriales. Vamos a realizar nuestra plantilla personalizada, a nuestro gusto y necesidad.
Antes de empezar
Necesariamente se debe tener:
- Conocimiento básico de HTML, CSS
- Conocimiento del entorno de Joomla! y conceptos básicos (qué es un módulo, que es un componente, etc.)
- Un servidor local o remoto con Joomla! 2.5.8 en español instalado;
- Un editor de programación (por ejemplo Notepad++ para Windows);
Maqueta de la Plantilla
Cuando uno está diseñando una plantilla, lo más recomendable es empezar dibujando en cualquier hoja, un dibujo de como quedaría la misma. Esto lo realizamos para tener una idea visual de como sería el aspecto ya sea general o en partes específicas o las dos, de nuestro sitio.
Luego de tener un pre-diseño de la idea, entonces comenzamos a realizar la maquetación de la misma. La maqueta de nuestro sitio no es más que la idea pre-diseñada anteriormente en un papel, pero ya visualizada en un navegador. Quiero resaltar, que esta maqueta aún no es una plantilla de Joomla, solo es una idea de cómo se vería en Joomla. Esto nos ayudará a desarrollar nuestra plantilla de una forma más organizada y coherente.
Para realizar nuestra maqueta, ubicamos dentro de una carpeta, con un nombre de su preferencia (en mi caso Jemd) los archivos y carpetas siguientes:
- Archivo Jemd / index.html
- Carpeta Jemd / assets / css
- Carpeta Jemd / assets / img
- Carpeta Jemd / assets / js
- Carpeta Jemd / css
<-- Nota: El nombre "Jemd" lo usaremos en otros lados, por ejemplo a la hora de incorporar los archivos .css propios. Por lo que si cambias el nombre, asegúrate de cambiarlo en los archivos y códigos pertinentes. -->
Para la elaboración de nuestro sitio vamos a usar un framework que hizo a Joomla! en su versión 3.0, al primer CMS adaptable (responsive), tanto en el frontend como en la administración. Como ya habrás imaginado hablo de Twitter Bootstrap.
Integrar a Bootstrap a la Maqueta
Para añadir a este excelente Framework a nuestra maqueta, necesitaremos añadir sus archivos, para luego llamarlos desde nuestro archivo index.html.
Primeramente obtendremos los archivos correspondiente a Bootstrap. En el momento de escribir este texto, la versión 2.2.2 era la última. En el ejemplo que estoy creando, voy a usar el paquete de Twitter Bootstrap que viene con la documentación incluida, (https://github.com/twitter/bootstrap/zipball/master).
Descarga y descomprime el paquete, y copie para la carpeta "assets" , de la carpeta donde se encuentra los archivos de la maqueta, el contenido ubicado en el paquete de bootstrap:
Copiar para la carpeta Jemd / assets / css lo siguiente:
- Bootstrap2.2.2 / docs / assets / css / bootstrap.css
Copiar para la carpeta Jemd / assets / js lo siguiente:
- Bootstrap2.2.2 / docs / assets / js / jquery.js
Con esto ya podemos empezar a realizar nuestra maqueta. Para ello añadiremos el siguiente código a nuestro archivo index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Equipo de Marketing y difusión de Joomla! en Español</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Jemd Style -->
<link href="/../Jemd/assets/css/bootstrap.css" rel="stylesheet">
<!-- Jemd End Style -->
</head>
<body class="site">
<!-- Jemd Body -->
<div class="body">
<div class="container">
<!-- Jemd Header -->
<div class="header">
<div class="header-inner">
<a class="pull-left" href="#">
LOGO
</a>
<div class="header-search pull-right">
SEARCH
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="navigation">
NAVIGATION
</div>
<!-- Jemd Carousel -->
<div> Carousel </div>
<!-- End carousel -->
<div class="row">
<!-- Jemd Begin Sidebar -->
<div id="sidebar" class="span3">
<div class="sidebar-nav">
SIDEBAR
</div>
</div>
<!-- End Sidebar -->
<div id="content" class="span9">
<!-- Jemd Begin Content -->
CONTENT
<!-- End Content -->
</div>
<div id="aside" class="span3">
<!-- Jemd Begin Right Sidebar -->
ASIDE
<!-- End Right Sidebar -->
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="container">
<hr />
FOOTER
<p class="pull-right"><a href="#top" id="back-top">Ir arriba</a></p>
<p>© Nombre - Fecha</p>
</div>
</div>
<!-- Jemd javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/../Jemd/assets/js/jquery.js"></script>
</body>
</html>
Al darle clic al archivo index.html ya podremos apreciar como va quedando nuestra maqueta.
Expliquemos algunos puntos interesantes del código:
1- Bootstrap hace uso de ciertos elementos HTML y propiedades CSS que requieren el uso del doctype HTML5. Incluya el mismo al comienzo de todos sus proyectos.
<!DOCTYPE html>
<html lang="en">
...
</html>
2- Active los CSS para la adaptabilidad en el proyecto mediante la inclusión de la meta etiqueta adecuada y la hoja de estilo adicional, en el head del documento. A pesar que en esta primera parte no haremos nuestra maqueta/plantilla adaptable, lo dejaremos incluido desde ya.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
La hoja de estilos adicional nos da la adaptabilidad en la plantilla, pero como aún no la vamos a utilizar pues no la ponemos. Está hoja de estilo se encuentra en (Bootstrap2.2.2 / docs / assets / css / bootstrap-responsive.css).
3- Si se fijan en la imagen anterior o en el código, podrán darse cuenta que ya tenemos definida las distintas posiciones (LOGO ; SEARCH ; NAVIGATION...) que usaremos en la plantilla. Quisiera resaltar algo que haremos más adelante. Si se fijan, las posiciones "SIDEBAR" y "ASIDE" son laterales, por lo que la posición "CONTENT" que es donde se mostrarán todos nuestros artículos y demás, quedaría en el medio. Se vería algo así:
|
SIDEBAR |
CONTENT |
ASIDE |
En la imagen anterior, aparece "ASIDE" debajo de "SIDEBAR", esto es debido a que como "SIDEBAR" tiene una clase spam3 y "CONTENT" tiene una clase spam9 y ellos están contenido dentro de una clase row, pues ocupan todo el ancho posible y desplazan a "ASIDE" , que está también contenido dentro de la clase row, hacia abajo. La meta de nosotros es lograr que no se desplace hacia abajo sino que los tres o dos o uno, pueda permanecer en línea. Pero esto lo veremos más adelante, por ahora lo dejamos así.
<--Nota: El trabajo básico con las distintas clases que usa el Framework Bootstrap deberás conocerlo por ti mismo, en la documentación excelente que brinda Bootstrap, nosotros nos enfocaremos más en características un poco más avanzada. Note también que usamos algunas Clases e ID que son de uso propios, por lo que no pertenecen al Framework.-->
Insertando el Carrusel
Bootstrap en su sección de JavaScript nos da la posibilidad de implementar cosas interesantisimas utilizando jQuery. Una de ellas es crear un Carrusel de imágenes.
Como se daran cuenta, más abajo del carrusel nos muestra su código para poder utilizarlo, por lo que solo es seguir el mismo.
Lo primero es tener la biblioteca jQuery en nuestra maqueta, para que pueda funcionar todo como debe. Esto ya lo hemos hecho, cuando añadimos esta línea en la sección de archivos javascript, al final del archivo index.html:
<!-- Jemd javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/../Jemd/assets/js/jquery.js"></script>
Lo segundo es integrar el archivo .js correspondiente al carrusel. Como hemos descargado el paquete que viene junto con la documentación, pues cargaremos únicamente este archivo. Dicho archivo se encuentra en (Bootstrap2.2.2 / docs / assets / js) ahí localizamos el archivo con el nombre bootstrap-carousel.js.
Este archivo lo ponemos en la carpeta (Jemd / assets / js) y añadimos la siguiente línea al archivo index.html en la sección de javascript. Quedaría de la siguiente forma:
<!-- Jemd javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/../Jemd/assets/js/jquery.js"></script>
<script src="/../Jemd/assets/js/bootstrap-carousel.js"></script>
Con esto hecho, lo que viene restando es hacer el carrusel. Así que guiándonos por el código de ejemplo que nos brinda Bootstrap, ubicamos nuestro código en la sección del carrusel, dentro del archivo index.html. Quedaría de la siguiente forma:
<!-- Jemd Carousel -->
<div id="myCarousel" class="carousel slid">
<div class="carousel-inner">
<div class="item active">
<img src="/../Jemd/assets/img/slide-01.png" alt="">
<div class="carousel-caption">
<div class="pull-left">
<h4>Comunidad Ñ</h4>
<p>Nosotros sabemos que tienes mucho que contar y hay una comunidad completa con muchas ganas de escucharte.</p>
</div>
<a class="btn btn-primary pull-right" href="#">Únete hoy mismo</a>
</div>
</div>
<div class="item">
<img src="/../Jemd/assets/img/slide-02.jpg" alt="">
<div class="carousel-caption">
<div class="pull-left">
<h4>Joomla- Ñ -Magazine</h4>
<p>En un esfuerzo conjunto, tratamos de llevar mes a mes artículos de interés para nuestra comunidad.</p>
</div>
<a class="btn btn-primary pull-right" href="#">Leer más</a>
</div>
</div>
<div class="item">
<img src="/../Jemd/assets/img/slide-03.jpg" alt="">
<div class="carousel-caption">
<div class="pull-left">
<h4>Más Joomla Ñ</h4>
<p>Tratamos de concentrar nuestra fuerza para cada vez ser una comunidad más unida.</p>
</div>
<a class="btn btn-primary pull-right" href="#">Ver más</a>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- End Carousel -->
Como pueden ver solo hemos seguido la estructura básica que nos brinda bootstrap. Antes de ver como quedo lo que hicimos, incluimos en la carpeta (Jemd / assets / img) tres imágenes con una dimensión de 940 x 240 px , y con los siguientes nombres y formato: slide-01.png ; slide-02.jpg ; slide-03.jpg . Si ejecutamos el archivo index.html , veremos que ya nuestra maqueta tiene el siguiente aspecto:
Al carrusel se le pueden cambiar las opciones que trae por defecto, como la del tiempo de retraso entre imagen e imagen, pero esto lo haremos en otro tutorial, por ahora bastará hacer un ejemplo para que cargue todo por defecto . Esto se hace muy fácilmente a través de la biblioteca jQuery. Para ello insertamos el siguiente código jQuery en la sección javascript del archivo index.html:
<script>
!function ($) {
$(function(){
// carousel demo
$('#myCarousel').carousel()
})
}(window.jQuery)
</script>
<--Nota: Hay que tener cuidado con cambiar ciertas cosas en la estructura del carrusel. Por ejemplo el id (myCarousel) que tiene el contenedor (div) general del carrusel, se usa para hacer referencia a él, en el código jQuery antes expuesto. También es usado por ejemplo, en los botones de "Siguiente" y "Anterior" representados por una flecha.
Hay otras cosas que sí se pueden modificar con confianza, pero por ahora lo dejaremos así.-->
Optimizando la Maqueta
Ya casi está lista la maqueta, solo falta incorporar unos estilos propios, para luego llevarla a una plantilla de Joomla.
Para agregar algunos estilos personalizados, creamos y añadimos a la carpeta (Jemd / assets / css) el archivo template.css y le incorporamos los siguiente estilos:
body{
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333;
background-color: white;
}
body.site {
border-top: 3px solid #08C;
padding: 20px;
background-color: #F4F6F7;
}
.body .container {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
padding: 20px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
-webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05);
}
Luego solo falta cargarlo en el index.html en la sección de estilos. Quedaría de la siguiente forma:
<!-- Jemd Style -->
<link href="/../Jemd/assets/css/bootstrap.css" rel="stylesheet">
<link href="/../Jemd/css/template.css" rel="stylesheet">
<!-- Jemd End Style -->
Luego podrán comprobar que nuestra maqueta es ya, lo que queríamos que fuera, por lo que está lista para convertirla en una plantilla para Joomla!.
Creación de la Plantilla
En este tutorial, como ya aclaramos al principio, se debe de tener ciertos conocimientos de Joomla!, uno de ellos es saber lo básico de las plantillas. Para más información, puede empezar por revisar estos enlaces que le dejo a continuación:
- Trabajando con plantillas
- Desarrollando tempates para Joomla 1.5 (A pesar de que es para Joomla 1.5, la cual es una versión actualmente sin soporte, le recomendamos que lo lea, ya que existen actualmente muchas de las cosas explicadas ahí que se usan en las plantillas de Joomla! 2.5)
Aclarado esto, nos ponemos en función de nuestra plantilla. Para insertar nuestra plantilla en nuestro sitio Joomla, usaremos la función de "Descubrir". Por lo que para empezar colocamos en / misitio / templates una nueva carpeta con un nombre de nuestra elección, en mi caso le he puesto "jemd".
Luego empezamos creando los archivos y carpetas necesarios para la plantilla. En mi caso me ha quedado de la siguiente forma:
<--Nota: Recordar que dentro de cada carpeta a parte de los archivos que iremos introduciendo, va a ver un archivo común para todas, el cual es un index.html que puede estar en blanco o con la siguiente línea:
<!DOCTYPE html><title></title>
-->
Creación del index.php
Ahora abrimos y editamos el archivo principal. Para ello, copiamos todo el código del archivo index.html de la maqueta y lo pegamos en el archivo index.php de la plantilla. Hecho esto, comenzaremos a editar el archivo.
Lo primera sentencia es para denegar el acceso directo a este archivo, es decir, que si no se abre por la vía que es, no se muestre. La segunda es para obtener información del sitio, como el título y la descripción, obtener referencias a archivos javascript y css que se están cargando, y más. Esto lo ponemos al principio de todo:
<?php
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
?>
Luego sustituimos esta parte:
<!DOCTYPE html>
<html lang="en">
por esta otra:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
Ahora pondremos la directiva que nos carga el título de la página en cuestión, metatags, feed, etc, dentro de la etiqueta <head></head> . Esta directiva es (<jdoc:include type="head" />).
Como dentro del head, es donde cargamos los diferentes estilos a usar, y en nuestra maqueta hacemos uso de archivos .css , pues tenemos primeramente que copiar el archivo template.css que está en la maqueta en la carpeta css (Jemd / assets / css) y pegarlo en la carpeta css de la plantilla (/misitio / templates / jemd / css). Luego añadimos esta línea para integrarlo a la plantilla:
<?php $doc->addStyleSheet('templates/'.$this->template.'/css/template.css'); ?>
Todo esto viene quedando de la siguiente forma:
<?php
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The following JDOC Head tag loads all the header and meta information from your site config and content. -->
<jdoc:include type="head" />
<?php
/* The following line loads the template CSS file located in the template folder. */
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
?>
</head>
Habrán notado que no hemos cargado el archivo .css correspondiente al framework Twitter Bootstrap, esto es debido a que vamos a integrar al framework de una forma más flexible. Pero esto lo veremos más adelante. Por ahora continuaremos con la creación de la plantilla.
Como vamos a cambiar la forma en que integramos a bootstrap a la plantilla, entonces eliminamos todo las líneas de código que hay en la sección de javascript, ya que no va a ser falta que la pongamos. Esta sección esta en lo último del archivo index.php.
Solo resta declarar las directivas para la ubicación de las posiciones de la plantilla, incluyendo la que nos carga el contenido principal del sitio. También incluiremos la declaración que se utiliza para mostrar errores de petición a la base de datos. Esto se hace a través de las sentencias:
<jdoc:include type="modules" name="posición" style="estilo" />
<jdoc:include type="component" />
<jdoc:include type="message" />
Con todo esto hecho nuestro archivo index.php queda de la siguiente forma:
<?php
defined('_JEXEC') or die;
$doc = JFactory::getDocument();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The following JDOC Head tag loads all the header and meta information from your site config and content. -->
<jdoc:include type="head" />
<?php
/* The following line loads the template CSS file located in the template folder. */
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
?>
</head>
<body class="site">
<!-- Jemd Body -->
<div class="body">
<div class="container">
<!-- Jemd Header -->
<div class="header">
<div class="header-inner">
<a class="pull-left" href="#">
LOGO
</a>
<div class="header-search pull-right">
<jdoc:include type="modules" name="jemd-search" style="none" />
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="navigation">
<jdoc:include type="modules" name="jemd-navigation" style="none" />
</div>
<!-- Jemd Carousel -->
<div id="myCarousel" class="carousel slid">
<div class="carousel-inner">
<div class="item active">
<img src="/../Jemd/assets/img/slide-01.png" alt="">
<div class="carousel-caption">
<div class="pull-left">
<h4>Comunidad Ñ</h4>
<p>Nosotros sabemos que tienes mucho que contar y hay una comunidad completa con muchas ganas de escucharte.</p>
</div>
<a class="btn btn-primary pull-right" href="#">Únete hoy mismo</a>
</div>
</div>
<div class="item">
<img src="/../Jemd/assets/img/slide-02.jpg" alt="">
<div class="carousel-caption">
<div class="pull-left">
<h4>Joomla- Ñ -Magazine</h4>
<p>En un esfuerzo conjunto, tratamos de llevar mes a mes artículos de interés para nuestra comunidad.</p>
</div>
<a class="btn btn-primary pull-right" href="#">Leer más</a>
</div>
</div>
<div class="item">
<img src="/../Jemd/assets/img/slide-03.jpg" alt="">
<div class="carousel-caption">
<div class="pull-left">
<h4>Más Joomla Ñ</h4>
<p>Tratamos de concentrar nuestra fuerza para cada vez ser una comunidad más unida.</p>
</div>
<a class="btn btn-primary pull-right" href="#">Ver más</a>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<!-- End carousel -->
<div class="row">
<?php if ($this->countModules('jemd-sidebar')): ?>
<!-- Jemd Begin Sidebar -->
<div id="sidebar" class="span3">
<div class="sidebar-nav">
<jdoc:include type="modules" name="jemd-sidebar" style="none" />
</div>
</div>
<!-- End Sidebar -->
<?php endif; ?>
<div id="content" class="span9">
<!-- Jemd Begin Content -->
<jdoc:include type="message" />
<jdoc:include type="component" />
<!-- End Content -->
</div>
<?php if ($this->countModules('jemd-aside')) : ?>
<div id="aside" class="span3">
<!-- Jemd Begin Right Sidebar -->
<jdoc:include type="modules" name="jemd-aside" style="none" />
<!-- End Right Sidebar -->
</div>
<?php endif; ?>
</div>
</div>
</div>
<!-- Footer -->
<div class="footer">
<div class="container">
<hr />
<jdoc:include type="modules" name="jemd-footer" style="none" />
<p class="pull-right"><a href="#top" id="back-top">Ir arriba</a></p>
<p>© Nombre - Fecha</p>
</div>
</div>
<!-- Jemd javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</body>
</html>
<--Nota: Podrán observar que hemos usado la función countModules antes de algunas posiciones, que como bien su nombre indica, es para devolver el número de módulos activos en la posición dada. Esto nos será muy útil, para cuando no pongamos nada, por ejemplo, en los laterales, pues la posición no se muestra y el contenido puede abarcar ese ancho desocupado.
También se darán cuenta que en la posición del "LOGO" no escribimos nada. Esto es debido a que el logo lo cargaremos a través de los parámetros de la plantilla.-->
Creación del templateDetails.xml
Este archivo es determinante para que la plantilla sea reconocida en la administración de Joomla. Por lo que nuestro archivo templateDetails.xml, queda de la siguiente forma:
<?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">
<extension
version="2.5"
type="template"
client="site">
<name>Jemd</name>
<creationDate>19/1/13</creationDate>
<author>Carlos Rodríguez</author>
<authorEmail>email</authorEmail>
<authorUrl>http://www.facebook.com/groups/JoomlaMarketing/</authorUrl>
<copyright>Copyright</copyright>
<license>License</license>
<version>2.5.0</version>
<description>TPL_JEMD_XML_DESCRIPTION</description>
<files>
<folder>html</folder>
<folder>css</folder>
<folder>images</folder>
<folder>language</folder>
<folder>js</folder>
<filename>index.php</filename>
<filename>index.html</filename>
<filename>favicon.ico</filename>
<filename>templateDetails.xml</filename>
</files>
<positions>
<position>jemd-footer</position>
<position>jemd-search</position>
<position>jemd-navigation</position>
<position>jemd-sidebar</position>
<position>jemd-aside</position>
</positions>
<languages folder="language">
<language tag="es-ES">es-ES/es-ES.tpl_jemd.ini</language>
<language tag="es-ES">es-ES/es-ES.tpl_jemd.sys.ini</language>
</languages>
<config>
<fields name="params">
<fieldset name="advanced">
<field name="logoFile" type="media"
label="TPL_JEMD_LOGO_LABEL"
description="TPL_JEMD_LOGO_DESC" />
</fieldset>
</fields>
</config>
</extension>
Aquí vamos a señalar dos cosas. La primera es que hemos puesto los archivos para el idioma en la plantilla, pero aún no lo hemos creado, por lo que procedemos a su creación. Para esto colocamos dentro de la carpeta (/misitio / templates / jemd / language / es-ES) los archivos es-ES.tpl_jemd.ini y es-ES.tpl_jemd.sys.ini conteniendo lo siguiente:
TPL_JEMD_XML_DESCRIPTION="Plantilla del Equipo de Marketing y Difusión de Joomla! en Español al estilo Bootstrap"
La constante (TPL_JEMD_XML_DESCRIPTION) la hemos declarado ya, en el archivo .xml previamente creado. El valor de dicha constante puede cambiarla a gusto propio, no es necesario dejarlo como esta.
La segunda cosa que quería señalar aquí es la introducción del parámetro "logoFile". Con este parámetro, tendremos la posibilidad de añadir una imagen como logo, de nuestra preferencia, directamente desde el gestor multimedia. Para esto tendremos que editar nuestro archivo index.php.
En nuestro archivo lo que haremos primeramente será obtener en una variable una serie de información de nuestro sitio ($app = JFactory::getApplication();). Luego a través de esta variable obtendremos el nombre de nuestro sitio ($sitename = $app->getCfg('sitename');) que lo incluiremos en la obtención del parámetro del logo de nuestra plantilla ($logo = '<img src="'. JURI::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';).
Esto quedaría de la siguiente forma:
<?php
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
// Detecting Active Variables
$sitename = $app->getCfg('sitename');
// Logo file
$logo = '<img src="'. JURI::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';
?>
.
.
.
Ya con esto, tendremos en la variable $logo la imagen de nuestro logo. Por lo que ahora sí podemos editar la posición en donde va el logo en nuestro archivo index.php. Aquí solo tendremos que mostrar la variable y ponerle un enlace para el inicio de nuestro sitio, para si dan clic en él, lo diriga al "home" de nuestro sitio. Vendría quedando de la siguiente forma:
<div class="header">
<div class="header-inner">
<a class="pull-left" href="/<?php echo $this->baseurl; ?>">
<?php echo $logo;?>
</a>
.
.
.
Y con esto hecho ya podemos hacer que la plantilla forme parte de nuestro sitio Joomla.
Trabajando en la administración
Para hacer visible y funcional nuestra plantilla en el sitio, abrimos la administración y vamos a Gestor de extensiones -> Descubrir y damos clic en el botón "Descubrir" para que salga la plantilla. Luego la marcamos y damos clic en el botón "Instalar".
Si ponemos nuestra plantilla como la predeterminada en el gestor de plantillas, y luego miramos la parte pública de nuestro sitio veremos algo como esto:
Esto es debido a que nos falta algunos pasos aún por realizar, como la integración de nuestro framework.
Integrar al Framework Twitter Bootstrap
Se habrán preguntado el porqué hemos quitado los archivos de bootstrap, que habíamos puesto previamente en la maqueta. Esto es debido a que vamos a incorporarlo a través de un plugin. Pero ¿porqué un plugin? Es mejor vía plugin, porque puedes desarrollar una o varias plantillas o distintos estilos utilizando una única librería de bootstrap. También es mejor porque al momento de actualizar a Joomla! 3.0 en adelante, mantiene la estructura, por lo que no tendrás problemas de compatibilidad con tus plantillas.
El plugin que nos va a brindar esta función es JBootstrap. Este plugin aparte de todo lo antes explicado, es gratuito. Luego de descargarlo de su página, lo instalamos en nuestro sitio a través del gestor de extensiones.
Seguido, vamos al Gestor de plugins y filtramos por "system" para encontrarlo.
Al acceder al plugin le saldrá algo como esto:
No debes preocuparte por la advertencia que te dan, ya que ahora no vamos a tocar los archivo LESS, que es lo que te están indicando. Lo que nos interesa ahora es la forma de usar este plugin en nuestra plantilla. Si se fijan en la imagen de arriba, señala un botón que te brinda toda la información necesaria para el trabajo con dicho plugin, que aunque está en inglés, no es muy complicado de entender.
Lo primero que haremos es incluir el framework. Esto se hace con la siguiente línea:
JHtml::_('bootstrap.framework');
Por lo que editamos nuevamente nuestro archivo index.php para que quede de la siguiente forma:
<?php
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
// Detecting Active Variables
$sitename = $app->getCfg('sitename');
// Logo file
$logo = '<img src="'. JURI::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';
/* The following line loads the framework Bootstrap with the plugin " Jbootstrap ". */
/* This method will include needed Java script files for Twitter Bootstrap. */
JHtml::_('bootstrap.framework');
?>
.
.
.
Con esta sentencia incluimos el framework y todos los archivos JavaScript necesarios.
Ahora solo resta añadir las hojas de estilo y listo. Esto lo hacemos con la siguiente línea:
JHtmlBootstrap::loadCss();
Por lo que si editamos nuestro archivo index.php, quedaría de la siguiente forma:
.
.
.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- The following JDOC Head tag loads all the header and meta information from your site config and content. -->
<jdoc:include type="head" />
<?php
/**
* The following line loads bootstrap css files with the plugin " Jbootstrap ".
* This will include , boostrap.css and boostrap.css fixes style sheets within your head tag and position them above your template.css file.
**/
JHtmlBootstrap::loadCss();
/* The following line loads the template CSS file located in the template folder. */
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
?>
</head>
.
.
.
Si vamos ahora a la parte pública del sitio veremos algo como esto:
Vemos que bootstrap está funcionando en nuestro sitio, pero aún nos falta algo para llegar al resultado que queremos. Esto que nos falta son las imágenes.
Pero antes de esto vamos a revisar algo. El carrusel que hemos creado en nuestra plantilla está puesto directamente en el archivo index.php, por lo que esto representa una vía muy poco factible ya que los cambios hay que hacerlos directamente en el archivo.
Una de las soluciones que encontre, ya que estamos desarrollando nuestro sitio, es crear un módulo para el carrusel. Pero no te preocupes, porque verás que fácil es crear un módulo en Joomla. Simplemente, creamos un nuevo "Módulo HTML personalizado" en nuestro sitio Joomla y copiamos para ahí el código del carrusel que tenemos en el index.php. Luego cambiamos las imágenes a través del editor, le asignamos una posición al módulo y listo. Ya vez, has desarrollado tu primer módulo en Joomla!.
Creamos el módulo y cortamos y pegamos el código del carrusel:
Ahora ubicamos las imágenes correspondiente y le asignamos una posición. Te preguntarás qué posición. Pues creamos una nueva en donde estaba el código del carrusel anteriormente, en el archivo index.php. Quedaría de la siguiente manera:
<!-- Jemd Carousel -->
<?php if ($this->countModules('jemd-carousel')): ?>
<jdoc:include type="modules" name="jemd-carousel" style="none" />
<?php endif; ?>
<!-- Jemd End Carousel -->
Luego de esto ponemos la nueva posición en el archivo templateDetails.xml para que Joomla reconozca la posición. Ahora le asignamos la nueva posición al módulo y listo. Vamos a la parte pública del sitio y vemos lo siguiente:
Si se fijan en el carrusel, si no tocan la flechas de siguiente o anterior, no se mueve. Esto es porque nos falta la función jQuery para su movimiento. Para ello creamos el archivo template.js y lo colocamos en la carpeta (/misitio / templates / jemd / js) y le incorporamos las siguientes líneas:
!function (jQuery) {
jQuery(function(){
// carousel demo
jQuery('#myCarousel').carousel()
})
}(window.jQuery)
Luego necesitamos llamar al archivo desde la plantilla, para ello usaremos la siguiente línea:
$doc->addScript('templates/'.$this->template.'/js/template.js');
Entonces nuestra sección de script en el archivo index.php queda de la siguiente forma:
.
.
.
<!-- Jemd javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<?php $doc->addScript('templates/'.$this->template.'/js/template.js'); ?>
.
.
.
Ahora, volvemos a la página, y nuestro módulo carrusel, estará funcionando como debe.
Personalizando la plantilla
Ya con bootstrap corriendo en nuestra plantilla, podemos hacer varias cosas al estilo "straped". Por ejemplo, podemos crear un formulario de acceso o un campo de búsqueda con estilos de bootstrap. A los que ya han probado Joomla! 3 , todas estas cosas vienen incluida por defecto gracias a la nueva librería JUI. Pero en Joomla! 2.5 tenemos que hacer un pequeño cambio para lograr tener un resultado similar.
Campo de Búsqueda
Nuestra personalización la haremos de arriba hacia abajo. Comencemos por crear una caja de búsqueda. Para esto, creamos un nuevo módulo "Buscar" que nos mostrará un campo de búsqueda, y le asignamos la posición definida en la plantilla para la búsqueda en nuestro sitio.
Si lo publicamos y nos fijamos en nuestro sitio veremos algo como esto:
Se fijaran que nuestro campo tiene la apariencia normal que tienen en Joomla! 2.5, pero eso durará muy poco. Para llevarlo al estilo bootstrap y a una apariencia de Joomla! 3.0 , haremos uso de otra excelente característica de Joomla, "El override". Con esto podemos sobrescribir la salida o el output de componentes y módulos.
En este caso es un módulo que se encuentra en / misitio / modules / mod_search. De aquí copiamos el archivo default.php que está en .../ mod_search / tmpl. Luego vamos a la carpeta html de nuestra plantilla y crearemos una carpeta con el nombre mod_search y dentro colocamos el archivo previamente copiado. Con esto ya podemos sobrescribir la salida del módulo, sin tocar los archivos del core de Joomla!.
A pesar que hemos hecho esto, el módulo se seguirá visualizando igual, por lo que editaremos el archivo default.php que acabamos de ubicar en la carpeta / html / mod_search.
Bootstrap en su documentación sobre los campos de búsqueda, nos indica que la etiqueta <form> debe tener la siguiente clase, class="form-search" para que tome el aspecto bootstrap. Esto lo haremos aproximadamente en la línea 12, donde está la etiqueta form de la siguiente manera:
<form action="<?php echo JRoute::_('index.php');?>" method="post">
Aquí le añadimos la clase y nos quedaría de la siguiente forma:
<form class="form-search" action="<?php echo JRoute::_('index.php');?>" method="post">
Si vamos al sitio veremos que ya va obteniendo la forma deseada:
Modificamos, siguiendo la documentación de Bootstrap, la caja de búsqueda o la etiqueta input. Esto lo hacemos aproximadamente en la línea 15, donde veremos lo siguiente:
$output = '<label for="mod-search-searchword">'.$label.'</label><input name="searchword" id="mod-search-searchword" maxlength="'.$maxlength.'" class="inputbox'.$moduleclass_sfx.'" type="text" size="'.$width.'" value="'.$text.'" onblur="if (this.value==\'\') this.value=\''.$text.'\';" onfocus="if (this.value==\''.$text.'\') this.value=\'\';" />';
Aquí añadiremos a la etiqueta <input> dos clases (span2 y search-query) por lo que nos queda de la siguiente forma:
$output = '<input name="searchword" id="mod-search-searchword" maxlength="'.$maxlength.'" class="inputbox'.$moduleclass_sfx.' span2 search-query" type="text" size="'.$width.'" value="'.$text.'" onblur="if (this.value==\'\') this.value=\''.$text.'\';" onfocus="if (this.value==\''.$text.'\') this.value=\'\';" />';
Con esto obtenemos el siguiente resultado:
Para darle el toque final a nuestro módulo de búsqueda, añadiremos la siguiente clase input-append aproximadamente en la línea 13, donde está:
<div class="search<?php echo $moduleclass_sfx ?>">
Lo sustituimos por:
<div class="search<?php echo $moduleclass_sfx ?> input-append">
Y ya con esto obtenemos un resultado al estilo Bootstrap y Joomla! 3.
Logo del Sitio
Esta parte ya la hemos adelantado, al crear en el archivo templateDetails.xml el parámetro logoFile para la inserción de una imagen de nuestra elección, para el logo de nuestro sitio. Por lo que buscamos una imagen (en mi caso, la mía tiene una dimensión de 300 x 62 px) y la ubicamos en nuestro sitio para cargarla a través de las opciones de la plantilla.
Para ello vamos al Gestor de plantillas y damos clic en la plantilla nuestra. Luego, en el panel de la derecha seleccionamos la imagen, previamente subida, y guardamos los cambios. Vamos a la parte pública de nuestro sitio para ver el logo ya insertado.
Si te distes cuenta, en la imagen del panel para insertar el logo, teníamos unas cadenas que aún no le hemos puesto texto. Esto lo hacemos de la siguiente forma.
Vamos a la carpeta / language / es-ES de nuestra plantilla y ubicamos el archivo es-ES.tpl_jemd.ini y escribimos lo siguiente:
TPL_JEMD_LOGO_LABEL="Logo"
TPL_JEMD_LOGO_DESC="Escoga un logo personalizado para la plantilla del sitio"
Las constante como, (TPL_JEMD_LOGO_LABEL) son las que están en el parámetro del archivo .xml. Si miramos nuevamente las opciones de la plantilla, nos encontraremos que ya han sido traducidas.
Menú de Navegación Principal
Primeramente crearemos nuestro menú en el Gestor de menús de nuestro sitio. Luego a través del módulo "menú" publicamos el menú creado previamente, en la posición correspondiente. Hecho esto, observaremos un resultado similar a este, en la parte pública del sitio.
Se darán cuenta que a nuestro menú le falta algo de estilo. Pero por suerte tenemos a alguien encargado de esa importante tarea, Bootstrap. Por lo que accedemos al módulo "menú" y le añadimos estas dos clases, nav nav-pills. Se vería de la siguiente forma:
<--Nota: Resaltar que a la izquierda y derecha de la clase "nav" existe un espacio. Es imprescindible que exista dicho espacio para el buen funcionamiento de las clases.-->
Ahora guardamos los cambios y visitamos el sitio público, para que se lleven una excelente sorpresa.
Contenido
Comenzaremos creando un artículo cualquiera, para poder tener un ejemplo por donde guiarnos. En mi caso he utilizado una clase de bootstrap que me permite resaltar un texto o mensaje. Dicha clases es, hero-unit. Aquí les muestro un ejemplo de su uso, aunque en la documentación de bootstrap también la pueden ver:
<div class="hero-unit">
<h1>Título</h1>
<p>Texto</p>
<p>
a class="btn btn-primary btn-large" href="#">Leer más</a>
</p>
</div>
Luego de crear el artículo, lo enlazamos con el menú, sino es que ya lo tienen hecho, y visualizamos el sitio para ver como queda. Veremos que debajo del carrusel se muestra nuestro artículo:
Ahora vamos a lograr lo que hablábamos al principio, de tratar de lograr que todo se mantenga en una línea y que ninguno de los laterales tenga que desplazarse hacia abajo. Pero primero veamos el problema en sí.
Si creamos un módulo (por ejemplo, un formulario de acceso) para ubicarlo en uno de los laterales, por ejemplo en la posición "jemd-sidebar", verán que todo sigue funcionando muy bien.
Pero si creamos otro módulo y lo ubicamos en en el otro lateral (jemd-aside), obtendremos resultados negativos:
Esto es debido a que como el lateral "SIDEBAR" y el "CONTENT" ocupan todo el espacio, pues desplazan a "ASIDE" hacia abajo.
Esta situación la resolvemos muy facilmente editando nuestro archivo index.php. Entonces, pensemos en algo, los ancho de los laterales lo vamos a mantener, por lo tanto, el que va a variar su ancho será el contenido.
Si el ancho de los laterales es de la clase "span3" y el del content es de "span9" y como la suma tiene que llegar a "span12", entonces entre las tres posiciones tenemos que lograr eso. Para esto, nos hacemos las siguientes preguntas ¿Sí se está visualizando los dos laterales, que debe hacer el "content"? Respuesta: Hay que asignarle la clase "span6" para no desplazar al lateral hacia abajo. ¿Y si se muestra un solo lateral, ya sea "jemd-sidebar" o "jemd-aside" qué debe hacer el "content"? Respuesta: Debe permanecer con su clase "span9" ya que no afecta nuestro diseño. ¿Y en caso que ninguno de los dos laterales se muestre, que debe hacer el "content"? Respuesta: Hay que asignarle la clase "span12" para que ocupe todo el ancho disponible.
Ahora, esto mismo lo llevamos a código. Sería de la siguiente forma:
// Adjusting content width
if ($this->countModules('jemd-aside') && $this->countModules('jemd-sidebar'))
{
$span = "span6";
}
elseif ($this->countModules('jemd-aside') && !$this->countModules('jemd-sidebar'))
{
$span = "span9";
}
elseif (!$this->countModules('jemd-aside') && $this->countModules('jemd-sidebar'))
{
$span = "span9";
}
else
{
$span = "span12";
}
Si lo insertamos en nuestro archivo index.php, quedaría de la siguiente manera:
.
.
.
// Detecting Active Variables
$sitename = $app->getCfg('sitename');
// Logo file
$logo = '<img src="'. JURI::root() . $this->params->get('logoFile') .'" alt="'. $sitename .'" />';
// Adjusting content width
if ($this->countModules('jemd-aside') && $this->countModules('jemd-sidebar'))
{
$span = "span6";
}
elseif ($this->countModules('jemd-aside') && !$this->countModules('jemd-sidebar'))
{
$span = "span9";
}
elseif (!$this->countModules('jemd-aside') && $this->countModules('jemd-sidebar'))
{
$span = "span9";
}
else
{
$span = "span12";
}
.
.
.
Si vemos el sitio nos daremos cuenta que aún no se ha resuelto el problema. Esto es debido a que la clase correspondiente esta almacenada en la variable $span. Por lo que solo nos quedaría modificar aproximadamente la línea 98 en nuestro archivo index.php. Quedaría de la siguiente forma:
<div id="content" class="<?php echo $span;?>">
<!-- Jemd Begin Content -->
<jdoc:include type="message" />
<jdoc:include type="component" />
<!-- End Content -->
</div>
Con esto hecho ya, nuestro "content" se regula en dependencia de nuestro diseño. Si vamos al sitio veremos que felizmente todo está adaptado.
Lateral
Perfeccionemos ahora un poco los laterales. Por ejemplo, el módulo de acceso tiene su diseño de Joomla! 2.5, pero como estamos integrando a bootstrap en nuestra plantilla, llevaremos ese módulo a un nivel superior en cuanto a diseño respecta.
Para ello lo primero que haremos es utilizar la técnica del "override". Así que vamos a / misitio / modules / mod_login / y copiamos la carpeta tmpl. Esta carpeta la colocamos en la carpeta HTML de nuestra plantilla y la renombramos con el nombre mod_login. Dentro, abrimos y editamos el archivo default.php.
Lo primero que haremos será cambiar el botón "Identificarse". Para ello editamos aproximadamente la línea 54 y le agregamos las clases btn btn-primary. Esto quedaría de la siguiente forma:
<input type="submit" name="Submit" class="btn btn-primary" value="<?php echo JText::_('JLOGIN') ?>" />
Si revisan el sitio podrán ver el botón cambiado. Ahora modificaremos los input o las cajas donde ponemos el nombre de usuario y contraseña. Primero, modificaremos la del nombre de usuario. Esto se encuentra aproximadamente en la línea 40, por lo que cambiaremos esto:
<p id="form-login-username">
<label for="modlgn-username"><?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?></label>
<input id="modlgn-username" type="text" name="username" class="inputbox" size="18" />
</p>
por este otro:
<p class="input-prepend input-append" id="form-login-username">
<label class="add-on" for="modlgn-username"><i class="icon-user"></i></label>
<input class="span2" id="modlgn-username" type="text" name="username" class="inputbox" size="18" />
<span class="add-on">
<a id="lgn-username" title="¿Olvidó su usuario?" href="/<?php echo JRoute::_('index.php?option=com_users&view=remind'); ?>">
<i class="icon-question-sign"></i>
</a>
</span>
</p>
Ahora modifiquemos la de la contraseña. Esto se encuentra aproximadamente en la línea 49, por lo que cambiaremos esto:
<p id="form-login-password">
<label for="modlgn-passwd"><?php echo JText::_('JGLOBAL_PASSWORD') ?></label>
<input id="modlgn-passwd" type="password" name="password" class="inputbox" size="18" />
</p>
por este otro:
<p class="input-prepend" id="form-login-password">
<label class="add-on" for="modlgn-passwd"><i class="icon-check"></i></label>
<input class="span2" id="modlgn-passwd" type="password" name="password" class="inputbox" size="18" />
<span class="add-on">
<a id="lgn-passwd" title="¿Olvidó su contraseña?" href="/<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
<i class="icon-question-sign"></i>
</a>
</span>
</p>
Si miramos nuestro sitio tendremos el resultado siguiente:
Si se fijan bien, el icono que esta a la derecha de cada caja es un enlace, es el mismo enlace que está en ¿Recordar contraseña? ¿Recordar usuario? Por lo que podemos quitar los enlaces de abajo, porque ya los copiamos hacia otro lado con otro diseño. Para hacerlo quitamos aproximadamente desde la línea 71 a la 78. Vendría siendo las siguientes:
<li>
<a href="/<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_PASSWORD'); ?></a>
</li>
<li>
<a href="/<?php echo JRoute::_('index.php?option=com_users&view=remind'); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
</li>
<--Nota: Quisiera aclarar que lo que hemos hecho en este paso son solo agregar algunas clases del framework bootstrap, por lo que no hemos tocado nada de PHP y derivados. En la documentación de Bootstrap vas a poder ver lo que hemos hecho y más.-->
Si revisan el sitio verán que ya tenemos nuestro diseño bastante agradable y al estilo Bootstrap, pero aún iremos por más. Si creamos en la carpeta HTML de nuestra plantilla el archivo modules.php y dentro ubicamos las siguientes líneas:
<?php
// no direct access
defined('_JEXEC') or die;
function modChrome_well($module, &$params, &$attribs)
{
if ($module->content) {
echo "<div class=\"well " . htmlspecialchars($params->get('moduleclass_sfx')) . "\">";
if ($module->showtitle)
{
echo "<div class=\"page-header\"><strong>" . $module->title . "</strong></div>";
}
echo $module->content;
echo "</div>";
}
}
?>
y volvemos a revisar el sitio, podremos apreciar que no ha pasado nada. Pero si abrimos y editamos el archivo principal de nuestra plantilla, el index.php, obtendremos un resultado satisfactorio. Para ello modificamos aproximadamente la línea 92:
<jdoc:include type="modules" name="jemd-sidebar" style="well" />
y la línea 108:
<jdoc:include type="modules" name="jemd-aside" style="well" />
Si vemos nuevamente el sitio, comprobaremos que el lateral ya esta listo.
En mi caso quiero prescindir de la función "Recuérdeme", por lo que voy al Gestor de plugins y filtro por "system", ahí localizamos el plugin "Sistema - Recuérdeme" y lo despublico. Con esto podemos decir que nuestro formulario de acceso quedo impecable, pero aún le vamos agregar una última cosa, "Tooltips". Tooltips, como pueden apreciar en la documentación de bootstraps, son los cuadritos que salen una vez pasamos el mouse por encima, o damos clic, etc, en un área determinada. Nosotros vamos hacer uso de él, en los iconos de la derecha de cada caja, en el formulario de acceso. Para ello abrimos y editamos el archivo template.js ubicado en la carpeta js de nuestra plantilla. Vamos a agregar las siguientes líneas:
// tooltip forgot password
jQuery('#lgn-passwd').tooltip({placement:'right'})
// tooltip forgot username
jQuery('#lgn-username').tooltip({placement:'right'})
nuestro archivo queda entonces de la siguiente forma:
!function (jQuery) {
jQuery(function(){
// carousel demo
jQuery('#myCarousel').carousel()
// tooltip forgot password
jQuery('#lgn-passwd').tooltip({placement:'right'})
// tooltip forgot username
jQuery('#lgn-username').tooltip({placement:'right'})
})
}(window.jQuery)
Y con esto ya tenemos nuestro tooltips activado. Para verlo vamos al sitio y visualizamos lo siguiente:
Pie de Página
Aquí no vamos hacer muchos cambios, tan solo modificar aproximadamente la línea 123 en nuestro archivo index.php:
<p>© <?php echo $sitename; ?> <?php echo date('Y');?></p>
En esta línea visualizamos el nombre del sitio que está almacenado en la variable $sitename, y a través de la función date de PHP visualizamos el año. Con esto lo que obtenemos es este pequeño detalle:
Resolviendo conflicto MooTools y jQuery
Si nos logueamos en la parte pública de nuestro sitio, podremos darnos cuenta que el carrusel presenta un problema. Se va y viene en intervalos de tiempo. Esto es debido a que, a pesar de no haber cargado el framework MooTools en nuestra plantilla, el sigue ejecutándose.
A pesar que tomamos algunas medidas para evitar este conflicto, como cambiar en el archivo template.js el símbolo "$" por "jQuery" ya que ese símbolo lo utiliza ambos framework, incluimos a través del plugin de Bootstrap el "jQuery.noConflict();" para evitar conflictos. Tomamos medidas, pero por otras razones tenemos este conflicto al loguearnos en el sitio.
Podríamos empezar a rompernos la cabeza de porque esta pasando esto, y empezar a tocar archivos que no debemos tocar. Sin embargo, antes que eso les aconsejo un plugin que nos evita notablemente estos mal ratos, MooTools Enabler/Disabler. Un plugin totalmente gratuito y disponible actualmente, tanto como para Joomla 2.5 cómo 3.0.
Tras descargarlo e instalarlo a través del Gestor de extensiones de Joomla!, vamos al Gestor de plugins y filtramos por "system". Ahí buscamos el nombre "System - Mootools Activador/Desactivador" y accedemos a él. Una vez dentro, pondremos en la opción "Modo por defecto" la opción (Desactivar MooTools sólo para los items especificados), lo publicamos y esta listo. Tiene otras opciones pero por ahora nos bastará con estas.
Ahora accedemos desde la administración al item del menú que nos lleva al carrusel y demás. Aquí veremos que se nos ha añadido un nuevo campo, el cual lo configuramos en "No".
Guardamos y vamos al sitio para loguearnos nuevamente, y verán que todo funciona como debe. Si se fijan también ya las librerías de MooTools no se están cargando para este item de menú.
Último Paso o Interés
A través de estos tutoriales incluiremos esta sección para explicar un último paso o un último interés. En este caso explicaremos como personalizar el módulo "Breadcrumbs" o "Ruta de navegación" para adaptarlo al estilo bootstrap.
Comenzamos creando la posición en la que va a aparecer nuestro módulo. Para ello editamos el archivo index.php de la plantilla. Vamos a insertar nuestro módulo debajo del contenido, es decir, quedaría de la siguiente forma:
.
.
.
<jdoc:include type="component" />
<jdoc:include type="modules" name="jemd-breadcrumbs" style="none" />
.
.
.
Ahora recuerden poner la nueva posición en el archivo .xml. Luego de esto, creamos un nuevo módulo "Ruta de navegación" y lo ubicamos en la posición antes creada (lo dejamos de paso con las opciones que vienen puesta por defecto). Hecho esto, nuestro sitio se verá de la siguiente forma:
Una vez más haremos uso de la técnica "override" de Joomla. Así que ya saben como va esto, ubicamos la carpeta tmpl del módulo mod_breadcrumbs y la copiamos para la carpeta html de nuestra plantilla renombrada. Luego, abrimos y editamos el archivo default.php correspondiente. Bootstrap en su documentación nos indica que la clase principal para la ruta es, .breadcrumb, por lo que la añadiremos junto con un icono para el empezar. Esto lo haremos aproximadamente en la línea 13, donde se encuentra lo siguiente:
<div class="breadcrumbs<?php echo $moduleclass_sfx; ?>">
<?php if ($params->get('showHere', 1))
{
echo '<span class="showHere">' .JText::_('MOD_BREADCRUMBS_HERE').'</span>';
}
?>
y lo sustituimos por esto:
<div class="breadcrumb<?php echo $moduleclass_sfx; ?>">
<?php if ($params->get('showHere', 1))
{
echo '<span class="showHere"><i id="breadTooltip" class="icon-map-marker" title="' .JText::_('MOD_BREADCRUMBS_HERE').'"></i></span>';
}
?>
Con esto hecho podemos mostrarle un tooltip en el icono para mostrarle el mensaje de "Está aquí". Esto lo hacemos en el archivo template.js el cual nos queda de la siguiente forma:
!function (jQuery) {
jQuery(function(){
// carousel demo
jQuery('#myCarousel').carousel()
// tooltip forgot password
jQuery('#lgn-passwd').tooltip({placement:'right'})
// tooltip forgot username
jQuery('#lgn-username').tooltip({placement:'right'})
// tooltip breadcrumbs
jQuery('#breadTooltip').tooltip({placement:'top'})
})
}(window.jQuery)
Si visualizamos el sitio veremos el siguiente resultado:
Y para hacerlo igual que Joomla 3, pues insertamos el siguiente estilo en el archivo template.css de nuestra plantilla:
.showHere{
margin-right: 8px;
}
Si volvemos a nuestro sitio ya veremos nuestro módulo "Ruta de navegación" al estilo Bootstrap y Joomla 3.
Y con esto obtenemos una plantilla en Joomla! 2.5 al estilo Bootstrap y Joomla 3. Ya ven, no hizo falta migrar a la versión 3.0, pero si es obligatorio estar en la versión 2.5.
El resultado final es como se puede apreciar en la imagen de abajo. Para ver en funcionamiento todo lo que hicimos, hemos montado un sitio de ejemplo, con el tutorial. A medida que vayamos avanzando en los demás tutoriales, iremos modificando el mismo.
Conclusiones
Por ahora lo dejaremos aquí, ya que este tutorial se ha extendido bastante, aunque esperamos que sea de mucha ayuda para nuestra comunidad. En próximos tutoriales continuaremos el tema, ya que hay mucha tela por donde cortar, con el tema Bootstrap + Joomla.
Desarrollaremos y modificaremos otras partes de la plantilla, así como seguir haciendole modificaciones a las extensiones del core de Joomla, y porqué no, a otras extensiones de terceros que como bien expresamos al principio, son imprescindibles para cualquier sitio Joomla!. Haremos todo lo necesario para "Construir nuestro sitio Web Joomla 2.5", siempre al estilo Bootstrap y tomando como ejemplar a nuestra futura versión Joomla 3.5, pero sin olvidar en ningún momento que la versión 2.5, es la versión recomendada para todos los sitios web del 2013. Por lo que no se atrase con una versión obsoleta como Joomla! 1.5 o no se adelante con una versión que está siendo probada como es la 3.0, ya que con Joomla! 2.5 podemos tener todo de las dos y más.
Por supuesto, lo más valioso de Joomla! es su Comunidad, y como tal, te invitamos a que nos hagas llegar tus sugerencias sobre un tema concreto. Estaremos encantados de trabajar en ello y ayudarte en todo lo que podamos.
Autor: Carlos Rodríguez
Miembro del: Equipo de Marketing y Difusión de Joomla! 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