Saltar apartados
  • Compartir página web
  • Compartir en Twitter
  • Compartir en Facebook
  • Compartir en Google+

Gestión de imagenes

En este documento:

 

 

Acceso a la publicación de imágenes

Para acceder a la gestión de imágenes es necesario entrar en uno de los módulos principales situados en la parte superior derecha y que nos permite gestionar imágenes.

Por lo tanto, hay que pulsar la pestaña con forma de cámara fotográfica :

Pestaña de acceso al gestor de imágenes de vualà

 

La primera vez se nos mostrará sólo la carpeta "-gestadm" (ver apartado "Carpeta especial -gestadm") y sin ninguna imagen subida. En esta imagen hay carpetas creadas e imagenes ya subidas:

 

Gestión de imágenes - Pantalla Principal

 

En la Ventana de Directorios muestra el directorio "Imágenes" y como subdirectorios "-gestadm" (con acceso restringido) siempre en primer lugar, "administracion-sitio", "borradores", etc. Por otro lado, en la Ventana de Operación aparece el contenido del directorio seleccionado "Imagenes", que es: el directorio "-gestadm" siempre en primer lugar, "administracion-sitio", "borradores", etc, y varias imágenes en formato png y gif.

 

 

 

Crear una carpeta para imágenes

Para ordenar las imágenes, podemos agruparlas en carpertas, para ello podemos crear las carpetas necesarias a través del Menú de Opciones y posteriormente mover las imágenes a sus carpetas correspondientes. También podemos optar por subir directamente las imágenes directamente a su carpeta, para ello, antes de publicar una imagen es necesario acceder a la carpeta donde la queremos publicar.

N os situamos en la ubicación donde queremos crear la carpeta . En la siguiente imagen se ve que está seleccionada la carpeta "gestion-de-ficheros", entonces, es ahí donde se va a crear la carpeta:

Seleccionar ubicación para carpeta nueva

A continuación pulsamos el botón "Nueva Carpeta" :

Botón Nueva Carpeta Y se nos pedirá un título para la carpeta , que, internamente, se trasformará en un nombre adecuado para la carpeta:

Título de la nueva carpeta

Finalmente pulsamos "Crear carpeta" .

Así, por ejemplo, si en "Castellano" hubieramos escrito "Gestión de imágenes", el nombre de la carpeta generado sería " gestion-de-imagenes ", es decir, sin espacios en blanco, ni tildes y todo en minúsculas. Este proceso de renombrado seguro es automático.

 

 

Publicar (o subir) una imagen nueva

Antes de empezar a publicar, nos situamos en la carpeta donde queremos que se nos publique la imagen . En la siguiente imagen se ve que está seleccionada la carpeta "gestion-de-imagenes", entonces, es ahí donde se va a subir (publicar) la imagen:

Árbol de carpetas de imagen

A continuación pulsamos el botón "Subir imagen" :

Botón Subir Imagen

La publicación de una imagen, ya sea en formato jpg , gif o png ( consultar la sección "Formatos de fichero que debes conocer" ), requiere de 4 pasos:

 

Cada paso se corresponde con cada apartado del diálogo que se muestra a continuación:

Los cuatros pasos para publicar una imagen

 

(1) Seleccionar una imagen del disco local o externa para subir

A continuación se muestra el diálogo para la selección de imágenes:

Icono Lupa, botón para Examinar y seleccionar una imagen

Al pulsar el botón Lupa nos aparecerá un cuadro de diálogo con la posibilidad de navegar por nuestro disco duro con el fin de poder seleccionar la imagen que queremos subir.

icono bola mundo Usaremos la bola del mundo para importar a nuestro sitio una imagen publicada en Internet . En el cuadro de diálogo que aparecerá a continuación, debemos especificar la URL de la imagen que será copiada a nuestro sitio en Vualà.

dirección de la imagen

En la siguiente imagen se muestra (ampliada) una imagen seleccionada y cargada en el recuadro de castellano, utilizando cualquier da las dos opciones anteriores:

Imagen seleccionada y cargada

Si vamos a publicar en las tres versiones idiomáticas la misma imágen, es suficiente con publicar sólo en castellano (como en la imágen anterior) y automaticamente esta imágen se triplicará en las tres versiones idiomáticas, con el nombre correspondiente a su título.

Por lo tanto, la selección de una única imagen en el recuadro "Castellano" implica que, para el resto de idiomas, se usará esa misma imagen. Si quisieramos una imagen para cada idioma, debemos pulsar sobre el botón Lupa o sobre la bola del mundo debajo de cada recuadro de idioma, para seleccionar o importar la imagen correspondiente .

 

(2) Poner un título

Al igual que con la creación de carpetas, el título de la imagen será utilizado por el sistema para generar un nombre seguro para la imagen, es obligatorio asignar un título a la imagen . Veamos cómo se muestra este apartado:

Título de la imagen

