PHP

Joomla carga muy lento con Windows 7

2013-08-27 - Categorías: General
Desarrollando y construyendo una web en Joomla, me encuentro con el problema de que mi instalación en una máquina de trabajo con Windows 7 y Uniform Server tarda mucho en servir las páginas. Llega a tardar del orden de 2 a 10 segundos para cada página.
Después de haber encontrado mi solución y la de muchos otros en situaciones parecidas les expongo aquí las soluciones que encontré y fui probando.
Ésto lo he aplicado a una instalación de un servidor Apache con PHP y MySQL corriendo un Joomla 2.5. Debería de funcionar también si tienes el problema con otros CMS como Drupal o WordPress.

1. Desactivar antivirus o excluir el directorio de instalación del servidor.
2. Desactivar el firewall o permitir el acceso directo de los programas del servidor Apache, PHP y MySQL.
3. Desactivar IPv6 de la máquina.
4. Acceder a la máquina local mediante 127.0.0.1 en vez de poniendo localhost. También se puede modificar el archivo de hosts para ésto. 
5. Editar el fichero php.ini
6. Editar http.conf de Apache para escuchar con IPv4.
7. Si tienes XAMPP instalar Uniform Server, o viceversa. O actualizar a una nueva versión.
8. Poner PHP como módulo de Apache, en vez de como CGI.
9. Desactivar Xdebug.
La solución que me funcionó fué la última, tal vez las otras ayudaron pero la que se notó fué al desactivar el Xdebug de PHP.
Lo dejo aquí por si alguien le sirve.
Saludos.

Joomla! Platform 4: Autocarga de clases con JLoader

2013-07-07 - Categorías: PHP
Empieza el domingo interesante. Un poco desesperado porque el framework de Joomla no tiene mucha documentación para usarlo independientemente del CMS pero ahí seguiré atento a los cambios, que seguro que algún día se convertirá en un framework de la categoría de Symfony o Codelgniter, por ejemplo. Con 2700 desarrolladores en todo el mundo, más de 6000 extensiones, con un 2,7% de portales en Internet que usan Joomla! ésto promete.
A fecha de hoy leo en los foros de grupos de desarrollo que con la separación de Joomla Platform del desarrollo del CMS se están cambiando los espacios de nombres y añadiendo más y más funcionalidades. Una de éstas últimas es el nuevo método para autocargar clases.

Con un ejemplo se ve bien sencillo:

<?php

// se importa la Plataforma Joomla.
require_once 'libraries/import.php';

// directorio base que se usa para el autocargador de clases
const JPATH_BASE = __DIR__;

// registra un prefijo cualquiera
JLoader::registerPrefix('Jnj', JPATH_BASE);

// crea una instancia de la clase nueva
$app = JApplicationWeb::getInstance("JnjUnDirectorioEjemploWeb");

// se supone que debemos guardar la applicación en el core
JFactory::$application = $app;

// y entonces podemos ejecutarla desde el core
JFactory::getApplication()->execute();

// así queda todo ordenado en el núcleo del framework

Éste podría ser un index.php del directorio principal. Con JLoader se establece un prefijo para las clases, en éste caso, ‘Jnj’. Ahora al cargar la instancia de la clase ‘JnjUnDirectorioEjemploWeb’, la clase se buscará en el directorio ‘/Un/Directorio/Ejemplo/web.php’ y la clase se deberá llamar ‘JnjUnDirectorioEjemploWeb’. Aquí abajo tienen la clase web para ejecutarlo:
<?php
class JnjUnDirectorioEjemploWeb extends JApplicationWeb {
    protected function doExecute()
    {
        $this->setBody("");
        $this->appendBody("<h1>Plataforma Joomla! Autocarga de clases con JLoader</h1>");
        $this->appendBody("Si estas viendo ésto en el navegador es que está bien la autocarga...");
    }
}
Los dos ejemplos y la estructura de directorios se pueden descargar aquí.
Para que funcione debemos tener el framework descomprimido en el mismo directorio raiz de la web, y ejecutarlo desde un navegador, como viene siendo costumbre en éstos minitutoriales.
Ahora eligiendo un prefijo, y organizando las clases del proyecto en directorios podemos ‘autocargar’ todo fácilmente sin tanto import o require. De manera dinámica el framework se encargará de todo.
Espero que sirva. Saludos.

