Para descargarlo acá tienen el desarrollo (y el ejemplo): FormValidate.

Configuración

Para tener una forma de hacer cambios rápidos sin tener que hacer modificaciones en el código se usa un archivo ini, en la que para cada campo a considerar se define una sección y sus atributos a validar, por ejemplo:

;ESTE ARCHIVO ES UN EJEMPLO PARA PHPTools -> FomrValidate

;Campo para evitar los robots
[f0]
type=security

;Campo de tipo númerico
[f1]
type=number
min=5
required=true

;Campo de tipo mail
[f2]
type=mail

;Campo que requiere una expresión regular
[f3]
type=regex
regexstr="/^[_\.0-9a-zA-Z-]+@([0-9a-zA-Z][0-9a-zA-Z-]+\.)+[a-zA-Z]{2,6}$/i"
max=100
required=true

;Campo con un tamaño mínimo de 20 caracteres
[f4]
min=20

donde:

• f0: se usa para evitar robots, si el campo llega con información, se debe desechar la información.
• f1: se valida que sea un número mayor o igual a 5 y siempre debe tener información.
• f2: se valida que sea un correo electrónico válido.
• f3: se valida que cumpla con la expresión regular (regexstr) usando la función PHP preg_match, con un máximo de 100 caracteres y siempre debe tener información.
• f4: se valida que el tamaño mínimo sea de 20 caracteres.

Uso

Ahora para poder validar los datos enviados al servidor, vamos a hacer uso de este script:

<?php
include "PHPTools/FormValidate.php";

$form = new FormValidate(array(
                'get' => true,
                'path' => 'properties',
                'ini' => 'form'
));
// limpiar entrada
$form->escape();
// validar
$form->validate();
?>

En la descarga de FormValidate el ejemplo muestra el arreglo antes de ser validado y después (que agrega mensajes de error y llena el arreglo de errores en caso de existir).

Especificaciones

Estos son los valores de los parámetros usados para la configuración:

• required: determina si el campo es necesario.
• type: especifica como se tiene que validar el dato. Sólo se pueden usar security, number, mail y regex.
• max: Tamaño/valor máximo del campo; si es number se compara directamente, en otro caso se compara el tamaño de la cadena.
• min: Tamaño/valor mínimodel campo; si es number se compara directamente, en otro caso se compara el tamaño de la cadena.
• regexstr: Cadena con la expresión regular (se usa la función preg_match), debe de ir entre comillas.

Estos son los valores de los parámetros para  el uso de la clase FormValidate

• get: con el valor true determina si se va a procesar los valores de $_GET, si no se define usa los valores de $_POST
• path: determina el path donde se encuentra el archivo ini
• ini: el nombre del archivo ini. También se puede definir un array con las propiedades y así evitar el uso del archivo ini.

TODO

Estas son algúnas tareas que faltan en este desarrollo:

• Agregar tipos de datos especiales (por ejemplo: fecha).
• Cambiar el parámetro para la clase FormValidate para usar $_GET.
• Hacer más flexible el sistema de mensajes de error.
• Dependencia entre campos.

Licencia

Este clase tiene la licencia MIT.

He llevado redes de telecomunicaciones y me encanto y ahora tengo en mente porque HTTP es tan inseguro (jeje, es lo que imagino, pero falta corroborarlo).

En mi proyecto de investigación he aprendido a usar GTK y regresar a programar con C (que hubiera preferido python, pero no se puede todo en la vida).

Saludos.

Hasta este momento parte de mi trabajo ha sido trabajar con el CMS modx, que pesar de tener una nueva versión llamada revolution (con muchas mejoras sobre la versión anterior), sigue con el problema de manejar el código (html o php) a través de la base de datos y dificultando su manejo a través de su administrador. Para paliar este problema, y mostrar las maravillas de automatizar tareas, realize una clase en Java para interactuar entre archivos físicos (de tu ambiente de desarrollo) y la base de datos con el código de estos (sin tener que abrir el administrador de modx).

(Algunas) herramientas para automatizar

Para automatizar tenemos muchas herramientas que permiten hacerlo, como por ejemplo, scripts de shell o archivos de procesos por lotes. Debido a que son herramientas que cubren necesidades diferentes preferí no apegarme a una de estas opciones, en cambio, dada la extensión del lenguaje Java y las herramientas basadas en este lenguaje que permiten automatizar tareas en el desarrollo decidí usar Apache Ant.

