Cómo diseñar un sitio web o blog estilo retro de los 90

PDF download Descargar el PDF
Coescrito por Anar Kazimov

Referencias

PDF download Descargar el PDF

¿Quieres hacer un sitio web al estilo de los 90 verdaderamente auténtico? En su mayoría, los diseñadores modernos se avergüenzan de las decisiones de diseño web de los 90, pero no puedes negar que los sitios web eran más divertidos en esa época. Aunque no sepas programar un sitio web a mano como lo hacía la mayoría en los 90, de todos modos puedes lograr esa estética web retro mediante constructores de sitios web de arrastrar y soltar, plantillas y temas de blogs. Este artículo de wikiHow mencionará todas las características que debes añadirle a tu sitio web para que sea auténticamente de los 90, además de dónde encontrar las mejores imágenes gratuitas de los 90 (por ejemplo, fondos, botones, plantillas, GIFs animados y más).

Cosas que debes saber

  • A los sitios web al estilo de los 90 se les conoce por sus fondos cargados, colores vivos, y GIFs y botones animados.
  • Ceñirte a la paleta original de 216 colores "segura para la web" asegurará que tu sitio web tenga un aspecto auténtico.
  • Por lo general, necesitarás conocer un poco de HTML para que tu sitio web tenga esa estética retro de los 90.
1

Inspírate.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/15\/Make-a-Website-Like-the-90s-Step-1.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/15\/Make-a-Website-Like-the-90s-Step-1.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ahora que el diseño web retro está volviendo a ponerse de moda, es fácil encontrar archivos de sitios verdaderos de la web 1.0, además de interpretaciones modernas de la estética web de los 90.
    • Web Design Museum: esta galería web orientada hacia las "tendencias olvidadas en el diseño web" está llena de capturas de pantalla de sitios web que se remontan hasta 1991. [1]
    • Neocities: este sitio web de alojamiento gratuito alberga toneladas de sitios web al estilo de los 90 (y algunos modernos) gracias a la similitud del servicio con el megaservidor de sitios web de los 90, Geocities. Encontrarás muchos sitios web retro activos con todas las mejores (¿o peores?) características de los 90, incluyendo mucho texto colorido en la fuente Comic Sans y GIFs animados de baja resolución.
    • The Geocities-izer: hablando de Geocities, esta herramienta divertida mostrará cualquier sitio web con el aspecto que habría tenido si hubiera estado en Geocities en los 90. Pruébalo con wikiHow.com (¡tan solo baja primero el volumen de los altavoces!).
    • Cameron's World: este sitio web combina los rasgos más locos de los sitios web de los 90 en una sola página web.
    • Wayback Machine: si quieres ver antiguos sitios web de los 90 que ya no existen o tan solo ver versiones antiguas de sitios web actuales, te encantará la Wayback Machine de Archive.org.
    Anuncio
2

Encuentra el servidor web adecuado.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c1\/Make-a-Website-Like-the-90s-Step-2.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c1\/Make-a-Website-Like-the-90s-Step-2.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ya sea que quieras pagar por un servidor o probar con uno gratuito , tienes infinitas opciones. Tan solo asegúrate de elegir a un servidor que te permita personalizar el tema o editar HTML directamente, según tu nivel de habilidad.
    • WordPress es la opción moderna preferida para los blogs gratuitos, pero no será fácil hacer que un blog de WordPress parezca de los 90 a menos que utilices un tema de WordPress de inspiración de los 90. En su mayoría, los desarrolladores modernos de sitios web se enfocan en el diseño reactivo, el cual no existía en los 90. Si quieres crear un blog auténtico de apariencia de los 90, necesitarás un servidor personalizable que te permita editar HTML directamente, como Blogger o Tumblr. Ambos tienen muchos temas de inspiración de los 90 con los que experimentar.
    • Si quieres un servidor con el espíritu de los 90 y estás dispuesto a programar (o copiar y pegar) código HTML desde cero, Neocities tiene un nivel gratuito que posee suficientes opciones como para cubrir todas tus necesidades en cuanto a un sitio web de los 90. Y si eres nuevo en el HTML o estás un poco oxidado, puedes diseñar la disposición usando un generador como Layout Builder de Sadgrl y pegar el código en tu propio sitio web.
    • Si tu servidor tiene soporte para Bootstrap , prueba con la plantilla para sitios web Geo para Bootstrap , la cual está llena de fuentes Comic Sans, colores del arcoíris, botones biselados, barras de progreso falsas y más.
