20 Sugerencias para mejorar el diseño de "Estilos" y "Script" en las Extensiones de Joomla! ( Parte 1)

Escrito por | 31 Octubre 2012 | Publicado en Nov. 2012
Alrededor de Joomla! orbitan una gran cantidad de desarrolladores produciendo extensiones para este extensible CMS. Pero, como ustedes saben o sabrán, algunas de estas geniales extensiones no son compatibles con muchas de las miles de plantillas que hay para Joomla!. Asimismo, en muchos casos, las extensiones de Joomla! no tienen un diseño estándar para los estilos y script, debido a esto, los usuarios se ven obligados a modificar dichas extensiones. En este artículo voy a explicar 20 sugerencias, sobre el diseño para los estilos y los script a seguir, en las Extensiones de Joomla! y tal vez estas técnicas simples y patrones “ayudará” a una mejor compatibilidad entre extensiones.

El contenido de este artículo está extraído de los muchos “experimentos” o vías de escape que los desarrolladores han ido encontrando. Puede existir la posibilidad de que se encuentre con una mejor solución, ya que hay muchas maneras de llegar a la meta, si es el caso, puede transmitirla en los comentarios.
El diseño de estilos y script es la parte principal a la hora de diseñar una Interfaz de Usuario, aunque parezca que es lo mismo, “no lo es”. Voy a explicar algunas de las soluciones para un mejor diseño de la interfaz de usuario en Joomla!. En próximos artículos explicaré más detalladamente, algunas de las soluciones para un mejor diseño de la UI en las Extensiones de Joomla!.
Tenga en cuenta que el significado de script en este artículo, es como el scripting del lado del cliente, como JavaScript. También, en los códigos como {nombre del componente}, se refiere al nombre del componente de Joomla! , así como {nombre del módulo}, se refiere al nombre del módulo en Joomla!.

1) Selector Raíz

Este es muy simple. Sólo tiene que utilizar un selector (clase o id) raíz o que esté en el primer nivel de la salida HTML de la extensión. Por ejemplo:

<div class="{root-selector}">
...
[output of extension]
...
</div>

Si agrega este tipo de selector y lo utiliza en su diseño de estilos y script, va a liberar la extensión de muchos conflictos. Veamos un ejemplo completo:

<div class="myext">
<h1 class="title" >
extension's title
</h1>
<div class="content" >
extension's content
</div>
</div>

En este ejemplo, el selector raíz es la clase denominada "myext". Así, en el diseño de estilos y script sólo tiene que utilizar .myext en el primer nivel de sus selectores.

El uso en el diseño de estilos

.myext .title {
font-size: 12px;
}
.myext .content {
padding-top: 5px;
}

El uso en el diseño de script (JQuery)

$('.myext .content').fadeIn('slow');

Tenga en cuenta que debe usar un nombre único para el selector raíz.

2) Uso de los parámetros de Joomla para el control de estilos y script

Los usuarios que usen una  extensión podrán acceder y controlar el diseño de estilos y script, a través de los parámetros de Joomla!. Existen 4 tipos de parámetros en Joomla! para utilizar en las extensiones: Parámetros para Componentes, Parámetros para Módulos, Parámetros para los Menús y Parámetros para los Plugin (los otros son los parámetros para las plantillas, pero rara vez son usados en extensiones). A continuación pondré ejemplos para saber como utilizarlos:

[Uso de los Parámetros para Menús]

if($itemid = JRequest::getInt('Itemid'))
{
$menu= JFactory::getApplication()->getMenu();
$active= $menu->getItem($itemid);
$params= $menu->getParams( $active->id );
$param= $params->get('param-name' , 'default-value');
}

[Uso de los Parámetros para Componentes]

$app = JFactory::getApplication('site');
$params = $app->getParams('com_{component name}');
$param = $componentParams->get('param-name', 'default-value');

[Uso de los Parámetros para Módulos dentro del módulo]

$param = $params->get('param-name', 'default-value');

[Uso de los Parámetros para Módulos fuera del módulo]

$module = JModuleHelper::getModule('{module name}');
$params = new JRegistry();
$params->loadString($module->params);
$param = $params->get('param-name', 'default-value');

3) Los sufijos para las Clases

Para cada regla siempre hay su excepción, y tal vez los usuarios (en algunos casos) necesitan tener un selector especial de raíz, es decir, tener un selector raíz diferente. ¿Porqué? pues por ejemplo, que necesiten aplicar a la extensión un estilo diferente, en un lugar determinado del sitio o simplemente cambiar el diseño que trae por defecto la extensión. Con la posibilidad que brinda Joomla! para agregar sufijos a las clases, el usuario puede lograr hacer esto sin necesidad de modificar el código base de la extensión. Si quiere saber más sobre esto, lea este documento (en inglés). En Joomla! existen dos tipos de sufijos: El sufijo para la clase de la página y el sufijo para la clase del módulo (si lo necesitas, también existe la posibilidad de añadir un sufijo para la clase de los plugin a través de los parámetros, esto demuestra que Joomla! es flexible). Le recomiendo que siempre incorpore esta posibilidad en el selector raíz de su extensión. Para añadir esta función, supongamos que el selector raíz es “myext”, entonces:

Uso del sufijo para la clase  de la página (Joomla 2.5 -> Componentes)

[Obtener la propiedad: PHP]

$app= JFactory::getApplication();
$params = $app->getParams();
$menus= $app->getMenu();
$menu= $menus->getActive();
$pageclass_sfx = htmlspecialchars($params->get('pageclass_sfx'));

[Úsela: HTML]

<div class="myext<?php echo $pageclass_sfx; ?>">

Uso del sufijo para la clase del módulo (Joomla 2.5 -> Módulos)

[Obtener la propiedad: PHP]

$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx'));

[Úsela: HTML]

<div class="myext<?php echo $moduleclass_sfx; ?>">

4) Otros selectores únicos en listas de elementos

En algunos casos, la salida o lo que devuelve las extensiones en Joomla! son listas de elementos. A cada elemento se le puede asignar un selector único adicional, así el usuario no tiene que modificar el código base de la extensión.  Por ejemplo, supongamos que tenemos una lista de elementos llamada "$items", para aplicar está técnica haremos lo siguiente:

$i = 1;
foreach($items as $item)
{
echo '<div id="item_'. $i .'" >';
echo $item;
echo '</div>';
$i++;
}

Para esta técnica es más recomendable usar selectores de ID en lugar de selectores de Clase, esto es debido, a que si se planea en un futuro el uso de JavaScript, sea fácil integrarlo a la extensión.

5) Los tamaños Porcentuales

Como ustedes saben, los desarrolladores desconocen los tamaños absolutos de ancho y altura de la plantilla donde se va a aplicar la extensión. Así que si usas en el diseño de estilos y script de la extensión, tamaños porcentuales, le darías a la extensión un toque de compatibilidad, de cara, a las plantillas futuras en la que se vaya a usar dicha extensión. Para un mejor control en está técnica, puedes usar las siguientes propiedades de CSS: min-width, min-height, max-width y max-height. A continuación pongo un ejemplo de como usarla:

Sin utilizar los Tamaños Porcentuales

.myext {
width: 600px;
}
.myext .header {
width: 200px;
}

Usando Tamaños Porcentuales

.myext {
width: 90%;
max-width: 1000px;
}
.myext .header {
width: 30%;
min-width: 40px;
}

También, en algunos casos no es conveniente utilizar las propiedades de CSS widht (ancho) y height (altura) y usar un margen (margin) y un relleno (padding) en lugar de ellas. Además de esto, no es necesario en algunos casos poner la altura con un tamaño porcentual. Como puedes notar todas estas variantes dependen del diseño escogido.

6) Tamaño de las imágenes

Las imágenes de gran tamaño no deben ser usadas en las extensiónes. En lugar de esto use combinaciones de iconos e imágenes pequeñas con las propiedades de CSS2 y CSS3.

7) Los archivos externos

En Joomla! se pueden ubicar los códigos de estilos y script en archivos externos o utilizarlos en la misma línea de código en la que estas trabajando (formatos en línea) o dentro de las etiquetas HTML <style> y <script>.  Por lo general, la mejor opción son los archivos externos, ya que esto posibilita que se carguen primero, y también para que en futuros navegadores se cree una caché de estos archivos externos agilizando el proceso de carga de la página. Otra razón es que los archivos externos se pueden comprimir más tarde, si así lo deseas.
Además, puedes utilizar los parámetros de Joomla! en archivos externos. Para saber cómo hacerlo, consulte el siguiente ejemplo:
En este ejemplo quiero usar los parámetros de Joomla! en los archivos CSS de mi Componente:

[Cargar los CSS en: components/com_{nombre componente}/view/{nombre vista}/view.html.php]

doc =& JFactory::getDocument();
$style = 'components/com_{component name}/assets/css/mystyle.php?Itemid='.JRequest::getInt('Itemid');
$doc->addStyleSheet(JURI::base() . $style);

[Contenido del archivo CSS en: components/com_{nombre componente}/assets/css/mystyle.php]

<?php
/**
*Control de los archivo CSS de Joomla!
*Autor: Soheil Novinfard
*/

// Cargar CSS header
header("Content-type: text/css; charset: UTF-8");

// Establecer una marca para saber que este es el archivo padre
define('_JEXEC', 1);

// No permitir el acceso directo al archivo
defined('_JEXEC') or die;

// Establecer el directory separator
define( 'DS', DIRECTORY_SEPARATOR );

// Definir la ruta raíz de Joomla! (No se te olvide cambiarlo en tu caso)
define('JPATH_BASE', dirname(__FILE__).DS.'..'.DS.'..'.DS.'..'.DS.'..' );
require_once ( JPATH_BASE .DS.'includes'.DS.'defines.php' );
require_once ( JPATH_BASE .DS.'includes'.DS.'framework.php' );
jimport('joomla.database.database');
jimport('joomla.database.table');
$app = JFactory::getApplication('site');
$app->initialise();

// Cargar los parámetros del componente
$params=  &$app->getParams('com_{component name}');

// Cargar los parámetros del menú (prioritario los parámetros del menú)
if($itemid = JRequest::getInt('Itemid'))
{
$menu = JFactory::getApplication()->getMenu();
$active = $menu->getItem($itemid);
$params = $menu->getParams( $active->id );
}

// Uso de los parámetros
$backColor= $params->get('ext_backcolor');
?>
.myext {
background-color: <?php echo $backColor ;?>;
}

Si deseas utilizar este código en otro lugar, solo debe cambiar  el JPATH_BASE y definir la ruta raíz de Joomla!.
También, puedes utilizar este código para los archivos externos de JavaScript, basta con cambiar el header en el archivo CSS:

header("content-type: application/x-javascript");

8) Compatibilidad con los lenguaje right-to-left (RTL)

Sus extensiones pueden ser utilizadas en cualquier sitio web construido en Joomla!, incluso los que tienen idiomas de derecha a izquierda. Debido a esto, sus estilos deben ser compatible con los idiomas RTL. Joomla! tiene un método muy útil para detectar idiomas RTL,  isRTL. Para agregar esta compatibilidad existen muchas maneras, en este artículo  explico un pequeño ejemplo de esta técnica:

[Cargar los estilos en: components/com_{component name}/view/{view name}/view.html.php]

$doc=& JFactory::getDocument();
$lang=& JFactory::getLanguage();

// Cargar el archivo de estilos generales
$style= 'components/com_{component name}/assets/css/mystyle.css';
$doc->addStyleSheet(JURI::base() . $style);

// Cargar los archivos CSS para RTL si la dirección del idioma es RTL
if($lang->isRTL()) {
$style_rtl= 'components/com_{component name}/assets/css/mystyle_rtl.css';
$doc->addStyleSheet(JURI::base() . $style_rtl);
}

[Archivo de estilos generales: components/com_{component name}/assets/css/mystyle.css]

.myext {
background-color: #ffffff;
border: 1px solid #eeeeee;
margin: 5px;
padding: 2px 10px 5px 7px;
text-align: left;
}
...

[Archivo de estilos RTL en: components/com_{component name}/assets/css/mystyle.css]

.myext {
direction: rtl;
padding: 2px 7px 5px 10px;
text-align: right;
}
...

Como puede ver, no necesita de otro archivo CSS con todos los detalles, simplemente anular o añadir las diferentes propiedades de CSS que se necesitan en el archivo RTL. La mayoría de las propiedades CSS que serán cambiadas en esta técnica son: text-align, direction, float, margin y padding; pero en dependencia de su diseño, tal vez tenga que cambiar otras propiedades de CSS.

9)Comprimir archivos estáticos

Tal vez la extensión creada tenga archivos de estilos y script, los cuales no necesitan ser cambiados por el usuario, por lo que se convierten en archivos estáticos. Si dichos archivos se definen como archivos estáticos, es una buena solución comprimirlos, ya que como no van a ser accesibles para que el usuario los modifique, acelera la carga de la página y reduce el tamaño de la misma.  Hay muchas herramientas para comprimir los archivos, aquí están algunas de ellas:
{ CSS Compressor ; Minify CSS ; JS Compress ; JavaScript Compressor }
Si se tiene varios archivos estáticos, se debe comprimir todos en un solo archivo, con esto logra reducir las peticiones HTTP y acelera la carga del sitio web.
También es mejor especificar los archivos comprimidos con un sufijo min (por ejemplo mystyle.min.css), y mantener los archivos originales de estilo y script en su extensión. Los archivos sin comprimir serán utilizados por los desarrolladores de Joomla!.

10) Bibliotecas externas

Las bibliotecas externas se utilizan para un diseño más simplificado y confiable. JQuery, Bootstrap y sistemas de grillas o rejillas son ejemplos típicos de bibliotecas externas. Se pueden usar algunas de estas bibliotecas externas en su extensión, pero el problema radica en que otra extensión podría utilizar las mismas bibliotecas externas que usted usó en su extensión, por lo que traería conflictos a tu página. Por lo que es recomendable que se incluya en la extensión opciones de incluir o no estas bibliotecas externas.
Otro problema que puede ocurrir es que entren en conflicto entre sí, algunas de las bibliotecas usadas en la extensión, pero esto, lógicamente dependerá de su diseño y las bibliotecas usadas. Uno de los ejemplos muy conocido es el conflicto entre MooTools y jQuery, ambas, bibliotecas de JavaScript.
Esta es la primera parte de este artículo, el mes siguiente les traigo otras 10 recomendaciones más, para así completar el tema.

Artículo Original: 20 Suggestions for Better Style and Script Designing in Joomla! Extensions (Part 1) por Soheil Novinfard

Traducido por: Carlos Rodríguez

Miembro de: Equipo de Marketing y Difusión de Joomla! en Español

Visto 7680 veces Etiquetado como Spanish, Desarrollador