Siempre que alguien afirma que dos más dos son cuatro y un ignorante le responde que dos más dos son seis, surge un tercero que, en pro de la moderación y el diálogo, acaba concluyendo que dos más dos son cinco.
(José Prat, abogado y político español. Vía Etiopica)
Estas dos imágenes vistas en Un informático en el lado del mal hablan por sí solas:
A 53 personas les gusta esto. Cojonudo…
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 “de ataque”</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:
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.
Si así es como suenan tus bromas, me da miedo escuchar tus piezas serias.
Fue lo que le escribió Schumann a Chopin en una carta, tras escuchar su Scherzo No.2. El compositor hacía referencia al título de la pieza, Scherzo, que en italiano significa broma. Esta curiosa denominación se debe al origen de la forma musical, basada en una danza barroca: el Minueto. Ambas tienen en común su compás; 3 por 4, su estructura ternaria (con dos temas contrastantes, A-B-A) y cierto carácter jocoso, pillo, juguetón. De hecho, cuando en una partitura pone scherzando, significa que la música se debe interpretar jugando, coqueteando… Sin embargo, el minueto es algo más antiguo: formaba parte de las suites barrocas y más tarde se incorporó a los movimientos de sonatas y sinfonías. El Scherzo, con un ritmo más rápido, fue cobrando relevancia y sustituyendo poco a poco al Minueto, hasta que llegó finalmente a independizarse como forma musical, a partir del siglo XIX.
Los Scherzos de Chopin son un ejemplo de ello. Escribió 4 en total, de los cuales el segundo (1837) es sin duda el más conocido. En todos ellos podemos apreciar el compás ternario, el ritmo frenético y la estructura musical en la que se alternan dos temas contrastantes (en este caso, la sección B empieza a partir de 3’35»). Sin embargo, poco queda del carácter bromista original, sobre todo en los tres primeros scherzi. Más bien nos encontramos ante piezas algo oscuras, feroces, afiladas. O, como reiteraría Shumann: «¿Cómo se debe vestir la seriedad si la broma se pasea con oscuros velos?».
Os dejo escuchándolo a manos del gran Zimerman: la Elegancia hecha pianista y uno de los mejores intérpretes de Chopin que conozco.
Parecidos inquietantes…
Últimamente estaba recopilando frases de estos personajazos, así que dentro de unos días caerá una colección de chistes en toda regla. El caso es que he visto esta cita y me ha parecido tan emblemática, tan reveladora, que no me he podido resistir. En efecto, si el sexo con mujeres sirve exclusivamente para procrear… en algún lado habrá que buscar el placer ¿no?
Las mujeres son para los hijos. Los chicos son para el placer.
(Dicho afgano. Vía Las penas del Agente Smith)