Devitácora

Un blog informático

¡Cuidado, «spoilers»!

Hace poco me vi en la necesidad de ocultar cierto contenido que podría arruinar la experencia de alguien que aún no haya visto o leído cierta obra, por lo que decidí embarcarme en una lucha contra los spoilers y este es el resultado de mi aventura. Es algo simple y sobrio, pero más que suficiente para la mayoría de los casos.

Basta con agregar lo siguiente justo antes de </head> y ¡listo!:

Elaboré dos tipos de spoilers. Uno lineal, ideal para envolver fragmentos de textos en un párrafo:

Y otro en bloque, para envolver elementos que no son textos, como videos e imágenes:

Míralo en acción con estos ejemplos.


Bloquear Firefox con contraseña

No, técnicamente no se puede bloquear Firefox con contraseña (por ahora, Google Chrome ya lo hace), y cuando se recurre a la red con esa consulta, te sugieren lo más sensato, que es crear una nueva sesión en Windows, alimentando aun más nuestra frustración, puesto que lo que se suele buscar es simplemente mantener alejados, por un momento y sin tanto parapetos, a los ojos curiosos de personajes que no son malintencionados ni expertos en seguridad informática.

Si ese es tu caso, aún nos queda una opción. Podemos emplear un script, llamado Master Password+, para tal propósito, siguiendo los pasos descritos por su desarrollador en este repositorio. También se aportó un video con el que podrás familiazarte con el proceso de instalación.

Hasta ahí iba a dejar la entrada, dado que la información ya está a nuestra disposición de manera clara, pero puede que muchos no se desenvuelvan tan bien con el inglés, por lo que decidí agregar el siguiente parafraseo en nuestro idioma.


Emular la apariencia de los «fieldset»

Los fieldset son unas de mis etiquetas HTML favoritas por su apariencia, pero lamentablemente fue pensada exclusivamente para agrupar campos de un formulario. Esto no te detiene a usarlas a tu antojo, pero no se verá bien; es como sentarte en una mesa, no fue hecha para ello.

En la red hay un sinnúmero de alternativas que emulan este elemento, pero con las que me he topado suelen fallar en una cosa: flexibilidad. Estas se estropean cuando se necian las propiedades de legend, cuando el ancho del documento se reduce drásticamente o se vuelven un dolor de cabeza al intentar obtener su altura mediante JavaScript.

Siguiendo el hilo de la anterior entrada, quise intentarlo empleando contenedores flexibles, más la ayudita de la propiedad CSS transform, y he aquí el resultado, el cual puedes ver acción en esta página.


Título con línea horizontal detrás de él

A veces los títulos no se ven tan bien entre tanta sobriedad, como cuando están centrados y hay mucho espacio a su alrededor, por lo que uno busca la manera de maquillarlo para resaltar su impresión. Uno de mis métodos preferidos es estilizándolo con una línea detrás, pero nunca me ha gustado la manera en cómo se suele hacer, empleando etiquetas HR y posiciones absolutas. He aquí una forma más sencilla utilizando contenedores flexibles:

El CSS básico sería el siguiente:

Mientras que el HTML luciría algo así:


Cuando Blogger no guarda las plantillas formateadas

De un tiempo para acá me he percatado que cuando empleo la opción Dar formato al tema, estando en el editor HTML de mis blogs, y prosigo a guardar los cambios, Blogger no lo hace, solo aparenta hacerlo. El ausente error solo aparece cuando se importa la plantilla formateada (se copia todo el código formateado en un archivo XML para este propósito) a través de la opción Crear copia de seguridad/Restablecer.

Nadando en ese mar de código, descubrí que el problema radicaba en que el proceso toca ciertas configuraciones del elemento Entradas del blog (id=Blog1) que no debería. El servicio te deja las opciones de la siguiente manera:

Pero para evitar que no nos ignore los cambios, tendríamos que acomodarlo en una sola línea, buscando retirar los espacios que acompañan al valor de la configuración:


Plantillas mínima y básica para Blogger

Como Blogger no brinda una plantilla desnuda para poder diseñar blogs desde cero, optaba por trabajar sobre la maraña que da forma a los temas que ya ofrece... hasta que me aburrí:

Plantilla mínima, con solo lo necesario para que Blogger la acepte:

Plantilla básica, con el elemento Entradas del blog y los datos esenciales de la cabecera del documento:

Puedes configurar las plantillas añadiendo los siguientes atributos en la etiqueta de apertura <html>:

Para retirar los estilos de los elementos de Blogger (conocidos como gadgets o widgets):

b:css='false'

Para retirar los scripts de los elementos de Blogger:

b:js='false'

Para emplear la última versión de los elementos de Blogger:

b:defaultwidgetversion='2'

Para emplear la última versión de las plantillas:

b:layoutsVersion='3'

Usar el «Formulario de contacto» sin el «script» de Blogger

El elemento (gadget) Formulario de contacto de Blogger es esencial en todo blog, pero para emplearlo, uno se tiene que tragar el script de la plataforma. Para alguien obsesionado con tener limpio su código fuente, puede ser algo frustrante.

Hace poco me puse la tarea de rumiar el susodicho script y constaté que se podía usar el elemento sin recurrir a él; de hecho, ni siquiera hay necesidad de añadirlo. Lo único que hay que tener a la mano es el ID de nuestro blog, el cual puede obtenerse en nuestra plantilla con la etiqueta data:blog.blogId o copiando, estando en nuestro escritorio, el valor del parámetro blogID que aparece en la barra de direcciones del navegador.

Los datos son enviados a blogger.com/contact-form.do (como parámetros name, email y message), los cuales deben estar correctos, venir acompañados con el ID del blog (blogID), y provenientes del mismo lugar, para que Blogger los acepte.


search-icon home-icon blog-icon about-icon envelop-icon calendar-icon tag-icon comment-icon share-icon gmail-icon blogger-icon twitter-icon facebook-icon printer-icon link-icon list-icon rss-icon logo-icon