Personnalisation d'un gabarit à l'aide de l'IA
Section : Personnalisation d'un gabarit à l'aide de l'IA | Éditeur HTML Bootstrap | RECITSED
-
Personnalisation d'un gabarit à l'aide de l'IA
Activité individuelle « Mains sur les touches » #2
- Créer une nouvelle page
Durée : 30 minutes ->14 h 45Démonstration
Défi 2.1 : Modifier le contenu afin d'obtenir 6 Cartes
2.1.1 Adaptation du gabarit 3 cartes
Nous allons sélectionner et inclure les éléments que nous souhaitons soumettre à l'IA.
- À partir de la vitrine, importez le gabarit « 3 cards » et insérez-le dans votre page
- Remplacez l'image de la troisième carte par un composant video
- Dans le haut de l'écran (barre grise), sélectionnez "Code source"
- Cliquez la zone du code source, "Sélectionner tout" et "copier"
- Ouvrez Notepad ou Notepad++ et collez le texte du code.
- Enregistrez votre fichier texte sous : code.txt
Vous devriez obtenir ceci : code.txt
Conseil : Requête générale à l'IA
Retourne le code source à l'intérieur de la balise body, sans la balise body. Si des styles doivent être ajoutés, ajoute ceux-ci à l'intérieur des balises. N'ajoute pas le script qui appelle Bootstrap, Moodle possède bootstrap 4. Si des scripts doivent être ajoutés, tu dois les placer à la fin du body.2.1.2 Requête à l'IA
- À l'aide de l'IA autorisée par votre organisation, fournissez le fichier cote.txt et fournir à l'IA la consignes suivante:
Modifie le code source html Bootstrap 4 fourni en pièce jointe selon les exigences suivantes:
-Retire les « Padding responsive » de la « Section », du « container » et de la « Row »
-Duplique les « Col » qui contient la carte à 3 reprises afin d'obtenir 6 cartes à l'intérieur de la row
-Ajoute une image picsum à titre de fond de « Container »
-Ajoute un « Padding » de 5 au bas du « Container »
-Pour chaque carte générée, place un texte et une image ou une vidéo afin que je puisse voir le contenu des cartes et juger du résultat.
-Dans le cas de la vidéo, reprend la structure du code fourni
-Ajuste les dimensions des images picsum générées aléatoirement afin qu'elles possèdent un format 16:92.1.3 Réponse de l'IA
- Vérifiez sommairement le code retourné par l'IA si les balises semblent correspondre à celles incluses dans les premières lignes du code fourni
- Utilisez le bouton "Copier"
- Retournez à la page Moodle que vous désiriez modifier
- Accédez au code source de votre page et remplacez-le par le code fourni par l'IA
- Apportez les retouches au besoin en effectuant une nouvelle requête à l'IA
La réponse de l'IA peut varier selon le niveau de précision de votre requête.
Vous devriez obtenir quelque chose de similaire à ceci :Réponse de l'IA - 6 Cartes
Défi 2.2 : Disposer les cartes en 4 colonnes de manière «responsive»
2.2.1 Cerner le contexte
Il n'est plus nécessaire de founir le code source puisque nous poursuivrons la conversation avec l'IA
Est-ce logique de conserver 4 colonnes sur un petit écran? Non!! Nous devons considérer la taille des écrans et définir le nombre de colonnes selon la taille des écrans. Bootstrap gère le comportement des colonnes selon une nomenclature Exemple: col-md-6- 1 colonne par défaut (mobile en premier)
- 1 colonne en largeur sur écran SM
- 2 colonnes en largeur sur écran MD
- 4 colonnes en largeur sur écran XL
2.2.2 Requête à l'IA
Fournir à l'IA la consignes suivante:
Modifie le code source html Bootstrap 4
Tu dois adapter le nombre de colonnes qui contiennent les cartes selon les exigences suivantes:
- 1 colonne par défaut (mobile en premier)
- 1 colonne en largeur sur écran SM
- 2 colonnes en largeur sur écran MD
- 4 colonnes en largeur sur écran XL2.2.3 Réponse de l'IA
- Vérifiez sommairement le code retourné par l'IA si les balises semblent correspondre à celles incluses dans les premières lignes du code fourni
- Utilisez le bouton "Copier"
- Retournez à la page Moodle que vous désiriez modifier
- Accédez au code source de votre page et remplacez-le par le code fourni par l'IA
- Apportez les retouches au besoin en effectuant une nouvelle requête à l'IA
La réponse de l'IA peut varier selon le niveau de précision de votre requête.
Vous devriez obtenir quelque chose de similaire à ceci : Réponse de l'IA - 4 ColonnesBonne découverte!
