El CSS es una tecnología web diseñada para controlar la presentación y diseño de los sitios. Su existencia devuelve el propósito original al HTML: gestionar la estructura y flujo del contenido.

El CSS también abrió un abanico de posibilidades al diseñador web, al ofrecer novedosos y funcionales recursos aplicables a la maquetación, además de la conocida reducción del conjunto de códigos, lo cual también se resume en ahorro de tiempo, así como mayor facilidad en el control del trabajo.

No obstante, es posible agregar más productividad al CSS implementando lenguaje dinámico. El método no es nuevo; los primeros ejemplos que pudimos observar datan de varios años. En esta oportunidad orientaremos su implementación al sistema Joomla!, una acción que se traduce en múltiples beneficios y ventajas, con las cuales no contábamos antes.

El problema

Entre los inconvenientes de llevar al límite la personalización de Joomla! se encuentra el hecho de que a menudo se generan grandes hojas de estilos. Esto se debe, en parte, a la necesidad de diferenciar estilos correspondientes a las diversas zonas del sitio, tales como contenido, weblinks, contactos, galerías, diversos módulos, etc.

El problema en sí no radica en el tamaño del CSS, el cual no suele pesar mucho. Por ejemplo, para que la hoja de estilos pese unos 20Kb se requiere más de 1000 líneas de código.

¡Precisamente en esa cantidad kilométrica de líneas está el problema! Quienes trabajamos con Joomla! de manera constante, seguramente ya nos hemos inventado un sistema de procedimientos para no perdernos en esa maraña de códigos. Para contrarrestar esto, algunos diseñadores separamos los archivos CSS según la organización del trabajo, importándolos luego desde una hoja de estilos principal.

De esta forma no nos confundimos tanto como si se tuviera todo en un solo documento. Dicha acción soluciona el problema… hasta que llega el momento de dispersar los selectores para evitar la redundancia de propiedades, lo cual constituye un verdadero tropiezo que destroza el orden de los estilos, sobre todo si somos dados a clasificarlos alfabéticamente.

Entonces ¿Cuál es la causa específica de este problema? La respuesta es simple: La calidad estática de la hoja de estilos. Cuando la parte del HTML contiene toda la carga de código, obviamente el CSS debe compensar la desigualdad de condiciones con más información, más datos. Una gestión dinámica de los estilos nivela la ecuación de manera sorprendente. Y los resultados te encantarán.

Los beneficios

El nivel de beneficios que ofrece un CSS dinámico depende directamente de los requerimientos del proyecto a desarrollar. En el caso de webs dinámicas las ventajas son indiscutibles. En esencia podemos resumirlas así:

• Reducción de la redundancia de código CSS y/o dispersión de selectores: Sobre todo, esto se observa en la maquetación de webs dinámicas, donde se hace necesario asignar estilos a diversas secciones del sitio. Un procedimiento usual para contrarrestar esto consiste en la asignación de varios selectores a un mismo conjunto de estilos, lo cual rompe el orden de su disposición, sobre todo si están clasificados alfabéticamente.
• Recursos extra para el desarrollador: Todas las bondades del PHP están disponibles para ser usadas con creatividad y lograr objetivos que serían imposibles con una hoja de estilos común.
• Distribución equitativa de la carga de código dinámico: El hecho de implementar PHP en la hoja de estilos se resume en la simplificación de muchos procesos. Más adelante abordaremos este tema en detalle.
• Interpretación limpia del documento: No existen bugs ni sorpresas extrañas en la lectura de un CSS dinámico por parte del navegador.
• No rompe con los estándares W3C: Si la “hoja de estilos” está bien construida, el validador lo aprobará normalmente.

Los puntos en contra

Hasta ahora hemos visto un par de pequeños inconvenientes que no afectan el funcionamiento, pero aún así los anotamos:

El CSS se incluye en el HTML interpretado: Una hoja CSS separada puede procesar la mayoría del código PHP. Sin embargo, existe un problema con las funciones específicas de Joomla!, las cuales no se ejecutan si la hoja de estilos es enlazada como un CSS normal.

Sólo funciona si agregas el archivo como un include. Esto ocasiona que el contenido se refleje directamente en el HTML, funcionando a la perfección, pero es posible que algunos encuentren esto un tanto antiestético.

La información CSS se carga cada vez que se cambia la página: Unos cuantos gramos de más en el conjunto de Kb de carga. Algunos diseñadores prolijos en la reducción de peso en el conjunto de archivos experimentarán cierta incomodidad con esto.

En cuanto al trabajo del CPU en procesar la información PHP contenida en la hoja de estilos dinámica, no creemos que represente un inconveniente. La carga de instrucciones correspondientes al CSS no serán tan relevantes como para retrasar el tiempo del servidor en procesarla.

Recordemos también que la intención no es agregar más código a nuestro proyecto, sino reducirlo de manera sinérgica para lograr mejores resultados gracias a su distribución lógica y equitativa.

El método actual de trabajo en Joomla!

A continuación explicaremos parte del método profesional de personalización de un sitio Joomla!. Supongamos que deseamos colocar un logo en nuestra Página de Inicio y otro en el resto de la web.

En el index.php:

if ($option == 'com_frontpage') {
  <div id="cabezal"></div>
  } else {
  <div id="cabezal-2"></div>
}

… Y en la hoja CSS:

div#cabezal {
   background: url(imagen-1.jpg) no-repeat;
   width: 400px;
   height: 200px;
}
div#cabezal-2 {
   background: url(imagen-2.jpg) no-repeat;
   width: 400px;
   height: 200px;
}

Ahora bien, si no se desea la repetición de estilos, ésto es lo que se hace:

div#cabezal, div#cabezal-2 {
   width: 400px;
   height: 200px;
}
div#cabezal {
   background: url(imagen-1.jpg) no-repeat;
}
div#cabezal-2 {
   background: url(imagen-2.jpg) no-repeat;
}

Lo anterior ilustra un mínimo ejemplo de asignación de clases distintas a una sola sección. Imaginemos el pandemonium de estilos que se produciría cuando además deseamos personalizar módulos, tipografía y toda la presentación entre un área y otra del sitio.

Algunos nos “ahorramos” un trecho de trabajo cambiando el nombre de la clase de la capa padre que funciona de contenedor y en lugar de escribir -por ejemplo- div#cabezal-2 lo colocamos como #contenedor-2 div#cabezal; de esta manera todo lo que afecte a dicha sección estará regido por #contenedor-2 [clase]. Si existe una capa padre, todas las etiquetas contenidas dentro de ésta llevarán su clase anticipada.

El otro modo de personalización de clases lo ofrece Joomla! de forma nativa, a través de la posibilidad de agregar un sufijo a la clase de determinado módulo, componente, menú y hasta artículo a través del panel de administración. El cambio quedaría archivado en la base de datos. Personalmente no utilizo este recurso porque no es necesario, salvo en casos muy esporádicos.

Bien sea de una u otra forma, el resultado inevitable es 1) la acumulación de estilos y 2) la dificultad en la localización y manejo de los estilos a partir de cierto punto. No es un padecimiento exclusivo de Joomla! sino de toda aplicación web, pero dada su amplitud de funciones y recursos (y por lo tanto de estilos), en Joomla! se hace más notable.

Ya mencionamos que el problema es la calidad estática del CSS. La solución siempre estuvo ante nuestros ojos y es la siguiente:

Construyendo un CSS dinámico orientado a Joomla!

El método que estamos a punto de aprender da un vuelco radical a la forma en que actualmente vemos el diseño de sitios Joomla!. Es posible que otro tipo de plataforma dinámica no requiera de tanta sofisticación en la gestión de estilos.

En Joomla! se hace necesario una vía capaz de abreviar los pasos a seguir a la hora de abordar el diseño de una web. La primera vez que observé este procedimiento fue en la hoja de estilos del pack PhpMyAdmin; luego de recoger mi mandíbula del suelo pude comprobar que efectivamente no es una novedad, sino -para nuestra fortuna- un método bien practicado y documentado en la web a nivel general, aunque lamentablemente escaso en nuestro idioma.

La preparación de los archivos constituye uno de los pasos más importantes. Lo primero que haremos será definir las rutas en el index.php de la plantilla. Esto lo lograremos a través de variables, las cuales no sólo servirán para que nuestro CSS dinámico funcione correctamente, sino para abreviar muchos procedimientos en el diseño. Igualmente le diremos al index dónde están los estilos:

<?php
$nombre_plantilla = 'mi_plantilla'; // El nombre de nuestra plantilla
$ruta = $mosConfig_live_site.'/templates/'.$nombre_plantilla; // La ubicación de la plantilla
$rutacss = $mosConfig_live_site.'/templates/'.$nombre_plantilla.'/css/'; // La ruta de las hojas de estilo CSS
$rutaimg = $mosConfig_live_site.'/templates/'.$nombre_plantilla.'/images/'; // La ubicación de las imágenes requeridas por la hoja CSS
$ruta_absoluta = $mosConfig_absolute_path.'/templates/'.$nombre_plantilla; // La ruta absoluta de la plantilla
include_once($rutacss .'/css.php'); // Inclusión de la hoja de estilos
?>

Como puedes notar, la hoja de estilos está siendo llamada como un archivo PHP común. Repetimos que ciertamente es posible enlazarla como una hoja CSS aparte, pero dicha acción desactiva la funciones más importantes de Joomla! y en dicho caso no valdría la pena implementarla.

En cuanto a la acción de definir las rutas, tiene su buen motivo: Al ser un CSS incluido en el HTML, las rutas de las imágenes ya no apuntarán desde el index de la plantilla, sino desde el index.php del directorio raíz del sitio. Las variables nos ahorran la molestia de escribir esas largas direcciones todo el tiempo.

Ahora nos ocuparemos de crear un archivo llamado css.php (o como desees) en la ubicación que nos resulte más cómoda. En este caso lo colocaremos en el directorio de las hojas de estilo /templates/mi_template/css/css.php. Le introducimos los primeros datos:

<style type="text/css">
   <?php
$css='
//Aquí van los estilos
';
$css = str_replace('url(' , 'url(' .$rutaimg , $css); // Ruta de las imágenes
$css = str_replace('@import url(' , '@import url('. $rutacss , $css); // Ruta de las hojas CSS importadas
echo $css; // Salida del CSS
?>
</style> 

