Curso online de Joomla: los menús del sitio Web (I)

24 08 2008

Joomla, excelente CMS de código abiertoEn los artículos anteriores has visto como administrar y publicar contenidos y como crear y administrar categorías y secciones. Pero, publicar no significa siempre “hacer visible”. Si bien es cierto que los visitantes de tu sitio web podrán buscar contenidos mediante la función de búsqueda, ¿quién se molestará en buscar algo que no se puede ver?. En otras palabras, falta algo esencial: los apuntadores a los contenidos, es decir, los menús que permitan a los usuarios navegar por las distintas secciones y sus distintos artículos para acceder a los contenidos del sitio.

El diseño de los menús es básico a la hora de diseñar una Web pues serán éstos los que facilitarán la accesibilidad y la navegabilidad por sus contenidos. Por tanto, debes tener muy claro los menús de navegación que incluirás en la Web de tu centro. En Joomla, en realidad, los menús son un tipo particular de módulos cuya configuración se realiza en un apartado específico. La potencia y versatilidad de tu sitio Web va a depender en buena medida de una buena configuración de los menús porque podrán suponer enlaces a contenidos o artículos de tu sitio pero también enlaces a componentes para potenciar determinados servicios e incluso enlaces a sitios web externos.

La instalación base de Joomla viene con diversos menús ya configurados con varios items o enlaces en cada uno de ellos para mostrarte distintas posibilidades de configuración. Pero además de poder editar estos menús, podrás crear con Joomla todos los menús que necesites. Incluso podrás mostrar diferentes menús según la sección o página por la que navegue el usuario, como verás más adelante.

ejemplo de menú de navegación ejemplo de menú de navegación ejemplo de menú de navegación

Ejemplos de menús de navegación de sitios web realizados con Joomla


El administrador - gestor de menús

En la instalación base de Joomla existen ya creados diversos menús, cuatro específicos que localizarás en todas las versiones de Joomla y dos más para Joomla 1.5:

  • Main Menu (mainmenu): el Menú Principal del sitio y el más importante. Está ubicado, de forma predeterminada, en la posición left - izquierda y es fácilmente reconocible. Lo que se encuentre como primer elemento de este menú es lo que se mostrará en la página principal.
  • Other Menu (othermenu): Menú adicional, aparece justamente debajo del anterior, pero sín título.
  • User Menu (usermenu): Menú de usuario. Es un menú muy especial porque sólo aparece cuando un usuario se registra e ingresa en el sistema con su nombre de usuario y contraseña.

menú de usuario

  • Top Menu (topmenu): menú horizontal que suele mostrarse en el encabezado dentro de la posición top, pero que no se verá en todas las plantillas, porque no todas tienen definida dicha posición.

Además, en la versión 1.5 Joomla incluye otros dos menús:

  • Páginas de ejemplo (ExamplePages): un menú que permite la navegabilidad hacia páginas de demostración de Joomla para que aprecies las posibilidades de la creación de menús.
  • Concepto clave (KeyConcepts): menú que la instalación básica de Joomla destina al enlace con ciertos artículos de ayuda.

Puedes visualizar y acceder a todos ellos desde el Administrador de menús que encontrarás en el Panel de Control en la versión Joomla 1.x.0 o bien desde el llamado Gestor de menús del Panel de Control o bien desde Menús - Gestor de menús en la versión 1.5.

Sea la versión de Joomla que utilices, Joomla te mostrará un listado con todos los menús creados hasta el momento en una misma pantalla:

Joomla 1.5: gestor de menús

Observa la información que te muestra la pantalla:

  • La lista de menús: de momento, los preestablecidos por Joomla. Irá aumentando o no en función de los menús que vayas creando.
  • Un icono que te permite el acceso a las diferentes entradas de menú existentes en cada uno de ellos. Si haces clic sobre él, accederás directamente a los puntos o ítems de menú correspondientes. Podrás entonces eliminarlos, crear nuevos elementos o editarlos, es decir, entrarás en modo de edición de los ítems o puntos de menú que lo constituyen.
  • Las columnas que te indican si están publicados o no: recuerda que, en realidad, cada menú que crees es un módulo en Joomla (y su administración se realizará desde el Administrador / Gestor de módulos). Puedes crear un nuevo menú pero si no se encuentra publicado no será visible en tu sitio Web. Has de tener esto en cuenta para evitar posibles errores en el diseño de tu Web.
  • Una columna específica papelera que te indica los puntos de menús que has creado en algún momento pero que has eliminado posteriormente (Joomla incluye una papelera especial para gestionar los menús eliminados).

Editar los menús existentes

Para tu sitio Web seguramente tendrás que crear nuevos menús o editar los menús ya existentes. Son imprescindibles para visualizar los contenidos que vayas creando, tanto artículos de contenido asignados a las diferentes secciones y categorías, como Contenidos estáticos (en Joomla 1.x.0) o artículos sin asignar a secciones y categorías (en Joomla 1.5) y te servirán, también para enlazar con sitios Web externos o con componentes de Joomla que realizan diferentes tareas.

