Spartan Code - Blog » utils

Los problemas más comunes de Internet Explorer

Pirata21 — Tue, 13 Oct 2009 16:05:55 +0000

Dotted Background Generator

Pirata21 — Wed, 08 Apr 2009 11:03:47 +0000

Se pueden personalizar tanto el color de los puntos como el gradiente que forma el fondo. Dotted Background Generator » »

Técnicas CSS3 que podemos conseguir con jQuery

Pirata21 — Sat, 07 Mar 2009 16:15:42 +0000

La gente de noupe nos muestra un excelente post en el que podemos ver alguna de las propiedades CSS3 que ya tenemos ganas de tener en nuestras manos y las alternativas jQuery con las que podemos obtenerlas actualmente.

1. border-radius

Quizas es la propiedad más nombrada (despues de opacity) de las que están a punto de llegar. Y me parece lógico ya que las soluciones actuales (sin javascript) son engorrosas y desmesuradas. Con jQuery Canvas Rounded Corner podremos mitigar esas ansias de dispone de esta propiedad.

CSS3

#rounded-box {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

jQuery

$('#rounded-box').corners({ radio: 15, borderSize: 2 });

2. border-image

Otra propiedad muy solicitada por la comunidad de diseñadores. Para usarla actualmente, tendremos que recurrir a jQuery borderImage.js.

CSS3

.button{
	-moz-border-image: url("media/button1.png") 0 5;
	-webkit-border-image: url("media/butto1.png") 0 5;
}

jQuery

$('#buttons a, .button a').borderImage('url("media/button0.png") 0 5', 'media/button1.png', 'media/button2.png')

3.Multiple Backgrounds

Sin duda una propiedad que dará mucho juego y que ofrecerá la posibilidad de dejar de ver el <body /> como una pizarra en la que pintamos. Por el momento tenemos que conformarnos con jQuery MultipleBackground.

CSS3

#multiple-background-box {
background: url(top-bg.gif) top left no-repeat,
url(bottom-bg.gif) bottom left no-repeat,
url(middle-bg.gif) left repeat-y;
padding: 20px;
}

jQuery

