TecnoRetales » JavaScript http://www.tecnoretales.com La experiencia no se olvida Mon, 13 Sep 2010 21:37:21 +0000 http://wordpress.org/?v=2.8.5 en hourly 1
Super Mario creado en JavaScript http://www.tecnoretales.com/programacion/super-mario-creado-en-javascript/ http://www.tecnoretales.com/programacion/super-mario-creado-en-javascript/#comments Mon, 07 Sep 2009 17:36:28 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=621

Alguien con mucho tiempo libre (probablemente sea estudiante o esté parao), se ha entretenido en montar un Super Mario programado integramente en JavaScript y lo mejor es que el código apenas pesa 14Kb.

La verdad es que no me he parado a mirar el código, sin embargo, tal currada es digna de mención. Os dejo screenshot del juego, y enlaces al artículo y al juego para que veais, juzgueis y en caso de estar aburridos, estudieis el código ;)

super_mario

Artículo: Play Super Mario Bros in 14kB Javascript
Juega aquí

]]> http://www.tecnoretales.com/programacion/super-mario-creado-en-javascript/feed/ 0 Google Charts API para generar gráficas en tu web http://www.tecnoretales.com/internet/google-charts-api-para-generar-graficas-en-tu-web/ http://www.tecnoretales.com/internet/google-charts-api-para-generar-graficas-en-tu-web/#comments Fri, 04 Sep 2009 17:27:09 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=616

Charts generados con GoogleSi quieres montar unas estadísticas profesionales en tu web de manera rápida y sencilla (y lo que es mejor, gratis!), podemos abusar una vez más de nuestro gran amigo Google, pues a liberado una API mediante la qual podemos generar estadísticas sin recurrir a grandes conocimientos técnicos.

Para mostrar una gráfica en nuestro site, únicamente debemos hacer una llamada a una URL (construida siguiendo unas directrices) en el src de un tag image.

Google pone a nuestra disposición una gran cantidad de tipos de gráficas para que se adapte perfectamente a nuestras necesidades: lineales, barras, circulares, diagr de Venn, gráficas de punto e incluso mapas.

Veámos un ejemplo sencillo.  Supongamos que queremos insertar en nuestro portal una gráfica lineal con estadísticas de visitas en el último mes. Pues únicamente necesitamos llamar a la siguiente url:

http://chart.apis.google.com/chart?cht=lc&chxt=x,y&chd=t:3,6,20,40,56,48,93&chs=400×200

Para obtener el siguiente gráfico:

Donde los parámetros pasados son:

  • cht: Tipo de gráfico a utilizar.
  • chxt: Indicamos que muestre los ejex x e y.
  • chd: Le pasamos los valores que queremos que muestre.
  • chs: Indicamos el tamaño de la imágen a mostrar.

A partir de aquí, podemos ir complicando la cosa, añadiendo colores, líneas múltiples, pasándole los datos mediante JavaScript… y un sinfin de cosas más.

Para más referencias, ya sabeis, visitad la API de Google Charts, pero antes de cerrar el post, os dejo una gráfica de lo que podrían ser las zonas con mayor concentración de polen de flores de loto:

]]> http://www.tecnoretales.com/internet/google-charts-api-para-generar-graficas-en-tu-web/feed/ 0 Serializar array con JavaScript http://www.tecnoretales.com/programacion/serializar-array-con-javascript/ http://www.tecnoretales.com/programacion/serializar-array-con-javascript/#comments Sun, 12 Jul 2009 08:21:12 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=522

Ayer os comentaba como pasar arrays por POST con PHP mediante los métodos serialize y unserialize y dejaba un poco al aire como hacerlo desde JavaScript.

Una manera bastante usual de hacerlo en JavaScript es concatenar los valores del array en un string separados por un token que luego nos permitirá volver a generar el array con la función split de PHP, sin embargo, nos puede ser interesante utilizar la serialización por defecto de PHP, de este modo al recoger el valor, únicamente tendremos que llamar a unserialize y volveremos a tener el array intacto.

Aquí os dejo una función que me he currado que serializa un array para poder enviar en un formulario o vía AJAX a nuestro servidor:

function serialize(arr)
{
 var res = 'a:'+arr.length+':{';
 for(i=0; i<arr.length; i++)
 {
 res += 'i:'+i+';s:'+arr[i].length+':"'+arr[i]+'";';
 }
 res += '}';

 return res;
}

El ejemplo de ayer modificado para usar serialize desde el lado de cliente sería:

<?php

if(isset($_POST['frutas']) && $_POST['frutas']!="" )
{
 // si existe lo deserializamos para poder tratarlo
 $frutas = unserialize(stripslashes($_POST['frutas']));
 var_dump($frutas);
}
?>
<html>
 <head>
 <script language="javascript" type="text/javascript">
 function serialize(arr)
 {
 var res = 'a:'+arr.length+':{';
 for(i=0; i<arr.length; i++)
 {
 res += 'i:'+i+';s:'+arr[i].length+':"'+arr[i]+'";';
 }
 res += '}';

 this.document.forms[0].frutas.value = res;
 }
 </script>
 </head>
 <form method="POST" onSubmit="serialize(new Array('Cereza', 'Pera', 'Fresa', 'Manzana'))">
 <input type="hidden" name="frutas" value="" />
 <input type="submit" value="Pasar" />
 </form>
