|

GlassBox: bordes transparentes mediante Javascript y CSS

ByLuis

GlassBox es una librería Javascript que permite añadir bordes transparentes, con transparencias y con sombreado. Es muy sencillo de usar, admite skins, bien documentado y funciona en IE 6, Firefox 2, Opera 9 y Safari 3.

glassbox.png

GlassBox

Vía / CSS Globe

Similar Posts

Mejor técnica para herencia en Javascript

ByLuis

Muy buen artículo que nos explica paso a paso cómo conseguir implementar la herencia en Javascript. Aunque Javascript no es un lenguaje pensado en la orientación a objetos, últimamente debido al Ajax y a las librerías que van apareciendo, nos solemos encontrar con la necesidad de implementar OO en nuestras aplicaciones clientes y, en casos menos frecuentes, tratar el tema de la herencia en Javascript.
Este artículo nos explica desde el inicio de herencia entre clases, hasta los problemas con los que nos vamos encontrando. El problema más frecuente es cuando una clase llama a un método de la clase padre, si se usa this en la clase padre, usará la clase padre, y no la hija, que es lo que se supone que se espera que haga.
Otro problema que nos explica, es la necesidad de indicar cuál es la clase padre, para poder referenciarla. Si se especifica directamente, se puede solucionar el problema, pero si la estructura de clases es compleja, especificar en cada una de ellas cuál es el progenitor, nos encontramos con una estructura difícil de mantener.
A parte de resolvernos la realización de herencia entre clases en Javascript, este artículo nos enseña a resolver los problemas que nos podemos encontrar, ya que hubiera sido más sencillo darnos la solución, explicarla y listo, pero sin embargo lo que hace es ofrecer soluciones iniciales, ver que problemas representa y luego solucionarlos y pasar a otra versión mejorada.
También me gustaría destacar la explicación de los métodos call() y apply() que poseen las funciones en Javascript. Hay que tener en cuenta que en Javascript las funciones son tratadas como objetos, admiten propiedades y métodos. El método call() permite especificar el this utilizado, mientras que el método apply() el array de argumentos que se le pasa a la función.
Introducing the best Javascript Inheritance Technique

WireIt: librería Javascript para crear ‘cables’

ByLuis

WireIt es una librería basada en Yahoo Pipes que nos permite crear cables y conectar con ellos elementos. Sí, algo difícil de entender, pero si decimos que es perfecto para crear diagramas o si símplemente vemos la imagen, nos haremos una idea de cuál es su funcionalidad.
wireit.png
Está montada sobre Yahoo! User Interface y nos permite mover objetos, conectarlos entre sí, desconectarlos y mucho más.
WireIt
Gracias Elías por el aviso

TJPzoom: zoom mediante Javascript

ByLuis

Un buen Javascript que permite añadir zoom a nuestras imágenes. El script añade una ventana con marco sombreado a la imagen en la que se ve el zoom, pudiendo moverla por toda la imagen.
jszoom.png
Si hacemos drag hacia arriba el zoom aumenta, hacia abajo disminuye, hacia la derecha la ventana aumenta y hacia la izquierda disminuye. Además permite utilizar otra imágen con mayor resolución para evitar el pixelado.
TJPzoom
Vía / WebAppers

Capturar la tecla CONTROL mediante Javascript

ByLuis

A la hora de darle una funcionalidad más enfocada a aplicaciones de escritorio (por ejemplo con un editor WYSIWYG), suele ser necesario usar combinaciones de teclas CONTROL+tecla para ejecutar ciertas acciones.

Capturar la combinacion CTRL+tecla en javascript es muy sencillo:

var isCtrl = false;
document.onkeyup=function(e){
if(e.which == 17) isCtrl=false;
}
document.onkeydown=function(e){
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
// acción para CTRL+S y evitar que ejecute la acción propia del navegador
return false;
}
}/

La explicación es sencilla, cuando se pulsa CTRL+tecla se producen dos eventos de teclado, por lo que no es posible saber si se ha ejecutado en una sola llamada. Por ello primero comprobamos si se pulsa la tecla CTRL y se pone un flag a verdadero y luego dependiendo de la tecla que queramos, si se detecta que se pulsa y está el flag activo, se realiza la acción. Hay que devolver false para que el navegador no ejecute la acción que tiene por defecto. Cuando se deja de pulsar la tecla CTRL se pone el flag a false.

How to create Ctrl+Key shortcuts in Javascript

Evitar spam en formularios mediante Javascript

ByLuis

Buen método para evitar spam en los formularios sin la necesidad de CAPTCHA. Se trata de añadir mediante javascript eventos al formulario que detectan el uso por parte de humanos: focus y click.
Cuando un usuario quiere rellenar el formulario, uno de esos eventos debe lanzarse, por lo que mediante javascrip se añade un valor específico a un input tipo hidden que es el que usaremos para saber si el usuario es un robot o una persona.
En el caso de no tener javascript habilitado (navegadores de algún móvil o lectores de texto para invidentes), mediante la etiqueta NOSCRIPT añadiremos un campo que añada una pregunta tipo: “cuanto son dos más siete”, que sustituirá al captcha.
Invisible Human Check for Web Form Validation
Gracias Gerardo por el aviso

YAML: framework CSS

ByLuis

YAML (Yet Another Multicolumn Layout) es un framework XHTML/CSS que nos permite crear plantillas para diseños web proporcionandonos diferentes tipos de layouts. Está basado en estándares, es sencillo de usar y comprobado en sitios web profesionales.
yaml.png
A parte, nos ofrece una herramienta online para crear nuestros propios diseños de forma rápida y sencilla. Tan solo deberemos indicar el tipo de diseño, los tamaños, podremos añadirle elementos HTML y por último recuperar el código fuente.
YAML
Vía / Ajaxian