Google Web Elements

JMiur [E]

Google Web Elements es una nueva opción que se publicita como una forma fácil de agregar servicios de Google en páginas webs.

En este momento están disponibles ocho de ellas:

En todos los casos, accedemos a las páginas correspondientes y definimos una serie de opciones que varían con cada modelo. El resultado, es un código HTML que copiamos y pegamos donde queremos que se muestre.

Ejemplo de Google YouTube News

Ejemplo de Google News

Ejemplo de Google Conversation

Me llamó la atención la velocidad de los gadgets y si bien por ahora todo está en inglés, imagino que con el tiempo se incorporarán nuevos idiomas.

TextOpus o como escribir sin culpas

Esto de hecar erndaats y leguo cetalrrvoins no creo que aduye al piotsncmioianeo de un blog.Shuffle Letters

077 117 099 104 111 032 109 101 110 111 115 044 032 099 111 110 118 101 114 116 105 114 108 097 115 032 101 110 032 099 195 179 100 105 103 111 115 032 065 083 067 073 073 032 046 046 046Convert to ASCCI Numbers

01101111 00100000 01100101 01110011 01100011 01110010 01101001 01100010 01101001 01110010 01101100 01100001 01110011 00100000 01100101 01101110 00100000 01100010 01101001 01101110 01100001 01110010 01101001 01101111 00100000 00101110 00101110 00101110Convert to Binary

UGFzc3dvcmQgZmllbGQgY2FuIG5vdCBiZSBlbXB0eSE=Ecryption BlowFish

-. .- -.. .. . / -. --- ... / -.-. .-. .. - .. -.-. .- .-. / .--. --- .-. / .-.. --- / --.- ..- . / .... .- -.-. . -- --- ... / -..COnvert to Morse

3 juego de ingenio 3

Click para jugar.

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 ... risaanim

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é tristeanim

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

verguenza neutro confuso enojo

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 ...

For sock's sake

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.

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

Animales en blanco y negro





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.

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.

Sombras



Wallpapers (by ggarfield 2)

Wallpapers (by ggarfield 2)


REFERENCIAS:gran-angular.net

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
}

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

Construyendo mundos por amor


REFERENCIAS:neatorama.com

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>

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.

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?

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.

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>

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.


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.

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.

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.

Pequeña lista de herramientas online para desarrolladores

Crear layouts básicos:
Fuentes y textos:
Colores:
Generación de sprites:
Herramientas varias:
Hojas de ayuda:

REFERENCIAS:w3avenue.com

El arte de arena de Iliana Yahav


Click para ver los videos.

REFERENCIAS:sandfantasy.com

Wallpapers (by ggarfield 1)

Wallpapers (by ggarfield 1)


REFERENCIAS:gran-angular.net

Mi hermanito de la luna


Siempre se dijo que esta es la era de las comunicaciones y la información. Es cierto ¿qué duda cabe? pero también es falso o por lo menos, mi definición personal para esas palabras es otra. Comunicarse implica escuchar y vivimos tiempos donde la gente habla más de lo que escucha. Informar bueno ... informar es decir la verdad y en todo caso, aclarar correctamente cuando sólo damos una opinión personal.

La paradoja de este mundo moderno es que la información sobra y la información falta. Y falta, porque los medios, pequeños y grandes hablan de lo que no saben y en ese hablar por hablar cometen el peor de los pecados, lastimar a otros.


Tal vez, por eso esta entrada de Palomas de Papel y esta otra de Gem@ Blog y tantas otras que muestran solidaridad y respeto por Maite, la mamá de Julen, un niño feliz, de 3 años con autismo.


Y entonces, frente a ciertas barbaridades, Maite dice: "Es muy injusto que no solo nos encontremos y luchemos con las dificultades propias del síndrome sino también con el añadido de la ignorancia de los demás que desconociendo lo que es el autismo nos cierran puertas y nos ponen trabas."

Y entonces, frente a la ignorancia, deberíamos detenernos por un minuto y ponernos a pensar en una frase tan sencilla como esa de Iguales pero diferentes porque en realidad, justamente, lo que nos iguala, son las diferencias.


FlowPlayer: Reproductor de videos

Una vez más me he puesto a tratar que funcione FlowPlayer en Blogger. Ya son varios los fracasos pero esta vez, algo logra verse ... era hora.

FlowPlayer es un reproductor de archivos multimedia, uno de los mejores y soporta muchos formatos, FLV, SWF, MP3, MP4, H.264, etc. No sólo es de los mejores por la cantidad de funciones que tiene sino también de los más flexibles en cuanto a sus posibilidades gráficas. A decir verdad, las opciones son tanta que es imposible enumerarlas pero la documentación disponible es muy completa y debemos remitirnos a ella para los detalles.

Pero (siempre hay un pero) también es de los más complicados de utilizar, o por lo menos de configurar, justamente por eso, porque tiene "demasiadas" posibilidades.

La característica principal y que lo hace distinto de otros es que para funcionar usa JavaScript por lo tanto, como mínimo, necesitamos dos archivos: flowplayer-3.1.0.js y flowplayer-3.0.5.swf. Pero, si, eventualmente, queremos personalizarlo más, requerimos un tercer archivo: flowplayer.controls-3.0.3.swf. El problema no es ese sino que todos ellos, deben estar en la misma carpeta del mismo servidor y eso no es tan fácil. Una alternativa posible es Fileden.

