<Blink> y <Marquee> (2020)

• Las etiquetas <blink> y <marquee> que aparecieron en los inicios de la web en los 90 fueron un elemento emblemático del diseño web de la época
• La etiqueta <blink> fue introducida en Netscape Navigator 2.0 y, pese a su propósito juguetón y su poca estética, se usó ampliamente
• Como respuesta, Microsoft introdujo la etiqueta <marquee> en Internet Explorer, lo que permitió controlar con mucha más variedad la animación del texto
• Al usar ambas etiquetas anidadas, era posible ofrecer distintos efectos de animación según el navegador, y se menciona como un ejemplo del principio de mejora progresiva
• Hoy, <blink> ha desaparecido y <marquee> tampoco se recomienda, pero siguen recordándose como ejemplos representativos de la historia de la web y la nostalgia en línea

---

Introducción: recuerdo de las etiquetas <blink> y <marquee>

• Hace poco, mientras conversaba con un colega desarrollador web, hice una broma sobre las etiquetas HTML <blink> y <marquee>, y descubrí que esa persona no conocía ninguna de las dos
• Aunque hoy resultan desconocidas para muchos desarrolladores jóvenes, en su momento fueron elementos emblemáticos del diseño web de los 90

Origen e historia de la etiqueta <blink>

• A menudo se dice que el creador de la etiqueta <blink> fue Lou Montulli, conocido por haber hecho el navegador Lynx, pero en realidad él mismo aclaró que no escribió el código directamente
• Según su versión, durante una conversación en un bar con ingenieros de Netscape se propuso en broma un “efecto de texto parpadeante” que pudiera usarse incluso en navegadores de texto como Lynx, y a partir de eso otro ingeniero lo implementó trabajando toda la noche
• En 1995, la etiqueta <blink> fue incorporada oficialmente en Netscape Navigator 2.0, y junto con los GIF animados y el JavaScript inicial ayudó a definir la experiencia de los sitios web personales
• La etiqueta <blink> se usaba sin atributos y, aunque en HTML4 quedó registrada oficialmente como una etiqueta de broma, fue abusada masivamente a finales de los 90
• Se utilizó mucho para llamar la atención sobre todo tipo de mensajes, como destacar “actualización más reciente”

<marquee> y la competencia entre navegadores

• Ese mismo año, Internet Explorer 2.0 de Microsoft introdujo la etiqueta <marquee> en lugar de seguir el camino de <blink> de Netscape
• La etiqueta <marquee> permitía ajustar la animación mediante diversos atributos, como la dirección del desplazamiento, la velocidad y si debía repetirse o no
• Mientras que <blink> tenía un tono de broma y podía perjudicar la legibilidad visual, <marquee> enfatizaba el efecto de manera intencional
• A finales de los 90 se popularizó usar ambas etiquetas juntas —<marquee> dentro de <blink>— como una forma de ofrecer efectos distintos según el navegador (IE o Netscape)

Mejora progresiva (Progressive Enhancement) y compatibilidad web

• El uso anidado de <blink> y <marquee> se relaciona con la Ley de Postel (principio de robustez), según la cual los navegadores ignoran las etiquetas que no admiten pero siguen renderizando el contenido interno
• Por esta razón, nuevos elementos HTML (como <video>) también suelen usar etiquetas no autocontenidas para ayudar a garantizar la compatibilidad
• Al aprovechar etiquetas como <blink>/<marquee>, incluso los navegadores que no las conocían podían seguir leyendo el contenido informativo
• La web se basa en el concepto de mejora progresiva: ofrecer información a todos los usuarios y permitir que solo algunos navegadores disfruten efectos adicionales

Cambios y compatibilidad en distintos navegadores

• Los usuarios de Opera casi nunca podían ver efectos de <blink> o <marquee>, ni siquiera con una licencia de pago, pero no tenían problemas para acceder al contenido
• Netscape 7 fue casi el único navegador que soportó tanto <blink> como <marquee>, permitiendo implementar al mismo tiempo efectos de desplazamiento y parpadeo, quizá uno de los efectos más difíciles de ver en la web

Conclusión: su lugar actual y las lecciones para el diseño web

• La etiqueta <blink> ha desaparecido por completo en la actualidad (los navegadores modernos no la soportan), y si hace falta puede reemplazarse con animaciones CSS
• Aunque <marquee> todavía tiene soporte básico o polyfill en algunos navegadores, su uso no se recomienda
• Sigue siendo un símbolo de la historia de la web y de la estética en línea del pasado, además de un caso aleccionador sobre estándares web y accesibilidad y mantenimiento
• Si te interesa la nostalgia digital, puedes consultar materiales o sitios relacionados con el diseño web de antaño

[GN⁺]

Comentarios de Hacker News

• Recuerdo que antes había un sitio como el del siguiente enlace: https://web.archive.org/web/20201111125145/https://danq.me/2020/11/11/blink-and-marquee/

• Soy de los que sienten que estuvieron aquí hace 3,000 años. Recuerdo cuando se debatía acaloradamente si la navegación con frames era una mala práctica (no iframe, sino frames). Si alguien más conoce los frames, qué gusto. Antes de que existiera AJAX, yo mismo usaba HTTP 204 para enviar mensajes al servidor sin recargar la página. A inicios de los 2000 también trabajé con image maps referencia de image map: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/map. Incluso pasé varios días dibujando bordes de mapas en Dreamweaver hasta completar un mapa mundial clicable. Como las plantillas de Dreamweaver no usaban control de versiones, muchas veces al actualizar perdías todos los cambios y ya no había forma de recuperarlos. También recuerdo procesar en el backend la posición del clic de una imagen con input type=image. Implementé actualizaciones en streaming en páginas usando Motion JPEG, y todavía funciona en Chrome, aunque en Firefox sigue siendo algo inestable. Probé varias formas de resolver el problema del alpha blending de PNG en IE, al final usé un poco una versión con ActiveX, pero luego dejó de hacer falta cuando se puso de moda el diseño plano. Para navegación usé de todo: JAVA, Flash y Silverlight. Recuerdo perfectamente los spacer GIF, los conditional comments y lo mucho que se volvió más cómodo el entorno de desarrollo después de que apareció Firebug. El tiempo pasó sin que me diera cuenta de cuándo me hice viejo

  • Antes desarrollé software web con frames y la verdad nunca sentí que hubiera un problema. La gente habla de accesibilidad, pero todavía no tengo muy claro cuál era el problema específico

  • Recuerdo trabajar para clientes corporativos que pedían soporte en medio de todos los bugs rarísimos y limitaciones de IE6. Cada vez que el diseñador entregaba un diseño con esquinas redondeadas en Photoshop, no quedaba más que suspirar. En aquella época, “responsive” en realidad significaba soportar varias resoluciones de escritorio. Había que cortar las esquinas como imágenes y colocarlas manualmente en celdas de tablas. Hacer ese trabajo artesanal realmente te fortalecía la resistencia mental como desarrollador

  • Recuerdo cuando usábamos la herramienta slice de Photoshop para dividir imágenes minuciosamente, exportarlas como GIF y luego tratar de colocarlas con precisión en tablas HTML. Era la época de los diseños optimizados para resolución 800x600. Siento que todos esos recuerdos se disolvieron en el tiempo

  • Todavía hay sitios que visito varias veces y siguen usando frames. El sitio de Open Group/POSIX todavía usa frames

  • Una vez hice un webchat usando frames. Arriba estaba la ventana de chat con recarga infinita y abajo un input box, y al enviar mensajes evitábamos la recarga con 204. También podíamos enviar un pequeño script al frame superior para recargar el frame derecho donde estaba la lista de usuarios. Lo usábamos entre unos amigos por ahí del año 2000

• Hace tiempo hice un sitio con animaciones implementadas únicamente con la etiqueta marquee. No usaba nada de JavaScript, y todos se sorprendían cuando se lo mostraba a alguien https://udel.edu/~ianozi/

  • Siento que no veía la etiqueta marquee desde hace como 20 años, y creo que no sabía que con el parámetro direction también se podía hacer scroll vertical

• Mi truco favorito con la etiqueta marquee era anidarla. Si pones direcciones distintas y ajustas el marquee interior a la misma velocidad en sentido contrario, puedes lograr un efecto de pausa momentánea antes de que vuelva a moverse. Si usas velocidades diferentes, también se podían lograr movimientos más complejos. Recuerdo que para que esto funcionara bien había que ponerle un ancho máximo al marquee interno

• Antes odiaba tanto la etiqueta blink que una vez abrí el archivo binario del navegador que usaba (probablemente Netscape) y cambié blink por blonk para que dejara de parpadear

  • Yo hago este tipo de tweaks binarios sobre todo con el cliente de Slack (como es una app Electron, es facilísimo). También puedo quitar fácilmente funciones que no me gustan, como esconder notificaciones o bloquear el indicador de que estoy escribiendo

  • Si alguien usó una etiqueta blonk, ahora tal vez ya existe el blonking. Suena como un hack bastante divertido

  • Modificar binarios es bastante divertido. Solía cambiar __gnu_warning por __gnu_whining para quitar mensajes de advertencia sobre gets(). Los buffer overruns pueden pasar, pero en código hecho al aventón tampoco me preocupaba demasiado

• Uso mucho la etiqueta marquee para probar inyección HTML. Como casi nadie usa ya esa etiqueta en movimiento, enseguida puedes ver si el ataque funcionó. Incluso para gente no técnica es mucho más fácil entender el riesgo si les muestras texto moviéndose cuando no debería, mucho más que con algo como bold

  • Al sanitizar HTML, por diversión dejo marquee en la whitelist como easter egg y bloqueo casi todo lo demás

  • Veo Hacker News mediante un agregador personalizado, y gracias a esta publicación descubrí que es vulnerable a inyección HTML. Un post de 2020 andaba paseándose por la pantalla en marquee

• “La bestia aparecerá rodeada de nubes giratorias de venganza. La casa del incrédulo será destruida, y sus etiquetas parpadearán hasta el fin.” – The Book of Mozilla, 12:10 (about:mozilla). Y ahora siento que Mozilla también está desapareciendo. Se siente casi como el fin de los tiempos

  • Yo todavía uso Firefox como navegador predeterminado

• Me hizo recordar la época en que corría el sitio web del piso de mi residencia universitaria desde mi propia computadora. Había puesto un mensaje larguísimo de 997 palabras en marquee, donde me ponía a divagar sobre mujeres, depresión, filosofía y otras cosas. Al final del mensaje había un signo ! que enlazaba a una página oculta. Al final alguien encontró esa página después de leer todo el texto largo en view source

• Un amigo mío siempre envolvía su segundo nombre en una etiqueta blink para probar rápido si faltaba escaping o si había un posible XSS. Antes, métodos así de simples eran bastante efectivos para encontrar vulnerabilidades

• Este comentario está actualmente en construcción. Vuelve seguido para revisar actualizaciones

  • Me pregunto dónde están el contador de visitas y el libro de visitas

  • Me pregunto para qué navegador está optimizada esta página

  • No olviden poner la marca de [NEW]