Insertar código Javascript en una página web

Existen distintos modos de incluir lenguaje Javascript en una página web. La forma más frecuente de hacerlo es utilizando la etiqueta <script type="text/javascript"> en un archivo HTML. El formato es el siguiente:

<!doctype html>

<html>

  <head>
    <title>A blank HTML page</title>
    <meta charset="utf-8" />

    <script type="text/javascript">

      // Aquí insertaremos el código Javascript. read more

Leer más » 10 Comentarios

Impact JS, un motor de Javascript para hacer videojuegos

Cuando di a conocer el videojuego Biolab Disaster, se me olvidó hacer referencia al motor de JavaScript con el que estaba hecho: Impact JS. En su momento probé el motor e hice algunas pruebas y me gustó mucho, es por eso que me gustaría que lo conocieráis.

Impact JS es un motor de JavaScript específico para crear videojuegos. Usando la API de este motor te despreocuparás del navegador que vaya a funcionar, ya que está preparado para que ande en todos los navegadores, incluso en los de los móviles. Además cuenta con un editor de niveles y un depurador para que el desarrollo de tu videojuego sea mucho más fácil y sencillo. read more

Leer más » 1 Comentario

Manejar tiempos con ‘setTimeout’ en Javascript

Cuando necesitas interactuar con el usuario resulta fundamental manejar el tiempo para que ocurran determinados eventos. En Javascript hay varias funciones para administrar los tiempos y una de ellas es setTimeout.

Esta función, cuando se ejecuta, espera una cantidad de milisegundos hasta que llama otra función. Aquí os dejo un ejemplo con su código para clarificarlo.

Ejemplo

Código fuente del ejemplo read more

Leer más » 6 Comentarios

Milokoban, juega y descarga su código fuente

Últimamente llevo insistiendo en la temática de HTML y Javascript. No es para menos, me parecen tecnologías con mucho futuro a pesar de que el lenguaje Javascript tenga mucho que mejorar.

Debido a mi afán de estas tecnologías, aquí os dejo Milokoban, el típico juego de empujar cajitas. Lo publiqué hace un año tanto en mi web como en Android y pongo a vuestra disposición el código fuente. La licencia es GPLv3. ¡Espero que os guste! 😀

Juego:

Código fuente: milokoban.zip.

Android Market: Milokoban. read more

Leer más » 7 Comentarios

Juego en HTML Canvas – Fred Jones

Todos sabemos que HTML, CSS y Javascript están de moda. Y es verdad, estas tecnologías forman un trío excelente para realizar aplicaciones multiplataforma. Recordad que la W3C simplificó HTML5 a HTML, personalmente me encantó su decisión, denominando su versión Living Standard.

Como me gustan los juegos aquí os dejo uno que demuestra lo que se puede hacer ya programando en estos lenguajes. Si bien estas tecnologías aún les queda mucho camino para sustituir la potencia de Flash con respecto a las aplicaciones web, es un avance muy importante. read more

Leer más » 5 Comentarios

Detectar dispositivos táctiles en Javascript

Últimamente, los programadores web tienen que desarrollar aplicaciones que sirvan tanto para un PC como para un dispositivo táctil.

En Javascript, éste es el código que yo utilizo cuando quiero hacer una web multiplataforma:

if ("ontouchstart" in document.documentElement)
{
  // Es un dispositivo táctil.
}
else
{
  // No es un dispositivo táctil.
}

Esto es muy útil ya que no se usarán los mismos eventos de Javascript en un PC que en un dispositivo táctil.

Ejemplo

Para probar el ejemplo, copia el código fuente y pégalo en un editor de textos. Guárdalo como ejemplo.html y ejecútalo desde un navegador. read more

Leer más » 2 Comentarios

8 métodos de jQuery que deberías conocer

Si trabajas o piensas trabajar a diario con este fantástico framework de JavaScript que es jQuery, más que probablemente te interese leerte esta entrada donde explicamos 8 métodos básicos de jQuery que quizás no conozcas, pero que sin lugar a dudas, deberías conocer. Esta entrada es una traducción y adaptación del original en inglés aparecido en Queness.

1. data()

El método data nos permite manejar datos de cualquier elemento del DOM de una forma segura, evitando referencias circulares y los efectos sobre la memoria de las mismas. Veamos un ejemplo:

<div data-type="page" data-hidden="true" data-options='{"name":"John"}'></div>
$("div").data("role") === "page";
$("div").data("hidden") === true;
$("div").data("options").name === "John";

O lo que es lo mismo:

$("div").data("role", "page");
$("div").data("hidden", "true");
$("div").data("role", {name: "John"});

Referencia completa en la documentación jQuery de data()

2. stop( [limpiarCola ], [saltarAlFinal] )

