Initiation à CSS Grid et à Flexbox par la BD numérique

Cette formation de 16 heures est incluse dans la formation “Initiation au codage Web”. Elle fait suite aux formations “Initiation aux langages HTML et CSS” et “Initiation aux frameworks CSS”.

L'objectif général de la formation est celui-ci : éditer des bandes dessinées codées en HTML-CSS de manière à ce qu'elles soient facilement personnalisables et consultables sans effort sur grands et sur petits écrans.

La finalité opérationnelle visée est la maîtrise du positionnement adaptatif de composants typographiques et iconographiques dans une page Web par l'utilisation combinée de CSS Grid et Flexbox.

Cette formation est proposée sur 4 demi-journée. Cela n'est possible que si les participants ont suivi les deux formations préalables, inclues dans la formation “Initiation au codage Web”. Pour un public ayant les prérequis nécessaires mais n'ayant pas suivi les 2 formations préalables, il souhaitable de prévoir un journée supplémentaire pour étaler la durée des séquences sur 6 demi-journées (3 demi-journées pour le module 1 et 3 demi-journées pour le module 2).

Présentation

Prérequis :

• Avoir suivi les modules “Initiation aux langages HTML et CSS” “Initiation aux frameworks CSS” de la formation “Initiation au codage Web”

Dans le cas contraire, il importe de pouvoir prouver l'acquisition des compétences suivantes :

• Maîtriser la gestion de fichiers et dossiers sur un poste informatique
• Savoir installer un logiciel sur un poste informatique
• Disposer d'un périphérique de sauvegarde (clé USB ou disque dur externe) ou d'un espace de sauvegarde dans le Cloud (DropBox, pCloud ou autre)
• S'intéresser à la publication en ligne de contenus rédactionnels ou picturaux, et en particulier à la publication de bandes dessinées numériques.
• Personnaliser les contenus et le style d'un gabarit de page Web et mettre la page personnalisée en ligne, sur les serveurs d'un hébergeur.
• Personnaliser un gabarit de site multipage construit à l'aide d'un framework CSS.

Aux prérequis mentionnés s'ajoute celui-ci:

• Utiliser avec aisance l'application Canva pour réaliser ou personnaliser des dessins simples puis les enregistrer au format SVG.

Durée : 4 demi-journées (16h)

Objectifs :

• Éditer des bandes dessinées numériques mettant en scène un dialogue ou un monologue tenu par des personnages dessinés simplement
• Utiliser Flexbox et Grid CSS pour éditer des planches adaptatives d'une bande dessinée numérique simple.
• Exploiter les banques d'images numériques et les outils de production d'images numériques pour créer des personnages simples et personnalisables
• Utiliser l'IA générative pour obtenir de l'aide en matière de codage et de production de contenus de bandes dessinées

Outils utilisés :

• Un navigateur Web (Chrome)
• Un éditeur de code (Brackets ou Phoenix)
• Un logiciel client FTP (Filezilla)
• Un éditeur multimédia en ligne (Canva)
• Un outil de dessin vectoriel en ligne (SVG-Edit)
• Un éditeur d'avatars en ligne (getavataaars.com)

Programme

L'ordre dans lequel le programme des séquences est abordé peut varier légèrement d'une session à l'autre.

Module 1 : Créer des BD numériques sur 1 colonne

Séquence 1-m1 : Mettre en page une BD numérique sur une colonne

Séance 1-s1m1 : Présenter des cases de BD les unes sous les autres sur une page Web

• Utiliser Canva pour créer des BD très simples case par case
• Intégrer les images des cases dessinées dans une BD numérique sur 1 colonne.
• Adapter l'affichage des composants de la BD numérique à la largeur des petits et grands écrans.

Séance 2-s1m1 : Séparer les images et le textes dans une BD numérique

• Utiliser un éditeur vectoriel en ligne (SVG-Edit) pour personnaliser des images SVG collectées sur le web.
• Séparer texte et images pour personnaliser facilement les textes d'une BD numérique.
• Mettre en page tous les composants d'une BD numérique sur 1 colonne en utilisant Flexbox.

Séquence 2-m1 : Réaliser une BD numérique de type messagerie

Séance 1-s2m1 : Réaliser une BD numérique similaire à un échange sur messagerie

• Collecter, personnaliser et utiliser des avatars en guise de personnages de BD
• Construire une page Web pour présenter les contenus à la manière d'un échange sur messagerie
• Adapter l'affichage de la page aux petits et grands écrans

Séance 2-s2m1 : Intégrer deux personnages personnalisables dans une case de BD numérique

• Présenter un dialogue entre 2 personnages au sein d'une même case de BD
• Utiliser des avatars personnalisables en ligne pour rendre la BD plus expressive
• Anticiper le positionnement des 2 personnages, des bulles et des flèches de bulle sur petits et grands écrans

Module 2 : Créer des BD numériques sur 2 colonnes et des BD-diaporamas

Séquence 1-m2 : Réaliser une BD numérique sur 2 colonnes

Séance 1-s1m2 : Utiliser CSS Grid et Flexbox pour construire une grille de BD adaptative

• Construire un gabarit de page Web présentant une grille de cases de BD sur 2 colonnes en utilisant CSS Grid
• Exploiter les acquis du Module 1 pour optimiser la grille construite afin qu'elle puisse intégrer tous les composants d'une BD numérique
• Optimiser le tout pour que la BD soit lue avec aisance sur petits et grands écrans

Séance 2-s1m2 : Positionner en CSS des éléments complémentaires sur les personnages et optimiser leur expressivité

• Préparer les éléments graphiques au format SVG en vue d'augmenter l'expressivité des personnages (signes émotionnels, mains dans diverses positions, etc.)
• Intégrer ces éléments dans la BD numérique en les positionnant de manière optimale
• Modifier le code SVG des images intégrées directement dans un éditeur de code pour optimiser l'expression de chaque personnage

Séquence 2-m2 : Réaliser une BD numérique sous forme de diaporama

Séance 1-s2m2 : Utiliser le framework Big pour créer une BD-diaporama

• Identifier les caractéristiques du framework Big et prendre en main le code source d'un diaporama Big
• Collecter les éléments nécessaires pour créer une BD-diaporama avec Big
• Scénariser et réaliser des BD-diaporamas publiables directement en ligne ou intégrables dans des pages Web

Séance 2-s2m2 : Intégrer les BD-diaporamas dans des pages web

• Utiliser la balise “iframe” pour intégrer des BD-diaporamas dans une page Web
• Repérer les moyens de personnaliser le framework Big et identifier les alternatives disponibles sur le Web
• Préparer ses dossiers de publication pour mettre en ligne des BD-diaporamas