Wallpapers (exteriores)

Wallpapers (exteriores)

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.

Quien nísperos come y bebe cerveza, espárragos chupa y besa a una vieja, ni come, ni bebe, ni chupa ni besa ...

¿Se podrán agregar botones rojos a la lista ... ?

REFERENCIAS: Versión libre de una animación hallada por Nico en su noches de Himsomnio

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 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. El resultado de eso, será algo así como lo que se ve en este DEMO

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.

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

¿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. Este es el DEMO online.

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

Este es el DEMO.

¿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;
}

Lo que se vería como en este DEMO.

Y ya que estamos, colocamos fixed en las tres imágenes para que se vea como en este otro DEMO.

Estas son dos presentaciones creadas por Russ Weakley y alojadas en slideshare. Es una pena que sólo estén disponibles en inglés pero vale la pena verlas.

CSS cascade es un tutorial elemental para diseñadores.

CSS line-height explica de manera detallada el significado de la propiedad line-height y las formas de utilizarla.

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

REFERENCIAS:Colores Nevados

Wallpapers (textos)

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.

Code snippet - Ejemplo de un widget de Blogger on Snipplr

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;
}

Loading...

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.

Cuando alguien escribe desde las entrañas, podemos estar de acuerdo o no en los detalles pero, no podemos dejar de escuchar y tratar de comprender. Eso me pasó leyendo las dos partes de La casa por el tejado (1 | 2) publicadas por Eulalia la semana pasada:

"En mi tierra tenemos un dicho. Cuando alguien hace algo al revés decimos que está empezando la casa por el tejado. Pues esta es la sensación que me da mucha de la gente que se lia con un blog. Abren un blog y antes incluso de empezar a poner entradas ni de hacer nada en él, ya quieren personalizarlo y aplicarle todos los trucos que han visto aquí o en otros blogs de ayuda."

No es la primera vez que leo cosas así, pocos días antes, Pizcos y Ariane expresaban más o menos lo mismo. Distintos estilos, distintas formas pero, esencialmente lo mismo. Algo que creo que podría resumirse en esto:

"Y volví a intentarlo una o mil veces, las que hiciera falta, con tal de lograrlo, pero nunca, jamás, le dije a alguien: 'No me sale, házmelo tu'. Porqué lo realmente divertido de este tema es lograrlo uno mismo."

Nunca como ahora, hemos tenido tantas herramientas al alcance de la mano y sin embargo, nunca como ahora, nos estamos negando tanto a aprender a usarlas. Parecería que la época exige inmediatez y resultados instantáneos. Dos clicks y tengo lo que quiero. Dos clicks y las cosas funcionan y sólo debo sentarme a esperar que el mundo se de cuenta que existo. Copio y pego y ya está ¡Rápido, rápido, rápido! ¡No hay tiempo que perder!

Nos vendieron el slogan de time is money y lo compramos ...

¿Qué copio? ¿qué pego? ¿dónde lo copio? ¿dónde lo pego? todas esas son preguntas irrelevantes, tanto que no me las formulo. No me interesa saber por qué, me interesa que esté listo YA. No me interesa nada más que el resultado y me dejo llevar por el capricho infantil de quiero eso, quiero eso, ¡quiero eso!

Claro, la mayor parte del tiempo, mal que mal, lo habré conseguido. Copié, pegué y funcionó pero ... sólo habrá sido una casualidad; la próxima vez que lo haga, el resultado será aleatorio y si los hados de la web tienen ese dia los cables pelados, el desasatre está garantizado.

¿Es necesario aprender para tener un blog? Es una pregunta tonta porque: siempre es necesario aprender y aprender no es pedir respuestas sino formularse preguntas.

El refrán dice algo así como ayudate a ti mismo que Dios te ayudará y esa es una frase que sigue teniendo validez. Ayudar es cooperar. Ayudar es colaborar. Ayudar es guiar pero soltarle la mano al otro para que camine solo porque el fin no es ir desde acá hasta allá sino aprender a ir a cualquier parte y no perderse en el camino.

