|

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

jMaps: Google Maps mediante jQuery

ByLuis

jMaps es una librería de jQuery que facilita la integración de los mapas de Google Maps en nuestra web, sin necesidad de conocer el API de Google Maps.
Permiote dada una dirección válida podemos obtener su localización y al revés, buscar direcciones hacia y desde cualquier localización, añadir y quitar marcadores, polígonos, capas, publicidad de adsense…
jMaps
Vía / Script & Style

vegUI: gestor de ventanas en Javascript

ByLuis

vegui.pngvegUI es un gestor de ventanas realizado en Javascript, a parte de una colección de widgets, un sistema de interfaz de usuario, un framework para aplicaciones dinámicas y una librería para operaciones con Ajax, vamos, de todo.
Admite los siguientes navegadores: Mozilla, Internet Explorer 6 y 7 y Opera. Entre las funcionalidades que he encontrado admite minimizar, maximizar, recuperar y cerrar ventanas, moverlas por el escritorio que se puede crear, control de z-index para las ventanas, transparencias.
vegui2.png
La verdad es que me ha impresionado del todo, entre otras cosas porque me he peleado alguna vez con lo de crear ventanas mediante Javascript y siempre hay algo que me vuelve loco.
vegUI
Vía / dzone

UIzard: herramienta de desarrollo via Ajax

ByLuis

UIzard es un entorno de trabajo open source vía web que utiliza Ajax, y que funciona en varios navegadores Firefox y Safari (la versión para IE está siendo optimizada).
uizard.png
Se trata de un GUI muy completo en el que se pueden realizar páginas web, añadiendo elementos, con orígenes de datos, formularios, …
La mayor parte viene en coreano, pero creo que es bastante claro para poder entenderlo facilmente.
UIzard
Vía / @knight

Laboratorio: eliminar HTML en cajas de texto con jQuery

ByLuis

Trasteando un poco con jQuery me ha dado por hacer una función que elimina las etiquetas HTML de una caja de texto de un formulario. Esto puede ser necesario cuando no se quiere que se introduzca HTML en un campo. Lógicamente, esto es la parte cliente, en el servidor debería haber una función similar que lo hiciera.

La función es sencilla, en cada input:text añadimos el evento change para que cuando se modifique el contenido, se ejecute la función de strip_tag, la cual crea un elemento DIV auxiliar, hago que su contenido sea el valor de la caja de texto, me quedo son con el texto e inserto este valor en el input:

$('document').ready(function() {
$(':text').change(function() {
$(this).attr('value', $('document').add('<div></div>').html($(this).attr('value')).text());
});
});

¿Dudas?, alguna. Si entre el texto pongo un <script>alert(1);</script> me ejecuta el script, algo no muy elegante. ¿Qué pasa con el elemento DIV creado?, ¿se queda en el limbo o se destruye?.

Bueno, para mis primeras pruebas con jQuery no está mal del todo.

Dividir un texto mediante DOM en Javascript

ByLuis

Os voy a pasar un pequeño script que nos dividiría un elemento de texto HTML (TEXT_NODE) en distintas partes. Quizás os pueda resultar un script extraño, pero se puede usar poner en negrita palabras o alguna otra cosa, yo en mi caso ya le he encontrado utilidad un par de veces y ahora estoy usándolo otra vez en algo que os contaré más adelante (espero que dentro de poco tiempo).

Imaginaros que tenemos un elemento HTML que es realmente un nodo de texto (pensad en DOM, no en innerHTML), por ejemplo:

var elem = document.createTextNode('Esto es una prueba');
document.body.appendChild(elem);

Ahora queremos cambiar “es una” por “es una“. Lo que tendríamos que hacer es dividir en texto en tres partes “Esto “, “es una”, ” prueba”, crearemos tres objetos de texto, cada una con cada trozo de texto y luego un elemento STRONG en el que incluiremos el texto del medio. Por último incluimos los elementos nuevos y eliminamos el anterior.

// Obtenemos primera parte de texto
var parte = elem.nodeValue.substring(0,
elem.nodeValue.indexOf("es una"));
// Creamos elemento de texto con contenido "Esto "
var obj = document.createTextNode(parte);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(obj, elem);
// Obtenemos segunda parte de texto
parte = elem.nodeValue.substring(elem.nodeValue.indexOf("es una"), elem.nodeValue.indexOf("es una")+6);
// Creamos elemento de texto con contenido "es una"
obj = document.createTextNode(parte);
// Lo añadimos a un objeto STRONG
var negrita = document.createElement("STRONG");
negrita.appendChild(obj);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(negrita, elem);
// Obtenemos tercera parte de texto
parte = elem.nodeValue.substring(elem.nodeValue.indexOf("es una")+6);
// Creamos elemento de texto con contenido "es una"
obj = document.createTextNode(parte);
// Insertamos nuevo elemento
elem.parentNode.insertBefore(obj, elem);
// Eliminamos elemento anterior
elem.parentNode.removeChild(elem);

CSS dinámicos

ByLuis

Un interesante artículo que nos explica cómo realizar hojas de estilo dinámicas, aunque la verdad yo no le veo mucho uso, incluso el ejemplo que pone no me vale demasiado. Supongo que se podría evitar el uso dinámico de CSS diseñando mejor las CSS, pero claro, tambien puede que me equivoque. De todas formas, el artículo me ha gustado bastante, porque a parte de explicarte cómo hacerlo, te muestra que lo que siempre pensamos como estático (CSS, Javascript) puede ser un script PHP y no necesariamente un texto plano. A parte te dice con qué problemas nos podemos encontrar, en este caso el tiempo de ejecución del script frente al tiempo de carga de un fichero plano, algo que creo que a veces se suele olvidar.

Usar una hoja de estilos dinámica puede ser útil en el caso de que nuestra aplicación deba mostrar distintos estilos dependiendo de la página desde la que se le pida. Como ejemplo pone una aplicación que use módulos (ventanas tipo gadgets) y que dependiendo del módulo tenga que mostrar un estilo u otro.

Lo único diferente a la hora de crear el script PHP que nos devuelve el script es que se debe devolver el tipo de contenido del archivo (Content-Type), ya que el resto no se debería diferenciar de mostrar un HTML:

header('Content-Type: text/css');
if (condicion) {
echo '#estilo { display: inline; }';
} else {
echo '#estilo { display: inline; }';
}

El problema con el que nos encontramos es que cada vez que se visita la CSS se tiene que ejecutar y no se guarda en caché. Para que cachee el script, durante un tiempo prudencial, debemos indicarlo en la cabecera:

header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');

Ahora el único problema que nos queda es no tener que procesar siempre los mismos estilos, para ello nada mejor que usar @import, así seleccionamos unos estilos u otros, pero no los generamos:

header('Content-Type: text/css');
header('Cache-control: must-revalidate');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 3600) . ' GMT');
if (condicion) {
echo '@import "estilo1.css";';
} else {
echo '@import "estilo2.css";';
}

Static and dynamic CSS combined