3 juego de ingenio 3

JMiur [E]

Control parental

Hola nena, acá estoy ¿viste? te encontré y eso que me decías, "no, vieja no, esto de las internetes no es para vos" Juajuajua. Pero llegué. No te voy a decir que fue fácil pero llegué. Estoy usando tu computadora. No te enojes. Pero lo hice con cuidado. Lo llamé a tu tio Pepe y él me explicó, ahora le debo un almuerzo. Este domingo viene a comer ravioles, UFA! Jajajaja. Menos mal que nadie lee esto que sino ...

UYYYYYY puse una carita !!!!!!!!! QUE BIEN PUCHA PERO ME SALE TODO EN MAYUSSSSSSSSSSSSCULAS PERDON yA Me di CUENTA ahora si, jajajajaa, había apretado una tecla ahi bueno, ya sabés.

Como te decía, llegué, encontré el Facebook y me metí. Puse mi nombre, apellido, teléfono, dirección, me pidieron muchas cosas, qué barbaridad, se ve que es gente seria y no aceptan a cualquiera, ¡hasta el grupo sanguíneo me preguntaron! jajajaja Lo que no pude poner es un coso de esos con la cara ¿No tenés ninguna foto mia en tu computadora? Bah ahora no me voy a poner a buscarla. Lo dejo en blanco y listo porque total, ya tienen mis otros datos así que si quieren la sacan del DNI y chau pinela.

¡Cuánta gente hay acá dentro! ¿Los conocés a todos? Yo siempre dije que eras una chica muy sociable pero ¡qué nombre raros! Pobre, mirá que llamarse Caritos Bocasucia ¡Pobre muchacho! Lo que debe sufrir en el colegio porque los chicos son crueles, a mi me llamaban La Pirucha, ¡imaginate! Y nunca supe por qué

Ehhh soy cool, puse otra carita ¡Qué divertido! ¡Con razón te pasas horas encerrada con esto!

Ya está, ya está, no me grites jajajaja te imagino diciendo "mamá, no hagas papelones" pero, ¿qué le vas a hacer? soy así, juguetona. Listo. Sólo estaba probando.

¿Te puedo preguntar algo? ¿Qué es eso del toque? ¿Es algo medio sexual? No entendí nada y por las dudas lo saqué. No me gustan esas cosas, no es que sea mojigata pero soy una mujer casada ¿viste? y si tu padre se entera me muele a palos jajajajaja no, pobrecito, si es un santo el pobre, lo digo en broma. Parece que acá, te ponés a escribir y te sale todo, es como un psicologo barato jajajajaja.

¿Y si te mando un regalo? A ver ... besos .... no, ya se que no te gustan. Mira que sós antipática a veces, así nunca vas a tener novio, nena. En fin, mejor una remera, eso, te regalo una remera ... esperá que hago click ...

Pero ...

¡Esto no anda!

No me preguntó tu talla (¿ya la saben?) tampoco me dejó elegir un color ¿cómo funciona la cosa esta? ¿sólo hay un modelo? bueno, no importa, total es gratis así que si no te gusta se la regalás a tu prima la Casandra que siempre anda con esa ropa tan fea.

¿Así que en el cuestionario sobre quién fuiste en tu vida pasada te salió Madonna? Pero ¿se murió la chica esa? Pobre, que joven, claro, la mala vida. Voy a hacer ese test, seguro que me sale Cleopatra jajajajaja; siempre me sale lo mismo. Algo de cierto debe haber. Creer o reventar m'hijita.

Ayyyyyyy ya son las siete, acá el tiempo pasa volando, ni me di cuenta y todavía no empecé con la cena, voy a hacer zapaliitos rellenos. Sí, ya se que no te gustan pero a vos te hago algo aparte. Es que los zapallitos estaban en oferta y hay que aprovechar, cinco kilos compre, tenemos zapallitos para una semana jajajajajajaja. Pero esperá, antes me fijo en las fotos que pusisiste.