No, no hay que ser un experto para tener un blog, sólo hay que conocer nuestras propias limitaciones y no pretender todo de golpe. Hay que ir paso a paso. Hay que tener paciencia. Hay que equivocarse una y mil veces y saber que sin importar cuánto sepamos, siempre nos vamos a equivocar otra vez ¡aleluya!

Hay que intentarlo cien veces y una más. Hay que tratar de comprender lo que hacemos y también hay que conformarse y saber decir "hasta acá llegué". Eso no es un fracaso, eso es un triunfo. Tal vez, mañana o pasado o dentro de un mes mires para atrás y digas "claro, esto era así y así ¿cómo no me di cuenta antes?"

Y garantizo algo, ese día, sonreirás como si hubieras descubierto la octava maravilla ...

¡Y tendrás razón!

Breadcrumbs son .. migas de pan, el rastro que dejaban Hansen y Gretel para encontrar el camino de regreso a casa.

En una página web es eso que muchas veces vemos debajo del header y que nos indica dónde estamos y cuál es el "camino" par regresar al inicio de la página.

En Blogger, el único camino que podemos seguir es el que establece el elemento Archivos:

Inicio > Año > Mes > Entrada

Y eso eso es lo que hace este hack de purplemoggy que ya es bastante viejo pero que cumplo en explicar o, simplemente traducir ya que es muy sencillo de agregar.

¿Para qué sirve? En principio, ayuda a la navegación y eso siempre es bienvenido. De todas formas, si lo que tenemos es un blog con muchas entradas mensuales, la utilidad práctica es bastante relativa. No sé cuántos usuarios navegan a través de los archivos de meses o años, estimo que pocos porque no es algo que nos ayude demasiado a encontrar cosas.

Para implementarlo, debemos asegurarnos que la Configuración del blog sea correcta. En la solapa Archivo debe estar marcada esta opción:

Frecuencia de archivo Sin archivoDiariamenteSemanalmenteMensualmente

Vamos a la plantilla. Con los artilugios expandidos, buscamos el widget del blog:

<b:widget id="Blog1" locked="false" title="XXXXXXXXXX" type="Blog">

Y dentro de este, el LOOP de los posts:

<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>

Allí, justo después de esa línea, agregamos lo siguiente:

<b:include data='post' name='breadcrumbs'/>

Por último, pondremos el código de ese INCLUDE. Para eso, lo más sencillo es ir hacia abajo hasta el final del widget:

</b:widget>
</b:section>

Y justo antes de </b:widget>, colocar el código correspondiente

<b:includable id='breadcrumbs' var='post'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='breadcrumbs'>
      <span class='post-labels'>
        <a expr:href='data:blog.homepageUrl' rel='tag'>Inicio</a>
        <script type='text/javascript'>
          //<![CDATA[
          var strCrumbHref = location.href.toLowerCase();
          var intCrumbHtml = strCrumbHref.indexOf('.html');
          var intCrumbWhereAt = strCrumbHref.lastIndexOf('/', intCrumbHtml);
          var intCrumbYearStart = intCrumbWhereAt - 7;
          var intCrumbMonthStart = intCrumbWhereAt - 2;
          var intCrumbYear = parseInt(strCrumbHref.substr(intCrumbYearStart, 4));
          var intCrumbYearPlusOne = intCrumbYear + 1;
          var strCrumbMonthNum = strCrumbHref.substr(intCrumbMonthStart, 2);
          var strCrumbMonth = '';
          switch(strCrumbMonthNum) {
            case '01': strCrumbMonth = 'Enero'; break;
            case '02': strCrumbMonth = 'Febrero'; break;
            case '03': strCrumbMonth = 'Marzo'; break;
            case '04': strCrumbMonth = 'Abril'; break;
            case '05': strCrumbMonth = 'Mayo'; break;
            case '06': strCrumbMonth = 'Junio'; break;
            case '07': strCrumbMonth = 'July'; break;
            case '08': strCrumbMonth = 'Agosto'; break;
            case '09': strCrumbMonth = 'Septiembre'; break;
            case '10': strCrumbMonth = 'Octubre'; break;
            case '11': strCrumbMonth = 'Noviembre'; break;
            case '12': strCrumbMonth = 'Diciembre'; break;
          }
          var strCrumbOutput = ' &gt; ';
          strCrumbOutput += '<a href="/search?updated-min=' + intCrumbYear;
          strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&updated-max=' + intCrumbYearPlusOne;
          strCrumbOutput += '-01-01T00%3A00%3A00-08%3A00&max-results=50">' + intCrumbYear + '</a> &gt; ';
          strCrumbOutput += '<a href="/' + intCrumbYear + '_' + strCrumbMonthNum + '_01_archive.html">' + strCrumbMonth + '</a>';
          document.write(strCrumbOutput);
          //]]>
        </script>
        <noscript>
          <b:if cond='data:post.labels'>
            &gt;
            <b:loop values='data:post.labels' var='label'>
              <b:if cond='data:label.isLast == &quot;true&quot;'>
                <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
              </b:if>
            </b:loop>
          </b:if>
        </noscript>
        <b:if cond='data:post.title'>&gt; <span class='bctitulo'><data:post.title/></span></b:if>
      </span>
    </div>
  </b:if>
</b:includable>

Como todo elemento, podemos agregarle propiedades CSS agregándolas antes de ]]></b:skin>. Allí, todo queda librado a la imaginación peroe stas erían las definiciones elementales:

div.breadcrumbs { /* es el DIV contenedor */
  /* puede tener fondo, bordes, etc */
  margin: 10px 0;
  padding: 4px 0 4px 10px;
}
div.breadcrumbs a { /* los enlaces del "camino" */ }
div.breadcrumbs span.bctitulo {/* el título de la entrada */}

REFERENCIAS:blogvecindad.com

BlockDrop	I love traffic	Liquid mesure

Click para jugar.

Wallpapers (luces)

En uno de los artículos de chicablogger nos cuentan algunas técnicas que nos ayudarán a optimizar nuestro blog para que se posicione mejor en los buscadores. SEO para usuarios de Blogger.com es una guia para ello y muchas de esas sugerencias son sencillas de implementar.

Es cierto que muchos blogs no tienen fines comerciales y por lo tanto, no se preocupan de estos detalles pero, también es cierto que aún así, no nos hará daño tratar de mejorar u ordenar algunas cosas.

Obviamente, lo primero es generar un sitemap correcto usando las Herramientas para desarrolladores de Google y no dejar de lado otros buscadores como Yahoo o Bing.

1. La etiqueta TITLE que vemos en el HEAD de nuestra plantilla es fundamental y en Blogger es sencillo optimizarla, ya sea con un simple cambio o con cambios más complejos:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <title><data:blog.pageName/> : nombreBlog</title>
<b:else/>
  <title><data:blog.pageTitle/></title>
</b:if>

En el mismo sentido, el uso de la etiqueta Canonical sigue siendo recomendada por todos los buscadores al igual que el uso adecuado de las etiquetas META.

Hasta ahí lo que tal vez ya sabíamos pero el artículo habla de algunas cosas más.

2. Las etiquetas META description y META keywords son un problema. La primera es una descripción del sitio y la segunda, una serie de palabras que ayudan a que los buscadores identifiquen el contenido y lo indexen mejor. En ambos casos, Google recomienda que se diferencien las descripciones de cada página ya que utilizar descripciones idénticas para todas las páginas de un sitio es inútil:

"Si es posible, cree descripciones exactas de la página concreta. Utilice descripciones del sitio en la página principal o en otras páginas generales y descripciones concretas de página en todas las demás. Si no tiene tiempo de crear una descripción para cada página, priorice el contenido: cree por lo menos una descripción de las URL más importantes como, por ejemplo, la página principal y las páginas más visitadas."

¿Qué significa esto? Que cada página debería tener una etiqueta META diferente y eso, en Blogger, es prácticamente imposible. Por eso es que si usamos un sitemap y miramos el apartado Diagnóstico | Estadísticas de rastreo, nos encontraremos con advertencias como: Metadescripciones duplicadas y Etiquetas de título duplicadas para tantas páginas como hayan sido indexadas.

No es que esto signifique un "error" que impida que el sitio sea indexado, significa que podría estar mejor y para esto, la sugerencia es que sólo se añadan esas etiquetas META en la página de inicio y que no se incluyan en el resto. Para ello, deberíamos usamos códigos condicionales:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
  <meta name='description" content='el texto con la descripción del sitio ... ' />
  <meta name='keywords' content='palabra1, palabra2, palabra3, ..., palabraN' />
</b:if>

Pero, ¡eso significa que en las páginas individuales no habrá etiquetas! ¿qué pasa entonces? Lo que dice Google es que, de no existir, lo que se utiliza es parte del texto del contenido de la página y se muestra ese texto como descripción.

3. Un punto clave de las plantillas es el uso de las etiquetas de títulos. La existencia de H1 H2 H3 H4 H5 y H6 como etiquetas HTML diferentes no es un problema de tamaños de letras sino de jerarquías. Los buscadores leen y buscan esa jerarquía y dicen: Si el administrador colocó H1 a un título es porque ese título es IMPORTANTE y si usó H3 es menos importante y acá no importa el tamaño de la fuente que es sólo un efecto visual, es el tipo de etiqueta a usar la que manda.

Así que H1 debería ser la etiqueta a utilizar en los títulos de las entradas de las páginas individuales; es decir, en el home del sitio, el título relevante es el nombre del blog pero en las páginas individuales, el título relevante es el del post en si mismo. Por eso, deberíamos condicionarlo ya que, por defecto, el título de las entradas es H2 o H3.

Lo normal es que el título se muestre así:

<b:if cond='data:post.title'>
  <h1 class='post-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>

Y deberíamos condicionarlo de este modo:

<b:if cond='data:post.title'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <h1 class='post-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
    </h1>
  <b:else/>
    <h3 class='post-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
    </h3>
  </b:if>
</b:if>

Por supuesto, estos cambios deberán hacerse con prudencia, mirando bien qué códigos tenemos ahora porque pueden variar con las distintas plantillas. Lo importante es entender que lo que hacemos es poner una condición y duplicar el código actual, uno con H1 y el otro con H2 o H3. También deberemos agregar las propiedades de estilo adecuadas pero no hace falta duplicarlas. Buscamos todas las referencias que suelen estar en a .post h3 y le agregamos la nueva etiqueta:

.post h1, .post h3  { ....... }
.post h1 a, .post h1 a:visited, .post h3 a, .post h3 a:visited  { ....... }
.post h1 a:hover, .post h3 a:hover { ....... }

4. Un detalle que me comentaba SpamLoco y que también es importante es que en las plantillas de Blogger, la fecha de las entradas utiliza H2 lo cual les da una relevancia que no deberían tener:

<h2 class='date-header'><data:post.dateHeader/></h2>

En este caso, podemos cambiar esa etiqueta por otra cualquiera, un título menor como H4 o un párrafo P o un bloque DIV o SPAN:

<h4 class='date-header'><data:post.dateHeader/></h4>

Y también buscamos las propiedades CSS y cambiamos las referencia:

h2.date-header { ....... }

por la nueva:

h4.date-header { ....... }

Por último, también es Alejandro el que sugiere usar las llamadas etiquetas semánticas para resaltar los texto que contienen las entradas cuando estos textos son relevantes: <strong> <strong> y <em> <em> son las más comunes pero hay otras como <code> </code>, <kbd> </kbd>, <dfn> </dfn>, <acronym> </acronym> y <address> </address> (más información).

The PEN Story es una publicidad de las cámaras Olympus realizada con el método de stop motion que requirió de 60.000 fotografías y muchas horas de trabajo.

La música, producida por Michael Kadelbach puede ser descargada gratuitamente en formatos MP3 para para PC o ringtone.

La pregunta era: "Aunque estoy usando miniaturas para mostrar imágenes que luego se abren en otra ventana, mi página tarda mucho en cargarse ¿Qué pasa?"

Buena pregunta, ¿qué pasa? ¿Acaso no se supone que de esa manera agilizamos la carga del sitio?

La respuesta es SI pero ... hay un error conceptual; el código es este:

<a href="mi_imagen" target="_blank">
  <img src="mi_imagen" width="128" height="128" />
</a>

¿Estamos cargando miniaturas? NO. Estamos cargando la imagen tal como es, en este caso, de 700x700 y le colocamos en la etiqueta los atributos width y height para que el navegdor la muestre más pequeña y ese es el problema. La muestra pequeña pero carga la grande.

Es un problema de sentido común. Hay un archivo que tiene una imagen, un único archivo. El navegador lo carga y una vez cargado, le decimos que lo muestre de alguna forma y los atributos width y height o las propiedades CSS equivalentes, sólo hacen eso. Podríamos decirle que lo recorte, que lo coloque acá o allá pero siempre sería ese archivo único de 700x700.

Claro, una imagen de ese tamaño demorará un poco pero, si hablamos de muchas imágenes, las cosas se complican. Sólo diez imágenes de ese tamaño significarán uno tres millones de bytes. Es un número sin significado aparente pero, imaginen que una plantilla tiene unos cien mil bytes, una librería como Prototype otro tanto ¡y nos preocupamos por su tamaño!

Para usar miniaturas debemos tener miniaturas, es decir, dos archivos, uno con la imagen original y otro con la imagen reducida y entonces sí, el código será parecido pero diferente:

<a href="mi_imagen" target="_blank">
  <img src="la_miniatura" width="128" height="128" />
</a>

Donde los atributos width y hight sólo son un apoyo que permite que el navegador reserve el espacio necesario para cargar la imagen miniatura que tiene 128x128.

Muchos servicios de alojamiento de imágenes como ImageShack, Photobucket o Picasa nos dan la dirección URL de la imagen original pero a la vez, crean miniaturas automáticas que podemos usar. Blogger hace lo mismo, al subir una imagen se generan miniaturas de distintos tamaños que podemos usar y que reducirán sustancialmente el tiempo de carga.

Esto, no significa que siempre debemos usar miniaturas, significa que debemos entender qué estamos haciendo y cómo funcionan las cosas. Cargar una imagen grande y mostrarla pequeña es una técnica aceptable, puede servir, por ejemplo, para usar un zoom sencillo:

En estos casos, cargamos la imagen más grande y luego la manipulamos. Si usáramos una miniatura, el efecto se perdería ya que debería cargarse la segunda imagen.

En resumen, ambas técnicas son aceptables y no tienen nada de malo. Sólo hay que entender qué hacen y usar las herramientas adecuadas.

Otra más ... ya son muchas las ventanas modales y sumamos a Zoomy que es un pequeño script que permite mostrar imágenes y posee algunas caracteristicas singulares.

• crea un thumbnail de manera automática así que sólo necesitamos la imagen original
• permite el agregado de captions opcionales, textos a ser mostrados dentro de la ventana modal
• es posible crear ventanas que pueden ser arrastradas

A decir verdad, no me convence mucho (por no decir nada) pero, cumplo con el pedido de explicarlo.

Para utilizarlo se requiere el framework Prototype y Scriptaculous (effect.js y dragdrop.js) todo eso, si no lo tenemos en la plantilla, lo podemos agregar mediante las APIs de Google. A mi entender, esta es la forma más sencilla de añadir estos scripts en Blogger, colocamos lo siguiente antes de </head>:

<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;, &quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>

Luego, agregamos el script que podemos descargar desde la misma página en formato ZIP . Allí encontraremos un demo y también las imágenes necesarias (close.gif y zoomy.jpg).

Como para utilizarlo se requiere llamarlo mediante un código que Blogger malinterpreta, este otro ZIP contiene el script modificado. Alojamos los archivos en un servidor y lo cargamos:

<script src='URL_zoomy.js'></script>

Por ultimo, el CSS que podemos agregar directamente en la plantilla.

<style>
.zoomy, .zoomy2 {
  float: left;
  width: 100%;
}
.zoomy li, .zoomy2 li {
  display: inline;
  float: left;
  list-style: none;
  height: 100px;
  margin-bottom: 5px;
  margin-right: 5px;
  width: 150px;
}
.zoomy a, .zoomy2 a {
  display: block;
  background-position: center center;
  height:100px;
  text-decoration: none;
  text-indent: -9999px;
  width: 150px;
}
#zoomy {
  background: #000;
  border:1px solid #B3BEAD;
  color: #fff;
  line-height: 100%;
  padding: 5px;
  position: absolute;
}
#zoomy p {
  margin: 0;
  padding: 5px 5px 10px 5px;
  position: relative;
}
#close {
  background: url(URL_closes.gif) no-repeat;
  cursor:pointer;
  height: 12px;
  position: absolute;
  right: 5px;
  width: 12px;
}
</style>

El script es limitado ya que debemos llamar a una función cada vez que lo utilizamos:

<script>
  new Zoomy(element,{[opciones]});
<script>

donde las opciones son:

• appearDuration el tiempo del efecto fade (por defecto es 0.5 segundos)
• closeButton por defecto es false, poner en true para mostra el botón cerrar
• draggable por defecto es false, poner en true para permitir que se arrastren
• hideCaption por defecto es false, poner en true para mostrar textos

Lo usamos de esta manera::

<ul class="zoomy">
  <li>
    <a href="URL_cualquiera" style="background-image: url(URL_imagen1)" title="Demo 1">Ejemplo 1</a>
  </li>
  <li>
    <a href="URL_cualquiera" style="background-image: url(URL_imagen2)" title="Demo 2">Ejemplo 2</a>
  </li>
</ul>

El problema es que debemos definir esa función y el CSS cada vez que lo vamos a aplicar. En estos demos hay dos posibilidades, dos listas, una llamada zoomy y la otra zoomy2. Si quisiéramos otras, habría que agregarlas. Eso es lo que lo hace poco flexible y no muy recomendable aunque la idea en si misma es buena

• Demo 1
• Demo 2

• Rubix Cube
• Frogs

En resumen, no me parece nada sencilla de utilizar.

The Clock Clock es un proyecto de unos diseñadores suecos llamados Humans since 1982 y son una serie de relojes controlados electrónicamente que juntos conforman un enorme reloj.

REFERENCIAS:tecnoculto.com

En Blogger Buzz parece que empezaron a publicitar widgets de empresas asociadas y en este caso, muestran Lijit, un servicio que funciona como buscador tanto de nuestro blog como de blogs externos, bookmarks y heerramientas sociales diversas.

Apenas entramos, nos pide que escribamos la URL de nuestro sitio y una vez detectado, nos lleva a la primera página de configuración; allí, podremos seleccionar algunos de los servicios que deseamos incluir: Delicious, digg, Stumble Upon, flickr, You Tube, Vimeo, My Space, Twitter, MyBlogLog, Tumblr, etc. Para cada uno de ellos nos solicitará nuestro nombre de usuario (no la contraseña) y verificará su existencia. Como dato extra, podemos agregar una URL o feed RSS extra escribiendo su dirección.

La segunda pantalla nos permite agregar otros usuarios, el blogroll de nuestro blog, sitios externos, etc.

Ahora, si aún no tenemos una cuenta, deberemos registrarnos para ingresar a la configuración del widget donde podremos elegir colores, skins, el ancho, la cantidad de resultados y una gran cantidad de opciones. Guardamos y listo. En cualquier momento, ingresando en nuestra cuenta, podremos volver a editarla sin que sea necesario modificar nada en el blog.

Para incluirlo, podemos elegir los modos automáticos o simplemente, copiar y pegar el código del script que nos proporcionan:

<script type="text/javascript" src="http://www.lijit.com/wijitinit?uri=http://Fwww.lijit.com/users/NOMBRE&amp;js=1"></script><a style='color: #999' href='http://www.lijit.com' id='lijit_wijit_pvs_link'>Lijit Search</a>

Lijit Search

Cuando colocamos una plantilla o la modificamos y miramos el resultado, muchas veces, nos vamos a encontrar con una duda que puede transformarse en un error conceptual. Queremos cambiar fondos o tamaños pero ¿cuál es el blog? ¿Es todo eso que vemos en la pantalla del monitor? La respuesta es sí pero no.

Lo que vemos, en cualquier página web a la que accedemos es el contenido de la etiqueta BODY y, por lo general, nuestro blog está dentro de ella, definido con otro rectángulo al que, en Blogger, por defecto, se lo identifica como un DIV llamado outer-wrapper ¿Qué significa esto? Que el BODY es TODA la ventana del monitor, del nuestro pero también de los visitantes y allí nos encontramos con una primera cosa a tener en cuenta: las resoluciones de pantalla.

Es lógico que lo primero que se nos ocurre es que lo que ven los demás es lo mismo que vemos nosotros pero, eso no es así. Claro, cada usuario usa una resolución diferente y podemos suponer que sólo hay dos o tres posibilidades pero, si recorremos los resultados que muestran algunos servicio de estadísticas nos vamos a encontrar con datos que llaman la atención. Por ejemplo, miro lo que dice Google Analytics y dice que en el último mes, en este blog, los visitantes usaron ... 143 resoluciones de pantalla distintas. No dos o tres o cuatro o cinco sino 143.

Son demasiadas para tenerlas a todas en cuenta pero, de todas esas posibilidades, sólo debemos concentramos en los anchos ya que la altura no es relevante para diagramar nuestro sitio. Aún así hay casi 100 tamaños distintos. Un rápido ejemplo:

640 720 768 800 819 832 840 844 896 904 922 936 960 969 983 1000 1007 1016 1024 1037 1045 1069 1080 1088 1112 1117 1120 1126 1140 1143 1152 1170 1176 1192 1200 1229 1264 1241 1250 1263 1267 1276 1272 1280 1317 1344 1350 1360 1366 1372 1400 1408 1421 1435 1440 1451 1503 1512 1517 1536 1540 1568 1579 1600 1652 1680 1728 1772 1776 1920 2048 2304 2560 2880 3360 3840 ...

¿Para qué sirve saber esto? A mi juicio, para tres cosas:

• decidir el ancho de nuestro sitio:
• centrarlo en la pantalla de cualquier monitor:
• poder agregarle fondos

Por supuesto, muchas de ellas son decisiones personales, en mi caso, si el 90% de los usuarios usa resoluciones iguales o mayores a 1024, ese valor debería ser el mínimo. Evidentemente, tal como vienen las cosas, es probable que en poco tiempo más, incluso eso sea escaso ya que hablar de resoluciones de 1280, 1440 o 1680 se está haciendo cada vez más común. Para un usuario novel, este es un problema serio porque todas las plantillas que provee Blogger están pensadas para resoluciones de 800 y por lo tanto, hoy por hoy son demasiado angostas. Incluso muchas plantillas que vemos en distintos sitios de descargas siguen con ese criterio y me parece un error que no suele ser sencillo de corregir (Modificando las plantillas (Tutorial 1: Anchos)).

¿Cómo es eso de centrar el blog? ¿Centrarlo con respecto a qué?

Miremos la pantalla. Todo lo que nos muestra el navegador es el BODY, su ancho es siempre igual al ancho de la resolución de pantalla. Es un gran rectángulo que medirá cierta cantidad de pixeles. Nuestro blog quedará dentro de eso así que podríamos ver diferentes cosas en diferentes monitores:

800x600	1024x768
1280x960
1680x1050

Si el blog no está centrado, veremos esto:

Cuando escribimos un post, tal vez, si no hay remedio, podemos usar alguna etiqueta poco recomendable como <center> </center> porque no se nos ocurre nada mejor o no encontramos una solución; no es lo más recomendable pero bueno ... Sin embargo, al diagramar plantillas, esa etiqueta debe desterrarse, el diseño (layout) de una plantilla debe ser claro, simple y estar basado en DIVs (rectángulos identificados con un nombre único) cuyas propiedades deben ser establecidas con CSS. Haciendo eso, tendremos un sitio flexible, fácil de editar y accesible desde cualquier navegador.

El BODY no tiene un ancho fijo, y usar la propiedad text-align: center para centrar el blog no servirá. Lo que debemos centrar es el rectángulo exterior, el primer DIV, el que por defecto se llama outer-wrapper.

Para centrar DIVs tampoco usamos text-align: center porque eso, centra el contenido de ese rectángulo pero no el rectángulo en si mismo. Para centrarlos debemos darle un ancho (width) y utilizar la propiedad margin. Así que, como mínimo, una plantilla debería tener establecidas estas propiedades:

#outer-wrapper {
  .......
  margin: 0 auto;
  position: relative;
  width: VALORpx;
}

De este modo, sin importar el VALOR, el blog estará centrado en la pantalla del monitor a menos, claro, que alguien utilice resoluciones menores que ese ancho en cuyo caso, aparecerá una barra de desplazamiento horizontal.

Click para ejecutar el video.

REFERENCIAS:Ernie Kovacs (1919 – 1962)

Wallpapers (geeky)

Una de las formas más sencillas de crear listas de reproducción de audio es utilizar divShare, un servico gratuito que admite alojar casi cualquier tipo de archivo y que nos ofrece 5GB de espacio disponible y 10GB de tasa de transferencia. Una vez que nos registramos podemos crear carpetas y organizar los documentos para que sean de acceso público o privado.

Por defecto ya hay pestañas para imágenes, audio y video así que vamos a la de audio, creamos una carpeta y comenzamos a subir archivos seleccionándonos desde nuestra PC.

Podemos usar el Upload Standard o el modelo avanzado de Drag-and-Drop que es similar a lo que haríamos con un cliente FTP. En todos los casos, una vez subidos los archivos, podemos seleccionarlos y moverlos de una carpeta a otra sin mayores problemas ya que el uso de las herramientas es muy intuitivo.

Aunque para el caso de audios esto no tiene importancia, hay que tener en cuenta que el tamaño máximo de los archivos individuales es de 200MB.

Utilizando la opción Organize this Playlist podemos reordenar los archivos, cambiarles el nombre, agregarle etiquetas, etc.

Si hacemos click en Share nos mostrará la URL de descarga y un código que debemos copiar y pegar donde quisiéramos colocar el reproductor.

Como cualquier otro reproductor de Flash, basta conocer los datos para utilizar cualquier otro código, en este caso, width="335" y height="85" son el tamaño que podemos cambiar a nuestro gusto y la URL del reproductor en si mismo está en el atributo value:
http://www.divshare.com/flash/playlist?myId=XXXXXXXXXXX
donde lo único que cambiará serán esos caracteres del ID.

<object height="155" width="260" type="application/x-shockwave-flash" data="http://www.divshare.com/flash/playlist?myId=XXXXXXXXXXX"><param name="movie" value="http://www.divshare.com/flash/playlist?myId=XXXXXXXXXXX" /></object>

También podríamos utilizar alguna ventana modal como LightWindow para mostrar el reproductor, de la misma forma en que podemos hacerlo con videos: Click para abrir la lista de reproducción.

Más de 7000MB de espacio disponible y la posibilidad de adjuntar archivos de 25MB hacen que GMail sea un espacio ideal para guardar cosas aunque, claro, limitada por las dificultades a la hora de compartirlas. Muchos lo usamos como backup de ciertas cosas y ahora, GPhotospace viene a darle una nueva vuelta de tuerca, agregándole la posibilidad de crear álbums de fotos que pueden ser accesibles a través de invitaciones personales.

Lo instalamos como cualquier otra extensión de Firefox y la versión más reciente incluye soporte para móviles y la opción de subir imágenes a Blogger, Flickr y otros sitios que admitan la posibilidad de agregar imágenes via mail.

Veremos entonces el ícono en la barra de estado o podemos ingresar a través del menú Herramientas. Nos abrirá una página donde colocaremos la cuenta a utilizar y listo. Lo que se nos mostrará es una ventana similar a la del cliente correo donde podemos crear albums, agregar imágenes, quitarlas, etc.

Share es la forma de invitar a otros usuarios enviándoles un mail en el cual las imágenes seran archivos adjuntos y por lo tanto, puede usarse cualquier cliente de correo y cualquier navegador para acceder a ellas sin necesidad de tener instalada la extensión aunque, si también la utilizan, ingresarán directamente al album.

REFERENCIAS:ghacks.net