Curso de Joomla 2010

Icono de Joomla

El Joomla es un CMS de software libre muy fácil de personalizar y de añadirle extensiones según nuestras necesidades. Con Joomla tenemos una web dinámica sin necesidad de saber programar.

Para que funcione necesita del servidor web Apache, del lenguaje de programación PHP y de una base de datos MySQL. Todo esto es software libre y muy común en cualquier hospedaje web, ya sea gratuito o de pago

Índice de contenidos

Temario de Joomla

  • Instalación en local y en un servidor: requisitos, base de datos, archivo de configuración
  • Creación de plantillas: archivos necesarios, divisiones y CSS
  • Averiguar y cambiar los identificadores y clases CSS de Joomla
  • Las posiciones de la plantilla dónde van los módulos en una plantilla
  • Creación de nuevos módulos
  • Clasificación y gestión de artículos
  • Gestión de menús
  • Varios idiomas en la plantilla
  • Instalación de plugins: extender las etiquetas {...} en un artículo y cambiar el editor WYSIWYG
  • Gestión y tipos de usuarios
  • SEO - Optimización en motores de búsqueda
  • Utilización de los componentes que vienen con Joomla.
  • Instalación de nuevos componentes: JComments, VirtueMart, Joom!Fish, etc.

Instalación de Joomla

Pasos a seguir para instalar el Joomla en local

Para instalar el Joomla en nuestro propio ordenador hemos de convertirlo en un servidor web

  1. Bajar e instalar el XAMPP (Apache+MySQL+PHP)
  2. Ejecutar el XAMPP "xampp-control.exe" (icono naranja) e iniciar el Apache y el MySQL.
  3. Bajar el Joomla desde Joomla Spanish o desde Joomla Català. Se trata de un archivo ZIP que podemos descomprimir con 7-zip.
  4. Lo descomprimimos en la carpeta "C:\xampp\htdocs" o mejor aun en una subcarpeta "C:\xampp\htdocs\joomla".
  5. Crear la base de datos. Ir al phpMyAdmin que está en localhost/phpmyadmin. En el cotejamiento de la BD poner utf8_general_ci y el nombre de la base de datos podría ser "joomla".
  6. Empezar la instalación del Joomla, para ello ir a la web localhost/joomla o a la dirección IP 127.0.0.1/joomla. Nos pedirá los datos de conexión a la BD:
    Nombre BD:joomla
    Usuario:root
    Contraseña:<sin contraseña>
    Servidor:localhost
  7. ¡Ya funciona el Joomla!
    Para acceder a la zona pública: localhost/joomla.
    Para acceder a la zona privada: localhost/joomla/administrator

Instalación de Joomla en un servidor web remoto

Los pasos a seguir son muy parecidos a la instalación en local pero teniendo en cuenta los siguientes puntos

  • Para gestionar el servidor remoto tendremos que acceder a su Panel de Control
  • Para instalar el Joomla miraremos a ver si se puede hacer con un script automáticamente desde el Panel de control. En caso contrario seguir leyendo.
  • Para crear la BD necesitamos acceder al phpMyAdmin del servidor remoto. Es muy importante conocer el (a) nombre del servidor de la BD, (b) el nombre de usuario, (c) la contraseña y (d) el nombre de la BD. Toda esta información está disponible en el Panel de Control del servidor remoto.
  • Para subir el Joomla lo descomprimiremos en una carpeta local y lo subiremos vía FTP con el programa FileZilla. El nombre del servidor FTP, el usuario y la contraseña lo podemos conseguir desde el Panel de Control del servidor remoto.

Servidores web gratuitos

No tienen publicidad, sí tienen BD, FTP y PHP

  1. FreeHostia - Muy completo y se pueden instalar Joomla muy fácilmente
  2. Zymic - Muy sencillo y con buenas prestaciones
  3. Freetzi
  4. 000webhost

Copia de seguridad de Joomla

