Plantillas (Templates)

La plantilla (template en inglés) es una de las piezas más importantes de un sitio web. Proporciona al sitio su apariencia, su diseño. Motiva a los nuevos visitantes a quedarse en tu sitio y explorarlo. Los visitantes y usuarios habituales aprecian mucho estar en un sitio que tenga un diseño bonito y usable. Piensa en otros productos. Un coche necesita un buen motor y ruedas, pero una de las razones más importantes a la hora de comprarlo es, a menudo, el diseño. Incluso si el diseño no es la razón principal, en muchas ocasiones es un detonante de la idea de compra, y puede llevar a un potencial comprador a empezar a contemplar motivos más serios. Si el diseño está bien hecho, la gente dará por hecho que el resto de también lo estará (Figura 1, Figura 2).

Car parked in Santa Cruz, California. Feel free to add notes.

Are you Cyclelicious?

Figura 1: Coche con pegatinas (Richardmasoner)

Ferrari 599GTB

Figura 2: Cochazo rojo (FotoSleuth)

Los dos coches anteriores están hechos para diferentes públicos. Son un ejemplo de diferentes aproximaciones en diseño.

El diseño web es de alguna manera como la artesanía. Tener habilidades en técnicas como HTML, CSS, Javascript, PHP, edición de imágenes y muchas otras es imperativo. Joomla! es sólo una herramienta más en tu caja de herramientas.

Una buena plantilla no es solo colores y gráficos. La forma y distribución del contenido es tan importante o más. El sitio web debe ser fácil de usar y seguro. El reto de armonizar todas estas variables me recuerda de nuevo a los dos coches que veíamos un poco más arriba.

El diseño web es una profesión aún joven. El diseñador web tiene que lidiar a menudo con un ancho de banda escaso, navegadores incompatibles, editores de contenido inexpertos y otra gente involucrada en el proceso de crear un 'buen' sitio web. La creación de un sitio web Joomla! es a menudo un proceso, en el que cada una de las personas involucradas aprende mucho. El buen diseño web requiere trabajo duro :-).

Joomla! y las plantillas

Joomla! es conocido por su calidad y simplicidad. En Joomla!, una página individual es generada por la salida HTML de un componente, varios módulos y la plantilla. Cada página es accesible a través de una URL única. Tomemos por ejemplo el frontend. El componente 'content' produce la salida HTML para los artículos situados en la parte central (Figura 3). Los bloques junto a los artículos son distintos módulos. Puedes combinar la salida HTML de un solo componente con la salida HTML de cualquier cantidad de módulos. Además, los módulos pueden ser reutilizados en otras páginas.

Joomla! 1.6 cocoate.com/node/6003/
Joomla! 2.5 cocoate.com/node/10310

Figura 3: Página principal de Joomla!

Posiciones

Debes saber, claro está, en qué posiciones concretas puedes mostrar módulos. Con este propósito, cada plantilla proporciona lo que se denominan posiciones. Para poder ver la posiciones de tu plantilla tendrás que activar la opción 'Previsualizar la posición de los módulos' (Extensiones - Gestor de plantillas - Opciones). A continuación, podrás acceder a tu sitio usando el parámetro tp=1 (http://localhost/index.php?tp=1). Verás resaltadas las posiciones de los módulos y sus nombres (Figura 4). En Extensiones - Gestor de módulos puedes asignar una de estas posiciones a cada módulo. Si necesitas mostrar el mismo módulo en distintas posiciones, puedes copiarlo (y asignarle una posición distinta a cada 'copia').

Desde Joomla 2.5 hay una forma más sencilla en el backend. La verás haciendo clic en el icono que ahora ha cambiado, junto al nombre de la plantilla en (Extensiones - Gestor de plantillas) (Figura 5)

Joomla! 1.6 cocoate.com/node/6003/
Joomla! 2.5 cocoate.com/node/10310

Figura 4: Posiciones de los módulos

cocoate.com/node/10310

Figure 5: Icono de previsualización

Plantillas del núcleo

El núcleo de Joomla! trae de serie 3 plantillas para el frontend y 2 para la parte administrativa. Puedes verlas en Extensiones - Gestor de Plantillas - Pestaña Plantillas (Figura 6).

cocoate.com/node/10310

Figura 6: Plantillas del sitio

La plantilla Atomic es un ejemplo del aspecto que tiene una plantilla básica. En el capítulo Crear una nueva plantilla usando Atomic usaremos esta plantilla como base para crear una propia. La plantilla Beez5 es la versión HTML 5 de la veterana Beez2. Para la parte administrativa, tenemos otras 2 plantillas más (Figura 7).

cocoate.com/node/10310

Figura 7: Plantillas de la parte administrativa

Estilos

Los estilos fueron una característica incorporada con Joomla! 1.6. Ofrecen la posibilidad de crear y usar diferentes versiones de una misma plantilla. Cada plantilla tiene como mínimo un estilo. En él pueden llevarse a cabo diversas configuraciones, dependiendo de la plantilla, como por ejemplo cambiar los colores o subir un nuevo logotipo. Puedes establece el estilo por defecto para tu sitio en Extensiones → Gestor de plantillas → Estilos. Puedes filtrar entre estilos del Sitio y de Administrador mediante el filtro de localización. La plantilla por defecto Beez2 trae dos estilos predefinidos: default y Parks Site.

Puedes crear estilos adicionales copiando estilos existentes y modificándolos. Cada estilo puede ser asignado a uno o más elementos de menú. Si quieres un fondo verde para tu sitio cuando la gente haga clic en el elemento de menú A, por ejemplo, y un fondo azul cuando haga clic en el elemento de menú B, puedes hacerlo simplemente asignándoles estilos distintos (Figura 8).

cocoate.com/node/10310

Figura 8: Asignar un estilo a un elemento de menú

Puedes encontrar más acerca de las plantillas en Joomla en el capítulo Trabajando con Plantillas.