Meteors de Netscape

 (erynwells.me)
2 puntos por GN⁺ 2023-08-04 | 1 comentarios | Compartir por WhatsApp
  • La búsqueda del archivo original de la animación de carga “meteors” de Netscape Navigator, ligada a recuerdos de la infancia en la web, continuó durante varios días, y el tamaño original de referencia era de 60×60 px
  • Los candidatos encontrados en la web eran distintos del original; en particular, la versión de 400×400 px era demasiado grande y tenía los píxeles deformados en forma rectangular, por lo que resultaba poco confiable
  • Se revisaron incluso el espejo de GitHub de Netscape 5.0 y los antiguos archivos fuente en Mozilla FTP, pero el archivo de la animación ya había sido eliminado
  • Tras pedir ayuda en Mastodon, un amigo etiquetó a Jamie Zawinski, y en una página que él envió, quien había participado en el trabajo de Netscape Navigator, se pudo encontrar el original
  • El original tenía un pequeño artefacto a la izquierda del fotograma 10, y se crearon versiones corregidas de 60×60 px y 240×240 px ajustadas para coincidir con los píxeles circundantes

El proceso de rastrear el original de la animación de Netscape

  • El objetivo era encontrar el archivo original de la animación “meteors” de Netscape Navigator
    • Para la autora, esta animación estaba fuertemente ligada al recuerdo de descubrir la web en la infancia
    • El tamaño original era de 60×60 px
  • Se encontraron varios candidatos mediante búsqueda web, pero ninguno bastaba para considerarlo el original
    • Una versión era de 400×400 px, demasiado grande
    • Debido a un redimensionado incorrecto, los píxeles habían quedado deformados como rectángulos
  • Explorar archivos fuente tampoco dio resultados de inmediato

La respuesta de Jamie Zawinski y la versión corregida

  • Después de pedir ayuda en Mastodon, un amigo etiquetó a @jwz para preguntarle si conservaba el archivo
  • Jamie Zawinski respondió directamente, y en la página que envió se pudo encontrar la animación de carga meteors de Netscape
    • Jamie Zawinski participó en varios proyectos de software en los años 90 y también estuvo involucrado en el trabajo de Netscape Navigator
    • Creó y mantiene Xscreensaver, y actualmente opera DNA Lounge en San Francisco
  • El original encontrado tenía un pequeño artefacto a la izquierda del fotograma 10
    • Esa zona se renderizaba como píxeles rojos y naranjas
    • La autora creó una versión corregida reemplazando esos píxeles por otros que armonizan con el entorno
  • La versión corregida se hizo en 60×60 px y también en una versión más grande de 240×240 px

Lecturas relacionadas

