Utilisation des iframes dans Clint

Digression sur iframe
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Klynt
Revoir le teaser Je m'abonne
Transcription

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis

59,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo sont :
- Apprendre à intégrer diverses ressources web dans Clint avec des iframes.
- Comprendre comment ajuster les dimensions des iframes pour un rendu optimal.
- Découvrir des exemples pratiques d'intégration de vidéos, flux Twitter, présentations, sons, et frises chronologiques.

Découvrez comment utiliser les iframes pour intégrer diverses ressources web dans vos projets Clint, en enrichissant votre contenu avec des vidéos, des flux Twitter, des présentations, et plus encore.

Dans cette leçon, nous explorons l'utilisation des iframes pour intégrer diverses ressources web dans Clint. Nous couvrons plusieurs exemples pratiques d'intégration de contenu, notamment des vidéos de YouTube et Vimeo, des flux Twitter, des présentations Slideshare ou Prezi, des sons Soundcloud, et des frises chronologiques.
Nous verrons comment personnaliser les dimensions des iframes pour les adapter parfaitement à votre projet, et comment ces intégrations peuvent ajouter une dimension interactive et participative à vos projets web. Nous explorerons également l'utilisation de l'iframe pour intégrer des diaporamas de présentation hébergés en ligne, et comment cela peut être utile pour les étudiants, chercheurs, professeurs, et autres professionnels. Enfin, nous découvrirons l'intégration de contenus audio via Soundcloud, et des frises chronologiques avec Timeline.js, démontrant la versatilité et le potentiel des iframes.