¿Ya estás comprobando la importancia de definir las rutas? La penúltima línea tiene como objetivo direccionar correctamente la carpeta donde se encuentran las imágenes por medio de una función de reemplazo. Por otra parte, la última línea es la que dará salida a todo lo que coloques en el espacio destinado a los estilos.

Ya nuestro CSS dinámico está lista para recibir datos. Abordemos ahora algunos ejemplos prácticos.

Ejemplo 1:Supongamos que deseamos colocar un logo en nuestra Página de Inicio y otro en el resto de la web. (Para ayudar a comprender la sintaxis hemos colocado comentarios a la derecha de cada línea).

<style type="text/css">
<?php
  if ($option == 'com_frontpage') { // "Si estamos en la portada"
    $logo = 'url(logo-portada.jpg) #ffffff no-repeat;'; // "Éste será el resultado"
    } else { // "de lo contrario..."
    $logo = 'url(logo-generico.jpg) #ffffff no-repeat;'; // "... El resultado será éste"
  }
$css = '
div#cabezal {
  background: '. $logo .'; // Aplicando la instrucción por medio de la variable
}
';
$css = str_replace('url(' , 'url(' .$rutaimg , $css);
echo $css;
?>
</style>

Seguramente ya comienzas a visualizar el ahorro de tiempo y esfuerzo. Sólo esta acción evitó:

• Que hiciéramos el trabajo de diferenciar componentes en el index.php, sólo para asignarles clases distintas, y consecuentemente…
• Que redundáramos las clases en la hoja CSS, o…
• Que asignáramos sufijos de clases distintos a nivel de panel, de forma innecesaria, lo cual provocaría más redundancia o -en el mejor de los casos- la dispersión de selectores al tratar de reducir la repetición.

Mientras tanto, el resultado del ejemplo anterior es sencillo de comprobar. Al observar tu hoja de estilos desde el navegador, sólo existirá un div#cabezal, pero con datos acordes a la sección en la cual nos encontremos en ese momento. Sigamos con más ejemplos.

Ejemplo 2: Ahora imaginemos que queremos colocar un logo distinto en la sección de Enlaces Web, pero manteniendo lo anterior.

<style type="text/css">
<?php
if ($option == 'com_frontpage') { // "Si estamos en la portada"
   $logo = 'url(logo-portada.jpg) #ffffff no-repeat;'; // "Éste será el resultado"
   } else if ($option == 'com_weblinks') { // "pero si estamos en la sección de Enlaces..."
   $logo = 'url(logo-enlaces.jpg) #ffffff no-repeat;'; // "... el resultado será éste"
   }else{ // "De lo contrario..."
   $logo = 'url(logo-generico.jpg) #ffffff no-repeat;'; // "... el resultado será éste"
}
$css = '
div#cabezal {
  background: ' .$logo . '; // Esto queda igual
}
';
$css = str_replace('url(' , 'url(' .$rutaimg , $css);
echo $css;
?>
</style>

Ejemplo 3: Veamos ahora otra variante del caso un poquito más compleja. Supongamos que ese mismo logo de los Enlaces Web tiene un tamaño distinto a los otros.

<style type="text/css">
<?php

  if ($option == 'com_frontpage') { // "Si estamos en la portada"
    $logo = 'url(logo-portada.jpg) #ffffff no-repeat;'; // "Éste será el resultado"
    } else if ($option == 'com_weblinks') { // "pero si estamos en la sección de Enlaces..."
    $logo = 'url(logo-enlaces.jpg) #ffffff no-repeat;'; // ... "el resultado será éste"
    }else{ // "De lo contrario..."
    $logo = 'url(logo-generico.jpg) #ffffff no-repeat;'; // ... "el resultado será éste"
  }

//Aquí comenzamos con la configuración del tamaño
  if ($option == 'com_weblinks') { // "Si estamos en los Enlaces Web"
    $logo_ancho = '400px'; // "Éste será el ancho del logo"
    $logo_alto = '200px'; // "y éste el alto"
    }else{ // "De lo contrario..."
    $logo_ancho = '300px'; // "Éste será el ancho del logo"
    $logo_alto = '150px'; // "y éste el alto"
  }
$css = '
div#cabezal {
  background: '. $logo .';
  width: '. $logo_ancho .';
  height: '. $logo_alto .';
}
';
$css = str_replace('url(' , 'url(' .$rutaimg , $css);
echo $css;
?>
</style> 

¿Semántica dinámica?

Existe un factor que desde ahora deberíamos tomar en cuenta e internalizar como principio. En el diseño web moderno hay una regla infalible y muy simple: El HTML se ocupa de todo lo referente a la estructura, y el CSS de todo lo referente a la presentación.

Puesto que el CSS también pasó a ser dinámico, esa regla debería seguir vigente: el código PHP que controla la estructura se escribirá en la parte del HTML, y el PHP que controla la presentación se escribirá en la hoja de estilos CSS.

Lo anterior no sólo suena lógico, sino que nos ayudará a organizar mejor nuestro trabajo, tanto en la ubicación/disposición del código como en la resolución de problemas, además de hacer más fácil la búsqueda e identificación de posibles problemas (que van desde una simple capa mal colocada hasta errores de diversos tipos).

Construir una web dinámica es un proceso complicado por sí mismo puesto que el sitio no está compuesto por archivos; toda la información, enlaces, secciones, categorías y demás reposa copm texto en una base de datos. Si queremos personalizar al máximo una web en estas condiciones, es necesario encontrarle un uso más sinérgico y organizado al motor que la controla, el PHP.

Sólo imagina las posibilidades de lo que puedes lograr. Para una muestra de lo mencionado veamos el siguiente ejemplo.

Ejemplo 4: Aquí vamos a rotar 3 imágenes de un cabezal en orden aleatorio. La rotación se produciría con cada refresco de página, mientras se conserva la misma clase todo el tiempo. Todo esto empleando sólo CSS dinámico:

<style type="text/css">
<?php
  $imagenes = array("imagen1.jpg","imagen2.jpg","imagen3.jpg");
  $resultado = $imagenes[rand(0, count($imagenes)-1)];
$css = '
div#cabezal {
  background: url('. $resultado .') no-repeat;
}
';
$css = str_replace('url(' , 'url(' .$rutaimg , $css);
echo $css;
?>
</style>

Ejemplo 5: Ahora agreguemos más condimento al mismo caso. Supongamos que cuando la Página de Inicio muestre un juego de logos rotatorios, la sección de Contenido mostrará otro, mientras que Enlaces Web tendrá un juego distinto:

<style type="text/css">
<?php
  if ($option == 'com_frontpage') {
     $imagenes = array("imagen1.jpg","imagen2.jpg","imagen3.jpg");
     } elseif ($option == 'com_content') {
     $imagenes = array("imagen4.jpg","imagen5.jpg","imagen6.jpg");
     } elseif ($option == 'com_weblinks') {
     $imagenes = array("imagen7.jpg","imagen8.jpg","imagen9.jpg");
  }
  $resultado = $imagenes[rand(0, count($imagenes)-1)];
$css ='
/*Por supuesto, la parte del CSS queda exactamente igual para todos */
div#cabezal {
  background: url('. $resultado .') no-repeat;
}
';
$css = str_replace('url(' , 'url(' .$rutaimg , $css);
echo $css;
?>
</style>

Es perfectamente posible lograr esto trabajando la parte dinámica en el HTML y agregando unos cuantos estilos más. El procedimiento anterior refleja sólo un estilo en el resultado del CSS, que cambia según la sección donde se encuentre el usuario. Es muy importante asignar las porciones de código en el archivo correspondiente, distribuyendo así los fragmentos de manera lógica.

Anteriormente se mencionó que podía organizarse mejor el trabajo siguiendo el mismo principio semántico que rige al diseño web: Estructura para el HTML y presentación para el CSS. Ciertamente es posible hacer más de lo debido con el CSS dinámico, pero luego de probar algunos escenarios que fuerzan la capacidad y objetivo original del CSS, pude percatarme que es mejor mantener las cosas dentro de dicho principio, pues de lo contrario se causarán más problemas de los que se resolverían.

Por lo tanto es mejor distribuir la carga, porque una de las principales recompensas la constituye el hecho de liberar buena parte de la responsabilidad a la parte del HTML (el index.php de nuestra plantilla). Anteriormente era necesario crear nuevas clases, dejando todo el peso dinámico a dicha sección, mientras el CSS permanecía estático y acumulando líneas eternas para compensar la desigualdad de condiciones.

Conclusión

Hasta ahora hemos observado al PHP haciendo un trabajo más productivo que un mosLoadModules o cualquier otra sintaxis propia de una plantilla común. Llevando la gestión de estilos a un carácter dinámico, hemos logrado simplificar de manera relevante varios aspectos que hasta el momento resultaban un dolor de cabeza. La combinación PHP + CSS supone la existencia de un cúmulo de recursos, tan extenso como para considerarlo una gran e inesperada puerta abierta con mucho para aprovechar.

La semántica del código también contribuye -aunque no por sí misma- a aumentar la calidad sinérgica del proyecto. En el campo que tratamos, sinergia consiste en el logro de mejores resultados con el menor empleo posible de recursos. Utilizándolos con habilidad y creatividad, seguramente encontrarás vías más rápidas y simplificadas para alcanzar los mismos objetivos que anteriormente exigían unos cuantos pasos extra.

Como diseñador(a) web es necesario que tengas claro qué nivel de alcance necesitas de tus recursos y prepararte para adquirir nuevos conocimientos, cuya dificultad la determinan las mismas metas que te propongas completar. El método explicado no es ciencia astronáutica o ingeniería nuclear.

Lo único que se requiere es nuestra disposición a reconocer que existe un ingrediente más que el puro HTML y CSS, el cual nos ayudará a desarrollar webs más impactantes, con altos niveles de personalización y calidad integral. ¿Verdad que ahora te resultará difícil no querer intentarlo?.

Este es el tercer artículo de la serie de Joomla! en los cuales hemos realizado una introducción para los que no tienen conocimiento algunos sobre el software, hemos realizado los primeros ejercicios de creación de plantillas y finalmente hablaremos sobre algunos aspectos que hay que tomar en cuenta al momento de trabajar con Joomla!.

Planifica tu web

Con un trabajo previo de planificación tendrás una idea más precisa de los elementos que intervendrán en la misma y los recursos que utilizarás.

