© 1996, etsimo WWW team

Haga click aquí para acceder a los servidores espejo.


GIF Animation on the WWW

[overview] [Gallery]" [Software [Animation [HTML [Critter [Smaller GIFs]


NOTA A LOS LECTORES: Esta página es una información muy técnica del formato GIF89a y de como permite la animación. Si estás buscando un tutorial sobre como hacer GIFs animados "pincha" el icono del ANIMATION TUTORIAL (en la parte superior de la página) para obtener información. Esta sección de la parte inferior incluye un informe detallado byte-a-byte del bloque de loop de la Aplicación Netscape. Estas páginas son para la gente que desean entender las ventajas técnicas de los formatos y como trabajan internamente. Incluyo links a las especificaciones originales Compuserve para los formatos GIF87a y GIF89a.

Todo sobre GIF89a


Entender GIF89a

Lo primero, una pequeña farsa que tiene desconcertada a mucha gente. El formato de la imagen GIF usa un algoritmo de compresión LZW incorporado. Este algoritmo de compresión es tecnología patentada actualmente poseída por Unisys Corporation. A partir de 1995, Unisys decidió que los vendedores comerciales, cuyos productos usan el compresor GIF LZW, deben tener licencia para su uso desde UNISYS. Usuarios finales, servicios online, y organizaciones sin fines de lucro no pagan este royalty. Desde su inicio GIF ha sido un formato libre sin derechos de patente. Solamente desde 1995, Unisys decide cobrar derechos de autor. Para evitar pagar esto, los vendedores han desarrollado una alternativa al GIF que soporta transparencia y entrelazado llamada PNG ("ping"), Portable Network Graphic. PNG, sin embargo, no soporta a mi entender, un flujo de datos de múltiples imágenes.

Ahora, voy a aclarar algo de lo que he dicho. Yo todavía tengo que encontrar las especificaciones para el GIF87a para estar seguro de todo, así es como yo lo entiendo. GIF87a fue creado...¿adivinas cuando? 1987. GIF87 permite las siguientes características:

Esto significa que hace nueve años, era posible hacer animaciones simples con GIF codificando múltiples imágenes, a lo que nos referiremos como "fotogramas", en un único fichero. GIF89a es una extensión de la especificación 87a. GIF89 añadió:

Netscape Navigator es el único browser que da soporte completo a las especificaciones de GIF89a. Las lineas de texto y entrada de usuario no son soportadas actualmente por el NNavigator 2.0, la eliminación de la imagen no soporta la eliminación de la imagen previa. La mayoría de los browsers soportan imágenes GIF87a y reconocerán el indicador de transparencia del GIF89a y nada más. Recibí numerosas correcciones afirmando que todos los GIFs transparentes tienen formato GIF89a. Me doy cuenta de esto. Bastante gente lo pensó, llamando a esta animación GIF89a cuando GIF87a podría soportar algunas de estas animaciones. Supongo que técnicamente el nombre apropiado sería: "mayoría de especificaciones de GIF89a para animaciones que se aprovechan de algunas o todas las características de las especificaciones de GIF89a presentes en el Netscape Navigator y en el mejor de los casos otros browsers, aunque algunos de estos soportan técnicamente una animación GIF87a con soporte selectivo de transparencias de GIF89a pero no soportan otras cosas de este formato". Continuaré llamándolo animación GIF89a.

GIF89 es todavía un formato de 256 colores (máximo). GIF permite un número de colores entre 2 y 256. Los mínimos colores, los mínimos datos y los más pequeños ficheros gráficos. Si tu GIF solamente usa 4 colores, puedes reducir la paleta a sólo 2 bits (4 colores) y reducir el tamaño del fichero por encima del 75%.

