Soluciones & Trucos
Puede enviar sus consultas o aportaciones (trucos, recomendaciones, etc.) por correo electrónico a iworld@idg.es. indicando en el tema del mensaje “Soluciones y Trucos”. Si su truco es seleccionado para ser publicado, iWorld le regala una suscripción por un año. Si realiza una consulta, recuerde incluir su nombre completo y procure dar todos los datos necesarios para que podamos ayudarle.
Imágenes animadas en páginas web
P: Quisiera saber todo lo posible sobre como hacer un GIF animado, me gustaría poder hacer animaciones para mi primera página web, estoy aprendiendo el HTML pero no conozco casi nada de imágenes, tengo un pequeño lío con los nombres GIF, JPG, etc. ¿cómo se puede hacer una imagen animada de forma sencilla? Gracias.
Luisa Pérez
luisaperez@santandersupernet.com
R: Desde luego que muchos usuarios de la Red prestan especial atención a las animaciones que presentan los sitios web. Muchas páginas usan animaciones para captar la atención de los visitantes, y en particular los anuncios publicitarios usan esta táctica.
La forma más extendida de crear animaciones para páginas web es hoy por hoy mediante el uso de GIFs animados. Por supuesto, siempre que utilicemos un navegador gráfico no demasiado antiguo.
GIFs animados
Como es sabido uno de los formatos de imagen más usados en Internet es el GIF (Graphics Interchange Format). Soporta un máximo de 256 colores y está especialmente diseñado para trazos simples (como texto) y grandes zonas del mismo color. El formato GIF tiene dos variantes: GIF87a y GIF89a (el nombre deriva del año en que se crearon).
La mayor parte de las aplicaciones actuales de edición de gráficos permiten salvar en el formato GIF, y particularmente GIF89a, de modo que podemos fácilmente crear, por ejemplo, un titular con un editor de gráficos y guardarlo en un archivo de este tipo.
Pero además, un mismo archivo GIF puede contener distintas imágenes. Entre estas se pueden insertar cabeceras de información de control con parámetros poco usuales si tenemos en cuenta que hablamos de una imagen: coordenadas para marcos, tiempos, banderas para determinar como borrar una imagen, pausas para eventos de teclado, comentarios, etc.
Ciertamente no parecen parámetros gráficos muy habituales. Pero más extraño aún es el hecho de que los navegado-
res web ignorasen estas capacidades hasta que en 1995 Netscape comenzó a inter-
pretarlas para construir animaciones en
el web.
La utilización es sumamente sencilla. Un GIF animado se insertan en la página del mismo modo que una imagen única, o sea mediante la marca <IMG>:
<IMG SRC="imagenes/animacion.gif">
Es el navegador el encargado de realizar todo el trabajo: almacena las distintas imágenes que componen la animación en la caché y las presenta secuencialmente (una tras otra) transcurridos los intervalos de tiempo que se hayan indicado en la información de control de la propia imagen.
Por tanto, la única dificultad que se puede encontar estriba en la construcción de la imagen. El primer paso es crear una imagen GIF para cada uno de los fotogramas que compondrán la animación final. Podemos usar cualquier aplicación de creación o manipulación de gráficos.
Una vez que se han creado las imágenes parciales necesitamos ensamblar-las en un único archivo junto con la in-formación de control. Para ello podemos recurrir por ejemplo a alguna de las siguientes aplicaciones (existen muchas otras), según el sistema operativo que usemos:
Windows: Gif Construction Set o Microsoft
Gif Animator
Unix: WhirlGIF
Macintosh: GifBuilder
El funcionamiento particular de cada aplicación va más allá de las posibilidades de esta respuesta, pero en general la creación de un GIF animado con estas aplicaciones es sumamente sencilla. A continuación se indican unas directrices generales:
Un GIF animado se compone internamente (supongamos que contiene dos imágenes) de las siguientes partes:
CABECERA / LOOP / CONTROL / IMAGEN / CONTROL / IMAGEN
Los pasos que hay que dar para construir un GIF animado con cualquiera de estas aplicaciones son:
1) Abrir una imagen inicial. El bloque CABECERA y el primer bloque IMAGEN son creados automáticamente.
2) Editar el bloque CABECERA y marcar la opción de ‘Paleta Global’.
3) Insertar el resto de imágenes. Se crea un bloque IMAGEN para cada una de ellas. Especificar ‘Paleta Global’ para cada una de estas imágenes.
4) Insertar un bloque CONTROL para cada imagen colocándolo delante del bloque IMAGEN. Especificar el retardo de cada imagen editando el bloque CONTROL. Especificar también el color de fondo.
5) Insertar un bloque LOOP tras la cabecera y especificar cuántas veces ciclarán las imágenes. 0 equivale a bucle infinito, es de-cir la animación estará funcionando mientras la página web que la contiene este cargada en el navegador.
6) Salvar la imagen como un archivo GIF.
Hay que tener en cuenta que, en el caso de que el navegador no soporte GIFs animados, presentará la imagen inicial, la primera de la secuencia, pero esto es poco probable en la actualidad, ya que tendría que tratarse de una versión muy antigua. Por otra parte, una vez concluida la animación, salvo que se haya marcado como bucle infinito, la imagen que permanecerá visualizada será la última.
Archivos comprimidos con Winzip
P:
Imágenes animadas en páginas web
P: Quisiera saber todo lo posible sobre como hacer un GIF animado, me gustaría poder hacer animaciones para mi primera página web, estoy aprendiendo el HTML pero no conozco casi nada de imágenes, tengo un pequeño lío con los nombres GIF, JPG, etc. ¿cómo se puede hacer una imagen animada de forma sencilla? Gracias.
Luisa Pérez
luisaperez@santandersupernet.com
R: Desde luego que muchos usuarios de la Red prestan especial atención a las animaciones que presentan los sitios web. Muchas páginas usan animaciones para captar la atención de los visitantes, y en particular los anuncios publicitarios usan esta táctica.
La forma más extendida de crear animaciones para páginas web es hoy por hoy mediante el uso de GIFs animados. Por supuesto, siempre que utilicemos un navegador gráfico no demasiado antiguo.
GIFs animados
Como es sabido uno de los formatos de imagen más usados en Internet es el GIF (Graphics Interchange Format). Soporta un máximo de 256 colores y está especialmente diseñado para trazos simples (como texto) y grandes zonas del mismo color. El formato GIF tiene dos variantes: GIF87a y GIF89a (el nombre deriva del año en que se crearon).
La mayor parte de las aplicaciones actuales de edición de gráficos permiten salvar en el formato GIF, y particularmente GIF89a, de modo que podemos fácilmente crear, por ejemplo, un titular con un editor de gráficos y guardarlo en un archivo de este tipo.
Pero además, un mismo archivo GIF puede contener distintas imágenes. Entre estas se pueden insertar cabeceras de información de control con parámetros poco usuales si tenemos en cuenta que hablamos de una imagen: coordenadas para marcos, tiempos, banderas para determinar como borrar una imagen, pausas para eventos de teclado, comentarios, etc.
Ciertamente no parecen parámetros gráficos muy habituales. Pero más extraño aún es el hecho de que los navegado-
res web ignorasen estas capacidades hasta que en 1995 Netscape comenzó a inter-
pretarlas para construir animaciones en
el web.
La utilización es sumamente sencilla. Un GIF animado se insertan en la página del mismo modo que una imagen única, o sea mediante la marca <IMG>:
<IMG SRC="imagenes/animacion.gif">
Es el navegador el encargado de realizar todo el trabajo: almacena las distintas imágenes que componen la animación en la caché y las presenta secuencialmente (una tras otra) transcurridos los intervalos de tiempo que se hayan indicado en la información de control de la propia imagen.
Por tanto, la única dificultad que se puede encontar estriba en la construcción de la imagen. El primer paso es crear una imagen GIF para cada uno de los fotogramas que compondrán la animación final. Podemos usar cualquier aplicación de creación o manipulación de gráficos.
Una vez que se han creado las imágenes parciales necesitamos ensamblar-las en un único archivo junto con la in-formación de control. Para ello podemos recurrir por ejemplo a alguna de las siguientes aplicaciones (existen muchas otras), según el sistema operativo que usemos:
Windows: Gif Construction Set o Microsoft
Gif Animator
Unix: WhirlGIF
Macintosh: GifBuilder
El funcionamiento particular de cada aplicación va más allá de las posibilidades de esta respuesta, pero en general la creación de un GIF animado con estas aplicaciones es sumamente sencilla. A continuación se indican unas directrices generales:
Un GIF animado se compone internamente (supongamos que contiene dos imágenes) de las siguientes partes:
CABECERA / LOOP / CONTROL / IMAGEN / CONTROL / IMAGEN
Los pasos que hay que dar para construir un GIF animado con cualquiera de estas aplicaciones son:
1) Abrir una imagen inicial. El bloque CABECERA y el primer bloque IMAGEN son creados automáticamente.
2) Editar el bloque CABECERA y marcar la opción de ‘Paleta Global’.
3) Insertar el resto de imágenes. Se crea un bloque IMAGEN para cada una de ellas. Especificar ‘Paleta Global’ para cada una de estas imágenes.
4) Insertar un bloque CONTROL para cada imagen colocándolo delante del bloque IMAGEN. Especificar el retardo de cada imagen editando el bloque CONTROL. Especificar también el color de fondo.
5) Insertar un bloque LOOP tras la cabecera y especificar cuántas veces ciclarán las imágenes. 0 equivale a bucle infinito, es de-cir la animación estará funcionando mientras la página web que la contiene este cargada en el navegador.
6) Salvar la imagen como un archivo GIF.
Hay que tener en cuenta que, en el caso de que el navegador no soporte GIFs animados, presentará la imagen inicial, la primera de la secuencia, pero esto es poco probable en la actualidad, ya que tendría que tratarse de una versión muy antigua. Por otra parte, una vez concluida la animación, salvo que se haya marcado como bucle infinito, la imagen que permanecerá visualizada será la última.
Archivos comprimidos con Winzip
P:
