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?.