Todo el "paquete" y algunos demos, los descargamos en formato ZIP y, una vez que alojamos ambos archivos en un servidor propio, debemos agregar el script en la plantilla, justo antes de </head>:
<script src="URL_flowplayer-3.1.0.min.js"></script>
Ese es el único que debemos agregar a la plantilla pero, si es algo que vamos a utilizar seguido, también sería bueno definir la URL del reproductor como una variable ya que la vamos a estar "llamando" seguido así que, debajo de lo anterior, ponemos esto:
<script>reproFLOWPLAYER="URL_flowplayer-3.0.5.swf";</script>
El tercer archivo no lo tenemos que cargar, es de uso interno y de allí la necesidad de que todos estén en el mismo lugar.

Para usar el reproductor tenemos diferentes alternativas y para cualquiera de ellas, debemos colocar el código correspondiente donde quisiéramos que se muestre. Por ejemplo, podemos hacerlo colocando un enlace:
<a href="URL_video" style="display:block;margin:0 auto;height:300px;width:400px;" id="nombreUnico"> </a> <script>flowplayer("nombreUnico", reproFLOWPLAYER);</script>
donde:
href contiene la URL del video a reproducir
style lo usamos para establecer las dimensiones del reproductor y el resto de las propiedades son optativas
id es la referencia a ese reproductor un nombre único)

Con suerte ... se verá esto:


Los desarrolladores recomiendan usar este modo ya que, si el video está en un enlace, un visitante que tenga JavaScript desactivado, podrá acceder a este de alguna otra forma. Sin embargo, no es el único método, también podríamos usar un DIV como contenedor:
<div style="margin:0 auto;height:300px;width:400px;" id="nombreUnico"> </div>
<script>flowplayer("nombreUnico", reproFLOWPLAYER, "URL_video"); </script>
El código es similar, salvo que la URL del video a reproducir se coloca como tercer parámetro del script.

Por último, también podemos insertarlo como lo haríamos con cualquier otro reproductor, utilizando la etiqueta OBJECT (más información):
<object width="300" height="200" data="URL_flowplayer-3.0.5.swf" type="application/x-shockwave-flash">
<param name="movie" value="URL_flowplayer-3.0.5.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip":"URL_video"}' />
</object>


Hasta aquí, lo "normal", si queremos personalizar las cosas, todo lo debemos hacer con JavaScript y allí está la dificultad para usarlo en Blogger. Algunas cosas las podemos colocar directamente, agregado un parámetro más. Por ejemplo:
<a href="URL_video" style="display:block;margin:0 auto;height:300px;width:400px;" id="nombreUnico"> </a> <script">flowplayer("nombreUnico", reproFLOWPLAYER, {clip:{autoPlay:false,autoBuffering:true}});</script>
con autoPlay false el video no comenzará a reproducirse de forma automática (por defecto es true)
con autoBuffering true el video se irá cargando aunque no se reproduzca (por defecto es false)

Hay muchos más parámetros que podemos usar y todos se colocan del mismo modo, separados por una coma (ver detalles):
clip:{param1, param1, ..., paramN}
Este no es un reproductor sencillo, se me ocurre que no está pensado para usar una vez cada tanto, la personalización es tan extrema que requiere tiempo para entenderla pero luego, si lo conseguimos, todo se hace más "sencillo".

Visualmente, podemos cambiarlo casi por completo, establecer colores, gradientes, botones, etc. Para eso hay una serie de instrucciones que podemos agregar de manera individual en cada reproductor o bien, establecer una serie de parámetros generales.

Por ejemplo, si agregamos lo siguiente en el head de nuestra plantilla (o en un archivo externo), estaremos definiendo una serie de parámetros generales y ya no será necesario cargarlos individualmente:

<script type='text/javascript'>
//<![CDATA[
var conf = {
defaults: {
autoPlay: false,
autoBuffering: true
},
skins: { // creamos un skin
skinDEMO: { // le damos un nombre
// definimos colores
sliderGradient: 'none',
timeColor: '#5555555',
backgroundGradient: [0.6,0.3,0,0,0],
sliderColor: '#000000',
buttonOverColor: '#666666',
bufferGradient: 'high',
bufferColor: '#666666',
buttonColor: '#000000',
progressGradient: 'medium',
progressColor: '#999999',
durationColor: '#999999',
backgroundColor: '#000000',
borderRadius: '15px',
opacity:1.0,
// definimos qué botones serán visibles
play:true,
volume:true,
mute:true,
time:true,
stop:false,
playlist:false,
fullscreen:true,
scrubber: true,
// le damos una altura a la barra inferior
height: 30,
// y haremos que se oculte al reproducirlo
autoHide: 'always'
},
skinDEMO2: { // otra
............
},
skinDEMO3: { // y todas las que se nos ocurra
............
}
}
}
//]]>
</script>

Allí, usamos defaults para inicializar esos parámetros generales y skins para "crear" diferentes modelos de reproductores.

Los aplicamos de este modo:
<a href="URL_video" style="display:block;margin:0 auto;height:300px;width:400px;" id="nombreUnico"> </a> <script">flowplayer("nombreUnico", reproFLOWPLAYER, {clip: conf.defaults, plugins: {controls: conf.skins.nombre}});</script>
con el parámetro clip: conf.defaults le decimos que use los datos genéricos
con el parámetro plugins: {controls: conf.skins.nombre} le decimos que ese reproductor tenga cierto aspecto


No, no es sencillo ¿Detalles? Cientos. Hay que leer la documentación y probar y probar y probar y seguir probando ...

Thanks ... Your welcome

Thanks for the feedback so far! De nada, usted se lo merece debería contestar uno a ciertos agradecmientos pero ... es Blogger Buzz el que (emocionado hasta las lágrimas) agradece las sugerencias enviadas a su maravilloso Product Ideas for Blogger ... 2,509 people have submitted 1,757 ideas and cast 63,478 votes.

Y quieren más pero ... ¿escuchan? Esta es la lista de algunas cosas sugeridas y que ellos consideran merecedoras de ser publicadas ... porque ya existen o son irrelevante diablo2
  • Importar blogs desde Wordpress: nos dicen que usemos Wordpress2Blogger.
  • Feeds para etiquetas: ya existe y existieron siempre
  • Feeds para comentarios: lo mismo
  • ShareThis como widget: es un servicio externo, así que no tiene sentido
  • Editar etiquetas de varios posts al mismo tiempo: siempre pudo hacerse
  • Elegir Blog of Note por votaciones: no sé a quien demonios le interesa eso de los Blog of Note, casi es un chiste
Ahí se acabó la noticia. Faltaría agregar que ese foro cierra el 14 de mayo.

Supongo que estas otras no las publicaron porque algo de vergüenza, aún tienen:
  • Aumentar un 50% el salario de los desarrolladores de Blogger.
  • Colocar estátuas de tan insignes personajes en todas las esquinas.
  • Cantar alabanzas cada vez que ingresamos a Blogger.
  • Repetir 10 veces al día "Blogger is the best" "Blogger is the best" "Blogger is the best"
  • Babear asombrados ante cada uno de sus anuncios.
  • No protestar más y decirles a todo que si.
  • Hablar en inglés.
Por cierto:
  • ¿De alojar archivos? Ni una palabra.
  • ¿De empezar a colocar algunas de las opciones del editor que hace meses y meses que está en Blogger Draft? Ni una palabra.
  • ¿De permitir la creación de páginas individuales? Ni una palabra.
  • ¿De administrar los comentarios? Ni una palabra.
  • ¿De administrar las imágenes? Ni una palabra.
  • ¿De mejorar la estructura de las plantillas? Ni una palabra.
  • ¿De agregar plantillas nuevas y jubilar las que ya existen? Ni una palabra.
  • ¿De crear un sistema de ayuda completa? Ni una palabra.
Demasiadas ningunas palabras para mi gusto diablo1

"No soy un fotógrafo, sólo creo imágenes"

Click para ver algunos ejemplos.

Efecto hover sobre las imágenes

Esta técnica permite agregarle un CAPTION a las imágenes que sólo será visible cuando colocamos el puntero del mouse encima de ella. El efecto es bastante sencillo y sólo requiere HTML y CSS.


La única limitación que tendremos es utilizar imágenes de un tamaño más o menos similar para no distorsionarlas. No es necesario que sean todas iguales porque le agregaremos alguna variación al efecto original para que se adapte a distintas posibilidades.

Pondremos las imágenes con este código (si es en una entrada, todo en una sola línea):
<div class="imgteaser">
<a href="javascript:void(0);">
<img src="URL_imagen" />
<span class="more">&raquo; Leer Más</span>
<span class="desc">
<strong>EL TITULO</strong>
....... el texto a mostrar .......
</span>
</a>
</div>
La clave, por supuesto, está en las definiciones CSS, muchas de las cuales son personalizables:
<style type="text/css">
.imgteaser { /* es el bloque general */
margin: 0 auto; /* lo centramos */
overflow: hidden;
position: relative;
width:600px; /* establecemos el ancho total (imagen + marco) */
}
.imgteaser a {text-decoration: none;}
.imgteaser a:hover {cursor: pointer;}
.imgteaser a img { /* la imagen en si misma */
background-color: #456; /* el color del marco */
border: none;
margin: 0;
padding: 10px; /* le ponemos un marco alrededor */
width: 580px; /* forzamos el tamaño de la imagen */
}
.imgteaser a .more { /* es el área traslúcida de LEER MAS */
background-color: #123; /* color de fondo */
/* las propiedades del texto */
color: #FFF;
font-size: 14px;
padding: 5px 10px;
/* transparencia */
filter:alpha(opacity=65); /* IE genérico */
opacity:.65; /* Firefox */
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
/* posicionamos ese texto abajo y a la izquierda sin importar la altura de la imagen */
position: absolute;
bottom: 14px;
right: 10px;
}
.imgteaser a .desc {display: none;}
.imgteaser a:hover .more {visibility: hidden;}
.imgteaser a:hover .desc { /* es el texto del caption en si mismo */
background-color:#345; /* color de fondo */
display: block;
margin: 0;
width: 580px; /* ocupará el mismo ancho de la imagen */
/* las propiedades del texto */
color: #FFF;
font-size: 12px;
padding: 10px;
/* transparencia */
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=75)';
/* lo posicionamos abajo y a la derecha sin importar la altura de la imagen */
position: absolute;
bottom: 14px;
left: 10px;
}
.imgteaser a:hover .desc strong { /* el texto LEER MAS */
display: block;
font-size: 14px;
line-height: 2em;
}
</style>


Prism: Crear aplicaciones desde Firefox

Hace unos meses, ZonaFirefox nos contaba que la futura versión de Firefox traería, entre otras novedades, la posibilidad de crear aplicaciones web de escritorio, es decir, no sólo guardar páginas sino tener acceso a servicios de manera independiente. Para esto, utilizaría Prism, algo similar a Adobe AIR.

Ahora, leyendo ghacks.net veo que Mozilla se ha adelantado en este tema y ha aparecido la primera beta de Prism y que esta, funciona en las versiones actuales del navegador así que ... a probar se ha dicho.

Vamos a la página de Prism y allí tenemos dos opciones, lo agregamos como extensión o la podemos descargar de manera independiente de tal forma que funcionará como cualquier otro programa portable. Hay versiones para Windows, Mac y Linux. También hay un Bookmarklet Experimental que nos permite hacer lo mismo sin necesidad de descargar nada.



Opté por la primera que me parece más intuitiva así que allí está, disponible en el menú Herramientas ¿Cómo lo puedo usar? Es tan sencillo que asombra.

Por ejemplo, voy a entrar en GMail con el navegador, como lo haría normalmente. Una vez allí, en Herramientas hago click en Convert Website to Application. Se abrirá una ventana de opciones:


URL es la página donde estamos
Name el nombre descriptivo que le daremos
Show navigation, Shoy status message and progress, Enable navigation keys y Display in the notification area son las opciones de la ventana en la que veremos la aplicación

Marcaremos una o varias de las opciones de Create Shortcuts: con Desktop la agregamos al Escritorio, con Start Menu al Menú Inicio y con Quick Launch Bar a la barra de acceso rápido de Windows.

Por último Icon nos permite usar el ícono por defecto de la página o seleccionar uno cualquiera.

Hecho esto, veremos el acceso en la PC y bastará hacer click en él para abrirla, tengamos el navegador abierto o no. Como la aplicación ejecuta una versión minimizada de Firefox, veremos que es muy rápida.

Aparentemente, en las próximas versiones habrá más posibilidades como mostrar alertas y trabajar offline (más información)

Muy interesante es la Wiki del proyecto donde hay una serie de paquetes ya pre-armados para crear aplicaciones de diferentes servicios conocidos (más información):

Colocar una imagen asociada a una etiqueta en el sidebar

Juan me preguntaba si era posible colocar una imagen en la sidebar que identificara la etiqueta a la que correspondía una entrada. Es decir, si un post tuviera la etiqueta ANIMACIÓN se mostrase una imagen específica y si tuviera la etiqueta BLOGGER se mostrase otra, etc, etc, etc.

Debería ser fácil si tuviéramos ese dato pero sólo es accesible desde un único lugar, desde el mismo post, así que primero deberíamos leerlo y guardarlo para usarlo cuando sea necesario.

Es que, si tenemos la sidebar a la derecha de las entradas, cuando leemos el dato, la sidebar aún no está así que no podemos poner nada y si la tenemos a la izquierda, cuando tenemos que mostrar la imagen, aún no sabemos la etiqueta así que, sea donde sea que se nos ocurra mostrar la imagen, debemos hacerlo en varios pasos. Se me ocurre que debe haber varias formas de hacerlo y esta sólo es una.

Primero que nada, creamos una variable de JavaScript que será la que contendrá esa etiqueta. Ponemos entonces esto antes de </head>:
<script>var etiquetaPOST;</script>
Ahora, deberíamos buscar la parte del código de los posts donde se leen y muestran las etiquetas de cada entrada así que expandimos los artilugios y buscamos esto:
<b:loop values='data:post.labels' var='label'>
<script>etiquetaPOST=&#39;<data:label.name/>&#39;;</script>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
y agregamos eso indicado en color que hará que se guarde la etiqueta en esa variable, con una limitación, si la entrada tiene más de una, guardará la última; podríamos modificarlo para que guarde la primera pero, aún así, sólo guardará una.

Ya tenemos el dato, ahora, podemos usarlo en cualquier otra parte de la plantilla y poner la imagen con otro script pero, el procedimiento será distinto si lo vamos a poner en una sidebar a la izquierda o a la derecha de la entrada. Empecemos con esta última que es el caso más común.

Agregamos un elemento HTML, le damos título para tenerlo identificado y allí, ponemos esto:
<script type='text/javascript'>
listaCategorias=new Array('CATEGORIA1','CATEGORIA2','CATEGORIA3');
imgsCategorias=new Array(
'URL_imagenCATEGORIA1',
'URL_imagenCATEGORIA2',
'URL_imagenCATEGORIA3'

);
cual=listaCategorias.indexOf(etiquetaPOST);
if(cual==-1) {
laImagen='URL_imagenPORDEFECTO';
} else {
laImagen=imgsCategorias[cual];
}
salida='<img id="logocat" src="' + laImagen + '"/>';
document.write(salida);
</script>
Donde, reemplazamos CATEGORIA1, CATEGORIA2 y CATEGORIA3 por los nombres de las nuestras y, si tenemos más, ponemos cada una de ellas entre comillas simples y separadas por comas.

La lista de imágenes se corresponde con las categorias, y hacemos lo mismo, colocamos la URL de cada una de ellas, entre comillas simples y separadas por comas.

Además, para evitar problemas o por si no tenemos todas las categorías listadas, colocamos en URL_imagenPORDEFECTO una imagen genérica, la que se mostrará por defecto en caso de no encontrarse ninguna otra.

Guardamos, vamos a la plantilla y expandimos los artilugios para editar el gadget que hemos creado para que quede de esta forma:
<b:widget id='HTMLXX' locked='false' title='XXXXXXXX' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<div class='widget-content'><data:content/></div>
<b:else/>
<style>#HTMLXX {display: none;}</style>
</b:if>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
De esta manera, nos aseguramos que sólo se muestre en las páginas individuales.

Magic Pen

Click para esperar que se carguen .... y lueeeeeego jugar.


Divagando sobre blogs y conversaciones

Pués la verdad, el comentario de Maite en una entrada reciente, me ha puesto a pensar y, de alguna manera, se entremezcla con uno de los tópicos del recientemente creado Foro de SpamLoco.

