Formación GNU/Linux

Cómo utilizar el plugin JCE Mediabox en Joomla 1.5 - Ventana de texto informativa emergente

Valoración del Usuario:  / 0

Detalles

Categoría: Curso online Joomla 1.5

Creado en Miércoles, 24 Agosto 2011 06:53

Última actualización en Martes, 18 Junio 2013 14:40

Escrito por Edita Sueiras

Visitas: 10472

Continuando con la serie de artículos destinados a utilizar el fantástico editor de textos avanzado JCE en Joomla 1.5 te mostramos diferentes modos de utilización del plugin JCE Mediabox.

Sigue nuestros artículos sobre JCE Editor en Joomla 1.5 para comprobar las ventajas de su utilización:

Sitio oficial JCE Editor: http://www.joomlacontenteditor.net/

Para utilizar este plugin debes primero descargarlo desde la página oficial de JCE Editor, a continuación, instalarlo en tu sitio Joomla y, finalmente, habilitarlo para comenzar a usarlo.

Descarga el plugin para Joomla 1.5 – Descargar

Instala el plugin desde el menú Extensiones – Instalar / Desinstalar

Acude al Gestor de plugins desde Extensiones y asegúrate de que su columna correspondiente esté publicado: icono verde (en caso contrario, haz clic sobre él para cambiar el estado de No publicado a Publicado).

El primer ejemplo de uso del plugin JCE Mediabox que te mostramos implica la posibilidad de crear una ventana informativa emergente en cualquier elemento incluido en un artículo de tu sitio Joomla 1.5, ventana que se mostrará en pantalla y que complementará la información que pueda mostrar el objeto en cuestión, ya sea un texto enlazable, una imagen o un vídeo por ejemplo.

El procedimiento es muy sencillo: sólo requiere una clase que lo identifique y establecer un título en las propiedades de cada elemento.

Para realizar las actividades prácticas que te proponemos acude al botón Añadir un nuevo artículo en el panel de control de Joomla 1.5. Configura el artículo del siguiente modo:

Título: JCE Mediabox – Ventana de texto informativa

Alias: deja el campo vacío, Joomla lo realizará por sí mismo

Publicado: sí, o, en caso contrario, no será posible visualizar el artículo

Página principal: sí, realizamos el artículo a modo de ejemplo, situarlo en la página principal nos permitirá acceder fácilmente a él. La página de inicio de nuestro sitio es tan válida como cualquier otra.

Sección – Categoría: sin clasificar. Es un ejercicio de prácticas, adáptalo a tus necesidades concretas.

Ventana de texto informativa en un texto que enlaza con un sitio Web externo

Crear un texto enlazado a un sitio Web en Joomla 1.5 con el editor JCE es sencillo. Haz clic en el icono Insertar / Editar link del editor:

En pantalla se muestra una ventana informativa que te permite configurar el enlace. Observa que presenta tres pestañas: la pestaña Enlace es la activa de manera predeterminada.

• En el campo de texto URL escribe la dirección URL del sitio al que apuntará el enlace. En este caso http://www.educastur.es

• En el campo Texto escribe el texto que se mostrará en el artículo que será el que actúe de enlace hacia el sitio anterior. Será un hiperenlace típico de Internet: al acercar el cursor del ratón al texto, se podrá hacer clic sobre él y se navegará al sitio configurado en el campo URL.

La ventana de texto informativa que configurará JCE Mediabox permite incluir un nombre y una descripción. El plugin actuará si se escribe en el campo de texto Título una estructura de caracteres – palabras del tipo

Títle::text
los dos puntos deben ser escritos dos veces y no deben dejarse espacios en blanco

siendo Títle, el título del sitio web al que apunta el enlace y Text, el texto descriptivo que deseas aparezca en la ventana informativa de texto.

En nuestro caso, por ejemplo, como Título escribimos Educastur, como texto Sitio web institucional de la Consejería de Educación del Principado de Asturias.

Aún no hemos terminado. Debemos indicarle a Joomla que utilice el plugin. Para ello haz clic en la pestaña Avanzado y en el menú desplegable Lista de clase selecciona la entrada jcetooltip.

Finalmente haz clic en el botón Insertar.

Pulsa el botón Aplicar. Actualiza el frontend de tu sitio y comprueba tanto el funcionamiento del enlace como la aparición de la ventana de texto informativa al acercar el ratón al mismo:

Ventana de texto informativa en una imagen

Continuamos con la edición del artículo. En este ejercicio práctico incluiremos una imagen cualquiera al que aplicaremos el plugin jcetooltips. Una vez publicado el artículo el comportamiento del plugin será el siguiente: al acercar el cursor del ratón sobre la imagen se mostrará en pantalla la ventana informativa de texto que muestre un título para la imagen y un texto asociado a ella.

Haz clic al final del artículo para incluir en ella una imagen. Por ejemplo, vamos a utilizar una de las imágenes predeterminadas del sistema, localizadas dentro de la carpeta stories de Joomla.

Una vez en la configuración del artículo utiliza el botón Insertar / editar imagen del editor JCE. Se abre en pantalla la ventana Administrador de imágenes. Localiza la imagen de tu interés mediante el Explorador de archivos en la parte inferior de la ventana. En concreto, haz clic sobre la carpeta stories para ver su contenido y, a continuación, sobre la carpeta fruit. Haz clic en cherry.jpg para seleccionar la imagen, que será la imagen que se incluirá en el artículo.

Haz clic en la pestaña Avanzado, en la parte superior de la ventana. El plugin actuará si introduces una cadena de caracteres o palabras que responda a la estructura

title::text
recuerda: los dos puntos deben escribirse dos veces y no debe dejarse espacios en blanco

en el campo Título.

Por ejemplo, escribe

Cerezas del Jerte::¡Qué ricas son!

Y si indicas a Joomla que utilice el plugin JCE Mediabox. Para ello despliega el menú desplegable Lista de clase y selecciona jcetooltip:

Haz clic finalmente en el botón Insertar situado en la parte inferior de la ventana.

Aplica los cambios, acude al frontend de tu sitio y comprueba el funcionamiento del plugin en la imagen incluida en el artículo:

Nota

Puedes utilizar este plugin en otros elementos presentes en el artículo. Para ello selecciona el elemento en cuestión y haz clic en el botón Insertar / Editar atributos del editor JCE 2.0.7

Como en los dos casos anteriores el plugin funcionará si introduces una combinación de caracteres – palabras siguiendo la estructura

title::text

en el campo Title

y seleccionas en el menú desplegable Class la opción jcetooltip:

Descarga nuestro tutorial en formato PDF - 343 kb - Descargar

• < Previo
• Siguiente >