Category Archives: Diseño

Tributo a Samurai Jack: Imágenes y Sountrack











Hace algunas semanas me vinieron a la mente recuerdos de la caricatura de Samurai Jack (la verdad no se por que), me acuerdo que la veía en la televisión cuando era niño y un día simplemente dejaron de transmitirla (nunca supe la razón), en mi opinión este tipo de animación para niños son las que realmente valen la pena puesto que ahora que soy mayor puedo captar y asimilar cosas que normalmente un niño de 5-10 años no lo haría, después de comprar los dvd’s para por fin terminar de ver la serie me doy cuenta que los autores quisieron transmitir muchas enseñanzas que incluso aplican para los adultos, valores como el honor y la rectitud son cosas que hoy en día se han perdido en la televisión moderna, todo gracias a cadenas televisivas como Televisa y TV Azteca (en el caso de México) que solo contaminan la mente de las personas con programación basura, es una tristeza encender la televisión y ver el tipo de programas que están pasando. Pero en fin ese no es el caso del post :D, tengo mis DVD’s de Samurai Jack y me da mucha alegría poder ver la serie de nuevo. Algo que también me gusto mucho y que antes no aprecie (probable mente por la edad como mencione) son los sountracks, son espectaculares, les dejo los tres que mas me han gustado de esta serie.

OST – Samurai Jack (James L. Venable) – the story of the past

OST – Samurai Jack (James L. Venable) – Rave in the Forest

Y la tercera se llama Tibet, Where Jack Ends, pero esa se las debo por que no la pude encontrar en youtube, aunque es muy parecida a la primera :p.

salu2

10 diseños muy creativos para la portada del nuevo facebook

Seguramente varios de ustedes (los que tengan cuenta de facebook, y quien no haha) habrá notado la nueva modalidad de perfiles, los llamados timeline, biografías o nuevo perfil de facebook que te permiten poner una imagen tipo portada al inicio de tu perfil.

Hice una recopilación de 10 diseños muy creativos para la portada del nuevo facebook que a mi parecer son bastante originales, espero les gusten :). Para no fomentar el Stalking no voy a poner directamente las url’s a los perfiles de los dueños xD

1.- Manoj Varghese Mathew

2.- Jeremy Bronson

3.- Lanfranco Nantele

4.- Kay Int Veen

5.- Jessica Barnard

6.- Mohammad L. Azzam

7.- Umair Latif

8.- Tom Lambie

9.- Ekkapong Techawongthaworn

10.- Sven De Bruyne

En mi opinión todos los perfiles son geniales, esto sin duda es una gran “herramienta” para la notoriedad ya que se ve la creatividad de las personas (sobretodo, todas aquellas que se dedican al diseño freelance) y como yo no me puedo quedar atrás les muestro mi diseño :p

¿Tienes algún otro diseño original de perfil de facebook que desees compartir? ¿es tu perfil o el de algún amigo? comparte el link en los comentarios y seguro lo publico junto a los demás 🙂

salu2

PD ya estoy poniendo manos al código, digo a la obra xD, para crear una herramienta que haga mas facil hacer los diseños para los perfiles.

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

<?php
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;
  }
}

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 <[email protected]>");
    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 <[email protected]>");
    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 <[email protected]>");

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<arguments.length; i++)
  {
    imagenes[i]=document.createElement("img");
    imagenes[i].src=arguments[i];
  }
}

function nuevoAjax()
{ 
  var xmlhttp=false; 
  try 
  { 
    // No IE
    xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); 
  }
  catch(e)
  { 
    try
    { 
      // IE 
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    catch(E) { xmlhttp=false; }
  }
  if (!xmlhttp && typeof XMLHttpRequest!="undefined") { xmlhttp=new XMLHttpRequest(); } 
  return xmlhttp; 
}

function limpiaForm()
{
  for(i=0; i<=4; i++)
  {
    form.elements[i].className=claseNormal;
  }
  document.getElementById("inputComentario").className=claseNormal;
}

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

function ocultaMensaje()
{
  divTransparente.style.display="none";
}

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

