Blogger comenzará a redirigir los dominios blogspot

Google ha anunciado que a partir de ahora, comenzará a redirigir los blogs alojados en Blogger a dominios específicos del país así que si un blog cuya URL era:

http://nombre_blog.blogspot.com

podrá verse como:

http://nombre_blog.blogspot.com.au
http://nombre_blog.blogspot.com.es
http://nombre_blog.blogspot.com.pk

dependiendo de si es que está en Australia, España o Pakistán.

Aunque en este momento, eso sólo parece afectar a los blogs de la India, la página de Google explica que dichos cambios son paulatinos e irán siendo aplicados a lo largo de los próximos meses aunque no especifica si eso será válido par todos o se limitará a ciertos países.

Según al empresa, este cambio se realiza para evitar los intentos de censura clara o más o menos velada que están imponiendo algunos gobiernos en las legislaciones respectivas. De este modo, ante cualquier reclamo que implique la obligación de eliminar un sitio, eso sólo afectaría a la "copia" local y el blog continuaría accesible bajo el dominio genérico de Blogger y por lo tanto, seguiría siendo accesible para el resto de los usuarios.

¿Esto a afectará a los buscadores, la indexación y los sitios podrían ser penalizados por contenido duplicado?

La pregunta se la hacen ellos pero a mi entender, no lo responden de modo satisfactorio, hablan de "esforzarse" en minimizar los efectos de ese cambio y que esto afecte el posicionamiento de los sitios. De hecho, sugieren que se establezca el dominio con la etiqueta META canonical, es decir, si el dominio pasa a ser local, esta, debería cambiarse para apuntar a ese dominio local.

¿Por qué? Porque todo blog tendrá dos direcciones URL en lugar de una. Esto, además, podría traer problemas si el sitio está asociado a redes sociales o servicios externos ¿Qué pasará con los feeds? No tengo idea; habrá que ver y estar atentos.

Como regla general, han decidido que el agregado de ncr al final de la URL redirija siempre a los servidores de USA

http://nombre_blog.blogspot.com/ncr

Wallpapers LOVE

Ausente por unos días

Hola que tal, voy a tomarme unos días debido a que mi estado de salud en estos momentos no es óptimo, por lo tanto no me será posible contestar los comentarios.



No te preocupes, Dios mediante, y estaré de regreso.



Gracias por todo :)

Google se posiciona para eliminar contenidos en Blogger

Según informa Blogger en las próximas semanas se pueden producir redirecciones del dominio habitual que todos los usuarios de Blogger usan, blogspot.com, hacia niveles superiores de códigos de cada país (ccTLD), de tal forma que la url de un blog de Blogger en España pasaría a ser Nombre_del_blog.blogspot.com.es

El proceso hacia ese cambio parece que durara meses y será progresivo, pero lo realmente importante de todo esto es el motivo de ese cambio

"La migración a dominios localizados nos permitirá continuar promoviendo la libertad de expresión y la publicación responsable a la vez que ofrecemos una mayor flexibilidad para cumplir las solicitudes de eliminación de contenido válidas conforme a las leyes locales. Mediante el uso de ccTLD, la eliminación de contenido se puede gestionar a nivel de país, lo que afectará a un número más reducido de lectores. El contenido que se elimine debido a una ley específica de un país solo se suprimirá del ccTLD relevante"

No se ustedes como interpretáis esto pero yo lo entiendo claramente como una maniobra de que cada blog este sujeto a las leyes de cada país, ya no podrán muchos blogs con contenido "alegal" esconderse detrás de un dominio general. Aunque también especifican que solo será borrado en ese país...veremos que ocurre ¿no es por esto mismo que están criticando tanto a Twitter?

Pero la cosa no queda ahí, esa redirección perjudica a los blogs al crear contenido duplicado

Después de que se produzca este cambio, los rastreadores encontrarán el contenido de Blogspot en diferentes dominios. El alojamiento de contenido duplicado en diferentes dominios puede afectar a los resultados de la búsqueda, pero estamos haciendo todo lo posible para minimizar las consecuencias negativas de alojar contenido de Blogspot en varios dominios

Conociendo Blogger y como funciona ante los problemas, ya podéis imaginar lo que va a pasar... duplicatus habemus

Para los que tenemos dominio propio ya estamos redireccionando las url de Blogger hacia nuestros dominios por lo que estos cambios no deben afectarnos, pero ya sabéis...se trata de Blogger

Elimina el spam en Google Plus. Nuke Comments

Nuke Commentes es una extensión para Chrome que te añade un botón en los comentarios de tu stream de Google Plus que te permite eliminar y bloquear directamente el comentario y a su autor, con solo un click te realiza ambas acciones. #PorUnGooglePlusLimpio

Community Manager en Estados Unidos

Socialfresh ha realizado esta infografía sobre el estado de los community manager en Estados Unidos, basada en su informe anual sobre ellos, con algunos datos interesantes, evidentemente no hablamos del sueldo. Las mujeres dominan la profesión con un 65% frente al 35% de hombres que la ejercen, 2 de cada 3 community manager trabajan para una marca y más del 63% de ellos se pasan más de 30 horas semanales gestionando su comunidad.

Los datos de Megaupload se guardarán dos semanas mas

Ayer os comentábamos que esta semana podrían borrarse los datos que había en los servidores alquilado por Megaupload y que podrían afectar los datos personales de 50 millones de usuarios. Hace unas hora el abogado defensor de Megaupload ha emitido un tweet comentando que han llegado un acuerdo con la empresa que los aloja y permanecerán en los servidores dos semanas mas.

Recordemos que las autoridades estadounidenses ya no tienen ningún derecho sobre esos servidores una vez ejecutadas las órdenes que tenían y que la empresa dueña de los servidores puede perfectamente borrar esos datos.

La Teoría del Loco que podría estar planteando Google

Hace unos días leía un articulo en Cnet, titulado The Madman Theory, hablando sobre Google y sus últimos movimientos con su buscador, integrando Google Plus y descartando otras plataformas como Facebook o Twitter, lo que ha hecho que estas pusieran el grito en el cielo.

La teoría me ha parecido de lo más interesante, nadie puede afirmar que sea cierta pero no es descabellada, aunque vamos un poco mas allá en este articulo.

En Octubre de 1969, en plena guerra fría entre los Estados Unidos y Rusia, y con la guerra de Vietnam encima, Richard Nixon subió el estado de alerta de su país al máximo y ordeno que bombarderos cargados con bombas nucleares volaran alrededor de la frontera rusa. Este hecho quería dar la impresión que Estados Unidos estaba dispuesta a todo, que estaba gobernada por un ser irracional e impulsivo, nada mas lejos de la realidad.

Richard Nixon llamo a eso la "Teoría del Loco" (The Madman Theory), pretendía hacer creer a los rusos que estaban ante un "loco", capa de cualquier cosa, con el fin de asustarles y que obligasen a los norvietnamitas a sentarse a negociar, haciendo concesiones y poniendo fin a la guerra del Vietnam.

Todos sabemos como acabo esa guerra y que esa estratagema no funciono.

Si extrapolamos esta teoría a los últimos movimientos que ha realizado Google, desentendiéndose por completo de Facebook y Twitter a la hora de presentar su resultados en las búsquedas, favoreciendo descaradamente a su propia plataforma, Google Plus, podríamos estar presenciando una estratagema de Google muy parecida a la teoría del Loco con la pretensión de que Twitter y Facebook se sentaran a negociar con ella y tuviera una posición dominante en esa negociación.

De sobra es conocida las quejas de Google sobre que Facebook y Twitter no le dan los datos que necesitan para incluirlos en sus búsquedas, Facebook y Twitter lo niegan. Tal vez de lo que todos están hablando son sobre datos que permitan a Google conocernos a todos aun mejor, Facebook y Twitter podrían aventajar a Google en eso, entonces si se entendería esta "guerra" que se traen. Google tendría acceso a los datos pero no a TODOS los datos y sobre todo no tendría acceso a los datos que más le interesan lo de nuestros intereses en otras redes para completar nuestro perfil.

Google con esta medida drástica de excluirlos de sus resultados de búsquedas, les esta mandando un mensaje muy claro... soy capaz de todo.

Fellows. Generación automática de grupos en Facebook

*Actualización: Pagina no operativa

Crear grupos con tus amigos en Facebook es una tarea engorrosa, Fellows te genera automaticámente estos grupos basándose en sus relaciones. Solo debes autorizar la aplicación y ella sola te generara los grupos, a los que podrás valorar con estrellas de 1 a 4. Esta aplicación forma parte de un estudio sobre la comprensión de los mecanismos de formación de los grupos sociales.

Cupido volando por el blog

Pues ya empieza el mes del amor para algunos, digo para algunos porque para mí todos los meses son del amor... ¡puaf¡ qué cursi estuvo eso.

Bueno, el día de San Valentín, día de los enamorados, día del amor y la amistad, o como le quieran llamar, está próximo, así que una buena manera de decorar el blog en el mes del amor, es poner a volar a Cupido en el blog, con suerte y flecha a alguno de sus lectores o lectoras.

¿Que cómo se ve? En este blog de pruebas puedes ver a este pequeño personaje rondando por la página.

El script funciona en todos los navegadores menos en Internet Explorer (para variar), así que los usuarios de ese navegador no podrán verlo.

Para poner este Cupido volando por el blog entra en la Edición HTML de tu plantilla, y antes de </head>  pega este script.

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Cupido volando por el blog
* Script original de Virtual_Max
* Adaptado por ciudadblogger.com
***********************************************/
var vmin=1;
var vmax=5;
var vr=2;
var timer1;

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function Chip(chipname,width,height){
this.named=chipname;
this.vx=vmin+vmax*Math.random();
this.vy=vmin+vmax*Math.random();
this.w=width+20;
this.h=height;
this.xx=0;
this.yy=0;
this.timer1=null;}