Simplifica tu método

Tal como se mencionó, el mejor método es el que te proporcione más comodidad, pues así te concentrarás más en lo que debes hacer y menos en los procedimientos rutinarios. Esto reviste de especial importancia si hablamos de elaborar plataformas dinámicas con ayuda de Joomla!.

Piano piano…

Si pretendes abarcar todo de un solo golpe y “a la fuerza” no te garantizo mucho éxito en tu proceso de aprendizaje. Esto te llevará a buscar atajos a problemas específicos cuyas causas aún no conoces (o peor aún, dejarlos pasar).

Cada problema resuelto es una lección en sí, pues el trabajo que invertirás en su resolución seguramente involucrará, a su vez, otros factores que también conocerás y dominarás con más destreza a medida que se vayan presentando, adquiriendo un mayor nivel de aprendizaje integral en pocos meses.

Si en cambio esquivas los obstáculos que encuentres, es poco probable que en un futuro puedas obtener un conocimiento satisfactorio del Sistema Joomla!.

No te conformes

Si necesitas una extensión y la que encontraste no te agrada del todo, trata de adaptarla a tus necesidades. Estudia su código, compáralo con otros similares y haz las pruebas que necesites. Igualmente puedes adaptar la presentación a tu gusto manipulando su hoja de estilos CSS.

Ayúdate con scripts externos

Joomla! es muy versátil en este sentido. Con ello puedes insertar código externo (propio o prestado) y agregar condimento productivo a tu web.

De hecho muchas de las extensiones fabricadas por terceros incluyen scripts que puedes bajarlos libre y gratuitamente de sitios como DHtmlGoodies o DinamycDrive. Si no eres muy ducho(a) en el tema, te agradará saber que Joomla! permite separar el HTML del PHP en sus plantillas, lo cual agrega sencillez a la hora de recurrir a recursos foráneos.

Aprende a diseñar Interfaces

Si deseas desarrollar un portal informativo, convendría mucho que te instruyeras en el Diseño de Interfaces Web, a fin de construir sitios que respondan lo mejor posible a su objetivo sin que por ello sacrifiques tu toque estético.

Unas sólidas nociones de Diseño de Interfaces te llevarán a una etapa más profesional de desempeño otorgándote, a la vez, la capacidad de atender un nivel distinto de clientes. Esto se aplica a Joomla! y a toda clase de desarrollo de plataformas dinámicas en la web.

Practica y ¡Equivócate en grande!

No tengas miedo de experimentar y fallar. Las fallas son las que te estimularán a practicar más, y la práctica productiva te dará el éxito.

Descarga el pack Joomla! traducido al español; usa tu servidor local (¿No sabes cómo instalar un servidor propio?). Luego experimenta, investiga y haz las pruebas que desees; arruina todos los packs que sean necesarios mientras vas comprendiendo cómo funciona.

Versión 1.5 de Joomla!: un notable avance en el campo de los CMS

Actualmente la versión estable de Joomla! es la 1.0.12 [Sunfire], declarada como Estable el 25 de Diciembre de 2006. La nueva versión será la 1.5 [Red Barchetta], cuyo estado de desarrollo se encuentra en su fase Beta 2 y próximamente nos traerá excelentes beneficios integrales.

La más notables de las mejoras está constituida por la reescritura completa del código actual, una acción que no sólo separará definitivamente a Joomla! de la “herencia Mambo”, sino también se ha optimizado la estructura de sus archivos de una forma más lógica y organizada que las versiones anteriores a la 1.5.

En tal sentido cabe resaltar la reconfiguración de la estructura del código asignado a las distintas funciones del sitio. El desarrollador encontrará mucha facilidad en la localización de elementos que desea modificar.

Dicha organización también incluye -¡Ya era hora!- la disposición de las líneas de idioma en archivos separados y dispuestos en directorios específicos. En las versiones 1.0.X de joomla! estas líneas se encuentran dispersas a lo largo de toda la aplicación. Con este nuevo sistema organizativo, las traducciones de Joomla! serán aún más sencillas y ágiles que en el presente.

En cuanto a la interfaz y opciones administrativas, se agregaron suficientes características como para notar las grandes ventajas que llegan de la mano con esta nueva versión. Aspectos como la gestión de detalles de plantilla desde el mismo Panel de Administración (Colores, ancho, fondo, etc.).

Posibilidad de cambiar “al vuelo” el tipo de Menú, la adición de opciones en la Configuración Global y la aparición de un motor FTP interno para gestionar archivos y permisos, son parte del conjunto de mejoras que se obtendrán con la versión 1.5 de Joomla! al ser anunciada como Estable.

La licencia de uso de Joomla!

Joomla! es Software Libre bajo licencia GNU/GPL. Puedes modificar el software, distribuirlo libremente, crear elementos que se adapten a éste y comercializar tu trabajo sin permiso previo o posterior.

Puedes remover los créditos del pie de página y colocar los tuyos si así lo deseas. Dale un vistazo a los términos de la Licencia GNU/GPL y te informarás mejor al respecto.

¿Los recursos y extensiones de Mambo también le sirven a Joomla!?

Actualmente Joomla! y Mambo comparten muchos puntos comunes en su arquitectura, por lo cual es común que las extensiones de una aplicación puedan servirle a otra.

