Javascript

[Javascript] simpleValidate Jquery Plugin

Pues les cuento un preámbulo

Una de las cosas que menos me gusta es estar repitiendo código (recordemos -DRY-) entonces, pues cuando deseaba validar un formulario siempre andaba buscando cual opción era la mejor, y hay muchas opciones y son excelentes en lo que hacen, sin embargo todas tenían un punto débil, por ejemplo que no soportaban ajax, es decir terminaban de validar y se seguían (enviaban el formulario), otros me mandaban mensajes de errores de validación en ciertos colores y en cierto lugar que si bien es correcto, a veces en muchos proyectos no va el estilo o simplemente quieren ponerle un alert o similar.

Bajo ese preámbulo y recordando que siempre quise hacer un validado de formularios con Javascript (hace años hice uno chafita con Javascript).

Entonces pensé por que no hacer uno que fuera muy simple de usar y que no fuera obtrusivo, y así fue como desarrolle simpleValidate que es un plugin el cual como su nombre lo dice solo es un validador de formularios y nada mas.

Les presento a:

simpleValidate – Jquery Plugin

A continuación pongo las características.

  • Fácil de usar
  • Extremadamente Ligero 2kb (minifed)
  • Compatible con Jquery 1.5.2
  • No requiere CSS especial
  • No obtrusivo
  • Posibilidad de inyectar algún tipo de alert especial mediante sus settings
  • Completamente personalizable
  • Soporta expresiones regulares
  • Y valida checkboxes

Su uso es muy simple, solo necesitamos de Jquery y del plugin

 <script src="jquery.1.5.2.min.js" type="text/javascript"></script>
 <script src="simpleValidate.1.6.min.js" type="text/javascript"></script>

Y ejecutamos el plugin donde indicamos el id del Formulario en cuestión


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="jquery.1.5.2.min.js" type="text/javascript"></script>
 <script src="simpleValidate.1.6.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function(){
    $("#testForm").simpleValidate();
 });

 </script>
 </head>
 <body>
 <form action="try.php" method="post" id="testForm">
 <label>Name</label>
 <input type="text" name="name" title="valid[Ingrese un nombre valido]" /><hr />
 <label>Ingrese una cantidad valida (tipo numero.decimal(2 digitos))</label>
 <input type="text" name="cantidad" title="valid[regex,Por favor ingrese un numero con o sin decimales únicamente]" data="^([0-9]+\.?[0-9]{0,2})$" /><hr />
 <label>Required</label><input type="checkbox"  name="condiciones" value="Required" title="valid[Debes de aceptar los terminos y condiciones]"/>
 <input type="submit" value="Guardar datos"/>
 </form>
 </body>
</html>

Y con esto ya tenemos funcionando el plugin ahora necesitamos indicarle cuales son los campos a validar lo haremos de la siguiente forma.

En cada input que necesitemos, vamos a agregar lo siguiente en el campo (input) que queramos validar

title=”valid[tipo_de_validacion,{params,}]“

Donde los tipos de validación son los siguientes:

  • valid[required,mensaje de error] ==> Solo verifica que el campo tenga algún valor y el segundo parametro es lo que mostrara cuando no pase la validación
  • valid[email,mensaje de error] => Valida que sea un email valido y si no muestra el mensaje del segundo parametro.
  • valid[zip,mensaje de error] => Valida que sea un código postal valido (5 caracteres numéricos) y si no muestra el mensaje del segundo parámetro.
  • valid[minlength,mensaje de error,numero_minimo] => Valida que el campo contenga un mínimo de caracteres indicado el el ultimo parámetro
  • valid[maxlength,mensaje de error,numero_maximo] => Valida que el campo contenga un máximo de caracteres indicado el el ultimo parámetro
  • valid[regex,mensaje de error] => Este forma de validación necesita un parámetro data dentro del input donde venga especificada la expresión regular a validar y si no pasa lanza el error.
  • valid[ensaje de error] =>Este solo es aplicable a los checkboxes y solo contiene como argumento el error que mostrara cuando el checkbox no este marcado

Leer más

[Eventos] El Google Developer Fest 2010

Si pues así fue, hoy tuve la gran oportunidad de ir al Google Developer Fest 2010.

Les voy a contar un poco de que se trato y como me pareció este fabuloso evento.

Google Developer Fest

Google Developer Fest

Me fui temprano, y llegue a eso de las 8 y media el registro empezó como a las 9 con playera incluida aunque un poco grande para mi tamaño :-) y el evento inicio a eso de las 9:30, algo raro de parte de Google, aunque pues al parecer hubo mucho trafico.

Pero bueno, después de una breve introducción por parte de Jhon Farrel, toco el turno a Don Dodge el cual nos hablo de los cambios que ha tenido el desarrollo en la Web (La nube / Cloud Computing) así como el avance tecnológico de los móviles pasando de un teléfono celular que era solamente eso y nada mas hasta ser un completo smartphone o micro-pc “diria yo”.

Posteriormente tuvimos un descanso muy breve y de ahí, vino una especie de resumen de lo que veríamos durante todo el evento, presentado por cada uno de los expositores, esto considero que fue muy importante por que nos permitió ver a cuales conferencias iríamos ya que como iba a haber conferencias simultaneas no podríamos estar en todas. Afortunadamente mis gustos coincidieron con los de mi empresa, ya que me sugirieron que fuera a las conferencias de Geolocalización y Andriod cosa que me gusto y me llamo mucho la atención.

Después vino la comida, la cual por cierto estuvo muy rica y fue bastante.

Geo Web Track

Temas: Las APIs Geo de Google, cuándo utilizarlas y Mapeo avanzado: Rendimiento y escalabilidad

Leer más

[Javascript:Jquery] Plugin GoogleMaps

Me entero en Twitter, sobre un plugin de Jquery el cual nos permite trabajar comoda y apliamente con GoogleMaps de una manera muy facil.

Para usarlo primero nos bajamos el Jquery y despues el plugin

En nuestro HTMl agregamos ambos JS’s (El Jquery primero y despues el plugin Jquery.Googlemaps)

Y ahora a agregamos el siguiente script (Javascript)

$('selector').googleMaps();

Y listo con eso ya podemos ver como funciona

Aunque como hemos de suponer es mucho mas funcional usando algo mas de codigo, aqui algunos ejemplos.

Por ejemplo podemos indicar la latitud y la longitud

$(document).ready(function() {
    $('selector').googleMaps({
        latitude: 49.26063518364422,
        longitude: -123.15673828125
    });
});

O algo tan avanzado como una marca, personalizada en cierto punto del mapa.


$(document).ready(function() {
    $('selector').googleMaps({
        markers: {
            latitude:     37.4416,
            longitude: -122.1516,
            icon: {
                image: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png',
                shadow: 'http://chart.apis.google.com/chart?chst=d_map_pin_shadow',
                iconSize: '12, 20',
                shadowSize: '22, 20'
            }
        }
    });
});

Y con el ultimo ejemplo podriamos obtener algo como esto

Google Maps jQuery Plugin

Google Maps jQuery Plugin

Toda la documentacion y mas ejemplos en la pagina web del autor
Google Maps jQuery Plugin – Shawn Mayzes

Leer más

[Programación] El top de los lenguajes mas utilizados

Como fiel defensor de Php, me da mucho gusto que en el top de los lenguajes mas utilizados realizado por TIOBE Programming Community, nuestro querido lenguaje esté en el lugar numero 4(comparado con el 5 que tenia el año pasado).

Algo que podemos destacar (lo comentan en barrapunto)es que Java ha tenido un fuerte descenso, y C sigue creciendo, también otro que esta cayendo muy fuerte es Perl, claro que hay muchos cambios mas, miren la tabla.

Position
Jul 2009
Position
Jul 2008
Delta in Position Programming Language Ratings
Jul 2009
Delta
Jul 2008
Status
1 1 Java 20.452% -0.89% A
2 2 C 17.319% +1.37% A
3 3 C++ 10.419% -0.27% A
4 5 PHP 9.269% -0.26% A
5 4 (Visual) Basic 7.789% -2.66% A
6 8 C# 4.540% +0.54% A
7 7 Python 4.435% -0.54% A
8 6 Perl 4.200% -0.93% A
9 9 JavaScript 3.513% +0.76% A
10 10 Ruby 2.567% -0.17% A
11 11 Delphi 1.998% -0.01% A
12 13 PL/SQL 0.891% +0.16% A
13 14 SAS 0.794% +0.17% A
14 24 RPG (OS/400) 0.740% +0.41% A
15 16 Pascal 0.707% +0.27% A
16 26 ABAP 0.703% +0.44% A-
17 20 Lisp/Scheme 0.607% +0.22% B
18 12 D 0.593% -0.63% B
19 18 Lua 0.531% +0.12% B
20 27 MATLAB 0.512% +0.26% B

Si bien este esto es algo basado en cálculos, y no es 100% exacto podemos ir viendo la tendencia en cuanto a el uso de lenguajes programación se refiere.

Y para terminar la pregunta del millón ¿Por que Php sigue siendo tan mal pagado (sobre todo en México)?
La respuesta podría ser, por que es fácil, pero la duda surge por lo siguiente:

Si necesitas una web que para un portal , que tenga usuarios, panel de control, si contratas a alguien que lo haga en Java le pagarías lo triple que si lo hace con Php, ¿por qué? si se obtiene lo mismo!.

¿Ustedes que opinan? por que sucede esto.

Me entere por Barrapunto: Top 20 de lenguajes de programación actualizado a Julio de 2009
El original esta aquí con mas datos (en ingles): TIOBE Programming Community Index for July 2009

Leer más

[Ajaxman] Cargando…..

Después de mas de un mes de ausencia, aquí estamos otra vez online.

Les contare poco a poco que es lo que ha pasado en estos días y un poco también de toda esta nueva experiencia que he adquirido de muchas cosas.

Nota importante este post es PERSONAL y muy muy grande así que prepárense una palomitas y una pepsi(me gusta mas que la coca) o un café por que va a estar muy interesante.

Resulta que como lo habrán podido notar(los que me siguen), me case con la mujer mas hermosa, linda y cariñosa del mundo se llama Suly.

La crónica mas o menos estuvo así:

El día jueves 09 de octubre en el juzgado 16 de el DF (México) nos casamos por la ley-civil, hay estuvo muy tranquilo pero sin embargo pues en es nos aventamos todo el día, en el tramite y ultimando los detalles de la ceremonia del  sábado.

El viernes 10 de octubre fui a la chamba y llegue tarde a mi casa y me puse ha hacer arreglos de ultima hora, como vivía en la casa de mi hermana, en ese momento se le ocurrió hacer mil cosas, que en vez de ser para mi beneficio, fue para el de ella, pero bueno, en ese viernes en la noche que se supone debería de descansar y relajarme, termine durmiéndome hasta las 2 de la mañana, lo bueno fue que estuve con mi sobrino, el cual por suerte me echo la mano.

Y llego el gran día, señalado en este blog, el famoso “11 DE OCTUBRE 2008“.

Y pues como les comente había muchos detalles que afinar, tuve que pararme a las 7 de la mañana osea había dormido 5 Horas cuando se supone que debía descansar para mi boda, pero bueno.

Últimos arreglos con el Salón, y empezar a arreglarme chido para el mayor evento en la historia.

Y bueno la boda estaba programada para las 5 PM (Hora de México DF) , y pues yo saliendo a las carreras, lo bueno es que me esta comunicando continuamente con mi esposa(ese día aun no era mi esposa) y pues yo salí un poco antes que ella para llegar primero.