3

Utiliza fuentes y efectos de fuentes de los 90.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/c7\/Make-a-Website-Like-the-90s-Step-3.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/c7\/Make-a-Website-Like-the-90s-Step-3.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Opta en cambio por fuentes a la vieja usanza (por ejemplo, Comic Sans) para todo el texto. Si no puedes obligarte a usar Comic Sans de lleno, cíñete a una fuente con serifas (por ejemplo, Times New Roman). Y mientras más colores uses, mejor.
    • Ahora, ese estándar para personalizar las fuentes en la web, muchas de las antiguas etiquetas HTML que le daban estilo a las fuentes en los 90 ya no funcionan (incluyendo la famosa etiqueta <blink> .
    Anuncio
4

Utiliza colores únicamente de la paleta segura para la web.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/66\/Make-a-Website-Like-the-90s-Step-4.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/66\/Make-a-Website-Like-the-90s-Step-4.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Los dispositivos de hoy en día pueden mostrar millones de colores, pero las computadoras más antiguas podían mostrar únicamente 256 colores a la vez. Y debido a que tan solo 216 de ellos se mostraban exactamente igual en computadoras tanto PC como Mac, los desarrolladores web de los 90 dependían de una paleta de apenas 216 colores "seguros para la web" para asegurarse de que sus sitios web se vieran exactamente iguales en todas las plataformas. [2] La paleta segura para la web ya no se necesita, pero ceñirte a los colores de esta paleta para el texto, las imágenes y los elementos de HTML te brindará esa verdadera estética de los 90.
    • Busca en línea "paleta de colores segura para la web" para encontrar los códigos hexadecimales y nombres de los colores o tan solo dale un vistazo a este sitio web .
    • Puedes usar estos códigos hexadecimales de colores para las fuentes , tablas y más.
5

Elige una imagen de fondo cargada en mosaico.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6e\/Make-a-Website-Like-the-90s-Step-5.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6e\/Make-a-Website-Like-the-90s-Step-5.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Cualquier imagen que se repita de manera fluida funcionará como fondo (piensa en los cielos estrellados, las nubes con arcoíris, los ladrillos, el cemento, los fractales coloridos, las vetas de la madera y los estampados animales al estilo de Lisa Frank).
    • Busca en línea "fondo que se repite gratuito" y fíjate qué obtienes. Asimismo, puedes darle un vistazo a Background Tiles o la galería de Pixabay para encontrar fondos que formen mosaicos con fluidez.
    • Dale un vistazo a Textures Town para encontrar texturas de fondo animadas en 3D en formato GIF.
    • Si no quieres excederte con un fondo cargado, de todos modos puedes lograr la estética con un fondo negro de color entero. Tan solo asegúrate de usar mucho texto e imágenes de colores vivos.
    Anuncio
6

Crea imágenes basadas en texto usando efectos retro.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/03\/Make-a-Website-Like-the-90s-Step-6.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/03\/Make-a-Website-Like-the-90s-Step-6.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Los sitios web de los 90 estaban llenos de logotipos ostentosos de texto hechos con fuentes ornamentadas o futuristas. Necesitarás como mínimo una imagen basada en texto para darles la bienvenida a los visitantes a tu sitio web.
    • El generador de imágenes y logotipos de Cool Text te permite crear logotipos de texto gratuitos a partir de una selección de estilos fieles a los 90.
    • Flaming Text tiene más plantillas gratuitas geniales para crear logotipos de los 90, además de algunas modernas.
    • Make Wordart te permite diseñar logotipos de WordArt de Microsoft Word al estilo de los 90 directamente en tu navegador.
7

Llena tu sitio web con botones y GIFs animados.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/29\/Make-a-Website-Like-the-90s-Step-7.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/29\/Make-a-Website-Like-the-90s-Step-7.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Por fortuna, hay muchos sitios web y buscadores de GIFs retro con los que puedes descargar todos esos fondos pixelados ostentosos que no encontrarás en las redes sociales. Guarda los que ames u odies más para tu sitio web.
    • Uno de los mejores lugares para encontrar GIFs auténticos de los 90 es el buscador de GIFs animados de GeoCities de Internet Archive. Podías buscar "botón" para encontrar todo tipo de botones direccionales (por ejemplo, "Siguiente" y "Atrás") o "gato" para encontrar todo tipo de GIFs absurdos relacionados con los gatos.
    • Dale un vistazo a 99GIF Shop para encontrar muchos GIFs gratuitos directamente de la web 1.0.
    • Puedes crear tus propias animaciones de arte con píxeles usando un editor en línea gratuito (por ejemplo, Piskel ).
    • Dale un vistazo a Glitter Graphics para encontrar todo lo relacionado con la brillantina, incluyendo fondos, separadores, íconos, pancartas y botones animados relucientes para tu sitio web.
    • Visita la colección de GIFs 88x31 para encontrar cientos de botones de 88x31 píxeles, el tamaño más común para los botones de los sitios web en los 90.
    • Puedes encontrar una enorme cantidad de insignias gratuitas para todo tipo de herramientas y temas en Web Badges World o hacer tus propios botones parpadeantes en Blinkies Café .
    Anuncio
8

Coloca un contador de visitas en algún lugar de la página.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/de\/Make-a-Website-Like-the-90s-Step-8.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/de\/Make-a-Website-Like-the-90s-Step-8.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    En su mayoría, los sitios web de hoy en día hacen seguimiento a los visitantes en segundo plano, pero los sitios web de los 90 mostraban con osadía contadores de visitas directamente en la página. Por fortuna, aún puedes añadir un contador de visitas de aspecto auténtico a tu sitio web gracias a sitios como Free Website Hit Counter y Free Web Counter . Tan solo selecciona el contador más absurdo de la página, añade tu URL en el campo y haz clic en Generate free hit counter HTML code ("Generar código HTML para un contador de visitas gratuito") para obtener el código que deberás añadir a tu sitio web.
9

Asegúrate de que tu sitio web permanezca "en construcción".

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/06\/Make-a-Website-Like-the-90s-Step-9.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/06\/Make-a-Website-Like-the-90s-Step-9.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Aunque es difícil encontrar estas reliquias hoy en día en la web, un archivista del Archive Team recolectó todas las imágenes de "En construcción" y las añadió a una sola página web . [3] Pueden descargarse gratuitamente, así que llévate algunas.
    Anuncio
10

Utiliza tablas de HTML para la disposición de tu sitio web.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fb\/Make-a-Website-Like-the-90s-Step-10.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fb\/Make-a-Website-Like-the-90s-Step-10.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Por fortuna (¿o por desgracia?), las tablas no se han vuelto obsoletas. Aún puedes usar tablas de HTML para crear disposiciones de sitios web que se vean como de los 90 de una forma realista si te sientes lo suficientemente cómodo con HTML como para ponerte manos a la obra con el código. [4]
    • Las tablas de HTML de los 90 solían tener bordes biselados gruesos, a menudo con demasiado (o muy poco) relleno entre el texto y los objetos en la página y esos bordes.
    • Si prefieres no meterte con las tablas, puedes lograr los mismos efectos si aplicas las propiedades de CSS a las etiquetas Div (sobre todo la propiedad border-style: inset ).
11

Reproduce un archivo de sonido MIDI en el fondo.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b8\/Make-a-Website-Like-the-90s-Step-11.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b8\/Make-a-Website-Like-the-90s-Step-11.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Muchos sitios web en los 90 tenían música. Aún puedes usar la etiqueta <audio> de HTML5 para reproducir música automáticamente después de que un visitante cargue la página. [5] Dale un vistazo a la colección de MIDI de Geocities del Internet Archive para encontrar una selección auténtica de archivos de canciones retro.
    Anuncio
12

Excédete con las animaciones de JavaScript.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/02\/Make-a-Website-Like-the-90s-Step-12.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/02\/Make-a-Website-Like-the-90s-Step-12.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ¿O quizás estrellas fugaces o gotas de lluvia que se mueven rápidamente de un lado a otro del texto? Los diseñadores web usaban un código simple de JavaScript para añadir todo tipo de imágenes y efectos en movimiento a los sitios web (por ejemplo, cambiar el cursor del ratón a corazones, estrellas o caras sonrientes). [6] Con tal que puedas editar directamente el código HTML de tu sitio web, puedes copiar con facilidad código de JavaScript que lleve estos efectos de los 90 a tu página.
    • 90s Cursor Effects tiene 9 efectos simples del cursor, entre ellos arcoíris y copos de nieve.
    • Free JavaScript/DHTML Effects de RV tiene muchos efectos gratuitos para el ratón, el texto y las imágenes que puedes añadir con facilidad a cualquier sitio web.
    • Web Neko incluye cursores animados del gato de la suerte que persigue el ratón a medida que se mueve.
13

Añade una página o sección extensa de enlaces.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ed\/Register-to-Vote-by-Mail-Step-4-Version-3.jpg\/v4-460px-Register-to-Vote-by-Mail-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ed\/Register-to-Vote-by-Mail-Step-4-Version-3.jpg\/v4-728px-Register-to-Vote-by-Mail-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ya sea que quieras añadir los enlaces directamente a tu página principal o crear una página dedicada a tus sitios web favoritos, asegúrate de llenar la sección de enlaces con otros sitios web de inspiración de los 90 (y, por supuesto, wikiHow.com).
    Anuncio
14

Diles a los visitantes que firmen tu libro de visitas.

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/26\/Make-a-Website-Like-the-90s-Step-14.jpg\/v4-460px-Make-a-Website-Like-the-90s-Step-14.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/26\/Make-a-Website-Like-the-90s-Step-14.jpg\/v4-728px-Make-a-Website-Like-the-90s-Step-14.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si bien es posible que los proveedores de libros de visitas de los 90 ya no existan, de todos modos encontrarás libros de visitas fáciles de añadir a los que puedes incluir enlaces prominentemente en tu sitio web de inspiración de los 90, entre ellos 123 Guestbook y Smart GB .

Consejos

  • Si descargas imágenes o botones de un sitio web para usarlos en tus propios diseños, incluye un enlace a ese sitio web en tu página de enlaces.
Anuncio

Advertencias

  • Si bien usar imágenes parpadeantes o intermitentes en tu sitio web se ve genial, podrían tener un efecto negativo sobre los visitantes con trastornos convulsivos. Utiliza estas características con moderación o bien añade una gran advertencia en la parte superior de la página de forma que la gente pueda optar por salir del sitio.
  • Cuando encuentres imágenes, fondos y botones en línea, asegúrate de descargarlos del sitio web y subirlos a tu propio servidor web antes de usarlos en tus diseños. El hot-linking de imágenes (cuando un sitio web utiliza una imagen que se encuentra en el servidor web de otra persona) no está bien visto debido a que consume el ancho de banda del artista o del archivo. [7]
Anuncio

wikiHows relacionados

Cómo
crear una wiki
Cómo
abrir un archivo PHP
Cómo
vender un nombre de dominio
¿Se puede voltear las cámaras en Omegle?
4 trucos sencillos para quitar la difuminación de texto en sitios web: leer texto borroso
Cómo
hacerte famoso en Internet
Cómo
crear texto en negrita en HTML
Cómo
crear una página web
Cómo
crear tu propia página web con Google Sites
Cómo encontrar el editor de un sitio web: 6 métodos infalibles
Cómo
poner un vídeo en una página web
Cómo
crear un servidor web en tu hogar
Anuncio

Referencias

  1. ↑ https://www.webdesignmuseum.org/
  2. ↑ https://www.techopedia.com/definition/24359/browser-safe-palette
  3. ↑ http://textfiles.com/underconstruction/
  4. ↑ https://www.w3.org/WAI/PF/HTML/wiki/Table/layout_TABLE_deprecation
  5. ↑ https://html.com/media/
  6. ↑ https://github.com/tholman/cursor-effects
  7. ↑ https://www.pixsy.com/academy/image-owner/hotlinking/

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 993 visitas.

¿Te ayudó este artículo?

Anuncio