Simulador de HyperCard

 (hcsimulator.com)
1 puntos por GN⁺ 2024-06-27 | 1 comentarios | Compartir por WhatsApp
  • HyperCard Simulator es un simulador web que permite importar y ejecutar pilas clásicas de HyperCard en la web moderna
  • Las pilas funcionan como un conjunto ordenado de tarjetas; es posible agregar y eliminar tarjetas, y también compartirlas en línea mediante una cuenta
  • En las tarjetas se pueden colocar botones y campos, y los elementos creados en el fondo pueden aplicarse de forma repetida a varias tarjetas manteniendo texto independiente por tarjeta
  • La edición se realiza directamente sobre la tarjeta, con soporte para pintura simple usando lápiz, bote de pintura y patrones en blanco y negro o transparentes
  • Aunque puede usarse sin scripts, la message box y el Script Editor permiten manejar comandos xTalk y manejadores de mensajes como mouseUp

Pilas de HyperCard ejecutándose en la web

  • HyperCard Simulator permite importar pilas clásicas de HyperCard y ejecutarlas en el navegador
  • Su creador ofrece disculpas a los autores de HyperCard y dice que lo hizo en su tiempo libre para ver cómo funcionaría HyperCard en la web moderna
  • Entre los recursos relacionados se enlazan hypercard.org, Merveilles HyperJam e Internet Archive
  • Como opciones para explorar más pilas, se ofrecen More stacks, A Few More Stacks, The "B–Roll", Collected Stacks, Lots More Stacks y The HyperCard Pantechnicon

Modelo de edición centrado en tarjetas y fondos

  • Una pila de HyperCard se parece a un mazo de tarjetas que se pasan en orden, y el usuario puede agregar o quitar tarjetas de una pila
  • HyperCard guardaba las pilas automáticamente, y en este simulador se puede crear una cuenta y compartirlas en línea
  • Cada tarjeta puede incluir botones y campos
    • Se editan seleccionando la herramienta adecuada y luego arrastrando y ajustando el tamaño
    • Los botones y campos pueden crearse en una tarjeta o en un fondo
    • Las propiedades se pueden abrir con doble clic o manteniendo presionado
  • Las partes de fondo se aplican de forma repetida a varias tarjetas
    • Cada tarjeta puede tener sus propias partes y texto
    • Cada tarjeta tiene un solo fondo, y el fondo es una capa ubicada detrás de un grupo de tarjetas
    • En cada tarjeta que usa el mismo fondo, se puede colocar texto específico de esa tarjeta dentro de los campos del fondo

Pintura y scripting

  • La pintura se realiza directamente sobre la tarjeta
    • Se puede usar el lápiz o el bote de pintura
    • El negro se usa con Shift, el blanco con Option y la transparencia con el patrón Option+Shift
  • El scripting no es obligatorio, pero puede aprenderse revisando los scripts del propio simulador
    • La message box evalúa expresiones y comandos xTalk
    • El Script Editor puede abrirse desde el cuadro de diálogo Information, o accederse con Command-Option-click, manteniendo presionado en pantallas táctiles, o con doble clic mientras se mantiene presionada Shift
    • Los scripts pueden recibir mensajes enviados por el usuario y ejecutar acciones como beep o go next card
    • El manejador de mensajes de ejemplo ejecuta beep dentro de on mouseUp, luego avanza a la siguiente tarjeta y termina con end mouseUp

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-06-27
Opiniones en Hacker News

  • Me da un poco de pena que HyperCard haya sido anterior a mi generación. Si lo hubiera conocido de niño, creo que no habría hecho nada más, y al probarlo en un emulador me pareció bastante divertido.
    Me gustan esos primeros intentos de hacer que la programación fuera más accesible para la gente. Aunque en mucha menor medida, la primera vez que usé la herramienta de animación de Flash me dio una sensación parecida; era mucho más inmediata y accesible que intentar conectar OpenGL o SDL con C++, y crear cosas era simplemente divertido. Desde Flash no he encontrado una herramienta con la que desarrollar haya sido igual de entretenido. GameMaker también es genial y sigue siendo divertido, pero no se siente tan fluido ni con esa sensación de que “todo es posible” como Flash. Tal vez simplemente me estoy haciendo viejo.

    • Todavía creo que HyperCard es el entorno de desarrollo más productivo de la historia para crear apps destinadas a usuarios finales.
    • Y también existía Macromedia Director. Hoy en día es realmente raro enamorarse del software.
    • Si buscas algo digital e interactivo que sea fácil, quizá te guste p5.js. https://p5js.org/
      Flash desapareció más rápido de lo que aparecieron sus reemplazos, y cuando Flash se fue, era muy evidente que si el HTML5 de ese momento era el futuro y el sustituto inmediato, estábamos fritos. Si buscas una herramienta para crear algo la próxima vez, Flutter parece continuar la promesa de Flash de ejecutar una sola base de código en todas partes. Otras tecnologías en las que tengo expectativas son WebAssembly y, en cierta medida, Rust.
    • Échale un vistazo a P5js y Processing; tal vez te ayuden a calmar un poco esa sed.

  • La forma en que el cursor cambia a un ícono de mano al pasar el mouse sobre un enlace está directamente inspirada en HyperCard. En muchos sentidos, el navegador puede verse como una evolución de los stacks de HyperCard.

    • Me pregunto si la web habría surgido igual si HyperCard hubiera tenido redes incorporadas.

  • De niño, HyperCard y SuperPaint fueron mis Lego. Mi padre era científico y necesitaba una Macintosh para correr cálculos, así que yo era uno de los poquísimos niños de aquella época cuya familia tenía una computadora.
    Hice muchísimos aparatitos en HyperCard, y le tengo mucho cariño a esa forma divertida de crear patrones solo con una app para monitor en blanco y negro y colores monocromáticos.

    • Algo parecido. Mis padres eran maestros, y mi padre estaba a cargo del laboratorio de Macs, aunque no era especialmente hábil con las Mac. Aun así, en verano las computadoras estaban sin uso, así que podía llevarse una a casa; al principio usé una Apple IIe y luego una de las primeras Mac. Perdí muchísimo tiempo jugando con HyperCard.
      Mi primera computadora, una Apple II GS, también la pudieron comprar los maestros con un gran descuento gracias al programa “Apple for a Teacher”. Era una especie de precursora de la Mac con monitor a color. En un concurso de escritura creativa de la revista 3-2-1 Contact gané como premio 5 juegos a elección, y pude convencer a mis padres de que necesitaba una computadora para jugar esos juegos durante el resto del tiempo.

  • Nota: si haces clic en el cuadro de maximizar ventana de la esquina superior derecha, se hace zoom out al HyperCard Editor.
    Todavía estoy tratando de descubrir cómo empezar desde un mazo vacío, y está claro que mis habilidades están oxidadas. También me pregunto qué tan factible sería crear con esto un sitio web completo basado en HyperCard.

    • En el menú hamburguesa está “New Stack...”.
      También se puede iniciar sesión.
      https://hcsimulator.com/mmphosis/Stack
    • Solo tienes que crear una tarjeta nueva y luego crear un botón que enlace a la siguiente tarjeta o a donde quieras dentro de un stack lineal de tarjetas. Puedes manejar transiciones, efectos y tiempos en un editor gloriosamente pixelado.

  • Como alguien que era demasiado joven para vivir la época de HyperCard, me da curiosidad cuál era su atractivo principal. ¿Era la accesibilidad de la tecnología, o simplemente era un producto realmente bien ejecutado?

    • Eran ambas cosas. HyperCard puso el poder de la GUI en manos del usuario con una metáfora y una sintaxis simples. El lenguaje era lo bastante parecido al inglés como para sentirse fácil de escribir, pero no tanto como para hacerte creer que podías hacer cosas que en realidad no se podían. Me recuerda a Inform 7.
      Como el código se adjuntaba visualmente a los widgets, quedaba claro que, al hacer clic en un botón o escribir en un campo de texto, ese fragmento de código producía aquella acción. Además, el entorno de HyperCard también implementaba persistencia de objetos, así que era útil porque no tenías que escribir tu propio código de manejo de archivos ni funciones de “guardar estado”. Claro que, por esa semántica, si rompías una pila podía ser difícil encontrar la causa y arreglarla, pero en general creo que la persistencia de objetos transparente era una gran ventaja.
      Y si tenías una Mac, literalmente ya estaba ahí. Apple la vendió brevemente como producto independiente de US$49.95 y luego empezó a incluirla con todas las Mac nuevas durante unos 10 años. Si tu Mac venía con System 6, 7, 8 o 9, tenía HyperCard, y en esa época también venía incluido en la Apple IIGS. Recuerdo haber visto aplicaciones bastante no triviales implementadas en HyperCard, pese a sus limitaciones.
      Más que nada, HyperCard volvió a hacer que la computación personal se sintiera personal de una forma que se había perdido desde la época en que las computadoras arrancaban directo en un intérprete BASIC, y eso fue algo muy bueno. Si esta explicación no alcanza, puedes ver este extracto: http://www.cvxmelody.net/HyperCard%20IIGS%201.1%20-%20The%20...
    • En quinto grado, HyperCard fue para mí algo así como desarrollo de software temprano. Pasaba horas después de la escuela haciendo juegos y aventuras de elige tu propia historia, y podía meter sentencias goto, bucles, animaciones y funciones simples como “al hacer clic, reproducir este sonido e ir a esta página”. Me enganché por completo, y probablemente eso derivó en mi pasión por el desarrollo para BBS.
    • Fue antes de que existieran la web o Flash. Era una herramienta de creación multimedia/interactiva relativamente simple para no programadores, con diseño WYSIWYG. Con HyperCard se podía hacer de todo, desde formas de interactuar con bases de datos hasta historias escolares para niños.
    • Cuando me encontré por primera vez con la idea de tarjetas enlazadas en HyperCard, es decir, el hipertexto, fue como si me volara la cabeza. Para mucha gente también debió de haber sido su primera introducción al hipertexto, aunque no se dieran cuenta. Era el Adobe Flash de su época.
    • Creo que sí.
      Era un lenguaje bien hecho, parecido a Smalltalk, con componentes RAD que, aunque limitados, reducían la creación de GUI a una complejidad similar a usar PowerPoint. Podías dárselo a un niño “listo” y, con muy poca explicación, al menos podía crear ficción interactiva. La gran mayoría de las pilas de HyperCard podían verse como mazos de diapositivas de PowerPoint no lineales: tarjetas con botones que invocaban sentencias goto para saltar a otras tarjetas.

  • Fui niño en los 90 y tengo recuerdos borrosos de varios jueguitos y programas que corrían en la Mac familiar. Creo que nuestra primera Mac probablemente fue una Mac SE. Pensándolo ahora, seguramente eran programas de HyperCard.
    Había una especie de libro ilustrado interactivo sobre un gato negro; olvidé el nombre, pero sé que está en Macintosh Garden, y estoy 99% seguro de que era HyperCard. Mi padre me dio un programa llamado Soroban, que básicamente era un ábaco, y creo que planteaba problemas aritméticos simples que resolvías usando el ábaco para encontrar la respuesta. Tal vez lo escribió mi padre, aunque no estoy seguro. Lamentablemente, ya no recuerdo cómo usar un ábaco. Me da curiosidad cuáles habrán sido aquellos programas de HyperCard poco conocidos con los que me topé en esa época.

  • Vale la pena mencionarlo: Carson Gross creó _hyperscript[0], un lenguaje inspirado en HyperCard que se interpreta en el navegador.
    El mismo Carson Gross también creó htmx[1]. Son proyectos separados, pero encajan bien juntos.
    [0]https://hyperscript.org/
    [1]https://htmx.org/

  • ¡Dios mío, aquí está una pila que hice hace 30 años! Lamentablemente, no funciona bien en el simulador.

    • Me da curiosidad saber qué pila es. Si quieres trastear con ella por nostalgia, hoy todavía hay otras formas de ejecutarla, y el creador de HC Simulator también responde bastante rápido para arreglar las cosas que no funcionan bien.

  • Hay una pregunta que me sigue dando vueltas. ¿Cuál sería la herramienta moderna que hoy hace exactamente lo que hacía HyperCard en aquel entonces? ¿Sería HTML/JavaScript?

    • No creo que HTML/JavaScript sea una “herramienta” en el mismo sentido que HyperCard.
      La verdadera fortaleza de HyperCard era que permitía a usuarios comunes, es decir, personas que no eran programadoras, crear sus propias apps —en la terminología de HyperCard, “pilas”— mediante apuntar y hacer clic, y con HyperTalk, un lenguaje de scripting parecido al inglés.
      Como en general abandonamos la idea de que los usuarios deberían poder crear sus propias apps, no existe un análogo moderno popular de HyperCard. Aun así, hay gente que sigue intentándolo. Por ejemplo, LiveCode es un producto comercial directamente inspirado en HyperCard, y CardStock es un clon open source de HyperCard que usa Python como lenguaje de scripting predeterminado en lugar de un lenguaje parecido al inglés.
      https://livecode.com/
      https://github.com/benjie-git/CardStock
    • Mucha gente se ha hecho esta pregunta. Hay varias herramientas simples para crear GUI, incluidos constructores de GUI para la web, pero ninguna es popular por el punto exquisito de oferta y demanda que HyperCard logró alcanzar.
      Cuando apareció HyperCard, venía incluido en todos los Mac, era gratis y no había nada parecido en Mac. Las alternativas eran colocar widgets de UI en código sin un constructor de GUI o, más tarde, pagar mucho dinero por un IDE profesional como CodeWarrior. Si un usuario principiante sin presupuesto quería un constructor de GUI para Mac, o usaba HyperCard o no usaba nada; eso creó una comunidad de fans de HyperCard.
      Además, en ese entonces las Mac tenían una resolución de pantalla estándar. Todas las Mac que se vendían tenían una resolución de 512x342 píxeles, así que podías saber con certeza cómo se vería una tarjeta en cualquier Mac. Dar soporte a GUI redimensionables es una de las cosas más difíciles en cualquier constructor de GUI, por cuestiones como dónde poner los botones cuando la pantalla se vuelve muy pequeña, como en un teléfono, o muy ancha, como en un monitor 16:9. Hoy Xcode usa un sofisticado solucionador de restricciones/probador de teoremas para permitir que los desarrolladores creen UI redimensionables en una GUI, y diría que funciona bastante bien, pero nunca puede ser tan fácil de aprender como “arrastras un botón a la pantalla y se ve exactamente así en todas partes”.
      La última razón, realmente fatal para las herramientas modernas que aspiran a ser HyperCard, es que en un constructor de GUI web la distancia hasta pasar a HTML/CSS puro es corta. No hace falta pagar mucho dinero para acceder a HTML, CSS y JavaScript de nivel profesional. No es fácil de aprender, pero no hay problema en enseñarle a un niño a escribir páginas web interactivas.
      Por eso, la demanda de constructores de GUI simples es menor que en la época de HyperCard; incluso si retienen usuarios, estos tienden a graduarse pronto del producto, y además hay una enorme cantidad de competidores, así que a cualquier herramienta le cuesta formar una comunidad con tracción real.
    • HyperCard era más limitado, y esas limitaciones obligaban a encontrar soluciones creativas. Al mismo tiempo, su accesibilidad superaba por mucho a HTML/JS. Aun así, la analogía más cercana quizá sea HTML/JS.
      Incluso si lo limitamos solo a HTML, la diversión de crear está muy lejos de la de HyperCard.
    • Un ejemplo es este: https://internet-janitor.itch.io/decker
      Básicamente también se ve algo parecido a HyperCard. Tiene una sensación de baja resolución, pero por dentro también tiene colores.
    • En mi opinión, no existe una herramienta así. No porque hoy no haya herramientas que hagan “algo parecido” a lo que hacía HyperCard, sino porque ya no existe un entorno de computación personal en el que una herramienta así encaje de forma tan natural y esencial.
      HyperCard apareció en una época en la que los usuarios de computadoras personales todavía estaban aprendiendo qué significaba usar una computadora. Ese era precisamente el momento en que la programación para usuarios finales y los sistemas modificables como HyperCard podían liderar. Algo similar podría decirse en cierta medida de OpenDoc, aunque es un poco distinto.
      Desde el punto de vista empresarial, ¿qué era HyperCard exactamente? ¿Una forma de permitir que los usuarios de computadoras simplemente crearan sus propias apps básicas? Entonces, ¿cómo se seguiría ganando dinero? ¿Qué pasaría con la comunidad de desarrolladores de la computadora? Por este tipo de preocupaciones comerciales, hoy tanto la forma en que los usuarios participan en la computación personal como las herramientas con las que manipulamos los entornos de computación están fuertemente definidas por el modelo de consumo, y existe una separación marcada entre usuarios y programadores.
      La razón por la que hoy no hay un verdadero equivalente de HyperCard es que la computación personal tomó otro rumbo.

  • ¿Cómo se compara esto con Decker?
    https://beyondloom.com/decker/index.html

    • HyperCard Simulator es un servicio web centralizado que busca compatibilidad con pilas históricas de HyperCard y con el lenguaje de scripting HyperTalk.
      Decker es una app independiente open source que en algunos aspectos se parece a HyperCard, pero difiere mucho en los detalles, por ejemplo al usar un lenguaje de scripting propio derivado de APL. Decker no fue diseñado para ser compatible con pilas de HyperCard.
    • Todavía no he tenido la oportunidad de sentarme a probar bien este simulador, pero como alguien que ha usado tanto Decker como HyperCard, Decker tiene una curva de aprendizaje mucho más pronunciada para principiantes.