Diseñando tu primera plantilla Joomla!

Diseñando tu primera plantilla Joomla!

Mucho se ha documentado y discutido en torno al tema. Sin embargo, este artículo apunta al interés de quienes deseen ahondar en algunos aspectos técnicos de esta aplicación y aprender a realizar el diseño de su primera plantilla utilizando 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.

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.