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.
{xtypo_quote} 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. {/xtypo_quote}
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.
{xtypo_warning}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.{/xtypo_warning}
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:
{xtypo_code} if ($option == ‘com_frontpage’) {
<div id="cabezal"></div>
} else {
<div id="cabezal-2"></div>
}{/xtypo_code}
… Y en la hoja CSS:
{xtypo_code}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;
{/xtypo_code}
Ahora bien, si no se desea la repetición de estilos, ésto es lo que se hace:
{xtypo_code} 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;
}{/xtypo_code}
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:
{xtypo_code}<?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
?>{/xtypo_code}
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:
{xtypo_code} <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> {/xtypo_code}
¿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).
{xtypo_code} <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>{/xtypo_code}
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.
{xtypo_code} <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>{/xtypo_code}
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.
{xtypo_code} <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> {/xtypo_code}
¿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:
{xtypo_code} <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>{/xtypo_code}
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:
{xtypo_code} <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>{/xtypo_code}
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.
Fuente: Maestros del web