Joomla! Platform 3: Bases de datos

2013-06-25 - Categorías: PHP
Ya llegó el calor, terminaron los exámenes de junio y parece que ya llega el verano, aunque hace poco aún estaba lloviendo en la costa mediterránea de España. Yo sigo con lo mío y hoy les traigo un acceso a bases de datos usando SQLite, una base de datos de dominio público, embebida, no necesita instalación y simplemente con que PHP tenga activada la extensión para ello ya podemos usarla.
Como viene siendo costumbre de la serie que escribo, me voy a centrar en el uso en un servidor web, con lo que el ejemplo es una página web. Se puede también ejecutar en línea de comando pero yo no uso PHP de esa forma así que… vamos al grano.


Materiales

  1. El framework Joomla Platform. Yo he usado la versión 12.3, la oficial veo que es la 12.1 y está en desarrollo la 13.1. Aquí hay más información para los curiosos como yo.
  2. Un entorno de desarrollo. Aquí ya para gustos estan los colores, Eclipse va muy bien y es multiplataforma.
  3. Un servidor para ejecutarlo. XAMPP funciona muy bien y también es multiplataforma.

Empezando

Descomprimo el framework en el directorio si es que no lo tengo ya, entonces hay que crear un fichero .php como en el ejemplo siguiente y veremos rápidamente como funciona:
...
<?php

// se importa la Plataforma Joomla.
require_once 'libraries/import.php';

class laWeb extends JApplicationWeb {
protected function doExecute()
{
$this->setBody("<html><body>");
$this->appendBody("<h1>Plataforma Joomla! SQLite</h1>");

// vector de configuración de la base de datos
// para sqlite sólo hace falta ésto
$option = array();
$option['driver'] = 'sqlite'; // tipo de bd
//$option['host'] = 'direccionhost.com'; // host
//$option['user'] = 'usuario'; //
//$option['password'] = 'contraseña'; //
$option['database'] = 'bdpruebas.sqlite'; // nombre de la bd
//$option['prefix'] = 'pref_'; // prefijo
$dbo = JDatabaseDriver::getInstance($option);

// se puede abreviar usando:
//$dbo = JDatabaseDriver::getInstance(array('driver' => 'sqlite', 'database' => 'bdpruebas.sqlite'));


// crea una tabla para las pruebas, la borra si existe
$dbo->setQuery("DROP TABLE IF EXISTS aleatorios");
$dbo->execute();
$dbo->setQuery('CREATE TABLE IF NOT EXISTS aleatorios (id INTEGER PRIMARY KEY, numero INTEGER)');
$dbo->execute();
$this->appendBody("<p>Creada la base de datos...</p>");

// inserta unos datos en la BD
for ($i = 0; $i < 10; $i++) {
$dbo->setQuery('INSERT INTO aleatorios (id, numero) VALUES (' . $i . ', ' . rand(0,99) . ');');
$dbo->execute();
}
$this->appendBody("<p>Insertados datos...</p>");

// lee la tabla
$this->appendBody("Listando con loadRowList ");
$dbo->setQuery("SELECT * FROM aleatorios;");
$resultados = $dbo->loadRowList();
foreach ($resultados as $res){
$this->appendBody( "<p>" . $res[0] . ", " . $res[1] . "</p>");
}

// lee la tabla de otra forma
$this->appendBody("Listando con loadAssocList ");
$dbo->setQuery("SELECT * FROM aleatorios;");
$resultados = $dbo->loadAssocList();
foreach ($resultados as $res){
$this->appendBody( "<p>" . $res['id'] . ", " . $res['numero'] . "</p>");
}

// lee de nuevo la tabla de otra forma
$this->appendBody("Listando con loadObjectList ");
$dbo->setQuery("SELECT * FROM aleatorios;");
$resultados = $dbo->loadObjectList();
foreach ($resultados as $res){
$this->appendBody( "<p>" . $res->id . ", " . $res->numero . "</p>");
}

$this->appendBody("</body></html>");

}
}

JApplicationWeb::getInstance("laWeb")->execute();
...

El ejemplo en descarga está aquí.

El resultado de ejecutarlo desde el navegador debe ser algo tal que así:

Plataforma Joomla! SQLite

Creada la base de datos…
Insertados datos…
Listando con loadRowList
0, 55
1, 4
2, 1
3, 76
4, 95
5, 62
6, 63
7, 16
8, 52
9, 73
Listando con loadAssocList
0, 55
1, 4
2, 1
3, 76
4, 95
5, 62
6, 63
7, 16
8, 52
9, 73
Listando con loadObjectList
0, 55
1, 4
2, 1
3, 76
4, 95
5, 62
6, 63
7, 16
8, 52
9, 73

Explicaciones

Lo que hace el programa es crear el archivo bdpruebas.sqlite si no existe, es un comportamiento peculiar de SQLite. Si usásemos otra base de datos como PostgreSQL o MySQL podríamos usar las sentencias SQL propias de cada base de datos. El código usa las funciones para cargar tablas de datos loadRowList, loadAssocList y loadObjectList. Ésto nos devuelve un objeto que almacenará los datos de la base de datos en nuestro programa. Hay otras funciones para cuando la consulta devuelve sólo una fila o sólo un dato por ejemplo.
Hasta aquí todo bien, pero entonces ¿porqué usar el framework y no usar directamente PHP como siempre sin framework?
Ahora a partir de las últimas versiones se han añadido más bases de datos aparte de la original MySQL, tenemos PostgreSQL, SQLServer, y se preveen el acceso a muchas otras. Ahora bien, tenemos una capa extra que nos va a independizar totalmente de la base de datos, siempre que no usemos las tradicionales sentencias SQL, como en el ejemplo anterior, y construyamos nuestra aplicación usando ésta herramienta. Puede que en un futuro querramos cambiar de base de datos o hacer posible que dicho cambio sea dinámico según configuración del usuario.

Independizando de la base de datos

La historia está en crear la query usando el framework. Tenemos la clase JDatabaseDriver que es la que nos provee de la conexión a la base de datos. Ahora sí, contruimos la $query usando la clase JDatabaseQuery y entonces obtendremos esa compatibilidad de las consultas, inserciones, actualizaciones y borrados de nuestro programa con varios tipos de bases de datos. He simplificado el ejemplo anterior:
...
<?php

// se importa la Plataforma Joomla.
require_once 'libraries/import.php';

class laWeb extends JApplicationWeb {
protected function doExecute()
{
$this->setBody("<html><body>");
$this->appendBody("<h1>Plataforma Joomla! Independizando de la base de datos</h1>");

//
$dbo = JDatabaseDriver::getInstance(array('driver' => 'sqlite', 'database' => 'bdpruebas.sqlite'));

// borrando los datos de la tabla aleatorios
// para tenerla limpia
$query = $dbo->getQuery(true);
$query->delete('aleatorios');
$dbo->setQuery($query);
$dbo->execute();

$this->appendBody("<p>Borrados los datos...</p>");

// inserta unos datos en la BD
for ($i = 0; $i < 10; $i++) {
// crear una nueva consulta
$query = $dbo->getQuery(true);

// se construye
$query->insert('aleatorios')
->columns('id, numero')
->values($i . ', ' . rand(0,99));

// se establece
$dbo->setQuery($query);

// se ejecuta
$dbo->execute();
}
$this->appendBody("<p>Insertados datos...</p>");

// consultado datos
$query->select('*')->from('aleatorios');
$dbo->setQuery($query);
$resultados = $dbo->loadObjectList();
foreach ($resultados as $res){
$this->appendBody( '<p>' . $res->id . ', ' . $res->numero . '</p>');
}

$this->appendBody("</body></html>");

}
}

JApplicationWeb::getInstance("laWeb")->execute();
...

Éste segundo ejemplo está en descarga aquí.

Utilizando la base de datos creada con el primer ejemplo, si guardamos éste segundo en otro fichero .php y lo ejecutamos en el navegador funcionará de forma similar. Ahora, si tenemos la base de datos distinta de SQLite, simplemente con cambiar la línea:
$dbo = JDatabaseDriver::getInstance(array('driver' => 'sqlite', 'database' => 'bdpruebas.sqlite'));
Haciendo la conexión con la base de datos que tengamos, nos aseguramos que el resto de consultas, inserciones, actualizaciones o borrados van a funcionar.

Terminando

Otra vez más, me remito para más información a la documentación oficial:

http://docs.joomla.org/J3.1:Accessing_the_database_using_JDatabasehttp://api.joomla.org/Joomla-Platform/Database/JDatabaseQuery.html#insert

Éste post al final se ha hecho bien largo, ¡otro testamento! xDD Es que las bases de datos lo merecen ¿no cree?

Espero que sirva.
Saludos.


Joomla! Platform 2: La fábrica de objetos de Joomla

2013-06-08 - Categorías: PHP
Hoy les escribo un poco más sobre Joomla y su framework de desarrollo en PHP, la Joomla Platform. Esto es una joya, aunque no se usa mucho de manera independiente al CMS puede ser que pronto se haga. Por lo menos mi opinión es que es un buen framework; simple, rápido y eficaz, una buena alternativa.
Siguiendo con la carnicería, sacando toda la casquería, las tripas y demás de todo lo que es el CMS y el framework. Y nos encontramos con la fábrica de objetos, la clase JFactory.
La fábrica de objetos se usa constantemente en el CMS, en el desarrollo de extensiones, y si queremos desarrollar un sitio web a partir del framework podemos usarla y de esta manera tendremos todo el proyecto mejor estructurado.

Materiales

  1. El framework, Plataforma Joomla para los amigos.
  2. Un entorno de desarrollo o editor de texto: Eclipse, Notepad++, Gedit, Vi, Notepad o el que sea que use..
  3. Un servidor web con PHP: Va muy bien el XAMPP

El ejemplo

Con ésto pequeño ejemplo se puede ver una forma muy simple de usar el framework:

...
<?php

// se importa la Plataforma Joomla.
require_once 'libraries/import.php';

// en éste ejemplo tan simple la clase la pongo aquí pero
// se debería poner en otro fichero
class laWeb extends JApplicationWeb {
protected function doExecute()
{
$this->setBody("<html><body>");
$this->appendBody("<h1>Plataforma Joomla! probando la fábrica</h1>");

// declara una variable que es un objeto para trabajar con emails
$emiliator = JFactory::getMailer();
$this->appendBody("<p>Versión de MAILER de la plataforma: " . $emiliator->Version);

$this->appendBody("</body></html>");

}
}

// instancio un objeto de la aplicación web
$app = JApplicationWeb::getInstance("laWeb");

// guardo la aplicación en el core
JFactory::$application = $app;

// uso la aplicación web que guardé directamente desde el core
JFactory::getApplication()->execute();
...

Descargar archivo con el ejemplo.

JFactory es un objeto, que sirve para acceder al núcleo del framework, es decir, nos va a dar acceso a todo tipo de objetos que, al instanciarlos en nuestro programa, podremos usarlos y ahorrarnos el desarrollo de éstos.

Explicaciones

En el ejemplo he usado la función getMailer() para tener acceso al objeto de tipo JMail que tenemos en el framework. Es una interfaz con la que podremos construir en un email con destinatario, asunto, mensaje, etcétera… y configurando los parámetros del servidor de email podríamos enviar.
Hay muchos otros objetos, para hacernos una idea general, la fábrica de Joomla nos proporciona las siguientes funciones con las que acceder a éstos:
  • getACL: para manejo de autorizaciones.
  • getApplication: almacena la aplicación.
  • getCache: la caché.
  • getConfig: las configuraciones del sitio.
  • getDate: para manejo de fechas.
  • getDbo: manejo de bases de datos.
  • getDocument: manejo de documentos de varios tipos.
  • getEditor: el editor.
  • getFeedParser: te da un XML ya parseado.
  • getLanguage: el lenguaje.
  • getMailer: el mailer del ejemplo.
  • getSession: manejo de sesiones.
  • getStream: manejo de esos objetos tan útiles a veces, los streams.
  • getURI: para URIs.
  • getUser: el usuario.
  • getXML: para manajar ficheros XML.
Me remito a la documentación oficial, como siendo costumbre para más información sobre cada función: http://api.joomla.org/
Podemos ver la implementación completa de la JFactory en el archivo /libraries/joomla/factory.php
Me siento friki de nuevo, otros leen, juegan a videojuegos… cuando tienen tiempo. Yo me complico la vida tratando de averiguar cómo los desarrolladores de Joomla, han hecho el CMS y su framework, me saltan chispas y estoy hechando humo, pero lo he disfrutado.. ¿éso es de friki no? xD Espero haber dado algo de luz sobre la JFactory.
Para cualquier mensaje, aquí abajo lo pueden dejar.
Un saludo.

