Sencha Touch 1.1 con soporte para BlackBerry

Hace ya varios meses que no les platicaba sobre las novedades de los chicos de Sencha. Hoy se anunció la disponibilidad de Sencha Touch 1.1, ahora con soporte para BlackBerry, además de contener algunas otras novedades y nuevos demos.

Sencha Touch 1.1 con soporte para BlackBerry

Si no lo conocías, Sencha Touch es un excelente framework JavaScript para aplicaciones móviles con HTML5, que permite desarrollar aplicaciones (apps) con apariencia nativa (look & feel) de dispositivos táctiles (touch), tales como iPhone, Android, ¡y ahora BlackBerry!

Con Sencha Touch 1.1, ahora es posible desarrollar apps para Blackberry 6, el sistema operativo de la Blackberry Torch, así como para el nuevo Blackberry TabletOS de la próxima tablet de nombre Playbook.

Además, se realizaron mejoras especiales en el desempeño de animaciones para dispositivos Blackberry que no tengan GPU (Graphics Processing Unit), como la BlackBerry Torch. Por último, se incluye un tema (theme) diseñado específicamente para BlackBerry que utiliza un estilo plano que minimiza el uso de CSS3, mejorando su desempeño.

¿Interesado? ¡Descarga Sencha Touch 1.1 ahora mismo!

Via Sencha Blog.

Share

jQuery 1.5.1: Novedades, Descargas y CDNs

jQuery LogoLos chicos de jQuery el día de ayer liberaron su nueva versión estable: jQuery 1.5.1. Se trata de una actualización menor de jQuery 1.5, e incluye corrección de diversos bugs.

Para descargar jQuery 1.5.1, usen los siguientes enlaces directos:

Ya que los enlaces previos pertenecen al jQuery CDN, pueden usarlos directamente en sus proyectos. Obviamente, el recomendado en la edición minificada:

http://code.jquery.com/jquery-1.5.1.min.js

También podemos usar los CDN de Google y Microsoft:

Microsoft CDN:

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js

Google CDN:

https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js

¿Qué novedades hay en jQuery 1.5.1?

Al tratarse de una actualización menor, no hay novedades importantes que reportar; sin embargo, es justo mencionar:

  • jQuery ahora soporta a Internet Explorer 9 como un navegador de primer nivel. Todos los bugs han sido corregidos y/o enviados al equipo de IE para su resolución en la versión definitiva del navegador.
  • Se agregaron tres opciones a jQuery.ajax(): isLocal, mimeType y xhrFields.
  • El resto de las novedades, pueden encontrarlas en la documentación completa de jQuery 1.5.1

Share

JSHint mide la calidad de tus códigos en JavaScript

JSHint

Hace poco les hablaba del fabuloso Initializr, creación de Paul Irish; hoy me entero de otro proyecto de Paul (creado en conjunto con Anton Kovalyov), se trata de JSHint, herramienta que toma nuestro código JavaScript, lo escanea y, si encuentra algún problema, devuelve un mensaje describiéndolo y mostrando su ubicación aproximada.

JSHint es mucho más flexible que el conocido JSLint, creada por Douglas Crockford. Citando al propio sitio de JSHint: “La diferencia más importante es que JSHint es desarrollado y soportado por la comunidad de desarrolladores de JavaScript, y no por la opinión de una sola persona”.

JSHint

Por cierto, los invito a leer el extraordinario análisis sobre JSHint realizado por Carlos Benítez (ejemplos incluidos).

Via EtnasSoft y ReadWriteWeb.

Share

Zommy, Plugin de jQuery para aplicar Zoom en Imágenes

Zoomy

Zoomy es un interesante plugin para jQuery que te permitirá aplicar acercamientos (zoom) a imágenes.

El único requisito es tener dos copias de la imagen (la original y la “grande” que se mostrará con el zoom). Aunque esto suene redundante y engorroso, no lo es si pensamos que la mayoría de los sistemas CMS, como WordPress, guardan e incluso generan diversos tamaños de las imágenes.

Como ejemplo de uso, imaginemos lo siguiente:

<a href="imagen-grande.jpg" class="zoom">
    <img src="imagen-normal.jpg" alt="Esta es la imagen que se muestra inicialmente" />
</a>

Para aplicar Zoomy, basta agregar lo siguiente a nuestro código Javascript:

$(function(){
    $('.zoom').zoomy();                
})(jQuery)

Más detalles y descarga del plugin: ❰Zoomy

Via: Blogfreakz.

Share

Un Árbol de Navidad en 3D… ¡elaborado con JavaScript!

Antes que nada, vean la siguiente imagen.

Árbol de Navidad elaborado en JavaScript

¿Bonita verdad? No está diseñada en Photoshop ni GIMP. Ahora entren a este enlace para ver el árbol animado en 3D… ¡está elaborado en puro código de JavaScript! ¡y pesa menos de 1 Kb!

Es la nueva obra de arte de Román Cortés, les recomiendo lean los detalles de cómo fue creado este alucinante arbolito navideño.

Via @Kseso.

Share

Procesando Video en Tiempo Real con HTML5 y JavaScript

