Joomla 2.5, la última versión del CMS Joomla

LA ADMINISTRACIÓN DE CONTENIDOS EN JOOMLA 2.5Hiperenlaces en los artículos – Enlaces a archivos

Los artículos son, básicamente, texto con un título, aunque también pueden contener imágenes y otros tipos de elementos multimedia. Y, por supuesto, puedes incluir en ellos todo tipo de enlaces o hipervínculos: textos e imágenes enlazadas a sitios web externos, a páginas de tu sitio, a entradas concretas de tus menús de navegación, a documentos de todo tipo alojados en tu servidor o en servidores externos (Issuu, Scribd, Google Docs, Google Apps, Dropbox) y, por supuesto, a los componentes que tengas instalados en tu sistema. ¡Las posibilidades son increíbles, como verás a continuación!

Intentaremos mostrarte todas las opciones que Joomla 2.5. te permite y si, hay algún servicio Web 2.0 u opción que no hayamos planteado, sólo tienes que dejar tus comentarios e intentaremos crear nuevos tutoriales al respecto.

En este artículo vas a realizar hipervínculos en tus artículos de contenido de Joomla hacia diferentes clases de archivos. Te mostraremos como ejemplo concreto como vincular textos e imágenes a documentos PDF, pero también podrás repetir idénticos procedimientos para enlazar a documentos de Word, Writer, PowerPoint, Impress, imágenes en distintos formatos, archivos flash, archivos de vídeo y sonido o incluso archivos ejecutables. Ahora bien... recuerda que, en algunos de estos casos, debes considerar el espacio disponible en tu hosting (en local, no hay problema, sólo depende del espacio que tengas en tus discos de almacenamiento) ya que cierta clase de archivos como los de vídeo pueden ocupar mucho espacio, que tal vez ni siquiera tengas. En este caso lo más recomendable es que utilices servicios como YouTube, Vimeo, etc. y que enlaces tus archivos directamente desde ellos. Es más... la mayoría de estos servicios online te ofrecerán incluso la posibilidad de incluir un atractivo reproductor flash para visualizarlo en tu sitio Joomla.

Comencemos...

Accede a la administración de tu sitio Joomla. Recuerda que estás trabajando en local y que, por tanto, la dirección URL del mismo es:

http://localhost/portal/administrator

Acredítate con tus datos de acceso, nombre de usuario y contraseña, de administrador del sistema. Y crea un nuevo artículo en el que vayas a incluir los enlaces correspondientes.

El procedimiento a utilizar no se va a diferenciar demasiado del que ya has visto en el tutorial anterior de esta misma sección salvo que necesitarás que el archivo a enlazar se encuentre previamente alojado en tu sitio. Si utilizas el editor predeterminado TinyMCE tendrás que utilizar como paso previo el llamado Gestor Multimedia de Joomla que es un sencillo navegador de archivos. Te permite crear carpetas y subcarpetas en tu servidor y subir los archivos en distintos formatos a estos para alojarlos. Después sólo tienes que vincular el archivo en cuestión con un texto o imagen presente en el artículo que estés creando.

Con el ordenador a cuestashttp://www.lasticenelaula.es/portal 1 Edita Sueiras

Joomla 2.5, la última versión del CMS Joomla

Te recomendamos que, antes de seguir con este tutorial, leas los siguientes artículos de esta misma sección de Con el ordenador a cuestas, dedicados a los enlaces en textos e imágenes y la utilización del Gestor Multimedia ya que son requisitos previos que debes conocer:

Hipervínculos en Joomla 2.5. Textos e imágenes enlazadas – Ver

El Gestor Multimedia en Joomla 2.5 – Ver

Proceso para realizar un vínculo o enlace a un documento PDF

En primer lugar utiliza el Gestor Multimedia para subir el siguiente archivo en formato PDF a tu sitio.

Documento Spanish_RapidHrbeat.pdf – DescargarFuente del documento: http://www.hrsonline.org/Education/Resources/upload/Spanish_RapidHrtbeat.pdf