function movechip(chipname){
if (document.getElementById){
eval("chip="+chipname);
if (window.innerWidth || window.opera){
pageX=window.pageXOffset;
pageW=window.innerWidth-40;
pageY=window.pageYOffset;
pageH=window.innerHeight-20;}

chip.xx=chip.xx+chip.vx;
chip.yy=chip.yy+chip.vy;
chip.vx+=vr*(Math.random()-0.5);
chip.vy+=vr*(Math.random()-0.5);
if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
if(chip.xx<=pageX){
chip.xx=pageX;
chip.vx=vmin+vmax*Math.random();}
if(chip.xx>=pageX+pageW-chip.w){
chip.xx=pageX+pageW-chip.w;
chip.vx=-vmin-vmax*Math.random();}
if(chip.yy<=pageY)
{chip.yy=pageY;
chip.vy=vmin+vmax*Math.random();}
if(chip.yy>=pageY+pageH-chip.h)
{chip.yy=pageY+pageH-chip.h;
chip.vy=-vmin-vmax*Math.random();}

document.getElementById(chip.named).style.left=chip.xx+"px";
document.getElementById(chip.named).style.top=chip.yy+"px";
chip.timer1=setTimeout("movechip('"+chip.named+"')",100);}}

function pagestart(){
CupidoVolando=new Chip("CupidoVolando",147,168);
movechip("CupidoVolando");}

if (window.addEventListener)
window.addEventListener("load", pagestart, false)
else if (window.attachEvent)
window.attachEvent("onload", pagestart)
else if (document.getElementById)
window.onload=pagestart
//]]>
</script>

Luego, antes de </body> agrega este código.

<!-- Cupido volando -->
<div id='CupidoVolando' style='position:absolute; z-index:80; left: -500px;'>
<img border='0' src='URL de la imagen'/></div>
<!-- Cupido volando -->

En donde se indica pon la URL de la imagen del Cupido que más te guste. Aquí hay seis imágenes de dónde escoger.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhShl4Qqr5MOavMVNQEFONk2lfv02oX3b2dLs5SHQnil9ec88xpPcwE7DHRVonX8l82HEaepA25Xh_E1PYflRUFZJ87fMPacTT1YmkJT7HpQbTjd_ua6YPU2RviJMnf9pVjweZNsQ-tkW8/s107/Cupido01.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM3nwSiy9lO5fvlFG-dfFiirqlAystWHouWA1yDG2rGE6-5vf6P8f6BktIgSEyEv1lCOHlUOU25_g-5_FcAjusAxcm1uD_fwrqOA56a-RZOK71tjPRZ-8ZpNMccbNbrM7HyznHQmCprSs/s108/Cupido02.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-dczvot8f3bqzThWy9RybRLECgcXnSeSvO94mfMkW3IWKiAOhfa6VASHqvP08sGIeIT_QbiRh7h2gA-xoDPKcm1xsFrr5fB_Riwc6L6K0Bg7PSwwvF0zr5lM0X2O_yndf47l29hD5XF8/s160/Cupido03.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTRtcg5K4_oy36vXmaytGbQHBFoeHIVX9U_KagLUT3_ZkLYPgJprikPCKBuME5VdQZ9korSCWEpoz2zkVnJkhs2TT3XKMTi3EAMnvcbFFHSSJ8LHyKEq_zIv0DfCeR41Aub3m2zkb9q5s/s83/Cupido04.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJzyJY4RmvEcZrNLBC5kRX5flrNlST5lQctWHXe-FavYhV2o9kSoPGFilukfSR70cTyWL9EF5GbZlK_vYtMTSToegkGCqGiUyNvnwxUs0vBAcMfru9X42gvCxgjP2seDeZ7HkpSQEprY/s169/Cupido05.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMXRbnxfhHLsx41ysfcV_eVyyNkqvb18isH_L8TVxMzmygAxlplmbDQYEdm74UEVTXwNbFz2TPrR14dBoC2M8I4fUF0UB5fGoLvCLyeYYpXD-6qmJRsRzVPVHk1oEisYb5dEiHQNeJxQ/s91/Cupido06.gif

Habiendo puesto la URL de la imagen guarda los cambios y listo, tendrás el blog listo para recibir el día de San Valentín.

Dos sets de íconos de redes sociales

Aquí les dejo dos packs de íconos de redes sociales. Disfrútenlos!

TAKEOUT COFFEE CUP ICONS

Contiene 10 íconos de redes sociales: facebook, twitter, google+, rss, flickr, yahoo, deviantart, dribble, digg y delicious.
Autor : Land of web
Formato: PNG.
Tamaño: 512x512px, 256x256, 128x128, 64x64, 32x32.

Descargar

COFFEE PAGES ICONS