Sin embargo esto no es una regla inflexible, pues a medida que las versiones suben dicha semejanza está disminuyendo, afectando la compatibilidad de los recursos fabricados para cada una.

¿Por qué tanto peso en el conjunto de archivos de Joomla! comparado con otras aplicaciones web?

De forma nativa, Joomla! contiene una serie de recursos, características y ventajas los cuales, en el caso de otros CMS, habría que instalarlos (y actualizarlos) por separado. Dichos recursos están divididos en módulos, componentes y plugins (Mambots), además de opciones administrativas muy usables y de amigable interfaz.

Algunas desventajas de Joomla!

A continuación una lista de aspectos negativos observados en Joomla!. Advertimos que consiste en un análisis netamente subjetivo de quien escribe este artículo, basado en la experiencia personal con la aplicación:

• El código HTML generado no es semántico: (Explicado más arriba).
• No existen acciones sólidas del Grupo de Desarrollo para hacer la aplicación más accesible: A pesar de la creciente importancia de la accesibilidad en las webs, poco se ha hecho al respecto con Joomla!.
• Esperemos que las acciones futuras apunten más hacia esta necesidad primaria.
• Dependencia excesiva del Javascript en su Panel de Administración: Una buena dosis de <noscript> alternativos no vendría nada mal.
• Limitación en las opciones para personalizar rangos de usuarios: No sólo para personalizarlos, sino para crear nuevos rangos y permisos. Muchas veces se hace insuficiente con los actuales. Existe un componente denominado Community Builder que mejora un poco lo presente, pero tampoco da la talla en algunos casos. Lo ideal sería un buen motor de usuarios que venga de forma nativa.
• Deficiente planificación de la interfaz administrativa: Este aspecto es una de las herencias de Mambo y mejoró notablemente en la versión 1.5, actualmente en fase beta. En especial nos referimos a la presencia de funciones redundantes que muchas veces han causado confusión a la hora de configurar el sitio, lo cual causa cierta confusión a los usuarios que se inician en Joomla!. Igualmente hay quienes lo consideran cómodos desde la primera vez. Cuestión de instalarlo y experimentar el feeling con la aplicación. No obstante, lo colocaremos en la lista de aspectos negativos, ya que también tenemos el hecho de que existe un extenso cúmulo de código destinado a ejecutar dichas funciones.

Lecturas recomendadas

• ¿Qué es Joomla!?
• Diseñando tu primera plantilla Joomla!

Personalizando Joomla!

No hay límites en la personalización de una web hecha con Joomla! si se conoce la aplicación suficientemente. En este momento podríamos dividirla en dos niveles: Básico y Avanzado.

El Nivel Básico:

Está constituido por todo el conjunto de acciones ejecutadas a nivel de plantilla (template). A esta altura encontramos muchas herramientas útiles a nuestra disposición, tales como el HTML, CSS y la mayoría de las funciones PHP del software, obteniendo la posibilidad de lograr excelentes resultados finales, tanto en la apariencia del sitio como en sus capacidades operativas.

El Nivel Avanzado:

Se resume en la personalización total de la aplicación. Si bien el Nivel Básico ofrece abundante disponibilidad de recursos, es en el Avanzado donde se fabrican las mejores webs, ya que las modificaciones abarcan los archivos de núcleo.

También llamados archivos del Core y con ello nos liberamos de las limitaciones que causa la parte de la estructura que no se puede controlar desde el diseño de la plantilla. Por supuesto hay un precio que el diseñador/desarrollador debe pagar, y es dedicar el tiempo necesario para documentarse, practicar, errar y llegar a un rango satisfactorio en el conocimiento del programa; no obstante, la recompensa es grande.

La relativa desventaja que acarrea el Nivel Avanzado es que debe tenerse en cuenta el total de modificaciones efectuadas a la hora de una actualización de la aplicación y/o componentes, módulos y plugins afectados. Al respecto resulta necesario llevar un registro (log) de cada cambio llevado a cabo, a fin de proceder sin problemas con las futuras actualizaciones.

Aún así el Nivel Avanzado sigue siendo la mejor opción para lograr la excelencia en la construcción de un sitio y con ello ofrecer más calidad de adaptación a clientes exigentes.

No obstante, como recomendación personal sugerimos comenzar con el Nivel Avanzado sólo cuando se domine el conjunto de opciones que ofrece el Básico, cuya gama de alternativas son muy amplias y deberían ser explotadas antes de decidir modificar los archivos del núcleo.

Versión de cuatro clics

Es cierto que con Joomla! es posible poseer una web completa y operativa con sólo una instalación de 4 clics. Pero a medida que vamos adentrando en las capacidades del programa, descubrimos que el verdadero valor de Joomla! no radica en esa visión de “4 clics” sino más bien en su calidad de materia prima, la cual nos otorga un sinfín de posibilidades para poder moldearla a nuestras verdaderas necesidades y gustos.

Diseñando tu primera plantilla Joomla!

Antes de comenzar con este segmento, es necesario acotar que el diseño web es una disciplina completa e independiente que no debería tomarse a la ligera. Como toda carrera, el diseño tiene sus principios y mucho material para leer, practicar y aplicar.

