Le Rich Média, concept et technologies---

Transcription

1 VERDU Jean Philippe Juillet 2009 Le Rich Média, concept et technologies--- Introduction Les interfaces entre l homme et la machine (IHM) évoluent constamment depuis plus de 40 ans tant sur le terrain des matériels que sur celui des logiciels. L interactivité entre l utilisateur et le système (dont on peut retenir par exemple l apparition du lien hypertexte) et l intégration simultanée de divers médias sur un même écran (dont l association texte-image fixe est déjà très développée) sont des techniques maintenant avérées de ces évolutions. Les attentes de l utilisateur averti se situent dans une interface ergonomique, riche, performante et adaptée à un contexte donné sur laquelle il peut interagir selon ses propres décisions. Plusieurs solutions technologiques permettent de répondre à ces attentes dont une des plus connue est certainement Flash bien que d autres, comme Java, permettent aussi des réponses performantes. L objectif de ce dossier est de présenter une des solutions possibles à cette évolution, le Rich Média, sous les divers aspects conceptuels, technologiques et économiques afin de guider tout responsable de projet vers un choix éclairé et efficace. Le concept Rich Média Un service Rich Média est une solution d IHM enrichie qui permet la diffusion simultanée, en ligne ou en local, de médias de nature différente (documents textuels, images, animations, contenus vidéo et audio ) dans une fenêtre unique de l écran. Mais cette intégration ne représente pas que le seul avantage de ce concept. En effet c est un service qui permet également deux aspects forts intéressants que sont la synchronisation des médias entre eux et le chapitrage du média audio ou vidéo ce qui favorise l interaction de l utilisateur sur l application en granularisant le document. Les deux présentations suivantes (logiciel Rich Média Suite d Empreinte Multimédia SA) illustrent ce que peut être un service Rich Média en ligne.

2 Mutuelle Alptis, congrès annuel sur le sommeil, Biarritz octobre la vidéo 2- le chapitrage de la vidéo (sommaire) 3- le document textuel synchronisé Institut de France la vidéo 2- le chapitrage de la vidéo (vignettes) 3- les images synchronisées Ces deux illustrations montrent une structure type des applications Rich Média à savoir une fenêtre qui intègre ici trois zones distinctes :

3 1- Une zone vidéo et sa barre de commande 2- Une zone plan ou sommaire (texte ou vignettes) 3- Une zone documents synchronisés (texte ou images) Dans les deux cas la vidéo chapitrée (dans un cas sur un plan, dans l autre sur des images vignettes) est agrémentée de médias (dans un cas du texte, dans l autre des images). Bien évidemment d autres combinaisons de vidéo, audio et média sont possibles. Par ailleurs le Rich Média induit également un ensemble de technologies et de processus adaptés qui associés permettent de mettre efficacement en œuvre ce service notamment le «streaming» pour la diffusion de la vidéo ou de l audio ou bien le «deep tagging» pour l indexation de la vidéo ou de l audio. Ces technologies seront vues plus loin dans ce dossier. Les usages Les domaines applicatifs du Rich Média sont nombreux de l utilisation grand public au développement pour les entreprises (publicité, marketing, évènementiel, rapports financiers ou autres ) ou le web-reportage pour le journalisme sans oublier, ce qui représente peut être son usage le plus prometteur, le monde éducatif. Dans le cadre de ce dossier et de ses limites nous aborderons plus en détail le Rich Média pour l éducation mais les principes de base restent les mêmes quelque soit l application à savoir l intégration de divers médias, la synchronisation et l indexation. Néanmoins en annexe 1 pour les bannières publicitaires et en annexe 2 pour le webreportage deux fiches synthétiques de ces applications sont proposées. En ce qui concerne l utilisation pour l éducation il reste fondamental de mener une réflexion approfondie sur le comportement cognitif de l utilisateur en particulier les questions de la charge cognitive de l apprenant et de l ergonomie cognitive de l interface. Dans l illustration qui suit (logiciel Momindum Studio de Momindum) il s agit d un cours d économie où l interface utilisateur présente les 5 régions possibles du logiciel : 1- la vidéo 2- le chapitrage de la vidéo 3- les médias affichés synchronisés 4- les médias liés synchronisés 5- la zone interactive (notes, liens, mots clefs)

4 Sciences Politiques A partir des quelques illustrations que l on vient de voir il est aisé de dégager les avantages d un service Rich Média pour l utilisateur : Plusieurs type de support (dont l audiovisuel) sont combinés dans l objectif de véhiculer l information le plus efficacement possible. La combinaison judicieuse de ces supports apporte une profondeur à l information. La synchronisation des canaux d information entre eux assure une complémentarité du message qui peut s avérer performante Les présentations offrent à l utilisateur une interactivité qui lui permet une sélection. En éducation on granularise le message pédagogique ce qui permet un choix des contenus pour un profil de formation. Les avantages Afin d illustrer ces avantages on peut effectuer un rapprochement avec le DVD, produit grand public. Celui-ci est interactif (menu et chapitres), le sous-titrage combine plusieurs supports d information (audio et image pour le film, texte pour le sous-titre), ces supports sont évidemment synchronisés. Une présentation Rich Média offre donc pour l utilisateur un contenu varié et modulable à la demande.

5 Les limites Les avantages mêmes que l on vient d évoquer entrainent les propres limites d un service Rich Média. La présentation est pour l auteur intrinsèquement complexe à réaliser pour l association des médias dans une même fenêtre et leurs synchronisations. La combinaison des supports interroge sur des questions d ordre cognitif et en particulier dans le cas d un acte de formation sur la problématique de la charge cognitive de l apprenant face à une variété simultanée de ressources. Si évidemment la qualité du contenu proposé est bien le tout premier facteur d une présentation il en demeure pas moins que l ergonomie (domaine de l ergonomie cognitive) même de l écran reste un élément fondamental, design compris. A cela peut s ajouter des critères d ordre technique pour la visualisation des présentations même si les technologies actuelles ont évoluées dans un sens favorable : o L adéquation entre les formats des fichiers et les lecteurs installés pour une visualisation des contenus de la présentation (compatibilité). o Coté auteur, la question des serveurs streaming ou non pour une lecture en ligne. o Le débit internet de la connexion de l utilisateur lié au poids informatique souvent non négligeable de la présentation. o Le coût en développement (compétences de l auteur, temps passé, outils de développement) d un service Rich Média est bien plus élevé que des méthodes plus conventionnelles de diffusion de l information. Bien qu elle dépasse le cadre de ce dossier et surtout pour une présentation Rich Média liée à une action d apprentissage l approche en psychologie cognitive ne peut être délaissée sans prendre le risque considérable d un outil techniquement performant qui n atteint pas l objectif pédagogique de formation fixé. Langage et technologies De nombreux produits permettent de créer plus ou moins facilement du contenu Rich Média en s appuyant sur différentes technologies qui sont dans ce dossier présentées uniquement dans leur implication Rich Média sans être développées dans le détail.

6 Parmi les solutions nous distinguerons le langage de création de documents Rich Média, les technologies associées au Rich Média et enfin, dans le paragraphe suivant, les éditeurs Rich Média. SMIL : Synchronized Multimedia Intégration Language Il s agit d un langage normalisé d intégration et de synchronisation pour des présentations multimédias développé sous l égide du consortium international W3C (World Wide Web Consortium), organisme officiel de normalisation du web. Le SMIL, de la famille XML (extensible Markup Language) dont la structure s apparente au HTML (Hypertext Markup Language), est un langage de balisage qui décrit le déroulement spatial et temporel des éléments intégrés (vidéo, audio, image, texte ) dans la présentation multimédia. Du point de vue pratique il permet de définir dans quelle région d une fenêtre le contenu va s afficher (répartition spatiale des objets multimédias), à quel moment et combien de temps (répartition temporelle de ces objets). L objectif dans ce dossier est de présenter la structure d un fichier SMIL (.smil) sans entrer dans les détails de la programmation. Un tel fichier peut être saisi directement sur un bloc-notes de type Notepad (préférer la version Notepad++, coloration des balises) et nécessite pour sa lecture un lecteur adapté tel que les players RealOne, Window Média ou QuickTime. Fichier SMIL <smil> <head> Déclaration <layout> </layout> </head> Méta données du document Définition des régions (zones spatiales du document) Exécution <body> Insertion de différents médias (texte, image, son, vidéo, animation) <par> ou <seq> Synchronisation temporelle des médias </par> ou </seq> </body> </smil>

7 Exemple Dans l exemple ci-dessous, volontairement simple, deux images avec certains attributs sont affichées dans une fenêtre. On peut évidemment imaginer une structure de fichier avec d autres attributs, d autres régions, d autres types de médias <smil> <head> <meta name="title" content="exemple d un fichier SMIL"/> <layout> <root-layout width="300" height="200" background-color="black"/ > <region id= "region1" left= "75" top= "50" width="32 " heidht= " 32 " z-index="1"/> <region id="region2" left="100" top="175" width="80" heidht="80" z-index="2"/> </layout> </head> <body> <img src="image1.jpg" alt="image 1" region="region1" begin="1s" dur="5s"/ > <img src="image2.jpg" alt="image 2" region="region2" begin="1s" dur="5s / > </body> </smil> Pour aller plus loin dans le langage SMIL, tutoriel : Deep tagging Le deep tagging est une technologie qui permet d accéder par un lien hypertexte à un instant précis d une vidéo. Il n est plus obligatoire de visualiser la production audiovisuelle dans son intégralité pour accéder à une information dans la mesure où celle-ci est découpée en séquences (tagger) qui donne, par un lien, un accès direct à certaines scènes. La vidéo est chapitrée par des titres, sous-titres, mots clefs ou commentaires. Le tag (étiquette, marqueur, index, libellé) est donc un terme associé à une parcelle de l information qui décrit son objet pour permettre une classification. En éducation cette technologie permet une granularité pédagogique fort intéressante dans la mesure où l apprenant peut construire son parcours de formation sans aborder des parties qui ne présentent pas pour lui d intérêt. A titre d exemple une conférence filmée sur un sujet donné n est pas forcément visualisée dans son intégralité si seulement quelques chapitres pertinemment titrés correspondent aux attentes de l auditeur. Comme de plus des médias sont synchronisés à la vidéo l utilisateur accède ainsi à l ensemble de l information disponible pour le titre sélectionné. Le chapitre suivant sur les éditeurs Rich Média montre comment cette fonction est mise en œuvre du coté de l auteur de la présentation.

8 Streaming Le streaming est une technologie qui permet de diffuser en flux continu le son ou la vidéo sur l Internet sans télécharger côté utilisateur la totalité du fichier avant lecture. D un point de vue technique les premiers paquets d information sont stockés dans une mémoire tampon (buffering) qui dès qu elle est pleine, soit quelques secondes, permet la diffusion. Ce service présente des avantages incontestables : Accessibilité : autant en haut qu en bas débit avec des attentes faibles puisque la méthode ne nécessite pas de télécharger au préalable de la lecture l ensemble du fichier quelque soit son poids informatique. Live : à l instar des médias audiovisuels classiques le streaming permet une diffusion en direct (live) et en différé (VOD). Diffusion : elle peut se faire en ligne dans le monde entier au même moment sans contrainte d espace ni de temps. Lecture : les plug in permettant la lecture sont gratuits. Les contenus en streaming d'une qualité toujours meilleure se multiplient sur l internet : TV sur PC, films en streaming HD, Web radio et Web TV, sites de vidéo et de musique en ligne, sites de partage multimedia... La diffusion de la vidéo ou de l audio dans un service Rich Média met en œuvre la technologie du streaming. Les éditeurs Rich Média Les éditeurs Rich Média, à l instar des éditeur HTML pour les sites web, permettent de créer des présentations multimédias sans programmation SMIL ou XML. Ces applications logicielles permettent à l auteur de mener facilement un projet jusqu'à son export pour une utilisation en local ou en ligne. Tous les éditeurs n ont pas des possibilités techniques équivalentes ou les mêmes fonctions avancées. Dans le cadre de cette étude, bien que d autres applications existent et cohabitent, je propose la présentation détaillée de deux logiciels propriétaires (Momindum Studio et Rich Média Suite Editor et Designer) qui en France se partagent la plus grosse partie du marché. L objectif n est pas ici de chercher à acquérir une maitrise approfondie de ces applications mais plus d en extraire leurs possibilités, points forts et limites dans l esprit d un comparatif qui ne peut qu éclairer efficacement dans le choix d un produit d édition Rich Média.

9 Enfin je propose pour terminer ce tour d horizon une présentation rapide et succincte d une application open-source : Limsee3 Rich Média Suite ( L application Rich Média Suite se décline en deux produits complémentaires et imbriquées : Richmedia Suite Editor pour l édition des contenus et Richmedia Suite Designer pour le design personnalisé du projet. Le projet se traite en diverses étapes dont une des combinaisons possibles peut être la suivante : Le projet Rich Média Gérer le projet Traiter le projet Pour éditer les contenus : RichMedia Suite Editor Importer la vidéo ou Capturer la vidéo Traiter les médias Traiter les notes Editer la vidéo Pour définir les templates : RichMedia Suite Designer 1 Synchroniser l ensemble Exporter le projet Publier le projet 1- le design peut être traité dès le début du projet Ce qui donnerait à titre d illustration la présentation ci-dessous.

10 1 2 L écran de l éditeur se découpe en quatre zones principales : 1. Zone vidéo 2. Zone médias et notes pour la visualisation 3. Zone médias et notes pour l acquisition et la configuration 4. Zone de chapitrage et de synchronisation 4 3 Le Designer permet de définir et de visualiser les régions qui vont constituer l écran de la présentation. L écran lui même ainsi que chacune des régions sont paramétrables en terme de position, de taille, de fond (image ou couleur) et de police. 5 1 Export A l export la combinaison de l édition des contenus et de son design constitue la présentation telle que l utilisateur la recevra en local ou en ligne vidéo 2- chapitres 3- média 4- note 5- titre 6- logo 7- lien url 6

11 Rich Média Suite est un logiciel complet, le seul parmi ceux testés, à présenter un module de design performant qui permet de personnaliser réellement le graphisme de son projet. La vidéo Les formats des vidéos importés sont variés (wmv, flv, avi, mp4, mpeg, mov, vob ) et l application à sa propre fonction de transcodage interne en wmv ou flv au choix et si nécessaire. De plus la vidéo peut être non seulement importée mais également capturée en direct soit à partir d une webcam soit de l écran de l ordinateur. D autres fonctions utiles sont liées à la vidéo comme le découpage d un extrait entre des points d entrée et de sortie ou la capture d un image fixe extraite de la vidéo. Les médias associés Par ailleurs les médias synchronisés proposent un large éventail de format : image (gif, jpg ou png), diaporama PowerPoint (chaque diapositive est transformée en une image), capture d écran (zone ou totalité), html ( page importée ou créée, lien url) et Flash (vidéo flv ou animation swf). On peut donc imaginer de nombreuses possibilités d association selon les objectifs du projet. Le logiciel propose également sous forme de notes synchronisées un éditeur html qui permet toutes les subtilités de ce langage. La synchronisation La synchronisation permet d indexer des médias et des notes, d ajouter des marqueurs vides, d éditer des titres des chapitres, d éditer le time code des marqueurs, d éditer les médias et les notes en cours, de gérer les marqueurs, les médias et les notes. L export L export Flash (flv + html) se fait selon un «template» prédéfini d une bibliothèque ou personnalisé (module Designer) et permet des choix selon l exploitation prévue : cd-rom, serveur streaming, serveur http (option split vidéo) La publication La publication consiste à transférer les contenus du projet vers des espaces en ligne. Par exemple un transfert FTP permettra de déposer chez un hébergeur le projet afin qu il soit consultable à distance. Dans ces cas il faut disposer des paramètres de connexion vers le service (adresse, identifiant et mot de passe). Le Designer Ce module permet de créer totalement son propre «template» en définissant l écran et les régions qui sont paramétrables pour obtenir sa présentation personnalisée. Rich Média Suite Editor et Designer proposent un ensemble complet et cohérent assez simple à utiliser par une interface intuitive performante bien que le designer soit plus technique. Les formats des fichiers importés sont nombreux et variés ce qui offre un large choix de possibilités. De plus de nombreux outils et fonctions intégrés facilitent grandement le travail de l auteur.

12 Pour télécharger les versions d évaluation : Evaluation EDITEUR : (complète avec une incrustation sur la présentation exportée) Evaluation DESIGNER : (complete sans restriction) Momindum Studio ( La solution Momindum est très rapidement exploitable et propose une interface simple notamment par l intermédiaire d une «timeline» (à l image du montage audiovisuel) qui permet de synchroniser sur la vidéo les chapitres (plan), les ressources documentaires affichées ou annexées et les mots clefs la vidéo 2- le chapitrage (plan) 3- les ressource documentaires (diaporama, url, documents) 4- les mots clefs 5- la timeline (synchronisation)

13 La présentation après prévisualisation ou publication se présente comme ci-dessous. La vidéo ou l audio L importation de la vidéo se fait aux formats wmv ou avi et pour la bande son aux formats wma ou mp3. Tout autre format nécessite un transcodage préalable par une autre application logicielle. Les ressources documentaires associés Ils se déclinent en trois types : le diaporama PowerPoint, l adresse URL dont la destination peut s ouvrir dans la présentation, les documents qui sont aux formats jpeg, jpg, gif, png, swf et pdf. A noter : Momindum Timecoder, logiciel complèmentaire de Momindum Studio, qui est un outil pour l'enregistrement de vos diapositives PowerPoint et de ses time codes. La synchronisation Cette étape se réalise indexant à la vidéo les chapitres du plan, les ressources documentaires et les mots clefs. A noter qu une ressource documentaire synchronisée peut être soit affichée dans la présentation, soit annexée et qui peut s ouvrir par lien hypertexte Cette synchronisation se visualise sur la «timeline» pour tous les éléments synchronisés, affichés ou annexés. La publication (export de la présentation) Elle peut être pré visualisée. Cette publication est proposée en divers modes possible : cdrom, zippée, serveur web ou streaming et sur des plateformes dédiées Momindum.

14 Bien lire pour chaque mode les conditions de publication qui sont parfois restrictives. Des modèles (standard ou spécial) et thèmes sont également proposés. Les thèmes offrent la possibilité de placer deux images ou liens vers des pages web associées et de changer les couleurs des bandeaux, bordures des fenêtres, boutons et menus. En fait l application permet une personnalisation de la présentation qui s apparente aux skins. L application Momindum Suite est une solution appropriée dont l apprentissage est aisée et rapide pour la réalisation d une présentation Rich Média simple. Elle permet une création efficace mais qui ne peut pas présenter une véritable personnalisation si ce n est celle évoquée. Par exemple les régions ne sont pas paramétrables ni en position ni en taille ce qui induit une géographie d écran figée. Le logiciel présente un module complémentaire pour la synchronisation automatique d un diaporama. Comparatif Les coûts Rich Média Suite est vendu à la licence sur site, dégressif selon le nombre. Les versions complètes d évaluation permettent d utiliser l application avant achat éventuel L'utilisation de Momindum Studio est gratuite en version standard limitée. Pour les fonctions avancées il est possible d'acheter du crédit temps qui correspond au temps de la vidéo publiée. Le coût horaire est dégressif selon la durée achetée (2h : 100 Euros/heure jusqu'à 100h : 48 Euros/heure). Il existe une licence illimitée sur site dont le prix n est pas avancé. Momindum offre 50% de crédit temps en plus pour le milieu éducatif. La comparaison des deux offres ne peut se faire sérieusement que sur les licences site qui se négocient directement avec les deux sociétés. Les champs d application Chacune des deux applications présentent ses avantages et ses limites tels qu ils ont été évoqués précédemment. Du point de vue de l auteur non spécialisé : Pour une présentation standard sans ligne graphique personnalisée, un coût modulable en temps vidéo, une prise en main rapide, une gestion automatique d un diaporama et des mots clefs Momindum Suite est une solution performante.

15 Pour une présentation totalement personnalisée de la fenêtre de l écran et des régions, pour des formats vidéos et des médias variés, pour l intégration d outils et fonctions avancées dans le logiciel lui même Rich Média Suite Editor et Designer présentent des solutions adaptées. Limsee ( LimSee3 est un logiciel auteur open-source (développé par l INRIA dans le cadre du projet européen Palette) qui propose une édition efficace grâce à l'utilisation de modèles et à l'adaptabilité de son interface. Le document produit décrit les relations spatiales et temporelles qui existent entre les différents médias sans que ceux-ci fassent partie du document (approche SMIL). les documents sont de faible poids informatique, les médias (images, vidéos, animations, textes, audio,...) restent facilement accessibles, les ressources ne sont pas obligatoirement locales (via l'internet). LimSee3 adopte un point de vue de l'utilisateur en s appuyant sur une logique de présentation multimédia plutôt que technique. LimSee3 s'appuie sur des modèles proposés qui permettent à l'utilisateur de créer rapidement des présentations avec un minimum d efforts mais l utilisateur confirmé peut réaliser ses propres modèles. Enfin, LimSee3 propose une interface évolutive et adaptable qui peut permettre de répondre aux attentes et aux choix de chaque utilisateur. Tutoriel : Interface de l application

16 En première approche cette application est plutôt complexe à maitriser. Certaines fonctions ne sont pas très intuitives mais un approfondissement pourrait présenter un intérêt dans la mesure où le logiciel en open source est accessible gratuitement à tous. Conclusion Ce dossier se veut avant tout un tour d horizon sur le concept et les technologies du Rich Média. Il n est évidemment pas exhaustif mais doit permettre à sa lecture un éclairage assez précis et complet sur les solutions qui s offrent à l auteur pour la réalisation d une présentation Rich Média dont on peut penser qu un avenir prometteur se dessine. En ce qui concerne ce service appliqué au monde de l éducation les enjeux sont réels mais au delà de considérations techniques et de performances du logiciel il est fondamental de maitriser tous les aspects pédagogiques à la réalisation de modules d apprentissage qui ne peuvent se limiter qu à la simple conférence filmée synchronisée à des slides. Une réflexion dans ce sens s impose en considérant toute l amplitude d un service Rich Média en terme de formation : manipulation et expérimentation filmées, module autonome de connaissances, exposés enrichis

17 Annexe 1 Rich Média et publicité En règle générale le web propose trois type de publicité : - Publicité textuelle : uniquement du texte sans aucune image, c est la forme la plus simple et la plus utilisée. - Bannière classique : ici, la publicité peut contenir des images, du texte, des animations - Bannière Rich Media : enfin, la bannière Rich Media est interactive vis-à-vis de l internaute. La bannière Rich Media est sans nul doute l avenir de la publicité en ligne mais requiert des développements plus longs qu une bannière classique. D après : Attitude des internautes face aux e-pub vidéo Indicateurs Oui Non Regardez-vous les contenus vidéos en ligne? 69,5 % 31,5 % Vous souvenez-vous avoir vu le message publicitaire dans ces vidéos? 56,3 % 43,7 % Avez-vous continué à regarder la vidéo, même après avoir vu la publicité? 52,7 % 47,3 % Commentaire La progression des budgets publicitaires en ligne profite pleinement à la création vidéo, l'e-pub vidéo pesant 225 millions de dollars en 2005, selon emarketer. La part de l'e-pub vidéo devrait passer de 1,8 % à 2,6 % entre 2005 et 2006, pour un montant proche de 410 millions de dollars.

18 Annexe 2 Webreportage Le webreportage est une forme journalistique sur le web qui utilise les techniques du Rich Média. Généralement est associé à un reportage audiovisuel principal une série de liens qui enrichit l information sous forme de vidéos complémentaires, d audio, de texte, de photos. Cette forme de journalisme est définit clairement par JL Marty, directeur éditorial du site Géo dont l illustration ci-dessus en montre toutes les possibilités : «Bienvenue sur le site du transjournalisme. Autrement dit la possibilité, à travers de multiples fonctions (vidéo principale, compléments d information, making of, cartes animées ), de découvrir en profondeur une information. D une part en choisissant votre entrée, d autre part en composant votre menu éditorial comme vous l entendez. Mais si ce programme a obtenu de nombreux prix ce n est pas simplement pour le design de son interface ou son interactivité mais aussi, pour le contenu journalistique de nos WebReportages. Découvrir «le dedans du monde», c est la signature sensible du transjournalisme» On retiendra de cette définition quelques points qui mettent bien en valeur les enjeux du Rich Média pour le journalisme : la profondeur de l information, l interactivité (choix de l entrée et du menu) et l importance de la qualité des contenus proposés.