ElHackerZ

Recientemente hice algunos cambios en el blog, un fondo distinto, color a la sidebar, menú en la parte superior, contenido extra en el footer, retoqué el logo, modifiqué la forma de presentar los directorios, añadí publicidad, y un espacio titulado "BLOG DE LA SEMANA"

Pensaba hablar sobre ese espacio pero hoy por una cosa y mañana por otra el tema estaba pendiente.

Al preguntarme sobre los requisitos que hacen falta para estar ahí creo que es el momento de hablarlo.

No se trata de otorgar un premio ni hay normas establecidas, no hace falta ser el que más comenta ni el que más visita.No hay que hacer nada extraordinario o mejor dicho no hay que hacer nada.

La idea es dar a conocer esos blogs que bajo mi punto de vista merecen ser visitados, ya sea por la temática de interés, por realizar una labor altruista, por solidarizarse con otros, por necesitar de alguna forma que se les tienda una mano o que nos pueden aportar ideas para mejorar nuestro blog.

Con esto no creo que nadie vaya a hacerse famoso o le lluevan las visitas de un día para otro, para eso hay que entrar en "Gran hermano" o ser portada de Interviú

Cada semana escogeré un blog, pero estoy abierta a sugerencias, da igual si se trata de vuestro blog, el de un amigo o uno que encontraste de casualidad, lo único que pido es que me deis unos argumentos por los que pensáis que ese blog vale la pena darlo a conocer.

No sé si será una buena idea pero ahí está, la cuestión es que se entienda la finalidad que tiene.

Comentarios verdaderos y comentarios falsos

Tarde o temprano, todo blog debe lidiar con dificultades que nada tienen que ver con códigos sino con quienes los visitan, sean trolls, burros que tratan de dejarnos de regalo su basura o molestias varias. Cada uno deberá resolverlas como mejor le parezca o como pueda. Habrá quienes se sientan tentados a abandonar, habrá quienes no se sientan afectados. De todo hay en esta vida y aquí adentro nada es distinto que allá afuera.

En un post reciente, Bonzu Pipinpadaloxicopolis III planteaba un problema que no es sencillo de resolver y que alguna vez, también me ha afectado: los comentarios falsos realizados por algún tonto que firma con otro nombre, incluso, el nuestro.

No es inusual. Se ha vuelto una costumbre molesta y a la larga, salvo que a alguien se le ocurran métodos más eficientes de protección, es difícil que los blogs puedan mantener la posibilidad de tener sus comentarios abiertos de manera irrestricta a menos que quieran parecerse a muchos de esos sitios que vemos por allí donde los comentarios se acumulan sin contestación y sin que nadie los "limpie".

No podemos evitar que esa falsificación ocurra; no hay forma. Sólo podemos hacer una cosa, siempre comentar estando logueados con cualquier tipo de cuenta para facilitar a los administradores de los sitios la tarea de detectar esas estafas.

¿Cómo ocurre esto? De dos maneras simples. En la Configuración de Blogger, dentro de Comentarios, tenemos una serie de opciones para establecer quienes pueden dejar comentarios:

Persona que puede realizar los comentarios:
Cualquiera - incluidos los usuarios anónimos
Usuarios registrados - incluido OpenID
Usuarios con cuentas de Google
Sólo los miembros de este blog

Son alternativas estrictas y la opción Cualquiera no discrimina entre usuarios anónimos y usuarios que usan su nombre y URL. De alguna manera, es lógico ya que no existe forma de verificarlas, ni en Blogger ni en ningún otro servicio. Si pongo: Bill Gates http://microsoft.com/ será tan válido como poner Pepito http//nadie/. Aún obligando a colocar un email, nadie puede garantizar la validez; si la dirección es sintácticamente correcta, el resto no es verificado.

Quiere decir que, teniendo esta opción habilitada, cualquiera puede poner nuestro propio nombre y el comentario, aparentará haber sido hecho por nosotros. Ese es el dilema y a esto, en el caso de Bonzu, se le suma algo menos frecuente: alguien crea una cuenta de Google nueva y coloca nuestro nombre. La URL será otra, el mail será otro pero, en un comentario dejado en un blog, aparentará ser real. Entonces, diría que como precausión, no sólo deberíamos siempre comentar logueados sino tener nuestro perfil habilitado ya que eso no puede falsificarse y en caso de duda, le permitiría al administrador hacer una rápida verificación para saber si el comentario es real o no.

