Feliz Navidad
Cuando uno es muchos y muchos son uno |
Click para ver la galería de imágenes.
6800 millones de personas y una sola voz contra el cambio climático ...
REFERENCIAS:Hopenhagen.org
Agregando URL cortas en Blogger |
Las URLs cortas se pusieron de moda con Twitter pero existen desde mucho antes que las descubriéramos o que tuviérmos que utilizarlas para que 140 caracteres no fueran demasiado escasos.
¿Qué son estas cosas? Pués, imaginen que una dirección como esta:
http://vagabundia.blogspot.com/2009/12/googl-enviar-los-posts-twitter-usando.html
tiene más de 80 caracteres y eso, dependiendo del servicio que usemos, pude ser reducido.
Por ejemplo, utilizando gaigalas la convertimos en esto: http://goo.gl/1ntC
con bit.ly en esto http://bit.ly/5frSqH
y con tinyurl http://tinyurl.com/yd7blja
Las tres, son la misma dirección codificada de manera diferente así que todas ellas, abren la misma página:
¿Qué son estas cosas? Pués, imaginen que una dirección como esta:
http://vagabundia.blogspot.com/2009/12/googl-enviar-los-posts-twitter-usando.html
tiene más de 80 caracteres y eso, dependiendo del servicio que usemos, pude ser reducido.
Por ejemplo, utilizando gaigalas la convertimos en esto: http://goo.gl/1ntC
con bit.ly en esto http://bit.ly/5frSqH
y con tinyurl http://tinyurl.com/yd7blja
Las tres, son la misma dirección codificada de manera diferente así que todas ellas, abren la misma página:
¿Sirve esto?
Es importante decir que no todos los servicios sirven y no porque la página se abra mal sino por la forma en que nos redirigen; es decir, todos esos servicios, lo que hacen es decodificar esa URL y enviarnos al sitio original pero, para que los buscadores "entiendan" esa dirección e indexen la página real y no la codificada, esos servicios deben hacerlo utilizando algo llamado redirección 301 y, aparentemente, no todos lo hacen (más información).
Es importante decir que no todos los servicios sirven y no porque la página se abra mal sino por la forma en que nos redirigen; es decir, todos esos servicios, lo que hacen es decodificar esa URL y enviarnos al sitio original pero, para que los buscadores "entiendan" esa dirección e indexen la página real y no la codificada, esos servicios deben hacerlo utilizando algo llamado redirección 301 y, aparentemente, no todos lo hacen (más información).
Es por eso que algunos afirman que el acortar URLs "debilita" la efectividad de los hipervinculos y hay muchas críticas a su uso pero, pese a todo, siguen existiendo y desde el lanzamiento de goo.gl, el servicio de acortameinto de URLs de Google), la cosa se ha vuelto, quizás, un poco más accesible ya que, imagino que ellos harán las cosas bien y las redirecciones serán correctas.
Al principio, este servicio sólo estaba disponible para usar en Chorme o con la Google Toolbar pero, en pocos días, ya han aparecido sitios como el de Alexandre Gaigalas, un bookmarklet y hasta una extensión para Firefox como goo.gl lite.
Con el tiempo, es evidente que esto se extenderá; los códigos están a la vista así que es fácil manipularlos. Tan fácil que podríamos agregar la opción al mismo Blogger, sólo con un par de líneas y de este modo, crear una URL corta para cada entrada de nuestro sitio.
Para eso, necesitamos agregar la función correspondiente antes de </head>:
Al principio, este servicio sólo estaba disponible para usar en Chorme o con la Google Toolbar pero, en pocos días, ya han aparecido sitios como el de Alexandre Gaigalas, un bookmarklet y hasta una extensión para Firefox como goo.gl lite.
Con el tiempo, es evidente que esto se extenderá; los códigos están a la vista así que es fácil manipularlos. Tan fácil que podríamos agregar la opción al mismo Blogger, sólo con un par de líneas y de este modo, crear una URL corta para cada entrada de nuestro sitio.
Para eso, necesitamos agregar la función correspondiente antes de </head>:
<script type='text/javascript'>
//<![CDATA[
window.googl_callback=function(response) {
if(response.error_message) {
document.getElementById("urlCORTA").innerHTML = ""; // es un error asi que no mostramos nada
} else {
respuesta = response.short_url;
salida = "shortURL: <a rel='nofollow' href='" + respuesta + "' target='_blank'>" + respuesta + "</a>";
document.getElementById("urlCORTA").innerHTML = salida;
}
}
//]]>
</script>
La función le solicitará a goo.gle que cree una URL corta para la página actual y esta, se mostrará en una etiqueta con un cierto formato y cuyo ID será urlCORTA; en este caso, será un texto:
shortURL: xxxxxxxxxxxx
que a la vez, será un enlace a abrir en otra ventana (target='_blank') y no indexable (rel='nofollow') para no repetirlo.
Faltaría entonces, agregar esa etiqueta y allí hay muchas variantes; puede estar debajo de los títulos de cada post (como en el ejemplo de este blog); debajo de ellos, en el footer, etc.
Sea como sea, podemos agregarla de este modo, condicionándola para que sólo se muestre en las páginas individuales:
shortURL: xxxxxxxxxxxx
que a la vez, será un enlace a abrir en otra ventana (target='_blank') y no indexable (rel='nofollow') para no repetirlo.
Faltaría entonces, agregar esa etiqueta y allí hay muchas variantes; puede estar debajo de los títulos de cada post (como en el ejemplo de este blog); debajo de ellos, en el footer, etc.
Sea como sea, podemos agregarla de este modo, condicionándola para que sólo se muestre en las páginas individuales:
<b:if cond='data:blog.pageType == "item"'>
<span id='urlCORTA'/>
<script expr:src='"http://ggl-shortener.appspot.com/?url=" + data:blog.url + "&jsonp=googl_callback"' type='text/javascript'/>
</b:if>
Y eso es todo. Llegado el caso, si queremos darle alguna clase de estilo, lo agregamos tambien antes de </head>:
<style type='text/css'>
#urlCORTA { /* el bloque donde se mostrará */ }
#urlCORTA a { /* el enlace en si mismo */ }
#urlCORTA a:hover { /* efecto hover sobre el enlace */ }
</style>
Iconos, iconos, iconos |
| iPhone by bigkobe | Contiene 9 íconos de 128×128 256x256 y 512x512 en formato PNG.descargar |
 |
| Antique | |
 | Contiene 7 íconos en formato PNG.descargar |
| Journal by ShrunkenJedi | Contiene 6 íconos de 512×512, en formato PNG.descargar |
 |
| EcoType by SneakyTomato | |
 | Contiene 32 íconos de 512×512, en formato PNG.descargar |
| Starbucks by benedik | |
| Contiene 4 íconos de 512×512, en formato PNG.descargar | |
 | |
Menú desplegable con CSS |
Este es el modelo de un menú desplegable que sólo requiere CSS y fue publicado por aex.net. Allí, podemos descargar los archivos necesarios para reproducir el demo online.
Con muy pocas modificaciones, podemos adaptarlo a cualquier página; por ejemplo, en este caso, le he quitado la parte de las transparencias para que sea más visible:
Con muy pocas modificaciones, podemos adaptarlo a cualquier página; por ejemplo, en este caso, le he quitado la parte de las transparencias para que sea más visible:
Como en la mayoría de los casos, hay dos partes; el HTML es muy simple y se basa en una serie de listas donde, los items con la clase drop son desplegables:
<ul class="menu">
<!-- este es un item simple -->
<li><a href="URL_enlace">ITEM SIMPLE</a></li>
<!-- así, construimos un item desplegable -->
<li class="drop">
<a href="#">ITEM DESPLEGABLE</a>
<!-- este es el ícono que puede ser cualquiera -->
<span class="toggle"> </span>
<!-- el submenú que se despliega -->
<ul>
<li><a href="URL_enlace1">TEXTO ENLACE 1</a></li>
<li><a href="URL_enlace2">TEXTO ENLACE 2</a></li>
<li><a href="URL_enlace3">TEXTO ENLACE 3</a></li>
</ul>
</li>
</ul>
EL CSS tampoco es complicado aunque es un poco engorroso y es la clave de todo:
ul.menu { /* es la lista principal */
background-color: #A9A9A9;
float: left;
list-style-type: none;
margin: 0;
padding: 0 20px;
}
ul.menu li { /* cada item de la lista principal */
border: 2px solid #A9A9A9;
display: block;
float: left;
height: 30px;
margin: 0;
padding: 0;
position: relative;
}
ul.menu li:hover { /* efecto hover sobre los items de la lista principal */
-moz-border-radius: 4px;
background-color: #000;
border:2px solid #A9A9A9;
}
ul.menu li a { /* cada item de la lista principal es un enlace */
color: #FFF;
display: block;
float: left;
font-weight: bold;
line-height: 18px;
padding: 6px 15px 5px;
text-decoration: none;
}
/* el ícono para desplegar el menú */
ul.menu li a span {
font-weight: normal;
padding-left: 3px;
}
ul.menu li.drop a {
padding-right: 7px;
}
ul.menu li.drop:hover li {
border: none;
}
ul.menu li.drop span.toggle {
background: transparent url(URL_toggle.png) no-repeat scroll 0 -20px;
display: block;
float: left;
height: 26px;
margin: 0 5px;
padding: 0;
width: 20px;
}
/* los efectos al pasar el ratón que desplegarán el submenú */
ul.menu li.drop:hover {
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
ul.menu li.drop:hover ul {
display: block;
padding: 0 0 10px 0;
z-index: 1;
}
ul.menu li ul { /* la lista con el submenú */
background-color: #555;
display: none;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 30px;
width: 100%;
}
ul.menu li ul li { /* cada item del submenú */
border: none;
float: none;
height: auto;
margin: 0;
padding: 0;
}
ul.menu li ul li a { /* cada item del submenú es un enlace */
background-color: transparent;
color: #DDD !important;
display: block;
float: none;
font-size: 13px;
font-weight: normal;
height: auto;
margin: 0;
padding: 5px 15px;
}
/* efectos sobre los items del submenú */
ul.menu li:hover ul {
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
border: none;
background-color: #555;
}
ul.menu li:hover ul * {
-moz-border-radius: 0;
background-color: transparent;
}
ul.menu li ul li:hover {
background-color: #000;
}
La evolución ... según Jabba :-) |
Añadir una dirección de correo adicional |
A veces, suele aparecer un mensaje en nuestra cuenta de GMail diciendo algo asi:
"Hey, this is important: we don't have a password recovery email address or phone number for your account. If you lose your access, we may not be able to help you."
Tanto en inglés como en español nos están informando que no tenemos una cuenta de mail alternativa asociada con nuestra cuenta principal y nos sugieren que la agreguemos.
¿Deberíamos hacerlo? ¿Por qué? Creo que sí, que es una buena idea ya que eso nos permitirá, en caso de no poder acceder con nuestra cuenta principal, hacerlo con esa o solicitar que se nos restablezca una contraseña perdida, por ejemplo.
Lo mejor, entonces, es ir directamente a las opciones de nuestra cuenta de Google y allí, en Dirección de correo electrónico principal hay un enlace que dice Editar donde veremos un campo a llenar: Añade una dirección de correo electrónico adicional.
Colocamos esa otra dirección y nos enviarán un mail a esa cuenta para confirmarla. Eso es todo. Si entramos otra vez, la veremos agregada.
En principio, esas cuentas asociadas pueden ser tantas como se nos ocurra y todas ellas pueden ser eliminadas o modificadas en cualquier momento.
"Hey, this is important: we don't have a password recovery email address or phone number for your account. If you lose your access, we may not be able to help you."
Tanto en inglés como en español nos están informando que no tenemos una cuenta de mail alternativa asociada con nuestra cuenta principal y nos sugieren que la agreguemos.
¿Deberíamos hacerlo? ¿Por qué? Creo que sí, que es una buena idea ya que eso nos permitirá, en caso de no poder acceder con nuestra cuenta principal, hacerlo con esa o solicitar que se nos restablezca una contraseña perdida, por ejemplo.
Lo mejor, entonces, es ir directamente a las opciones de nuestra cuenta de Google y allí, en Dirección de correo electrónico principal hay un enlace que dice Editar donde veremos un campo a llenar: Añade una dirección de correo electrónico adicional.
Colocamos esa otra dirección y nos enviarán un mail a esa cuenta para confirmarla. Eso es todo. Si entramos otra vez, la veremos agregada.
En principio, esas cuentas asociadas pueden ser tantas como se nos ocurra y todas ellas pueden ser eliminadas o modificadas en cualquier momento.
REFERENCIAS:The Real Blogger Status
