Image Maps: para mapear im?genes online

Mapear una imagen b?sicamente significa poner varios enlaces en diferentes partes de una sola imagen. Para ello se usa la etiqueta <MAP> y la etiqueta <AREA> que define las ?reas de la imagen donde se agregan los enlaces. Estas ?reas contienen las coordenadas de la parte seleccionada de dicha imagen, coordenadas que para la mayor?a de los mortales nos parecen que est?n en chino; se trata de establecer la distancia en pixeles en la que se encuentra alguna ?rea de la imagen, y en esas coordenadas se agrega el enlace que s?lo ser? accesible en dicha ?rea.

Por ejemplo, en la siguiente imagen hay 8 enlaces, y a cada uno de ellos s?lo se le puede dar click en su respectiva ?rea.

Establecer las coordenadas de cada ?rea puede resultar de lo m?s estresante, cansado, agotador, y de locos; por suerte hay servicios online que permiten hacer todo esto sin necesidad de contar pixeles, medir, ni nada.
Hay varios, pero hoy hablaremos de Image-Maps. Esta herramienta online nos permite mapear nuestras im?genes de forma sencilla y con las opciones necesarias.

Primero habremos subido nuestra imagen a un alojamiento y pegamos la URL de la imagen en el ?rea correspondiente. Tambi�n nos da la opci?n de buscar la imagen del ordenador pero siempre es mejor subirla nosotros mismos para tener la seguridad de que nuestra imagen estar? disponible todo el tiempo, ya que las im?genes que subas desde ah? ser?n eliminadas despu�s de 24 horas.

Despu�s que hemos dado click en Continuar comenzaremos al mapeado de la imagen, para ello da click derecho y se activar? un men?.

Create Rect es para formar un rect?ngulo, Create Poly para formar un pol?gono, y Create Circle para formar un c?rculo. Elige la que necesites y traza la forma para seleccionar el ?rea de la imagen a la que le pondr?s el enlace.
Inmediatamente aparecer? una ventana para que agregues la URL que tendr? esa ?rea, adem?s de un title, alt, e ID si lo deseas. En la pesta?a Events podr?s establecer si el enlace se abre en una nueva pesta?a o no.

Una vez que has terminado de establecer las ?reas de tu imagen da click derecho y en el men? selecciona Get Code.

En la pesta?a HTML Code hasta abajo, ver?s tu c?digo. C?pialo y p�galo en una entrada o gadget de tu blog y listo.

Como puedes ver es una herramienta f?cil de usar, y con las opciones necesarias para mapear tus im?genes online y crear banners, carteles promocionales, o cabeceras con m?ltiples enlaces. En el caso de esto ?ltimo, si deseas hacer una cabecera que tenga m?ltiples links, sigue los primeros pasos de esta entrada, s?lo que, en lugar de a?adir el script que ah? se menciona, pondr?as el c?digo de tu imagen mapeada.

Otras opciones para mapear im?genes online son:
Online Image Map Editor
Mappa Tool
Polygonal Image Map Generator
HTML Map Creator

C?mo poner iconos en las pesta?as del men? de P?ginas

Muchas veces sentimos la necesidad de a?adir iconos a los enlaces para identificar de una mejor manera el tipo de contenido al que dirige dicho enlace. En la mayor?a de los men?s esto no es problema pues basta con a?adir el c?digo de la imagen antes del nombre de la pesta?a, pero con el gadget de P?ginas se dificulta un poco ya que el c?digo del gadget no es el tradicional de un men? HTML sino que contiene una serie de c?digos propios de Blogger, as? que a?adir im?genes -diferentes- directamente en el HTML es imposible.

Pero eso no significa que no podamos buscar formas alternas de hacerlo, y es justo lo que haremos en esta entrada, vamos a ver c?mo poner un ?cono diferente en cada pesta?a del men? de P?ginas, y para ello usaremos CSS, espec?ficamente los selectores :nth-child() y ::before
De esta manera conseguiremos que cada una de las pesta?as de nuestro gadget de P?ginas tenga un ?cono diferente antes del nombre de la pesta?a.

Conseguir lo anterior es mucho m?s f?cil de lo que se piensa. S?lo tienes que entrar a Plantilla | Edici?n de HTML y a?adir antes de ]]></b:skin> lo siguiente:

#PageList1 li:nth-child(1):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(2):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(3):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}
#PageList1 li:nth-child(4):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}

En estos estilos CSS ver?s unos n?meros, cada n?mero representa cada pesta?a de tu men?, siendo que el 1 es la primera pesta?a, el 2 la segunda, etc. Toma en cuenta que la primera pesta?a habitualmente es la P?gina Principal, as? que la segunda pesta?a pertenece a la primera p?gina de tu men?.

En el c?digo deber?s cambiar la URL de la imagen donde se indica en color rojo.

La distancia entre el ?cono y el texto se modifica en padding-right.

Con top podr?s controlar la distancia desde arriba, esto es para que puedas alinear la imagen verticalmente. Yo he puesto que el ?cono se desplace 3px desde arriba, pero puede variar seg?n el tama?o del ?cono que pongas, ah? deber?s jugar con el valor de top incluso pudiendo usar un valor negativo para subir la imagen, por ejemplo -3px

