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.

En la primera parte de este tema, logramos crear nuestra plantilla al estilo Bootstrap y Joomla! 3. A pesar, que logramos construir nuestra página de inicio, todavía nos falta mucho camino por recorrer para tener bien configurado nuestro sitio. Uno de los puntos que todavía queda pendiente, es hacer que la plantilla sea adaptable (responsive).

Pero, suponiendo que todos los cambios que hemos realizado y los que vamos a realizar hayan sido directamente en un hosting, (así como el sitio de ejemplo que estamos montando a través de estos tutoriales), trae consigo que tengamos nuestro sitio online y sin contenido alguno. Por lo que no cumple ningún objetivo, el tener nuestro sitio online. Para resolver esta situación, necesitamos algo que ya estoy seguro que pensaste, "Una Página en Construcción".

Para hacernos de una página en construcción, tenemos dos caminos a seguir. Uno es tan fácil, como el simple hecho de instalar una extensión "más". En mi opinión, recomiendo una plantilla creada por TemplatePlazza o el plugin n3tComingSoon , ambos gratuitos y compatibles con Joomla! 2.5 y 3. La desventaja que le veo a este camino, es que vamos a tener que instalar otra extensión "más" en nuestro sitio, lo cual no significa que no debamos instalar extensiones para agregar funcionalidades nuevas, sino que sepamos definir cuándo una extensión es necesaria, ya que existe otra alternativa, la cuál es nuestro segundo camino.

Este camino es el de desarrollar nuestra propia página en construcción, ya que de hecho, hemos escogido el camino de personalizar, en la medida de lo posible, nuestro sitio. En caso de que no quieras hacerte de tu propia página en construcción, puedes saltarte este paso y seguir con la lectura más abajo, pero ten presente que este paso podemos verlo de otra manera. Por ejemplo, si una empresa requiere de un sitio privado, puede ser una solución, esta página para los visitantes que no tienen permiso de acceso. Otro ejemplo puede ser, que requieras de una página diferente para acceder al sitio, es decir, que tu página de aterrizaje al sitio sea un tanto diferente. Así que lo dejo a consideración de ustedes.

Maqueta "Página en Construcción"

En la primera parte cuando creamos la plantilla del sitio, utilizamos esta técnica también. En lo particular, siempre lo hago de este modo ya que me ahorra mucho trabajo de codificación y me brinda mucha facilidad a la hora de visualizar un posible resultado de lo que se quiere, ya que es un archivo .html el cual se puede abrir en cualquier lado sin necesidad de tener un ambiente apache – php – mysql corriendo por detrás, dificultad que presenta los archivos .php . Empecemos entonces.

Utilizaremos para ello la página que trae Joomla! por defecto y realizaremos una serie de cambios para mejorar su presentación y que quede más llamativa, aunque utilizando las tres opciones que Joomla nos da desde la administración, las cuales son:

• Posibilidad de añadir un logo a la página en construcción
• Posibilidad de añadir un mensaje personalizado
• Mostrar un formulario de acceso para administradores o usuarios que tengan permisos de acceder al sitio, estando aún en construcción.

Nuestro resultado final deberá verse de la siguiente forma:

Como ya pasamos por esto en la primera parte, vamos agilizar un poco más y decir solamente lo más relevante en esta parte. Para más detalle diríjase a la primera parte de esta serie.

Comenzamos creando las carpetas y archivos de nuestra maqueta:

• Archivo Jemdoff / offline.html
• Carpeta Jemdoff / css
• Carpeta Jemdoff / img
• Carpeta Jemdoff / js

Integrar a Bootstrap a la Maqueta

Primeramente obtendremos los archivos correspondiente a Bootstrap. En el momento de escribir este texto, la versión 2.3.0 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).

Luego de descargarlo y descomprimirlo, copiamos para la carpeta de la maqueta, el archivo bootstrap.css, bootstrap-responsive.css (Como pueden apreciar ya vamos a empezar a hacer que nuestro sitio sea adaptable) y jquery.js para sus respectivas carpetas, al igual que hicimos en la primera parte. Luego abrimos y editamos el archivo offline.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Jemd Offline</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <!-- Jemdoff Style -->
       <link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
       <link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">       
    <!-- Jemdoff End Style -->  
  </head>
  
  <body>
    <!-- Jemdoff Navigation -->
      <div id="jemdoff-nav">
        <div class="navbar navbar-fixed-bottom">
          <div class="navbar-inner">
            <ul class="nav">
              <li><a href="#">Inicio</a></li>
              <li><a href="#">Proyectos</a></li>
              <li><a href="#">Servicios</a></li>
              <li><a href="#">Personal</a></li>
              <li><a href="#tab5" role="button" data-toggle="modal">Administración</a></li>
            </ul>
          </div><!-- .navbar-inner -->
        </div><!-- .navbar -->
      </div><!-- #jemdoff-nav -->
    <!-- Jemdoff End Navigation -->    
    
    <!-- Jemdoff Tab Content-->
      <div id="tab1" class="default">  
        <div class="container-fluid">
          <div class="row-fluid">
           <div class="span12">
             <div id="logo">
                <h1>
                   LOGO
                </h1>
              </div> 
              <p>Estamos terminando de construir el sitio.<br>Pedimos disculpa por las molestias ocasionadas.</p>  
             </div><!-- .span -->
           </div><!-- .row-fluid -->
         </div><!-- .container-fluid -->
      </div><!-- #tab1 -->
     <!-- Jemdoff End Tab Content-->   
    
     <!-- Jemdoff Modal -->

     <!-- Jemdoff End Modal -->   
  
     <!-- Jemd javascript
  ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
      <script src="/js/jquery.js"></script> 
 </body>
</html>

Al darle clic al archivo offline.html ya podremos apreciar como va quedando nuestra maqueta.

Como pueden apreciar, no hemos hecho nada, que no halla sido visto en la primera parte, tan sólo añadir unas cuantas clases propias, otras de bootstrap y algunos ID para usarlos a continuación. Todo ellos jugaran su papel independiente para darle forma a nuestra maqueta.

Optimizando la Maqueta

Comencemos entonces a darle un poco de color a nuestra descolorida maqueta. Para ello nos va a ser falta añadir algunos estilos propios, por lo que es necesario un archivo css adicional. Creamos entonces en la carpeta / Jemdoff / css el archivo offline.css y lo abrimos para editarlo:

#tab1 {
 background: #2F789B;
}

Si vemos nuestro archivo offline.html nuevamente, se darán cuenta que no paso nada, esto porque tenemos que hacer referencia, al css previamente creado. Por lo que la sección de estilos quedaría de la siguiente forma:

<!-- Jemdoff Style -->
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
    <link href="/css/offline.css" rel="stylesheet" type="text/css">        
<!-- Jemdoff End Style -->

Y con esto si vemos nuestro fondo azul en la maqueta. Luego añadimos los siguientes estilos en el archivo offline.css:

#tab1 p {
 font-weight: 700;
 font-size: 36px;
 text-align: center;
 color: white;
 line-height: 46px;
 margin: 0;
}

.default {
 width: 100%;
 height: 100%;
 position: absolute;
 overflow: hidden;
}

#logo {
 overflow: hidden;
 padding: 50px 10px 10px 20px;
 width: 615px;
 margin: 0 auto 10px auto;
}

Y verán algo como esto:

Ya que estamos dando colores a la maqueta, pues seguimos para el menú inferior y lo pintamos también. Para ello añadimos los siguientes estilos al archivo offline.css:

#jemdoff-nav .navbar .nav {
 width: 100%;
 margin: 0;
}

#jemdoff-nav .navbar-inner {
 background: transparent;
 border-top: none;
 min-height: 36px;
}

#jemdoff-nav .navbar .nav > li {
 width: 20%;
}

#jemdoff-nav .navbar .nav > li > a {
 font-weight: 700;
 color: white;
 font-size: 14px;
 text-decoration: none;
 padding: 10px;
 display: block;
 text-transform: capitalize;
 background: #1B719B;
 text-align: center;
 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

#jemdoff-nav .navbar .nav > li:nth-child(2) a {
 background: #882480;
}

#jemdoff-nav .navbar .nav > li:nth-child(3) a {
 background: #F15D5A;
}

#jemdoff-nav .navbar .nav > li:nth-child(4) a {
 background: #F89C58;
}

#jemdoff-nav .navbar .nav > li:nth-child(5) a {
 background: #3CB5A2;
}

#jemdoff-nav .navbar .nav > li > a:hover {
 color: black;
 background: white;
 -webkit-transition: all 300ms linear;
 -moz-transition: all 300ms linear;
 -o-transition: all 300ms linear;
 -ms-transition: all 300ms linear;
 transition: all 300ms linear;
 text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