Decía:

Yo os leo siempre de lo mismo en mil sitios y sigo estando pez, no entiendo de redes sociales, no estoy dentro de ninguna, ni de twiter, ni facebook ni ninguna, por lo que no se como funcionan y tampoco se lo que me pierdo.

Pero no consigo saber por qué le tenéis tanta manía a lo de los seguidores, a ver si explicandomelo tú desde el principio puedo enterarme de una vez.

A mi me gusta porque mucha gente viene y no comenta, sin embargo, no se por qué, se hace seguidor y al hacerlo me da una pista de su propio blog y así he podido conocer sitios estupendos relacionados con mi tema (y no relacionados) de los que no hubiera tenido idea si no fuese por esa ventanita.

Dentro de sus contactos y sus propios seguidores sigo conociendo más direcciones que me interesan... Para mí resulta muy útil desde un punto de vista no de presunción sino de información.

Si lo quito pierdo posibilidades. Cómo encontrarles si no? Esa es la pregunta básica más que nada. Si tienes tiempo y paciencia explicamelo, por favor, a ver si por fin me entero de cuál es la historia

Aunque he tratado de contestarlo, mi respuesta me parece incompleta o, mejor dicho, su comentario me ha llevado hacia otras direcciones y eso, siempre es bienvenido.

Más allá de la anecdota de ese gadget de seguidores y de su buen o mal uso, el tema de "sígueme" "soy tu fan" o "presumamos" me parece bastante más profundo. Imagino que en algún momento, los sociologos deberán ponerse a estudiar esto: ¿Cómo funciona la gente común cuando su vida se traslada a internet? ¿Somo lo mismo acá que allá? Tiendo a pensar que sí pero es evidente que no; sin duda, esta pseudo-realidad exacerba algunas cosas. Los generosos comparten más en la web que en la vida real; los egoistas son más egoistas, los buenos son más buenos y los malos son peores ¿Será una especie de borrachera 2.0 que hace que ciertas características personales se hagan más evidentes?

No digo que alguien sea distinto acá que allá sino que eso que lo caracteriza, se ve con más facilidad. El nick elegido, el avatar que usamos, los títulos que elegimos, la forma de expresarnos ... no hace falta un psicólogo para interpretarlos; los símbolos son obvios, muestran más que un millón de palabras.

Pero, hablar de toda la web sería inapropiado, es un universo demasiado amplio. Los blogs sólo son una parte de ese universo y deberían unirlos ciertas caracterísiticas, sin embargo, tengo la sensación que, poco a poco, son más las cosas que los separan que aquellas que los unen y de alguna manera, eso, terminará por destruirlos como medio.

Medio. Recalco la palabra porque esa es la clave y de allí lo interesante del comentario de Maite. Para ella, ese gadget es un medio y desde ese punto de vista no tiene nada que discutirse. Lo usa, le sirve y está bien pero ¿todos lo usaran de la misma manera? Me temo que no y tampoco tendría importancia salvo que, en muchos casos, el medio es en realidad un fin; el blog, termina existiendo para que ese numeríto mágico aumente y aumente y aumente. Algunos piensan: "cuanto más alto sea, mejor seré" lo que lamentablemente lleva a otros a la conclusión contraria: "cuanto más bajo sea, peor seré".

Ese es el dilema de los blogs. Ser lo que son o ser egoblogs.

Si un blog se transforma en sinónimo de sitio elitista donde alguien dicta cátedra, escribe y se queda mirando a ver las reacciones que ha generado, perderá su escencia. Si un blogger mira la cantidad de meneos que tiene una entrada antes de leer los comentarios, y reflexionar sobre lo que estos dicen, dejará de ser un blog y su sitio sólo será una forma barata de crearse un negocito en lugar de buscarse un trabajo hombreando bolsas en el puerto.

Poco a poco, la blogocosa se llena de elites, es casi "humanamente" inevitable; algunos pseudo-emprendedores han encontrado en este tipo de plataformas una forma fácil de juntar monedas; no tienen que invertir nada, el riesgo es escaso, si sale bien, genial, si sale mal, creamos otro y nos tiramos a la pileta; total, el mundo está lleno de giles y en alguna parte debe haber alguien dispuesto a comprarnos lo que vendemos: aire.

Y como si fuera poco, la elite se rie de nosotros y comentan entre ellos: "pobrecitos, son unos aficionados".

Y tienen razón.

Pero están equivocados.

Somos aficionados y eso es lo que queremos. Eso es lo que deberíamos rescatar antes que sea demasiado tarde. Los blogs SON para aficionados. Los blogs SON personales. Que alguno lo haya tomado como negocio no está mal, lo que está mal es que nos hagan creer que ese es el único camino, que esa es la escencia de este medio, que todos debemos ir en esa dirección o apartarnos.

Un blog es todo lo contrario de eso que nos quieren vender.

Un blog tiene sólo un fin: la conversación.

Un blog es una red social perfecta porque sólo requiere un interlocutor: uno mismo.

Si a eso se le agregan otras voces llegamos al Nirvana. No importa si son dos, cien o miles. Las voces que llegan desde afuera enriquecen la conversación y la llevan hasta lugares que uno no habría sospechado.

Un blog es eso: un sitio donde escucho lo que dice el otro.

Un blog soy yo mismo haciendo un blog.

IE8.js: Resolviendo incompatibilidades de IE

