ITECH Blog

Entrañas Sistemáticas

Galeria de Imagenes (Spry Dreamweaver CS4)

with one comment

Esta es una practica en Dreamweaver CS4 donde usare las herramientas de Spry que no estan presentes en versiones no CS de Dreamweaver, esta practica tiene sus inicios del post que trata el mismo tema de este blog, tema que se encuentra dividido en dos partes parte1 y parte2 pero aqui se tratara completo. La unica continuidad que se anexaria a esta practica seria otro ejemplo algo mas enriquecido o atractivo de mostrar esta interaccion.

La practica a comentar se trata de hacer una pagina html donde mostraremos una imagen en tamano original o ajustado en ancho y alto, imagen la cual tendra un encabezado o titulo y una descripcion al pie. Debajo de esta imagen tendremos otras imagenes en miniatura, que al irla seleccionando se nos cambiara la imagen en tamano mayor por la seleccionada, cargandose la imagen con su titulo y descripcion, esto en todo momento sin en ningun momento refrescar la pagina, lo cual es la idea.

No soy partidario de un frecuente uso de Dreamweaver, herramienta que agilice la labor de desarrollo web, pero no te permite ser tan programador como lo harias trabajando con un editor o framework de codigo web (html, php, etc..) ya que en Dreamweaver inicialmente partes en modo de disenar todo visualmente y quien realmente programa es la aplicacion, pero que de igual forma quienes trabajan en Dreamweaver estan obligados en ocasiones a manipular e inyectar codigo entre lineas para terminar de retocar lo que se necesita que haga la web. Pero Dreamweaver mete mucha basura o codigo demas el cual necesita para gestionarse a si mismo, donde en ocasiones en caso de presentarse problemas de conexion, algunos simplemente borran y vuelven a hacer sus pasos a punta de click! por medio de las herramientas de dreamweaver y algunos otros revisando y corrigiendo el codigo (en caso de entenderlo y saber que estan buscando y donde mirar).

Vamos a hacernos una pagina XML la cual contendra el titulo, el nombre del archivo de imagen y la descripcion de la imagen, ese archivo XML sera del que un dataset de Spry se vinculara o relacionara, y estos objetos de Spry en nuestra pagina html sera lo que nos mostrara esta galeria de imagenes.

Usa o baja de internet algunas imagenes y creamos el archivo xml (por ejemplo):

<imagenes>
  <item id="1">
     <titulo>Titulo de la imagen 1</titulo>
     <imagen>img1.jpg</imagen>
     <parrafo>Descripcion de la imagen 1.</parrafo>
  </item>

  <item id="2">
     <titulo>Titulo de la imagen 1</titulo>
     <imagen>img2.jpg</imagen>
     <parrafo>Descripcion de la imagen 1.</parrafo>
  </item>

  <item id="3">
     <titulo>Titulo de la imagen 1</titulo>
     <imagen>img3.jpg</imagen>
     <parrafo>Descripcion de la imagen 1.</parrafo>
  </item>

  <item id="4">
     <titulo>Titulo de la imagen 1</titulo>
     <imagen>img4.jpg</imagen>
     <parrafo>Descripcion de la imagen 1.</parrafo>
  </item>

  <item id="5">
     <titulo>Titulo de la imagen 1</titulo>
     <imagen>img5.jpg</imagen>
     <parrafo>Descripcion de la imagen 1.</parrafo>
  </item>

  <item id="6">
     <titulo>Titulo de la imagen 1</titulo>
     <imagen>img6.jpg</imagen>
     <parrafo>Descripcion de la imagen 1.</parrafo>
  </item>

<imagenes>
Como ya ves, tu mismo creas o te inventas la sintaxis en un XML, ya que podria poner <pepe> y mientras haya un </pepe> despues, se entendria que es la apertura y cierre de llaves de un objeto contenedor de algo, lo de <item> puede haberse puesto cualquier cosa, tambien en vez de <imagenes></imagenes> pudimos haber puesto <fotografias></fotografias> si quisiesemos y <parrafo></parrafo> por alguna otra cosa <descripcion></descripcion>, ojala fuese asi en todos los lenguajes, pero habria un libre albedrio donde no se respetaria nada standar o default y tal vez no seria bueno, donde sin importar si yo hablo espanol, y otras personas ingles o chino mandarin, la sintaxis seria igual y no tanto al gusto de cada quien, solo la estructura organizacional del algoritmo pero no su sintaxis.

