Netscape Meteors

 (erynwells.me)
2 pontos por GN⁺ 2023-08-04 | 1 comentários | Compartilhar no WhatsApp
  • A busca pelo original da animação de carregamento “meteors” do Netscape Navigator, ligada às memórias de infância da web, levou vários dias; o tamanho original usado como referência era 60×60 px
  • Os candidatos encontrados na web eram diferentes do original; em especial, a versão de 400×400 px era grande demais e tinha pixels deformados como retângulos, o que a tornava pouco confiável
  • Mesmo verificando o espelho do Netscape 5.0 no GitHub e antigos arquivos de código-fonte do Mozilla FTP, o arquivo da animação já havia sido removido
  • Ao pedir ajuda no Mastodon, um amigo marcou Jamie Zawinski; em uma página enviada por ele, que participou do trabalho no Netscape Navigator, foi possível encontrar o original
  • O original tinha um pequeno artefato no lado esquerdo do frame 10, e foram criadas versões corrigidas de 60×60 px e 240×240 px ajustando-o aos pixels ao redor

O processo de rastrear o original da animação do Netscape

  • O objetivo era encontrar o original da animação “meteors” do Netscape Navigator
    • Para o autor, essa animação era uma imagem fortemente ligada às memórias de quando descobriu a web na infância
    • O tamanho original era 60×60 px
  • Vários candidatos foram encontrados por buscas na web, mas não eram suficientes para serem considerados o original
    • Uma versão tinha 400×400 px, grande demais
    • Por causa de um redimensionamento incorreto, os pixels haviam ficado deformados como retângulos
  • A exploração de arquivos de código-fonte também não trouxe resultado imediato

Resposta de Jamie Zawinski e versões corrigidas

  • Depois de pedir ajuda no Mastodon, um amigo marcou @jwz e perguntou se ele tinha o arquivo
  • Jamie Zawinski respondeu diretamente, e na página que ele enviou foi possível encontrar a animação de carregamento Netscape meteors
    • Jamie Zawinski participou de vários projetos de software nos anos 1990 e também esteve envolvido no trabalho no Netscape Navigator
    • Ele criou e mantém o Xscreensaver e atualmente opera o DNA Lounge em San Francisco
  • O original encontrado tinha um pequeno artefato no lado esquerdo do frame 10
    • Essa parte era renderizada como pixels vermelhos e laranja
    • O autor criou uma versão corrigida substituindo esses pixels por outros que combinassem com os arredores
  • As versões corrigidas foram feitas em 60×60 px e em uma versão maior de 240×240 px

Leituras relacionadas