Puntos a tener en cuenta:

  • En un CMS, como es Joomla, toda la configuración de nuestro sitio y todos los contenidos de la web se almacenan en una base de datos. Una vez publicada la web en un servidor remoto es importante realizar copias periódicas de la base de datos. Para ello hay que acceder al phpMyAdmin del servidor a través de su Panel de Control. Una vez allí se selecciona nuestra BD y se pulsa Exportar. El archivo que nos bajemos, con extensión .sql, contiene la copia de seguridad completa.
  • El fichero configuration.php en la raíz de la carpeta de Joomla tiene información importante para realizar la conexión a la BD. Tener una copia del mismo nos facilitaría el trabajo en caso de algún problema.
  • Si hacemos una plantilla personalizada para nuestro sitio web deberíamos tener a buen recaudo una copia de seguridad de la misma.
  • Tendríamos que tener apuntadas en algún lugar todas las extensiones que hayamos instalado en el Joomla para poder volverlas a instalar si tuviésemos que volver a empezar la instalación otra vez desde cero.

Con el componente Akeeba Backup se puede realizar copia de seguridad y restauración del sitio Joomla incluyendo la base de datos.

Internacionalización de Joomla

Plantillas en varios idiomas

Se trata de tener los textos fijos de la plantilla en varios idiomas. Suponiendo que la plantilla se llama acme, los pasos a seguir son:

  1. En el archivo templates/acme/templateDetails.xml indicar los idiomas que estarán disponibles:

    <languages>
    <language tag="en-GB">en-GB.tpl_acme.ini</language>
    <language tag="es-ES">es-ES.tpl_acme.ini</language>
    <language tag="ca-ES">ca-ES.tpl_acme.ini</language>
    </languages>

  2. El archivo con la traducción en catalán será language/es-CA/ca-ES.tpl_acme.ini. Debe guardarse en formato UTF-8. A modo de ejemplo podría tener:

    ‌FIND=Cercar
    BECOME A PARTNER=Fes-te soci!
    LOADING DATA=Carregant dades

  3. Colocar las textos a traducir dentro de la plantilla templates/acme/index.php mediante códigos PHP. Como puede verse en el siguiente ejemplo el texto puede escribirse usando mayúsculas y minúsculas.

    <?php echo JText::_('Become a partner');?>

Si además de traducir la plantilla queremos traducir los menús y los artículos podemos instalar el componente Joom!Fish

Material y ejercicios de Joomla

Plantillas de Joomla creadas durante el curso

  • proinf_simple.zip - Se muestra y diferencia claramente las posiciones habituales en una plantilla de Joomla.
  • proinf_tabla.zip - Sólo hay cuatro posiciones: top, left, right y footer dispuestas de la forma típica en una página web.
  • proinf_absoluto.zip - Sólo hay tres posiciones: top, left, right. Se utiliza posicionamiento absoluto.

Algunas extensiones de Joomla

Para bajar las extensiones ir a Joomla! Extensions Directory.

  • Component
    • JComments - Añadir comentarios a un artículo
    • Joom!Fish - Componente multi-idioma.
    • noixACL - Control de usuarios horizontal (hasta que salga Joomla 1.6)
    • VirtueMart - Tienda virtual paquete con Joomla y VirtueMart todo en uno
    • Akeeba Backup - Copia de seguridad y restauración del sitio Joomla
    • K2 en español - Gestión de contenidos ampliada
    • Docman - Gestor de archivos
    • Attachments - Adjuntar archivos a un artículo
  • Module
  • Language
  • Plugin (otros)
    • SearchTag - Para ver las etiquetas o palabras clave de un artículo
    • JoomlaCK editor - Para sustituir al editor WYSIWYG de edición de artículos
    • Kareebu Secure - Protege la subcarpeta administrator
    • Contenido extendido en los artículos {···}
      • AllVideos - Para poner vídeos mediante YouTube y otros
      • Simple Image Gallery - Galería de fotos desde una carpeta
      • XTypo - Contenido extra estilizado con CSS
      • Sourcerer - Añadir PHP o Javascript dentro del contenido
  • Template

Enlaces de Joomla

Videotutoriales de Joomla

Joomla en Internet

Una forma de encontrar webs creadas con Joomla es buscar el texto "Potenciado por Joomla!". Si se trata de un archivo PDF podemos ir al dominio principal donde se encuentra dicho archivo y probar con la subcarpeta administrator