Joomla! Platform 1: Configuración y otros datos, JConfig y JPlatform

2013-06-05 - Categorías: PHP
Continuando con la serie de minitutoriales sobre la Plataforma Joomla, en éste post voy a empezar a despellejar y destripar poco a poco ésta joya de la informática. A fecha de hoy Joomla es el CMS más utilizado en todo el mundo y hay una comunidad muy grande que lo mantiene.
Si vamos a usar un framework PHP, nos vamos a asegurar de que la aplicación va a seguir una estructura, un orden a la hora de programar. Cada archivo, módulo, subprograma, función… va a ser claro de su padre y de su madre. Pero si usamos un framework, cualquiera que lo conozca podrá colaborar en el proyecto más pronto que tarde, porque será más legible, tendrá menos líneas de código probablemente que si lo hubieramos desarrollado desde cero. Todo ésto porque nos ahorraremos unas cuantas líneas de código.

Así que veamos pues cómo lo han hecho…

Materiales

Simplemente 3 cosas para seguir éste minitutorial:
  1. Un servidor web con PHP como XAMPP, disponible para varios Sistemas Operativos, o el Uniform Server portable y para Windows.
  2. Nuestro editor o entorno de desarrollo preferido. Como por ejemplo Eclipse, Notepad++, etc…
  3. El CMS si queremos probarlo lo tenemos en castellano en http:/www.joomlaspanish.org. Y la Joomla! Platform, yo he usado la versión 12.1, que lo tenemos en descarga en http://api.joomla.org/.
Empezando
Supongo que nos manejamos bien en PHP y con nuestro editor de código fuente, y tambien sabemos poner en marcha un servidor servidor local para nuestras pruebas. Además doy por entendido que conocemos el CMS de Joomla! lo sabemos instalar y más o menos llevamos un nivel adecuado de su manejo. Si no es así recomiendo no seguir y mirar antes éstas cosas.
Usaré para muchos de los ejemplos la clase JApplicationWeb para usar el framework, por si acaso comento que no es necesario, pero para ejecutar con un servidor web y ver en un navegador los resultados hace falta.
Antes de seguir descomprimimos el fichero de la Plataforma Joomla en el directorio donde vamos a hacer las pruebas y configuramos el servidor para acceder a él. Si queremos probar el CMS lo que ponemos en el directorio es el paquete Joomla para instalarlo., que también trae incluido una versión de la Plataforma.
JConfig y el fichero de configuraciones
En el CMS de Joomla! el fichero de configuracion de la web es /configuration.php. Cuando descomprimimos una instalación nueva, y visualizamos el nuevo Joomla! lo que vamos a ver el módulo o subprograma contenido en el directorio de instalación /installation. Dicho directorio está destinado a configurar la nueva instalación de Joomla! con una serie de formularios que nos guian paso a paso para poner todas las configuraciones, además de crear las tablas en la base de datos e introducir los datos necesarios para comenzar a usarlo.
Después de la instalación se debe de borrar el directorio /installation y se habrá creado dicho fichero /configuration.php. Simplemente tiene la clase JConfig que es un conjunto de variables. En el framework nos viene un ejemplo en /libraries/config.example.php como el siguiente:
<?php
class JConfigExample
{
public $dbtype = 'mysql';
public $host = 'localhost';
public $user = '';
public $password = '';
public $db = '';
public $dbprefix = 'jos_';
public $ftp_host = '127.0.0.1';
public $ftp_port = '21';
public $ftp_user = '';
public $ftp_pass = '';
public $ftp_root = '';
public $ftp_enable = 0;
public $tmp_path = '/tmp';
public $log_path = '/var/logs';
public $mailer = 'mail';
public $mailfrom = 'admin@localhost.home';
public $fromname = '';
public $sendmail = '/usr/sbin/sendmail';
public $smtpauth = '0';
public $smtpsecure = 'none';
public $smtpport = '25';
public $smtpuser = '';
public $smtppass = '';
public $smtphost = 'localhost';
public $debug = 0;
public $caching = '0';
public $cachetime = '900';
public $language = 'en-GB';
public $secret = null;
public $editor = 'none';
public $offset = 0;
public $lifetime = 15;
}
El ejemplo nos indica una forma de tener ordenadas las principales variables… En el siguiente ejemplo, he requerido el archivo de configuración de ejemplo que nos proporciona el framework para verlo como usaríamos uno nuestro:
<?php