Aunque Blogger no dispone de un sistema de comentarios eficiente (ni siquiera llega a ser ineficiente), existen métodos para minimizar estos problemas sin tener que llegar a la moderación de comentarios. Aquí cabe entender un punto clave: no podemos evitar que esto ocurra, sólo podemos ponerlos en evidencia para evitar que los que visitan nuestro sitio se confundan.

Por defecto, los autores de los comentarios están precedidos por un ícono que indica la forma de acceso pero, sólo hay tres: Google, OpenId y el resto. Ninguno de ellos identifica nuestros propios comentarios (cosa que sería sencillísimo de hacer para ellos). Dependiendo entonces de cómo esté logueado, se veria casi lo mismo.

Si uso la opción nombre/URL, el ícono es diferente pero si uso una cuenta de Google distinta de la que tengo como administrador, no se distingue uno de otro a menos que mire la URL de destino y allí notaré que pertenece a dos perfiles distintos (Perfil Original | Perfil Falso).

Como muchos hemos modificado las plantilla para usar íconos especiales para identificar a los comentaristas, las cosas se complican más porque ni siquiera la imagen del perfil es una forma de identificación positiva, puede copiarse sin problemas.

Como dije antes, esto no podemos evitarlo a menos que moderemos los comentarios pero, podemos detectar esas falsificaciones y dejarlas en evidencia. Y digo dejarlas en evidencia porque creo que es necesario que se muestren. En lugar de eso, podríamos ocultar esos comentarios pero no lo recomendaría, necesitamos verlos para luego eliminarlos.

Modificar la plantilla para contemplar este problema es engorroso y sólo puedo limitarme a dar una idea general de cuáles serían los códigos a utilizar.

Debemos buscar el INCLUDE de comentarios y concentrarnos en el LOOP que es lo que muestra cada uno de los comentarios del post

El código original de una Plantilla Mínima.

<b:loop values='data:post.comments' var='comment'>
  <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
    <b:if cond='data:comment.favicon'>
      <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
    </b:if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:comment.authorUrl'>
      <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
    <b:else/>
      <data:comment.author/>
    </b:if>
    <data:commentPostedByMsg/>
  </dt>
  <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
      <p><data:comment.body/></p>
    </b:if>
  </dd>
  <dd class='comment-footer'>
    <span class='comment-timestamp'>
      <a expr:href='data:comment.url' title='comment permalink'>
        <data:comment.timestamp/>
      </a>
      <b:include data='comment' name='commentDeleteIcon'/>
    </span>
  </dd>
</b:loop>

Y dentro de ese LOOP, lo que importa es lo que está en la etiqueta DT porque es allí donde Blogger establece el modo en que un comentarista está logueado, usa una URL propia o es anónimo.

Modificaremos eso para, primero que nada, verificar si el autor del comentario usa nuestro nombre, si es así, verificaremos si usa una cuenta de Google y por último, si esa es nuestra cuenta. Sólo si esas tres condiciones son ciertas, el comentario es nuestro, caso contrario, es falso y lo indicaremos de algún modo:

<b:loop values='data:post.comments' var='comment'>

<!-- le damos un nombre unico a cada comentario -->
<div class='' expr:id='data:comment.id'>

<dt class='comment-author' expr:id='data:comment.anchorName'>
  <a expr:name='data:comment.anchorName'/>

  <!-- verificamos nuestro nombre -->
  <b:if cond='data:comment.author == &quot;MINOMBRE&quot;'>
    <!-- el comentario tiene nuestro nombre así que verificamos si está logueado en Google -->
    <b:if cond='data:comment.authorClass == &quot;blogger-comment-icon&quot;'>
      <!-- está logueado así que verificamos su perfil -->
      <b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/XXXXXXXXXX&quot;'>
        <!-- es el nuestro, todo está bien -->
        <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
      <b:else/>
        <!-- no es el nuestro, es falso -->
        <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
        <script type='text/javascript'>marcarError(&#39;<data:comment.id/>&#39;)</script>
      </b:if>
    <b:else/>
      <!-- no está logueado en Google así que es falso -->
      <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
      <script type='text/javascript'>marcarError(&#39;<data:comment.id/>&#39;)</script>
    </b:if>

  <b:else/>

    <!-- como no es nuestro nombre no hace falta verificar nada pero podemos identificarlo igual -->
    <b:if cond='data:comment.authorUrl'>
      <b:if cond='data:comment.authorClass == &quot;blogger-comment-icon&quot;'>
        <!-- autor con cuenta de Google -->
        <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
      <b:else/>
        <b:if cond='data:comment.authorClass == &quot;openid-comment-icon&quot;'>
          <!-- autor usando OpenID -->
          <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
        <b:else/>
          <!-- autor con nombre/URL -->
          <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
        </b:if>
      </b:if>
    <b:else/>
      <!-- autor anónimo -->
      <data:comment.author/>
    </b:if>
  </b:if>

  <!-- aquí va el script si usamos el contador de comentarios -->

</dt>

<!-- todo lo demás no tiene mayores cambios -->

<dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
      <span class='deleted-comment'><data:comment.body/></span>
    <b:else/>
      <p><data:comment.body/></p>
    </b:if>
  </dd>
  <dd class='comment-footer'>
    <span class='comment-timestamp'>
      <a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'><data:comment.timestamp/></a>
      <b:include data='comment' name='commentDeleteIcon'/>
    </span>
  </dd>
  <!-- aquí va el segundo script si usamos el contador de comentarios -->
</div>

En este ejemplo, estoy usando un script auxiliar para marcar esos comentarios. LLamamos a una función marcarError() y le indicamos que ese comentario lo muestre de manera diferenciada del resto. La agrego antes de </head>:

<script type='text/javascript'>
//<![CDATA[
  function marcarError(cual) {
    // y aquí hago algo con ese comentario, por ejemplo, le pongo fondo de color rojo
    document.getElementById(cual).style.backgroundColor='Red';
  }
//]]>
</script>

Y por supuesto, podría diseñarlo de cualquier otro modo, usar imágenes con un cartel que lo marcara, etc etc.

Tratando de entender el header (2)

El problema básico del header por defecto de Blogger es que el código es automático y por lo tanto, poco flexible. Por ejemplo, cuando usamos una imagen de fondo, se coloca dentro de una etiqueta IMG y por lo tanto, se hace muy complicado modificarla para que varie. Las primeras plantillas de Blogger no tenían esta dificultad ya que no tenían previsto el uso de imágenes y eso, en definitiva, hacía que fuera más sencillo modificarlas.

Así que, para resolver este problema y todos los asociados con el manejo de imágenes dentro del header, lo mejor es eliminar su contenido y colocar un código elemental que nos permitirá personalizarlo como se nos de la gana.

Expandiendo los artilugios, buscamos esto:

<b:section class='header' id='header'>
<b:widget id='Header1' locked='true' title='elTitulo' type='Header'>
  ... y vamos a eliminar todo lo que esté acá adentro ...
</b:widget>
</b:section>

Luego reemplazaremos eso que eliminamos por el código simplificado y quedaría esto:

<div id='header-wrapper'>
<b:section class='header' id='header'>
<b:widget id='Header1' locked='true' title='elTitulo' type='Header'>
  <b:includable id='title'/>
  <b:includable id='description'/>
  <b:includable id='main'>
    <div id='header-inner'>
      <b:if cond='data:blog.url != data:blog.homepageUrl'>
        <a expr:href='data:blog.homepageUrl'> </a>
      </b:if>
    </div>
  </b:includable>
</b:widget>
</b:section>
</div>

Como no vamos a usar el título ni la descripción del blog y los dos includable que los manejan no pueden eliminarse (porque vuelven a aparecer), los dejamos vacios, sin contenido y el único que usamos es el main que es todo lo que necesita un header ¿Qué hace ese código? Transforma la imagen que usamos en un enlace a la pagina de inicio de nuestro sitio que es accesible sólo cuando no estamos en el home.

Lo que sigue, es cambiar el CSS así que vamos a buscar las definiciones. Sólo necesitamos tres:

#header-wrapper {
  margin: 0 auto 10px; /* está centrado y tiene un pequeño margen que lo separa de los posts */
  width: 860px; /* es el ancho del blog y el ancho de la imagen de fondo */
}
#header-inner {
  background: transparent url(URL_imagenBlog) no-repeat 50% 50%; /* es la imagen a usar */
  height: 100px; /* debemos indicar la altura de esa imagen de fondo */
  width: 100%; /* que ocupará tptp el ancho del blog */
}
#header a { /* esa imagen es un enlace así que le damos los mismo valores */
  display: block; /* transformamos el enlace en un rectángulo de cierto tamaño */
  height: 100px; /* indicar la altura de la imagen de fondo */
  width: 100%; /* indicamos que ocupa todo el ancho */
}

