Posts Tagged ‘ JavaScript ’

Super Mario creado en JavaScript

Publicado en Programación el 7 de September de 2009 por Manel Pérez Mata
Tags: | Añadir comentario

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

Publicado en Internet el 4 de September de 2009 por Manel Pérez Mata
Tags: , , | Añadir comentario

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. … Seguir Leyendo

Serializar array con JavaScript

Publicado en Programación el 12 de July de 2009 por Manel Pérez Mata
Tags: , , | (1 Comentario)

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. … Seguir Leyendo

Pasar Array por POST con PHP

Publicado en Programación el 11 de July de 2009 por Manel Pérez Mata
Tags: , , | (2 Comentarios)

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

Publicado en Programación el 15 de June de 2009 por Manel Pérez Mata
Tags: , , | (3 Comentarios)

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 ;) … Seguir Leyendo

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

Publicado en Programación el 8 de June de 2009 por Manel Pérez Mata
Tags: , | (6 Comentarios)

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…

Obtener coordenadas de Google Maps con JavaScript

Publicado en Internet el 13 de May de 2009 por Manel Pérez Mata
Tags: , , | Añadir comentario

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… … Seguir Leyendo