Catégories
FCIL FCIL-cours

Intégrer images et dialogues dans un diaporama HTML

Après avoir complété des fiches de renseignement, vous êtes désormais familiarisés avec le code source d’une page HTML. Pour vous familiariser davantage avec ce code, vous allez, au cours de cette activité, manipuler un diaporama HTML.

Construire un scénario de BD

La première étape du travail à produire consiste à rédiger le scénario d’une courte bande dessinée. Pour cela, vous disposez d’un document PDF à compléter sur lequel figurent les personnages de la BD.

Les personnages appartiennent à 3 séries, correspondant chacune à une colorisation particulière du personnage.

➜ Vous pouvez voir les différences en les 3 types de personnages disponibles sur ce diaporama de présentation

Comment utiliser la fiche de scénario

En face de chaque personnage se trouve une zone de dialogue (la bulle) à compléter. Pour chaque personnage, précisez son numéro de série, le numéro de la case dans laquelle il intervient et bien sûr ce qu’il dit.

En distanciel, vous pouvez imprimer chez vous la fiche et la compléter à la main. Cependant, il vous faudra compléter la fiche pdf pour me la transmettre numériquement quand vous aurez terminé.

L’ordre d’apparition des personnages ne doit pas être nécessairement celui dans lequel ils apparaissent sur la fiche de scénario (storyboard).

C’est la raison pour laquelle une case est réservée au numéro d’ordre de la future diapositive.

➜ Pour plus de facilité, je vous invite à découper les personnages présentés en vignettes sur un document supplémentaire à télécharger . Vous pourrez ainsi placer les personnages dans l’ordre qui convient à votre histoire.

La fiche de scénario vous permet d’utiliser 14 cases. Chaque attitude de personnage est utilisable 2 fois (pas nécessairement avec un personnage de la même série…)

Quelle histoire mettre en scène ?

Pour vous aider à trouver un scénario, j’ai réalisé un diaporama exemple. Il s’agit de la version dessinée d’un tutoriel un peu décalé. Vous pouvez, à votre tour, inventer un autre tutoriel. Dans le cas d’un tuto, un seul personnage entre en scène et dialogue avec les lecteurs-spectateurs.

Si vous êtes inspirés, vous pouvez mettre en scène un dialogue entre plusieurs personnages. Faites en sorte qu’on ne se perde pas dans le dialogue et alternez les prises de parole.

La seconde option n’est pas forcément meilleure que la première, elle est juste différente.

Intégrer les personnages et les dialogues dans le diaporama

Une fois votre scénario mis au point, vous allez insérer les personnages choisies dans les diapositives et intégrer les paroles qu’ils prononcent dans le code source du diaporama.

➜ Vous allez travailler sur l’exemple que que vous ai préparé et en adapter le codage à votre scénario. Pour cela il vous faut :

  1. télécharger le diaporama proposé en exemple
  2. décompresser l’archive en .zip sur votre poste de travail (sur PC, utilisez l’application WinRar)
  3. accéder au code source en ouvrant le fichier index.html avec Brackets

Vérifications

Pour travailler efficacement, vous devez avoir placé sur le bureau de votre poste de travail, le dossier intitulé “bd-tuto-exemple”. Vérifiez que dans ce dossier se trouvent bien les éléments suivants :

  • un dossier “css
  • un dossier “img
  • un fichier “index.html
  • un dossier “js
  • un dossier “lib

➜ Vérifiez que tous les personnages disponibles se trouvent bien dans le dossier “img”.

➜ Vérifiez que les dossiers “css”, “js” et “lib” contiennent bien des fichiers

Vérifiez qu’en cliquant 2 fois sur le fichier index, vous pouvez visualiser la bd dans votre navigateur.

Codage

De la même manière que nous avons personnalisé les fiches individuelle lors de l’activité précédente, vous allez pouvoir modifier les liens d’appel des images et insérer les textes dans la bulle de chaque case-diapositive.

Sur la capture d’écran ci-dessus, les flèches oranges indiquent où sont placés les liens d’appels des images. Les flèches bleues indiquent où sont placés les textes à modifier.

Attention de ne pas modifier la balise d’image servant à appeler le trait de bulle (elle est placée juste au dessus de l’autre appel d’image).

Dans la balise image du personnage, vous avez juste à changer le nom du personnage. Choisissez le nom du fichier correspondant au personnage que vous avez sélectionné dans votre scénario (pour la diapositive que vous modifiez).

Astuce : effacez le nom du personnage initial en effaçant aussi le slash qui suit img dans src= »img/nom-personnage.png »… Saisissez un nouveau slash. Brackets vous propose alors toutes les images disponibles dans le dossier img. Choisissez celle qui convient.

Attention, je ne veux pas que vous vous contentiez de changer les dialogues et que vous laissiez les personnages du diaporama d’exemple dans leur ordre initial.

Si vous avez besoin d’ajouter des diapositives, il vous suffit de rajouter à le suite des diapos initiales, par simple copier-coller, une portion de code placée entre <section> et </section>.

Rappel sur les chemins d’accès

J’ai constaté que la notion de chemin d’accès à un fichier dans une arborescence de dossiers n’est encore un concept familier pour tous. Je renvoie donc ceux et celles qui ont besoin de clarifier ce concept vers un cours en ligne pour débutants. Cliquez sur le bouton ci-dessous et lisez attentivement le cours.

Les chemins d’accès dans le code source

Vous trouverez des chemins d’accès à des fichiers dans de nombreux endroits du code source d’une page Web. En premier lieu, vous en trouverez dans le head (l’entête du code source). Examinez le code source du diaporama que je vous demande de personnaliser, et repérez la ligne de code suivante (dans le head) :

<link rel="stylesheet" href="css/style.css">

css/style.css est un chemin d’accès, placé ici entre guillemets, dans une instruction CSS. Il s’agit, en clair (traduction en langage courant), de l’indication suivante : fichier “style.css” situé dans le dossier “css”.

Dans la ligne de code suivante :

<link rel="stylesheet" href="css/theme/white.css">

css/theme/white.css est un chemin d’accès, placé ici entre guillemets, dans une instruction CSS. Il s’agit, en clair (traduction en langage courant), de l’indication suivante : fichier “white.css” situé dans le dossier “theme”, situé dans le dossier “css”.

Dans la ligne de code suivante :

<img src="img/unsubscribed-3.png" alt="">

img/unsubscribed-3.png est un chemin d’accès, placé ici entre guillemets, dans un élément HTML. Il s’agit, en clair, de l’indication suivante : fichier “unsubscribed-3.png” situé dans le dossier “img”.

Remarques sur le scénario et le codage

Scénario

➜ Une petite touche humoristique est la bienvenue. Cela n’empêche pas de traiter des sujets intéressants, des questions de société ou d’actualité. Ce type de publication peut faire passer des messages profonds. Faites donc preuve d’originalité !

Je vous invite à bien contrôler (ou faire contrôler) votre orthographe.

Codage

➜ Pour une présentation du texte plus agréable à lire et plus professionnelle, n’hésitez pas à utiliser la balise <br> (break) qui permet de forcer le retour à la ligne dans un même paragraphe.

En effet, le fait de sauter des lignes dans Brackets (dans le code source) n’a pas d’incidence sur la présentation du texte. Vous pouvez voir des exemples dans le code source diaporama “Le tuto qui tue”.

➜ Utilisez aussi le code &nbsp;qui correspond à un espace insécable. On place ce code le plus souvent entre un signe de ponctuation double ( : ; ? ! ) et le mot qui précède.

Il est vrai que je n’ai pas utilisé ce code dans le diaporama que vous devez personnaliser ! J’en ai donc rajouté deux, pour vous montrer comment faire, sur la capture d’écran ci-dessous.

La façon dont vous aurez utilisé ces astuces sera prise en compte lors de l’évaluation.

Rendu des diaporamas modifiés

Pour me faire parvenir votre diaporama finalisé, vous allez utiliser Slack et me transférer en pièce jointe le seul fichier index.html modifié.

Je n’ai besoin que de l’index pour évaluer votre travail. Je le placerai dans un dossier semblable au votre et pourrai voir s’afficher votre travail sur mon navigateur.

Par Yves Goguely

Formateur au GRETA Clermont-Auvergne