Google Panda al ataque

Desde que Google cambió el algoritmo que establece la forma en que se muestran los resultados en su buscador, se ha producido un revolución en muchos sitios ya que eso ha significado que sus páginas aparezcan en posiciones menos privilegiadas y por lo tanto, la cantidad de visitas se ha reducido de manera significativa, con caídas que muchas veces, superan el 50%.

Este nuevo sistema, llamado Google Panda, hace tiempo que ya estaba en funcionamiento pero sólo en idioma inglés; sin embargo, a partir del 12 de agosto, se ha extendido a todos los idiomas.

La explicación de Google, siempre excitado con la imagen que le devuelve su propio espejo, es que quieren ofrecer mejores resultados cuando alguien busca algún tipo de información y privilegiar los contenidos originales sobre las copias pero ... el resultado final es más que dudoso. Google Panda dice premiar a sitios con contenido original, integrado a redes sociales y poca publicidad; Google Panda dice penalizar el contenido copiado, los artículos con escasa información pero esta imagen hurtada del Foro de SpamLoco lo desmiente; tal como se ve, el artículo original no es el primero sino ¡el séptimo!

Seguramente, algo similar nos debe estar pasando a cualquiera de nosotros; no hablo de personas que deben mantener un blog ya que tal vez, no han sido afectados sino de personas que usan el buscador y sin duda, habrán notado que los resultados que se muestran tienden a ser ... raros.

La verdad, las recomendaciones de Google para construir sitios de alta calidad son ... incalificables; como todos los consejos genéricos, son abstractos, discutibles y, en lo personal, van a contrapelo de lo que yo entiendo que debería ser internet. Hablan de "importancia", de "autoridad" pero ¿quién define la importancia o establece la autoridad? Hablan mucho de "originalidad" y si fuera sarcástico, me preguntaría: ¿Google eliminará de sus resultados las alevosas copias que ellos mismos hacen de otros servicios?

Algo que dicen es clarito: "Por supuesto, no vamos a develar los auténticos indicadores que usamos para la clasificación en nuestros algoritmos porque no queremos que nadie juegue con los resultados de las búsquedas" lo que traducido al español significa que, al no ser públicas, al carecer de controles independientes, son reglas tan arbitrarias como ellos quieran y simplemente, nos piden que confiemos en su bondad, su sabiduría y su buena fe cosa que, obviamente, cualquier sociedad civilizada debería repudiar; no porque uno dude (yo dudo) sino porque en ciertos casos, no solo se debe ser sino también parecer y la no regulación de cualquier tipo de monopolio sólo lleva al desastre.

Un reciente artículo de Ayuda Wordperss intenta ayudar a entender los problemas prácticos o por lo menos, hecha algo de luz sobre lo que es y lo que debería ser. Dice: "parece ser que está valorando de manera excesiva el ratio de rebote, el tiempo de permanencia en el sitio y la marca del sitio", de allí que frente a cualquier búsqueda, suelen verse muchos resultados de Wikipedia, YouTube, ¡¡¡Taringa!!!! o sitios "grandes" en detrimento de sitios "pequeños". No sería extraño, es el resultado lógico de la concentración

¿Qué puede hacerse si un sitio se ve afectado por esta "mejora"? Insultar, rezar, pero, también se pueden tener en cuanta algunas ideas expresadas en el articulo al que me refería y que trataré de resumir en lo que considero que puede ser aplicado de modo genérico, sin importar el servicio o tipo de sitio que uno tenga:

• crear contenido original, indicar las fuente y evitar las copias


• evitar los artículos cortos que aporten poco más allá de un enlace a la fuente original


• usar siempre texto alternativo (ALT) para las imágenes


• incitar a la lectura completa de las entradas


• añadir contenido que fomente la permanencia en el sitio


• facilita que los lectores compartan las entradas en redes sociales


• eliminar la publicidad excesiva


• revisar los enlaces rotos


• fomentar el debate en los comentarios siempre que estos sean relevantes


• reducir la cantidad de categorías o etiquetas


• evitar que se indexen las páginas secundarias, Archivos, Etiquetas, Búsquedas, etc.

REFERENCIAS:Recopilación de artículos sobre Google Panda para aprender más

Nuevo look en Blogger: ya está displonible la nueva interfaz desde tu escritorio

Ingresé a Blogger, y me encontré con la novedad de que ya puedo acceder a la nueva interfaz, simplemente seleccionando la opción que te presenta, desde el escritorio:

No dude en seleccionarla y ahora mismo estoy escribiendo en la nueva interfaz!; luego busqué la noticia, para saber si ya era oficial, y desde su blog, en Blogger Buzz ya han publicado la noticia.



Me encontré que el color de la fuente es más obscura que antes, y han agregado más contrastes coloreando algunos botones clave, por ejemplo, en el caso del botón de nueva entrada, que ahora es color naranja,  lo cual es algo positivo, ya que anteriormente se veía plana esa sección del escritorio y se leía con dificultad, sobre todo si usabas mucha luz en la computadora.



También,  hubo algunos cambios en Plantilla, ahora la ubicación de la edición de HTML está arriba, antes estaba muy al fondo por cierto, y conservó el mismo nombre,  cosa que habían cambiado a: "Editar Plantilla", cuando estaba en periodo de prueba en Blogger in Draft.

Esta interfaz trae muchas novedades por ejemplo, puedes previsualizar como se verá tu blog al usar cada una de las plantillas disponibles, en una sección nueva que incluye todas las plantillas,  para luego seleccionar la que mas te guste:

Si vas a Páginas, verás que puedes agregar otros enlaces de forma sencilla y rápida, cosa que antes solo podías hacer si hibas a la edición de HTML de la plantilla, y con la desventaja de que no conservaba los estilos del enlace seleccionado:

Como ya les había mencionado antes, Blogger ofrece una opción en donde puedes enviar tus comentarios sobre tu impresión de la nueva interfaz, si haces click en el icono de engranaje que está en el extremo superior derecho desde tu escritorio por ejemplo:

Hay mucho por ver, explorar y probar definitivamente, ya habrá tiempo para eso, por lo pronto me quedo con una buena impresión, de esta nueva interfaz de Blogger y agradezco los cambios que se hicieron desde que estuvo en periodo de prueba en blogger in draft.



Bueno solo falta que tu empieces a usarla y me cuentes todas tus impresiones :).

Personalizar el texto de los comentarios eliminados en Blogger

Existen 2 formas de eliminar comentarios, la de suprimir, y la de suprimir permanentemente. La primera sólo elimina el contenido y a su vez deja el espacio, mientras que la segunda elimina tanto el comentario como el espacio.

En este tutorial mostraré una sencilla forma de personalizar el mensaje que se encuentra cuando sólo eliminamos el contenido, veremos cómo cambiar tanto el texto como el estilo de estos.

Texto por defecto.

El tutorial:

Paso 1: Cambiando el texto por defecto por uno personalizado:

En ''Diseño | Edición HTML'' marcaremos ''Expandir plantillas de artilugios''. Buscaremos el siguiente código:

<span class='deleted-comment'><data:comment.body/></span>

Reemplazaremos el código destacado por algún otro mensaje, veamos un ejemplo:

<span class='deleted-comment'>Comentario eliminado, no se acepta spam o mal lenguaje</span>

Guarda los cambios y listo.

Paso 2: Personalizando el texto:

Ahora deberás buscar la siguiente línea en tu plantilla:

.deleted-comment {

Debajo deberás crear todos los atributos que deseemos, si no encuentras la línea, puedes crearla antes de ]]></b:skin> de la siguiente forma:

.deleted-comment {
acá irán los atributos;
}

Dejo un ejemplo preformateado para los que quieran algo un poco mas sencillo y no se calienten la cabeza buscando valores:

.deleted-comment {
font-size:14px; /*Tamaño de la fuente del mensaje*/
margin:0px auto; /*Centra el contenido*/
font-style:italic; /*Texto en cursiva*/
color: orange; /*Color del texto*/
text-shadow: 2px 2px 2px #969696; /*Sombras*/
}

Gadget multipestañas para Blogger

En este tutorial mostraré una forma de usar algo de javascript y CSS para crear un gadget con pestañas múltiples en Blogger.

He visto esto en infinidades de blogs y en lo personal me encanta ya que ahorra mucho espacio en la sidebar.


El resultado es muy similar a este:

Pestaña 1Pestaña 2Pestaña 3

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut odio. Nam sed est. Nam a risus et est iaculis adipiscing. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer ut justo. In tincidunt viverra nisl. Donec dictum malesuada magna. Curabitur id nibh auctor tellus adipiscing pharetra. Fusce vel justo non orci semper feugiat. Cras eu leo at purus ultrices tristique.

Lo he conseguido hacer con CSS y Javascript, por lo que no son necesarias otras librerías para hacerlo funcionar.

Tutorial:

Recomiendo encarecidamente que prestes mucha atención para que entiendas un poco el mecanismo del gadget.

Paso 1: Añadiendo el script:


En ''Diseño | Edición HTML'' deberás buscar el siguiente código:

</head>

Arriba de este deberás pegar el siguiente:

<script type="text/javascript">

function eventoprimerapestaña()

/* Este función permite darle el evento a la primera pestaña*/
{
document.getElementById('pestaña-uno').style.display='block';
document.getElementById('pestaña-dos').style.display='none';
document.getElementById('pestaña-tres').style.display='none';
document.getElementById('boton-pestaña1').style.background='#CC3300';
document.getElementById('boton-pestaña2').style.background='#FF9966';
document.getElementById('boton-pestaña3').style.background='#FF9966';
}

function eventosegundapestaña()

/* Este función permite darle el evento a la segunda pestaña*/
{
document.getElementById('pestaña-uno').style.display='none';
document.getElementById('boton-pestaña1').style.background='#FF9966';
document.getElementById('boton-pestaña2').style.background='#CC3300';
document.getElementById('boton-pestaña3').style.background='#FF9966'; document.getElementById('pestaña-dos').style.display='block';
document.getElementById('pestaña-tres').style.display='none';

}

function eventotercerapestaña()

/* Este función permite darle el evento a la tercera pestaña*/
{
document.getElementById('pestaña-uno').style.display='none';
document.getElementById('pestaña-tres').style.display='block';
document.getElementById('boton-pestaña1').style.background='#FF9966';
document.getElementById('boton-pestaña2').style.background='#FF9966';
document.getElementById('boton-pestaña3').style.background='#CC3300'; document.getElementById('pestaña-dos').style.display='none';
}

</script>

Explicación del código:

• Como es posible apreciar, cada valor de color azul define distintos atributos que tendrán cada enlace (Cada pestaña del gadget).


• Para que el gadget oculte cada pestaña, se le ha asignado el valor display a distintas zonas, al presionar se ocultan 2 pestañas y a la vez se muestra la correspondiente a la función que se ha establecido.


• Los valores background corresponden a los colores de cada botón, al presionar en cada uno de ellos permite que se muestre la pestaña activa como tal, por lo que será necesario cambiar los colores correspondientes además de la zona CSS que en el paso 2 mostraré.

Veamos un ejemplo un poco mas claro (Función botón 1):

function eventoprimerapestaña()

/* Este función permite darle el evento a la primera pestaña*/
{

document.getElementById('pestaña-uno').style.display='block';

document.getElementById('pestaña-dos').style.display='none';

document.getElementById('pestaña-tres').style.display='none';

document.getElementById('boton-pestaña1').style.background='#CC3300';

document.getElementById('boton-pestaña2').style.background='#FF9966';

document.getElementById('boton-pestaña3').style.background='#FF9966';

}

• El valor en verde permite que cuando se presione en la pestaña 1, se oculten las otras 2.


• El valor en  rojo oscuro permite que se cambien el color de las pestañas, cuando se presiona en el botón de la pestaña, cambian de color las 3, mientras que la primera se mantiene en un color distinto a las otras.

Las tres funciones trabajan igual, pero le asignan un color correspondiente a cada botón.

Paso 2: Añadiendo los estilos:

Ahora deberás buscar la siguiente sección:

]]></b:skin>

Arriba de esta pega el siguiente código:

#pestañas { /*El contenedor*/
width:255px;
margin:0px auto;
background:#f5f5f5;
border:2px solid #CC99CC;
padding-top:10px;
box-shadow:2px 2px 2px #969696;
height:auto;
}

#pestaña-uno { /*Contenido pestaña 1*/
position:relative;padding:10px;
}
#pestaña-dos { /*Contenido pestaña 2*/
position:relative;display:none;padding:10px;
}

#pestaña-tres { /*Contenido pestaña 3*/
position:relative;display:none;padding:10px;
}

#boton-pestaña1 { /*Boton de la pestaña 1*/
padding:10px;
border:1px solid #d2d2d2;
background:#CC3300;
color:#fff;
}

#boton-pestaña2 { /*Boton de la pestaña 2*/
padding:10px;
border:1px solid #d2d2d2;
background:#FF9966;
color:#fff;
}

#boton-pestaña3 { /*Boton de la pestaña 3*/
padding:10px;
border:1px solid #d2d2d2;
background:#FF9966;
color:#fff;
}

Guarda los cambios y listo.

Explicación de los estilos:

• Cada botón tiene un color de fondo inicial, la primera pestaña tiene de color de fondo #CC3300, mientras que los otros 2 botones tienen un color #FF9966, el código del script del paso 1 lo que hace es alternar los colores, si te das cuenta, cada función asigna un color al presionar en cada botón.


• En los valores display, los contenidos de cada zona, tanto el 2 como el 3 no se muestran (display:none;), mientras que el primero si lo hace, el script también alterna esos valores, no sólo lo de los colores de fondo.

Paso 3: Añadiendo el gadget:

Ahora en ''Diseño | Elementos de la página'', añadiremos un gadget ''HTML/Javascript'', en el cual pegaremos el siguiente código:

<div id='pestañas'>
<a id='boton-pestaña1' href="javascript:void(0);" onclick='eventoprimerapestaña();'>Pestaña 1</a><a id='boton-pestaña2' href="javascript:void(0);" onclick='eventosegundapestaña();'>Pestaña 2</a><a id='boton-pestaña3' href="javascript:void(0);" onclick='eventotercerapestaña();'>Pestaña 3</a>
<div id='pestaña-uno'>
Contenido pestaña 1
</div>
<div id='pestaña-dos'>
Contenido pestaña 2
</div>
<div id='pestaña-tres'>
Contenido pestaña 3
</div>
</div>

Reemplaza los valores correspondientes por los deseados, cuando hayas terminado guarda el gadget y listo.

Importante:

Si a algunos les dificulta conseguir que los colores de los botones se cambien correctamente al modificarlos, pueden dejar la dirección del blog para que les diga cual código falta por cambiar.

Walt Disney Iconos

Son 42 Imágenes de Walt Disney en formato PNG con fondo transparente. 

 

Tamaño de 128px x 128px.

Para descargarlas en su tamaño original solo hacer clic sobre la imagen.

Variante de pestañas usando sólo CSS

Las pestañas que se crean usando sólo CSS, tienen una limitación, sólo es posible activarlas utilizando :hover ya que no existe la posibilidad de usar el evento click así que su contenido se muestra cuando ponemos el cursor encima y desaparece cuando lo sacamos pero, CSS-tricks ha encontrado una variante que nos permite controlar esa visibilidad de manera eficiente, utilizando etiquetas que normalmente no usaríamos; específicamente, las etiquetas input y label.

Veamos el HTML básico de un ejemplo con tres pestañas:

<div class="tabs">

   <div class="tab">

       <input type="radio" id="tab-1" name="tab-group-1" checked>

       <label for="tab-1">Primera</label>

       <div class="content"> el contenido de la pestaña 1 </div>

   </div>

   <div class="tab">

       <input type="radio" id="tab-2" name="tab-group-1">

       <label for="tab-2">Segunda</label>

       <div class="content"> el contenido de la pestaña 2 </div>

   </div>

    <div class="tab">

       <input type="radio" id="tab-3" name="tab-group-1">

       <label for="tab-3">Tercera</label>

       <div class="content"> el contenido de la pestaña 3 </div>

   </div>

</div>

No. Nada de esto funcionará en las viejas versiones de Internet Explorer aunque podría intentarse hacer modificaciones y probar, cosa que no he hecho y no pienso hacer por ahora.

Ahora el CSS que ponemos antes de &head>

<style>

.tabs { /* es el rectángulo contenedor */
margin: 0 auto;
min-height: 200px;
position: relative;
width: 550px;
}
.tab { /* cada una de las pestañas */
float: left;
}
.tab label { /* la parte superior con el título de la pestaña */
background-color: #456;
border-radius: 5px 5px 0 0;
box-shadow: -3px 3px 2px #678 inset;
color: #DDD;
cursor: pointer;
left: 0;
margin-right: 1px;
padding: 5px 15px;
position: relative;
text-shadow: 1px 1px #000;
}
/* el control input sólo lo necesitamos para que las pestañas permanezcan abiertas así que lo ocultamos */
.tab [type=radio] { display: none; }

/* el contenido de las pestañas */
.content {
background-color: #678;
bottom: 0;
left: 0;
overflow: hidden;
padding: 20px;
position: absolute;
right: 0;
top: 23px;
}
/* y un poco de animación */
.content > * {
opacity: 0;

-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);

-moz-transition: all 0.6s ease;
-webkit-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}

/* controlamos la pestaña activa */
[type="radio"]:checked ~ label {
background-color: #678;
box-shadow: 0 3px 2px #89A inset;
color: #FFF;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content { z-index: 1; }
[type=radio]:checked ~ label ~ .content > * {
opacity: 1;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
}

</style>

Primera

esta es la primera pestaña

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Otra pestaña

Etiam tempor posuere risus, eget suscipit felis ultricies ac. Aenean mattis dignissim purus, at fringilla dui placerat ac. Ut sit amet pellentesque tellus. Aenean fermentum mattis mi. Nullam quis orci aliquam ante tincidunt dapibus sit amet id magna. Duis semper, dui vitae blandit lacinia, justo purus adipiscing purus, id mattis nulla.

Ultima pestaña