Sobre todo en el campo de la web, el diseño se ha convertido en una disciplina integral que aglomera varias ramas. Sin embargo ahora es preciso continuar con el hilo del tema, así que lo retomamos.

¿Cuál es el método para diseñar una plantilla en Joomla!?

Muchas personas han hecho está pregunta en distintos foros, otros tantos han respondido con una serie de pasos para tal fin, pero la verdad es que el método más efectivo es el que te haga sentir más cómodo(a).

Por ejemplo, puedes comenzar elaborando tu trabajo como si se tratara de una web estática, agregando luego el código Joomla! correspondiente; o si eres de esas personas valerosas que no temen tropezar con piedras y metales se podría pensar en diseñar la plantilla directamente.

Por otra parte, como método de iniciación muchos diseñadores han encontrado buen feeling en modificar plantillas existentes. Algunos(as) prefieren un programa Wisywig, otros(as) un simple editor de textos. En la variedad está el gusto, pero lo importante no es adaptarse a un sistema específico de procedimientos, sino encontrar la forma de proceder que más se adapte a ti.

Adentrándonos más en la aplicación, muchas de las opciones de ubicación de los elementos las controlarás desde tu Panel de Administración, así que también debes conocer los recursos disponibles (y sus limitaciones) y aprender a combinarlos para que trabajen a tu favor.

Funciones como la definición de algunos estilos CSS predeterminados, la posición de los módulos y la configuración de los menús son asuntos directamente relacionados con el diseño/maquetación del sitio, a la vez que se gestionan desde el Panel, ya que sus detalles de configuración irán a la Base de Datos.

En cuanto a la estructura CSS de Joomla! podemos dividirla en tres grandes ramas:

• Las etiquetas generales
• Los estilos nativos u originarios de Joomla!
• Nuestros estilos personalizados. Vale la pena que revises esta Guía CSS de Joomla! que te orientará con respecto a los estilos nativos.

Tal como la generalidad de los CMS, la plantilla de Joomla! controla la mayoría de la presentación del sitio. También existe la opción de asignar una plantilla distinta a los diversos Componentes de la web. La gestión de Módulos también es muy flexible.

Pueden aparecer o no a lo largo de todo el sitio según la configuración ejecutada desde el mismo Panel o si lo prefieres ayudándote del PHP que insertarás en la misma plantilla. Éste último método es el que mejor permite personalizar dicha parte, ya que las posibilidades de maquetación aumentan y no se limitan a las opciones de configuración que vienen de fábrica.

¿Las plantillas prediseñadas representan una ayuda inicial?

¡Sin duda!. Todo el tiempo que puedas invertir en estudiarlas, modificarlas y jugar con ellas vale la pena. En especial te recomendamos dos plantillas especiales que vienen incluidas en el pack Joomla!: “Made Your Web” y “Rhuk Solarflare II”. Éstas no sólo fueron elaboradas para decorar el sitio, sino que tienen un fin netamente didáctico.

Están debidamente estructuradas y comentadas para los interesados e interesadas en profundizar conocimientos en el tema. Especialmente la “Rhuk Solarflare II” posee interesantes funciones dinámicas (como el ocultamiento automático de tablas) que merecen unas buenas sesiones de estudio.

¿Joomla! posee una estructura semántica?

Sin mucho preámbulo: No. Al menos si empleas su configuración original. Ciertamente la aplicación fue pensada para quienes no se quieren romper la cabeza entre códigos (el usuario común que quiere tener una web dinámica de inmediato).

Por otra parte, desde un principio se exigía una arquitectura a la cual se pudiesen adaptar componentes y añadidos fabricados por terceros. Es por tal motivo que gran parte de la estructura de Joomla! es un atentado mortal a la semántica y la accesibilidad.

Veamos un ejemplo, un simple titular de artículo que no debería requerir más que:

<h3  class=”contentheading”>Éste es el Título</h3>

Pero en Joomla! está estructurado así:

<table class="contentpaneopen">
  <tr>
    <td  class="contentheading" width="100%">
      Éste es el Título
    </td>
  </tr>
</table>

¿Un poquito “feo” verdad? Técnicamente el fragmento anterior no está mal dispuesto. De hecho (a excepción del Componente “Wrapper”) todo el código generado por Joomla! pasa la prueba de validación W3C -como XHTML 1.0 de Transición-, lo cual significa que una plantilla correctamente elaborada no debería causar errores de validación al sitio (algo de lo cual no puede presumir todo CMS).

Pero al mismo tiempo es válido reconocer que semánticamente Joomla! es un desastre, pues se aplican tablas indiscriminadamente a contenido que no necesita ser tabulado, resultando en una inconveniente ensalada de etiquetas cuyos datos de diseño -para colmo- no están totalmente controlados por estilos CSS, lo cual se traduce en diversos inconvenientes de diseño, accesibilidad y posicionamiento.

Afortunadamente esto y mucho más se puede modificar a criterio del desarrollador sin mayores problemas que los que pudiese enfrentar con las actualizaciones, la compatibilidad con extensiones prefabricadas y, naturalmente, el tiempo que le tome efectuar dichos cambios.

Lecturas recomendadas

• ¿Qué es Joomla!?
• Tips para mejorar tu desempeño con Joomla!