Si buscas compresores para CSS o Javascript hay muchos online, que desde mi punto de vista son buenos para hacer el proceso una sola vez. Sin embargo, si deseas integrar esta actividad de manera continua en tus proyectos creo que verás que no es ameno estar desarrollando en x programa, abrirlo, copiar el contenido del archivo, pegarlo en el navegador y poner el resultado en un nuevo archivo. Por este motivo para la compresión de las hojas de estilos y archivos javascript he usado YUI Compressor que es una clase Java y que se puede ejecutar desde línea de comandos. Para la compresión de HTML use la herramienta HTML Compressor que básicamente cambia los saltos de línea y tabuladores en espacios en blanco.

Para el manejo de los elementos de modx hice una clase en Java (para ejecutar desde la línea de comandos) y evitar trabajar con estos a través del navegador (dejando la tarea del desarrollo a herramientas hechas para esto). Al desarrollo lo llame modxConnect y la idea es que una vez que se encuentra comprimidos los elementos (html) modxConnect inserte el contenido de los elementos en la base de datos de modx. Falta mucho desarrollo, pero es un primer acercamiento.

Para los siguientes pasos supongo que ya esta configurado todo este ambiente:

• Java (si ya esta configurado el acceso al classpath mejor)
• Apache Ant que este accesible desde línea de comandos (lo puedes agregar al classpath) y si no pues tienes que poner la ruta completa del ejecutable (en Apache Ant User Manual puedes encontrar como instalarlo y empezar a usarlo).
• YIU Compressor, HTML Compressor y modxConnect accesibles a través de la línea de comandos (o configurando el archivo de Apache Ant para determinar la ruta de donde se encuentran).

Ahora ya que tienes listo este ambiente de desarrollo vamos a empezar la configuración para la automatización.

Configurar

Uno de los beneficios de Apache Ant, es que solo tienes que crear un archivo XML llamado build.xml (por lo general, pero puedes hacer referencia a otro archivo) y es donde definirás las tareas (targets) repetitivas que deseas realizar de manera automática. La estructura básica del archivo build.xml es:

<?xml version="1.0" encoding="UTF-8"?>
<project name="NombreProjecto" default="clean" basedir=".">
	<property file="build.properties" />
	<target name="clean" depends="" description="">
		<delete dir="${build}" />
		<delete dir="${dist}" />
	</target>
	<target name="clean" depends="" description="">
		<delete dir="${build}" />
		<delete dir="${dist}" />
	</target>
</project>

Ahora comentemos un poco de las etiquetas (que puedes ver más a detalle en Apache Ant User Manual):

• project: se usa para definir información al proyecto. El atributo name es para asociarle un nombre, default es la tarea (target) que se ejecutará por default y basedir para asociar el directorio sobre el que se estará trabajando.
• property: se usa para asociar “variables” al archivo build.xml, puedes ponerlas directamente o asociar un archivo properties con los valores, a los que haces referencia con los placeholders ${nombreVariable}.
• target: es la definición de una tarea que realizará. El atributo name es el nombre de esta (y como será llamada por Ant), depends es la lista de tareas que deben completarse antes de llevar a cabo la tarea seleccionada y description es una descripción de la tarea.

Antes de continuar, necesitamos la información del archivo build.properties:

dir.src=src
dir.build=build
dir.sub=assets
dir.js=js
dir.css=css
dir.server=C:/servers/xampp/htdocs/app
dir.chunks=chunks
dir.lib=lib
dir.classPHP=class
dir.processPHP=process
dir.propertiesPHP=properties
dir.modx=C:/servers/xampp/htdocs/cmsModx
dir.ftp=urlFTP
server.dir=00.000.00.00
server.usr=usuario
server.pwd=password
file.css=style.css
file.js=scripts.js
file.chunk.css=html.css.xhtml
file.chunk.js=html.js.xhtml
dir.compressor=C:/tools/yuicompressor-2.4.2/build
class.compressor=yuicompressor-2.4.2.jar
dir.compressorHTML=C:/tools/htmlcompressor
class.compressorHTML=htmlcompressor-0.9.1.jar

Y ya que se definió una tarea, para realizarla necesitas llamar a ant y darle el nombre de la tarea como parámetro:

ant nombreTarget

Una de las primeras tareas, y practicas en Java, es tener por separado el ambiente de desarrollo y el ambiente de producción, que por lo general es la compilación de los fuentes, pero en este caso solo será los archivos fuentes con cierto proceso (compresión) y para llevar a cabo esta tarea, se puede definir una tarea como la que sigue:

<target name="makeDirs" description="Crea los directorios sobre los que se trabajara">
	<copy todir="${dir.build}">
		<fileset dir="${dir.src}">
			<exclude name="**/*.*" />
			<exclude name="**/js/src/**" />
		</fileset>
	</copy>
</target>

• copy: copia los archivos/directorios a donde se indique todir.
• fileset: define, a través de dir, los archivos que serán copiados.
• exclude: define la referencia de los archivos que no deben ser copiados a todir, se pueden usar comodines (** significa que no importa la carpeta)

Para este caso solo se crea la estructura de directorios (como lo tengas en desarrollo) ya que en otras tareas se harán los procesos para comprimir los diferentes tipos de archivos. Puedes permitir copiar las clases PHP o las imágenes desde un principio (aunque más adelante puedo dar unas ideas para no hacerlo aún).

Empecemos a hacer una de las tareas repetitivas: comprimir CSS y JS. Si se dificulta tener una sóla hoja de estilos (siempre es más ordenado separar los estilos de las secciones en diferentes archivos) entonces primero juntemos toda la información de las hojas de estilos en un sólo archivo (lo mismo pasa con los archivos de los javascripts), para eso se pueden hacer unas tareas como estas:

<target name="conCSS" description="Concatena los CSS a un archivo en el directorio BUILD">
	<concat destfile="${dir.build}/${dir.sub}/${dir.css}/${file.css}" force="no">
		<filelist dir="${dir.src}/${dir.sub}">
			<file name="${dir.css}/charset.css" />
			<file name="${dir.css}/reset.css" />
			<file name="${dir.css}/estilo1.css" />
			<file name="${dir.css}/estilo2.css" />
			<file name="${dir.css}/estilo3.css" />
		</filelist>
	</concat>
</target>
<target name="conJS" description="Concatena los JS a un archivo en el directorio BUILD">
	<concat destfile="${dir.build}/${dir.sub}/${dir.js}/${file.js}" force="no">
		<filelist dir="${dir.src}/${dir.sub}">
			<file name="${dir.js}/jquery-1.4.2.js" />
			<file name="${dir.js}/jquery.ui.core.js" />
			<file name="${dir.js}/jquery.ui.widget.js" />
			<file name="${dir.js}/jquery.ui.mouse.js" />
			<file name="${dir.js}/jquery.ui.draggable.js" />
			<!-- wrapper > -->
			<file name="${dir.js}/wrapStart.js" />
			<file name="${dir.js}/main1.js" />
			<file name="${dir.js}/main2.js" />
			<file name="${dir.js}/main3.js" />
			<file name="${dir.js}/wrapEnd.js" />
			<!-- < wrapper -->
		</filelist>
	</concat>
</target>

• concat: con esta tarea concatenas los archivos (de filelist) en el path/archivo definido en destfile.
• filelist: define los archivos que serán concatenados. Si agregas uno más Ant automáticamente lo incluirá en el archivo final.
• En la tarea de la compresión de los javascript puse dos archivos para crear el template de carga de las acciones de jQuery, donde $document.ready(function() { esta en  wrapStart.js mientras que en wrapEnd.js se encuentra });

Comprimir los archivos de CSS y JS ya concatenados (con el YUI Compressor):

<target name="compressCSS" description="comprime el CSS de BUILD" depends="conCSS">
	<exec executable="cmd">
		<arg line="/c java -jar ${dir.compressor}/${class.compressor} ${dir.build}/${dir.sub}/${dir.css}/${file.css} -o ${dir.build}/${dir.sub}/${dir.css}/${file.css} " />
	</exec>
</target>

<target name="compressJS" description="comprime el js de BUILD" depends="conJS">
	<exec executable="cmd">
		<arg line="/c java -jar ${dir.compressor}/${class.compressor} ${dir.build}/${dir.sub}/${dir.js}/${file.js} -o ${dir.build}/${dir.sub}/${dir.js}/${file.js} " />
	</exec>
</target>

• exec: establece que se usará una instrucción de línea de comando.
• arg: es propiamente la llamada a la instrucción para comprimir el archivo.

Con esto ejecuta

ant compressJS compressCSS

y siempre se generarán los archivos de JS y CSS comprimidos.

Los archivos HTML y PHP son muchos y no tiene caso que los concatenemos, pero si se puede “comprimir” (eliminar los metacaracteres) para agilizar la transferencia de los archivos. Esto se resuelve con la siguiente tarea:

<target name="compressAll" depends="makeDirs">
	<apply executable="java" parallel="false">
		<fileset dir="${dir.src}/" includes="**/*.html,**/*.php,**/*.xhtml">
			<exclude name="**/config/**" />
			<exclude name="**/css/**" />
			<exclude name="**/js/**" />
			<exclude name="**/lib/**" />
			<exclude name="pagina1.php" />
			<exclude name="pagina2.php" />
			<exclude name="pagina3.php" />
		</fileset>
		<arg value="-jar"/>
		<arg path="${dir.compressorHTML}/${class.compressorHTML}"/>
		<arg line="--type html"/>
		<srcfile/>
		<arg value="-o"/>
		<mapper type="glob" from="*" to="${dir.build}/*"/>
		<targetfile/>
	</apply>
	<copy todir="${dir.build}/${dir.sub}/${dir.lib}">
		<fileset dir="${dir.src}/${dir.sub}/${dir.lib}" includes="**/*.php"></fileset>
	</copy>
</target>

• apply: es otra forma de ejecutar un comando (en línea de comandos) aplicado a los archivos definidos por fileset.
• fileset: conjunto de archivos que serán comprimidos. En includes se seleccionan todos los archivos HTML, PHP y XHTML, excepto pagina1.php, pagina2.php y pagina3.php.
• arg: argumentos para la llamada de la línea de comandos.
• srcfile: referencia al archivo de fileset.
• mapper: define la salida del archivo.
• Al final copia todos los archivos excluidos (clases de PHP) a la carpeta build.

Por último resolvemos el inconveniente de modx respecto a los elementos con modxConnect. La definición de la tarea:

<target name="copyServer" depends="compressJS,compressCSS,compressAll">
	<exec executable="cmd">
		<arg line="/c C:\Java\jdk1.6.0_03/bin/java -jar C:\tool\modxConnect.jar" />
	</exec>
	<!-- limpiar el cache del modx -->
	<exec executable="cmd">
		<arg line="/c curl http://SITEURE/clearCache.html" />
	</exec>
</target>

• El primer comando es para llamar a la clase que hace el mapeo (modxConnect). Como se encuentra no es funcional (por la configuración que se encuentra en los archivos properties del jar). Para poder usarlo tienes que configurar la base de datos, los paths donde se encontrarán los archivos (ya comprimidos) y crear los chunks a través del modx y después ligar el archivo físico con el id del chunk (en los archivos properties vienen comentarios al respecto).
• El segundo comando es para limpiar la cache del modx. Se necesita definir un documento y asociarle el snippet con el código siguiente:

<?php
// Snippet para limpiar la cache
$paths = array(
	'config.cache.php',
	'sitePublishing.idx.php',
	'registry/mgr/workspace/',
	'lexicon/'
);
$contexts = $modx->getCollection('modContext');
foreach ($contexts as $context) {
	$paths[] = $context->get('key') . '/';
}
$options = array(
	'publishing' => 1,
	'extensions' => array('.cache.php', '.msg.php', '.tpl.php'),
);
if ($modx->getOption('cache_db')) $options['objects'] = '*';
	$results= $modx->cacheManager->clearCache($paths, $options);
return 'OK';
?>

Ya configuraste todo, pero no te olvides de agregar una tarea que borre todo lo que generaste

<target name="clean" description="limpiar los paths">
	<delete dir="${dir.build}" />
	<delete dir="${dir.server}" />
</target>

Que lo haga la computadora

La parte más sencilla de esto: usar Apache Ant. Una de las ventajas de modularizar la construcción, es que puedes hacer cualquier paso intermedio y no tener siempre que ejecutar todo, por esa razón se separo la concatenación de los archivos de la compresión o la creación de el árbol de producción.

Para ejecutar todas las tareas, ponemos

ant compressAll

Por ejemplo, esta modificando la hoja de estilos y solo quieres concatenar los archivos (sin comprimir) sólo ejecutas

ant compressCSS

y ya solo subes el archivo y haces el debug (lo mismo se puede hacer con los javascript).

Conclusiones

Este artículo se centra en mejorar algunos procesos en el desarrollo de software. Después de estar trabajando un tiempo de esta manera mi experiencia me dice que HAY QUE ORGANIZAR LOS PROYECTOS (y esto incluye como se implementará) para atender procesos que son susceptibles de automatizar y mejorar la calidad en este rubro.

También es dar algunas ideas respecto a lo que se me ocurre automatizar:

• Esteganografía: crear procesos que oculten datos dentro de imágenes (el uso más sencillo que he visto al respecto) como inyectar claves en ciertas imagenes del sitio web.
• FTP: subir cierta parte del desarrollo (como las imágenes) sin tener que abrir el programa FTP.
• Ambientes de desarrollo: generar la estructura general de los proyectos siempre que se inicie (sin estar apegado a un IDE).
• Criptografía: hacer procesos para encriptar información (en la base de datos o en archivos).
• Desarrollo: puedes poner códigos que midan el tiempo de cierta sección (consulta a la base de datos por ejemplo) y que en la aplicación final no necesitas.

Sigo trabajando de medio tiempo y esa es la excusa de no tener un sueldo acorde a mi trabajo y que solo se acercan a pedirme más tiempo de trabajo a cambio de más dinero (ni siquiera lo hicieron al revés).

No debería compararme con otras personas, pero la verdad me causa indignación como otras personas crecen (al menos económicamente) siendo que su trabajo y el mio son equivalentes, con la diferencia claro de que yo trabajo medio tiempo, no gozo de todo el tiempo muerto que hay en un horario de tiempo completo (es natural, no lo juzgo) y desde mi punto de vista he respondido adecuadamente a las peticiones del trabajo (siempre mejorando lo que hago).

¿Debería de platicarlo con las personas que están al frente de la empresa? La verdad es que me han dado motivos para pensar que no les importa lo que piensen las personas (de abajo) y solo te ven como un recurso (cuando dicen esto me siento como un pisapapeles).

¿Qué hacer? En primer lugar seguir trabajando como sé hacerlo (organizadamente, abierto a las críticas, mejorando lo que siento que se puede mejorar y aprendiendo) aunque no se retribuya hacia mi esto y en segundo lugar recordar que mi objetivo es crear cosas más trascendentes para la humanidad que solo hacer páginas web.

¿Por qué otro lightbox?

Bueno para empezar si no te quieres esforzar en diseñar un lightbox tienes muchos de donde escoger (FancyBox, ThickBox, SuperBox, ColorBox por ejemplo en jQuery, para otros frameworks también hay e incluso sin frameworks de javascript), pero si quieres hacer algo diferente con el lightbox este desarrollo fue pensado bajo esta característica.

Otra característica añadida es hacer algo más liviano sin tener todas las características de los lightbox (carga de iframes por ejemplo), esto significa que tendrás que trabajar un poco más para hacer lo que necesitas, pero que al final el código es más pequeño (cosa que se recomienda por todos lados).

El XHTML

Esta maqueta que muestro es extremadamente sencilla para mostrar esto, pero ha sido usado con maquetas más elaboradas. La base de esto es tener el contenido general y al final (de preferencia) agregar la maqueta de lo que será el lightbox (una capa que este por encima de todo y sobre de esta la ventana con información), esto se muestra en el código en rojo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Prueba de lightbox</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>

<body>
<h1><a id="link" href="#">test</a></h1><!-- enlace que muestrará el lightbox -->

<!-- elementos ocultos -->
<div id="overlay"></div> <!-- capa que ocultará la página -->
<div id="lightbox"> <!-- el lightbox -->
	<a id="closeLightbox" href="#"></a><!-- botón para cerrar el lightbox -->
	<div id="contentLightbox"><img src="css/img/ajax-loader.gif" alt="" /></div> <!-- imagen de precarga -->
</div>
</body>
</html>

CSS

En primer lugar te recomiendo usar un reset para los estilos (yo te recomiendo Reset CSS de meyerweb.com) y después darle estilos al lightbox.

Básicamente el asunto es poner un div por encima de todos los elementos que a continuación les muestro el código y un comentario respecto a los elementos:

/* estilos */
div#overlay { /* este elemento es el que bloqueará los elementos de la página */
	background:#96F;
	display:none;
	position:absolute;
	left:0;
	width:100%;
	top:0;
	z-index:10
}