function eliminaEspacios(cadena)
{
  // Funcion para eliminar espacios delante y detras de cada cadena
  while(cadena.charAt(cadena.length-1)==" ") cadena=cadena.substr(0, cadena.length-1);
  while(cadena.charAt(0)==" ") cadena=cadena.substr(1, cadena.length-1);
  return cadena;
}

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 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="<img src='img/error.png' alt='Error'><br><br>Error: Complete los campos necesarios.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
    muestraMensaje(texto);
  }
  else
  {
    var texto="<img src='img/loading4.gif' alt='Enviando'><br>Enviando. Por favor espere.<br><br><button style='width:60px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ocultar</button>";
    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="<img src='img/ok.png' alt='Ok'><br>Gracias por su mensaje.<br>Le responderemos a la brevedad.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
        }
        else var texto="<img src='img/error.png'><br><br>Error: intente más tarde.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
        
        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<arguments.length; i++)
  {
    imagenes[i]=document.createElement("img");
    imagenes[i].src=arguments[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

<button class="button fit" id="botonEnviar" onClick="validaForm()" type="button">Enviar Formulario</button>

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="<img src='img/error.png' alt='Error'><br><br>Error: Complete los campos necesarios.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
    muestraMensaje(texto);
  }
  else
  {
    var texto="<img src='img/loading4.gif' alt='Enviando'><br>Enviando. Por favor espere.<br><br><button style='width:60px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ocultar</button>";
    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="<img src='img/ok.png' alt='Ok'><br>Gracias por su mensaje.<br>Le responderemos a la brevedad.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
        }
        else var texto="<img src='img/error.png'><br><br>Error: intente más tarde.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
        
        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="<img src='img/error.png' alt='Error'><br><br>Error: Complete los campos necesarios.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
    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="<img src='img/loading4.gif' alt='Enviando'><br>Enviando. Por favor espere.<br><br><button style='width:60px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ocultar</button>";
    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="<img src='img/ok.png' alt='Ok'><br>Gracias por su mensaje.<br>Le responderemos a la brevedad.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
        }
        else var texto="<img src='img/error.png'><br><br>Error: intente más tarde.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
        
        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="<img src='img/ok.png' alt='Ok'><br>Gracias por su mensaje.<br>Le responderemos a la brevedad.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
        }
        else var texto="<img src='img/error.png'><br><br>Error: intente más tarde.<br><br><button style='width:45px; height:18px; font-size:10px;' onClick='ocultaMensaje()' type='button'>Ok</button>";
        
        muestraMensaje(texto);

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

Como colocar Google Maps en mi sitio web




Google Maps es sin duda una tecnología muy utilizada hoy en día y es posible que cualquier persona pueda hacer uso de ella en una aplicación web por ejemplo, su implementación es bastante sencilla y es completamente configurable, a continuación les enseñare brevemente como podemos insertar un mapa con una coordenada y un icono pre configurado.

Lo primero que tenemos que hacer es mandar llamar la librería

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Después preparamos nuestro código:

jQuery(document).ready(function() {
      var mapCenter = new google.maps.LatLng(19.69950000000000000000,-101.20028000000000000000);
      var myOptions = {
        zoom: 16,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      activeMap = new google.maps.Map(document.getElementById("div_map"), myOptions);
      var devLocation = new google.maps.LatLng(19.69950000000000000000, -101.20028000000000000000);
      var image2 = 'http://preview.zonau.com.mx/img/marker_venta.png';
      var marker = new google.maps.Marker({
        position: devLocation,
        map: activeMap,
        title:"",
        icon: image2
      });
});

Tranquilos que ahora explicare que hace cada cosa 🙂

var mapCenter = new google.maps.LatLng(19.69950000000000000000,-101.20028000000000000000);

con el metodo new google.maps.LatLng(); le damos las coordenadas en las que comenzara la vista del mapa, guardamos los datos en la variable mapCenter.

Vayan a la seccion de Mapa (la pestaña de mapa junto a la de video, plano e imagen).

Después de eso, para inicializar el mapa creamos el objeto Map Options que tendrá las configuraciones iniciales.

      var myOptions = {
        zoom: 16,
        center: mapCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

  • zoom: especifica el nivel de zoom con que se iniciara, entre mas zoom mas cerca.
  • center: indica la coordenada inicial que previamente definimos
  • mapTypeId: el tipo de mapa que utilizaremos, se aceptan los siguientes parámetros:
  • ROADMAP, que muestra los mosaicos normales en 2D predeterminados de Google Maps.
  • SATELLITE, que muestra imágenes de satélite.
  • HYBRID, que muestra una mezcla de mosaicos fotográficos y una capa de mosaicos para los elementos del mapa más destacados (carreteras, nombres de ciudades, etc.).
  • TERRAIN, que muestra mosaicos de relieve físico para indicar las elevaciones del terreno y las fuentes de agua (montañas, ríos, etc.).

Ya inicializado después tenemos que indicar el contenedor del mapa, en este casi un div con id div_map y le pasamos como parámetro el objeto de inicializacion myOptions

activeMap = new google.maps.Map(document.getElementById("div_map"), myOptions);

Ahora ya con esto nuestro Mapa esta funcionando, pero no nos conformamos con eso x’D, crearemos un marcador 🙂

var devLocation = new google.maps.LatLng(19.69950000000000000000, -101.20028000000000000000);
      var image2 = 'http://preview.zonau.com.mx/img/marker_venta.png';
      var marker = new google.maps.Marker({
        position: devLocation,
        map: activeMap,
        title:"",
        icon: image2
      });

De la misma manera creamos una nueva coordenada y las almacenamos en devLocation después de image2 cargamos una imagen que será el icono de nuestro marcador y por ultimo creamos el objeto pasándole como parámetro los atributos position (la posición devLocation que indicamos), map (nuestro mapa! el ActiveMap), title (un titulo para el marcador), icon (el recurso, image2).

Esta es una buena manera de complementar información haciendo uso de ubicaciones geográficas :), sin embargo cuando son muchísimos los datos que tenemos que marcar en un mapa no lo aremos manualmente, entonces tenemos que hacer uso de una tecnología para mandar los datos, como por ejemplo JSON o XML (en mi proyecto Zonau – U hago uso de JSON y varias otras cosas).

Google Maps
también nos permite cargar layers en nuestro Mapa por medio de código KML, pero eso será para un post futuro 🙂

Demo, vayan a la seccion Mapa (la tab de mapa junto a la de video, plano e imagen).