Los ves por todas partes. Figuras animadas que parpadean, rebotan o giran en la pantalla. Los diseñadores web no se toparon con estos trucos por casualidad. Crearon un conjunto de herramientas para hacer que el contenido destaque sin dañar el navegador. ¿Los principales actores? GIF animados, HTML dinámico, Java, Shockwave y Flash. Cada uno tiene fortalezas. Cada uno tiene defectos. Desglosaremos cómo funcionan. También veremos lo que viene después.
La guerra del ancho de banda
La historia de Internet es corta. Su evolución es rápida. Dos fuerzas se empujan entre sí. Los autores quieren contenido elaborado. Los lectores necesitan cargas rápidas.
Al principio, “rápido” significaba módems telefónicos. Los tamaños de los archivos tenían que ser pequeños. Los gráficos complejos eran un lujo que pocos podían permitirse. Esta contradicción obligó a la innovación. Los desarrolladores tuvieron que ser inteligentes. Necesitaban trucos para entregar medios enriquecidos a través de tuberías estrechas.
Considere una animación Flash de un artículo sobre radiación nuclear. Es una cifra complicada. Pero cabe en menos de 7.000 bytes. Eso es eficiencia. Así es como cada tecnología aborda ese desafío.
GIF animados
Los primeros días de los gráficos y la animación web
La web no sería lo que es sin la combinación de texto e imágenes. Esa integración se basó en gran medida en archivos de mapa de bits, un formato que asigna el color de cada píxel de una imagen. Es un concepto sencillo. ¿El truco? Esos archivos pueden aumentar de tamaño rápidamente. Para mantener la carga de las páginas sin obligar a los usuarios a mirar pantallas en blanco, los desarrolladores recurrieron a técnicas de compresión. Es por eso que los archivos JPEG y GIF dominan el panorama web inicial.
Pero las imágenes estáticas sólo cuentan la mitad de la historia.
Si la animación es sólo una secuencia rápida de imágenes fijas, el siguiente paso lógico era unir esos archivos de mapa de bits. El navegador los recorrerá. Esto creó una animación GIF, también conocida como GIF89. Fue el primer estallido real de movimiento en la web. Se puso de moda rápidamente. Sigue siendo popular hoy en día, para bien o para mal.
Por qué ganaron los GIF (y por qué son limitados)
El atractivo era innegable. La animación GIF fue increíblemente sencilla de crear. La mayoría de los navegadores lo reconocieron de inmediato. No necesitaba complementos complejos ni software propietario. Si estuviera en Windows, es posible que haya utilizado GIF Construction Set. Los usuarios de Mac gravitaron hacia GifBuilder. El flujo de trabajo era lineal.
- Reúna sus marcos de mapa de bits individuales.
- Apílelos en el software.
- Cargue el archivo final.
Eso es todo. Codifica la etiqueta exactamente como lo haría para una imagen estática.
Sin embargo, esta simplicidad viene acompañada de un techo duro. El principal inconveniente es el tamaño del archivo. Dado que cada cuadro es una imagen de mapa de bits completa, agregar más cuadros agrega peso. Puedes salirte con la tuya con cuatro marcos simples. Se transmiten fácilmente. ¿Pero alcanzar veinte fotogramas? El tamaño del archivo a menudo se vuelve inmanejable para las conexiones a Internet promedio de la época.
Y también hay un problema de contenido. Veinte fotogramas no son suficientes para un movimiento fluido. Las películas dependen de al menos 24 imágenes por segundo. Los GIF animados te obligan a realizar grandes saltos entre estados. El resultado es entrecortado. Artificial. Carece de la fluidez del vídeo real. Puede ver esta limitación en casi cualquier animación web inicial. Es funcional. Es llamativo. Pero está lejos de ser cinematográfico.
Los GIF están bien para bucles simples o adornos visuales rápidos. Sin embargo, no son capaces de transmitir narrativas complejas. Peor aún, guardan silencio. Los diseñadores web rápidamente chocaron contra una pared. Los usuarios querían movimiento. Querían sonido. Los GIF no se pudieron entregar.
El principal problema de la animación GIF es la sobrecarga de archivos. Cada fotograma de una “película” añade un peso significativo a la descarga. Es ineficiente. Es lento.
HTML dinámico
¿La solución? Deja de enviar fotogramas. Sólo envía una imagen. Luego dígale a la computadora que lo mueva.
Piense en el cursor del mouse. No descargas una nueva imagen por cada milímetro que recorre el puntero. El navegador maneja ese movimiento localmente. HTML dinámico (dHTML) intenta replicar esta eficiencia en la web.
Las páginas web originales eran estáticas. El lenguaje de marcado de hipertexto (HTML) define la estructura, no el comportamiento. Una vez cargada, la página permaneció allí. Muerto. Aún.
Los diseñadores odiaban esto. Querían contenido dinámico. Contenido que cambió después de cargar la página. Introduzca dHTML.
No es una sola tecnología. Es una combinación de lenguajes de scripting como JavaScript que acceden al modelo de objetos de documento (DOM). El DOM es el mapa interno de la página del navegador. Controla cada elemento.
La mayoría de los navegadores modernos exponen el DOM a scripts. Un script puede capturar un elemento. Cambia su color. Mueve su posición.
DHTML no se creó pensando en la animación. Fue construido para manipular elementos de la página. La animación es un subproducto feliz.
Un script puede indicarle a un navegador que actualice constantemente las coordenadas de una imagen. La imagen se desliza por la pantalla. Haga esto con varias imágenes y tendrá una película tosca.
Funciona en la mayoría de los navegadores sin descargas adicionales. Pero es delicado. El código que funciona en Netscape puede fallar en Internet Explorer. Crear animaciones dHTML manualmente es complicado. Necesitas herramientas. Dreamweaver de Macromedia (y aplicaciones similares) generan el código de secuencia de comandos correcto para usted.
Incluso con herramientas, dHTML es limitado. Mueve imágenes fijas. Es más fluido que un GIF, pero menos efectivo para escenas complejas. Representa el límite de lo que un navegador puede hacer de forma nativa.
Para ir más allá, los desarrolladores necesitaban algo más pesado. Algo externo.
Subprogramas de Java
Introduzca Java.
Java es un lenguaje universal orientado a redes. Permite a los programadores crear aplicaciones descargables. Pero estos no son programas independientes. Son applets.
Los applets se ejecutan dentro del navegador. Requieren una máquina virtual (VM). La VM actúa como traductor. Toma código Java y lo convierte en instrucciones que su sistema operativo específico (Windows, MacOS, Unix) comprenda.
La VM es esencialmente un complemento. Si no lo tienes, la animación falla.
Los subprogramas de Java ofrecen flexibilidad. No estás atrapado con marcos de mapas de bits. Puedes dibujar formas vectoriales sobre la marcha. Esto mantiene el tamaño de los archivos manejables. Permite la interactividad. Un usuario puede hacer clic, arrastrar o desplazarse y la animación responde en tiempo real.
Es poderoso. Es multiplataforma. También es una dependencia. Si el navegador del usuario carece de Java VM, no ve nada.
Para los diseñadores web de finales de los 90 y principios de los 2000, esta era la frontera. Cambió facilidad de uso por capacidad. Los GIF eran fáciles pero tontos. dHTML era nativo pero limitado. Java era complejo pero capaz.
La elección dependía de tu audiencia. ¿Tenían los complementos instalados? ¿Les importaban los tiempos de carga? ¿O simplemente querían que el sitio pareciera impresionante?
El equilibrio entre rendimiento y riqueza definió la web durante años. Todavía estamos resolviendo el saldo hoy.
Los principios de los noventa cambiaron todo. De repente, todo el mundo estaba creando sitios web. Ya no eran sólo fanáticos de la tecnología. Querían poner multimedia en sus páginas. Sonido. Video. Gráficos elegantes.
Los navegadores no podían manejarlo todo desde el primer momento. Entonces los desarrolladores se volvieron creativos. Crearon complementos de navegador.
Piense en un complemento como una aplicación auxiliar. Funciona junto con su navegador para leer tipos de archivos específicos. Estos programas son pequeños. Los descargas rápido. Hacen cosas que los navegadores básicos simplemente no pueden.
Cómo funciona realmente la transmisión de vídeo
Los primeros vídeos web dependían en gran medida de este modelo de complemento. No estabas simplemente viendo un archivo. Estabas interactuando con un jugador especializado.
Los diseñadores utilizaron scripts DHTML para verificar su configuración. ¿Tenías el complemento correcto? Si no, su navegador arrojó un mensaje. Te dijo exactamente dónde descargarlo.
Este proceso fue tedioso. Tomó tiempo. Fue un importante punto de fricción para los usuarios.
¿Pero si tuvieras el complemento? La magia sucedió. El navegador comenzó a reproducir la película antes de que terminara de descargarse el archivo.
¿Cómo? Compresión y streaming.
Compresión simplifica los datos de la imagen. Reduce el tamaño de los archivos. La transmisión comienza la reproducción durante el proceso de descarga. Reproductores como QuickTime y Media Player usaron esto. Mostraron una secuencia de imágenes fijas. Muy parecido a un GIF animado, pero más rápido. Y con sonido.
¿El truco? Las conexiones lentas arruinaron la experiencia. Los archivos tardaron una eternidad en cargarse. O la calidad parecía terrible.
El predominio de la animación vectorial
Cuando se trata de animación web temprana, dos nombres mandan. Destello y onda de choque. Ambos provinieron de Macromedia.
Estos eran visores de animación 2-D basados en vectores.
A diferencia de las imágenes rasterizadas, los vectores utilizan ecuaciones matemáticas. Esto los hizo escalables. Se mantuvieron crujientes en cualquier tamaño. Se cargaron increíblemente rápido a través de conexiones de acceso telefónico.
Esta tecnología impulsó la mayor parte de la web interactiva. ¿La animación boomerang de nuestro artículo anterior? Ese fue Flash. No era solo un archivo de video. Era un código. Era liviano. Estaba en todas partes.
Macromedia construyó un imperio sobre dos formatos que eran esencialmente hermanos: Flash y Shockwave. Uno se convirtió en el estándar para la animación web; el otro se encargaba del trabajo pesado para obtener contenido interactivo más complejo. A diferencia de los torpes archivos RealPlayer o QuickTime que aparecían en ventanas separadas, estos formatos vivían dentro de la página. Eran interactivos. No sólo miraste; hiciste clic. El reproductor Shockwave no se limitó a reproducir una película. Leyó la entrada del usuario y le dijo al navegador cómo responder.
La anatomía de la velocidad
¿Por qué estos archivos se cargaron tan rápido? No fue magia. Fueron matemáticas.
La mayoría de las animaciones GIF están basadas en mapas de bits. Cada píxel se guarda individualmente. Si tienes un cielo azul, son miles de entradas de píxeles individuales. Los archivos Flash y Shockwave están en gran medida basados en vectores. En lugar de almacenar valores de píxeles, el software almacena instrucciones. Una línea recta no es una serie de puntos. Es una descripción: ángulo, coordenada, longitud.
Describir imágenes de esta manera permite que el programa guarde secciones amplias de una imagen (secciones que pueden consistir en cientos de píxeles en un archivo de mapa de bits) como un par de figuras.
Este enfoque reduce drásticamente el tamaño del archivo. Incluso cuando se utilizaban imágenes de mapa de bits, los webmasters podían condensarlas. Se movían por la pantalla a través de rutas, similar a la animación dHTML, manteniendo bajo el peso total de los datos. La mayoría de los archivos Flash, sin embargo, eran puramente vectoriales. Eso los hizo excepcionalmente rápidos de cargar.
Hay otro truco bajo la manga: entre fotogramas.
Los animadores no necesitan dibujar cada cuadro. El software calcula los cambios geométricos entre fotogramas clave. Se llena en el medio. Esto utiliza mucho menos espacio que almacenar cada fotograma como una imagen de mapa de bits única. Las matemáticas hacen el trabajo pesado.
Transmisión: comience antes de terminar
La verdadera innovación no fue sólo la forma en que se estructuraron los archivos. Así era como viajaban por Internet. Los archivos Flash y Shockwave se transmiten.
No espere a que comience la descarga completa. El navegador comienza a reproducir la “película” mientras el resto sigue llegando. Piense en ello como una página web: el servidor envía primero el texto y luego las imágenes. Un sitio Flash puede enviar una película de introducción mientras la mayor parte del contenido se carga en segundo plano.
Los webmasters pueden codificar el archivo para iniciar la reproducción una vez que se haya descargado un porcentaje específico del archivo. La transmisión está programada para que cada segmento llegue antes de que el jugador lo necesite. Es el mismo mecanismo detrás de la transmisión de video.
El monopolio de la conveniencia
Flash no ganó sólo porque era bueno. Ganó porque Macromedia lo hizo omnipresente.
Los complementos venían incluidos con los principales navegadores y sistemas operativos. Si no lo tenías, la instalación se realizó en segundo plano. No era necesario cerrar el navegador. No tuvo que pasar por un proceso largo. El software de autor para crear estos archivos era caro. ¿Pero el jugador? Gratis.
Las actualizaciones fueron sencillas. Macromedia diseñó los reproductores para adaptarse a futuras modificaciones. Los usuarios no necesitaban hacer nada más que descargar un archivo pequeño. Si un sitio detectaba que tenía una versión antigua, su navegador le avisaba y le indicaba la página de descarga. Los archivos eran lo suficientemente pequeños como para que el proceso de actualización fuera casi instantáneo.
El efecto red
Cada formato de animación tiene sus puntos fuertes. Cada formato tiene debilidades.
Sin embargo, muchos webmasters eligieron Flash incluso cuando otro formato podría haber sido técnicamente superior. ¿Por qué? Porque sabían que la mayoría de los usuarios ya tenían la capacidad. Y si no lo hacían, era trivial conseguirlo.
La universalidad de Flash y Shockwave creó un circuito de retroalimentación. Más webmasters incluyeron el contenido. Más usuarios lo encontraron. La aceptación creció. Ya no se trataba sólo de la tecnología. Se trataba del camino de menor resistencia.
Provienen de la misma casa. Macromedia hizo ambas cosas. Cubren un terreno similar. Sin embargo, la brecha entre Flash y Shockwave no es sólo de marca. Es arquitectura. Es historia. Necesita saber la diferencia si le importa cómo se carga su contenido o qué puede crear realmente con él.
¿La causa raíz? Historias de origen.
Director, el motor detrás de Shockwave, es anterior a la web moderna. Fue construido para CD-ROM. Cosas pesadas. Alta fidelidad. A medida que la web evolucionó, Director se actualizó. Aprendió a respirar en línea. ¿Pero Flash? Flash nació para el navegador. Evolucionó de Future Splash Animator. Macromedia lo modificó para líneas telefónicas. El acceso telefónico era el rey en aquel entonces. La velocidad lo era todo.
Esta historia crea una doble personalidad en la tecnología.
Velocidad priorizada del flash. La onda de choque priorizó el poder.
¿Qué formato gana en velocidad y compatibilidad?
Si se pregunta qué formato tiene mejor compatibilidad web, Flash tiene la corona por abrumadora mayoría.
Piense en los complementos. ¿Destello? Instalado en más del 90 por ciento de los usuarios web. ¿Onda de choque? Poco menos del 60 por ciento. Esa es una gran parte de su audiencia que queda en la oscuridad a menos que instalen el reproductor Shockwave.
Los tiempos de carga siguen la misma lógica.
Los archivos Flash son magros. Se cargan rápido. Los archivos Shockwave son más pesados. Tardan más en llegar. En los primeros días de la Web, era común esperar diez segundos para que se cargara un clip. Hoy es inaceptable. Flash entendió eso instintivamente.
Pero la velocidad no lo es todo.
Donde la onda de choque vence al flash
No descartes Shockwave todavía. Es el que levanta más peso.
Es más versátil. ¿Quieres juegos complejos? Onda de choque. ¿Necesitas una interactividad profunda? Onda de choque. ¿Animación elaborada a la que no le importa el tiempo de carga? Onda de choque.
También hay una cuestión de jerarquía. Puede importar un archivo Flash a una película Shockwave. Funciona bien. ¿Intentar lo contrario? No es así. Shockwave es el formato principal aquí en términos de capacidad.
Luego está el costo.
El software de creación de Flash cuesta alrededor de 400 dólares. El director de Shockwave cuesta cerca de 1.000 dólares. Para una startup o un estudio pequeño, esa es una barrera importante. Flash era accesible. El director era para los profesionales.
El secreto a voces: accesibilidad del código fuente
Aquí hay un detalle que la mayoría de los tutoriales omiten.
Flash es un formato de código abierto. Puedes ver cómo funciona. Puedes adaptarlo. Puedes jugar con las agallas. Shockwave utiliza un formato de archivo compilado. Está cerrado. Modificarlo es extremadamente difícil. Si necesita realizar ingeniería inversa o personalizar profundamente, Flash le brinda las claves. Shockwave los mantiene en una caja fuerte.
Cómo hacer películas en ambos entornos
Ambas herramientas están diseñadas para ser sorprendentemente sencillas. Automatizan el trabajo pesado. No necesitas un título en informática para hacer un globo terráqueo en movimiento.
El flujo de trabajo es similar, aunque los nombres sean diferentes. Estás haciendo tres cosas:
- Crear y editar imágenes. Las materias primas.
- Organizar imágenes en cuadros. La secuencia.
- Ordenar fotogramas para formar una película. El producto final.
¿Pero las interfaces? Idiomas totalmente diferentes.
En Flash, los recursos se almacenan en la biblioteca. En Shockwave, entran en el elenco. Mismo trabajo. Etiqueta diferente.
Colocas estos activos en el escenario. Esto es lo que realmente ve el usuario. El resultado final.
Para controlar el movimiento, utiliza fotogramas clave. Tú estableces el punto de partida. Tú estableces el punto final. Le dice al software que complete los espacios en blanco. Flash llama al área de arreglo la línea de tiempo. Shockwave lo llama la partitura.
“Si quieres que un globo gire de un lado a otro de la pantalla, no tienes que animar cada cuadro. Simplemente le dices a Flash dónde comienza y dónde termina el globo”.
Ésta es la magia. El software interpola el movimiento. Maneja las matemáticas. Simplemente proporcionas la intención.
¿Se fusionarán alguna vez?
Se están acercando.
Cada actualización agrega capacidades web a Shockwave. Cada actualización agrega versatilidad a Flash. Las brechas se están reduciendo.
Con el tiempo, probablemente se fusionarán en un formato integral. Se necesitaría lo mejor de ambos mundos. Velocidad y potencia. Accesibilidad y complejidad.
Hasta entonces, tú eliges en función de tus limitaciones.
¿Tiene una conexión de acceso telefónico? Destello.
¿Tiene un presupuesto de $400? Destello.
¿Necesitas ocultar tu código fuente? Onda de choque.
¿Necesitas crear un juego web de nivel AAA? Probablemente Onda de Choque.
No se trata sólo de preferencia. Se trata del medio. Y el medio todavía está evolucionando.
Una película Flash de nuestro artículo sobre pilas de combustible.
Una animación Flash de nuestro artículo sobre el motor.
El cambio a gráficos web interactivos en 3D
La animación web bidimensional siempre ha sido una experiencia dirigida. El diseñador decide exactamente lo que ves, cuadro por cuadro. Refleja los dibujos animados televisivos tradicionales donde el público es pasivo. Los gráficos web tridimensionales cambian esa dinámica por completo. Obtienes el control. Puedes rotar un modelo. Puede activar funciones específicas. En algunos casos, incluso puedes alterar sus dimensiones físicas. Este nivel de interacción transforma el contenido de algo que miras a algo que exploras.
Complementos del navegador y estándares de la industria
Al igual que las herramientas 2D anteriores, como Flash y Shockwave, la visualización de gráficos web en 3D requiere un complemento del navegador. Varias empresas ya han entrado en este espacio. Viewpoint ha tenido cierto éxito. NxView ofrece un complemento directamente desde su sitio web.
La industria también está experimentando una importante consolidación. En julio, Macromedia e Intel anunciaron un desarrollo conjunto de capacidades 3-D para Shockwave. Esta asociación aprovecha los recursos de hardware de Intel y la infraestructura de reproductores multimedia establecida de Macromedia. El objetivo es claro: hacer del formato Shockwave 3-D el estándar de facto para gráficos web. Los usuarios no necesitarán software nuevo. Simplemente descargarán una actualización de sus reproductores Shockwave existentes.
Escalado adaptable y gestión de polígonos
El rendimiento es el mayor obstáculo para el 3-D en la web. La tecnología Shockwave aborda esto mediante escalado. Se adapta a la velocidad de conexión del usuario en tiempo real. Si tienes una conexión más lenta, el reproductor descarga un modelo con menos polígonos. Los polígonos son formas geométricas que se combinan para formar un modelo 3D.
Esto no es sólo un compromiso; es una característica. Se pierde algún pequeño detalle. No pierdes claridad de imagen. El movimiento sigue siendo fluido. Esto garantiza que los usuarios con conexiones de acceso telefónico o de banda ancha temprana no queden excluidos de la experiencia.
Comercio electrónico y pruebas virtuales
Esta tecnología abre nuevas posibilidades para las compras online. Actualmente, los compradores dependen de imágenes estáticas. Adivinan el ajuste y la textura. Los gráficos tridimensionales les permiten examinar un producto desde todos los ángulos. Imita la experiencia en la tienda.
Algunos sitios están llevando esto más allá con “vestidores virtuales”. Los usuarios pueden crear un modelo 3D de su propia forma corporal. Luego pueden ver cómo las diferentes prendas le quedan a ese avatar específico. Esto reduce la incertidumbre en las compras online.
Aplicaciones educativas e inmersiones más profundas
Las plataformas educativas se benefician significativamente de este cambio. Sitios como How Stuff Works ya han publicado artículos utilizando gráficos 3D generados por NxView. El plan es desarrollar más contenidos.
Estos gráficos proporcionan claridad. Los usuarios pueden mirar un motor desde cualquier ángulo. Se siente como si un motor real estuviera sentado frente a ellos. Esta comprensión espacial ayuda a la retención y la comprensión.
El futuro de la interacción web
Esta tecnología probablemente revolucionará la apariencia de Internet. Sigue la misma trayectoria que las imágenes fijas y la animación Flash. Internet seguirá evolucionando a un ritmo vertiginoso.
Las conexiones de gran ancho de banda son cada vez más comunes. Esto impulsa la próxima ola de ideas de animación. Un concepto es hacer que la web se parezca menos a un libro y más a un videojuego. Los usuarios accederían a la información en un mundo interactivo en 3-D. Otra idea es hacerlo más parecido a la televisión. Dominarían la animación y el vídeo de alta calidad.
En última instancia, esto depende de lo que los diseñadores web elijan crear. También depende de lo que demanden los usuarios. Internet no es estático. Se está moviendo hacia algo más inmersivo. El siguiente paso es comprender exactamente cómo funcionan estos motores bajo el capó.
