MooTools Core 1.3 Estable Liberado

MooTools LogoHace un par de días, y luego de casi un año de desarrollo, fué liberada la nueva versión estable del poderoso framework de JavaScript, preferido entre conocedores: MooTools Core 1.3.

Algunas de sus características y novedades:

  • Totalmente compatible hacia atrás (backwards) con la versión previa MooTools Core 1.2.
  • Mayor estabilidad, desempeño y velocidad.
  • Nuevo motor de selectores: Slick. Es independiente del núcleo de MooTools por lo que puede usarse como standalone. Con él, se podrán seleccionar elementos del DOM de maneras que antes era imposible pensarlas.
  • Gracias a Slick, ahora es posible crear objetos a partir de expresiones CSS. ¡Asombroso!
  • Soporte para eventos touch de dispositivos que soporten dicha característica.
  • Ahora es posible encadenar Array.each
  • ¡Y muchas mejoras más!

Con tantas mejoras, me dan ganas de hacer a un lado a jQuery como mi framework principal, y empezar a usar MooTools de manera regular.

¿Qué esperas? ¡Descarga MooTools Core 1.3!

Fuente: MooTools Blog.

Share

Probando la Versión 6 del V8 Benchmark Suite

Acaba de ser liberada la versión 6 del V8 Benchmark Suite. Para quienes no lo conozcan, se trata de una herramienta que contiene varias pruebas de desempeño sobre el comportamiento de JavaScript en diversos navegadores web.

Como prueba, ejecuté el V8 Benchmark Suite 6 en los navegadores web que tengo instalados en este momento en ArchLinux, y obtuve los resultados siguientes:

  1. Google Chrome 7.0.536.2 (dev channel) » 4439
  2. Chromium 6.0.472.62 (estable) » 3860
  3. Opera 10.62 (estable) » 2793
  4. Firefox 4.0 Beta 8 Preview » 2286
  5. Firefox 4.0 Beta 6 » 898
  6. Firefox 3.6.10 (estable) » 332

¿Cómo interpretar los resultados? Simple, a mayor cantidad, un mejor desempeño. ¡La versión en desarrollo de Google Chrome literalmente vuela!

Cabe mencionar que Firefox 4.0 Beta 8 Preview ya cuenta con el nuevo motor JaegerMonkey, y aunque presenta una notable mejora con respecto a TraceMonkey, está muy por debajo de Chromium / Google Chrome.

Sin duda, son datos para tomar en cuenta.

Share

Generar Números Aleatorios dentro de un Rango con JavaScript

Algo muy básico, pero que siempre es bueno recordar, es la manera de generar un número aleatorio dentro de un rango determinado usando JavaScript. La idea es la siguiente:

Math.floor(Math.random() * (MAX - MIN + 1)) + MIN;

donde MIN es el número entero que delimita el rango inferior, y MAX… ¿es necesario decirlo?

Como ejemplo, si deseamos generar un número aleatorio entre 25 y 75, la sentencia sería

Math.floor(Math.random() * (75-25+1)) + 25;

o lo que es lo mismo

Math.floor(Math.random() * 51) + 25;

Ejemplo Completo Sencillo:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8" />
	<title>Generar Números Aleatorios dentro de un Rango</title>
	<script type="text/javascript">
		var aleatorio = Math.floor(Math.random() * 51) + 25;
		document.write("<p>" + aleatorio + "</p>");
	</script>
</head>
<body>
</body>
</html>

Ejemplo Completo Avanzado:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8" />
	<title>Generar Números Aleatorios dentro de un Rango</title>
	<script type="text/javascript">
	function aleatorio() {
		var min = parseInt(document.getElementById('min').value);
		var max = parseInt(document.getElementById('max').value);
		var res = Math.floor(Math.random() * (max - min + 1)) + min;
		document.getElementById('resultado').innerHTML = res.toString();
	}
	</script>
</head>
<body>
	<form >
		<label for="min">Valor mínimo: </label>
		<input id="min" />
		<label for="max">Valor máximo: </label>
		<input id="max" />
		<input type="button" value="Calcular" onClick="aleatorio();"/>
	</form>
	<p id="resultado"></p>
</body>
</html>

Fuente: DevCurry.

Share

Manejo Básico de Arreglos en JavaScript

Los chicos de Mozilla han publicado “A re-introduction to JavaScript”, un interesante artículo con buenos tips incluso para los desarrolladores más experimentados. A continuación me permitiré traducir, extraer y resumir la sección en la que habla sobre arreglos (arrays).

Declaración de Arreglos

La forma vieja tradicional de crear arreglos:

> var animales = new Array();
> animales[0] = "perro";
> animales[1] = "gato";
> animales[2] = "ratón";
> animales.length
3

Una manera más conveniente y moderna:

> var animales = ["perro", "gato", "ratón"];
> animales.length
3

Errores comunes (¡no cometerlos!):

  • Dejar una coma al final de la declaración del arreglo causará inconsistencias entre navegadores.
  • El valor devuelto por arreglo.length no es necesariamente el número de elementos en el arreglo.

Explicación del punto anterior:

> var animales = ["perro", "gato", "ratón"];
> animales[100] = "zorro";
> animales.length
101

Recuerda, la “longitud” del arreglo siempre será uno más que el índice mayor.

Recorriendo un Arreglo

Una forma ineficiente de recorrer un arreglo sería:

for (var i = 0; i < a.length; i++) {
    // Hacer algo con a[i]
}

Es ineficiente ya que se “calcula” la longitud del arreglo en cada iteración del ciclo. Una forma mejorada sería:

for (var i = 0, long = a.length; i < long; i++) {
    // Hacer algo con a[i]
}

Una forma más elegante:

for (var i = 0, elemento; elemento = a[i]; i++) {
    // Hacer algo con elemento
}

Y la forma alternativa:

for (var i in a) {
  // Hacer algo con a[i]
}

Manipulando elementos del Arreglo

Para agregar de manera segura un elemento a un arreglo:

a[a.length] = elemento;

o bien

a.push(elemento);

Algunos de los métodos (los arreglos en JavaScript son considerados objetos) más utilizados para arreglos son:

a.toString()
a.toLocaleString()
a.concat(elemento, ..)
a.join(separador)
a.pop()
a.push(elemento, ..)
a.reverse()
a.shift()
a.slice(inicio, fin)
a.sort(cmpfn)

Por supuesto, lo anterior es sólo un bosquejo del manejo de arreglos en JavaScript, pero es una buena guía rápida para empezar a usarlos en nuestros desarrollos.

Share

Instant Blueprint

¿Vas a empezar un proyecto web y no sabes dónde comenzar? ¿No quieres empezar de cero? Con Instant Blueprint podrás crear rápidamente el esquema inicial de tu proyecto web, con código válido HTML/XHTML y CSS, con la librería JavaScript de tu preferencia.

Siempre cuando iniciamos un nuevo proyecto web desde cero, seguimos básicamente los mismos pasos: elegir un reset y framework para CSS, elegir alguna librería JavaScript, crear el layout con (X)HTML, acomodar todo en carpetas independientes, hacer otra carpeta para imágenes, etc. Todo esto es sencillo, pero tedioso si lo hacemos con frecuencia. Ahora con Instant Blueprint podemos evitarnos esta “tortura”.

Instant Blueprint

Instant Blueprint es fácil de utilizar, basta con especificar el nombre de nuestro proyecto, el tipo de DOCTYPE que usaremos (XHTML 1.0 / HTML 4.01 Strict, Transitional, Frameset), la librería JavaScript de nuestra preferencia (jQuery, MooTools, Prototype, YUI), incluso podemos especificar si la deseamos comprimida para producción o sin comprimir para desarrollo.

El framework CSS utilizado es, obviamente, Blueprint. El CSS reset utilizado es el de Eric Meyer. Además, podemos escribir los bloques div‘s que usaremos para especificar nuestro layout básico, bloques que serán insertados tanto en el HTML como en el style.css.

Quizás la carencia más significativa de esta herramienta es el no utilizar HTML5 y CSS3 como opciones alternativas; esperemos sean tomados en cuenta en alguna futura versión de esta interesante aplicación.

Enlace: Instant Blueprint.

Instant Blueprint no es la única herramienta de su tipo, pero si es una de las que mejor usabilidad tienen.

Via Web Resources Depot.

Share

jQuery Tools – Un Plugin Todo en Uno

Si eres uno de los felices desarrolladores que usan jQuery para sus proyectos, te encantará conocer este extraordinario plugin, al que denomino “todo-en-uno“, pues incluye muchos características y efectos que se utilizan en los sitios web modernos. Se llama jQuery Tools y tiene un ridículo peso de 5.8 Kb.

jquery-tools

Para tener una idea, incluye efectos para tabs, tooltips, expose y overlay, entre otros. En su sitio web podrán encontrar una galería muy completa de demos de cada efecto, así como una buena documentación al respecto. Sin duda, es una buena alternativa para no tener que empezar de cero al diseñar la interfaz de nuestros proyectos web.

Enlace: jQuery Tools.

Share

HTML 5 – El Futuro de la Web, Hoy.

Desde hace tiempo tenía la duda sobre el futuro estándar del HTML, pues ambas vertientes XHTML 2 y HTML 5 tenían fortalezas importantes. Pero el camino es claro ahora, y gracias al evento Google I/O 2009 ya conocemos hacia dónde debemos enfocarnos los desarrolladores web: HTML 5.

html

