2 Punkte von GN⁺ 2023-08-04 | 1 Kommentare | Auf WhatsApp teilen
  • Die Suche nach dem Original der „Meteors“-Ladeanimation von Netscape Navigator, die eng mit Kindheitserinnerungen an das Web verbunden war, dauerte mehrere Tage; die maßgebliche Originalgröße betrug 60×60 px
  • Die im Web gefundenen Kandidaten unterschieden sich vom Original; insbesondere die 400×400-px-Version war zu groß, und die Pixel waren rechteckig verzerrt, weshalb sie schwer vertrauenswürdig war
  • Auch ein GitHub-Mirror von Netscape 5.0 und alte Quellarchive auf dem Mozilla-FTP wurden geprüft, doch die Animationsdatei war dort bereits entfernt worden
  • Nachdem auf Mastodon um Hilfe gebeten wurde, markierte ein Freund Jamie Zawinski; auf einer von ihm geschickten Seite konnte das Original gefunden werden, da er an Netscape Navigator mitgearbeitet hatte
  • Im Original blieb links in Frame 10 ein kleines Artefakt zurück; daraus wurden korrigierte Fassungen in 60×60 px und 240×240 px erstellt, angepasst an die umliegenden Pixel

Der Weg zur Originalanimation von Netscape

  • Ziel war es, das Original der „Meteors“-Animation von Netscape Navigator zu finden
    • Für den Autor war diese Animation stark mit Erinnerungen daran verbunden, wie er als Kind das Web entdeckte
    • Die Originalgröße betrug 60×60 px
  • Über Websuchen wurden mehrere Kandidaten gefunden, doch keiner reichte aus, um als Original zu gelten
    • Eine Version war mit 400×400 px zu groß
    • Durch fehlerhafte Skalierung waren die Pixel rechteckig verzerrt
  • Auch die Suche in Quellarchiven führte zunächst zu keinem Ergebnis

Jamie Zawinskis Antwort und die korrigierte Version

  • Nachdem auf Mastodon um Hilfe gebeten worden war, markierte ein Freund @jwz und fragte, ob er die Datei besitze
  • Jamie Zawinski antwortete persönlich, und auf der von ihm geschickten Seite ließ sich die Netscape-Meteors-Ladeanimation finden
    • Jamie Zawinski war in den 1990er-Jahren an mehreren Softwareprojekten beteiligt und arbeitete auch an Netscape Navigator mit
    • Er entwickelte und pflegt Xscreensaver und betreibt heute die DNA Lounge in San Francisco
  • Im gefundenen Original blieb links in Frame 10 ein kleines Artefakt zurück
    • Diese Stelle wurde als rote und orangefarbene Pixel gerendert
    • Der Autor erstellte eine korrigierte Version, in der diese Pixel durch besser zur Umgebung passende Pixel ersetzt wurden
  • Die korrigierte Fassung wurde als 60×60-px-Version und als größere 240×240-px-Version erstellt

