Présentation en grille - Historique des versions

Luc.bailly ac-rouen le 12 juin 2020 à 12:09

2020-06-12T12:09:48Z

Genael.valet education.gouv : /* Exemple 2 */

2018-10-25T13:49:47Z

Exemple 2

Genael.valet education.gouv : /* Exemple 2 */

2018-10-25T13:48:43Z

Exemple 2

Genael.valet education.gouv le 25 octobre 2018 à 13:47

2018-10-25T13:47:31Z

Genael.valet education.gouv le 25 octobre 2018 à 13:36

2018-10-25T13:36:56Z

Nicolas.poulain ac-paris : /* Objectifs */

2018-10-09T12:50:28Z

Objectifs

Nicolas.poulain ac-paris : /* Que devez-vous faire ? */

2018-10-09T12:49:30Z

Que devez-vous faire ?

Nicolas.poulain ac-paris : /* Que devez-vous faire ? */

2018-10-09T12:49:12Z

Que devez-vous faire ?

Nicolas.poulain ac-paris : /* Objectifs */

2018-10-09T12:49:00Z

Objectifs

Nicolas.poulain ac-paris : /* Objectifs */

2018-10-09T12:47:05Z

Objectifs

← Version précédente		Version du 12 juin 2020 à 12:09
Ligne 1 :		Ligne 1 :
		+	<!--DébutCommentaire.
		+	Aide: si nécessaire, ajoutez ci-dessous une des balises suivantes :
		+	[[Catégorie:Amodifier]] [[Catégorie:Asupprimer]] [[Catégorie:Encours]] [[Catégorie:Arelire]]
		+	FinCommentaire-->
		+
		+	{{Version\| [[version::3.0.8]]}}
		+
	==Objectifs==		==Objectifs==
	*Présenter des éléments sous forme d'une grille		*Présenter des éléments sous forme d'une grille

← Version précédente		Version du 25 octobre 2018 à 13:49
Ligne 24 :		Ligne 24 :

	==Exemple 2==		==Exemple 2==
		+	Voici un petit code réutilisable qui permet de placer trois vidéos (ressources centralisées entre triple crochets), les textes et icônes de durée dans une grille à 2 colonnes et 2 lignes

	[[Fichier:Grille-videos-exemple2.png\|400px\|Grille-videos-exemple2]]		[[Fichier:Grille-videos-exemple2.png\|400px\|Grille-videos-exemple2]]

← Version précédente		Version du 25 octobre 2018 à 13:48
Ligne 24 :		Ligne 24 :

	==Exemple 2==		==Exemple 2==
		+
		+	[[Fichier:Grille-videos-exemple2.png\|400px\|Grille-videos-exemple2]]

	<pre>		<pre>

← Version précédente		Version du 25 octobre 2018 à 13:47
Ligne 24 :		Ligne 24 :

	==Exemple 2==		==Exemple 2==
		+
		+	<pre>
		+	<div style="padding:10px;margin: 5px 5px 5px 5px;display:flex;flex-wrap:nowrap;background-color:#E6F5FC;">
		+	<div style="margin:10px 5px 5px 5px;display:flex;flex-direction:column;justify-content: flex-start;width:50%">
		+	<div style="flex-grow:3">[[[cr_d85cf41b4ef895351cf64e7c0462573a2539b947]]]</div>
		+	<div style="flex-grow:1;margin : 5px 0px 0px 2px"><b>Catherine Reverdy</b>, chargée
		+	d'étude et de recherche, Institut Français de l’Éducation, ENS
		+	Lyon<br></div>
		+	<div style="flex-grow:1;margin: 0px 2px 0px 0px ">[fa-clock-o fa-pull-left fa-2x] 30 min</div>
		+	</div>
		+
		+	<div style="margin:10px 5px 5px 5px;display:flex;flex-direction:column;justify-content: flex-start;width:50%;">
		+	<div style="flex-grow:3">[[[cr_47ed0b36a19aab8299e5157f08c7c9599fdd13e5]]]</div>
		+	<div style="flex-grow:1;margin : 5px 0px 0px 2px"><b>Marie Toullec-Théry</b>, maître de conférences en didactique comparée -
		+	Université de Nantes et ESPÉ des pays de La Loire ; présidente de la
		+	conférence de consensus sur la différenciation du CNESCO</div>
		+	<div style="flex-grow:1;margin: 0px 2px 0px 0px ">[fa-clock-o fa-pull-left fa-2x] 44 min</div>
		+	</div>
		+
		+
		+	</div>
		+
		+	<div style="padding:10px;margin: 5px 5px 5px 5px;display:flex;flex-wrap:nowrap;background-color:#E6F5FC;">
		+	<div style="margin:10px 5px 5px 5px;flex-grow:1;display:flex;flex-direction:column">
		+	<div style="flex-grow:3">[[[cr_9d8e7bf2c428b84635d8a4b67d59790a9a06ae42]]]</div>
		+	<div style="flex-grow:1;margin : 5px 0px 0px 2px">Séance de questions pour<b> <b>Catherine Reverdy</b> et <b>Marie Toullec-Théry</b><br></b></div>
		+	<div style="flex-grow:1;margin: 0px 2px 0px 0px ">[fa-clock-o fa-pull-left fa-2x] 30 min</div>
		+	</div>
		+	</div>
		+	</pre>

@@ Ligne 3 : / Ligne 3 : @@
 *Utiliser une méthode compatible avec les obligations d'accessibilité (pour les mal-voyants notamment).
-Exemple sur une copie d'écran :
+==Exemple 1==
 [[Fichier:Capture d’écran de 2018-10-09 14-46-18.png|Présentation en grille]]
 Voici un petit code réutilisable qui permet de placer trois vidéos (ressources centralisées entre triple crochets)
@@ Ligne 26 : / Ligne 22 : @@
 <div style="clear:both"></div>
 </pre>

@@ Ligne 15 : / Ligne 15 : @@
 <pre>
 <div style="padding:15px 15px 0px 15px;margin: 5px 5px 0px 5px;display:flex;background-color:#E6F5FC;">
-   <div style="float: left; width: 32%; padding: 6px">[[[cr_9770a347ce07f468e4384980c8fa3792435ef3db]]]</div>
+   <div style="float: left; width: 32%; padding: 6px"> [[[cr_9770a347ce07f468e4384980c8fa3792435ef3db]]] </div>
-   <div style="float: left; width: 32%; padding: 6px">[[[cr_92d84c7a0d559da403d78a478f6c9697344300d3]]]</div>
+   <div style="float: left; width: 32%; padding: 6px"> [[[cr_92d84c7a0d559da403d78a478f6c9697344300d3]]] </div>
-   <div style="float: left; width: 32%; padding: 6px">[[[cr_69756fcc2612a1ecbfd88e8e0834c33b41151ff2]]]</div>
+   <div style="float: left; width: 32%; padding: 6px"> [[[cr_69756fcc2612a1ecbfd88e8e0834c33b41151ff2]]] </div>
 </div>
 <div style="padding:0px 15px 15px 15px;margin: 0px 5px 5px 5px;display:flex;background-color:#E6F5FC;">
-   <div style="float: left; width: 32%; padding: 6px"> Légende vidéo 1</div>
+   <div style="float: left; width: 32%; padding: 6px"> Légende vidéo 1 </div>
-   <div style="float: left; width: 32%; padding: 6px"> Légende vidéo 2</div>
+   <div style="float: left; width: 32%; padding: 6px"> Légende vidéo 2 </div>
-   <div style="float: left; width: 32%; padding: 6px"> Légende vidéo 3</div>
+   <div style="float: left; width: 32%; padding: 6px"> Légende vidéo 3 </div>
 </div>
 <div style="clear:both"></div>
 </pre>

@@ Ligne 5 : / Ligne 5 : @@
 Exemple :
-[[Fichier:presGrille.png|Présentation en grille]]
+[[Fichier:Capture d’écran de 2018-10-09 14-46-18.png|Présentation en grille]]
 ==Que devez-vous faire ?==