No sólo la gente de Google lo dice, pues en la keynote inaugural del evento, pudimos escuchar incluso a personalidades importantes de Mozilla y Palm hablar sobre ello.

Aquí quisiera hacer un paréntesis. Me sentí sumamente complacido al observar como Google demostró su apertura a la libre competencia, pues el invitar a Mozilla (Firefox es competencia directa para Chrome) y a Palm (WebOS es competencia directa para Android) habla muy bien de ellos. ¡Ovación de pie para Google! Ya quisiera ver algo similar en un evento de Microsoft, e incluso en uno de Apple.

Regresando al tema, entre las características más importantes (no son las únicas) del HTML 5, podemos mencionar:

  • Canvas. Esta característica permite dibujar desde gráficas arbitrarias hasta juegos y aplicaciones en 3D, usando sólo JavaScript, sin necesidad de addons o plugins de terceros (adiós Adobe Flash, adiós Java Applets).
  • Audio y Video. Estas nuevas etiquetas permitirán la inserción directa de contenido multimedia en nuestras páginas web, sin necesidad de depender, como mencioné anteriormente, de plugins o agregados especiales. Todo la interactividad se manejará por medio de JavaScript.
  • Geolocalización. Característica importante para nuestro mundo moderno, donde conocer nuestra ubicación exacta cada vez se vuelve una prioridad, no sólo para nosotros, si no para diversas aplicaciones.
  • AppCache y Bases de Datos. ¿Aplicaciones web offline con conexiones a bases de datos? ¡ahora totalmente posible! Sobre este tema estaré sumamente pendiente y ya les comentaré en el futuro.
  • Web workers. Esta característica permitirá ejecutar procesos en el background, para evitar cuelgues innecesarios de nuestras aplicaciones. Prácticamente, los browsers serán los “nuevos” sistemas operativos.

No son las únicas características, pero son las que sobresalen entre la avalancha de novedades de HTML 5.

¿Qué browsers soportan HTML 5? Las últimas versiones en desarrollo de los principales navegadores web: Firefox 3.5 Beta, Chrome 3.0 Beta, Opera 10 Beta y Safari 4 Beta. ¿Y qué sucede con Internet Explorer? Los de Microsoft “dicen” que pronto soportarán HTML 5… citando a Vic Gundotra (vicepresidente de ingeniería de Google, durante la keynote): “esperamos impacientemente evidencia de ello” (¡Ja!).

Así es, mis estimados colegas desarrolladores, el futuro de la Web está en manos de HTML 5 además de, por supuesto, CSS 3 y JavaScript.

Lecturas recomendas:

Share

Generador de Sintaxis para jQuery

Si eres novato en el uso de jQuery, y su sintaxis te confunde, existe una herramienta online que te ayudará a generar automáticamente el código con la sintaxis correcta para eventos básicos en jQuery.

jquery-sintaxis

La herramienta se llama jQuery Function Builder, y basta con especificar el selector (un id o una clase, por ejemplo), el evento (click, focus, mouseover, etc), y la función a ejecutar (show, hide, toggle, fade in, fade out, etc). Incluso, nos permite especificar si deseamos la sintaxis clásica de $(document).ready{, o bien, la sintaxis popular de $(function(){

Sin duda, una buena herramienta para personas que se inician en jQuery, mi framework favorito de JavaScript.

Vía: @elijahmanor.

Share

jQuery 1.3 Liberado

jquery¡Una estupenda noticia para todos los desarrolladores web! Hace apenas unas horas, el equipo de jQuery ha liberado su nueva versión, jQuery 1.3, la cual viene con una buena cantidad de mejoras, y obviamente tiene mejoras en su desempeño.

Para quienes no lo conocen, jQuery es un excelente framework JavaScript para desarrollar RIAs (aplicaciones ricas para Internet) con tecnología AJAX. Hay una cantidad increíble de cosas que pueden hacerse usando jQuery.

Entre sus novedades podemos citar:

  • Incorporación de Sizzle, con lo que la velocidad en búsqueda de selectores se incrementa; ahora jQuery es mucho más rápido que las últimas versiones de MooTools, Dojo y Prototype.
  • Delegación de eventos; ahora generar elementos dinámicamente no implicará tener que definir nuevamente los eventos asociados al tipo de elemento generado.
  • Creación del elemento jQuery.Event para gestionar más fácilmente los eventos y así encapsularlos para obtener todas las funcionalidades especificadas por la W3C en todos los navegadores.
  • ¡Toda la inyección HTML ha sido reescrita! Los métodos jQuery.html(), .append(), etc. encargados de generar HTML dinámicamente han sido reescritos obteniendo una mejora de un 6x en algunos casos sobre jQuery 1.2.6.

Descargas directas:

¡Gracias a Andrés por el aviso!

Más información en el anuncio oficial del lanzamiento.

Share