Curso online de Joomla 1.5: los módulos (I)

23 07 2009

El auténtico poder y versatilidad de Joomla reside en la gran cantidad de aplicaciones que posee para el entorno de trabajo denominadas EXTENSIONES. Estas miniplicaciones adicionales se utilizan para agregar mayores funcionalidades al sistema y, por defecto y en su código base, no se encuentran disponibles en la instalación básica de Joomla: será pues necesario que aprendas como tienes que instalar aquellas extensiones que selecciones posteriormente a la instalación base de Joomla.

Existen cientos de estas extensiones disponibles para múltiples funcionalidades: galerías de imágenes y multimedia, comercio electrónico, foros, chats, calendarios, agendas, correos, sistemas de anuncios, sistemas de suscripción a servicios, descarga de archivos, y muchas más. Algunas de ellas serán gratuitas, otras comerciales a las que sólo accederás si pagas por su licencia, muchas bajo licencias Creative Commons y una gran mayoría bajo licencias libres GNU/GPL (estas dos últimas serán las que te recomendemos instalar).

Conseguirlas es relativamente sencillo pues sólo necesitarás localizarlas haciendo búsquedas concretas en un buscador como Google (teclea addons joomla gratuitos, por ejemplo) pero también puedes acceder a páginas especializadas como:

  • JOOMLA EXTENSIONES OFICIALES http://extensions.joomla.org (es el mayor repositorio de extensiones para Joomla, y el oficial, así que de visita obligada)
  • JOOMLA HACKS http://www.joomlahacks.com
  • JOOMLA RESOURCE http://resources.joomla.org/
  • y, por supuesto, también de visita obligada el Centro de Extensiones de Joomla Spanish, del que ya te hemos hablado, el repositorio oficial en español de extensiones para Joomla JOOMLA SPANISH EXTENSIONES OFICIALES http://extensiones.joomlaspanish.org

En realidad, Joomla posee cinco diferentes tipos de extensiones, algunos de los cuales ya conoces:
1. Plantillas: ya hemos hablado de ellas en artículos anteriores. Permiten establecer y modificar el diseño de tu sitio Web.
2. Módulos: son los protagonistas de esta sesión de trabajo
3. Plugins o mambots
4. Componentes
5. y los archivos de lenguaje: los idiomas, que posibilitan la traducción de Joomla o de algunas de sus extensiones al lenguaje español.

¿Qué son los módulos?

Los módulos son elementos del sistema que muestran bloques de información en diferentes posiciones o zonas de la plantilla que estés utilizando en tu sitio Joomla (pueden estar situados en cualquier parte de tu sitio, esto dependerá de los criterios que haya seguido el diseñador de la plantilla que estés utilizando cuando en su momento la diseñó). En otras palabras: los módulos son el vehículo para mostrar en tu sitio ciertos contenidos del mismo. Muestran información secundaria, simplificada y breve que toman de la base de datos y que después cargan sobre la periferia de la plantilla (normalmente en las columnas laterales, el encabezamiento o el pie de página). No olvides que su posición puede variar según la plantilla, template o theme que estés empleando en cada momento en tu página y que podrás comprobar cuál es si acudes al Gestor de plantillas - botón Editar - Previsualizar. Consulta nuestro artículo dedicado a la gestión de plantillas si necesitas conocer qué son las posiciones en una plantilla de Joomla.

En el caso concreto del sitio que tienes instalado y configurado en el servidor local, al no haber instalado los archivos de ejemplo que Joomla te recomendaba al acometer una instalación básica, verás que sólo aparece un único módulo, el Menú principal. Compruébalo acudiendo al menú Extensiones - Gestor de Módulos.

 Joomla 1.5: el Gestor de Módulos

En la ventana que se abre en pantalla verás el listado de módulos instalados hasta el momento en Joomla.

Joomla 1.5: el Gestor de Módulos

Si accedes a sitios Web realizados en Joomla comprobarás la gran variedad de módulos de los que puedes disponer en este CMS. Mientras que algunos módulos sólo mostrarán información, otros recepcionarán información y crearán consultas en torno a los datos solicitados. Un ejemplo clásico de este último es el módulo Acceso (el módulo que permite que introduzcas tus credenciales de acceso en el Frontend de Joomla: así recepcionará esta información, hará una consulta a la base de datos para comprobar que este usuario está acreditado en el sistema y, si todo es correcto, le permitirá acceso a Joomla).

Joomla te ofrece la posibilidad de instalar una gran variedad de módulos en su instalación básica, algunos de gran importancia, como los módulos responsables de los menús, pero también podrás instalar muchos otros localizados en Internet e incluso programarlos personalmente. La lista es muy amplia, variada y, como comprobarás, resultan muy efectivos y útiles.

La gestión de los módulos en Joomla 1.5

Los módulos son los responsables de determinar qué se muestra en el Frontend, pero no cómo se muestra, pues eso es misión de la plantilla que tengas configurada como Predeterminada. Como has visto sólo dispones de un único módulo presente en el Frontend, pero esto puede cambiar, añadiendo nuevos módulos de los que Joomla te ofrece.

Los módulos instalados en Joomla se administran, como ya has visto, desde el menú Extensiones - Gestor de módulos. En pantalla verás el listado de todos los módulos instalados en Joomla (de momento sólo uno) y diferentes parámetros de información sobre los mismos, como su nombre, si se encuentran habilitados o no, quiénes tienen acceso a él, en qué páginas se muestran, la posición que ocupan en la plantilla actualmente activa o el nombre concreto del archivo:

Joomla 1.5: el Gestor de Módulos

