El header de Blogger (jugando un poco)

Continuando con la idea de ver si es posible flexibilizar la rigidez aparente del header de Blogger tratando de utilizar nada más que las propiedades CSS. Sólo se trata de jugar un poco.

Subo una imagen (robada inescrupulosamente), un gif animado de 70x60 que milagrosamente funciona. Dejo marcada la opción de ver los textos y la imagen. Además, cambio el título por esto:

<b>Blogger</b> se despertó

Y la descripción por esto:

Pero sólo por un <i>ratito</i><br/>
<a href="http://vagabundia.blogspot.com/">Volver al blog</a>

Guardo y el resultado no es muy agradable:

El CSS por defecto de una plantilla mínima nos muestra algunas propiedades así que es hora de ver de que de tratan y así intentar modificarlas aunque este nuevo código de Blogger no nos lo hará fácil.

El código original

#header-wrapper { /* es el bloque contenedor de todo el encabezado */
border: 1px solid $bordercolor; /* tiene un borde */
margin: 0 auto 10px; /* está centrado (auto) */
width: 660px; /* normalmente, el ancho es igual que el de #outer-wrapper */
}

#header { /* es el bloque interior */
border: 1px solid $bordercolor; /* también tiene borde */
color: $pagetitlecolor; /* el color de los textos */
margin: 5px; /* es más chico que el anterior por eso vemos dos bordes */
text-align: center; /* todo el contenido estará centrado */
}

#header-inner { /* es el bloque con la imagen */
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header h1 { /* es el texto del título del blog */
font: $pagetitlefont; /* la mayoría de las propeidades definen el tipo de fuente */
margin: 5px 5px 0;
letter-spacing: .2em;
line-height: 1.2em;
padding: 15px 20px .25em;
text-transform: uppercase;
}

#header a { /* el texto del título del blog es un enlace */
color: $pagetitlecolor;
text-decoration: none;
}
#header a:hover {color:$pagetitlecolor;}

#header .description { /* es el texto de la descripción */
color: $descriptioncolor;
font: $descriptionfont;
letter-spacing: .2em;
line-height: 1.4em;
margin: 0 5px 5px;
padding: 0 20px 15px;
max-width: 700px;
text-transform: uppercase;
}

#header img { /* es ... vaya uno a saber qué es */
margin-$startSide: auto;
margin-$endSide: auto;
}

Una propiedad que podriamos agregar a header-wrapper es background es decir, como la imagen que coloco en el header no es un banner sino que es pequeña, puedo poner otra; en este caso, quiero que se vea a la derecha así que le agrego esto:

background: transparent url(URL_imagen) no-repeat right 50%;

¿Cómo subo la imagen a Blogger? La agrego en un post cualquiera, tomo nota de la dirección y luego elimino el código generado.

Ya que voy a manipular el código, para evitar problemas es buena práctica agregarle una propiedad que defina la altura de todo el header; para eso, usamos height.

#header-wrapper {
background: transparent url(URL_imagen) no-repeat scroll right 50%;
border: 1px solid #CCCCCC;
height: 216px;
margin: 0 auto 10px auto;
width: 660px;
}

El bloque header es el rectángulo que está dentro del anterior. Elimino el borde y, como en el caso anterior, podríamos colocar otra imagen como fondo pero, esta vez a la izquierda:

background; transparent url(URL_imagen) no-repeat left 50%;

#header {
color: #666666;
height: 216px;
margin: 5px;
}

header-inner es clave; es el rectángulo que nos muestra la imagen que hemos subido y aparecerá centrada porque tiene margin-left y margin-right establecidos como auto. Como quiero que se vea más a la derecha, se los voy a quitar. Es poco lo que podemos hacer ahí ya que lo que hace Blogger es colocar los datos directamente en la plantilla con un código que a primera vista asusta:

<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl 
+ &quot;\&quot;); &quot;
+ &quot;background-position: &quot; + data:backgroundPositionStyleStr
+ &quot;; &quot; + data:widthStyleStr
+ &quot;min-height: &quot; + data:height + &quot;px;&quot;
+ &quot;_height: &quot; + data:height + &quot;px;&quot;
+ &quot;background-repeat: no-repeat; &quot;'
id='header-inner'>

En fin eso, sólo coloca la imagen que subimos y cuyos datos guarda Blogger para luego generar esto:

<div style="background-image: url(URLimagen);
background-position: left center; width: XXpx; min-height: XXpx;
background-repeat: no-repeat;"
id="header-inner">

En caso de emergencia, es allí donde debemos modificar las cosas pero, vamos a tratar de obviarlo así que sólo eliminaremos el centrado:

#header-inner {
background-position: center;
}

En el título, los cambios afectan a la fuente de texto salvo margin que sólo lo mueve a la izquierda 60 pixeles. También se agrega una propiedad width; eso es algo que siempre debemos hacer cuando se trata de ubicar bloques:

#header h1 {
color: #000000;
font-family: Arial;
font-size: 24px;
letter-spacing: -1px;
margin: 0 0 0 60px;
padding: 0;
width: 400px;
}

Lo mismo ocurre con el texto de la descripción:

#header .description {
color: #999999;
font-family: 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
font-size: 13px;
letter-spacing: 1px;
margin: 0 0 0 65px;
max-width: 700px;
padding: 0;
text-transform: uppercase;
width: 400px;
}

Para poder ubicar los textos, le agrego una definición, usando la clase header. Con margin, bajo los textos:

.Header {
margin-top: 110px;
}

Y lo que falta es establecer las propiedades de los formatos extras de esos textos:

#header h1.title b { /* la negrita el título */
color: #2788CF;
font-family: Georgia;
font-size: 40px;
}

p.description i { /* la itálica de la descripción (no la uso) */ }

p.description a {  /* el enlace agregado a la descripción */
color: #2788CF !important;
font-family: Tahoma;
font-weight: bold;
}
p.description a:hover {color: #CC6600 !important;}

Y ... sí. Es como el PageRank de Google: SUBE Y BAJA SUBE Y BAJA

SUBE Y BAJA

Paciencia ... paciencia ... paciencia ...

Con Firefox hay varias extensiones para descargar videos de YouTube de forma directa. Ahora, también hay una opción que podemos usar con Internet Explorer.

Youtube File Hack Tool no es un plugin sino un hack para personalizar el menú contextual y de esa manera, con un par de clicks podemos descargar el video que estemos viendo.

Otra opción es Ace Downloader, un sitio que mencionan en SpamLoco y que vengo usando hace rato ya que ses sencillo, la publicidad es discreta y permite descargar los videos en formato FLV pero también en formato MP4 o 3GP si es que están disponibles.

Ahoro, veo que le han agregado una nueva función, agregar la página a los motores de búsqueda del navegador y hacer las descargas directamente desde allí. Como esta posibilidad de tener diversos motores de búsqueda integrados es algo característico de las versiones más recientes de todos los navegadores, este método sirve para cualquier modelo y no necesitamos agregar plugins ni extensiones.

Una vez que agregamos el motor, lo seleccionamos y escribimos el ID del video de YouTube. Por ejemplo, si quisiera descargar: http://es.youtube.com/watch?v=ldz6-e0VHg8

El ID es ldz6-e0VHg8:

Dependiendo de la configuración se abrirá la ventana para descargar y podremos cambiarle el nombre allí mismo o hacerlo después (por defecto, se guardará con el nombre de get_video asi que lo cambiamos agregando la extensión .FLV).

Eso es todo, para reproducirlo, usamos nuestro programa preferido. En mi caso, uso GOM Player, al igual que para el resto de los videos ya que reproduce todo tipo de formato y es gratuito.

De todos los códigos que coloca Blogger en un plantilla cuando insertamos un elemento, el del Header es uno de los más absurdos y engorrosos. Algo que debería ser tan sencillo ocupa líneas y líneas con instrucciones que en realidad hacen muy poco.

En los inicios del llamado Blogger Beta, el código del Header era sencillo pero, para quienes recién comenzaban y no tenían mucha idea de HTML y CSS, personalizarlo se hacía complicado, sobre todo a la hora de agregar una imagen en lugar de los textos que se veían por defecto (el título del blog y la descripción). Con criterio de desarrolladores, en lugar de explicar en alguno de sus sitios oficiales cuáles eran los métodos para hacerlo, decidieron "ayudarnos" y hace ya un tiempo, cambiaron los códigos para "facilitarnos" las cosas.

El problema con este tipo de cosas es que ellos no comprenden que no hay forma de contemplar todas las posibilidades y de allí que ahora resulte más engorroso que antes a la hora de personalizarlo o bien, se produzcan errores que parecen no tener explicación y que a veces no tienen una solución lógica.

De las 20 lineas de código original pasamos a tener más de 50 sin beneficios aparentes.

El código original

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nombreBlog (cabecera)' type='Header'>
<b:includable id='main'>
  <div class='titlewrapper'>
    <h1 class='title'>
      <b:if cond='data:blog.url == data:blog.homepageUrl'>
        <!-- +++++++ si es la página principal +++++++ -->
        <data:title/>
      <b:else/>
        <!-- +++++++ en cualquier otra, el header es un enlace a home +++++++ -->
        <a expr:href='data:blog.homepageUrl'><data:title/></a>
      </b:if>
    </h1>
  </div>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
</b:widget>
</b:section>
</div>

El código nuevo

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='nombreBlog (cabecera)' type='Header'>

<b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == "REPLACE"'>
      <!-- +++++++ el código para cuando la opción es mostrar sólo la imagen +++++++ -->
      <div id='header-inner'>
      <a expr:href='data:blog.homepageUrl' style='display: block'>
      <img expr:alt='data:title' 
           expr:height='data:height'
           expr:id='data:widget.instanceId + "_headerimg"'
           expr:src='data:sourceUrl'
           expr:width='data:width' style='display: block'/>
      </a>
      </div>
    <b:else/>
      <!-- +++++++ el código para cuando la opción es combinar imágenes y textos +++++++ -->
      <div expr:style='"background-image: url(\""
            + data:sourceUrl + "\"); "
            + "background-position: "
            + data:backgroundPositionStyleStr + "; "
            + data:widthStyleStr
            + "min-height: " + data:height + "px;"
            + "_height: " + data:height + "px;"
            + "background-repeat: no-repeat; "' id='header-inner'>
        <div class='titlewrapper' style='background: transparent'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
        </div>
        <b:include name='description'/>
      </div>
    </b:if>
  <b:else/>
    <!-- +++++++ el código para cuando la opción es mostrar sólo los textos +++++++ -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <!-- +++++++ si es la página principal +++++++ -->
    <data:title/>
  <b:else/>
    <!-- +++++++ en cualquier otra, el header es un enlace a home +++++++ -->
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>

<b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>

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

Si todo funciona bien, no hay problema. Las plantillas traen ese código por defecto así que basta ir a Diseño y en la solapa Añadir y organizar elementos de la página hacemos click en Editar la cabecera y aparecerá una ventana con las opciones:

Título del blog y Descripción del blog son los que hayamos puesto en la Configuración pero podemos colocar cualquier otro texto ya que esto sólo será lo que se muestra y no el nombre real.

En ambos casos es posible utilizar algunas etiquetas HTML para formatear esos textos. En general, son las mismas que pueden utilizarse en los formularios de comentarios: <b> (negrita), <i> (itálica), <u> (subrayado), <a href=""> (enlace).

Todo lo demás es para definir una imagen de fondo y allí hay varias opciones. Debemos saber que la imagen a utilizar se alojará en Blogger. Puede ser una que tengamos en nuestra PC o bien una imagen que ya esté en la web y para lo cual lo que debemos hacer es escribir la dirección URL.

PROBLEMA: Aparece un error en la carga. Esto puede ser debido a muchas causas, algunas nuestras, otras de Blogger. Una de las más comunes es indicar una dirección URL errónea. La dirección debe ser la de la imagen y no la de una página web como pasa con muchos servicios de alojamiento de imágenes. Para saber si es correcta o no, escribamos esa URL en la barra de direcciones del navegador y hagamos que la muestre. Se deberá ver la imagen sola o bien nos preguntara si queremos descargarla.

Una vez subida se nos mostrará una previsualización de esta y allí, podremos Eliminarla y cancelar el proceso o aceptarla en cuyo caso deberemos marcar una de las opciones para determinar si nuestro Header incluirá también el título o sólo la imagen:

Detrás del título y la descripción
En lugar del título y la descripción

Por defecto, aparecerá marcada la primera así que, si lo que estamos poniendo es algún tipo de banner, lo normal es marcar la segunda opción.

Antes de subir la imagen también aparecerá otra casilla que podemos marcar:

Reducir hasta ajustar

Y se nos advierte que la imagen se reducirá hasta una cierta cantidad de píxeles de ancho. Esa es la medida que tiene nuestra plantilla establecida en la propiedad width del bloque #header-wrapper así que variará con las diferentes plantillas.

PROBLEMA: Algunos desarrolladores de plantillas no respetan los nombres de ID usados por Blogger y entonces no son detectados. No existe ningún problema en hacerlo de este modo pero, debemos saber que algunas funciones del editor visual de la plantilla sólo funcionan si se mantienen los nombres por defecto de los elementos.

Guardamos y tenemos la imagen colocada como fondo.

PROBLEMA: La he subido, todo es normal pero en el blog no se ve. Lo más probable es que el navegador nos esté mostrando la caché y no nuestro blog (a los navegadores no les gusta trabajar mucho). Primero se puede probar con CTRL + F5 para recargar; si sigue sin verse, lo mejor es borrar la caché.

Hasta acá, eso es todo lo que podemos hacer con esa ventana pero, lo más probable es que necesitemos ajustes y entonces, ya no queda más remedio que ir al código HTML y allí, mirar las propiedades CSS.

PROBLEMA: Me arrepentí y no puedo eliminar la imagen. Esto es un error de Blogger y no hay muchas alternativas; lo mejor es eliminar el Header y colocar uno nuevo ...

Primero, vamos a la plantilla y sin expandir los artilugios buscamos esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
</div>

Y lo cambiamos por esto:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='(Header)' type='Header'/>
</b:section>
</div>

Guardamos y ahora vamos a Elementos de la página.

Lo que hemos hecho es desbloquear la sección header y permitir que se agreguen elementos. Ahora, sólo hay uno así que lo editamos y lo eliminamos con Borrar Elemento. Por último, volvemos a editarlo. Haciendo click en Agregar Elemento, seleccionamos Header y listo.

Con la etiqueta PRE y algo de CSS podemos escribir manteniendo los espacios en blanco intactos. Eso es lo que hacemos cuando escribimos códigos para colocar como ejemplos pero, podemos agregar una etiqueta extra que no tiene propiedades específicas y que se usa para indicar que eso es un código; la etiqueta se llama CODE:

Para muchos, la regla es así: los ejemplos se colocan dentro de una etiqueta <pre> y los códigos se colocan entre etiquetas <code> y </code>:

<pre><code>
..............
</pre></code>

Pero, la regla es "relativa" y no caben dudas, hacer ciertas cosas es engorroso y difícilmente agregue alguna función interesante. La pregunta que muchos hacen es cómo escribir código en una página web y que el navegador no lo ejecute:

• Hay que cambiar todos los caracteres < por &lt;
• Los caracteres > pueden dejarse aunque es aconsejable cambiarlos por &gt;
• Hay que cambiar todos los caracteres & por &amp;

Supongamos que yo quiero mostrar el código para hacer una lista como esta:

• Este es un enlace a la página e ayuda de la www.w3.org
• Y esto es sólo una línea más del ejemplo para la etiqueta code

Tendría que escribir esto:

<pre>&lt;ul&gt;
  &lt;li&gt;Este es un enlace a la página e ayuda de la &lt;a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE"&gt;www.w3.org&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;Y esto es sólo una línea más del ejemplo para la etiqueta &lt;code&gt;<code>&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

Para que en la página se mostrara esto:

<ul>
  <li>Este es un enlace a la página e ayuda de la <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">www.w3.org</a></li>
  <li>Y esto es sólo una línea más del ejemplo para la etiqueta <code>code</code></li>
</ul>

Para controlar la forma en que lo vemos, lo que debemos hacer es utilizar CSS y allí tenemos varias alternativas.

Lo primero que debemos hacer es tratar de establecer el ancho de las líneas ya que PRE, por defecto, no las ajusta (si el texto es largo, como se ve en ejemplo, una parte desaparece). La propiedad que vamos a usar para controlar esto se llama white-space que es la que establece la forma en que queremos que sean tratados los espacios en blanco. Estos son los valores posibles:

normal deja que los navegadores resuelvan las cosas; sólo se muestra un espacio en blanco (si hay dos o más seguidos, se ignoran) y se hace un salto de línea si el texto es demasiado largo.
pre todos los espacios en blanco son mostrados y las líneas se cortan.
nowrap los espacios en blanco extras se eliminan pero no se hacen saltos de línea automáticos.
pre-wrap los espacios en blanco extras no se eliminan pero se hacen saltos de línea automáticos.

En este ejemplo, vemos la etiqueta PRE por defecto y tiene un fondo blanco par que se vea donde comienza y donde termina:

<ul>
  <li>Este es un enlace a la página e ayuda de la <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">www.w3.org</a></li>
  <li>Y esto es sólo una línea más del ejemplo para la etiqueta <code>code</code></li>
</ul>

La propiedad por defecto es whiteSpace='pre'; se ven los espacios en blanco (la sangría), la línea se corta y lo que excede el ancho, queda oculto. Los otros valores combinan las alternativas de ver/ocultar espacios en blanco y de cortar o no las líneas.

Lo mejor, en principio, sería utilizar el valor pre-wrap y colocar las diferentes variaciones para que sean "entendidas" por todos los navegadores ... o casi todos:

pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -o-pre-wrap; /* Opera 7+ */
}

También podemos colocarle un fondo de color o una imagen, separar un poco los textos, colocarle bordes, establecer márgenes:

<ul>
  <li>Este es un enlace a la página e ayuda de la <a href="http://www.w3.org/">www.w3.org</a></li>
  <li>Y esto es sólo una línea más del ejemplo para la etiqueta <code>code</code></li>
</ul>

pre {
  background: #F5F5F5 url(URL_imagen) no-repeat 8px 8px;
  border-bottom: 4px inset #000000;
  border-top: 4px outset #000000;
  color: #333333;
  font-family: Tahoma,Arial,'Trebuchet Ms';
  font-size: 13px;
  line-height: 17px;
  margin: 10px 0 10px 10px;
  padding: 30px 10px 10px 10px;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
}
pre code {
  color: #0000FF;
}

Definiendo clases CSS podríamos tener diferentes modelos para mostrar diferentes lenguajes:

pre {
  background: #F5F5F5 url(URL_imagenNormal.gif) no-repeat left top;
  .......
}
pre.html {background-image: url(URL_imagenHTML.gif);}
pre.css {background-image: url(URL_imagenCSS.gif);}
pre.php {background-image: url(URL_imagenPHP.gif);}
pre.javascript {background-image: url(URL_imagenJS.gif);}

Por ejemplo:

<pre>
  [ se mostraría la imagen por defecto ]
</pre>
<pre class="css">
  [ se mostraría la imagen URL_imagenCSS.gif ]
</pre>

REFERENCIAS:

Project Cerbera

www.w3.org

Tiemblan los webmasters.

Es que Google se prepara para cambiar el PageRank y es la primera vez que lo anuncia con antelación a través del blog personal de Matt Cutts.

¿Curiosos? Pueden usar la calculadora para chequear los valores en diferentes servidores y verificar si hay cambios.

En caso de emergencia, los expertos en SEO recomiendan aprenderse la canción de los logos de Google y cantarla por lo menos tres veces seguidas, preferentemente en ayunas.

Otras alternativas, son un poco exageradas porque no todo lo que reluce es oro.

REFERENCIAS:

google.dirson.com

Me gustó tanto el artículo de Blog en Serio que ni siquiera lo voy a comentar, sólo sugerir que se lo lea: Una comida te cuenta.

Es que la sola frase: la ombligósfera hispana merece un premio.

¿Compromiso? ¿Independencia? ¿Acaso los blogs no son lo mismo que el resto de la humanidad? Las mismas maravillas y las mismas miserias.

Es cierto, se supone que no iba a decir nada.

En SpamLoco siguen haciendo preguntas. Esta vez, apuntan a un estudio realizado por Google, IBM y ETH Zurich que demuestra como millones de usuarios de internet siguen utilizando versiones no actualizadas de sus navegadores.

En términos generales, las actualizaciones, recomendables o no, son algo personal, tanto como cuál es el navegador que usamos; sin embargo, desde el punto del diseño de una web, no es un tema menor.

Las estadísticas de visitas de este blog vienen mostrando la misma proporción casi desde su inicio; Internet Explorer y Firefox se reparten el total de visitas por mitades:

Hasta ahí no hay nada extraño, lo que llama la atención es la cantidad de usuarios que siguen usando IE6 y no han actualizado a IE7 pese a que hace ya mucho que puede descargarse sin restricciones.

En el caso particular de un blog, "que Internet Explorer no siga los estándares no es un problema moral, es un problema práctico" y no cabe duda que muchos de los inconvenientes que se producían en IE6 han sido superados en la nueva versión [más información]

Firefox	Internet Explorer

Creo que es el momento de "jubilar" Internet Explorer 6 ya que resulta casi imposible compatibilizarlo con el resto o requiere un esfuerzo extra que no sé hasta que punto vale la pena. El tiempo pasa y no sólo nosotros nos ponemos viejos ...

Si las listas parecen tener tan pocas alternativas ¿por que se usan tanto? Porque son cómodas pero, para sacarles provecho hay que entender un poco como las afectan las propiedades CSS [más información]

Por defecto, la separación entre un item y otro es equivalente a la altura de la fuente. Eso, lo controlamos con la propiedad margin o, individualmente con margin-top y margin-bottom; sólo hay que tener en cuenta que los márgenes son "invisibles" es decir, el tamaño del elemento no cambia. Esto que parece raro, es fácil de entender si le colocamos un color de fondo [más información]

Otra forma es usar la propiedad height pero, aumentar la altura, no hará que se alineen los textos. Lo mejor es utilizar la propiedad line-height. Con ella, aumentamos el espacio que ocupa el texto y siempre lo veremos centrado verticalmente:

Lista Normal	Propiedad margin	Propiedad height	Propiedad line-height

Una de las propiedades de las lista que les da flexibilidad es display. Por defecto, los items se muestran una debajo del otro pero si les agregamos la propiedad display:inline, veremos los items uno al lado el otro. Eso es lo que normalmente se hace para crear menús.

ITEM 1 ITEM 2 ITEM 3	ITEM 1 ITEM 2 ITEM 3
background-color: #555555;	background-color: #555555; display: inline; margin-left: 10px; padding: 2px 5px;

Con la propiedad list-style-image podemos personalizar las listas cambiando los bullets por una imagen cualquiera. Si la colocamos en UL, la imagen se usará en todos los items LI:

<ul style="list-style-image: url(URL_imagen)">

Si la colocamos en LI, será válida para cada item así que podrá haber varias en una misma lista:

<li style="list-style-image: url(URL_imagen)">

ITEM 1 ITEM 2 ITEM 3

ITEM 1 ITEM 2 ITEM 3

ITEM 1 ITEM 2 ITEM 3

En todos los casos, UL debe tener un padding-left de 1.5em como mínimo porque sino, la imagen aparecerá "partida":

• ITEM 1
• ITEM 2
• ITEM 3

Como bajo ciertas condiciones, el uso de list-style-image suele tener problemas en IE, últimamente se está reemplazando esta propiedad por background que funciona con cualquier etiqueta. Esto, incluso, nos permite tener un mejor control sobre cada item ya que si eliminamos list-style-type, podemos manejar las listas de modo más sencillo.

