Plantilla

Issue Octubre 2012 > Spanish, Desarrollador
Uso del Framework "Twitter Bootstrap" para

construir desde 0, una plantilla adaptable para
Joomla
Escrito por Carlos Rodrguez
| Monday, 01 October 2012 12:00 | Publicado en Octubre 2012
En este artculo vamos a comprender los conceptos bsicos usados en el sistema de plantillas de Joomla.
Cuando se inicia la construccin de algn sitio, nos planteamos las interrogantes siguientes: Construyo una
plantilla desde 0? Adquiero una de algn club de plantillas? Modifico una existente? Para poder tomar una
decisin til es necesario comprender el proceso de creacin de una plantilla en Joomla, lo cual, no es algo
cientfico.
Las Plantillas en Joomla
Joomla se compone de una interfaz de usuario y una zona de administracin. Ambas partes tienen sus propias plantillas, las cuales se almacenan en las
carpetas:
/ templates - Para la interfaz de usuario
/ administrator / templates - Para la zona de administracin
Cada plantilla tiene su propia carpeta. En Joomla 2.5 se encuentran dos plantillas preinstaladas no adaptables (Beez 2 y 5) y una designada a ejemplo
del aspecto que tiene una plantilla bsica (Atomic).
/ templates / atomic - Plantilla base para crear una propia
/ templates / beez_20 - Plantilla estndar de Joomla
/ templates / beez_5 - Es la versin HTML5 de la plantilla beez 2
/ templates / system - En esta carpeta Joomla almacena todos los archivos que son comunes para todas las plantillas, por ejemplo, la pgina de error
y la de fuera de lnea
Para la administracin, se sigue la misma configuracin:
1 de 12
/ administrator / templates / bluestork - Plantilla estndar y predeterminada de la administracin
/ administrator / templates / hathor - Plantilla opcional para la administracin. Es accesible y los colores son personalizables.
/ administrator / templates / system - En esta carpeta Joomla almacena todos los archivos que son comunes para todas las plantillas, por ejemplo, la
pgina de error
Cmo crear una nueva plantilla?
Existen dos opciones para crear una nueva plantilla:
Empezar desde el principio con la creacin de una carpeta con todos los archivos necesarios
Copiar una plantilla existente y modificarla
En este artculo nos centraremos en la primera opcin. Vamos a crear una plantilla para la interfaz de usuario desde 0 basada en el Framework Twitter
Bootstrap, que sea adaptable y compatible con Joomla 2.5. Lo haremos de la forma ms simple posible, ya que el objetivo de este artculo es
comprender la estructura de las plantillas en Joomla.
Nombre de la Plantilla
En primer lugar, necesitamos un nombre para nuestra plantilla. Dicho nombre aparecer en el archivo XML, en la base de datos y en el sistema de
archivos del servidor web. Evite caracteres especiales y espacios en blanco en el nombre. Para este ejemplo, la plantilla se llamar cocoate.
Archivos y Carpetas
Creamos una carpeta en / templates con el nombre cocoate.
Dentro colocamos una subcarpeta con el nombre css y los siguientes archivos.
/ templates / cocoate / index.php
/ templates / cocoate / templateDetails.xml
index.php
<?php <?php
defined('_JEXEC') or die; defined('_JEXEC') or die;
?> ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd 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; ?>" > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head> <head>
<jdoc:include type="head" /> <jdoc:include type="head" />
</head> </head>
<body > <body >
<jdoc:include type="modules" name="top" style="xhtml" /> <jdoc:include type="modules" name="top" style="xhtml" />
<jdoc:include type="modules" name="breadcrumbs" style="xhtml" /> <jdoc:include type="modules" name="breadcrumbs" style="xhtml" />
<jdoc:include type="modules" name="left" style="xhtml" /> <jdoc:include type="modules" name="left" style="xhtml" />
<jdoc:include type="component" /> <jdoc:include type="component" />
<jdoc:include type="modules" name="right" style="xhtml" /> <jdoc:include type="modules" name="right" style="xhtml" />
<jdoc:include type="modules" name="footer" style="none" /> <jdoc:include type="modules" name="footer" style="none" />
</body> </body>
</html> </html>
El archivo index.php es la pgina principal de la plantilla, o lo que es lo mismo, el panorama general. Dentro de este archivo todas las partes y piezas
de la plantilla (CSS, JavaScript, contenido de Joomla) van a ser cargadas. En nuestro ejemplo, hemos cargado el contenido de Joomla con los
comando<jdoc:include ...>, los cuales cargan el head (encabezado), el contenido de los mdulos en funcin de la posicin del mdulo (Que es un
mdulo) y, por supuesto, un component (componente). Slo puede mostrarse un nico componente por pgina.
templatesDetails.xml
El archivo de configuracin que contiene toda la informacin acerca de archivos, opciones y posiciones necesaria para mostrar la plantilla en el gestor de
2 de 12
plantillas, y para poder crear un paquete instalable comprimido. Sin este archivo, Joomla no ser capaz de encontrar tu plantilla.
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" " <!DOCTYPE install PUBLIC "-//Joomla! 1.6//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd http://www.joomla.org/xml/dtd/1.6/template-install.dtd
<install version="2.5" type="template" method="upgrade"> <install version="2.5" type="template" method="upgrade">
<name>cocoate</name> <name>cocoate</name>
<creationDate>2012-07-17</creationDate> <creationDate>2012-07-17</creationDate>
<author>Hagen Graf</author> <author>Hagen Graf</author>
<authorEmail> <authorEmail>hagen@cocoate.com hagen@cocoate.com</authorEmail> </authorEmail>
<authorUrl> <authorUrl>http://cocoate.com</authorUrl> http://cocoate.com</authorUrl>
<copyright>Copyright (C) 2012 cocoate</copyright> <copyright>Copyright (C) 2012 cocoate</copyright>
<version>1.0</version> <version>1.0</version>
<description><![CDATA[ <description><![CDATA[
<p>cocoate is a template exercise from scratch.<p> <p>cocoate is a template exercise from scratch.<p>
]]></description> ]]></description>
<files> <files>
<filename>index.php</filename> <filename>index.php</filename>
<filename>templateDetails.xml</filename> <filename>templateDetails.xml</filename>
<folder>css</folder> <folder>css</folder>
</files> </files>
<positions> <positions>
<position>top</position> <position>top</position>
<position>breadcrumbs</position> <position>breadcrumbs</position>
<position>footer</position> <position>footer</position>
<position>left</position> <position>left</position>
<position>right</position> <position>right</position>
<position>footer</position> <position>footer</position>
</positions> </positions>
</install> </install>
Descubre e Instala tu Plantilla
Despus de crear los dos archivos y las carpetas, tenemos que descubrir e instalar la plantilla. Ir a Extensiones -> Gestor de Extensiones -> Descubrir.
Haga clic en el icono en la parte superior Descubrir. Ver su plantilla recin creada (Figura 1). Marque la plantilla y haga clic en instalar (Figura 2).
Desde Joomla 1.6, una plantilla se "registra" en la base de datos en la tabla _extensions.
Figura 1: Descubrir la plantilla cocoate
3 de 12
Figura 2: Instalar la plantilla cocoate.
Durante el proceso de instalacin, se ha creado automticamente un estilo para su plantilla. Marque este estilo (Extensiones -> Gestor de plantillas) y
conviertalo en el estilo de plantilla por defecto (Figura 3).
Figura 3: Ponga la plantilla cocoate, como la plantilla por defecto.
Ahora visite su sitio web para ver una primera visin de nuestro sitio (Figura 4)
Figura 4: El sitio web con la plantilla nueva
Integrar los Archivos de Twitter Bootstrap
Ahora bien, es necesario integrar Twitter Bootstrap antes de continuar. En el momento de escribir este texto, la versin 2.1.1 es la ltima versin.
En el ejemplo que estoy creando, voy a usar el paquete de Twitter Bootstrap que viene con la documentacin incluida, (http://twitter.github.com
/bootstrap/getting-started.html) (Figura 5). Descargue y descomprima el paquete y copie la carpeta assets en la carpeta de la plantilla cocoate (Figura
6).
4 de 12
Figura 5: Sitio web de Twitter Bootstrap
Figura 6: Copiar y mover la carpeta
"assets"
La carpeta assets contiene los archivos necesarios como son, los CSS y JavaScript y viene con imgenes predefinidas e iconos.
Ms tarde, cuando se tenga ms experiencia con las plantillas de Joomla, usted puede poner los archivos necesarios de Twitter Bootstrap en una carpeta
diferente. Para nuestro ejemplo, es ms fcil utilizar la carpeta assets.
Integrar Twitter Bootstrap en la plantilla
Twitter Bootstrap viene con tres plantillas de ejemplo llamadas hero, fluid y starter-template. Puede verlas haciendo clic en los archivos de la carpeta
example.
Nuestro objetivo es combinar los comandos relacionados con Joomla a uno de estos ejemplos. Para el ejemplo he elegido la plantilla fluid (fluid.html).
El archivo / templates / cocoate / index.php contiene todas las partes necesarias de una plantilla en Joomla.
<?php <?php
defined('_JEXEC') or die; defined('_JEXEC') or die;
// detecting site title // detecting site title
$app = JFactory::getApplication(); $app = JFactory::getApplication();
?> ?>
Esto es cdigo php y un tpico comienzo de una plantilla en Joomla. El objeto $app contiene datos tiles acerca de su sitio en Joomla, por ejemplo, el
nombre de su sitio web.
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
Este Doctype es la versin en HTML5 , y viene del ejemplo de Twitter Bootstrap.
En la seccin head tenemos que crear los Metatags de Joomla a travs de un comando e integrar los archivos de Bootstrap.
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<jdoc:include type="head" /> <jdoc:include type="head" />
5 de 12
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/bootstrap.css" t <link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/css/bootstrap.css" t
... ...
 