Gracias a un retweet de Dion Almaer, me entero de este fantástico experimento. Se trata del procesamiento en tiempo real de un video de Tron, usando HTML5 Video + Canvas + JavaScript + CSS3.

HTML5 Tron

¡Quiero verlo funcionando! ¿Dónde entro?

Pueden entrar usando el enlace original barbafan.de/html5video?video=tron, o bien, el enlace corto bit.ly/html5tron

¡Está genial! ¿Y cómo funciona?

El video bajo HTML5 se renderiza cada 33 milisegundos (30 cuadros por segundo), dentro de un elemento canvas oculto. La información de los pixeles en dicho canvas es obtenida y transformada via JavaScript y escrita nuevamente en el canvas. Las transformaciones CSS3 son manipuladas dinámica e interactivamente mediante JavaScript.

Notas Finales

El autor advierte que el experimento usará muchos recursos de tu microprocesador… pero la verdad, ¡vale la pena disfrutar de tan geek experimento!

Share

Pasar una Función como Parámetro de otra en JavaScript

Cuando estamos programando en JavaScript, a veces el código sería más sencillo, e incluso más eficiente, si pasáramos una función como parámetro de otra función, pero… ¿es posible? ¡claro que si!

Aquí un breve ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8" />
	<title>Pasar una Función como Parámetro de otra en JavaScript</title>
	<script>
 
	// Función que acepta como parámetro a otra función
	function Primera(p1, p2) {
		p1(p2);
	}
 
	// Función Literal
	var Segunda = function (m1) {
		alert(m1 / 10);           
	};
 
	// Pasando la Función Segunda como parámetro de Primera
	Primera(Segunda, 20 );
 
	</script>
</head>
<body>
	...
</body>
</html>

El detalle importante es usar una función literal, en este caso “Segunda”, la cual se pasa como parámetro a la función “Primera”, y el resultado es visualizado en un cuadro de diálogo de alerta, tal y como se muestra a continuación.

alert() del ejemplo

¿Sencillo verdad? ¿Qué aplicación le darías a esta característica? Si has utilizado frameworks como jQuery o MooTools estarás más familiarizado con esta interesante técnica.

Gracias a DevCurry por el tip.

Share

Deslizarse al inicio o final de una Página Web con jQuery

El típico enlace “Ir al Inicio” gracias a JavaScript, y en especial con jQuery, ha retomado fuerza en muchos sitios y aplicaciones web. ¿Cómo hacerlo? ¿necesito de un plugin para jQuery con dicho efecto? ¡Para nada! Es sumamente sencillo implementarlo por nosotros mismos,

Imaginemos que dentro nuestro <body> tenemos algo como sigue:

<a id="IrFinal" href="#">Deslizarse hasta el final</a>
<div>
<!-- Aquí va el contenido -->
</div>
<a id="IrInicio" href="#">Deslizarse hasta el principio</a>

Usando jQuery, el evento click y el efecto animate con la propiedad scrollTop, tenemos el siguiente código:

$(function () {
   $('#IrFinal').click(function () {
       $('html, body').animate({
           scrollTop: $(document).height()
       },
       1500);
       return false;
   });
 
   $('#IrInicio').click(function () {
       $('html, body').animate({
           scrollTop: '0px'
       },
       1500);
       return false;
   });
}); ​
​

Aquí el demo. Le agregué contenido arbitrario para que el efecto se vea mejor.

Fuente: DevCurry.

Share

Redireccionar a una Nueva Página Web usando JavaScript

Hay muchas formas de redireccionar a una página web desde otra, ya sea del lado del servidor o del cliente. Veamos cómo hacerlo adecuadamente usando JavaScript.

La forma más utilizada es la siguiente:

window.location = "http://gespadas.com";

Redirección NormalSin embargo, esta solución ocasiona un problema: agrega una entrada a la lista del historial en Internet Explorer y Safari (Firefox, Chrome y Opera no tienen dicho problema) , activando el Botón Atrás en la barra de navegación.

¿Por qué es un problema? Si el usuario en IE le da click al Botón Atrás, “rebotará” nuevamente al sitio redirigido; en Safari ocurre algo diferente, ¡no ocurre nada!, regresa al sitio de origen, pero se olvida de la redirección. Un motivo más por lo cual nunca he usado ni usaré ninguno de este par de navegadores web.

Redirección con Reemplazo¡Pero mucha gente si los utiliza! Por lo que tenemos que pensar como desarrolladores web tolerantes y pensar en esos usuarios. Por suerte, la solución es sumamente sencilla.

Si deseamos evitar la activación del Botón Atrás, debemos usar window.location.replace, cuyo objetivo es cargar la nueva página y reemplazar la página actual en el historial del navegador con la nueva.

window.location.replace("http://gespadas.com");

El código completo quedaría de la siguiente manera:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Redirigiendo al nuevo sitio</title>
    <script>
        window.location.replace("http://gespadas.com");
    </script>
</head>
<body>
</body>
</html>

¡Tip! Si son observadores, estoy usando HTML5 en el ejemplo completo, por lo que no es necesario incluir type="text/javascript" en la etiqueta <script>.

¿Ideas adicionales basadas en tu propia experiencia? ¡deja un comentario para enriquecer este artículo!

Fuente: DevCurry.

Share