Hace un rato agregué al css de este sitio un recuadro de descarga.

Los ingredientes:

1. Una imágen vistosa que identifique al elemento como descargable.
2. Algo para descargar
3. Un div.

La preparación:

Voy a tomar una imágen del set de iconos Giøn de mi buen amigo Silvestre que anda distribuyendo su creación bajo licencia GPL.

Ahora, el css:

1
2
3
4
5
6
7
8
9
10
11

.download {
		background: #EFEFEF url('images/download.png')  left no-repeat;
		border: 1px solid #cacaca;
		width: 25%;
		margin: 0px auto;
		padding: 10px 10px 10px 128px;
		text-align: right;
	}
	.download p {
		text-align: center;
	}

Y el HTML:

1
2
3
4
5
6

<div class="download">
	<p>
		<strong>descarga</strong>
		<a href="miarchivo.zip">miarchivo.zip</a>
	</p>
</div>

Generando como resultado

Et voilà!

Sin javascript, sin cosas raras, una manera muy simple de hacer una precarga de imágenes para, por ejemplo, los hovers de un menú.

Si bien hoy por hoy la simple carga de imágenes no es un problema, sobre todo por las velocidades de conexión que tenemos, es divertido el ejemplo.

CSS

1
2
3
4
5
6
7
8

#imgCarga{
background: url(imagenes/imagen1.jpg);
background: url(imagenes/imagen2.jpg);
background: url(imagenes/imagen3.jpg);
 
...
display: none;
}

Luego, en el html, después del tag Body, podemos agregar un div

<div id='imgCarga'></div>

Las imágenes están disponibles, ahora podemos usarlas en cualquier momento sin los tiempos de espera de carga.

Ya se que existe firebug en todas su variantes, pero a veces es necesario un parchecito rapidito para los navegadores que no lo utilicen, o simplemente porque es divertido.

El código javascript:

function ejecutarJS(strSentencia, idResultado){
			var resultado = eval(strSentencia);
			document.getElementById(idResultado).innerHTML = 
			document.getElementById(idResultado).innerHTML + resultado;
		}

HTML:

<div id="boxConsola">
		<div id="jsConsola">
		<p>
			<textarea id="jsConsulta" ></textarea>
		</p>
		<p>
			<input type="button" value="Ejecutar" onClick="ejecutarJS(document.getElementById('jsConsulta').value, 'jsResultado');" />
			<input type="button" value="Borrar" onClick="document.getElementById('jsConsulta').innerHTML = '' ; document.getElementById('jsResultado').value = '' ;"
		</p>
	</div>
 
	<div id="jsResultado">
	</div>
</div>

Y finalmente, el CSS Mágico:

#boxConsola {
	position:absolute;
	bottom:0px;
	padding: 10px;
	right:0px;
	width: 660px;
	border: 1px solid #ABB0B4;
}
	/* estas cosas que hay que hacer por IE... */
	body > div#boxConsola {
		position: fixed;
	} 
 
	#jsConsola {
		width: 205px;
		float: left;
	}			
 
		#jsConsulta {
			width: 200px;
			height: 100px;
		}
 
	#jsResultado {
		width: 452px;
		height: 120px;
		float: right;
		border: 1px solid #ABB0B4;
		background-color: #EDEDED;
	}

Obviamente, como práctico, nada. Y el demo se los debo, poner una consola de javascript en un servidor es como poner un cartel invitando a hacer maldades .