// punto de entrada seguro
define('_JEXEC', 1);

require "libraries/import.php";
require "libraries/config.example.php";

class laWeb extends JApplicationWeb {
protected function doExecute()
{
$this->setBody("<html><body>");

$this->appendBody("<h1>Configuración de ejemplo</h1>");

// crea el objeto con las configuraciones
$conf = new JConfigExample();

// lista dicho objeto
foreach($conf as $nombre=>$valor)
$this->appendBody("<p><b>" . $nombre . "</b>: " . $valor . "</p>");

$this->appendBody("</body></html>");


}
}

JApplicationWeb::getInstance("laWeb")->execute();
En el punto de entrada seguro a Joomla, lo que se suele hacer es definir una variable, que en partes del CMS se busca y si no está declarada entonces termina la ejecución. Ésto se hace para evitar accesos directos por URL a ciertos archivos. Ésto es otro tema pero es de uso aconsejable.
La historia está en crear el objeto $conf declarado como un objeto de tipo JConfigExample, entonces en cualquier parte de nuestro programa podemos consultar los datos de configuración guardados en dicha variable $conf. En la práctica el CMS usa un objeto de tipo JConfig y se almacena para su uso posterior.
JPlatform, datos de la plataforma
Ésto es una clase destinada a guardar la información sobre la plataforma, versión del framework, nombre en clave y otros datos. Poniendo JPlatform::VARIABLE, podemos acceder a esos datos como en el ejemplo siguiente:
<?php
 
define('_JEXEC', 1);
require "libraries/import.php";

class laWeb extends JApplicationWeb {
protected function doExecute()
{
$this->setBody("<html><body>");
$this->appendBody("<h1>Información sobre la Plataforma Joomla!</h1>" .
"<p>Compilación: " . JPlatform:: BUILD . "</p>" .
"<p>Nombre en código: " . JPlatform:: CODE_NAME . "</p>" .
"<p>Copyright: " . JPlatform:: COPYRIGHT . "</p>" .
"<p>Texto del link: " . JPlatform:: LINK_TEXT . "</p>" .
"<p>Mantenimiento: " . JPlatform:: MAINTENANCE . "</p>" .
"<p>Producto: " . JPlatform:: PRODUCT . "</p>" .
"<p>Liberación: " . JPlatform:: RELEASE . "</p>" .
"<p>Fecha de liberación: " . JPlatform:: RELEASE_DATE . "</p>" .
"<p>Tiempo de liberación: " . JPlatform:: RELEASE_TIME . "</p>" .
"<p>Zona de tiempo de liberación: " . JPlatform:: RELEASE_TIME_ZONE . "</p>" .
"<p>Estado: " . JPlatform:: STATUS . "</p>" );

$this->appendBody("<p>Versión larga: " . JPlatform::getLongVersion() . "</p>" );
$this->appendBody("</body></html>");


}
}

JApplicationWeb::getInstance("laWeb")->execute();
Además de lo de aquí arriba también tenemos la función getShortVersion y isCompatible que devuelven una versión corta de la versión del framework que estemos usando y para comprobar si es compatible. isCompatible se usa para el CMS, para saber si es compatible el framework y el CMS.
Terminando
Los dos ejemplos anteriores los tienen en descarga aquí.

Con ésto me despido por hoy.

Saludos.


Cómo hacer una plantilla para Joomla

2012-10-21 - Categorías: General

Hablando sobre la creación de páginas web con CMSs. Podemos llegar a ver que la cantidad de CMSs que hay para poner en marcha una web sin programar nada de código fuente es muy grande. He visto que los principales vienen siendo WordPress, Drupal y Joomla. Y en orden de gente que los usa, Joomla viene ganando, o por lo menos eso es lo que he leido en varias páginas de habla hispana y a fecha de hoy.