Voir plus
Questions réponses
Comment ajuster les dimensions d'une iframe pour une intégration optimale dans Clint ?
Pour ajuster les dimensions d'une iframe, vous devez spécifier les attributs 'width' et 'height' dans le code iframe. Assurez-vous que les dimensions choisies s'adaptent bien à votre mise en page pour éviter les déformations ou les barres de défilement inutiles.
Quels types de contenus peuvent être intégrés avec une iframe ?
Vous pouvez intégrer divers types de contenus avec une iframe, tels que des vidéos (YouTube, Vimeo), des flux de réseaux sociaux (Twitter, Instagram), des présentations (Slideshare, Prezi), des contenus audio (Soundcloud), et des outils de visualisation (frises chronologiques, cartes interactives).
Quelle est l'utilité d'un widget Twitter intégré via iframe dans un projet Clint ?
Un widget Twitter intégré via iframe permet d'afficher un flux de tweets en temps réel, provenant d'un compte spécifique ou d'un hashtag. Cela ajoute une dimension interactive et participative à votre projet Clint, en permettant aux utilisateurs de suivre et de réagir aux discussions sur les réseaux sociaux directement depuis votre site.
Bien, maintenant on va voir comment est-ce qu'on peut utiliser l'iframe pour prendre d'autres ressources du web. Alors c'est non exhaustif, une sélection non exhaustive, puisqu'on pourrait prendre énormément de choses du web, mais j'essaie de vous montrer quelques exemples. Je reviens au storyboard, je rappelle que je peux également y revenir avec le menu fenêtres, storyboard ou ctrl b, pomme b sur mac. Et maintenant on va rajouter une autre séquence iframe ici. D'ailleurs au passage, vous notez que sur ce lien entre la séquence mère et la séquence iframe youtube, je vais changer la couleur du lien. Puisque pour la première fois on a fait un lien à partir d'une image, on va lui donner une couleur, par exemple bleu. Ici donc je vais appeler cette séquence, pour rappel, le nommage des séquences est une bonne idée, est une bonne pratique. iframe vimeo Même couleur Vert. Donc je vais un peu vite, puisque maintenant on l'a vu déjà dans l'épisode précédent, je vais avoir une boîte à iframe, dans laquelle pour l'instant je n'ai rien. Mais je vais aller sur le web, aller chercher une vidéo de vimeo, pour vous montrer que ça marche pas uniquement... Pour vous montrer que ça marche pas uniquement avec youtube, mais bien sûr avec vimeo, dailymotion, etc, etc. Donc on prend cette vidéo qui est publique, on va s'occuper de l'intégration, on va même prendre des options, la taille 640 x 360 c'est très bien, afficher le lien non merci, lire automatiquement non merci, pour traiter de signature oui, pourquoi pas, et donc il me suffit dorénavant de copier le code iframe, retour dans clint, coller le code iframe, et c'est la même chose, la source c'est vimeo, il faut juste faire attention aux tailles de l'iframe, 640 x 360. 640 pixels par 360 pixels, et de cette façon, comme on l'a fait pour youtube, j'ai également pu importer une vidéo de vimeo. Pas de problème, autre exemple, je reviens à clint, retour au storyboard, on va créer encore une autre séquence iframe, on va la nommer iframe twitter par exemple, je vais un petit peu vite, c'est toujours un peu idem, et vous voyez, je vais aller sur internet, sur twitter, donc là je suis sur mon compte twitter, pour ceux qui ont un compte twitter c'est nécessaire pour pouvoir prendre un widget de twitter, donc je vais créer un nouveau widget ici, un widget de recherche, et en l'occurrence ce que je vais rechercher, je vais chercher par exemple le compte d'eleform, et voilà, on retrouve le fil twitter d'eleform, en clair ou en foncé, c'est comme on veut, par défaut 600 pixels pour nous c'est un peu beaucoup, parce que je rappelle que la hauteur c'est 545, donc je prends 500 pixels, et je vais donc créer le widget, je peux même customiser la couleur des liens, etc. Je vais donc créer un nouveau widget, et je vais donc créer le widget, je peux même customiser la couleur des liens, etc. Et de cette façon, j'ai plus qu'à copier, coller ce code qui nous est donné par twitter, et voilà. Et en l'occurrence, la seule chose à laquelle je dois faire attention, c'est surtout la hauteur de l'iframe qui serait de 500, donc je vais faire un carré, 500 par 500, je vais le mettre là, ici vous voyez qu'on ne prévisualise pas, mais si je fais une prévisualisation, contrôleur, pomer dans le navigateur web, on voit donc apparaître les tweets qui parlent d'eleform. Donc vous voyez, l'intérêt aussi de l'exemple de twitter, et c'est vrai ça marche également par exemple aussi avec Instagram, on peut très bien faire un widget Instagram et avoir un flux en temps réel de ce que les gens publient, soit à partir d'un compte Instagram, soit sur un hashtag Instagram ou Twitter, c'est que c'est une façon un peu détournée mais simple, de donner une dimension participative à un projet web. Vous pouvez très bien faire un projet, un webdoc ou quoi que ce soit avec Clint, et à partir d'un hashtag, permettre aux gens de réagir sur les réseaux sociaux, et de l'intégrer de cette façon dans Clint, tout simplement grâce à l'iframe. On revient à Clint, on revient au storyboard, je vais montrer un autre exemple encore, celui-là on va l'appeler par exemple, iframe slides, on va prendre des slides de présentation, c'est pour montrer d'autres exemples, par exemple si vous êtes étudiant, chercheur, professeur, ou que simplement dans le cadre de votre travail vous êtes amené régulièrement à faire des présentations, ce qui peut arriver, vous pouvez avoir des présentations en ligne, de type slideshare ou prezi ou par exemple slides, moi j'utilise slides, ce que je trouve assez bien fait. Là j'ai une présentation sur Clint justement, et je peux évidemment la partager, je peux envoyer le lien, et puis je peux aussi tout simplement l'embedder. Donc je vais me contenter de copier, coller ce code encore une fois, revenir dans Clint, le coller, et encore une fois, uniquement attention aux dimensions, 576 par 420, il y a l'air d'avoir un petit bug, je ne coupe pas, pour l'instant on attend. Ok, et donc de cette façon, en 576 par 420, j'ai intégré ma présentation dans Clint, je devrais l'avoir intégrée. Et voilà, voyez, à l'intérieur de mon projet Clint, je retrouve la présentation que j'ai créée. Tous ces exemples pour montrer réellement un potentiel important de ce que permet l'iframe, ce n'est pas uniquement apporter une vidéo YouTube, le premier exemple le plus évident, ou qui semblerait presque le plus évident, c'est YouTube, mais vraiment on peut intégrer des tas de choses. Je vous montre encore un ou deux autres exemples, et puis après on va passer à autre chose. Soundcloud, vous connaissez peut-être Soundcloud, si vous ne le connaissez pas, c'est on pourrait dire un peu le YouTube du son, c'est-à-dire c'est une plateforme de diffusion de son, de musique, d'interview, etc., qui encourage surtout la production de contenus originaux. Je vais aller chercher ici, sur Soundcloud, un interview que j'avais eu le plaisir de faire avec Ingrid Kopp, qui est une dame très intéressante, qui dirige un programme de narration interactive, de soutien aux nouveaux médias à New York, qui s'appelle TFI New Media. Bref, à partir de cette interview sur Soundcloud, on peut également partager, l'embarquer, ce qui est la même chose qu'intégrer, et récupérer le code iframe, récupérer le code iframe, avec une hauteur de 450, ça me va. On revient dans Clint, ok, pas de problème, il faut juste avoir une hauteur de 450 pixels, et la largeur, il y avait écrit 100%, c'est-à-dire qu'en réalité, elle va s'adapter à 100% de la largeur, quelle que soit la taille de largeur que je lui donne, et on va voir maintenant si ça a marché ici, et tout simplement ici, ça marche, pas de problème, je peux tout simplement intégrer également un son de Soundcloud. Enfin, un dernier exemple que je vais vous montrer, mais je ne vais pas créer la séquence iframe, je vais aller vous montrer rapidement un exemple d'un webdoc qui a été produit avec Clint, qui s'appelle « À la recherche des enfants du Havre », c'est un beau projet réalisé avec des lycéens, un projet réalisé avec des scolaires sur des enfants pendant la Deuxième Guerre mondiale, et il y a ici, ils ont utilisé la fonction iframe pour intégrer une frise chronologique, et comme vous pouvez le voir, cette frise chronologique, elle n'a pas été créée dans Clint, elle a été créée avec un outil multimédia et web, qui est gratuit d'ailleurs, et open source, qui s'appelle Timeline.js. Donc on peut très facilement intégrer par l'iframe une frise chronologique. Cet outil Timeline.js, vous le trouvez Timeline.nightlab.com, qui développe différents types d'outils intéressants, faciles à utiliser, et qu'on peut donc ensuite intégrer. C'est ce qu'on vient de faire en prenant le code embed ici, à l'intérieur par exemple du projet « À la recherche des enfants du Havre ». Voilà. Je m'arrêterai là parce qu'on n'a pas le temps de tous les voir, de tout voir, et puis c'est finalement un peu répétitif, mais c'est simplement pour que vous compreniez que l'iframe, c'est réellement un moyen d'enrichir votre projet Clint, et d'aller au-delà du multimédia traditionnel. Et on s'arrêtera là pour l'iframe. Prochain épisode, on va voir d'autres choses qu'on peut faire avec la vidéo sur le web dans Clint.
Nos dernières formations E-Learning