Paso 3 - Creación de la página

La increíble difusión de las cámaras fotográficas digitales y de los servicios en línea hace extraordinariamente simple publicar y compartir colecciones enteras de fotografías a través de la Web. Así, es posible publicar las fotos de familia para que las vean parientes y amigos lejanos, o bien crear álbumes y catálogos por afición o por razones de trabajo.

Con WebSite X5 es posible incluir galerías asombrosas a través de las que enseñar no solo nuestras fotografías, sino también nuestros vídeos. Cada Galería adopta efectos y métodos de navegación y visualización diferentes: por ejemplo, pueden presentar una barra de control, una secuencia o una rejilla de miniaturas. Independientemente del tipo que sean, todas las galerías utilizan JavaScript y se sirven específicamente del HTML5 y CSS3 para la realización de los efectos de visualización.

Algunas de las galerías disponibles proponen una rejilla o tira de miniaturas y utilizan la ventana ShowBox para mostrar las ampliaciones de las imágenes correspondientes. En estos casos, el visitante debe pulsar sobre una miniatura y se abrirá la imagen o el vídeo correspondiente en una ventana adicional superpuesta a la página principal. A continuación, colocando el ratón sobre la imagen abierta aparecen visualizados los botones que permiten al visitante pasar directamente a la imagen precedente/siguiente sin tener que regresar a las miniaturas.

La apariencia de la ventana de ShowBox se puede personalizar completamente a través de las opciones que hay en la sección Estilo de la ventana ShowBox del Paso 1 - Estilo de la Plantilla.

Los comandos necesrios para proceder a la creación de un Objeto de galería están divididos en las siguientes secciones: Estilo, Lista y Miniaturas.

Por medio de los comandos de esta sección se puede elegir el tipo de galería que se quiere realizar y definir sus ajustes generales.

Las galerías disponibles son las siguientes:

	Presentación clásica Es una galería en la que las imágenes y los vídeos se presentan en una secuencia, uno tras otro. Si se opta por este tipo, la modalidad de visualización de las imágenes depende del tipo de efecto de entrada. El paso de una imagen a otra puede ser dirigido con los comandos de la Barra de Controles. Dentro de la Barra de Controles es posible incluir la visualización de pequeñas miniaturas para permitir al visitante abrir inmediatamente las imágenes o los vídeos que le interesen.
	Galería horizontal En esta Galería se propone una serie de miniaturas, colocadas en sentido horizontal encima o debajo de la imagen en primer plano. Basta con situar el ratón sobre las miniaturas para que estas se desplacen a derecha o izquierda. Pulsando en una miniatura, la imagen o el vídeo correspondiente se muestra en primer plano. Las imágenes ampliadas son visualizadas en función del efecto de entrada que se hubiese configurado.
	Galería vertical Análoga a la que acabamos de ver, esta galería se distingue solo por el hecho de que las miniaturas se muestran en vertical, a la derecho o a la izquierda de la imagen en primer plano.
	Miniaturas También en esta galería se presenta una rejilla con todas las miniaturas. Pulsando sobre una miniatura, la imagen o el vídeo correspondiente se abre en primer plano en la ventana ShowBox.
	Miniaturas por recuadro Esta galería es análoga a la anterior, pero, sobre todo en el caso en el que las imágenes incluidas sean muchas, permite dividirlas en fichas, siendo posible definir el número máximo de filas de miniaturas que se pueden visualizar. El visitante podrá pasar de una ficha a otra, permaneciendo siempre en la misma página del sitio web, mediante una botonera al efecto.
	Miniaturas horizontales En esta galería aparece una única tira horizontal de miniaturas. Pulsando sobre una miniatura, la imagen o el vídeo es visualizado mediante la ventana ShowBox.
	Miniaturas verticales Análoga a la anterior, esta galería se distingue solo por el hecho de que las miniaturas se muestran en vertical.
	Rotación de objeto de 360° Galería útil para mostrar un objeto desde diferentes ángulos. Importando un número adecuado de imágenes y configurando correctamente la secuencia, se crea el efecto de ver rotar sobre sí mismo el objeto.

Según el tipo de galería seleccionado, se ofrecen Ajustes y opciones para gestionar los diferentes Comandos de navegación .

Ajustes:

Presentación clásica

Galería horizontal

Galería vertical

Rotación de objeto de 360°

▪	Tamaño máximo: define el tamaño máximo en píxeles de la anchura y la altura de que las imágenes pueden asumir. Dejando activa la opción Mantener relación, en el ajuste del tamaño se mantiene inalterada la proporción entre el ancho y el alto.

▪	Miniaturas visibles: permite predisponer el número de miniaturas que deben ser visualizadas junto a la imagen principal.

▪	Posición de las miniaturas: permite definir dónde se deben visualizar las miniaturas respecto a la imagen principal.

▪	Fuente de la descripción: define el tipo de carácter, el estilo y el tamaño del texto. Estos formatos se emplearán para las descripciones breves creadas con el campo Descripción de la sección Lista.

▪	Banda sonora: permite predisponer un archivo musical (archivo en formato .MP3) para reproducirlo como banda sonora durante la visualización de la galería.

▪	Reproducción automática: hace que la reproducción de imágenes y vídeos empiece automáticamente nada más se muestre la galería.

▪	Visualizar en orden casual: hace que las imágenes y los vídeos sean presentados no en función del orden de inserción, sino en base a una secuencia determinada aleatoriamente.

Comandos de navegación:

▪

Visualización de los botones: define si se deben mostrar botones de navegación directamente a los lados de la imagen principal de la galería, y cómo lo harán, para permitir al visitante pasar a la siguiente o a la anterior. Es posible hacer que estos botones sean Siempre visibles, No visibles (arranque automático) o Visibles mediante el paso del puntero del ratón.

▪	Estilo de los botones: establece el estilo de los botones que se muestran justo a los lados de la imagen principal de la galería, eligiendo entre los aspectos gráficos sugeridos.

▪

Mostrar barra de controles: activada por defecto, permite predisponer la visualización al paso del ratón de una Barra de Controles mediante la cual el visitante podrá controlar la navegación entre las imágenes y los vídeos de la galería. En su forma básica, la Barra de Controles presenta los botones

Iniciar la presentación,

Imagen anterior y

Imagen siguiente.

▪	Color: especifica el color de fondo de la Barra de Controles.

▪	Habilitar visualización a pantalla completa: añade el botón en la Barra de Controles que se muestra al paso del ratón. Pulsando en este botón, el visitante puede ver la galería a pantalla completa, esto es, de modo que ocupe toda la ventana del explorador.

▪

Mostrar miniaturas en la barra de controles: activa por defecto, esta opción añade una tira de miniaturas de las imágenes de la galería en la Barra de Controles que se muestra al paso del ratón. De este modo, el visitante no está obligado a consultar las imágenes en secuencia sino que puede visualizar inmediatamente las imágenes o los vídeos que más le interesan.

▪	Mostrar Indicador de posición: hace que sobre la Presentación se superponga un indicador gráfico que informa al Usuario sobre el número y/o la posición de las imágenes que la conforman.

▪	Estilo de Indicador: disponible en caso de que se haya activado la opción Mostrar Indicador de posición, permite elegir entre diferentes conjuntos gráficos para determinar el aspecto del indicador.

▪	Alineación: disponible en caso de que se haya activado la opción Mostrar Indicador de posición, da la posibilidad de elegir cómo alinear el indicador respecto a las imágenes de la Presentación.

Ajustes:

Miniaturas

Miniaturas por recuadro

Miniaturas horizontales

Miniaturas verticales

▪	Miniaturas visibles: define el número de miniaturas que se mostrarán.

▪	Filas por página: define el número de filas de la matriz en la que las miniaturas se organizarán.

▪	Mostrar imagen ampliada al hacer clic en ShowBox: activa en las miniaturas el enlace para la visualización en la ventana ShowBox de la imagen o del vídeo correspondiente.

▪

Tamaño máximo disponible solamente en caso de que esté activa la opción Mostrar imagen ampliada al hacer clic en ShowBox, define el tamaño máximo en píxeles del ancho y el alto de la ventana ShowBox. Dejando activa la opción Mantener relación, en el ajuste del tamaño se mantiene inalterada la proporción entre el ancho y el alto.

▪

▪	Estilo de los botones: establece el estilo de los botones que se muestran justo a los lados de la imagen principal de la galería, eligiendo entre los aspectos gráficos sugeridos.

Por medio de los comandos de esta sección se elabora la lista de imágenes y vídeos que se añadirán a la galería.

Todos los archivos ya importados se muestran en la Lista de archivos: al seleccionar un archivo de la lista, se podrá ver su vista previa en una ventana adicional.

En la Lista de archivos, para cada imagen y vídeo introducido, se indica la ruta de acceso del archivo, el efecto de aparición que se hubiese aplicado, una marca de selección para indicar la asociación de un enlace, y una descripción.