... ...
<link rel="apple-touch-icon-precomposed" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ic <link rel="apple-touch-icon-precomposed" href="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/ic
</head> </head>
La seccin <body> puede ser en su mayora copiada del ejemplo fluid.html. Es importante incorporar los comandos <jdoc> en el lugar correcto.
Este es un ejemplo para el men superior. Tiene que poner un mdulo de men en la posicin top-menu y puede, por ejemplo mostrar el nombre del
sitio del objeto $app.
<div class="navbar navbar-fixed-top"> <div class="navbar navbar-fixed-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container-fluid"> <div class="container-fluid">
... ...
<a class="brand" href="#"><?php echo $app->getCfg('sitename'); ?></a> <a class="brand" href="#"><?php echo $app->getCfg('sitename'); ?></a>
<div class="nav-collapse"> <div class="nav-collapse">
<jdoc:include type="modules" name="top-menu" style="none" /> <jdoc:include type="modules" name="top-menu" style="none" />
</div> </div>
</div> </div>
</div> </div>
La pgina principal se encuentra en la clase "Fluid Container". Cuenta con un sistema de grillas de 12 filas por defecto. Utilizamos 9 de ellas para la
visualizacin del componente de Joomla y 3 ms para una barra lateral a la derecha, llamada right. El lado derecho slo se muestra si hay mdulos
publicados.
<div class="container-fluid"> <div class="container-fluid">
<div class="row-fluid"> <div class="row-fluid">
<div class="span9"> <div class="span9">
<div class="hero-unit"> <div class="hero-unit">
<jdoc:include type="component" /> <jdoc:include type="component" />
</div> </div>
</div> </div>
</div> </div>
<div class="span3"> <div class="span3">
<?php if($this->countModules('right')) : ?> <?php if($this->countModules('right')) : ?>
<div class="well sidebar-nav"> <div class="well sidebar-nav">
<jdoc:include type="modules" name="right" style="none" /> <jdoc:include type="modules" name="right" style="none" />
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
</div> </div>
</div> </div>
La ltima parte de nuestra plantilla son los archivos JavaScript de Twitter Bootstrap.
<script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/jquery.js"></script> <script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/jquery.js"></script>
<script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/bootstrap.min.js"></script> <script src="/<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/assets/js/bootstrap.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
jQuery.noConflict(); jQuery.noConflict();
</script> </script>
Como puede ver, el Framework JavaScipt, jQuery se carga y tambin la versin mnima de Twitter Bootstrap. Se puede ver el contenido del archivo
index.php completo aqu /templates/cocoate/index.php.
El resultado como pueden apreciar no es el esperado (Figura 7), pero se ve como un sitio web y es ... adaptable. Pruebe con la ventana de su
navegador!.
6 de 12
Figura 7: Primera vista a la nueva plantilla.
Overrides en Joomla
Hasta ahora, todo ha sido fcil. Ahora el trabajo real comienza. Hay que reemplazar el valor predeterminado de salida de Joomla HTML para obtener el
mximo provecho del Framework Twitter Bootstrap (Figura 8). Si usted no sabe lo que quiero decir con Overrides, eche un vistazo aqu (para
desarrolladores) y aqu (para los usuarios).
Figura 8: HTML Overrides
El men desplegable
Joomla no tiene un men por defecto con una opcin desplegable pero Twitter Bootstrap ofrece soporte para los mens desplegables y, por supuesto,
queremos tener exactamente esta funcin en nuestra plantilla. Es bastante difcil de aprender todos los detalles sobre la salida HTML de los mdulos.
Para este captulo, sugiero usar distribuciones existentes. Gracias al trabajo de Gary Gisclair es posible descargar la plantilla Strapped y usar los
overrides existentes. Para hacer esto solamente hay que copiar toda la carpeta /html de dicha plantilla en la carpeta / templates / cocoate.
Ahora, utilizando los datos por defecto de Joomla asignamos el mdulo main menu a la posicin top-menu. Para que la clase CSS coincida con la
correcta, aadimos "nav-dropdown" en el sufijo de la clase del mdulo (Extensiones -> Gestor de mdulos -> Men principal -> Editar -> Opciones
avanzadas) (Figura 9).
Figura 9: Main Menu - Opciones
avanzadas
7 de 12
Visto 16225 veces
Twittear Twittear 0
Funciona!
La comunicacin entre Joomla y Twitter Bootstrap est trabajando. El men desplegable es totalmente adaptable e incluso las imgenes se cambian de
tamao automticamente (Figura 10).
Figura 10: Plantilla adaptable basada en
Twitter Bootstrap
Prximos Pasos
Desde mi punto de vista, los prximos pasos son:
Simplemente jugar con otras tecnologas (CSS, JS, HTML5, Joomla, PHP, Twitter Bootstrap)
Vea la documentacin de Twitter Bootstrap
Crear un CSS personalizado
Utilice los parmetros de Joomla para configurar la plantilla
Conclusin
Espero que ahora sean capaces de decidir si desean profundizar en las plantillas de Joomla integrando el Framework Twitter Bootstrap o
simplemente elegir una plantilla ya hecha.
Versin original: Using the Twitter Bootstrap Framework to build a responsive Joomla! Template from Scratch por Hagen Graf
Traducido por: Carlos Rodrguez
Miembro de: Joomla! equipo de Marketing y Difusin en espaol
Etiquetado como Spanish, Desarrollador
Carlos Rodrguez
Me apasiona el desarrollo web, y todo lo hermoso y misterioso que conlleva esto. Siempre me ha gustado enfrentarme a problemas
difciles, ya que resolverlos es muy excitante. Colaboro con el proyecto Joomla en todo lo que pueda, y difundirlo es mi meta ms
preciada.
Deja un comentario
Asegrese de introducir la informacin requerida marcada con ( * )
Be the first of your friends to like
this.
Like Like
8 de 12
Ponga su correo electrnico
do not notify
Guillermo
2012-10-05 01:34:23
juan carlos
2012-10-06 18:10:01
Jesus Lopez
2012-10-12 22:47:37
yerko rojas
2012-11-05 18:40:30
Message *
Entre su mensaje aqu
-color- -tamao-
Name: *
Introduzca su nombre
Email: *
Website:
Ponga su URL
Seguridad
Enviar
Comentarios (19)
Muchas gracias Carlos por le fantstico trabajo realizado, sin duda que este paso a paso ser de tremenda ayuda para muchos de nosotros en la
comunidad.
hola gracias por el aporte tan valioso,
pero segui las instrucciones y no me sale el submenu asi como lo muestras en la figra 10. le doy click por ejemple en boton "sitemap"
y me sale las opciones en un renglon abajo en forma de lista, no asi como en la nubesita bonita.
gracias espero me puedas ayudar
Para que coincida con la correcta clase CSS al aadir "nav-dropdown" en el Sufijo clase del Men (Atencin, debes dejar un espacio en
blanco al principio) " nav-dropdown", sin las comillas, y con eso ya sale la nubesita, espero te sirva
Introduzca el te to
9 de 12
Heidi G.
2012-11-08 21:26:25
Valen
2012-12-04 11:12:39
Carlos Rodrguez
2013-01-12 22:43:41
thomas
2012-12-28 22:16:25
Carlos Rodrguez
2013-01-12 22:48:15
Luis Alfredo
2012-12-30 23:12:32
2013-01-12 22:50:15
hola, te felicito por este tema, te comento que igual igual no me quedo, de hecho el espacio que queda entre el menu y el component esta casi sin
separcion por lo que tendre que revisar el porque, tambien la barra de menu quedo en gris y no en negro como sale la figura 10, pero creo que es
puro css. lo que queria que me explicaran un poco mejor es como utilizar los span4 para poder utilizar esos espacios con algunos modulos de
joomla
GRACIAS!
En el paso Integrar Twitter Bootstrap en la plantilla, no me mostraba el men. Simplemente he cambiado en el templateDetails.xml la posicin top
por top-menu
top-menu
breadcrumbs
footer
left
right
footer
Es correcto?
Es correcto Valen, es un error que se me paso, gracias por la rectificacin.
no me carga la plantilla, no me sale cuando le doy en Descubir, que puede ser
thomas no se porque no te sale, debe ser algo que te estas saltando. Ya has vuelto a intentar?
Genial, me funcion perfectamente. Me gusta como se aprende de todo paso a paso, aunque an me falta mucho pero con estos posts me pongo al
da. Gracias.
10 de 12
Carlos Rodrguez
Jefferson Velosa
2013-02-02 18:00:02
Carlos Rodrguez
2013-03-23 20:07:34
Unscorpio
2013-03-30 21:57:47
Carlos Rodrguez
2013-04-05 16:38:38
Aridio
2013-04-07 20:06:51
Fermin
2013-04-08 13:03:40
Me alegro que te halla sido de ayuda. Pronto haremos otro con esta misma lnea pero un poco ms avanzado, esperando que tambin te sea a t
y a la comunidad de gran ayuda.
muy buen tutorial, aunque no soy muy programando una versin en vdeo seria mucho mejor
Aqu les dejo la continuacin de este tema, pero visto desde otro punto de vista. Espero que pueda ayudarlos tanto como lo hizo este.
Construyendo mi Sitio Web Joomla 2.5 - Parte 1
Llegue buscando que era t3 framework y miren nadanas aprendiendo cada dia, me ha picado el gusanito y voy a hacer mi propia plantilla jejej...
De seguro que lo logras. Suerte.
saludos, excelente artculo!!, excepto que algunas cosas como que no concuerdan, una, no se si a otros no les dio problemas pero yo tuve que
cambiar el llamado de los archivos de:
/templates/template; ?>/assets/js/jquery.js">
a
scrit src="baseurl ?>/templates/template ?>/assets/js/jquery.js">
donde el "/" que est justamente antes de la abertura del cdigo php se aade a la ruta imposibilitando la aparicin del link excto.
tambin el link donde se puede ver el contenido del archivo index.php no muestra nada.
Entre otras cosas, el template no se visualiza como se supone que debera. Si podran mostrar como se ve el contenido del index.php me fijara
para ver que estoy haciendo mal.
De todos modos muchas gracias por el artculo, muchas gracias
11 de 12
Adrian
2013-06-24 17:19:26
Henry
2013-12-07 20:35:35
Gracias por el tutorial, me parece fantstico.
Hasta ahora siempre haba creado mis plantillas para la versin 2.5 a partir de la Atomic, ahora quera ponerme al dia con la 3 y toda ayuda es
buena.
Tengo un problema, he hecho lo mismo que pone en el tutorial, pero he hecho el descubrimiento de la plantilla desde joomla 3.0.3 y me da un error.
Si intento descubrir alguna de las plantillas hechas en la versin 2.5 no me da ningn error.
Cual puede ser la causa?
Gracias.
Hola, muchas gracias por el tutorial. Solo tengo una pregunta:
Y si quiero adquirir una plantilla diseada en algun club y instalarla en Joomla 3 para modificar sobre ella, que pasos he de seguir??
Muchas gracias por la ayuda
Yo que estoy incursionando en esto de Joomla, felicito y agradezco por este tipo de artculos, de esta manera conocemos parte de las races de
este bonito CMS. Sigan as.
Powered by Compojoom comment 4.2.1
back to top
12 de 12

Plantilla

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Plantilla

Uploaded by

Copyright:

Available Formats

Issue Octubre 2012 > Spanish, Desarrollador

Uso del Framework "Twitter Bootstrap" para

You might also like