Por ejemplo, de esta manera podemos implementar un efecto rollover:

ITEM 1 ITEM 2 ITEM 3 ITEM 4	ITEM 1 ITEM 2 ITEM 3 ITEM 4	ITEM 1 ITEM 2 ITEM 3 ITEM 4

UL { list-style-type: none; margin: 0 auto; padding: 0; width: 160px; } UL li { background: transparent url(URL_imagen1) no-repeat left 50%; cursor: pointer; padding: 0 0 0 20px; line-height: 20px; } UL li:hover { background: transparent url(URL_imagen2) no-repeat left 50%; }

UL { list-style-type: none; margin: 0 auto; padding: 0; width: 160px; } UL li { background: transparent url(URL_imagen1) no-repeat left 50%; cursor: pointer; padding: 0 0 0 20px; line-height: 20px; } UL li:hover { background: #FF9933 url(URL_imagen2) no-repeat left 50%; color: #000000; }

UL { list-style-type: none; margin: 0 auto; padding: 0; width: 160px; } UL li { background: transparent url(URL_imagen1) no-repeat left 50%; cursor: pointer; line-height: 20px; padding: 1px 0 1px 20px; } UL li:hover { background: transparent url(URL_imagen2) no-repeat left 50%; border-bottom: 1px solid #800000; border-top: 1px solid #800000; padding: 0 0 0 20px; }

Según dicen en Google Operating System, Blogger no hace mucho para evitar el spam. Lo única que existe es la posibilidad de moderar los comentarios y, si queremos, agregar una verificación de palabras (CAPTCHA).

En el artículo, sugieren que Google debería implementar algún sistema adicional como Akismet, el mismo que usa WordPress.

Una nueva función que ya está disponible es la moderación de comentarios pero a la que puede indicársele una fecha; es decir, los comentarios anteriores a cierta fecha serán moderados y los más recientes no.

Por defecto, el valor establecido es 14 días pero podemos indicar cualquier otro número.

Aquí entonces, comienza la discusión.

¿Hay tanto spam como dice el artículo? Claro, la gran diferencias es que Google Operating System tiene casi 70 mil suscriptores y está en inglés pero, aún así teniendo 70 veces menos suscriptores, la cantidad de spam real que he recibido es ínfima y, curiosamente, es siempre en los mismos posts ya que deben tener algunas palabras que atraen a los robots malignos.

No sé si en WordPress hay más o menos ya que se usa un filtro y la diferencia es justamente esa, allí "vemos" lo que llega y es considerado como spam y nosotros debemos eliminarlo. En Blogger no lo vemos ya que los elimina directamente. Ninguno es perfecto; Akismet suele bloquear comentarios legítimos sin motivo aparente y en Blogger no lo sabemos porque carece de un sistema para manejarlos.

En realidad, creo que lo más sincero sería decir que la moderación que se coloca en los blogs no es para  evitar el spam sino por razones más personales que tienen que ver con el tipo de comentarios recibidos o por el temor a recibirlos. Ambas son razones válidas y no hay reglas, cada uno deberá lidiar con el tipo de sitio que quiera tener y lo deberá manejar como quiera o como pueda.

Tres plantillas para Blogger, convertidas y rediseñadas por Randomness (Fernandooo1). Habría cuatro pero ... "estoy trabajando en una plantilla que me pidieron -.- Algo girly para mí, pero ya está casi lista. Es cuestión de publicarla: ¡busco tiempo! twitter"

	Birds on a Wire 2.0 Diseño original: Better in Pink (Madeline D'Amato) Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER
	City Scape Theme Diseño original: Tutorial Blog Demo online: VER Archivo TXT: DESCARGAR Información y detalles: VER
	Twilight or Eclipse? Demo online: VER Archivo ZIP: DESCARGAR Información y detalles: VER

Yo no tenía idea de su existencia pero en Mozilla hay una serie de video que muestran de manera muy clara, como sacar provecho de algunas funciones especiales.

Pero, hay muchas más:

• Mostrar la barra de navegación
• Restaurar la barra de herramientas [Modo seguro]
• Los marcadores
• Borrar el historial de búsquedas [1, 2, 3]
• Borrar los datos privados
• Instalar extensiones
• Resetear la contraseña maestra
• Borrar el historial de descargas
• La memoria [1, 2, 3, 4]
• Restaurar la página de inicio por defecto
• Establecer la página de inicio [1, 2, 3, 4]
• Habilitar JavaScript
• Abrir archivos PDF
• Buscar nuestro perfil en Windows
• Realplayer
• Abrir Firefox en modo seguro
• Las sugerencias en las búsquedas [1, 2, 3, 4]
• Restaurar extensiones
• Desinstalar extensiones y agregados
• Desinstalar temas
• Habilitar las páginas de estilo

Las listas son uno de las etiquetas más comunes que usamos en una página web. Cuando comenzamos a aprender este lenguaje, suele parecernos que son algo "poco interesante" y a decir verdad, durante mucho tiempo fue así porque ¿para qué puede servir una lista si no es para hacer listas?

En los últimos tiempos, vaya uno a saber por qué, las listas comenzaron a tener un papel importante; alguien las sacó del olvido y se han transformado en las nuevas estrellas de las web. Blogger las usa para muchas cosas, desde lo "normal" como los archivos hasta lo insólito como los perfiles; en WordPress es aún peor, casi todo es una lista, hay un abuso de esas etiquetas y eso causa problemas a la hora de usarlas porque es un elemento que tienen una serie de propiedades especiales y porque los navegadores suelen interpretarlas de manera diferente.

Hay tres tipos de listas:

<UL> </UL> crea una lista desordenada (sin numeración).
item 1 item 2 item 3	item 1 item 2 item 3	<ul type="disc|square|circle"> <li> ....... </li> </ul>

El atributo type define el gráfico que se muestra y por defecto es un bullet pero los navegadores los muestran de formas diferentes o simplemente ignoran ciertos tipos.

Por defecto, la etiqueta UL tiene las siguientes propiedades CSS:

display: block;
font-family: Times New Roman;
font-size: 12pt; /* lo que equivale a 16px */

/* se separa de arriba y de abajo el equivalente a la altura de la fuente */
margin: 1em 0;

/* se separa de la izquierda el equivalente a dos veces y media el ancho de la fuente */
/* esto lo hace para dejar espacio para colocar el gráfico indicado en type */
padding: 0 0 0 2.5em;

list-style-image: none;
list-style-position: outside;
list-style-type: disc;

<OL> </OL> crea una lista ordenada (numerada)
item 1 item 2 item 3	item 1 item 2 item 3 item 4	<ol type="1|a|A|i|I" start="n"> <li> ....... </li> </ol>

El atributo type define el tipo de numeración y también depende de los navegadores:

1 muestra números(1, 2, 3, 4, ...)
a letras en minúscula (a, b, c, d, ...)
A letras en mayúscula (A, B, C, D, ...)
i números romanos en minúscula (i, ii, iii, iv, ...)
I números romanos en mayúscula (I, II, III, IV, ...)

El atributo start indica el inico del contador de la lista.

Por defecto, la etiqueta OL tiene las mismas propiedades que la etiqueta UL excepto su tipo:

list-style-type: decimal;

En ambos casos, tanto en lista ordenadas como desordenadas, la regla indica que su contenido sólo deben ser etiquetas <LI> </LI>

Los atributos que pueden usarse son los mismo:

<li type="disc|square|circle"> </Ii>
<li type="1|a|A|i|I" start="n"> </li>

Tienen una particularidad; no hace falta que estén dentro de listas; podemos utilizarlos de manera independiente en cualquier parte aunque, en este caso, el resultado podrá variar con los navegadores y, en algunos casos, esto es completamente ignorado.

Por defecto, la etiqueta LI tiene las siguientes propiedades:

margin: 0;
padding: 0;
display: list-item;
line-height: 1.25em;
height: 1.25em
width: 100%
list-style-image: none;
list-style-position: outside;
list-style-type: disc;

<DL> </DL> es la llamada Definition List.
ITEM 1 DEFINICION 1	ITEM 1 DEFINICION 1 ITEM 2 DEFINICION 2	<dl> <dt> ....... </dt> <dd> ....... </dd> </dl>

En principio, fue creada para armar listas de definiciones. Cada item de este tipo de lista se coloca en una etiqueta DT (Definition Term) y su definición dentro de una etiqueta DD (Definition Definition) que va inmediatamente después de la anterior.

Por defecto, la etiqueta DL tiene las misma propiedades que UL pero padding es cero. Además, las propiedades de la lista (list-style-position, list-style-type y list-style-image) no se aplican.

Hay dos etiquetas más que crean listas pero, aunque siguen funcionando, ya no se utiliza: <DIR> </DIR> y <MENU> </MENU>. Ambas son iguales que UL, no tienen atributos y sólo pueden contener etiquetas LI. Ambas se consideran depreciadas.

Otra etiqueta asociada a las listas y que tiene muy poco uso es la llamada List Header: <LH> </LH>

Se utiliza para colocar el título de la lista y debe ser colocada inmediatamente después de UL, OL o DL

<ul>
<lh id="nombreUnico" class="nombre"> ....... </lh>
<li> ....... </li>
</ul>

Es muy buena la pregunta que se hace Alejandro . Deberíamos empezar a acostumbrarnos a utilizar esta nueva posibilidad que apareció junto con muchas otras y que quedó un poco relegada frente a la conmoción de los comentarios incrustados [1 - 2]

Esta función la encontramos si accedemos al blog a través de Blogger Draft y allí vamos a Configuración | Básico:

Hacemos click en Exportar Blog y ya nos encontraremos en una nueva página donde se nos advierte que lo podemos hacer ya sea para mover el blog a otro servicio o para guardarlo en nuestra PC (más información).

La inteligencia superlativa de los desarrolladores de Blogger ha hecho que JUSTO al lado del enlace para realizar el backup se encuentre la opción de suprimir el blog así que hay que mirar bien lo que hacemos o bien guardar el enlace directo en los marcadores lo que nos evitará dolores de cabeza:

http://draft.blogger.com/export-blog.g?blogID=XXXXXXXX

Eso es todo, nuevo click en Exportar Blog y se descargará un archivo XML que contendrá los posts y los comentarios y cuyo tamaño dependerá de lo que tengamos publicado.

La descarga es muy rápida, el archivo generado es un texto así que, aunque sea "grande" (10 megas en mi caso), el proceso no tarda más que unos segundos.

Hace unos días, Juan de BlogHotPoint me preguntaba sobre las posibilidades de hacer un backup y le sugerí que probara esta nueva función. Lo hizo y amablemente me envió un mail detallando los resultados de su experimento que consistía en exportar e importar a un blog de pruebas. Resumiendo:

• Se exportaron e importaron los posts.
• No se recuperaron los comentarios.
• Todos los post "importados" se los debe republicar uno por uno.
  

Lo de los comentarios es significativo ya que, aunque es bastante engorroso leer ese archivo XML, los datos de los comentarios están allí.

A esto, podríamos agregar alguna advertencia que puede inducir a error. El backup sólo es de la base de datos, en ese sentido, es similar a otros sistemas como WordPress aunque un poco más limitado ya que los datos personales y de configuración no son guardados (sólo las entradas y los comentarios). El resto, debe hacerse de otro modo: la plantilla se debe respaldar de manera individual lo mismo que cada uno de los códigos de los elementos de la sidebar y del footer.

ver la versión actualizadaLa guerra de las jotas

aBowman es el sitio ideal para descargar widgets divertidamente inútiles.

Casi todas son bastante configurables, agregarlas al blog es sencillo ya que son archivos de Flash.

Click para ver los gadgets.

REFERENCIAS:

La Bloguería

El Drag and Drop de script.aculo.us tiene dos partes, arrastrar (drag) y soltar (drop).

Los elementos arrastrables se definían así:
new Draggable(IDelemento, opciones);

Para controlar lo que hace un elemento cuando lo soltamos luego de arrastrarlo, usamos este método:
Droppables.add(IDelemento, opciones);
donde el ID es el del elemento destino es decir, donde soltaremos algo que arrastramos.

Así, sin ninguna opción, si lo soltamos dentro del área, el objeto desaparece de nuestra vista:

<div id="bloqueArrastrar" style=".......">MOVER</div>
<div id="bloqueSoltar" style="......."> </div>
<script type="text/javascript">
new Draggable('bloqueArrastrar');
Droppables.add('bloqueSoltar');
</script>

Este es el resumen de las posibles opciones a utilizar:

Hoverclass es la clase CSS optativa que será agregada al elemento contenedor cuando algo sea arrastrado dentro de ella.

<div id="bloqueArrastrar" style=".......">MOVER</div>
<div id="bloqueSoltar" style="......."> </div>
<script type="text/javascript">
new Draggable('bloqueArrastrar', {revert: true});
Droppables.add('bloqueSoltar', {hoverclass: 'claseHover'});
</script>

Accept es también el nombre de una clase CSS pero con esta, podemos definir cuales son los elementos que podemos arrastrar y soltar en ese área.

En el ejemplo, uno de los bloques es aceptado y el otro no:

<div id="demo1" class="esteSI">MOVER</div>
<div id="demo2" class="esteNO">MOVER</div>
<div id="boqueSoltar"> </div>
<script type="text/javascript">
new Draggable('demo1', {revert: true});
new Draggable('demo2', {revert: true});
Droppables.add('bloqueSoltar', {accept: 'esteSI', hoverclass: 'claseHover'});
</script>

Aprovechemos el ejemplo del puzzle que nos muestra la Wiki de Scriptaculous para crear algo más y ver de qué se trata todo esto:

<script type="text/javascript">
(function() { 
var p = $('puzzle'), info = $('puzzleinfo'), moves = 0;
Sortable.create('puzzle', {
tag: 'img', overlap: 'horizontal', constraint: false,
onUpdate: function() {
info.update('Hasta ahora hubo ' + (++moves) + ' movimiento' + (moves > 1 ? 's' : ''));
if (Sortable.sequence('puzzle').join('') == '123456789')
info.update('Puzzle resuelto en ' + moves + ' movimientos').morph('felicitaciones');
}
});
})();
</script>

<style type="text/css">
#puzzle {margin: 0 auto; width: 450px;} 
.felicitaciones {color: #FF9933 !important;}
</style>