En la entrega pasada vimos cómo instalar Joomla en un servidor de desarrollo creando, y dejando configurada, la base de datos MySql. En la que nos ocupa, y antes de dar paso a la configuración del sitio -cosa que veremos en la próxima entrega-, vamos a conocer los diversos elementos que componen esta aplicación web, y que son los siguientes:

• Núcleo (Core en ingles).
• Componentes, módulos y plug-ins.
• Menús e ítems de menús.
• Plantillas.
• Idiomas.
• Panel de administración (Back End).
• Parte pública (Front End).

El núcleo o core

Forman parte del núcleo o core el conjunto de archivos que viene en la distribución original de Joomla. Son esos ficheros que tuvimos que descomprimir para ser depositados en nuestro servidor y con los que realizamos la instalación.

El núcleo está compuesto por necesarios Componentes, Módulos, Plantillas y Plugins.

En el caso de que la funcionalidad del núcleo no nos parezcan los más adecuados, o necesitemos de otras características, podemos recurrir a extensiones y complementos desarrollados por agentes externos a Joomla (Third Partyes) que se encuentran en abundancia.
Seguir leyendo la descripción de los elementos de Joomla

Reconozco que el título es un poco sensacionalista, pero es que me ha hecho gracia lo que he visto. Matt Cutts, el jefe del equipo de cálidad en busquedas de Google, famoso por que es cara visible de Google y suele publicar muchos consejos en forma de videos sobre buenas prácticas en posicionamiento para Google, publicó hace poco un video en el que decía que no hay que usar técnicas de sustitución CSS en los logos para indicar el texto del logo, ya que esto podría ser interpretado como spam por Google. La buena práctica es incluir una etiqueta img con un atributo alt, que Google puede leer perfectamente. Aquí dejo el video para que veáis que no miento.

Básicamente dice que usar técnicas CSS para esconder el texto del logo es algo un poco turbio y que puede ser considerado como spam. Mucho mejor usar una etiqueta img. Hasta aquí todo claro y lógico.

Lo que no me parece tan lógico es que Google vaya predicando esto y luego en sus aplicaciones haga justamente lo que desaconseja. Y es que me lleve una sorpresa cuando nada más acabar de ver el video abro mi cuenta de FeedBuner y veo que justamente están usando la misma técnica que Matt Cutts desaconseja.

Lo que están haciendo es básicamente utilizar un text-indent de -5000 para esconder el texto del h1. Es una tontería y lógicamente no creo que Google se dedique a hacer “Black Hat SEO”, no creo que lo necesite, pero me ha parecido curioso que la todopoderosa Google se contradiga.

Espero que no me sancione Google por esto, jeje.

Hace unos días os contaba sobre una lista de usuarios de twitter relacionados con el mundo Joomla. Ahora se ha creado otra lista en TweepML, esta vez de desarrolladores de extensiones para Joomla. Si quieres estar al tanto de todo lo que se cuece en la Twittosfera de Joomla, estas listas de usuarios son un recurso muy útil para estar al día.
Por supuesto, también puedes seguir a Nosolocodigo.

Otro de los proyectos del Google Summer of Code que se ha llevado a cabo este verano ha sido JImageLib. Se trata de una librería desarrollada por Daniel Ghilea, un estudiante de rumano de la universidad de Bucharest. La librería trabaja con GD, ImageMagic y GraphicsMagic, por lo tanto tienen que estar instalados en el equipo.

Para instalar la librería solamente hay que descargar el directorio de JImageLib y moverlo al directorio libraries/ de Joomla. Después hay que configurar el fichero config.php con algunas variables necesarias para que todo funcione bien.

Una vez instalado, para usar la librería cuando estamos programando un componente de Joomla, simplemente hay que añadir una línea de código:

jimport( 'JImageLib.JImageLib' );

La librería es realmente potente y fácil de utilizar, y puede resultar muy útil para crear thumbnails automáticamente de nuestros artículos, pasar imágenes a blanco y negro, a sepia, rotarla, redimensionar, etc.Además, la librería trabaja con caché, por lo que la performance del sitio no peligra. Se espera que se implemente en Joomla 1.6.

Vamos a ver como funciona con unos ejemplos muy sencillos.

1. Crear un objeto nuevo y “setear” la anchura

   
   $img = new JImageLib();
   $img->setWidth(300);
   
   

2. Cargar la imagen que se va a procesar

   
   if (! $img->load('images/joomla_logo_black.jpg')){
        print $img->getError();
        print "< br / >";
   }
   if (! $img->setImageLib('im')){
        print $img->getError();
        print "< br / >";
   }
   
   

3. Se le aplica un filtro y un efecto de flipping (vertical)

   
   if (! $img->setFilter('grayscale')){
        print $img->getError();
        print "< br / >";
   }
   if (! $img->setFlipping('V')){
        print $img->getError();
        print "< br / >";
   }
   
   

4. Se le añade un prefijo e información extra

   
   if (! $img->setDirectory('images/thumbs/')){
        print $img->getError();
        print "< br / >";
   }
   if (! $img->setUseImageSize('both')){
        print $img->getError();
        print "< br / >";
   }
   if (! $img->setPrefix('thumb_')){
        print $img->getError();
        print "< br / >";
   }
   
   

5. Y se genera el thumbnail

   
   if (! $img->getThumbnail()){
       print $img->getError();
       print "< br / >";
   }
   
   

Como ves, la forma de manejar las imágenes desde código es muy sencilla. Para el que no sea programador, también se está desarrollando un plugin de contenido, para poder hacer uso de esta librería desde el editor WYSIWYG. Puedes descargarlo en JoomlaCode. Son dos plugins, uno de tipo system y otro de tipo content.

El plugin interpreta las etiquetas {image}, Por ejemplo:

{image 'images/joomla.jpg' width 300 sepia wm-file 'images/cancel_f2.png'  wm-position center popup greybox }

Una vez introducido el código en el editor, pulsas aplicar y…

Luego, en el Front End, la imagen se enlaza con su tamaño original al hacer click, y aparece una ventana modal.

Si quieres má imformación, te recomiendo que sigas los artículos que va escribiendo Daniel Ghilea donde va contando sobre el estado de JImageLib. Realmente promete.

Hay pocas cosas más feas que el icono que se muestra cada vez que se intenta cargar una imagen y por algún motivo no se encuentra. Este icono resulta muy feo, además de provocar en el usuario la sensación de que el sitio web está descuidado y con errores.
Una solución podría ser visitar todo el sitio en busca de imágenes no encontradas y arreglando el problema uno a uno, aunque no creo que tengas ganas de hacerlo, la verdad, sobre todo en sitio que tienen bastantes páginas.

Existe otra solución mucho más inteligente que pasa por usar Javascript y jQuery puede ayudarnos mucho en esta tarea.

Esta solución consiste en poner un pequeño código Javascript en la plantilla de tu web que nos avise cuando encuentre alguna imagen rota. Se supone que se tiene cargado el framework jQuery y el código de Google Analytics ga.js.

1
2
3
4
5
6
7
8
9
10

$(document).ready(function() {
		$('img').error(function() {
			pageTracker._trackEvent('Blog', 'Imagen_rota', $(this).attr('src'));
			$(this).attr({
				src: 'http://www.nosolocodigo.com/imagen-rota.jpg',
				alt: 'Lo siento, imagen no disponible.',
				style:'border: 1px solid #000000;'
			});
		});
});

El código recorre todas las imágenes de la página y les asigna una función al evento error. El evento error se dispara cuando una imagen no se ha podido cargar por cualquier motivo, generalmente porque no se encuentra disponible en la ruta especificada. La función envía un evento a Google Analytics con la categoría Blog, acción Imagen_rota y una etiqueta con el atributo src, es decir, la imagen que no carga debidamente.

Después de reportar el evento a Google Analytics, se cambia la imagen por una imagen creada a nuestro gusto que indique al usuario que la imagen pedida no está disponible, de esta forma queda todo mucho más homogéneo y el usuario sabe que la imagen no se ha cargado. También se le añade un atributo alt y un estilo inline, esto último queda a gusto del consumidor. De esta forma el usuario no tiene que verse el horrible icono de la discordia cada vez que una imágen no se encuentre disponible.

Otra opción sería reportar a Google Analytics y eliminar la imagen para que no aparezca nada, en este caso el código a utilizar sería el siguiente:

1
2
3
4
5
6

$(document).ready(function() {
		$('img').error(function() {
			pageTracker._trackEvent('Blog', 'Imagen_rota', $(this).attr('src'));
			$(this).remove();
		});
});

Una vez puesto esto solo falta esperar a recibir los informes de Google Analytics, ir a la sección Contenido > Seguimiento de Eventos y consultar la categoría Blog. Luego pinchar la acción Imagen_rota y aparecerá una lista de URLs con imágenes que por algún motivo no se han podido cargar.