H5P: Image Juxtaposition: diferència entre les revisions

Revisió de 12:50, 9 jul 2025

Què és?

Image Juxtaposition és un contingut H5P que permet comparar dues imatges interactivament. Un bon exemple és que les dues imatges representin el mateix però en diferents moments o sota diferents perspectives.

Com es configura

Per donar d'alta un contingut H5P, et suggerim que ho facis des del banc de contingut de l'aula on voldràs fer servir aquest contingut (si et cal, després tindràs diferents maneres de reutilitzar-la en altres aules Moodle).

En la pàgina principal de l'aula, selecciona l'opció del menú horitzontal "més" i després "banc de contingut".

Aquí triarem el tipus de contingut H5P que volem configurar, en aquest cas "Image Juxtaposition".

Aquest contingut H5P es configura tot en una pàgina.

Cal que posis el nom de l’activitat (1) i afegeixis un encapçalament (2).

Tant en l’apartat de la primera imatge com per la segona, cal que cliquis Afegeix (1) per pujar la imatge. Pots escriure un text alternatiu, per si la imatge no es carrega (2) , un text que es mostri quan es passa el ratolí per sobre (3) i un text que se sobreposarà a la imatge (4).

En l’apartat de configuració del comportament, pots determinar la situació inicial de la barra que separarà les dues imatges (1), si aquesta barra és horitzontal o vertical (2) i el seu color (3).

Per confirmar la configuració del contingut H5P, clica el botó Desa (4).

Exemple

Altres informacions i ajudes d'interès

Si vols ampliar la informació, pots trobar més detalls a la pàgina web d'H5P.

Pots, també, consultar la llista d'altres tipus de continguts H5P.

@@ Línia 1: / Línia 1: @@
-[[Fitxer:Imagejuxtaposicionm.png|esquerra|145x145px]]
+{{Template:TipusH5P}}
-''Image Juxtaposition'' és un contingut H5P que permet comparar dues imatges interactivament. Un bon exemple és que les dues imatges representin el mateix però en diferents moments o sota diferents perspectives.
+=== Què és? ===
+[[Fitxer:Before-after-image.png|esquerra|70x70px]]
+''Image Juxtaposition'' és un contingut [[H5P]] que permet comparar dues imatges interactivament. Un bon exemple és que les dues imatges representin el mateix però en diferents moments o sota diferents perspectives.
-Per utilitzar el Accordion a la nostra aula virtual, primer ens hem de dirigir al campus virtual i seleccionem a l'aula que volem incrustar l'H5P.
+=== Com es configura ===
-Dins d'una classe seleccionem "més" i seleccionem "banc de continguts"
+Per donar d'alta un contingut H5P, et suggerim que ho facis des del banc de contingut de l'aula on voldràs fer servir aquest contingut (si et cal, després tindràs diferents maneres de reutilitzar-la en altres aules Moodle).
-[[Fitxer:Imagefffggg.png|center|miniatura|486x486px]]
+En la pàgina principal de l'aula, selecciona l'opció del menú horitzontal "més" i després "banc de contingut".[[Fitxer:BancContingutMoodle.png|center|587x587px|miniatura]]
-Aquí triarem el tipus de contingut H5P que volem configurar, en aquest cas "Image Juxtaposition"
-[[Fitxer:Image323232rrrrr.png|center|miniatura|458x458px]]
-Aquest contingut H5P es configura tot en una pàgina. Cal que posis el nom de l’activitat (1) i afegeixis un encapçalament (2).
+Aquí triarem el tipus de contingut H5P que volem configurar, en aquest cas "Image Juxtaposition".
+[[Fitxer:H5P ImageJuxtaposition 01 M4.png|center|miniatura|700x700px]]
-[[Fitxer:Image33232.png|center|miniatura|551x551px]]
+Aquest contingut H5P es configura tot en una pàgina.
-Tant en l’apartat de la primera imatge com per la segona, cal que cliquis Afegeix (1) per pujar la imatge. Pots escriure un text alternatiu, per si la imatge no es carrega (2) , un text que es mostri quan es passa el ratolí per sobre (3) i un text que se sobreposarà a la imatge (4).
-[[Fitxer:Image2222v.png|center|miniatura|425x425px]]
+Cal que posis el nom de l’activitat (1) i afegeixis un encapçalament (2).
-[[Fitxer:Imagerrrrgggg.png|center|miniatura|377x377px]]
+[[Fitxer:H5P ImageJuxtaposition 02.png|center|miniatura|700x700px]]
-En l’apartat de configuració del comportament, pots determinar la situació inicial de la barra que separarà les dues imatges (1), si aquesta barra és horitzontal o vertical (2) i el seu color (3).
-Per confirmar la configuració del contingut H5P, clica el botó ''Desa'' (4).
+Tant en l’apartat de la primera imatge com per la segona, cal que cliquis ''Afegeix'' (1) per pujar la imatge. Pots escriure un text alternatiu, per si la imatge no es carrega (2) , un text que es mostri quan es passa el ratolí per sobre (3) i un text que se sobreposarà a la imatge (4).
+[[Fitxer:H5P ImageJuxtaposition 03.png|center|miniatura|700x700px]]
+[[Fitxer:H5P ImageJuxtaposition 04.png|center|miniatura|700x700px]]
-[[Fitxer:Imagecuando.png|center|miniatura|455x455px]]
+En l’apartat de configuració del comportament, pots determinar la situació inicial de la barra que separarà les dues imatges (1), si aquesta barra és horitzontal o vertical (2) i el seu color (3).
+Per confirmar la configuració del contingut H5P, clica el botó ''Desa'' (4).
+[[Fitxer:H5P ImageJuxtaposition 05.png|center|miniatura|700x700px]]
+=== Exemple ===
+<iframe key="ubiqua"path="h5p/embed.php?url=https%3A%2F%2Fubiqua.uvic.cat%2Fpluginfile.php%2F274388%2Fmod_h5pactivity%2Fpackage%2F0%2Fimage-juxtaposition-494.h5p&amp;component=mod_h5pactivity"/>
+=== Altres informacions i ajudes d'interès ===
+Si vols ampliar la informació, pots trobar més detalls a la [https://h5p.org/ pàgina web d'H5P].
-<iframe key="ubiqua"path="h5p/embed.php?url=https%3A%2F%2Fubiqua.uvic.cat%2Fpluginfile.php%2F274388%2Fmod_h5pactivity%2Fpackage%2F0%2Fimage-juxtaposition-494.h5p&amp;component=mod_h5pactivity"/>
+Pots, també, consultar la [[Tipus d'H5P|llista d'altres tipus de continguts H5P]].
-<iframe key="ubiqua"path="h5p/h5plib/v126/joubel/core/js/h5p-resizer.js"></script>"/>