Por el momento, no vas a crear un menú nuevo sino que vas a editar uno de los menús esenciales de Joomla, el mainmenu, el único menú que no podrás eliminar, ya que se utiliza para el correcto funcionamiento de Joomla.

En Joomla 1.x.0:

Accede al Administrador de menús desde el Panel de Control. En la nueva página haz clic sobre el icono de la columna Artículos del menú situado inmediatamente a la derecha del nombre del menú mainmenú. Observa que aparece ahora en pantalla un listado con los llamados ítems, puntos o entradas de menú.

menú mainmenu - puntos de menú

La información que se muestra en pantalla es muy intuitiva: el nombre de los puntos de menú, tal y como los visualizarás en los menús de navegación del sitio, si se encuentran publicados o no, el orden en el que se mostrarán (si los seleccionas y haces clic sobre las flechas abajo y arriba de la columna ordenar los cambiarás de orden), el acceso público o restringido al punto de menú y el tipo de menú establecido (observa los diferentes tipos que se muestran, Joomla posibilita múltiples opciones que verás más adelante).

Para eliminar alguno de estos puntos sólo tendrás que seleccionarlos y hacer clic en el botón Basura. Por ejemplo, elimínalos todos menos Inicio y Contactar. Recarga el Frontend para ver el nuevo aspecto del menú en el sitio Web: recuerda, previsualiza el sitio en Sitio - Vista previa o haciendo clic en el enlace Previsualizar que localizarás en la parte superior.

eliminar puntos de menús

En Joomla 1.5:

Los procedimientos son similares. Accede a la gestión de los menús desde el Gestor de menús que localizarás en el Panel de Control o desde la entrada Menús - Gestor de menús. Accede a los ítems de menú de cada uno de ellos y, tal y como te mostramos en el punto anterior, selecciona aquellos ítems que deseas eliminar haciendo clic, a continuación, sobre el icono Papelera. Elimina de esta manera todas los puntos de menú excepto Inicio, el establecido como Predeterminado (observa la estrella amarilla a su derecha) y Servidor de noticias. Recarga el Frontend para visualizar el aspecto del menú en el sitio Web tal y como ya sabes.


Cambiar el nombre de los puntos de menú

Independientemente de la versión de Joomla que utilices cambiar el nombre de un punto de menú es muy sencillo. Simplemente haz clic en el nombre del punto de menú que deseas modificar y en la nueva página que aparece cámbialo en el campo de texto Name (versión 1.x.0) o Título (Joomla 1.5) tecleando el nuevo nombre elegido. Recarga el Frontend para visualizar el cambio de nombre. ¡Así de simple!

Nota. Es muy recomendable que a la hora de escribir / teclear alias de artículos, secciones, categorías o menús no uses tildes ni dejes espacios en blanco: utiliza en su lugar el guión entre palabras para escribir alias largos.


Crear un nuevo punto de menú

A partir de ahora abordaremos cómo crear un nuevo punto de menú en el seno de un menú ya creado, de los preestablecidos por Joomla, como es el mainmenu. Es muy posible que ésta sea una tarea relativamente habitual en Joomla para un administrador del sitio por lo que te recomendamos prestes especial atención a este apartado. Además, la creación de menús en Joomla no es demasiado intuitiva y ofrece tantas opciones y posibilidades de combinación que puede resultarte inicialmente algo complicado, sobre todo, si estás utilizando una versión 1.x.0 de Joomla. Toda la gestión de menús ha sido revisada y modificada en la versión 1.5 para facilitar al administrador su creación y edición y es, en este apartado, donde notarás las mayores diferencias entre ambas versiones.

Como ya te hemos indicado desde el primer artículo de esta serie dedicada a Joomla, nuestro objetivo será ofrecerte ejemplos concretos de creación de menús, los más usuales y habituales, pero te corresponderá a tí adaptar nuestros procedimientos a tus necesidades concretas. Y, sobre todo, en estas cuestiones, el establecimiento de menús en Joomla es tan extraordinariamente configurable que tendrás que hacer un esfuerzo añadido de personalización.

En esta práctica vas a crear nuevos puntos de menú en el menú principal (mainmenu) que apunten a las secciones creadas en el artículo anterior. De esta manera, cuando uno de los visitantes de tu web haga clic sobre el enlace del menú correspondiente accederá a todos los artículos que hayas escrito para dicha sección ordenados cronológicamente: es muy similar a lo que estás acostumbrado a ver cuando visitas algún blog en Internet.

En Joomla 1.x.0:

Primero, debes situarte en el Administrador de menús y hacer clic sobre el icono que te permite acceder a los puntos de menú del mainmenu, el menú que vas a modificar. En la pantalla de edición de menús, localiza el icono Nuevo y haz clic sobre él.

nuevo punto de menú

Una pantalla con variedad de opciones se abre ante tus ojos. Es una página en la que podrás determinar el tipo de menú que vas a crear. Pero… ¿cuál elegir?.

Como nuestro objetivo inicial es crear puntos de menú que apunten a las diferentes secciones creadas anterioremente: Centro, Familias, Alumnado y Profesorado y deseamos que se muestren, en forma de blog, todos los contenidos pertenecientes a dicha sección en cuestión, debemos seleccionar la opción Bloque - Sección de contenido, que hará precisamente eso, mostrar una sección en tipología de blog. Valida la opción y haz clic en el botón de la parte superior Siguiente.

