Anteriormente comentamos sobre una versión del famoso juego Pac-Man desarrollado para web con JavaScript usando YUI (Yahoo User Interface).

En esta oportunidad nuestro amigo Harry Guillermo nos cuenta sobre su versión propia de Pac-Man el cual a intentado hacerlo lo más parecido al juego real. Es casi 100% JavaScript y algo de Flash para los sonidos.

JavaScript Pacman by Harry Guillermo

Entre las preguntas del correo, encontramos esta: ¿A qué te refieres con JavaScript no obstructivo? Veamos:

JavaScript no obstructivo es un paradigma floreciente en el uso del lenguaje de programación JavaScript, utilizado en la Web. Aunque el término no se define formalmente, sus principios generalmente incluyen:

• Separación de la funcionalidad JavaScript (la "capa del comportamiento") de las capas de estructura/contenido y de presentación de un página.
• Uso de buenas prácticas a fin de evitar los problemas de incompatibilidad de la programación tradicional en JavaScript (tales como inconsistencias entre navegadores y falta de escalabilidad) [Wikipedia]

Veamos un ejemplo práctico, según -parte- de su definición.

<a onclick="doSomething()" href="#">Click!</a>

La línea anterior funcionará eso es seguro, sin embargo siguiendo el paradigma de JavaScript no obstructivo debemos separar la funcionalidad de JavaScript de la presentación de la página:

<a href="backuplink.html" class="doSomething">Click!</a>

El código JavaScript podría ir fuera en un archivo independiente .js:

...

$('a.doSomething').click(function(){
	// Do something here!
	alert('You did something, woo hoo!');
});
...

Es una buena práctica que a todo buen desarrollador debe caracterizar. En wikipedia existen enlaces interesantes, aunque en inglés, en los cuales podemos profundizar más sobre este tema.

Gracias a JavaScript podemos añadir muchos efectos a nuestras interfaces de usuario. Como usuarios no es grato tener a mano aplicaciones ó servicios web que hacen uso inteligente de JavaScript, pues el resultado es un entorno intuitivo y fácil de usar. Hoy en día podemos encontrar una gran infinidad de recursos, herramientas, librerías y códigos para hacer uso de efectos con JavaScript en nuestros proyectos con tan solo configurar un par de opciones. Veamos aquí 10 técnicas que podemos poner en práctica en nuestros desarrollos así mejorar la experiencia del usuario final, hacer que se sientan felices.

Nube de tags (etiquetas ó palabras clave)

The jQuery hover sub tag cloud agrega un bonito efecto a nuestra nube de tag. Pulsamos sobre alguna etiqueta y en un cuadro adicional aparecen las sub-etiquetas.

Efecto de opacidad

Opacity Change es un tutorial que nos explica como usar script.aculo.us para crear un efecto de cambio de opacidad para un elemento html. Esta técnica es muy usada cuando posamos el cursor sobre algún elemento de una página web, cliqueamos un botón check u option, etc.

Subir y cortar imágenes

Hace poco presentamos un tutorial de como cortar una imágen (crop image) con JavaScript y PHP. Pues bien aquí hay otro tutorial: jQuery image upload and crop, que nos enseña el proceso de subir y cortar la imágen (2 en 1) . Si nos aventuramos en un proyecto tipo flickr pues esto nos puede ayudar.

 

Medidor de seguridad de contraseñas

Muchos servicios web han agregado un aspecto importante de seguridad en sus formularios de registro. Mientras escribimos nuestra futura contraseña un medidor en la parte inferior muestra que tan fuerte ó débil es. Password Strength Meter es una ayuda a este respecto, trabaja con prototype/script.aculo.us.

Ver Artículo Completo ››

Una vez más podemos apreciar cómo sacarle provecho a JavaScript para hacer aplicaciones web útiles, prácticas y entretenidas también. En esta oportunidad nos encontramos con una pequeña aplicación de Karaoke que hace uso SoundManager 2 de para reproducir sonidos y de DtJS para efectos.

Puedes ver un demo ó descargar el código fuente para probarlo en tu servidor local.

Puedes ver una explicación detallada en JavaScript Karaoke Lyric.

Este juego se suma a nuestra colección de juegos hechos con JavaScript (ó framework de este lenguaje). En esta oportunidad se trata de archiconocido juego de antaño: Pac-man. Esta elaborado con YUI (librería de Yahoo). Creo que solo falta la sonidos de fondo y efectos y queda genial!

Vía YUI Blog

Crop es un plugin para Mootools que, el realidad, nos permite trazar cierta area de una imagen para luego ser recortada y usarla para otros propositos, como por ejemplo para crearnos un avatar. Este plugin nos devuelve las dimensiones de corte y la coordenadas x,y para luego enviarlas a un script del servidor que se encargar finalmente de cortar la imagen (por ejemplo con PHP con la libreía GD activada).

 

Podemos ver el uso de este plugin desde UvumiTools Crop. (Mas adelante pondre un ejemplo práctico combinándolo con PHP)

Interesante artículo que muestra como arrastrar una imagen a un elemento textarea usando Canvas. Por defecto todos los navegadores, excepto IE, cuando arrastras una imagen a un textarea muestra la url de ésta, sin embargo con Canvas se puede lograr un efecto tipo editor de texto.

Enlace Drag and Drop without Drag and Drop

 

JS Coverflow es un carousel de imágenes (diapositiva ó presentación de imágenes). Algunas de sus características son:

• Funciona en Firefox 3, Opera 9.5 y Safari 3.
• Solo trabaja con imágenes del mismo ancho y alto.
• Puedes utilizar la rueda del ratón y las teclas de dirección para desplazarte por las imágenes.
• Puedes personalizar las etiquetas y el evento onclick de cada imágen.

Cómo usarlo

Después de descargar coverflow.js, primero tendrás que definir el estilo para el contenedor del Coverflow:

#__cvfl-coverflow-wrapper canvas{
	position: absolute;
}

#__cvfl-coverflow{
	height: 375px;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: 530px;
}

#__cvfl-coverflow-label{
	color: #fff;
	font: 14pt Lucida Grande, Lucida Sans Unicode;
	line-height: 1.3em;
	position: relative;
	text-align: center;
	top: 273px;
	z-index: 700;
}

Finalmente despues dentro del body de la página:

Ver Artículo Completo ››

Esta barra de progreso (progress bar) aunque no lo parezca, no contienen imágenes, es puro JavaScript. Para crear esto se usa la clase JavaScript Timer y función fade (descoloración) de jQuery así se consigue el efecto deseado. Para agregar la barra de progreso a nuestra página web, solo debemos agregar la clase ProgressBar como se muestra en el siguiente código:

var bar1 = new ProgressBar("id-div-contenedor", 10, 
  "progressTable", "cell1", "size");
bar1.Start();

Donde el primer parámetro es el ID del div que contendrá la barra de progreso. El segundo parámetro es el número de celdas que desea incluir en barra de progreso.  El tercero es la clase CSS para el estilo exterior de la barra. El cuarto es la clase CSS para el estilo de cada celda y el quinto es la clase CSS para el tamaño de cada celda.

Puedes ver el demo aquí mismo. Veamos el código-ejemplo.

Ver Artículo Completo ››

addSize.js es un pequeña librería JavaScript que busca los archivos de gran tamaño vinculadas a una página web y añade automaticamente el tamaño del archivo tras el enlace. Para que quede bien claro esto:

Tan solo lo que debemos hacer es descargar la ultima versión de jQuery y addSize.js y agregarlas a la cabecera de nuestro documento HTML. Veamos un código-ejemplo:

<html>
<head>
<title>Agregar tamano de files en pageweb</title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="addSizes.js"></script>

</head>

<body>
<p>Archivo PDF para descargar: <a href="http://www.irs.gov/pub/irs-pdf/fw4.pdf">pdf</a></p>
<p>Archivo DOC para descargar: <a href="http://localhost/ejemplos/enlaces/janette.doc">doc</a></p>
</body>
</html>

Ojo que si desean probarlo no funciona con archivo locales, como se darán cuenta en el ejemplo. Esta pequeña librería usa una API llamada json-head que obtiene información de cabecera de diferentes tipos de archivo.

addSize.js de momento reconoce los siguientes tipos de archivos: mp3, doc, pdf, m4u. Puedes obtener más información en la web de Nathalie Downe.

Fuente: addSizes.js: Snazzy automatic link file-size generation