¡Que bonita! Esa faldita siempre te quedó bien aunque tu padre crea que es demasiado corta ¡Qué sabrá él! Ohhhh y esta otra que linda esa trompita, chuick chuick chuick ¿A quién le tirás besos, nena? Jajajaja Es una broma, no te enojes. Mirá, acá hay más fotos ¡cuántas! ¡Qué bien! Se nota que tenés alma de artista. Ayyy que poses ... supongo que esto lo puedo ver yo pero no cualquiera, digo porque son un poco ... no sé.

Bah, está bien, es la modernidad. No viene a aguarte al fiesta pero nena, abrigate un poco, no te me vayas a resfriar ...

historias

For sock's sake

animacion

Una entrada envidiosa

En una entrada donde se hablaba de los comentarios y Blogger, Mamots decía que el manejo de comentarios era uno de los temas que más extrañaba y contaba como en Blogia, otro servicio de blogs menos conocido y no googlelizado, se tenían herramientas para gerenciarlos.

Gentilmente, me manda un mail con un ejemplo y no puedo dejar de sentir una mezcla de envidia y de bronca por lo que considero, LO PEOR que tiene Blogger.

Al recibir un comentario, se envia un correo informativo, hasta allí, nada raro.

Has recibido un nuevo comentario en tu weblog 'miblog' (http://miblog.blogia.com)

Fecha: 2009.05.28 09:28:31
En el artículo titulado: 'eltitulo' (25/05/2009 02:26)
Enlace directo: dirección URL del comentario

Autor: nombrecomentarista (direccion@gmail.com http://direccion.com)
Comentario: el texto del comentario ...

Borrar: dirección URL para eliminar
IP: 12.345.67.890
URL procedencia: http://direccion.com

Como se ve, incluye la dirección de email del comentarista, la dirección URL optativa y la IP. Todos esos, datos que Blogger conoce, guarda pero no comparte. Datos que son elementales si es que somos administradores de un blog.

Por si fuera poco, en lo que sería el escritorio del sitio, la información para cada comentarios es la misma:

Comentario: el texto del comentario ...
Fecha: 2009.05.28 09:28:31
Autor: nombrecomentarista (direccion@gmail.com http://direccion.com)
IP: 12.345.67.890
Más información: sistema opartivo, navegador, etc

Y á eso, se le suman las opciones tales como colocar nombre, email, filtrar IPs de ciertos usuarios, bloquear palabras individuales. Gerenciamento elemental, no hace falta mucho más. Hasta la FAQ posee una respuesta rápida si surgen problemas:

Estoy sufriendo spam en los comentarios. ¿Qué puedo hacer?

En el menú de administración, entra en Opciones>>artículos, y allí, en la zona de comentarios, podras bloquear IPs desde donde prohibes comentar y palabras que no quieras que aparezcan en comentarios.

Esto permite reducir el spam.

Una pregunta sencilla a una respuesta sencilla ¿Hace falta algo más señor @Blogger? Tal vez, si se pusiera a trabajar en serio en lugar de estar buscando Blogs of Note o queriéndo robarle un pedacito de mercado a Facebook ... quien sabe, tal vez entonces, dejaríamos de gritar.

Blogger

Los feeds de YouTube

Si usamos YouTube y estamos suscriptos a varios sitios, podemos recibir las actualizaciones de esos sitios de manera regular ya sea entrando en la pàgina o por correo. Pero, también hay otra forma, agregarlas a nuestro lector de feeds preferido.

Para eso, debemos usar una URL como esta:

http://gdata.youtube.com/feeds/base/users/nombresuario/newsubscriptionvideos

Cambiando nombresuario por el nuestro.

No es el único feed disponible, hay más:

Feeds de búsquedas individuales o por categorías:
http://gdata.youtube.com/feeds/api/videos?orderby=updated&vq=palabra

http://gdata.youtube.com/feeds/api/videos/-/categoria/?vq=palabra&orderby=updated

Los feeds del canal de un usuario:
http://gdata.youtube.com/feeds/api/users/nombresuario/uploads?orderby=updated

Los feeds de los favoritos de un usuario:
http://gdata.youtube.com/feeds/api/users/nombresuario/favorites?orderby=updated

REFERENCIAS:Google Operating System

Google | YouTube

Animales en blanco y negro

imagenes

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.

Blogger

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.

Blogger

Tratando de entender el Header (1)

La posibilidad de agregar elementos predefinidos en Blogger no es algo malo, aunque tampoco es algo bueno, simplemente, se trata de una herramienta más. Sin embargo, a la hora de personalizarlos, cuando ya le hemos perdido el miedo a la plantilla, algunos de esos elementos nos presentan dificultades que no son sencillas de superar.

Es el problema de lo automático, alguien cree conocer todas las respuestas y genera un código para que abarque todas las posibilidades ... todas, excepto esa que nosotros querríamos utilizar.

El Elemento Header, para mi gusto, es el peor de todos porque si alguna vez se les ocurrió mirarlo, verán más de cincuenta líneas de un código confuso y en donde se hace complicado encontrar la punta del ovillo así que, para empezar a jugar un poco con este elemento, por el momento, simplemente nos vamos a olvidar de su existencia y lo dejaremos tal como está. Sólo usaremos CSS.

Partimos de una Plantilla Mínima porque es la mejor forma de entender qué significa cada cosa (ver ejemplo online).

El header no es otra cosa que un rectángulo en la parte superior de nuestra página. Cuando Blogger procese los datos y muestre nuestro blog, se habrá creado un código HTML similar a este:

<div id="header-wrapper">
  <div id="header" class="header section">
    <div id="Header1" class="widget Header">
      <div id="header-inner">
        <div class="titlewrapper"> acá veremos el título del blog </div>
        <div class="descriptionwrapper"> acá veremos la descripción del blog </div>
      </div>
    </div>
  </div>
</div>

A ese rectángulo se lo identifica con un ID (un nombre único) y, por defecto, se denomina header-wrapper. Tiene un ancho igual al ancho total de nuestra página, sin importar cúal sea esta y además, en el caso de la Plantilla Mínima, tiene un borde y un margen inferior que lo separa de las columnas de entradas y la sidebar:

#header-wrapper
  border: 1px solid $bordercolor;
  margin: 0 auto 10px;
  width: 860px;
}

Dentro de ese rectángulo, hay otro cuyo ID es header y que también tiene un borde y como hay un margen alrededor, se ve como un doble recuadro:

#header { 
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

Erámos pocos y adentro de ese hay otro rectángulo más llamado header-inner con propiedades que por el momento, podemos ignorar.

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

Recién ahora, adentro de ese, se encuentran los textos. En titlewrapper el tíitulo de nuestro blog que se muestra con una etiqueta de encabezado H1 y un enlace en todas las páginas excepto en el home. Debajo, en descriptionwrapper esta la descripción (si hemos puesto una) y se muestra con una etiqueta P.

Las propiedades del título y la descripción las encontramos en cuatro definiciones y todas ellas, tienen ajustes de márgenes, establecen los colores y tipos de fuente de esos textos, etc.

#header h1 { ....... }
#header a { ....... }
#header a:hover { ....... }
#header .description { ....... }

Como en esta etapa no vamos a tocar el código HTML, nos concentramos en manipular un poco esas propiedades CSS.

Primero, vamos a ponerle una imagen de fondo, un pattern que se repita y eventualmente cambiamos el tamaño de las fuentes:

#header-wrapper {
  background: transparent url(URL_imagen) repeat left top; /* la imagen de fondo */
  border: none;  /* le quito el borde */
  height: 100px;  /* le doy una altura igual a la imagen */
  margin: 0;   /* le quito el margen */
  width: 860px;  /* le doy un ancho igual al ancho del blog */
}
#header { /* le quito los márgenes y los bordes */
  border: none;
  margin: 0;
  text-align: center; /* centro el título */
}
#header h1 { /* le quito los márgenes y establezco el tipo de fuente del título */
  color: #000;
  font-size: 80px
  letter-spacing: 0;
  line-height: 100px /* le pongo el mismo valor de la altura de la imagen para centrarlo verticalmente */
  padding: 0;
  margin: 0;
  text-transform: none;
}
#header a { /* defino el color del título cuando es un enlace */
  color: #000;
  text-decoration:none;
}
#header .description { /* no quiero ver la descripción así que la oculto */
  display:none;
}