Ok, ya tenemos algunas imagenes en una carpeta dentro de nuestra carpeta del proyecto web, algunas personas meten todo lo que sea imagenes en una sola y misma carpeta imagenes o image o img (como la desees llamar) pero lo correcto o deber ser es separar o agrupar las imagenes, si tienes imagenes de un evento, guardalas en imagenes/eventoX/asi tendras organizadas las imagenes y no revueltas en la carpeta raiz de imagenes con muchas otras, es mejor trabajar organizadamente.

Creamos ahora un archivo html (migaleria.html o galeria.html) o como gustes llamarla y nos pasamos a la barra de herramientas de Spry (spry son las herramientas de AJAX que ya Dreamweaver CS nos brinda), CS3 y CS4 lo tienen, pero desconozco si CS2, y CS ya lo hayan tenido incluido, versiones previas a CS no disponen de estas herramientas spry.

Selecionamos conjunto de datos spry para llamar al xml:img1

Seleccionamos el tipo de datos el cual sera XML, el dataset lo podemos llamar dsImagenes o como desees y buscamos el archivo XML con el boton Examinar:

img2

Pulsamos el boton Listo o Done (dreamweaver en ingles o espanol).

Fijemosno en algo un momento, me ha pasado que al hacer esto del xml al cerrar la ventana indicada previamente termino viendo en el menu derecho (seccion Vinculaciones) de Dreamweaver lo del xml pero incompleto:

img3En este menu nos faltan titulo, imagen y parrafo los cuales vamos a usar, desconozco porque pasa esto, asi que de no estar completa la lista, en esta ventanita donde vemos el boton + y el – selecionamos nuestro dataset dsImagenes y pulsamos el boton del signo – para eliminarlo y lo volvemos a hacer por el boton de la barra o por el signo +.  En esta ocasion en la que volvemos a hacer lo del dataset spry con nuestro XML, seleccionamos item y cerramos la ventana (boton Listo).

img4

Ahora si ya vemos los objetos spry relacionados a nuestro archivo xml que nos faltaban anteriormente:

img5No se porque pasa esto pero si no tenemos todos los <objeto> del xml presentes, no podremos seguir con la practica.

Ahora vamos a colocar una region de spry en nuestra pagina html:

img6

img7

Esta region spry podria ser a entender, como algo parecido a cuando colocamos una region de formulario <form> y demas cosas de formulario dentro, un contenedor donde solo ahi dentro puede coexistir los demas objetos Spry para su correcto o rganizado funcionamiento.

Vamos a arrastrar a la region spry el objeto imagen de la lista donde tenemos los objetos del xml hacia esta region.

img8

img9

Ahora tendremos que manipular un poco el codigo, ya que este objeto spry {imagen} lo necesitamos como un objeto de imagen, sino, los que nos mostrara la pagina al cargarla sera el nombre del archivo.jpg y no la imagen.

Tenemos esto:

<body>
<div spry:region="dsImagenes">{imagen}</div>
</body>

Y lo cambiamos a esto: (agregamos el <img src=…{imagen}> para que el objeto sea de tipo imagen)

<body>
<div spry:region="dsImagenes"><img src="../proyectoweb/img/img1/{imagen}" /></div>
</body>

Si cargamos nuestra pagina html ya deberia verse al menos la primera imagen de la galeria, ahora vamos a colocarle su titulo y su descripcion provenientes de nuestro archivo xml.

Al codigo le agregamos dos lineas, una antes de nuestro <div…></div> y otra luego de esa linea, quedando asi:

<body>
<h1 spry:detailregion="dsImagenes"> aqui falta algo </h1>
<div spry:region="dsImagenes"><img src="../pgaleria/img/img1/{imagen}" /></div>
<p spry:detailregion="dsImagenes"> aqui falta algo </p>
</body>
 

Con un <h1></h1> vamos a colocarle su encabezado o titulo a la imagen y con un simple <p></p> de parrafo su descripcion debajo de la imagen, con spry:detailregion=”nuestro_dataset” como se observa en el codigo arriba, solo nos falta bien sea escribirlo o arrastrar del menu de los objetos spry del xml lo que va en aqui falta algo.

img10El codigo quedaria entonces asi:

<body>
<h1 spry:detailregion="dsImagenes"> {dsImagenes::titulo} </h1>
<div spry:region="dsImagenes"><img src="../pgaleria/img/img1/{imagen}" /></div>
<p spry:detailregion="dsImagenes"> {dsImagenes::parrafo} </p>
</body> 

Si volvemos a cargar la pagina html en nuestro navegador veremos que ahora con la imagen tenemos su titulo y su descripcion (de esa imagen) proveniente de nuestro archivo xml.

Ahora antes del </body> vamos a agregar otra linea algo mas larga, la cual es esta:

<img src="img/img1/{imagen}" class="thumb" title="{titulo}"  onclick="dsImagenes.setCurrentRow('{dsImagenes::ds_RowID}')"
onmouseover="MM_effectAppearFade(this, 500, 50, 100, true)" onmouseout="MM_effectAppearFade(this, 500, 100, 50, false)" /> 

En esta linea o agregado vemos en negrita los objetos spry de nuestro xml, si cargamos nuevamente la pagina veremos que ahora debajo aparecen las demas imagenes, las cuales procederemos a ponerlas en miniatura.

Para que las imagenes debajo se vean en miniatura debemos colocar este codigo antes del </head> de la pagina, ya que el codigo que este antes del <body> o bien sea entre <head></head> se cargara antes que la pagina, por eso el codigo javascript siempre se coloca antes del <body> o entre <head></head> para que al ver la pagina en el navegador ya a cargado este codigo, asi que puede ser luego o antes del codigo javascript ponemos esto:

<style type="text/css">
body{ font-family:Georgia, "Times New Roman", Times, serif}
h1{ margin:0 ; font-size:22px; color:black}
p{ font-size:12px}
.thumb{
width:5%;
margin:2px;
cursor: pointer;
-moz-opacity:.50;
opacity:.50;
}
.imagen{ width:450px}
</style> 

Si cargamos la pagina ahora vemos que las imagenes debajo estan en miniatura, pero vemos que al seleccionar otra imagen, si cambia el titulo y el parrafo pero no la imagen. Esto es porque se nos paso modificar otra cosa en el codigo que esta entre <body></body> en los <div>.

Cambiamos solo lo que indico en rojo:

<body>
<h1 spry:detailregion="dsImagenes"> {dsImagenes::titulo} </h1>
<div spry:region="dsImagenes"><img src="../pgaleria/img/img1/{imagen}" /></div>
<p spry:detailregion="dsImagenes"> {dsImagenes::parrafo} </p>
<div spry:repeat="dsImagenes" spry:region="dsImagenes">
<img src="img/img1/{imagen}" title="{titulo}"  onclick="dsImagenes.setCurrentRow('{dsImagenes::ds_RowID}')" onmouseover="MM_effectAppearFade(this, 500, 50, 100, true)" onmouseout="MM_effectAppearFade(this, 500, 100, 50, false)" />
</body>

Por solo lo que indico en azul:

<div spry:detailregion="dsImagenes"><img src="../pgaleria/img/img1/{imagen}" /></div>

Igual como todos los demas <div spry:detailregion….> recordemos que esa linea nos la coloco Dreamweaver al arrastrar el objeto {imagen} al cual lo editamos en el codigo agregandolo en un <img> y nos falto editar esta parte que se menciona ahora.

En diseno nuestra pagina se ve asi:

img11

Se recuerda que las imagenes deben ser del mismo tamano, podria ajustarse su ancho y alto en algun editor de imagenes pero tambien (y en caso de ser muchas) colocar un width=”numero” en el codigo del <img>

<div spry:detailregion=”dsImagenes”><img src=”../pgaleria/img/img1/{imagen}” width=”300″ /></div>

Ya en este punto al cargar la pagina ya deberia verse la idea de esta practica, una galeria de imagenes donde seleccionamos alguna de las miniaturas y se nos muestra dicha imagen en un tamano mayor con un titulo y una descripcion.

Advertencia:

Algo importante a comentar es que esta practica ha funciona perfectamente en un PC con WinXP con Dreamweaver CS4 y se ha usado como plataforma web EasyPHP5.3 para las pruebas en localhost. Pero al ver esta practica en un sistema Linux donde ya he trabajado otras cosas en el ambito web e igual al subir esto a un hosting free, la imagen en tamano original o mayor, no aparece, solo las imagenes en miniatura y solo el titulo y descripcion de la imagen en tamano mayor pero no aparece la imagen. Algo de los 3 archivos javascript (no creo que el css) que crea Dreamweaver en una carpeta llamada SpryAssets no interactua bien fuera del entorno aislado y controlado local. Esto es otra razon mas por lo que prefiero escribir yo mismo el codigo o copy+paste codigos de terceros, incluir los archvos .js y editar un poco el codigo uno mismo que por la asistencia de Dreamweaver.

Anuncios

Written by jocdz

noviembre 7, 2009 a 4:24 pm

Una respuesta

Subscribe to comments with RSS.

  1. hola, me gustaria saber si me pueden a yudar a crear una galeria de imagenes en la parte superior de mi web, lo estoy editando en dramweaver 8. agradesco su ayuda gracias.

    gabriel

    marzo 29, 2010 at 1:27 am


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: