Javascript

GameJS: framework javascript para crear juegos 2D

ByLuis October 29, 2008

GameJS es una librería javascript pensada para desarrollar juegos en 2D. Aunque no tiene mucha lógica realizar juegos en Javascript, sobre todo cuando en Flash pueden realizarse mucho mejor, esta librería es aún así bastante curiosa.

Hace mucho uso de la etiqueta canvas, por lo que solo es posible usarla en los navegadores que lo soportan, posiblemente en IE también gracias a IECanvas, pero el rendimiento puede ser pobre. Dispone de varias clases de las que se hay extender para poder realizar nuestro juego.
GameJS
Vía / dzone

Javascript | XHTML

fleXcroll: scroll bars personalizados para tu web

ByLuis July 27, 2006

LibrerÃa que nos permite usar scrolls personalizados en nuestras pÃ¡ginas web, ya sean verticales u horizontales. Aunque hay que intentar que no aparezcan en nuestra pÃ¡gina, en caso de que sea necesario, porque los hay que son totalmente necesarios, quizÃ¡s se puedan personalizar con este script.

Por lo poco que he visto del cÃ³digo (que no estÃ¡ fÃ¡cil de seguir porque estÃ¡ ofuscado), veo que fija el tamaÃ±o de la capa y con la propiedad overflow muestra los scrolls. Dibuja los scrolls personalizados encima y mediante ellos realiza el scroll de la capa, usando scrollTop y scrollLeft (que creo que antes no funcionaba del todo bien en Opera 8 y en la versiÃ³n 9 lo han solucionado). Algo que yo no solÃa hacer y que he visto como lo hace aquÃ, es capturar el evento selectstart y hacer que devuelva false, para que cuando se haga el drag del scroll no se seleccione la imagen que usamos para personalizar el control.
FleXcroll, Flexible and Accessible Custom Scroll Bars
VÃa / aNieto2K

Desarrollo web | Javascript

Clipping de vídeo usando HTML5 y SVG en Firefox4

ByLuis March 23, 2011March 23, 2011

La verdad es que Firefox4 está de lujo, y las demos que ofrece Mozilla son increíbles. De una de ellas he sacado cómo hacer clipping en vídeos usando HTML5 y la posibilidad de incrustar SVG (sólo funciona en Firefox4).

El método es sencillo, tengo un SVG que muestra el contorno y los botones de play y pausa, además tiene un clipPath que se usará para el estilo clip-path del vídeo:

SVG

Vídeo

Javascript

var play = document.getElementById('play');
var pause = document.getElementById('pause');
var video = document.getElementById('video');
play.addEventListener('click', function() {
    play.style.display = 'none';
    pause.style.display = 'block';
    video.play();
  }, true);  
pause.addEventListener('click', function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);  
video.addEventListener("ended", function() {
    play.style.display = 'block';
    pause.style.display = 'none';
    video.pause();
  }, true);

El vídeo es el mismo que el de la demo de Mozilla, he puesto el borde semi-transparente para que se vea el clipping como va.

Demo

Vía / Project London Trailer

Javascript

jQuery CodeView: plugin para ver el codigo HTML

ByLuis August 17, 2009

jQuery CodeView es un plugin que nos permite mostrar el código HTML de un elemento de la página.

Su uso sería así:

jQuery("#javascript_block").codeview();
jQuery("#javascript_block").codeview({
fontSize: "1.2em",
tabToSpace: -1,
feedColor: false
});

jQuery CodeView Plugin

Vía / DZone

Javascript

Hacer drag & drop de ficheros fuera del navegador con Chrome

ByLuis August 18, 2010

Hace tiempo comenté cómo hacer drag & drop directamente sobre el navegador, lo cual nos venía muy bien para subir ficheros (por ejemplo para un correo, galería de fotos, …). Esta vez se trata de descargar ficheros directamente desde el navegador, algo que permite GMail desde Chrome.

El autor de este post lo ha tenido difícil para poder ver cómo lo hace Google, pero al final el código es bastante sencillo:

var file = document.getElementById("dragout");
 
file.addEventListener("dragstart",function(evt){
    evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);

Sólo disponible en Chrome

Drag out files like Gmail

Javascript

wForms: javascript para tus formularios

ByLuis June 11, 2007

wForms es cÃ³gido Javascript no intrusivo que te ayuda a realizar las acciones mÃ¡s comunes con tus formularios web. Disponible en dos versiones, comprimida y legible, ofrece tres tipos de acciones en los formularios:

ValidaciÃ³n de los campos de entrada: como se define los campos obligatorios y la comprobaciÃ³n del formato para cada campo.
SincronizaciÃ³n entre campos: cÃ³mo controlar campos del formulario dependiendo de otros campos.
Secciones condicionales: si aparecen o no campos basados en respuestas anteriores.

wForms

VÃa / dzone

Javascript

Facebook sliders mediante Mootools

ByLuis April 17, 2008

Facebook pone a disposición de sus usuarios unos sliders para poder controlar el valor de ciertos elementos. Para aquellos que estén interesados en usarlos, podrán echar mano de este ejemplo realizado con Mootools, cuyo uso es muy sencillo.

Hay que tener en cuenta que no es un script accesible, porque no existe una alternativa estándar al control, ya que el slider es una capa y si no hay javascript o entorno gráfico, el valor no se podría cambiar. El script es bueno y añadirle la parte de accesibilidad no implica mucha complicación.
Facebook Sliders With Mootools and CSS
Vía / CSS Globe

Similar Posts