Diagrama para la resolución universal de problemas

REFERENCIAS:

Cosas Sencillas

Hace unos pocos días, Google anunció que ahora podemos insertar un mapa de Google Maps en cualquier sitio web, incluyendo blogs. El proceso para hacerlo era bastante complejo pero ahora se ha simplificado al máximo.

Una vez que estamos en la página de Google Maps, veremos que aparece un enlace: Link to this page. Haciendo click allí, se nos mostrarán dos códigos posibles, uno para insetar el mapa en un mail (Paste link in email or IM) y otro para insertarlo en una pagina web (Paste HTML to embed in website). Eventualmente, podemos personalizarlo, seleccionando diferentes tamaños predeterminados o estableciendo valores propios

El código se basa en la etiqueta IFRAME que es similar a OBJECT ya que permite incluir objetos externos en un documento HTML aunque no es una etiqueta muy utilizada.

View Larger Map

El mapa insertado es completamente funcional e incluye todo lo que contenía el mapa original.

Por supuesto, hay que utilizarlos con prudencia porque son bastante lentos y afectan la carga de las páginas.

REFERENCIAS:

Google Blogoscoped

Cuando me preguntaron si era posible poner algún código para que los visitantes enlazaran el blog que no fuera el que se mostraba en el Blog de Gem@ tuve que responder que sí, que era posible aunque, lo que se muestra en ese artículo es mucho más interesante porque está enseñando la forma de crear un widget, uno de esos elementos que cualquiera puede insertar en su blog sin tener que escribir nada.

¿Qué es un widget?, pués eso que se muestra en la primera solapa de Diseño de Blogger, los elementos o "artilugios" son módulos independientes que los usuarios podemos agregar, quitar o modificar.

Los/las widgets (todavía no sé si son masculinos o femeninas) son herramientas muy útiles que permiten que incorporemos servicios en nuestro blog que, de otra manera, nos sería muy complicado implementar. Blogger nos da la posibilidad de crearlas sin restricciones de contenido así que podemos hacer una con casi cualquier cosa ya que pueden incluir código HTML y scripts.

Para crear un widget lo que debemos hacer es crear un formulario que envíe los resultados a Blogger. Así, cuando alguien hace click en el botón Enviar de ese formulario, se abrirá Blogger para que este pueda añadirlo.

Vayamos por partes. Primero que nada, debemos diseñar el widget, es decir, escribir el código. Un ejemplo simple lo provee la misma ayuda de Blogger pero mejor sigamos el ejemplo de uno para que nos enlacen, al estilo del que muestra Gem@:

<form action="http://beta.blogger.com/add-widget" method="post">
<input value="NOMBRE" name="widget.title" type="hidden"/>
<input value="URL_blog" name="infoUrl" type="hidden"/>
<input value="URL_favicon" name="logoUrl" type="hidden"/>

<textarea style="display: none;" name="widget.content">
....... [ el contenido de nuestro widget ] .......
</textarea>

<input value="<data:content/>" name="widget.template" type="hidden"/>
<input value="TEXTO BOTON" name="go" type="submit"/>
</form>

Ese es el modelo básico. En él, hay código obligatorio y código opcional:

widget.title (Opcional) es el NOMBRE que se mostrará en la pestaña Elementos de la página del usuario cuando edite su diseño (longitud máxima, 100 caracteres y puede contener HTML)

infoURL (Opcional) especifica una página que describe el widget o proporciona información adicional. Se utilizará como vínculo de Más información en la página de configuración.

logoURL (Opcional) es una URL a la imagen a mostrar en Más información (tamaño máximo 100x100 pixeles).

widget.template (Opcional) puede utilizarse cualquiera de las etiquetas de datos globales. No vale la pena entrar en detalles y conviene dejarla así como está.

widget.content (Obligatorio) es el contenido que se mostrará en el blog del usuario y puede tener casi cualquier código. Siempre hay que utilizar caracteres especiales para reemplazar los caracteres reservados, por ejemplo, en lugar de escribir <a> hay que escribir &lt;a&gt;.

Por último, faltaría poner nuestro propio código. Esto es sencillo, simplemente lo escribimos como si lo fuéramos a colocar directamente en un elemento de la sidebar. Por ejemplo, supongamos que usamos una imagen como enlace:

<a href="URL_blog" target="_blank">
<img src="URL_imagen"/>
</a>

Eso, es lo que se insertará en el blog de quien quiera agregarlo, un simple enlace y eso es lo que colocamos como contenido del widget, entre <textarea> y </textarea>

Puede verse funcionando en la sidebar, en la sección AUTOPROMO, WIDGET.

Hacienc click en Widget, se abrirá una página de Blogger donde nos piden que confirmemos nuestra decisión y desde donde podemos seleccionar el blog donde será insertado (si disponemos de varios) o cambiar el título (también podemos hacerlo después). Expandiendo Editar contenido, veremos el código que se insertará, algo que es recomendable hacer para evitar sorpresas.

Debemos hacer click en Añadir Artilugio para terminar. Blogger nos mostrará entonces la página de Diseño para que podamos reubicarla manualmente o manipularla como a cualquier otra.

The world without us: ¿El mundo sin seres humanos?

Tal vez, demuestran la capacidad que tiene la naturaleza de sanarse a si misma.

Click para ejecutar el video.

Pingdom Tools - Full page test es una herramienta interesante ya que evalua el tiempo de carga de cualquier sitio web, incluyendo objetos (imágenes, Flash, scripts, etc).

El tiempo, es mostrado por medio de barras de colores y puede verse la lista completa de objetos cargados ya sea en el orden en que lo hacen o como árbol, mostrando la relación entre ellos.

El tiempo total variará en función de diferentes parámetros, conexión, horario, servidor donde tenemos alojado nuestro sitio, etc; aunque lo fundamental es el tamaño de la página, la cantidad de imágenes y sobre todo, los objetos externos (widgets, por ejemplo).

Por lo que he visto, en Blogger, un valor de 10 segundos o menos es un promedio razonable. En el momento de probar la página principal de este blog, se encontraron 171 objetos (1061.4 KB), de los cuales 168 eran externos, fundamentalmente, imágenes: 137 (597.5KB).

Lo que me ha sorprendido es ver que una parte sustantiva del tiempo de carga es motivada por el mismo Blogger y sus códigos internos.

VISTO EN:

keytrucos

Voy a ver si puedo cumplir una de mis deudas, explicando un poco el método que estoy utilizando para mostrar ciertos videos de YouTube, tema sobre lo cual me han preguntado infinidad de veces y siempre he respondido: estoy trabajando en ello. En realidad, no lo hacía, había ciertas cosas que no terminaban de convencerme y he dedicado el fin de semana para poner un poco de orden y simplificarlo hasta donde he podido.

No se trata de algo novedoso sino de "mezclar" algunas de las cosas que ya he comentado para lograr que los videos no se carguen con la página pero puedan ser reproducidos con facilidad.

Todo se basa en un script que nos permite controlar los videos de YouTube, no sólo ocultarlos, algo que sería sencillo utilizando un código y la propiedad display, sino crearlos sólo cuando los reproducimos y eliminarlos cuando los cerramos de tal manera que el buffer (la memoria) se libere y nuestras páginas sean más livianas de cargar y de navegar.

A primera vista, lo más sencillo sería abrir los videos en una página nueva o un popup pero, eso no facilita la navegación ya que, por lo general, son lentas y consumen demasiados recursos. Sin embargo, el CSS nos permite crear un tipo de ventana especial llamada tooltip, que se abre en forma casi instantánea ya que, en realidad, está incluida en nuestra página pero, simplemente, permanece oculta hasta que hacemos click en algún lado.

La idea entonces es, combinar el script que crea el código necesario para reproducir un video específico y colocarlo dentro de un tooltip, con lo cual, podemos reproducirlo con cualquier enlace. Por ejemplo:

EJECUTAR VIDEO (hacer click en para cerrar)

Pero, ya que estamos, ¿por qué no utilizar este método para insertar también otro tipo de archivos de Flash como SWFs?

Bueno, empecemos.

Para esto, sólo necesitamos el script y agregar algunas clases CSS que son las que controlan la parte gráfica y a través de las cuales podemos personalizarla. Las colocamos en la plantilla, por ejemplo, justo antes de la etiqueta </head>:

<style type="text/css">
.ventanaYTB { /* la ventana donde se ejecutan los videos de YouTube */
height: 395px;
margin: 0;
text-align: center;
z-index: 1000;
/* propiedades personalizables */
padding: 10px 0 0;
background-color: #000000;
border: 1px solid #343F4A;
}

.cerrarYTB { /* área para el enlace que cierra la  ventana */
vertical-align: middle;
/* propiedades personalizables */
height: 18px;
margin: 5px;
padding: 4px 4px 0 0;
text-align: right;
color: #FF9933;
background-color: #101921;
border: 1px solid #343F4A;
}

.ventanaSWF { /* la ventana donde se ejecutan los archivos SWF */
width: 100%;
height: 100%;
margin: 0;
padding:0;
text-align: center;
z-index:1000;
}

.cerrarSWF { /* área para el enlace que cierra la  ventana */
margin: 0;
padding: 0;
text-align: center;
vertical-align: middle;
}
</style>

<script src="URL_vagaTooltipsFlash.js" type="text/javascript"></script>

Como siempre, el archivo vagaTooltipsFlash.js lo alojamos en un servidor externo y colocamos la dirección URL correspondiente.

Tal como está, el enlace para cerrar la ventana es una imagen alojada en ImageShack pero, podemos poner cualquier otra. Para esto, sólo debemos editarlo:

var elVinculo = "<img src=\"archivo\">";

Eventualmente, también podemos modificarlo cambiando la imagen por un texto:

var elVinculo = "CERRAR VENTANA";

¿Y cómo lo usamos? Es muy fácil, si queremos insertar un video de YouTube debemos crear dos DIVs, uno oculto y otro visible. El primero será el que use el script y el segundo, es el que nos servirá de enlace y abrirá el primero:

<div style="display: none;" id="xxxxxxxxxxx">&nbsp;</div>
<div id="v-xxxxxxxxxxx">
<a href="javascript:crearYouTube('xxxxxxxxxxx')">ENLACE</a>
</div>

donde xxxxxxxxxxx será el código identificador del video que nos provee YouTube, por ejemplo:

http://www.youtube.com/watch?v=oWpY9CJBbFQ http://www.youtube.com/v/oWpY9CJBbFQ

Ese conjunto de letras y/o números es el video_id y YouTube lo genera individualmente para cada uno de ellos lo que nos ayuda a identificar los DIVs con un nombre único e irrepetible. Lo utilizaremos en tres lugares: como ID del DIV oculto, dentro del script para que sepa qué video reproducir y como ID del enlace pero, en este caso, para diferenciarlo del primero, le agregaremos v- adelante.

El enlace, no tiene por que ser un texto, también puede ser una imagen cualquiera. Entonces, si quisiéramos insertar el video anterior, escribiríamos el siguiente código, todo en una sola línea:

<div style="display: none;" id="oWpY9CJBbFQ">&nbsp;</div>
<div id="v-oWpY9CJBbFQ">
<a href="javascript:crearYouTube('oWpY9CJBbFQ')">
<img src="URL_imagen"/>
</a>
</div>

Que dará el siguiente resultado:

Y si no queremos trabajar, también podemos utilizar las imágenes que provee YouTube como thumbnails. Hay disponibles tres para cada video:

http://img.youtube.com/vi/xxxxxxxxxxx/1.jpg http://img.youtube.com/vi/xxxxxxxxxxx/2.jpg http://img.youtube.com/vi/xxxxxxxxxxx/3.jpg

Nuevamente, reemplazamos xxxxxxxxxxx por el ID del video. Si el video es este:

http://www.youtube.com/watch?v=9I9mQ5i6ZpY

la imagen por defecto que usa YouTube es la número dos:

http://img.youtube.com/vi/9I9mQ5i6ZpY/2.jpg

Y este será el resultado:

¿Y con los archivos SWF? Todo es parecido pero, necesitamos indicar una serie de parámetros más:

<div style="display:none;" id="nombreID">&nbsp;</div>
<div id="v-nombreID">
<a href="javascript:crearSWF('nombreID','URL_archivoSWF',ancho,alto,'color')">
ENLACE
</a>
</div>

donde:

nombreID es el identificador único que usaremos; como en el caso anterior, debe ir en tres lugares diferentes, uno de ellos, anteponiendo v- para diferenciarlo
ancho y alto son el ancho y el alto de la animación, expresados en pixeles
color es el color de fondo que puede ser transparent o un código de color en formato hexadecimal (000000 es negro y FFFFFF es blanco)

En Google Operating System hay una buena opción si se quiere probar Internet Explorer 7 sin tener que instalarlo.

1. Descargar el instalador de IE7, ya sea desde Microsofot o desde File Hippo.
2. Crear un directorio en archivos de programa y no ejecutamos el instalador (IE7-Setup.exe) sino que, utilizando WinRar, lo descomprimimos.
3. Descargar Internet Explorer Standalone (149KB), lo descomprimimos en la carpeta IE7.
4. El la carpeta UPDATE, ejecutamos xmllitesetup.exe (que es lo que permitirá la navegación por pestañas).
5. Ejecutamos el archivo IE7s.exe cada vez que queremos usar Internet Explorer 7.

De esta manera, podemos tener IE7 e IE 6 en la misma PC.

Claro que no todas las funciones estarán disponibles (menues contextuales, la barra de menú principal, bloqueador de popups, lector de feeds, instalación de ActiveX, páginas que requieren autenticación, etc) pero es suficiente para desarrolladores web que quieran verificar cómo se ven las páginas web en distintos navegadores.

REFERENCIAS:

TredoSoft

Referencia: Blogger: la fecha de los posts

Este hack, lo que permite es colocar calendarios al estilo WordPress que reemplazan el texto de la fecha de las entradas por una imagen. El problema aquí se produce porque Blogger no coloca la fecha en todas las entradas; si un día tiene de una entrada, sólo la última tendrá fecha y, por lo tanto ese calendario no se verá.

Esto, dependiendo del tipo que usemos, no tendrá consecuencias pero, en muchos casos, lo que provoca es la aparición de un texto (UNDEFINED) o el desmadre de los títulos que ahora tienen más espacio y tratan de acomodarse como pueden.

El script original era el siguiente:

<script type="text/javascript">
//<![CDATA[
function calendario(cual){
 var lafecha = cual.split('-');
 fday = "<div class='caledia'>"+lafecha[0]+"</div>";
 fmonth = "<div class='calemes'>"+lafecha[1]+"</div>";
 fyear = "<div class='caleanio'>"+lafecha[2]+"</div>";
 document.write(fmonth+fday);
}
//]]>
</script>

La solución es mostrar el calendario en cada post, sin importar si hay dos o más entradas en el mismo día. Para esto, es necesario saber la fecha, algo que Blogger no parece permitirnos así que lo que podemos hacer es decirle que recuerde la última fecha y, si la que tiene que colocar no existe, que use la anterior. Como la página se muestra en orden cronológico (el primer post mostrado es el último ingresado) las entradas que no tengan fecha corresponderán siempre al mismo día que la última que sí tuvo fecha.

¿Engorroso? No importa, el script debería cambiarse de esta manera:

<script type='text/javascript'>
//<![CDATA[
var ultimaFecha; // contendrá la última fecha

function calendario(cual) {
 if (cual == "") {
    cual = ultimaFecha; // Blogger no envia la fecha, usar la anterior
 }
 var lafecha = cual.split('-');
 fday = "<div class='caledia'>"+lafecha[0]+"</div>";
 fmonth = "<div class='calemes'>"+lafecha[1]+"</div>";
 fyear = "<div class='caleanio'>"+lafecha[2]+"</div>";
 document.write(fmonth+fday);
 ultimaFecha = cual; // preservar la última fecha escrita
}
//]]>
</script>

De ahora en más, todos los posts tendrán fecha.

Un documental de la TV inglesa, realizado en 1968 que intenta explicar la influencia de la música pop y de como esta ha cambiado las conductas sociales en todo el mundo: drogas, sexo, moda, medios, el amor y el odio.

Un montaje que incluye programas de aquellos tiempos, los Beatles en estudio, Londres en los años 60, el fenómeno de la psicodelia, Cream, Hendrix, Pink Floyd, The Who destrozando equipos. Entrevistas a Paul McCartney, George Martin, Derek Taylor, el Maharishi Mahesh Yogi, Donovan, Pete Townsend, Kit Lambert, Manfred Mann, Terry Dene, Frank Zappa, Jimi Hendrix, Eric Burdon y muchos otros.



Hacer click en la imagen para comenzar.

REFERENCIAS:

Stage6

Descarga directa

Para quienes les gustan los accesorios en Flash, este sitio posee una serie de herramientas que nos ayudarán a crearlas online.

Flash Navbar Generator y Flash Topbar Generator crean barras de navegación utilizando algunos modelos pre-diseñados.

Flash Tooltip Generator nos permite generar tooltips para utilizar en nuestros enlaces (sólo para Internet Explorer)

Flash Drop-Down Menu Generator genera menúes expandibles de manera sencilla, simplemente basta seleccionar unas opciones e ingresar las direcciones URLs.

En todos los casos, la página nos devuelve el archivo SWF y el código necesario para insertarlo.

Lo mismo puede hacerse utilizando herramientas gráficas sin la necesidad de utilizar archivos de Flash: Graphic Navbar Generator, Sitemap Menu Generator y Graphic Navbar Generator.

ver la versión actualizada¿Peter? ¿alguien llamado Peter?

Debo reconocer, con cierta vergüenza, que estos sitios donde puede jugarse con las imágenes, son mi debilidad. En Keytrucos me encontré con uno que parecía divertido y allí fuí.

Myheritage es un servicio donde podemos subir nuestra foto y armar un collage que la mostrará junto con las de algunas celebridades a las cuales nos parecemos ... o, por lo menos, eso dice hacer.

En fin, no se si agregar algo. He quedado perturbado profundamente por el resultado obtenido. Como se ve, no hay demasiados parecidos, entre un 60% y un 50% pero igual, no dejo de sentirme extraño.

Bram Stoker escritor, conocido por ser el autor de Drácula; Giacomo Puccini compositor de óperas (algo que simplemente no soporto escuchar); Johnny Carson, actor y comediante norteamericano.

Claro, hasta ahí, es discutible pero: Cindy Crawford ... ¿Cindy Crawford? ¿seguro que me parezco a Cindy Crawford?

Lo peor: Condoleezza Rice. Sí Condoleezza Rice, la Secretaria de Estado Consejera de Seguridad del presidente Bush. ¿Condoleezza Rice? ¿no podría haber sido otro u otra? .

Mamá ... SOCORRO!!!

Groovle es un servicio que nos permite personalizar la página principal del buscador de Google añadiendo fondos pre-diseñados o subiendo una imagen.

Una vez creada, podemos establecerla como nuestra página de búsqueda por defecto.

Ver un ejemplo

Cuando se cargan las imágenes de una página, estas quedan almacenadas en el caché. Por lo tanto, si una de ellas se utiliza en otras páginas no será requerida al servidor para ser cargada de nuevo. Por ello, siempre que se pueda, es conveniente repetir la misma imagen para los botones, los íconos, las barras de separación, etc.

leer artículo actualizado

Ahora es IBM el que sale a competir con su ¿ex-socio? y lo hace con su suite Lotus Symphony que dispone de un procesador de textos, una hoja de cálculo y un programa de presentaciones.

Parece estar basada en Open Office y, en ese sentido, tiene los mismos inconvenientes, pese a funcionar correctamente y ser compatible con todo tipo de archivo, es extremadamente lenta.

Tiene cosas muy interesantes como las pestañas y la posibilidad de tener ejecutándose en cada una de ellas, los diferentes componentes así que es sencillo trabajar simultáneamente con una hoja de cálculo, un texto o una presentación y cambiar de una a otra con un solo click.

Como si fuera poco, es gratuita (un saludo a Bill Gates) y la versión beta está disponible para ser descargada tanto para Windows como para Linux.

DESCARGAR:

ibm.com

A los mismos creadores de Acrobots y Levers se les ha ocurrido realizar esta nueva locura: Feed The Head ... ¿Alimentar la cabeza?

No hay mucho que explicar, en realidad, no hay nada que explicar.

VER PÁGINA ORIGINAL:

Feed The Head

No, no es Billy Gates, ni a Billy The Kid. Es otro Billy.

Este Billy es Daniel Mucarsel Sacoto, 24 años, español, y está encerrado con su computadora en un hotel de Barcelona desde hace tres días. Su misión en este mundo es ir cumpliendo diferentes pruebas diarias con la ayuda de los visitantes durante 10 días, vigilado por dos cámara web.

La idea es de OgilvyOne, una empresa de marketing y su intención es comprobar si una persona aislada con una computadora es capaz de conseguir todo lo necesario para vivir.

¿Ejemplos?: conseguir un colchón para dormir, iniciar un blog, obtener un celular, subir un video a YouTube, conseguir parlantes para la PC, recibir la visita de un futbolista de su equipo favorito.

El Desafío Digital termina el 27 de septiembre.

Ayudemos al pobre Billy y vayamos a su sitio

REFERENCIAS:

infobae.com

Para los amantes de PowerPoint, Google está presentando su sistema de presentaciones incorporado a Google Docs.

Google Presentations permite crear presentaciones con plantillas prediseñadas, añadir y editar textos o imágenes y la posibilidad de importar archivos en formato PPT o PPS entre otras opciones.

REFERENCIAS:

Google Blogoscoped

Quiero emborrachar mi corazón para apagar un loco amor que más que amor es un sufrir.

Commodore Vic-20 (1980)	Commodore 64 Home (1982)

Click para ejecutar el video.

Commodore 64 Commercial (1983)	Commodore 64 (1984)

Quiero por los dos mi copa alzar para olvidar mi obstinación y más la vuelvo a recordar.

El audio de los juegos	Compilación de audios

Click para ejecutar el video.

Yo no quiero rebajarme, ni pedirle, ni llorarle, ni decirle que no puedo más vivir...

100 Juego de la Commodore 64 en 10 minutos

Desde mi triste soledad veré caer las rosas muertas de mi juventud.

Referencia: Beta Hacks - Posts Expandibles

Algo que siempre anduvo mal con este hack que permite contraer y expandir una parte de cualquier entrada del blog, es que todo era normal cuando estábamos en la página principal pero, cuando navegábamos utilizando los vínculos que provee Blogger y que se colocan al final de casi cualquier plantilla (Entradas Recientes / Entradas Posteriores), parecía colapsar ya que todos los posts mostraban el enlace que poníamos (Leer Más o cualquier otro) incluso aquellos donde no había texto oculto.

Durante mucho tiempo vi que no había solución al respecto y que, en realidad, ni siquiera se tenía idea de cuál era el problema; aparentemente, parecía ser algo que generaba el mismo Blogger cuando creaba la dirección URL pero, nada más.

Por casualidad, cuando alguien me envió una plantilla para revisar, me encontré con que el código que se utilizaba para esa sección, era distinto al que yo conocía y al que, por defecto, se veía en cualquier plantilla. Este, es el código en normal:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link'
expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'>
<data:newerPageTitle/>
</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link'
expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'>
<data:olderPageTitle/>
</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/>
</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/>
</a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Donde:
<data:newerPageTitle/>
<data:olderPageTitle/>
<data:homeMsg/>
son los textos o imágenes que utilizamos para esos enlaces (en mi caso: Hacia las más recientes, Hacia las más antiguas y Página principal respectivamente).

El problema, se resuelve reemplazando lo resaltado en rojo. Es decir:

En lugar de:
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
escribimos:
id='blog-pager-newer-link'

y en lugar de:
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
escribimos:
id='blog-pager-older-link'

Esto, simplemente significa eliminar data:widget.instanceId algo que no tengo la menor idea qué significado tiene ni cuál es su uso pero, no importa porque ahora, todo parece funcionar perfectamente.

Yaml Builder (Yet Another Multicolumn Layout) es una herramienta que permite crear plantillas XHTML y CSS de manera visual, seleccionando la cantidad de columnas, los anchos, la posición de cada una y una serie de parámetros más. Una vez que estamos conformes con el resultado, nos da el código correspondiente, incluyendo los posibles hacks para Internet Explorer.

Hay una demo online donde podemos probar como funciona.

Descargar YAML V3.0.3, Build: 070818, (multilingual)
Documentación (en inglés)