GlassBox: bordes transparentes mediante Javascript y CSS

ByLuis February 28, 2008

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

Vía / CSS Globe

IE | Javascript

IE7 y Javascript

ByLuis May 3, 2006

Aunque Microsoft dijo que se iba a centrar en corregir los errores en CSS y no en Javascript, no está mal decir que cosas se ha corregido y cuales estarían bien para futuras versiones.

Los errores que se han corregido son: los memory leaks cuando se hacían referencias circulares entre elementos, un fallo que cerraba la aplicación cuando se usaba la función normalize() y soporte para XMLHttpRequest de forma nativa en vez de mediante ActiveX.

Los errores que no estaría mal que corrigieran en futuras versiones son: getElementById debería ignorar el atributo name, debería cambiar el window.location cuando se navega entre referencias en el mismo documento mediante el historial, cuando se mueven checkbox mediante métodos del DOM recuperan el estado original y no conservan el que tenían, setAttribute no funciona con el atributo style o con eventos, varios atributos necesitan ser escritos usando las máyusculas en las iniciales de las plabras (camelCase), radio buttons clonados no crean su propio grupo.

Vía / QuirksBlog

css

Precarga de imágenes mediante CSS

ByLuis April 24, 2006

Acabo de ver un método bastante curioso para precargar imágenes en la página mediante CSS. Se trata de crearnos un estilo para una capa que tenga varias líneas de background y que no se muestre, así se cargan todas las imágenes durante la carga de la página y luego las podemos usar para otras cosas como rollovers.

 #preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}

Luego tendremos que definirnos una capa de la siguiente manera:

<div id="preloadedImages"></div>

A Simple CSS Image preloading technique

Javascript

¿El futuro de Javascript?

ByLuis November 11, 2009November 11, 2009

El creador de Javascript habla del futuro que tendrá, al menos ECMA. Una de las opciones que indica es la posibilidad de añadir propiedades a objetos e indicar setters y getters (indicar y recuperar el valor).

Object.defineProperty(obj, "length", {  
  get: function() {  
    return this.computeLength();  
  },  
  set: function(value) {  
    this.changeLength(value);  
  }  
});

ECMA Harmony and the Future of JavaScript

Javascript

Manejar y generar excepciones en Javascript

ByLuis July 23, 2010

Los que hemos trabajado con Java estamos acostumbrados a tratar y lanzar excepciones para controlar los errores, algo que en Javascript no es muy común, pero en librerías algo elaboradas podría ser muy útil.

// Clases de errores
function DivisionByZeroError() {
    this.name = "DivisionByZeroError";
}
function DivisionByStringError() {
    this.name = "DivisionByStringError";
}
// Funcion que devuelve un error
function divisionCanFail(a, b) {
    if (b == 0) {
        throw new DivisionByZeroError();
    }
    if (typeof b == "string") {
        throw new DivisionByStringError();
    }
    return a / b;
}
// Funcion de test
function decoratedDivision(a, b) {
    try {
        alert(divisionCanFail(a, b));
    } catch (error if (error.name == "DivisionByZeroError")) {
        alert("A division by zero...");
        alert("Exception class: " + error.name);
    } catch (error if (error.name == "DivisionByStringError")) {
        alert("Exception class: " + error.name);
    }
}

decoratedDivision(5, "isThisANumber?!");
decoratedDivision(5, 0);

Exceptional JavaScript

Accesibilidad | css

5 efectos CSS accesibles

ByLuis May 8, 2007

El tema de la accesibilidad es algo que a veces se deja de lado cuando se quiere conseguir un diseÃ±o mÃ¡s dinÃ¡mico. Pero si se busca bien, se podrÃ¡ encontrar ejemplos de diseÃ±os CSS que sean accesibles.

Estos son 5 muy buenos ejemplos de ello:

Enlaces externos: modificas el texto “(enlace externo)” incluyÃ©ndolo en un span y despuÃ©s lo que haces es modificar el estilo para que muestre un icono (diferente dependiendo de si es linked, visited o hover) y el texto lo haces desaparecer de la parte visible de la pantalla.
Sigue leyendo: el texto “Sigue leyendo sobre …” se modifica, haciendo que solo aparezca “Sigue leyendo” y el resto del texto aparece como un popup mediante posiciÃ³n absoluta y jugando con el hover.
Texto variable: al igual que ya contamos en Sentido Web, usando distintas hojas de estilo y accediendo a ellas mediante Javascript.
PestaÃ±as con imÃ¡genes: se crea un menÃº de pestaÃ±as con listas no ordenadas y se cambia el estilo para que no tengan formato de bloque, los enlaces estÃ¡n formados por imÃ¡genes y estas cambian segÃºn el hover.
Formularios: dos buenos ejemplos de formularios, uno de ellos muy bien tabulado y otro en tres columnas.

5 Accessible and pretty CSS tips

VÃa / dzone

Javascript

Introducción a JSON

ByLuis July 12, 2006

JSON (JavaScript Object Notation) es un formato para intercambiar datos sencillos, entendiendo como sencillos el texto, los nÃºmeros y los valores lÃ³gicos, pudiendo estar organizados en estructuras.

La informaciÃ³n en JSON se envia mediante un objeto, el cual estÃ¡ formado por pares atributo–valor. El atributo es un identificativo, y el valor puede estar formado por texto, nÃºmeros, valores lÃ³gicos (true o false), el valor vacÃo (null), otros objetos o arrays. Por ejemplo, un objeto puede tener sus propiedades de texto, de nÃºmeros, una propiedad que tenga un array de nÃºmeros y una propiedad que tenga un objeto parecido a sÃ mismo.

Similar Posts