Ahí con un chingo de nervios , en primera por que en la iglesia había mucha gente, pero bueno, todo sucedió muy bien, la ceremonia fue todo un éxito, salvo por que el Sacerdote era un poco manchado, pero bueno, les platico un poco de como estuvo la ceremonia.

Llegue como a las 5 pm y mi esposa llego un par de minutos después, y no es por nada pero se veía super, super hermosa, como una princesita, en ese momento me dije “soy el hombre mas afortunado del mundo“, luego entramos a la iglesia, ella llego acompañada del brazo de su hermano(mi cuñado) el cual me hizo entrega de ella en la iglesia, yo iba de la mano de mi mama, mi papa (ya no vive desde hace mas de 10 años), la misa fue muy padre y después de dado el sermon, los dos decidimos aceptar dicho compromiso(claro que para ello había muchos nervios), luego pasamos a los anillos, las arras y el lazo y con un beso sellamos nuestro amor.

Nuestra Boda: Suly y Javier

Nuestra Boda: Suly y Javier

Saliendo de la iglesia, nos tomamos unas fotos con la familia y los invitados, ahí también hubo felicitaciones de todos los invitados, después nos fuimos a tomar unas fotos al estudio, la cita en el salón estaba preparada para las 7:30 pero debido al algunos errores “Logisticos” se dio acceso media hora antes, lo bueno fue que llegamos a tiempo después de tomarnos la foto.

Nuestra Boda: Suly y Javier

Nuestra Boda: Suly y Javier

Llegamos al salón, pero como decidimos hacerlo mas chido, en cuanto llegamos nos fuimos rápido a la parte superior de dicho salón y de ahí bajamos caminando por unas escaleras entre aplausos y música(marcha nupcial), después esta agradable recepción por parte de todos los invitados, procedimos a bailar el tradicional vals, la canción elegida por los dos fue la de “Pasion”, la cual cantan Sarah Brightman y Fernando Lima, el vals estuvo muy chido, sobretodo por que nos echaron burbujas, se veía como un sueño.

Al terminar el vals, como es costumbre en México, pues la cargue hasta la mesa de honor.

También vinieron los regalos, los cuales nos encantaron y nos sentimos muy agradecidos de que nos los hayan dado(Gracias a todos).

Luego de eso vino la cena, la cual estuvo muy rica y sabrosa, hubo marichi(no habia otra opcion, es que la neta no me late el mariachi), y posteriormente, vino si no me equivoco la víbora de la mar, que mas bien pareció un slam muy pesado, pero afortunadamente no me caí (jaja), después mi esposa aventó el ramo y yo la liga, sin mucha novedad salvo que casi le toca el ramo a mi sobrina “Liz” de 8 años mas o menos y la liga le toco a mi cuñado, el hermano de mi esposa.

De ahí siguió la marcha fúnebre y después, la recolección de $ para la luna de miel(Esta es una costumbre que se tiene en México), nos fue bastante bien, claro que mientras sucedía eso, pues tambien estuvo la repartición de Pastel, el cual estuvo muy rico por cierto.

Ademas de todo esto, pues hubo baile, como es natural (lastima no hubo ska), y de ahí un rato mas de fiesta y para terminar una batucada con muchas luces (estuvo tan chido que es muy difícil de describir) había luces fosforescentes, luces verdes, humo, y sobre todo mucha diversión.

El evento termina a eso como a eso de las 2 am(tiempo de México), de ahí nos fuimos a mi casa a continuar un rato mas, donde nos recibieron con arroz(mucho arroz), acto que no pudimos hacer al salir de la iglesia.

De ahí al siguiente día, el tradicionalmente en México “el recalentado”, y después de abrir los regalos que nos habían dado la noche anterior, también hay que hacer hincapié en las palabras que todos nos dedicaron, muchas gracias.