En la imagen se puede ver que el título que hemos escrito es: "Título de mi imagen", de forma que el nombre que se le asignará a la imagen será: " titulo-de-mi-imagen.png " en castellano, " titol-de-la-meua-imatge.png " en catalán, y " my-image-title.png " en inglés.

 

(3) Poner una descripción a la imagen

Es importante por cuestiones de accesibilidad dotar de una descripción a la imagen. Dicha descripción se utiliza para sustituir a la imagen en caso de que ésta no se cargue, y también, es fundamental para los lectores de pantallas, herramientas utilizadas por personas con deficiencias visuales. Veamos la siguiente imagen:

Descripción de la imagen

 

(4) Seleccionar el tamaño de la imagen

Sleccionar el tamaño de la imagen significa que, independientemente del tamaño de la imagen original, el sistema realizará un redimensionado de forma automática , salvo que elijamos "Imagen original", en cuyo caso, se utilizará la dimensión original de la imagen.

Tamaño de la imagen

  • A. Imagen pequeña: para usar con las noticias. El tamaño de la imagen queda reducido a 100x100px.
  • B. Imagen mediana: El tamaño de la imagen se reduce a 250x250px como máximo.
  • C. Imagen grande: El tamaño de la imagen queda escalado a 720x720px.
  • D: Imagen original: Se mantiene el tamaño orginal de la imágen.

 

    Ten en cuenta: En Vualà el tamaño máximo para publicar una imagen es de 500Kb.

     

    Veamos un ejemplo: sea una imagen original de 1600px X 1200px, de tamaño 206KB en formato png. Al subir la imagen original marcando el recuadro de pequeño, mediano y grande, respectivamente:

    Imagen león muy grande tamaño pequeño Imagen león muy grande tamaño mediano Imagen león muy grande tamaño grande

     

    Quedando los siguientes tamaños y pesos:

    • Imagen pequeña: 100 x75px, 2KB
    • Imagen mediana: 270 x203px, 6KB
    • Imagen grande: 660 x495px, 22KB

    La imágen se reduce hasta alcanzar en el mayor de sus ejes uno de los tamaños establecidos: 100px si hemos marcado la opción pequeña, 270px si hemos marcado la mediana y 660px si la opción marcada es la grande.

    La resolución de las imágenes para la web es suficiente con 72 ppp (pixeles por pulgada) .

    Es útil preparar las imágenes para la web ya que nos evita subir imágenes demasiado pesadas (de tamaño muy grande) que necesitan de más tiempo para ser visualizadas. Uno de los programas recomendado por el Servicio de Informática para retocar imágenes es Xnview .

    En cualquier caso, si se piensa que la imagen pueda tener un tamaño excesivo, por ejemplo, al querer publicar una foto realizada con una cámara digital, se recomienda asignar los tamaños pequeño, mediano o grande, pero nunca el original.

    Por último, debemos pulsar en " Subir " para terminar el proceso:

    Botón subir para finalizar el proceso de publicación

     

    Renombrar una imagen ya publicada

    En primer lugar seleccionaremos la imagen que queremos renombrar, en esta captura, vamos a renombrar la imagen " boton-renombrar.png ":

    Selección de la imagen a renombrar

    Cambiar el nombre de una imagen no tiene ningún efecto visual en la publicación. Todos los cambios son internos y se realizan de forma trasparente al usuario, es decir, cualquier vínculo hacia esa imagen se actualiza de forma automática sin necesidad de revisar todos los documentos que puedan contener esa imagen. Para realizar el renombrado usamos el botón de "Renombrar" , que podemos ver en esta captura:

    Botón renombrar imagen A continuación, se nos desplegará una serie de campos de texto que nos permitirán cambiar el nombre en los 3 idiomas:

    Diálogo que se muestra al pulsar renombrar En la imagen se muestra el título que en su momento se introdujo por parte del usuario, en este caso "Botón renombrar", podemos ahora editarlo y cambiarlo, en la siguiente imagen se muestra el texto cambiado:

    Diálogo que permite realizar el renombrado

    Por último, solo queda confirmar o cancelar el renombrado, para ello se dispone de dos botones en la parte izquierda del primer campo de texto, así, en la siguiente imagen se muestra el botón del aspa roja (ampliado) que debemos pulsar para Cancelar el renombrado, y debajo, el botón verde redondo (también ampliado)  que permitiría finalizar y aceptar el renombrado de la imagen:

    Cancelar el renombrado de la imagen Confirmar el renombrado

     

    Reemplazar una imagen existente por otra

    Esta acción permite cambiar una imagen subida previamente por otra distinta manteniendo el nombre y todos los vinculos que pudieran existir hacia la imagen . Es decir, solo cambiaría el tamaño y el propio mapa de bits. Del mismo modo que el apartado anterior, es necesario seleccionar la imagen que queremos reemplazar, en este caso, queremos subir otra imagen que sustituya a " boton-reemplazar-imagen.png ":

    Selección de la imagen a reemplazar

    Al pulsar sobre el botón Reemplazar imagen del menú horizontal, que podemos ver en la siguiente captura:

    Botón reemplazar imagen

    nos aparecerá el siguiente diálogo con los controles necesarios para seleccionar una nueva imagen de nuestro disco local:

    Diálogo para reemplazar imagen

    Si queremos subir una nueva imagen para cada idioma, que a su vez reemplace las existentes, deberemos pulsar sobre la imagen o sobre la lupa y hacer uso de "Examinar" para cada idioma. Por el contrario, si lo que queremos es sustituir la imagen en todos los idiomas, bastará con pulsar sobre el aspa roja en las versiones de valenciano e inglés, y hacer uso de "Examinar" para el idioma castellano. También podemos hacer uso de la bola del mundo, en el caso de que deseemos importar una imagen externa a nuestro sitio, tal y como se explica en el apartado Seleccionar una imagen del disco local o externa para subir .

    Finalmente, pulsamos el botón " Reemplazar imagen ".

     

    Editar una imagen ya publicada

    Podemos hacer con Vualá una serie de retoques básicos a una imagen que ya tengamos publicada en nuestro sitio. Para ello, nos vamos al módulo de imágenes si no estamos ya en él, nos situamos en el icono que aparece a la izquierda del nombre de la imagen que queremos editar, y pinchamos sobre el lápiz que aparece para acceder a la imagen.

    Editar imagen

    Pantalla editar imagen

    Vemos que a la derecha del botón Publicar, aparece una barra de herramientas de edición de la imagen. Sobre la imagen editada aparece asimismo una casilla de verificación con la leyenda Reemplazar la imagen para los tres idiomas con la imagen editada :

    • Por defecto está marcada. Si cambiamos algo en cualquier idioma, se cambia en el resto.
    • Si la desmarcamos, los cambios se hacen en todos los idiomas donde realicemos alguna acción sobre la imagen.
    • Si dejamos marcada la casilla y hacemos asimismo cambios en dos o tres idiomas, nos saldrá una ventana de aviso porque lo que estamoss haciendo no es coherente.

    A continuación vamos a ver brevemente para que sirve cada uno de los iconos:

    Veamos ahora uno a uno los distintos retoques que se pueden hacer a la imagen, para ello pinchamos siempre en el icono correspondiente.

     

    Cambiar tamaño

      cambiar tamaño

    En este caso vamos a modificar las dimensiones o tamaño de la imagen, poniendo 100 píxels en el ancho y chequeando previamente la casilla de Mantener proporciones, para que nos respete la relación de aspecto entre el ancho y el alto de la imagen (opción más recomendada), dando como resultado:

    imagen cambiada tamaño

    Después de la modificación, debemos publicar la imagen para que los cambios surtan efecto, de lo contrario, cuando abandonemos la ventana de edición de imágenes nos aparecerá el siguiente aviso,

    aviso guardar cambios imagen

    que nos dará la opción entonces de publicar o no los cambios hechos a la imagen.

     

    Recortar

    recortar imagen

     

    En este caso nos aparecen unos tiradores para seleccionar con el ratón el área de la imagen que nos interesa, podemos ver cómo cambian el ancho y alto de la imagen al mismo tiempo. De la misma manera que en el caso anterior, si previamente hemos chequeado la casilla de Mantener proporciones , los tiradores nos limitarán a un área proporcional en cuanto a la relación de aspecto de la imagen original, dando como resultado en este caso la siguiente imagen recortada:

    imagen recortada

     

    Girar a la izquierda, girar a la derecha, voltear vertical y voltear horizontal

    girar derecha

    Girar a la derecha.

    voltear horizontal

    Voltear horizontal.

    girar izquierda

    Girar a la izquierda.

    voltear vertical

    Voltear vertical.

     

    Ajustar el matiz, la saturación y la luminosidad

    Basta con ajustar los niveles de los distintos parámetros para obtener el resultado deseado. En este caso podemos ver una previsualización de cómo quedará la imagen.

    ajustar matiz

     

    Ajustar el contraste

    Análogo al anterior, en este caso se ajusta el contraste de la imagen.

    ajustar contraste

     

    Tonos sepia

    tonos sepia

     

    La carpeta especial "-gestadm"

    Dentro de la carpeta de "Imagenes" existe otra llamada "-gestadm" siempre en primer lugar utilizada para la administración del sitio y que tiene los accesos restringidos a los administradores.

    Carpeta especial gestadm Todos los sitios en VUALÀ poseen esta carpeta especial.

    Servicio de Informática Gestor de contenidos Vualà


    Universidad de Alicante
    Carretera de San Vicente del Raspeig s/n
    03690 San Vicente del Raspeig
    Alicante (Spain)

    Tel: (+34) 96 590 3400

    Fax: (+34) 96 590 3464

    Para más información: informacio@ua.es, y para temas relacionados con este servidor Web: webmaster@ua.es

    Carretera San Vicente del Raspeig s/n - 03690 San Vicente del Raspeig - Alicante - Tel. 96 590 3400 - Fax 96 590 3464