Curso online de Joomla: instala el editor JCE

27 07 2008

Joomla incorpora preinstalado un editor básico para que puedas crear y editar los contenidos que desees: es el llamado editor TinyMCE, un sencillo editor WYSIWIG que te permitirá formatear el texto como si estuvieses trabajando con un procesador de textos (de hecho, en muchos ocasiones, no notarás la diferencia, al utilizar un sistema de iconos muy similares a los que habitualmente utilizas en Ms. Word o en OooWriter (su alternativa libre integrada en OpenOffice.org).

Editor TinyMCE

Editor predeterminado TinyMCE en una instalación básica de Joomla

Probablemente será suficiente para tí utilizar el editor TinyMCE, sobre todo, a la hora de realizar las tareas más habituales que realizarás con textos: cambiar el formato de fuente, su tamaño, alinearlo, etc., pero… notarás sus carencias cuando utilices imágenes en tus artículos. Este editor no posee un buen gestor de imágenes que te permita no sólo incluirlas en tus artículos, sino también subirlas cómodamente al servidor, redimensionarlas, ajustar su tamaño y posición, añadir y configurar enlaces, etc. Para ello, no te quedará más remedio que utilizar el Administrador de imágenes que incluye Joomla en su instalación básica (lo hallarás en Inicio - Panel de Control) y preparar previamente la imagen con un programa de edición (como Gimp, por ejemplo) antes de subirla al servidor. Esto es muy incómodo, hasta complicado si no sabes manejar un programa de edición de imagen y, sobre todo, una pérdida de tiempo considerable.

Lo ideal es disponer de un editor que te permita realizar todas estas tareas directamente desde la propia edición en línea del artículo, es decir, utilizando las posibilidades que el propio editor incorpora. Por ello, te recomendamos que dediques unos minutos a instalar en Joomla un editor que incorpore estas funcionalidades.

Si acudes a la página oficial de extensiones para Joomla:

http://extensions.joomla.org/

y seleccionas en el menú Extension Categories, la categoría Edition y, a continuación, el enlace Editors, accederás a una amplia lista de posibles editores para instalar en tu Joomla (a fecha de este artículo, nada más y nada menos que 14 editores, algunos de ellos incluso comerciales, de pago).

Con este artículo aprenderás a instalar uno de ellos (repite el procedimiento con el que desees). El que te recomendamos es el mejor, sin duda, por su popularidad, por su amplio desarrollo y por ser uno de los más completos. Nos referimos al editor JCE, un editor WYSIWIG como el anterior pero que sí incorpora un excelente gestor de imágenes. Al ser una extensión muy completa, su instalación puede resultarte algo complicada, pero si sigues nuestras indicaciones no te resultará nada difícil. Ten en cuenta que el desarrollo del editor JCE está muy avanzado y muchos desarrolladores trabajan con él: esto trae consigo que existan muchas funcionalidades creadas para él como plugins específicos o packs de lenguaje diversos (entre ellos el español). Nosotros realizaremos una instalación básica: necesitarás descargar e instalar el plugin del editor, pero también un componente de administración ( paso imprescindible) y un archivo de idioma español, por si eso del inglés no es lo tuyo. ¿Te pones manos a la obra?

Paso 1. Localiza los archivos necesarios

En primer lugar, debes dirigirte a la página oficial del proyecto:

http://www.joomlacontenteditor.net/

Para descargar los archivos necesarios tendrás que registrarte: hazlo en la pestaña Login/Register. No te preocupes: el registro es completamente gratuito. Una vez finalizado el registro acude a la pestaña Downloads para acceder al gestor de descargas. Tanto si utilizas Joomla 1.0.1x como Joomla 1.5 el procedimiento de descarga es el mismo: selecciona la versión exacta de Joomla que tienes instalado y guarda en tu equipo los archivos referentes al plugin, al componente de administración y al pack de idioma español.

Para Joomla versión 1.0.x

  • Localiza el enlace JCE Editor Mambot/Plugin y haz clic sobre él. Selecciona la versión 1.0.1x y haz clic de nuevo sobre este enlace. Ahora busca en la siguiente pantalla el enlace JCE Editor Mambot 1.18 y guarda el archivo bot_jce_118.zip en una carpeta de tu ordenador.
  • Haz clic sobre el icono Downloads Home para volver al gestor de descargas. Localiza el enlace JCE Admin Component y haz, de nuevo, clic sobre él. Selecciona la versión 1.1.x haciendo clic sobre su entrada y busca en la siguiente pantalla la entrada JCE Admin Component 1.1.1. Haz clic en ella y guarda el archivo com_jce_111.zip en tu equipo.
  • Por último, vuelve de nuevo a la pantalla inicial de descargas y haz clic sobre JCE Language packs. Selecciona la entrada Language Packs for Joomla 1.1.x y guarda en tu equipo el archivo del idioma español (spanish language).

Ahora tienes tres archivos comprimidos zip convenientemente guardados en tu ordenador: no necesitarás descomprimirlos, Joomla se encargará de todo cuando comiences el proceso de instalación del nuevo editor.

Para Joomla versión 1.5

El proceso es exactamente el mismo, pero localizando en cada una de las entradas la versión Joomla 1.5.x.  De momento, no existe versión de idioma español, por lo cual sólo tendrás que localizar y descargar dos archivos: el archivo correspondiente al plugin y el archivo que se refiere al componente de Administración.

Al finalizar el proceso tendrás dos archivos comprimidos zip en tu equipo: plg_jce_150_rc1.zip (el plugin) y com_jce_150_rc4.zip (el componente de administración). No debes descomprimirlos, Joomla se encargará de todo a la hora de instalarlos.

Paso 2. Instala el editor

Llega el momento de realizar la instalación del nuevo editor. Lógicamente tendrás que loguearte en Joomla como Administrador (en la pantalla de acceso, teclea los datos del usuario admin) para realizar la instalación de extensiones en el sistema.

Instala el editor JCE en Joomla versión 1.0.1x

El orden que has seguido para descargar los archivos necesarios, es también el orden que debes seguir para instalar el nuevo editor. En primer lugar, instala el plugin y, a continuación, el componente de Administración. Observa cómo:

Instalar el plugin JCE.

  • Para instalar plugins o mambots en Joomla 1.0.1x tienes que acudir al menú Instaladores y seleccionar la entrada mambots.

instalar plugins

  • En la nueva pantalla haz clic sobre el botón Examinar para localizar el archivo del plugin descargado en el paso 1 (es el archivo bot_jce_118.zip) y guardado en tu equipo. Cuando su ruta de acceso aparezca en el campo de texto Paquete de archivo, haz clic en el botón Subir archivo e instalarlo.

instalar plugins

  • En breves segundos, el sistema te indicará que el plugin se ha instalado satisfactoriamente. Localiza al final de la página el enlace Continuar… para volver a la pantalla inicial de instalación.

Ahora toca instalar el componente de Administración de JCE.

  • Para instalar componentes en Joomla 1.0.1x tienes que acudir al menú Instaladores y seleccionar la entrada Componentes.

instalar componentes

  • El procedimiento es exactamente igual al anterior. Mediante el botón Examinar localiza el archivo descargado en el paso 1, es el archivo com_jce_111.zip e instálalo mediante el botón Subir archivo e instalarlo.
  • De nuevo espera unos segundos y el componente se habrá instalado sin problemas. Sal de la pantalla de instalación haciendo clic en el enlace Continuar… que localizarás en la parte inferior de la página.

Instala el editor JCE en Joomla versión 1.5

Como ya te hemos comentado en un artículo anterior, Joomla 1.5 ha simplificado mucho el proceso de instalación de extensiones pues ahora todo se hace desde un único punto: el menú Extensiones - Instalar / Desinstalar.

Joomla 1.5: gestor de extensiones

Por lo demás, el proceso es exactamente igual que el referido para las versiones 1.0.1x: instala primero el plugin y después el componente de administración, mediante idénticos procedimientos.

Paso 3. Configura el editor

En primer lugar, debes asegurarte que el plugin que acabas de instalar está habilitado. Quizá no sea el caso de este editor, pero este es un error muy frecuente a la hora de trabajar en Joomla: instalas algo y no puedes utilizarlo, y no sabes el porqué, simplemente el motivo es que puede no estar habilitado. Es muy recomendable que cuando realices cualquier instalación acudas al gestor correspondiente para comprobar si se encuentra o no publicado. Si tu versión de Joomla es 1.0.1x tendrás que acudir al menú Mambots - Administrador de mambots y comprobar que en el listado correspondiente la entrada JCE Editor Mambot se encuentra publicada (en la columna que corresponde a su derecha habrá un icono en verde). Si tu versión de Joomla es 1.5 acude al menú Extensiones - Gestor de plugins para comprobar que Editor - JCE 1.5.0 también lo está (icono de validación en verde).

La administración del editor se realiza desde su entrada en el menú Componentes (en ambas versiones de Joomla). En el caso de la versión 1.0.1x tendrás que utilizar la entrada JCE Languages para instalar el pack de idioma español. No es nada difícil hacerlo: en la pantalla JCE Language Manager haz clic sobre el botón Install y repite el procedimiento ya conocido para instalar el archivo: examina tu equipo y súbelo e instálalo. El lenguaje español aparecerá en el nuevo listado, haz clic en su botón de validación y, seguidamente, pulsa sobre el botón Publicar.

Joomla 1.0: editor JCE, instalar lenguaje español

Paso 4. Asigna el nuevo editor a los usuarios de Joomla

La instalación del editor ha finalizado pero, de manera predeterminada en la instalación, los usuarios del sistema utilizarán el editor preinstalado en Joomla, es decir, TinyMCE. Tendrás que indicar manualmente qué usuario utilizará el nuevo editor instalado y, en concreto, tú mismo como administrador del sistema.

Utilices la versión de Joomla que utilices el proceso es similar. Acude al Administrador de Usuarios (en Joomla 1.0.1x mediante el Panel de Control y en Joomla 1.5 a través del menú Sitio - Gestor de usuarios). Si acabas de realizar una instalación básica lógicamente sólo habrá un usuario en el sistema, el usuario Administrador. Haz clic sobre su nombre para acceder a la configuración del usuario y localiza el apartado Parámetros para especificar el editor que utilizará, a partir de ahora, el usuario. De la lista selecciona el editor JCE y haz clic finalmente sobre el botón Guardar.

Editor JCE para el usuario Administrador

Selección del editor para el usuario Administrador en Joonla 1.0

Editor JCE para el usuario Administrador

Selección del editor para el usuario Administrador en Joomla 1.5

Comprueba ahora que el nuevo editor se encuentra ya disponible. Por ejemplo, escribe un nuevo artículo y fíjate que ahora el editor JCE se muestra en la pantalla. Prueba con alguno de sus iconos y experimenta un  poco. En un futuro artículo te indicaremos cómo utilizar el gestor de imágenes que lleva incorporado.

Editor JCE



Joomla 1.5: una grata sorpresa

26 07 2008

Joomla, potente gestor de contenidos CMSLlevaba tiempo con ganas de probar la nueva versión 1.5 de Joomla, y ahora que estoy de vacaciones, he decidido instalarla.  Apenas un par de días y ya tengo un buen listado de motivos para quedarme con ella. He de reconocer mi reticencia inicial, en parte, porque la versión 1.0 que manejaba satisfacía completamente mis necesidades en esto de la publicación Web (y para qué dedicarle tiempo, pura comodidad)  y, además, porque no quería arriesgarme a no poder utilizar algunas de las extensiones que uso habitualmente. Pero, lo dicho, aprovecho estos momentos para probar nuevas opciones y le llegó el turno a Joomla.

Lo primero que me sorprendió gratamente fue el proceso de instalación. Tan simple y en tan breves pasos como en la versión anterior, sin diferenciarse en el proceso prácticamente en nada: rápido y sencillo, aunque eso sí, con una cierta mejora en su apariencia estética y un par de botones que simplifican si cabe, aún más, el proceso de instalación.

Joomla 1.5: instalación

Pero las mejoras se aprecian aún más cuando iniciamos tareas de administración con la nueva versión. Lo primero que destaca es el rediseño en la navegabilidad por el sistema, mucho más claro y más usable. Ya me había acostumbrado a navegar por los diferentes menús de Joomla 1.0.15 para realizar distintas tareas, como si fuera dando saltos de uno a otro, cuando compruebo con un cierto asombro que Joomla 1.5 agrupa desde un mismo elemento de menú la gestión e instalación de extensiones: un único apartado para instalar y desinstalar cualquier tipo de extensión y un nuevo reagrupamiento de la gestión de las extensiones que hacen que el manejo sea ahora mucho más cómodo y rápido. ¡Olé!

Joomla 1.5: nueva gestión de las extensiones

También me había acostumbrado a acudir al Panel de control o a manejar las entradas de menú según la tarea que iba a realizar con Joomla, casi de memoria (en esto Joomla 1.0.x, de vez en cuando, nos lía algo). En cambio, con Joomla 1.5 puedo hacer prácticamente todo desde el menú de navegación, mis visitas al Panel de control se han hecho más bien escasas. ¡Menuda comodidad!

Reconozco que también me hacía un pequeño lío con la instalación de mambots, plugins o como quisieran llamarlo y, en más de una ocasión, he tenido que comprobar fehacientemente qué es lo que estaba instalando. Con Joomla 1.5 se acabó la confusión: instalaremos plugins y gestionaremos plugins. Y el acceso a los mismos es mucho más rápido al poder filtrarlos por tipo de plugin o por su estado (publicado o no). ¡Clarito, muy clarito!

Tampoco utilizaba en demasía la división de la pantalla de edición de contenidos en dos partes diferentes. Pero con Joomla 1.5 esto se ha simplificado para bien. Una sola pantalla para editar el artículo permite ampliar el campo de visualización y es mucho más práctica, un sencillo botón en la parte inferior permitirá dividir el texto de una manera muy simple: incorporará una línea horizontal para marcar la separación entre el texto introductorio y el resto del artículo. Además, se mejora también la visualización de los parámetros de configuración de los artículos al incluir paneles deslizantes frente a las clásicas pestañas de las versiones anteriores. ¡Qué modernidad!

En alguna ocasión, a la hora de crear los contenidos para Joomla he tenido que dedicar un cierto tiempo a decidir qué tipo de contenido iba a crear según la finalidad que perseguía escribiéndolo: la diferenciación entre artículo de contenido estático y artículo de contenido dinámico me obligaba a ello. Y ha habido varios momentos en los que, o he tenido que redefinirlos o he tenido, incluso que borrarlos o eliminarlos porque no se ajustaban a lo que buscaba. Joomla 1.5 simplifica mucho estas opciones y no sólo suponen un cambio de nombre (ahora todo se llama artículo): es posible realizar artículos sin clasificar, sin atribuir a una determinada categoría o sección (similar a lo que antes eran los artículos de contenido estático) pero con la opción ahora de asociarlos a una categoría o sección con posterioridad si fuese necesario. ¡Muy útil!

También se ha simplificado la creación y gestión de menús, algo que los administradores más noveles agradecerán: de un listado amplio y, a veces, confuso en las versiones 1.0.x se ha pasado a una especie de árbol con una lista mucho más clara y simple que, además, ofrece ayuda visual sobre el tipo de menú que se está creando. Si en versiones 1.0 los errores en la creación de menús pasaban por eliminarlos irremediablemente, en Joomla 1.5 un simple botón nos permitirá cambiar el tipo de menú y escoger otra de las opciones disponibles. ¡Bravo, bravísimo!

Joomla 1.5: nueva gestión de menús

En fin, seguro que me dejo en el tintero muchas otras mejoras que iré comprobando a medida que vaya familiarizándome con esta versión, pero con las ya mencionadas…

¡Definitivamente, me quedo con Joomla 1.5!



Joomla necesita tu apoyo

21 07 2008

Joomla, potente gestor de contenidos CMSDesde el 14 de Julio y hasta el 31 de Agosto se encuentra abierto el plazo al Third Annual Open Source CMS Award Launched, competición para ganar el codiciado título al mejor CMS de código abierto del año en curso. Lograr este premio para Joomla sería una excelente recompensa al esfuerzo de la comunidad de código libre que la sustenta además del premio en metálico que lleva asociado.

¡Apoya a Joomla y nomínalo como Mejor CMS de Código Abierto y Mejor CMS de Código Abierto realizado en PHP!

¡Difunde la noticia!. ¡Apoya el software libre!



Curso online de Joomla: añadir un nuevo contenido al sitio

16 06 2008

Es muy probable que esta sea la operación que realizarás con mayor frecuencia en Joomla. Ya te hemos comentado que Joomla es un C.M.S, es decir, un Sistema de Gestión de Contenidos que, ante todo, se preocupa y ocupa de que puedas añadir contenido con relativa simpleza en tu sitio Web. Y en esto radica una de las ventajas de utilizar Joomla como herramienta de publicación Web: olvídate de pasar horas y horas ocupándote del diseño de tu sitio, de añadir botones o menús de navegación, de diseñar tablas para que el contenido que añadas a la Web no “se descoloque”… Joomla te lo pone muy, muy fácil… sólo decide qué contenido quieres incluir y simplemente teclea.

Una puntualización, para Joomla contenido es todo… no sólo texto, sino también imágenes, archivos de vídeo, animaciones, audio o presentaciones. Así que cuando te decimos que Joomla te permitirá añadir con suma sencillez contenido te estamos indicando que la misma sencillez la encontrarás para añadir todos estos elementos multimedia.

Para incluir contenido en Joomla utilizarás un editor de textos WYSIWIG. Si estás familiarizado con la introducción de artículos en blogs, por ejemplo, el editor de Joomla te resultará muy familiar, si lo estás con procesadores de texto tipo Microsoft Word, Works y OpenOffice tampoco notarás mucha diferencia con este tipo de editores (incluso alguno de sus botones son increíblemente parecidos). Por tanto, no tienes excusa para comenzar a añadir contenido a tu sitio Web.

Joomla, por defecto, trae incorporado de serie en una instalación básica un editor llamado TinyMCE (libre y de código abierto), un editor utilizado por una gran variedad de gestores de contenidos además de otras herramientas de publicación Web como WordPress, muchos sistemas blogs o wikis.

Editor TinyMCE

Nota. Por lo general, en todos estos sistemas que te hemos indicado, dispondrás de dos editores diferentes: uno visual, caracterizado por filas y filas de botones o iconos, que te permitirá formatear el texto sin necesidad de conocer código HTML (el código empleado inicialmente en la publicación Web), y otro editor de código HTML, sin botones ni etiquetas, que te permitirá establecer el formato desde el código fuente del documento. El primero deberás utilizarlo casi obligatoriamente si eres un principiante en esto de publicar en Internet y desconoces completamente el lenguaje HTM; el segundo, es muy probable que lo utilices con frecuencia si eres un usuario avanzado y deseas un mayor control sobre el código fuente.

Por cierto, TinyMCE no es el único editor posible que podrás utilizar en Joomla. Existen otros que podrás instalar en el sistema. Es más, aunque TinyMCE es un buen editor te recomendaremos más adelante que instales otro diferente en Joomla (si estás utilizando una versión Joomla 1.0…). La razón, en este caso, estriba en que la gestión de imágenes con este editor no es precisamente su fuerte (y probablemente todo el contenido que incluyas en Joomla - a partir de ahora le llamaremos artículos-  irá acompañado de una o varias imágenes). TinyMCE, en estas versiones de Joomla (recuerda que estamos utilizando la versión 1.0.13), no te permite, por ejemplo, subir directamente nuevas imágenes al servidor a la vez que construyes un nuevo artículo (habrás de hacerlo previamente o bien por FTP o bien con un gestor de archivos de imagen instalado en el sistema) y esto hace que utilizar este editor no sea excesivamente cómodo.

A pesar de esta limitación, y con el objeto de que te familiarices con los editores de texto en Joomla y con la forma de añadir artículos al sitio Web, te indicamos en este artículo como incluir texto en Joomla utilizando este editor. Más adelante, realizarás la instalación de un nuevo editor con mejores funcionalidades y con un gestor avanzado de imágenes que utilizarás sin problemas pues ya estarás familiarizado con la manera de añadir artículos al sistema y, sobre todo, con algunos de sus iconos para editar el formato del texto.

Añadir un nuevo contenido al sitio Web

Vete, en primer lugar, al Panel de Control de Joomla (si no estás en él, haz clic en el menú Inicio para localizarlo). Escoge la opción del botón Añadir un nuevo artículo del Panel de Control.

añadir nuevo art�culo

Se abrirá una nueva página dividida en varias secciones, que te describiremos a continuación:

Una botonera en la parte superior con botones que realizan diferentes funciones:

Editor TinyMCE, botonera

  • Previsualizar: Previsualiza cómo ésta quedando el contenido del artículo que estás realizando.
  • Subir: permite subir una imagen al servidor, concretamente a la carpeta stories que localizarás en la ruta images/stories de Jooma. Por lo general no utilizarás esta opción sino que acudirás al Administrador de imágenes, entrada que localizarás en el menú Sitio, porque necesitarás controlar el lugar exacto donde ubicar tus imágenes, sobre todo, si tienes muchas carpetas diferentes para distintos usos.
  • Guardar: guarda los cambios que vayas realizando al editar el artículo
  • Aplicar: aplica los cambios realizados
  • Cerrar: Cancela los cambios y cierra el editor
  • Ayuda: muestra la pantalla de ayuda de esta página.

La parte izquierda de la pantalla la ocupa el editor de artículos, en el que verás el espacio central en el que podrás teclear el texto del artículo a realizar y varias filas de botones de edición del contenido (algunos te recordarán a los iconos propios de un procesador de textos). En la parte derecha de la pantalla verás las opciones de publicación del artículo con diversos parámetros que podrás seleccionar.

nuevo art�culo

Observa los iconos presentes en el editor TinyMCE. Si pasas el ratón lentamente por encima de ellos te mostrará para qué sirven y conocéras intuitivamente su utilización si estás familiarizado con la edición de textos a través de los procesador de textos, como Word o Writer.

Antes de escribir el contenido del artículo deberás incluir un título al mismo en el campo Título (el que se verá como título del artículo en diferentes secciones de la web), un alias (procura repetirlo, para facilitarte la tarea) y asignarlo a una sección y categoría (obligatoria la jerarquización de contenidos en sección - categoría - artículo de contenido, y por este orden, te lo explicaremos más adelante). Como ejemplo concreto vas a crear un nuevo artículo en el que expliques la oferta educativa de tu centro, tal y como ves en la captura de pantalla siguiente:

nuevo art�culo

Hemos asignado el artículo a una de las secciones ya preestablecidas por Joomla como ejemplo en la instalación: Noticias y a la categoría Últimas noticias, pero podrías haber asignado este artículo a cualquier sección y categoría del listado (o a cualquier sección y categoría que hubieras creado previamente). Con respecto al texto hemos utilizado las diversas opciones que nos permite la caja Formato del texto para ampliar su tamaño y además hemos hecho un listado tipo viñetas.

Nota. Joomla  se integra perfectamente con tu procesador de textos. Puedes preparar el texto previamente en Word o en OooWriter, por ejemplo, y luego copiar - pegar su contenido al editor de Joomla (lo que incluye también todas sus características de formato).

Observa ahora la parte derecha de la pantalla, unos cuadros informativos distribuidos en pestañas te permitirán controlar el contenido del artículo y algunos de sus parámetros de publicación:

Por ejemplo, en la pestaña Publicación:

  • Ver en la página inicial. Te permite posicionar el artículo, si está validado, en la página de inicio de tu sitio Web.
    Publicado: Si está validado el artículo estará publicado y se mostrará en la Web.
    Nivel de acceso: Puedes hacer que el artículo que estás realizando pueda ser accesible públicamente - public o sólo para usuarios registrados - registered. Así se simple es limitar el acceso a un artículo a quien desees.
    Autor Alias: si deseas que un nombre concreto aparezca como autor del artículo escríbelo aquí.

Las otras opciones son bastante intuitivas, compruébalo por tí mismo: podrás cambiar - editar la fecha de creación del artículo, ver los hits de visualizado del artículo tras su publicación, etc.

Edita o formatea el nuevo artículo

Como ves en las imágenes siguientes, he escrito un artículo de prueba para que aprecies los cambios que puedes realizar con alguno de los iconos presentes en el editor TinyMCE.

  • Si quieres trabajar con los márgenes, selecciona el texto y haz clic en uno de los iconos para alinear el texto situados en la fila superior; por ejemplo Alinear centrado: De esta misma forma puedes alinear el texto a la izquierda, alinearlo a la derecha o alinearlo justificadamente en los márgenes (seleccionarel texto y hacer clic sobre el icono correspondiente, así de simple).

alinear texto

  • Para formatear el texto en negrita, cursiva, subrayado o tachado, selecciona el fragmento de texto que desees y haz clic sobre la N, K, S o ABC, respectivamente.

editar texto

  • Puedes también cambiar el tamaño de la fuente seleccionando uno de los formatos preestablecidos.

editar texto

  • O puedes incluir listas ordenadas e insertar viñetas haciendo clic sobre los iconos correspondientes.

editar texto

Como ves, aunque sencillo, TinyMCE incorpora iconos que te permiten realizar tus nuevos artículos con una cierta apariencia y estética relativamente vistosa. Prueba a añadir nuevos artículos asignándolos a las secciones y categorías preestablecidas de Joomla y a editar el texto utilizando los iconos señalados.

Como has comprobado tras la lectura del artículo, añadir texto a Joomla es sencillo. Para visualizar el nuevo artículo que acabas de crear tendrás que seguir los siguientes pasos:

  1. Visualizar el sitio Web mediante Sitio - Vista previa - En una nueva ventana.
  2. Hacer clic en el botón Noticias que hallarás en el menú de navegación principal.
  3. Hacer de nuevo clic en la categoría Últimas noticias y, a continuación, en el nombre del artículo que has creado.

Esto te indica algo muy habitual en Joomla: puedes crear un nuevo artículo pero puedes no verlo en tu sitio Web. Necesitarás siempre asignarlo a una sección, a una categoría y, además, lo más probable es que necesites un enlace en un menú de navegación para poder acceder a él. Y puede ser también que te hayas olvidado de publicarlo (por defecto, los nuevos artículos se publican siempre) o que su acceso esté limitado a ciertos usuarios y no sea público. Como aprecias las opciones de configuración de Joomla son muy variadas, lo que hace que esta herramienta sea excepcionalmente potente.



Curso online de Joomla: el aspecto de la Web, las plantillas

27 05 2008

El aspecto de tu sitio Web realizado en Joomla se encuentra prediseñado gracias a la utilización de plantillas. Por defecto, Joomla se instala con un número muy limitado de estos templates pero podrás descargar muchos gratuitamente desde Internet para mejorar el diseño de la Web. En realidad, los sitios Web realizados con Joomla se preocupan más del contenido, por ello es un Gestor de contenidos, que por el diseño (a veces, parecen ser iguales en su estética). Pero esto no es óbice, para que puedas modificar y editar la plantilla que estás utilizando y 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. Busca plantillas gratuitas y preferentemente bajo licencias Creative Commons o GNU/GPL, o si no, puedes incurrir en alguna ilegalidad o irregularidad. Y, como protección del derecho de autor, mantén el nombre del creador al final de la página inicial.

La gestión de las plantillas se realiza desde el menú Sitio – Administrador de
plantillas – plantillas del sitio
.

gestión de las plantillas


Administrar las plantillas ya instaladas

Vas a realizar una primera aproximación a la utilización de plantillas en Joomla. Para ello accede a la pantalla inicial de Administración con tus datos de acceso y haz clic en el menú Sitio – Vista previa – En una nueva ventana para tener acceso simultáneo al Backend y al frontend de Joomla. En la pestaña de Administración haz clic sobre Sitio – Administrador de plantillas – plantillas del sitio

Aparecerá una tabla con todas las plantillas preinstaladas. La plantilla actual, la que está usando en este momento tu sitio Web, muestra una marca verde junto a la columna Predeterminado.

plantilla predeterminada

Si quieres mostrar la vista previa de una plantilla, pasa el puntero del ratón sobre el nombre de la misma. Aparecerá una miniventana con una imagen en miniatura del aspecto de la plantilla.

Para seleccionar otra plantilla diferente:

  • Activa la casilla correspondiente a la plantilla deseada haciendo clic en el botón situado a la izquierda de su nombre. Por ejemplo, madeyourweb.
  • Haz clic en el botón de la parte superior Defecto.
  • Vete a la pestaña en la que se muestra el Frontend y recarga la página (si utilizas Firefox puedes también pulsar la tecla F5). Ahora el aspecto de la página ha cambiado.
  • Repite el procedimiento con la otra plantilla prediseñada: spanishred. Ahora el diseño de tu página vuelve a ser diferente.

Si lo deseas puedes aplicar la plantilla únicamente a determinadas páginas y no a todo el sitio. Para ello, cuando selecciones una plantilla no hagas clic en Defecto, sino en el botón Asignar. Por ejemplo, haz clic sobre la plantilla madeyourweb y, a continuación, en el botón Asignar. En la nueva ventana, selecciona la página o páginas en las que deseas aplicar esa plantilla, por ejemplo, mainmenu – noticias y deja la plantilla rhuk_solarflare_ii por defecto. Observa los cambios en el Frontend: haz clic en el menú noticias y verás que el diseño es otro. Para quitar la asignación repite el procedimiento y selecciona la entrada Ninguno.

NOTA. ¡Asegúrate de que la plantilla Rhuk_Solarflare_II es la activa por defecto para la siguiente práctica, pues vas a cambiar el aspecto de su logotipo!.


Ajusta la imagen de cabecera a tu centro

Si estás realizando la Web de tu centro es evidente que te interesará poner como imagen de cabecera de la página una de tu propia creación, más acorde con la representación de tu IES o colegio. No es difícil hacerlo aunque necesitarás cierta soltura a la hora de trabajar con un programa gráfico (te recomendamos PhotoFiltre, por su sencillez de uso, aunque existen otros más potentes como El Gimp, libre y gratuito, Photoshop, comercial y de pago, etc).

1. Recuperar el logotipo original

Debes de tener en cuenta que este logotipo depende de la plantilla que estés utilizando. En primer lugar, tendrás que determinar dónde se encuentra. Para ello visualiza el Frontend de tu sitio Web y haz clic con el botón derecho del ratón en el logotipo en cuestión. Tendrás que seleccionar las entradas Propiedades o Ver imagen de fondo (las capturas de pantalla están realizadas utilizando Firefox como navegador). En el caso de la plantilla rhuk_solarflare_ii, que es la que está utilizando en este momento el sitio, selecciona Ver imagen de fondo. La imagen del logotipo se abre. Ahora haz clic con el botón derecho del ratón y selecciona la entrada Propiedades.

cabecera de la plantilla

Observa la información de la imagen:

  • Se localiza en la ruta templates/rhuk_solarflare_ii/images
  • Se llama header_short
  • Su formato es jpg
  • Su tamaño 635 x 150 píxeles

2. Editar o crear el nuevo logotipo

Tienes dos posibilidades a la hora de editar este archivo:

  1. Descargarlo, por FTP, y “retocarlo” con un programa de edición de imagen
  2. Crear una imagen nueva con el tamaño que tiene el original 635×150, en este ejemplo concreto. Cuando la guardes tendrás que llamarla exactamente igual que el original (mismo nombre, mismo formato jpg) y “subirla” por FTP a su ubicación original reescribiendo el archivo.

Instala una nueva plantilla

Visualiza nuevas plantillas para Joomla en Internet

Si buscas plantillas gratuitas para Joomla, no te preocupes, las hay a miles. Podrás localizarlas directamente mediante el buscador Google pero lo más recomendable es acudir a las páginas especializadas en plantillas Joomla. Y, sin duda, la mejor es Joomlademo, una página con más de 1600 plantillas, en alemán, pero que utilizarás sin problemas con nuestras indicacione.

JOOMLADEMO.DE http://www.joomlademo.de

Para seleccionar una plantilla, hazlo a través de la lista desplegable del centro de la página y a continuación haz clic en el botón de la derecha Auswahlen para visualizar cómo cambia el aspecto de la página.

Joomlademo, visualizar plantillas para Joomla

¿No quieres perder el tiempo ni sabes cuál elegir entre tantas plantillas? Depende claro está, de tus gustos y preferencias pero selecciona 247portal, ccportal, derya (originalísimo diseño), silver_flare_ex, sunshine, rhuk_solarflare_iii o vista_aero_template, para visualizar diferentes tipos de plantillas a dos columnas, a tres columnas, ocupando toda la pantalla, etc.

Descarga una nueva plantilla

En el site anterior visualizas la plantilla elegida pero no puedes descargarla. Para ello, tendrás que recurrir a otra página alemana igual de intuitiva en su navegación.

JOOMLAOS.DE http://www.joomlaos.de

Lo primero que debes hacer es anotar el nombre de la plantilla que te interesa. En este ejemplo hemos elegido 247portal. En la página inicial de Joomlaos.net vete al cuadro de diálogo de búsqueda y teclea en él el nombre de la plantilla que has elegido: en este caso, 247portal. Haz clic después sobre suche! - Buscar.

Joomlaos.de: descargar una plantilla

Aparecerá en pantalla un listado de entradas localizadas con el término escrito, entre ellas localizarás la referida a la plantilla. Para esta práctica vas a seleccionar el pack 247 Portal color-Pack, un paquete o carpeta comprimida que incluye todas las variedades de colorido de la plantilla 247Portal (para que en el aspecto de tu web predomine el rojo, violeta, azul o marrón, por ejemplo). Observa la posibilidad de descarga del pack mediante el enlace Download 247 Portal color-Pack – Descarga

Joomlaos.de: descargar una plantilla

Haz clic sobre el enlace Download de nuevo en la siguiente pantalla:

Joomlaos.de: descargar una plantilla

Y finalmente guarda el archivo comprimido zip en tu equipo, en una carpeta de tu elección. Este pack incluye varias plantillas, por tanto, descomprímelo para acceder a las distintas carpetas zip que incluye de las diferentes variedades de la plantilla.

Joomlaos.de: descargar una plantilla

En ciertos casos, en la página de Joomlaos.de te encontrarás que, al hacer clic sobre el enlace relativo a la plantilla escogida, te dirige a una página similar a la que ves a continuación:

Joomlaos.de: descargar una plantilla

Se refiere al acuerdo de licencia que tendrás que aceptar (en el caso anterior, una licencia Creative Commons) activando la casilla junto a Ich bin mit den Lizenzbestimmungen einverstanden. Sólo entonces se te ofrecerá el archivo Zip para su descarga al que accederás haciendo clic sobre el botón Download, ahora activo.

Instala la nueva plantilla descargada

Para instalar la nueva plantilla que acabas de descargar deberás seleccionar en el menú Instaladores, la opción Plantillas – Sitio.

instalar una nueva plantilla

A continuación, haz clic en el botón Examinar y localiza el archivo Zip de la plantilla elegida en tu disco duro (no es necesario que lo extraigas previamente), seléccionalo y haz clic en abrir.

instalar una nueva plantilla

Una vez localizado (la ruta al archivo aparecerá en el campo Paquete de archivo), haz clic sobre Subir archivo e instalarlo. Joomla se ocupará de colocar los archivos en su lugar correspondiente e instalarlos, sin requerir tu intervención. Si todo funciona correctamente, aparecerá una página en la que te informará de que la instalación ha sido satisfactoria.

Encontrarás la nueva plantilla en el Administrador de plantillas (recuerda Sitio - Administrador de plantillas - Plantillas del sitio) y desde allí podrás configurarla como plantilla estándar (por Defecto, tal y como te hemos mostrado en un paso anterior).

instalar una nueva plantilla

Sólo te queda comprobar que, en efecto, la nueva plantilla 247portal-red tiene el diseño que te gusta para tu sitio Web recargando de nuevo el Frontend de tu sitio Web.

Nota. No todas las plantillas disponen de todas las posiciones y de todos los módulos que has visto en una de las plantillas preinstaladas. Puede faltar algún menú, algún módulo como la encuesta o la barra de navegación: es el diseñador de la plantilla quien decide qué posiciones coloca en la plantilla o puede estar en otro lugar inesperado. Tendrás que entonces arreglarlo manualmente: visualiza la posición de los módulos en Sitio – Vista Previa – En línea con las posiciones, accede al Gestor de módulos y coloca los módulos no visibles en las posiciones disponibles o modifica la posición de aquellos que no te gusta su ubicación. O si conoces el lenguaje PHP podrás modificar completamente el código de la plantilla para adaptarlo a tus necesidades o diseñar una plantilla propia. Pero esto último escapa a las pretensiones de este curso online.


Como puedes comprobar, tras la lectura de este artículo, Joomla es una herramienta que te permitirá olvidarte de muchas horas de trabajo en el diseño de la Web: desarrolladores y voluntarios en el proyecto te ofrecen diseños para tu sitio Web ya listos, para todos los gustos y colores, de manera completamente gratuita. Una vez que decidas el aspecto del sitio Web de tu centro, con estos sencillos pasos podrás volver a cambiarlo siempre que lo desees e incluso Joomla te permitirá que el visitante de tu sitio utilice el diseño que prefiera. A partir de ahora, sólo tendrás que preocuparte de llenarlo de contenidos.

Descarga en formato PDF, Capítulo 3, manual de Joomla para sitios educativos
 Controlando el diseño de tu sitio Web: Descargar