Autor: Iñaki Úcar

Image maps con CSS

Iñaki Úcar1 comentario

En ocasiones, insertamos imágenes en los artículos del blog y nos gustaría explicar elemento a elemento lo que nuestros lectores verán en ellas (como le ha pasado a nuestro amigo EC-JPR en su último artículo). La mejor forma de realizar esto es mediante los llamados mapas de imágenes con CSS (no confundir con los mapas HTML —etiqueta <map>—, también interesantes, pero menos potentes). Para ver qué es esto, nada mejor que acudir directamente a un ejemplo.

Existen muchísimos tutoriales sobre este tema. Una simple búsqueda en Google nos arroja un montón de resultados interesantes como el muy recomendable How to create an image map using CSS: quizás el mejor que podréis encontrar —precisamente, cuenta cómo llegar a crear el ejemplo anterior—. Os animo a explorar otros tutoriales en los que hallaréis buenas ideas.

Yo nunca he necesitado un mapa de imagen, y es por ello que he adaptado el ejemplo de más arriba a la necesidad de EC-JPR a modo de ejercicio. Lo dejo aquí para posterior uso mío, por si lo necesitase más adelante, y por supuesto para todos vosotros. Tiene algunos cambios/mejoras con respecto al ejemplo.

Código HTML que va insertado en el cuerpo del post:

[code lang=»html» collapse=»true»]<dl id="ambumap" class="aligncenter">
<dt id="title" title="Ambulancia">
<span>Ambulancia</span>
</dt>
<dd id="ambu1">
<p title="Botellas de oxígeno medicinal"><span>Las <strong>botellas de oxígeno medicinal</strong> están conectadas a la instalación de la furgoneta para alimentar las distintas tomas de pared.</span></p>
</dd>
<dd id="ambu2">
<p title="Collarines, férulas"><span>Los <strong>collarines</strong> mantienen rígido el eje cabeza-tronco, algo crucial si no queremos desnucar a un accidentado con fracturas vertebrales altas. Y las <strong>férulas</strong>, que inmovilizan una extremidad fracturada.</span></p>
</dd>
<dd id="ambu3">
<p title="Colchón de vacío"><span>Un <strong>colchón de vacío</strong> es un colchón lleno de bolitas de plástico que se adapta a la forma del enfermo, y que se queda rígido cuando lo vaciamos de aire. Es muy útil para transportar a pacientes que no se pueden menear demasiado (no conviene tener danzando las fracturas de un politraumatizado).</span></p>
</dd>
<dd id="ambu4">
<p title="Gasas, vendas, goteros…"><span><strong>Sueros</strong> de todos los tipos y sabores: <a href="http://www.flickr.com/photos/ec-jpr/4976465960/" title="Distintas bolsas de fluidos IV [Flickr]">salino, glucosado, Plasmalyte, Gelafundina</a>, etc. Y, a su lado, material de curas: <strong>vendas, gasas, Betadine, tensiómetro</strong>… pero esto sale mejor en otra foto.</span></p>
</dd>
<dd id="ambu5">
<p title="Tablero espinal, camilla de cuchara"><span>Un <strong>tablero espinal</strong> (porque, si la columna vertebral está jodida, el blando colchón de la camilla no es la mejor opción) y una <strong>camilla de cuchara</strong>, que es como un tablero pero se abre por el medio, para recoger al paciente del suelo <a href="http://www.youtube.com/watch?v=Igv3tEYQXs4">moviéndolo lo menos posible</a>. Como curiosidad, son de plástico para poder hacer radiografías sin necesidad de retirarlas.</span></p>
</dd>
<dd id="ambu6">
<p title="Mochilas de ataque"><span>Unas <strong>mochilas &#8220;de ataque&#8221;</strong>, con material de primera intervención.</span></p>
</dd>
<dd id="ambu7">
<p title="Silla para rescate en edificios"><span>Una <strong>silla plegable</strong> para evacuar al enfermo desde un edificio, porque la camilla no cabe en el ascensor.</span></p>
</dd>
<dd id="ambu8">
<p title="Cascos y gafas de protección"><span><strong>Cascos y gafas de protección</strong>.</span></p>
</dd>
<dd id="ambu9">
<p title="Respirador"><span><strong>Respirador</strong>.</span></p>
</dd>
<dd id="ambu10">
<p title="Control luces y ventilación"><span><strong>Control luces y ventilación</strong>.</span></p>
</dd>
<dd id="ambu11">
<p title="Lámparas, asideros"><span><strong>Lámparas, asideros…</strong>.</span></p>
</dd>
</dl>[/code]

Código CSS que va insertado en un campo personalizado del post:

[code lang=»css» collapse=»true»]/* set the size of the definition list <dl> and add the background image */
#ambumap {
display:block;
width:450px;
height:579px;
background:url(https://www.enchufa2.es/wp-content/uploads/2010/09/4689detras.jpg) no-repeat;
position:relative;
font-size:12px;
}
#ambumap p {
margin:0;
}
/* set up the definition list <dt><a> to hold the background image for the hover state */
#ambumap #title {
display:block;
width:450px;
height:0;
padding-top:579px;
overflow:hidden;
position:absolute;
left:0;
top:0;
background:transparent url(https://www.enchufa2.es/wp-content/uploads/2010/09/4689detras.jpg) no-repeat;
}
/* the hack for IE pre IE6 */
* html #ambumap #title {
height:579px;
he\ight:0;
}
/* the <dt><a> hover style to move the background image to position 0 0 */
#ambumap #title:hover {
background-position: -450px 0;
z-index:10;
}
/* place the <dd>s in the correct absolute position */
#ambumap dd {
position:absolute;
padding:0;
margin:0;
}
#ambumap #ambu1 {
left:18px;
top:259px;
z-index:20;
}
#ambumap #ambu2 {
left:100px;
top:79px;
z-index:20;
}
#ambumap #ambu3 {
left:94px;
top:252px;
z-index:20;
}
#ambumap #ambu4 {
left:100px;
top:145px;
z-index:20;
}
#ambumap #ambu5 {
left:268px;
top:155px;
z-index:20;
}
#ambumap #ambu6 {
left:288px;
top:180px;
z-index:20;
}
#ambumap #ambu7 {
left:354px;
top:184px;
z-index:20;
}
#ambumap #ambu8 {
left:343px;
top:88px;
z-index:20;
}
#ambumap #ambu9 {
left:200px;
top:130px;
z-index:20;
}
#ambumap #ambu10 {
left:166px;
top:160px;
z-index:20;
}
#ambumap #ambu11 {
left:176px;
top:84px;
z-index:20;
}
/* style the <dd><a> links physical size and the background image for the hover */
#ambumap #ambu1 p {
display:block;
width:78px;
height:228px;
z-index:20;
}
#ambumap #ambu2 p {
display:block;
width:70px;
height:85px;
z-index:20;
}
#ambumap #ambu3 p {
display:block;
width:44px;
height:85px;
z-index:20;
}
#ambumap #ambu4 p {
display:block;
width:51px;
height:73px;
z-index:20;
}
#ambumap #ambu5 p {
display:block;
width:20px;
height:205px;
z-index:20;
}
#ambumap #ambu6 p {
display:block;
width:35px;
height:180px;
z-index:20;
}
#ambumap #ambu7 p {
display:block;
width:80px;
height:200px;
z-index:20;
}
#ambumap #ambu8 p {
display:block;
width:85px;
height:85px;
z-index:20;
}
#ambumap #ambu9 p {
display:block;
width:56px;
height:32px;
z-index:20;
}
#ambumap #ambu10 p {
display:block;
width:100px;
height:25px;
z-index:20;
}
#ambumap #ambu11 p {
display:block;
width:100px;
height:40px;
z-index:20;
}
/* style the span text so that it is not initially displayed */
#ambumap p span {
display:none;
}
/* show border when hovered */
#ambumap p:hover {
border:1px solid white;
}
/* define the common styling for the span text */
#ambumap p:hover span {
position:absolute;
width:320px;
display:block;
background:#eee;
color:#000;
border:1px solid #000;
padding:5px;
}
/* move the span text to a common position */
#ambumap #ambu1 p:hover span {
left:32px;
top:248px;
}
#ambumap #ambu2 p:hover span {
left:-50px;
top:105px;
}
#ambumap #ambu3 p:hover span {
left:-44px;
top:105px;
}
#ambumap #ambu4 p:hover span {
left:-50px;
top:93px;
}
#ambumap #ambu5 p:hover span {
left:-218px;
top:225px;
}
#ambumap #ambu6 p:hover span {
left:-238px;
top:200px;
}
#ambumap #ambu7 p:hover span {
left:-304px;
top:220px;
}
#ambumap #ambu8 p:hover span {
left:-293px;
top:105px;
}
#ambumap #ambu9 p:hover span {
left:-150px;
top:52px;
}
#ambumap #ambu10 p:hover span {
left:-116px;
top:45px;
}
#ambumap #ambu11 p:hover span {
left:-126px;
top:60px;
}[/code]

Resultado:

Ambulancia

Las botellas de oxígeno medicinal están conectadas a la instalación de la furgoneta para alimentar las distintas tomas de pared.

Los collarines mantienen rígido el eje cabeza-tronco, algo crucial si no queremos desnucar a un accidentado con fracturas vertebrales altas. Y las férulas, que inmovilizan una extremidad fracturada.

Un colchón de vacío es un colchón lleno de bolitas de plástico que se adapta a la forma del enfermo, y que se queda rígido cuando lo vaciamos de aire. Es muy útil para transportar a pacientes que no se pueden menear demasiado (no conviene tener danzando las fracturas de un politraumatizado).

Sueros de todos los tipos y sabores: salino, glucosado, Plasmalyte, Gelafundina, etc. Y, a su lado, material de curas: vendas, gasas, Betadine, tensiómetro… pero esto sale mejor en otra foto.