El resultado sería algo como este ejemplo. Nada del otro mundo.

Ahora, busquemos otra alternativa, en lugar de colocar una imagen tipo pattern, colocaremos una imagen que ocupe todo el ancho. Tendrá que tener como mínimo 860 pixeles que es el ancho del blog del demo pero, podría ser mayor, no pasará nada. Los códigos no varian mucho del ejemplo anterior:

#header-wrapper {
  background: transparent url(URL_imagen) no-repeat left top; /* la imagen de fondo NO SE REPITE */
  border: none;  /* le quito el borde */
  height: 100px;  /* le doy una altura igual a esta imagen */
  margin: 0;   /* le quito el margen */
  width: 860px;  /* le doy un ancho igual al ancho del blog */
}
#header { /* le quito los márgenes y los bordes */
  border: none;
  margin: 0;
  text-align: left; /* coloco el título a la izquierda */
  margin: 0;
  padding: 15px 0 0 60px; /* y desplazo el título hacia abajo y hacia la derecha */
}
#header h1 { /* le quito los márgenes y establezco el tipo de fuente del título */
  color: #000;
  font-size: 80px
  letter-spacing: 0;
  line-height: 120px /* le pongo el mismo valor de la altura de la imagen para centrarlo verticalmente */
  padding: 0;
  margin: 0;
  text-transform: none;
}
#header a {color: #000; text-decoration:none;}
#header .description {display:none;}