Contiene 6 íconos de redes sociales: facebook, twitter, technorati , rss, yahoo, y youtube.
Autor : Alenet21tutos
Formato: PNG, ICO.
Tamaño: 128x128.

Descargar

Facebook ha creado una aplicación para ayudarte a modificar tu timeline

Facebook en colaboración con Definition6 ha creado Timeline Movie Maker, una aplicación que te muestra un video de como ve Facebook tu timeline. Además de autorizar la aplicación para usarla debes tener ya el nuevo timeline de Facebook y más de 75 fotos compartidas en tu perfil personal.

Una vez autorizada y cumplidas las exigencias anteriores podrás ver en video tu timeline según Facebook, el que se mostrara en tu perfil, la aplicación te permitirá elegir que fotos quieres incluir y cuales quieres suprimir.

La industria del entretenimiento creció un 50 por ciento en la última decada

Llevamos años oyendo que la piratería esta matando a la industria del entretenimiento, algunos estudios vienen a demostrar lo contrario. GigaOm acaba de publicar esta infografía basas en este informe que detalla como han seguido creciendo y generando beneficios en estos diez últimos años.

Según Google, los smartphones son mas usados que los ordenadores en algunos países

Google publicó ayer un estudio sobre el uso de Smartphones en Francia, Alemania, Reino Unido, Estados Unidos y Japón durante 2011. El número de encuestados es de 2.000 personas por país, 10 000 personas en total, todas mayores de 18 años.

El estudio nos muestra como son utilizados por delante de tabletas y otros dispositivos multimedia, en algunos casos se usan más que los ordenadores. Reino Unido es el país con la mayor proporción de personas con un teléfono inteligente, un 45%, seguidas de Francia y Estados Unidos con un 38% de los encuestados, siendo Japón el país donde menos se usan con solo un 17% debido a que allí disponen de teléfonos que no podemos considerar dentro de la categoría de "inteligentes" pero que disponen de características avanzadas que les permiten contenidos multimedia.

También se puede observar que el aumento del número de propietarios de teléfonos inteligentes no parece afectar el uso de ordenadores, Internet móvil no sustituye a la computadora, actúa como un complemento, pero su uso es mayor en algunos países.

El informe esta disponible aquí.

Los datos guardados en los servidores de Megaupload podrián ser borrados esta semana

Según leemos en CBS, los datos que se guardan en los servidores que Megaupload tenia alquilados podrían ser borrados esta semana. Dado que desde la intervención de Megaupload, además de los detenidos, se bloquearon todas las cuentas que la empresa tenia, esta no puede hacer frente a los alquilares de los servidores, lo que posibilitaría la eliminación legal de los datos.

Según explican, los datos de mas de 50 millones de usuarios están en peligro de ser borrados debido además que desde la ejecución de la orden de detención y bloqueo sobre Megaupload, el FBI no puede acceder físicamente a los mismos ahora que las órdenes de búsquedas originales se han ejecutado, legalmente no es posible.

Se da el caso que son los propios abogados defensores de Megaupload los mas interesados en que estos datos no se borren, han intentando comunicarse con la fiscalía y las empresas que alojan estos servidores sin obtener respuesta por el momento.

Para los que tenían alojados archivos personales en Megaupload, se da la incongruencia de que desde fuentes del gobierno estadounidense se comenta que ahora que se han ejecutado las ordenes, ellos ya no tienen responsabilidad sobre esos datos y recomiendan dirigirse a las compañías que alquilaban estos servidores para recuperarlos.

En definitiva, no creemos que se vayan a borrar los datos pero el hecho es que si lo hacen seria legal, ya se sabía que iba a ser muy difícil recuperar los datos personales pero esto además les ofrece una escusa legal para no facilitarlos...

Ventanas flotantes sencillas con jQuery

Una forma muy simple de usar la librería jQuery para generar un caja flotante que se desplaza a medida que hacemos scroll sobre la página.

El HTML conviene ponerlo antes de </body> porque lo vamos a posicionar de manera absoluta así que debe estar fuera de cualquier otro contenedor que tenga la propiedad position:relative y dentro de ese DIV agregaremos cualquier cosa, en este caso, enlaces con íconos:

<div id="caja_flotante">
  <div id="cont_caja_flotante">
    <a href="#"><img src="URL_IMAGEN_1" /></a>
    <a href="#"><img src="URL_IMAGEN_2" /></a>
    <a href="#"><img src="URL_IMAGEN_3" /></a>
  </div>
</div>

Y las reglas de estilo que ponemos antes de &/head>:

<style>
#caja_flotante{
  left: 0; /* o le damos un valor para separarlo del borde izquierdo de la ventana */
  position: absolute;
  top: 0;  /* o le damos un valor para separarlo del borde superior de la ventana */
  width: ANCHOpx; /* definimos su ancho */
  /* cualquier otra propiedad gráfica como background, border, etc */
}
</style>

Y por debajo de eso, el script:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  var posicion = $("#caja_flotante").offset();
  var margenSuperior = 15;
  $(window).scroll(function() {
    if ($(window).scrollTop() > posicion.top) {
      $("#caja_flotante").stop().animate({
        marginTop: $(window).scrollTop() - posicion.top + margenSuperior
      });
    } else {
      $("#caja_flotante").stop().animate({
        marginTop: 0
      });
    };
  });
});
//]]>
</script>

El ejemplo online puede verse en esta página donde, en lugar de posicionarlo a la izquierda de la ventana del navegador, lo he ubicado a la izquierda del DIV contenedor del blog que en este caso es #outer-wrapper y como sé que mide 600 pixeles de ancho, la imagen se coloca en el centro de la pantalla y luego, se la desplaza hacia un lado, un poco más que la mitad del ancho de ese contenedor:

<style>
#caja_flotante{
  left: 50%;
  margin-left: -370px;
  position: absolute;
  top: 50px; 
  width: 64px;
}
</style>

REFERENCIAS:webintenta.com

Ganadores de La Semana de los Dominios 2012

Después de siete días de mucha competencia y participación de muchos seguidores de este blog, terminó La Semana de los Dominios, una semana que ha dejado a siete bloggers con un dominio nuevo, pero además fue una semana en la que muchos hicieron nuevos amigos, presentaron sus blogs a otros usuarios, intercambiaron enlaces y sobre todo pasamos un buen rato con los comentarios tan ingeniosos que tienen :)

Y ya que terminó el concurso, aquí están los siete ganadores de la semana, cada uno de ellos se ha ganado un dominio por un año, y si no me equivoco ya la mayoría lo está estrenando.

Los ganadores de La Semana de los Dominios son:

1. Sergio Molina ganó en Twitter mencionando el nombre de los co-fundadores de Blogger.
2. Jordan Daniel Alvarez ganó en Facebook adivinando la frase de la imagen.
3. Daniel García ganó en el blog identificando las diferencias de las imágenes.
4. Salvador Muñoz ganó en el blog respondiendo una pregunta de historia.
5. Norberto Briones ganó en Facebook encontrando en el código fuente una frase escondida.
6. Israel Hernandez ganó en Facebook adivinando el sonido del video.
7. David S. Mercado ganó en Twitter respondiendo una pregunta acerca de Google.

Felicidades a los ganadores y mil gracias de verdad por la respuesta siempre tan positiva y participativa de todos ustedes. Ojalá que no tengamos que esperar hasta el próximo año para crear otra Semana de los Dominios más, así que en cuanto la economía lo permita estaremos regalando más dominios para todos ustedes con el único objetivo de echarles una pequeña ayudadita con el proyecto de su blog.

¡Hasta la próxima!

Comunicación fail community manager

Muchos errores son debido a esto...

Otros tres packs de íconos sociales

Social stamps
	Contiene 108 íconos de 16x16, 32x32, 64x64 y 128x128, en formato PNG. descargar

Social media icons by simpo-jo
	Contiene 16 íconos de 240x284, en formato PNG. descargar

Vintage icon set for bloggers
	Contiene 35 íconos de 128x128 y 256x256, en formato PNG. descargar

Imagen que aparece con efecto deslizante

En Dinamic Drive nos muestran una animación de fotogramas con CSS3.

El efecto muestra el deslizamiento de una imagen que permanece oculta y se sitúa sobre la imagen que visualizamos. En IE8 y IE9 también funciona, aunque no queda tan conseguido el efecto deslizante.

Como son efectos que la mayoría de veces los añadimos esporadicamente lo que haremos para probarlo es incluir todo el código necesario justo donde deseamos mostrar el efecto, ya sea una entrada o un gadget de HTML.

Primero añadimos el código para las imágenes, y ahí mismo especificamos el tamaño de la primera imagen.

(No es necesario añadir los dos ejemplos, son como referencia para añadir el tamaño de la que será la primera imagen)

A continuación de las imágenes copiamos y pegamos los estilos:

<style>
.pulloutimage{
position: relative;
}

.pulloutimage img{
position: absolute; /* absolute position and stack images inside container */
left: 0;
/* aquí estilos para el borde de la primera imagen */
}

.pulloutimage img.ondemand{ /*CSS for image shown on demand */
opacity: 0;
visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}

.pulloutimage img.original{
z-index: 1; /* set base z-index of initially shown image */
}

@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
0%{ /* Start of animation */
z-index: -1;
opacity: 0;
}
50%{ /* Half way point, move image to right edge of container */
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{ /* 51% point, stack animating image on top of original image */
z-index: 2;
}
100%{ /* Final point, move animating image back so it's on top of original */
left: 0;
box-shadow: 8px 8px 15px gray;
}
}

@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}

.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
-webkit-animation-name:revealfromright; /* specify animation keyframe */
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;

-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;

-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;

animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;

visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;/* esto es la sombra */
z-index:2;
/* aquí estilos para el borde de la segunda imagen */
}

.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
opacity:0.5;
}

</style>

- En los estilos está marcado el lugar que podemos modificar si deseamos añadir algún tipo de borde a las imágenes.

- La sombra que muestra la segunda imagen la podemos quitar eliminando la línea con la propiedad box-shadow.

Mostrar las publicaciones de Google+ en el blog

Google+ Widget es un gadget que te permite mostrar la actividad más reciente de tus publicaciones de Google Plus, en el blog.

El gadget se obtiene y configura desde la página de los desarrolladores, y aunque la página está en inglés es muy intuitiva.

Para conseguir este gadget primero vamos a conseguir nuestro ID de Google+, para ello, entra a Google+ y haz click en el ícono de tu Perfil.

En la barra de direcciones verás la URL de tu perfil, ahí encontrarás una serie de números, esa es tu ID. Si lo quieres para una página de Google+ sólo entra a tu página y también verás en la URL el ID de tu página.

Ahora necesitarás conseguir una API de Google+, esto es porque la API de los desarrolladores está saturada, así que teniendo la tuya asegurarás que el gadget no tenga problemas de tráfico. Para conseguir tu API ingresa a Google Apis, da click en Create Project y luego en el menú izquierdo haz click en Services.
Busca donde diga Google+ API, cambia el botón off por on, y acepta los términos y condiciones.
De nuevo en el menú izquierdo da click en Api Access, ahí obtendrás una serie de caracteres como esta, esa es tu API key.

Teniendo ya tu ID de Google+ y tu API, entra a la página de Google+ Widget, ahí te encontrarás con estas dos primeras opciones:

En el primer recuadro verde debes poner tu ID de Google, y en el segundo tu API que acabas de conseguir.
Abajo verás las opciones para personalizarlo.

El primero es el número de publicaciones que se mostrarán; en la primera columna encontrarás los colores para el fondo, el borde, enlaces, el texto, así como si se mostrará la cabecera o no.

En la segunda columna está la distancia entre el contenido y el borde, si se usará borde redondeado (border radius), el ancho, si mostrará favicones, footer, y si se trata de una página de Google+.

Una vez que lo has personalizado, da click en Show you widget, y podrás ver cómo ha quedado tu gadget, y debajo el código para ponerlo en tu blog. Sólo pega ese código en un elemento HTML/Javascript y listo.

En el caso de que lo hayas configurado para mostrar las publicaciones de tu página de Google+ entonces el código estará en dos partes, la primera es algo como esto:

<link href="https://plus.google.com/XXXXXXXXXXXXXXXXXX" rel="publisher"/>

Ese va después de <head>, y el resto del código va dentro del gadget HTML/Javascript.

Así de fácil y rápido puedes tener tu gadget de últimas publicaciones de Google Plus personalizado y bastante práctico, para que tus lectores sepan qué publicas en la red social de Google, y también puedan añadirte a sus círculos.

No confundamos libertad con ilegalidad

Llevamos meses donde los temas predominantes en la red son SOPA, P.I.P.A, ACTA, Megaupload y ahora Twitter, una pseudo guerra en línea en contra de los recortes de libertad en la red donde todos los días se nos llama a participar en ella.


Lo peor de todo esto es la desinformación general que existe, a los usuarios de la red se les comienza a decir que les van a recortar sus derechos y ya no leen ni oyen mas allá de eso, aquí se mezclan las churras y las merinas, se meten todas en un saco y se nos piden que ataquemos cualquier sitio, que dejemos de twittear, que firmemos este o aquel manifiesto, etc.

La viñeta satírica

Parece que Internet tal y como lo conocemos se va a acabar, y si se va a acabar pero no debemos confundir libertad con ilegalidad, ahí es donde esta el problema ¿queremos una red libre? o ¿una red alegal o ilegal? No estamos distinguiendo entre libertad e ilegalidad.

Al mezclar todas las cosas que están sucediendo hemos dejado de ser objetivos, unas veces por no estar informados, otras porque nos desinforman y otras porque no nos interesan. Todos queremos seguir viendo contenidos que violan derechos de autor, no queremos censuras, no queremos que eliminen contenidos, etc. Pero todos ponemos el grito en el cielo si alguien nos copia nuestro contenidos, todos borramos comentarios si los consideramos ofensivos o si son spam, etc. Nuestra doble moral es evidente.

Antes de montar una pseudo ciberguerra, es muy fácil hacer una "guerra" desde el sofá de nuestras casas, deberíamos distinguir claramente entre libertad e ilegalidad, la mayoría de las cosas que están ocurriendo van en contra de contenidos ilegales, otras sin embargo si van a suponer, no recortes, pero si un mayor control sobre lo que ocurre en la red y no nos engañemos, ese control lo tienen desde siempre, solo que ahora lo van a poner negro sobre blanco.

Estamos inmersos en una guerra de intereses, gobiernos, empresas y particulares solo miran por el bien propio y no el general, y en estos casos siempre pierden los particulares, es decir los usuarios. Internet va a ser regulada, queramos o no queramos, se tardara mas o menos años pero lo será, a los gobierno y empresas les interesa tener el control de la red, lo tienen y lo tendrán.

Otra cosa seria luchar contra monopolios, precios abusivos, cánones y demás... ahí es donde radican nuestros problemas y donde deberíamos realmente organizarnos y emprender acciones, todo lo demás... no sirve para nada.

Agregar un enlace que dirija al post en cada elemento de las entradas populares

Cuando elegimos la opción de mostrar las entradas populares con la imagen miniatura y el título, pudiera dar la impresión de que le falta algo, ¿no?,  mmm, tal vez lo veas y pienses -no sé no me convence-, esto puede deberse a que vemos un espacio muy grande vacío debajo del título, esa es la percepción visual, por otro lado, está la facilidad para ir al artículo, aunque de manera intuitiva sabemos que el título o la imagen miniatura nos dirigirá al post, esto no es muy evidente...

Pensando en eso, podemos agregar un enlace para que debajo de cada título aparezca un enlace al artículo o post. En la plantilla Cocinando con Adela, hice esto, de ese modo se puede acceder al artículo si hacemos click sobre dicho enlace, al igual  que con el título del artículo o post.



Pero, ¿cómo hacer eso?, bueno, hoy te diré paso a paso cómo hacerlo ;)



Paso 1. Necesitas configurar las entradas populares para que éstas muestren la imagen miniatura en adición al título que siempre se muestra:

Paso 2. Ve a la edición de HTML de la plantilla, marca la casilla de expandir plantillas de artilugios, y luego, identifica el siguiente código:



 <!-- (3) Show only thumbnails -->

            <div class='item-thumbnail-only'>

              <b:if cond='data:post.thumbnail'>

                <div class='item-thumbnail'>

                  <a expr:href='data:post.href' target='_blank'>

                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

                  </a>

                </div>

              </b:if>

              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            </div>

            <div style='clear: both;'/>

          <b:else/>



Luego, sustituyes la parte que resalté de rojo por esto:

  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a><a class='verpopu' expr:href='data:post.href'><span><br/>Ver Artículo&#187; </span></a></div>

Si quieres, puedes cambiar el texto del enlace "Ver Artículo" por el que quieras.



Paso 3. Verificas en vista previa y si todo luce bien guarda los cambios.



Paso 4. Ahora lo que falta es darle un poco de estilo al enlace y lo hacemos con CSS, entonces vamos a Plantilla > Personalizar > Avanzado > Añadir CSS y lo agregamos, editando los colores, poniendo otras propiedades, etc...

.item-title a.verpopu span {

color:#d5aa00;/*color del texto*/

}

.item-title a.verpopu span:hover {

color:#738931;/*color del texto hover*/

text-decoration:underline;/*subrayado*/

}

En color ponemos el color del texto, y con text-decoration:underline, hacemos que se subraye el texto al poner el puntero del ratón sobre el enlace.



Paso 5. Guarda los cambios en "Aplicar al blog" y listo, ahora tendrás un enlace visible en las entradas populares que te dirigirá a cada post respectivamente.

Retransmite eventos en directo desde tu teléfono móvil

Hace pocos días Evaristo Nogales me descubrió un streaming que había realizado en Fitur, a través de Ustream, con su iPad. Eso me hizo conocer esa posibilidad que te da Ustream para emitir eventos en directo desde tu teléfono móvil. Ustream tiene una aplicación tanto para Android como para iOS que te permite realizarlo de forma sencilla y de calidad bastante buena, sin ir mas lejos ayer la retransmisión de #TandT se hizo desde un iPhone.

Barra flotante en el top para agregar cualquier gadget (1)

A petición de José y otros que me han comentado lo mismo, vamos a ver cómo crear una barra flotante en el top con secciones, para agregar ahí cualquier gadget.



La apariencia de la barra es estilo minimalista y nos recuerda al estilo actual de los productos de Google!. En ésta podrás colocar cualquier gadget, en el ejemplo voy a poner un menú usando la lista de enlaces de Blogger y un buscador que agregaré usando un gadget con la opción de HTML/Javascript.



Creando las secciones, podrás agregar enlaces fácilmente, sin necesidad de ingresar de nuevo a la edición de HTML de la plantilla, o también poner ahí cualquier otra cosa fácilmente desde Diseño, en la nueva interfaz.



Para el menú vamos a usar el CSS que usábamos anteriormente para los enlaces de navegación de Blogger estilo YouTube, y para el buscador, usaremos uno minimalista que me encanta y que ya antes había explicado Gema como agregarlo.



La barra la puedes ver a continuación en la siguiente imagen, y para verla en acción en el blog de demostración:

Demostración

Ahora veamos cómo hacerla:



Paso 1. Primero agregamos los estilos o CSS, yendo a Plantilla > Diseñador de plantillas > Avanzado > Añadir CSS,  y lo ponemos en el campo:

/*Barra fija en el top*/

#top-fijo{

width:100%;

height:55px;

margin:0 auto;

padding:0;

position:fixed;

left:0;

top:0;

z-index:20;

background:#f2f2f2;

border-bottom:1px solid #ebe8e8;

overflow:hidden;

}

#top { /*el contenedor que centrará el contenido de los gadgets*/

width:980px;

margin:5px auto;

height:50px;

text-align: left;

}

* html #top-fijo {/*IE6*/

position:absolute;

top:0;

left:0;

}

/*Estilos de la lista de enlaces*/

#LinkList1 ul {

width:650px; /*ancho del menú*/

height:45px;

float:left;

margin: 8px 0 0 0;

clear:both;

}

#LinkList1 ul li{

list-style:none;

float:left;

margin:0 0 0 10px;

}

#LinkList1 li a{

display:inline-block;

border:1px solid #DDD;

border-radius:3px;

text-shadow:0 1px 1px #fff;

text-decoration:none;

font: bold 11px Sans-Serif;

padding:6px 10px;

white-space:nowrap;

vertical-align:middle;

color: #666;

background: transparent;

}

#LinkList1 li a:hover, #Linklist1 li a:focus {

border-color: #999;

background: -webkit-linear-gradient(top, white, #E0E0E0);

background: -moz-linear-gradient(top, white, #E0E0E0);

background: -ms-linear-gradient(top, white, #E0E0E0);

background: -o-linear-gradient(top, white, #E0E0E0);

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

-moz-box-shadow:0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;

}

#LinkList1 li a:active {

border: 1px solid #AAA;

border-bottom-color: #CCC;

border-top-color: #999;

-webkit-box-shadow: inset 0 1px 2px #aaa;

-moz-box-shadow:inset 0 1px 2px #aaa;

box-shadow:inset 0 1px 2px #aaa;

background:-webkit-linear-gradient(top, #E6E6E6, gainsboro);

background:-moz-linear-gradient(top, #E6E6E6, gainsboro);

background:-ms-linear-gradient(top, #E6E6E6, gainsboro);

background:-o-linear-gradient(top, #E6E6E6, gainsboro);

}

/*Estilos del Buscador*/

.buscador{

background:#fcfcfc;

border:1px solid #e6e4e4;

width:225px;

height:27px;

margin-top:9px;

padding-left:4px;

color:#919191;

line-height:28px;

cursor:pointer;

}

Paso 2. Guarda lo que agregaste en "Aplicar al blog".



Paso 3. Ve a la edición de HTML de la plantilla, y con la ayuda de Crtl F, buscas <body>, en la nuevas plantillas viene así: <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>, inmediatamente después agregas esto:

<div id='top-fijo'>

<div id='top'>

  <div id='top-left' style='width:69%; float:left;'>

   <b:section id='top-l'>

</b:section>

    </div>

<div id='top-r' style='width:29%; float:right;'>

    <b:section id='top-2'>

</b:section>

 </div><div style='clear: both'/>

</div>

   </div>

Paso 4. Verifica en vista previa, ahora podrás ver la barra, aunque sin ningún elemento; si todo luce bien guarda los cambios.



Paso 5. Ahora falta agregar los gadgets y para ello vas a Diseño (en la nueva interfaz), e identifica las secciones que creaste, que se verán así:

Paso 6. En la sección de la izquierda, agregas el Gadget de "Lista de Enlaces", escribiendo ahí todos los enlaces que quieras poner, no le pongas ningún título...

 Paso 7. Ahora vas a agregar el código HTML del Buscador en la sección de la derecha, solo editarás lo resaltado de rojo, escribiendo el nombre de tu blog...

<form action="http://search.blogger.com/"

name="b-search"><input value="miblog.blogspot.com/" name="bl_url" type="hidden"/>

<input class="buscador" onfocus="if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;" value="Buscar..." name="as_q" onblur="if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;" type="text"/>

</form>

Paso 8. Hecho esto, guarda los cambios en Guardar disposición (en la nueva interfaz).





Listo, ya tienes una barra flotante con un menú y un buscador ;)



Notas:

• El CSS está especificado pensando en que es tu primera lista de enlaces, si es la segunda o tercera habrá que cambiar los ID's, blogger las va numerando de forma sucesiva: LinkList1, LinkList2...


• Esto funciona bien en todos los navegadores, en el caso de los botones, hay algunas pequeñas diferencias en la apariencia en versiones anteriores de IE8 (los efectos y redondes) que no es para  preocuparse puesto que la esquinas redondeadas son muy sutiles.


• En IE6 la barra no flotará aunque todo luce igual  (excepto esquinas redondeadas en los enlaces) y no supone ningún problema estético.


• En el ancho (width) del  #top tendrás que tomar en cuenta el ancho de tu plantilla, y no debería ser mayor.