Me decidí a aprender Joomla en un principio, pero acabé probando WordPress y Drupal también. El Joomla para el que va éste post es la versión 2.5 y tal vez sirva también para los de la 1.5 y en futuro. Yo de momento la versión que tengo instalada es la 2.5 y es la que he usado para escribir éste tutorial.

Vamos a comenzar por ver la estructura en líneas generales de Joomla, si vamos al directorio, por los nombres podremos hacernos una idea de que la carpeta templates/ (plantillas en castellano) es la carpeta en cuestión que nos interesa.

administrator/
cache/
cli/
components/
images/
includes/
language/
libraries/
logs/
media/
modules/
plugins/
templates/
tmp/
uploads/
configuration.php
favicon.ico
htaccess.txt
index.php
LICENSE.txt
README.txt
robots.txt
web.config.txt

Dentro de la carpeta tenemos las carpetas correspondientes a todas las plantillas que tenga instaladas nuestro Joomla. Podemos editarlas directaremente de aquí, o a través del administrador de Joomla, actualizamos la página y los cambios se verán.

La plantilla ‘atomic’ es una plantilla básica, sin muchas florituras, para que hagamos a partir de ella, la nuestra propia. Pero mirando los archivos que la componen podemos ver que hay demasiado código fuente si es que estas haciendo tu primera plantilla, así que vamos a crear otra más simple todavía y luego le podrás añadir todo lo que quieras.

La plantilla básica ‘atomic’ que proporciona Joomla tiene la siguiente estructura:

css/      <- aquí van las hojas de estilo
html/    <- páginas html peladas
images/     <- imágenes de la plantilla

js/      <- scripts de javascript

language/     <- archivos para las traducciones
component.php   <- para mostrar el contenido de los componentes
error.php    <- página de error
favicon.ico   <- el icono de la web
index.html    <- el index en html
index.php    <- el index en php
template_preview.png    <- vista previa de la plantilla
template_thumbnail.png    <- imagen pequeña de la vista previa
templateDetails.xml      <- descripción de la plantilla, para uso interno

Hay plantillas muy grandes, con muchos añadidos, pero ésta que suponemos básica vamos a reducirla de la manera siguiente. Sólo necesitamos lo siguiente para nuestra nueva plantilla:

css/      
favicon.ico   
index.php   
template_preview.png  
template_thumbnail.png  
templateDetails.xml    

Todo ésto lo creamos en una carpeta nueva, yo la he llamado mynew/ dentro de la carpeta templates/ 
Y dentro de la carpeta css/ vamos a crear un archivo llamado ‘template.css’ para hacer la presentación mediante CSS. No se recomienda poner la estructura de una página web mediante tablas ni directamente formateando el archivo index.php. Ésto es porque no todos los navegadores interpretan exactamente igual las etiquetas HTML, sin embargo mediante CSS tenemos un control mucho mejor, afinando incluso pixel a pixel las posiciones y tamaños de todo. Así que vamos con esto y veremos que simple va a quedar y se va a entender cómo funciona todo.
El archivo index.php de ejemplo que vamos a usar es:
<?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );?>
<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»
  «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml» 
   xml:lang=»<?php echo $this->language; ?>» lang=»<?php echo $this->language; ?>» >
<head>
<jdoc:include type=»head» />
<link rel=»stylesheet» href=»<?php echo $this->baseurl ?>/templates/mynew/css/template.css» type=»text/css» />
</head>
<body>

<div id=»arriba»><jdoc:include type=»modules» name=»arriba» /></div>
<div id=»izquierda»><jdoc:include type=»modules» name=»izquierda» /></div>
<div id=»derecha»><jdoc:include type=»modules» name=»derecha» /></div>
<div id=»contenido»><jdoc:include type=»component» /></div>
<div id=»abajo»><jdoc:include type=»modules» name=»abajo» /></div>

