Projet mooc lecjoa version Montpel'libre

génération d'une vidéo interactive

Scénario :

semaine 1 :

jour 1 : 1h
Installation de firefox, de l’extension Lecjoa, création d’un répertoire de travail
jour 2 : 2h
Téléchargement des fichiers utiles dans le répertoire de travail, et familiarisation avec la manipulation des extensions Firefox
jour 3 : 2h
Suivre le cours et réaliser sa première extension firefox et la tester.
jour 4 : 2h
Suivre le cours du quatrième jour, et modifier la vidéo selon instructions
jour 5 : 1h
Relecture et test de fonctionnement de son application firefox, puis envoie par mail du fichier compressé.

Validation par Mozilla Open Badges

semaine 2 :

jour 1 : 1h
Suivre le cours et apprendre comment changer le numéro de version de son extension
jour 2 : 2h
Suivre le cours et s’entraîner à modifier la bande son
jour 3 : 2h
Suivre le cours et s’entraîner à modifier le nombre d’images contenues dans la vidéo
jour 4 : 2h
Suivre le cours et s’entraîner à modifier le nombre de fichier son contenues dans la vidéo
jour 5 : 1h
Relecture et test de fonctionnement de son application firefox, puis envoie par mail du fichier compréssé.

Validation par Mozilla Open Badges

semaine 3 :

jour 1 : 1h
Suivre le cours sur comment dessiner en css
jour 2 : 2h
Suivre le cours et générer son premier dessin en css en le plaçant dans la vidéo
jour 3 : 2h
Suivre le cours et générer son deuxième dessin en css pour qu’il donne une impression de mouvement dans la vidéo
jour 4 : 2h
Suivre le cours et générer des dessins en css pour qu’il donne une impression de mouvement dans la vidéo
jour 5 : 1h
Relecture et test de fonctionnement de son application firefox, puis envoie par mail du fichier compressé.
Validation par Mozilla Open Badges

semaine 4 :

jour 1 : 1h
Suivre le cours et écrire un premier scénario très simple
jour 2 : 2h
Suivre le cours et contrôler la faisabilité du scénario, si celui-ci est trop difficile en écrire un de plus simple, comme une simple forme géométrique
jour 3 : 2h
Suivre le cours et dessiner en css les images de la vidéo
jour 4 : 2h
Suivre le cours, écrire la bande son de la vidéo et tester le bon fonctionnement
jour 5 : 1h
Relecture et test de fonctionnement de son application firefox, puis envoie par mail du fichier compressé.
Validation par Mozilla Open Badges

Objectif :

Apporter aux associations étudiantes un outils de communication. L'application apporte le langage multidirectionnel, un langage en adéquation avec les événements et l'entendement humain, qui sont de même nature, du multidirectionnel.

Publique visé :

Tout publique qui veut avoir un outil adapté pour percevoir et analyser le monde qui nous entoure.

Cours :

Cours semaine 1 jour 1 :

Installation de firefox :

Allumer votre ordinateur. Ouvrir votre navigateur internet. Dans la bare de recherche indiquer le terme Firefox. Dans les réponses proposées, cliquer sur une commençant par :
https://www.mozilla.org Suiver les instruction pour installer firefox.

Installation de Lecjoa :

Au premier démarrage de Firefox, cliquer en haut à droite sur les trois barres horizontales et choisissez Modules. Dans l'onglet qui s'ouvre , dans la barre de recherche, entrer le terme Lecjoa. Dans les réponses proposées, cliquer sur le boutton installer de Lecjoa.

Création du répertoire de travail :

Sous windows appuyer sur les touches
Ctrl + Maj + N
puis renommer le dossier créé Sous linux ouvrir un terminal et écrire
mkdir Lecjoa
pour créer le répertoire nommé Lecjoa Sous mac appuyer sur les touches
Shift (↑), ⌘ et n
Entrer le nom de votre dossier et valider.

Vidéo d'accompagnement :

Video semaine 1 jour 1