Vaya, leí entusiasmada hasta que llegué al final. Suena a chiste eso de "no están implementados en Internet Explorer" es como decir que algo está riquísimo pero no podemos comerlo porque nos va a sentar mal

Pués sí. Gem@ tiene razón en sentir eso luego de leer que algunas de las alternativas más avanzadas del CSS aún no han sido incorporadas a Internet Explorer, aunque algunas de ellas ya funcionan en la versión más reciente del navegador IE8 que puede ser descargada sin restricciones desde la página de Microsoft.

Sin embargo hace tiempo, había comentado en una entrada, que en Google Codes podíamos encontrar la solución y es hora de volver sobre ese tema.

Dean Edwards es el creador de una serie de scripts muy pequeños que podemos cargar directamente sin necesidad de alojarlos nosotros y que permiten solucionar esas limitaciones, agregando a IE, una serie de funciones que no posee. Hay dos versiones IE7.js e IE8.js que contiene al anterior y que es el que conviene usar.

¿Qué cosas resuelve?

Permite el uso de selectores CSS:
parent>child adjacent + sibling adjacent ~ sibling .multiple.classes :hover :first-child [attr] [attr="value"] [attr~="value"] [attr|="value"] [attr^="value"] [attr$="value"] [attr*="value"] ::after ::before :active :focus :checked :contains() :disabled :empty :enabled :indeterminate :lang() :last-child :not() :nth-child() :nth-last-child() :only-child :target

Agrega y corrige la forma de interpretar ciertas propiedades CSS:
background-attachment background-image bottom cursor display font-size margin max-height max-width min-height min-width overflow position right border-spacing (para tablas) box-sizing content soporta attr() y url() opacity property: inherit

Agrega y corrige la forma de interpretar ciertos elementos HTML:
abbr img label button[type=submit] form object

Soluciona además los problemas de márgenes dobles y otros detalles específicios aunque para esto último hay una librería extra llamada ie7-squish.js.

También corrige el uso de imágenes PNGs transparentes pero, con una limitación, lo hace sólo si la imagen tiene este tipo de nombre: *-trans.png

No lo hará en el 100% de los casos pero, si miran la página de demos, verán que lo hace bastante bien

¿Cómo lo usamos, simplemente agregamos esto antes de </head>:
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

REFERENCIAS:code.google.com

Graffiti de IE

Click para ampliar.

Pseudo-clases y pseudo-elementos (3)

Otros selectores que podemos usar y que se combinan con los pesudo-elementos.

El asterisco (*) es llamado un selector universal selector, por ejemplo, si colocamos lo siguiente al inicio de nuestras declaraciones CSS:
* {margin: 0; padding: 0;}
Eliminaremos los márgenes y paddings que colocan los navegadores en las etiquetas.

Cuando una etiqueta está dentro de otra, se dice que la etiqueta contenedora es el elemento padre (parent) y la etiqueta contenida es el elemento hijo (child). Por eso, siguiendo esta analogía, en CSS se habla de la herencia, es decir, ciertas propiedades definidas en el elemento padre, se "transmiten" al hijo. Por ejemplo:
<div style="color: green;">
<p> ... un texto ...</p>
</div>
En este caso, el DIV es el padre y el párrafo P es el hijo. El párrafo se verá verde porque hemos definido que el DIV tenga color verde y esta propiedad es heredada.

El texto se verá de color verde.


No todas las propiedades se heredan así que también existen pseudo-elementos que nos permiten definir estas cosas con mayor exactitud.

Usando el símbolo < indicamos que cierta propiedad se aplicará sobre los elementos hijo. Por ejemplo si tenemos esto:
div#ejemplo b {color:lightblue;}

<div id="ejemplo">
<p>El texto se verá de color <b>azul claro</b>.</p>
Y este otro <b>también</b>.
</div>
Cualquier etiqueta B dentro de ese DIV se verá de color azul:

El texto se verá de color azul claro.

Y este otro también.

En cambio, ya sea usando esto:
div#ejemplo p b {color:lightblue;}
o esto:
div#ejemplo p > b {color:lightblue;}

<div id="ejemplo">
<p>El texto se verá de color <b>azul claro</b>.</p>
Pero este otro no <b>aunque esté en negrita</b>.
</div>
Sólo serán azules los que estén dentro de una etiqueta P.

El texto se verá de color azul claro.

Pero este otro no aunque esté en negrita.

El símblo más + lo usamos para indicar a un elemento inmediatamente adyacente:
p.ejemplo + p  {color:yellow;}

<p class="ejemplo">Este es un párrafo cualquiera.</p>
<p>Este es el párrafo adyacente al anterior.</p>
<p>Este no es el párrafo adyacente.</p>

Le estamos diciendo que, el párrafo que inmediatamente sigue a uno al que tiene la clase ejemplo, sea de color amarillo y todos los demás no.

Este es un párrafo cualquiera.

Este es el párrafo adyacente al anterior.

Este no es el párrafo adyacente.


Parece complicado y de alguna manera lo es. Probablemente, más interesante y útil es definir propiedades en función de los atributos de una etiqueta. Por ejemplo, si tuvieramos esto:
a {color:yellow; font-size: 20px;}
a[title] {color:red;}

<p>
Este enlace no tiene title y es <a href="#">amarillo</a>
Como este otro enlace tiene title es <a href="#" title="El enlace rojo">rojo</a>
</p>
Lo que veríamos es que todos los enlaces que tengan el atributo title en la etiqueta tendrían un color distinto:

Este enlace no tiene title y es amarillo

Como este otro enlace tiene title es rojo