1 comentários

 
GN⁺ 2023-08-04
Opiniões no Hacker News

  • Foi possível extrair a animação do Netscape Communicator baixado do winworldpc.com com um procedimento bem simples: 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
    Aqui, extract_images.py é uma ferramenta do projeto https://github.com/akx/res-extract. Eu a tinha feito tempos atrás porque alguém precisava dos ícones do Excel 95
    Só que o resultado não foram os belos 60x60 mencionados no texto, apenas quadros 32x32: https://i.imgur.com/sXcEEDU.png

    • No celular, é quase impossível ver a imagem de verdade na página do imgur. Não é para reclamar, mas é meio absurdo: há um anúncio enorme de Futurama em cima, conteúdo promovido embaixo, e só uns 3% da tela é a imagem em questão. Claro, isso também acontece porque a imagem tem só 30px de altura
    • Já que “eu a tinha feito tempos atrás porque alguém precisava dos ícones do Excel 95”, também gostaria de mencionar o reshacker.exe: http://www.angusj.com/resourcehacker/
      Na adolescência, passei muito tempo usando isso para mudar os gráficos do Windows. Por exemplo, trocava a imagem da tela de carregamento do Windows ou da tela de desligamento do PC. Bons tempos
    • Como talvez dê para perceber pelo nome, esta é uma versão posterior, mais vistosa e mais colorida, do Netscape Communicator do que a tratada no texto. Era comumente chamada de “Netscape 4”, com uma UI mais puxada para dourado e mais “detalhada”
      O texto provavelmente trata da animação da versão 3 do Netscape Navigator, ou seja, o “Netscape 3”
      Navigator: https://duckduckgo.com/?q=netscape+navigator&t=h_&iar=images...
      Communicator: https://duckduckgo.com/?q=netscape+communicator&t=h_&iar=ima...
    • Agora fiquei curioso para saber quantas versões da animação do meteoro existiram ao todo
      Há uma animação feita só com a parte em loop aqui. O primeiro quadro foi excluído: https://i.ibb.co/DMDBR7L/Netscape-Communicator-Meteor-Loop.g...

  • O arquivo do site Dataglyph (Marsh Chamberlain) tem outras versões dessa animação: https://web.archive.org/web/20011214155044/http://dataglyph....
    Em uma versão mais antiga do site, também consta que a Dataglyph criou a bússola giratória, um ícone que não foi usado: https://web.archive.org/web/19981206034010/http://www.datagl...

    • É incrível como vocês encontram esse tipo de coisa

  • Está tudo aqui. Não há só os do Netscape 4: http://www.netscape-communications.com/netscapes-throbber-an...

    • Aproveitando que o site voltou ao ar, não sei se é realmente tudo. O que aparece no texto original não parece estar lá. O do texto original também não parece ser do Netscape 4 e, segundo [1], o que o original procurava parece ser do Netscape 1, ou seja, o “original Netscape Navigator” mencionado pelo autor
      Além disso, a imagem de [1] mostra sinais de alteração. Tem uma borda branca, parece que faltam os últimos quadros e a paleta também não bate exatamente. Já a paleta do original captura com precisão a sensação daquela época, reforçando ainda mais o ponto do texto
      [1]: https://www.versionmuseum.com/history-of/netscape-browser
    • É irônico que alguém tenha dedicado tempo a recriar em um post de blog um pedacinho de algo que milhares de pessoas viram. Dá a sensação de uma época em que a informação estava espalhada como ilhas
    • Aquele site parece não ter aguentado o tráfego do HN. Mas o post do blog ainda está no ar
    • NCSA Mosaic era o melhor. Sinto falta especialmente de usá-lo no SunOS

  • A combinação daquele dithering com a paleta quantizada evoca demais aquela época

    • Fazia muito tempo que eu não pensava em cores seguras para a web (web-safe colors)
    • No exemplo de comparação lado a lado lá embaixo, o vermelho com dithering é especialmente interessante

  • Ah, o ícone do Netscape Navigator. Que lembrança calorosa. As cores do site e do navegador da Netscape eram bonitas e confortáveis
    Quando o meteoro se mexia, eu sabia que a conexão com a internet estava funcionando; quando não se mexia, tinha que ligar de novo mais tarde

  • Claro que é uma coisa meio engraçada, mas o IE 3 e 4 sempre “pareciam” mais rápidos que o Netscape por causa da velocidade da animação
    Sempre me perguntei se a Microsoft fez isso mais rápido de propósito para mirar nessa percepção

    • Definitivamente faz diferença. A equipe do Facebook trocou o loader de inicialização do app iOS das listras ||||| no estilo Facebook para o spinner padrão do iOS, porque os usuários achavam que o Facebook estava lento com o loader do Facebook, e que o iPhone estava lento com o spinner do iOS
    • Não é nada engraçado; é mais uma questão de psicologia humana. Já li, tempos atrás, que mesmo sendo mais lento de verdade, algo parece mais rápido quando mostra reação
      Se quiser testar, faça no seu idioma favorito um app com 3 botões. O primeiro espera 9 segundos e mostra “done”; o segundo atualiza uma barra de progresso a cada 1 segundo durante 10 segundos e depois mostra “done”; o terceiro atualiza uma barra de progresso a cada 100 ms durante 10 segundos e depois mostra “done”. Veja qual parece mais rápido
    • Eu gostaria de investigar isso. Seria interessante sincronizar o timing das mudanças na UI conforme a presença ou ausência de um spinner/loader travando ou engasgando, e comparar como a percepção dos usuários muda
      Quando há uma sensação de fluidez, a máquina parece bem programada e organizada, mas uma animação GIF lenta dá a impressão de que algo está errado
    • Você está falando do ícone com nuvens se movendo atrás do logo do Windows? No meu laptop, a velocidade era ridiculamente alta, parecia que as nuvens estavam se movendo em velocidade de dobra. Não lembro se era o IE 3, mas sempre parecia estranho
      Correção: era o IE 2
    • As primeiras versões do IE eram realmente rápidas e cheias de recursos. O tamanho do executável também era bem pequeno

  • Bateu forte na nostalgia. Era uma época muito boa para entrar na World Wide Web

    • Era a época da web pura, sem todo tipo de enfeite
      Aí a Netscape criou o JavaScript, que no começo era Mocha/LiveScript, e no fim chegamos ao que temos hoje
    • Isso também me lembrou um dos meus primeiros projetos de programação. Meu professor tinha feito um jogo de nave espacial para o Netscape, e eu o portei para o modelo de UI do IE
      Na época não havia um DOM padronizado e, pelo que me lembro, forçar incompatibilidades era um dos pilares da estratégia da Microsoft

  • Vou deixar aqui uma pilha de .net e da revista Wired, então é só ouvir o som de handshake do modem

    • Não dá para esquecer também a revista “Yahoo! Internet Life”

  • Será que alguém sabe qual processo foi usado originalmente para criar a animação? Fico curioso se cada frame foi desenhado à mão ou se usaram alguma outra técnica

    • Imagino que tenham desenhado os frames diretamente, mas na época também havia ferramentas para converter ANI em GIF
      Então pode ter sido feito no 3D Studio Max, no Maya da SGI, ou no Lightwave do Amiga, passando por .ANI até chegar a .GIF
      Se for isso, talvez ainda exista um caminho para desenterrar os arquivos originais do projeto e criar um belo render em 8K
    • Acho que deve ter sido um fluxo de trabalho hackeado desse tipo. A animação básica e a renderização da iluminação podem ter sido feitas em algo como Autodesk 3D Studio R3/R4 (DOS) ou Lightwave 3D (Amiga), e fazer tudo manualmente teria sido infernal demais
      Depois disso, provavelmente houve uma mistura de software customizado para otimização de paleta, Mac Photoshop para composição e retoques manuais frame a frame. A ordem não precisa ter sido exatamente essa
      O 3ds Max saiu em 1996, e o Maya em 1998. Mas a Netscape foi fundada por Jim Clark, famoso pela SGI, então é bem provável que o trabalho 3D tenha sido feito em software rodando em máquinas SGI
    • Era uma imagem bitmap com os frames individuais emendados horizontalmente. Durante um tempo, esse era um jeito comum de criar essas coisas para GIFs animados que eram numerosos e populares na web: http://leighb.com/throbgif.htm

  • Era uma época em que parecia que qualquer pessoa podia comprar um livro de 6 polegadas de espessura na Borders Bookstore, sentar para ler, aprender HTML, sair testando na hora e construir uma carreira
    Foi literalmente o que eu fiz, e no começo usei o programa que vinha dentro do Netscape