</body>
</html>
No voy a explicar en éste minitutorial cómo se maqueta con CSS porque es muy extenso. La idea es que hay que poner todo con DIVs y esos DIVs se posicionan en el navegador mediante el archivo CSS que luego veremos.
Si queremos usar un archivo desde el index.php debemos usar la instrucción PHP: <?php echo $this->baseurl ?> como se usa en el ejemplo anterior, por ejemplo, para incluir el archivo template.css
Las posiciones vienen definidas por: <jdoc:include type=»modules» name=»nombrePosicion» /> y podemos poner tantas posiciones como queramos.
La posición principal que va a mostrar el contenido viene definida por: <jdoc:include type=»component» /> que sólo la vamos a poner una vez.
Ahora nos queda hacer el CSS y el templateDetails.xml. El favicon.ico y los archivos PNG, son imágenes, el favicon es el icono que sale en el navegador cuando alguien nos visita en la página, y los archivos PNG son los vistas previas, en grande y pequeño, que muestra Joomla dentro del gestor de plantillas. Así que seguimos con el CSS (hoja de estilo para los amigos) llamado ‘template.css‘, por ejemplo ponemos:
#arriba {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 30px;
  background-color: blue;
}
#izquierda {
  position: fixed;
  left: 0px;
  top: 30px;
  width: 100px;
  height: 100%;
  background-color: green;
}
#derecha {
  position: fixed;
  right: 0px;
  top: 30px;
  width: 100px;
  height: 100%;
  background-color: red;
}
#contenido {
  margin: 40px 110px 40px 110px;
  background-color: grey;
}
#abajo{
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 30px;
  background-color: blue;
}
El archivo templateDetails.xml es el archivo que define todo lo que necesita Joomla para poner las cosas en las posiciones en concreto y los contenidos. Un ejemplo para mi plantilla que he hecho llamada ‘mynew’ es:
<?xml version=»1.0″ encoding=»utf-8″?>
<extension version=»1.6″ type=»template»>
<name>mynew</name>
<creationDate>2012-10-21</creationDate>
<author>Yo mismo</author>
<authorEmail>Aquí v@ tu email .com</authorEmail>
<authorUrl>http://elblogdejnj.blogspot.com</authorUrl>
<copyright>http://elblogdejnj.blogspot.com 2012</copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>My New</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>favicon.ico</filename>
<filename>template_preview.png</filename>
<filename>template_thumbnail.png</filename>
<folder>css</folder>
</files>
<positions>
<position>arriba</position>
<position>izquierda</position>
<position>derecha</position>
<position>abajo</position>
<position>contenido</position>
</positions>
</extension>

Llegado éste punto, acabamos de crear la nueva carpeta dentro de templates/ y hemos puesto todos estos archivos. Ahora resulta que tal cual Joomla no ve la plantilla dentro del administrador de plantillas. Podemos ir al Gestor de Extensiones y darle a Encontrar, con lo que Joomla buscará todo lo que hayamos puesto manualmente sin usar el instalador de Joomla. Ahora ya veremos la nueva plantilla en el Gestor de Plantillas, la ponemos como plantilla del sitio y nuestro sitio tendrá la apariencia que acabamos de hacer.

Ahora podemos editar éstos archivos directamente, añadirles imágenes, cambiar la hoja de estilos CSS, las posiciones, etc.. y sólo con refrescar la página veremos los cambios.

Otra opción para usar ésta plantilla, es comprimir el directorio donde está, y después instalarlo con el gestor de extensiones. Es decir, en el ejemplo anterior, hemos creado el directorio mynew/ dentro de templates/, comprimimos el directorio mynew/ con todos los archivos que hemos puesto y nos quedará, en éste caso, el archivo mynew.zip con toda la plantilla. Éste archivo comprimido es el que usamos en el gestor de extensiones para instalar la plantilla.

Para terminar, si todo ha ido bien, entonces tenemos que ver algo parecido a lo siguiente en nuestro navegador:

Sólo queda poner en cada posición los módulos que queramos usando Joomla. En las posiciones ahora tendremos: arriba, izquierda, derecha, contenido y abajo; que son los valores que hemos usado en el index.php y hemos puesto también en el ‘templateDetails.xml’. Ahora todo es imaginación y con buena documentación sobre CSS podremos hacer que nuestra página con Joomla tenga una apariencia única, totalmente personalizada, con efectos 3D o cualquier otra cosa que se pueda hacer con HTML, Javascript, CSS, etcétera…

Ésto es todo un mundo, las plantillas, los editores de plantillas, maquetación, etcétera… hay mucha información por Internet. Espero que haya servido.

Un saludo.
Hasta la próxima

© 2024 JnjSite.com - MIT license

Sitio hecho con WordPress, diseño y programación del tema por Jnj.