Cours semaine 1 jour 2 :

Téléchargement des fichiers :

Sous windows cliquer sur le lien : Download Lecjoa
Enregitrer le fichier dans le répertoire de travail créé.
Dézipper le fichier en restant dans le répertoire de travail Sous linux ouvrir un terminal et se rendre dans le répertoire créé :
cd Lecjoa
entrer dans le terminal :
wget -c https://www.letime.net/HowToLecjoa/lecjoa.zip
valider, puis entrer dans le terminal
unzip lecjoa.zip Sous mac cliquer sur le lien : Download Lecjoa
Enregitrer le fichier dans le répertoire de travail créé.
Dézipper le fichier en restant dans le répertoire de travail

Créer son extensions Firefox :

Avec le navigateur de fichier se rendre dans répertoire de travail, il doit s'y trouver le fichier dézippé :
Ouvrir avec son éditeur de texte le fichier:
manifest.json
remplacer le terme lecjoa dans ("id": "lecjoa@mozilla.org") par votre nom sans accent
en exemple si le nom est lelibre : "id": "lelibre@mozilla.org"
remplacer le terme lecjoa dans ("name": "Lecjoa",) par votre nom ("name": "lelibre",)
remplacer le terme lecjo.html dans ("page": "lecjo.html") par ("page": "example.html")
enregistrer le fichier et se rendre dans le répertoire page-scripts
Ouvrir avec son éditeur de texte le fichier:
background.js
remplacer le terme lecjo.html dans ("url": chrome.extension.getURL("lecjo.html")") par ("url": chrome.extension.getURL("example.html"))
enregistrer le fichier et ouvrir Firefox
Dans firefox, cliquer en haut à droite sur les trois barres horizontales (open menu) Dans le menu déroulant qui s'ouvre, cliquer sur Add-ons Cliquer sur la petite flèche, juste avant la barre de recherche des Add-ons (Tools for all Add-ons)
Dans le menu déroulant qui s'ouvre, cliquer sur Debugs Add-ons
Cliquer sur le bouton Load temporary Add-on
Dans le navigateur de fichier qui s'ouvre, se rendre dans le répertoire de travail et sélectionner le fichier manifest.json (celui que vous avez modifié précédement)
Cliquer sur le bouton Open. Si tout c'est bien passé vous devez voir apparaitre une icone qui affiche votre nom, quand vous placez le curseur de votre souris dessus.
Cliquer sur l'icone se trouvant dans la barre des taches et une vidéo basique d'exemple doit apparaitre.
Fermer entièrement firefox, reprendre le tutoriel pour modifier votre nom et éventuellement l'icone dans le répertoire page-scripts et faire à nouveau un test. Reprendre à plusieurs reprises en s'aidant si besoin de Documentation manifest.json

Vidéo d'accompagnement :

Video semaine 1 jour 2

Cours semaine 1 jour 3 :

Web Extension :

Reprendre le lien Documentation manifest.json du deuxième jour, et modifier le nom, le numéro de version, le nom de l'icone, jusqu'à être familiarisé avec l'extension firefox qui lancera la lecture de la vidéo.

Vidéo d'accompagnement :

Video semaine 1 jour 3

Cours semaine 1 jour 4 :

Images de la vidéo :

Une vidéo est une succession temporelle d'images, qui va interagir avec la physiologie de la vue, et qui va agir avec l'entendement qui analyse les signaux émis par la vue. Selon nos croyances, notre perception, nos capacités physiologique, notre humeur, la même image va avoir un impact différent, des spécialistes comme Godard (photographie de l'enfant contre le panneau publicitaire de Coca-Cola) ou Dali (la dame à la fenêtre qui devient un président américain) l'ont démontré. Le but de la vidéo n'est pas d'avoir un dessin parfait en définition, car cela n'apporterait rien en cohérence, éloignerait l'entendement par trop d'informations et consommerait trop de ressources. Le but du dessin est d'être le plus claire possible en but d'exprimer une idée. Chaque image faisant partie d'un tout, chaque image n'existe pas pour elle même ou par elle-même, chaque image n'existe que pour ce qu'elle apporte au tout. Si cela apporte plus de facilité pour exprimer ce qui veut être dit, une image sans dessin peut être utile à la vidéo. Comme la vidéo est composée de plusieurs images, l'image est composée de plusieurs formes, de plusieurs dessins. Une forme est obtenue en associant plusieurs dimensions. Une dimension pour la position, une dimension pour la couleur, une dimension pour l'opacité ... Selon les valeurs introduit dans ces dimensions nous générons tous les cas basiques possibles de ce qui se nomme la géométrie. La plupart du temps, l'association de plusieurs formes donne une nouvelle. De cette faculté nous pouvons créer toutes les images possibles. La question est quel est le nombre de forme utile pour exprimer, en ajouter serait trop, en supprimer serait pas assez. Comme nous manipulons plusieurs dimensions, nous pouvons très bien rester au même état d'équilibre en modifiant plusieurs valeurs dans ces dimensions. Ce qui veut dire que le même dessin peut se générer d'une multitude de manières. Le pinceau se nomme éditeur de texte, et la peinture se nomme le css. Pour donner votre premier coup de pinceau, il faut ouvrir avec votre éditeur de texte le fichier example.html. Faire une recherche et puis se rendre à <div id="fleur16" class="cachemoi"> Effacer ce qu'il y a en dessous jusqu'à non inclus : </div> <!--bis--> Et à l'emplacement, copier/coller la ligne : <div style="width:200px; height:100px ; background-color:#999999 ;"> </div> Installer puis cliquer sur l'icone de l'Add-on pour visualiser que la première image de la vidéo a été remplacée par un rectangle gris. Fermer entièrement firefox, reprendre le tutoriel pour modifier vos images et faire à nouveau un test. Reprendre à plusieurs reprises en s'aidant si besoin de w3schools ou de w3schools exemples

Vidéo d'accompagnement :

Video semaine 1 jour 4

Cours semaine 1 jour 5 :

Envoyer un mail contenant la vidéo à contact@montpel-libre.fr avec pour sujet lecjoa semaine 1

Cours semaine 2 jour 1 :

Reprise de Web Extension :

Fermer entièrement firefox, reprendre le tutoriel pour modifier votre nom, votre numéro de version et éventuellement l'icone dans le répertoire page-scripts et faire à nouveau un test. Reprendre à plusieurs reprises en s'aidant si besoin de Documentation manifest.json

Cours semaine 2 jour 2 :

Le son dans la vidéo, généralité:

Le son dans la vidéo est au format audio abadie.joa Le format audio abadie.joa est composé d'une série de deux valeurs. Ces deux valeurs réunies représentent un front d'onde. L'une qui indique la nouvelle pression max et l'autre valeur indique la durée en temps avec comme unité 1/44100 seconde. Comme pour la construction des images, nous utilisons l'équilibre de plusieurs dimensions acoustisques pour générer les séries de variations du couple de valeurs composant les sons. Mais à cet endroit du court, il est trop tot pour chercher à manipuler les dimensions acoustiques. Cette partie acoustique du cours, est faite pour indiquer que les sons, sont attachés aux images. Nous trouvons dans cette tehnique plusieurs avantages: Nous pouvons mixer plusieurs sons de durée différentes sur la même image. Les sons ne sont pas déformés quand nous ralentissons la vitesse de lecture. Nous pouvons créer plusieurs effets de mixe selon les différentes accélérations de lecture. Le son de la vidéo se trouve dans le fichier example.js du répertoire page-scripts La variable (var soud1) contient le premier son qui sera joué, le son attaché à la première image, dans la balise html ayant pour identité (id="fleur16") car le compteur de position est décroissant et commence par la fin. La variable (var soud2) contient le deuxième son

Modifier le son dans la vidéo:

Dans cette partie du cours nous ne modifions pas le son dans les variables, nous modifions le son de la vidéo en modifiant la position des différentes bandes sons dans la vidéo En musique nous trouvons les rythmes et le tempo. Le rythme est donnée par l'emplacement et le tempo est donné par la vitesse de défilement. Par exemple il est possible de modifier le rythme pour obtenir une base rythmique de blues. Dans le fichier example.js nous appelons le fichier son soud1 avec JoueLeSon1(); Nous associons les fichiers sons aux images toujours dans le même fichier dans la fonction (function change(persistanceretinienne)) Si dans (case 0:) nous ajoutons à la fin avant (case 1), (JoueLeSon1(); JoueLeSon3(); JoueLeSon5(); ) nous obtenons les sons 1, 3 et 5 joués dans la dernière image de la vidéo. Associer des notes se nomme accord en musique. Cette partie du cours est conçu pour montrer qu'il est possible de créer un ordre (un rythme) acoustique en y plaçant des accords. Pour découvrir un peu plus les bases musicales à titre de culture, car pour construire sa vidéo, inutile de chercher à faire un super son, l'important est que le son soit en harmonie avec le reste et mette en valeur l'idée exprimée. Ce qu'il faut retenir est que nous pouvons placer des briques acoustiques fixées aux images en plaçant les JoueLeSonx(); dans la fonction (function change) et c'est seulement cette partie qui est manipulé ici

Vidéo d'accompagnement :

Video semaine 2 jour 2

Cours semaine 2 jour 3 :

Le nombre d'images dans la vidéo:

Le nombre d'images dans la vidéo se trouve dans la partie html. La quantité d'images est identifié à l'aide de l'indice de fleur, en exemple pour 16 images, nous avons fleur16. Si nous avons un deuxième univers nous avons bisfleur16. Le fait de changer le nombre d'images implique que l'indice de fleur change. Prenons le cas où nous voulons 17 images dans la vidéo. Nous gardons les 16 images de l'exemple, nous gardons les 16 images du deuxième univers, et nous ajoutons une image dans chaque univers. Cette étape du cours sert au nombre d'images, donc nous ne dessinons pas deux nouvelles images, nous nous contenterons de garder plus longtemps la même image dans la vidéo, en faisant un simple copier/coller du contenu de l'image précédente. Il faut copier le contenu inclu entre "<div id="fleur16" class="cachemoi"> et <!--fin bis--> <!-- bare de temps -->, le coller en dessous de la zone copié, puis remplacer fleur16 par fleur17 et modifier bisfleur16 en bisfleur17 de la partie collée Le fait d'afficher une image existante permet de ne pas se préocuper de la partie css qui dessine les images

La partie javascript dans exemple.js:

La partie javascript permet d'afficher l'image en désactivant la propriété qui cache l'image. Comme nous ajoutons une image, il faut corriger le javascript en deux endroits. Le premier endroit est celui du compteur qui gère le nombre d'images de la vidéo, et le deuxième endroit est celui qui fait apparaitre l'image en désactivant la propriété qui cache l'image. Dans la fonction (function restecalme), nous avons une boucle for qui contient 4 fois (puisque 2 univers) : placier > 17 La manière dont j'ai écris le code implique que la valeur est celle du nombre d'image +1, d'où pour 16 images nous avons la valeur 17. D'où encore pour 17 images il faut écrire dans les 4 boucles du for placier > 18 Dans la fonction (function change(persistanceretinienne)) nous avons un switch qui se décrémente avec le conteur, pour 16 images nous avons 16 cas. Du cas (case 15:) première image au (case 0:) de la dernière image. Pour avoir 17 images, il faut ajouter le (case 16:) ayant le même contenu que (case 15:) La première image de la vidéo est indiqué par (var persistanceretinienne = 15;) pour 16 image
Il faut corriger le départ de la vidéo en indiquant (var persistanceretinienne = 16;)
Dans la foncion (change(persistanceretinienne);) nous redémarons la vidéo, là aussi il faut corriger la première image en indiquant :
(persistanceretinienne = 16;) Une fois la première vidéo de 17 images réalisée, s'entrainer en modifiant le nombre d'images ou en modifiant le contenu des images avec la partie css.

Vidéo d'accompagnement :

Video semaine 2 jour 3

Cours semaine 2 jour 4 :

Nombre de fichiers son

Le nombre de fichiers sons utile à la vidéo est déterminé par le nombre de briques acoustiques utiles. La même brique acoutique, peut-être utilisée sur plusieurs images, et génère des sons différents selon comment elle est associée.
C'est l'équivalent des accords en musique. Telle note (brique acoustique) associée avec telle note produit tel accord ou tel accord si la note associée change. Le cours ici sert à tester pour découvrir le maniement de JoueLeSon1(); dans le switch :
switch (persistanceretinienne)
Il est possible d'essayer plusieurs rythmes en utilisant un seule brique acoustique, l'important est d'essayer plusieurs combinaisons pour décrouvrir les possibilités.

Vidéo d'accompagnement :

Video semaine 2 jour 4

Cours semaine 2 jour 5 :

Envoyer un mail contenant la vidéo à contact@montpel-libre.fr avec pour sujet lecjoa semaine 2

Cours semaine 3 jour 1 :

Dessiner en css:

Le dessin en css se génère au point d'équilibre de plusieurs dimensions (hauteur, largeur, ...) Une brique dessin de base est un dessin généré dans une seule balise HTML (div) Le dessin en css est composé en premier d'une brique de base, à laquelle il est possible d'ajouter autant de briques dessins nécessaires, pour obtenir l'image voulue. L'ordre des balises HTML générant les dessins est important, car c'est la balise suivante qui domine en cas de propriétés contraire. Les balises HTML peuvent s'imbriquées en parallèle ou en série ou se suivre, et selon nous obtenons les propriétés en héritage.
Le choix d'imbriquer les div a une grande importance, et peut simplifier ou compliquer l'écriture. Une partie des dimensions peut-être mise en mémoire en les nommant dans une feuille de style, ou dans l'entête, nous les appelons avec (class=lenomdugroupe de dimensions). Les dimensions dessins s'appellent dans le div avec (style=).

La largeur en css:

La largeur s'indique avec (width:) suivit d'une valeur numérique, de son unité ou pourcentage et d'un point virgule En exemple pour une largeur de 50 en pixel :
width:50px;

La hauteur en css:

La hauteur s'indique avec (height:) suivit d'une valeur numérique, de son unité ou pourcentage et d'un point virgule En exemple pour une hauteur de 50 en pixel :
height:50px;

La couleur de remplissage:

La couleur de remplissage s'indique avec (background-color:) suivit d'une valeur qui change selon le standart et d'un point virgule En exemple en mixant trois codes couleurs en hexa de 2 caractères, le dièze indique le standart :
background-color:#ff9999;

L'impermabilité aux autres couleurs:

L'impermabilité aux autres couleurs s'indique avec (opacity:) suivit d'une valeur numérique et d'un point virgule En exemple pour une opacité de 50% :
opacity:50;

Documentation :

Documentation semaine 3 jour 1

Cours semaine 3 jour 2 :

Dessin d'une image en css:

Nous modifions la première image de la vidéo. Comme la vidéo est composée de 17 images, nous modifions le contenu de la balise possédant l'identité id="fleur17"
Nous dessinons en premier ce qui se trouve en arrière plan, en remontant jusqu'à ce qui se trouve au premier plan pour respecter l'ordre d'affichage
En exemple, nous pouvons très bien dessiner un mur jaune sans tenir compte de ce qui se trouve devant, ensuite le fait de dessiner un élément en plaçant sa balise en dessous de la balise du mur, suffit à masquer la couleur jaune du mur derrière l'élément

Vidéo d'accompagnement :

Video semaine 3 jour 2

Cours semaine 3 jour 3 :

Dessin d'un mouvement en css:

Le mouvement est une interprétation de l'entendement Nous pouvons créer le mouvement de plusieurs manières. En exemple en diminuant petit à petit la taille d'un objet, nous l'éloignons. En faisant apparaitre des objets qui diminent sur les bords de l'image, nous renforçons le sentiment de mouvement En autre exemple, en faisant deffiler un objet en premier plan sans changer la position d'un objet fixe, nous donnons l'impression que celui-ci se déplace, alors même que dans l'image il est resté fixe.

Vidéos d'accompagnement :

Video semaine 3 jour 3

Documentation :

Documentation 1 semaine 3 jour 3 Documentation 2 semaine 3 jour 3

Cours semaine 3 jour 4 :

Dessin d'un mouvement sur plusieurs images:

En premier exercice, il est conseillé de générer une brique dessin de base. Puis de lui donner un mouvement en changeant la position dans les images suivantes. En exemple en partant avec comme première image sur un oeuf de couleur bleu comme brique de base :
<div id="bisfleur17" class="cachemoi">
<div style="position:absolute; margin-left:250px ; margin-top:10px ; width:100px; height:120px ; background-color:#888888 ;opacity:0.99 ; border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;">
</div>
</div> Nous modifions légèrement le coefficient des propriétés de forme en fleur16, la deuxième image:
<div id="fleur16" class="cachemoi">
<div style="position:absolute; margin-left:250px ; margin-top:10px ; width:100px; height:120px ; background-color:#6789AB ;opacity:0.99 ; border-radius: 60% 50% 50% 60% / 60% 50% 50% 60%;">
</div>
</div> Nous modifions légèrement le coefficient des propriétés de forme en fleur15, la troisième image:
<div id="fleur16" class="cachemoi">
<div style="position:absolute; margin-left:250px ; margin-top:10px ; width:100px; height:120px ; background-color:#6789AB ;opacity:0.99 ; border-radius: 70% 50% 50% 70% / 70% 50% 50% 70%;">
</div>
</div> Ainsi de suite, jusqu'à avoir modifié les 17 images et analysé les dessins générés.

Cours semaine 3 jour 5 :

Envoyer un mail contenant la vidéo à contact@montpel-libre.fr avec pour sujet lecjoa semaine 3

Cours semaine 4 jour 1 :

Ecrire un scénario basique

Sélectionner une idée très simple, une idée universelle, comme j'ai faim, il fait chaud, ou ceci est comestible Identifier quel sera le dessin qui pourra être compris rapidement par toutes personnes quelque soit son entendement ou son langage, un élément commun qui caractérise l'idée que nous voulons exprimer.

Identifier combien de mouvement est utile pour renforcer et clarifier l'idée exprimée. Le nombre de mouvement induira le nombre d'image utile. Identifier le nombre de briques de base par dessin, pour qu'il exprime au mieux l'idée (trop cache l'information par des détails inutiles, pas assez égare par une recherche de compréhension inutile). Identifier un rythme qui remforce l'idée exprimée pour savoir ou et comment placer ses fichiers son par rapport aux images Identifier les fichiers sons utiles à l'idée exprimée

Cours semaine 4 jour 2 :

Mise en application du scénario

Si la réalisation du scénario est trop longue, tout reprendre en exprimant une idée plus simple dans le scénario, donc contenant moins d'images

Cours semaine 4 jour 3 :

Passage de dessiner en css à imaginer en css

Une fois le pinceau css maitrisé, l'imagination prend le pas pour créer et transmettre ses sentiments

Cours semaine 4 jour 4 :

Passage de subir un son imposé par la technologie, à imaginer un son issue de l'imagination sans contrainte physique

Une fois les lois de l'acoustique maitrisées, l'imagination prend le pas pour créer et transmettre ses sentiments
Ici ce ne sont pas des sons enregistrés puis déformés par diverses croyances, ici seul l'imagination intervient.

Cours semaine 4 jour 5 :

Envoyer un mail contenant la vidéo à contact@montpel-libre.fr avec pour sujet lecjoa semaine 4