nuevo punto de menú

En la siguiente pantalla sólo debes preocuparte, por ahora, de poner un nombre al punto de menú (se mostrará en el menú de navegación de tu web) en el campo de texto Nombre (por ejemplo, teclea Centro) y asignarlo a la sección correspondiente, es decir, la sección Centro.

nuevo punto de menú

Como ves en pantalla, por defecto, observa que el punto de menú se encuentra publicado y su nivel de acceso es público (es decir, se visualizará en el menú de navegación y cualquier visitante podrá hacer clic sobre él para acceder al contenido de la sección). Cuando finalices, haz clic sobre el botón Guardar. El nuevo punto de menú aparecerá ahora en el listado de entradas del menú de mainmenú. Recarga el Frontend para visualizar el cambio en tu sitio Web.

Repite el procedimiento para crear los otros tres puntos de menú que apuntan a las secciones Familias, Alumnado y Profesorado. El aspecto del menú de navegación de tu menú será similar al siguiente:

nuevo menu mainmenu

Reordena los puntos de menú a tu gusto para su visualización en el menú de navegación: sube y/o baja las entradas del menú principal según te interese.

En Joomla 1.5

Los pasos para crear nuevos puntos de menú en Joomla 1.5 son exactamente los mismos que ya has visto en el apartado anterior, aunque es preciso mencionar que sí hay notables diferencias respecto a versiones 1.x.0 con relación a la elección de la tipología del menú a crear. La pantalla para seleccionar las tipologías de los menú ha cambiado… y mucho… y para mejor… resultando mucho más clara. Para conseguir el mismo resultado, un enlace a una sección, en esta versión 1.5 debes hacer clic sobre la entrada Artículos y en el menú desplegable que emerge, sobre el enlace Sección.

Joomla 1.5: nuevos puntos de menú

Joomla te ofrecerá dos opciones diferenciadas: selecciona la primera opción, presentación de la sección blog para mostrar una página en la que los artículos de la sección en cuestión se presenten en tipología blog o presentación de la sección para mostrar una lista de las categorías de la sección con el número de artículos publicados por categoría. Puedes ver dos ejemplos concretos, a continuación, de cómo se visualizarían las páginas en cada caso:

sección blog

Aspecto de la página al seleccionar Presentación de la sección Blog

Joomla 1.5: nuevos puntos de menú

Aspecto de la página al seleccionar Presentación de la sección

Procede repitiendo los procedimientos para crear las entradas en el menú Centro, Alumnado, Profesorado y Familias que apunten a estas secciones creadas en el sitio Web.

El aspecto final del menú Principal será similar a la siguiente captura de pantalla:

Joomla 1.5: nuevos puntos de menú

Nuevo menú principal (mainmenu) con nuevos puntos de menú

¿Tienes ahora más claro cómo editar los menús en Jooma?, ¿te atreves a experimentar con la creación de otras entradas en el menú principal?



Curso online de Joomla: gestionando los contenidos (y II)

17 08 2008

Joomla, potente CMS libreEn el artículo anterior de esta serie dedicada a Joomla, ese potente CMS. de código abierto que te permitirá crear, mantener y gestionar auténticos portales educativos, te hablamos de cómo gestiona Joomla los artículos que vayas creando y de cómo necesitarás disponer de secciones y categorías que te permitan organizar internamente el contenido de tu sitio Web.

Hoy pasamos a la práctica. Como hasta ahora, el punto de partida siempre será el diseño de un sitio Web para un Instituto o un centro educativo y te proponemos la creación de un número concreto de secciones y categorías por ello. Tienes que tener en cuenta que este modelo es completamente adaptable: te corresponderá a ti crear más o menos secciones y categorías dependiendo de las necesidades de tu sitio web y que, además, no es inalterable, en cualquier momento del mantenimiento del sitio podrás crear nuevas secciones, nuevas categorías y asignar tus artículos nuevos o ya escritos a éstas.

Si se analizan las necesidades de un sitio para un centro educativo, una de las primeras cuestiones que consideramos es la posibilidad de diseñar secciones específicas para nuestros posibles visitantes: nuestros alumnos, el profesorado del centro, las familias de nuestros alumnos, un usuario cualquiera que desee obtener información del centro como su horario o su ubicación geográfica, etc. En ellas, cada visitante encontrará información que le sea pertinente y de su interés. De esta manera, se consigue que los contenidos que se ubiquen en el sitio Web sean los específicamente destinados a cada perfil del visitante. Pero no es menos cierto que también es necesario “vigilar” la privacidad y la confidencialidad de lo expuesto en el sitio Web. Joomla nos permite, de una manera sencilla, crear secciones diferenciadas, pero además, nos facilita mucho la posibilidad de que los contenidos que en ellos se establezcan sean de acceso público o no, o restringido a determinados usuarios.

De ahí que nuestra primera decisión sea la creación de secciones diferentes según los perfiles de nuestros usuarios. Para comenzar, crearemos cuatro secciones en nuestra Web: centro, alumnado, familias, profesorado.