Puedes crear una carpeta específica mediante el botón Crear carpeta para alojarlo o subirlo directamente a alguna de las carpetas ya creadas en el sistema (así lo hacemos a la carpeta circulatorio que hemos creado en el artículo anterior). Recuerda en todo caso que el archivo se ubicará en la carpeta que tengas seleccionada antes de hacer clic en el botón Iniciar subida. Localiza el archivo con el botón Examinar y a continuación “súbelo” al directorio que desees de la carpeta images.

Una vez el archivo alojado en el servidor (ya sea en local o en remoto) crea el artículo en el que lo vayas a incluir y utiliza cualquier texto o imagen que desees para crear el hipervínculo al archivo.

Veamos con un ejemplo concreto como puedes proceder...

Recuerda

Si utilizas el editor TinyMCE, un excelente editor predeterminado en la instalación básica de Joomla 2.5, recuerda acudir al Gestor de plugins. En el listado haz clic en el nombre Editor – TinyMCE para acceder a su página de configuración. Localiza el apartado Funcionalidad en Opciones básicas y selecciona Extendida. Guarda los cambios. De esta manera tendrás acceso a todas las funcionalidades del editor.

Con el ordenador a cuestashttp://www.lasticenelaula.es/portal 2 Edita Sueiras

Joomla 2.5, la última versión del CMS Joomla

Enlace a un documento PDF con el editor TinyMCE

Para realizar el enlace a un documento PDF vamos a utilizar uno de los artículos ya existentes en nuestro sistema que hemos creado con anterioridad (si lo deseas también puedes crear uno nuevo de acuerdo a tus necesidades).

Para editar un artículo ya existente en tu sistema acude al Gestor de artículos. Haz clic en el botón correspondiente en el Panel de Control o bien acude al menu Contenido – Gestor de artículos. A continuación, haz clic sobre el nombre del artículo que quieres editar en el listado para abrir su página de configuración. En el caso que nos ocupa hacemos clic sobre el artículo El corazón y su funcionamiento que hemos creado en un artículo anterior.

Acude al final del artículo en el editor del texto y escribe en una línea independiente:

Dossier en formato PDF – Descargar

Edítalo a tu conveniencia. Cambia su tamaño, céntralo, etc. Selecciona finalmente el texto Descargar (haz un doble clic sobre la palabra), que será el texto que servirá de base para el hipervínculo y, a continuación, haz clic en el botón Insertar / editar hipervínculo del editor TinyMCE:

Ya conoces la nueva ventana que emerge en pantalla en la que el apartado más importante para enlazar con el archivo es conocer su dirección URL. El editor predeterminado TinyMCE tiene una gran limitación en este sentido, ya que no existe ninguna opción que te permita buscar en el sistema el archivo a enlazar (aspecto superado por el editor avanzado JCE que, como verás más adelante, tiene una utilización en este aspecto mucho más intuitiva, y sencilla). No queda, pues, más remedio que escribir – teclear la dirección URL relativa (o absoluta si comienza por http://) al archivo que quieres enlazar. Pero ya verás que no es nada complicado averiguarla.

El archivo con el documento PDF lo tenemos alojado, a través del Gestor multimedia, en la carpeta circulatorio de la carpeta images de Joomla; por tanto, la ruta relativa al archivo es tan simple como:

images/circulatorio/spanish_rapidhrtbeat.pdf

donde images y circulatorio son el directorio y subdirectorio en el que se encuentra alojado el archivo

spanish_rapidhrtbeat.pdf – es el nombre y extensión del archivo a enlazar

También podrías escribir su ruta absoluta del tipo:

http://localhost/portal/images/circulatorio/spanish_rapidhrtbeat.pdf

En ambos casos, el comportamiento del enlace será que al hacer clic en el texto enlazado Descargar el sistema te mostrará en pantalla la ventana que te permite guardar o abrir el archivo seleccionado.

Con el ordenador a cuestashttp://www.lasticenelaula.es/portal 3 Edita Sueiras

Joomla 2.5, la última versión del CMS Joomla

Al ser un documento PDF ajeno a Joomla 2.5 sería muy recomendable que en el menú desplegable Destino escogieras la opción Abrir en ventana nueva (_blank) para que el usuario – visitante de tu sitio no perdiera la página de vista.

Si además, escribes en el campo de texto Título Artículo – Latido rápido del corazón este texto se mostrará en tu sitio cuando los usuarios – visitantes del mismo acerquen el ratón al texto Descargar, a modo de mensaje explicativo emergente.

Finalmente, haz clic en el botón Insertar. La ventana se cierra y vuelves de nuevo al editor. Observa que en el artículo el texto aparece coloreado y subrayado para indicarte que has establecido un hipervínculo en él.

Guarda el artículo, actualiza el Frontend de tu sitio y comprueba el comportamiento del enlace cuando haces clic en él.

Con el ordenador a cuestashttp://www.lasticenelaula.es/portal 4 Edita Sueiras

Joomla 2.5, la última versión del CMS Joomla

Nota

De la misma manera, utilizando idénticos procedimientos, puedes enlazar una imagen en lugar de un texto y, por supuesto, puedes enlazar cualquier tipo de archivo de los que sean soportados por el Gestor Multimedia (de manera predeterminada, bmp, csv, doc, gif, ico, jpg, jpeg, odg, odp, ods, odt, pdf, png, ppt, swf, txt, xcf, xls, BMP, CSV, DOC, GIF, ICO, JPG, JPEG, ODG, ODP, ODS, ODT, PDF, PNG, PPT, SWF, TXT, XCF, XLS) o que has configurado como aceptado por el Gestor: un archivo de Word, un archivo con extensión odt de Writer, una presentación ppt de Microsoft PowerPoint o una presentación de diapositivas de Impress, tal y como ves por la lista de extensiones permitidas

Recuerda que para conocer el listado de extensiones permitidas (o añadir las extensiones que necesites utilizar) debes acudir al botón Opciones del Gestor Multimedia:

En la lista no se encuentra ni el formato flv (el formato nativo de YouTube: si descargas vídeos de este servicio muy probablemente lo hagas en este formato), ni formatos de vídeo como wmv, mod o avi, ni de música como MP3 o MID, ni tampoco los novedosos formatos de Microsoft versiones superiores a 2003 como docx, pptx, etc. así que si deseas ofrecer la descarga de este tipo de archivos en tus artículos de contenido tendrás que añadir manualmente estas extensiones al campo de texto Extensiones permitidas (hazlo tanto en mayúsculas como en minúsculas y separa las extensiones con comas, sin dejar ningún espacio entre ellas) y guarda en consecuencia los cambios realizados.

Archivo MP3 de música alojado en el servidor

Enlace a un documento PDF (o cualquier otro archivo) con el editor avanzado JCE

La limitación de tener que subir archivos primero al servidor mediante el Gestor Multimedia antes de crear el hipervínculo en el artículo se supera con la instalación del editor avanzado JCE. Es más, si tienes instalado el editor JCE muy probablemente dejes de utilizar el Gestor Multimedia ya que, entre otras mejoras, este editor incluye su propio navegador de archivos.

Visita nuestro artículo Las extensiones de Joomla 2.5 – el editor avanzado JCE en http://www.lasticenelaula.es/portal/index.php/joomla-25/curso-online-gratuito/721-las-extensiones-de-joomla-25-el-editor-avanzado-jce si quieres conocer las posibilidades de JCE e instalarlo en tu sistema Joomla

Y como verás a continuación los procesos para enlazar a archivos con este editor se simplifican enormemente.

Inicia un nuevo artículo en el sistema o edita uno ya existente. En nuestro caso vamos a seguir editando el artículo El corazón y su funcionamiento. En esta práctica en concreto vas a crear un enlace a un archivo PDF, pero puedes repetir los procedimientos que te vamos a indicar para cualquier otro archivo: documento de texto de Word o Writer, presentación de PowerPoint o Impress, hoja de cálculo, archivos de vídeo, música, flash, y todos aquellos que necesites. Las posibles limitaciones no las pondrá el editor JCE, ni tampoco Joomla, sólo el espacio disponible en tu servidor o su configuración.

Con el ordenador a cuestashttp://www.lasticenelaula.es/portal 5 Edita Sueiras

Joomla 2.5, la última versión del CMS Joomla

Nota – Tamaño máximo de archivo permitido

Si JCE no te permite subir el archivo por exceder el tamaño máximo permitido debes cambiar la configuración del editor para aumentar el tamaño de los archivos que es posible utilizar con el editor. En este caso acude al menú Componentes – Administración de JCE – Perfiles – Default y modifica los valores de máximos permitidos tanto en los parámetros del editor (sección Sistema de archivos) como en el parámetro del plugin (sección Navegador de archivos).

Soporte del propio sitio oficial JCE - http://www.joomlacontenteditor.net/support/tutorials/editor/item/setting-the-upload-file-size

Si la limitación no es de JCE sino de tu propio servidor (por lo general, la limitación suele estar de manera estándar en los 2 MB) la solución ya no es tan sencilla. Visita:

http://gespadas.com/upload-max-filesize

para ampliar la información y buscar posibles soluciones.

Volviendo al artículo y el enlace al documento PDF...

Dirígete al final del artículo y escribe Sistema vascular del corazón – Formato PDF - Descargar.

Haz un intro y escribe debajo

Fuente del archivo: http://www.texasheartinstitute.org/HIC/ProjH_Esp/upload/look_circulatory_vascular_sp.pdf

Edita el texto según tus preferencias.

Selecciona el texto Descargar (un doble clic sobre la palabra para hacerlo) y, a continuación, haz clic sobre el botón Insertar / Editar enlace.

Se muestra en pantalla la ventana Enlace. Observa el campo URL (siempre puedes copiar y pegar aquí la dirección URL del recurso alojado en Internet, en concreto la dirección que has escrito en el párrafo fuente del archivo y JCE buscará el archivo en dicho sitio). Ahora bien, lo habitual será que quieras utilizar tus propios archivos que tienes alojados en tu ordenador y que quieras subirlos al servidor para utilizarlos en el sitio Joomla.

En esta práctica hemos guardado el archivo look-circulatory_vascular_sp.pdf directamente en la carpeta Descargas de nuestra carpeta personal para utilizarla a continuación.

Nota

Respeta los derechos de autor. El documento que vas a enlazar pertenece a su legítimo propietario y sólo se utiliza a efectos educativos. Por tanto, al menos, para respetarlos no olvides citar la fuente de origen o su autor.

Con el ordenador a cuestashttp://www.lasticenelaula.es/portal 6 Edita Sueiras

Joomla 2.5, la última versión del CMS Joomla

Siguiendo con la práctica, suponemos, por tanto, que el documento PDF se encuentra alojado en tu equipo, te pertenece y quieres mostrarlo en tu sitio Joomla.

JCE nos lo pone muy fácil. Al lado de la caja de texto URL puedes ver el botón Añadir.

Haz clic en él para abrir el Navegador de archivos de JCE. Si has seguido nuestro tutorial sobre cómo insertar imágenes en tus artículos de contenido en Joomla 2.5 con JCE (ver aquí) te resultará familiar.

En primer lugar selecciona en la sección Carpetas, la carpeta concreta en la que vas a alojar el archivo con extension ppt. Observa como en la sección de la derecha se muestra el contenido de la carpeta seleccionada. Ahora acude a los botones de la barra de herramientas y haz clic en el botón Subir:

Esta acción abre en pantalla una ventana emergente. En ella puedes, mediante el botón Añadir, localizar el archivo a subir al servidor. Una vez localizado el botón Subir archivo te permite guardarlo en la carpeta seleccionada:

Con el ordenador a cuestashttp://www.lasticenelaula.es/portal 7 Edita Sueiras

Joomla 2.5, la última versión del CMS Joomla

Una vez finalizado el proceso de subida del archivo la ventana se cerrará y podrás seleccionar el nuevo archivo subido en el navegador de archivos para añadir su dirección URL relativa al mismo mediante el botón Insertar.

En la ventana de configuración del enlace verás la referencia al archivo en cuestión en el campo URL. Cambia finalmente la opción de Destino a Abrir en ventana nueva y escribe un Título descriptivo, si lo deseas, como texto informativo emergente al acercar el ratón al enlace.

No te preocupes del resto de opciones de la ventana. Haz clic finalmente en el botón Insertar y el enlace al archivo PDF ya se habrá configurado.

Aplica o guarda los cambios en el artículo, accede al Frontend de tu sitio y comprueba el comportamiento del enlace recién configurado.

Con el ordenador a cuestashttp://www.lasticenelaula.es/portal 8 Edita Sueiras