El resultado es el que se ve en este otro ejemplo.

No es necesario usar una imagen que se repita o que ocupe todo el rectángulo, podemos usar imágenes más pequeñas y ubicarlas en cualquier posición. Lo mismo podemos hacer con los textos; no es necesario que siempre se muestren de la misma manera, para esto nos valemos de la propiedad position que nos permite ubicar algo en cualquier parte con absoluta precisión:

#header-wrapper {
  background: transparent url(URL_imagenPequeña) no-repeat left top; /* la imagen de fondo NO SE REPITE */
  border: none; /* le quito el borde */
  height: 159px; /* le doy una altura igual a esta imagen */
  margin:0 0 50px 0; /* le voy a poner un margen inferior para tener más espacio */
  position: relative; /* establezco esta propiedad para poder posicionar de manera absoluta el contenido */
  width: 860px; /* le doy un ancho igual al ancho del blog */
}
#header { /* le quito los márgenes y los bordes */
  border: none;
  margin: 0;
  text-align: left;
  margin: 0;
}
#header h1 { /* le quito los márgenes y establezco el tipo de fuente del título */
  color: DarkTurquoise;
  font-size: 80px
  letter-spacing: 0;
  padding: 0;
  margin: 0;
  text-transform: none;
  position: absolute; /* digo que voy a ubicarlo de de manera absoluta */
  bottom:-30px; /* y lo coloco bien abajo (se sale del rectángulo) */
  left:110px; /* y a la derecha */
}
#header a { /* defino el color del título cuando es un enlace */
  color: DarkTurquoise;
  text-decoration:none;
}
#header .description { /* esta vez quiero ver la descripción */
  color: SlateGray;
  font-size: 30px;
  letter-spacing: -1px;
  margin: 0;
  padding: 0;
  position: absolute; /* también la voy a ubicar de de manera absoluta */
  top: 100px; /* y lo coloco más arriba (la superpongo con el título) */
  right: 120px; /* y la muevo mucho más hacia la derecha */
}

El resultado sería este.

Tampoco estoy limitado a usar una sola imagen, puedo usar varias si las coloco en los distintos rectángulos interiores (ya que hay varios, los usamos. Probamos con dos imágenes, una a cada lado:

#header-wrapper {
  background: transparent url(URL_imagenPequeñaDerecha) no-repeat 80% 50%; /* la imagen de fondo la ubico a la derecha */
  border: none; /* le quito el borde */
  height: 159px; /* le doy una altura igual a esta imagen */
  margin: 0;
  position: relative; /* vuelvo a establecer esta propiedad */
  width: 860px; /* le doy un ancho igual al ancho del blog */
}
#header { /* le quito los márgenes y los bordes */
  border: none;
  margin: 0;
  text-align: left;
}
#header-inner { /* la segunda imagen la pongo en este rectángulo */
  background: transparent url(URL_imagenPequeñaIaquierda) no-repeat left 50%; /* la imagen de fondo la ubico a la izquierda */
  height: 159px; /* debo darle dimensión para que se vea la imagen */
  width: 100%;
}
#header h1 { /* le quito los márgenes y establezco el tipo de fuente del título */
  color: #FD7E00;
  font-family: Garamond; 
  font-size: 100px
  letter-spacing: 0;
  padding: 0;
  margin: 0;
  text-transform: none;
  position: absolute; /* digo que voy a ubicarlo de de manera absoluta */
  top:20px; /* y lo ubico donde quiera */
  left:125px;
}
#header a { /* defino el color del título cuando es un enlace */
  color: #FD7E00;
  text-decoration:none;
}
#header .description { /* esta vez quiero ver la descripción */
  color: SkyBlue;
  font-size: 30px;
  letter-spacing: -1px;
  margin: 0;
  padding: 0;
  position: absolute; /* también la voy a ubicar de de manera absoluta */
  top: 120px;
  right: 145px;
}

Y aquí lo tenemos en un demo.

Blogger

Wallpapers (by ggarfield 2)

REFERENCIAS:gran-angular.net

wallpapers

Personalizar los comentarios del autor

Pasó mucho tiempo desde que Maurico C. preguntara si era posible modificar la fuente o el color de fondo de los comentarios dejados por el administrador del blog pero, de todas maneras, aquí va uno de los posibles métodos para hacerlo.

En una plantilla normal, los comentarios se muestran en tres rectángulos diferentes:

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

  <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
    ....... es el nombre del comentarista y un ícono que lo representa .......
    ....... data:comment.authorUrl es la URL del comentarista  y data:comment.author su nombre
    ....... es el texto adicional que se muestra .......
  </dt>

  <dd class='comment-body'>
    ....... es el contenido del comentario .......
  </dd>

  <dd class='comment-footer'>
    ....... es la fecha en que fue enviado el comentario .......
    ....... también se incluye el ícono para eliminar los comentarios  .......
  </dd>

</b:loop>

Como son tres partes diferentes, podemos modificar sólo una de ellas (en este caso la segunda) o todas a la vez de tal forma que los comentarios del autor en su propio blog se verán "tan distintos" como uno quiera.

Para conseguir esto, lo que debemos hacer es condicionar el código y verificar "quien" comenta y eso lo podemos hacer con la variable data:comment.author (nuestro nombre) o con la variable data:comment.authorUrl que es única y por lo tanto, más precisa. Esta URL es personal, cada usuario tiene una diferente y corresponde a la del perfil así que puede copiarse directamente desde el escritorio de Blogger en el enlace Ver Pefil. Sería algo así:

http://www.blogger.com/profile/XXXXXXXXXXXXXXXXXXXX