Crear una sección en Joomla

Decidir qué secciones crearás será lo más difícil porque crearlas, técnicamente, en Joomla es sumamente sencillo… y repetitivo. Una vez que conozcas el procedimiento para hacerlo sólo tendrás que repetirlo para cada una de las secciones que crees en tu sitio Web.

No existen apenas diferencias entre la creación de una sección en Joomla versiones 1.o.x o versión 1.5, salvo en la localización de los menús correspondientes que te permitirán acceder a esta funcionalidad.

En esta práctica crearás una sección Centro, sección que te servirá para alojar todos los artículos que te servirán para informar o describir aspectos relacionados con tu centro.

En Joomla 1.0.x

  • En Panel de Control haz clic sobre el botón Administrador de secciones.

Joomla 1.0.x: Administrador de secciones

  • Haz clic en el botón Nuevo en la nueva página.

Joomla 1.0.x: crear nueva sección

  • Se abre una página en la que tendrás que introducir el nombre para la sección y ciertos parámetros y opciones.

Utiliza un nombre corto para el campo Titulo y para el nombre de la Sección: te recomendamos que emplees el mismo término en los dos casos. En este ejemplo, Centro, lógicamente. El título es un nombre que se utiliza para mostrarse en el menú principal; el nombre de la sección es la cabecera para la lista de categorías. Esto será exhibido en la sección de contenido del Frontend de su sitio.

Joomla 1.0.x: crear nueva seccion

Observa que en nivel de acceso la opción predeterminada es Public. Es la correcta, pues se desea que la sección sea accesible para otros usuarios (nuestros visitantes de la Web). Observa que también, por defecto, se encuentra validada la opción Si en Nivel de acceso: también es la opción correcta porque para que la sección sea accesible debe estar publicada (si validas la opción No, la sección no se publicará y los visitantes no podrán acceder a su contenido). Como ves, estos dos parámetros son muy importantes en Joomla: en el primer caso, restringes o no el acceso a ciertos visitantes de la web, en el segundo puedes impedir que se publique el apartado en cuestión.

En la parte derecha de la pantalla tienes la opción Enlaces en el menú disponibles para guardar.

Tras guardar la sección creada, aquí puedes incluir un enlace directo al menú deseado. Sin embargo, dado que todavía no hemos creado ningún menú (cosa que haremos en un nuevo tutorial) de momento, olvídate de ella.

Finalmente haz clic sobre el botón Guardar, para que la sección sea creada definitivamente.

En Joomla 1.5

No existen demasiadas diferencias con respecto a la versión anterior de Joomla. En el Panel de control encontrarás el Gestor de secciones que te permitirá crear y editar las secciones de tu sitio Web, utilizando idénticos procedimientos a los señalados en el punto anterior. Cabe destacar que algunos de los parámetros para la creación de una nueva sección son mucho más claros que en Joomla 1.0.x como la opción Publicado, con un mensaje más claro para el administrador de su funcionalidad. También han desaparecido todas las opciones relativas a la asociación con menús, pues el apartado de creación, edición y gestión de menús ha sido completamente revisado en este nueva versión, como veremos próximamente.

Joomla 1.5: crear nueva sección

Ahora tienes que repetir estos procedimientos para crear las otras secciones del sitio Web. Por ejemplo, alumnado, Familias y Profesorado.


Crear nuevas categorías

Con respecto a las categorías que se incluirán en cada sección, esto depende muchísimo de la información que vayas a publicar: si el centro tiene proyectos en curso y son o no muy activos y generan su propia información, si se disponen de Departamentos en los que el equipo de profesores publica sus programaciones, tareas, actividades o apuntes para los alumnos, si la Asociación de Padres y Madres desea mantener su propio espacio en la web, etc. Te ofrecemos ejemplos concretos pero este apartado es el más personalizable:

  1. Sección Centro: crea las categorías general (información no clasificable en las categorías creadas), organización (información sobre órganos unipersonales y colegiados del centro), secretaría (libros de texto, calendario escolar, becas y ayudas al estudio, avisos, matrícula, admisión de alumnos), proyectos (una categoría por cada uno de los proyectos del centro: Proyecto TIC, Proyecto de Apertura de Centros, Biblioteca escolar, Animación a la Lectura, Proyecto Comenius).
  2. Sección Alumnado: crea las categorías general, Junta de Delegados, Actividades Complementarias, Actividades Extraescolares.
  3. Sección Familias: crea las categorías general (información general dirigida a las familias), AMPA (información de la Asociación de Padres y Madres) y actividades (información sobre actividades específicas organizadas por la AMPA).
  4. Sección Departamentos: crea diferentes categorías para cada uno de los Departamentos de tu IES.

La creación de categorías funciona exactamente de la misma forma que la creación de secciones, con la salvedad de que es necesario decidir a qué sección debe asignarse la categoría que se está creando.

En Joomla 1.0.x

Pasos para crear una categoría desde el Administrador de categorías:

Joomla 1.0.x: Administrador de categor�as

  1. En Panel de Control, haz clic sobre Administrador de categorías.
  2. Haz clic en Nuevo para abrir la página de creación de nueva categoría.
  3. Introduce un nombre corto en Título y nombre de la categoría. Ejemplos según las categorías anteriores: General, Organización, Secretaría, Proyecto TIC, Proyecto Biblioteca, Proyecto Comenius, AMPA, Complementarias, Extraescolares, Educación Física, Tecnología, Física y Química… y similares.
  4. Asegúrate de asignarlo a la sección correspondiente. Presta mucho atención a este paso, no cometas errores.
  5. Asegúrate de que su acceso sea Público, al menos de momento (¿no empiezas a vislumbrar qué sucedería si el acceso a una categoría fuera para usuarios registrados o para usuarios con permisos especiales?) y que la categoría se encuentre publicada, tal y como se establece por defecto.

Joomla 1.0.x: crear nueva categor�a

En Joomla 1.5

Al igual que ocurre con la creacción de secciones, las diferencias con la versión Joomla 1.0.x son mínimas. La creación y edición de categorías se realiza a través del Gestor de categorías que localizarás en el Panel de Control o en el menú Contenidos y el procedimiento es idéntico a la versión 1.0.x. Sigue las mismas recomendaciones que te hemos indicado en el punto anterior.

Recuerda que tienes que crear todas y cada una de las categorías que tengas pensadas y asignarlas a sus secciones correspondientes: la lista puede ser muy larga, si tu sitio es muy complejo.


No cabe duda que estas tareas resultan tediosas por repetitivas pero son el esqueleto y la estructura que contiene toda la colección de artículos que crearás a lo largo de tu trabajo de actualización y mantenimiento de la Web (ojo, de momento, esta estructura no tiene visualización en tu sitio Web, es una estructura interna). Lógicamente este esquema de secciones y categorías dependerá de los contenidos que quieras abordar y de la complejidad de tu sitio Web, pero te recomendamos que los decidas previamente y anotes, en lápiz y papel, los  contenidos que abordarás en la Web para que sea lo más claro posible.

Y te reiteramos que no son esquemas rígidos porque en cualquier momento que desees añadir nuevos contenidos podrás crear nuevas secciones y categorías, o asignar los ya creados a categorías y secciones diferentes, pero debe ser lo suficientemente claros para tu primera organización de la Web.



Recorta imágenes con Gimp

16 08 2008

Gimp, software libre de edición y retoque fotográficoExisten muchos momentos en tus tareas docentes que necesitarás utilizar imágenes, fotografías e ilustraciones y, en ocasiones, tendrás que editarlas: para publicar artículos en tu blog o en la Web del centro ilustrados con fotografías, encuadrar esas fotos de la salida con tus alumnos o de la fiesta de tu centro que tan torpemente realizaste con la cámara, aprovechar imágenes que localizaste en Internet, enriquecer los trabajos que utilizas en el aula con fotografías guardadas en tu equipo…y muchas otras actividades.

Y esto no requiere que seas un experto diseñador gráfico ni que manejes aplicaciones potentísimas que te supongan horas de aprendizaje. Te aseguro que sólo necesitas conocer tres o cuatro tareas básicas: una de ellas, la protagonista de nuestro artículo de hoy, el recorte de imágenes; de otra, ya te hemos hablado en un anterior artículo, cómo reducir el tamaño de imágenes. Como mucho pasar imágenes a blanco y negro o en escala de grises para utilizar a la hora de fotocopiar o el trabajo con textos, para asombrar a todos con tus portadas, folletos o carteles.

Te recomendamos  que no te pierdas nuestra serie de artículos dedicados a Gimp y te asombrarás de lo que serás capaz de crear utilizando esta aplicación de retoque fotográfico de código abierto, gratuita, libre y en español.

software libre para gente librePara realizar este artículo se ha utilizado la versión Gimp 2.4.6 instalada en un equipo con Ubuntu Hardy Heron 8.04, pero no tendrás ningún problema para realizar las prácticas que te sugerimos en cualquier otro sistema operativo: recuerda que Gimp es un programa multiplataforma y que dispones también de versión para Windows XP y Windows Vista. Así pues, no tienes excusas para instalar y utilizar este excelente programa libre de diseño y retoque fotográfico.


Recortar una imagen es un procedimiento muy útil. Con él puedes aprovechar sólo aquella parte de la imagen que te interese o bien puedes mejorar la imagen seleccionada eliminando parte de ella. Es un procedimiento muy sencillo y básico que podrás realizar de una manera simple con Gimp.En este ejemplo en concreto vamos a utilizar una imagen que hemos localizado en Flickr, publicada bajo licencia Creative Commons.

http://flickr.com/photos/davelau/1347486440/sizes/l/in/set-72157600713669336/

La fotografía incluye una leona en la parte derecha de la imagen que deseamos aislar del resto. Si deseas utilizarla para seguir paso a paso nuestras indicaciones guarda la imagen en una carpeta de tu equipo (recuerda bien dónde se encuentra pues la utilizarás a continuación) mediante la opción del menú contextual del botón derecho del ratón de tu navegador Guardar imagen como. Puedes también, si lo deseas, utilizar cualquier otra imagen de tu interés.

