 |
C'est un GIF ! Il bouge ! C'est un GIF Animé ! |
| Avons-nous toute votre attention maintenant ? Pouvez-vous la récupérer ? | |
|
C'est un GIF ! Il bouge ! C'est un GIF Animé ! |
| Avons-nous toute votre attention maintenant ? Pouvez-vous la récupérer ? | |
Après cette leçon, vous pourrez :
Nous ne pensons pas avoir à décrire à quoi ressemble un GIF animé, il y en a partout sur le web. Cela va d'icônes animées à des publicités commerciales ("ad banners"), en passant par des "crédits" de site web ou des pages d'accueil qui ressemblent à des avant-premières de cinéma. Les animations GIF sont utiles car vous pouvez être sûr qu'on les verra sur pratiquement n'importe quel navigateur et de plus, elles ne nécessitent pas d'accessoires supplémentaires pour fonctionner.
| type de média : | GIF animé | |
| ce qu'il fait bien : | information liée au temps, séquences, processus, animation de type dessin animé | |
| problème à considérer | évaluation | commentaires |
|---|---|---|
| inconvénient pour la création du média | faible grand |
La majorité des nouveaux programmes graphiques autant que les freeware/shareware peuvent créer des images GIF. De nombreux sites offrent des animations que vous pouvez utiliser |
| "largeur" de l'audience pouvant voir le média | petitegrande |
Les animations GIF peuvent être visualisées dans presque n'importe quel navigateur utilisé aujourd'hui. Pas de plug-ins nécessaires |
| consommation de bande passante | faible forte |
Trés petites tailles de fichiers. Les données s'affichent "à la volée". |
Une image GIF animée est juste une extension du format de fichier utilisé pour les images incluses GIF que nous avons vues lors de la leçon 7. Mais, plutôt que d'afficher une seule image, un GIF animé comporte plusieurs couches d'images différentes, les informations contenues dans le fichier contrôlent le délai d'attente entre deux images et combien de fois jouer la séquence en boucle.
Plusieurs programmes graphiques actuels intègrent des options pour créer des fichiers GIF animés. De plus, vous pouvez trouver des logiciels shareware ou très bon marché (e.g. http://shareware.com/) pouvant transformer une série d'images en une animation GIF. Et, comme le web est plein de danse, de clignotement et de GIFs animés, il existe un grand nombre de sites gratuits où vous pouvez télécharger des animations à utiliser dans vos pages. Nous avons préparé une liste de liens vers ces sites à la fin de cette leçon.
Un autre avantage de ce média est que le fichier n'a pas besoin d'être entièrement téléchargé pour démarrer l'animation ; un GIF animé commence dès qu'il a suffisamment d'informations pour afficher la première "image" de l'animation. Ainsi, l'animation semble très "fluide" et vous pouvez créer des fichiers GIF de plusieurs centaines de Ko qui commenceront à s'animer quand à peu près 20% du fichier sera présent dans le navigateur.
Quelques inconvénients des GIF animés ? Le premier est lié à la distraction apportée par le mouvement. Cela attire l'oeil et peut déranger quelqu'un essayant de comprendre l'information de la page. L'autre désavantage est qu'ils sont généralement utilisés comme des nouveautés mais, après les premières fois où vous voyez le même nounours, ça peut commencer à devenir un peu ringard.
Les animations peuvent être très utiles pour montrer des informations liées dans le temps, comme les changements d'une chose dans le temps (l'érosion d'une plage, la croissance d'une plante, des changements dans les cours de la Bourse) ou la démonstration d'un processus (comment changer un pneu, comment le sang circule dans le coeur). Comme pour les images GIF, les fichiers les plus petits sont les images avec des grandes parties de couleur unie avec des bords nets, par opposition à des images avec plus de variation spatiale comme les photos.
Ceci devrait être une leçon facile car le code HTML pour insérer un GIF animé est exactement le même que pour les GIF "standard" ("statiques" ?), que nous avons vu dans la leçon 7a:
<img src="nom_de_fichier.gif" alt="texte de remplacement" width=X height=Y>
où X est la largeur de l'image et Y la hauteur en pixels. Vous pouvez également inclure les options d'alignement gauche et droit que nous avons vues dans la leçon 20.
Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.
Pour notre site Web Volcan, nous allons ajouter une présentation en GIF animé relatant les événements qui ont amené à l'éruption du 18 Mai 1980 au Mont St Helens. Elle est constituée de photographies et de diagrammes, avec l'aimable permission de l'Observatoire de Volcans de USGS/Cascades.
Pour voir et télécharger l'animation GIF, rendez-vous au Studio d'Images de la Leçon 29a. Sauvegardez cette image dans le dossier/répertoire pictures avec vos autres fichiers images.
Nous allons tout d'abord créer une page HTML de base affichant l'animation GIF. Puis nous allons ajouter un lien dans notre page Endroits Volcaniques aux USA qui chargera cette animation dans une fenêtre séparée du navigateur.
<html> <head> <title>Le Mont St Helens : Evènements du 18 Mai 1980</title> </head> <BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666> <center> <img src="../pictures/msh_events.gif" alt="Animation du Mont St Helens" vspace=10 width="400" height="135"><br> <font face="verdana,helvetica,arial" size=2 color=#999999> La présentation se charge et s'affiche automatiquement</font><p> <i>Avec l'aimable autorisation de <a href="http://vulcan.wr.usgs.gov/">l'Observatoire de Volcans de USGS/Cascades</a>.</i> </center> </body> </html>
NOTE: Comme l'animation GIF peut apparaître "saccadée" via une connexion internet lente, nous avons prévu un message sous l'image afin de faire patienter le visiteur pendant que le fichier se charge et s'exécute.
Maintenant, nous allons modifier le code HTML du fichier "Endroits Volcaniques aux USA", usa.html, afin d'utiliser le JavaScript pour afficher notre nouveau document dans une fenêtre plus petite du navigateur.
<p>
<a href="msh_may18.html" onClick="window.open('msh_may18.html',
'msh', 'width=440,height=280,status,menubar'); return false"
onMouseOver="window.status='voir une animation de l\'éruption';
return true"><img src="../pictures/projector.gif" alt="Action !"
width="46" height="32" align="left" border=0></a>
Voir <a href="msh_may18.html" onClick="window.open('msh_may18.html',
'msh', 'width=440,height=280,status,menubar'); return false"
onMouseOver="window.status='voir une animation de l\'éruption';
return true">l'animation des évènements</a> pour cette éruption volcanique [Animation GIF de 194k].
NOTE : Nous utilisons le code JavaScript de la leçon 27d pour ouvrir un fichier HTML spécifique msh_may18.html dans une nouvelle fenêtre de 440 pixels de large sur 280 pixels de haut. Nous avons également inclus le code JavaScript "mouseOver" pour afficher un texte descriptif quand l'internaute déplace sa souris sur le lien (voir la leçon 27a). La page de présentation s'ouvre en cliquant soit sur l'icône du projecteur, soit sur le lien hypertexte adjacent à l'icône.
Notez également que l'information relative à notre lien donne à l'internaute une idée du média (et de sa taille) inclus dans la page si il clique sur le lien.
Maintenant, vous vous demandez peut-être comment, en ouvrant toujours plus de nouvelles fenêtres via JavaScript, les visiteurs de votre site se retrouvent dans toutes ces pages qui s'agglutinent ou couvrent complétement leur bureau. Nous pouvons les aider un peu en créant un bouton JavaScript pour fermer une fenêtre.
<form> <input type=button value="Retour à la page Endroits Volcaniques aux USA" onClick="self.close()"> </form>
NOTE : Nous avons ajouté un nouvel élément de FORM(ULAIRE), type=button qui insère un bouton normal avec l'étiquette du texte contenu dans l'option value=.... Nous ajoutons un évènement JavaScript qui s'exécute quand on clique sur le bouton, indiquant à la fenêtre où le document s'affiche (self), de se fermer. En réalité, nous avons créé un bouton personnalisé qui fermera cette fenêtre, tout comme si l'internaute avait cliqué sur le bouton "fermer" dans la barre de menu.
Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Comparez votre travail avec le HTML des exemples (cherchez quelque chose comme Source dans le menu Afficher de votre navigateur).
Revoyons les grandes lignes de cette leçon :
Ajoutez une image GIF animée dans vos pages web. Essayez de trouver des images à utiliser dans ces ressources :
Si vous êtes fatigués des animations dans une page web, vous pouvez les figer en cliquant sur le bouton Arrêter dans votre navigateur web. Quand vous créez vos propres animations GIF, vous avez des options vous permettant de contrôler combien de fois la séquence animée bouclera, afin d'éviter les perpetuelles rotations, danses, etc.
Et, comme pour les GIFs statiques, vous pouvez en faire des hyperliens comme nous l'avons vu dans la leçon 8e. Si nous avions trouvé sur le site de clip art gratuit de l'amoureux du Fromage le GIF animé d'un morceau de fromage dansant, nous pourrions créer un lien hypertexte vers un autre site ou un autre fichier HTML en écrivant :
<a href="http://www.fromageanonyme.com/"><img src="fromage_dansant.gif" width=200 height=100 alt="animation d'un fromage dansant" border=0></a>
Pour plus d'informations sur l'Animation GIF, consultez L'Animation GIF sur le WWW de Royal Frazier et la Bibliothèque Virtuelle du Développeur Web
Viva La Video ! Des Films dans votre page web !
Ecrire le HTML : Leçon 29a : Animé, mon GIF !
©1994-2003
Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
La 'net connection (en anglais) à MCLI est
Alan Levine
Suggestions en Français à Bernard Bensoussan
URL: http://www.mcli.dist.maricopa.edu/tut/tut29a.html