1 comentarios

 
GN⁺ 2023-08-04
Opiniones en Hacker News

  • Pude extraer la animación de Netscape Communicator descargado de winworldpc.com con un procedimiento bastante simple: binwalk -e cc32d48.exe, cd _cc32d48.exe.extracted, unshieldv3 extract comm.z comm, python extract_images.py --ico --png -d ns/ ~/Downloads/Netscape/_cc32d48.exe.extracted/comm/program/*.dll --continue-on-errors
    Aquí, extract_images.py es una herramienta del proyecto https://github.com/akx/res-extract. La hice hace tiempo porque alguien necesitaba el ícono de Excel 95
    Pero el resultado no fue el genial 60x60 del artículo, sino solo frames de 32x32: https://i.imgur.com/sXcEEDU.png

    • En móvil es casi imposible ver la imagen real en la página de imgur. No es que quiera quejarme, pero arriba hay un enorme anuncio de Futurama, abajo hay contenido promocionado, y solo como el 3% de la pantalla es la imagen en cuestión, así que resulta medio absurdo. Claro, también se debe a que la imagen mide apenas 30 px de alto
    • Si “la hice hace tiempo porque alguien necesitaba el ícono de Excel 95”, también quiero mencionar reshacker.exe: http://www.angusj.com/resourcehacker/
      De adolescente pasé mucho tiempo con esto cambiando gráficos de Windows. Por ejemplo, cambiaba la imagen de la pantalla de carga de Windows o la de apagado de la PC; eran tiempos divertidos
    • Como quizá se note por el nombre, esta es una versión posterior, más llamativa y con más colores, de Netscape Communicator, no la que se trata en el artículo. Es la que comúnmente se conoce como “Netscape 4”, con una interfaz más dorada y más “detallada”
      El artículo probablemente trata de la animación de Netscape Navigator versión 3, o sea “Netscape 3”
      Navigator: https://duckduckgo.com/?q=netscape+navigator&t=h_&iar=images...
      Communicator: https://duckduckgo.com/?q=netscape+communicator&t=h_&iar=ima...
    • Ahora me da curiosidad cuántas versiones de la animación del meteoro hubo en total
      Aquí hay una animación hecha solo con la parte del loop. Se excluye el primer frame: https://i.ibb.co/DMDBR7L/Netscape-Communicator-Meteor-Loop.g...

  • En el archivo del sitio web de Dataglyph (Marsh Chamberlain) hay otras versiones de esta animación: https://web.archive.org/web/20011214155044/http://dataglyph....
    En una versión más antigua del sitio se dice que Dataglyph también hizo el compás giratorio, un ícono que no se usó: https://web.archive.org/web/19981206034010/http://www.datagl...

    • Me sorprende cómo encuentran estas cosas

  • Está todo aquí. No solo lo de Netscape 4: http://www.netscape-communications.com/netscapes-throbber-an...

    • Ya que el sitio volvió a estar disponible, viéndolo no sé si realmente esté todo. Parece que no está el del texto original. El del original tampoco parece ser Netscape 4 y, según [1], lo que buscaba el original parece ser Netscape 1, es decir el “original Netscape Navigator” del que habla el autor
      Además, la imagen de [1] parece haber sido modificada. Tiene un borde blanco, parecen faltarle los últimos frames y la paleta tampoco encaja del todo. En cambio, la paleta del original tiene exactamente esa sensación de la época, lo que refuerza aún más el punto del artículo
      [1]: https://www.versionmuseum.com/history-of/netscape-browser
    • Es irónico que alguien haya dedicado tiempo a recrear en una entrada de blog una pequeña parte de algo que vieron miles de personas. Da la sensación de una época en la que la información estaba dispersa como islas
    • Parece que ese sitio no aguantó el tráfico de HN. Aun así, la entrada del blog sigue viva
    • NCSA Mosaic era lo máximo. Especialmente extraño cuando lo corría en SunOS

  • Esa combinación de dithering y paleta cuantizada evoca muchísimo esa época

    • Hacía muchísimo que no pensaba en los colores seguros para la web (web-safe colors)
    • Si se ve el ejemplo comparativo de abajo, especialmente el rojo con dithering resulta interesante

  • Ah, el ícono de Netscape Navigator. Qué recuerdos tan cálidos. La paleta de colores del sitio de Netscape y del navegador era hermosa y cómoda
    Si el meteoro se movía, asumía que había conexión a Internet; si no se movía, tenía que volver a llamar más tarde

  • Obviamente suena un poco gracioso, pero IE 3 y 4 siempre se “sentían” más rápidos que Netscape por la velocidad de la animación
    Siempre me pregunté si Microsoft la había hecho más rápida a propósito para generar esa percepción

    • Definitivamente hay una diferencia. El equipo de Facebook cambió el loader de inicio de la app de iOS del rayado estilo Facebook ||||| al spinner estándar de iOS, porque los usuarios sentían que, con el loader de Facebook, Facebook era lento, y con el spinner de iOS, el iPhone era lento
    • No es nada gracioso; tiene más que ver con la psicología humana. Recuerdo haber leído antes un artículo que decía que, aunque en realidad sea más lento, si se ve una respuesta se percibe como más rápido
      Si quieres probarlo tú mismo, haz una app con 3 botones en tu lenguaje favorito. El primer botón espera 9 segundos y muestra “done”; el segundo actualiza una barra de progreso cada segundo durante 10 segundos y luego muestra “done”; el tercero actualiza una barra de progreso cada 100 ms durante 10 segundos y luego muestra “done”. Mira cuál se siente más rápido
    • Me gustaría investigar eso. Sería bueno sincronizar el timing de los cambios de UI según haya o no un spinner/loader entrecortado o trabado, y comparar cómo cambia la percepción de los usuarios
      Cuando algo se siente fluido, da la impresión de que la máquina está bien programada y ordenada, pero una animación GIF lenta da la sensación de que algo anda mal
    • ¿Te refieres al ícono con nubes moviéndose detrás del logo de Windows? En mi laptop la velocidad era absurdamente alta, como si las nubes se movieran a velocidad warp. No recuerdo si era IE 3, pero siempre se veía raro
      Corrección: era IE 2
    • Las primeras versiones de IE eran realmente rápidas y tenían muchas funciones. El tamaño del ejecutable también era bastante pequeño

  • Esto pega justo en la nostalgia. Fue una época realmente buena para sumarse a la World Wide Web

    • Era la época de la web pura, sin todos esos adornos
      Luego Netscape creó JavaScript, que al principio fue Mocha/LiveScript, y finalmente llegamos a lo que es hoy
    • También me hizo recordar uno de mis primeros proyectos de programación. Un profesor había hecho un juego de naves espaciales para Netscape, y yo lo porté al modelo de UI de IE
      En ese entonces no había un DOM estandarizado y, según recuerdo, forzar incompatibilidades era uno de los ejes de la estrategia de Microsoft

  • Dejaré aquí una pila de revistas .net y Wired, así que solo queda escuchar el sonido del handshake del módem

    • No hay que olvidar la revista “Yahoo! Internet Life”

  • ¿Alguien sabe con qué proceso se hicieron originalmente las animaciones? Me da curiosidad si dibujaron cada fotograma a mano o si usaron otra técnica

    • Me imagino que dibujaron los fotogramas directamente, pero en esa época también había herramientas para convertir ANI a GIF
      Así que podrían haberlas hecho en 3D Studio Max, Maya de SGI o Lightwave de Amiga, y pasar de .ANI a .GIF
      Si fue así, quizá exista una forma de desenterrar los archivos originales del proyecto y hacer un render 8K genial
    • Me parece que habría sido un flujo de trabajo hackeado de ese estilo. Es posible que la animación básica y el render de iluminación se hayan hecho con algo como Autodesk 3D Studio R3/R4 (DOS) o Lightwave 3D (Amiga), porque hacerlo a mano habría sido un infierno
      Después probablemente se mezclaron software a medida para optimización de paleta, Mac Photoshop para composición y trabajo manual fotograma por fotograma. No necesariamente en ese orden
      3ds Max salió en 1996 y Maya en 1998. Pero como Netscape fue fundada por Jim Clark, famoso por SGI, es muy probable que el trabajo 3D se haya hecho con software corriendo en máquinas SGI
    • Era una imagen bitmap con los fotogramas individuales pegados horizontalmente. Durante un tiempo, esa fue una forma común de crear animaciones GIF, que eran abundantes y populares en la web: http://leighb.com/throbgif.htm

  • Era una época en la que internet se sentía como algo donde cualquiera podía comprar en Borders Bookstore un libro de 6 pulgadas de grosor, sentarse a leerlo y aprender HTML, y de inmediato probar cosas y armarse una carrera
    De hecho, yo lo hice así, y cuando empecé usaba el programa que venía dentro de Netscape