Fotograf�a Flickr Creative Commons

Usuario Chi King - Flickr Licencia Creative Commons 2.0

Lo primero que tendrás que hacer, lógicamente, es abrir la imagen que deseas recortar en Gimp. Por tanto, ejecuta la aplicación por cualquiera de los procedimientos que ya conoces para abrir el programa. Para abrir la imagen vete el menú Archivo y selecciona la opción Abrir. Observa que se despliega el cuadro de diálogo Abrir imagen. En el desplegable se encuentran las carpetas y los archivos de tu equipo. Puedes ver la imagen que selecciones en tamaño reducido con la opción Vista previa del cuadro de diálogo.

 ventana Abrir imagen

Una vez localizada la imagen con la que vas a trabajar, por ejemplo, la que acabas de descargar, haz doble clic sobre ella para visualizar su contenido en Gimp (o selecciona y cliquea el botón Abrir). Ya tienes la imagen sobre la que vas a trabajar en pantalla, haz una copia antes de empezar a trabajar con ella para no retocar la imagen original (menú Archivo de la propia imagen - Guardar una copia).

Para trabajar con mayor comodidad con Gimp te proponemos una serie de trucos:

  • Coloca la caja de herramientas de Gimp en un extremo, manteniéndola visible y deja en el centro de la pantalla la imagen con la que vas a trabajar. De este modo, resultará mucho más fácil seleccionar una herramienta en cualquier momento.
  • Ajusta el tamaño de la ventana de la imagen colocando el cursor en una esquina y cuando el cursor del ratón adopte la forma de una flecha, mantén presionado el botón del ratón y arrastra la ventana hasta lograr el tamaño deseado.

Comenzamos con el recorte de la imagen. Puedes utilizar dos procedimientos muy diferentes. Aprovechamos el artículo para indicarte ambos y así aprenderás nuevos aspectos básicos de Gimp como son utilizar las herramientas de recorte y de selección rectangular. Experimenta con las dos opciones y quédate con aquella que te resulte más cómoda:

  1. Recortar la imagen utilizando la opción Autorecortar imagen
  2. Recortar la imagen utilizando la herramienta de selección rectangular

Primer procedimiento: Autorecortar imagen

Acude a la Caja de herramientas y haz clic sobre la herramienta de recorte (el mismo resultado obtendrás si acudes al menú Imagen y seleccionas Autorecortar imagen).

Herramienta de Recorte

Observa que el cursor del ratón se transforma en el herramienta Recortar. Sólo tienes que hacer clic en el lugar exacto donde quieras hacer el recorte y arrastrar el ratón (manteniendo pulsado el botón izquierdo del ratón) en diagonal hasta formar una ventana y así seleccionar la parte de la imagen que te interese. Puedes ajustar aún más esta selección: puedes mover esta ventana a otra posición haciendo clic y arrastrando a otro lugar de la imagen (observa cómo se transforma el cursor del ratón para indicarte que puedes mover la selección) e incluso cambiar sus límites para ajustar aún más el tamaño deseado: acerca el cursor del ratón hacia sus lados o esquinas. Cuando éste cambie de forma, mostrando unas pequeñas flechitas, arrastra hasta obtener el resultado que precises. De esta manera, encuadrarás la imagen a la perfección.

Cuando finalices, haz clic sobre la imagen para proceder a su recorte. Todo lo que se encontraba a su alrededor habrá desaparecido.

Guarda ahora la nueva imagen en tu equipo tal y como ya te hemos mostrando en un artículo anterior: utiliza la opción Guardar o Guardar como… del menú Archivo para ello.

Esta película necesita Flash Player 7


Segundo procedimiento: La herramienta Selección rectangular

Como has podido comprobar el procedimiento anterior es muy sencillo y te permite un buen control sobre el recorte de la imagen. Ahora te indicaremos un segundo procedimiento, que no sólo te permitirá recortar partes de la imagen, sino que también te permitirá mover o rellenar con un color el área que queda dentro de la selección.

Nota. También la herramienta Selección rectangular te permitirá seleccionar elementos concretos para indicar a Gimp qué partes de una capa (ya verás este concepto más adelante) se verán afectadas por un cambio (pintura, relleno, filtro, transformación…) y cuáles no. Normalmente, cuando no hay selección de ningún tipo, los cambios se aplican a toda la capa.

La forma de utilizar la herramienta Selección rectangular es sencilla y muy similar a la herramienta que has visto en el apartado anterior. Abre de nuevo la imagen descargada y realiza una copia para trabajar sobre ella.

Haz clic en el icono herramienta Selección rectangular ubicado en la Caja de Herramientas.

 Herramienta Selección Rectangular

Coloca el cursor del ratón en una esquina de la imagen y, manteniendo presionado el botón izquierdo del ratón, arrastra el cursor en diagonal para formar una ventana de selección. Suelta luego el botón del ratón para terminar la selección. Observa que, a diferencia de la herramienta anterior, el área seleccionada queda enmarcada con líneas discontinuas y parpadeantes que se desplazan alrededor de la imagen. Esto es lo que se conoce como selección flotante. Puedes cancelar la selección que acabas de realizar simplemente haciendo clic con el cursor del ratón fuera del área punteada.

Herramienta Selección Rectangular

Ahora bien, debes de saber que este rectángulo de selección no queda seleccionado definitivamente, sino que se encuentra “preseleccionado”, es decir, que puedes editar la “preselección” en el caso de que no se ajuste a lo que deseabas (exactamente igual que la herramienta anterior, podrás mover la selección o cambiarla de tamaño). Para confirmar la selección pulsa la tecla ENTER o bien haz clic con el ratón en el interior del rectángulo de selección. Esto no te impide volver a utilizar la herramienta Selección rectangular para comenzar una nueva selección, si la realizada no es de tu agrado, en cualquier momento.

Nota. Si después de iniciar la selección pulsas la tecla Ctrl de tu teclado, la selección se realizará desde el centro del rectángulo, no desde la esquina superior izquierda.

Para recortar la parte de la imagen seleccionada acude, finalmente al menú Imagen y selecciona la entrada Recortar a la selección. El resultado será exactamente el mismo que en el procedimiento anterior: todo lo que se encuentre alrededor de la parte seleccionada de la imagen desaparecerá.

Recortar a la selección

No cabe duda que tal vez consideres el primer procedimiento descrito más rápido, sin embargo, la ventaja que tiene éste sobre el anterior es que la selección rectangular te permitirá editar esta parte de la imagen previamente a su recorte, si lo deseas. Por ejemplo, prueba con la entrada Desaturar del menú Color y para experimentar selecciona una de las opciones (claridad, luminosidad, media) y haz clic sobre el botón Desaturar. Los cambios sólo se aplican al elemento de la imagen seleccionado. Ahora… ¡recórtala, como ya te hemos indicado, y guarda la imagen final!

efectos en una seleccion rectangular

Descarga o imprime el tutorial realizado en formato PDF: Acceder
Accede al Videotutorial en formato swf: Gimp: recortar una imagen


Instala el plugin Save for the web para Gimp (en Ubuntu)

12 08 2008

Seguramente los usuarios que utilizan Gimp y que hasta ahora hayan utilizado Photoshop echarán de menos la opción de Guardar para la Web que este programa les ofrecía en su menú Archivo. Este plugin para Gimp hace exactamente eso: crea una entrada en el menú Archivo que te permitirá guardar la imagen activa en Gimp optimizada para su publicación en Internet. En su ventana de configuración podrás seleccionar el formato de imagen, visualizarás el tamaño del archivo resultante, modificarás su calidad y suavizado, e incluso redimensionarás la imagen o la cortarás.

Plugin para Gimp, guardar para la web

Para instalar el plugin en Ubuntu Hardy Heron 8.04 (la versión que tengo actualmente instalada) y en Gimp 2.4.6 (la última versión estable) acude al sitio Web de Alberto Lepe Garza quien nos ha preparado un paquete deb ya configurado para que el proceso de instalación en Ubuntu sea extremadamente sencillo. Sólo tendrás que descargar la versión que precises (elige entre versión x86 o amd64) y permitir su ejecución a través del Gestor de paquetes GDebi y en breves segundos el plugin se instalará rápidamente.

Abre una imagen en Gimp y acude al menú Archivo. Ahora ya localizarás la nueva entrada en el menú Archivo.

Plugin para Gimp, guardar para la web

Sitio About Linux, Save for the Web: Acceso
Descarga el paquete deb para equipos x86: Descarga


Probando y experimentando con Elgg

11 08 2008

the open source social networking platformMe habían hablado de esta plataforma y llevaba un tiempo animándome a probarla. No se si mis escasos, casi nulos, conocimientos de PHP me echaban para atrás o si tenía en la cartera otras prioridades… pero lo cierto es que iba dejándolo pasar. A pesar de todo ello, cuando leí un artículo de InfoWorld anunciando los ganadores a los mejores proyectos open source 2008 y mencionando Elgg como la mejor aplicación web social, entonces comenzó a picarme la curiosidad. La primera dificultad con la que me encontré, a pesar de visitas y visitas a San Google, es que no hay mucho escrito en español y la mayoría de las páginas que muestran información sobre la plataforma, sobre su instalación y su utilización están escritas en inglés (idioma que no domino en demasía). Pero, a medida que me adentraba en el vasto universo informativo de Internet, iba tomando cuerpo la idea de que tenía que probarla. ¡Y no me arrepiento de haberlo hecho!

En este artículo os contaré algunas de mis primeras impresiones, las de una usuaria novel que aún le queda mucho por probar y experimentar con Elgg pero que, en principio, lo poco visto me ha agradado enormemente por sus implicaciones en el ámbito educativo: e-learning, grupos, comunidades, blogs, uso compartido de archivos… y muchas otras funciones idóneas para un aprendizaje cooperativo y colaborativo: integración con Moodle, Drupal, MediaWiki, podcast, permisos de acceso…

Elgg, plataforma de código libre para redes sociales

