Alrededor de Joomla! orbitan una gran cantidad de desarrolladores produciendo extensiones para este extensible CMS. Pero, como saben, 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 script, a seguir en las Extensiones de Joomla! y tal vez estas técnicas y patrones simples "ayudarán" a una mejor compatibilidad entre extensiones. Lea la segunda parte de este artículo ahora.

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 al mismo sitio, si es el caso, puede añadirla 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!.

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

En la primera parte de este artículo hablé de estas sugerencias:

1. Selector Raíz
2. Uso de los parámetros de Joomla para el control de estilos y script
3. Los sufijos para las Clases
4. Otros selectores únicos en listas de elementos
5. Los tamaños Porcentuales
6. Tamaño de las imágenes
7. Los archivos externos
8. Compatibilidad con los lenguaje right-to-left (RTL)
9. Comprimir archivos estáticos
10. Bibliotecas externas

Ahora voy a explicar los siguientes 10 sugerencias:

1. Preste atención a los múltiples casos de uso
2. Validar parámetros de estilo y script
3. Disminuya el uso de columnas
4. No utilice los selectores públicos
5. No utilice los códigos "css reset"
6. Usar las bibliotecas del framework de Joomla! y JUI a medida de lo posible
7. Usar una ruta relativa en lugar de una ruta absoluta, tanto como sea posible
8. Utilice los archivos de idioma en los scripts
9. Cargar los archivos JavaScript al final
10. Los colores separados en archivos de estilo y script

11) Preste atención a los múltiples casos de uso

Al desarrollar una extensión es muy importante prestar atención a los casos de uso múltiples, ya que las extensiones pueden usarse dos o más veces por página. Permítanme darles un ejemplo para explicar mejor:

Supongamos que estás desarrollando un plugin para la clasificación de los contenidos, y está utilizando la funcionalidad de JavaScript para la calificación de Ajax. Si no prestamos atención a los casos de uso múltiples, la extensión no tendrán ningún problema en la vista de un solo artículo, pero no va a funcionar de la manera correcta en la vista las categorías.

12) Validar parámetros de estilo y script

Es muy sencillo y sólo toma unos minutos, pero previene tu extensión de fallas de usuario no deseados. Sí, estoy hablando sobre la validación de parámetros. Por ejemplo, el color se utiliza con frecuencia en los parámetros de estilo, vamos a hablar de eso. Se comienza con el signo "#" y tiene 6 dígitos, incluyendo a las letras del alfabeto de la 'a' a la 'f' y todos los números del (0-9). Puedes simplemente validar esto con esta expresión regular:

preg_match('/^#[a-f0-9]{6}$/i', $color);

Si el resultado de la frase es TRUE, significa que el color está en un formato válido y que puede ser utilizado en la extensión, además, se puede almacenar.

13) Disminuya el uso de columnas

Como desarrollador de extensión, no podrá acceder ni saber, qué plantilla se puede utilizar para mostrar su componente. Se pueden tener 2 o más columnas. Por lo tanto, es mejor no utilizar columnas o la menor cantidad de columnas en el diseño de la interfaz de usuario, tanto como sea posible. De esta manera, su estilo universal del diseño es compatible para la mayoría de las plantillas. También en algunos casos, puedes construir módulos adicionales que acompañen su componente principal, los cuales serían utilizados en lugar de añadir columnas para el diseño principal.

14) No utilice los selectores públicos

Cuando se está diseñando los estilo y script de la extensión para Joomla!, es importante no utilizar selectores públicos como: li.ul, table, etc Si no toma este consejo, tú extensión va a destruir completamente la plantilla de usuario. La razón es simple, cuando está usando selectores públicos, estos están afectando a todos los elementos de la página, no sólo a la extensión. También, no debes usar las clases predeterminadas de Joomla! que se han utilizado en el diseño de componentes y módulos.

15) No utilice códigos "css reset"

Como saben, el objetivo de restablecer el estilo es reducir el navegador de inconsistencias en cosas como la altura de línea predeterminada, rellenos (paddings) y tamaños de las fuente, y así sucesivamente. Así los códigos "CSS reset" se utilizan para mejorar la compatibilidad entre navegadores. Sin embargo, muchas experiencias e informes muestran que es mejor mantener alejados estos estilos de sus extensiones.

Romperá la plantilla principal del usuario en algunos casos. El motivo es el mismo que en el punto anterior (14: no utilice los selectores públicos), ya que estos códigos tienen un impacto en los selectores públicos. En lugar usarlos, puedes usar una sección en particular acompañada de tu selector raíz de la extensión. Por ejemplo:

.mycomponent table {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.mycomponent table {
border-collapse: collapse;
border-spacing: 0;
}

16) Usar a medida de lo posible, las bibliotecas del framework de Joomla! y JUI

En el diseño, se pueden utilizar diversas bibliotecas CSS y Javascript. Si utiliza las bibliotecas del Framework de Joomla! y JUI, en este caso, tendrás más compatibilidad y será más fácil y más rápido poner en práctica tu diseño. Por ejemplo, para añadir a la biblioteca Bootstrap a tu extensión, puede utilizar simplemente esto:

JHtml::_('bootstrap.framework');

17) Usar una ruta relativa en lugar de una ruta absoluta, tanto como sea posible

Puede utilizar una ruta relativa o una ruta absoluta en algún área de su extensión, como en la definición de los archivos de hojas de estilo o script, o en la definición de la ruta de las imágenes y así sucesivamente. Aunque no existe una gran diferencia entre estos 2 tipos de declaración, los experimentos han demostrado que la utilización de la vía de acceso relativa es una opción un poco mejor en algunos casos. Hay algunas razones para esta afirmación, pero una de las razones principales, es que mejora la modularidad de su extensión y reduce la necesidad de reescribir el código.

18) Utilice los archivos de idioma en los scripts

Cuando revisó y analizó algunas buenas extensiones de Joomla!, He encontrado que muchos proveedores de extensiones no han echo uso de cadenas de lenguajes en sus archivos de script. Es muy fácil y útil. Vea el ejemplo que proporciono a continuación:

$document = JFactory::getDocument();
$document->addScriptDeclaration("
var myextension_text=Array('".
JTEXT::_('MYEXTENSION_HELLO')."','".
JTEXT::_('MYEXTENSION_WORLD')."','".
JTEXT::_('MYEXTENSION_THIS_IS').
"');
");
$document->addScriptDeclaration("
alert(myextension_text[3]+' '+myextension_text[1]+' '+myextension_text[2]);
");

19) Cargar los archivos JavaScript al final

De vez en cuando se definen las hojas de estilos y archivos de Javascript externos en la cabecera de la página (por lo general dentro de la etiqueta head). Para las hojas de estilo es mejor ponerlo en el head, pero con los archivos de Javascript, la situación es diferente. Si coloca los archivos de script al final del documento HTML, la página se cargua más rápido. Hay muchas razones para este cambio de posición, pero la principal es que los navegadores siguen un procesamiento progresivo.

20) Los colores separados en archivos de estilo y script

Una vez terminado el diseño de su extensión, le sugiero que separe las declaraciones del color en los archivos de estilo y script. Se llevará no más de un máximo de una hora, pero tiene al menos 2 ventajas para su extensión: Una de las ventajas es que mejora la modularidad de la extensión, y otra ventaja es que reduce la necesidad de modificar su extensión por los usuarios, ya que los colores de la interfaz de usuario, de la extensión deben ser adaptables con los colores de la plantilla y tener armonía.

Espero que en un futuro tu extensión tenga un mejor diseño de estilos y script.

Artículo Original: 20 Suggestions for Better Style and Script Designing in Joomla! Extensions (Part 2) por Soheil Novinfard
Traductor: Carlos Rodríguez
Miembro del: Equipo de Marketing y Difusión de Joomla! en Español