De los miles de CMS existentes en la actualidad, sólo unos pocos realmente están llevando la web a una nueva era de agilidad en la inclusión de contenido, estímulo de la comunicación colectiva y reconocimiento al usuario como generador de información útil, en lugar de simple “tragador” pasivo de artículos y noticias.

Desde su aparición al público, Joomla! ha avanzado a pasos agigantados, siendo uno de los líderes en la lista de los mejores CMS, aún por encima de aplicaciones comerciales.

Orígenes de Joomla!

A mediados de 2005, los administradores del equipo de desarrollo de Mambo (CMS antecesor de Joomla!) decidieron limitar las condiciones de la licencia de uso de su software.

Ante tal hecho, los principales desarrolladores de la organización estuvieron en desacuerdo y fue así que más de 30 miembros principales del equipo renunciaron de inmediato y fundaron Joomla!® una palabra de origen africano que significa “todos juntos”, un CMS que funcionaba con el núcleo de Mambo, pero con cambios importantes en el código y lo mejor de todo es software libre.

No sólo los desarrolladores de Mambo migraron al nuevo proyecto; miles de colaboradores, diseñadores y comunidades enteras lo respaldaron desde un principio, sobre todo al difundirse la noticia de la acción ejecutada por Mambo y sus propietarios.

De esta manera el proyecto Joomla! tomó aún más energía, llegando a ser la aplicación web que hoy conocemos, no sólo con excelentes características de gestión integral, sino con un futuro bastante promisorio en el ámbito de la Web 2.0.

En el presente, el fenómeno Joomla! representa más que la existencia de una aplicación web de avanzada. Es la demostración palpable de la superioridad que puede alcanzar el software libre cuando está presente el esfuerzo común, activo y organizado de una numerosa comunidad global.

Joomla! ¿Un sistema seguro?

En términos objetivos, nada que esté publicado en la web puede considerarse completamente seguro. Si han violado sistemas tan complejos como el de la Fuerza Aérea norteamericana, poco queda para el resto del contenido de internet.

Ahora bien, si nos plegamos a lo que la generalidad entiende como “seguridad en internet”, Joomla! es uno de los escasos CMS que cuenta con la suficiente participación activa como para generar soluciones precisas en el menor tiempo posible ante los bugs/vulnerabilidades que se vayan descubriendo.

Esto de la seguridad no es un mal exclusivo de Joomla!; otros CMS han caído bajo el yugo de los ataques y muchas veces la solución llega demasiado tarde.

¿Es difícil comprender el sistema Joomla!?

Ante tal pregunta surgiría otra: “¿Comparado con qué?”. Es probable que sistemas más simples en su arquitectura (como WordPress o Drupal*) exijan menos tiempo que Joomla! para aprender a moldearlos a gusto.

Sin embargo, para un desarrollador resulta muy atractiva la robustez en las funciones de una aplicación, ya que con ello puede agregar más puntos de calidad integral a sus trabajos.

Si tu objetivo es dominar el sistema de Joomla! con la finalidad de alcanzar un nivel satisfactorio de personalización, deberás pasar por la etapa obligatoria de acumular algunas “horas de vuelo” con HTML, PHP y (si se quiere dar buenos condimentos de usabilidad al resultado final) Javascript, sin olvidar la importancia de los fundamentos de Diseño.

En cuanto al procedimiento, no importa el que utilices para sentirte cómodo(a) a lo largo de tu aprendizaje con el sistema Joomla!, con tal observes una regla importante: mantén tu método simple. Si lo complicas, el proceso se te hará cuesta arriba.

*Mencionamos a WordPress y Drupal porque al igual que Joomla!, sus sitios oficiales ofrecen abundante documentación de desarrollo, un aspecto decisivo para el estudio e investigación de determinada aplicación.

Comenzando con Joomla!

En principio es bueno saber cómo están organizados los distintos elementos que intervienen en Joomla! y cómo actúan para devolver los resultados esperados.

Cuando un usuario escribe o hace click en nuestra dirección web, el index.php inmediatamente “llama” a la plantilla que estamos usando:

En el index de la plantilla se encuentra buena parte de la información de estructura de la web, y casi toda la información de los estilos. No toda la estructura se controla desde la plantilla porque ésta, a su vez, “llama” a los elementos que el diseñador incluyó con anterioridad.

Es decir, si en la plantilla se requieren módulos, entonces aparecerá el Módulo específico que originalmente se encuentra en su directorio y ahora se refleja en el sitio. Igualmente sucede con los Componentes.

Todo Módulo y Componente tiene insertada su propia estructura HTML, así como instrucciones PHP particulares para cada caso, y algunas veces hasta su propia hoja de estilos CSS. Los Módulos están en el directorio /modules/ y los Componentes en /components/. Puedes probar personalizando el Módulo que más te guste con tus propias etiquetas y opciones de configuración, ya que cada Módulo tiene sus parámetros en un archivo XML.

Lo anterior constituye una explicación muy básica (quizás haga falta otro artículo más técnico y específico al respecto), pero ahora sabes que la “compleja estructura” no es tan compleja; un archivo llama a otro y todo se refleja como HTML a la vista de tus visitantes.

Otras lecturas:

• Diseñando tu primera plantilla Joomla!
• Tips para mejorar tu desempeño con Joomla!