Elgg es una aplicación web social open-source licenciada bajo licencia GPL v.2 (software libre) que se ejecuta en LAMP (Linux, Apache, MySQL y PHP) o Wamp (Windows, Apache, MySQL, PHP). Es una plataforma, por tanto, para redes sociales (esas que ahora están tan de moda con Facebook, Twitter, MySpace, Del.icio.us, Flickr… y que se están abriendo paso vertiginosamente en Internet). Estas plataformas (sistemas abiertos que se van construyendo con lo que cada usuario aporta) nos permiten interactuar con otras personas aunque ni siquiera las conozcamos, compartir nuestros intereses, preocupaciones o necesidades, establecer comunidades de personas que comparten actividades o experiencias y conectarnos a determinados grupos seleccionados con todos los beneficios psicosociales que ello conlleva. Básicamente su funcionamiento, sea cual sea la plataforma utilizada, es muy similar: se monta el soporte técnico, los que inician el proyecto invitan a amigos y conocidos a formar parte de la red social, cada nuevo miembro trae consigo muchos nuevos miembros y así sucesivamente. Este crecimiento geométrico comporta cientos de miembros de la red conectados, ¡y a un bajo coste!.

Nota. Si te interesa el tema te recomiendo la lectura de El poder de las redes, un libro en formato PDF de Dominio Público, en el que David de Ugarte desarrolla estas temáticas con todo lujo de detalle. No te lo pierdas si quieres conocer hacia donde van las nuevas tendencias en la Red de Redes.

La cuestión, hasta ahora, estriba en que debes entrar a formar parte de esa comunidad de usuarios ya establecida, que tiene sus propias reglas y que puede o no admitir tu participación e incluso censurar tus opiniones. ¿Te imaginas, en cambio, poder contar con tu propia red social?.  Para eso tienes Elgg. Piensa en sus implicaciones educativas: pensar, escribir, compartir, comunicar, participar… Todo eso, y mucho más, es Elgg.

Llevo unos días utilizando esta plataforma instalada en el servicio de hosting 1&1, “jugando” con ella en un primer sitio de pruebas: Comunidad: Con el ordenador a cuestas y aún me quedan muchísimas cosas por hacer y por aprender.

 Con el ordenador a cuestas

La he instalado en local, en un servidor wamp (accede al artículo que te indica como instalar Xampp en Windows XP, si deseas hacerlo), sin problemas y en una instalación rápida y sencilla (te indicaremos cómo, para eso está Con el ordenador a cuestas), he intentado repetir el proceso pero en un servidor lamp, en mi flamante portátil con Ubuntu 8.04, con ciertos problemillas que aún no he resuelto y que me tienen muy ocupada en localizar la solución (por cierto, si algún lector de este blog lo ha conseguido le estaría muy agradecida si compartiera con todos nosotros cómo lograrlo)… y espero impaciente a que llegue el día 18 de Agosto, fecha de publicación del lanzamiento de la próxima versión de Elgg (Elgg 1.0, release) para testearla.

Pero Elgg, de momento, no es un camino de rosas, no nos engañemos:

  1. Muy poca documentación, ya hemos hablado de ello, y muy escasa en español. Dificultad que seguramente se salvará cuando Elgg se haga más y más popular y cada vez más usuarios de lengua castellana la utilicen.
  2. Su panel de administración es más bien limitado.
  3. La instalación, aunque sencilla, no es del todo amigable y se requieren ciertos conocimientos técnicos. Aunque la Red ayuda mucho, en este sentido, sólo hay que seguir instrucciones y la instalación será cosa de niños.
  4. La edición del sistema es complicada, por ejemplo, para editar las plantillas en uso, modificar el contenido de las páginas… Se necesitan conocimientos en lenguaje html, manejo de hojas de estilo, conocimientos básicos en lenguaje PHP… Al  menos, en lo concerniente a la administración del sistema, no está al alcance de cualquiera.
  5. A pesar de buscar exhaustivamente por Internet apenas localicé sitios que ofrezcan soporte, foros de participación, páginas con resolución de problemas, etc… acostumbrada como estoy a que mis dudas con WordPress, Joomla… se resuelvan tras algunas búsquedas.

y aún no he experimentado con módulos, plugins ni cambios de plantillas, así que desconozco qué problemas encontraré en el futuro.

Pero, en cambio, la utilización de la plataforma por parte de los miembros que quieran formar parte de nuestra red social es extremadamente fácil, apenas son necesarios conocimientos técnicos para establecer grupos de trabajo o comunidades y para administrarlos, la publicación de blogs personales o del blog de cada comunidad es sencilla, la administración de nuestro disco duro virtual, simple. ¡Elgg se merece un hueco en nuestra agenda!

Sitio oficial del proyecto: Elgg.org
Elgg Documentation (en inglés): acceder 
Documentación (en español): Elgg en español 
Tutorial (en español): Aprender en Red
Happies Wiki: Elgg (en español): acceder 
EduSpaces: comunidad internacional. Acceder 
Blocs y portafolis del Tarradell: ejemplo de utilización en un IES. Acceder
Comunidad del Software Libre Bolivia: SLOB 2.0

¿Empiezas a vislumbrar algunas de sus posibilidades?
¡Anímate y descarga Elgg!