Gestion spécifique du module turbomédia

Voilà quelques explication pour ceux qui doivent utiliser un turbomédia dans leur projet. Il rappelle quelques notions de base de html, également utiles si vous choisissez de travailler en webtoon. En effet le module webtoon a aussi une page web : index.html et un dossier images, cette partie des explications est valable pour les deux modules.

D’abord récupérer son module

Le module qui nous intéresse est téléchargeable dans les ressources en ZIP.

Une fois dézippé sur votre ordinateur (choisissez bien votre dossier de travail, soyez organisés !), vous pouvez afficher le lecteur localement (sur votre ordi) en ouvrant le fichier index dans votre navigateur (par glissé-déposé ou ouvrir avec). En lissant la page ouverte et en la rafraichissant, cela vous permettra de tester instantanément les changements effectués et le rendu de votre expérience de lecture. Quand le projet est suffisamment à jour vous pouvez déposer le paquet de fichiers dans un nouveau dossier sur le serveur, dans le dossier à votre nom via FTP.

Composition du module

  • Un fichier html, nommé index.html (par défaut) dans le quel vous listez par écrit vos images dans l’ordre d’apparition, et ajoutez éventuellement d’autres éléments (sons, liens pour récit à choix)
  • Un dossier pour ranger les images décrites :  /images
  • Un fichier .css qui gère la mise en page (placement dans la page, couleurs, etc.)
  • Un fichier javascript .js qui est le le lecteur en tant quel tel.

Vous ne devez vous occuper que de la page index.html et du dossier images ! Pour rappel le fichier html s’édite avec Brackets. Vos images dans Photoshop ou autre éditeur d’images.

Explication de la page index

La page s’appelle index par convention, afin de nous simplifier un peu la vie au niveau des url (adresses). Ainsi, lorsque vous appelez l’url définitive rangée de votre projet :

  • mbd.gr3.be/projets/mon-nom/mon-project

Vous ne devez pas en plus écrire dans l’adresse quelle page charger !

  • mbd.gr3.be/projets/mon-nom/mon-project/ma-page-web.html

Une convention permet au navigateur de chercher par défaut une page qui s’appellerait index, pratique !

Et index.html, comment c’est fait dedans ?

La page est assez simple, elle se compose comme toute page html de l’en-tête, c’est là que vous pouvez modifier la balise <title> qui définit le titre de votre page (écrit dans votre onglet de navigateur) ainsi que la balise style qui définit le placement de votre lecteur, sa taille, et le placement des liens optionnels.

<head>
  <meta charset="UTF-8">
  <title>Titre de ma page</title>
  <link rel="stylesheet" href="style.css">
  <style>
  </style>
</head>

Ensuite vient le corps de la page.

<body>

</body>

Cette zone est ce que l’on voit dans le navigateur, le lecteur proprement dit. Vous devez manuellement écrire quelles images apparaitra dans l’ordre que vous avez choisi. Pas besoin ici de numéroter vos images bien que cela peut être une bonne idée pour y voir plus clair dans votre projet !

Les images que vous rangez dans le dossier images sont ensuite listées dans une liste html. La balisequi décrit une liste (Unorded List)

<ul>/<ul>

Et les éléments de la liste

<li></li>

Pour résumer, on a dans l’ordre :

  • Un titre <h1>
  • Un bloc <div> (div pour division )qui contient :
    • Une liste d’objets <ul> qui contient :
      • Des éléments de liste <li> qui contiennent :
        • une image
        • un son (optionnel)
        • un ou des liens (optionnels)
<body>
   <h1>Un titre</h1>
   <div id="slider">
     <ul id="slider-wrapper">

       <li class="slide">
         <img src="images/01.jpg" class="slide-image" />
       </li>
       <li class="slide">
         <img src="images/02.jpg" class="slide-image" />
       </li>
       <li class="slide">
         <img src="images/03.jpg" class="slide-image" />
       </li>

    </ul>
</div>

Remarque : les balises ont des attributs “id” et “class”, sans rentrer dans les détails l’idée est de donner des noms précis à chaque bloc (“slider”, “slide”…) cela permet au script du module de trouver précisément chaque morceau dans la page et de les manipuler (montrer, cacher, précharger…).

Rajouter des images

Cette étape est donc assez simple une fois que vous avez compris la structure de votre page. Mettez vos images dans le dossier du même nom et rajoutez autant d’éléments de liste que nécessaire. Pour rappel jpg et gif peuvent être mis dans n’importe quel ordre. Par contre définissez une taille unique pour l’ensemble (voir plus bas, taille du lecteur).

<li class="slide">
  <img src="images/01.jpg" class="slide-image" />
</li>

Définir la taille du lecteur

Pour modifier la taille vous devez éditer dans l’en-tête la balise <style> vous pouvez voir que sont définis width et height : la largeur et la hauteur. Modifiez ces tailles en pixels en fonctions de vos besoin.

Remarquez que des commentaires de code sont indiqués entre /* */ pour vous aider !

 #slider {
 width: 900px; /* largeur */
 height: 500px; /* hauteur */
 }

Insertion de liens sur une image

Les liens s’écrivent avec la balise <a>, on rajouter l’attribut href (référence de l’hyperlien) qui définit où pointe votre lien. Et on rajoute une class avec le nom que vous voulez (ici “lien1”). Donnez un petit nom précis à ce lien permet de définir son look et sa taille.

<a href="http://mbd.gr3.be" class="lien1"></a>

Dans l’en-tête de votre page vous trouverez un exemple pour lien1 écrit en css. A droite de chaque ligne se trouve l’explication de l’usage. Par défaut le lien est rouge translucide ce qui permet de le voir et de la placer ! Ensuite, passez l’opacité à 0 pour le faire disparaître. L’idée est donc d’avoir des blocs liens transparents au dessus de votre image qui elle a le lien dessiné (flèche, bouton, zone clignotante en gif, etc.).

Le lien pointera normalement vers une autre page (autre que index.html) et rechargera un autre lecteur dans le cas de récits à choix multiples. Exemple :

<a href="page2.html" class="lien1"></a>

Pour les récits à choix, vous créez donc une page par ligne narrative. La première s’appelle index afin d’être chargée par défaut lorsque l’on appelle le dossier mais ensuite la nomenclature est libre !

Vous pouvez garder un dossier pour toutes les images, mais numérotez peut-être alors vos images selon la ligne

  • 1-01.jpg, 1-02.jpg, 1-03.gif, etc.
  • 2-01.jpg, 2-02.jpg, 2-03.gif, etc.
  • etc.

Ou vous pouvez faire des sous-dossiers : images/piste1/01.jpg

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *