Las imágenes son uno de los elementos más utilizados en la creación de una página web. Entre otras cosas, pueden servir para ilustrar un concepto, para mostrar un producto, para transmitir un mensaje o, simplemente, como elemento decorativo. En cualquier caso, las imágenes son importantes porque ayudan a definir el aspecto global del sitio web y a hacer que sea percibido como algo bonito, cuidado y profesional.
WebSite X5 da la posibilidad de importar todos los formatos gráficos más importantes y pone a disposición un funcional Editor de imágenes para realizar todas las operaciones de retoque fotográfico más comunes: corte, rotación, corrección, añadido de máscaras, filtros y marcos. Además, permite trabajar las imágenes para obtener espectaculares visiones panorámicas y efectos zoom.
Es importante subrayar que WebSite X5 afronta también el problema de la copia no autorizada de las imágenes de Internet, poniendo a disposición un sistema de protección que impide acceder al archivo original y que puede contemplar la aplicación de marcas de agua e indicación de copyright.
Los comandos necesarios para proceder a la creación de un Objeto Imagen están articulados en las siguientes secciones: General, Visualización y SiteMap.
Por medio de los comandos de esta sección se pueden importar archivos gráficos y proceder a la edición de imágenes.
WebSite X5 permite importar todos los formatos gráficos más difundidos (.JPG, .GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF) seleccionando simplemente el recurso que se desea utilizar entre los presentes en local en el ordenador o, como alternativa, en línea directamente en Internet. Para especificar qué Archivo local en PC añadir se puede pulsar en los siguientes botones:
|
Abre la ventana Imagen desde la Librería Online..., que permite acceder a una Librería online con más de 400.000 imágenes de libre distribución entre las que elegir.
|
|
Abre la ventana Seleccionar archivo , que permite explorar las carpetas de los discos del PC.
|
La vista previa de la imagen importada se muestra en el recuadro Vista previa. Pulsando el botón Editar... que se encuentra bajo la vista previa es posible abrir el Editor de imágenes interno para editar la imagen importada.
Para la Imagen insertada se pueden definir una serie de Propiedades:
| ▪ | Título: es el título de la imagen. En el código HTML de las páginas, el texto introducido aquí se asignará al atributo "title" del tag <img>. |
| ▪ | Texto alternativo: es el texto que se muestra como alternativa a la imagen cuando esta no puede ser visualizada. En el código HTML de las páginas, el texto introducido aquí se asignará al atributo "alt" del tag <img>. |
|
El Título y el Texto alternativo son dos parámetros que deben ser valorados y elaborados con atención, ya que son importantes tanto para la accesibilidad como para la optimización de los sitios web.
|
| ▪ | Enlace: predispone un enlace para la imagen. Pulsando el botón  se abre la ventana Enlace mediante la cual es posible elegir el tipo de acción además de la acción concreta que se desea realizar. |
|
Por medio de los comandos de esta sección se puede configurar cómo se mostrará la imagen importada. WebSite X5, de hecho, permite también lograr imágenes panorámicas y/o con efectos de zoom y de desplazamiento.
Los Modo de visualización disponibles son:
|
Redimensionamiento automático de la imagen: activa por defecto, cambia automáticamente el tamaño de la imagen para adaptarla a la celda de la Rejilla de maquetación que la contiene.
|
|
Ampliar y mover manualmente la imagen: hace que la imagen se pueda ampliar con un clic del ratón hasta alcanzar el tamaño previsto por el factor de zoom que se ha definido. Una vez ampliada, la imagen también podrá ser desplazada de modo que pase al primer plano el detalle deseado. En este caso en concreto, el desplazamiento se deberá hacer manualmente, pulsando sobre la imagen y arrastrándola hasta la posición deseada.
Para lograr este efecto el tamaño de la imagen se reduce primero al de la celda de la Rejilla de maquetación reajustándolo en función del factor que se ha definido para el zoom inicial (si se elige como Modalidad desplazamiento el Desplazamiento libre) o proporcionalmente a la Altura establecida (si se establece como Modalidad desplazamiento la opción Vista panorámica horizontal o la opción Vista panorámica vertical). De esta manera, la imagen resultará ser más grande que el área de visualización y podrá moverse en su interior.
|
|
Ampliar y mover automáticamente la imagen: análoga a la anterior opción, se distingue por el hecho de que el desplazamiento se produce simplemente acercando el ratón a los bordes de la imagen.
|
Seleccionando como Modo de visualización el Redimensionamiento automático de la imagen, es posible modificar los siguientes Ajustes:
| ▪ | Calidad: es el nivel de calidad que se desea mantener al guardar la imagen en .JPG. Todas las imágenes importadas son automáticamente convertidas al formato .JPG o, en caso de que se predisponga una transparencia, al formato .PNG. En caso de que sean guardadas en .JPG, cuanto más alto sea el factor de compresión predispuesto, menor será la calidad mantenida. |
|
Se recomienda insertar archivos gráficos en formato .JPG, .GIF o .PNG. Todas las imágenes insertadas con formato distinto de .JPG, .GIF y .PNG son convertidas automáticamente al formato JPG, en base al nivel de compresión especificado. La conversión a .JPG o, en el caso de las imágenes en las que se ha predispuesto una transparencia, a .PNG; se efectúa aunque la imagen tenga un tamaño mayor respecto al de la celda de la Rejilla de maquetación que la contiene y si es modificada mediante el Editor de imágenes.
En el resto de los casos la imagen será copiada tal cual es, para mantener el efecto de transparencia aplicado a las imágenes en formato GIF.
|
| ▪ | Método de reducción: es el método que se aplica para la reducción del tamaño (ancho y alto) de las imágenes. Es posible escoger entre: |
| - | Bilinear (más rápido): es el método de reducción más rápido pero la calidad de la imagen es inferior al de los otros métodos. |
| - | Decimate (medio): es el método que permite obtener prestaciones intermedias en cuanto a velocidad y a calidad en relación a los otros métodos disponibles. |
| - | Bicubic (preciso pero lento): es el método de reducción más lento pero garantiza una calidad superior en la imagen. |
| ▪ | Carga la imagen solo cuando se muestra en la página: hace que la imagen no se cargue inmediatamente tras la apertura de la página en la que está incluida sino que lo hace solo en el momento en el que debe efectivamente mostrarse. En este caso, la imagen se muestra progresivamente, con un agradable efecto de fundido. |
|
Utilizando la opción Carga la imagen solo cuando se muestra en la página es posible hacer que las imágenes de una página no se carguen todas a la vez, sino a medida que deben ser visualizadas: De esta manera se reduce el tiempo de apertura de la página y la navegación es por tanto más rápida.
|
|
Seleccionando como Modo de visualización el Ampliar y mover manualmente la imagen o el Ampliar y mover automáticamente la imagen, es posible modificar los siguientes Ajustes:
| ▪ | Modalidad desplazamiento: permite especificar en qué dirección se puede desplazar la imagen manual o automáticamente. Las opciones disponibles son: |
| - | Desplazamiento libre: la imagen puede ser arrastrada tanto en sentido horizontal como vertical. En este caso es preciso especificar el valor del Zoom máx: por ejemplo, un factor de ampliación ajustado al 200% duplica el tamaño original de la imagen. |
|
|
Imagen introducida
|
Imagen con efecto
|
| - | Vista panorámica horizontal: la imagen puede ser arrastrada solo en sentido horizontal. Para aprovechar al máximo este efecto es preciso insertar imágenes con la base mucho mayor que la altura. En este caso es preciso especificar el valor en píxeles de la altura de la imagen en el campo Altura. |
|
|
Imagen introducida
|
Imagen con efecto
|
| - | Vista panorámica vertical: la imagen puede ser arrastrada sólo en sentido vertical. Esta vez es preciso utilizar imágenes con una altura mucho mayor que la base y ajustar en el campo Altura el valor en píxeles de la altura que se desea mantener para la celda de la Rejilla de maquetación correspondiente. |
|
|
Imagen introducida
|
Imagen con efecto
|
| ▪ | Zoom máx: disponible solo para la modalidad de desplazamiento Desplazamiento libre, permite especificar el factor de ampliación que se debe aplicar a la imagen para que pueda resultar más grande que el área en la que se mostrará. En efecto, si la imagen no fuese ampliada no podría ser arrastrada. |
| ▪ | Altura: disponible solo para la modalidad de desplazamiento Vista panorámica horizontal y Vista panorámica vertical, define, en el primer caso, el valor en píxeles de la altura de la imagen, y en el segundo la altura de la celda de la Rejilla de maquetación en la que se muetra la imagen. |
| ▪ | Amplía la imagen: activa por defecto, esta opción hace que la imagen pueda ser ampliada y reducida por el visitante mediante la ruedita del ratón. Al abrir la página, la imagen se muestra con su tamaño original y el icono presente en el ángulo inferior derecho indica la posibilidad de hacer zoom. Por medio de la ruedita del ratón la imagen se amplía hasta el factor Zoom máx establecido. |
| ▪ | Mostrar la Barra de zoom: está disponible solo si se activa la opción Amplía la imagen, permite ver en la ventana Imagen una barra mediante la cual el usuario podrá regular y predisponer el zoom. |
| ▪ | Mostrar el navegador: pone a disposición del visitante un navegador, esto es una pequeña ventana mostrada sobre la imagen que contiene una miniatura de la imagen misma. La función del navegador es señalar mediante un recuadro la parte de la imagen que se está viendo en cada momento. Este recuadro se puede arrastrar en el navegador, hacerlo equivale a desplazar manualmente la imagen. Desplazando el ratón al exterior de la ventana Imagen, el navegador desaparece con un efecto de movimiento en salida hacia arriba. |
| ▪ | Activar movimiento continuo automático: hace que la imagen siga desplazándose automáticamente durante todo el tiempo en el que es visualizada. Puede ser útil para hacer entender al visitante que la imagen puede ser ampliada. El visitante puede retomar el control del movimiento usando el ratón, a la vez que puede hacer zoom usando la Barra de Zoom, si está disponible, o la ruedita del ratón. |
Solo si para la imagen en la que se está trabajando ha sido configurado el Redimensionamiento automático de la imagen como Modo de visualización es posible predisponer un Efecto mouseover por paso del ratón:
| ▪ | Efecto mouseover por paso del ratón: define el tipo de efecto que se debe reproducir al paso del ratón sobre la imagen, eligiéndolo entre los que se proponen. |
| ▪ | Ajustes: Hay varios en función del Efecto mouseover por paso del ratón seleccionado. Permiten configurar los parámetros que definen el efecto (por ejemplo, el color y el grosor del borde para el efecto "Borde coloreado"). |
Por último, es posible usar las opciones de Protección para intentar impedir la copia no autorizada de las imágenes:
| ▪ | Proteger imagen contra copias: protege la imagen impidiendo que pueda ser fácilmente copiada usando comandos como "guardar imagen como..." que están disponibles en los menús contextuales de los diferentes exploradores. |
|
Por medio de los comandos de esta sección se puede especificar alguna información adicional sobre la imagen, útil para completar el SiteMap del Sitio.
Ante todo es preciso activar la opción Agregar imagen al SiteMap: con ello, el SiteMap del Sitio que crea automáticamente WebSite X5 (ver Crear un SiteMap automáticamente en Estadísticas, SEO y Código | General) se completa con la información referida a la imagen. Una vez hecho esto, es necesario definir los siguientes ajustes:
| ▪ | Título: (parámetro opcional) especifica un título para la imagen. |
| ▪ | Descripción breve: (parámetro opcional) especifica una descripción o pie para la imagen. |
| ▪ | Posición geográfica (por ejemplo, dirección, ciudad, etc.): (parámetro opcional) especifica datos como dirección, ciudad o país, que son útiles para localizar geográficamente la imagen. |
| ▪ | URL de la licencia: (parámetro opcional) especifica el URL del archivo que contiene la licencia de uso de la imagen. |
|
No es posible insertar en el SiteMap del Sitio imágenes para las que ha sido activada la protección (ver Proteger imagen contra copias en la sección anterior Visualización).
|
|
Best practice:
