Tag Archives: Jquery

Detectar iPad – iPhone – iPod con Javascript


Muchas de las personas que desarrollan sitios web seguramente se habrán topado ya con la famosa pregunta “¿y mi sitio se va a poder ver bien desde el Nuevo iPad?”. Existen varias soluciones para esto, si por ejemplo utilizamos algún CMS como wordpress o Joomla existen bastantes plugins que nos permitirán adaptar nuestros sitios para que puedan ser leídos comodamente en estos dispositivos, algunos de los que me vienen a la mente son WPtouch, WordPress PDA & iPhon, etc.

Sin embargo si somos de esos desarrolladores mas “artesanales” y nos gusta hacer los trabajos desde 0 tenemos que implementar esas detecciones a mano, en realidad no es tan difícil, se requiere un poco de paciencia mas que nada para desarrollar una buena hoja de estilos, lo demás es bastante fácil.

Basta con colocar un pequeño código javascript, por ejemplo:

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) 
{
      //El usuario esta utilizando un iPhone, iPad o iPad para visualizar el sitio web
      //Cargar la respectiva hoja de estilos
}
else
{
     //Nos visitan desde un navegador tradicional
     //cargamos la hoja de estilos por defecto :)
}

La funcionalidad de esa condición es bastante sencilla, si el navegador con el que nos visitan tiene en su estructura iPhone, iPod o iPad, lo mas seguro es que nos estén visitando desde uno de esos dispositivos, esta validación se puede realizar también desde PHP, sin embargo yo la prefiero hacer del lado del cliente para aligerar algo de carga al servidor.

salu2

Crea tu portada para el nuevo facebook

Pues exactamente como dice el titulo del articulo, hace unas semanas me dieron ganas de hacer una aplicacion web que pudiera aprovechar todo el potencial que nos ofrece la portada para el nuevo facebook, anteriormente publique algunos ejemplos en este post 10 diseños muy creativos para la portada del nuevo facebook de como podria quedar nuestro perfil y de como las empresas de marketing podrian aprovechar este nuevo diseño (sin caer en el SPAM, claro esta).

La aplicación es bastante sencilla de usar:

  • Paso 1: Elije la imagen que quieras utilizar para tu portada y cargala.
  • Paso 2: Recorta la seccion de la imagen que quieras utilizar como imagen de perfil.
  • Paso 3: Descarga las 2 imagenes a tu computadora y usalas en facebook como quieras, Listo!.

La aplicación aun esta en fase Beta y tengo que calibrar algunos detalles todavía, pero ya esta totalmente funcional :), prueben la y me avisan que les parece.

Link para acceder a la pagina: Crea tu portada para el nuevo facebook

salu2

Formulario Jquery y Ajax desde 0 [PHP]

Muy bien, si haz llegado hasta esta parte del tutorial te felicito, ya casi acabas el formulario, en los post anteriores hicimos las validaciones del lado del cliente, ahora toca hacer las validaciones del lado del servidor y enviar el correo utilizando PHP.

Los post del tutorial son los siguientes:

Es un hecho que al final del día no podemos confiar en los usuarios que utilizaran la aplicación (suena mal, pero así es), existen practicas de seguridad que son básicas como por ejemplo asegurarnos que los datos que recibimos sean correctos, es decir si pedimos que el usuario ingrese un correo electrónico sea un correo electrónico valido, etc.

Tenemos que crear un nuevo archivo php, asegúrate de que el nombre sea el mismos que el que indicaste en el javascript

=$minimo && $cantCar<=$maximo) return TRUE;
		else return FALSE;
	}
}

function validaCorreo($valor)
{
	if(eregi("([a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30})", $valor)) return TRUE;
	else return FALSE;
}

// MAIN	

if($_POST)
{
	foreach($_POST as $clave => $valor) $$clave=addslashes(trim(utf8_decode($valor)));
	sleep(5);
	if(!validaLongitud($nombre, 0, 4, 50)) $error=1;
	if(!validaLongitud($web, 1, 4, 50)) $error=1; 
	if(!validaCorreo($correo)) $error=1;
	if(!validaLongitud($comentarios, 0, 5, 500)) $error=1;
	
	if($error==1) echo "Error";
	else
	{
		$fecha=date("d/m/y - H:i");
		$mensaje="
Tienes un nuevo mensaje desde el Sitio:

Fecha: $fecha
Nombre: $nombre
Sitio web: $web
Correo electrónico: $correo
Comentarios: $comentarios";

		//Debug en un archivo ... probando haber si imprime
		
		/*$master=fopen('mensajes.txt',a);
		fwrite($master,",".$fecha.",".$nombre.",".$web.",".$correo.",".$comentarios);
		fclose($master);*/
		
		mail("[email protected]", "Comentario desde la Web", $mensaje, "From: Sitio Web ");
		echo "OK";
	}
}
?>

Ok, explicare el código paso por paso, al inicio del script hay 2 funciones que se utilizaran mas abajo, lo importante comienza donde esta el

if($_POST)
{

Estamos indicando que si el arreglo asociativo $_POST no esta vacío entonces ejecutaremos el código entre las llaves. La primera línea

foreach($_POST as $clave => $valor) $$clave=addslashes(trim(utf8_decode($valor)));

Foreach lo que hace es recorre el array y crear una variable por cada valor que encuentre y le asigna como nombre el mismo (similar a si utilizáramos extract($_POST); o algo similar), además de eso por seguridad le aplica la función trim que elimina espacios en blanco al inicio y al final y addslashes que agrega barras invertidas en caso de encontrar caracteres extraños como comillas simple.

Ahora realizamos las validaciones haciendo uso de las funciones de arriba

        if(!validaLongitud($nombre, 0, 4, 50)) $error=1;
	if(!validaLongitud($web, 1, 4, 50)) $error=1; 
	if(!validaCorreo($correo)) $error=1;
	if(!validaLongitud($comentarios, 0, 5, 500)) $error=1;

Las funciones validaLongitud y validaCorreo son muy similares a las que hicimos anteriormente en Javascript 🙂

function validaLongitud($valor, $permiteVacio, $minimo, $maximo)
{
	$cantCar = strlen($valor);
	if(empty($valor))
	{
		if($permiteVacio) return TRUE;
		else return FALSE;
	}
	else
	{
		if($cantCar>=$minimo && $cantCar<=$maximo) return TRUE;
		else return FALSE;
	}
}

La función recibe 4 parámetros, el valor, una variable para ver si puede estar vacía, una longitud mínima y una máxima, después obtenemos la longitud de la cadena, revisamos si la variable esta vacía y de ser así vemos si esta permitido que lo este, de ser verdadero esto regresamos true, por el otro lado si la variable no viene vacía tenemos que ver que la longitud cumpla con la longitud mínima y máxima, en cado de cumplirse la condición regresamos verdadero.

function validaCorreo($valor)
{
	if(eregi("([a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30})", $valor)) return TRUE;
	else return FALSE;
}

En esta función solamente se evalúa con la función eregi que la cadena $valor cumpla con las condiciones de la expresion regular, de ser cierto devolvemos true, de lo contrario false, no hay nada mas que decir.

Esta demás decir que dependiendo de si el resultado de las validaciones es verdadero o falso pondremos un 1 o dejaremos en 0 la variable $error.

Después revisamos si hubo algún error (si error es igual a 1), de ser así imprimimos con echo error, si no hubo errores procedemos a enviar el mensaje con el siguiente código.

	if($error==1) echo "Error";
	else
	{
		$fecha=date("d/m/y - H:i");
		$mensaje="
Tienes un nuevo mensaje desde el Sitio:

Fecha: $fecha
Nombre: $nombre
Sitio web: $web
Correo electrónico: $correo
Comentarios: $comentarios";

		//Debug en un archivo ... probando haber si imprime
		
		/*$master=fopen('mensajes.txt',a);
		fwrite($master,",".$fecha.",".$nombre.",".$web.",".$correo.",".$comentarios);
		fclose($master);*/
		
		mail("CORREO EJ. [email protected]", "Comentario desde la Web", $mensaje, "From: Sitio Web ");
		echo "OK";
	}

Lo que hacemos básicamente es armar el cuerpo del mensaje, después utilizar la función mail

mail("[email protected]", "Comentario desde la Web", $mensaje, "From: Sitio Web ");

La función mail envía un mensaje de acuerdo a parámetros recibidos, mas adelante aprenderemos que hay maneras mas sofisticadas de enviar correo electrónico con todas las cabeceras en orden, pero por el momento esta bien de esta manera.

Al final para avisarle al javascript (el cual hizo la petición ajax) que todo ha ido bien regresamos un OK 🙂

Y listo con esto el mensaje ha sido enviado!

Formulario Jquery y Ajax desde 0 [Ajax]

Hola, me ha costado mucho seguir con este tutorial por cuestiones de tiempo, pero para no quedar mal con mis lectores y en especial con la gente que ha estado siguiendo este manual (que son muchos) aqui estamos trabajando 🙂

Les recuerdo el orden de los post por si alguien esta perdido y no los encuentra.

Ajax, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se requieren al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML.

Sabiendo esto, podemos decir que el propósito general de la tecnología ajax es enviar y recibir información sin que el navegador tenga que refrescar la pagina y por ende el usuario interrumpir su navegación :).

Hoy en día para hacer uso de esta tecnología tenemos varias opciones, la primera, a la antigua seria escribiendo el código en javascript tal cual, las segunda que es mucho mas sencilla seria hacer uso de alguna librería como Jquery, la libreria jquery implementa métodos que nos facilitan mucho la vida a la hora de enviar y recibir información asíncronamente. Sin embargo como el propósito principal de este tutorial es aprender lo aremos de la manera fea (old school) es decir, sin librería :p.

tenemos el siguiente archivo funciones.js

// Variables para setear
onload=function() 
{

	divTransparente=document.getElementById("transparencia");
	divMensaje=document.getElementById("transparenciaMensaje");
	form=document.getElementById("formulario");
	urlDestino="mail.php";
	
	claseNormal="input";
	claseError="inputError";
	

	
	preCarga("img/ok.png", "img/loading4.gif", "img/error.png");
}

function preCarga()
{
	imagenes=new Array();
	for(i=0; i=minimo && cantCar<=maximo) return true;
		else return false;
	}
}

function validaCorreo(valor)
{
	var reg=/(^[a-zA-Z0-9._-]{1,30})@([a-zA-Z0-9.-]{1,30}$)/;
	if(reg.test(valor)) return true;
	else return false;
}

function validaForm()
{
	limpiaForm();
	error=0;
	
	var nombre=eliminaEspacios(form.inputNombre.value);

	var web=eliminaEspacios(form.inputWeb.value);
	var correo=eliminaEspacios(form.inputCorreo.value);
	var comentarios=eliminaEspacios(form.inputComentario.value);
	
	if(!validaLongitud(nombre, 0, 4, 50)) campoError(form.inputNombre);

	if(!validaLongitud(web, 1, 4, 50)) campoError(form.inputWeb);
	if(!validaCorreo(correo)) campoError(form.inputCorreo);
	if(!validaLongitud(comentarios, 0, 5, 500)) campoError(form.inputComentario);
	
	if(error==1)
	{
		var texto="Error

Error: Complete los campos necesarios.

"; muestraMensaje(texto); } else { var texto="Enviando
Enviando. Por favor espere.

"; muestraMensaje(texto); var ajax=nuevoAjax(); ajax.open("POST", urlDestino, true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send("nombre="+nombre+"&web="+web+"&correo="+correo+"&comentarios="+comentarios); ajax.onreadystatechange=function() { if (ajax.readyState==4) { var respuesta=ajax.responseText; if(respuesta=="OK") { var texto="Ok
Gracias por su mensaje.
Le responderemos a la brevedad.

"; } else var texto="

Error: intente más tarde.

"; muestraMensaje(texto); } } } } // Mensajes de ayuda if(navigator.userAgent.indexOf("MSIE")>=0) navegador=0; else navegador=1;

A continuación explicare que es lo que hace cada bloque de código, las primeras instrucciones a ejecutar, una vez cargado los archivos de JavaScript y la pagina serian las que están dentro del método onload y que en Jquery seria equivalente a

jQuery(document).ready(function(){});

La función de la que hablamos es:

onload=function() 
{

	divTransparente=document.getElementById("transparencia");
	divMensaje=document.getElementById("transparenciaMensaje");
	form=document.getElementById("formulario");
	urlDestino="mail.php";
	
	claseNormal="input";
	claseError="inputError";
	

	
	preCarga("img/ok.png", "img/loading4.gif", "img/error.png");
}

Lo que hacemos básicamente es guardar las referencias a los elementos del DOM (Document Object Map) en variables para mas tarde poder utilizarlas, indicamos el archivo php que procesara la petición que envié nuestro formulario por medio de ajax (urlDestino=”mail.php”;), si tu archivo se llamara de otra forma ahí tendrías que modificar el nombre, y por ultimo utilizamos la función preCargar a la cual le pasamos 3 strings (que son rutas de imágenes).

function preCarga()
{
	imagenes=new Array();
	for(i=0; i

Esta función es muy pequeña y lo que hace es pre cargar las imágenes que le pasemos antes de que sean mostradas al usuario, esto con finalidades de estética del formulario, realice un post aparte que explica un poco mas sobre esto Precargar imágenes con Jquery

Y ahora viene la función mas importante, donde se realiza toda la transacción y esa es validaForm(), si recuerdan en el botón de submit de nuestro formulario tenemos una instrucción OnClick

vuelvo a repetir, este tipo de técnicas ya no son muy utilizadas, ya que desde Jquery fácilmente podríamos capturar el evento submit del formulario, pero siempre es bueno conocer las bases de las nuevas tecnologías.

La función tiene el siguiente código

function validaForm()
{
	limpiaForm();
	error=0;
	
	var nombre=eliminaEspacios(form.inputNombre.value);

	var web=eliminaEspacios(form.inputWeb.value);
	var correo=eliminaEspacios(form.inputCorreo.value);
	var comentarios=eliminaEspacios(form.inputComentario.value);
	
	if(!validaLongitud(nombre, 0, 4, 50)) campoError(form.inputNombre);

	if(!validaLongitud(web, 1, 4, 50)) campoError(form.inputWeb);
	if(!validaCorreo(correo)) campoError(form.inputCorreo);
	if(!validaLongitud(comentarios, 0, 5, 500)) campoError(form.inputComentario);
	
	if(error==1)
	{
		var texto="Error

Error: Complete los campos necesarios.

"; muestraMensaje(texto); } else { var texto="Enviando
Enviando. Por favor espere.

"; muestraMensaje(texto); var ajax=nuevoAjax(); ajax.open("POST", urlDestino, true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send("nombre="+nombre+"&web="+web+"&correo="+correo+"&comentarios="+comentarios); ajax.onreadystatechange=function() { if (ajax.readyState==4) { var respuesta=ajax.responseText; if(respuesta=="OK") { var texto="Ok
Gracias por su mensaje.
Le responderemos a la brevedad.

"; } else var texto="

Error: intente más tarde.

"; muestraMensaje(texto); } } } }

Validando

En las primeras líneas realizamos validaciones con funciones previamente definidas como validaLongitud y validaCorreo, esas funciones son muy sencillas y básicamente lo que harán serán regresar true o false dependiendo de si se cumplen o no las condiciones definidas, esto con el fin de saber si debemos de enviar o no el formulario, echemos un vistazo a la función validaLongitud.

function validaLongitud(valor, permiteVacio, minimo, maximo)
{
	var cantCar=valor.length;
	if(valor=="")
	{
		if(permiteVacio) return true;
		else return false;
	}
	else
	{
		if(cantCar>=minimo && cantCar<=maximo) return true;
		else return false;
	}
}

function campoError(campo)
{
	campo.className=claseError;
	error=1;
}

La función recibe 4 parámetros, el string (valor, lo que queremos comprobar), dato para ver si es valido que el campo sea nulo, la longitud mínima y la longitud máxima, con la línea:

var cantCar=valor.length;

obtenemos la cantidad de caracteres del stringa a evaluar y lo comparamos mas abajo en las condicionales, después utilizaremos una función llamada campoError que pondrá en 0 o 1 la variable Error dependiendo del resultado de la evaluación.

Si Error es igual a 1 significa que algo anda mal y entonces mostramos un mensaje de aviso al usuario

if(error==1)
	{
		var texto="Error

Error: Complete los campos necesarios.

"; muestraMensaje(texto); } else {

Como pueden observar en el código, guardamos un trozo de instrucciones en HTML en una variable la cual es pasada a una función llamada muestraMensaje

function muestraMensaje(mensaje)
{
	divMensaje.innerHTML=mensaje;
	divTransparente.style.display="block";
}

Este método es el responsable de que aparezca el mensaje de alerta en el formulario.

Enviando la petición

Por el contrario si todo va bien entonces las instrucciones que el navegador ejecutara serán las siguientes:

var texto="Enviando
Enviando. Por favor espere.

"; muestraMensaje(texto); var ajax=nuevoAjax(); ajax.open("POST", urlDestino, true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.send("nombre="+nombre+"&web="+web+"&correo="+correo+"&comentarios="+comentarios); ajax.onreadystatechange=function() { if (ajax.readyState==4) { var respuesta=ajax.responseText; if(respuesta=="OK") { var texto="Ok
Gracias por su mensaje.
Le responderemos a la brevedad.

"; } else var texto="

Error: intente más tarde.

"; muestraMensaje(texto); } }

Guardamos la porción de código html en la variable texto, después se ejecuta la función nuevoAjax(), la cual prepara el HTTP request Object para posteriormente ser utilizado como podemos observar en las lineas.

ajax.open("POST", urlDestino, true);
		ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		ajax.send("nombre="+nombre+"&web="+web+"&correo="+correo+"&comentarios="+comentarios);

Donde indicamos el método de envió de datos (GET o POST), el destino y el tipo de petición, es decir asíncrono, con el método send indicamos los parámetros que enviaremos, es decirlos datos que introdujo el usuario en el formulario.

Después de preparar la petición siguen validación del estado de la petición (ajax.readyState==4), si el mensaje fue entregado o no, etc. Para saber mucho mas afondo de como funciona XMLHttpRequest les recomiendo lean la siguiente documentación XMLHttpRequest.

Recibimos la respuesta de nuestro script php y dependiendo de si el mensaje fue entregado correctamente (un OK) o hubo algún error en la transmisión mostramos un mensaje al usuario

var respuesta=ajax.responseText;
				if(respuesta=="OK")
				{
					var texto="Ok
Gracias por su mensaje.
Le responderemos a la brevedad.

"; } else var texto="

Error: intente más tarde.

"; muestraMensaje(texto);

Hasta aquí llega esta parte!, ya casi terminamos 🙂

Diplomado Fundamentos HTML5 con Java Script Avanzado


Por parte de Rubén Mugártegui les extiendo la invitación para tomar el Diplomado “Fundamentos de HTML5” que se llevará a cabo en dos partes: la primera (Introducción a HTML5) comienza el 28 de noviembre, y la segunda (HTML5 con Javascript) hasta el próximo año. Algunos puntos a aclarar:

Es un curso en linea de 3 semanas de duración, aproximadamente les tomará una media hora45 minutos al dia de estudio

El curso es respaldado por un instructor certificado y reconocido por Microsoft como Microsoft Valuable Professional (MVP).

Se entregará un diploma con valor curricular, siempre y cuando se concluya 100% el diplomado con las actividades perfectamente completadas.

El costo del diplomado es de $45 dolares, pero se otorgan becas del 100% hay dos opciones:

Buscando a una persona que haya terminado el diplomado de Azure (Jorge Angel Mena) para que los invite, siempre y cuando se comprometan a terminar el diplomado. Los interesados favor de mandar un correo a [email protected]

  • Comprometerte a terminar el diplomado. Si no lo logras, no podrás tomar el curso de HTML5 avanzado. Posterior a tu inscripción recibirás un formato de compromiso de término.
  • Para registrarte al diplomado usa la siguiente liga
    Les recomiendo que vayan descargando WebMatrix

El temario del diplomado es el siguiente: El usuario…

  • Identificará los principales elementos de la estructura de una página HTML5
  • Conocerá los fundamentos y propósito de las hojas de estilo en cascada (CSS)
  • Identificará los principales elementos de HTML
  • Podrá crear páginas Web incorporando imágenes incluyendo mapas de imágenes
  • Identificará los distintos tipos de listas disponibles en HTML
  • Identificará los usos principales de las Tablas
  • Podrá crear formularios para captura de datos
  • Incorporará código JavaScript en las páginas Web
  • Incorporará características multimedia en las páginas Web
  • Identificará el estado actual de HTML5
  • Conocerá algunas de las herramientas disponibles para crear código HTML
  • Logrará comprender las características más importantes del navegador Internet Explorer 9 y cómo explotar las mismas a través del uso de los estándares de HTML5.
  • Tendrá la oportunidad de brindar riqueza a sus sitios convirtiéndolos en aplicaciones para lograr mayor exposición dentro del escritorio Windows.

Cualquier duda, Habrá una sesión de videoconferencia el Jueves 17 de Noviembre a las 17:00 horas (Centro del Tiempo de México) http://ti-capacitacion.com/ html5/default.htm