div#lightbox { /* el div que contiene el otro div que tendrá la información (además de que este tiene el diseño) */
	background:url(img/lbBG.png) no-repeat center;
	display:none;
	height:500px;
	left:50%;
	margin:-300px 0 0 -250px;
	position:absolute;
	top:50%;
	width:600px;
	z-index:20;
}

div#lightbox a#closeLightbox { /* enlace para cerrar el lightbox */
	background:url(img/shut_down.png) no-repeat center;
	display:block;
	height:50px;
	margin:-25px 0 0 0;
	position:absolute;
	right:-50px;
	text-indent:-9999em;
	top:50%;
	width:50px;
}

div#lightbox div#contentLightbox { /* donde estará la información que se mostrará */
	background:#FFF;
	height:268px;
	left:174px;
	position:absolute;
	top:90px;
	width:292px;
}

div#lightbox div#contentLightbox img { /* esta imagen es la imagen de precarga */
	display:none;
	left:50%;
	margin:-16px 0 0 -16px;
	position:absolute;
	top:50%;
}

Ahora vamos a poner esto en la página (bueno, la asociación a este código):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Prueba de lightbox</title>

<link href="css/style.css" rel="stylesheet" type="text/css" /> <!-- hoja de estilos con el código anterior -->
</head>

<body>
<h1><a id="link" href="#">test</a></h1><!-- enlace que muestrará el lightbox -->

<!-- elementos ocultos -->
<div id="overlay"></div> <!-- capa que ocultará la página -->
<div id="lightbox"> <!-- el lightbox -->
	<a id="closeLightbox" href="#"></a><!-- botón para cerrar el lightbox -->
	<div id="contentLightbox"><img src="css/img/ajax-loader.gif" alt="" /></div> <!-- imagen de precarga -->
</div>
</body>
</html>

jQuery plugin

Lo de siempre: cargar la librería de jQuery

La idea básica del funcionamiento de javascript en el lightbox es mostrar el div principal que oculta la página, después cargar el div que tiene el lightbox y poder ocultar de nuevo los elementos mostrados. Esto lo vamos a hacer dentro de un plugin de jQuery (que es el mecanismo para agregar funcionalidad a jQuery, en este caso la nuestra).

La idea básica esta, ahora empecemos con el plugin para jQuery. Para empezar me he basado (aprendido) de estos artículos: jQuery plugins authoring, Building your first jQuery Plugin y Learn how to create a jQuery Plugin, de donde el primer paso es poner la estructura de los plugins:

(function($) {
$.fn.CustomLightBox = function() {
	return this.each(function() {
		//nuestro código
	});
};
})(jQuery);

El código anterior muestra la estructura básica de cualquier plugin de jQuery (también evita el problema con el uso de otras librerías). El código en rojo es el nombre del plugin (que llamaremos como jQuery(selector).CustomLightBox()) y el código en rosa/fiucsa es donde pondremos toda la funcionalidad.

Ahora asignemos al plugin una funcionalidad (jeje, el hola mundo) con esto:

(function($) {
$.fn.CustomLightBox = function() {
	return this.each(function() {
		alert('hola mundo');
	});
};
})(jQuery);

Con esto al usar el lightbox en un elemento aparecerá la fabulosa ventana de alerta del navegador. Ahora asociemos un evento al plugin, y solo necesitas el selector (en este caso el mismo) y programar el click (como lo harías en un script normal de jQuery).

Para esto solo asociaremos el click con un alert:

(function($) {
$.fn.CustomLightBox = function() {
	return this.each(function() {
		jQuery(this).click(function() {
			alert('evento enviado por el enlace asociado al plugin');
		});
	});
};
})(jQuery);

Ahora a meter nuestro desarrollo en el plugin (con comentarios):

/**
 * CustomLightBox
 */
