Hoy hemos decidido recordar cómo los webmasters solían sortear las limitaciones del lenguaje de marcado. La historia del desarrollo web está llena de hallazgos creativos; la tecnología no siempre podía seguir el ritmo de la fantasía de los usuarios. En los albores de los noventa, para destacarse de la competencia, los desarrolladores web buscaban soluciones creativas. Hemos recopilado una selección de 7 trucos y enfoques populares que utilizaban los webmasters para superar las limitaciones de HTML.
Antes, las posibilidades para crear los primeros sitios web eran extremadamente limitadas: fuentes estándar, mínimo de gráficos y extensiones de texto. La falta de herramientas se compensaba con el ingenio. Esto permitía resolver problemas que parecían imposibles. Recordemos los más populares de ellos.
№1. Crear un diseño de página en marcado de tablas
Por qué: antes no existían herramientas flexibles para crear diseños complejos y adaptativos.
Antes de la aparición de herramientas como Flexbox y CSS Grid, los webmasters utilizaban tablas HTML (<table>) para crear la estructura de una página web:
<body>
<table>
<!-- Encabezado del sitio -->
<tr>
<td colspan="3" class="header">
Encabezado del sitio
</td>
</tr>
<!-- Estructura principal: menú, contenido, barra lateral -->
<tr>
<!-- Menú lateral -->
<td class="menu">
<strong>Menú:</strong>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Sobre nosotros</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</td>
<!-- Contenido principal -->
<td class="content">
<h2>Contenido principal</h2>
<p>Este es un ejemplo de contenido principal de la página. En la época anterior a CSS Grid y Flexbox, los desarrolladores web utilizaban tablas para crear diseños de sitios web.</p>
<p>Las tablas permitían colocar elementos en la página en forma de celdas, pero esto violaba la estructura semántica de HTML y dificultaba la adaptación a diferentes pantallas.</p>
</td>
<!-- Barra lateral -->
<td class="sidebar">
<strong>Barra lateral:</strong>
<p>Aquí puede colocar información adicional, noticias o publicidad.</p>
</td>
</tr>
<!-- Pie de página del sitio -->
<tr>
<td colspan="3" class="footer">
© 2024 Ejemplo de sitio web con diseño de tablas. Todos los derechos reservados.
</td>
</tr>
</table>
</body>Cómo se veía en el sitio:
La solución estaba lejos de ser ideal: violaba la estructura semántica de HTML, limitaba la flexibilidad del diseño y hacía que los sitios fueran menos accesibles para usuarios con necesidades especiales. Sin embargo, en ese entonces no se pensaba en eso.
Los sitios web se creaban con tamaños fijos. No se adaptaban a diferentes dispositivos y se veían feos en pantallas con resoluciones muy pequeñas o muy grandes. Con el desarrollo de las tecnologías CSS, las tablas cedieron el paso a métodos universales que cambiaron los principios del diseño web.
№2. Hacer sangrías con imágenes
Por qué: para separar bloques de significado, mostrar el contenido en la página de forma más estructurada.
Los webmasters insertaban pequeñas imágenes GIF transparentes para simular sangrías: espacios y separadores invisibles entre elementos. Ajustando el tamaño y la orientación de la “imagen”, se podían separar los elementos con diferentes espacios.
<body>
<p>Texto antes del sangrado</p>
<img src="https://via.placeholder.com/10x1/FFFFFF/FFFFFF" width="10" height="1" alt="Sangrado">
<p>Texto después del sangrado</p>
</body>Cómo se veía en el sitio:
Parece extraño, pero en ese entonces, junto con la estructura tabular, era casi la única forma de regular la ubicación de los elementos en la página. La desventaja de la solución es que no se hablaba de la adaptabilidad del diseño. Ahora, las propiedades CSS margin, padding y gap hacen que tales manipulaciones sean innecesarias.
№3. Agregar texto animado
Por qué: para llamar la atención del usuario hacia un texto determinado en la época anterior a las animaciones CSS complejas.
Los webmasters agregaban la etiqueta <blink>, que hacía que el texto parpadeara continuamente:
<body>
<blink>¡Anuncio importante!</blink>
</body>O una etiqueta para crear una línea de desplazamiento:
<body>
<marquee behavior="scroll" direction="left" scrollamount="5">¡El texto se mueve por la pantalla!</marquee>
</body>Cómo se veía en el sitio:
La animación fue popular al principio, pero rápidamente se percibió como un elemento irritante de baja calidad. La etiqueta <blink> finalmente quedó en el pasado: se eliminó del estándar HTML5 y se desactivó en las versiones modernas de los navegadores Chrome, Firefox y Edge. Pero la línea de desplazamiento aún es compatible con los navegadores debido a la compatibilidad con versiones anteriores.
Ahora, para efectos similares, se utilizan animaciones CSS modernas. Estas también pueden irritar a los usuarios, pero se ven más elegantes.
№4. Crear un diseño de texto único
Por qué: para alejarse de la cantidad limitada de fuentes estándar y crear su propio estilo visual del sitio.
En los albores del desarrollo web, los navegadores mostraban principalmente solo fuentes estándar, como Arial, Times New Roman y Verdana. Estaban preinstaladas en los dispositivos de los usuarios.
Los webmasters utilizaban soluciones alternativas para agregar variedad. Por ejemplo, reemplazaban el texto con imágenes gráficas o usaban sIFR (Scalable Inman Flash Replacement): con Flash, mostraban fuentes vectoriales en lugar de elementos de texto.
<body>
<!-- Reemplazo de texto con imagen -->
<h1><img src="https://via.placeholder.com/300x50?text=Fuente+Personalizada" alt="Encabezado"></h1>
<!-- Uso de sIFR para reemplazar texto con fuentes vectoriales a través de Flash:-->
<script type="text/javascript">
replaceSWF("h1", "customfont.swf");
</script>
</body>La solución causaba muchos problemas. Uno de ellos era el deterioro del SEO debido a la lenta carga de las páginas y la imposibilidad de indexar el texto de las imágenes. El método sIFR solo funcionaba si se instalaba Flash en el ordenador del usuario. El problema lo resolvió la adición de la tecnología @font-face en CSS.
№5. Adaptar el sitio web a diferentes navegadores
Por qué: para que el sitio web se mostrara correctamente en diferentes navegadores.
En la época de las “guerras de los navegadores” en 1997-1999, Internet Explorer y su competidor Netscape Navigator interpretaban CSS de manera diferente. Las diferentes versiones de IE también procesaban HTML y CSS cada una a su manera. Todo esto creaba un caos para los webmasters.
Era necesario utilizar una escritura específica de selectores CSS para diferentes navegadores: por ejemplo, _width entendía Internet Explorer, pero ignoraba Netscape.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Truco CSS para IE</title>
<style>
p {
color: blue;
_color: red; /* Solo para Internet Explorer 6 */
}
</style>
</head>
<body>
<p>Este texto debe ser rojo en IE6 y azul en otros navegadores.</p>
</body>
</html>Más tarde se utilizaron comentarios condicionales que solo funcionaban en una versión específica de Internet Explorer:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Comentarios condicionales para IE</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
}
h1 {
color: blue; /* Estilo estándar para todos los navegadores */
}
</style>
<!-- Comentario condicional para IE6 -->
<!--[if IE 6]>
<style>
h1 {
color: red; /* Estilo para IE6: el encabezado se vuelve rojo */
}
body::before {
content: "¡Está utilizando Internet Explorer 6!";
color: white;
background-color: red;
padding: 10px;
display: block;
text-align: center;
}
</style>
<![endif]-->
</head>
<body>
<h1>Encabezado con estilos condicionales</h1>
<p>Este texto se ve igual en todos los navegadores, pero el encabezado cambiará en IE6.</p>
</body>
</html>La falta de reglas uniformes obligaba a los webmasters a inventar trucos para la visualización correcta de los sitios web. Los estándares modernos y la unificación del renderizado han hecho que tales soluciones sean obsoletas.
№6. Abrir el sitio web más rápido
Por qué: para optimizar la velocidad de carga del sitio web, mejorar la experiencia del usuario y el ranking del sitio web en los motores de búsqueda.
Los webmasters utilizan el atributo loading="lazy" para la carga diferida de imágenes: las imágenes no se cargan al acceder al sitio web, sino solo cuando el usuario llega al lugar necesario de la página.
<body>
<img src="https://via.placeholder.com/600x400?text=Carga+Diferida" loading="lazy" alt="Carga diferida">
</body>Y para la precarga de fuentes y scripts:
<head>
<meta charset="UTF-8">
<title>Precarga de fuentes</title>
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q.ttf" as="font" type="font/woff2" crossorigin="anonymous">
<style>
body {
font-family: 'Roboto', Arial, sans-serif;
}
</style>
</head>Estos métodos aceleraron significativamente el funcionamiento de los sitios web. La carga diferida reducía el tiempo de carga inicial de las páginas con una gran cantidad de contenido, ahorrando tráfico a los usuarios. La precarga permitía al navegador preparar previamente los archivos importantes, mejorando la velocidad de visualización. Si antes estas tareas se resolvían con scripts JavaScript complejos, ahora son funciones estándar de HTML.
№7. Simplificar el autocompletado de formularios
Por qué: para crear sugerencias para rellenar formularios sin scripts adicionales y código pesado.
En lugar de scripts y bibliotecas, los webmasters utilizan la etiqueta <datalist> para crear listas de autocompletado:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Autocompletado de formularios</title>
</head>
<body>
<h1>Introduzca el nombre del navegador</h1>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
<option value="Opera">
</datalist>
</body>
</html>Cómo se veía en el sitio:
Antes de la aparición de <datalist>, los desarrolladores web creaban soluciones JavaScript complejas para el autocompletado. El elemento nativo HTML5 es simple, ligero y no requiere la conexión de bibliotecas adicionales. La etiqueta permite crear sugerencias interactivas basadas en la información introducida directamente en HTML.
Los trucos descritos no son solo curiosidades técnicas, sino una etapa importante del desarrollo de Internet. Después de todo, cada solución no estándar era entonces un paso hacia sitios web convenientes. Por supuesto, ahora podemos reírnos de las soluciones extrañas, pero este enfoque impulsó el avance de la tecnología.
Quiero comentar algo