El c?digo es para las primeras cuatro pesta?as de tu men?, si tuvieras m?s pesta?as entonces s?lo a?ade un trozo de c?digo como este por cada pesta?a a la que le quieras agregar un icono.

#PageList1 li:nth-child(5):before {
content: url(URL de la imagen);
padding-right: 5px;
position: relative;
top: 3px;
}

Por cada c?digo que agregues deber?s cambiar el n?mero 5 por el correspondiente: 6, 7, 8, etc.

As? de f?cil y sencillo podr?s personalizar m?s el gadget de P?ginas usando iconos que ayuden al reconocimiento visual de las pesta?as.

C?mo saber mi ID de Facebook, Twitter, y Google+

Algunas veces por diversos motivos necesitar?s saber el ID de usuario de alguna red social en la que participas, ya sea para crear un widget, para crear tus metatags, o para cualquier otra cosa que necesites.
En esta entrada vamos a ver c?mo conseguir tu ID de Facebook, ID de Twitter, y el ID de Google+, tanto de tus perfiles como de tus p?ginas.

ID de Facebook

Si tu perfil o tu p?gina de Facebook no tienen una URL personalizada entonces s?lo tienes que entrar a tu p?gina o perfil, y copiar la URL que aparece en la barra de direcciones. Esa serie de n?meros es tu ID.

Si ya tienes una URL personalizada entonces usa esta herramienta, ingresa tu nombre de usuario o el nombre de tu p?gina, da click en Probar y obtendr?s tu ID de Facebook as? como algunos datos extra.

https://graph.facebook.com/

ID de Google+

En el caso de la red social de Google, si no tienes una URL personalizada, s?lo entra en tu perfil y copia la URL de la barra de direcciones, los n?meros que aparecen en ella es tu ID.

Pero si ya tienes una URL personalizada entonces puedes hacer uso de la API de Google+ para conocer tu ID. Para ello debes ingresar a la p?gina de APIs Explorer.
En userId agrega el nombre de usuario de tu p?gina o perfil anteponiendo el signo +
En fields escribe id

Da click en Execute y obtendr?s tu ID.

ID de Twitter

En el caso de Twitter la nueva API nos complica un poco m?s las cosas, pero por suerte hay algunas herramientas online que nos permiten saber nuestro ID de Twitter en un solo paso.
My Twitter ID es una de ellas, ?nicamente debes poner tu nombre de usuario de Twitter y de inmediato tendr?s tu ID.

Otra buena opci?n es Get Twitter ID el cual adem?s de darnos nuestro ID nos da unos datos extra como el n?mero de seguidores que tenemos.

Con estos sencillos m�todos podr?s saber el ID de tu perfil o de tus p?ginas de estas redes sociales que son las m?s populares.

4 maneras de poner un spoiler en el blog

Los spoilers sirven para ocultar cierto contenido de una entrada del blog, ya sea por estrategia o por est�tica, estos spoilers ocultan contenido y lo muestran s?lo cuando el usuario lo solicita.
En esta entrada veremos 4 m�todos para poner un spoiler y as? puedas elegir el m�todo que m?s se adapte a tus necesidades.

Spoiler s?lo con CSS

Con este m�todo usaremos las bondades del CSS sin tener que recurrir a scripts, s?lo CSS y nada m?s. Pero, tiene dos desventajas, la primera es que se necesitan dos botones, uno para mostrar el contenido y otro para ocultarlo. El otro inconveniente es que al mostrar el contenido la p?gina hace un peque?o scroll hasta posicionar la p?gina donde est� el contenido.

Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam.

El c?digo que usar?as en tus entradas para este tipo de spoiler con CSS ser?a el siguiente:

<input onclick="window.location='#mostrar1';" type="button" value="Mostrar"/>
<input onclick="window.location='#';" type="button" value="Ocultar" />
<div id="spoiler1">
<div id="mostrar1">

...Aqu? el contenido que quieres ocultar...

</div>
</div>
<style>
#spoiler1 > div {display: none;}
#spoiler1 > div:target {display: block;}
</style>

En color rojo debes poner el contenido que estar? oculto. Lo que est? en color azul lo debes cambiar cada vez que agregues un spoiler, por ejemplo, si agregas uno m?s cambia spoiler1 por spoiler2 y mostrar1 por mostrar2

Spoiler usando Javascript

Este tipo de spoiler es similar al spoiler que vimos hace algunos a?os, s?lo que ligeramente modificado. Su uso requiere Javascript, muy poco en realidad. B?sicamente hace lo mismo que el spoiler con CSS pero llamando los estilos con Javascript.

Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam.

<input type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''; this.value = 'Ocultar'; }else{document.getElementById('spoiler1') .style.display='none';this.value = 'Mostrar'; }" value="Mostrar"/><div id="spoiler1" style="display:none">

...Aqu? el contenido que quieres ocultar...

</div>

De igual forma deber?s cambiar el ID spoiler1 (todas las veces que aparece) cada vez que quieras a?adir uno nuevo.