El siguiente software te permite establecer los bits-por-pixel para GIFs: Adobe Photoshop (Mac/Win), Boxtop's PhotoGIF PlugIn (Mac), y PhotoGIF (Mac), Picture Publisher (Win), Paint Shop Pro 3.0 (Win), LVewPro, WebImage de Group42, Graphic Convertor (Mac), Fractal Painter, Painter 2.0, PhotoStudio de ArcSoft, ImageMagick, ClarisPaintShop, PaintIt, ColorIt y ToolWorks 2.2 (SGI Indy). DeBabelizer 1.6.5 lo hace, pero solamente para imágenes GIF87a. Si software no numerado arriba puede establecer los bits-por-color, házmelo saber por favor.

La estructura de un fichero GIF89a

Esto es un poco técnico, pero daré a los usuarios una explicación de como funciona el GIF, y lo que necesitas saber para trabajar con él. Los GIFs están compuestos de Bloques y Extensiones. Los bloques pueden clasificarse en tres grupos:

Los Bloques de Control, como la Cabecera, el Descriptor de Pantalla Lógica, la Extensión de Control de Gráfico y el Trailer, controlan como se manejan los datos gráficos. Los Bloques de Procesamiento de Gráficos como el Descriptor de imagen y la Extensión Sencilla de Texto contienen datos usados para interpretar un gráfico. Los Bloques de Propósito Especial como la Extensión de Comentario y la Extension de Aplicación no son usados por los decodificadores de GIF. El Descriptor de Pantalla Lógica y la Tabla de Color Global afectan a todas las imágenes de un único fichero. Cada Bloque de Control sólo afectará al único Bloque de imagen que inmediatamente lo sigue.

Aquí están los componentes de un GIF:

Estructura de un fichero GIF89a

los BLOQUES DE COMENTARIO pueden aparecer en cualquier lugar como ser ignorados (no colocarlos antes de la Extensión de Looping de Netscape!!)

DEFINICIONES DE LOS BLOQUES:

CABECERA

El bloque de CABECERA es un pequeño bloque de 6 bytes (6 caracteres). Es el primer bloque en cada fichero y contiene la versión GIF del fichero (esto es GIF87a o GIF89a). Los descodificadores de imagen GIF usan esta información para determinar la versión del fichero.

DESCRIPTOR DE PANTALLA LÓGICA

El DESCRIPTOR DE PANTALLA LÓGICA es el segundo bloque en un fichero. Define un área de pixels que puedes ver como una pantalla (como una proyección de la pantalla). Las dimensiones de esta área definen el tamaño de tu GIF sobre la pantalla. Esta información determina cuanto espacio se reserva en la superficie de la pantalla en tu browser para mostrar la imagen. Si tu pantalla lógica es más grande que la imagen, tendrás espacio alrededor de la imagen cuando se muestre.

El área de pantalla lógica deberá ser lo bastante grande para mostrar todos los fotogramas individuales en ella. Si una imagen en el fichero GIF es más grande que la pantalla lógica o, por su posición, se extiende más allá de la pantalla, la porción que queda fuera de la pantalla no se mostrará. Piensalo como una película que es demasiado grande y no se adaptaría sobre una pantalla de proyector. Más pretenciosamente, Netscape Beta4 (posiblemente más) producirá un GPF (fallo de protección general) en Windows 3.x en una imagen más grande que la Cabecera de Pantalla Lógica. No asumen que todas las imágenes son del mismo tamaño. Lee sus tamaños y establece la pantalla lógica a la más grande anchura y altura incluida en el fichero.

El Bloque de Pantalla Lógica también escoge uno de los colores en la Tabla de Color Global que será el color de fondo de la pantalla. Esta selección de color es ignorada por el Netscape Navigator. Si a través del GIF se ve el fondo, el Navigator muestra el color puesto en el BGCOLOR del cuerpo de la página o, si no es especificado, el color de fondo puesto en los menús OPTIONS/GENERAL PREFERENCES/ COLORS. Ahora, por supuesto, viene la pregunta: ¿Cómo consigo hacerlo transparente? Bien, esto no debería funcionar, pero lo hace. Aparentemente, si el decodificador de Netscape encuentra un bloque de Control (debe ser el primero, antes de cualquier imagen) con transparencia activada (cualquier color) el fondo del GIF será transparente. Esto permitirá al fondo de los GIFs rellenar el fondo de la pantalla lógica.

