Pero todo cambió cuando CSS3 apareció

Pero todo cambió cuando CSS3 apareció

#History Historia reciente del Diseño Web

Entre los años 2009 y 2010 hice un sitio web como proyecto de tarea, aún sigue en línea en un hosting gratuito vladimetal.freevar.com. El menú principal de navegación estaba hecho en Flash por eso ya no se puede visualizar.

image.png

Tecnologías y técnicas del Pasado

Flash macromedia

Flash fue una tecnología muy utilizada en el diseño web en la década de los 2000, era un boom! en el diseño web, flash era sinónimo de animaciones, brillo, lucides y elegancia para un sitio web, algunos combinaban elementos HTML con animaciones incrustadas o en otros casos habían sitios diseñados al 100% usando un archivo de animación .swf de Flash, usando el lenguaje de programación Action Script se podían programar funciones. Aunque Flash se anunció como obsoleto desde hace varios años, aún recientemente se podían visualizar elementos diseñados con Flash, fue hasta diciembre de 2020 que Google Chrome, uno de los navegadores más importantes quitó totalmente el soporte.

El problema de Flash era el tamaño de los archivos, eran un poco pesados y tardaban en cargar y ya que eran elementos SWF (estaban como empaquetados) no estaban abiertos para ser indexados por los buscadores, como sucede con HTML, era considerados elementos inseguros, era más factible realizar ataques a través de una tecnología como Flash, además en 2007 el anuncio de Steve Jobs de no dar soporte a Flash en los dispositivos iPhone marcó más su declive.

Uso de Frames o marcos

Una forma novedosa para organizar o distribuir el contenido de un sitio web fue el uso de Frames o marcos, consistía en dividir el documento principal en marcos con una longitud en filas y columnas (como una tabla) y cargar en cada espacio un documento diferente, por ejemplo un header.html en la sección del encabezado, un archivo menu.html que contendría el menu principal, entre otros.

¿Por qué ya no se consideró una buena práctica? a parte de realizar la carga de 4 o 5 archivos en la primer petición una de las desventajas más estéticas fue que a partir del surgimiento de los motores de búsqueda como Google o Bing, ya todos comenzaban a encontrar los sitios web a partir de palabras claves mediante los metadatos, imagínate encontrar y hacer clic en un enlace de Google que te muestre solo el archivo header.html o el archivo menu.html de forma independiente, eso podía pasar con ese tipo de estructura. Además con el surgimiento posterior de tecnologías Responsive Design de todas formas hubiera desaparecido.

Aún hoy en día, se puede encontrar documentación incluso videos de cómo se usaban los frames, cuando estaban cambiando esa práctica era común que los diseñadores colocaran un botón con la leyenda: No Frames

Ejemplo del uso de Frames

<html>
<head>
<title>Un documento simple con marcos</title>
</head>
<!--indica tres filas (rows), el encabezado con un 20%, la fila para el menu con un 5% y el resto para el contenido-->
<frameset rows="20%,5%,*">
 <!--en la primera fila que es la del encabezado se hacen dos columnas (cols), una con el 20% y la otra con el 80% de ancho-->
 <frameset cols="20%, 80%">
   <frame src="img/logo.png">
   <frame src="header.html">
 </frameset>
 <frame src="menu.html">
 <!--Importante colocar un nombre para que en este Frame se muestren los archivos vinculados en los enlaces del menu a través de target="mainFrame"-->
 <frame name="mainFrame" src="main.html">
</frameset>
</html>


Resultado

image (1).png

Ancho angosto y fijo

El ancho del contenido era mas angosto debido a que debian adaptarse a la resolución de 800px o 1000px de los monitores CRT o monitores de Tubo de Rayos Catódicos de esa época, en ese entonces no existía el concepto de Responsive Design, es decir hacer flexible el espacio o contenido, todos los elementos tenían un ancho fijo o a veces en porcentajes pero no para crear un diseño adaptable a diferentes pantallas.

image (2).png

Uso de imágenes GIF

Se utilizaban imágenes GIF a pesar del precario ancho de banda, estuvieron de moda, pero aunque perdieron relevancia, en los ultimos años se han vuelto populares nuevamente gracias a las Redes Sociales y bancos como Giphy o Tenor, aunque las imágenes gif de aquellos años eran diferentes, con baja resolución y con menos cuadros o frames con el fin de hacerlas más livianas.

Lo "trending" o una técnica común era colocar un fondo GIF a tu primera página web, hasta yo lo hice XD.

Otras costumbres en esos tiempos

Los diseñadores colocaban elementos como:

  • Sitio bajo construcción vladi.codes CSS3
    (Hoy es más común publicar algo hasta que se encuentra finalizado).
  • Botones No frame (diciendo que estaban dejando esa práctica poco recomendada)
  • Botón añadir a favoritos

CSS3 y una revolución en el diseño web

CSS3 trajo grandes cambios, nuevas propiedades para lograr la animación y diseños que no eran posibles, lograr un contenido flexible o adaptable a diferentes pantallas, entre otros.

Antes de box-shadow y border-radius

Es algo tan sencillo ahora crear un rectángulo con bordes redondeados y una sombra pero antes de CSS3 para lograr eso solo lo podías lograr usando imágenes lo cual implicaba más espacio y más peticiones al servidor.

image (3).png

Con CSS3 nació el concepto de Responsive Design gracias al uso de @media-query que permite obtener el ancho del dispositivo en el que se muestra el sitio web y poder definir los cambios.

El siguiente ejemplo indica que los elementos de una lista se mostrarán en linea horizontal si la pantalla tiene mas de 800px y si tiene menos como en el caso de un dispositivo móvil que se muestre en columna, así igual se pueden establecer muchas propiedades diferentes para un mismo elemento basándose en el ancho del dispositivo, cambiar el tamaño de fuente, ocultar elementos, entre otros.

@media (min-width: 800px) and (max-width: 1200px) { ul li { display: inline; } } @media (max-width: 800px) { ul li { display: block; } }

Animaciones

Con CSS3 también puedes realizar muchas animaciones, parecidas a las que se conseguían con Flash pero de una manera mas optimizada... Por ejemplo puedes dar efectos a botones.

Buy me a Coffee button with animate CSS effects


En la actualidad

A día de hoy existen nuevas tecnologías y tendencias que han hecho del diseño web una tarea más simple y más estandarizada, me refiero a que se pueden lograr mejores resultados con un mejor rendimiento gracias a HTML5 y CSS3 y a sus diferentes frameworks como Bootstrap o Tailwind CSS

image (4).png