El método permite parar, la animación que está actualmente en ejecución. Es verdaderamente útil cuando manejamos imágenes.

Veamos un ejemplo de llamada:

$(this).find('img').stop(true, true).fadeOut();

Referencia completa en la documentación jQuery de stop()

3. toggleClass()

Permite conmutar clases, de forma, que si el elemento tiene ya la clase, la elimina y viceversa. El siguiente código:

$('#home').toggleClass('active');

Hace exactamente lo mismo que este:

if ($('#home').hasClass('active')) {     $('#home').removeClass('active'); } else {     $('#home').addClass('active'); } read more

Leer más » 2 Comentarios

Pantalla de espera en peticiones AJAX con jQuery

Cuando trabajamos con aplicaciones que tienen interfaces web, sin lugar a dudas, la experiencia de usuario mejora enormemente si hacemos uso de tecnologías como AJAX que nos permiten transmisiones y recepciones asíncronas.

No se fuerzan cambios ni refrescos de pantalla y por lo tanto, la experiencia del usuario es más continua y más parecida a cómo sería en un interfaz de escritorio. Sin embargo, este tipo de tecnologías tiene un problema: si no controlamos los eventos del usuario mientras existe una carga de datos, es posible que se generen comportamientos erráticos.

Pongamos un ejemplo. Tenemos un sistema que carga una serie de datos de forma dinámica con AJAX a través de un formulario. Cuando el usuario hace la búsqueda, la carga se realiza y se le muestra. Si la carga tarda “mucho” y no se bloquea de alguna forma la posibilidad de seguir buscando, pueden aparecer resultados incoherentes (de búsquedas anteriores) o directamente fallar el sistema por sobrecarga.

¿Cuál es la solución más popular para este tipo de problemas? Utilizar una pantalla de espera. Vamos a explicar cómo hacerlo con jQuery en muy pocos pasos.

Introducción

La solución que vamos a usar, utilizará un div no opaco de color gris, que ocupará la pantalla al completo cuando se produzca una petición de tipo AJAX. El div incorporará una animación en la parte central.

El div

Deberemos situar un div que por defecto se encuentre escondido, hide, justo al comienzo de nuestro código del body. Contendrá una imagen de carga, que podréis generar fácilmente con alguna aplicación web como AJAXLoad.

El código será el siguiente:

<div id="div_carga">
<img id="cargador" src="./images/ajax-loader.gif"/>
</div>

El estilo del div

Para que el div ocupe la pantalla completa y la imagen se quede en medio, deberemos establecer las siguientes reglas CSS:

#div_carga{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
	background: url(images/gris.png) repeat;
	display:none;
	z-index:1;
}

#cargador{
    position:absolute;
    top:50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
}

El fichero gris.png que aparece, es un fichero con una imagen en PNG de color gris con transparencias.


El código jQuery

Finalmente tenemos que introducir el código que se encargue de hacer que en cuanto se produce una petición AJAX el div se muestre y que cuando finalice, se oculte. Podríamos hacerlo para cada operación, pero es mucho más cómodo usar las funciones:

¿Cómo? Como se muestra a continuación.

$('#div_carga') .hide() .ajaxStart(function() { $(this).show(); }) .ajaxStop(function() { $(this).hide(); }) ; read more

Leer más » 12 Comentarios

Cargar una imagen en JavaScript

A la hora de desarrollar web apps resulta fundamental algún metodo eficaz para cargar imágenes en Javascript. Antes de que el usuario entre en una página es necesario que ésta se cargue por completo. Si en tu aplicación web vas a trabajar con imágenes dinámicas, es decir, que se crean en un momento determinado es fundamental que antes realices la carga en memoria.

Éste es el código que utilizo sin usar ningún tipo de librería:

var imagen = new Image(); imagen.onload = imagenCargada; imagen.src = "ejemplo.png"

En la función imagenCargada es donde ya sé que la imagen ha sido cargada correctamente y puedo proceder a su utilización ya que está almacenada en memoria. read more

Leer más » 4 Comentarios

Kinect + DepthJS + Ubuntu + FX = Minority Report

¿Te gustaría navegar a lo Minority Report? Pues bien, demos la bienvenida a DepthJS, una extensión del navegador web Mozilla Firefox que nos permite que cualquier página web interactue con Kinect a través de JavaScript.

DepthJS es mucho más que una nueva forma de navegar. La idea fundamental es que ahora los desarrolladores web que se especializen en Javascript pueden trabajar con el Kinect sin tener que aprender un nuevo lenguaje o código especial de comunicación. Esto permitirá una nueva serie de interacciones más allá de lo que desarrolló por primera vez. read more

Leer más » 10 Comentarios