Me Lo Agradecerás Toda Tu Vida

Disculpe usted las molestias

2007-01-26T05:37:00.000-08:00

Por fin hemos cambiado a la nueva versión de Blogger, con la intención de poder ofrecerle un servicio óptimo y actualizado.

Hemos perdido momentáneamente los cambios realizados hasta ahora; en cuanto nuestros empleados acaben el cursillo de actualización, volveremos a la normalidad.

Gracias por su paciencia y disculpe usted las molestias.

Última hora: se recomienda a los usuarios antiguos de Blogger que se hayan pasado a la versión Beta que no cambien sus plantillas al nuevo modelo y se mantengan con la vieja y fiable plantilla de HTML. Ésto sólo es posible si dichos usuarios tenían su blog desde antes de noviembre de 2006.

La nueva plantilla es también modificable, pero por problemas de compatibilidad nos resulta imposible dedicarle el tiempo y el espacio necesario en MLATTV. Nuestros eruditos estudian la posibilidad de, en un futuro, crear un MLATTV Beta.

Un buen fondo es primordial

2007-01-18T09:40:00.000-08:00

Hoy trataremos de sumergir nuestro espacio blógico en una esfera estética proporcionada por el fondo. Tras la declaración de intenciones gráficas que supone la cabecera, empapar todas y cada una de las páginas del blog con una imagen de fondo sugerente terminará de definir nuestro estilo y la dirección de nuestro delirio electrónico.

Como primer paso, deberemos escoger la imagen adecuada. Tendremos en cuenta dos factores: el peso de la imagen (lo que ocupa en Kbs) y su aspecto:

- El peso: es importante que la imagen no pese mucho. Por ello procuraremos seleccionar imágenes que, al repetirse, creen patrones. De esta manera nuestro fondo en .jpg o en .gif (descartaremos cualquier otro formato, de momento), una vez cargado, se repetirá sin dilación, permitiendo a nuestros insignes visitantes dedicarse a bucear por el contenido del blog, que es a lo que han venido.

- El aspecto: siempre tenderemos hacia las imágenes sencillas, que no desvíen la atención de lo que nos interesa y que no produzcan un dolor de cabeza instantáneo al pobre blogadicto que los sufra. Un mal ejemplo de fondo lo podemos ver aquí. Obsérvese que tarda una cantidad ingente de tiempo en cargar y, además, una vez visualizado, produce en el espectador brotes psicopáticos de baja frecuencia. Aquí se puede observar otro ejemplo claro de lo que no se debe hacer.

Por el contrario, observe en este otro blog la elegancia con la que se ha elegido el fondo, lo acorde con el contenido, y lo bien ejecutado que está para que no pese mucho ni en la carga de la página ni en la mente del blogovidente. Si observamos con detenimiento, la imagen de fondo se reduce a esto, sujeto a una repetición a lo largo del eje Y (vertical). Puede usted encontrar otro ejemplo más recargado pero no por ello menos elegante aquí. Observará que en ambos ejemplos la repetición es en el eje Y, de gran utilidad debido al carácter vertical de los blogs, y así será por lo tanto el ejercicio de hoy, al que damos paso inmediatamente.

Como primer paso y, una vez elegida la imagen de fondo, la subiremos a nuestro albergador de imágenes online preferido. Obtenido pues el enlace, accederemos a nuestra plantilla y buscaremos el siguiente código, al principio de la misma.

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

Entonces, añadiremos tres sencillas líneas:

body {
background: url(aquí va la URL de nuestra imagen);
background-repeat: repeat-y;
background-position:center;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:left;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

De las cuales:
- La primera indica qué imagen es la que se establece como fondo;
- La segunda indica en qué eje se repite dicha imagen: en este caso, vertical;
- La tercera se refiere a que dicha imagen estará centrada en la pantalla. Podemos elegir left para alinearla a la izquierda o right para alinearla a la derecha, según nos interese.

También podemos dejar tal línea en repeat a secas, de tal manera que el fondo se repita tanto en vertical como en horizontal, obteniendo así un efecto similar al que puede usted contemplar en esta santa casa.

Dicho esto, disfute usted de su nuevo y flamante fondo y espero verle por aquí en el próximo fascículo de bricolaje bloggero.

Disculpen las molestias

2007-01-08T08:04:00.000-08:00

Mientras Blogger ultima su cambio a la nueva versión, me veo obligado a suspender el servicio hasta nueva orden, para evitar posibles problemas de incompatibilidad entre versiones.

En breve volvemos a las andadas todos de la mano.

Cómo quitar los bordes de las imágenes

2006-12-10T16:31:00.000-08:00

Qué incómodo es ese recuadro que aparece por defecto enmarcando nuestra límpida e impoluta ilustración o fotografía, ¿verdad? Tamaña aberración, símbolo del intrusismo del programador en la obra del artista, debe ser eliminada sin premura. Nada más fácil:

- Busque en la plantilla del blog de usted, a eso de la mitad del recorrido del scroll, este código:

.post img {
padding:4px;
border:1px solid #ddd;
}

En esta pequeña muestra de literatura contemporánea, podemos determinar que padding es la cantidad de espacio que habrá entre nuestra imagen y el borde. Tenga en cuenta que aunque el borde sea invisible, el espacio seguirá existiendo: puede ser útil para separar la imagen del texto o de cualquier otro elemento que la rodee. Si se ve con ánimos, experimente con diversas medidas.

Encontramos también en tan intrigante código la propiedad border, la cual tiene tres valores:

- 1px indica el tamaño en píxeles de dicho borde. Para eliminarlo, ponga usted 0px (cero píxeles);

- solid se refiere al aspecto del borde. Los puede encontrar punteados, rayados, dobles... pero recuerde que si no los ha visto antes en ningún otro espacio web, por algo será.

- Finalmente, #ddd indica el color del borde en valor hexadecimal. Si usted conoce tal sistema y/o cómo descifrarlo, experimente. En caso contrario, pase usted por aquí.

Si por cualquier circunstancia la precedente verborrea le ha distraido del asunto que pretendía usted resolver, que era eliminar el incómodo bordecito, aquí tiene un resumen del resultado final:

.post img {
padding:4px;
border:0px;
}

Suerte y hasta la próxima lección.

Empezando por el tejado

2006-11-21T19:50:00.000-08:00

Como primera lección, un tema que les preocupa a muchos de nuestros blogovidentes: la imagen dela cabecera. Sustituir esos incómodos textos enmarcados por tan rígidas líneas es tan sencillo como esto:

- Cree su cabecera con su aplicación favorita o pídasela a un amigo diseñador. Si se niega, insista.
- La medida que viene por defecto en la plantilla original es de 660px de ancho. Procuraremos mantener el tamaño, ya que se pretende embellecer la estructura, no destrozarla. En este ejercicio trabajaremos con una cabecera de 660px de ancho por 264px de alto.
- Entre en ImageShack. Seleccione la imagen de su disco duro y súbala. Una vez hecho esto, seleccione el enlace directo a la imagen (Direct link to image) y cópielo.
- Acceda a su panel de control.
- Acceda a la pestaña Plantilla.
- Busque en el código, justo cuando acaba el </head> y empieza el <body>, este párrafo:

<div id="header">
  <h1 id="blog-title">
    <ItemPage><a href="<$BlogURL$>"></ItemPage>
    <$BlogTitle$>
    <ItemPage></a></ItemPage>
  </h1>
  <p id="description"><$BlogDescription$></p>
</div>

- Una vez localizado, elimine la línea marcada en negrita en el punto anterior y sustituya <$BlogTitle$> por este otro código, corrigiendo el link donde se indica:

<img border="0" src="aquí ha de pegar el enlace directo que ha copiado en ImageShack" width="660" height="264">

- Ahora, busque al principio del código, en la hoja de estilo, este texto:

@media all
  #header
    width:660px;
    margin:0 auto 10px;
    border:1px solid #ccc;
    }
  }

- Transforme el margen y el borde, con este resultado:

@media all {
  #header {
    width:660px;
    margin:0 auto 0;
    border:0px;
    }
  }

- Busque a continuación, un poco más abajo:

#blog-title {
  margin:5px 5px 0;
  padding:20px 20px .25em;
  border:1px solid #eee;
  border-width:1px 1px 0;
  font-size:200%;
  line-height:1.2em;
  font-weight:normal;
  color:#666;
  text-transform:uppercase;
  letter-spacing:.2em;
  }

- Transfórmelo en esto otro:

#blog-title {
  margin:0;
  padding:0;
  border:0px;
  }

- Compruebe con el botónVista previa que los cambios han funcionado. Si está satisfecho, pulse Guardar cambios de plantilla.

Et voilà! Su blog acaba de subir de categoría estética. Disfrute de su nuevo look con amigos y familiares, sorprenda a sus vecinos con un toque de elegancia y no se pierda la próxima lección de Puño, su amigo y esteta.

Añado: en caso de tener, de manera irreversible, la nueva versión de Blogger, aquí dispone usted de una manera de modificar su cabecera. Recordamos a nuestros lectores que es preferible mantener la vieja y leal plantilla HTMLera.