TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Piste:
wiki:cours:cours:narration:accueil

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision 		Révision précédente
wiki:cours:cours:narration:accueil [2020/11/22 09:53]
damien.muti [Programmation HTML/CSS : Étude d'un exemple] 		wiki:cours:cours:narration:accueil [2021/01/20 09:00] (Version actuelle)
tomaok02 [Narration Interactive]
Ligne 2: Ligne 2:
 * Porteur(s) du projet : Damien MUTI DESGROUAS, Laurence CLEYET-MERLE, Thomas RICORDEAU, Fabrice PORTET * Porteur(s) du projet : Damien MUTI DESGROUAS, Laurence CLEYET-MERLE, Thomas RICORDEAU, Fabrice PORTET
   * Date : 20/11/2020   * Date : 20/11/2020
-  * Contexte : Formation DNMADE +  * Contexte : Formation DNMADE  
-  * Fichiers :  +  * Lien : [[wiki:ressources:narration-interactive|Narration Interactive - Ressources logiciels]] 
-    *  +
-  * Lien : +
-    * +
 ===== Quelques définitions ===== ===== Quelques définitions =====
 ==== Narration ==== ==== Narration ====
Ligne 49: Ligne 47:
 Une narration interactive peut se représenter par une arborescence. Chaque branche de l'arbre est issue d'un choix qu'effectue le lecteur dans la narration. Une narration interactive peut se représenter par une arborescence. Chaque branche de l'arbre est issue d'un choix qu'effectue le lecteur dans la narration.
  
-Une Narration interactive se prépare donc tout d'abord en dessinant le schéma de narration sous la forme d'une arborescence. L'[[https://i2.wp.com/www.benhoguet.com/wp-content/uploads/2019/12/bandersnatch_arborescence.png?resize=610%2C682&ssl=1|image suivante]] illustre le shéma-block (algorigramme) d'une narration interactive+Une Narration interactive se prépare donc tout d'abord en dessinant le schéma de narration sous la forme d'une arborescence. L'[[https://i2.wp.com/www.benhoguet.com/wp-content/uploads/2019/12/bandersnatch_arborescence.png?resize=610%2C682&ssl=1|image suivante]] illustre le schéma-block (algorigramme) d'une narration interactive
  
 {{ :wiki:ressources:bandersnatch_arborescence.png?600 |Image issue du site Benhoquet}} {{ :wiki:ressources:bandersnatch_arborescence.png?600 |Image issue du site Benhoquet}}
Ligne 66: Ligne 64:
 Comme vous pouvez le remarquer, certaines images sont animées (Gif):  Comme vous pouvez le remarquer, certaines images sont animées (Gif): 
 ---- ----
-{{:wiki:ressources:mainimg.gif?400 |}}+{{:wiki:ressources:mainimg.gif|}}
 ---- ----
-{{ :wiki:ressources:redtwit.gif?50 |}}+{{ :wiki:ressources:redtwit.gif |}}
 ---- ----
-{{ :wiki:ressources:rss.gif?50 |}}+{{ :wiki:ressources:rss.gif |}}
 ---- ----
-{{ :wiki:ressources:treat.gif?100 |}}+{{ :wiki:ressources:treat.gif |}}
 ---- ----
  
Ligne 259: Ligne 257:
  
 li ul li  {  } /* Sub Menu Styles */ li ul li  {  } /* Sub Menu Styles */
- li.on ul { display: block } /* The magic */+li.on ul { display: block } /* The magic */
 li.off ul{display:none} li.off ul{display:none}
  
Ligne 347: Ligne 345:
 **Si** le nom de la classe (//className//) à laquelle appartient le nœud //node// (repéré ici par le pointeur //this//) vaut //"on"//, **alors** on change sa valeur en //"on"// (//this.className = "off"//), **sinon** (si //this.className == "off"//), **alors** on change sa valeur en //"on"// (//this.className = "on"//). **Si** le nom de la classe (//className//) à laquelle appartient le nœud //node// (repéré ici par le pointeur //this//) vaut //"on"//, **alors** on change sa valeur en //"on"// (//this.className = "off"//), **sinon** (si //this.className == "off"//), **alors** on change sa valeur en //"on"// (//this.className = "on"//).
  
 +
 +La fonction //startList()// lancée au chargement de la page permet donc de changer la mise en forme des nœud 'li" lorsqu'ils sont sélectionnés (//node.onclick//). Le code css correspondant est le suivant :
 +<code>
 +li.on ul { display: block } /* The magic */
 +li.off ul{display:none}
 +</code>
  
 === La page d'introduction === === La page d'introduction ===
Ligne 407: Ligne 411:
  
 Ce lien renvoie vers la page "2.html" Ce lien renvoie vers la page "2.html"
 +
 +== Le code CSS ==
 +<code>
 +@charset "utf-8";
 +/* CSS Document */
 +
 +
 +body {
 + background-color: #333;
 + margin-left: 0%;
 + margin-top: 0%;
 + margin-right: 0%;
 + margin-bottom: 0%;
 +}
 +#menu {
 +  position: fixed;
 +  left: 0;
 +  top: 0%;
 +}
 +
 +h1{
 + position: absolute;
 + left: 3%;
 + top: 0%;
 + font-size: 12px;
 +} 
 +h2{
 +    position: absolute;
 + right: 3%;
 + top: 0%;
 + font-size: 12px;
 +} 
 +h3{
 + position: fixed;
 + left: 3%;
 + bottom: 0%;
 + font-size: 12px;
 +} 
 +h4{
 + position:inherit;
 + bottom: 1%;
 + right: 0%;
 + font-size: 12px;
 +
 +} 
 +
 +body,td,th {
 + font-family: "Courier New", Courier, monospace;
 + font-size: 14px;
 + color: #ccc;
 +}
 +a:link {
 + color: #f60;
 + text-decoration: none;
 +}
 +a:visited {
 + text-decoration: none;
 + color: #f60;
 +
 +}
 +a:hover {
 + text-decoration: none;
 + color: #ccc;
 +
 +}
 +a:active {
 + text-decoration: none;
 + color: #f60;
 +}
 +#comic {
 +vertical-align: top;
 +border: 0px;
 +background-color: #333;
 +width: 800px;
 +margin-left: auto;
 +margin-right: auto;
 +margin-bottom: 5%;
 +} 
 +#footer {position: fixed; bottom: 0%; left: 0; width: 100%; height: 3%; background-color: #333333; opacity: .5;}
 +#hat {position: fixed; top: 0%; left: 0; width: 100%; height: 3%; background-color: #333333; opacity: .5;
 +}
 +</code>
 +
 +Le titre de la page "THUNDERPAW_INTRO" est placé sous la balise <h1>, qui par défaut est de type "block" et doit donc occuper toute la margeur de la page. Les deux liens du menu en haut de la page sont "CHAPTER SELECT" et "MAIN MENU". Ces deux liens sont les contenus d'une balise <h2>, qui par défaut est aussi de type "block" et doit donc occuper une nouvelle ligne sous le titre <h1>. Or nous remarquons que le titre <h1> et les menus dans la balise <h2> sont sur la même ligne. Ceci est réalisé par la CSS suivante appliquée identiquement aux balises <h1> et <h2> :
 +<code>
 +h1,h2{
 + position: absolute;
 + left: 3%;
 + top: 0%;
 + font-size: 12px;
 +} 
 +</code>
 +
 +=== La page 2 ===
 +{{ :wiki:cours:cours:narration:page_2.png?400 |}}
 +La[[http://thunderpaw.co/comic/2.html| deuxième page]] est accessible en cliquant sur l'image "NEXT" de la page précédente. Elle estcomposée de 3 images GIF les unes à la suite des autres permettant la lecture narrative. Ces images sont suivies d'une quatrième nommée "title.gif". Enfin deux image "PREV" et "NEXT" de type "inline" sont placées à la fin de la page pour revenir sur la page précédente ou accéder à la suivante.
 +==Code HTML==
 +Le code est le suivant :
 +<code>
 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +<html xmlns="http://www.w3.org/1999/xhtml">
 +<head>
 +<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +<title>THUNDERPAW_ INTRO</title>
 +
 +<style type="text/css">
 +body {
 + margin-bottom: 15%;
 +}
 +</style>
 +<link rel="stylesheet" type="text/css" href="Vcomic.css" />
 +
 +</head>
 +
 +<body>
 +
 +<h1>>THUNDERPAW_INTRO</h1>
 +<h2><a href="http://thunderpaw.co/chselect.html">[CHAPTER SELECT]</a> <a href="http://thunderpaw.co">[MAIN MENU]</a></h2>
 +
 +<center>
 +<div id="comic">
 +  <img src="1.gif">
 +  <img src="2.gif">
 +  <img src="3.gif">
 +</div>
 +<img class="displayed"  src="title.gif" />
 +<p> 
 +<a href="index.html"><img src="prev.gif"></a><a href="/comic/ch1/"><img src="next.gif"></a>
 +</body>
 +</html>
 +
 +</code>
 +
 +== Code CSS==
 +Le code CSS est le suivant :
 +<code>
 +@charset "utf-8";
 +/* CSS Document */
 +
 +
 +body {
 + background-color: #333;
 + margin-left: 0%;
 + margin-top: 0%;
 + margin-right: 0%;
 + margin-bottom: 0%;
 +}
 +#menu {
 +  position: fixed;
 +  left: 0;
 +  top: 0%;
 +}
 +
 +h1{
 + position: absolute;
 + left: 3%;
 + top: 0%;
 + font-size: 12px;
 +} 
 +h2{
 +    position: absolute;
 + right: 3%;
 + top: 0%;
 + font-size: 12px;
 +} 
 +h3{
 + position: fixed;
 + left: 3%;
 + bottom: 0%;
 + font-size: 12px;
 +} 
 +h4{
 + position:inherit;
 + bottom: 1%;
 + right: 0%;
 + font-size: 12px;
 +
 +} 
 +
 +body,td,th {
 + font-family: "Courier New", Courier, monospace;
 + font-size: 14px;
 + color: #ccc;
 +}
 +a:link {
 + color: #f60;
 + text-decoration: none;
 +}
 +a:visited {
 + text-decoration: none;
 + color: #f60;
 +
 +}
 +a:hover {
 + text-decoration: none;
 + color: #ccc;
 +
 +}
 +a:active {
 + text-decoration: none;
 + color: #f60;
 +}
 +#comic {
 +vertical-align: top;
 +border: 0px;
 +background-color: #333;
 +width: 800px;
 +margin-left: auto;
 +margin-right: auto;
 +margin-bottom: 5%;
 +} 
 +#footer {position: fixed; bottom: 0%; left: 0; width: 100%; height: 3%; background-color: #333333; opacity: .5;}
 +#hat {position: fixed; top: 0%; left: 0; width: 100%; height: 3%; background-color: #333333; opacity: .5;
 +}
 +
 +</code>
  
 ===== Ressources et exemples ===== ===== Ressources et exemples =====
wiki/cours/cours/narration/accueil.1606035204.txt.gz · Dernière modification: 2020/11/22 09:53 de damien.muti

Outils de la page

Sauf mention contraire, le contenu de ce wiki est placé sous les termes de la licence suivante : CC Attribution-Noncommercial 4.0 International
CC Attribution-Noncommercial 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki