Vous les voyez partout. Des personnages animés clignotent, rebondissent ou tournent sur votre écran. Les concepteurs de sites Web ne sont pas tombés uniquement sur ces astuces. Ils ont créé une boîte à outils pour faire ressortir le contenu sans casser votre navigateur. Les principaux acteurs ? GIF animés, HTML dynamique, Java, Shockwave et Flash. Chacun a des atouts. Chacun a des défauts. Nous allons détailler leur fonctionnement. Nous verrons également la suite.
La guerre de la bande passante
L’histoire d’Internet est courte. Son évolution est rapide. Deux forces s’opposent. Les auteurs veulent un contenu élaboré. Les lecteurs ont besoin de chargements rapides.
Au début, « rapide » signifiait modems téléphoniques. La taille des fichiers devait être petite. Les graphismes complexes étaient un luxe que peu de gens pouvaient se permettre. Cette contradiction a forcé l’innovation. Les développeurs ont dû faire preuve d’intelligence. Ils avaient besoin d’astuces pour diffuser des médias riches sur des canaux étroits.
Considérons une animation Flash tirée d’un article sur les radiations nucléaires. C’est un chiffre compliqué. Mais cela tient dans moins de 7 000 octets. C’est ça l’efficacité. Voici comment chaque technologie relève ce défi.
GIF animés
Les débuts du graphisme et de l’animation Web
Le Web ne serait pas ce qu’il est sans le mariage du texte et des images. Cette intégration reposait en grande partie sur des fichiers bitmap, un format qui mappe la couleur de chaque pixel d’une image. C’est un concept simple. Le piège ? Ces fichiers peuvent rapidement augmenter en taille. Pour maintenir le chargement des pages sans obliger les utilisateurs à regarder des écrans vides, les développeurs se sont tournés vers les techniques de compression. C’est pourquoi les fichiers JPEG et GIF dominent le premier paysage Web.
Mais les images statiques ne racontent que la moitié de l’histoire.
Si l’animation n’est qu’une séquence rapide d’images fixes, l’étape suivante logique consistait à enchaîner ces fichiers bitmap. Le navigateur les parcourrait. Cela a créé une animation GIF, également connue sous le nom de GIF89. Ce fut la première véritable explosion de mouvement sur le Web. Cela s’est rapidement répandu. Il reste populaire aujourd’hui, pour le meilleur ou pour le pire.
Pourquoi les GIF ont gagné (et pourquoi ils sont limités)
L’appel était indéniable. L’animation GIF était incroyablement simple à créer. La plupart des navigateurs l’ont reconnu dès le départ. Vous n’aviez pas besoin de plugins complexes ou de logiciels propriétaires. Si vous étiez sous Windows, vous auriez peut-être utilisé le jeu de construction GIF. Les utilisateurs de Mac se sont tournés vers GifBuilder. Le flux de travail était linéaire.
- Rassemblez vos cadres bitmap individuels.
- Empilez-les dans le logiciel.
- Téléchargez le fichier final.
C’est ça. Vous codez la balise exactement comme vous le feriez pour une image statique.
Cependant, cette simplicité s’accompagne d’un plafond dur. Le principal inconvénient est la taille du fichier. Étant donné que chaque image est une image bitmap complète, l’ajout d’images supplémentaires ajoute du poids. Vous pouvez vous en sortir avec quatre cadres simples. Ils se transmettent facilement. Mais atteindre vingt images ? La taille du fichier devient souvent ingérable pour les connexions Internet moyennes de l’époque.
Et il y a aussi un problème de contenu. Vingt images ne suffisent pas pour un mouvement fluide. Les films reposent sur au moins 24 images par seconde. Les GIF animés vous obligent à faire d’énormes sauts entre les états. Le résultat est haché. Guindé. Il lui manque la fluidité d’une vraie vidéo. Vous pouvez voir cette limitation dans presque toutes les premières animations Web. C’est fonctionnel. C’est accrocheur. Mais c’est loin d’être cinématographique.
Les GIF conviennent parfaitement aux boucles simples ou aux garnitures visuelles rapides. Ils ne sont cependant pas capables de véhiculer des récits complexes. Pire encore, ils restent silencieux. Les concepteurs de sites Web se heurtent rapidement à un mur. Les utilisateurs voulaient du mouvement. Ils voulaient du son. Les GIF n’ont pas pu être livrés.
Le principal problème de l’animation GIF est la surcharge des fichiers. Chaque image d’un « film » ajoute un poids important au téléchargement. C’est inefficace. C’est lent.
HTML dynamique
La solution ? Arrêtez d’envoyer des trames. Envoyez simplement une image. Dites ensuite à l’ordinateur de le déplacer.
Pensez au curseur de votre souris. Vous ne téléchargez pas une nouvelle image pour chaque millimètre parcouru par le pointeur. Le navigateur gère ce mouvement localement. Le HTML dynamique (dHTML) tente de reproduire cette efficacité sur le Web.
Les pages Web originales étaient statiques. Le langage de balisage hypertexte (HTML) définit la structure, pas le comportement. Une fois chargée, la page restait là. Mort. Toujours.
Les designers détestaient ça. Ils voulaient du contenu dynamique. Contenu qui a changé après le chargement de la page. Saisissez dHTML.
Il ne s’agit pas d’une seule technologie. Il s’agit d’une combinaison de langages de script comme JavaScript accédant au modèle objet de document (DOM). Le DOM est la carte interne de la page du navigateur. Il contrôle chaque élément.
La plupart des navigateurs modernes exposent le DOM aux scripts. Un script peut récupérer un élément. Changez sa couleur. Déplacez sa position.
DHTML n’a pas été créé pour l’animation. Il a été conçu pour manipuler les éléments de la page. L’animation est un heureux sous-produit.
Un script peut demander à un navigateur de mettre constamment à jour les coordonnées d’une image. L’image glisse sur l’écran. Faites cela avec plusieurs images et vous obtenez un film brut.
Cela fonctionne dans la plupart des navigateurs sans téléchargements supplémentaires. Mais c’est capricieux. Le code qui fonctionne dans Netscape peut être défectueux dans Internet Explorer. Créer manuellement une animation dHTML est pénible. Vous avez besoin d’outils. Dreamweaver de Macromedia (et les applications similaires) génèrent le code de script correct pour vous.
Même avec des outils, dHTML est limité. Il déplace les images fixes. C’est plus fluide qu’un GIF, mais moins efficace pour les scènes complexes. Cela représente le plafond de ce qu’un navigateur peut faire de manière native.
Pour aller plus loin, les développeurs avaient besoin de quelque chose de plus lourd. Quelque chose d’extérieur.
Applet Java
Entrez Java.
Java est un langage universel orienté réseau. Il permet aux programmeurs de créer des applications téléchargeables. Mais ce ne sont pas des programmes autonomes. Ce sont des applets.
Les applets s’exécutent dans le navigateur. Ils nécessitent une machine virtuelle (VM). La VM agit comme un traducteur. Il prend du code Java et le convertit en instructions que votre système d’exploitation spécifique (Windows, MacOS, Unix) comprend.
La VM est essentiellement un plug-in. Si vous ne l’avez pas, l’animation échoue.
Les applets Java offrent de la flexibilité. Vous n’êtes pas coincé avec des images bitmap. Vous pouvez dessiner des formes vectorielles à la volée. Cela permet de gérer la taille des fichiers. Cela permet l’interactivité. Un utilisateur peut cliquer, faire glisser ou survoler, et l’animation répond en temps réel.
C’est puissant. C’est multiplateforme. C’est aussi une dépendance. Si le navigateur de l’utilisateur ne dispose pas de la machine virtuelle Java, il ne voit rien.
Pour les concepteurs de sites Web de la fin des années 90 et du début des années 2000, c’était la frontière. Vous avez troqué la facilité d’utilisation contre la capacité. Les GIF étaient faciles mais stupides. dHTML était natif mais limité. Java était complexe mais performant.
Le choix dépendait de votre public. Est-ce qu’ils ont installé les plugins ? Se souciaient-ils des temps de chargement ? Ou voulaient-ils simplement que le site soit impressionnant ?
Le compromis entre performance et richesse a défini le Web pendant des années. Nous sommes encore en train de régler l’équilibre aujourd’hui.
Le début des années 90 a tout changé. Soudain, tout le monde créait des sites Web. Ce n’étaient plus seulement des geeks de la technologie. Ils voulaient mettre du multimédia dans leurs pages. Son. Vidéo. Des graphismes fantaisistes.
Les navigateurs ne pouvaient pas tout gérer directement. Les développeurs ont donc fait preuve de créativité. Ils ont créé des plug-ins de navigateur.
Considérez un plug-in comme une application d’assistance. Il fonctionne avec votre navigateur pour lire des types de fichiers spécifiques. Ces programmes sont petits. Vous les téléchargez rapidement. Ils font des choses que les navigateurs de base ne peuvent tout simplement pas faire.
Comment fonctionne réellement le streaming vidéo
Les premières vidéos Web reposaient largement sur ce modèle de plug-in. Vous ne regardiez pas seulement un fichier. Vous interagissiez avec un joueur spécialisé.
Les concepteurs ont utilisé des scripts DHTML pour vérifier votre configuration. Avez-vous le bon plugin ? Sinon, votre navigateur a affiché un message. Il vous a indiqué exactement où le télécharger.
Ce processus était fastidieux. Cela a pris du temps. C’était un point de friction majeur pour les utilisateurs.
Mais si vous aviez le plugin ? La magie s’est produite. Le navigateur a commencé à lire le film avant la fin du téléchargement du fichier.
Comment? Compression et diffusion en continu.
La compression simplifie les données d’image. Cela réduit la taille des fichiers. Le Streaming commence la lecture pendant le processus de téléchargement. Des lecteurs comme QuickTime et Media Player l’ont utilisé. Ils ont montré une séquence d’images fixes. Un peu comme un GIF animé, mais plus rapide. Et avec du son.
Le piège ? Les connexions lentes ont gâché l’expérience. Les fichiers prenaient une éternité à charger. Ou la qualité avait l’air horrible.
La domination de l’animation vectorielle
Lorsqu’il s’agit des premières animations Web, deux noms règnent en maître. Flash et onde de choc. Tous deux venaient de Macromedia.
Il s’agissait de visionneuses d’animation 2D vectorielles.
Contrairement aux images raster, les vecteurs utilisent des équations mathématiques. Cela les a rendus évolutifs. Ils sont restés croustillants quelle que soit leur taille. Ils ont chargé incroyablement rapidement via des connexions commutées.
Cette technologie a alimenté la majeure partie du Web interactif. L’animation boomerang de notre article précédent ? C’était Flash. Ce n’était pas seulement un fichier vidéo. C’était du code. C’était léger. C’était partout.
Macromedia a construit un empire sur deux formats essentiellement frères : Flash et Shockwave. L’un est devenu la norme en matière d’animation Web ; l’autre s’est chargé du gros du travail pour un contenu interactif plus complexe. Contrairement aux fichiers RealPlayer ou QuickTime encombrants qui apparaissaient dans des fenêtres séparées, ces formats vivaient à l’intérieur de la page. Ils étaient interactifs. Vous ne vous êtes pas contenté de regarder ; vous avez cliqué. Le lecteur Shockwave n’a pas seulement joué un film. Il lit les entrées de l’utilisateur et indique au navigateur comment répondre.
L’anatomie de la vitesse
Pourquoi ces fichiers se chargent-ils si rapidement ? Ce n’était pas magique. C’était des mathématiques.
La plupart des animations GIF sont basées sur des bitmaps. Chaque pixel est enregistré individuellement. Si vous avez un ciel bleu, cela représente des milliers d’entrées de pixels individuelles. Les fichiers Flash et Shockwave sont en grande partie basés sur des vecteurs. Au lieu de stocker les valeurs des pixels, le logiciel stocke les instructions. Une ligne droite n’est pas une série de points. C’est une description : angle, coordonnée, longueur.
Décrire les images de cette manière permet au programme d’enregistrer de larges sections d’une image (des sections pouvant contenir des centaines de pixels dans un fichier bitmap) sous forme de quelques figures.
Cette approche réduit la taille du fichier. Même lorsque des images bitmap étaient utilisées, les webmasters pouvaient les condenser. Ils se déplaçaient sur l’écran via des chemins, similaires à l’animation dHTML, réduisant ainsi le poids total des données. Cependant, la plupart des fichiers Flash étaient purement vectoriels. Cela les a rendus exceptionnellement rapides à charger.
Il y a une autre astuce dans la manche : entre les images.
Les animateurs n’ont pas besoin de dessiner chaque image. Le logiciel calcule les changements géométriques entre les images clés. Il se remplit au milieu. Cela utilise beaucoup moins d’espace que le stockage de chaque image sous forme d’image bitmap unique. Les calculs font le gros du travail.
Streaming : commencez avant de terminer
La véritable innovation ne résidait pas seulement dans la manière dont les fichiers étaient structurés. C’est ainsi qu’ils voyageaient sur Internet. Les fichiers Flash et Shockwave sont streamés.
Vous n’attendez pas que le téléchargement complet démarre. Le navigateur commence à lire le « film » pendant que le reste arrive. Pensez-y comme à une page Web : le serveur envoie d’abord le texte, puis les images. Un site Flash peut envoyer un film d’introduction pendant que la majeure partie du contenu se charge en arrière-plan.
Les webmasters peuvent coder le fichier pour démarrer la lecture une fois qu’un pourcentage spécifique du fichier a été téléchargé. La transmission est chronométrée pour que chaque segment arrive avant que le joueur n’en ait besoin. C’est le même mécanisme derrière le streaming vidéo.
Le monopole de la commodité
Flash n’a pas seulement gagné parce qu’il était bon. Il a gagné parce que Macromedia l’a rendu omniprésent.
Les plug-ins étaient fournis avec les principaux navigateurs et systèmes d’exploitation. Si vous ne l’aviez pas, l’installation s’est déroulée en arrière-plan. Vous n’avez pas besoin de fermer votre navigateur. Vous n’avez pas eu à suivre un long processus. Le logiciel d’auteur permettant de créer ces fichiers était coûteux. Mais le joueur ? Gratuit.
Les mises à jour étaient indolores. Macromedia a conçu les lecteurs pour s’adapter aux modifications futures. Les utilisateurs n’avaient rien d’autre à faire que de télécharger un petit fichier. Si un site détecte que vous possédez une ancienne version, votre navigateur vous avertit et vous dirige vers la page de téléchargement. Les fichiers étaient suffisamment petits pour que le processus de mise à jour soit presque instantané.
L’effet réseau
Chaque format d’animation a des atouts. Chaque format a des faiblesses.
Pourtant, de nombreux webmasters ont choisi Flash même si un autre format aurait pu être techniquement supérieur. Pourquoi? Parce qu’ils savaient que la plupart des utilisateurs disposaient déjà de cette fonctionnalité. Et s’ils ne le faisaient pas, c’était trivial à obtenir.
L’universalité de Flash et Shockwave a créé une boucle de rétroaction. Plus de webmasters ont inclus le contenu. Plus d’utilisateurs l’ont rencontré. L’acceptation a augmenté. Il ne s’agissait plus seulement de technologie. Il s’agissait du chemin de moindre résistance.
Ils viennent de la même maison. Macromedia a réalisé les deux. Ils couvrent un terrain similaire. Pourtant, l’écart entre Flash et Shockwave ne se limite pas à l’image de marque. C’est de l’architecture. C’est l’histoire. Vous devez connaître la différence si vous vous souciez de la façon dont votre contenu se charge ou de ce que vous pouvez réellement créer avec.
La cause profonde ? Histoires d’origine.
Director, le moteur derrière Shockwave, est antérieur au Web moderne. Il a été conçu pour les CD-ROM. Des trucs lourds. Haute fidélité. Au fur et à mesure que le Web évoluait, Director a été mis à jour. Il a appris à respirer en ligne. Mais Flash ? Flash est né pour le navigateur. Il a évolué à partir de Future Splash Animator. Macromedia l’a peaufiné pour les lignes téléphoniques. L’accès commuté était roi à l’époque. La vitesse était primordiale.
Cette histoire crée une double personnalité dans la technologie.
Vitesse du flash prioritaire. Shockwave a donné la priorité à la puissance.
Quel format gagne en termes de vitesse et de compatibilité ?
Si vous demandez quel format offre la meilleure compatibilité Web, Flash détient la couronne avec une majorité écrasante.
Pensez aux plug-ins. Éclair? Installé sur plus de 90 pour cent des utilisateurs Web. Onde de choc ? Un peu moins de 60 pour cent. C’est une grande partie de votre audience laissée dans le noir à moins qu’elle n’installe le lecteur Shockwave.
Les temps de chargement suivent la même logique.
Les fichiers Flash sont légers. Ils se chargent rapidement. Les fichiers Shockwave sont plus lourds. Ils mettent plus de temps à arriver. Au début du Web, il était courant d’attendre dix secondes pour qu’un clip se charge. Aujourd’hui, c’est inacceptable. Flash l’a compris instinctivement.
Mais la vitesse ne fait pas tout.
Où Shockwave bat Flash
N’écartez pas encore Shockwave. C’est le poids le plus lourd.
C’est plus polyvalent. Vous voulez des jeux complexes ? Onde de choc. Avez-vous besoin d’une interactivité profonde ? Onde de choc. Une animation élaborée qui ne se soucie pas du temps de chargement ? Onde de choc.
Il y a aussi un problème de hiérarchie. Vous pouvez importer un fichier Flash dans une animation Shockwave. Cela fonctionne bien. Essayer l’inverse ? Ce n’est pas le cas. Shockwave est le format parent ici en termes de capacité.
Ensuite, il y a le coût.
Le logiciel de création Flash coûte environ 400 $. Director, pour Shockwave, coûte près de 1 000 $. Pour une startup ou un petit studio, c’est un obstacle important. Flash était accessible. Le réalisateur était pour les pros.
Le secret de polichinelle : l’accessibilité du code source
Voici un détail que la plupart des tutoriels ignorent.
Flash est un format open source. Vous pouvez voir comment cela fonctionne. Vous pouvez l’adapter. Vous pouvez bricoler avec les tripes. Shockwave utilise un format de fichier compilé. C’est verrouillé. Le modifier est extrêmement difficile. Si vous avez besoin de faire de la rétro-ingénierie ou de personnaliser en profondeur, Flash vous donne les clés. Shockwave les garde dans un coffre-fort.
Comment réaliser des films dans les deux environnements
Les deux outils sont conçus pour être étonnamment simples. Ils automatisent le gros du travail. Vous n’avez pas besoin d’un diplôme en informatique pour créer un globe en mouvement.
Le workflow est similaire, même si les noms sont différents. Vous faites trois choses :
- Créer et éditer des images. Les matières premières.
- Organisez les images en images. La séquence.
- Commandez les images dans un film. Le produit final.
Mais les interfaces ? Des langues totalement différentes.
Dans Flash, vous stockez les ressources dans la bibliothèque. Dans Shockwave, ils entrent dans le casting. Même travail. Étiquette différente.
Vous placez ces éléments sur la scène. C’est ce que voit réellement l’utilisateur. La sortie finale.
Pour contrôler le mouvement, vous utilisez des images clés. Vous définissez le point de départ. Vous définissez le point final. Vous dites au logiciel de remplir les espaces vides. Flash appelle la zone d’arrangement la chronologie. Shockwave l’appelle le score.
“Si vous souhaitez qu’un globe roule d’un côté à l’autre de l’écran, vous n’avez pas besoin d’animer chaque image. Il vous suffit d’indiquer à Flash où commence et où il s’arrête.”
C’est la magie. Le logiciel interpole le mouvement. Il gère les mathématiques. Vous fournissez simplement l’intention.
Vont-ils un jour fusionner ?
Ils se rapprochent.
Chaque mise à jour ajoute des fonctionnalités Web à Shockwave. Chaque mise à jour ajoute de la polyvalence à Flash. Les écarts se réduisent.
À terme, ils fusionneront probablement en un seul format complet. Il faudrait le meilleur des deux mondes. Vitesse et puissance. Accessibilité et complexité.
En attendant, vous choisissez en fonction de vos contraintes.
Avez-vous une connexion par ligne commutée ? Éclair.
Avez-vous un budget de 400$? Éclair.
Avez-vous besoin de masquer votre code source ? Onde de choc.
Avez-vous besoin de créer un jeu Web de niveau AAA ? Probablement Shockwave.
Ce n’est pas seulement une question de préférence. Il s’agit du médium. Et le médium continue d’évoluer.
Une vidéo Flash tirée de notre article sur les piles à combustible.
Une animation Flash tirée de notre article sur le moteur.
Le passage aux graphiques Web interactifs en 3D
L’animation Web en deux dimensions a toujours été une expérience dirigée. Le designer décide exactement de ce que vous voyez, image par image. Cela reflète les dessins animés télévisés traditionnels où le public est passif. Les graphiques Web en trois dimensions changent complètement cette dynamique. Vous prenez le contrôle. Vous pouvez faire pivoter un modèle. Vous pouvez déclencher des fonctions spécifiques. Dans certains cas, vous pouvez même modifier ses dimensions physiques. Ce niveau d’interaction transforme le contenu de quelque chose que vous regardez en quelque chose que vous explorez.
Plugins de navigateur et normes de l’industrie
Comme les outils 2D antérieurs tels que Flash et Shockwave, la visualisation de graphiques Web 3D nécessite un plug-in de navigateur. Plusieurs entreprises sont déjà entrées dans cet espace. Viewpoint a connu un certain succès. NxView propose un plug-in directement depuis son site Internet.
L’industrie connaît également une consolidation majeure. En juillet, Macromedia et Intel ont annoncé le développement conjoint de fonctionnalités 3D pour Shockwave. Ce partenariat exploite les ressources matérielles d’Intel et l’infrastructure de lecteur multimédia établie de Macromedia. L’objectif est clair : faire du format Shockwave 3-D le standard de facto en matière de graphisme Web. Les utilisateurs n’auront pas besoin de nouveau logiciel. Ils téléchargeront simplement une mise à jour de leurs lecteurs Shockwave existants.
Mise à l’échelle adaptative et gestion des polygones
Les performances constituent le principal obstacle à la 3D sur le Web. La technologie Shockwave résout ce problème grâce à la mise à l’échelle. Il s’adapte en temps réel à la vitesse de connexion de l’utilisateur. Si votre connexion est plus lente, le lecteur télécharge un modèle avec moins de polygones. Les polygones sont des formes géométriques qui se combinent pour former un modèle 3D.
Ce n’est pas seulement un compromis ; c’est une fonctionnalité. Vous perdez quelques détails fins. Vous ne perdez pas la clarté de l’image. Le mouvement reste fluide. Cela garantit que les utilisateurs disposant d’une connexion par ligne commutée ou d’une première connexion haut débit ne sont pas exclus de l’expérience.
E-Commerce et essais virtuels
Cette technologie ouvre de nouvelles possibilités pour les achats en ligne. Actuellement, les acheteurs s’appuient sur des images statiques. Ils devinent l’ajustement et la texture. Les graphiques 3D leur permettent d’examiner un produit sous tous les angles. Il imite l’expérience en magasin.
Certains sites vont plus loin avec des « vestiaires virtuels ». Les utilisateurs peuvent créer un modèle 3D de leur propre forme corporelle. Ils peuvent alors voir comment différents vêtements correspondent à cet avatar spécifique. Cela réduit l’incertitude dans les achats en ligne.
Applications éducatives et plongées plus approfondies
Les plateformes éducatives bénéficient largement de ce changement. Des sites comme How Stuff Works ont déjà publié des articles utilisant des graphiques 3D générés par NxView. Le plan est de développer davantage de contenu.
Ces graphiques apportent de la clarté. Les utilisateurs peuvent observer un moteur sous n’importe quel angle. C’est comme si un véritable moteur se trouvait devant eux. Cette compréhension spatiale facilite la rétention et la compréhension.
L’avenir de l’interaction Web
Cette technologie va probablement révolutionner l’apparence d’Internet. Elle suit la même trajectoire que les images fixes et les animations Flash. Internet continuera d’évoluer à un rythme effréné.
Les connexions à haut débit sont de plus en plus courantes. Cela donne naissance à la prochaine vague d’idées d’animation. L’un des concepts consiste à faire en sorte que le Web ressemble moins à un livre qu’à un jeu vidéo. Les utilisateurs accéderaient aux informations dans un monde interactif en 3D. Une autre idée est de faire en sorte que cela ressemble davantage à la télévision. Une animation et une vidéo de haute qualité domineraient.
En fin de compte, cela dépend de ce que les concepteurs Web choisissent de créer. Cela dépend aussi de la demande des utilisateurs. Internet n’est pas statique. Cela évolue vers quelque chose de plus immersif. La prochaine étape consiste à comprendre exactement comment ces moteurs fonctionnent sous le capot.
