Galería de imágenes FLASH

Galería realizada 100% en FLASH, la galería ofrece una forma agradable e interactiva de visualizar fotografías, imágenes, gráficos, cuadros digitales. Por su diseño puede adaptarse a prácticamente cualquier interés (educativo, cultural, artístico, etc.) Una mirada rápida de la galería se puede apreciar en la siguiente imagen que ha sido tomada del DEMO el cuál junto con los fuentes, está ubicado en la parte inferior. Galería de imágenes FLASH

Esta galería con las dimensiones originales (W 766 px, H 580 px), te recomendamos no añadir más de 30 fotografías digitales. Por otra parte podrás cambiar el fondo de la animación si es necesario para acoplarla a tu sitio web, en este ejemplo lo tienes en negro (#000000), pues combina con todo.

Como ustedes saben, los fuentes dicen más que mil palabras, así que como en todos los manuales, en el inferior pueden descargarlo,

Sin embargo, realizaremos un poco más de comentarios sobre la galería
La utilidad de seguro es cambiar las imágenes y/o añadir nuevas, para lo cuál debemos seleccionar la capa imagenes y seleccionar el segundo fotograma, como se indica en el gráfico



Si ingresan al demo podrán fijarse que son 2 los efectos principales al seleccionar una imagen, es decir; al seleccionar una de las miniaturas ocurren 2 cosas, con el clic se mantiene fija la imagen actual mientras la animación va mostrando la imagen que hemos seleccionado, si estamos en la imagen1 y seleccionamos la misma imagen 1 es posible que el efecto no se note, pero si estamos en la imagen1 y seleccionamos la imagen 2, ocurre que la imagen1 se mantiene fija mientras aparece la segunda imagen lo cuál crea lo agradable de la animación.

Es importante considerar la transición que efectúan las imágenes porque de no tenerlo en cuenta, en los cambios que realicemos a los fuentes no podremos tener el efecto deseado.
Mostrado en gráficos, lo que debemos hacer es lo siguiente:

Después de ingresar en el segundo fotograma de la capa imagenes, se mostrará una capa de nombre imagenes2 a través de la cual personalizaremos la galería. En el primer fotograma de la capa imagenes2 se encuentran para el caso de este manual las 4 imagenes que se animan, y en el segundo fotograma de la misma capa están las imágenes que sirven para el efecto de transición que en realidad son las mismas anteriores.



Para realizar los cambios y personalizar la galería con nuestras imágenes, fotos o gráficos, debemos realizar los cambios en los imágenes que están en los 2 fotogramas.

Ingresando al primer fotograma, encontrarán un aspecto similar al siguiente:



Cada uno de los fotogramas indicados en la imagen anterior representará una fotografía, gráfico o imagen que ustedes deseen mostrar, de este modo para cambiar las imágenes primero las importamos a la librería dando File -> Import -> Import to Library y las reemplazamos por las existentes.

Posterior a eso, y siguiendo en análisis que estamos realizando, en el segundo fotograma procedemos de forma exactamente igual

Pueden si lo desean agregar música a su galería, lo que sin lugar a duda mejorará la presentación, pero no debemos olvidar que el peso del archivo resultante también ira creciendo.

En el demo a continuación podrán visualizar la galería en funcionamiento.

Retornar al INICIO        Visualizar DEMO        Descargar Fuentes

Clic en en enlace: Clic aquí

Instalación y Configuración de PHP OpenIsis

Lo que tratamos es poner a su consideración una de las muchas opciones para aplicaciones bibliográficas utilizando por catálogos de bibliotecas pequeñas y medianas. Par al final poner a su consideración la utilización de FusionCharts en la reportería. En definitiva el escenario se plantea de la siguiente manera:

Por una parte tenemos nuestras bases de datos ISIS en las cuales se almacenan los registros de cada libro, revista, publicación, etc., de una biblioteca en forma de catálogo. Inicialmente eso es suficiente si estamos en una biblioteca en la que nos proveen de un computador para buscar la obra de nuestro interés.
Sin embargo, podría ser necesario proveer a los usuarios el servicio de búsqueda de nuestros catálogos (Que están en formato ISIS), a través del internet. Objetivo
Poder visualizar las bases de datos ISIS por medio de un navegador WEB a través del internet.

Alcance
Instalar y configurar PHP para que soporte el manejo de bases ISIS, verificándolo con las directivas del archivo de configuración de PHP php.ini

Prerrequisitos

• Sistema Operativo Linux 32 btis
• PHP
• Es recomendable tener instalado todas las librerías de desarrollo, para no tener problemas con las dependencias en el momento de compilar PHP-OpenIsis, para esto al instalar CentOS en la opción Development Libraries que está dentro de Development seleccionamos todos los paquetes.

Para esta instalación, utilizamos la distribución CentOS 5.2 y PHP 5.1.6, adicional el Server Apache es el que viene en la distribución de CentOS 5.2

Para verificar que tienes instalado PHP, puedes digitar el comando rpm –qai php en la consola, como lo indica la siguiente imagen:



Si no se tiene instalado el paquete, deberemos instalarlo antes de continuar.
Una vez realizada la verificación continuamos con la instalación

Instalación
Para poder trabajar en bases de datos ISIS desde PHP necesitamos la librería OpenISIS openisis.0.9.1,en la parte final del documento podrán descargar el paquete completo.

Ingresamos a la ubicación de la descarga para verificar que permisos tenemos antes de descomprimir
cd /root/Desktop/
ls -l



Se puede observar que el paquete descargado openisis.0.9.1.tgz, tiene únicamente permisos de lectura, por lo que le asignamos permisos de ejecución y escritura para el usuario root, de la siguiente manera:
chmod +xw openisis.0.9.1.tgz
ls -l



Creamos la carpeta openisis.0.9.1 ("recomendamos la ruta /root/Desktop/") e ingresamos:
mkdir openisis.0.9.1
Copiamos el paquete descargado en la carpeta creada:
cp -f openeisis.0.9.1.tgz openisis.0.9.1
Ingresamos al directorio:
cd openisis.0.9.1
Descomprimimos el paquete:
tar -xvf openisis.0.9.1.tgz

Dando un ls -l podremos visualizar todos los archivos extraídos.

En este punto debemos proceder a compilar la librería, sin embargo debemos conocer que por defecto la limitación de búsqueda de registro es 1000, es decir si en alguna búsqueda existen más de 1000 registros como resultado, solo se mostrarán los primeros 1000.

Para romper esta limitación "si usted lo considera necesario", se debe editar el archivo openisis.h, para esto procedemos de la siguiente manera:

Estando ya ubicados en la carpeta donde se descomprimió el paquete openisis.0.9.1.tar, abrimos el archivo openisis.h para editarlo.

vi opensis.h

Buscamos la línea #define OPENISIS_SETLEN 1000
:/ #define OPENISIS_SETLEN 1000

Cambiamos el valor de 1000 por el que deseemos, puede ser mayor o menor.
Sin embargo debemos tener cuidado, mientras más grande sea este número necesitaremos más recursos de la computadora. Incluso si los registros que se tienen son muchos y no filtramos de manera correcta las búsquedas para que sean lo más precisas posible seremos vulnerables a ataques de denegación de servicios.

En conclusión mientras más grande sea el número de la línea #define OPENISIS_SETLEN 1000 seremos más vulnerables a ataques de denegación de servicios. “MUCHO CUIDADO”.

Para nuestro propósito no cambiaremos el valor por defecto.

Procedemos a la compilación de la siguiente manera:
make shared

Copiamos las librerías como se indica:

cp sto/libopenisis.so /usr/lib
cp openisis.h /usr/include



Descargar PHP-OpenIsis en la parte final del documento podrán descargar el paquete completo.

Una vez descargado el paquete le asignamos permisos de escritura y ejecución para el usuario root

chmod +xw PHP-OpenIsis.tar.gz



Creamos la carpeta PHP-OpenIsis ("recomendamos la ruta /root/Desktop/"):
mkdir PHP-OpenIsis
Copiamos el paquete descargado en la carpeta creada:
cp -f PHP-OpenIsis.tar.gz PHP-OpenIsis
Ingresamos al directorio:
cd PHP-OpenIsis
Descomprimimos el paquete:
tar -xvf PHP-OpenIsis.tar.gz
Corremos el script compile
./compile



Puede ser que no puedas compilar porque no tienes instalado phpize, o porque en el script, compile la dirección que hace referencia a phpize no es la correcta.

Generalmente después de dar la instrucción ./compile obtienes el siguiente mensaje.

You have to Install PHP first. Make sure phpize script islocated at /usr/bin/phpize



En ese caso, debemos instalar phpize, para eso tipiamos:
yum install php-devel

Obteniendo el siguiente resultado mientras instala:



Enviamos a ejecutar nuevamente el script compile
./compile

Deberíamos obteniendo un resultado similar al siguiente:



Añadimos al archivo php.ini las líneas siguientes:

    extension=isis.so
    [Isis]
    isis.default_dir = /isis/db/default/dir
    isis.default_database = alguna_base_isis_con_o_sin_la_ubicacion

Reiniciamos apache
service httpd restart

Visualizamos la configuración de php, y estará habilitado el soporte para bases de datos ISIS.



En nuestro caso no hemos definido una base de datos por defecto, pero si definimos la ruta donde deberán estar todas las bases de datos ISIS.

Ahora, se debe copiar las bases que se deseen mostrar por la web en la ruta indicada en el archivo de configuración php.ini y conectarse.

Para nuestro caso utilizaremos la base de datos cds en la parte final del documento podrán descargar el paquete completo.

Pues bien, extremos la base descargada en una carpeta con el nombre cds y lo copiamos en la ruta /isis/db/default/dir

Si la ruta no existe debemos crearla.

Para verificar la conexión desde PHP a nuestra base de datos:
Creamos un script de nombre conexIsis.php con el siguiente contenido, en la parte final del documento podrán descargar el paquete completo:



Consideraciones

• Debemos respetar las mayúsculas o minúsculas en el nombre de la base de datos, es decir;
  
  Si por ejemplo nuestra carpeta se llama “cinci” pero los archivos de la base están con mayúscula “CINCI”, deberemos respetar esto en la conexión, de tal forma que la línea $db nos quedaría:
  
      $db = “/isis/db/default/dir/cinci/CINCI”;
  
  De lo contrario no lograremos la conexión.
  
  De acuerdo a las conexiones realizadas, se recomienda que todos los archivos sean con minúsculas tanto el nombre del archivo como su extensión.
• Las bases de datos ISIS que copiemos en el directorio definido por defecto, es decir en “/isis/db/default/dir/” contienen varios archivos como se muestra el ejemplo a continuación:
  
  Ejemplo:
  Suponiendo que una de nuestras bases de datos ISIS tiene por nombre cinci2.
  
  Los archivos necesarios para la conexión y búsqueda de registros son los siguientes:
  
  • cinci2.cnt //Desconocido
  • cinci2.fdt //Plain Text Document
  • cinci2.fst //Plain Text Document
  • cinci2.ifp //Desconocido
  • cinci2.l01 //Plain Text Document
  • cinci2.l02 //Plain Text Document
  • cinci2.mst //Desconocido
  • cinci2.n01 //Desconocido
  • cinci2.n02 //Desconocido
  • cinci2.pft //Plain Text Document
  • cinci2.xrf //Desconocido

Verificamos con el navegador el éxito de conexión.



De forma adicional podrías utilizar Reportes PHP con FLASH, para proveer una interfaz mucho más profesional a tus sitio, un ejemplo de esto lo muestra la siguiente imagen:



Te recomendamos visualizar el manual Reportes PHP con FLASH.

Retornar al INICIO Descargar Fuentes

Clic en en enlace: Clic aquí

Efecto hoja en botones FLASH

La utilización de flash en los sitios WEB casi siempre proveerá de una interfaz más animada, sin embargo está directamente relacionado el peso del archivo flash con la carga del sitio. En el caso de nuestros botones con efecto hoja hemos tratado de diseñarlos lo más liviano posible sin embargo obligadamente cargaremos nuestro al menos un poco nuestro sitio

La ventaja frente a esto es que cada vez el ancho de banda que nos otorgan nuestros ISP's es mayor y el archivo flash se hace casi imperceptible.

En este caso utilizaremos netamente:
• Adobe Flash CS3 Professional

En el Workspace por defecto debemos crear 3 capas con 1 frame cada una. La capa clave es la 1, sin embargo mencionamos a continuación que función cumplen las otras capas.

En la capa 3 tenemos el fondo en donde se mostrarán los botones, se podrá cambiar o quitar el fondo de acuerdo a nuestras necesidades, en la parte inferior están los fuentes listos a descargar.

En la capa 2 nos sirve para añadir un mensaje que en el caso del ejemplo hace referencia a "Capacitación en Seguridad y TICS - CAYTICS", como lo supondrán también pueden modificar el mensaje o borrarlo al momento de aplicarlo en sus sitios. Ahora, si creen que este manual o alguno de los publicados en CAYTICS ha sido de su utilidad podrían enlazarnos desde sus sitios.

En la capa 1 están las animaciones de cada botón. Tenemos 10 capas pero 7 botones, esto es así porque las capas adicionales sirven para lineas, trazos, etc. Vamos a visualizar una de las capas dado que esto se repetirá para todos los botones que deseemos añadir.

Para uno de los botones tenemos la siguiente estructura:



Es necesario que descarguen los fuentes para poder evidenciar la estructura que tiene los botones junto con la funcionalidad que ofrecen, con el análisis de los fuentes será mucho más clara la redacción que aquí se realiza. Cada uno de los botones se enlaca a un URL en una ventana nueva. Para el caso del botón que revisamos el código es el siguiente:

onClipEvent (load)
{
    num = 1;
    this.ti1.gotoAndStop(num);
    this.ti2.gotoAndStop(num);
}
on (rollOver)
{
    this.gotoAndPlay("s1");
    this.swapDepths(_root.maxdepth + 1);
}
on (rollOut)
{
    this.gotoAndPlay("s2");
}
on (release)
{
     _root.animation = 0;
     _root.link_prev = _root.link;
     _parent["item" + _root.link].gotoAndPlay("s2");
     _root.link = num;
     _root.play();
     _root.getURL("http://www.caytics.com.ec/", "_blank");
}


Los botones tienen la siguiente apariencia con sin fondo:



Con fondo negro como se encuentra el DEMO, los botones tienen la siguiente apariencia, les recomiendo visualizarlo:



Retornar al INICIO        Visualizar DEMO        Descargar Fuentes       

También te recomendados

Galería de Imágenes en FLASH

Clic en en enlace: Clic aquí