Observa:

  • Nombre del módulo: Menú principal
  • Habilitado. Te permite comprobar qué módulos de los instalados se visualizarán en tu sitio Web, en el Frontend. Si se encuentran marcados como habilitados (marca de verificación verde) o como no habilitados (marca de verificación en rojo), respectivamente en el Gestor de Módulos significará que serán visibles en el Frontend en el primer caso, o no en el segundo. Comprueba en el Frontend del sitio (asegúrate de tener la plantilla Ruhk milkyway asignada como predeterminada) que, en efecto, el módulo Menú principal aparece en la página inicial de tu sitio. De vuelta en el Backend haz clic sobre la marca de verificación de la columna habilitado, el icono cambia y se transforma en un círculo rojo con un aspa dibujado en su interior; ahora el módulo no está habilitado. Si actualizas el Frontend del sitio ya no aparecerá el Menú principal en la página inicial. Para recobrar su estado inicial sólo tendrás que hacer clic de nuevo sobre el icono de la columna Habilitado para habilitarlo de nuevo y que, el menú principal se muestre otra vez en tu sitio Joomla. ¡Así de sencillo!
  • Acceso. A los módulos pueden acceder diferentes usuarios propios de Joomla. Aunque no hablaremos de la administración de usuarios en Joomla hasta unas cuantas sesiones más adelante, debes saber que Joomla permite diferentes perfiles de acceso: no sólo a módulos, sino también a contenidos, menús de navegación, etc. Según la información mostrada en pantalla el módulo Menú principal es de acceso público, es decir, cualquier usuario - visitante que acceda a tu sitio podrá verlo e interactuar con él, por ejemplo, haciendo clic en el enlace Inicio. Como verás más adelante, podrás configurar que haya módulos para usuarios registrados, de tal manera que sólo se mostrará en el Frontend cuando un usuario registrado de Joomla acceda al sistema identificado con sus credenciales de usuario y contraseña.
  • Posición. Los módulos pueden cambiarse de posición para que se muestren en una zona u otra de la página. Por ejemplo, el Menú principal se muestra en la posición left (izquierda) pero podrías hacer que se mostrase en la posición right (derecha). Para ello haz clic en el nombre del módulo y en la nueva pantalla selecciona en el cuadro de lista desplegable Posición la entrada right. Pulsa el botón Aplicar para aplicar los cambios y actualiza el Frontend para comprobar que ahora el menú principal se muestra a la derecha de la página Web.

Nota. Observa que el aspecto del menú principal es ahora muy diferente. Esto es debido a la configuración de la plantilla que estás utilizando.

Joomla 1.5: menú Principal - módulo en el Frontend      Joomla 1.5: menú Principal - módulo en el Frontend

Tienes que tener siempre en cuenta  que los módulos muestran la información en el Frontend pero el cómo dependerá de la plantilla en uso. No todas las plantillas tienen definidas todas las posiciones, ni están configuradas para que se muestren en el mismo lugar, por lo que algunos módulos los verás con unas plantillas y no con otras, o incluso en diferentes lugares de la plantilla. Además, el aspecto estético de cada módulo también está determinado por la plantilla que estás utilizando en cada momento y dentro de una misma plantilla, incluso por la posición en la que se encuentra, como el caso que nos ocupa.

Cancela los cambios o modifica la posición del módulo mainmenú para que se vea en la posición left - izquierda y guarda mediante el botón Guardar para volver al Gestor de Módulos.

  • Páginas. Como verás más adelante puedes configurar el módulo para que se vea en todas las páginas de tu sitio o sólo en algunas páginas seleccionadas. En este caso, la entrada todo en este columna te indica que el menú principal se visualizará en todas las páginas de tu sitio Joomla con los parámetros de configuración señalados hasta el momento. En este caso, es un menú de navegación que nos interesa que se visualice en todas las páginas del sitio, pero podría no ser así y ¡Joomla te permite personalizar este aspecto según tus preferencias o necesidades!
  • Tipo. Hace referencia al tipo de módulo que es el módulo seleccionado. En este caso, es un módulo de tipo mainmenu, es decir, significa que en el Frontend visualizarás un menú de navegación. Como verás a continuación, existen muchos tipos diferentes de módulos y puedes tener varios módulos diferentes creados del mismo tipo: por ejemplo, puedes disponer en tu sitio de varios módulos mainmenu con diferentes menús de navegación configurados.

Creación de un nuevo módulo de los predeterminados de Joomla

Observa la barra de herramientas presente en el Gestor de Módulos. Te permitirá realizar muchas tareas con ellos como habilitarlos o deshabilitarlos, copiarlos, borrarlos y editarlos o crear nuevos módulos:

Joomla 1.5: crear un nuevo módulo

Para crear un módulo nuevo debes hacer clic sobre el botón Nuevo. Accederás así al formulario de creación de un nuevo módulo para Joomla. Observa la larga lista de módulos básicos que puedes crear en Joomla, no te asustes por su complejidad, ya verás como no es tan difícil entender qué funcionalidades tienen:

Joomla 1.5: crear un nuevo módulo

Por ejemplo observa el primero de ellos: Acceder. Si pasas el ratón por encima de su nombre, Joomla te ofrecerá información relativa a este módulo y te indicará que su función es añadir un módulo en el Frontend en el que podrás introducir tus credenciales de acceso al sistema. Vas a crear un nuevo módulo precisamente para ello pues este módulo ofrece en el Frontend de tu sitio Joomla un formulario para que el usuario anónimo pueda registrarse en el sistema, solicitar que se le recuerde su nombre de usuario, iniciar el proceso de renovación de la contraseña o acreditarse ante el sistema con su propio nombre de usuario y contraseña. Una vez que el usuario se haya acreditado y haya accedido al sistema este módulo sólo le ofrecerá un botón para terminar la sesión.

Haz clic sobre la casilla de verificación situado a la izquierda de Acceder para crear un nuevo módulo de Acceso al sistema de Joomla. Pulsa ahora en el botón Siguiente para acceder al formulario de configuración del nuevo módulo.

De momento, no vamos a considerar la sección situada a la derecha del formulario llamada Parámetros, sólo nos preocuparemos de la sección Detalles. Más adelante te mostraremos para qué sirve Parámetros y cómo se configura un módulo.

 Joomla 1.5: crear un nuevo módulo

Por ahora, teclea en el campo de texto Titulo el nombre para el módulo que estás creando, por ejemplo, Acceso (este es el nombre que se mostrará en el Frontend) y selecciona como posición right (derecha) de la plantilla. Observa que, de forma predeterminada, se mostrará el título pues se encuentra validada la opción Sí, de la misma manera que también se encuentra Habilitado, es decir, será visible en el Frontend de tu sitio desde el momento que apliques o guardes los cambios. Utiliza el botón Guardar para guardar los cambios realizados. Observa que el nuevo módulo se muestra en el listado del Gestor de Módulos.

Joomla 1.5: crear un nuevo módulo

Si ahora actualizas el Frontend de tu sitio Joomla (enlace Ver sitio, botón F5 de tu teclado) verás que la página inicial ya muestra dos módulos diferentes: el Menú principal en la parte izquierda de la pantalla y el Formulario de Acceso en la parte derecha.

Repitiendo el procedimiento que te hemos mostrado crea nuevos módulos de diferentes tipos y asígnalos a las posiciones que te indicamos:

  • Módulo Buscar: Título Buscar en el sitio, posición user4.
  • Módulo Contenido más leído: Título Artículos más leídos, posición User1.
  • Módulo Últimas noticias: Título Artículos nuevos en la Web, posición User2.
  • Módulo Menú: Título Menú superior, posición User3.
  • Módulo Sindicación: Título Sindicación, posición Syndicate.
  • Módulo Footer (pie de página): Título Pie de página, posición debug. Selecciona No en Mostrar título del módulo para que no se muestre el título Pie de página en tu sitio Joomla.
  • Módulo Encuesta: Título Nuestra encuesta, posición right. Recuerda que ya tienes el módulo Acceso en esta misma posición y que ocupa el orden 0: esto se traduce en que en la columna derecha del sitio verás el formulario de acceso y, a continuación, la encuesta, por este orden. Si actualizas el Frontend este módulo no se verá porque el módulo Encuesta es un módulo especial asociado a un componente, el componente Encuesta. Se encarga de mostrar en la página el formulario de la encuesta configurada en el componente: como aún no has configurado ninguna, el módulo no mostrará nada. De todas maneras, créalo para establecerla más adelante.
  • Módulo Ruta de acceso: Título Ruta de acceso, posición breadcrumb. Selecciona No en Mostrar título para que no se muestre el título Ruta de acceso en tu sitio Joomla.

Si has seguido nuestras indicaciones y ahora actualizas el Frontend de tu sitio, con todos estos módulos creados, tu web ya tendrá un aspecto muy diferente al inicial y, aunque aún no has creado ningún contenido para ella, ya empiezas a visualizar el aspecto final que podrá tener la página.

Joomla 1.5: crear un nuevo módulo

Te invitamos a que ahora realices cambios de plantilla en el Gestor de plantillas, para que compruebes que estos módulos no sirven del todo ni se colocan correctamente según la plantilla que utilices. Por ejemplo, utiliza la plantilla JA_Purity como plantilla Predeterminada y actualiza ahora el Frontend: el menú superior se mostrará ahora en la parte inferior de la página…

¿Comprendes ahora cuán importante es decidir qué plantilla vas a utilizar para tu sitio en los primeros momentos de desarrollo de tu sitio Joomla?

A pesar de este último inconveniente, puedes ya apreciar que la gestión de módulos en Joomla te permite personalizar a tu gusto el diseño de tu sitio. ¡Y sólo has vislumbrado un pequeño vistazo de lo que los módulos son capaces de hacer en Joomla… te invitamos a que sigas nuestros posteriores tutoriales sobre la descarga e instalación de módulos ajenos a la instalación básica de Joomla para que compruebes in situ su potencialidad!



Curso online de Joomla 1.5: manejando plantillas

16 07 2009

El aspecto estético de tu sitio Web realizado en Joomla 1.5  se encuentra prediseñado gracias a la utilización de plantillas.

 Joomla 1.5: plantilla   Joomla 1.5: plantilla

Por defecto, Joomla se instala con un número muy limitado de estos templates (en concreto, tres para el Frontend) pero podrás descargar muchos gratuitamente desde Internet para mejorar el diseño de tu Web o editar algunas de ellas para adaptarlas a tus necesidades. En realidad, los sitios Web realizados con Joomla se preocupan más del contenido que del diseño (Joomla es un Gestor de contenidos no una aplicación para el diseño web). Pero esto no impide que puedas hacer tus pinitos como diseñador si eres capaz de modificar y editar la plantilla que estás utilizando y poder así variar el diseño de tu sitio de una manera más creativa.

Nota. Debes conocer qué tipo de licencia tiene la plantilla que estás utilizando para saber si puedes realizar tareas de edición sobre ella o no. Busca siempre, y en primer lugar, plantillas bajo licencia GNU/GPL, es decir, plantillas libres, plantillas que podrás editar sin incurrir en ilegalidad, irregularidades o vulneración de derechos de autor. Y si tu elección pasa por una plantilla gratuita (preferentemente bajo licencia Creative Commons)  no olvides mantener el nombre del creador al final de la página inicial.

En realidad una plantilla no es más que un conjunto de archivos que controlan la presentación de los contenidos en Joomla y constituye el diseño básico y fundamental para la visualización de tu sitio Joomla. La plantilla que utilices controlará la interfaz del sitio que visualizará el visitante, determinará el color de los enlaces, del texto mostrado en los artículos, del aspecto de los bloques que presenta, etc. Tu sitio podrá tener varias plantillas, diferentes incluso según las páginas que se visiten, pero sólo una plantilla predeterminada y podrás incluso asociar diferentes plantillas a diferentes menús o a entradas de menú seleccionadas. Si aún no comprendes esto, no te preocupes, ya practicarás con Joomla y comprobarás cómo puedes tener varias plantillas diferentes en distintas páginas o secciones de tu sitio.

Administra las plantillas preinstaladas

Vas a realizar una primera aproximación a la utilización de plantillas en Joomla. Para ello accede a la pantalla inicial de la administración de tu sistema con tus datos de acceso y haz clic en el enlace Previsualizar del Panel de Control para tener acceso simultáneo al Backend y al Frontend de tu sitio.

Localiza en el menú de la administración de Joomla la entrada Extensiones y haz clic sobre el Gestor de plantillas para acceder a la página en la que podrás manejar las plantillas instaladas en tu sistema: visualizarlas, borrarlas e incluso editarlas.

 Joomla 1.5: el Gestor de Plantillas

La nueva pantalla es muy intuitiva: un listado con el nombre de las plantillas preinstaladas en la instalación básica de Joomla 1.5.12, una serie de parámetros de información y una barra de herramientas con botones en la parte superior:

Joomla 1.5: el Gestor de Plantillas

Si pasas el ratón por encima del nombre de la plantilla podrás previsualizar una pequeña miniatura con el aspecto que adquirirá tu sitio si la seleccionas como predeterminada. Cuando decidas qué plantilla utilizar simplemente selecciónala activando el botón circular situado a la izquierda de su nombre y, a continuación, presiona el botón Predeterminado. Recarga el Frontend con la tecla F5 para visualizar el cambio y el nuevo aspecto de tu sitio con la plantilla seleccionada: los contenidos no cambiarán pero el aspecto de la página será completamente diferente.

Repite el procedimiento con las diferentes plantillas preinstaladas para comprobar cada uno de los diseños y cómo cambia en cada caso la interfaz de tu sitio Web. La página mostrará un aspecto diferente en cada ocasión, pero ten en cuenta que incluso habrá elementos de la página que aparezcan en diferentes lugares, otros ni siquiera se mostrarán… esto dependerá de cómo el creador de la plantilla la ha configurado. Debes considerar esto si por algún motivo deseas cambiar de plantilla cuando tu sitio Web ya esté en plena producción.

Por lo general las plantillas incluyen unos marcadores de posición identificados con un nombre determinado: right, left, top… en los que se irán colocando los diferentes elementos de Joomla: imágenes, módulos, componentes, enlaces, etc. pero no siempre aparecen los mismos marcadores en cada plantilla, ni el mismo número, ni siempre los han colocado en el mismo lugar. Por este motivo, y en general, porque casi todas las plantillas requieren algún tipo de modificación para adaptarlas a tus necesidades concretas, es fundamental elegir la plantilla que va a presidir tu sitio Web en las primeras etapas de desarrollo de tu web. Y esta decisión debe ser lo suficientemente pensada como para que se convierta en una plantilla estable.

Para comprobar estos marcadores de posición haz clic sobre el nombre de la plantilla, por ejemplo, utiliza la plantilla rhuk_milkyway, una de las presentes en la instalación básica de Joomla 1.5, y en la nueva pantalla haz clic sobre el icono Previsualizar.

Joomla 1.5: plantillas

En la parte inferior de la pantalla verás el aspecto de la plantilla junto con los marcadores de posición de la plantilla seleccionada:

Joomla 1.5: plantillas

Observa, en este caso, que esta plantilla tiene diseñadas diferentes posiciones:

  • Left: parte izquierda de la página. En ella se muestra el menú principal.
  • Right: parte derecha de la página
  • Top: parte superior
  • User1, user2, user3 y user4
  • Breadcrumb: posición muy útil para colocar una ruta de navegación
  • Footer o debug

A medida que vayas añadiendo nuevos elementos en tu sitio Web tendrás que asignarles manualmente una de estas posiciones, según tus preferencias y podrás cambiarlos de posición siempre que lo desees. Por ejemplo, el menú principal se muestra en la parte izquierda de la página pero podrías hacer que lo hiciera en la parte derecha. ¿Adviertes ahora las opciones de personalización que Joomla te ofrece?.

Instala una nueva plantilla

De forma predeterminada, Joomla incluye tres plantillas para el Frontend y una para el Backend, aunque siempre podrás instalar todas las que quieras.

La instalación de nuevas plantillas se realiza desde el menú Extensiones - Instalar / Desinstalar.

Joomla 1.5: instalar una nueva plantilla

Opción 1. Subir el archivo zip

El procedimiento más sencillo es utilizar la primera de las opciones que aparece en la
nueva página destinada a la instalación de componentes en Joomla, la opción Subir paquete. Sólo tendrás que localizar el archivo empaquetado zip de la plantilla que desees instalar y subir el archivo al servidor a través del botón correspondiente que Joomla te ofrece.

Para ello haz clic en el botón Examinar y localiza el archivo zip de la plantilla elegida en  tu equipo (no es necesario que lo extraigas previamente). Selecciónalo y haz clic en el botón Abrir de la nueva ventana. Observa que la ruta al archivo aparece en el campo de texto Archivo empaquetado para indicarte que Joomla tiene seleccionada dicha plantilla. Finalmente, haz clic sobre el botón Subir archivo e instalarlo.

 Joomla 1.5: instalar una nueva plantilla

Joomla se ocupará de descomprimir el archivo, de colocar todas las carpetas y ficheros en su lugar correspondiente y de instalarlos, sin requerir tu intervención. Si todo funciona correctamente, Joomla te informará de que la instalación ha sido realizada con éxito.

Por ejemplo, prueba a realizar la instalación de la plantilla Etosha, una plantilla GNU/GPL, de la cual te hemos hablado en un artículo anterior de este blog.

Plantilla Etosha: descarga

Una vez realizada la instalación por el procedimiento que te hemos indicado encontrarás la nueva plantilla en el Gestor de plantillas (recuerda Extensiones -
Gestor de plantillas). En el listado se habrá añadido el nombre Etosha. Desde aquí podrás configurarla como plantilla Predeterminada (a través del procedimiento que ya conoces). Sólo resta comprobar que, en efecto, la nueva plantilla tiene el diseño que te gusta para tu sitio Web recargando de nuevo el Frontend de tu sitio.

Opción 2. Copiar - pegar la carpeta correspondiente

En el caso de las plantillas existe un segundo procedimiento igual de sencillo: copiar la
plantilla descomprimida dentro de la carpeta /templates (directorio en el que se guardan todas las plantillas instaladas). Acude a la carpeta en la que has instalado el servidor local XAMPP y localiza en ella la carpeta templates de Joomla. Para ello sigue la ruta c:\servidorlocal\xampp\htdocs\portal y busca la carpeta templates. Haz doble clic sobre ella para acceder a su contenido. En su interior podrás ver una carpeta con cada plantilla instalada, carpeta que tiene el mismo nombre que la plantilla en cuestión.

Joomla 1.5: instalar una nueva plantilla

En el caso de una instalación de una plantilla en remoto, las plantillas del Frontend se instalan en una subcarpeta de la carpeta templates (cuyo nombre debe coincidir exactamente con el de la propia plantilla) y contiene una estructura concreta de archivos y carpetas, idéntica a la que has encontrado en el servidor local.

EN RESUMEN:

Debes conocer qué hace Joomla cada vez que realiza un procedimiento de instalación de una plantilla:

  1. Descomprime el archivo zip
  2. Vuelca todo el contenido de este archivo en una carpeta, con el mismo nombre que tiene la plantilla, en la carpeta templates de Joomla
  3. Esto incluye diversos archivos php, html, hojas de estilo css y variados archivos de imágenes.
  4. Para editar la plantilla que estés utilizando tendrás que editar los archivos de imagen que contiene y, en algunos casos, modificar los archivos php, html o las hojas de estilos css en los que se basan.

No es objeto de este artículo, al menos por ahora, comenzar con la edición de plantillas pero te adelantamos que algunas modificaciones son relativamente sencillas y están al alcance de usuarios noveles (te mostraremos algunas de ellas) pero otras necesitarán que tengas conocimientos avanzados en php o lenguaje html.



Curso online de Joomla: dos espacios diferentes

14 07 2009

En el contexto de los CMS como Joomla se suele hablar de Frontend y Backend, dos términos habituales para designar dos espacios diferentes accesibles vía Web que se crean durante la instalación de este gestor de contenidos, es decir, que dispondrás de dos puertas de acceso diferenciadas a tu sitio Web.

La parte pública: EL FRONTEND

Es la vista que se muestra a los visitantes de la Web y es la puerta de acceso público. Es decir, lo que conoces como un tradicional sitio web. Es también la página inicial que se visualiza cuando alguien escribe la dirección URL de tu sitio en su navegador. En el caso de tu instalación de Joomla 1.5.12 en el servidor local accederás al Frontend si tecleas su dirección URL (no lo olvides: pon siempre primero en marcha el servidor local por el procedimiento que ya conoces, ejecuta tu navegador web y teclea la dirección siguiente):

http://localhost/portal

(recuerda que portal es la carpeta que hemos utilizado para copiar en ella todos los archivos y directorios de Joomla 1.5.12)

Lo que ves en pantalla es el Frontend de tu sitio Web:

Joomla 1.5: Frontend de tu sitio Web

Frontend de tu sitio web en el servidor local con la plantilla JA_Purity
establecida como predeterminada

Veamos ahora un sitio educativo elaborado con Joomla: por ejemplo, en tu navegador teclea la dirección

http://cpevaristovalle.com/portal

En pantalla se mostrará la página inicial del C.P. Evaristo Valle de Gijón, un sitio web construido con Joomla.

 Joomla 1.5: un sitio web educativo

Si navegas por sus páginas podrás experimentar las posibilidades que Joomla puede ofrecerte a la hora de crear un sitio web: múltiples menús, un área de inicio de sesión, encuestas, artículos con imágenes y otros elementos multimedia, imágenes enlazadas, galerías de imágenes, canales de noticias RSS, etc. ¡Un auténtico portal educativo interactivo!

El hecho de que sea una vía de acceso público no implica que sus contenidos sean visibles para todos los visitantes que accedan a la web. Joomla implementa un sistema de privilegios basado en acreditaciones compuestas por un nombre de usuario y una contraseña (observa el formulario de acceso de usuarios que puedes ver en la parte izquierda de la página). Dependiendo de los privilegios de esta acreditación, el usuario - visitante podrá acceder o no a ciertos contenidos o a determinadas entradas en los menús de navegación, por ejemplo, e incluso podrán interactuar con ellos o no según los permisos que tenga concedidos por el sistema. Considera que, entre otras opciones, algunos usuarios sólo podrán leer los artículos del sitio o sólo los artículos que seleccione previamente un administrador, mientras que otros usuarios podrán incluso editarlos. Ya te hablaremos de todo esto más adelante, cuando abordemos la realización de prácticas dedicadas a usuarios en Joomla.

La parte privada: EL BACKEND

Es la segunda puerta de acceso y es una zona privada, desde la que se gestionan los contenidos, se añaden nuevos artículos o se editan los existentes, se modifica el aspecto de la web, se da de alta a nuevos usuarios, y en general, se tiene el control sobre el funcionamiento del sitio Joomla. Se trata de una página oculta al visitante, que engloba el área de administración. Aquí sólo pueden entrar el administrador y aquellos usuarios a los que se les haya concedido esta posibilidad, previo inicio de sesión en el sistema con sus credenciales personalizadas. Tras una instalación básica de Joomla sólo existirá un único usuario acreditado llamado admin. Es el usuario con el que realizaste la instalación de Joomla y es el usuario Administrador, un usuario con permisos absolutos en el sistema capaz de interactuar con él plenamente.

En el caso de la instalación de Joomla en un servidor local, la dirección URL de acceso a este área de administración es:

http://localhost/portal/administrator

(sustituye el término portal por el nombre de la carpeta en la que has instalado Joomla si no se llama así)

En pantalla aparecerá el formulario de inicio de sesión.

 Joomla 1.5: formulario de acceso a la administración del sitio

De forma predeterminada, el nombre de usuario es admin. La contraseña se te habrá dado durante la instalación (o la  habrás establecido tú mismo, como sucedió al instalar Joomla 1.5 en local). Tendrás que  teclear ambos valores en el formulario y pulsar la tecla Intro o el botón Acceder para ingresar en el área de administración de Joomla.

Se abrirá una nueva página en la que se mostrarán unos cuantos menús y un montón de botones con iconos. Es el PANEL DE CONTROL de la página inicial de administración de Joomla.

Observa esta pantalla:

  • En la parte superior izquierda se muestra el título que configuraste para el sitio durante la instalación: podrás cambiarlo si lo deseas. Ya te indicaremos cómo.

Joomla 1.5: Panel de control

  • En la parte superior derecha se indica qué versión de Joomla estás utilizando; en nuestro caso, 1.5.12.
  • Debajo del título hay un menú desplegable que incluye variadas opciones para acceder a todas las posibilidades que ofrece la administración del sitio Web, como las plantillas utilizadas en su diseño, el instalador, la gestión de los módulos, la administración de usuarios. Este menú es la principal herramienta de navegación dentro del Backend y sólo tienes que pasar el ratón por encima de cada entrada para acceder a los submenús correspondientes. Cuando trabajes con Joomla olvídate de los botones Atrás y Adelante de tu navegador y utiliza las opciones de este menú.

Joomla 1.5: Panel de control - menús

  • Observa que aparece a la derecha de este menú un enlace de nombre Previsualizar. Utiliza el botón derecho del ratón sobre el mismo y selecciona la opción de Abrir enlace en una pestaña nueva (Firefox). Esto te permitirá visualizar la página inicial de tu sitio Web en una pestaña nueva de tu navegador al tiempo que mantienes abierta la Administración de Joomla. Este truquillo resulta muy útil porque así podrás comprobar  simultáneamente el efecto en tu sitio de los cambios que vayas realizando mientras trabajes con la administración de Joomla.

Joomla 1.5: Panel de control

¡Qué buena idea! Deja abiertos el Frontend y el Backend al mismo tiempo. De este modo podrás apreciar instantáneamente todos los cambios que realices en el Backend en la página frontal. Puedes hacerlo en dos pestañas diferentes, en dos ventanas diferenciadas e incluso en dos monitores distintos y procura alternar entre ambos haciendo clic sobre su nombre en la barra de tareas del sistema. Cada vez que realices un cambio en el backend recarga el frontend utilizando la tecla F5 de tu navegador (Firefox e IE) y podrás visualizar los cambios realizados inmediatamente.

  • A la derecha verás el icono Bandeja de entrada. Te indica el número de mensajes que tienes sin leer en el buzón de correo interno de Joomla. El sistema de mensajería interna de Joomla es muy útil para coordinar la labor de los usuarios que tienen acceso al Backend.
  • El icono Número de usuarios acreditados actualmente te indica cuántos usuarios acreditados están actualmente visitando tu sitio, tanto en el Backend como en el Frontend.
  • Y por último, el enlace Cerrar sesión. Este enlace te permitirá salir del sistema. Utilízalo siempre cuando termines tu trabajo con Joomla, es fundamental para evitar que otros usuarios del ordenador puedan usurpar tu personalidad en el Backend de Joomla.

