Centrar las cosas en una página web

JMiur [E]

Una pregunta recurrente: ¿cómo centrar algo?

En realidad, es bastante sencillo pero debemos tener claro un concepto: no todos los elementos (etiquetas) de una página web pueden centrarse; sólo aquellos llamados "bloques".

Podemos decir que hay dos tipos de etiquetas, las que por defecto son bloques y las que por defecto no son bloques (inline). Entre las primeras están P, H1, H2, H3, H4, H5, H6, UL, OL, PRE, DL, DIV, BLOCKQUOTE, FORM, TABLE, etc.

¿Que es eso de bloques?

Los bloques tienen una particularidad, poseen un ancho equivalente al total del área donde se encuentran y crean un salto de línea automático; es decir, ocupan todo el ancho y se separan del elemento anterior y del elemento siguiente.

DIV
DIV
DIV

Los elementos inline se muestran uno al lado del otro y, si el contenido supera el ancho disponible, continuan "debajo":

DIV
SPAN-1SPAN-2SPAN-3SPAN-4SPAN-5
DIV

Todo lo que agregamos en una página mediante etiquetas HTML es un rectángulo que tiene un contendio y un borde (border) que puede estar visible o no. Entre ese borde y el contenido hay un área de relleno (padding) y entre ese borde y otro elemento hay un área de margen (margin) que los separa.

Vamos a ver un código común; una imagen en un DIV al que le damos un tamaño y le ponemos un borde. Como no la alineamos, aparecerá sobre la izquierda:
<div style="border: 1px solid red; width: 300px;"><img src="laImagen" /></div>


La primera etiqueta que aprendemos y las más evidente es <center> </center>
<center>
<div style="border: 1px solid red; width: 300px;"><img src="laImagen" /></div>
</center>

No está mal pero es una etiqueta depreciada, se recomienda no usarla pero, es una alternativa. Como ven, centra el DIV y el contenido. Si quisiéramos centrar sólo el DIV pero no el contenido, nos veríamos en problemas.

La segunda posibilidad que nos enseñanban era usar el atributo ALIGN que tampoco está recomendado y que no resuelve el problema ya que centrará el contenido pero no el DIV:
<div align="center" style="border: 1px solid red; width: 300px;"><img src="laImagen" /></div>


La forma más segura de centrar algo es utilizando las propiedades CSS y hay que entender su significado. La propiedad básica es text-align: center; y su nombre puede llevar a confusión; lo que centra, es el contenido de un bloque, no sólo textos, cualquier cosa:
<div style="text-align: center; border: 1px solid red; width: 300px;"><img src="laImagen" /></div>


Como se ve, text-align: center; es el equivalente a align="center".

¿Qué pasaría si colocamos ese estilo en la imagen? Nada, no produciría ningún efecto porque la etiqueta IMG es de tipo inline; lo mismo ocurriría si usáramos SPAN o A:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

¿Y cómo centramos el bloque?

Para eso, usamos la propiedad margin al que le ponemos un valor especial: auto pero, siempre y cuando esté definda tambien la propiedad width ya que si no lo está, el ancho por defecto es todo el ancho disponible.

Ahora sí, podemos centrar el bloque y el contenido de manera independiente:
<div style="margin: 0 auto; text-align: right; border: 1px solid red; width: 300px;"><img src="laImagen" /></div>


Todos los elementos HTML tienen propiedades CSS por defecto pero pueden cambiarse así que, un elemento de bloque puede ser transformado en un elemento inline y viceversa; para eso, hay una propiedad llamada display:

display: inline; /* elemento inline */
display: block; /* elemento bloque */

Por ejemplo, podríamos transformar la imagen en un bloque:
<img style="border: 1px solid red; margin: 0pt auto; padding: 0 125px; display: block;" src="laImagen" />

aScroller: Un script para desplazar contenidos

Este script de Argilla es una forma de reemplazar las MARQUEES de manera sencilla y funciona en la mayoría de las versiones de Internet Explorer, Firefox, Safari y Opera.

Lo primero que debemos hacer es descargar el archivo y agregarlo en la plantilla antes de </head>; ya sea alojándolo en un servidor propio:
<script src='URL_aScroller-1.0.js' type='text/javascript'></script>
o insertando su contenido entre estas etiquetas:
<script type='text/javascript'>
//<![CDATA[
[ ... el contenido del archivo ...]
//]]>
</script>
Para utilizarlo, debemos definir un DIV al que le daremos un nombre único, con el atributo ID y adentro de este, colocaremos otro DIV donde irá el contenido a ser mostrado. Inmediatemente después, colocaremos la llamada a la función:

divScroller("nombreID", "modo", velocidad, delay);

nombreID el nombre del DIV
modo "h" para un scroll horizontal y "v" para un scroll vertical
velocidad de desplazamiento (a valores más altos, menor velocidad)
delay demora entre mensajes cuando es vertical (en microsegundos)

Un ejemplo de scroll horizontal:
<div id="sDemo1" style="height: alturapx; width: anchopx;">
<div>....... aquí va el contenido a mostrar .......</div>
</div>
<script type="text/javascript">divScroller("sDemo1", "h", 20, 3000);</script>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div id="scrollDemo1" style="height:20px;width:100%;"><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...</div></div><script type="text/javascript">divScroller("scrollDemo1", "h", 10, 1000);</script>

Dentro del atributo STYLE, debemos colocar, obligatoriamente, el ancho y el alto del elemento pero, podemos agregar otras propiedades como colores y fuentes.

En este ejemplo, todo lo anterior está colocado dentro de otro DIV externo que tiene una imagen de fondo y simula una marquesina:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

<div style="background:transparent url(imagenFONDO) no-repeat 50% 50%;width:100%;height:50px;"><div id="scrollDemo2" style="color:#FFFFFF;font-size:20px;height:50px;line-height:50px;margin:0 auto;width:400px;"><div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...</div></div><script type="text/javascript">divScroller("scrollDemo2", "h", 20, 1000);</script></div>

El modo "vertical" fuciona de la misma manera. En este ejemplo, sólo cambiamos "h" por "v":

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

En los scrolls verticales, es posibile agregar múltiples párrafos. Si ponemos cada uno dentro de un DIV, se mostrarán de manera secuencial:

PARRAFO 1: Lorem ipsum dolor sit amet ...
PARRAFO 2: Ut wisi enim ad minim veniam ...
PARRAFO 3: Duis autem vel eum ...
PARRAFO 4: At vero eros et accumsan ...

<div id="scrollDemo3" style="height: 40px; color:#FFFFFF;line-height: 40px; width: 400px;margin:0 auto;text-align:center;font-size:17px;"><div style="background-color:#3E5266;">PARRAFO 1: Lorem ipsum dolor sit amet ...</div><div style="background-color:#4E6276;">PARRAFO 2: Ut wisi enim ad minim veniam ...</div><div style="background-color:#5E7286;">PARRAFO 3: Duis autem vel eum ...</div><div style="background-color:#6E8296;">PARRAFO 4: At vero eros et accumsan ...</div></div><script type="text/javascript">divScroller("scrollDemo3", "v", 20, 3000);</script>

Ambos modelos permiten colocar casi cualquier tipo de contenido dentro de los DIVs así que también es una forma sencilla de crear un slideshow o un blogroll ya que podemos utilizar imágenes o enlaces además de poder establecer estilos individuales.

El resto, depende de la imaginación sonrisa

Paul Neave: Experimentos con Flash


Paul Neave es un inglés que se dedica a hacer animaciones de Flash interactivas. Su sitio merece ser visto y como si fuera poco, todos sus experimentos están disponibles para ser descargados, no solo los SWFs sino los códigos fuentes así que es una buena manera de aprender.

Flash Earth y Planetarium son mapas satelitales que utilizan diferentes fuentes, incluyendo la NASA.

Experimentos visuales: Anaglyph | Strobe | Television | Fractal, Dandelion | Light

Estos son dos ejemplos descargados, Bounce e Imagination:

Click para ver las animaciones.

Un widget usando Google AJAX Feed API

Google Ajax Feed API es una herramienta que nos permite crear widgets donde se mostrarán feeds de manera dinámica, eligiendo "palabras clave".

Hay tres formatos diferentes y no es mucho lo que puede configurarse. Está pensado como una forma sencilla de mostrar noticias de otros sitios aunque al no poder elegirlos y sólo poder establecer "palabras", funciona como un buscador es decir, los resultados mostrados son un poco aleatorios; sin embargo, tal vez también nos sirva para mostrar nuestras propios feeds.

Como podemos previsualizar los cambios, todo es cuestión de probar y probar. Una vez que encontramos algo que nos parezca satisfactorio, simplemente hacemos click en generar y nos mostrará el código que deberemos copiar y pegar donde quisiéramos mostrarlo.

Loading...

On focus

Según estudios el promedio normal que una persona muestra atención es de 10-12 minutos, es decir, 10-12 minutos es el tiempo que una persona puede hacer una actividad centrándose absolutamente y solamente en ella. Después de ese tiempo la atención disminuirá y como consecuencia descenderá también la productividad.

... Uyyy parece que va a llover ¿de que hablaba?