</html>

Realmente, no hay mucha diferencia entre usar un método u otro, sin embargo, me parece más elegante serializarlo de este modo antes de enviar.

]]> http://www.tecnoretales.com/programacion/serializar-array-con-javascript/feed/ 1
Pasar Array por POST con PHP http://www.tecnoretales.com/programacion/pasar-array-por-post-con-php/ http://www.tecnoretales.com/programacion/pasar-array-por-post-con-php/#comments Sat, 11 Jul 2009 06:29:56 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=518

Si queremos pasar un array por POST y lo hacemos tal cual, veremos que la cosa no acaba de funcionar. La manera correcta de hacerlo es serializando previamente nuestro vector y una vez enviado, deserializarlo. Para ello PHP dispone de las funciones serialize y unserialize que harán el trabajo por nosotros.

En el siguiente ejemplo, vemos un uso sencillo de este método para enviar nuestros datos por la web:

<?php

if(!isset($_POST['frutas']) && $_POST['frutas']=="" ) {
  // Creamos el array frutas
  $frutas[] = "Cereza";
  $frutas[] = "Pera";
  $frutas[] = "Fresa";
  $frutas[] = "Manzana";
} else {
  // si existe lo deserializamos para poder tratarlo
  $frutas = unserialize(stripslashes($_POST['frutas']));
  var_dump($frutas);
}
?>
<html>
<form method="POST">
  <input type="hidden" name="frutas" value='<?php echo serialize($frutas) ?>'></input>
  <input type="submit" value="Pasar">
</form>
</html></pre>
El resultado de hacer un var_dump de la variable $frutas serializado sería:
<pre dir="ltr"><span style="color: #cc0000;">a:4:{i:0;s:6:"Cereza";i:1;s:4:"Pera";i:2;s:5:"Fresa";i:3;s:7:"Manzana";}</span>

Si queremos, por ejemplo, enviar un array desde el lado del cliente mediante AJAX, podríamos por ejemplo, crearnos un método javascript sencillo que nos serializase un array y así luego poder desserializarlo desde PHP.

Mañana publicaré en un nuevo post una función serialize para JavaScript, de este modo, podemos enviar desde el lado cliente un array serializado con el submit de un formulario o mediante AJAX.

]]> http://www.tecnoretales.com/programacion/pasar-array-por-post-con-php/feed/ 2 Imágenes en base-64 para Internet Explorer http://www.tecnoretales.com/programacion/imagenes-en-base-64-para-internet-explorer/ http://www.tecnoretales.com/programacion/imagenes-en-base-64-para-internet-explorer/#comments Mon, 15 Jun 2009 06:31:27 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=161

Prácticamente todos los navegadores actuales, soportan imágenes codificadas en base64, sin embargo, esto no pasa con Internet Explorer (hasta su versión 7 al menos). Estareis pensando que no debería ser un problema ya que no solemos colocar las imágenes codificadas en el código html, sin embargo, podemos encontrarnos con la necesidad de tener embedida la imágen dentro del código por motivos x.

Un ejemplo de uso de imágenes en base64 en el código html sería:

<img src="data:image/gif;base64,R0lGODlhNQAkAKIAAHJycvwHBwAAqwCjC+3PDv///wAAAAAAACwAAAAANQAkAAAItAAHCBxIsODAAggTKlyYMIDDhxAjOjRIsSDDiwslaoRYseMAjCALbBzpsWJIjCM3lqR48mJKjSsNtmT4UmJMizMV1ox4k2BOnTsf9jz4E2FQoUM/FhV5NEBSpUWbOk26lOnRp1WlYl2qlSrXplujgvUq9irZn12HZh2r9qvZtmWDhkXLtufat3bdyj2bM23euDvn9q178+5euHTxFtYbmO9Mv4sB1xT8mHBMw40RD1Z8mXHNgAA7" width="200" alt="Base64 encoded image" />

Nos dará como resultado la siguiente imágen:

Base64 encoded image

mira el código fuente si todavía tienes dudas ;)

Sin embargo, si estás viendo este artículo desde un navegador Internet Explorer (un consejo desde el cariño… cambia a mozilla Firefox), verás algo similar a esto:

Error imágen base64

¿Cómo podemos solucionarlo? Pues de una manera bastante sencilla, podemos pedir a PHP mediante JavaScript que nos haga la decodificación del código base64:

<?php
	if(!empty($_SERVER["QUERY_STRING"])) {
		$data = split(";", $_SERVER["QUERY_STRING"]);
		$type = $data[0];
		$data = split(",", $data[1]);
		header("Content-type: ".$type);
		echo base64_decode($data[1]);
		die();
	} else {
?>
		<html>
			<body>
				<script>
				// Expression Regular para encontrar imágenes en Base64
				var BASE64_DATA = /^data:.*;base64/i;
				// Path al script php que decodifica el código
				var base64Path = "prueba.php";
				function fixBase64(img) {
					// check the image source
					if (BASE64_DATA.test(img.src)) {
						// pass the data to the PHP routine
						img.src = base64Path + "?" + img.src.slice(5);
					}
				};

				// fix images on page load
				onload = function() {
					for (var i = 0; i < document.images.length; i++) {
						fixBase64(document.images[i]);
					}
				};
				</script>

				<img src="data:image/gif;base64,R0lGODlhNQAkAKIAAHJycvwHBwAAqwCjC+3PDv///wAAAAAAACwAAAAANQAkAAAItAAHCBxIsODAAggTKlyYMIDDhxAjOjRIsSDDiwslaoRYseMAjCALbBzpsWJIjCM3lqR48mJKjSsNtmT4UmJMizMV1ox4k2BOnTsf9jz4E2FQoUMFhV5NEBSpUWbOk26lOnRp1WlYl2qlSrXplujgvUq9irZn12HZh2r9qvZtmWDhkXLtufat3bdyj2bM23euDvn9q178+5euHTxFtYbmO9Mv4sB1xT8mHBMw40RD1Z8mXHNgAA7" alt="Base64 encoded image" width="150" height="150"/>
			</body>
		</html>
<?php
	}
?>

Como podemos ver, la función JavaScript fixBase64 chequea que el source de la imágen contenga las palabras “data:xxxxx;base64″, en caso afirmativo, le envía toda la información contenida en el source a PHP. Este, utiliza la función base64_decode para traducirla y la devuelve a la página. En este momento, se verá perfectamente en cualquier navegador que tenga JavaScript habilitado.

]]> http://www.tecnoretales.com/programacion/imagenes-en-base-64-para-internet-explorer/feed/ 3 Redimensionado de iframe al tamaño de la página contenida http://www.tecnoretales.com/programacion/redimensionado-de-iframe-al-tamano-de-la-pagina-contenida/ http://www.tecnoretales.com/programacion/redimensionado-de-iframe-al-tamano-de-la-pagina-contenida/#comments Mon, 08 Jun 2009 08:04:39 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=172

Con este sencillo código JavaScript, ajustamos la altura del iframe al tamaño de la página en él conteido, de ese modo, evitaremos el molesto scroll lateral.

<html>
    <body>
        <script language="JavaScript">
            //Ajusta el tamaño de un iframe al de su contenido interior para evitar scroll
            function autofitIframe(id){
                if (!window.opera && document.all && document.getElementById){
                    id.style.height=id.contentWindow.document.body.scrollHeight;
                } else if(document.getElementById) {
                    id.style.height=id.contentDocument.body.scrollHeight+"px";
                }
            }
        </script>
        <iframe id="miFrame" src="http://www.tecnoretales.com/" width="100%" height="0" frameborder="1" transparency="transparency" onload="autofitIframe(this);"></iframe>
    </body>
</html>

Una vez cargado el iframe, llamamos a la función autofitIframe que se encargará de obtener la altura total de la página contenida y se la asignará al tamaño del iframe.
Simplemente…

]]> http://www.tecnoretales.com/programacion/redimensionado-de-iframe-al-tamano-de-la-pagina-contenida/feed/ 6 Obtener coordenadas de Google Maps con JavaScript http://www.tecnoretales.com/internet/obtener-coordenadas-de-google-maps-con-javascript/ http://www.tecnoretales.com/internet/obtener-coordenadas-de-google-maps-con-javascript/#comments Wed, 13 May 2009 18:56:33 +0000 Manel Pérez Mata http://www.tecnoretales.com/?p=137

Google Maps LatitudeEl otro día os dejaba un script para obtener las coordenadas de Google Maps a partir de un código postal y un pais. Esto es muy útil si queremos recoger estas coordenadas de manera masiva, por ejemplo, para cargar toda esta información en nuestra base de datos de poblaciones.

Hoy os dejo un pequeño truco para obtener las coordenadas en la propia web de google maps utilizando las funciones de su API, sin tener que mirar el código fuente o rebuscar por el enlace…

1) Vamos a la web de Google Maps y realizamos la búsqueda del lugar deseado, por ejemplo, la Torre Eiffel.

2) Pegamos este código JavaScript en la barra de direcciones del navegador y presionamos la tecla Intro.

javascript:void(prompt('',gApplication.getMap().getCenter()));

Esto nos mostrará por pantalla una ventana de dialogo con la latitud y longitud de la zona mostrada por pantalla.

]]> http://www.tecnoretales.com/internet/obtener-coordenadas-de-google-maps-con-javascript/feed/ 0