Super Mario creado en JavaScript

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í

Google Charts API para generar gráficas en tu web

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. Continue reading

Serializar array con JavaScript

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. Continue reading

Pasar Array por POST con PHP

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.

Imágenes en base-64 para Internet Explorer

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 😉 Continue reading

Redimensionado de iframe al tamaño de la página contenida

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://manelperez.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…

Obtener coordenadas de Google Maps con JavaScript

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… Continue reading