Otros enlaces

Migración hacia Joomla

Generar contraseñas para los usuarios

La contraseña de Joomla 1.5 se almacena cifrada en la tabla jos_users. Consiste en dos partes separadas por dos puntos.

Para generar el cifrado de la contraseña hay que partir de (a) la contraseña en claro y de (b) un texto aleatorio. También es necesario utilizar la (+) concatenación de textos y la función de hash llamada MD5. La fórmula es: MD5(a+b)+':'+b

El texto aleatorio son 32 caracteres seleccionados de entre
"abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".

Ejemplo

El siguiente código MySQL genera el cifrado de la contraseña 12345 utilizando como texto aleatorio 32 x:

select concat(MD5(concat('12345',repeat('x',32))),':',repeat('x',32))
lo cual da como resultado:
8a2bf889fadbd720a0d2b7b05634537e:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Sugerencia: Si quisiéramos un resultado más enredado podríamos generar el texto aleatorio aplicando la función MD5 sobre un texto cualquiera.

Guión SQL

Se trata de código SQL usado para migrar una base de datos a otra basada en Joomla. Puede ser útil para ver cómo se pueden insertar datos directamente en las tablas de Joomla: migracion_sbmfic_joomla.sql

Carencias de Joomla

Algunos de estos inconvenientes se solucionarán con la nueva versión 1.6 que está por venir y otros se pueden paliar instalando extensiones. En cualquier caso las posibles soluciones no están presentes de forma nativa.

  1. No genérica código HTML semántico
  2. No se puede crear una división de usuarios en horizontal. Poder crear grupos de usuario y que un usuario pertenezca a 1 o varios grupos.
  3. Sólo se puede categorizar los artículos por dos niveles (sección y categoría)
  4. Que el nombre de la web aparezca al principio del título de todas las páginas.

Trucos en Joomla

¿Cómo insertar un módulo dentro de un artículo?
  1. Editamos el módulo y le asignamos una nueva posición inventada.
  2. Editamos el artículo y añadimos el siguiente código dentro de su contenido: {loadposition posicion}
¿Cómo crear un menú de pestañas y que sus subopciones aparezcan en otro menú distinto?
  1. Creamos el menú nº1 en Joomla (el de pestañas) con todas sus opciones y subopciones.
  2. Indicamos visualmente la pestaña actual del menú nº1 con el CSS: #menu1 li.active a { background:yellow; }
  3. Ocultamos las subopciones del menú nº1 con el CSS: #menu1 ul ul { display:none; }
  4. Creamos un menú nº2 en Joomla cuyas opciones sean alias de las subopciones del menú nº 1.
  5. Indicamos la opción actual del menú nº2 con el CSS: #menu2 li.active a { background:yellow; }
¿Cómo crear estilos personalizados para una página en concreto de la web?
  1. Desactivamos la configuración SEO de Joomla situada en la Configuración Global
  2. Navegamos a la página de nuestro sitio y nos fijamos en los parámetros URL que aparecen en la barra de navegación. Por ejemplo, la página que muestra una categoría de enlaces tiene: ?option=com_weblinks&view=category
  3. Editamos la plantilla de Joomla y añadimos arriba del todo el siguiente código PHP: <?php
    $bodyclass = '';
    if ($_GET['option']=='com_weblinks' && $_GET['view']=='category') $bodyclass.='enlaces'.' ';
    ?>
  4. En la misma plantilla, localizamos la etiqueta body y le añadimos el atributo de clase: <body class="<?php echo $bodyclass;?>" >
  5. Personalizamos la página de enlaces en CSS, por ejemplo: body.enlaces { background:yellow; }
  6. Volvemos a dejar activada la configuración SEO de Joomla
¿Cómo detectar en la plantilla si el usuario está conectado?
  1. Escribir arriba de la plantilla el siguiente código PHP: <?php $userlogged = JFactory::getUser()->get('gid')>0; ?>
  2. Si queremos mostrar una sección sólo a quien está conectado podemos hacer, en el lugar donde nos interese, lo siguiente: <?php if (!$userlogged): ?>
    <div>···</div>
    <?php endif; ?>
¿Cómo anteponer el nombre del sitio en el título de todas las páginas de la web?
  1. Añadir arriba de la plantilla el siguiente código PHP:<?php $mydoc =& JFactory::getDocument();
    $mydoc->setTitle(JFactory::getConfig()->getValue('config.sitename').' - '.$mydoc->getTitle()); ?>
  2. Gracias a howtojoomla.net
¿Cómo crear el mapa del sitio?
  1. Crear un artículo el cual inserte un módulo llamado sitemap: {loadposition sitemap} y crear una opción del menú que apunte a dicho artículo
  2. Crear un nuevo módulo de tipo menú con las siguientes propiedades:
    Título: Mapa del sitio
    Posición: sitemap
    Nombre del menú: nuestro menú principal
    Siempre mostrar elementos de submenús:
    Expandir menú:
  3. Este proceso lo podríamos repetir por cada menú que nos interese añadir al artículo
  4. Gracias a joomlatools.eu
¿Cómo crear un menú desplegable?
  1. Crear un módulo de tipo menú que muestre todos los elementos del submenú y esté expandido, tal y como se detalla en ¿Cómo crear el mapa del sitio?
  2. Instalar Free CSS Drop-Down Menu de LEWIS.net en nuestra plantilla
  3. Crear en la plantilla los vínculos a los nuevos archivos CSS y Javascript
  4. Ajustar los estilos que hagan falta
¿Cómo personalizar la página de error?
  1. Duplicar nuestra plantilla index.php como error.php
  2. Simplificar la plantilla borrando lo que sobre. Borrar todas las etiquetas de Joomla <jdoc:···/>
  3. Copiar los mensajes de error que aparecen en el archivo templates/system/error.php a nuestro archivo error.php. Son las etiquetas de tipo: <?php echo JText::_('···');?>
¿Cómo cambiar los estilos que aparecen en el desplegable del editor de textos que incorpora Joomla?
  1. Duplicar el archivo templates/system/css/editor.css en nuestra propia plantilla
  2. Personalizar el archivo editor.css a nuestro gusto.
  3. Sugerencia: Para que las clases que añadamos se apliquen tanto al editar como al visualizar podríamos crear un archivo classes.css donde incluirlas. Luego añadiríamos el CSS: @import url("classes.css"); al principio de la hoja de estilos de nuestra plantilla y al principio de editor.css.
¿Cómo insertar un formulario en un artículo utilizando código Javascript y PHP?
  1. Instalamos el plugin Sourcerer que nos permite añadir Javascript y PHP directamente dentro de un artículo
  2. Creamos un artículo y le añadimos el siguiente código HTML: {source}
     &lt;script type="text/javascript" src="mi-web/mi-form.js" &gt;&lt;/script&gt;
     &lt;?php require_once('mi-web/mi-form.php'); ?&gt;
    {/source}
  3. Creamos la carpeta mi-web en la raíz de Joomla y dentro los archivos mi-form.js y mi-form.php. El código mostrado en estos archivos es un ejemplo.
¿Cómo crear un FAQ con estilo de acordeón?
  1. Para ello usaremos el código Javascript de MooTools que ya viene vinculado en Joomla
  2. Crear un artículo con el siquiente código HTML: {source}
     &lt;script type="text/javascript" src="mi-web/faq.js" &gt;&lt;/script&gt;
    {/source}
    <dl class="faq">
     <dt>Primera pregunta</dt>
      <dd><Respuesta uno</p></dd>
     <dt>Segunda pregunta</dt>
      <dd><Respuesta dos</p></dd>
    </dl>
  3. Estilizar con el CSS templates/mi-plantilla/faq.css. Este archivo se debe vincular desde nuestra plantilla. Estos estilos dan una apariencia de enlace a los términos de la lista y además los númera.
  4. Crear el archivo Javascript mi-web/faq.js. Este código busca la primera clase "faq" y la convierte en un acordeón dónde sólo se visualiza una respuesta cada vez
¿Cómo ver la posición de los módulos de una plantilla?
  1. Añadir a la dirección URL el parámetro: ?tp=1