Un fichero GIF contiene una paleta global de colores comunes para todas las imágenes en su fichero desde el que trabaja (NOTA: es técnicamente posible para un GIF no tener una paleta global, pero esto sería extremadamente raro). Esta paleta puede tener 2, 4, 8, 16, 32, 64, 128, o 256 colores definidos. Las paletas son muy importantes. Cada color mostrado en el GIF debe venir de una paleta. Si utilizas pocos colores, será más fácil mostrarlos para el sistema. La paleta global se aplica a todas las imágenes en un fichero GIF. Si una imagen individual difiere mucho de esta paleta global, puede haber una paleta local que afecte solamente a su color. Sin embargo, ninguna imagen puede tener como referencia más de una paleta, así el máximo es 256 colores por imagen. Tener un grupo de paletas locales con colores variados puede ocasionar a veces cambios de color en tu display (también probablemente indica una mezcla llamativa de colores).

La Cabecera de Pantalla Lógica puede contener también la relación de aspecto de la imagen. Esto puede hacer a veces que los GIFs aparezcan alargados o comprimidos. Dejaré esto a otros que lo han usado.

Extensiones de Aplicación

Normalmente una discusión sobre las Extensiones de Aplicación se dejaría para el final. Sin embargo, esto es un punto importante, y es apropiado hablar de este punto. Las Aplicaciones de Extensión permiten que los bloques de datos sean insertados en el GIF para actuar sobre programas específicos. Puede estar para cualquier propósito. Por esta razón, solamente programas especiales harán algo con ellos. En Enero del 95 la versión del GIF Construction Set 1.0G para Windows insertará el Netscape-specific loop-block dentro del GIF. Con estos bloques, los programas especificarán efectos especiales o instrucciones sobre como manejar los datos de la imagen. Obviamente, sólo los programas que definen estos bloques de aplicación los entenderán.

OK...AQUÍ ESTÁ...EL LOOPING!

Netscape Navigator tiene un Bloque de Extensión de Aplicación que dice al Navigator que haga un looping con todo el fichero GIF. El bloque de Netscape DEBE APARECER INMEDIATAMENTE Y DESPUÉS DE LA TABLA DE COLOR GLOBAL Y DEL DESCRIPTOR DE PANTALLA LÓGICA. Sólo el Navigator 2.0 Beta4 o superior reconocerá este bloque de Extensión. El bloque tiene 19 bytes y está compuesto de: (nota: equivalente hexadecimal suministrado para programadores).

byte 1        : 33 (hex 0x21) código de Extensión del GIF
byte 2        : 255 (hex 0xFF) Etiqueta de Extensión de Aplicación
byte 3        : 11 (hex 0x0B) Longitud del Bloque de Aplicación
                (siguen once bytes de datos)
bytes 4 a 11  : "NETSCAPE"
bytes 12 a 14 : "2.0"
byte 15       : 3 (hex 0x03) Longitud del Sub-Bloque de Datos
                (siguen tres bytes de datos)
byte 16       : 1 (hex 0x01)
bytes 17 a 18 : 0 a 65535, un unsigned integer en formato lo-hi.
                Esto indica el número de iteraciones que
                el loop debería ser ejecutado.
bytes 19      : 0 (hex 0x00) un Terminador de Sub-Bloque de Datos.
A partir del Beta5, la cuenta de iteración se ignora y el loop es infinito (una cuenta de iteración de cero indica infinito). Te aconsejo sinceramente que codifiques el contador para ser exacto, para que cuando las iteraciones comiencen a trabajar tu GIF no necesite ser modificado. Técnicamente esto es todo lo que necesita hacerse con este bloque. Más cosas sobre el looping más adelante en el tutorial.

BLOQUES DE CONTROL

Un Bloque de Control controla ciertos aspectos opcionales de como se muestra la imagen. Un Bloque de Control solamene afecta a la imagen que inmediatamente lo sigue. Por esta razon, no deberías incluir nunca ningún bloque entre un bloque de control y el siguiente bloque de descriptor de imagen. Esta Extensión de Control Gráfico define:

Deberías evitar usar una paleta local como incrementar la probabilidad de una exhibición confusa de video. Si no existe una paleta local, se utiliza la global. Uno de estos colores se designa como transparente en el bloque de control.

La entrada de usuario y la sincronización trabajan juntos. Cuando se describe una imagen, es reproducida inmediatamente en la pantalla. Entonces, si se establece un tiempo de espera, esperará x/100 centésimas de segundo antes de desaparecer y proceder sobre la imagen siguiente. Si se especifica una entrada de usuario, la imagen espera hasta que el usuario pulse una llave, haga click con el ratón, etc. Lo que se considera entrada de usuario está determinado por el programa que muestra el GIF. Si son elegidas ambas opciones, la imagen permanece hasta que la espera termina o hay una entrada de usuario, cualquiera de las dos cosas que ocurra primero.

Justo antes de proceder con la siguiente imagen, son realizadas las opciones de eliminación. Puedes borrar la imagen por:

BLOQUE DE IMAGEN

Un BLOQUE DE IMAGEN contiene (tachán!) una imagen real. Esta puede tener cualquier tamaño y tener una paleta de cualquier tamaño. Puedes tener una mezcla de imágenes de 16, 2, 256 colores, etc en un único GIF. Además de la tabla de datos de la imagen real, tienes lo siguiente:

El tamaño de la imagen en pixels no puede ser modificado. Está determinado por los datos de la imagen. Cambiar esto causará la corrupción de datos.

La posición superior e izquierda de las imágenes está dentro de la pantalla lógica definida. Con esto un pequeño mapa de bits de un objeto será colocado en algún lugar dentro del área de pantalla, antes que crear una imagen completa con el objeto posicionado dentro de él. Más sobre esto en el tutorial.

El entrelazado es una manera de salvar y mostrar los datos de la imagen. Para conseguir el entrelazado, la imagen debe estar construida para salvar el entrelazado. El entrelazado no es transformado por el browser. Puede ser ignorado por el browser. El entrelazado ahorra filas alternas, produciendo un efecto de persiana veneciana o de blocky-focusing, dependiendo de como maneje el entrelazado. El entrelazado almacena las filas de la imagen en el orden siguiente:

      Paso 1: cada 8 centésimas fila, empezando con la fila 0.
      Paso 2: cada 8 centésimas fila, empezando con la fila 4.
      Paso 3: cada 4 centésimas fila, empezando con la fila 2.
      Paso 4: cada 2 segundos   fila, empezando con la fila 1.

BLOQUE DE COMENTARIO

Puedes incluir comentarios en tu GIF. Estos pueden ser marcadores para una animación de secuencias larga o declaraciones de titularidad. Yo sugiero que pongas tu nombre, email, y dirección en el GIF, así la gente puede contactar contigo por tu trabajo. Estos comentarios NO aparecen en la pantalla.

BLOQUE DE TEXTO SIMPLE

Además de imágenes, puedes añadir texto en la pantalla con un GIF. Desafortunadamente muchos programas no reconocen el texto. Netscape no. Si quieres aprender más sobre los Bloques de Texto Simple, lee la Hoja de Especificación GIF89a.

TRAILER

El Trailer es simple. Indica el final del fichero GIF. Es inmodificable y no puedes acceder a el de cualquier manera.

Aquí está un ejemplo de estructura de un típico fichero de animación:

  • CABECERA DEL GIF89A
  • DESCRIPTOR DE PANTALLA LOGICA
  • PALETA GLOBAL
  • LOOP: loop Netscape 2.0
  • COMENTARIO: "Creado por..."
  • COMENTARIO: "estrella a 0 grados"
  • CONTROL para la IMAGEN #1
  • CONTROL para la IMAGEN #2
  • IMAGEN #2
  • COMENTARIO "estrella a 30 grados"
  • CONTROL para la IMAGEN #3
  • IMAGEN #3
  • TRAILER

    ¿Cuáles son los beneficios y limitaciones de las animaciones GIF89a?

    Beneficios

    Limitaciones