El resultado sería el que se muestra en este blog de pruebas.

A partir de acá, como ya controlamos la imagen de fondo, podemos intentar, por ejemplo, mostrar headers aleatorios:

<script type="text/javascript">
  // lista de imágenes a utilizar
  misFondos=new Array('URL_imagen1','URL_imagen2','URL_imagen3');
  // elegimos una al azar
  var alea=Math.round(Math.random()* misFondos.length + 1);
  // creamos la etiqueta style y la escribimos
  var salida = '<style>#header-inner {background-image:url(' + imagen[alea] + ');}</style></style>';
  document.write(salida)
</script">

De forma similar, podríamos tener imágenes que roten de forma sucesiva o cualquier otra locura que se nos ocurra; por ejemplo mostrar una imagen diferente según sea la etiqueta.

Aquí, las cosas se nos complican un poco porque Blogger no nos dice la etiqueta de un post hasta que este es mostrado, lo hace dentro del LOOP así que no disponemos de ese dato en el <head> </head> de nuestra plantilla que es donde lo necesitamos, para decidir qué imagen vamos a usar ANTES que se cargue la página. Intentaremos entonces ser modestos y tener encabezados diferenciados para las páginas de listas; es decir, aquellas que, por defecto, muestran un recuadro generado por este código:

<b:includable id='status-message'>
  .......
</b:includable>

El único dato que identifica si estamos en una página de ese tipo es la URL de la misma:

http://nombreBlog.blogspot.com/search/label/nombreEtiqueta

o bien:

http://nombreBlog.blogspot.com/search/label/nombreEtiqueta?max-results=20

Y como Blogger no tiene códigos condicionales para indicarnos esto, debemos recurrir a la única alternativa que nos queda, usar JavaScript.

La idea es esta, vamos a leer la URL de la página, verificar si estamos en una de las páginas de etiquetas, leer esa etiqueta y luego, hacer que el script agregue el código de style correspondiente, exactamente como en el caso anterior.

Supongamos que tenemos tres etiquetas llamadas etiqueta1, etiqueta2 y etiqueta3 y tres imágenes distintas, una para cada una de ellas. Entonces, vamos a poner lo siguiente, justo antes de </head>:

<script type='text/javascript'>
// <![CDATA[
  // esta es una función interna necesaria para IE
  Array.prototype.indexOf = function(s) {
    for (var x=0;x<this.length;x++) if(this[x] == s) return x;
    return false;
  }
  // leemos la URL de la página
  var dondeEstamos  = window.location.href.replace(/&amp;/g, '&');
  // si no es una etiqueta, seguimos de largo
  if(dondeEstamos.indexOf('label') > -1) {
    // creamos dos arrays con la lista de etiquetas y las imágenes que queremos usar
    // en la primera, colocamos los nombres de las etiquetas tal como se ven en la barra de direcciones del navegador
    lasCategorias=new Array("etiqueta1","etiqueta2","etiqueta3");
    // en la segunda, colocamos las direcciones de las imágenes, en el mismo orden
    losHeaders=new Array("URL_imagen1","URL_imagen2","URL_imagen3");
    // vamos a filtrar la URL
    var buscarX=dondeEstamos.lastIndexOf('?');
    if(buscarX > -1) { dondeEstamos = dondeEstamos.substring(0,buscarX); }
    // averiguamos cual es la etiqueta
    var headerEtiqueta = dondeEstamos.substr(dondeEstamos.lastIndexOf('/')+1);
    // y cuál es la imagen
    var indice=lasCategorias.indexOf(headerEtiqueta);
    // si no la tenemos definida, seguimos de largo y no pasa nada
    if (indice != false) {
      // aquí vamos a crear el código CSS
      var salida = '<style>#header-inner {background-image:url(' + losHeaders[indice] + ');}</style>';
      // y lo escribimos
      document.write(salida)
    }
  }
// ]]>
</script>

El resultado sería el que se muestra en este blog de pruebas si se navega por las etiquetas primera, segunda, tercera y cuarta.

Añadiendo vídeos con Lytebox

Con Explorer esta idea de mostrar los vídeos en ventana modal con Lytebox no funciona, sin embargo con Firefox el resultado es genial.
Ahí quedan las explicaciones por si son útiles en algún momento

Son varias las preguntas sobre la forma de presentar los vídeos.

Utilizo Lytebox un script que nos permite mostrar contenido en ventana modal. No es necesario añadir otros scripts y ese es el principal motivo por el que resulta más rápida la carga del blog.

Sus funciones parecen muy básicas y en realidad lo son, lo podemos usar en cualquier enlace, imagen, grupos de imágenes, slideshow, incluso añadir un iframe.La imposibilidad de mostrar vídeos es el punto negativo de Lytebox.

Con esa limitación y todo decidí añadir Lytebox y después con más calma averiguar la forma de mostrar vídeos aunque poco había que averiguar porque leyendo atentamente mi propia entrada llegué al punto donde decía "La posibilidad de añadir un iframe con la etiqueta rel="lyteframe" resulta muy útil cuando tratamos de mostrar una página si necesidad de salir del blog" pensé que si se puede mostrar página s también podía mostrarse vídeos.

Para añadir un iframe lo haríamos así:
<a href="iframe-único" rel="lyteframe" title="Título">texto o imagen</a>

Para escoger el tamaño que mostrará el vídeo le añadimos ancho y alto:
<a href="iframe-único" rel="lyteframe" title="Título"rev="width: 400px; height: 300px; scrolling: no;">texto o imagen</a>

En title añadimos el texto que aparece en la parte inferior a modo de título.
» Con width añadimos anchura y con height altura.
» Donde "texto o imagen" es el sitio donde añadimos la imagen que se muestra en caso de no desear texto.
» Añadimos una imagen con <img src="url-de-la-imagen">

Lo siguiente sería la url del vídeo que vamos a mostrar, en este caso lo que haremos será obtener el código del vídeo que You Tube nos proporciona algo así:

Si en lugar de texto deseamos una imagen sustituimos el texto por <img src="url-de-la-imagen"> puede ser cualquier imagen pero yo quería lo más parecido a un vídeo. La única solución que encontré es la siguiente...

En un blog de pruebas añadimos el código del vídeo, una vez lo visualizamos en el blog hacemos una captura y esa será la imagen que mostraremos.

Imagen

Subimos esa imagen a Blogger, copiamos la url y la añadimos sustituyendo el texto de "texto o imagen" puede parecer demasiado laborioso pero el único paso que requiere mostrar el vídeo con este aspecto es la captura para conseguir la imagen.

Si no deseamos hacer captura lo podemos hacer con cualquier otra imagen que tengamos en nuestro PC.

Ejemplo con captura

Recién sacada del horno tenemos una opción más, es una aportación de J.Miur y sugiere obtener 4 posibles imágenes con la misma url del vídeo, ahorrando de esta forma tomar una captura.

http://www.youtube.com/v/wRKPcx9Cpe8

http://img.youtube.com/vi/wRKPcx9Cpe8/0.jpg

300x240

http://img.youtube.com/vi/wRKPcx9Cpe8/1.jpg

125x100

http://img.youtube.com/vi/wRKPcx9Cpe8/2.jpg

125x100

http://img.youtube.com/vi/wRKPcx9Cpe8/3.jpg

125x100

ElHackerZ

Animales en blanco y negro

BLOG DE LA SEMANA

Comentarios verdaderos y comentarios falsos

Tratando de entender el header (2)

Añadiendo vídeos con Lytebox

Ayudamos a Ayudar... Hazte Fan!

Buscador

HEY VISITANTE! LEE ESTO!

Buscador #2

Frase: "Proximamente..."

Género

CineTux tiene nueva Administración

sdgsdfgdg

Archivo del blog

Estadísticas