Galería de fotos simple con PHP y maquetada con CSS

Este script de PHP, es recomendado para aquellas galerías las cuales necesitan ser realizadas de manera rápida y no sea necesaria la interacción con bases de datos… para ser mas especifico es para aquellas galerías que no requerirán modificaciones, inserciones y eliminaciones en su contenido (las fotos).

Lo que haremos es que PHP, lea el contenido de la carpeta donde están nuestras fotos pequeñas (las vistas previas) y las fotos grandes (que se mostraran al hacer click sobre las vistas previas)… PHP, mostrara todas las imágenes y las colocara automaticamente, sin que te preocupes de estar poniendolas una por una como se tendría que hacer con puro HTML.

Vale la pena aclarar que el CSS que utilizaremos para maquetar esta galería también es simple… empecemos:

  • Creamos una carpeta llamada “galeria_fotos” y ahí ponemos las fotos grandes.
  • Aun estando en la carpeta “galeria_fotos”, creamos otra carpeta llamada “mini_”.
  • Colocamos las imágenes pequeñas dentro de “mini_”.

Ahora vamos a la raíz de nuestro servidor web y creamos nuestro archivo PHP (con el nombre que queramos):

Nuestro CSS (poner entre las etiquetas <head></head>):

<style>
#container{
width:850px;
margin:0px auto -15px auto;
}
#marcoFotos{
width:105px;
height:80px;
background-color:#eeeeee;
border-top:#cccccc 1px solid;
border-left:#cccccc 1px solid;
border-right:#666666 1px solid;
border-bottom:#666666 1px solid;
padding-top:5px;
padding-left:5px;
margin-left:5px;
margin-bottom:5px;
float:left;
}
</style>

El codigo PHP (poner entre las etiquetas <body></body>):

<div id="container">
<?
//-- ruta de nuestras fotos pequeñas
$laRutaMini="galeria_fotos/mini_/";
//-- extraemos la ruta para las fotos grandes
$laRutaGrande=explode("/",$laRutaMini);
//-- abrimos la carpeta mini_
$carpeta=opendir($laRutaMini);
//-- leemos el contenido
while($miFile=readdir($carpeta)){
if($miFile!="." && $miFile!=".." && (strpos($miFile,".jpg"))){
//-- mostramos las fotos
echo "<div id='marcoFotos'><a href='".$laRutaGrande[0].”/”.$miFile.”‘><img src=’”.$laRutaMini.$miFile.”‘ width=’100′ height=’75′ border=’0′ /></a></div>”;
}
}
?>
</div>

Eso es todo, como veran no es nada dificil… si lo deseas, despues podes subir más fotos a las carpetas indicadas anteriormente, y nuestro script las mostrara sin necesidad de modificarlo.

Efecto TV (televisión) con Actionscript 3

El resultado que obtendremos es este:

This movie requires Flash Player 9

Es posible gracias al metodo noise() de la clase Bitmap. La verdad no se si llamarlo efecto tv específicamente, pero seguramente, ustedes saben a lo que me refiero… el código es el siguiente:

//-- importamos las clases necesarias
import flash.display.MovieClip;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.Event;
//--
//-- movie clip contenedor
var mc:MovieClip=new MovieClip();
//--
//-- creamos un bitmap
var bitmap:BitmapData = new BitmapData(168.7, 127.5, false, 0x00000000);
var image:Bitmap = new Bitmap(bitmap);
//--
//-- ponemos las coordenadas donde se motrara
image.x=26.9;
image.y=10.7;
//--
// -- le asignamos un listener para el evente ENTER_FRAME
image.addEventListener(Event.ENTER_FRAME,elRuido);
//--
//-- funcion que realizara constantemente para lograr el efecto
function elRuido(e:Event) {
bitmap.noise(Math.random()*1000, 0, 0xFF, 7, true);
}
//--
//-- ponemos el bitmap en el mc contenedor
mc.addChild(image);
//--
//-- mostramos el mc
addChild(mc);

Si les interesa saber como hacerlo en Flash 8, les recomiendo este tutorial: Efecto noise en flash 8

Saludos!

Obtener un campo aleatorio con PHP

Bueno, aquí les dejo una función que les puede servir mucho para obtener un campo aleatorio desde una base de datos, de una manera rápida y utilizando menos recursos. La clave esta en la consulta, ahí es donde incluimos la función RAND().

Lo bueno de esta función es que nunca nos tenemos que preocupar si hemos borrado un registro de la tabla y nos dara un valor nulo como resultado. Es decir no es necesario delimitar la búsqueda en un rango de valores y este ya no existe. Por ejemplo:

Para mostrar un número aleatorio hacemos lo siguiente: rand(0,10) ahí estamos delimitando la búsqueda en un determinado rango. En este caso corremos el riesgo de que hayamos eliminado un registro que contenga este valor en el “ID” y nos de un error en la consulta.

Incluyendo RAND() en el query solo toma en cuenta los valores que tenemos en la base de datos. Ademas, en la consulta delimitamos que solo nos devuelva un valor con la fución LIMIT.

function field_rand (){
$qrand = mysql_query("SELECT * FROM tabla where estado='1' ORDER BY RAND() LIMIT 0, 1");
$injo = mysql_fetch_array($qrand);
$info_rand[0] = $injo["campo1"];
$info_rand[1] = $injo["campo2"];
return $info_rand;
}

//llamada a función
$campos = field_rand();
echo $campos[0];

Flash y PHP (Actionscript 2 y Actionscript 3)

Como el mismo tema de este post lo indica, veremos primero de forma básica, como cargar info de un archivo PHP con Actionscript 2 y finalmente con Actionscript 3.

Antes, haremos un archivo php, que utilizaremos en los casos mensionados anteriormente:

Nombre del archivo: elphp.php

<?
$laVariablePhp="aqui el contenido del archivo php que se mostrara en flash";
echo "laVariablePhp=".$laVariablePhp;
?>

Facil verdad?…

Código Actionscript 2:

//-- creamos el objeto LoadVars para cargar info externa en flash
var carga_lv:LoadVars = new LoadVars();
// -- cuando obtenga la info
carga_lv.onLoad = function(ok:Boolean) {
//-- se crea un campo de texto para mostrar los datos
var texto:TextField = createTextField("texto", 1, 0, 0, '', '');
texto.autoSize = "left";
//-- si ok es igual a verdadero, o sea, si todo esta bien
if (ok) {
//-- muestro el contenido del php en el campo de texto creado
texto.text = this.laVariablePhp;
} else {
//-- si hay algo mal, el campo de texto me muestra error
texto.text = "error";
}
};
//-- el php desde donde obtengo la info
carga_lv.load("elphp.php");

eso es todo… nada complicado.

Código Actionscript 3:

Lamentablemente, el objeto LoadVars ya no cuenta para la nueva versión de Actionscript :( …pasamos buenos momentos…. veamos como se hace en AS3.
//-- importamos las clases necesarias
import flash.net.*;
import flash.events.*;
import flash.text.TextField;
//-- creamos una instancia de URLLoader para info externa
var loader:URLLoader=new URLLoader();
//-- tipo de info a recibir
loader.dataFormat=URLLoaderDataFormat.VARIABLES;
//-- cual es el archivo que cargaremos
loader.load(new URLRequest("elphp.php"));
//-- listener para cuando la carga este completa
loader.addEventListener(Event.COMPLETE,carga);
//-- funcion a ejecutarse
function carga(event:Event) {
var loader:URLLoader= URLLoader(event.target);
//-- creamos el campo de texto donde se mostrara la info del php
var texto:TextField=new TextField();
texto.text=String(loader.data.laVariablePhp);
texto.autoSize="left";
//-- mostramos el campo de texto
addChild(texto);
}

Si leyeron el post, como carga info de un txt con AS3, nos damos cuenta que el código es bastante parecido al de cargar info de un archivo del lado del servidor, solo que este ultimo necesita mas instrucciones.

No crean que lo mostrado en este tutorial, es lo unico que se puede hacer con Flash y PHP, mas adelante veremos que otras aplicaciones de gran uso.

Diseñador de formularios HMTL+CSS

Hacer y/o programar gestores de contenido (páginas administrativas internas), para mantener constantemente actualizados nuestros sitios web, o simples formularios de contacto, suele ser muy divertido… pero cuando se trata de hacer enormes formularios y ubicar de forma lógica cada campo puede ser un poco tedioso.

Creo que alguien que inicia en el mundo HTML+CSS, debería aprender a hacer desde cero los formularios; pero cuando ya manejas esto de forma correcta, muchas veces necesitas ahorrar tiempo, ya que ademas de crear el formulario, tambien tenes que hacer la programación del mismo, hacer pruebas, revisar la base de datos, etc.

Entonces, lo que necesitamos para diseñar formularios rapidamente es PHPFORM. Con esta sorprende aplicación, crearas tus formularios en pocos minutos (o segundos):

1- Selecciona un template para tu formulario:

2- Crea los diferentes campos y sus tipos, segun las opciones que se muestran a la derecha de la siguiénte imágen:

Despues de haber agregado los campos que necesites, dale click al boton “Save Form”.

3- Descarga tu formulario con las imágenes que componen el template, y su respectivo HTML+CSS:

Tambien si gustas, antes de descargarlo puedes ver una vista previa, o seguirlo editando.

Link directo a la aplicación: http://www.phpform.org

Actionscript 3 y componente DataGrid

Desde Flash MX, considero que los componentes son de gran ayuda a la hora de crear aplicaciones con Flash, ya que ahorran mucho tiempo, nos evita estar dibujando formas de como se mostrará info, ademas nos proveen determinados efectos de forma predeterminada (por ejemplo algunos eventos del mouse) etc.

A continuación, un sencillo tutorial de como utilizar el componente DataGrid de Flash con Actionscript 3:

  • En Flash, en el panel de componentes, arrastra el componente DataGrid en el area de trabajo.
  • Eliminalo (ya que al haberlo arrastrado, automaticamente se agrego a la librería de Flash).
  • En la librería, dale clic derecho al DataGrid, y del menú contextual, selecciona Linkage o Vincular… aparecerá el siguiente cuadro:

    Cuadro de Dialogo

  • No cambies nada y click en OK o Aceptar
  • En el primer frame de tu película Flash, poné el siguiente codigo:

//-- importamos la clase necesaria
import fl.controls.DataGrid;
//-- creamos un array que nos servira para
//-- el contenido del componente
var personas:Array=new Array();
personas[0]={nombre:”Admin”,edad:”28″};
personas[1]={nombre:”Angie”,edad:”30″};
personas[2]={nombre:”Karen”,edad:”27″};
personas[3]={nombre:”Mat”,edad:”2″};
personas[4]={nombre:”Javier”,edad:”2″};
//– hacemos la instancia de nuestro componente
var myGrid:DataGrid=new DataGrid();
//– creamos las columnas del componente
myGrid.addColumn(”nombre”);
myGrid.addColumn(”edad”);
//– un for que recorrera el array y pondra su info en
//– el componente
for (var i:Number=0; i<personas.length; i++){
myGrid.addItem({nombre:personas[i].nombre, edad:personas[i].edad});
}
//– ancho del DataGrid
myGrid.width=400;
//– columnas visibles
myGrid.rowCount=myGrid.length;
//– mostramos el DataGrid
addChild(myGrid);

Nuestro Resultado:

This movie requires Flash Player 9

Flash, SWFObject y buscadores

Creo que a estas alturas, ya una gran mayoría de personas que usan flash, saben que el SWFObject es una librería de Javascript, utilizada para insertar Flash en HTML, para que los visitantes de nuestro sitio web no vean ese recuadro feo que aparece alrededor de nuestras películas cuando el mouse pasa sobre ellas, y mucho menos tenga que hacer click para activarlas…….. Todo esto gracias a EOLAS (por cierto esto es algo que no sucede solamente con Flash sino también con los Applets de Java).

Todo lo anterior como ya lo dije anteriormente, se soluciona con SWFObject… pero para los que no lo saben, hay algo mas en dicha Liberia, y es que también ofrece opciones para corregir los problemas de indexación entre los buscadores y las películas flash… como?… veamos:

Este el código que ponemos en nuestro HTML cuando insertamos nuestra películas, haciendo uso del SWFObject:

<div id="flashcontent">Aqui podemos poner contenido relacionado a nuestra pelicula para indexación de buscadores</div>
<script type="text/javascript"><!--
// <![CDATA[
var so = new SWFObject("tuArchivo.swf", "Titulo", "504", "31", "9", "#ffffff");
so.write("flashcontent");
// ]]>
// –></script>

Observa detenidamente el contenido de la etiqueta <div> que como parametro tiene un id llamado “flashcontent”; es ahi donde podemos colocar info textual relacionada con nuestra película Flash, ya que los robots de los buscadores efectivamente, indexaran ese contenido…….. Si el menú de navegación de tu sitio web esta hecho con Flash, entonces ahi deberías poner los enlaces HTML, para que no haya problemas de indexación en los buscadores

Haber que tienen que decir los antiflasheros? ;)