1 Kommentare

 
GN⁺ 2023-08-04
Meinungen auf Hacker News
  • Aus dem Netscape Communicator von winworldpc.com ließ sich die Animation mit einem recht einfachen Ablauf extrahieren: 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
    Dabei ist extract_images.py ein Tool aus dem Projekt https://github.com/akx/res-extract. Ich hatte es früher einmal gebaut, weil jemand Excel-95-Icons brauchte
    Allerdings waren das Ergebnis nicht die schicken 60x60 aus dem Artikel, sondern nur 32x32-Frames: https://i.imgur.com/sXcEEDU.png

    • Auf Mobilgeräten ist es fast unmöglich, auf der imgur-Seite das eigentliche Bild zu sehen. Ich will mich nicht beschweren, aber oben ist eine riesige Futurama-Werbung, unten gesponserter Content, und nur etwa 3 % des Bildschirms sind das betreffende Bild – schon etwas absurd. Klar, das Bild ist eben nur 30 px hoch
    • Wenn es darum ging, dass „früher einmal jemand Excel-95-Icons brauchte und ich es dafür gebaut habe“, möchte ich auch reshacker.exe erwähnen: http://www.angusj.com/resourcehacker/
      Als Teenager habe ich damit viel Zeit damit verbracht, Windows-Grafiken zu ändern. Zum Beispiel das Bild des Windows-Ladebildschirms oder des Bildschirms beim Herunterfahren des PCs. Das waren lustige Zeiten
    • Wie man am Namen vielleicht merkt, ist das eine spätere, aufwendigere und farbenreichere Version von Netscape Communicator als die im Artikel behandelte. Üblicherweise „Netscape 4“, mit einer goldeneren und „detaillierteren“ UI
      Der Artikel scheint sich wahrscheinlich mit der Animation aus Netscape Navigator Version 3, also „Netscape 3“, zu befassen
      Navigator: https://duckduckgo.com/?q=netscape+navigator&t=h_&iar=images...
      Communicator: https://duckduckgo.com/?q=netscape+communicator&t=h_&iar=ima...
    • Jetzt frage ich mich, wie viele Versionen der Meteor-Animation es insgesamt gab
      Eine Animation nur mit dem Loop-Teil gibt es hier. Der erste Frame ist ausgelassen: https://i.ibb.co/DMDBR7L/Netscape-Communicator-Meteor-Loop.g...
  • Im Archiv der Dataglyph-Website (Marsh Chamberlain) gibt es weitere Versionen dieser Animation: https://web.archive.org/web/20011214155044/http://dataglyph....
    In einer älteren Version der Website heißt es außerdem, dass auch der ungenutzte Icon-Entwurf mit dem rotierenden Kompass von Dataglyph stammt: https://web.archive.org/web/19981206034010/http://www.datagl...

    • Faszinierend, wie man so etwas findet
  • Alles ist hier. Es gibt nicht nur die Sachen von Netscape 4: http://www.netscape-communications.com/netscapes-throbber-an...

    • Jetzt, wo die Seite wieder online ist: Ich bin mir nicht sicher, ob es wirklich alles ist. Das aus dem Original scheint dort nicht dabei zu sein. Es sieht auch nicht nach Netscape 4 aus; laut [1] scheint das Gesuchte aus dem Original Netscape 1 zu sein, also aus dem, was der Autor als „original Netscape Navigator“ bezeichnet
      Außerdem wirkt das Bild in [1] verändert. Es hat einen weißen Rand, die letzten paar Frames scheinen zu fehlen, und die Palette passt auch nicht ganz. Die Palette im Original dagegen trifft das Gefühl der Zeit exakt und unterstreicht damit die Aussage des Artikels noch stärker
      [1]: https://www.versionmuseum.com/history-of/netscape-browser
    • Es ist ironisch, dass jemand Zeit investiert hat, um in einem Blogbeitrag einen winzigen Teil von etwas nachzubauen, das Tausende Menschen gesehen haben. Es fühlt sich an wie eine Zeit, in der Informationen wie Inseln verstreut sind
    • Die Seite scheint dem HN-Traffic nicht standgehalten zu haben. Der Blogbeitrag ist aber noch erreichbar
    • NCSA Mosaic war großartig. Besonders vermisse ich es unter SunOS
  • Diese Kombination aus Dithering und quantisierter Palette erinnert unglaublich stark an diese Zeit

    • An websichere Farben (web-safe colors) habe ich wirklich lange nicht mehr gedacht
    • In dem Vergleich nebeneinander ganz unten ist besonders das geditherte Rot interessant
  • Ach, das Netscape-Navigator-Icon. Warme Erinnerungen. Die Farbgebung der Netscape-Website und des Browsers war schön und angenehm
    Wenn der Meteor sich bewegte, wusste man, dass eine Internetverbindung bestand; wenn nicht, musste man später noch einmal anrufen

  • Natürlich ist das ein bisschen lächerlich, aber IE 3 und 4 „fühlten“ sich wegen der Animationsgeschwindigkeit immer schneller an als Netscape
    Ich habe mich immer gefragt, ob Microsoft das absichtlich schneller gemacht hat, um genau diese Wahrnehmung zu erzeugen

    • Es macht definitiv einen Unterschied. Das Facebook-Team hat den Start-Loader der iOS-App von den Facebook-typischen Streifen ||||| auf den standardmäßigen iOS-Spinner umgestellt, weil Nutzer beim Facebook-Loader das Gefühl hatten, Facebook sei langsam, und beim iOS-Spinner das iPhone sei langsam
    • Das ist überhaupt nicht lächerlich, sondern eher menschliche Psychologie. Ich habe früher mal einen Artikel gelesen, dass sich etwas schneller anfühlt, wenn man eine Reaktion sieht, selbst wenn es tatsächlich langsamer ist
      Wenn man es selbst ausprobieren will, baut man in der Lieblingssprache eine App mit drei Buttons. Der erste Button wartet 9 Sekunden und zeigt dann „done“ an, der zweite aktualisiert 10 Sekunden lang jede Sekunde einen Fortschrittsbalken und zeigt dann „done“ an, der dritte aktualisiert 10 Sekunden lang alle 100 ms einen Fortschrittsbalken und zeigt dann „done“ an. Dann sieht man, was sich am schnellsten anfühlt
    • Das würde ich gern untersuchen. Es wäre interessant, das Timing von UI-Änderungen danach auszurichten, ob ein ruckelnder oder stotternder Spinner/Loader vorhanden ist, und zu vergleichen, wie sich die Nutzerwahrnehmung verändert
      Wenn etwas flüssig wirkt, fühlt es sich so an, als sei die Maschine gut programmiert und aufgeräumt; eine langsame GIF-Animation dagegen vermittelt den Eindruck, dass etwas nicht stimmt
    • Meinst du das Icon, bei dem hinter dem Windows-Logo Wolken vorbeiziehen? Auf meinem Laptop war es absurd schnell, als würden die Wolken mit Warp-Geschwindigkeit vorbeirasen. Ich weiß nicht mehr, ob es IE 3 war, aber es sah immer seltsam aus
      Edit: Es war IE 2
    • Die frühen Versionen von IE waren wirklich schnell und hatten viele Funktionen. Auch die Größe der ausführbaren Datei war ziemlich klein
  • Trifft die Nostalgie genau. Das war eine wirklich gute Zeit, um zum World Wide Web dazuzustoßen

    • Das war die Zeit eines reinen Webs ohne all den ganzen Zierrat
      Dann entwickelte Netscape JavaScript, anfangs hieß es Mocha/LiveScript, und am Ende sind wir bei dem angekommen, was wir heute haben
    • Das erinnerte mich auch an eines meiner ersten Programmierprojekte. Mein Lehrer hatte ein Raumschiffspiel für Netscape gebaut, und ich habe es auf das UI-Modell von IE portiert
      Damals gab es kein standardisiertes DOM, und meiner Erinnerung nach war das Erzwingen von Inkompatibilität ein Teil von Microsofts Strategie
  • Ich lege hier einen Stapel .net und Wired-Magazine ab, dann kannst du dem Modem-Handshake lauschen

    • „Yahoo! Internet Life“ darf man auch nicht vergessen
  • Weiß jemand, mit welchem Prozess die ursprüngliche Animation erstellt wurde? Ich frage mich, ob jede Frame von Hand gezeichnet wurde oder ob eine andere Technik zum Einsatz kam

    • Ich vermute, die Frames wurden direkt gezeichnet, aber damals gab es auch Tools zum Konvertieren von ANI nach GIF
      Es könnte also in 3D Studio Max, Mayas Vorgänger auf SGI oder Lightwave auf dem Amiga entstanden und dann über .ANI nach .GIF gegangen sein
      Wenn das stimmt, gäbe es vielleicht sogar eine Möglichkeit, die ursprünglichen Projektdateien auszugraben und ein großartiges 8K-Rendering zu erstellen
    • Ich vermute, das war so ein gehackter Workflow. Die Basisanimation und das Licht-Rendering könnten mit etwas wie Autodesk 3D Studio R3/R4 (DOS) oder Lightwave 3D (Amiga) gemacht worden sein; von Hand wäre das viel zu höllisch gewesen
      Danach kamen vermutlich Custom-Software zur Palettenoptimierung, Mac Photoshop fürs Compositing und manuelle Arbeit pro Frame dazu. Die Reihenfolge muss nicht genau so gewesen sein
      3ds Max erschien 1996, Maya 1998. Da Netscape aber von Jim Clark gegründet wurde, der für SGI bekannt ist, ist es sehr wahrscheinlich, dass die 3D-Arbeit mit Software auf SGI-Maschinen lief
    • Es war ein Bitmap-Bild, bei dem die einzelnen Frames horizontal aneinandergereiht waren. Das war eine gängige Methode, um solche Dinge für die damals im Web verbreiteten und beliebten animierten GIFs zu erstellen: http://leighb.com/throbgif.htm
  • Es war eine Zeit, in der sich das Internet so anfühlte, als könne jeder bei Borders Bookstore ein 6 Zoll dickes Buch kaufen, sich hinsetzen, HTML lernen, es sofort ausprobieren und daraus eine Karriere machen
    Genau das habe ich tatsächlich getan, und am Anfang nutzte ich das Programm, das in Netscape enthalten war