Cosas que solo recuerdan los desarrolladores web de los 90 (2014)
(zachholman.com)- La web personal de los años 90 era una época en la que, por la falta de herramientas estandarizadas de maquetación, se forzaban la disposición y los efectos con técnicas como
,,1x1.gif, - Antes de que el layout con CSS se consolidara,
1x1.gify los - El CSS inicial se enfocaba en pequeños efectos visuales como quitar el subrayado de los enlaces y cambiar el estilo de
a:hover, y como resultado se volvió borrosa la diferencia entre enlaces y texto normal - DHTML estaba ligado a una cultura de copiar y pegar en la que se mezclaban CSS y JavaScript para crear efectos como
alert()al cargar, copos de nieve, menús tipo acordeón y `` personalizados - Las fuentes pixeladas, los botones de 88x31, Internet Explorer 4.0, GeoCities y FrontPage ’98 aparecen como formas en que los sitios personales de la época presumían sus elecciones tecnológicas y su identidad
La época en que y eran animación
- La combinación de poner
dentro dese trataba en la web de los 90, medio en broma, como si fuera una gran animación por computadora - Hay una autosuficiencia exagerada de fondo, como si los desarrolladores web de los 90 tuvieran historias más importantes que las de jQuery o las bases de datos no relacionales de hoy
El layout que empujaba la página con 1x1.gif
1x1.gif,spacer.gifytransparent.gifse refieren todos a un GIF transparente de 1 píxel × 1 píxel- Al asignar valores grandes a los atributos
WIDTHyHEIGHTde una imagen HTML, se podía crear espacio invisible y empujar los elementos de la página a la posición deseada - El código de ejemplo usa
,,,, `` y un CGI de contador web para resolver al mismo tiempo estructura y decoración - Continúa la sátira de que
1x1.gifpermitía colocar elementos en cualquier parte de la página y de que incluso hoy seguiría siendo la única forma de centrar verticalmente
El espaciado manual hecho con
- Si usar etiquetas de imagen era complicado, también existía la opción de repetir
- Aparece un ejemplo donde se insertan varios
PLEASE SIGNyMY GUESTBOOK BELOW:para acomodar el texto del libro de visitas - Luego sigue el chiste de que, si uno hubiera recibido un níquel por cada vez que usó
El CSS inicial empezó quitando el subrayado de los enlaces
- CSS se presenta como una tecnología que apareció al final de la edad dorada del HTML prometiendo separar contenido y estilo
- Lo primero que mucha gente hizo con CSS en aquel entonces fue quitar el subrayado de los enlaces
- Los enlaces empezaron a verse como texto y el texto como enlaces, así que se volvió difícil saber dónde había que hacer clic
- También se menciona el efecto de dejar una estela de fuego detrás del cursor del mouse
- En un ejemplo de archivo
index.shtmldel año 2000, el CSS en línea solo contienea:hover {text-decoration: none; color: #000000}- Es código que elimina el subrayado al pasar el cursor y cambia el color a negro
- También se subraya en tono de broma que se trata de un archivo
index.shtmlque usa SSI
DHTML y la cultura de copiar código
- Después de quitar el subrayado de los enlaces con CSS, seguía el paso de mostrar
alert("Welcome to my website!")al cargar la página con JavaScript - La combinación de CSS y JavaScript se satiriza como una “tecnología del terror” llamada DHTML
- Entre los efectos de DHTML estaban los copos de nieve cayendo sobre la página, mapas de imagen animados tipo acordeón y
personalizados hechos con - Gracias a sitios como Dynamic Drive, se retrata la situación como si, en lugar de resolver un problema por cuenta propia, bastara con copiar y pegar un bloque de 50 líneas de código
- DHTML se compara con el Twitter Bootstrap de aquella época
Fuentes pixeladas y la estética de baja resolución
- En ese entonces las pantallas de computadora eran CRT, así que físicamente eran grandes pero no tenían una resolución alta
- Para aprovechar eficientemente la limitada cantidad de píxeles, había una tendencia a usar tipografías pequeñas, de unas 6 puntos
- Algunos desarrolladores web que vieron esas tipografías simples basadas en píxeles quisieron volverse ilustradores, e incluso intentaron poner ilustraciones pixel art isométricas en la pantalla de inicio
- También se añade el chiste de que tal vez habría sido mejor gastar ese tiempo y dinero en invertir en una IPO puntocom que en instalar Photoshop
Internet Explorer 4.0 y los botones de 88x31
- Se satiriza la idea de que la razón por la que hoy la gente odia Internet Explorer es porque se alejó de la “forma pura” de Internet Explorer 4.0
- Internet Explorer 4.0 se exagera como si hubiera sido un navegador perfecto, con Active Desktop y Channels
- En muchos sitios web de ese entonces había botones de 88x31 píxeles que informaban qué navegador debía usar el visitante y qué herramientas o servicios usaba el sitio
- Los botones se comparan con medallas de uniforme militar, como un dispositivo para mostrar las elecciones y afiliaciones del operador del sitio
- El ejemplo de editor es FrontPage ’98
- El ejemplo de servidor web es GeoCities
- Sobre los webrings, se añade la broma de que todos querían estar en el que pusiera su sitio más arriba, aunque en realidad no existía uno así
Chistes sobre la web actual
- La web actual se describe como un estado en el que se han apilado múltiples abstracciones encima de JavaScript
- Termina con la idea de que resulta sorprendente haber llegado a la web de hoy, junto con el chiste de que JavaScript ni siquiera sabe hacer matemáticas correctamente
- Cierra proponiendo, en tono juguetón, molestar al equipo agregando muchos
1 comentarios
Opiniones de Hacker News
Lo de los mapas de imagen del lado del servidor me pega muy de cerca
Más que programador web, soy un administrador de sistemas que a veces crea herramientas basadas en la web, así que mis habilidades web se quedaron estancadas a principios de los 2000, y también tengo cierta resistencia rara a JavaScript. En una herramienta reciente necesitaba una acción básica para manejar puntos sobre una imagen, algo que se resolvía con 5 líneas de JavaScript, pero en 2023 lo hice con un mapa de imagen del lado del servidor
Al final, en vez de 5 líneas de JavaScript terminé con 50 líneas de Python para administrar el estado y un caso especial en el manejador de solicitudes para procesar una sintaxis rara de fragmentos; me da un poco de pena, pero también me da una satisfacción extraña haber logrado que funcionara
Si encuentras un sitio viejo en Wayback Machine de archive.org y toda la página de inicio es un mapa de imagen del lado del servidor, sin el servidor original no hay forma de saber las URL de destino del resto del sitio, así que quedas en un callejón sin salida
En ese momento estaba casi roto: si el zoom no era 100% o si el padding no era 0, las coordenadas salían mal, y había varios problemas parecidos. Nadie se había dado cuenta porque los mapas de imagen en sí casi no se usaban, y los mapas de imagen del lado del servidor mucho menos
Yo también quería salir del paso fácilmente sin JavaScript y recordé el HTML de los 90, pero después de arreglar el bug de Chromium terminé concluyendo que los mapas de imagen del lado del servidor no eran muy buenos, usé JavaScript, y la versión con JavaScript quedó mejor
HTMX de verdad se siente como una salvación, y si compras Tailwind UI cualquiera puede volverse bastante peligroso en el frontend. Aun así, me interesan otros puntos de vista sobre por qué JavaScript da tanta desconfianza. En lo personal, pesa mucho la falta de consistencia de la sintaxis, y del lado de TypeScript me revuelve el estómago con solo ver la carpeta
node_modulesDurante mucho tiempo me alejé del frontend por esa sensación de no poder controlar lo que está pasando en conjunto
Con unas decenas de líneas de Lisp hice un servidor web que ofrecía un mapa de imagen de la pantalla, y cuando llegaba una solicitud al mapa de imagen insertaba el clic. Era una herramienta pequeña y desechable para ahorrarme el viaje de ida y vuelta a la oficina, pero después llegó COVID y la empezó a usar demasiada gente; no sé si alguien la seguirá usando hoy
“Sigue siendo la única forma de centrar verticalmente un elemento” ya no es cierto, pero el costo de productividad de no haber podido usar simplemente
vertical-align: middle;dentro de undivdurante los últimos 30 años debe haber sido de miles de millones de dólaresTambién recuerdo la moda, por la época de IE4 o IE6, de poner estilo overline en
:hoverde los links. También hacíamosdivy botones con esquinas redondeadas usando tablas, y todavía en los 2000 seguía el sufrimiento de cortar cosas en Photoshop y meterlas en celdas de tablaVALIGN=MIDDLEdentro de las celdas de tablaNo sé si ya se podía en los 90, pero en los 2000 seguro que existía
Pero a menudo mezcla reglas redundantes, como poner 5 o más cuando con 2 o 3 bastarían. Es ridículamente tonto
No sé cuánto tiempo perdimos por esas malditas esquinas
Incluso en Tailwind CSS no es simple: tienes que seguir preguntándote si el elemento es un bloque, si es texto, cuál es el layout del padre, etc.
div { display: table-cell; vertical-align: middle; }No funciona en todos los casos, pero aunque al principio se siente sucio, la separación de responsabilidades se mantiene y no le veo ninguna otra desventaja en particular
En este contexto, DHTML no era Distributed HTML, sino Dynamic HTML, y por eso también es el Dynamic de Dynamic Drive
Viendo que otros también lo citaron mal de la misma forma, también parece posible que el autor lo haya editado hace poco en tono de broma
La conclusión fue que sí era un chiste, pero no uno bueno
Los frames tampoco podían faltar. Eran la “solución” original al problema de tener que modificar la barra de navegación en todas las páginas.
El problema era que los motores de búsqueda podían indexar cada página de frame por separado, así que había que manejar qué pasaba si alguien entraba directamente a una página de frame. Las líneas de corte entre secciones también siempre eran muy evidentes, lo que se veía raro e incómodo.
Si ponías un comentario especial dentro del HTML, Apache lo reemplazaba por el contenido de otro archivo antes de enviarlo al cliente.
frame-buster; y si una página quedaba huérfana sin mis frames, invocábamos un scriptframe-joiner.La teoría está en https://martinfowler.com/articles/micro-frontends.html#Run-t... y la implementación puede verse en https://luigi-project.io.
Si además las tablas HTML hubieran tenido funciones básicas, y a mediados de los 2000 se hubieran ofrecido tablas basadas en fuentes de datos y vistas de lista, se habría ahorrado una cantidad enorme de tiempo y dinero.
Y ni empecemos con cuánto dinero se habría ahorrado si la web hubiera adoptado un estándar de pagos y el propio navegador se hubiera encargado de la entrada de datos de pago.
Chicos, hubo una época en la que no todos usaban el mismo navegador.
En 1996, la página principal de Microsoft tenía una barra de menú que se desplegaba al pasar el mouse, y me propuse averiguar cómo funcionaba.
En aquel entonces IE tenía un botón de “Ver código fuente”, pero le faltaba sentido de plataforma y lo abría como documento de Notepad; como el servidor era Unix y los saltos de línea eran
\n, mientras Windows esperaba\r, el código HTML se veía como un documento larguísimo de una sola línea.Revisé el código de arriba abajo, pero todas las etiquetas HTML eran conocidas y el contenido era solo el texto visible en la página. Lo único desconocido eran las entidades HTML, y como aparecían en todos los sitios con menús animados, estaba convencido de que tenían algo que ver.
Durante seis meses creí que los efectos DHTML se implementaban mediante conjuros mágicos de esas cosas que resultaron ser entidades HTML, y más tarde encontré un tutorial de WebMonkey, lo que terminó llevándome a toda mi carrera.
Las herramientas de minimización y los compiladores son geniales, pero realmente extraño la época de leer el código ordenado y bien mantenido de sitios bien diseñados.
Ojalá hubiéramos avanzado hacia métodos de compresión que preservaran el formato original del código incluso en producción y mantuvieran la expectativa de que otras personas de todo el mundo leerían nuestro código. Esa cultura también tuvo un papel importante en el rápido avance de la web temprana, y sin duda fue una parte grande de mi entrada a la industria.
Compré JavaScript Bible en Barnes & Noble, lo leí durante el fin de semana y desde entonces seguí aprendiendo.
No hay que olvidar que las tablas también se usaban para esquinas redondeadas.
Hacías una tabla de 3×3 y ponías imágenes en las celdas excepto en la del centro para crear elementos de sitio web con esquinas redondeadas, y eso se sentía como la cima de la expresividad humana.
El email HTML también estaba de moda y los clientes de correo se actualizaban mucho más lento que los navegadores, así que si querías que se mostrara bien, esta técnica se siguió usando incluso hasta la década de 2010.
tl.gif,tr.gif,bl.gifpara tablas de 3×3.Como los navegadores de esa época no renderizaban la imagen de fondo de las celdas vacías, también necesitabas el
1x1.gifmencionado en el texto para que se viera el fondo de las celdas laterales. Buenos tiempos.border-radius, la moda de diseño cambió y nadie quiso más esquinas redondeadas.Antes de hacer esquinas redondeadas con tablas, recuerdo haber toqueteado Trillian, una app de mensajería múltiple, como si le estuviera haciendo skins. Manejaba Yahoo Chat, ICQ, etc., y para que el cambio de tamaño de la ventana funcionara bien, ponía imágenes repetidas en las celdas superiores y laterales, igual que al manejar esquinas redondeadas.
El mayor logro del gran y todopoderoso Oz. Bueno, quizá el iPhone fue más grande.
Si hablamos de sitios web de los 90/00, no podía faltar el botón “optimizado para resolución 800×600”.
Si querías verte un poco más sofisticado, también agregabas “Valid HTML 4.01”.
En ese entonces los anuncios no eran los paquetes complejos de JavaScript y anuncios de video de hoy, sino simples banners de tamaño estándar. Recuerdo el impacto de ver cómo Norton Internet Security 2003 reescribía silenciosamente el HTML de las páginas visitadas, eliminando solo los banners de tamaños publicitarios estándar y dejando el resto intacto. También fue una confirmación de hace 20 años de que un bloqueador de anuncios es una solución de seguridad.
Que en todo el texto no aparezca ni una sola vez la palabra webmaster me hace preguntarme si Zach realmente estuvo en los 90.
Nadie va a entender lo “cool” que era ese cargo en esa época. Ahora hasta a mí me da cringe, pero tengo muchísimos buenos recuerdos.
No era broma.
Si quieres vivir la web de los 90 en carne propia, recomiendo The Geocities Gallery https://geocities.restorativland.org/
Hay algo hermoso en esas páginas web personales. Cada página tiene un aspecto muy distintivo y, solo con eso, muestra mucho de la personalidad de quien la creó.
Por lo general tienen una presentación personal, algunas fotos personales al azar, una lista de enlaces recomendados con descripciones breves y textos sueltos sobre hobbies, así que se sienten muy personales y tranquilas. Contrastan claramente con las redes sociales de hoy, donde todas las páginas de perfil se ven igual de planas y aburridas, con contenido que crece sin fin y la presión de mantener una imagen específica de vida.
Pasé un buen rato buscando mi viejo sitio, que no recuerdo en qué directorio bajo Area51 estaba y que quizá ni siquiera fue archivado, y también simplemente reviviendo esa época.
La memoria es rara. Al ver Geocities hasta recordé el olor de la vieja Internet, que probablemente era el olor de la sala familiar donde estaba la computadora.
Los primeros trabajos de grupos de arte BBS como ACID, ICE y FIRE también eran realmente geniales en esa época.
Antes del dominio de IE5/6, lo más sofisticado en general terminó desplazándose a Flash. A principios de los 2000 hice un framework parecido a React basado en E4X; ActionScript/Flash/Flex y Mozilla/Netscape lo soportaban, y también se parecía a la notación de literales XML de VB.Net.
Microsoft y Google no lo adoptaron, y al final JSON se convirtió en el rey.
En los 90, la respuesta a las preguntas sobre layout web casi siempre era tablas
¿El texto estaba desalineado? Tabla. ¿Necesitabas un menú vistoso? Tabla. ¿Estabas creando un sitio completo? Tablas anidadas. ¿Para qué hacía falta CSS si podías hackear el diseño con filas y celdas?
fonten cada celdaSon realmente excelentes para diseños dinámicos, y soportan combinación de columnas/filas, alineación y pesos. CSS sigue siendo mucho más complejo que las viejas tablas.