Los comandos disponibles para conformar el Objeto Galería son:

▪

Agregar... / Eliminar: añaden nuevos archivos o eliminan los seleccionados de entre los que fueron añadidos. Pueden ser importados archivos gráficos en los siguientes formatos: .JPG, .GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF. Además, pueden ser importados archivos de vídeo en los formatos: .FLV y .MP4.

Pulsando sobre el triangulito que hay en el botón Agregar... es posible visualizar un submenú con las siguientes opciones: Agregar imagen..., Imagen desde la Librería Online..., Agregar vídeo... y Agregar vídeo de YouTube/Vimeo....

Mediante la ventana que se abre con el comando Imagen desde la Librería Online... se muestra una colección de más de 400.000 imágenes de libre distribución entre las que es fácil elegir las que se desea añadir al Proyecto.

Mediante la ventana que se abre con el comando Agregar vídeo de YouTube/Vimeo... es posible especificar la dirección URL del vídeo publicado en portales como YouTube™ o Vimeo que se quiere insertar.

▪	Subir / Bajar: modifican el orden de visualización de los archivos ya añadidos en la Lista de archivos, desplazando hacia arriba o hacia abajo el archivo seleccionado.

▪	Editar...: abre el Editor de imágenes interno para editar la imagen seleccionada de la Lista de archivos.

En función del tipo de galería elegida, para cada imagen/vídeo añadido puede ser posible definir algunas Opciones:

▪

Enlace: establece un enlace en la imagen/vídeo seleccionado de la Lista de archivos. Pulsando sobre el botón

se abre la ventana Enlace mediante la que es posible elegir el tipo de acción además de las opciones relacionadas. En el caso de las galerías que usan miniaturas, el enlace así añadido sustituye a al de la imagen ampliada, aunque esté activada la opción Mostrar imagen ampliada al hacer clic en ShowBox.

▪	Efecto: asocia, mediante la ventana Propiedades de los efectos que se abre pulsando el botón un efecto de entrada, movimiento y zoom a la imagen o vídeo seleccionados de entre los que hay en la Lista de archivos.

En versiones del explorador de internet no compatibles con HTML5 y CSS3, las galerías en HTML5 funcionan correctamente pero podría suceder que no se reprodujesen todos los efectos visuales aplicados a las imágenes. En estos casos, los efectos visuales no compatibles se sustituyen automáticamente con el efecto Difuminado.

▪	Descripción: campo para introducir un texto descriptivo para la imagen o vídeo seleccionado de la Lista de archivos. El texto de la descripción aparece en la parte inferior de la ventana que muestra la imagen o el vídeo ampliado.

Por medio de los comandos de esta sección se define el aspecto gráfico de las miniaturas de las galerías en las que las hay.

La miniatura es una versión reducida de la imagen o del vídeo introducido en la galería y es creada automáticamente por el Programa. Para hacerlas más bonitas, las miniaturas se presentan dentro de marcos que las hacen similares a diapositivas, fotogramas de una película, post-it, etc.

Para definir el aspecto de las miniaturas se puede utilizar:

▪	Imagen predeterminada: propone una lista de marcos predefinidos, de los que se puede seleccionar el que se desea aplicar a las miniaturas.

▪	Imagen personalizada: permite abrir el archivo gráfico (en formato .JPG, .GIF, .PNG, .BMP, .PSD, .TIF, .DIB, .PCX, .RLE, .TGA, .WPG) correspondiente al marco que se desea utilizar.

Para crear un nuevo marco basta preparar la imagen y guardarla en un archivo para este fin: es preferible que la imagen del marco sea cuadrada y, si es necesario mantener una transparencia externa, guardarla en formato .PNG.

Para las miniaturas también es posible modificar las siguientes Opciones:

▪	Margen exterior de las miniaturas: define el margen que debe mantenerse entre una y otr Miniatura.

▪	Margen externo a la imagen (%): esta opción permite definir el margen que se deberá guardar entre la imagen de la miniatura y los bordes del marco.

▪	Activar variación de color: especifica la tonalidad del color del marco de las miniaturas. Básicamente se aplica un efecto "coloreado" a la imagen del marco para cambiarla hacia el color deseado.

El efecto referido a la variante de color puede ser de utilidad solo para marcos que no sean de color blanco o negro: en estos casos, de hecho, el "coloreado" no aporta ninguna variación de tono.

Las galerías pueden abrirse también mediante un enlace al efecto insertado dentro de las páginas: para más información, ver Enlace.