Links importantes:

Números aleatorios sin que se repitan con PHP

Hace algunos días, en el trabajo, necesitaba hacer un script con PHP, en donde pudiera obtener cierta cantidad de varios números aleatorios sin que se repitieran.

Navegando en php.net, encontré la función array_rand(); dicha función toma las entradas de un array de forma aleatoria, lo cual impide que estas se repitan.

Veamos un pequeño ejemplo:

<?
//-- creamos un array
$dato=array(1,2,3,4,5,6,7,8,9,10);
//-- declaramos una variable equivalente a array_rand
//-- los parametros son el array creado anteriormente
//-- y el numero de entradas que apareceran en pantalla
$datoAleatorio=array_rand($dato,5);
//-- mostramos los numeros aleatorios con un for recorriendo
//-- a array_rand()
for($i=0; $i<=count($datoAleatorio); $i++){
//-- lo mostramos en pantalla
echo $dato[$datoAleatorio[$i]].”<br />”;
}
?>

Aunque no lo crean, es bastante útil si lo combinamos por ejemplo con Actionscript, pero eso lo veremos en otro tema.

Contenido de un txt en Actionscript 3

En un foro alguien preguntó: ¿como cargo contenido de un txt en AS3??

Con la venida de Actionscript 3, muchos desarrolladores Flash hacen un pequeño viaje al pasado, para conocer que cosas siguen intactas, y cuales han cambiado totalmente… lógicamente, alguien que conocio y realizo labores con AS2, haciendo uso de técnicas OOP, no debería tener muchas dificultades en AS3… pero siempre es bueno hacer un repaso.

En la versión 3 de Actionscript, la forma de cargar info de un txt cambia mucho pero no es nada complicado… veamos un ejemplo sencillo:

  1. Crea un archivo txt llamado miArchivo.txt, y que su contenido sea simplemente: laVariable=este es mi texto.
  2. En tu fla poné el siguiente codigo:

import flash.net.*;
//--
var loader:URLLoader=new URLLoader();
loader.dataFormat=URLLoaderDataFormat.VARIABLES;
loader.load(new URLRequest("miArchivo.txt"));
//--
loader.addEventListener(Event.COMPLETE,carga);
//--
function carga(event:Event) {
trace(loader.data.laVariable);
}

Para referencias, visiten sobre AS3: Click aqui
Facil!…Saludos

Post 1

Bien, como lo mencione anteriormente, este sitio web esta principalmente orientado a Flash y PHP, y a otras tecnologías informaticas.

Se estarán publicando noticias sobre tecnología, scripts, demos, archivos de descarga, etc; los cuales serán de libre uso para los visitantes del sitio.. ademas se trataran otros temas de actualidad (en segundo plano), que no necesariamente estan relacionados a la informatica.

Esperamos que este sitio sea del agrado de todos