Después de una triste despedida de los familiares tanto de mi esposa como los míos, pues mi hermano y mi hermana nos acompaño a mi nueva casa.

De ahí nos empezamos a preparanos para irnos de luna de miel a Cancún México.

El Lunes, nos despertamos muy temprano, y muy emocionados con nuestro viaje, el vuelo salio casi con media hora de retraso, nos fuimos en “Mexicana de aviación” avión Airbus A320* en general muy tranquila la ida ademas de muy buen servicio, y déjenme comentarles un secreto, nunca antes había viajado en avión, había nervios por ser la primera vez, pero como fue muy tranquilo, pues no hubo mas problema que unos cuantos nervios.

Avion A320 De Méxicana(es igual al que tomamos)

Avion A320 De Méxicana(es igual al que tomamos)

Después de volar como hora y media, llegamos a Cancún con un poco de lluvia, buscamos como irnos ha el hotel, que ya estaba previamente reservado, y pues como a pesar de que hibamos en plan de luna de miel, y pues llevabamos mas o menos de dinero, preferimos ahorrar en vez de pagar cosas innecesarias, por lo cual, en vez de tomar taxi al hotel que costaba casi 50 Dolares (500 pesos), por un trayecto de unos cuantos kilómetros, se me hizo muy exagerado asi que usamos otra forma de llegar.

Autobús ADO de el aeropuerto al centro de Cancún(35 Pesos/3 Dolares), y de ahí un camión que pasa por la zona Hotelera, (6.5 Pesos /menos de 1 dolar) o sea nos ahorramos como un 75%, muy bueno no?, pero pasemos a lo demás.

Llegamos algo tarde al Hotel, nos recibieron muy bien, y nos es por promocionar dicho hotel pero nos encanto el hotel en cuestión se llama “Bel Air Collection“, elijemos la habitación llamada “Kool Lanais“, la cual incluye una Botella de vino, Vista al mar, Jacuzzi Doble, Y todo con una decoración muy romántica.

Ese día ya no fuimos al mar ya que era tarde y estaba lloviendo muy fuerte.

Al siguiente día, bajamos a desayunar en el restaurante “Fusion” que forma parte del Hotel, el desayuno estuvo de lo mas completo y rico, y sobre todo muy llenador, luego fuimos al mar, en el cual por cierto había olas muy fuertes y bandera roja, pero aun así estuvo muy divertido, luego fuimos a la alberca que esta en el hotel y al final fuimos al centro a reparar el celular de mi esposa, el cual le cayo agua, y con el cual estábamos tomando fotos, y la necesitábamos para tomar fotos de una cena especial, que había reservado, pero como nos dijeron que nos lo daban hasta el día siguiente fuimos por una cámara de 5MPX, con 1 Gb de memoria, digo no es mucho pero sirve, para guardar los recuerditos.

La playa de Cancún

La playa de Cancún

Nos regresamos a la esperada cena, pero des afortunadamente había mucho viento, entonces nos comentaron que si podíamos posponer la cena para el día siguiente dado que la cena era a la orilla del mar y al aire libre, también en dado caso de que al siguiente día estuviera así, pues nos habilitarían el restaurante “Fusion” decorado y apartado exclusivamente para nosotros.

Mi esposa Suly y yo en Cancún

Mi esposa Suly y yo en Cancún

Y pues así fue el día miércoles desayunamos salimos un rato al centro, fuimos por el celular que al parecer ya no jala para nada, pasamos a comprar algunos recuerdos para traer, y luego regresamos en la tarde a el hotel, y pues nos preparamos para la cena.

Leer más

[Javascript] Sexy Alert Box: Mejorando el alert de Javascript

Creo que ahora si le voy ha echar muchas ganas ha este blog, como ya terminaron las vacaciones las visitas han empezado a subir de muy buena forma, ahora si vamos por las 1000 diarias para lo cual ya falta poco.