Esos atributos pueden definirse de manera aún más precisa. En este caso, sólo si el enlace tiene esa dirección URL determinada tendrá el color indicado.
a[href='http://gemablog-.blogspot.com/'] {color:salmon;}

Este es un enlace a ninguna parte

Este es un enlace a Gema Blog


Si en lugar del símbolo igual (=) usamos ~=, los que se mostrarán en ese color son todos aquellos enlaces que estén contenidos en una lista separada por espacios:
a[href='http://gemablog-.blogspot.com/ http://elescaparatederosa.blogspot.com/'] {color:salmon;}
También podríamos establecer más de un atributo, de esta manera, se mostrará de cierto color los enlaces si además, tienen el atributo títle.
a[href='http://gemablog-.blogspot.com/'][title] {color:salmon;}
Combinando esto con content, podrían hacerse cosas interesantes, lástima que no funcione en Internet Explorer, ni siquiera en las versiones nuevas:
a[href='http://gemablog-.blogspot.com/'] {color:salmon;}
a[href='http://gemablog-.blogspot.com/']:after {content: url(unaImagen);}

Este es un enlace a ninguna parte

Este es un enlace a Gema Blog


REFERENCIAS:w3.org

Pseudo-clases y pseudo-elementos (2)

Además de pseudo-clases hay pseudo-elementos, su uso es similar, sirven para identificar con precisión determinadas cosas y crear efectos.

:first-line identifica la primera línea de un párrafo. Aquí, le decimos que esa primera línea estará en negrita y de color amarillo:
p.ejemplo:first-line {color: yellow; font-weight: bold;}

<p class="ejemplo"> ... el texto ... </p>

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.


Esto, funcionará, sin importar el ancho del párrafo, esa primera línea es la que muestra el navegador, sea la que sea. Sólo tiene una restricción, como se refiere a textos, las propiedades que podemos usar son las que los afectan y cualquier otra, será ignorada:

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.


:first-letter es similar pero, identifica la primera letra de un párrafo:
p.ejemplo:first-letter {color: yellow; font-family: Georgia; font-size: 30px;}

<p class="ejemplo"> ... el texto ... </p>

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.


Por supuesto, ambas cosas pueden combinarse:
p.ejemplo:first-line {color:orange;}
p.ejemplo:first-letter {color:yellow;font-family:Georgia;font-size:30px;}

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.


:before y :after pueden usarse para agregar cierto contenido a una etiqueta ¿qué contenido? textos, imágenes, sonidos:
div.ejemplo p:before {content: url(unaImagen);}

<div class="ejemplo"> ... un texto ... </div>
En este ejemplo, le agregaremos una imagen a un texto:

Fusce venenatis ipsum eu nulla. Sed fringilla gravida odio. Duis adipiscing, sem eget pharetra posuere, diam leo posuere.


Y en este otro:
div.ejemplo p:after {content:'Texto agregado con CSS';}

<div class="ejemplo"><img src="unaImagen" /></div>
Le agregaremos un texto a una imagen:



Lamentablemente, tanto :before como :after no están implementados en Internet Explorer.

REFERENCIAS:w3.org

¿Hay alguien en casa?

Galería de imagenes muy sencilla

Esta es una galería de imágenes muy simple que nos muestran en alistapart.com y que se basa en un script muy pequeño que podemos agregar en cualquier parte de la plantilla, por ejemplo, antes de </head>:
<script type="text/javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('imgContenedor').src = whichpic.href;
if (whichpic.title) {
document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}
}
</script>
Para usarlo, debemos agregar tres partes:
  • una lista de enlaces donde el atributo href contendrá la URL de la imagen y el atributo title el texto optativo a ser mostrado
  • un bloque o una etiqueta con un ID específico (imgDescripcion) donde se mostrará el texto
  • una imagen inicial con un ID (imgContenedor) queserá la que vaya cambiando cuando hagamos click
Hablo de tres partes porque cada una de ellas puede estar en cualquier orden, dependerá de la forma en que se nos ocurra mostrarlo. Por ejemplo:
<ul>
<li><a onclick="return showPic(this)" href="URL_imagen1" title="texto_imagen_1">1</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen2" title="texto_imagen_2">2</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen3" title="texto_imagen_3">3</a></li>
</ul>

<div id="imgDescripcion">el texto inicial</p>

<img id="imgContenedor" src="URL_imagenInicial" />
Este es un ejemplo concreto con algunas variantes, incluyendo propeidades de estilo:

Galería de imágenes


<style>
div#ejemploGaleria {
background-color: #123;
border: 3px solid #234;
margin: 0 auto;
padding: 10px;
width: 480px;
}
span#imgDescripcion {
color: #ABC;
float: left;
font-size: 18px;
width: 250px;
}
ul#imgListaEjemplo{
float: right;
margin: 0;
}
ul#imgListaEjemplo li {
display: inline;
padding: 0 5px;
}
ul#imgListaEjemplo li a {
font-size: 16px;
}
img#imgContenedor{
margin-top: 10px;
}
</style>

<div id="ejemploGaleria">
<span id="imgDescripcion">Galería de imágenes</span>
<ul id="imgListaEjemplo">
<li><a onclick="return showPic(this)" href="URL_imagen1" title="Esta es la primera imagen">1</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen2" title="Esta es la segunda imagen">2</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen3" title="Esta es la tercera imagen">3</a></li>
<li><a onclick="return showPic(this)" href="URL_imagen4" title="Esta es la última imagen">4</a></li>
</ul>
<img id="imgContenedor" src="URL_imagenInicial" /></div>

Pseudo-clases y pseudo-elementos (1)

