From 930f9581d809e0feefe7baed10c79735fe89d7fb Mon Sep 17 00:00:00 2001 From: Quentin Dufour Date: Tue, 21 Apr 2020 20:00:47 +0200 Subject: Guide riot --- src/@jitsi.pug | 84 ++----------------------------- src/Guide/Assets/riot_connect1.png | Bin 0 -> 502548 bytes src/Guide/Assets/riot_connect2.png | Bin 0 -> 59679 bytes src/Guide/Assets/riot_connect25.png | Bin 0 -> 84879 bytes src/Guide/Assets/riot_connect3.png | Bin 0 -> 96294 bytes src/Guide/Assets/riot_connect4.png | Bin 0 -> 96427 bytes src/Guide/Assets/riot_connect5.png | Bin 0 -> 97213 bytes src/Guide/Assets/riot_install1.png | Bin 0 -> 578590 bytes src/Guide/Assets/riot_install2.png | Bin 0 -> 1036884 bytes src/Guide/Assets/riot_install3.png | Bin 0 -> 118996 bytes src/Guide/Assets/riot_install4.png | Bin 0 -> 535159 bytes src/Guide/Assets/riot_install5.png | Bin 0 -> 401094 bytes src/Guide/Discussion.pug | 37 ++++++++++++++ "src/Guide/Visioconf\303\251rence.pug" | 88 +++++++++++++++++++++++++++++++++ src/css/main.css | 2 +- src/index.pug | 4 +- 16 files changed, 131 insertions(+), 84 deletions(-) create mode 100644 src/Guide/Assets/riot_connect1.png create mode 100644 src/Guide/Assets/riot_connect2.png create mode 100644 src/Guide/Assets/riot_connect25.png create mode 100644 src/Guide/Assets/riot_connect3.png create mode 100644 src/Guide/Assets/riot_connect4.png create mode 100644 src/Guide/Assets/riot_connect5.png create mode 100644 src/Guide/Assets/riot_install1.png create mode 100644 src/Guide/Assets/riot_install2.png create mode 100644 src/Guide/Assets/riot_install3.png create mode 100644 src/Guide/Assets/riot_install4.png create mode 100644 src/Guide/Assets/riot_install5.png create mode 100644 src/Guide/Discussion.pug create mode 100644 "src/Guide/Visioconf\303\251rence.pug" diff --git a/src/@jitsi.pug b/src/@jitsi.pug index 55ceac1..c0d3b3f 100644 --- a/src/@jitsi.pug +++ b/src/@jitsi.pug @@ -5,84 +5,6 @@ prepend root block content - .spacing - h2 Rejoindre une réunion - .spacing - p Veuillez entrer le nom de la réunion que vous souhaitez rejoindre : - input#joinname(type="text", placeholder="Nom de la réunion") - a.button#joinbtn(href="#") rejoindre - p - | Le lien d'accès rapide à cette conférence est - | - a#joinlink - - - - .spacing2 - h2 Guide de préparation d'une réunion - - h3.spacing Étape 1 : Choisissez un nom de réunion (par exemple : "karaté-lyon") - h3 Étape 2 : Informez vos participants de la date de votre réunion et du nom de la réunion - h3 - | Étape 3 : Au moment voulu, pour rejoindre la conversation, les participants devront se rendre sur le site - | - a(href="https://deuxfleurs.fr") deuxfleurs.fr - h3 Étape 4 : Puis, une fois sur la page d'accueil, cliquer sur le bouton "📞 visioconférence" (pour arriver sur cette page) - h3 Étape 5 : Enfin, les participants doivent entrer le nom de la réunion (par exemple : "karaté-lyon") et cliquer sur "rejoindre" - h3 Étape 6 : La conférence commence - p Si vous êtes sur téléphone ou tablette, vous devrez cliquez sur "Download the app" pour installer l'app "Jitsi Meet" la première fois et les fois suivantes sur "Continue to the app" avant de pouvoir commencer la conférence. - p Si vous êtes sur un ordinateur et que vous utilisez Mozilla Firefox, vous allez rencontrer un message d'erreur comme quoi votre navigateur n'est pas encore supporté.
En attendant, vous pouvez installer Brave ou Google Chrome (nous déplorons cette situation, explications). - - .spacing2 - h2 Conseils pour réussir votre réunion - - h3.spacing Bien se préparer - p Vous pouvez rejoindre une réunion n'importe quand. Vous pouvez donc tester les étapes du "guide de préparation" en avance ! - - h3.spacing Bien s'entendre pendant la réunion - - p "Tu m'entends ? Non pas très bien ! Qu'est ce que tu viens de dire ?" : quelques conseils pour bien s'entendre pour éviter ça et passer un bon moment. - - p - strong Améliorez le son : - | - | l'idéal est d'avoir un casque avec microphone ou des écouteurs avec microphone pour capter le son au plus près de votre bouche et empêcher l'écho (que votre microphone capte ce qui sort sur les hauts parleurs). Si vous n'avez pas de casques ou d'écouteurs ou que vous êtes plusieurs, les ordinateurs portables récents captent mieux le son que les anciens, et généralement votre téléphone captera mieux le son que votre ordinateur. De plus, si vous êtes plusieurs, vous devez savoir que les microphones sont directifs : si vous êtes proches et bien en face de l'ordinateur, on vous entendra bien, sinon on ne vous entendra pas du tout ! En groupe, tournez l'ordinateur vers la personne qui parle ou mettez-vous bien en face pour parler ! - - p - strong Améliorez votre connexion : - | - | la visioconférence est très sensible à la qualité de votre connexion internet. Si vous le pouvez, connectez votre ordinateur en filaire (cable ethernet) à votre box (routeur internet). Si vous souhaitez rester en sans-fil (wifi), essayez de vous rapprocher de votre box. Le type de connexion internet influencera également la qualité de votre visioconférence : la fibre est idéale, l'ADSL ou les réseaux mobiles (4G et 3G) sont plus incertains. - - p - strong Réduisez vos usages : - | - | Activer la vidéo peut causer des interruptions ou dégrader la qualité du son. Si vous n'avez pas besoin de la vidéo, désactivez là ou garder là seulement pour certains participants. Si vous ne parlez pas, vous pouvez également couper votre microphone. Il est possible de passer en mode "talkie walkie" sur ordinateur avec la touche espace. Vous maintenez la touche espace, votre micro est activé. Vous arrêtez d'appuyer sur la touche espace, votre micro est coupé. - - p Si vous appliquez ces conseils, vous devriez arriver à communiquer sans peine. Bonnes communications ! - - script. - (_ => { - const base_url = 'https://jitsi.deuxfleurs.fr/' - const get_meeting_id = raw => raw.replace( /[^a-zA-Z0-9]/gi, '') - const get_meeting_url = raw => base_url + get_meeting_id(raw) - const joinbtn = document.getElementById('joinbtn') - const joinname = document.getElementById('joinname') - const joinlink = document.getElementById('joinlink') - - window.addEventListener('pageshow', e => { - joinbtn.text = "rejoindre" - }) - - joinbtn.onclick = _ => { - const meetingid = joinname.value - if (!meetingid) return // meetingid is empty - window.location.href = get_meeting_url(meetingid) - joinbtn.text = "chargement..." - } - - joinname.addEventListener('input', v => { - const l = v.target.value ? get_meeting_url(v.target.value) : "" - joinlink.textContent = l - joinlink.href = l - }) - })() + h4.spacing + | Cette page a changé d'adresse : + a(href="/Guide/Discussion.html") cliquez ici pour être redirigé diff --git a/src/Guide/Assets/riot_connect1.png b/src/Guide/Assets/riot_connect1.png new file mode 100644 index 0000000..1a966ea Binary files /dev/null and b/src/Guide/Assets/riot_connect1.png differ diff --git a/src/Guide/Assets/riot_connect2.png b/src/Guide/Assets/riot_connect2.png new file mode 100644 index 0000000..496821b Binary files /dev/null and b/src/Guide/Assets/riot_connect2.png differ diff --git a/src/Guide/Assets/riot_connect25.png b/src/Guide/Assets/riot_connect25.png new file mode 100644 index 0000000..94d3e7d Binary files /dev/null and b/src/Guide/Assets/riot_connect25.png differ diff --git a/src/Guide/Assets/riot_connect3.png b/src/Guide/Assets/riot_connect3.png new file mode 100644 index 0000000..eebea5f Binary files /dev/null and b/src/Guide/Assets/riot_connect3.png differ diff --git a/src/Guide/Assets/riot_connect4.png b/src/Guide/Assets/riot_connect4.png new file mode 100644 index 0000000..3ce4e37 Binary files /dev/null and b/src/Guide/Assets/riot_connect4.png differ diff --git a/src/Guide/Assets/riot_connect5.png b/src/Guide/Assets/riot_connect5.png new file mode 100644 index 0000000..5ce15e6 Binary files /dev/null and b/src/Guide/Assets/riot_connect5.png differ diff --git a/src/Guide/Assets/riot_install1.png b/src/Guide/Assets/riot_install1.png new file mode 100644 index 0000000..10e9a17 Binary files /dev/null and b/src/Guide/Assets/riot_install1.png differ diff --git a/src/Guide/Assets/riot_install2.png b/src/Guide/Assets/riot_install2.png new file mode 100644 index 0000000..1e78185 Binary files /dev/null and b/src/Guide/Assets/riot_install2.png differ diff --git a/src/Guide/Assets/riot_install3.png b/src/Guide/Assets/riot_install3.png new file mode 100644 index 0000000..a805c1a Binary files /dev/null and b/src/Guide/Assets/riot_install3.png differ diff --git a/src/Guide/Assets/riot_install4.png b/src/Guide/Assets/riot_install4.png new file mode 100644 index 0000000..d8c533d Binary files /dev/null and b/src/Guide/Assets/riot_install4.png differ diff --git a/src/Guide/Assets/riot_install5.png b/src/Guide/Assets/riot_install5.png new file mode 100644 index 0000000..de54ba4 Binary files /dev/null and b/src/Guide/Assets/riot_install5.png differ diff --git a/src/Guide/Discussion.pug b/src/Guide/Discussion.pug new file mode 100644 index 0000000..c9ed7d7 --- /dev/null +++ b/src/Guide/Discussion.pug @@ -0,0 +1,37 @@ +extends ../_layout.pug + +prepend root + - title = "Discussions" + + +block content + .spacing + h2 Accès rapides + + .list + a.service-box.spacing(href='https://riot.deuxfleurs.fr') + div(style='font-size: 80px; height: 120px') 🌐 + h3 Accéder via le navigateur + a.service-box.spacing(href='https://play.google.com/store/apps/details?id=im.vector.app&hl=fr') + div(style='font-size: 80px; height: 120px') 📥 + h3 Application Android + a.service-box.spacing(href='https://apps.apple.com/fr/app/riot-im/id1083446067') + div(style='font-size: 80px; height: 120px') 📥 + h3 Application iOS + br + + h2.spacing Premiers pas sur Android + + .screenlist + img(src="Assets/riot_install4.png", height="400") + img(src="Assets/riot_install5.png", height="400") + img(src="Assets/riot_connect2.png", height="400") + img(src="Assets/riot_connect25.png", height="400") + img(src="Assets/riot_connect3.png", height="400") + img(src="Assets/riot_connect4.png", height="400") + img(src="Assets/riot_connect5.png", height="400") + + style. + .screenlist > img { + padding: 20px; + } diff --git "a/src/Guide/Visioconf\303\251rence.pug" "b/src/Guide/Visioconf\303\251rence.pug" new file mode 100644 index 0000000..8677b7e --- /dev/null +++ "b/src/Guide/Visioconf\303\251rence.pug" @@ -0,0 +1,88 @@ +extends ../_layout.pug + +prepend root + - title = "Visioconférence" + + +block content + .spacing + h2 Rejoindre une réunion + .spacing + p Veuillez entrer le nom de la réunion que vous souhaitez rejoindre : + input#joinname(type="text", placeholder="Nom de la réunion") + a.button#joinbtn(href="#") rejoindre + p + | Le lien d'accès rapide à cette conférence est + | + a#joinlink + + + + .spacing2 + h2 Guide de préparation d'une réunion + + h3.spacing Étape 1 : Choisissez un nom de réunion (par exemple : "karaté-lyon") + h3 Étape 2 : Informez vos participants de la date de votre réunion et du nom de la réunion + h3 + | Étape 3 : Au moment voulu, pour rejoindre la conversation, les participants devront se rendre sur le site + | + a(href="https://deuxfleurs.fr") deuxfleurs.fr + h3 Étape 4 : Puis, une fois sur la page d'accueil, cliquer sur le bouton "📞 visioconférence" (pour arriver sur cette page) + h3 Étape 5 : Enfin, les participants doivent entrer le nom de la réunion (par exemple : "karaté-lyon") et cliquer sur "rejoindre" + h3 Étape 6 : La conférence commence + p Si vous êtes sur téléphone ou tablette, vous devrez cliquez sur "Download the app" pour installer l'app "Jitsi Meet" la première fois et les fois suivantes sur "Continue to the app" avant de pouvoir commencer la conférence. + p Si vous êtes sur un ordinateur et que vous utilisez Mozilla Firefox, vous allez rencontrer un message d'erreur comme quoi votre navigateur n'est pas encore supporté.
En attendant, vous pouvez installer Brave ou Google Chrome (nous déplorons cette situation, explications). + + .spacing2 + h2 Conseils pour réussir votre réunion + + h3.spacing Bien se préparer + p Vous pouvez rejoindre une réunion n'importe quand. Vous pouvez donc tester les étapes du "guide de préparation" en avance ! + + h3.spacing Bien s'entendre pendant la réunion + + p "Tu m'entends ? Non pas très bien ! Qu'est ce que tu viens de dire ?" : quelques conseils pour bien s'entendre pour éviter ça et passer un bon moment. + + p + strong Améliorez le son : + | + | l'idéal est d'avoir un casque avec microphone ou des écouteurs avec microphone pour capter le son au plus près de votre bouche et empêcher l'écho (que votre microphone capte ce qui sort sur les hauts parleurs). Si vous n'avez pas de casques ou d'écouteurs ou que vous êtes plusieurs, les ordinateurs portables récents captent mieux le son que les anciens, et généralement votre téléphone captera mieux le son que votre ordinateur. De plus, si vous êtes plusieurs, vous devez savoir que les microphones sont directifs : si vous êtes proches et bien en face de l'ordinateur, on vous entendra bien, sinon on ne vous entendra pas du tout ! En groupe, tournez l'ordinateur vers la personne qui parle ou mettez-vous bien en face pour parler ! + + p + strong Améliorez votre connexion : + | + | la visioconférence est très sensible à la qualité de votre connexion internet. Si vous le pouvez, connectez votre ordinateur en filaire (cable ethernet) à votre box (routeur internet). Si vous souhaitez rester en sans-fil (wifi), essayez de vous rapprocher de votre box. Le type de connexion internet influencera également la qualité de votre visioconférence : la fibre est idéale, l'ADSL ou les réseaux mobiles (4G et 3G) sont plus incertains. + + p + strong Réduisez vos usages : + | + | Activer la vidéo peut causer des interruptions ou dégrader la qualité du son. Si vous n'avez pas besoin de la vidéo, désactivez là ou garder là seulement pour certains participants. Si vous ne parlez pas, vous pouvez également couper votre microphone. Il est possible de passer en mode "talkie walkie" sur ordinateur avec la touche espace. Vous maintenez la touche espace, votre micro est activé. Vous arrêtez d'appuyer sur la touche espace, votre micro est coupé. + + p Si vous appliquez ces conseils, vous devriez arriver à communiquer sans peine. Bonnes communications ! + + script. + (_ => { + const base_url = 'https://jitsi.deuxfleurs.fr/' + const get_meeting_id = raw => raw.replace( /[^a-zA-Z0-9]/gi, '') + const get_meeting_url = raw => base_url + get_meeting_id(raw) + const joinbtn = document.getElementById('joinbtn') + const joinname = document.getElementById('joinname') + const joinlink = document.getElementById('joinlink') + + window.addEventListener('pageshow', e => { + joinbtn.text = "rejoindre" + }) + + joinbtn.onclick = _ => { + const meetingid = joinname.value + if (!meetingid) return // meetingid is empty + window.location.href = get_meeting_url(meetingid) + joinbtn.text = "chargement..." + } + + joinname.addEventListener('input', v => { + const l = v.target.value ? get_meeting_url(v.target.value) : "" + joinlink.textContent = l + joinlink.href = l + }) + })() diff --git a/src/css/main.css b/src/css/main.css index 048075b..f2cbe75 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -107,7 +107,7 @@ header > .container > .menu-item > a, header > .container > .menu-item > span { } .list > br { - clear: both; + clear: left; } .center { diff --git a/src/index.pug b/src/index.pug index 2f3ac50..9fcc679 100644 --- a/src/index.pug +++ b/src/index.pug @@ -13,10 +13,10 @@ block content section.spacing h2 nos services éthiques .list - a.service-box.spacing(href='https://riot.deuxfleurs.fr') + a.service-box.spacing(href='/Guide/Discussion.html') div(style='font-size: 80px; height: 120px') 💬 h3 discussions - a.service-box.spacing(href='/@jitsi.html') + a.service-box.spacing(href='/Guide/Visioconférence.html') div(style='font-size: 80px; height: 120px') 📞 h3 visioconférence a.service-box.spacing(href='https://cloud.deuxfleurs.fr') -- cgit v1.2.3