Spoiler usando Scriptaculous

Este m�todo ya lo vimos alguna vez en el post "expandir y contraer partes de una entrada". Este a diferencia de los anteriores muestra el contenido oculto con un efecto deslizante, d?ndole un toque m?s atractivo.

Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam.

Para usarlo necesitamos tener Scriptaculous, si a?n no lo tienes agr�galo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js'/>

Y cuando quieras poner el spoiler en una entrada usa este c?digo:

<input onclick='Effect.toggle("spoiler1","slide"); return false' type='button' value='Mostrar'/><div id='spoiler1' style='display: none;'>

...Aqu? el contenido que quieres ocultar...

</div>

En este caso tambi�n deber?s cambiar las partes en azul siempre que quieras a?adir m?s.

Spoiler usando jQuery

Por ?ltimo vamos a ver c?mo ocultar contenido con jQuery, con el cual tambi�n podremos conseguir un efecto deslizante al mostrar u ocultar el contenido del spoiler.

Lorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam.

Si no tienes jQuery ponlo despu�s de <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

Y en tu entrada usa este c?digo cada vez que quieras poner tu spoiler:

<input type="button" id="spoiler1" value="Mostrar"/>
<div class="mostrar1" style="display: none;">

...Aqu? el contenido que quieres ocultar...

</div>
<script>jQuery.noConflict();jQuery(document).ready(function(){jQuery('#spoiler1').click(function(){jQuery('.mostrar1').slideToggle("slow");});});</script>

Aqu? otra vez hay que cambiar lo que est? en azul cada vez que quieras a?adir uno nuevo, por ejemplo spoiler1 por spoiler2 y mostrar1 por mostrar2

Y as? de sencillo puedes ocultar contenido en las entradas de tu blog, incluso en un gadget HTML/Javascript y como puedes ver son c?digos super cortos y sencillos de aplicar. El contenido que puedes poner para ocultar puede ser el que sea, una imagen, texto, un reproductor, videos, etc., etc.

Expandir y contraer gadgets con jQuery

Hace ya alg?n tiempo vimos c?mo expandir y contraer gadgets usando Scriptaculous y Prototype, es un m�todo que funciona bien, pero hay quienes usan jQuery y no quieren cargar m?s librer?as en su blog, as? que en esta entrada veremos c?mo conseguir el mismo resultado pero usando jQuery.

Expandir y contraer gadgets puede servir a quienes tienen muchos gadgets y quieren que la sidebar se vea m?s despejada mostrando s?lo los t?tulos de los gadgets, y mostrando el contenido s?lo cuando el usuario quiera verlo. Puedes ver un ejemplo en este blog de pruebas, al dar click sobre el t?tulo del gadget �ste se expandir?.

Para poner estos gadgets expandibles s?lo necesitas jQuery, si a?n no lo tienes entra en Plantilla | Edici?n de HTML, y despu�s de <head> agrega esta l?nea:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>

Y ahora, para aplicar el efecto expandible -y deslizante- a alg?n gadget, localiza en la Edici?n de HTML el gadget al que se lo quieres aplicar. Por ejemplo, un gadget del tipo HTML/Javascript ser?a as?:

<b:widget id='HTML1' locked='false' title='T?tulo del gadget' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>
<span id='expandirGadget1' style='cursor:hand;cursor:pointer;'>
&#9660;&#9650;
<data:title/>
</span>
</h2>
</b:if>
<div class='widget-content'>
<div class='expandir1' style='display: none;'>

<data:content/>

</div>
<script>$(document).ready(function(){$(&#39;#expandirGadget1&#39;).click(function(){$(&#39;.expandir1&#39;).slideToggle(&quot;slow&quot;)})});</script>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Agrega lo que est? en color rojo, y listo.

Para guiarte d?nde poner los c?digos:

El primer c?digo en rojo va alrededor de la etiqueta <data:title/>
La otra parte en rojo va despu�s de <div class='widget-content'>
Y la ?ltima va antes de

</div>

<b:include name='quickedit'/>

Nota que en color azul ver?s un ID y una clase, ambos aparecen dos veces. Si pusieras otro gadget expandible deber?s cambiar tanto los IDs como las clases, por ejemplo expandirGadget2 y expandir2

En el primer fragmento que a?adimos ver?s que aparecen estos caracteres: &#9660;&#9650;
Esas son las flechas de arriba y abajo ?? puedes cambiarlo por otro caracter, otro texto, o incluso por una imagen:

<img src='URL de la imagen' border='0' width='14px'/>

El c?digo de ejemplo es para los gadgets HTML/Javascript, pero se puede aplicar a cualquier otro, s?lo basta con identificar la etiqueta <data:title/> del gadget (que es donde va el primer c?digo), y el contenido del gadget (que es donde va el segundo c?digo).

Quiz? deba aclarar que esto no hace que el blog cargue m?s r?pido ya que el contenido se sigue cargando aun cuando est� oculto para el usuario. Es ?nicamente para mostrar menos espacio en la sidebar ya que algunas veces tenemos gadgets que ocupan demasiado espacio y esta es una buena manera de mostrar el blog m?s prolijo.