El primer paso es poner la condición "rodeando" el contenido del loop; sea cual sea el que tengamos:

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

<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/XXXXXXXXXXXXXXXXXXXX&quot;'>

  <b:if cond='data:comment.authorClass == &quot;blogger-comment-icon&quot;'>

    <!-- estos serán nuestros propios comentarios -->
    ....... y aquí pondremos el nuevo código .......

  </b:if>

<b:else/>
  
<!-- estos son los comentarios "normales" tal y como están ahora -->
  <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
    ....... 
  </dt>
  <dd class='comment-body'>
    ....... 
  </dd>
  <dd class='comment-footer'>
    ....... 
  </dd>

</b:if>

</b:loop>

Si ahora guardáramos, veríamos lo mismo que antes pero no nuestros comentarios. Faltaría agregar el código para eso que, será muy similar al otro excepto que podemos eliminar cosas ya que sabemos que son nuestros y no hace falta verificarlos. El código podría ser algo así:

<div class='misComentarios'>
  <dt class='comment-author-YOMISMO'>
    <a expr:name='data:comment.anchorName'/>
    <img class='icoYO' src='URL_miImagen' style='width:50px;height:50px;'/>El texto que queremos que aparezca
  </dt>
  <dd class='comment-body-YOMISMO'>
    <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-YOMISMO'>
    <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>
</div>

Para controlar el contenido con facilidad le agregamos clases CSS a cada sector. Así que ahora, podemos ir a la parte de estilo de la plantilla y antes de </b:skin> colocar esas definiciones.

Estas, son algunas de las que se ven en el ejemplo online:

dt.comment-author-YOMISMO { /* es el rectágulo superior con nuestro nombre */
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  background-color: aliceBlue;
  border: 2px solid CornflowerBlue;
  border-bottom: 1px dotted cornflowerBlue;
  color: CornflowerBlue;
  font-size: 22px;
  height: 50px;
  padding: 10px 10px 5px 10px;
}
dd.comment-body-YOMISMO { /* es el rectágulo central con el comentario en si mismo */
  background-color: aliceBlue;
  border-right: 2px solid CornflowerBlue;
  border-left: 2px solid CornflowerBlue;
  clear: both;
  color: #444;
  font-family: Comic Sans MS;
  font-size: 16px;
  margin: 0;
  padding:5px 10px 10px 10px;
}

dd.comment-footer-YOMISMO { /* es el rectágulo inferior con la fecha */
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  background-color: aliceBlue;
  border: 2px solid CornflowerBlue;
  border-top: none;
  margin: 0 0 30px;
  padding: 10px;
  text-align: right;
}
dd.comment-footer-YOMISMO a {
  color: cornflowerBlue;
  font-family: Tahoma;
  font-size: 11px;
}
img.icoYO { /* es el icono de laimagen */
  float: left;
  padding-right: 10px
}

Blogger

Cinco plantillas de Templates Novo Blogger

	Template Green Demo online: VER Descargar: 4shared.com Información y detalles: VER
	Template Abril Demo online: VER Descargar: 4shared.com Información y detalles: VER
	Template Março Demo online: VER Descargar: 4shared.com Información y detalles: VER
	Template Girly Diaries Demo online: VER Descargar: 4shared.com Información y detalles: VER
	Template WingGirl Demo online: VER Descargar: 4shared.com Información y detalles: VER

REFERENCIAS:Templates Novo Blogger

plantillas

Construyendo mundos por amor

REFERENCIAS:neatorama.com

animacion

Ajustar el tamaño de una imagen al texto

Por lo general, usando CSS, armar un texto combinado con una imagen es bastante sencillo aunque a veces, ajustar ambas cosas se vuelve una tarea titánica.

Supongamos que tenemos dos imágenes, una de 128x128 y otra de 256x256 y que queremos usarlas como "adorno".