<--Nota: Quisiera resaltar el trabajo con CSS3, al usar la propiedad transition, la cual nos permite en este caso, dar un efecto de transición al color de los enlace del menu, cuando le pasamos por encima.-->

Y para darle el toque final añadimos nuestro logo. En mi caso use una imagen con una dimensión de 615 x 250 px con fondo transparente, a la cual titule logo-off. Esta imagen la guardamos en la carpeta /Jemdoff / img y la insertamos en el archivo offline.html. Quedaría de la siguiente forma:

<!-- Jemdoff Tab Content-->
  <div id="tab1" class="default">  
   <div class="container-fluid">
    <div class="row-fluid">
     <div class="span12">
      <div id="logo">
       <h1>
        <img src="/img/logo-off.png"> 
       </h1>
      </div> 
      <p>Estamos terminando de construir el sitio.<br>Pedimos disculpa por las molestias ocasionadas.</p>  
     </div><!-- .span -->
    </div><!-- .row-fluid -->
   </div><!-- .container-fluid -->
  </div><!-- #tab1 -->
 <!-- Jemdoff End Tab Content-->

Y con esto hecho tendremos el siguiente resultado:

Con esto ya tenemos dos de tres opciones en el nuevo diseño, solo vendría faltando el formulario de acceso.

Insertando Ventana Modal

Nuestro formulario de acceso vamos a mostrarlo mediante una ventana modal. Es decir, cuando el usuario pinche en el botón, pues le sale una ventanita, donde tendrá que ubicar los datos necesarios, para poder acceder al sitio. Dicho botón es el enlace que dice "Administración" en nuestro menú. Si damos clic en dicho enlace pues verán que no pasa nada, pero vamos a ser que pase.

Lo primero es ubicar el archivo .js correspondiente. Dicho archivo se encuentra en Bootstrap2.3.0 / docs / assets / js ahí localizamos el archivo con el nombre bootstrap-modal.js.

Este archivo lo ponemos en la carpeta Jemd / js y añadimos la siguiente línea al archivo offline.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="/js/jquery.js"></script> 
     <script src="/js/bootstrap-modal.js"></script>

Con esto hecho, lo que viene restando es hacer la ventana modal. Así que guiándonos por el código de ejemplo que nos brinda Bootstrap, ubicamos nuestro código en la sección de la ventana modal, dentro del archivo offline.html. Quedaría de la siguiente forma:

<!-- Jemdoff Modal -->
 <div id="tab5" class="modal hide fade" tabindex="-1">
  <!-- Modal Header -->
  <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h3 id="myModalLabel">Acceso Restringido</h3>
  </div>
    
  <!-- Modal Body -->
  <div class="modal-body">
   <!-- Jemdoff Login -->
    <p>Formulario de acceso</p>
   <!-- Jemdoff End Login -->
  </div>
    
  <!-- Modal Footer -->
  <div class="modal-footer">
   <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
   <button class="btn btn-primary">Identificarse</button>
  </div>
 </div>
 <!-- Jemdoff End Modal -->

Si vamos a la página, y pinchamos en el botón, pues ya veremos nuestra ventana modal trabajando. El formulario de acceso, lógicamente se lo incluiremos luego cuando pasemos el archivo a la plantilla nuestra.

Como se dieron cuenta hemos dejado el resto de los enlaces sin función alguna, ya que hemos cubierto nuestro objetivo con esta maqueta. El resto, se los dejo a su imaginación y necesidad. O hasta pueden crear otro diseño, basándose en lo leído acá. Por ejemplo, yo hice otra maqueta con las mismas cosas usadas hasta ahora pero añadiendo un contador (countdown):

Sitio en Construcción

Una vez terminada la maqueta pasamos a poner nuestra página en construcción. Para ello vamos a ser uso una vez más, de una característica de Joomla!, el "override". Esta vez vamos a sobreescribir la página offline que trae Joomla en el core. ¿Se preguntarán en dónde está codificada está página? Esta página la puedes encontrar en /misitio / templates / system / offline.php.

Si vamos a la administración de nuestro sitio, y accedemos a Sitio / Configuración global , desde allí pondremos nuestro sitio offline.

Si vamos a la parte pública de nuestro sitio, nos encontraremos que está offline pero aún con el diseño que trae Joomla.

