https://www.innovation-pedagogique.fr/ Un site participatif, lieu de partage et d'échange autour des initiatives en transitions et des innovations pédagogiques dans l'enseignement supérieur francophone. fr SPIP - www.spip.net https://www.innovation-pedagogique.fr/local/cache-vignettes/L64xH64/siteon0-b9b71.png?1691667292 https://www.innovation-pedagogique.fr/ 64 64 https://www.innovation-pedagogique.fr/article3452.html https://www.innovation-pedagogique.fr/article3452.html 2018-08-09T06:00:00Z text/html fr Géraldine Geoffroy <p>Réalité virtuelle, réalité augmentée, réalité mixte… autant de termes qui passent petit à petit dans le langage courant, autant d'applications pratiques de ces concepts qui sortent de la confidentialité et intègrent de plus en plus notre quotidien.<br> Or il se trouve qu'il en va de ces technologies comme de la plupart des outils de développement (web) en général : présentant à leur début, pour qui souhaite se les approprier, un ticket d'entrée technique assez conséquent (connaissance de langages informatiques « lourds » type Java ou C++, frameworks peu documentés, …), leur prise en main progressive par une communauté grandissante favorise la démocratisation de leur accessibilité...</p> - <a href="https://www.innovation-pedagogique.fr/rubrique3.html" rel="directory">Veille</a> <div class='rss_texte'><div class="center text-center"> <p><i>Un article paru initialement le 22 mai 2018 sur le site <a href="http://bibliotheque-blogs.unice.fr/" class="spip_url spip_out auto" rel="nofollow external">http://bibliotheque-blogs.unice.fr/</a></i></p> </div><h1 class="title">La réalité augmentée en bibliothèque : quelques applications</h1><div class="post-content clear-block"> <p>Réalité virtuelle, réalité augmentée, réalité mixte… autant de termes qui passent petit à petit dans le langage courant, autant d'applications pratiques de ces concepts qui sortent de la confidentialité et intègrent de plus en plus notre quotidien.<br> Or il se trouve qu'il en va de ces technologies comme de la plupart des outils de développement (web) en général : présentant à leur début, pour qui souhaite se les approprier, un ticket d'entrée technique assez conséquent (connaissance de langages informatiques « lourds » type Java ou C++, frameworks peu documentés, …), leur prise en main progressive par une communauté grandissante favorise la démocratisation de leur accessibilité, parfois même jusqu'à finalement intégrer les standards du web via de nouvelles API pour navigateurs spécifiées par le W3C (voir par exemple ce <a href="https://www.w3.org/blog/2018/01/towards-the-immersive-web/" target="_blank" rel="noopener noreferrer">billet</a> sur le blog du W3C à propos des modalités de prise en compte du « web immersif » dans les travaux du consortium).</p> <p>Ce fut le cas pour le développement d'applications mobiles, avec au fil du temps la possibilité de développer des apps dites hybrides (en effet ce type d'applications se fondent sur des environnements web « classiques » encapsulés dans des webViews, et dont le comportement se rapproche de celui des apps natives). C'est aujourd'hui le cas aussi avec des frameworks de VR (réalité virtuelle) et AR (réalité augmentée) libres et/ou open source, et des navigateurs de plus en plus puissants gérant nativement le traitement de données de positions géographiques, d'images, de sons, etc…</p> <p>Focus donc sur la réalité augmentée et deux exemples appliqués aux « nouveaux » types de services que les bibliothèques pourraient rendre avec ces technologies</p> <h3 class="h3 spip">Le principe général de la réalité augmentée…</h3> <p>… consiste à superposer des éléments virtuels à la réalité que nous percevons avec nos 5 sens, autrement dit à combiner en temps réel notre environnement habituel en 3D avec des données numériques virtualisées, si possible de manière interactive (l'utilisateur peut interagir avec cette sur-couche virtuelle) et contextualisée (les données qui apparaissent sont liées au contexte de l'environnement). Pour cela deux techniques permettent de lier le virtuel au réel : l'utilisation de données relatives à la position et aux mouvements de l'utilisateur (coordonnées GPS, accéléromètre, magnétomètre…) ou l'utilisation de la reconnaissance de formes pour la détection de « marqueurs ».</p> <h3 class="h3 spip">Voici donc un premier exemple…</h3> <p>… sous forme d'application pour smartphone développée pour l'exemple (pour l'instant sous Android, installable via le <a href="https://play.google.com/store/apps/details?id=com.gege.buautour" target="_blank" rel="noopener noreferrer">Play Store</a>) qui active la caméra du smartphone pour afficher en superposition les BU qui entourent l'utilisateur en fonction de l'orientation du mobile, calcule la distance qui les séparent de la position de l'utilisateur, cartographie les trajets, propose les liens vers leur site web… L'appli propose également une fonctionnalité de scan d'ISBN et de géolocalisation des bibliothèques qui possèdent le document selon le même procédé de réalité augmentée.</p> <table> <tbody> <tr> <td><a href="http://bibliotheque-blogs.unice.fr/httbu/wp-content/uploads/sites/5/2018/04/Screenshot_20180420-121145.png"><img class='wp-image-2319 aligncenter' src='https://www.innovation-pedagogique.fr/local/cache-vignettes/L500xH889/Screenshot_20180-6830fcf2-86914.png?1706908426' alt="" scale="0" width='500' height='889' /></a></td> <td><a href="http://bibliotheque-blogs.unice.fr/httbu/wp-content/uploads/sites/5/2018/04/Screenshot_20180420-121159.png"><img class='wp-image-2319 aligncenter' src='https://www.innovation-pedagogique.fr/local/cache-vignettes/L500xH889/Screenshot_20180-e1b15930-b06b8.png?1706908426' alt="" scale="0" width='500' height='889' /></a></td> <td><a href="http://bibliotheque-blogs.unice.fr/httbu/wp-content/uploads/sites/5/2018/05/Screenshot_20180501-145209.png"><img class='wp-image-2325 aligncenter' src='https://www.innovation-pedagogique.fr/local/cache-vignettes/L500xH889/Screenshot_20180-b2472ad2-1fdf9.png?1706908426' alt="" scale="0" width='500' height='889' /></a></td> </tr> </tbody> </table> <p>Cette application, perfectible à bien des égards, a pour but d'illustrer l'intérêt de ces technologies en terme d'offre de services contextualisés, que ce soit en lien avec des informations pratiques (quelle est la BU la plus proche de moi, comment m'y rendre en bus, à quelle heure ferme-t-elle ?) ou les collections. Soyons réalistes : en soi scanner un ISBN et visualiser les BU qui possèdent le document n'est pas d'une utilité folle (qui a besoin de connaitre les BU qui possèdent le document qu'il tient en main ?), mais l'intérêt sous-jacent est de proposer un cas d'école des possibilités de croisement entre :</p> <ul> <li>d'une part : accès nomade, simplifié voire ludique à l'information par un smartphone</li> <li>et d'autre part : capacités d'exposition en temps réel de métadonnées (notamment via des API) alliées au potentiel des enrichissements issus de l'alignement des référentiels de l'ESR.</li> </ul> <p>Quelques exemples à la volée de « mashups » virtuels possibles sur la base d'un ISBN ou d'un code-barre : superposer au document, si elles existent, les publications dans HAL de l'auteur, sa biographie ou sa photo Wikipedia, des critiques de livres pour des romans, des vidéos de l'INA sur le même sujet, des données locales comme le nombre de prêts, la date d'entrée dans les collections,…</p> <p>Pour résumer, tout le travail d'ouverture et de liage des données bibliographiques ayant pour but de pousser leur intégration dans le web pourrait ainsi trouver un nouveau « débouché » clairement orienté services à l'utilisateur dans le monde des applications mobiles, qui sera lui aussi un jour, n'en doutons pas, indexé par les moteurs de recherche.</p> <h3 class="h3 spip">Deuxième exemple…</h3> <p>… plus accessible car ne nécessitant aucune installation (tout se passe dans le navigateur) et se basant sur le recours à un marqueur :</p> <ol> <li style="text-align: left">ouvrez <a href="https://gegedenice.github.io/web-ar/docelec/docelec-marker.html" target="_blank" rel="noopener noreferrer">cette url</a> dans le navigateur de votre téléphone, ou flashez ce QR code</li> </ol> <p><a href="http://bibliotheque-blogs.unice.fr/httbu/wp-content/uploads/sites/5/2018/05/github.io-qrcode.png"><img class='wp-image-2347 aligncenter' src='https://www.innovation-pedagogique.fr/local/cache-vignettes/L410xH410/githubio-qrcode-8e932082-abe45.png?1706908426' alt="" scale="0" width='410' height='410' /></a></p> <p> </p> <ol> <li>pointez alors la caméra du téléphone vers ce marqueur</li> </ol> <p><a href="http://bibliotheque-blogs.unice.fr/httbu/wp-content/uploads/sites/5/2018/04/hiro-marker.png"><img class=' wp-image-2318 aligncenter' src='https://www.innovation-pedagogique.fr/local/cache-vignettes/L156xH158/hiro-marker-91185f26-0d53d.png?1706908426' alt="" scale="0" width='156' height='158' /></a></p> <p> </p> <p><a href="http://bibliotheque-blogs.unice.fr/httbu/wp-content/uploads/sites/5/2018/05/Screenshot_20180430-183935.png"><img class='alignleft wp-image-2335' src='https://www.innovation-pedagogique.fr/local/cache-vignettes/L500xH889/Screenshot_20180-51f3ae47-922ad.png?1706908427' alt="" scale="0" width='500' height='889' /></a></p> <p> </p> <p>vous verrez apparaître cette forme en 3D, visez-là avec le pointeur, tapez sur l'écran : celle-ci pointe alors vers un lien profond dans notre catalogue sur les ressources électroniques en sociologie.</p> <p> </p> <p>Cette page web (en pur html/javascript) a un fonctionnement on ne peut plus simple : le navigateur détecte la forme du marqueur (qui peut être n'importe quoi grâce à ce petit <a href="https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html" target="_blank" rel="noopener noreferrer">utilitaire en ligne</a> de générateur de marqueur) et lui associe une forme en 3D (qui peut également être n'importe quoi, la seule limite étant l'imagination), qui réagit au toucher pour ouvrir une nouvelle page web à l'instar d'un lien hypertexte sur une page web (mais que l'on peut programmer pour réagir de n'importe quelle manière).</p> <p>Bref on imagine immédiatement les possibilités en terme de signalement des ressources électroniques se juxtaposant « dans la réalité » aux collections imprimées, la contextualisation de l'offre de tutoriels vidéos, de nouvelles réponses à la question « où sont les livres sur… ».</p> <p>Sans parler des expériences de réalité virtuelle qui elles aussi vont pouvoir démultiplier les possibilités de navigation dans les collections quelles qu'elles soient (<a href="http://www.bnf.fr/fr/evenements_et_culture/expositions/f.bibliotheque_la_nuit.html" class="spip_url spip_out auto" rel="nofollow external">http://www.bnf.fr/fr/evenements_et_culture/expositions/f.bibliotheque_la_nuit.html</a>) …</p> <h3 class="h3 spip">Les points techniques</h3> <p><strong>L'application mobile Bu Autour</strong></p> <ul> <li>réalisée sous node.js et l'environnement <a href="https://phonegap.com/" target="_blank" rel="noopener noreferrer">Phonegap/Cordova</a>, avec le framework CSS <a href="https://materializecss.com/" target="_blank" rel="noopener noreferrer">Materialize</a></li> <li>le code source est <a href="https://github.com/gegedenice/buautour" target="_blank" rel="noopener noreferrer">ici</a></li> <li>Pré-requis de fonctionnement : la géolocalisation (de préférence en haute précision) du téléphone doit être activée et le mobile doit être équipé du capteur de type magnétomètre (pour permettre de déterminer l'orientation par rapport au pole nord magnétique).</li> </ul> <p><strong>La réalité augmentée par détection de marqueur</strong></p> <ul> <li>page web réalisée avec le framework <a href="https://aframe.io/" target="_blank" rel="noopener noreferrer">A-Frame</a>, les librairies <a href="https://github.com/jeromeetienne/AR.js/blob/master/README.md" target="_blank" rel="noopener noreferrer">ar.js</a> (pour le support de réalité augmentée) et <a href="https://threejs.org/" target="_blank" rel="noopener noreferrer">three.js</a> (pour le rendu d'objet en 3D)</li> <li>le code source est <a href="https://github.com/gegedenice/web-ar" target="_blank" rel="noopener noreferrer">ici</a></div>