$(function(){
  $('.marioBox').add_layer("#A4D3FF");
  $('.marioBox').add_layer("url('/images/mario_floor.gif') no-repeat bottom");
  $('.marioBox').add_layer("url('/images/mario_bush.gif') no-repeat 10px 167px");
  $('.marioBox').add_layer("url('/images/mario_pipe.gif') no-repeat 180px 183px");
  $('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 90px 93px");
  $('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 180px 53px");
  $('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 20px 73px");
  $('.marioBox').add_layer("url('/images/goomba.gif') no-repeat 70px 214px");
  $('.marioBox').add_layer("url('/images/mario.gif') no-repeat 180px 156px");
});

4. Box shadow y text-shadow

Se acabó el usar <div /> flotantes colocados debajo de otro para obtener una sombra, con la llegada de CSS3 esto será cosa del pasado… pero por el momento debemos resignarno y usar DropShadow o Text-Shadow para IE para conseguirlo.

CSS3

h3 { text-shadow: 2px 2px 2px #333; }

jQuery

$("h3").dropShadow({left: 2, top: 2, blur: 1, color: "#03f", swap: true});

5.Opacity

La propiedad CSS3 por excelencia, sin duda es la más mediática de todas las propiedades y con la que se han conseguido maravillas como Lightbox. De ahí que jQuery, sea capaz de usarla nativamente. Aunque plugins como Gradient permite más juego.

CSS3

div.L1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.L2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.L3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.L4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }

jQuery

$('#main').gradient({
		from:	'fefefe',
		to:		'cddcc3',
		direction:	'horizontal'
	});

input type=”file” para ficheros múltiples por fin en versión nativa

Pirata21 — Sat, 07 Mar 2009 16:11:13 +0000

Safari4 (y WebKit evidentemente) se han convertido en los primeros navegadores que incorporan una versión nativa de un que permite subir multiples ficheros a la vez. Hasta el momento hay soluciones Javascript para conseguir esta funcionalidad, pero ahora simplemente tendremos que indicar el atributo multiple para indicar que se trata de un selector múltiple y desde nuestro servidor podremos tratar esta variable como un array de ficheros que tratar desde nuestro servidor.

<input type="file" name="ficheros[]" multiple >

Con Safari4 (y WebKit) ya podemos usar esta propiedad que tanto va a alegrar los amantes de las galerías de imagenes, simplemente cuando se abra el panel de selección de ficheros, seleccionamos más de uno usando las teclas CTRL o SHIFT. Tenemos un ejemplo aquí. Via

CSS Poligonal para crear tooltips con punteros

Pirata21 — Thu, 05 Mar 2009 22:29:56 +0000

En Group Filament han escrito un post en el que explican como usar CSS poligonal para crear tooltips que tengan punteros pero sin utilizar imágenes.

El concepto queda explicado con el siguiente CSS:

div {
     width:0;
     height:0;
     border-left: 20px solid transparent;
     border-right: 20px solid transparent;
     border-top: 30px solid red;
     border-bottom: 0;
}

En el artículo original podemos encontrar un ejemplo completo.

Image-free CSS Tooltip Pointers – A Use for Polygonal CSS? » »

Vía Ajaxian » »

Convierte Firefox en un editor de imágenes con una extensión de Pixlr

Pirata21 — Sat, 28 Feb 2009 02:59:24 +0000

Pixlr es un servicio que nunca comentamos en el blog, se trata de una herramienta para hacer ediciones básicas en cualquier imagen de forma online, tareas como recortar, redimensionar, agregar texto, pintar, trabajar con capas, en fin, es una especie de Photoshop menos avanzado. Pero bueno, el tema central del post es que existe una extensión para Firefox que permite integrar de una manera más avanzada los servicios de Pixlr con el navegador.

Algo que es bueno aclarar, y que puede ser un punto en contra, es que no permite capturar áreas específicas de la pantalla, sólote permite capturar la página actual entera (desde el header al footer) o la porción visible (sólo lo que se ve actualmente en la ventana del navegador). Al instalar la extensión se agrega un botón en la barra de estado, mediante el cual podemos hacer las capturas, al elegir la opción deseada nos redirige al sitio de Pixlr con la imagen ya cargada y lista para editar.

Xenocode Browser Sandbox: Ejecuta cualquier navegador desde la web

Pirata21 — Tue, 24 Feb 2009 12:26:42 +0000

Xenocode Browser Sandbox es un entorno virtualizado seguro, desde el que podemos descargar e instalar los navegadores web más conocidos y populares, como son Firefox, Internet Explorer (6,7 y , Opera, Chrome y Safari. Un recurso muy interesante para realizar pruebas de visualización en diversos entornos. La ventaja está en poder probar la compatibilidad de un software sin tener que instalar ningún navegador propiamente dicho. Podremos realizar pruebas en todos los entornos olvidándonos de que las instalaciones incorporen agujeros de seguridad a Windows, evitaremos problemas de incompatibilidad entre las distintas versiones de IE, no necesitamos instalar software adicional, etc. “El navegador de Sandbox es un gran recurso para los usuarios y empresas interesadas en realizar pruebas en Internet Explorer 8 o otros navegadores, sin que ninguno de los problemas o molestias asociadas con la instalación de un nuevo navegador en su escritorio”.

Xenocode Browser Sandbox » »

Backgrounds Labs

Pirata21 — Sun, 25 Jan 2009 16:29:24 +0000

Background labs, otro interesante sitio donde podrán encontrar una amplia cantidad de Fondos (Background) para ser utilizados en sus proyectos web. Navegarlo es muy simple, basta hacerlo mediante sus categorías, que en este caso se encuentran representados por los tonos que desearíamos utilizar como fondo. Escoges, Descargas y Usas. Simple.

Enlace Background labs

Via appsmashups

Project Deploy: Customizar el directorio de su proyecto

Pirata21 — Fri, 05 Dec 2008 14:52:55 +0000

Deploy, una aplicación web open source que nos permitirá crear la base de nuestros proyectos web de la forma más simple posible. Básicamente nos permite crear una estructura base, incluyendo archivos y carpetas donde alojaremos nuestras imágenes, plugin jQuery, archivos incluídos, y demás opciones. Es muy simple y no hay mucho que pueda explicar, al ingresar al sitio por primera vez, veremos las opciones que nos ofrece Deploy, simplemente deberemos ir seleccionado aquellas que deseamos agregar a nuestro proyecto, y automáticamente se nos generara un archivo ZIP, listo para ser descargado que contendrá todos los archivos que hemos seleccionado. Sin duda, ya no comenzaras tus proyectos desde cero, nunca más.Visto en ajaxian