REFERENCIAS:
  • Cosas sencillas
  • Un sueco llamado Albin

    Yo siempre creí que la patafísica sólo era un cosa que estudiaba Joan, la difunta noviecita de Maxwell, el que iba por la vida con un martillo en la mano pero, estaba profundamente equivocado.

    La patafísica es un movimiento cultural que surgió en Francia allá por 1950 y que tiene raices e común con el surrealismo. Es "una ciencia burlona" dedicada al estudio de las soluciones imaginarias para los problemas que no existen. En lo personal, creo que eso la hace absolutamente genial y en su momento, muchos intelectuales se hicieron seguidores de ella: Raymond Queneau, Boris Vian, Eugène Ionesco, Jean Genet, Joan Miró, Umberto Eco, etc (más información)

    Pero vamos al punto.

    Dos suecos, Elisabeth y Lasse Diding intentaron registrar un nombre para su hijo nacido en 1991 pero, el nombre fue rechazado basándose en una ley que dice que: "Los nombres a registrar no serán aprobados si pueden ser causa de ofensa, provocar incomodidad o por razones obvias, no sean compatibles con un primer nombre." Como protesta, enviaron otra petición, argumentando que el nuevo nombre era una creación artística basada en el espíritu de la patafísica.

    Querían llamarlo:

    Brfxxccxxmnpcccclllmmnprxvclmnckssqlbb11116

    Para más exactitud:

    Brfxxccxxmnpcccclllmmnprxvclmnckssqlbb11116 Hallin

    Un tiempo después, intentaron llamarlo "A" (se pronunciaba Albin) y una vez más, el pedido fue rechazado y los padres, multados (más información).

    Como resultado de tanta discusión, el niño no tiene nombre y su pasaporte dice eso pero, claro, en sueco: "Icke namngivet gossebarn".

    No es el primer ni el único caso de nombres estrafalarios; la Wikipedia tiene una lista de personas con nombres un tanto exóticos:
    • Rhoshandiatellyneshiaunneveshenk Koyaanisquatsiuth Williams es una niña de Texas
    • Creedence Clearwater Couto es el nombre de un jugador de football de Brasil
    • Espn es el nombre de dos niños de USA
    • Yahoo Serious es un actor australiano
    • Yahoo es el primer nombre de un niño en México
    • Rodolpho Pierre Filibert Alphanzo Rafael Gugliemli di Valentina d'Antoguella es el verdadero nombre del actor Rodolfo Valentino
    • Brian Peter George St. John le Baptiste de la Salle Eno es el nombre real del músico inglés Eno
    Hay peores:
    • Siddig El Tahir El Fadil El Siddig El Abderahman El Mohammed Ahmed El Abdel Karim El Mahdi es un actor de TV que trabajaba en la serie Star Trek Deep Space 9
    • Crystal Ocean Supri Heavenly Blue Sky Hellman es una actriz
    • Clarissa Theresa Philomena Aileen Mary Josephine Agnes Elsie Trilby Louise Esmerelda Dickson Wright es una famosa chef británica
    • Anna Bertha Cecilia Diana Emily Fanny Gertrude Hypatia Inez Jane Kate Louise Maud Nora Ophelia Prudence Quince Rebecca Sarah Teresa Ulysis Venus Winifred Xenophon Yetty Zeno Pepper es una mujer inglesa
    • Autumn Sullivan Corbett Fitzsimmons Jeffries Hart Burns Johnson Willard Dempsey Tunney Schmeling Sharkey Carnera Baer Braddock Louis Charles Walcott Marciano Patterson Johansson Liston Clay Frazier Foreman Brown es el nombre de un niño norteamericano, nacido e nel 2007
    • Lleieusszuieusszesszes Willihiminizisteizzi Hurrizzissteizzi un residente de Los Angeles
    • Louis George Maurice Adolphe Roche Albert Abel Antonio Alexandre Noë Jean Lucien Daniel Eugène Joseph-le-brun Joseph-Barême Thomas Thomas Thomas-Thomas Pierre Arbon Pierre-Maurel Barthélemi Artus Alphonse Bertrand Dieudonné Emanuel Josué Vincent Luc Michel Jules-de-la-plane Jules-Bazin Julio César Jullien un francés nacido en 1812
    • James Dr No From Russia with Love Goldfinger Thunderball You Only Live Twice On Her Majesty's Secret Service Diamonds Are Forever Live and Let Die The Man with the Golden Gun The Spy Who Loved Me Moonraker For Your Eyes Only Octopussy A View to a Kill The Living Daylights Licence to Kill Golden Eye Tomorrow Never Dies The World Is Not Enough Die Another Day Casino Royale Bond un polaco
    • Zenzile Makeba Qgwashu Nguvama Yiketheli Nxgowa Bantana Balomzi Xa Ufun Ubajabulisa Ubaphekeli Mbiza Yotshwala Sithi Xa Saku Qgiba Ukutja Sithathe Izitsha Sizi Khabe Singama Lawu Singama Qgwashu Singama Nqamla Nqgithi es un cantante sudafricano
    ¿Puede ser peor aún? Sí:
    • I AM THE BEAST SIX SIX SIX OF THE LORD OF HOSTS IN EDMOND FRANK MACGILLIVRAY JR NOW. I AM THE BEAST SIX SIX SIX OF THE LORD OF HOSTS IEFMJN. I AM THE BEAST SIX SIX SIX OF THE LORD OF HOSTS. I AM THE BEAST SIX SIX SIX OTLOHIEFMJN. I AM THE BEAST SSSOTLOHIEFMJN. I AM THE BEAST SIX SIX SIX. BEAST SIX SIX SIX LORD
    Pero no sólo los suecos son "locos". Los nombres de los hijos y nietos del músico Frank Zappa son: Moon Unit Zappa, Dweezil Zappa, Ahmet Emuukha Rodan Zappa, Diva Magika Zappa.

    Por lo menos, él tenía claro el asunto. Cuando le preguntaron el por qué de esos nombres, respondió:

    "Porque se nos dio la gana. En realidad, la gente se preocupa por esos extraños nombres pero no me parece que sea un problema; para ellos, el problema será el apellido."

    verguenzaanim


    New York 1981
    Parte 1Parte 2
    Click para ver los videos.

    Wallpapers (todo XP)

    WordOff: Limpiar el código de Word online

    Usar Microsoft Word o cualquier otro procesador de texto para escribir directamente en el blog no es buena idea (más información). Son muchas las consultas sobre problemas que terminan siendo causados por códigos que se agregan sin que nos demos cuenta.

    Esto es lo que siempre ocurre cuando copiamos "texto enriquecido" en el editor; no sólo es un problema de Word, lo mismo ocurriría si copiamos y pegamos directamente de una página web.

    Limpiarlo no es sencillo, generalmente es más rápido escribirlo otra vez y l oque suele recomendarse es pegar en el Modo HTML o en el block de notas para quedarnos sólo con el texto plano.

    Ahora, según veo en labnol.org, hay una herramienta online que puede ayudar a realizar esa limpieza. Se trata de wordoff; allí, pegamos el código HTML generado y la herramienta eliminará los elementos vacios, todas las etiquetas DIV y SPAN, los atributos de las etiquetas excepto los enlaces, los saltos de línea extras, etc.

    Creando buscadores sólo con imágenes

    Hace un tiempo vi un artículo en Trade Show Resources que explicaba como crear un buscador utilizando imágenes de fondo. Me gustó el resultado pero me pareció complejo de implementar.

    El problema de sólo usar imágenes en algunos controles de los formularios es que en Internet Explorer se produce un efecto extraño; cuando el texto que ingresamos es demasiado largo, el fondo se desplaza (realiza un scroll). Este ejemplo muestra el error:


    Por lo general, para resolver este problema se recurre a hacks pero, no hace falta y hay dos soluciones posibles.

    Como lo que queremos es mostrar una imagen en lugar de los controles del navegador, podemos ubicar la imagen en la etiqueta FORM en lugar de colocarla en la etiqueta INPUT:


    La otra opción es más sencilla, en lugar de alinear el fondo a la izquierda, como hacemos por defecto, lo alineamos a la derecha y de esa manera, el scroll no lo afecta. Vamos a basarnos en esa solución para continuar agregando los efectos.

    La idea es que el formulario de búsqueda sean sólo imágenes, tanto el control donde ingresamos el texto como el botón de envío. Además vamos a hacer que tenga un efecto similar al mouseover, que cuando comencemos a escribir, cambie la imagen y que cuando salimos del control de texto, se restaure la imagen original.

    El resultado final sería algo así:


    En este caso, necesitaremos tres imágenes:

    Fondo 150x46Botón 60x23Botón 60x23

    Para crear ese efecto, nos vamos a valer de dos eventos (más información):

    onfocus="instrucciones" se activa cuando un control recibe el foco (hacemos click adentro)
    onblur="instrucciones" se activa cuando un control pierde el foco (hacemos click afuera)

    En esos dos eventos, le vamos a decir que, cuando se ejecuten ,"hagan algo", en este caso, que cambien de clase CSS. La sintaxis genérica sería esta:
    <input value="" type="text"
    class="elBuscadorBLUR"
    onfocus="className='elBuscadorFOCUS';"
    onblur="className='elBuscadorBLUR';"
    />
    Por último, para evitar cargar imágenes con la consiguiente demora, vamos a usar una técnica que ya fue explicada en otra entrada y que consiste en usar solo una imagen de fondo y mostrar una mitad, la superior o la inferior aprovechando que la propiedad background nos permite ajustar la posición exacta. La sintaxis de estas propiedades serían estas:
    .elBuscadorBLUR {background: transparent url(URL_laImagen) no-repeat right top; height: valorpx;}
    .elBuscadorFOCUS {background: transparent url(URL_laImagen) no-repeat right bottom; height: valorpx;}
    Este es el el código HTML para el buscador:
    <form id="elBuscador" target="_blank" method="get" action="http://miSitio.blogspot.com/search">
    <input value="" name="q" type="text" class="elBuscadorBLUR"
    onfocus="className='elBuscadorFOCUS';"
    onblur="className='elBuscadorBLUR';" />
    <input src="URL_imagenBotonNORMAL" class="elBuscadorENVIO" type="image"
    onmouseover="this.src='URL_imagenBotonOVER';"
    onmouseout="this.src='URL_imagenBotonNORMAL';" />
    </form>
    Y ahora el estilo CSS que agremos antes de </b/skin>:
    form#elBuscador { /* el formulario en general */
    height: 23px; /* es igual a la altura de la imagen */
    margin: 0; /* eliminamos los márgenes por defecto */
    padding: 0; /* eliminamos los paddings por defecto */
    width: 215px; /* el ancho total */
    }
    form#elBuscador input { /* los controles en general */
    border: 0; /* eliminamos el borde de los controles */
    color: #FFFFFF; /* el color del texto */
    float: left; /* nos permite colocarlos uno al lado del otro */
    font-size: 14px; /* el tamaño del texto */
    height: 20px; /* la altura de la imagen menos el padding superior */
    margin: 0; /* eliminamos los márgenes por defecto */
    padding: 3px 5px 0; /* con esto controlamos la posición del texto */
    width: 140px; /* el ancho de la imagen menos los paddings dercho e izquierdo */
    }
    .elBuscadorBLUR { /* el fondo normal */
    background: transparent url(URL_search-box-bg.png) no-repeat right top;
    }
    .elBuscadorFOCUS { /* el fondo activo */
    background: transparent url(URL_search-box-bg.png) no-repeat right bottom;
    }
    .elBuscadorENVIO { /* el botón de envio */
    padding: 2px 0 0 5px !important; /* lo alineamos con el control */
    width: 60px !important; /* es igual al ancho de la imagen */
    }

    REFERENCIAS:
  • Personalizando los buscadores 1
  • Personalizando los buscadores 1
  • Descargando archivos usando Scriptaculous

    Drag to Download es un script que utiliza Prototype y Scriptaculous para crear un sistema sencillo que nos permite descargar un archivo con sólo arrastrarlo.

    Aunque parezca algo engorroso es bastante sencillo y tiene la particularidad de poder adaptarse a muchos diseños gráficos.

    Para probarlo, podemos descargar el ZIP que contiene un demo y un ejemplo con las correspondientes imágenes. De todo eso, lo único fundamental es el archivo dragdrop.js que alojamos en un servidor como Goo... como el que encontremos diablo1

    Lo incorporamos justo antes de </head>:
    <script src="URL_dragdrop.js" type="text/javascript"></script>
    Por supuesto, también debemos tener Prototype y Scriptaculous agregados en la plantilla.

    Vamos a ver cómo usarlo basándonos en el mismo demo del ejemplo. La idea es sencilla; tenemos que crear un bloque contenedor (en este caso lo llamaremos container) dentro del cual, colocaremos otros tres:

    El primero tendrá la fuente y en este caso es una imagen (folder_grey.png), desde allí, arrastraremos el archivo (lo llamaremos drag).
    El segundo tendrá el destino, hacia allí arrastraremos el archivo (lo llamaremos dropwrap) y dentro de este, habrá otro al que llamaremos drop y que también sólo será una imagen (download_box.png).
    El tercero y último sólo contiene un texto explicativo y lo llamamos status.
    <div id="container">
    <div id="drag" class="item"><img src="URL_folder_grey.png" /></div>
    <div class="dropwrap">
    <div id="drop"><img src="URL_download_box.png" /></div>
    </div>
    <div id="status">Arrastre el ícono para descargar el archivo</div>
    </div>
    Cada uno de ellos tendrá un nombre que lo identifica (ID) y una vez creados esos bloques, sólo nos falta agregar el script que los controlará así que inmediatamente después, ponemos lo siguiente:
    <script type="text/javascript">
    new Draggable('drag',{revert: 'true', constraint: 'horizontal'});
    Droppables.add('drop', {
    accept: 'item',
    hoverclass: 'hovered',
    greedy: 'false',
    onDrop: function() {
    $('status').innerHTML = "Descargando el archivo ...";
    window.location.href="URL_archivo";
    }
    });
    </script>
    Recuerden que todo esto, si lo incluimos en un post, debemos escribirlo en una sola línea.

    Lo que nos faltaría es darle un poco de estilo así que podemos usar las propiedades CSS:
    <style type="text/css">
    #container { /* el bloque contenedor */
    background-color: #404951;
    border: 1px solid #99AABB;
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 20px;
    width: 500px;
    }
    #status { /* el texto a mostrar */
    text-align: center;
    color: #99AABB;
    font-size: 17px;
    line-height: 60px;
    }
    #drag { /* el bloque fuente */
    cursor: move;
    float: left;
    }
    #drop { /* el bloque de destino */
    color: #FFFFFF;
    float: right;
    }
    .hovered { /* el efecto al arratrar el archivo sobre la zona de descarga */
    background: url(URL_download_white.png) no-repeat center center;
    }
    </style>
    Y eso es todo, el archivo ZIP conteniendo los archivos puede descargarse desde aquí:

    Arrastre el ícono para descargar el archivo

    REFERENCIAS:
  • Drag and Drop usando Scriptaculous (1)
  • Drag and Drop usando Scriptaculous (2)
  • Akinator

    Click para jugar.

    REFERENCIAS:
  • Home Page
  • Optimizando el CSS en Blogger

    ¿Obsesivo? Sin duda; y por eso sigo con lo de los elementos condicionales de Blogger. Esta vez, tratando de usarlos para aliviar un poco más la carga del blog.

    Todos nos preocupamos por si tal o cual script es más o menos lenta y eso está bien; probablemente, no nos preocupamos por el código CSS y a decir verdad, optimizar las hojas de estilos es muy importante ya que suelen ocupar muchos bytes y reducir su tamaño implica reducir el tamaño del archivo y por ende, del tiempo de carga.

    Hay algunas herramientas online como Robson CSS Compressor que hacen el trabajo por nosotros y, desde el punto de vista del tamaño, la diferencia puede ser sustancial (entre un 25% y un 30% menos) sin embargo, ese tipo de compresión transformará el código en algo casi ilegible, imposible de editar:

    body{background-color:#343F4A;color:#CCC;font-family:'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;font-size:12px;margin:0;min-width:920px;padding:0;text-align:center}.clear{clear:both;line-height:0;height:0}#navbar-iframe{height:0;visibility:hidden;display:none}a,a:visited,a:link{color:#AAA;outline:none;text-decoration:underline}a:hover{color:#FFF;outline:none}a img{border:none;outline:none;text-decoration:none}object{outline:none}h1,h2,h3,h4,h5,h6{font-family:'Trebuchet Ms', helvetica, arial, sans-serif;margin:10px 0}p,ol,ul{margin:10px 0}pre{color:#F0F0F0;font-family:Tahoma,Arial,'Trebuchet Ms';font-size:13px;line-height:17px;margin:10px 0 10px 10px}pre.long{white-space:pre-wrap}.code{background-color:#EFEFF7;border:2px solid #399BA6;color:#000;font-family:Courier New,Courier,monospace;padding:15px 5px 15px 15px}blockquote{background:#f2f8fc url('http://photos1.blogger.com/blogger2/323/4098/200/bloque1.png') no-repeat scroll left top;color:#222;margin:0 0 5px 20px;padding:0;text-align:center;width:250px;font:italic 15px Georgia, Arial}blockquote p{background:transparent url('http://photos1.blogger.com/blogger2/323/4098/200/bloque2.gif') no-repeat scroll right bottom;margin:0;padding:15px 10px 15px 15px}blockquote a,blockquote a:link,blockquote a:visited{color:navy !important}blockquote a:hover{color:red !important}#outer-wrapper{background:url(http://1.bp.blogspot.com/_hljKDuw-cxQ/SBItbDfE_JI/AAAAAAAAF6I/pRtfJBj61Ug/s00/containerbg920.gif) repeat-y;margin:0 auto;position:relative;text-align:left;width:920px}#wrap2{background:none;border-bottom:1px solid #5b626A;margin:0 10px;position:static;width:auto}#header-wrapper{background:#600 url(http://1.bp.blogspot.com/_hljKDuw-cxQ/R1kDitXTIyI/AAAAAAAAELw/x9jfV1UftKU/s00/VAGAheader_1.png) no-repeat;height:176px;margin-top:-3px;position:relative;width:900px}#header-inner{padding:20px 0 0;position:static}

    Otras herramientas como CleanCSS son menos severas sin embargo, algunas optimizaciones son posibles si nos tomamos el trabajo de revisar.

    En lo posible, sería buena idea colocar todos nuestras definiciones de estilo dentro de <b:skin> </b:skin>, de esa manera eliminamos las etiquetas STYLE redundantes y, si necesitamos identificarlas, podemos comentarlas:
    /* --- Vinculos y Objetos */
    a, a:visited, a:link {
    color:#AAA;
    outline:none;
    text-decoration:underline;}
    a:hover {color:#FFF;outline:none;}
    a img {
    border:none;
    outline:none;
    text-decoration:none;
    }
    Allí, en el ejemplo, ya podemos ver algunas otras optimizaciones posibles.

    Eliminar los espacios innecesarios depende de nuestra forma de trabajo. Lo ideal es que no haya ninguno así que deberemos encontrar alguna solución intermedia que nos permita tener código reducido pero legible.

    Optimizar los valores de los colores:
    • cambiar los valores largos tipo #AAAAAA por #AAA
    • cambiar los valores de tipo rgb(255,255,255) por el valor hexadecimal FFF
    si estamos en la sutileza, colocar red en lugar de #FF0000 y, en términos generales, elegir siempre el valor que ocupe menos caracteres. Todos estos valores significan lo mismo:

    #FFEBCD = BlanchedAlmond = rgb(100%,92%,80%) = rgb(255,235,205)

    Eliminar las unidades de cualquier valor igual a cero:
    margin: 0px 10px;
    equivale a:
    margin:0 10px;

    Unificar las definiciones cuando sea posible (border, background, font, margin, padding):
    .clase1 {margin-bottom: 0px; margin-left: 100px; margin-right: 20px; margin-top: 0px;}
    equivale a:
    .clase1 {margin:0 20px 0 100px;}

    .clase2 {margin-bottom: 0px; margin-left: 20px; margin-right: 20px; margin-top: 0px;}
    equivale a:
    .clase2 {margin:0 20px;}

    Lo mismo ocurre con la propiedad background:
    .clase3 {background-attachment: scroll; background-color: transparent; background-image: url(URL_imagen); background-position: left 50%; background-repeat: no-repeat;}
    equivale a:
    .clase3 {background: transparent url(URL_imagen) no-repeat scroll left 50%;}

    Sería bueno revisar que no hubiera definiciones repetidas y en ese caso, unificarlas (es algo bastante común); lo mismo ocurre con propiedades que se sobrescriben:
    a, a:visited, a:link  {
    color:#AAA;
    outline:none;
    text-decoration:underline;
    color:#CCC;
    }
    ¿Y qué tiene que ver esto con los elementos condicionales de Blogger?

    Nuestra plantilla tiene una sola hoja, es un archivo. Blogger lo lee y actua en consecuencia. Si estamos en el home, la página principal se muestra de cierta forma; si estamos en una entrada individual, se muestra de otra forma. El ejemplo típico son los comentarios que sólo vemos desplegados en las páginas individuales y en la principal ni siquiera están ocultos, Blogger, simplemente "se saltea" ese código.

    Hay que tener muy claro que, un elemento ocultado con CSS (display: none) se carga de la misma manera que los visibles así que "ocultar" algo no reduce el tiempo de carga.

    Por defecto, no importa en que tipo de página estemos, el CSS se carga igual así que bien podríamos condicionarlo y crear tres grupos:
    <b:skin>
    [... aquí val las definiciones generales ...]
    </b:skin>

    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css';>
    [... aquí van las definiciones exlusivas para la página principal ...]
    [por ejemplo: Posts expandibles]
    [por ejemplo: Paginación]
    </style>
    </b:if>

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css';>
    [... aquí van las definiciones exlusivas para la páginas individuales ...]
    [por ejemplo: Comentarios]
    [por ejemplo: Formulario de comentarios incrustado]
    [por ejemplo: Post relacionados]
    [por ejemplo: Marcadores sociales]
    </style>
    </b:if>
    No son grandes cambios pero, todo suma.

    Blooger y los cambios de septiembre

    En Blogger in Draft apareció la lista de "mejoras" y "arreglos" realizados durante septiembre. Pocos, muy pocos.

    Uno de los importantes es que están incorporando la posibilidad de Suscribirse a los comentarios en el nuevo formulario incrustado de tal manera de acercarse un poco más a las opciones que existen en el "viejo modelo".

    Según Rosa, parecería que no funciona bien e incluso advierte que hay errores en los feeds y que esto puede ser un problema circunstancial debido a esa inclusión ... veremos, esperemos, suspiremos.

    Algo que nos desvela es la imposibilidad de modificar ese formulario. A los problema de los fondos de plantilla oscuros donde ciertos textos no se ven ya que están escritos en negro, ahora le sumamos el espantoso azul del enlace que para colmo, dice Suscribe, lo que es un poco confuso para quien no sepa de qué se trata ya que puede creer que se trata de otro tipo de suscripción.

    No. Hasta donde sé, no hay nada que pueda hacerse para cambiarlo. Si alguien tiene una idea, escucho ansioso.

    De todas formas, en Blogger in Draft aparece una última frase un poco críptica: "We’ve also added improved color matching in the form for all browsers."

    No sé a que se refiere y es un poco inentendible que el IFRAME no se adapte a las plantillas tal como hacen otros widgets del mismo Blogger. Lo que si he visto y tampoco comprendo, es que si cargamos una plantilla nueva, el código del formulario es levemente distinto. Debajo del IFRAME aparece una instrucción diferente:
    <iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' ... />
    <data:post.iframeColorizer/>
    Eso de data:post.iframeColorizer se transforma luego en un script al generar la página:
    <script src="http://www.blogger.com/jsbin/41356324-iframe_colorizer.js" type="text/javascript">
    ¿Hace algo? Ni idea; no veo diferencias entre un blog que lo tenga incorporado y otro que no lo tenga, tal vez sea un script para el futuro. Blogger es muy silencioso, jamás explica.

    Últimas entradas en una categoría

    Si mezclamos la posibilidad de utilizar elementos condicionales con el servicio de Feed2JS, podríamos crear un widget en la sidebar que mostrase en las páginas individuales, una lista con las últimas entradas que tengan la misma etiqueta que el post.

    Como no hay ninguna instrucción de Blogger que nos permita conocer las etiquetas de un post fuera del bucle que lo muestra, vamos a usar JavaScript para "guardar" ese dato y utilizarlo luego.

    Lo primero que debemos hacer es colocar una línea en la plantilla; expandiendo los artilugios, buscamos el código correspondiente al bucle que muestra las etiquetas (arriba o abajo de los posts) y añadimos eso marcado en color:
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <script>
    var etiquetasRelacionadas=&quot;<data:label.name/>&quot;;
    </script>

    <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
    Simplemente, creamos una "variable" a la que llamamos etiquetasRelacionadas y donde guardamos el dato que nos devuelve Blogger en <data:label.name/> es decir, el nombre de una etiqueta.

    Ahora, deberíamos agregar un elemento HTML que ubicaremos en la sidebar donde quisiéramos que se mostrase y allí, colocamos lo siguiente:
    <script type="text/javascript">
    var fuente = "http://feed2js.org//feed2js.php?src=http://nuestroBlog.blogspot.com/feeds/posts/summary/-/" + etiquetasRelacionadas + "&amp;chan=n&amp;num=10&amp;desc=0&amp;html=p&amp;date=n&amp;targ=y&amp;utf=y";
    document.write('<script src="' + fuente + '"><\/script>');
    </script>
    Donde lo único que debemos cambiar es nuestroBlog.blogspot.com por la dirección de nuestro blog.

    Lo que hará ese script es construir la dirección de los feeds de la etiqueta que siempre tiene la misma estructura:

    http://nuestroBlog.blogspot.com/feeds/posts/summary/-/nombreEtiqueta

    Y luego, creará una etiqueta SCRIPT y la escribirá en la página.

    Por último, como esto sólo tendrá sentido en una página individual, deberemos volver a la plantilla, expandir los artilugios y modificar el elemento para que no se muestre en el resto de las páginas:
    <b:widget id='HTMLX' locked='false' title='ETIQUETAS CONDICIONALES' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
    <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    <b:include name='quickedit'/>
    <b:else/>
    <style>#HTMLX {display: none;}</style>
    </b:if>
    </b:includable>
    </b:widget>
    En el ejemplo, sólo detectamos una etiqueta (esa es una limitación) pero, con alguna modificación podríamos "guardar" varias usando un array aunque no se me ocurre cómo podríamos utilizarlas verguenza

    Greenpeace y el Eco-Terror



    Mostrar elementos condicionales en la sidebar

    La sidebar del blog suele ser una de las cosas más "pesadas" a la hora de cargarlo. Solemos colocarles muchas cosas ... tal vez, demasiadas pero, es parte de nuestra idiosincracia.

    En Blogger, hay una forma bastante sencilla de colocar condiciones de tal manera que el blog se muestre diferente en función del tipo de página donde nos encontramos. Básicamente, lo que podemos detectar es si estamos en una página de entradas individuales o no; para eso, hay un dato interno que lo indica:

    data:blog.pageType = "item"

    Si esto es así, entonces, también sería sencillo hacer que ciertos elementos de la sidebar se muestren o se oculten según sea el tipo de página.

    Todos los elementos que agregamos tiene la misma estructura; por ejemplo, si agregáramos un elemento HTML con el título MI ELEMENTO; podría verse esto:
    <b:widget id='HTML7' locked='false' title='MI ELEMENTO' type='HTML'>
    <b:includable id='main'>
    [ ... el código interno ... ]
    </b:includable>
    </b:widget>
    HTML7 es el ID que variará de acuerdo a la cantidad que tengamos agregados y el atributo type será diferente si se trata de otro tipo de elemento (Label, Archive, Feed, etc).

    Blogger no nos deja colocar código antes de b:widget así que colocaremos la condición adentro:
    <b:widget id='HTML7' locked='false' title='MI ELEMENTO' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.pageType == "item"'>
    [ ... el código interno ... ]
    <b:else/>
    <style>#HTML7 {display: none;}</style>
    </b:if>
    </b:includable>
    </b:widget>
    En el ejemplo, el elemento HTML7 sólo se mostrará en las páginas individuales y ya que a veces, aunque no tenga contenido, el elemento tiene "tamaño"; reforzamos la instrucción ocultándolo por completo.

    La condición inversa sería no mostrar el elemento en las páginas individuales; para eso, lo más fácil es usar:
    <b:if cond='data:blog.pageType != "item"'>
    El armado de la página de forma condicional no está limitada a los elementos individuales. Podemos condicionar casi cualquier cosa. Este esquema nos permitiría tener sidebars diferentes para las páginas individuales y la página principal:
    <b:if cond='data:blog.pageType != "item"'>
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
    [ ... el código de los diferentes elementos de la sidebar de la página principal ... ]
    </b:section>
    </div>
    <b:else/>
    <div id='sidebar-wrapper-2'>
    <b:section class='sidebar' id='sidebar-2' preferred='yes'>
    [ ... el código de los diferentes elementos de la sidebar para entradas individuales ... ]
    </b:section>
    </div>
    </b:if>
    Moraleja: cualquier cosa es posible y el resto queda librado a la imaginación de cada uno.

    Historias mínimas


    Click para ver los videos.

    Cortos creados y dirigidos por el francés Thomas Szabo (más información).

    Xippee: Un plugin para simplificar búsquedas

    Xippee es una interesante extensión que simplifica mucho los procesos de búsqueda ya que nos permite agregar o quitar palabras para obtener nuevos resultados con simples clicks. Funciona en Google, Yahoo, MSN y muchos otros buscadores. Además, está disponible en versiones para Internet Explorer 7, Firefox, Safari y Opera.


    Extensión para Firefox: Descargar desde Mozilla AddOns
    Interente Explorer 7 Plugin: Descargar desde CNET
    Opera Plugin: Instrucciones para la descarga
    Safari: Descargar desde Apple

    Click para ver el video.

    REFERENCIAS:
  • Google Operating System
  • La guerra de los navegadores

    Y Twitter sirvió para algo; por ejemplo, para ver este video recomendado por Carlos de El blog de Inforc Ecuador que también fue publicado en Xombra.

    Es un documental de Discovery Channel al que llaman "La guerra de los navegadores" aunque habla de la historia de internet. En realidad, uno se pregunta si al fin de cuentas amabas cosas no son lo mismo.

    Si te rindes ... Ellos se rinden

    IF YOU GIVE UP, THEY GIVE UP


    Le réchauffement climatique (El calentamiento global), realizado por Seagulls Fly para la organización Quercus.

    Extraer los favicons de los sitios web

    Un favicon ese esa imagen pequeña que se ve en la barra de direcciones del navegador o cuando agregamos un sitio a los marcadores o favoritos. En un blog de Blogger podemos agregarlo con bastante facilidad y hay muchas herramientas online que nos ayudan a generar uno a partir de cualquier imagen.

    Hace tiempo, en una entrada se mostraba la forma de asociar ciertas extensiones o tipos de archivos a una imagen determinada, utilizando los selectores condicionales de CSS. Más recientemente, La Bloguería ofrece la opción de descargar una hoja de estilo donde ya están definidas las propiedades para integrar una serie de íconos de tal manera que los enlaces a ciertos archivos se muestran con un ícono determinado (ver ejemplo).

    En el caso de las páginas web, hay otro método manual para utilizar los favicons que las identifican; se trata de un servicio (Google Shared Stuff) que dispone el mismo Google y que nos muestra ese favicon en formato PNG.

    No hay muchas explicaciones al respecto y parece más curioso que útil aunque es sencillo de utilizar ya que basta escribir una etiqueta IMG:
    <img src="http://www.google.com/s2/favicons?domain=DOMINIO" />
    Tiene bastantes limitaciones así que no siempre funcionará. Por ejemplo, si el sitio no utiliza el típico favicon.ico , no es reconocido; tampoco funcionará si se trata de subdominios así que los sitios alojados en Blogger mostrarán siempre el mismo, sin importar si están en blogspot.com o si están en un dominio propio ; para colmo, no acepta transparencias así que algunos se ven espantosos sobre fondos que no sean blancos

    <img src="http://www.google.com/s2/favicons?domain=www.blogger.com" />
    <img src="http://www.google.com/s2/favicons?domain=wikipedia.org" />
    <img src="http://www.google.com/s2/favicons?domain=youtube.com" />
    <img src="http://www.google.com/s2/favicons?domain=twitter.com" />
    <img src="http://www.google.com/s2/favicons?domain=www.facebook.com" />
    <img src="http://www.google.com/s2/favicons?domain=flickr.com" />
    <img src="http://www.google.com/s2/favicons?domain=www.mozilla.org" />

    Bueno, con tantas limitaciones no sé ni para que escribo esto verguenzaanim

    Burbujitas en el corazón

    Si no se tiene un blog es difícil que se comprenda esta entrada. Si se tiene, posiblemente tampoco se comprenda a menos que uno tenga el blog para jugar y para colmo, no sé si describirlo es suficiente. Sólo sé que a veces, la magia existe.

    Los fragmentos de una conversación con CaTa. El motivo carece de importancia, eran cuestiones técnicas menores, esas que suelen llevar horas de trabajo:

    — ... si, es cierto y le pondría un borde
    — Pensaba lo mismo.
    — Ahí puse el borde, dejame ver lo del autor.
    — Ganó muchisimo con el borde.
    — Sí ¿Dónde iría el nombre del autor?
    — Mmmm, yo diría que abajo.
    — Eso me temía risa
    — Abajo a la derecha con letra tipo manuscrita verguenza
    verguenzaanim ¿Algo más? risa

    Y entonces, así, sin anestesia, CaTa dice:

    Oye ... de repente se me cruzó una imagen ...
    ... nosotros no hacemos posts, nosotros jugamos peeeeroo jugamosssss!!!
    ... así, concentrados, como los pequeños juegan a las bolitas.

    Recién me vi y conecte cuando era pequeñita y jugaba sola en mi pieza o en el patio; super concentráaaa, tanto que mi mami me salía a buscar pensando que me había pasado algo porque no metía ni ruido ...

    Es que allá a lo lejos, uno tuvo un patio, un jardín, una bohardilla o un rincón cualquiera en que éramos nosotros mismos y no hacía falta otra cosa más que dejarse llevar hasta donde terminara el horizonte, aunque estuviera a sólo unos metros delante nuestro.

    Si crecimos, fue para perder algo de eso; para olvidarnos de lo que aprendimos y para creer que el mundo es algo que se puede guardar en una cuenta del Lehman Brothers: "¡Puro veneno! ¡Risas que duelen! ... ¡El bote roto! ¿A quién le importa? ... Si te sofoca ¿A quién le importa?"

    Resumiendo: por eso tengo un blog:

    — Maravilloso ... bienvenida risa
    — Llegué a sentir burbujitas que salían de mi corazón ...

    LongURL Mobile Expander

    Ahora que tweeteamos un poco, esto de las URL cortas será muy bueno porque ahorra espacio pero no deja de ser un poco molesto e incluso "peligroso" ya que no sabemos a donde nos llevarán.

    Por ejemplo, ¿qué es?: http://tinyurl.com/5l5uy3

    ¿Un video de YouTube que alguien recomienda? ¿una página web con alguna información que nos interesa? Basta hacer click para saberlo pero yo quiero saberlo antes.

    En la Sizlopedia acaban de mostrar una extensión para Firefox, de esas que apenas ocupan lugar y resuelven el tema.

    Se trata de LongURL Mobile Expander y lo único que hace es volver a poner las cosas en su debido lugar así que, si vemos el enlace reducido basta colocar el cursor del ratón encima para que un tooltip nos muestre la dirección real.

    También está disponible como script de Greasemonkey y funciona con muchos servicios, incluyendo tinyurl, is.gd, bit.ly, snipurl.com, snurl.com, snipr.com, ping.fm, metamark.net, y xrl.us.

    Twitter en Blogger (personalizar el widget)

    Si bien podemos insertar el widget de Twitter tal y como nos lo ofrece el servicio, también podemos modificarlo para ampliar un poco las posibilidades.

    En mi caso, he hecho eso y he cambiado pequeñas cosas: puse los textos en español, eliminé ciertos códigos HTML innecesarios, agregué otros, coloqué clases CSS en cada etiqueta para poder personalizarlo, etc.

    La primera parte no difiere de los ejemplos anteriores; creamos un elemento HTML y lo ubicamos donde queremos que aparezca en la página. Allí, escribimos lo siguiente:
    <div id="twitter_div">
    <ul id="twitter_update_list"></ul>
    <a class="linkTwitter" href="http://twitter.com/nombreusuario">texto</a>
    </div>
    Donde debemos recordar que hay que cambiar nombreusuario y colocar el texto que nos guste para enlazar a la página principal.

    Luego, agregaremos los scripts justo antes de </body> pero, en lugar de enlazar blogger.js, lo agregaremos manualmente en la plantilla y lo modificaremos a gusto.

    Este es el código con sus explicaciones, que puede descargarse como archivo de texto
    <script type='text/javascript'>
    //<![CDATA[
    // esta es la función que lee Twitter y escribe los mensajes en el blog
    function twitterCallback2(obj) {
    var wwwregular = /\bwww\.\w.\w/ig;
    var regular = /((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g;
    var atregular = /\B@([_a-z0-9]+)/ig;
    var twitters = obj;
    var statusHTML = "";
    var username = "";

    for (var i=0; i<twitters.length; i++){
    var posttext = "";
    posttext = twitters[i].text.replace(wwwregular, 'http://$&');

    // reemplaza los enlaces tipo http://tinyurl.com/000000 por un texto
    posttext = posttext.replace(regular, '[ <a class="linkEnlaces" href="$1" title="$1">VER enlace</a> ]');

    // cuando el mensaje es una respuesta, el nombre es un enlace
    posttext = posttext.replace(atregular, '@<a class="linkUsuario" href="http://twitter.com/$1">$1</a>');
    username = twitters[i].user.screen_name

    // se escribe el item de la lista con el mensaje y se termina indicando el tiempo transcurrido
    statusHTML += ('<li>'+posttext+' <span class="linkTiempo"><a href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'" title="Ver el mensaje en Twitter">'+relative_time(twitters[i].created_at)+'</a></span></li>')
    }

    document.getElementById('twitter_update_list').innerHTML = statusHTML;
    }

    // esta función calcula el tiempo transcurrido desde la publicación del mensaje y escribe un texto
    function relative_time(time_value) {
    var values = time_value.split(" ");
    time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
    var parsed_date = Date.parse(time_value);
    var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
    var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
    delta = delta + (relative_to.getTimezoneOffset() * 60);
    // los textos a mostrar varían de acuerdo al tiempo transcurrido
    if (delta < 60) {
    return 'reciencito'; // menos de un minuto
    } else if(delta < 120) {
    return 'hace casi un minuto'; // hace un minuto
    } else if(delta < (60*60)) {
    return 'hace unos ' + (parseInt(delta / 60)).toString() + ' minutos'; // menos de una hora
    } else if(delta < (120*60)) {
    return 'hace casi una hora'; // hace una hora
    } else if(delta < (24*60*60)) {
    return (parseInt(delta / 3600)).toString() + ' horas atrás'; // menos de 24 horas
    } else if(delta < (48*60*60)) {
    return 'ayer'; // más de 24 horas
    } else {
    return 'esto fue hace ' + (parseInt(delta / 86400)).toString() + ' días'; // más de 48 horas
    }
    }
    //]]>
    </script>

    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nombreusuario.json?callback=twitterCallback2&amp;count=1"></script>

    Como cada etiqueta tiene una clase, las posibilidades de personalizarlo son infinitas. Para hacerlo, agregamos el estilo CSS en la plantilla, antes de </b:skin> o justo al inicio del elemento HTML donde colocamos el código. Esta sería una de las posibilidades:
    <style type="text/css">

    /* este es el DIV contenedor donde se mostrará el widget */
    #twitter_div {
    background: transparent url(URL_imagenOptativa) no-repeat top left; /* una imagen o color de fondo */
    border: 1px solid #valor; /* puede tener o no tener un borde */
    color: #valor; /* es el color del texto de los mensajes */
    overflow-x: hidden; /* para evitar que algunos textos se "salgan" del DIV */
    }

    /* es la lista con mensajes y conviene eliminar posibles márgenes */
    ul#twitter_update_list {
    margin: 0;
    padding: 0;
    }

    /* cada item de la lista (los mensajes en si mismos) */
    ul#twitter_update_list li {
    list-style-type: none;
    list-style-image: url();
    margin: 0;
    padding: 5px 10px; /* separarlo de los bordes del contenedor */
    }

    /* es el enlace al nombre de un usuario (si existe) */
    a.linkUsuario {color:#valor;}
    a.linkUsuario:hover {color: #valor;} /* efecto rollover */

    /* son los enlaces interiores de los mensajes con un ícono identificatorio */
    a.linkEnlaces {
    background: transparent url(URL_imagenIcono) no-repeat right 50%;
    color: #valor;
    padding-right: 12px; /* la separación depende del ancho de la imagen */
    }
    a.linkEnlaces:hover {color: #valor;} /* efecto rollover */

    /* es el bloque que contendrá el enlace que muestra la antigüedad del mensaje */
    .linkTiempo {
    display: block; /* se fuerza a que sea mostraado en una nueva línea */
    text-align: right; /* y a la derecha */
    }
    .linkTiempo a { /* el enlace en si mismo con una imagen de fondo */
    background: transparent url(URL_imagen) no-repeat scroll left 50%;
    color: #valor;
    padding-left: 12px; /* la separación depende del ancho de la imagen */
    }
    .linkTiempo a:hover {color:#valor;} /* efecto rollover */

    /* es el enlace inferior que lleva al home de nuestro Twitter */
    a.linkTwitter {
    color: #valor;
    display: block;
    line-height: 48px; /* es uan forma de darle altura y centrar el texto */
    margin: 10px 0 0 0; /* separado del mensaje superior */
    padding-right: 10px; /* separado del borde derecho */
    text-align: right; /* alineado a la derecha */
    }
    a.linkTwitter:hover {color:#valor;} /* efecto rollover */

    </style>

    El script tiene muchas posibilidades y con un poco de paciencia puede modificarse para contemplar otras opciones. Como lo que lee es el texto del mensaje, basta establecer una serie de condiciones para filtralos y mostrarlos de diferentes formas.

    Podríamos ocultar algunos (por ejemplo las respuestas que comienzan con arroba) o si usamos TweeterFeed para enviar los posts publicados, podemos detectarlo estableciendo un texto específico antes del título.

    Una función extra que podemos agregar es mostrar un mensaje por vez pero leer varios y luego, navegar por ellos de manera similar a lo que hace el widget de Flash y en todos los casos, para personalizarlo usamos CSS y lo mejor es que cada elemento HTML tenga definida una clase.

    En este archivo de texto está el script que estoy usando, con algunas de esas funciones agregadas y para que tengan una idea de cómo modificar el estilo, estas son las definiciones

    Tips tops yuppies

    Productividad en internet + movimiento a favor del orden. De eso hablan en skelliewag y dan 50 tips para poner orden en los blogs.

    ¿Qué significa esto? Básicamente, eliminar lo "inútil" de la sidebar, el footer y los posts para simplificarlo y centrarse en el contenido.
    • Quitar los archivos de la sidebar y colocarlos en una página especial.
    • Reducir la lista de categorías.
    • Cambiar los botones para servicios específicos de feeds por un botón general.
    • Eliminar widgets de comentarios recientes, comentaristas tops, etc.
    • Eliminar las encuestas y sólo usarlas en los posts.
    • Eliminar accesos a MySpace, Twitter, Facebook o cualquiera similar que lleve a otro sitios.
    • Poner el blogroll en una página independiente.
    • Eliminar los widgets de Technorati y Alexa.
    • Eliminar enlaces a contadores, los traductores automáticos, los relojes, los calendarios y los widgets que muestran los países desde donde vienen los visitantes.
    • Colocar los botones y enlaces a directorios de blogs en el pie de la página.
    • Reducir el tamaño de los botones RSS y eliminarlos para las entradas individuales.
    • Quitar los formularios de suscripción por e-mail y los titulares de FeedBurner.
    • Reemplazar los formularios de contacto con un enlace a la dirección de correo.
    • Quitar todo el texto innecesario del pie de las entradas, eliminar las etiquetas de Technorati y los marcadores sociales.
    • Elimina los widgets para votación o popularidad.
    • Eliminar las entradas relacionadas.
    • Eliminar los mensajes de bienvenida.
    • Eliminar los enlaces para marcar esta página como favorita.
    • Eliminar los datos biográficos.
    • Eliminar la publicidad que no genera ingresos.
    El resultado será ... ¿qué será? ¿quedará algo?

    Es casi una paradoja pero los 50 tips son ciertos y sin embargo no son verdad. Es que parecería que algunos parecen olvidarse que estamos en el siglo 21, que el academicismo murió víctima de impresionismo, el cubismo, Picasso, Dalí, Warhol y los miles que arrancaron las hojas de sus cuadernos y empezaron a mirar las cosas desde otro lado, cualquier otro lado. Curiosamente, internet y los blogs han creado sus nuevos gurúes del SEO y el diseño que nos dicen qué es lo que está bien y qué es lo que está mal. Una nueva clase que cree que TODOS debemos uniformarnos, que el color y la forma son intrascendentes y que el diseño gráfico es una inutilidad porque la belleza no existe, ya todo está inventado, experimentar es una pérdida de tiempo y divertirse es casi una mala palabra:

    PRODUCTIVIDAD + ORDEN es el nuevo nombre de la globalización yuppie.

    ¿Hay otras alternativas? Si, claro, seguir la regla de las dosEMES:


    Mejora tu blog.
    Haz, deshaz.
    Vuelve a hacer.
    Hazte otro.

    Manéjalo a tu gusto.
    Diseña y rediseña.
    Para eso es tuyo.

    Download Statusbar: Gestionar descargas


    Download Statusbar es una extension de Firefox para gestionar las descargas ampliando las posibilidades de la ventana normal

    Tiene muchas posibilidades de configuración incluyendo previsualizar las descargas y escanearlas de manera automática con nuestro antivirus antes de abrirlas.


    REFERENCIAS:
  • Enzymatic Software
  • Twitter en Blogger (insertar un widget)

    De todas las formas que es posible insertar Twitter en el blog, la de El escaparate de Rosa es la más versatil y además, utiliza los códigos originales provistos por el mismo servicio. El resto, la parte gráfica es perfectamente configurable con CSS. Sin embargo, vamos a verlos todos para luego elegir qué es lo que más nos conviene.

    Esos widgets originales podemos copiarlos directamente del sitio. Para Blogger, hay un apartado especial donde elegiremos la cantidad de mensajes a mostrar (1 | 20), el título, etc y luego, lo insertaremos directamente o copiamos y pegamos el código en un elemento HTML:
    <div id="twitter_div">
    <ul id="twitter_update_list"></ul>
    <a href="http://twitter.com/nombreusuario" id="twitter-link" style="display:block;text-align:right;">
    follow me on Twitter
    </a>
    </div>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nombreusuario.json?callback=twitterCallback2&amp;count=2"></script>
    El resultado, que no es más que una lista una serie de enlaces, se adaptará a las propiedades de la sidebar.


    Otra opción que nos dan es crear un widget genérico y allí hay dos posibilidades, si usamos la opción HTML veremos que el código no difiere mucho; a decir verdad, es el mismo que el anterior sin el enlace "follow me on Twitter":
    <div id="twitter_div">
    <ul id="twitter_update_list"></ul>
    </div>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nombreusuario.json?callback=twitterCallback2&amp;count=2"></script>
    Si queremos, también podemos utilizar un widget hecho con Flash, ya sea individual o conteniendo todas las conversaciones. En ambos casos, elegiremos el color y algún detalle más y nos darán un código que insertamos en un elemento HTML.


    Personalmente, sigo prefiriendo la primera posibilidad así que vamos a crear un elemento HTML y lo ubicamos donde queremos que aparezca en la página; en la sidebar, arriba de los posts, como parte del header, etc. Allí, escribimos lo siguiente:
    <div id="twitter_div">
    <ul id="twitter_update_list"></ul>
    <a id="twitter-link" href="http://twitter.com/nombreusuario">texto</a>
    </div>
    Donde sólo debemos cambiar nombreusuario y colocar el texto que nos guste para enlazar a la página principal. Pero falta algo más; faltan los scripts.

    Siguiendo los consejos del mismo Twitter, no los vamos a poner en ese elemento sino en la plantilla, justo antes de </body> para asegurarnos que nuestra página se cargue aún cuando el servicio no esté funcionando.

    Entonces, la primera alternativa será colocar:
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nombreusuario.json?callback=twitterCallback2&amp;count=1"></script>
    Hasta acá, estamos usando un poco de HTML y un script llamado blogger.js . Es este último el que lee los datos y luego los escribe en nuestro sitio. Como es público, ese script ha sido modificado varias veces; una de ellas es el que muestra Rosa en una de sus últimas entradas; allí, se reemplaza el script original por otro creado por init7 que tiene una particularidad; los enlaces internos de los mensajes no se muestran como textos sino como enlaces reales.

    La segunda alternativa será colocar ese script modificado
    <script type="text/javascript" src="http://www.soccio.it/code/twitter/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/nombreusuario.json?callback=twitterCallback2&amp;count=1"></script>
    En ambos casos, lo que debemos hacer es cambiar nombreusuario por el nuestro y establecer la cantidad de mensajes a ser mostrados usando el valor de count=1.

    Oktapodi

    Twitter en Blogger (introducción)

    Todo empezó cuando vi un COSO de estos en El escaparate de Rosa :


    Según mis marcadores, una entrada que explicaba como insertarlo en Blogger es de abril así que sólo me tomó un poco menos de cinco meses probar el asunto. El tiempo, no tiene relación con la complejidad sino con una cierta (enorme) resistencia personal. Es que, no me gustan las "redes sociales" y eso hace que huya de ellas como de la peste.

    En general, las redes tipo Facebook no me interesan porque las considero demasiado cerradas, admiten casi cualquier contenido pero sólo en una dirección; es decir, puedo mostrar un artículo publicado en el blog pero no lo inverso; de alguna manera, son una competencia desleal; una copia inexacta del blog. No está mal ni bien, simplemente, no me interesa.

    Para peor, ese COSO era Twitter y no me resultaba fácil admitir que quizás, podía tener una utilidad práctica y no limitarse a ser una suma de no-conversaciones, divertidas para algunos, absolutamente intrascendentes para otros.

    Hasta ese día todo cerraba en mi lógica pero Rosa había puesto ese COSO en su blog y de pronto, lo que yo veía era que lo estaba integrando a su sitio y no sólo visualmente. Lo que allí se leían era textos "relevantes" y entonces, el microblogging empezaba a tener sentido. Parece obvio, sólo es una herramienta y el resultado dependerá de como las usemos pero no es muy sencillo de admitir para mi mente algo enquilosada.

    En resumen, el microblogging es un servicio que permite a los usuarios enviar mensajes de texto con una longitud máxima, ya sea desde un teléfono móvil, un mensajero, una página web o desde el propio navegador. Esas micro-entradas se muestran en la página de cada usuario y son enviadas a otros que se han "suscripto" aunque también se pueden enviar de manera privada. En muchos sentidos, tiene las mismas características de un chat grupal.


    Twitter es una de las aplicaciones más populares de este momento pero no es la única; hay otras similares como Jaiku, Pownce y Plurk.

    Vamos a jugar un poco a ver si llegamos a alguna parte. Una vez que creamos una cuenta, la idea es aprender a usarlo ya sea como vehículo de promoción o como medio de comunicación.

    Los comandos son sencillos:

    mensaje (hasta 140 caracteres) publica el mensaje
    @nombreusuario mensaje publica marcándolo como respuesta a otra persona quien puede verlos en la solapa replies
    D nombreusuario mensaje dirige el mensaje de manera privada
    WHOIS nombreusuario devuelve información del perfil público de un usuario
    GET nombreusuario devuelve el último mensaje enviado por un usuario
    NUDGE nombreusuario envía un recordatorio a un usuario
    FAV nombreusuario marca el último mensaje de un usuario como favorito
    STATS devuelve la cantidad de suscriptores y la cantidad usuarios a los que estamos suscriptos
    INVITE numero envía una invitación a través de mensaje SMS

    En todo los casos, los mensajes no admiten código HTML. Las direccciones URL menores de 30 caracteres se muestran tal cual pero las más largas son convertidas a Tiny URLS.

    Incluir Twitter en una página web o en un blog es muy sencillo ya que hay muchos servicios online: Gadgets de Google, TweetPaste, Twitter Balloon, Widgetbox Widgets, AddTweets, Spinlets Widgets.

    Tanto nuestra página principal como nuestra página individual son accesibles a través de feeds RSS así que también podríamos usar esas direcciones:

    http://twitter.com/statuses/friends_timeline/12345678.rss
    http://twitter.com/statuses/user_timeline/12345678.rss

    En algunos casos, ciertos servicios nos solicitan la Twitter User ID que justamente es ese número que precede a la direccion de los feeds.

    También hay muchas extensiones para Firefox que son útiles:

    Twitbin agrega un panel lateral con muchas opciones
    Tweetbar permite enviar mensajes directamente desde la barra de direcciones del navegador
    Ludicrous hace lo mismo pero desde la barra de buscadores
    TwitterNotifier informa de actualizaciones
    GoogleReader Firefox plugin permite compartir artículos entre ambos servicios
    Twitter Line agrega una barra de herramientas
    Power Twitter agrega funciones a la página de Twitter

    Bookmarkets que permiten compartir las páginas que visitamos: Simpl.es, TWShot, Twit-it!

    Y miles de aplicaciones de todo tipo:

    Twadl, TwitPic y SnapTweet permite compartir imágenes
    MultiTweet nos permite gerenciar varias cuentas simultáneamente
    TwitPlus permite compartir imágenes, videos e incluso enviar archivos de manera privada
    Twitteroo es una aplicación muy simple para el escritorio de Windows

    Click para ver el video.

    REFERENCIAS:
  • Twitter Blog
  • Twitter API
  • Neon Layers

    Sólo GIFs

    El botón derecho: Peleando contra el viento

    Me hicieron una pregunta: ¿es posible proteger el contenido de lo que publicamos para evitar que sea "copiado"? Y la respuesta más sincera es NO porque en realidad, si alguien quiere copiar algo lo hará ya que, cuando navegamos, los sitios que visitamos quedan guardados en nuestra PC y en última instancia, bastaría mirar la caché para utilizarlo.

    Si hablamos de imágenes, copiarlas es "demasiado" fácil. En ese sentido, la regla más sencilla y también la que suena más brutal es: "si no quieres que las imágenes sean accesibles, no las subas a internet".

    Sin embargo, hay algunas alternativas que funcionarán pero sólo de manera limitada. Las marcas de agua (watermarking) realizadas a mano, usando CSS, JavaScript o con algún software; suelen ser poco atractivas y tampoco solucionan nada o quedan muy mal:


    Deshabilitar el botón derecho del ratón es una opción bastante común. En el blog de Gem@ hay varios posts que hablan del tema; todos ellos funcionan pero recuerden que no garantizan nada.

    Para deshabilitar el uso del botón en todo el sitio y mostrar un mensaje, agregamos el siguiente script en el HEAD de la plantilla:
    <script type='text/javascript'>
    function inhabilitar(){
    alert ('Función inhabilitada. Perdonen las molestias.');
    return false;
    }
    document.oncontextmenu=inhabilitar;
    </script>
    Es cierto, se deshabilitará el mouse pero podremos seleccionar y bastaría usar las herramientas de edición del navegador para copiar. Para deshabilitar la seleccion:
    <script type='text/javascript'>
    function disableselect(e){
    return false
    }
    function reEnable(){
    return true
    }
    document.onselectstart=new Function ("return false");
    if (window.sidebar){
    document.onmousedown=disableselect
    document.onclick=reEnable
    }
    </script>
    Hay algunos scripts más complejos que tienen en cuenta las particularidades de los diferentes navegadores:
    <script type='text/javascript'>
    // <![CDATA[
    function clickIE() {
    if (document.all) {
    return false;
    }
    }
    function clickNS(e) {
    if (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2||e.which==3) {
    return false;
    }
    }
    }
    if (document.layers){
    document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;
    }else{
    document.onmouseup=clickNS;document.oncontextmenu=clickIE;
    }
    document.oncontextmenu=new Function("return false")
    // ]]>
    </script>
    Desde lo práctico, su utilidad es muy limitada. En todos esos casos, basta escribir el código inverso en la barra del navegador para anularlas:

    javascript:void(document.oncontextmenu=null)

    Podemos escribir eso y guardarlo como Marcador para habilitar el botón derecho en cualquier página que lo bloquee con uno de esos métodos. Aquí pueden hacer una prueba.

    No. Esto no tiene nada que ver con los hackers. Es tan sencillo que en muchos otros casos, basta pulsar el botón derecho, mantenerlo pulsado mientras aceptamos en la ventana de alerta y luego soltarlo para que se muestre el menú contextual. En Firefox, ambas cosas suelen aparecer de manera simultánea. Aquí pueden ver un ejemplo.

    Un poco más útil es inhabilitar el uso del botón derecho del ratón en una imagen concreta. Podemos hacer lo mismo agregando el código en cada imagen:
    <img oncontextmenu="alert('Opcion deshabilitada');return false" oncopy="alert('Opcion deshabilitada');return false" src="URL_imagen" />
    Aunque tal vez sería mejor no mostrar la advertencia:
    <img oncontextmenu="return false" oncopy="return false" src="URL_imagen" />

    Insisto en que deshabilitar el botón derecho no soluciona los problemas y además, provoca otros porque nosotros tampoco podremos usarlo y los sitios con esa función bloqueada no son agradables ya que el botón derecho lo empleamos para muchas otras cosas que nada tienen que ver con las copias.

    "Disclaimer: Copying websites is not cool... but disabling right click isn't either."

    ¿Y el código fuente? Es lo mismo, no hay mucho que hacer al respecto. Hay software como HTML Guard que realiza esa "protección" aunque ellos mismos advierten: "Que quede claro, la protección absoluta del contenido HTML NO EXISTE".

    Algunos trucos son posibles pero ...
    • Encriptar el código con algún programa pero, como el decodificador debe estar incluido en la misma página para que los navegadores puedan mostrar el sitio, el método parece un poco absurdo aunque para la gran mayoría de los usuarios será complejo de leer.
    • Eliminar espacios y saltos de línea lo transformará en un código engorroso de entender y editar así que no es muy razonable porque también nos complicará la vida a nosotros.
    • Insertar líneas en blanco para que el código se muestre muuuuuuuy abajo; casi casi ridículo pero real.
    • Deshabilitar el cacheo de la imágenes pero eso sólo pude hacerse con determinados servidores.
    • Una página ejemplo con algunas de esas protecciones.
    Otra gran frase "copiada" de la web y que debe hacernos pensar en si vale la pena que nos enojemos con el viento:

    "Recuerden que la protección excesiva y las limitaciones que imponemos pueden generar que los visitantes, simplemente, no regresen."

    Feed2JS: Usar los feeds para crear un menú

    Dicen:

    "Un feed RSS es un sumario formato XML, generado automáticamente cada vez que se publica o modifica la información de un sitio web."

    La ventaja para nosotros es justamente esa, no debemos hacer nada, no hay nada que programar ni codificar, "alguien" lo hace sin nuestra intervención y es una de las "novedades" de internet; lentamente va tomando cada vez más relevancia. Tiene un inconveniente. A veces no es sencillo sacarle provecho en un servicio como Blogger.

    Allí, entonces, llega una herramienta como Feed2JS, un sitio que nos permite leer los feeds de cualquier sitio y usarlos en el nuestro con un código muy sencillo y con un estilo personal.

    powered by feed2js
    Powered by Feed2JS
    Vamos a usarla. Entramos en Build y completamos los datos, seleccionado las opciones. Por ejemplo, voy a colocar la dirección de los feeds de una etiqueta y al generar el código, nos dará algo como esto:
    <script src="http://feed2js.org//feed2js.php?src=http://vagabundia.blogspot.com/feeds/posts/summary/-/Blogger&amp;chan=title&amp;num=3&amp;desc=0&amp;html=p&amp;date=n&amp;targ=y&amp;utf=y" type="text/javascript"></script>
    Parece medio complciado pero, en realidad, no lo es; veamos las opciones:

    URL: debemos ingresar la dirección de los feeds de sitio (http://)


    Todas las etiquetas poseen una sintaxis similar:

    http://miSitio.blogspot.com/feeds/posts/summary/-/laEtiqueta

    Show channel? (yes/no/title): define si se mostrará o no el dirección del origen del feed (yes muestra,  título y descripcion, title sólo el título y no ninguna). En el código, se mostrará así:
    &amp;chan=y | &amp;chan=title | &amp;chan=n

    Number of items to display: es la cantidad de items a ser mostrados (0 muestra todos los disponibles). En el código, se mostrará:
    &amp;num=valor

    Show/Hide item descriptions? How much?: define si mostramos sólo el título de cada item (0); todo el contenido (1) o una cantidad determinada de caracteres (n>1). Eventualmente, podemos seccionar -1 para que los no se transforme en enlaces. En el código, se mostrará:
    &amp;desc=0 | &amp;desc=1 | &amp;desc=-1 | &amp;desc=valor

    Use HTML in item display?: si está habilitada la descripción (&amp;chan=y) puede usarse HTML para mostrarla; texto plano formateado con CSS; o saltos de línea. En el código, se mostrará:
    &amp;html=a | &amp;html=n | &amp;html=p

    Show item posting date? (yes/no): muestra u oculta las fechas de publicación de cada item. En el código, se mostrará:
    &amp;date=n | &amp;amp;date=y

    Time Zone Offset (+n/-n/'feed'): se utiliza para convertir los formatos de las fechas (por defecto en formato GMT) en formatos locales. Para eso debemos escribir el offset por ejempo, -5. Podemos usar el valor feed para que se muestre el generado normalmente. En el código, se mostrará:
    &amp;tz=feed | &amp;tz=valor

    Target links in the new window?:: indicamos si los enlaces se abrirán en la misma ventana (n), en una nueva (y) o en alguna ventana tipo pop-up. En el código, se mostrará:
    &amp;targ=y | &amp;targ=n

    UTF-8 Character Encoding: especifica la codificacón de los caracteres (por ejemplo, &amp;utf=y)

    Podcast enclosures:: se utiliza para incluir archivos multimedia

    Custom CSS Class: se utiliza para incluir una hoja de estilo especial (por ejemplo &amp;css=NOMBRE)

    En realidad, una vez que conocemos el formato del código y sus parámetros, no hace falta generarlo, podemos escribir el código directamente. Así, se muestran los títulos de las últimas tres entradas de un feed cualquiera:
    <script
    src="http://feed2js.org//feed2js.php?src=URL_feed
    &amp;chan=n
    &amp;num=3
    &amp;desc=0
    &amp;html=p
    &amp;date=n
    &amp;targ=y
    &amp;utf=y"
    type="text/javascript">
    </script&gt;
    ¿Y para qué nos podría servir esto? Dependerá de cada uno pero, por ejemplo, como es un servicio bastante rápido, podríamos ampliar las posibilidades de un menú y permitir el acceso a nuestras categorías ay a la vez, mostrar las últimas entradas de cada uno de ellos:




    REFERENCIAS:
  • Feed2JS Ayuda
  • ... hasta que la última pregunta sea respondida

    ¿Estamos listos para el fin del mundo?

    Hoy, 10 de septiembre del 2008, luego de más de 12 años de experimentación y 8.000 millones de dólares de inversión, se pondrá en marcha el llamado Gran Colisionador de Hadrones (LHC), un ascelerador que estudiarán las colisiones de partículas a energías como nunca se ha hecho y que tiene como objetivo, descubrir el origen del universo. En especial, intentarán detectar el llamado bosón de Higgs (conocido como la partícula de Dios), una partícula que confirmaría el modelo teórico que explica el funcionamiento y la naturaleza del universo (más información).

    La cantidad de energía que va a utilizarse ha generado muchas críticas y temores. Algunos científicos creen que su activación provocará el fin del mundo ya que se podrían provocar agujeros negros en su interior y succionar todo el planeta.


    Click para ver los videos.

    Entonces, hoy, miércoles 10 comenzará a circular el haz de protones. Si todo funciona bien, lo hará de manera estable y los 10 mil científicos e ingenieros de las 580 universidades que participaron, esperarán que entre finales del 2008 y principios del 2009 se produzcan las colisiones de los dos haces de protones.


    Si los agoreros tienen razón ... bueno .. paciencia. Si no la tienen y el experimento responde algunas preguntas, más vale recordar que siempre habrá una última pregunta sobre la cual jamás escucharemos la respuesta:

    La última pregunta se formuló por primera vez, medio en broma, el 21 de mayo de 2061, en momentos en que la humanidad (también por primera vez) se bañó en luz. La pregunta llegó como resultado de una apuesta por cinco dólares hecha entre dos hombres que bebían cerveza, y sucedió de esta manera: [+]

    Alexander Adell y Bertram Lupov eran dos de los fieles asistentes de Multivac. Dentro de las dimensiones de lo humano sabían qué era lo que pasaba detrás del rostro frío, parpadeante e intermitentemente luminoso ? kilómetros y kilómetros de rostro ─ de la gigantesca computadora. Al menos tenían una vaga noción del plan general de circuitos y retransmisores que desde hacía mucho tiempo habían superado toda posibilidad de ser dominados por una sola persona.

    Multivac se autoajustaba y autocorregía. Así tenía que ser, porque nada que fuera humano podía ajustarla y corregirla con la rapidez suficiente o siquiera con la eficacia suficiente. De manera que Adell y Lupov atendían al monstruoso gigante sólo en forma ligera y superficial, pero lo hacían tan bien como podría hacerlo cualquier otro hombre. La alimentaban con información, adaptaban las preguntas a sus necesidades y traducían las respuestas que aparecían. Por cierto, ellos, y todos los demás asistentes tenían pleno derecho a compartir la gloria de Multivac.

    Durante décadas, Multivac ayudó a diseñar naves y a trazar las trayectorias que permitieron al hombre llegar a la Luna, a Marte y a Venus, pero después de eso, los pobres recursos de la Tierra ya no pudieron serles de utilidad a las naves. Se necesitaba demasiada energía para los viajes largos y pese a que la Tierra explotaba su carbón y uranio con creciente eficacia había una cantidad limitada de ambos.

    Pero lentamente, Multivac aprendió lo suficiente como para responder a preguntas más complejas en forma más profunda, y el 14 de mayo de 2061 lo que hasta ese momento era teoría se convirtió en realidad.

    La energía del Sol fue almacenada, modificada y utilizada directamente en todo el planeta. Cesó en todas partes el hábito de quemar carbón y fisionar uranio y toda la Tierra se conectó con una pequeña estación ─ de un kilómetro y medio de diámetro ─ que circundaba el planeta a mitad de distancia de la Luna,para funcionar con rayos invisibles de energía solar.

    Siete días no habían alcanzado para empañar la gloria del acontecimiento, y Adell y Lupov finalmente lograron escapar de la celebración pública, para refugiarse donde nadie pensaría en buscarlos: en las desiertas cámaras subterráneas, donde se veían partes del poderoso cuerpo enterrado de Multivac. Sin asistentes, ociosa, clasificando datos con clicks satisfechos y perezozos, Multivac también se había ganado sus vacaciones y los asistentes la respetaban y originalmente no tenían intención de perturbarla.

    Se habían llevado una botella, y su única preocupación en ese momento era relajarse y disfrutar de la bebida.

    ─ Es asombroso, cuando uno lo piensa ─ dijo Adell. En su rostro ancho se veían huellas de cansancio, y removió lentamente la bebida con una varilla de vidrio, observando el movimiento de los cubos de hielo en su interior. ─ Toda la energía que podremos usar de ahora en adelante, gratis. Suficiente energía, si quisiéramos emplearla, como para derretir a toda la Tierra y convertirla en una enorme gota de hierro líquido impuro, y no echar de menos la energía empleada. Toda la energía que podremos usar por siempre y siempre y siempre.

    Lupov ladeó la cabeza. Tenía el hábito de hacerlo cuando quería oponerse a lo que oía, y en ese momento quería oponerse; en parte porque había tenido que llevar el hielo y los vasos.

    ─ No para siempre ─ dijo.
    ─ Ah, vamos, prácticamente para siempre. Hasta que el Sol se apague, Bert.
    ─ Entonces no es para siempre.
    ─ Muy bien, entonces. Durante miles de millones de años. Veinte mil millones, tal vez. Estás satisfecho?

    Lupov se pasó los dedos por los escasos cabellos como para asegurarse de que todavía le quedaban algunos y tomó un pequeño sorbo de su bebida.

    ─ Veinte mil millones de años no es "para siempre".
    ─ Bien, pero superará nuestra época, ¿verdad?
    ─ También la superarán el carbón y el uranio.
    ─ De acuerdo, pero ahora podemos conectar cada nave espacial individualmente con la Estación Solar, y hacer que vaya y regrese de Plutón un millón de veces sin que tengamos que preocuparnos por el combustible. No puedes hacer eso con carbón y uranio. Pregúntale a Multivac, si no me crees.
    ─ No necesito preguntarle a Multivac. Lo sé.
    ─ Entonces deja de quitarle méritos a lo que Multivac ha hecho por nosotros ─ dijo Adell, malhumorado ─ Se portó muy bien.
    ─ ¿Quién dice que no? Lo que yo sostengo es que el Sol no durará eternamente. Eso es todo lo que digo. Estamos a salvo por veinte mil millones de años, pero ... y luego? ─ Lupov apuntó con un dedo tembloroso al otro. ─ Y no me digas que nos conectaremos con otro Sol.

    Durante un rato hubo silencio. Adell se llevaba la copa a los labios sólo de vez en cuando, y los ojos de Lupov se cerraron lentamente. Descansaron.

    De pronto Lupov abrió los ojos.

    ─ Piensas que nos conectaremos con otro Sol cuando el nuestro muera, verdad?
    ─ No estoy pensando nada.
    ─ Seguro que estás pensando. Eres malo en lógica, ese es tu problema. Eres como ese tipo del cuento a quien lo sorprendió un chaparrón, corrió a refugiarse en un monte y se paró bajo un árbol. No se preocupaba porque pensaba que cuando un árbol estuviera totalmente mojado, simplemente iría a guarecerse bajo otro.
    ─ Entiendo ─ dijo Adell ─ No grites. Cuando el Sol muera, las otras estrellas habrán muerto también.
    ─ Por supuesto ─ murmuró Lupov ─ Todo comenzó con la explosión cósmica original, fuera lo que fuese, y todo terminará cuando todas las estrellas se extingan. Algunas se agotan antes que otras. Por Dios, los gigantes no durarán cien millones de años. El Sol durará veinte mil millones de años y tal vez las enanas durarán cien mil millones por mejores que sean. Pero en un trillón de años estaremos a oscuras. La entropía tiene que incrementarse al máximo, eso es todo. ─ Sé todo lo que hay que saber sobre la entropía ─ dijo Adell, tocado en su amor propio.
    ─ ¡Qué vas a saber!
    ─ Sé tanto como tú.
    ─ Entonces sabes que todo se extinguirá algún día.
    ─ Muy bien. ¿Quién dice que no?
    ─ Tú, grandísimo tonto. Dijiste que teníamos toda la energía que necesitábamos, para siempre. Dijiste "para siempre".

    Esa vez le tocó a Adell oponerse.

    ─ Tal vez podamos reconstruir las cosas algún día.
    ─ Nunca.
    ─ ¿Por qué no? Algún día.
    ─ Nunca.
    ─ Pregúntale a Multivac.
    ─ Pregúntale tú a Multivac. Te desafío. Te apuesto cinco dólares a que no es posible.

    Adell estaba lo suficientemente borracho como para intentarlo y lo suficientemente sobrio como para traducir los símbolos y operaciones necesarias para formular la pregunta que, en palabras, podría haber correspondido a esto: ¿Podrá la humanidad algún día, sin el gasto neto de energía, devolver al Sol toda su juventud aun después que haya muerto de viejo? O tal vez podría reducirse a una pregunta más simple, como ésta: ¿Cómo puede disminuirse masivamente la cantidad neta de entropía del universo?

    Multivac enmudeció. Los lentos resplandores cesaron, los clicks distantes de los transmisores terminaron. Entonces, mientras los asustados técnicos sentían que ya no podían contener más el aliento, el teletipo adjunto a la computadora cobró vida repentinamente. Aparecieron cinco palabras impresas: DATOS INSUFICIENTES PARA RESPUESTA ESCLARECEDORA.

    ─ No hay respuesta ─ murmuró Lupov. Salieron apresuradamente. A la mañana siguiente, los dos, con dolor de cabeza y la boca pastosa, habían olvidado el incidente.

    Jerrod, Jerrodine y Jerrodette I y II observaban la imagen estrellada en la pantalla visora mientras completaban el pasaje por el hiperespacio en un lapso fuera de las dimensiones del tiempo. Inmediatamente, el uniforme polvo de estrellas dio paso al predominio de un único disco de mármol, brillante, centrado.

    ─ Es X-23 ─ dijo Jerrod con confianza. Sus manos delgadas se entrelazaron con fuerza detrás de su espalda y los nudillos se pusieron blancos.

    Las pequeñas Jerrodettes, niñas ambas, habían experimentado el pasaje por el hiperespacio por primera vez en su vida. Contuvieron sus risas y se persiguieron locamente alrededor de la madre, gritando:

    ─ Hemos llegado a X-23 ... hemos llegado a X-23 ... hemos llegado a X-23 ... hemos llegado ...
    ─ Tranquilas, niñas ─ dijo rápidamente Jerrodine ─ ¿Estás seguro, Jerrod?
    ─ ¿De qué hay que estar seguro? ─ preguntó Jerrod, echando una mirada al tubo de metal justo debajo del techo, que ocupaba toda la longitud de la habitación y desaparecía a través de la pared en cada extremo. Tenía la misma longitud que la nave.

    Jerrod sabía poquísimo sobre el grueso tubo de metal excepto que se llamaba Microvac, que uno le hacía preguntas si lo deseaba; que aunque uno no se las hiciera de todas maneras cumplía con su tarea de conducir la nave hacia un destino prefijado, de abastecerla de energía desde alguna de las diversas estaciones de Energía Subgaláctica y de computar las ecuaciones para los saltos hiperespaciales.

    Jerrod y su familia no tenían otra cosa que hacer sino esperar y vivir en los cómodos sectores residenciales de la nave.

    Cierta vez alguien le había dicho a Jerrod, que el "ac" al final de "Microvac" quería decir "computadora analógica" en inglés antiguo, pero estaba a punto de olvidar incluso eso.

    Los ojos de Jerrodine estaban húmedos cuando miró la pantalla.
    ─ No puedo evitarlo. Me siento extraña al salir de la Tierra.
    ─ ¿Por qué, caramba? ─ preguntó Jerrod ─ No teníamos nada allí. En X-23 tendremos todo. No estarás sola. No serás una pionera. Ya hay un millón de personas en ese planeta. Por Dios, nuestros bisnietos tendrán que buscar nuevos mundos porque llegará el día en que X-23 estará superpoblado. ─ Luego agregó, después de una pausa reflexiva:
    ─ Te aseguro que es una suerte que las computadoras hayan desarrollado los viajes interestelares, considerando el ritmo al que aumenta la raza.
    ─ Lo sé, lo sé ─ respondió Jerrodine con tristeza.

    Jerrodette I dijo de inmediato:

    ─ Nuestra Microvac es la mejor Microvac del mundo.
    ─ Eso creo yo también ─ repuso Jerrod, desordenándole el pelo.

    Era realmente una sensación muy agradable tener una Microvac propia y Jerrod estaba contento de ser parte de su generación y no de otra. En la juventud de su padre las únicas computadoras eran unas enormes máquinas que ocupaban un espacio de ciento cincuenta kilómetros cuadrados. Sólo había una por planeta. Se llamaban ACs Planetarias. Durante mil años habían crecido constantemente en tamaño y luego, de pronto, llegó el refinamiento. En lugar de transistores hubo válvulas moleculares, de manera que hasta la AC Planetaria más grande podía colocarse en una nave espacial y ocupar sólo la mitad del espacio disponible.

    Jerrod se sentía eufórico siempre que pensaba que su propia Microvac personal era muchísimo más compleja que la antigua y primitiva Multivac que por primera vez había domado al Sol, y casi tan complicada como una AC Planetaria de la Tierra (la más grande) que por primera vez resolvió el problema del viaje interespacial e hizo posibles los viajes a las estrellas.

    ─ Tantas estrellas, tantos planetas ─ suspiró Jerrodine, inmersa en sus propios pensamientos ─ Supongo que las familias seguirán emigrando siempre a nuevos planetas, tal como lo hacemos nosotros ahora. ─ No siempre ─ respondió Jerrod, con una sonrisa ─ Todo eso terminará algún día, pero no antes de que pasen billones de años. Muchos billones. Hasta las estrellas se extinguen, ¿sabes? Tendrá que aumentar la entropía.

    ─ Qué es la entropía, papá? ─ preguntó Jerrodette II con voz aguda.
    ─ Entropía, querida, es sólo una palabra que significa la cantidad de desgaste del universo. Todo se desgasta, como sabrás, por ejemplo tu pequeño robot walkie-talkie, recuerdas?
    ─ No puedes ponerle una nueva unidad de energía, como a mi robot?
    ─ Las estrellas son unidades de energía, querida. Una vez que se extinguen, ya no hay más unidades de energía. Jerrodette I lanzó un chillido de inmediato.
    ─ No las dejes, papá. No permitas que las estrellas se extingan.
    ─ Mira lo que has hecho ─ susurró Jerrodine exasperada.
    ─ ¿Cómo podía saber que iba a asustarla? ─ respondió Jerrod también en un susurro.
    ─ Pregúntale a la Microvac ─ gimió Jerrodette I ─ Pregúntale cómo volver a encender las estrellas.
    ─ Vamos ─ dijo Jerrodine ─ Con eso se tranquilizarán. ─ (Jerrodette II ya se estaba echando a llorar, también.)

    Jerrod se encogió de hombros.

    ─ Ya está bien, queridas. Le preguntaré a Microvac. No se preocupen, ella nos lo dirá.
    Le preguntó a la Microvac, y agregó rápidamente:
    ─ Imprimir la respuesta.

    Jerrod retiró la delgada cinta de celufilm y dijo alegremente:

    ─ Miren, la Microvac dice que se ocupará de todo cuando llegue el momento, y que no se preocupen.

    Jerrodine dijo:

    ─ Y ahora, niñas, es hora de acostarse. Pronto estaremos en nuestro nuevo hogar.

    Jerrod leyó las palabras en el celufilm nuevamente antes de destruirlo: DATOS INSUFICIENTES PARA RESPUESTA ESCLARECEDORA. Se encogió de hombros y miró la pantalla. El X-23 estaba exactamente delante.

    VJ-23X de Lameth miró las negras profundidades del mapa tridimensional en pequeña escala de la Galaxia y dijo:

    ─ No será una ridiculez que nos preocupe tanto la cuestión?

    MQ-17J de Nicron sacudió la cabeza.

    ─ Creo que no. Sabes que la Galaxia estará llena en cinco años con el actual ritmo de expansión.

    Los dos parecían jóvenes de poco más de veinte años. Ambos eran altos y de formas esbeltas.

    ─ Sin embargo ─ dijo VJ-23X ─ me resisto a presentar un informe pesimista al Consejo Galáctico.

    ─ Yo no pensaría en presentar ningún otro tipo de informe. Tenemos que inquietarlos un poco. No hay otro remedio.

    VJ-23X suspiró.

    ─ El espacio es infinito. Hay cien billones de galaxias disponibles.
    ─ Cien billones no es infinito, y cada vez se hace menos infinito. ¡Piénsalo! Hace veinte mil años, la humanidad resolvió por primera vez el problema de utilizar energía estelar, y algunos siglos después se hicieron posibles los viajes interestelares. A la humanidad le llevó un millón de años llenar un pequeño mundo y luego sólo quince mil años llenar el resto de la Galaxia. Ahora la población se duplica cada diez años ...

    VJ-23X lo interrumpió.

    ─ Eso debemos agradecérselo a la inmortalidad.
    ─ Muy bien. La inmortalidad existe y debemos considerarla. Admito que esta inmortalidad tiene su lado complicado. La Galáctica AC nos ha solucionado muchos problemas, pero al resolver el problema de evitar la vejez y la muerte, anuló todas las otras soluciones.
    ─ Sin embargo, no creo que desees abandonar la vida.
    ─ En absoluto ─ saltó MQ-17J, y luego se suavizó de inmediato ─ No todavía. No soy tan viejo. ¿Cuántos años tienes tú?
    ─ Doscientos veintitrés. ¿Y tú?
    ─ Yo todavía no tengo doscientos. Pero, volvamos a lo que decía. La población se duplica cada diez años. Una vez que se llene la galaxia, habremos llenado otra en diez años. Diez años más y habremos llenado dos más. Otra década, cuatro más. En cien años, habremos llenado mil galaxias; en mil años, un millón de galaxias. En diez mil años, todo el universo conocido. Y entonces, ¿qué?

    VJ-23X dijo:

    ─ Como problema paralelo está el del transporte. Me pregunto cuántas unidades de energía solar se necesitarán para trasladar galaxias de individuos de una galaxia a la siguiente.
    ─ Muy buena observación. La humanidad ya consume dos unidades de energía solar por año.
    ─ La mayor parte de esta energía se desperdicia. Al fin y al cabo, nuestra propia galaxia sola gasta mil unidades de energía solar por año, y nosotros solamente usamos dos de ellas.
    ─ De acuerdo, pero aun con una eficiencia de un cien por ciento, sólo podemos postergar el final. Nuestras necesidades energéticas crecen en progresión geométrica, y a un ritmo mayor que nuestra población. Nos quedaremos sin energía todavía más rápido que sin galaxias. Muy buena observación. Muy, muy buena observación.
    ─ Simplemente tendremos que construir nuevas estrellas con gas interestelar.
    ─ ¿O con calor disipado? ─ preguntó MQ-17J, con tono sarcástico.
    ─ Puede haber alguna forma de revertir la entropía. Tenemos que preguntárselo a Galáctica AC.

    VJ-23X no hablaba realmente en serio, pero MQ-17J sacó su contacto AC del bolsillo y lo colocó sobre la mesa frente a él.

    ─ No me faltan ganas ─ dijo ─ Es algo que la raza humana tendrá que enfrentar algún día.

    Miró sombríamente su pequeño contacto AC. Era un objeto de apenas cinco centímetros cúbicos, nada en sí mismo, pero estaba conectado a través del hiperespacio con la gran Galáctica AC que servía a toda la humanidad y, a su vez era parte integral suya.

    MQ-17J hizo una pausa para preguntarse si algún día, en su vida inmortal, llegaría a ver a Galáctica AC. Era un pequeño mundo propio, una telaraña de rayos de energía que contenía la materia dentro de la cual las oleadas de submesones ocupaban el lugar de las antiguas y pesadas válvulas moleculares. Sin embargo, a pesar de esos funcionamientos subetéreos, se sabía que la Galáctica AC tenía mil diez metros de ancho.

    Repentinamente MQ-17J preguntó a su contacto AC:

    ─ ¿Es posible revertir la entropía?

    VJ-23X, sobresaltado, dijo de inmediato:

    ─ Ah, mira, realmente yo no quise decir que tenías que preguntar eso.
    ─ ¿Por qué no?
    ─ Los dos sabemos que la entropía no puede revertirse. No puedes volver a convertir el humo y las cenizas en un árbol.
    ─ ¿Hay árboles en tu mundo? ─ preguntó MQ-17J.

    El sonido de la Galáctica AC los sobresaltó y les hizo guardar silencio. Se oyó su voz fina y hermosa en el contacto AC en el escritorio.

    Dijo: DATOS INSUFICIENTES PARA UNA RESPUESTA ESCLARECEDORA.

    VJ-23X dijo:

    ─ ¡Ves!

    Entonces los dos hombres volvieron a la pregunta del informe que tenían que hacer para el Consejo Galáctico.


    La mente de Zee Prime abarcó la nueva galaxia con un leve interés en los incontables racimos de estrellas que la poblaban. Nunca había visto eso antes. ¿Alguna vez las vería todas? Tantas estrellas, cada una con su carga de humanidad ... una carga que era casi un peso muerto. Cada vez más, la verdadera esencia del hombre había que encontrarla allá afuera, en el espacio.

    ¡En las mentes, no en los cuerpos! Los cuerpos inmortales permanecían en los planetas, suspendidos sobre los eones. A veces despertaban a una actividad material pero eso era cada vez más raro. Pocos individuos nuevos nacían para unirse a la multitud increíblemente poderosa, pero, ¿qué importaba? Había poco lugar en el universo para nuevos individuos.

    Zee Prime despertó de su ensoñación al encontrarse con los sutiles manojos de otra mente.

    ─ Soy Zee Prime. ¿Y tú?
    ─ Soy Dee Sub Wun. ¿Tu galaxia?
    ─ Sólo la llamamos Galaxia. ¿Y tú?
    ─ Llamamos de la misma manera a la nuestra. Todos los hombres llaman Galaxia a su galaxia, y nada más. ¿Por qué será?
    ─ Porque todas las galaxias son iguales.
    ─ No todas. En una galaxia en particular debe de haberse originado la raza humana. Eso la hace diferente.

    Zee Prime dijo:

    ─ ¿En cuál?
    ─ No sabría decirte. La Universal AC debe de estar enterada.
    ─ ¿Se lo preguntamos? De pronto tengo curiosidad por saberlo.

    Las percepciones de Zee Prime se ampliaron hasta que las galaxias mismas se encogieron y se convirtieron en un polvo nuevo, más difuso, sobre un fondo mucho más grande. Tantos cientos de billones de galaxias, cada una con sus seres inmortales, todas llevando su carga de inteligencias, con mentes que vagaban libremente por el espacio. Y sin embargo una de ellas era única entre todas por ser la Galaxia original. Una de ellas tenía en su pasado vago y distante, un período en que había sido la única galaxia poblada por el hombre.

    Zee Prime se consumía de curiosidad por ver esa galaxia y gritó:

    ─ ¡Universal AC! ¿En qué galaxia se originó el hombre?

    La Universal AC oyó, porque en todos los mundos tenía listos sus receptores, y cada receptor conducía por el hiperespacio a algún punto desconocido donde la Universal AC se mantenía independiente. Zee Prime sólo sabía de un hombre cuyos pensamientos habían penetrado a distancia sensible de la Universal AC, y sólo informó sobre un globo brillante, de sesenta centímetros de diámetro, difícil de ver.

    ─ ¿Pero cómo puede ser eso toda la Universal AC? ─ había preguntado Zee Prime.
    ─ La mayor parte ─ fue la respuesta ─ está en el hiperespacio. No puedo imaginarme en qué forma está allí.

    Nadie podía imaginarlo, porque hacía mucho que había pasado el día ─ y eso Zee Prime lo sabía ─ en que algún hombre tuvo parte en construir la Universal AC. Cada Universal AC diseñaba y construía a su sucesora. Cada una, durante su existencia de un millón de años o más, acumulaba la información necesaria como para construir una sucesora mejor, más intrincada, más capaz en la cual dejar sumergido y almacenado su propio acopio de información e individualidad.

    La Universal AC interrumpió los pensamientos erráticos de Zee Prime, no con palabras, sino con directivas. La mentalidad de Zee Prime fue dirigida hacia un difuso mar de galaxias donde una en particular se agrandaba hasta convertirse en estrellas.

    Llegó un pensamiento, infinitamente distante, pero infinitamente claro: ESTA ES LA GALAXIA ORIGINAL DEL HOMBRE.

    Pero era igual, al fin y al cabo, igual que cualquier otra, y Zee Prime resopló de desilusión.

    Dee Sub Wun, cuya mente había acompañado a Zee Prime, dijo de pronto:

    ─ ¿Y una de estas estrellas es la estrella original del hombre?

    La Universal AC respondió: LA ESTRELLA ORIGINAL DEL HOMBRE SE HA HECHO NOVA. ES UNA ENANA BLANCA.

    ─ ¿Los hombres que la habitaban murieron? ─ preguntó Zee Prime, sobresaltado y sin pensar.

    La Universal AC respondió: COMO SUCEDE EN ESTOS CASOS UN NUEVO MUNDO PARA SUS CUERPOS FISICOS FUE
    FUE CONSTRUIDO A TIEMPO.

    ─ Sí, por supuesto ─ dijo Zee Prime, pero aun así lo invadió una sensación de pérdida. Su mente dejó de centrarse en la galaxia original del hombre, y le permitió volver y perderse en pequeños puntos nebulosos. No quería volver a verla.

    Dee Sub Wun dijo:

    ─ ¿Qué sucede?
    ─ Las estrellas están muriendo. La estrella original ha muerto.
    ─ Todas deben morir. ¿Por qué no?
    ─ Pero cuando toda la energía se haya agotado, nuestros cuerpos finalmente morirán, y tú y yo con ellos.
    ─ Llevará billones de años.
    ─ No quiero que suceda, ni siquiera dentro de billones de años. ¡Universal AC! ¿Cómo puede evitarse que las estrellas mueran?

    Dee Sub Wun dijo, divertido:

    ─ ¿Estás preguntando cómo podría revertirse la dirección de la entropía.

    Y la Universal AC respondió: TODAVIA HAY DATOS INSUFICIENTES PARA UNA RESPUESTA ESCLARECEDORA.

    Los pensamientos de Zee Prime volaron a su propia galaxia. Dejó de pensar en Dee Sub Wun, cuyo cuerpo podría estar esperando en una galaxia a un trillón de años luz de distancia, o en la estrella siguiente a la de Zee Prime. No importaba. Con aire desdichado, Zee Prime comenzó a recoger hidrógeno interestelar con el cual construir una pequeña estrella propia. Si las estrellas debían morir alguna vez, al menos podrían construirse algunas.


    El Hombre, mentalmente, era uno solo, y estaba conformado por un trillón de trillones de cuerpos sin edad, cada uno en su lugar, cada un o descansando, tranquilo e incorruptible, cada uno cuidado por autómatas perfectos, igualmente incorruptibles, mientras las mentes de todos los cuerpos se fusionaban libremente entre sí, sin distinción.

    El Hombre dijo:

    ─ El Universo está muriendo.

    El Hombre miró a su alrededor a las galaxias cada vez más oscuras. Las estrellas gigantes, muy gastadoras, se habían ido hace rato, habían vuelto a lo más oscuro de la oscuridad del pasado distante. Casi todas las estrellas eran enanas blancas, que finalmente se desvanecían. Se habían creado nuevas estrellas con el polvo que había entre ellas, algunas por procesos naturales, otras por el Hombre mismo, y también se estaban apagando. Las enanas blancas aún podían chocar entre ellas, y de las poderosas fuerzas así liberadas se construirían nuevas estrellas, pero una sola estrella por cada mil estrellas enanas blancas destruidas, y también éstas llegarían a su fin:

    El Hombre dijo:

    ─ Cuidadosamente administrada y bajo la dirección de la Cósmica AC, la energía que todavía queda en todo el universo, puede durar billones de años. Pero aun así eventualmente todo llegará a su fin. Por mejor que se la administre, por más que se la racione, la energía gastada desaparece y no puede ser repuesta. La entropía aumenta continuamente.

    El Hombre dijo:

    ─ ¿Es posible revertir la entropía? Preguntémosle a la Cósmica AC.

    La AC los rodeó pero no en el espacio. Ni un solo fragmento de ella estaba en el espacio. Estaba en el hiperespacio y hecha de algo que no era materia ni energía. La pregunta sobre su tamaño y su naturaleza ya no tenía un sentido comprensible para el Hombre.

    ─ Cósmica AC ─ dijo el Hombre ─ ¿cómo puede revertirse la entropía?

    La Cósmica AC dijo: LOS DATOS SON TODAVIA INSUFICIENTES PARA UNA RESPUESTA ESCLARECEDORA.

    El Hombre ordenó:

    ─ Recoge datos adicionales.

    La Cósmica AC dijo: LO HARE. HACE CIENTOS DE BILLONES DE AÑOS QUE LO HAGO. MIS PREDECESORES Y YO HEMOS ESCUCHADO MUCHAS VECES ESTA PREGUNTA. TODOS LOS DATOS QUE TENGO SIGUEN SIENDO INSUFICIENTES.

    ─ ¿Llegará el momento ─ preguntó el Hombre ─ en que los datos sean suficientes o el problema es insoluble en todas las circunstancias concebibles?

    La Cósmica AC dijo: NINGUN PROBLEMA ES INSOLUBLE EN TODAS LAS CIRCUNSTANCIAS CONCEBIBLES.

    El Hombre preguntó:

    ─ ¿Cuándo tendrás suficientes datos para responder a la pregunta?

    La Cósmica AC respondió: LOS DATOS SON TODAVIA INSUFICIENTES PARA UNA RESPUESTA ESCLARECEDORA.

    ─ ¿Seguirás trabajando en esto? ─ preguntó el Hombre.

    La Cósmica AC respondió: SI.

    El Hombre dijo:

    ─ Esperaremos.

    Las estrellas y las galaxias murieron y se convirtieron en polvo, y el espacio se volvió negro después de tres trillones de años de desgaste. Uno por uno, el Hombre se fusionó con la AC, cada cuerpo físico perdió su identidad mental en forma tal que no era una pérdida sino una ganancia. La última mente del Hombre hizo una pausa antes de la fusión, contemplando un espacio que sólo incluía la borra de la última estrella oscura y nada aparte de esa materia increíblemente delgada, agitada al azar por los restos de un calor que se gastaba, asintóticamente, hasta llegar al cero absoluto.

    El Hombre dijo:

    ─ AC, ¿es éste el final? ¿Este caos no puede ser revertido al universo una vez más? ¿Esto no puede hacerse?

    AC respondió: LOS DATOS SON TODAVIA INSUFICIENTES PARA UNA RESPUESTA ESCLARECEDORA.

    La última mente del Hombre se fusionó y sólo AC existió en el hiperespacio.

    La materia y la energía se agotaron y con ellas el espacio y el tiempo. Hasta AC existía solamente para la última pregunta que nunca había sido respondida desde la época en que dos técnicos en computación medio alcoholizados, tres trillones de años antes, formularon la pregunta en la computadora que era para AC mucho menos de lo que para un hombre el Hombre.

    Todas las otras preguntas habían sido contestadas, y hasta que esa última pregunta fuera respondida también, AC no podría liberar su conciencia. Todos los datos recogidos habían llegado al fin. No quedaba nada para recoger. Pero toda la información reunida todavía tenía que ser completamente correlacionada y unida en todas sus posibles relaciones. Se dedicó un intervalo sin tiempo a hacer esto.

    Y sucedió que AC aprendió cómo revertir la dirección de la entropía. Pero no había ningún Hombre a quien AC pudiera dar la respuesta a la última pregunta. No había materia. La respuesta ─ por demostración ─ se ocuparía de eso también.

    Durante otro intervalo sin tiempo, AC pensó en la mejor forma de hacerlo. Cuidadosamente, AC organizó el programa.

    La conciencia de AC abarcó todo lo que alguna vez había sido un Universo y pensó en lo que en ese momento era el Caos. Debía hacerse paso a paso.

    Y AC dijo: ¡HAGASE LA LUZ!

    Y la luz se hizo ...

    Isaac Asimov - La ultima pregunta - noviembre de 1956

    Un tema Chrome para Firefox

    ¿Les gustó el diseño gráfico de Google Chrome pero siguen usando Firefox? No hay problema ya que ´hay un tema que lo emula.

    Se llama ChromiFox


    Como es una versión Beta (la imitaciòn es completa) hay que estar registrado en Mozilla Add-ons para descargar el tema.

    Otra alternativa similar es el llamado Chome Package.

    Agregando tooltips en las imágenes

    TipImage es un script que permite agregar notas (tooltips) en una imagen cualquiera a la manera en que lo hace Flickr.

    Una nota es un rectángulo dentro de la imagen que sólo es visible cuando colocamos el cursor del mouse dentro del objeto y que contiene un texto cualquiera.

    La particularidad de este script es que puede trabajar en dos modos; en modo normal, simplemente se muestran y en modo edición pueden modificarse y agregarse aunque claro, para que esos cambios sean permanentes se requiere disponer de un servicio adecuado. En Blogger esos cambios sólo serán temporales ya que no podemos modificar la base de dato que contiene los posts pero, en otros servicios como WordPress podría llegar a implementarse alguna función extra que los preserve. Sea como sea, su utilidad no es mucha pero es una curiosidad y bastante sencilla de implementar (algo para jugar un rato).

    Lo que necesitamos es descargar el script y alojarlo en un servidor propio. Luego; lo insertamos en la plantilla antes de </head>:
    <script type="text/javascript" src="URL_Tipmage-1.0.js"></script>
    Como no es posible aplicarla sobre dos imágenes diferentes en una misma página, también podíramos colocar el script directamente en un post utilizando la misma sintaxis.

    La forma en que se verán esas notas se determina con CSS y para eso hay un ejemplo de hoja de estilo que puede descargarse y aplicarse directamente . Con ese archivo podemos hacer varias cosas; lo alojamos en un servidor y lo agregamos a la plantilla:
    <link rel="stylesheet" type="text/css" href="URL_Tipmage-1.0.css" />
    O en el post con:
    <style type="text/css">@import url("URL_Tipmage-1.0.css");</style>
    Y si no, copiamos su contenido y lo pegamos en la plantilla o en el post entre etiquetas style:
    <style type="text/css">
    [ ... aquí pegamos el contenido ... ]
    </style>
    Para usar el script, sólo necesitamos una imagen y que esta tenga un id (un nombre único).

    Para definir las notas a mostrar, debajo de la imagen colocamos el script con los parámetros. En el ejemplo sería algo así:
    <img src="URL_imagen" id="mainImage"/>

    <script type="text/javascript">
    var tipmage = new Tipmage('mainImage',true);
    tipmage.startup();
    tipmage.setTooltip(250,15,120,80,'El sombrero de la señora');
    tipmage.setTooltip(240,210,100,100,'Esta es una nota<br/>con <b>HTML</b>');
    tipmage.setTooltip(10,200,120,70,'Y esto, claro, esto es un pie');
    </script>
    La sintaxis para cada tooltip a agregar es sencilla:

    tipmage.setTooltip(posicionX,posicionY,ancho,alto,'el texto');
    posicionX y posicionY son las coordenadas donde comienza la nota (donde 0 y 0 son la esquina superior izquierda de la imagen)
    ancho y alto definen el tamaño de la nota (en pixeles)
    el texto es lo que veremos y puede tener algunas etiquetas HTML



    /* el rectángulo que se ve al hacer colocar el cursor en la imagen */
    .tmRect {
    border: 1px solid #000000;
    }
    .tmRectContrast {
    border: 1px solid #999999;
    }

    /* el rectángulo seleccionado */
    .tmRectSelected {
    border: 1px solid #FF9933;
    }
    .tmRectContrastSelected {
    border: 1px solid #FFFFFF;
    }

    /* el bloque de la nota visible */
    .tmTooltip {
    background-color: #225599;
    border: 2px groove #2277FF;
    padding: 0 10px;
    }

    /* el texto de la nota */
    .tmText {
    color: #FFFFFF;
    font-family: Tahoma;
    font-size: 11px;
    text-align: center;
    }

    /* el bloque cuando se edita la nota */
    .tmRectMod {
    border: 1px dashed #000000;
    }
    .tmRectContrastMod {
    border: none;
    }
    .tmCorner {
    background-color: #BBBBBB;
    border: 1px solid #000000;
    }

    /* la ventanita donde se editan las notas */
    .tmForm {
    background-color: #445566;
    margin: 0;
    padding: 0;
    }

    /* el área de textos para edición */
    .tmTextArea {
    border: 3px solid #445566;
    font-size: 11px;
    height: 50px;
    margin: 0;
    padding: 5px;
    width: 204px;
    }

    /* los botones de edición */
    .tmButton {
    font-size: 11px;
    margin: 2px;
    }

    Google: Cumpleaños y curiosidades

    El 7 de septiembre de 1998, el estado de California aceptó la solicitud de creación de la empresa, cuyos responsables eran Larry Page y Sergey Brin. Se trataba de un nuevo motor de búsqueda en internet al que llamaban Google.

    Curiosidades y mitos, vaya uno a saber:
    • El nombre se debe a un error ortográfico; cuando pensaban una palabra que describiera la búsqueda de un dato específico en medio de un magma de información se les ocurrió el término matemático Googol que representa al número diez elevado a la centésima potencia.
    • El logotipo original es un homenaje a los ladrillos del Lego que era con lo que construyeron la carcasa del primer servidor para ahorrar en costos.
    No hay un fecha oficial específica en que se celebra el aniversario, se hace durante septiembre y generalmente coincide con algún evento relacionado y suele coincidir con alguna sorpresa.

    Tal vez, este año, sea el archi-publicitado Chrome; tal vez el lanzamiento de una serie de satélites para crear imágenes exclusivas para sus productos Google Earth y Google Maps (1|2|3).

    Tal vez sea una patente registrada para constuir una serie de data centers bajo el mar y así utilizar nuevas fuente de energía.

    Tal vez sea el proyecto para escanear milones de páginas de viejos periódicos e incorporarlos a Google News.

    Personalmente, creo que celebran su cumpleaños, diciendo NO NO NO Y NO risaanim

    Manejando las etiquetas: Excluir o incluir

    Etiquetas etiquetas etiquetas etiquetas, habría que hablar de las etiquetas, si sirven o no sirven o mejor dicho para qué sirven pero eso será en otro momento. Las limitaciones de acceso a los datos de Blogger hacen que feeds y etiquetas sean claves a la hora de dar una vuelta de tuerca a este asunto de los blogs y tratar de salirse de los esquemas tradicionales.

    Graciela preguntaba en un comentario si era posible excluir etiquetas en el truco que mostraban en La Bloguería y que utiliza una variante de Cumulus, algo imprescindible si tenemos muchas ya que no está diseñado para soportar demasiados textos.

    La respuesta quedará pendiente porque no se me ocurre nada que permita establecer condiciones y trasferírselas al archivo de Flash; sin embargo, como una cosa trae la otra, por ahora, empecemos con alguna prueba sencilla y veamos si es posible listar etiquetas basándonos en alguna condición.

    Es sencillo de probar ya que podemos agregar tantos elementos Etiqueta como se nos ocurra y cada uno es independiente del otro así que creamos uno y lo ubicamos en la plantilla. Luego, en Edición HTML expandimos los artilugios y vamos a ver siempre el mismo código:
    <b:widget id='LabelX' locked='false' title='El Titulo' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'>
    <data:label.name/>
    </span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
    <data:label.name/>
    </a>
    </b:if>
    <span dir='ltr'>(<data:label.count/>)</span>
    </li>
    </b:loop>
    </ul>

    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
    La única diferencia será el atributo ID que tendrá un número diferente y el atributo TITLE que será el que le demos al crearlo.

    NOTAS: En todo ese código, siempre vamos a reemplazar lo marcado en color que es la lista de las etiquetas y en todos los casos estoy excluyendo un dato que coloca Blogger (data:blog.languageDirection) para definir la dirección del texto ya que asumo que estamos escribiendo de izquierda a derecha.

    La primera condición es la más sencilla, vamos a mostrar sólo las etiquetas que tengan un mínimo de entradas. Si quisiéramos listar las que tengan más de cinco entradas escribiríamos:
    <ul>
    <b:loop values='data:labels' var='label'>
    <b:if cond='data:label.count &gt; 5'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <data:label.name/>
    <b:else/>
    <a expr:href='data:label.url'>
    <data:label.name/>
    </a>
    </b:if>
    (<data:label.count/>)
    </li>
    </b:if>
    </b:loop>
    </ul>
    En el ejemplo, agregamos una condición al bucle:
    SI la cantidad de entradas en la etiqueta (data:label.count) es mayor que 5 la mostramos, sino, la ignoramos.

    Quiere decir que podemos establecer cualquier condición numérica y mostrar o no mostrar ciertas etiquetas. Veamos si podemos usar condiciones más sofisticadas, por ejemplo, SOLO mostrar algunas y EXCLUIR otras.

    Para eso necesitamos recurrir al JavaScript y generar alguna clase de "lista" (un array) donde agreguemos las etiquetas que queremos evaluar. Supongamos que tenemos seis categorias que, en un rapto de originalidad llamo: primera segunda tercera cuarta quinta sexta.

    Este, sería el código para mostrar solamente las etiquetas segunda tercera y sexta:
    <ul>
    <script type='text/javascript'>
    var misEtiquetas = new Array(&#39;segunda&#39;,&#39;tercera&#39;, &#39;sexta&#39;);
    <b:loop values='data:labels' var='label'>
    var cualEtiqueta = &#39;<data:label.name/>&#39;;
    if(misEtiquetas.indexOf(cualEtiqueta) &gt; -1) {
    document.write(&quot;<li><a expr:href='data:label.url' rel='nofollow'><span><data:label.name/></span></a>(<data:label.count/>)</li>&quot;);
    }
    </b:loop>
    </script>
    </ul>

    ¿Qué hicimos? Creamos una array llamada misEtiquetas donde colocamos (entre comillas y separadas por comas) la lista de etiquetas a ser mostradas. Luego, en el bucle, tomamos cada etiqueta (cualEtiqueta) y usamos una función (indexOf) para verificar si ese elemento es o no es parte de ese array. Esa función devuelve un valor de -1 si la respuesta es NO y un valor positivo si la respuesta es SI. Cuando verificamos esto último, usamos document.write() para escribir el item.

    Lo mismo podemos hacer para excluir catergorías. simplemente, evaluamos la condición contraria; vamos a excluir las categorías segunda y sexta:
    <ul>
    <script type='text/javascript'>
    var misEtiquetas = new Array(&#39;segunda&#39;,&#39;sexta&#39;);
    <b:loop values='data:labels' var='label'>
    var cualEtiqueta = &#39;<data:label.name/>&#39;;
    if(misEtiquetas.indexOf(cualEtiqueta) == -1) {
    document.write(&quot;<li><a expr:href='data:label.url' rel='nofollow'><span><data:label.name/></span></a>(<data:label.count/>)</li>&quot;);
    }
    </b:loop>
    </script>
    </ul>
    ¿Y para qué podría servir esto? ¡Ahhhhhh! Esa es una buena pregunta confuso

    Feed Compare: Comparando suscriptores

    Si nos gusta comparar cosas y usamos FeedBurner, Feed Compare nos permite hacerlo con la cantidad de suscriptores. Basta entra y colocar la URL de los feeds a mostrar y nos muestra un gráfico conde se ve la evolución del número de suscriptores de cada sitio.

    ¿Sirve para algo? No, claro que no, salvo para amargarse tristeanim

    ¡Bueno, no es para tanto! risa


    REFERENCIAS:
  • Geekets
  • El arte de arena de Ferenc Cakó




    Las cuatro estaciones de Vivaldi

    Click para ver los videos.

    REFERENCIAS:
  • Home Page
  • sandanimation.com
  • Descargar sus animaciones en formato FLV

  • Tratado elemental sobre burros y conflictos

    Cualquier burro tiene problemas ... es inevitable.

    ... y los problemas pueden ser serios ...
    CLICK
    Fuente del dibujo: Movimiento americano contra la guerra - "No Foreing War Crusade - 1937"

    REFERENCIAS:
  • EducaRueca
  • El widget de Google Translate

    Algunos preguntan qué es eso del nuevo widget de Google Translate y cómo integrarlo a Blogger.

    Es sencillo, basta ir a Google Translate Tools, seleccionar el lenguaje de nuestro sitio:

    Select the language of your webpage:

    y luego, copiar y pegar el código que nos dan en un elemento HTML que agregaremos en la plantilla.
    <script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=es&amp;w=160&amp;h=60&amp;title=&amp;border=&amp;output=js"></script>


    No hay mucho que podamos personalizar ya que como todo gadget, el código es inaccesible sin embargo, hay pequeños detalles que podemos manejar y para eso, lo mejor es ir a la edición de la plantilla, expandir artilugios y buscar el elemento HTML que lo contiene.

    Allí, agregamos las propiedades de estilo que nos interesen; por ejemplo:
    <b:widget id='HTMLX' locked='false' title='NUESTRO TITULO' type='HTML'>
    <b:includable id='main'>
    .......
    <div class='widget-content'>
    <data:content/>
    <style>
    table.ig_reset {margin: 0 auto; width: 190px;} /* centramos el bloque */
    table.ig_reset iframe {margin: 0 auto;} /* centramos el iframe */
    table.ig_reset td {text-align: center !important;} /* centramos los textos */
    /* las propiedades del texto inferior */
    table.ig_reset a {color: #FFFFFF !important; text-decoration: none !important;}
    table.ig_reset span {color:#FFFFFF !important;}
    </style>

    </div>
    .......
    </b:includable>
    </b:widget>
    Y si quisiéramos eleminar el texto inferior, colocamos:

    table.ig_reset a {display: none;}
    table.ig_reset span {display: none;}

    Sobre palomas con malas intenciones

    Sitemaps, robots y METAs

    El buscador de Google sin duda es el más usado. Según dicen, 2 de cada 3 búsquedas se hacen a través de él y muchos otros buscadores utilizan sus motores. De alli que tratar que Google note nuestra existencia es una de las preocupaciones de cualquier sitio y, en mayor o menor medida, es lógico que nos ocupemos del tema.

    Las herramientas de Google para Desarrolladores (Google Webmaster Tools) son un paso casi obligado en la vida de un blog sobre todo ahora que Blogger las ha integrado.

    Pará qué sirven o cómo las usamos es más difícil de contestar pero, lo elemental es agregar un sitemap de nuestro sitio para mejorar la indexación; es decir, para que nuestras entradas aparezcan en los buscadores (más información).

    Google nos explica que un sitemap es un archivo en formato XML que les proporciona información sobre un sitio web y lo que contiene es, básicamente, una lista de las páginas de ese sitio. Esa lista cubre las posible omisiones o errores de los robots que, de todas maneras, rastrean la web en búsqueda de contenido. Su utilidad aumenta si el sitio es dinámico, es decir, si cambia con cierta regularidad (un blog, por ejemplo) o si es nuevo y no tiene muchos enlaces externos.

    Eventualmente, esos sitemaps también agregan otro tipo de información: la frecuencia con la que se modifican las páginas; las fechas de esas modificaciones; la importancia relativa de las páginas dentro del sitio; etc.

    Hay que tener claro que, la existencia o no de esos sitemaps no garantiza nada, sólo son un complemento (más información).

    Un sitemap estándar funcionará en la mayoría de los sitios aunque hay ciertas variantes que pueden incluirse y que son específicas de cada buscador.

    Este es un contenido típico:
    <url>
    <loc>http://misitio.com/</loc>
    <lastmod>2008-09-02T03:00:13+00:00</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
    </url>
    <url>
    <loc>http://misitio.com/carpeta/unaentrada..html/</loc>
    <lastmod>2008-08-26T05:56:47+00:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.7</priority>
    </url>
    En resumen, un sitemap es un archivo XML que se genera con alguna aplicación y que luego, podemos editar pero, en el caso especial de Blogger esto no es así ya que, simplemente, no nos lo permite y debemos utilizar feeds para crear algo similar.

    Del mismo modo, hay otro archivo de texto llamado robots.txt que también (si nos dejaran) podríamos utilizar.

    Ese archivo es el que nos permitiría controlar la forma en que los rastreadores (crawlers) como los Googlebots de Google deben interpretar nuestro sitio aunque, en realidad, su contenido sólo son "sugerencias" y esos rastreadores pueden aceptarlas o no. Por ejemplo, podría impedirse el accesos a algunos de ellos (los que "roban" contenido), limitar la frecuencia de rastreo, eliminar páginas o contenido irrelevante o duplicado, etc.

    Cuando un crawler visita una página, lo primero que busca en el servidor es el archivo robots.txt y si lo encuentra, lo analiza para ver si le está permitido acceder al contenido y, dentro de ciertos límite, sigue las directivas establecidas en él (más información).

    Como ya sabemos, los blogs de Blogger no tienen acceso a ese archivo, es el servicio quien lo crea y lo maneja a su antojo. En el menú Herramientas de Google Webmaster Tools nos vamos a encontrar con la posibilidad de analizarlo o verlo con la opción Análisis de robots.txt:

    URL de robots.txt http://vagabundia.blogspot.com/robots.txt
    Descargado por última vez Hace 47 minutos
    Estado 200 (Correcta)

    El texto de ese archivo dirá esto:

    User-agent: Mediapartners-Google
    Disallow:

    User-agent: *
    Disallow: /search
    Noindex: /feedReaderJson

    Sitemap: http://nombre.blogspot.com/feeds/posts/default?orderby=updated

    Todos los robots.txt de Blogger dirán exactamente lo mismo.

    User-agent es el nombre del rastreador al que se le dan instrucciones:
    • Mediapartners-Google es el que se encarga de los anuncios de Google Adsense
    • Googlebot-Image es el que indexa las imágenes de Google
    • Slurp es el de Yahoo
    • Googlebot el de Google
    • msnbot el de MSN
    Disallow se usa para indicar las rutas prohibidas, aquellas que no queremos que se indexen.

    Disallow: # sin valor, indica que no hay restricciones
    Disallow: /search # impide la indexacion de las paginas que son resultados de búsquedas internas

    Podría haber otras y, por ejemplo, usar un asterisco para especificar a todos los robots:

    User-Agent: *
    Disallow: / # impide la indexacion de todas las paginas
    Disallow: /contacto.html # no indexar esa página
    Disallow: /privado/ # no indexar el contenido de ese directorio
    Disallow: /*.css$ # impide la indexacion de los archivos con extensión CSS

    Cuando vamos a la parte de Diagnóstico, nos muestra errores. Algunos son culpa nuestra (Errores de HTTP) y son el resultado de enlaces equivocados. Esos deberíamos tratar de corregirlos; lo mismo ocurre con los listados como No se ha encontrado.

    Otros tipo de error que nos muestra es el que suele causar dudas: URL restringidas por robots.txt y allí veremos, por ejemplo:

    http://misitio.blogspot.com/feedReaderJson
    http://misitio.blogspot.com/search/label/

    Esos, no son errores sino que es lo que dice nuestro archivo robots.txt, las páginas de búsqueda no serán indexadas, están bloqueadas y eso, no es malo sino bueno.

    Noindex: /feedReaderJson es una nueva restricción que se ha agregado recientemente y que impide que los enlaces generados via los scripts de Json sean indexados (más información).

    Las Herramientas para Webmasters también permiten generar un archivo robots.txt, verificarlo, probarlo, etc pero, de nada nos servirá en Blogger ya que no tenemos ninguna posibilidad de alojarlo.

    Ahora bien, si no podemos crear ese archivo pero queremos personalizar algunas instrucciones, podemos utilizar las etiquetas META para comunicarnos con esos robots.

    <META name="robots" content="INDEX,FOLLOW" />
    indica que se indexe la página y todos sus enlaces (es el valor por defecto)

    <META name="robots" content="INDEX,NOFOLLOW" />
    indica que se indexe la página pero no los enlaces

    <META name="robots" content="NOINDEX,FOLLOW" />
    indica que NO se indexe la página pero si los enlaces

    <META name="robots" content="NOINDEX,NOFOLLOW" />
    indica que no se indexe la página ni sus enlaces

    Y al séptimo dia, Google descansó

    Y lo nuevo de Google está aquí ...

    ¿Google Chrome? ¡NOOOOOOOOOOOOO! eso se los dejo a los demáas (si, claro, lo probé, blablabla y la vida continua como si nada) verguenzaanim

    Entonces, como decía:

    Y lo nuevo de Google está aquí ...

    El Google-Car ... ¡Ahhhhh! mis queridos geeks, seguro que ese no lo probaron sonrisa Yo tampoco, claro triste

    El Google-Car es un prototipo de vehículo eléctrico en el que ha invertido Google a través de google.org, una fundación que reune aportes económicos de diversas compañías y que tiene como fin utilizar la tecnología para desarrollar nuevas fuentes de energía y medios de transporte.

    Una de esas iniciativas es la que los llevó a invertir 10 millones de dólares en empresas de vehículos eléctricos, entre ellas, una asociación entre Aptera Motors y ActaCell que han lanzado su primer prototipo de vehículo eléctrico con batería de ión de litio que posee una autonomía de 190 kilómetros con una recarga eléctrica completa que dura una noche.

    El Aptera Typ-1 incluso, puede ser comprado (si vivimos en California) y se estima que el primer auto de la serie estará circulando a principios del próximo año y su valor rondará los 27.000 dólares.

    Click para ver el video.

    Click para ver el video.

    ¡Che, Blogger!

    ¡Che, Blogger!

    Mirá, te hablo así porque parece que hay que sacudirte un poco ¿Cómo es eso de la seguridad y los blogs spam y las disculpas y los bloqueos erróneos?

    Julio del 2008. Un tal happyboy creó un blog. No fue hace mucho, más o menos debe haber sido cuando te agarró la colitis de clausurar sitios. Se ve que este no lo viste o que como el nombre dice "feliz" pensaste, debe ser un buen muchacho.

    Tal vez me equivoco y en realidad, como aparentemente es de China, el patroncito Google te dijo nononono ni se te ocurra tocarlo porque ahí hay mucha guita, mirá que son como quichicientos millones y hay que mantener buenas relaciones complice

    Bueno, no me quiero ir por las ramas pero el tal happyboy creó un blog al que llamó ... no sé cómo lo llamó porque es irreproducible, dice algo así: 北京搜索引擎营销 y según el traductor significa Beijing Search Engine Marketing pero, vaya uno a saber. Si no lo ubicás, la dirección es:

    http://wangyinfeng.blogspot.com/

    ¿Y sabés para qué lo creó? Para dejar spam en los blogs sin que vos te avivaras.

    Hermanito Blogger, el chino te está tomando el pelo y me cansé de borrar sus comentarios; te dejo la captura del último para que veas de lo que hablo:


    Por las dudas, guardé el mail a buen resguardo así que, cualquier cosa, comunicate con tu primo el de GMail y te lo mando para que veas.

    Entre vos y yo, decime la verdad, ¿no se te cae la cara de vergüenza?

    Etiquetas desplegables en la sidebar

    Como Blogger no nos ofrece alternativas para manejar nuestros archivos, organizarlos o listarlos, generalemente, no queda más remedio que recurrir a scripts que leen el contenido RSS de nuestro blog y de esa manera hacer cosas diferentes de las no-pensadas por los desarrolladores.

    Una de esas alternativas es la que muestra El escaparate de Rosa en un artículo reciente y que es muy sencilla de implementar.

    La idea es mostrar las etiquetas pero adosándoles la posibilidad de desplegarse para que además, cada una nos liste las últimas entradas asociadas como enlaces individuales; de alguna manera, se trata de crear un estilo similar al que se ve en el elemento Archivos.

    Para implementarlo, debemos descargar el archivo JS con el script, alojarlo en un servidor y luego, si seguimos las instrucciones de Rosa, no habrá problemas.

    Como alternativa, ya que el tema de usar archivos externos es un "drama" para muchos, voy a explicar la manera de hacer lo mismo pero, agregando el código directamente y de esa manera, no depender de servidores. Como se verá, el resultado final, será el mismo.

    Empiezo agregando un elemento Etiquetas en la plantilla, dándole un título para poder encontrarlo luego y lo ubico en la sidebar donde quiero que se muestre. Ahora vamos a Edicion HTML de la plantilla y expandimos los artilugios para buscar ese elemento que dirá algo así:
    <b:widget id='LabelX' locked='false' title='El Titulo' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <ul>
    .......
    .......
    </ul>

    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
    Vamos a eliminar todo eso que está entre <ul> y </ul> para reemplazarlo por nuestro propio código:


    <script type='text/javascript'>
    // <![CDATA[
    home_page = 'http://NOMBREBLOG.blogspot.com/';
    max_rc_posts = 10;
    function showentry(json){
    var maxp = (max_rc_posts <= json.feed.entry.length) ? max_rc_posts : json.feed.entry.length;
    var text = "<ul>";
    for (var i = 0; i < maxp; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }
    text += "<li><a href='"+posturl+"'>" + posttitle + "</a></li>";
    }
    text += "</ul>";
    document.getElementById("showItemLabel").innerHTML = text;
    }
    function showPostLabel(sPL_label,e){
    var isDOM = (navigator.appName.match("Microsoft Internet Explorer") || navigator.appName.match("MSIE")) ? false : true;
    var check = document.getElementById("showItemLabel");
    if(check) {
    if(!isDOM) { check.removeNode(true); }
    else {check.parentNode.removeChild(check);}
    }
    var elm;
    if(e.target) elm = e.target;
    else elm = window.event.srcElement;
    var div = document.createElement('div');
    div.innerHTML = "";
    div.id = "showItemLabel";
    if(!isDOM) { elm.insertAdjacentElement('afterEnd', div); } else { elm.parentNode.insertBefore(div, this.nextSibling); }
    var elm2 = document.getElementById("showItemLabel");
    elm2.style.display = "inline";
    elm2.innerHTML = "<br/>Cargando entradas...";
    var script = document.createElement('script');
    script.src = home_page+"feeds/posts/summary/-/"+sPL_label.replace(/ /g,"%20")+"?start-index=1&max-results="+max_rc_posts+1+"&alt=json-in-script&callback=showentry";
    script.type = "text/javascript";
    document.getElementsByTagName('head')[0].appendChild(script);
    }
    // ]]>
    </script>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'>
    <data:label.name/> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a>
    </span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a>
    </b:if>
    </li>
    </b:loop>
    </ul>
    Lo mejor, para evitar errores es descargar este archivo de texto y usar su contenido que es una copia del ejemplo.

    Allí, el único dato que debemos modificar es la dirección de nuestro blog que está en una de las primera líneas:

    home_page = 'http://NOMBREBLOG.blogspot.com/';

    El otro dato que podemos modificar con facilidad es la cantidad máxima de entradas a ser mostradas; eso lo hacemos con esta línea:

    max_rc_posts = 10;

    Es importante saber que la demora en cargarse dependerá de ese número así que no conviene usar valores muy altos.

    Cada vez que hagamos click en una de esas etiquetas, se mostrará "Cargando entradas..." que es un texto que podemos modificar si lo buscamos en el código:

    elm2.innerHTML = "<br/>Cargando entradas...";

    Lo mismo podemos hacer con el contador de entradas por etiqueta, borrando lo marcado en color rojo (está en dos lados):

    <data:label.name/> <span dir='ltr'>(<data:label.count/>)</span> <a ...

    En el script, también se utiliza un símbolo [ ► ] como enlace para "expandir":

    &#9658;

    Podemos reemplazarlo por otros o por cualquier texto o imagen:

    &#9660; [ ▼ ]
    &#9668; [ ◄ ]

    Como lo que se genera es una lista, el estilo se adaptará a nuestra sidebar y si queremos personalizarla, podemos agregar las definiciones y propiedades de estilo justo antes de </b:skin>.

    Si queremos establecer un estilo distinto al estandard, deberemos identificar el elemento:
    #LabelX ul { ....... }
    #LabelX ul li { ....... }
    #LabelX ul li a { ....... }
    El área expandida está dentro de un DIV llamado showItemLabel así que la controlamos con esa definición. Por ejemplo:
    #showItemLabel { /* es el área completa */ }
    #showItemLabel ul { /* la lista */
    padding:0;
    margin:0;
    }
    #showItemLabel ul li { /* cada item de la lista */
    background-color: #343F4A;
    list-style-image: url();
    padding: 0 0 0 10px;
    margin: 2px 0;
    width: 85%;
    }
    #showItemLabel ul li a, #showItemLabel ul li a:visited { /* cada item es un enlace */
    color: #FF9933;
    font-weight: normal;
    }
    #showItemLabel ul li a:hover { /* efecto rollover sobre los enlaces */
    color: #FFFFFF;
    }

    El ejemplo puede verse funcionando en la sidebar de mi blog de pruebas.

    Usando las "tuberias" de Yahoo

    Yahoo Pipes es una herramienta online bastante sofisticada y a primera vista asusta como cualquier otra cosa nueva. En realidad, sacarle el maximo provecho requiere "estudiar, probar y probar" pero, hay cosas que podemos hacer con sólo un par de clicks y el resultado será bastante bueno.

    Una de las cosas más sencillas es crear un lector de feeds que luego podemos utilizar en nuestra página web ya que Pipes está pensada justamente para eso, como una herramienta para combinar varios feeds en uno.

    Para empezar, necesitamos una cuenta de Yahoo, ingresamos y directamente, vamos a crear un nuevo proyecto (Create a pipe).

    Lo que se nos mostrará es una ventana con tres paneles. A la izquierda hay una lista expandible con los diferentes elementos agrupados por categorías y que podemos agregar y que debemos arrastrar y soltar en el panel principal de la derecha (drag modules here). Cada uno de ellos tiene funciones específicas y para más detalles, conviene leer la documentación.

    El tercer panel es el debugger que es donde se nos mostrará información o podremos "probar" lo que vamos haciendo (ver captura de pantalla).

    Entonces, para crear un pipe, vamos a arrastrar elementos y luego interconectarlos. Veamos:

    Vamos a buscar el control llamado Fetch Feed que se encuentra dentro de Sources y lo colocamos en el área de trabajo. No tiene nada excepto la posibilidad de agregar la dirección URL de un feed. Voy a poner la de una categroría de mi blog:

    http://vagabundia.blogspot.com/feeds/posts/summary/-/Blogger

    Si la dirección es aceptada, veremos un icono donde se muestra el tipo de servicio. Ahora, agregaré otra haciendo click en el signo más:

    http://vagabundia.blogspot.com/feeds/posts/summary/-/JavaScript

    Y seguiré añadiendo algunas más:

    http://vagabundia.blogspot.com/feeds/posts/summary/-/CSS
    http://vagabundia.blogspot.com/feeds/posts/summary/-/HTML


    Hasta acá no tengo nada más que una lista así que "conectaremos" esa lista con la salida (Pipe output), haciendo click sobre el botón inferior del primero y arrastrándolo hasta el botón superior del segundo.

    Nos relajamos un poco jugando con esos controles, moviéndolos de uno a otro lado y mirando como esa conexión se va adaptando ... es inevitable hacerlo verguenza


    Ahora que terminamos de jugar, hacemos click en Save para guardar nuestro trabajo, le damos un nombre, esperamos unos segundos y ya está listo.

    Si vamos a Properties, veremos los detalles, podremos agregar etiquetas, una descripción, etc. desde allí, la podemos publicar para que sea visible y ejecutarla para ver como funciona (ver captura de pantalla).

    Como en cualquier momento podemos seguir editándola, vamos a agregarle un Filter que se encuentra en Operators. Cortamos la conexión y creamos nuevas. El filtro estará entre nuestra lista y la salida, con este, podemos establecer algunas reglas, por ejemplo, definir qué tipo de entradas mostrar:


    Si no nos interesa, simplemente hacemos click en el botón cerrar y se eliminará. Probemos entonces otro control como Sort y seleccionamos pubDate (fecha de publicación); lo oredenaremos por fecha auqnue también podríamos hacerlo por autor, por título o combinar varias reglas.


    Como estoy leyendo las entradas de diferentes etiquetas, lo más probable es que haya títulos repetidos así que agregaremos otro control llamado Unique Module que nos permite eliminar el contenido duplicado:


    Una vez guardada y publicada, accederemos a ella desde nuestro panel y podremos editarla una y otra vez, agregarla a algún sitio o insertarla en una web con alguno de los badgets disponibles.




    kentbrewster.com posee una herramienta que permite generar esos badges, utilizando pipes pero sin necesidad de crearlas nosotros.

    Pero aún podemos hacer algo más. Si vamos a nuestro pipe, veremos que hay una opción para obtener la URL directa en varios formatos (RSS, JSON, PHP, etc), vamos a copiar el formato RSS que será de este tipo:

    http://pipes.yahoo.com/pipes/pipe.run?_id=7nqnvGRx3RGMJQ4Upwt1Yg&_render=rss

    Con ese dato, podemos ir a Feedburner y utilizarla para crear una nueva cuenta y de tal modo, tener una dirección mucho más "normal" con la cual, podriamos permitir que los visitantes se suscribieran a varias categorías seleccionadas excluyendo otras o podriamos agregar un elemento Feed en Blogger para crear listas de las últimas cinco entradas de determinadas categorías individuales.

    Alternativas hay muchas y variadas. Tiene la ventaja de poder manejarse de manera intuitiva pero requiere mucha prueba y error; creo que vale la pena intentarlo.


    REFERENCIAS:
  • elmodem.com [1] [2] [3]