Un tablero espinal (porque, si la columna vertebral está jodida, el blando colchón de la camilla no es la mejor opción) y una camilla de cuchara, que es como un tablero pero se abre por el medio, para recoger al paciente del suelo moviéndolo lo menos posible. Como curiosidad, son de plástico para poder hacer radiografías sin necesidad de retirarlas.

Unas mochilas “de ataque”, con material de primera intervención.

Una silla plegable para evacuar al enfermo desde un edificio, porque la camilla no cabe en el ascensor.

Cascos y gafas de protección.

Respirador.

Control luces y ventilación.

Lámparas, asideros….

Para incluir el código CSS necesario, hago uso del plugin para WordPress Per-Post CSS. Podéis descargarlo aquí, porque el original tiene un pequeño error.

¿El spam hace mella en la mente?

Iñaki Úcar1 comentario

Evolución de la cantidad de spam enviado; unos cuantos datos en bruto (extraídos de aquí):

  • 2002 – 2.4 billion per day
  • 2004 – 11 billion per day
  • 2005 – June 30 billion per day
  • 2010 – January 183 billion per day

Podemos representar estos puntos en una gráfica y realizar un ajuste con una función polinómica de segundo orden tal que así:

Con estos burdos cálculos con unos pocos datos estamos en posición de afirmar que, desde 2007, la cantidad de spam se ha triplicado; poco más, poco menos (de sesenta y pico billones —que supongo que serán americanos, es decir, miles de millones para nosotros— pasamos a ciento ochenta y pico). Asumiendo que la proporción de spam de cada temática distinta permanece estable con el tiempo, podemos decir también que el spam sobre alargamientos de pene se ha triplicado aproximadamente desde 2007.

Y ahora que os tengo donde quería, os suelto el hueso: «En los últimos tres años se ha triplicado el número de hombres que recurre a la cirugía para aumentar el tamaño de su falo». Que yo no digo nada, pero la correlación es curiosa cuando menos. Opiniones en los comentarios.

El efecto Leidenfrost

Iñaki Úcar

(Esta anotación se publica simultáneamente en Amazings.es)

El efecto Leidenfrost —llamado así en honor a Johann Gottlob Leidenfrost, quien lo describió en A Tract About Some Qualities of Common Water, en 1756— es un fenómeno por el cual un líquido que entra en contacto con un sólido a una temperatura superior a la temperatura de ebullición de dicho líquido, se evapora mucho más lentamente que si esta temperatura fuese inferior.

Puede verse de manera sencilla con un experimento casero. Nos armamos con un vaso de agua del grifo y una cacerola. Ponemos la cacerola al fuego y esperamos a que se caliente. Si echamos agua en su interior cuando la temperatura del metal es inferior a la temperatura de ebullición del agua (unos 100 ºC dependiendo de diversos factores), las gotas de agua se evaporarán lentamente. Si, en su lugar, lo hacemos cuando la cacerola ha alcanzado los 100 ºC o más, las gotas se evaporarán rápida y ruidosamente. En cambio, si seguimos aumentando la temperatura hasta superar el punto Leidenfrost, las gotas resbalan por la superficie de la cacerola, evaporándose muy lentamente.

Dicho efecto sucede porque, al entrar en contacto con la cacerola a una temperatura tan alta, una pequeña capa de agua se vaporiza instantáneamente actuando como aislante entre la superficie sólida y el líquido.

De esta manera, la gota de agua planea de forma errática sobre la cacerola, evaporándose muy lentamente gracias al aislamiento que le proporciona el vapor. A continuación podemos ver un vídeo del experimento.

Ver vídeo

El punto Leidenfrost no es fácil de calcular a priori, ya que depende de infinidad de factores tales como las propiedades de la superficie y las impurezas del líquido. Sin embargo, de forma aproximada podemos decir que el punto Leidenfrost del agua se sitúa aproximadamente en los 160 ºC.

El efecto Leidenfrost es el responsable de que podamos meter la mano en plomo líquido sin que nos pase nada (como ya comprobaron los Cazadores de Mitos) [¡Peligroso! ¡No intentar en casa!], o de que podamos meter la mano en nitrógeno líquido como en el siguiente vídeo [¡Tan peligroso o más que lo anterior!].

Ver vídeo

Como hemos visto, el autor del vídeo introduce su mano en nitrógeno líquido (a una temperatura por debajo de -196 ºC, la temperatura de ebullición del nitrógeno) y no le ocurre absolutamente nada. De nuevo juega un papel fundamental el efecto Leidenfrost. Su mano se encuentra a una temperatura muy por encima de esos -196 ºC y por tanto se sitúa por encima del punto Leidenfrost. Así, cuando la introduce, una fina capa de nitrógeno alrededor de su mano se vaporiza instantáneamente y la protege durante un pequeño intervalo de tiempo de una congelación segura.