Para realizar nuestro override crearemos en la raíz de nuestra plantilla, en mi caso /misitio / templates / jemd un archivo offline.php. Luego copiamos para ahí todo el código que teníamos en el archivo offline.html. Hecho esto, comenzaremos a editar el archivo.

<--Nota: Quisiera resaltar que no explicaremos algunas sentencias o pasos que vamos hacer, ya que fueron explicadas previamente en la primera parte. Para más detalle diríjase allá.-->

Primeramente añadiremos estas líneas al principio del archivo:

<?php

defined('_JEXEC') or die;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();

/* 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');


?>

Luego sustituimos esta parte:

<!DOCTYPE html>
<html lang="en">

por esta otra: 

<!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; ?>" dir="<?php echo $this->direction; ?>">

Luego, dentro de la etiqueta head añadimos esta línea:

<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 offline.css que está en la maqueta en la carpeta css (Jemdoff / 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:

addStyleSheet('templates/'.$this->template.'/css/offline.css'); ?>

Recuerden también que nuestro sitio tiene integrado Bootstrap mediante un plugin, por lo que tenemos que añadir la siguiente línea para cargar los archivos CSS correspondiente al framework.

JHtmlBootstrap::loadCss();

Todo esto que hemos hecho queda de la siguiente forma:

<?php

defined('_JEXEC') or die;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();

/* 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');

?>

<!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; ?>" 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 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/offline.css');  
 
 ?>
  </head>

Antes de probar como se ven los cambios realizados, eliminamos la sección de javascript en el archivo offline.php, ya que no nos hará falta, debido a que el plugin nos carga todo los archivos necesarios. Luego, si podemos comprobar como luce nuestra página offline, ya montada en nuestro sitio.

Para completar lo que falta, copiamos el código perteneciente a cada opción (Logo, Mensaje, Formulario). Empecemos por el logo. Para ello copiamos del archivo donde esta la página offline que trae Joomla (templates / system / offine.php) el código perteneciente al logo, para poder cargar una imagen personalizada desde nuestra carpeta images del sitio. El código se encuentra aproximadamente entre la línea 24 y la 26, sería el siguiente:

<?php if ($app->getCfg('offline_image')) : ?>
<img src="/<?php echo $app->getCfg('offline_image'); ?>" alt="<?php echo htmlspecialchars($app->getCfg('sitename')); ?>" />
<?php endif; ?>

Esto lo colocamos en el archivo offline.php que estamos desarrollando, en la parte donde cargamos la imagen del logo. Quedaría de la siguiente forma:

<div id="logo">
     <h1>
         <?php if ($app->getCfg('offline_image')) : ?>
            <img src="/<?php echo $app->getCfg('offline_image'); ?>" alt="<?php echo htmlspecialchars($app->getCfg('sitename')); ?>" />
        <?php endif; ?> 
    </h1>
</div>

Luego le sigue el mensaje personalizado. Para ello copiamos del archivo de Joomla, el código perteneciente al mensaje. Esto está aproximadamente desde la línea 30 hasta la línea 38, sería el siguiente:

<?php if ($app->getCfg('display_offline_message', 1) == 1 && str_replace(' ', '', $app->getCfg('offline_message')) != ''): ?>
  <p>
   <?php echo $app->getCfg('offline_message'); ?>
  </p>
 <?php elseif ($app->getCfg('display_offline_message', 1) == 2 && str_replace(' ', '', JText::_('JOFFLINE_MESSAGE')) != ''): ?>
  <p>
   <?php echo JText::_('JOFFLINE_MESSAGE'); ?>
  </p>
<?php  endif; ?>

Esto lo colocamos en el archivo offline.php que estamos desarrollando, en la parte donde está el mensaje. Quedaría de la siguiente forma:

<div class="span12">
     <div id="logo">
                     <h1>
                         <?php if ($app->getCfg('offline_image')) : ?>
        <img src="/<?php echo $app->getCfg('offline_image'); ?>" alt="<?php echo htmlspecialchars($app->getCfg('sitename')); ?>" />
       <?php endif; ?> 
                        </h1>
                    </div> 
     
     <?php if ($app->getCfg('display_offline_message', 1) == 1 && str_replace(' ', '', $app->getCfg('offline_message')) != ''): ?>
      <p>
       <?php echo $app->getCfg('offline_message'); ?>
      </p>
     <?php elseif ($app->getCfg('display_offline_message', 1) == 2 && str_replace(' ', '', JText::_('JOFFLINE_MESSAGE')) != ''): ?>
      <p>
       <?php echo JText::_('JOFFLINE_MESSAGE'); ?>
      </p>
     <?php  endif; ?>  
    </div><!-- .span -->

Ahora si vamos a la administración y colocamos el mensaje personalizado y el logo,

veremos en nuestro sitio, que ya salieron las dos.

Ahora solo nos queda el formulario de acceso. Para ello copiamos del archivo de Joomla, el código perteneciente al formulario. Esto está aproximadamente desde la línea 39 hasta la línea 59, sería el siguiente:

<form action="<?php echo JRoute::_('index.php', true); ?>" method="post" id="form-login">
 <fieldset class="input">
  <p id="form-login-username">
   <label for="username"><?php echo JText::_('JGLOBAL_USERNAME') ?></label>
   <input name="username" id="username" type="text" class="inputbox" alt="<?php echo JText::_('JGLOBAL_USERNAME') ?>" size="18" />
  </p>
  <p id="form-login-password">
   <label for="passwd"><?php echo JText::_('JGLOBAL_PASSWORD') ?></label>
   <input type="password" name="password" class="inputbox" size="18" alt="<?php echo JText::_('JGLOBAL_PASSWORD') ?>" id="passwd" />
  </p>
  <p id="form-login-remember">
   <label for="remember"><?php echo JText::_('JGLOBAL_REMEMBER_ME') ?></label>
   <input type="checkbox" name="remember" class="inputbox" value="yes" alt="<?php echo JText::_('JGLOBAL_REMEMBER_ME') ?>" id="remember" />
  </p>
  <input type="submit" name="Submit" class="button" value="<?php echo JText::_('JLOGIN') ?>" />
  <input type="hidden" name="option" value="com_users" />
  <input type="hidden" name="task" value="user.login" />
  <input type="hidden" name="return" value="<?php echo base64_encode(JURI::base()) ?>" />
  <?php echo JHtml::_('form.token'); ?>
 </fieldset>
 </form>

Esto lo colocamos en el archivo offline.php que estamos desarrollando, en la parte donde está el formulario de acceso. Pero no lo pondremos así como viene sino que lo dividiremos para que los botones nos quede de acuerdo al diseño de la ventana modal. Por lo que nos quedaría de la siguiente forma:

<!-- Jemdoff Modal -->
 <div id="tab5" class="modal hide fade" tabindex="-1" style="margin-left: 168px;">
  <!-- Modal Header -->
  <div class="modal-header">
   <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
   <h3 id="myModalLabel">Acceso Restringido</h3>
  </div>
    
  <!-- Modal Body -->
  <div class="modal-body">
   <!-- Jemdoff Login -->
   <form action="<?php echo JRoute::_('index.php', true); ?>" method="post" id="form-login">
    <fieldset class="input">
     <p id="form-login-username">
      <label for="username"><?php echo JText::_('JGLOBAL_USERNAME') ?></label>
      <input name="username" id="username" type="text" class="inputbox" alt="<?php echo JText::_('JGLOBAL_USERNAME') ?>" size="18" />
     </p>
          
     <p id="form-login-password">
      <label for="passwd"><?php echo JText::_('JGLOBAL_PASSWORD') ?></label>
      <input type="password" name="password" class="inputbox" size="18" alt="<?php echo JText::_('JGLOBAL_PASSWORD') ?>" id="passwd" />
     </p>    
   <!-- Jemdoff End Login -->
  </div>
    
  <!-- Modal Footer -->
  <div class="modal-footer">
   <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
   <input type="submit" name="Submit" class="btn btn-primary" value="<?php echo JText::_('JLOGIN') ?>" />
  </div>
  
   <input type="hidden" name="option" value="com_users" />
   <input type="hidden" name="task" value="user.login" />
   <input type="hidden" name="return" value="<?php echo base64_encode(JURI::base()) ?>" />
   <?php echo JHtml::_('form.token'); ?>
    </fieldset>
   </form>
 </div>
 <!-- Jemdoff End Modal -->

Con esto hecho ya pueden loguearse los usuarios autorizados. Tan solo escribimos el nombre de usuario y contraseña y damos clic en el botón "Identificarse" para acceder a nuestro sitio. Y con ello hemos terminado nuestra página en construcción.

Para que puedan ver el resultado directamente, hemos montado la página en construcción, anteriormente creada, en el sitio de ejemplo.

Sitio Adaptable o Responsive

Nuestros sitios deben poder verse sin problemas en un móvil y entre todas las opciones ¿cómo elegir la que mejor se adapta a nuestro contenido? Últimamente se ha impuesto la tendencia de tener un sitio responsive para que nuestros sitios se vean cómodamente en cualquier dispositivo y aunque a priori parece la mejor opción, merece la pena pararse a pensar si realmente es la mejor opción para nuestro sitio. Para ello te recomiendo que leas "Responsive o adaptive ¿qué es mejor para mi web?", el cual trata el tema anterior.

Ahora entremos en materia, hagamos nuestro sitio Responsive. Pero antes de ponernos a configurar nuestra plantilla, pensemos en algo. Sería interesante poder decidir en cualquier momento, cuando queremos que nuestro sitio sea responsive o no, y que ambas versiones funcionen adecuadamente. Pero esto no esta muy lejo de nuestro alcance, ya que utilizando los parámetros de la plantilla podemos lograrlo.

Parámetro Responsive

Primeramente crearemos, (al igual que en la primera parte cuando creamos el parámetro "logoFile"), un parámetro en el archivo templateDetails.xml. Para ello utilizaremos las siguientes líneas:

<field name="logoFile" type="media"
label="TPL_JEMD_LOGO_LABEL"
description="TPL_JEMD_LOGO_DESC" />

<field name="fluidContainer"
   type="radio"
   default="0"
   label="TPL_JEMD_FLUID_LABEL"
   description="TPL_JEMD_FLUID_DESC"
>
   <option value="0">TPL_JEMD_STATIC</option>
   <option value="1">TPL_JEMD_FLUID</option>
   </field>

Con el parámetro "fluidContainer" ya tendremos acceso a través de la administración del sitio, para poner o no responsive nuestro sitio. Si accedemos a la plantilla, a través del Gestor de plantilla, veremos algo así:

Luego, para hacerlo más entendible, traduciremos las nuevas cadenas añadidas. Para ello editamos el archivo es-ES.tpl_jemd.ini que se encuentra en la carpeta language de nuestra plantilla. Añadiremos lo siguiente:

TPL_JEMD_XML_DESCRIPTION="Plantilla del Equipo de Marketing y Difusión de Joomla! en Español al estilo Bootstrap"

TPL_JEMD_LOGO_LABEL="Logo"
TPL_JEMD_LOGO_DESC="Escoga un logo personalizado para la plantilla del sitio"
TPL_JEMD_FLUID_LABEL="Diseño fluido"
TPL_JEMD_FLUID_DESC="Use el contenedor de Bootstrap fluido o estático (es sensible a ambos)"
TPL_JEMD_STATIC="Estático"
TPL_JEMD_FLUID="Fluido"

Ahora ya se ve mucho mejor:

Configurar index.php

Nuestro próximo paso, es configurar nuestro archivo principal de la plantilla, de manera tal, que se adapte a la configuración establecida previamente en el gestor de plantilla. Para ello editaremos el archivo principal de nuestra plantilla, el index.php, y le añadiremos lo siguiente:

<div class="body">
  <div class="container<?php if ($this->params->get('fluidContainer')) { echo "-fluid"; } ?>">
   <!-- Jemd Header -->
   <div class="header">

El parámetro "fluidContainer" lo que nos devuelve son los valores "0" o "1", que equivale a "false" o "true" respectivamente. Por lo que preguntamos, sí "fluidContainer" es "true", entonces, escribe "-fluid". Y como delante de esta sentencia tenemos la clase "container" pues se forma la clase "container-fluid" que es la usada por bootstrap para el diseño responsive. Si ahora vamos al gestor de plantilla y abrimos la plantilla nuestra, y colocamos el parámetro "Diseño fluido" como "Fluido", veremos que nuestro sitio tomó la siguiente forma:

Como ven, la mayor parte de nuestro sitio se modificó según el tamaño de la pantalla, pero no todo. Lo arreglaremos por parte. Primeramente, haremos que en la parte donde se muestra el contenido de nuestra plantilla se adapte a la resolución. Para ello, editaremos lo siguiente en el archivo index.php:

<div class="row-fluid">
    <?php if ($this->countModules('jemd-sidebar')): ?>
    <!-- Jemd Begin Sidebar -->

Si nos fijamos de nuevo en nuestro sitio, veremos algo así:

Como pueden ver ya el contenido se ha adaptado correctamente, pero ahora ha surgido otro problema. En el formulario de acceso, los campos para escribir el usuario y la contraseña se han reducido, esto es debido a que la clase "span2" que es el ancho que tienen esos campos, varía su valor de "px" a "%" cuando cambiamos a responsive. Por lo que debemos modificar el tipo de clase en el módulo "login". Para ello, editaremos el archivo default.php que esta en la carpeta / html / mod_login de nuestra plantilla. Editaremos la línea 42 y la línea 51 aproximadamente, y le añadiremos la clase correspondiente:

<input class="span6" id="modlgn-username" type="text" name="username" class="inputbox"  size="18" />
.
.
.
<input class="span6" id="modlgn-passwd" type="password" name="password" class="inputbox" size="18"  />

Y ya con esto, aunque cambiemos de diseño, se nos mantendrá un ancho adecuado para esos campos.

Pueden apreciar en la imagen anterior, que tenemos otro elemento que aún no se ha adaptado, es el caso del "footer". Para ello, hacemos el mismo procedimiento que hicimos más arriba, en el archivo index.php:

<div class="footer">
  <div class="container<?php if ($this->params->get('fluidContainer')) { echo "-fluid"; } ?>">

Y con esto hecho, ya podrán observar que se ha adaptado adecuadamente.

Antes de pasar a buscar una solución para nuestro problema con el carrusel, vamos a editar un estilo que se pierde al cambiar la clase "container" a "container-fluid". Si se fijan en el archivo template.css, verán que tenemos escrito lo siguiente:

.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);
}

Aquí sólo añadiremos la otra variante, por lo que quedaría así:

.body .container, .body .container-fluid {
 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);
}

Si vamos al sitio, veremos que ya se parece casi a como lo teníamos antes de ponerlo responsive:

Con esto ya viene quedando solamente, nuestro carrusel. Se podrán dar cuenta que la estructura del carrusel se adapta perfectamente, pero las imágenes no. Para solucionar esto lo que vamos hacer es, agregar el siguiente estilo, en el archivo template.css:

#myCarousel img{
 width: 100%;
}

Y ya con esto tenemos nuestro sitio completamente adaptable:

<--Nota: Hay que tener claro que las imágenes aumentan su tamaño proporcionalmente según la resolución de la pantalla del visitante, por lo que si las imágenes del carrusel adquieren una altura muy grande, puede hacer lucir mal el diseño de la plantilla y dar una primera impresión al usuario final no muy agradable. Una alternativa pudiera ser la que les explico a continuación. -->

Alternativa al Carrusel

<--Nota: Esta vía la escogí, ya que podemos seguir practicando las distintas clases de bootstrap que es uno de los objetivos de estos tutoriales. Siéntase libre en comentar como lo harías. Esto claro, sin instalar ninguna extensión. -->

Una vía para no dejar que las imágenes del carrusel tomen un tamaño inadecuado dentro de la página, es cambiar el diseño cuando la resolución de la pantalla del visitante, excede ciertos valores personalizados. En otras palabras, cambiar el carrusel si la resolución es muy grande.

Primeramente haremos que el carrusel se esconda, si la resolución es muy grande. Para ello haremos uso de javascript, pero no se asusten que verán que es muy sencillo de hacerlo. Abrimos y editamos el archivo template.js, y le añadimos las siguientes líneas:

!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'})
    
    if ((screen.width > 1280) && (screen.height > 800))
   {
                jQuery(".custom-carousel").css("display","none");
   }
    
        })
      }(window.jQuery)

Aquí sencillamente preguntamos, que si el ancho y el alto de la pantalla del visitante excede los valores 1280x800px (puedes escoger los valores que tu entiendas, no necesariamente tienen que ser estos), entonces añadiremos al elemento que tiene la clase custom-carousel el estilo: display:none; , con el cual hacemos que no se muestre el elemento y todo lo que contiene. Ahora ¿Quien contiene la clase custom-carousel? pues esta clase va a ser el "sufijo de la clase del módulo" de nuestro módulo carrusel. Para ello vamos al Gestor de módulos y ubicamos el módulo HTML correspondiente al carrusel y lo abrimos para editarlo. Dentro, vamos al panel de "Opciones avanzadas" y en el campo "Clase CSS del módulo" escribimos textualmente: -carousel. Y ya con esto tenemos configurado nuestro carrusel para que no se muestre si la resolución no es la óptima para él. Para probarlo, pongan valores más pequeños, que la resolución que usas en tu PC, y verán el resultado siguiente:

Ya ven, no fue tan difícil. Ahora, pero ¿que ponemos en su lugar? En mi caso escogí mostrar uno de los componentes de Bootstrap, Thumbnails.

Para ello, tenemos que crear un módulo personalizado, que si leyeron la primera parte se dieron cuenta de que esto no es difícil con el Módulo HTML. Así que creamos un nuevo módulo HTML, y guiándonos por la documentación de bootstrap pondremos lo siguiente:

<div class="row-fluid">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail"><img src="/images/thumbnail.png" border="0" width="370" height="240" style="border: 0;" /><br />
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
<li class="span4">
<div class="thumbnail"><img src="/images/thumbnail.png" border="0" width="370" height="240" /><br />
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
<li class="span4">
<div class="thumbnail"><img src="/images/thumbnail.png" border="0" width="370" height="240" /><br />
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
</ul>
</div>

Recuerden colocar ustedes las imágenes correspondiente, en mi caso use imágenes con una dimensión de 370x240px. Luego le damos al módulo la posición del carrusel, en mi caso jemd-carousel y lo publicamos. Si vamos al sitio podremos observar el siguiente resultado:

Y con esto ya tenemos la variante del carrusel, aunque aún no la hemos configurado para que salga, solo, cuando el carrusel no se muestre. Esto lo logramos añadiendo otra sentencia en el archivo template.js, por lo que nos quedaría 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'})
    
    // user screen    
    if ((screen.width > 1280) && (screen.height > 800))
   {
                jQuery(".custom-carousel").css("display","none");
   }
    else
   {
    jQuery(".custom-thumbnail").css("display","none");
   }
        })
      }(window.jQuery)

Aquí sólo añadimos, que si la resolución no es superior a la indicada, entonces no mostramos el elemento que tiene la clase custom-thumbnail, que no es más que el sufijo de la clase del módulo recién creado para mostrar los thumbnail. Por lo que accedemos a dicho módulo y escribimos textualmente, en el campo "Clase CSS del módulo" -thumbnail. Ahora, si vuelven a probar con diferentes resoluciones, verán que irá alternando dichos módulos en dependencia de la configuración establecida por nosotros.

Hemos hecho que se muestre uno u otro módulo en dependencia de la resolución de la pantalla, pero ¿será necesario esto en todos los casos? La respuesta es "no", ya que si usted escoge que su plantilla en vez de "fluida" sea "estática" no será necesario usar los thumbnail, ya que el carrusel se verá perfectamente en un ancho de 940px. Por lo que esta alternativa solo va a entrar en acción, solo sí nuestra plantilla es fluida. Pero esto se los dejo para que lo hagan, ya que no tienen que utilizar ningún código nuevo, ni nada por el estilo, solo reutilizar lo que hemos hecho hasta ahora. Tan solo haganse la pregunta (Si mi plantilla es fluida, entonces hago la alternativa, sino, pues no hago nada) y verán que ya el código esta, solo hay que reorganizarlo. Cualquier cosa, estare esperandolos en los comentarios del artículo.

Y ya con esto hecho hemos terminado de configurar nuestro Sitio Responsive.

Ú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. Esta vez haremos algo sencillo, más bien corregiremos algo sencillo, ya que el tutorial se ha extendido bastante.

Al loguearte en el frontend te darás cuenta de que el botón de desloguearse aún no ha sido modificado al estilo bootstrap:

Para ello, vamos al archivo default.php en la carpeta / misitio / html / mod_login y lo abrimos para editarlo. Dentro vamos aproximadamente a la línea 25, donde veremos algo como esto:

<input type="submit" name="Submit" class="button" value="<?php echo JText::_('JLOGOUT'); ?>" />

La modificamos añadiendo las clases necesarias para los botones en bootstrap. En mi caso lo hice de la siguiente manera:

<input type="submit" name="Submit" class="button btn btn-success" value="<?php echo JText::_('JLOGOUT'); ?>" />

Si vamos de nuevo a nuestro sitio ya veremos nuestro resultado.

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 la página en construcción y seguimos avanzando el sitio de ejemplo que estamos desarrollando a través de estos tutoriales. 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.