Las pseudo-clases son "palabras" adicionales que agregamos en una definición CSS para establecer algún tipo de efecto especial. Los más conocidos son los que usamos en los enlaces y el orden en que colocamos esas definciones es importante:

a {color:white} /* los enlaces se muestran de color blanco */

a:link {color:white} /* son blancos si no los visitamos */
a:visited {color:green} /* se ponen verdes si ya los visitamos */
a:hover {color:red} /* cambian a rojo si colocamos el puntero del ratón encima */
a:active {color:yellow} /* son amarillos cuando están activos */

Tambien es posible usarlas definiendo clases o IDs:

a.ejemplo:hover {color:red}
a#ejemplo:hover {color:red}

Y eventualmente, podríamos aplicarlo a etiquetas que no sean enlaces:

Este es un DIV de ejemplo.

No son las únicas pseudo-clases, hay otras.

:first-child es un poco complicado de explicar. Lo que hace, es darle ciertas propiedades al primer elemento que se encuentra dentro de otro. Por ejemplo:
div#ejemplo img:first-child {border:2px solid red;}

<div id="ejemplo">
<img src="unaImagen" />
<img src="otraImagen" />
</div>
Lo que decimos con esta definición es que en un cierto DIV, la primera etiqueta IMG que aparezca tendrá un borde pero las siguientes no:


Hay variantes. Esto colocará en rojo, todos los textos en negrita de la primera etiqueta P que esten dentro de cierto DIV
div#ejemplo p:first-child b {color:red}

<div id="ejemplo">
<p>Esto será <b>rojo</b> y esto otro <b>también</b>.</p>
<p>Pero ninguno de <b>estos</b> se verá de color <b>rojo</b>.</p>
</div>

Esto será rojo y esto otro también.

Per ninguno de estos se verá de color rojo.


REFERENCIAS:w3.org

Vamos a rodear a Bendetti

Mario Benedetti está pasando horas malas. Hemos pensado que podíamos ponernos a leer sus poemas por todo el mundo y así ayudarlo en este momento. Un poema, por si no tenéis algún libro suyo a mano. Y por si queréis pasarlo a otros amigos.

El cuaderno de Jose Saramago


Si cada hora vino con su muerte,
si el tiempo era una cueva de ladrones
los aires ya no eran Buenos Aires,
la vida nada más que un blanco móvil.

Usted preguntará ¿por qué cantamos?

Si los nuestros quedaron sin abrazos,
la patria casi muerta de tristeza
y el corazón del hombre se hizo añicos
antes de que explotara la vergüenza.

Usted preguntará ¿por qué cantamos?

Cantamos porque el río esta sonando y cuando suena el río suena el río.
Cantamos porque el cruel no tiene nombre y en cambio tiene nombre su destino.
Cantamos porque el niño y porque todo y porque algún futuro y porque el pueblo.
Cantamos porque los sobrevivientes y nuestros muertos quieren que cantemos.

Si fuimos lejos como un horizonte,
si aquí quedaron árboles y cielo,
si cada noche siempre era una ausencia
y cada despertar un desencuentro.

Usted preguntará ¿por qué cantamos?

Cantamos porque llueve sobre el surco y somos militantes de la vida.
Y porque no podemos ni queremos dejar que la canción se haga ceniza.
Cantamos porque el grito no es bastante y no es bastante el llanto ni la bronca.
Cantamos porque creemos en la gente y porque venceremos la derrota.

Cantamos porque el sol nos reconoce
y porque el campo huele a primavera
y porque en este tallo en aquel fruto
cada pregunta tiene su respuesta.

Wallpapers (Retro x 3)

Wallpapers (Retro)

Mostrar el tiempo de carga de las páginas

Para quienes gustan de verificar los tiempos de carga, en Himsomnio nos muestra un método para medir y mostrar el tiempo de carga de cualquier página web.

Usando un pequeño script podemos agregar esta función en nuestro sitio y, modificándolo un poco, podríamos usarlo para medir y mostrar el tiempo de carga de cada una de las páginas del blog.

Colocamos el siguiente script antes de </head>:
<script type='text/javascript'>
//<![CDATA[
var startTime = new Date();
function showElapsedTime() {
var testSiteUrl = location.href;;
var testSiteString = String(testSiteUrl).slice(testSiteUrl.indexOf("www"));
var endTime = new Date();
var elapsedTime = Number(endTime-startTime);
var browser=navigator.userAgent;
var platform=navigator.platform;
var msgString = "Tiempo de carga<br/> " + Number(elapsedTime/1000) + " segundos (" + elapsedTime + " ms)<br/><span>Navegador " + browser + "</span>";
document.getElementById("mostrarTiempo").innerHTML = msgString;
}
onload=function() {showElapsedTime();}
//]]>
</script>
Ahora, agregaremos un elemento HTML en la sidebar o en el footer, allíi donde quisiéramos que se mostrara:
<div id="mostrarTiempo">Cargando ...</div>
Eso es todo.

Si quisiéramos personalizarlo un poco, hay dos cosas que podemos hacer: modificar la salida del script:
var msgString = "Tiempo de carga<br/> " + Number(elapsedTime/1000) + " segundos (" + elapsedTime + " ms)<br/><span>Navegador " + browser + "</span>";
y agregarle propiedades CSS:
<style>
#mostrarTiempo {
border: 1px dotted #456;
color: #CDE;
font-size: 12px;
padding: 10px;
text-align: center;
}
#mostrarTiempo span {
display: block;
color: #678;
font-size: 11px;
}
</style>

Cargando ...