Publishing an image slider En este video veremos cómo presentar

Publishing an image slider
En este video veremos cómo presentar un slider de imágenes y lo
publicaremos en la página inicial del sitio.
Antes de agregarlo, vamos a analizar las regiones que habilitaremos en esta
página, las vamos a habilitar y para cada una de ellas ajustaremos sus
propiedades.
Veamos la página inicial del sitio que nos propusimos armar a lo largo de este
curso.
Debajo del cabezal superior se quiere mostrar un slider de imágenes.
Para llegar a un diseño determinado muchas veces tendremos formas
diferentes de lograrlo.
Hay prácticas mejores que otras principalmente teniendo en cuenta obtener
páginas más livianas y hay formas que nos van a resultar más sencillas que
otras, sobre todo pensando en su posterior mantenimiento.
Mientras vamos construyendo el sitio que nos hemos propuesto, iremos
comentando algunas otras formas que también sería posible llegar al mismo
objetivo con sus ventajas o desventajas.
Vamos a diseñar la página “Inicio”
En la parte superior del diseñador de páginas se presenta el nombre de la
página que estamos diseñando.
Esta página actualmente está heredando todo lo que hemos definido en la
plantilla.
Cuando armamos la plantilla dijimos que la página inicial es la única página del
sitio que no va a heredar de la plantilla el área gris utilizada para publicar
información acerca del contenido de la página (Cabezal 4).
Veamos las regiones que están habilitadas en esta página utilizando el Panel
“Esquema” que se presenta encima del diálogo de propiedades.
Las regiones que están habilitadas actualmente son las mismas que están
habilitadas en la plantilla:
•
Cabezal 2
•
Cabezal 4
•
Columna 3
•
Pie 2
El cabezal 2 y el Pie 2 seguro van a estar presentes en esta página.
Mirando la página inicial del sitio objetivo, identificamos que entre el Cabezal 2
y el Pie 2 podríamos utilizar cinco regiones diferentes para llegar al diseño
planteado.
Esas cinco regiones entre el Cabezal 2 y el Pie 2 que van a estar habilitadas
serán:
•
Cabezal 3
•
Cabezal 4
•
Cabezal 5
•
Una Columna (cualquiera de las 5 columnas)
•
Pie 1
Las cinco regiones entre el Cabezal 2 y el Pie 2 van a tener las siguientes
propiedades:
•
100% de ancho
•
Alineación centrada
•
Y cada región tendrá el color ó imagen de fondo que corresponda
Si tuviéramos más áreas cada una con su fondo diferente, ¿cómo lo
podríamos resolver?
En una misma región podemos presentar las áreas con diferente fondo.
Pensemos cómo lograríamos este diseño si utilizamos una única región.
En lugar que cada región tenga su propio fondo, utilizaríamos una única imagen
de fondo donde la imagen arrancaría con el fondo del área superior, seguiría
con el fondo del área siguiente y así hasta el último área.
Y la imagen de fondo de la región tendría las siguientes características:
•
Su altura sería la suma de las alturas de cada área
•
Y sería de 1px de ancho que se repetiría en el ancho de toda la región
Vamos a habilitar las regiones necesarias para la página “Inicio” utilizando una
región para cada área de información.
Dijimos que entre el Cabezal 2 y el Pie 2 habilitaremos cinco regiones.
En este caso haremos lo siguiente:
•
Habilitamos el Cabezal 3
•
Dejamos habilitado el Cabezal 4
•
Habilitamos el Cabezal 5
•
Dejamos habilitada la Columna 3
•
Habilitamos el Pie 1
Ahora vamos a asignar las propiedades que conocemos para cada una de las
regiones.
Ninguna de las regiones que habilitamos para la página inicial va a heredar de
la plantilla ni sus GXportlets ni sus propiedades.
De este modo vamos a poder modificar los valores de las propiedades de cada
región con total libertad.
Al cabezal 3 le definimos su altura y alineación.
Al cabezal 4 le definimos su margen superior e inferior, color de fondo y
alineación.
Al cabezal 5 le definimos su altura, imagen de fondo y alineación.
La imagen de fondo tiene una trama repetitiva.
Para armar la página lo más liviana posible, recomendamos utilizar la imagen
más chica en ancho y altura necesaria y que se repita en toda la región.
A la columna 3 le definimos su altura, color de fondo y alineación.
Al pie 1 le definimos su margen superior e inferior, color de fondo y alineación.
Hacemos una vista previa de la página para ver cómo se presentan las regiones
con los ajustes que hemos realizado.
Ahora vamos a agregar el GXportlet correspondiente para presentar un “Slider
de imágenes”.
Al agregar este GXportlet en la página, se presentan imágenes de ejemplo para
que veamos el slider en el diseñador de páginas.
Si refrescamos la vista previa ó estuviéramos viendo la página en producción,
las imágenes de ejemplo no se presentarían.
Vamos a personalizar la presentación de este Slider para llegar al diseño que
nos hemos propuesto.
Al pasar el mouse por encima de alguna imagen, se están presentando flechas
a los costados para ir a la siguiente imagen o a la imagen anterior.
En el grupo “Flechas” hay varias propiedades para configurar la presentación de
las mismas.
En este caso las flechas las queremos ocultar.
Podríamos haber seleccionado que las flechas se muestren siempre, las
imágenes para presentarlas y la ubicación en que se mostrarán.
Tenemos disponibles varias propiedades para personalizar su presentación.
Veamos el sitio objetivo. En el Slider se quieren mostrar tres imágenes.
Seleccionamos las imágenes que queremos presentar. Estas imágenes ya están
disponibles en el sitio, las habíamos subido en el video que presentamos la
administración centralizada de las imágenes de diseño.
Las vamos a asignar, confirmamos la acción y hacemos clic en otra propiedad
para ver el cambio en el diseñador de páginas.
Refrescamos la vista previa de la página para ver cómo está quedando.
Una particularidad que tiene este slider es que cada imagen tiene un color de
fondo diferente y el slider se quiere mostrar al 100% del ancho del navegador
sin importar la resolución que se esté utilizando.
Si estamos viendo el sitio con una resolución de 1280px de ancho, no nos
daremos cuenta de esto ya que es el ancho de cada imagen, pero si lo estamos
viendo con una resolución mayor, veremos dónde comienza y termina cada una
de las imágenes.
Para que el slider se muestre al 100% de ancho independientemente de la
resolución de pantalla, vamos a definir para cada una de las imágenes del
slider, su imagen de fondo.
Se nos presentan las imágenes del slider y para cada una, seleccionamos la
imagen de fondo que corresponda. Estas imágenes también ya las hemos
subido al sitio.
Para que la funcionalidad de presentar el slider con ancho 100% funcione,
vamos a las propiedades de la región y para la propiedad “Distribución de
GXportlets” seleccionamos el valor “Ocupando el 100% del ancho”.
Refrescamos la vista previa y ahora sí se está viendo el fondo de las imágenes
como queríamos.
Vamos a continuar personalizando el slider.
Se está mostrando la descripción de cada imagen y en este caso no queremos
presentarla.
Los botones que indican cuántas imágenes hay, cuál es la imagen que estamos
viendo y nos permiten ir a una determinada imagen en cualquier momento, los
queremos mostrar encima de la imagen en la parte inferior.
Vamos a hacer estos dos cambios.
Ocultamos el título de las imágenes y dentro del grupo “Navegación”,
modificamos su ubicación y también modificamos el valor de la propiedad
“Margen superior” (Margen superior: 470)
Refrescamos la vista previa.
Nos está faltando que el Slider se muestre centrado.
Vamos a las propiedades del “Sector” y modificamos su Alineación.
Ahora sí tenemos el Slider como nos sugirió el diseñador.
En el diálogo “Esquema” podemos ver las regiones que tenemos habilitadas en
la página y también podemos ver dentro de cada región cada uno de los
GXportlets que contiene.
Si ampliamos el Cabezal 3, vemos que hay un elemento Multimedia que es el
Slider que estuvimos agregando. El nombre que se está presenta es el título del
sector.
Para trabajar en un sitio más fácil de mantener, les recomiendo modificar el
título del sector y utilizar nombres descriptivos.
Estuvimos viendo cómo publicar un slider y algunas de sus principales
propiedades a configurar.
También habilitamos las regiones necesarias en la página inicial del sitio y
ajustamos sus propiedades.
En el próximo video agregaremos una Galería de imágenes en el sitio que
estamos construyendo.