Y bien, como ando tan a gusto posteare algo muy interesante y muy útil para los desarrolladores Web, y es un script que me encontré para poder mejorar nuestras aplicaciones, inclusive yo lo estoy pensando seriamente en usarlo con mi proyecto.

Se llama Sexy Alert Box,y retomando lo que dicen en coders.me Sexy Alert Box es un clon “sexy” del clásico alert de javascript. Está basado en PBBAcpBox — un script que lamentablemente el autor paró de desarrollar — sin embargo, el código fue publicado bajo una licencia libre, con lo cual pude mejorarlo y adaptarlo a la versión 1.2 de Mootools.Eduardo

Ahora bien de que se trata este script, bien recordemos que todos los programadores alguna vez hemos usando la famosa función Alert de Javascript, pues como Eduardo lo dice,el ha retomado un código y lo ha mejorado para poder usarlo con Mootools, para que ese clásico Alert funcione y se vea mejor, como lo muestra la siguiente imagen.

sexyalertbox

Para usarla es muy simple solo tenemos que agregar el siguiente código a nuestra pagina web.

[Javascript]


[/Javascript]

De esta forma ya podremos usarlo y disfrutar de la ventajas de este script, esta licenciado bajo la licencia MIT.
Mas información y documentación de este script en | Sexy Alert Box
Descarga SexyAlertBox.mini.js (versión comprimida)
Descarga SexyAlertBox.zip (SexyAlertBox.js + mootools + ejemplos)

Leer más

[Jquery-Plugin]Sparklines, creado graficas con Jquery

Leo una interesante entrada de Andrés Nieto sobre un plugin con el cual podemos crear pequeñas grafícas usando Javascript, obviamente apoyandonos de la librería Jquery.

jquery sparklines

Este importante plugin tiene varias opciones comunes como son

  • type – line (default), bar o tristate
  • width – Ancho de la gráfica, por defecto “auto”.
  • height – Altura de la gráfica, por defecto “auto”.
  • lineColor – Color de la línea
  • fillColor – Color del relleno

Esto lo recalco por que ademas de eso podemos usar muchas otras opciones, como son

Opciones de gráficas tipo línea:

  • spotColor – Oculta o muestra el color del valor final.
  • spotRadius – En pixels (default: 2)

Opciones de gráficas tipo Bar:

  • barColor – Color de los valores positivos
  • negBarColor – Color de los valores negativos
  • barWidth – Tamaño de cada barra, en pixels
  • barSpacing -Separación entre barras, en pixels.
  • zeroAxis – Centro del eje Y.

Opciones de gráficas tipo Tristate:

  • posBarColor – Colores valores positivos
  • negBarColor – Colores valores negativos
  • zeroBarColor – Colores para valores cero.
  • barSpacing – Separación entre barras, en pixels
  • zeroAxis – Centro del eje Y

Creo que Ajax, esta llegando hasta limites insospechados si ha esto le añadimos la próxima versión de HTML, el 5, tal ve pronto salgan juegos muy buenos creados con Javascript y hasta aplicaciones mas poderosas.

Para saber como pueden usarlo en su sitio web, pueden darse la vuelta por el Blog de Andrés donde viene la información completa.
Vía | jQuery Sparklines, gráficas sencillas con jQuery

Leer más

Historico de entradas

febrero 2012
L M X J V S D
« ene    
 12345
6789101112
13141516171819
20212223242526
272829  

Ajaxman

Mi nombre es Javier, soy desarrollador web con especialización en PHP (avanzado), HTML, CSS y Javascript(Medio).

Me considero evangelizador de Kohana Framework, Mozilla Firefox y GNU/Linux Debian.

Estoy casado, y tengo dos hermosos hijos.

Todos los contenidos a menos que se exprese lo contrario estan bajo licencia Creative Commons.

Enlazanos!!

hit counters online counter