El panel de control

Ocupa la mayor parte de la pantalla y se caracteriza por la presencia de unos grandes
botones de acceso directo a las tareas más comunes que realizarás en Joomla. Si trasteas con estos iconos y acabas medio perdido en Joomla, sólo tendrás que hacer clic en la entrada del menú Inicio - Panel de Control para volver a la página inicial del Panel de Control: ¡no te perderás en Joomla!

Joomla 1.5: Panel de control - iconos

Los resúmenes deslizantes

A la derecha de la pantalla puedes acceder a los resúmenes deslizantes (haz clic sobre
cada uno de ellos) con variada información sobre Joomla, alguna realmente muy útil.

Joomla 1.5: Panel de control - resúmenes deslizantes

  • Bienvenido a Joomla!
  • Usuarios identificados: se muestran los usuarios que actualmente han iniciado sesión en el sistema.
  • Popular: se muestran los artículos más populares, es decir, los que tienen más éxito entre los visitantes. Se muestra la fecha y hora de creación del artículo y la cantidad de visitas realizadas al artículo. ¡Muy práctico, si haces clic sobre su enlace podrás editar los artículos cliqueados!
  • Artículos añadidos recientemente. Aquí se muestran las últimas entradas. También resulta muy práctico, ya que a menudo puede interesarte completar alguna de ellas.
  • Menú de estadísticas: Agrupa los distintos menús. Permite ver cuántas entradas tiene cada uno de los menús de Joomla. Observa que en el listado sólo aparece un único menú, el llamado mainmenú, que contiene un único item (si observas el Backend de tu sitio web, sólo hay un menú, el Menú principal, que contiene una única entrada de menú, el enlace Inicio).

Joomla 1.5: menú Principal - módulo en el Frontend

Sin querer entrar en muchos pormenores de lo que es Joomla, te comentaré que, en realidad, lo que estás viendo no es un menú, sino un módulo de Joomla, el módulo asociado a este menú, un módulo que Joomla crea de forma predeterminada cada vez que creas y configuras un menú de navegación. Casi todo lo que ves en las páginas de un sitio Joomla son, en realidad, módulos. Los menús de navegación son módulos, el formulario de acceso de usuarios que viste en la página del C.P. Evaristo Valle es también un módulo, la encuesta es un módulo… No olvides este concepto: casi todo… lo que aparece en el sitio Web, en el Frontend, será un módulo y podrás editarlo a tu gusto, cambiarlo de sitio, añadir nuevos módulos, etc.  Esta estructura modular confiere a Joomla una singular potencia y te permitirá personalizarlo a tu antojo.

Por cierto, el aspecto que tiene esta página (los colores, la posición de los elementos, etc.) está determinado por una plantilla, la que se esté utilizando en ese momento. Y suele ser muy frecuente que las plantillas utilicen las zonas laterales, superiores e inferiores para ubicar los módulos. Así pues, estos dos conceptos, módulos y plantillas, son básico en Joomla y serán los protagonistas de nuestros próximos artículos.



Curso online de Joomla 1.5: lo primero… instalar un buen editor

12 07 2009

En un artículo anterior de “Con el ordenador a cuestas” ya te hemos indicado que, aunque Joomla trae “de serie” un editor integrado TinyMCE, resulta muy conveniente instalar un editor aún mejor que te permita trabajar con tablas, imágenes o archivos multimedia sin problemas. De ahí que te hayamos recomendado instalar el editor JCE.

Curso online de Joomla: instala el editor JCE: Con el ordenador a cuestas

No es nuestra intención cansarte repitiendo el artículo pero dado que en el mismo se trata por encima su instalación en la versión 1.5, la que ahora suponemos estás usando, te mostramos de manera gráfica y resumida cómo actuar para instalar JCE 1.5.4 en tu sitio Web en esta última versión de Joomla: si quieres explicaciones más detalladas acude a la lectura de este antiguo artículo, mucho más completo que el actual.

1. Localiza los archivos necesarios.

El editor JCE se distribuye bajo licencia GPL, por tanto, es gratuito y libre. Podrás descargarlo directamente desde su sitio web oficial:

JCE - A content editor for Joomla - http://www.joomlacontenteditor.net/

En concreto, descarga los archivos:

Una vez que tengas los tres archivos salvados en tu equipo procede de la siguiente manera:

2. Instala el componente.

Instalar componentes en Joomla es muy sencillo. Tienes una entrada en el menú Extensiones - Instalar / Desinstalar. Todo lo que quieras instalar en Joomla lo realizarás desde aquí. Utiliza el botón Examinar para localizar el archivo com_jce… zip en tu equipo y pulsa el botón Subir archivo & Instalar para que Joomla lo instale. Asegúrate siempre que tras la instalación el componente se encuentra correctamente publicado: para ello vete al Gestor de plugins y verifica que tiene una marca verde a su derecha.

JCE - Instala un nuevo editor en Joomla

JCE - Instala un nuevo editor en Joomla

JCE - Instala un nuevo editor en Joomla

JCE - Instala un nuevo editor en Joomla

JCE - Instala un nuevo editor en Joomla

3. Instala el plugin de utilidades:

Hazlo utilizando idéntico procedimiento al anterior desde el menú Extensiones - Instalar / Desinstalar pero ahora utilizando el archivo plg_jceutilities….zip. Debes publicarlo en el Gestor de plugins, por defecto no lo estará, haciendo clic sobre el icono rojo con un aspa en su interior para que su estado pase a verde (publicado).

JCE - Instala un nuevo editor en Joomla

4. Instala el paquete de idioma desde el Panel de control del componente:

Tras la instalación del plugin aparecerá una nueva entrada en el menú Componentes, llamada JCE Administration. Haz clic sobre Control Panel para acceder al panel de control del plugin. Selecciona el icono Instalar e instala el pack de idioma español desde la nueva ventana que se abre en Joomla. Ahora JCE habla español: cuando pases el cursor del ratón por encima de sus iconos te explicará su función en español.

JCE - Instala un nuevo editor en Joomla

 

JCE - Instala un nuevo editor en Joomla

5. Configura JCE como editor predeterminado:

Si no configuras JCE como editor predeterminado para tu usuario seguirás usando el anterior TinyMCE que venía por defecto con Joomla. Y hacer esto es muy fácil, acude en el panel de control de Joomla al Gestor de usuarios, haz clic sobre el usuario Administrador (el tuyo, claro) y selecciona como editor JCE 1.5.4. Aplica y guarda los cambios ¡Así de sencillo!

JCE - Instala un nuevo editor en Joomla

Ahora ya puedes utilizar este editor en los contenidos que vayas a crear para tu sitio. Comprueba su aspecto acudiendo al Panel de control de Joomla y seleccionando Añadir un nuevo artículo.

JCE - Instala un nuevo editor en Joomla



Curso online de Joomla: XAMPP, también en Ubuntu 9.04

10 05 2009

Joomla 1.5.10, nueva versión estableLos chicos de Joomla Spanish nos facilitan desde finales de marzo la última versión disponible de Joomla, completamente traducida al castellano: Joomla! Spanish 1.5.10 estable-Full. Con el ordenador a cuestas te invita a que descargues, pruebes y uses en tus sitios Web este fantástico Gestor de contenidos (C.M.S) que te permitirá crear y administrar de forma muy sencilla contenido dinámico en tu Web.

En nuestros anteriores artículos dedicados a Joomla ya te hablamos de sus características y de los requisitos técnicos necesarios para ejecutarlo. Te recomendamos accedas a ellos para conocerlos y, sobre todo, leas los artículos dedicados a la instalación de un servidor local en tu equipo con un sistema Windows si este es el Sistema Operativo de tu ordenador. Ten en cuenta que Joomla es un sistema de administración de contenidos de código abierto que se ejecuta en servidores con PHP y base de datos MySQL, por tanto, si quieres instalarlo en tu equipo necesitarás la instalación previa de alguna solución que convierta tu ordenador en un servidor: nuestro recomendado, XAMPP (por ser multiplataforma -versiones para Windows, Linux y Mac- y opensource.

Como ya conoces, si eres uno de nuestros habituales lectores, Con el ordenador a cuestas está especialmente dirigido a la formación de docentes, de ahí que nuestros artículos dedicados a Joomla se destinen a la creación, edición y mantenimiento de sitios webs educativos. Han pasado ya unos cuantos meses desde que la línea 1.5 de Joomla apareciera (Febrero 2007) y ya está claramente desarrollada, por ello, a partir de este momento nuestros tutoriales tomarán como base esta versión.

En este artículo te mostramos cómo instalar XAMPP en un equipo con Ubuntu 9.04, la última versión estable de esta popular distribución Linux con el claro objetivo de instalar posteriormente Joomla 1.5.10 en él.

¿Por qué un servidor Web?

Por tratarse de una aplicación Web, Joomla necesita instalarse sobre un servidor web, como Apache o Internet  Information Services (IIS), pero además requiere que este servidor esté ampliado con PHP y disponga de acceso a una base de datos MySQL.

En concreto, los requisitos de la versión 1.5 de Joomla, la que vas a instalar, son:

  • Un servidor web (Apache 1.3 o superior, o IIS) dotado de
  • PHP (4.3.10 o superior)
  • Servidor de bases de datos MySQL (3.23 o superior)

Esto puedes obtenerlo contratando un servicio de alojamiento (hosting), que no tiene por qué ser de pago (algunas empresas ofrecen alojamiento gratuito a cambio de incluir publicidad en las páginas del sitio, pero muy pocas admiten sitios Joomla), o instalando un servidor local en tu propio ordenador. Esta será la opción que utilicemos para seguir este curso de aprendizaje básico sobre Joomla.

Te recomendamos, además, que, aunque dispongas de un sitio en producción en un hosting remoto, siempre tengas una versión de testeo con un servidor local en tu equipo: resulta muy útil para comprobar los cambios que vayas realizando, comprobar la compatibilidad y estabilidad del sistema a medida que instales nuevos complementos para el mismo, etc. Cuando compruebes que todo funciona correctamente en tu servidor local, realiza los mismos cambios en tu servidor remoto.

Cuando accedes a través de Internet a una web gestionada con Joomla (o con cualquier otro CMS) no necesitas nada especial para ver sus contenidos ni para editar otros nuevos. Es posible hacerlo a través de cualquier navegador conectado a la Red: Internet Explorer, Firefox, Ópera, Flock…

Pero el ordenador en el que se encuentre alojada esa Web sí que necesita un entorno especial para que las tareas que ejecuta Joomla puedan realizarse y para que puedas ver su contenido: debe ser un servidor web capaz de interpretar el lenguaje PHP en el que está escrito Joomla y un programa para gestionar la base de datos SQL en la que se almacena la información que le introduces cuando configuras tu web o cuando creas contenidos. Cuando te planteas realizar tu sitio Web con Joomla y vas a utilizar algún servicio de hosting debes considerar que el servicio que contrates o utilices (si es un hosting gratuito) tiene que ofrecerte estas condiciones especiales para que Joomla pueda funcionar. Y no todos los proveedores de alojamiento web tienen este tipo de servidores (Educastur, sí). El motivo parece ser que está relacionado con los riesgos de ataques externos que corre un sistema informático que ejecuta programas siguiendo órdenes remotas.

¿Por qué un servidor local?

Si no dispones de espacio en un servidor web contratado, no deseas utilizar un hosting gratuito (suele tener contrapartidas, como publicidad, spam, limitaciones en los servicios, temporalidad limitada…) o bien deseas probar primero Joomla en tu ordenador (algo muy recomendable, sobre todo cuando trabajes de un modo más avanzado con Joomla, ya que te permitirá testear que todo funciona perfectamente, antes de probar nuevos complementos directamente en tu sitio web), tendrás que instalar en tu ordenador un servidor web que posea las características comentadas.

La instalación de Joomla en un servidor local tiene algunas ventajas:

  • Te permite trabajar con Joomla sin necesidad de estar conectado a Internet
  • Las operaciones y tareas a realizar en Joomla son mucho más rápidas, casi instantáneas (en un servidor remoto dependerá, claro está, de tu conexión a Internet).
  • Te posibilita comprobar que las funcionalidades que añades a Joomla son completamente compatibles con el sistema.

Aunque no todo son ventajas:

  • Deberás trabajar siempre desde el mismo ordenador.
  • No existe una funcionalidad que te permita diseñar todo tu sitio web en local y posteriormente “subirla” a un sitio remoto.

Cómo instalar un servidor local en tu equipo

Xampp, servidor web también en UbuntuUn servidor local es simplemente un programa, instalado en el PC, que permite mostrar las páginas HTML mediante un navegador. El más conocido que, además es de código abierto, es Apache. Como ya te hemos comentado, Joomla necesita ser instalado en un ordenador en el que el servidor web Apache esté funcionando. Y tendrás además que añadirle el intérprete de lenguaje PHP y el motor de bases de datos SQL, junto con una utilidad que permita acceder a través del navegador web a dicha base de datos: PHPMyAdmin. Y todas estas herramientas son software libre, programas y aplicaciones que podrás descargar gratuitamente desde sus páginas oficiales desde Internet y que podrás instalar de manera independiente.

Ahora bien, aunque su instalación es sencilla, la configuración de estas herramientas para que funcionen adecuadamente no está al alcance de usuarios noveles. Por ello, la solución más simple es utilizar paquetes ya preinstalados y preconfigurados que incluyen no sólo estas herramientas sino también algunas otras añadidas, que nos facilitan mucho esta tarea y que son suficientes para nuestros propósitos con Joomla.

Existen diversas soluciones, cada una con sus propias características:

  • EASYPHP. Profusamente utilizado. Se caracteriza por ser un paquete exclusivamente para Windows, no libre pero sí gratuito, pero no tiene servidor de correo, necesario por ejemplo para que en Joomla puedan registrarse nuevos usuarios a través de e-mail o para que funcionen los formularios de contacto (se pueden utilizar los datos de una cuenta POP).
  • JS-U SERVER. El equipo de desarrolladores de Joomla Spanish, muy interesados en que Joomla se utilice por el mayor número de usuarios, nos ofrece en su sitio oficial un archivo comprimido con el servidor local JS-U Server instalado y configurado junto con la instalación de Joomla en sus dos últimas versiones: joomla 1.0.15 y joomla 1.5. Es una muy buena manera de acercarse a Joomla desde un punto de vista educativo, para iniciarse y para experimentar con Joomla en las primeras etapas de aprendizaje de la herramienta.
  • XAMPP. Nuestro preferido. Es open source, libre, gratuito y multiplataforma (posee versiones para Windows, Linux, Mac). Incluye servidor de correo y aplicación de FTP. De fácil instalación y sencilla utilización.

Cómo obtener e instalar XAMPP para Linux

Si utilizas un equipo con Linux, Ubuntu por ejemplo (mi sistema operativo preferido), tendrás que descargar la versión XAMPP para Linux. El procedimiento es muy sencillo:
Accede a la página oficial del proyecto XAMPP desde Mozilla Firefox:

Apache friends - XAMPP for Linux http://www.apachefriends.org/en/xampp-linux.html

Descarga la última versión disponible: en concreto, la versión XAMPP para Linux 1.7. En la página inicial localiza el apartado Step 1. Download y haz clic sobre el enlace Xampp Linux 1.7.1. El enlace te llevará a la descarga del archivo desde SourceForge.net, el mayor almacén de software libre en Internet y, en breves segundos, la ventana de descargas del navegador Firefox te solicitará qué hacer con el archivo en cuestión. Guárdalo en tu directorio personal.

 Descarga Xampp para Linux

El resultado de este proceso será la presencia en el directorio /home/”nombrede usuario” de un archivo denominado xampp-linux-1.7.tar.gz.

Xampp, servidor web también en Ubuntu

Inicia una sesión en la consola o terminal (Menú Aplicaciones - Accesorios - Terminal) e identifícate como administrador del sistema escribiendo el siguiente comando:

sudo -s

El sistema te solicitará tu contraseña de root, de superadministrador (la que pusiste en la instalación del sistema), tecléala y observa que ante la consola ya estarás identificado como tal.

Xampp, servidor web también en Ubuntu

Observa que en la terminal estás posicionado directamente en tu directorio personal, justo el directorio en el que se localiza el archivo tar.gz descargado en el paso previo (si hubieras descargado el archivo a una carpeta de este directorio tendrías que teclear en la consola cd /home/”nombredeusuario/”carpetadedescarga”, si no conoces la ruta siempre puedes utilizar el comando ls -l para listar archivos y carpetas o bien acudir a Nautilus utilizando el botón presente en la ventana Cambiar entre la barra de lugares y de botones). Pero vamos a suponer que, en efecto, se encuentra en tu directorio personal, por tanto, nuestras instrucciones apuntarán a esta ubicación.

El siguiente paso será descomprimir la carpeta y copiar sus archivos al directorio /opt, directorio predeterminado para este tipo de instalaciones, con el siguiente comando en la consola o terminal:

tar xvfz xampp-linux.1.7.1.tar.gz -C /opt

te explicamos el comando:

  • tar xvfz descomprime el contenido del archivo comprimido tar.gz y genera de nuevo la estructura de directorios
  • xampp-linux.1.7.1.tar.gz archivo descargado de Apache friends
  • -C ordenamos que lo descomprima a un directorio concreto
  • /opt el directorio de destino en el que se copiará toda la estructura de directorios de XAMPP

Observarás que comienza el volcado de archivos y que, en breve, XAMPP para Linux ya estará instalado en el directorio señalado. Así, si navegas por el sistema de archivos y acudes al directorio opt observarás que, en efecto, se ha creado un nuevo directorio llamado lampp en cuyo interior se encuentran todas las carpetas y archivos de Xampp. Una de ellas, la carpeta htdocs, es precisamente el directorio en el que se debe alojar Joomla cuando vayas a realizar su instalación.

Como iniciar el servidor

Deberás iniciar el servidor siempre desde la consola o terminal utilizando el comando:

sudo /opt/lampp/lampp start

Tras teclear la contraseña de root aparecerá en la consola un mensaje indicando que el servidor XAMPP para Linux se ha
iniciado correctamente:
root@edisue-laptop:~# /opt/lampp/lampp start
Starting XAMPP for Linux 1.7…
XAMPP: Starting Apache with SSL (and PHP5)…
XAMPP: XAMPP-MySQL is already running.
XAMPP: XAMPP-ProFTPD is already running.
XAMPP for Linux started.
root@edisue-laptop:~#

Para comprobar que efectivamente es así y que todo funciona correctamente, inicia tu navegador y accede a la dirección

http://localhost

Aparecerá la página inicial de XAMPP en la que podrás seleccionar la opción Español para acceder a la página de presentación.

Xampp, servidor web también en Ubuntu

Como detener el servidor

Siempre desde la consola o terminal. Teclea el comando:

sudo /opt/lampp/lampp stop

¡Así de simple!