(function($){
	var _this = null; // referencia al elemento que se le asocio el plugin
	var settings = null; // configuración

    $.fn.CustomLightBox = function(params) {
		_this = jQuery(this);
		settings = $.extend({
			// elementos
			overLayer: null,// layer que oculta todos los elementos - jQuery element
			mainLayer: null, // layer que muestra la info del lightbox - jQuery element
			closeButton: null, // botón que cierra el lightbox - jQuery element
			// animación
			overLayerOpacity: null, // opacidad del layer que oculta todos los elementos - entero
			showAnimate: null, // tipo de animación - cadena
			// métodos
			onShowFn: null, // llamada después de la muestra del lightbox - función
			onCloseFn: null // llamada después del cierre del lightbox - función
		},params);

        return this.each(function() {
			/**
			 * lanzador del lightbox
			 */
			_this.click(function() {
				switch(settings.showAnimate) {
					case 'fadeIn': fadeIn(settings.onShowFn);break;
					case 'overLayerLeft2Right': overLayerLeft2Right(settings.onShowFn);break;
					default: fadeIn(settings.onShowFn);
				}
			});

			/**
			 * Cerrar el lightbox cuando se da click en el overlayer
			 */
			settings.overLayer.click(function() {
				closeLightBox(settings.onCloseFn);
			});

			/**
			 * Cerrar el lightbox cuando se da click en el boton de cerrar
			 */
			settings.closeButton.click(function() {
				closeLightBox(settings.onCloseFn);
			});
        });
    };

	// funciones >
	/**
	 * Verificar si se han cumplido los requisitos mínimos para poder operar
	 */
	var isReady = function() {
		if(settings.overLayer && settings.mainLayer && settings.closeButton)
			return true;
		else
			return false;
	};

	/**
	 * Verificar si callback es una función y ejecutarla
	 */
	var runFunction = function(callFn) {
		if (typeof callFn == "function")
			callFn();
	};

	/**
	 * Cerrar el LightBox
	 */
	var closeLightBox = function(func) {
		if(isReady()) {
			// ocultar overlayer
			settings.mainLayer.fadeOut(function() {
				settings.overLayer.fadeOut();
			});
		}
		return false;
	};

	/**
	 * Animación que muestra poco a poco el overlayer completo
	 */
	var fadeIn = function(func) {
		if(isReady()) {
			// mostrar overlayer
			settings.overLayer.css({
				'display': 'block',
				'height': jQuery(window).height(),
				'opacity': settings.overLayerOpacity
			}).fadeIn(function() {
				settings.mainLayer.fadeIn();
			});
		}
		return false;
	};

	/**
	 * Animación que recorre el overlayer de izquierda a derecha
	 */
	var overLayerLeft2Right = function(func) {
		if(isReady()) {
			// mostrar overlayer
			settings.overLayer.css({
				'display': 'block',
				'height': jQuery(window).height(),
				'opacity': settings.overLayerOpacity,
				'width': 0
			}).animate({'width':'100%'},500,function() {
				settings.mainLayer.fadeIn(function() {
					runFunction(func);
				});
			});
		}
		return false;
	};
})(jQuery);

Bueno ya pusimos todo lo que va a hacer el plugin, pero ¿cómo lo asociamos a la página? Jejeje, aquí esta el código (el comentario CDATA y el cierre de este son para poder tener el código javascript y que valide con la W3C):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Custom LightBox</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function() {
	var lbContent = jQuery('div#contentLightbox');
	jQuery('a#link').CustomLightBox({
	overLayer: jQuery('div#overlay'),// jQuery element
	mainLayer: jQuery('div#lightbox'), // jQuery element
	closeButton: jQuery('a#closeLightbox'), // jQuery element
	subLayers: null, // array jQuery element
	// animación
	overLayerOpacity: 0.5,
	showAnimate: 'overLayerLeft2Right', // text
	// métodos
	onShowFn: function() {
		jQuery.ajax({
			url: 'ajaxTest.php', // cargamos contenido con AJAX
			type: 'POST',
			dataType: 'html',
			error: function(request,sts,error) {
			alert(error);
 		},
 		beforeSend: function() {
 			lbContent.children('img').fadeIn();
 		},
 		success: function(data, sts) {
 			lbContent.children('img').fadeOut(function() {
				lbContent.append(data);
			});
		}
	});
	}, // function
	onCloseFn: null // function
	});
});
// ]]>
</script>
</head>

<body>
<h1><a id="link" href="#">test</a></h1>

<!-- elementos ocultos -->
<div id="overlay"></div>
<div id="lightbox">
	<a id="closeLightbox" href="#"></a>
	<div id="contentLightbox"><img src="css/img/ajax-loader.gif" alt="" /></div>
</div>
</body>
</html>

El PHP (solo para la prueba)

El PHP para la llamada AJAX es este:

<?php
	sleep(3); // sólo para que se vea el efecto ajax
?>
<h2>Carga con AJAX</h2>
<p>archivo de prueba con carga dinámica</p>

TODO

Bueno, a este plugin le falta (desde mi punto de vista):

• Poner valores por default en la configuración (en este momento solo les pongo null).
• Poder generarlo de manera automática con x o y característica (al estilo de jQuery YUI).
• Desarrollar más transiciones a la hora de mostrar el lightbox.
• Añadir transiciones como funciones a la manera de jQuery Validate (para nuevos tipos de datos).

Licencia

Puedes descargar el Custom LightBox, bajo la licencia Creative Commons (o sea que solo dame un poco de crédito y puedes hacer lo que quieras) y tampoco hay garantía alguna (así le hacen todos los que hacen Open Source).

Estas son de las pocas preguntas que me han surgido con alrededor de 3 años trabajando y eso de trabajar en internet 2.0 ya no tiene nada de nuevo y desafiante, sobre todo porque nunca hay tiempo de hacer las cosas, retroalimentarse y re-hacer la solución de manera más “eficiente” (en el sentido habitual de la palabra).

Por otra parte esta empezar un cambio en la burocracia de las empresas ¿cómo le haces saber a una persona que lleva trabajando 30 años de x manera que esta mal y que tu propuesta es lo de hoy? Esto fue muy notorio en mi primer trabajo, donde la burocracia misma no permitía nada nuevo (tanto así que aprendí a trabajar como se hacía en el 2001 y adiós a mis estándares web). Ahora en mi trabajo más reciente pues estamos en lo último con las tecnologías en web pero no salimos del LAMP y ni siquiera se permiten hacer análisis más adecuados para cada sitio (digo, youtube.com no usa Apache).

Y lo último es que la percepción de l@s empresari@s con los que me he topado es que todo es perder tiempo: que si vas por el desayuno, que si te distraes porque te has bloqueado, que si usas tecnologías de la web 2.0 (y lo raro es que trabajas ofreciendo un amplio conocimiento en esto), etc. ¿Por eso las personas se deben de poner la camiseta? Si ni siquiera la gestión/administración de esta se hace de manera justa ¿tenemos que dar más que lo que el contrato dice? Pues extrañamente las empresas ven solo gastos y gastos en poner herramientas adecuadas para el trabajo (computadoras, infraestructura de internet). Digo, yo no soy un empresario, pero creo que cosas tan básicas no se les deberían pasar a las personas emprendedoras…

Por eso ahora que tengo dos maestros en la UAM me estoy animando a regresar al ambito acádemico. No crean que sigo de inocente que todo es felicidad acá, pero de menos tienes más vida que en la industria, haces cosas más relevantes que si se valoraran en México pues tendríamos mejor industria ¿a poco creen que la web 2.0 nació en IBM o Microsoft?

Ahora bien ¿hacía donde voy? Es una pregunta difícil pues todo me maravilla: software empotrado, sistemas operativos en tiempo real, interfaces cerebro máquina, complejidad computacional, computación en paralelo, etc.

Entonces estoy frente a una gran dilema para dirigir mis esfuerzos para aprender, espero pronto poder decidir hacía donde voy, pero lo que es definitivo es que me voy de la industria privada.

Pero en diciembre del año pasado llego un nuevo director de operaciones, que para ser sincero pense que no iba a cambiar nada, pero resulta que este mes voy a empezar (a partir de mañana) a trabajar 4.5 hrs (medio tiempo de verdad) y a parte me van a subir el sueldo (solo 500 pesos, de menos para los boletos del metro). Esto no solo aplica para mi, sino para tod@s l@s estudiantes.

Pero no solo es el cambio, en teoría ya no habrá equipos a cargo de los Administradores de Proyectos, sino que l@s programadores funcionameros bajo el esquema de Fabrica de Software (yo trabajaba con FS en Bancomer) en el que l@s programadores/as vamos a proporcionar el servicio de desarrollo de software y en el cuál ya habrá una evaluación más concreta para poder determinar cierta promoción (y no dedazos).

Yo si estoy bastante emocionado por el cambio radical bajo el que empezaré a trabajar (ya que me parece más justo), un cambio en la forma de desarrollar, pues se desarrollará como equipo (cosa que las personas a veces hacemos, pero no por parte de la forma de trabajo).

Bueno, esto me permitirá avanzar de forma más rápida en la escuela, pues este trimestre tengo un hueco muy grande en el horario con las dos materias que tomaré.