Dos herramientas para feeds

A veces, puede ser útil leer los feeds de un sitio y mostrarlos de alguna manera distinta. Estas son dos herramientas online que lo permiten:

rss2html: Genera direcciones independientes que podemos enlazar. Primero, seleccionamos el esquema del diseño y los colores (de listas predefinidas); luego, ingresamos la URL de los feeds que podrían ser la del blog:
http://miBlog.blogspot.com/feeds/posts/default
la de una etiqueta:
http://miBlog.blogspot.com/feeds/posts/summary/-/nombreEtiqueta
la de los comentarios:
http://miBlog.blogspot.com/feeds/comments/default
El resultado, será una URL que podemos enlazar; por ejemplo esta.

FeedSweep: Hace algo similar pero además, eprmite combinar varios feeds en uno. Ingresamos la URL de uno o varios y luego vamos seleccionando entre las múltiples opciones de configuración, tanto gráficas como filtros. El resultado es un código que podemos insertar en cualquier página web.

tubePlayer es un reproductor de vídeos de Youtube personal creado por unijimpe y que tiene características muy interesantes. Es muy liviano, no necesita scripts adicionales, podemos darle el tamaño que se nos ocurra y tiene todos los controles elementales incluyendo la posibilidad de verlos en pantalla completa.

Para utilizarlo, descargamos el ZIP , lo descomprimimos y todo lo que necesitamos es alojar el archivo tubePlayer.swf en un servidor, podemos hacerlo en Fileden, en ImageShack, en Xoo Image o donde más nos guste.

Hecho eso, basta agregar el código HTML tal y como lo hacemos normalemnte para incluir cualquier otro reproductor:

<object width="501" height="310" id="movie" type="application/x-shockwave-flash" data="URL_tubeplayer.swf">
<param name="movie" value="URL_tubeplayer.swf" />
<param name="FlashVars" value="videoId=XXXXXXXXXXX" />
<param name="allowFullscreen" value="true" />
</object>

donde:

• en width y height colocamos el tamaño deseado
• reemplazamos URL_tubeplayer.swf por la URL del archivo que hayamos alojado
• y colocamos en XXXXXXXXXXX el ID del video a reproducir

El ID de un video de YouTube es ese conjunto de once caracteres que nos muestran al final de las páginas:

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

Eso es todo. Eventualmente, podemos agregarle el parámetro de autoplay de este modo:

<param name="FlashVars" value="videoId=XXXXXXXXXXX&autoPlay=true" />

En un foro, alguien comentaba burlonamente: "Esto funcionaba en IE5.5, hace 10 años. Pasó mucho tiempo hasta que se incorporó a navegadores como Safari y recién ahora es posible aplicarlo en Firefox 3.5 ... bueno ... pero, aún le falta implementar la parte de 3D .. tal vez, en algunos años ..."

¿De que hablaba? De una propiedad CSS llamada genéricamente Transform y que permite eso que dice su nombre, transformar el contenido de un elemento.

Tenía razón. Lentamente, los navegadores están incorporando algunos de estos filtros que ya existían aunque les ponen otros nombres y nos obligan a escribir muchas más cosas (¿cómo era ese cuento chino del respeto a los estándares?) ... en fin, no importa, lo importante es que podemos usarlos aunque debamos escribir de más:

• DXImageTransform.Microsoft.BasicImage (Internet Explorer)
• -webkit-transform (Safari | Chrome)
• -moz-transform (Firefox)

Un tweet de DanielUlczyk me lleva a snook.ca antes de leerlo en los feeds y allí nos muestran un ejemplo aplicado a las fechas estilo calendario. No explican nada pero bueno ... sería algo así:

31July2009

<style type="text/css">
.example-date {
  background-color: #123;
  border: 1px solid #345;
  padding: 45px 5px 0;
  position:relative;
  width: 60px;
}
.example-date .example-day {
  font-size: 45px;
  left: 5px;
  line-height: 45px;
  position: absolute;
  top: 0;
}
.example-date .example-month {
  font-size: 25px;
  text-transform: uppercase;
}
.example-date .example-year {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  display: block;
  position: absolute;
  right: -5px;
  top: 15px;
}
</style>

<div class="example-date">
  <span class="example-day">31</span>
  <span class="example-month">July</span>
  <span class="example-year">2009</span>
</div>

Aplicándolo así, directamente, es poco flexible, el resultado dependerá del tipo de fuente y sobre todo, de la longitud de los textos:

28jul2009

28ago2009

1dic2009

Así que lo mejor es usar unidades relativas como em. Este es un un ejemplo basado en la fecha de los posts:

31jul2009

31jul2009

28ago2009

1dic2009

<style type="text/css">
.fechademo {
  display: block;
  font-family: Verdana,Arial;
  font-size: 41px;
  font-weight: normal;
  height: 1em;
  line-height: 18px;
  padding: 10px 0 0;
  position: relative;
  width: 1.8em;
}
.diademo {
  color: #789;
  display: block;
  font-family: Times New Roman;
  letter-spacing: -2px;
  line-height: .7em;
  text-align: center;
  width: 1.8em;
}
.mesdemo {
  color: #DCDCDC;
  display: block;
  font-size: 0.4em;
  text-align: center;
}
.aniodemo {
  color: #D93;
  display: block;
  font-size: 0.35em;
  position: absolute;
  right: -0.6em;
  top: 16px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

<div class="fechademo">
  <span class="diademo">28</span>
  <span class="mesdemo">ago</span>
  <span class="aniodemo">2009</span>
</div>

La rotación está definida en grados tanto valores positivos como negativos aunque en IE se define con un código numérico:

-webkit-transform: rotate(VALORdeg);
-moz-transform: rotate(VALORdeg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=VALOR);
     donde:
          0 es no rotar
          1 rota 90 grados
          2 rota 180 grados
          3 rota 270 grados (-90 grados)

En resumen, hay diferencias y detalles que deberán tenerse en cuenta pero:

Rotar no es el único efecto posible, hay muchos más y vale la pena mirar, tanto para Internet Explorer como para Firefox

Cuando se habla de "páginas estáticas" nos estamos refiriendo a que ciertos accesos al blog, no sean entradas sino algún tipo de página especial, distinta al resto pero, en Blogger, esa posibilidad no está contemplada, sólo pueden agregarse entradas (posts) y estos, se muestran ordenados cronológicamente, partiendo del más reciente y terminando en el más antiguo.

Hay muchas formas de simular esas páginas. La más elemental, si se trata de darles un aspecto gráfico muy especial, es crear otro blog y allí colocar la plantilla que nos guste o copiar la que usamos normalmente y modificarla. Como lo que normalmente uno coloca en esas páginas estáticas es información suplementaria como índices, formularios de contacto, condiciones de uso, etc, no tiene importancia si la URL es otra, es más, sería incluso mejor que no las indexemos en los busadores.

Pero, también es posible simularlas en el propio blog, personalizando los posts para que no parezcan lo que son. Ahora, El escaparate de Rosa agrega una alternativa más que es una idea muy sencilla y muy inteligente.

Lo que hace el truco es aprovechar los códigos condicionales que ya tiene Blogger, en este caso, la condición:

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

que ejecuta un código si y sólo si, los comentarios de una entrada están habilitados.

En el editor de entrdasa, si hacemos click en el enlace inferior Opciones de entrada, se desplegarán una serie de alternativas que controlan la forma en que se manejarán los comentarios de esa entrada exclusivamente. Podemos establecer una de tres posibilidades y en este caso, marcaremos la última:

Comentarios de los lectores
Permitir
No permitir, mostrar existentes
No permitir, ocultar existentes

En la misma ventana, cambiamos la fecha por una muy vieja y de esa manera, al publicar la entrada, esta aparecerá al final del blog y no en el home.

Ahora, faltaría condicionar cada sección de las entradas en Diseño | Edidión HTML y, expandiendo los artilugios, buscamos la fecha y agregamos lo que esta en color para que sólo se muestre si los comentarios están habilitados:

<b:if cond='data:post.allowComments'>
  <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
  </b:if>
</b:if>

Lo mismo haremos con el pié de pagina de las entradas donde, normalmente, se muestra al autor, las etiquetas y todo tipo de información adicional:

<b:if cond='data:post.allowComments'>
  <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>
      .......
    </div>
    <div class='post-footer-line post-footer-line-2'>
      .......
    </div>
    <div class='post-footer-line post-footer-line-3'>
      .......
    </div>
  </div>
</b:if>

Siempre dentro del mismo Elemento Blog, es posible condicionar cualquier otra cosa usando el mismo esquema y así también, agregar estilos CSS que sobrescriban los estilos por defecto:

<b:if cond='data:post.allowComments'>
  ... los comentarios están habiitados ...
<b:else/>
  <style type="text/css">
    /* definiciones si los comentarios no están habiitados */
  </style>
</b:if>

Los estándares web son palabritas que solemos escuchar aquí y allá, todo el tiempo ¿Qué son? ¿Qué ocurrirá si no los sigo? ¿Me expulsarán del paraiso de la www? ¿Seré estigmatizado?

Los estándares web son un serie de recomendaciones dadas por el World Wide Web Consortium (W3C) y otras organizaciones que especifican la forma en que deben crearse sitios web ¿Para qué? Esto es lo importante: para que puedan ser accesibles a la mayor cantidad de usuarios posibles. Digo que esto es lo importante porque muchos confunden el fin con el medio. Los estándares y las recomendaciones son un medio, el fin es otro: los usuarios.

Es que el resto es filosofía webeliana, algo que discuten los teóricos y que, a los usamos internet, apenas nos roza. Nosotros USAMOS la web y elegimos porque cierto servicio nos sirve, porque nos resulta cómodo o porque simplemente, nos gusta. Eso es así hasta que dejamos de ser sólo usuarios y pasamos a ser parte de lo que se define como prosumidores, una mezcla de productor de contenidos y consumidor de contenidos. El ejemplo más sencillo de esto es un blog. Ahí, comenzamos a interesarnos en el tema y a usar palabras como estándares, odiar Internet Explorer y tratar de validar nuestro sitio porque ... ¿por qué?

¿Cuáles son las bases de los estándares? Separar el contenido (HTML) de la apariencia (CSS) lo que permite usar menos código y por lo tanto, cargarlos más rápidamente. El estándard, además, permite que los motores de búsqueda identifiquen e indexen los contenidos de los sitios correctamente. Mejora el posicionamiento porque a los buscadores no les gustan los códigos estrafalarios e ínutiles. Abarata costos al usar menos ancho de banda, etc, etc.

En todo caso, en la práctica, todo se resume en que el ideal de un sitio es que sea compatible con todos los navegadores y dispositivos, que sea flexible, que sea modificable y además, que sea accesible a personas con discapacidades (más información).

¿Hay alguna objeción a esto? En absoluto, no hay peros ... pero ...

Muchos son los que intentan validar sus sitios en Blogger, leen que hay cientos de errores y se asustan ¿Qué deberían hacer? Una sola cosa, aprender y entender lo que esos mensajes nos están diciendo. Esto es lo básico. Nadie nace sabiendo y un blog no es la excepción. Muchos servicios tienen una ventaja, son una forma simple de empezar, pero tienen como consecuencia indeseada, generar en quien lo utiliza, la sensación de que bastan dos o tres clicks para resolver las cosas o solucionar problemas. Esto no es así, jamás. Hay algo peor que no saber: creer que sabemos.

Si usamos cualquier herramienta que analice la estructura de nuestro sitio veremos errores que serán imposibles de corregir ya que son provocados por el mismo sistema y por lo tanto, incorregibles y también veremos errores reales que podemos corregir o, por lo menos, saber porque se identifican como errores o advertencias:

"required attribute "alt" not specified" en cada imagen que no posea un atributo ALT
"required attribute "type" not specified" cuando usamos STYLE o SCRIPT

Habrá que leerlos uno por uno, entenderlos y saber cuál es el límite entre lo ideal y lo posible.

Pero, por si fuera poco, también veremos errores "dudosos", esos que nos dicen que algo debe ser escrito de tal manera y no parecen tener sentido. Y esto también es importante entenderlo ya que en realidad, el estándard es un ideal, un punto hacia el que deberíamos tender, un camino pero no una regla que deba tomarse sin pensamiento crítico, evaluando qué hacer y tomando decisiones subjetivas.

No se trata de infringir las reglas sino de conocerlas ya que de este modo, si las violamos o las eludimos o las cuestionamos, sabremos cuales son las consecuencias y podremos sopesar los pros y los contras de nuestras acciones. No creo en aplicar todas las reglas a ciegas, creo en conocerlas y elegir a conciencia. No nos privamos de hacer ciertas cosas porque hay una ley que lo prohiba, no lo hacemos porque sabemos que está mal y lo evitamos.

Hace poco, CSS Globe publicó un artículo sobre lo que consideran malentendedidos en esto de los estándares web. Vale la pena resumirlos:

Estándares Web = Validación:
La validación es importante pero, debe tomarse como un asistente, sobre todo cuando estamos aprendiendo. Por si misma no significa nada y tampoco implica que se están usando los estándares web ya que estos dependen de muchas otras. Nos muestran un ejemplo interesante:
hola maravilla alegría sin perros seis avenidas
Esa frase no tiene "errores", cualquier herramienta que verifique la ortografía dirá que es correcta y sin embargo, carece de sentido. Valida pero carece de lógica.

Estándares Web = CSS:
Utilizar hojas de estilo no garantiza el estandard. Ni la tecnología ni el CSS ni ninguna otra herramienta garantiza eso, todo depende de cómo son usadas. Por si mismas, nada significan.

Estándares Web = No usar tablas:
"La tablas son demoníacas" "Las creó el diablo-geek y usarlas significa el castigo eterno en un infierno sin computadoras" Es una de las pseudo-verdades más extendidas y es completamente falsa. Ningún elemento HTML es diabolico o malo o está prohibido. Fueron creados por gente inteligente y tienen su propósito. Usarlos sin inteligencia es lo único que podría considerarse pecaminoso.

Estándares Web = Divs:
¿Que hacen muchos diseñadores? Simplemente reemplazan las tablas con DIVs, el resultado, lo mismo pero más confuso, código enredado y lleno de cosas inútiles que incrementan la longitud de las propiedades CSS. No es un tema de DIVs sino de encontrar el camino más simple para mostrar lo que queremos mostrar.

Estándares Web = No IE:
La segunda de las grandes verdades falsas. Podemos echarle culpas al navegador y no dejaremos de tener cierta razón pero, nuestro trabajo es ese: hacer que nuestro sitio web se muestre de manera correcta en un navegador que no respeta los estándares y para eso, debemos chequear como se ve porque lo quieran o no, es el navegador más utilizado y lo seguirá siendo por mucho, mucho tiempo. Negarse a eso es un error elemental y una falta de respeto para quienes visitan nuestro sitio.

Algunos ejemplos prácticos de la W3C sobre estándares:

• proporcionar a la página un buen título que no sea demasiado corto:
  <title>Sección Uno</title>
• pero tampoco demasiado largo:
  <title>La Guía de la Música Moderna - Sección Uno: Musicalmente hablando, ¿Cuándo comenzó la Época Moderna?</title>
• no usar "haz click aquí" como texto de los enlaces ya que si queremos provocar que el usuario haga algo debemos utilizar textos cortos pero significativos, que proporcionen información, que expliquen lo que ofrece el enlace
• no emplear redirecciones en etiquetas meta
• usar <h1> para el encabezado de nivel superior, los títulos de los documentos o de las entradas. Si es demasiado grande (por defecto lo es) usar CSS para dimensionarlo
• usar el atributo alt en las etiquetas img para proporcionar un texto equivalente; esto, facilita el acceso a personas con problemas visuales y ayuda a los motores de búsqueda a indexar correctamente la página (los buscadores "leen" ese atributo)
• si se elige un color, hay que elegir todos. No se puede dejar que sea el navegador quién defina los colores del texto o del fondo.
• tener cuidado con el tamaño del texto, los tamaños pequeños están de moda pero, aún cuando los veamos bien, debemos considerar que a nuestra página se accederá desde otros navegadores, otras plataformas y otros dispositivos así que no todos verán lo que nosotros vemos

Es verdad, no tiene sentido diagramar un sitio web sólo con tablas, será un código larguisimo y poco flexible pero tampoco tiene ningún sentido escribir veinte líneas de propiedades para alinear un conjunto de imágenes y textos si con una tabla lo organizamos rápidamente. No es cosa de buenos y malos, es que estamos eligiendo la herramienta incorrecta o la estamos utilizando mal.

La meta es siempre la misma, simplificar y clarificar. Nosotros somos los responsables, no las etiquetas ni los navegadores y para eso, no hay ley que valga.

Estandares SI. Y también experimentación, rebeldía, juego, espíritu crítico, mente abierta y ser muy conciente de las limitaciones de las herramientas que usamos y de nuestras propias limitaciones. Para todo eso, sólo hacen falta dos cosas: APRENDER y DUDAR.

Y, sí, Twitter no genera revoluciones y apenas calienta la protesta pero a uno lo vuelve un poquito loco. Algunos usuarios viven allí adentro, otros salen de tanto en tanto a tomar aire pero, sea cual sea el uso que le demos, siempre es bueno disponer de íconos, botones e imágenes para adornar nuestra manía, digo, nuestro blog.

Empezamos con los más nuevitos, los creados por BanakaBanaka; son cinco íconos en formato PNG de tres tamaños diferentes:

El blog de Gem@ nos propone otros dos:

el set de Mirjami Manninen

el set de Icons ETC

El escaparate de Rosa tiene muchas entradas sobre este tema. Entre ellas:

el set de webdesignerdepot

Pero hay más: 1 | 2 | 3 | 4, incluyendo un set con gifs animados:

Otro sitio con múltiples entradas es el de Pizcos. Allí nos encontramos con el original set de TypTwiIcons :

Y muchísmimos otros 1 | 2 | 3 | 4 | 5, incluyendo las galerías de Antonis Theodorakis y de Mau Russo.

¿Es poco? Ariane de Templates para Novo Blogger tiene una entrada con una lista enorme de recursos para todos los gustos:

Bueno ... esto nunca termina así que acá están los propuestos por z-graphics: el set de poeticpixel, Twitter Eggs, Twitter Bottle Caps, Tweeta y "las porristas".

Client for Google Translate

Video tutorial for the Client for Google Translate.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/5bXXLCnZess'><param name='movie' value='http://www.youtube.com/v/5bXXLCnZess' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

Client for Google Translate es un software gratuito que nos permite traducir textos desde casi cualquier aplicación, ya sea un navegador, Office, el cliente de correos, las ayudas de los diferentes programas que usemos o el mismo block de notas.

Al instalarlo seleccionamos el idioma por defecto pero bastan un par de clicks para cambiar las opciones que son muchas.

Se agregará a la barra de Windows y nos mostrará un ícono azul que se volverá naranja cuando estemos en alguna aplicación donde pueda usarse.

Bastará entonces seleccionar un texto y hacer click o establecer algún tipo de atajo de teclado (por defecto CTRL + CTRL) para ver la traducción o abrir el editor:

The Real Blogger Status muestra una forma sencilla de "simular" un formulario de contactos.

¿Para qué? Simplemente porque a muchos, les resulta complicado encontrar un servicio gratuito que lo provea y Blogger, aunque es parte de Google y allí existe GMail, no nos brinda este servicio elemental ... otro más.

¿Cómo hacerlo? Fácil. Crear un post sin contenido y usarlo como "almacenamiento" de comentarios generales. En realidad, es una solución bastante parcial pero ... paciencia.

Hecho eso, basta tomar la URL de ese post y colocarla en un menú, en la sidebar o donde se nos ocurra. eventualmente, podríamos suscribirnos a esos comentarios para recibir norificaciones en nuestro correo y personalizar ese post para disimularlo un poco.

A decir verdad, pensé que podría crearse un blog vacio, sin más contenido que ese post e incrustarlo en nuestro sitio mediante un IFRAME o usando LightWindow o cualquier otra ventana modal para abrirlo pero, si bien esto es posible y funciona perfectamente, como, una vez que el comentario se envía, Blogger cierra la ventana y nos redirige a ese post, el resultado es malo ya que nos saca del blog desde el que lo llamamos.

Si alguien tiene una idea para evitar eso, soy todo oidos. Mientras tanto, sólo puedo seguir gritando lo mismo: ¡¡¡El formulario de comentarios apesta !!!!!!!!!!!

Futurebox es un experimento para crear algo así como una ventana modal al estilo que lo hace LightWindow, iBox, FloatBox o cualquier otro script pero .. sin JavaScript, usando sólo CSS3. Esto, quiere decir que no funcionará en Internet Explorer pero si lo hará en Firefox, Opera, Safari y Chrome ya que se basa en la posibilidad que da una pseudo clase llamada :target.

El código HTML para las miniaturas sería algo así:

<a href="#contenedor1">
  <img src="URL_imagenMiniatura" width="ancho" height="alto" id="imagenM1" />
</a>

En cada una colocaremos un atributo href con el nombre del contenedor (siempre diferentes) y cada miniatura también tendrá un nombre único.

Ahora el modelo del contenedor que permanecerá oculto y que es donde está la imagen original:

<div class="overlay" id="contenedor1">
  <div class="overlay_container">
    <a href="#close">
      <img src="URL_imagenOriginal" width="ancho" height="alto" />
    </a>
  </div>
</div>

Lo que faltarías, sería el estilo CSS:

<style>
.overlay{
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 999;
}
.overlay .overlay_container{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.overlay_container img{
  background-color: #678;
  padding: 15px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}
.overlay:target {
  display: table;
}
</style>

REFERENCIAS:anieto2k

Hace ya un par de meses, El escaparate de Rosa publicó un artículo donde en los comentarios se chismorréa de lo lindo pero, acá somos gente seria así que solamente nos ocuparemos del tema técnico (y seguiremos leyendo los chismes, claro.

El título lo dice todo: Header con "ancho total" y viene a cuento para seguir con el tema del último tutorial donde se hablaba de centrar los blogs.

El término ancho total se refiere justamente a eso, a que la parte superior del blog, eso que llamamos "header" ocupe todo el ancho del monitor, sin importar la resolución de este.

La forma de hacerlo es sencilla, en realidad, no se trata de ampliar el blog o el HEADER sino de agregar una imagen extra en el BODY, una imagen que se repita y que, por ejemplo, como ha hecho Rosa, tenga colores iguales a los del HEADER mismo.

La imagen repetida la ponemos en el BODY de esta manera:

body {
background: #color url(URL_imagen) repeat-x left top;
.......
}

El body es un rectángulo que equivale a la pantalla del monitor y encima de este rectángulo está nuestro blog formado por una serie de rectángulos más. Si asimilamos esto a una serie de hojas de papel transparente, diríamos que en una hoja (BODY) dibujamos algo y en otra más chica que ponemos encima (HEADER), dibujamos otra cosa con lo cual, veremos ambas.

La imagen del BODY puede ser cualquier cosa, como pueden usarse GIFs o PNGs transparentes o traslúcidos también podríamos usar modelos de fondos fijos:

body {
background: #color url(URL_imagen) repeat-x fixed left top;
.......
}

Pero, siempre hay alguien que pide un poco más, por ejemplo ¿y si quiero hacer lo mismo con el FOOTER?

Si hemos entendido la idea de los rectángulos superpuestos, es sencillo. Hay que buscar otro que sea tan grande como el BODY y, en realidad hay uno más; un rectángulo del que normalmente no hablamos y que en realidad, es el primero, el que está más abajo de todos y que contiene a toda la página. Seguramente lo han visto: es el elemento HTML.

En toda etiqueta HTML podemos agregar propiedades CSS y esta no es la excepción así que, si quisiéramos colocar dos fondos que ocupen todo el ancho de la pantalla, podríamos usar esos dos rectángulos:

html {
background: #color url(URL_imagenFOOTER) repeat-x left bottom;
.......
}
body {
background: transparent url(URL_imagenHEADER) repeat-x left top;
.......
}

El orden en que pongo las imágenes es indiferente siempre y cuando la posición de la que va abajo sea bottom y la posición de la que va arriba sea top. Lo que no es indiferente es el color de fondo porque estamos hablando de imágenes que no son muy grandes, gradientes o patterns que se repiten pero que terminan; en estos ejemplos sólo son de 5x200 pixeles así que el resto del fondo, eso que la imagen no alcanza a cubir, se llena con el color que repite el último color de la imagen (#DDDDFF).

Pensemos en las hojas transparentes, HTML es la de abajo, la pinto de un color; BODY es la de arriba, a esa le digo que sea transparente (transparent) para que se vea la de abajo, si lo hiciera al revés, la taparía y no la vería.

¿Qué pasará si en lugar de mosaicos repetitivos quiero poner una imagen fija?

No hay problema, sólo debemos cambiar repeat-x por no-repeat pero, deberemos tener en cuenta que se colocará en una posicion que dependerá del la resolución de la pantalla de quien abra la página así que, colocándola en el BODY no podremos controlarla.

También lo podemos colocar fijo, de tal manera que no se mueva cunado hacemos scroll, para eso usamos la palabra fixed:

body {
background: transparent url(URL_imagenFIJA) no-repeat fixed left top;
.......
}

¿Y si queremos usar tres imágenes o cuatro o cinco? Parece un poco abusivo pero hay de todo.

Se nos acabaron los rectángulos predefinido pero, nada impide crear otros usando la etiqueta DIV; basta buscar la etiqueta <body> y agregar un nuevo rectángulo con un ID único:

<body>
<div id='otroBODY'>

y por supuesto, debemos cerrarla. Para eso, buscamos </body> y, justo antes, colocamos el cierre:

</div>
</body>

De este modo, podemos agregar cuantas se nos ocurra y luego, agregar el CSS correspondiente:

html {
background: #color url(URL_imagenFOOTER) repeat-x left bottom;
.......
}
body {
background: transparent url(URL_imagenHEADER) repeat-x left top;
.......
}
#otroBODY {background: transparent url(URL_imagenCENTRAL) no-repeat fixed left top;
}

Ciertos comentarios producen risa. Ciertos comentarios provocan enojos. Ciertos comentarios pueden molestar, parecer intrascententes o simplemente agraviantes. Es parte del juego, no hay mucho que hacer al respecto. Son las reglas y cada uno las maneja como puede.

Pero jamás, hasta ahora, me habían causado tristeza.

Una tristeza tan profunda que tuve que alejarme, que necesité escaparme, que necesité olvidarlos y no pude.

La lógica me dice "¿qué esperabas? este mundo no es otro mundo" y tiene razón pero no me consuela. Es que, en alguna parte debe quedar alguna gota de esperanza aunque no lo parezca; aunque no la merezcamos.

Sigo sin comprender por qué medimos el dolor con una vara tan pequeñita y por qué somos incapaces de ponernos de pie y decir NO, esto está MAL y no me importa QUIÉN lo haya hecho. Y no me importa POR QUÉ lo haya hecho. Y no me importa si el que sufre es rojo, negro, amarillo o a lunares. Y no me importa porque soy egoista, porque podría ser yo o podría ser alguien a quien amo.

¿Qué ideología puede justificar la crueldad, la muerte o la tortura de un semejante? ¿Qué bandera es más importante que la vida del otro? ¿Acaso un trapo teñido de colores vale más?

Después del "No Matarás" no hay mandamientos accesorios. Empiezan y terminan allí.

Imagino entonces, un rio de cadáveres flotando irreconocibles.

¿El de mi peor enemigo? ¿El de la mujer que amo? ¿El de un desconocido? ¿El de mis hijos? ... Y todos son iguales, nada los diferencia. La misma carne corrupta, la misma degradación, la misma nada ¿Quién fue ese? ¿Era ella? ¿Soy yo?

Siguen su camino en ese rio imaginario y los contemplo perderse hasta desaparecer en el horizonte y regreso a mi casa, solo, cansado, vacio. Sin esperanzas.

Los presos políticos uruguayos no pueden hablar sin permiso, silbar, sonreír, cantar, caminar rápido ni saludar a otro preso. Tampoco pueden dibujar ni recibir dibujos de mujeres embarazadas, parejas, mariposas, estrellas ni pájaros.

Didaskó Pérez, maestro de escuela, torturado y preso por tener ideas ideológicas, recibe un domingo la visita de su hija Milay, de cinco años. La hija le trae un dibujo de pájaros. Los censores se lo rompen a la entrada de la cárcel.

Al domingo siguiente, Milay le trae un dibujo de árboles. Los árboles no están prohibidos, y el dibujo pasa. Didaskó le elogia la obra y le pregunta por los circulitos de colores que aparecen en las copas de los árboles, muchos pequeños círculos de colores que aparecen en las copas de los árboles, muchos pequeños círculos entre las ramas:

— ¿Son naranjas? ¿Qué frutas son?

La niña lo hace callar:

— Ssshhhh.

Y en secreto le explica:

— Bobo. ¿No ves que son ojos? Los ojos de los pájaros que te traje a escondidas.

Eduardo Galeano

Pajaros Prohibidos

Un relato de Eduardo Galeano.

<object width='425' height='350' id='movie' type='application/x-shockwave-flash' data='http://www.youtube.com/v/JRkmP2dUcyA'><param name='movie' value='http://www.youtube.com/v/JRkmP2dUcyA' /><param name='wmode' value='transparent' /><param name='allowfullscreen' value='true'/></object>Copiar el código para insertar el video

REFERENCIAS:Colores Nevados

Wallpapers (textos)

Click en la imagen para previsualizar un modelo reducido.
Descargar el archivo ZIP que contiene las imágenes

Snipplr es un sitio donde se comparten códigos de distintos lenguajes (PHP, JavaScript, HTML, CSS). No es un lugar para alojar archivos sino para mostrar códigos y hacerlo de manera prolija, resaltando la sintaxis, numerando líneas, etc.

Lo interesante del sistema es que podemos incluir esos códigos ya formateados directamente en una página web ya sea usando un plugin para WordPress o embebiéndolo con un simple script que ellos nos ofrecen y que copiamos y pegamos. Por ejemplo:

<div id="snipplr_embed_271" class="snipplr_embed"><a href="http://snipplr.com/view/271/browser-detection/">Code snippet - Browser Detection</a> on Snipplr</div><script type="text/javascript" src="http://snipplr.com/js/embed.js"></script><script type="text/javascript" src="http://snipplr.com/json/271"></script>

Se vería de este modo:

Code snippet - Browser Detection on Snipplr

Como lo que se agrega son etiquetas, podemos crear definiciones ya que hay una clase CSS que las define. Un ejemplo:

div.snipplr_embed { /* es el bloque contenedor */
background-color: #EEE;
margin: 0 auto;
padding: 10px 40px;
width: 500px;
}
div.snipplr_embed h3 { /* es el título del código */
color: #345;
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0;
}
div.snipplr_embed pre { /* el código en si mismo */
color: #000;
}
div.snipplr_embed ol { /* el código es una lista ordenada */
margin:10px 0;
}
div.snipplr_embed ol li { /* cada línea de esa lista */
margin:10px 0;
}
div.snipplr_embed p { /* la línea final con el enlace */
color: #000;
font-size: 11px;
text-align:right;
}
div.snipplr_embed p a {
color: #000 !important;
}

Podemos usar su contenido de manera libre pero si queremos agregar los nuestros, hay que registrarse y luego, en crear un snippet, colocamos los datos que nos solicitan, escribimos el código y lo guardamos seleccionando si será público o privado.

El gadget de posts rotativos es una idea adaptada por Templates Novo Blogger y que muestra una serie de entradas con un efecto interesante.

Lo primero que necesitamos para utilizarlo es disponer de una clave del API AJAX de Google para búsquedas. Al leer esto, parecería que se trata de algo mu y complicado pero, en realidad, basta ir a esa página, colocar la URL del sitio donde vanos a usarla y generar la clave que será una larga lista de números y letras como esta:

GFQIYYYmEsy0hRTvLkOBHGTRFoTOxQdHqM2VVjGZXZiTctOOgVFDSbcuBBp_W_qoHvPa_omCD5vxrkeKJxQ_V

He leído y acepto los términos y condiciones
Dirección URL de mi sitio web:


Con ese trámite burocrático terminado, ya podemos aplicar el truco.

El código lo agregaremos donde nos guste verlo, en la sidebar, debajo del header o incluso en un post en cuyo caso deberemos escribir todo en una sola línea:

<script src="http://www.google.com/jsapi/?key=AQUI_PONEMOS_LA_CLAVE_AJAX" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [{title:'NOMBREBLOG', url:'http://URLBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},];
new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1000, stacked : true, title: "TEXTO TITULO DEL GADGET"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<div id="feedGadget">Cargando ...</div>

donde debemos agregar nuestros datos, la clave AJAX, el nombre del blog o la dirección URL y él título que queremos usar.

Guardamos y listo.

Bueno, listo no ... faltaría el CSS que, como siempre, es lo que le dá características gráficas personales y que podemos agregar antes de </b:skin> o entre etiquetas STYLE:

#feedGadget { /* es el bloque donde se mostrará */
margin: 0 auto; /* lo centramos */
width : 350px; /* le damos un ancho */
}
.gfg-root { /* el gadget */
background-color: #234;
border: 1px solid #456;
font-family: Arial,sans-serif;
font-size: 12px;
height: auto;
overflow: hidden;
padding: 4px;
position: relative;
text-align: center;
}
.gfg-title { /* el título superior */
background-color: #456;
color: #CDE;
font-size: 16px;
font-weight: bold;
line-height: 1.4em;
overflow: hidden;
white-space: nowrap;
}
.gfg-subtitle { /* el título inferior */
background-color: #456;
font-size: 14px;
line-height: 1.4em;
overflow: hidden;
white-space: nowrap;
}
.gfg-entry { /* el contenido */
height: 9.9em;
overflow: hidden;
position: relative;
text-align: left;
width: 100%;
}
.gfg-root .gfg-entry .gf-result { /* el contenido */
background-color: #123;
height: 100%;
padding: 0 10px;
position: relative;
width: auto;
}
.gfg-root .gfg-entry .gf-result .gf-title { /* el título de las entradas */
color: #ABC;
display: block;
font-size: 13px;
font-weight: bold;
line-height: 1.2em;
margin-top: 5px;
overflow: hidden;
white-space: nowrap;
}
.gfg-root .gfg-entry .gf-result .gf-snippet { /* el texto de las entradas */
color: #AAA;
font-size: 12px;
line-height: 1.3em;
margin-top: 5px;
}
.clearFloat {
clear : both;
}
.gfg-list { /* lista de entradas opcional */
display:none !important;
}

PictureTrail es un sitio para crear presentaciones de imágenes que luego puden ser utilizadas en páginas web o servicio de blogs. El sitio es muy completo, poca publicidad, incluye la posibilidad de compartir fotos, crear slideshows, crear páginas personales, un editor.

ver imagen alojada

Al crear una cuenta gratuita accedemos a una gran cantidad de opciones, incluyendo el uso el alojamiento de imágenes, la creación de albums y la generación automática de miniaturas. Las imágenes, podemos subirlas desde nuestra PC o desde otros sitios como MySpace, PhotoBucket, Friendster y Hi5.

Una herramienta nada despreciable.