Usando la propiedad float, podemos colocar el texto "rodeando" la imagen, ya sea a un lado o al otro. Esto es lo que hace Blogger cuando nos pide que elijamos un diseño al subirlas pero podemos hacerlo con cualquiera, basta darle un estilo:

<div style="text-align: justify;"><img src="URL_imagen" style="margin-right: 10px; float: left;" /> ... el texto a mostrar ... </div>

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.

Lo mismo hacemos para el otro lado:

<div style="text-align: justify;"><img src="URL_imagen" style="margin-left: 10px; float: right;" />el texto a mostrar ... </div>

Sólo invertimos los códigos, uno flota a la izquierda y tiene un margen a la derecha, el otro flota a la derecha así que tiene un margen a la izquierda pero ¿qué pasa si por cualquier motivo cambiamos el tamaño o el tipo de fuente del texto?

Se descalabra todo y claro, deberíamos "redimensionar la imagen para mantener el efecto. La rehacemos, la subimos otra vez ... demasiado trabajo.

También podemos "redimensionarla" usando los atributos width y height.

Basta colocar el ancho y el navegador se encargará de calcular el alto de forma automática para mantener la proporción. O colocar sólo el alto. O colocar ambos valores y cambiar esa proporción:

original = 256x256 --> 100x100
<img width="100" src="URL" />	<img height="100" src="URL" />	<img width="100" height="100" src="URL" />

<img width="50" height="100" src="URL" />	<img width="100" height="50" src="URL" />

Sea como sea, deberíamos "recalcular" el tamaño de manera individual ... sigue siendo mucho trabajo.

Sin embargo, hay una técnica explicada en JON TANgerine que nos facilita hacer esto de manera genérica, usando CSS. Para ello, en lugar de utilizar pixeles para dimensionar las imágenes, utilizaremos la unidad em lo que significa que el tamaño de la imagen tendrá una relación con el tipo de fuente del texto.

¿Cómo calculamos eso? No hay otra forma que usar la aritmética o una calculadora online.

Supongamos que estoy satisfecho con el modelo creado. Conozco dos datos, sé que la imagen debe tener 128x128 y que la fuente del texto tiene 14 pixeles. Uso una fórmula de conversión:

(1 / TamañoFuente) * AnchoImagen = AnchoImagen en unidades em
(1 / TamañoFuente) * AltoImagen = AltoImagen en unidades em

en este caso:

(1 / 14) * 128 = 9.14

Así que puedo cambiar el código a usar:

<div style="text-align: justify;"><img src="URL_imagen" style="margin-right: 10px; float: left; width: 9.14em; height: 9.14em;" /> ... el texto a mostrar ... </div>

De esta manera, el texto y la imagen mantendrán una relación pre-establecida, sin importar ni el tipo de fuente ni el tamaño de la imagen que usemos.

CSS

Las propiedades CSS por defecto

Sin CSS, una página está desnuda pero, aún así, algo de pudor le queda ya que los navegadores establecen una serie de propiedades por defecto que serán aplicadas a menos que las cambiemos. Tienen ciertas diferencias según se trate de un navegador u otro pero, en general, son justamente esas propiedades no-identificadas, las que nos causan problemas porque no solemos tenerlas en cuenta.

El body de una página es donde están definidas por defecto algunas de esas propiedades Es más o menos conocido que el fondo (background) de una página es blanco y que el color de los textos (color) es negro pero tiene algunas más que suelen perturbar, por ejemplo, el margen (margin):

body {
  background: #FFF url() repeat left top;
  color: #000;
  font-family: Times New Roman;
  font-size: 16px;
  margin: 8px;
}

Los enlaces también tienen propiedades por defecto, son de color azul y se muestran subrayados.

Todas las etiquetas de títulos tienen fuentes en negrita (font-weight:bold) y además, un tamaño que está en relación al tamaño de la fuente definida en el body. Para colmo, también tiene márgenes:

h1 font-size: 2em; margin: 21px 0;
h2 font-size: 1.5em; margin: 19px 0;
h3 font-size: 1.2em; margin: 19px 0;
h4 font-size: 1em; margin: 21px 0;
h5 font-size: .8em; margin: 21px 0;
h6 font-size: .7em; margin: 26px 0;

Ni las etiquetas DIV ni SPAN tienen propiedades por defecto pero si las tiene la etiqueta P; esta posee un márgen superior e inferior igual al tamaño de la fuente por defecto (margin:1em 0).

Más etiquetas con propiedades pre-definidas:

blockquote margin: 16px 40px;
pre font-family: monospace; margin: 16px 0;

Las imágenes que sirven como enlaces tienen un borde de color igual al color de los enlaces (border: 2px solid #0000EE)

Probablemente, las etiquetas que causan más conflictos son las listas ya que tanto OL como UL tienen varias propiedades incluyendo márgenes y separaciones:

ol margin:16px 0; padding-left: 40px; list-style-position: outside; list-style-type: decimal;
ul margin:16px 0; padding-left: 40px; list-style-position: outside; list-style-type: disc;

Es muy común leer que para evitar que todas estas propiedades no nos molesten, lo mejor es "resetearlas", es decir, poner al inicio de nuestra plantilla, algunas definiciones que "limpien" esas cosas. Hay decenas de ejemplos que pueden verse online pero, para un uso normal, no es necesario tanto, basta agregar unas pocas, justo al inicio de nuestra plantilla, dentro de etiquetas <style> </style> o de <b:skin> </b:skin>.

* {margin: 0; padding: 0;}

html, body {height: 100%;}
body {height: 100%;} 

a, a:visited, a:link, a:active  {outline: none; text-decoration: none;}
a:hover {outline: none; text-decoration: none;}
a img {border: none; outline: none; text-decoration: none;}

object, embed {outline: none;}

ol, ul, li {list-style: none;}

Por supuesto, esto tendrá que verse caso por caso ya que es posible que algunas de las propiedades por defecto nos sean útiles y por lo tanto, no nos interese sacarlas pero, siempre es bueno saber que allí están y, cuando comenzamos un sitio nuevo, lo mejor es eliminarlas a todas y tomarnos el trabajo de definirlas una por una.

CSS

Blogger y sus códigos misteriosos

Hace ya varios días que Ariane twiteaba una información que, hasta ahora, sigue siendo un misterio. Trabajando con una plantilla recién cargada desde Blogger, había encontrado unos códigos nuevos y se preguntaba ¿son eso lo que parecen ser?

Si buscamos en:

<b:includable id='post' var='post'>

veremos que inmediatamente después de las instrucciones que muestran los posts, aparece esto:

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
  </div>
</b:if>

Parecería que, con alguna condición, las entradas tendrían la posibilidad de ser mostradas parcialmente, al estilo de lo que hace el tag MORE en WordPress, una función largamente solicitada y que usualmente, simulamos con algún hack.

Por ahora, nada funciona excepto el texto Read More que genera <data:post.jumpText/> Tampoco he visto ningún tipo de referencia al tema en la web.

No es el único misterio. Revisando un poco, hay otros códigos "raros" o por lo menos, cosas que no había visto antes y que no tengo la menor idea para que sirven.

Por ejemplo ¿qué hace esto que aparece en el LOOP?

<b:if cond='data:post.trackLatency'>
  <data:post.latencyJs/>
</b:if>

¿Carga un script? ¿Cuál? ¿Bajo qué condiciones?

Una más. Ahora, el includable del formulario de comentarios incrustado es distinto:

<b:includable id='comment-form' var='post'>

Luego del IFRAME se ve esto:

<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
  BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>

¿Sería mucho pedir que Blogger nos informara de estos cambios y su significado? Digo, no sé, se me ocurre que es lo que debería hacer cualquier servicio, por muy mediocre que sea.

Blogger