TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Piste: • groupe5 • programmation_03
wiki:ressources:narration-interactive

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:ressources:narration-interactive [2020/11/20 18:44]
damien.muti [Programmation HTML/CSS : Étude d'un exemple] 		wiki:ressources:narration-interactive [2020/11/21 12:57] (Version actuelle)
tomaok02
Ligne 1: Ligne 1:
 ====== Narration Interactive ====== ====== Narration Interactive ======
-* Porteur(s) du projet : Damien MUTI DESGROUAS, Laurence CLEYET-MERLE, Thomas RICORDEAU, Fabrice PORTET 
-  * Date : 20/11/2020 
-  * Contexte : Formation DNMADE 
-  * Fichiers :  
-    *  
-  * Lien : 
-    *  
-===== Quelques définitions ===== 
-==== Narration ==== 
-Selon le [[https://www.larousse.fr/dictionnaires/francais/narration/53812|Larousse]], une narration est l'action de raconter, d'exposer une suite d'événements sous une forme littéraire. 
  
-Dans la définition de [[https://fr.wikipedia.org/wiki/Narration|Wikipédia]] , la narration désigne un récit détaillé, mais aussi la structure générale de ce récit. Dans la rhétorique antique, il s’agit de la seconde partie du discours après l’exode, celle où l’orateur fait le récit des faits.+Quelques ressources concernant la narration interactive.
  
-Le schéma narratif le plus simple d'une œuvre est généralement le suivant :+Page complète à cette adresse: [[wiki:cours:cours:narration:accueil|Narration Interactive]]
  
-      - Situation initiale ; 
-      - Élément perturbateur ; 
-      - Péripéties ; 
-      - Élément de résolution (ou dénouement) ; 
-      - Situation finale. 
- 
-La nouvelle et le roman sont des exemples de narration.  
- 
-{{ :wiki:ressources:shemanarratif.jpg?800 |}} 
- 
-==== Interactivité ==== 
-La définition de l'interactivité touche des domaines variés comme la pédagogie, les arts (littérature, spectacles, etc.) ou l'informatique et les systèmes d'information. Nous nous cantonnons ici à une définition liée à l'informatique et les systèmes d'information : 
-  
-  * Dans le dictionnaire [[http://dictionnaire.sensagent.leparisien.fr/interactivit%C3%A9/fr-fr/|sensAgent]], l'interactivité est définie comme la capacité d'un système informatique à échanger, modifier en permanence des données en tenant compte des informations qu'il reçoit. 
- 
-  * Dans la définition de [[https://fr.wikipedia.org/wiki/Interactivit%C3%A9 | Wikipédia]], l'interactivité est une activité nécessitant la coopération de plusieurs êtres ou systèmes, naturels ou artificiels, qui agissent en ajustant leur comportement. Elle est souvent associée aux technologies permettant des échanges homme-machine. Toutefois, l'interactivité est présente dans toutes les formes de communication et d'échange où la conduite et le déroulement de la situation sont liées à des processus de rétroaction, de collaboration, de coopération entre les acteurs qui produisent ainsi un contenu, réalisent un objectif, ou plus simplement modifient et adaptent leur comportement. Une communication interactive s'oppose à une communication à sens unique, sans réaction du destinataire, sans rétroaction. 
- 
-Pour conclure, on retiendra que l'interactivité via l'interaction représente une action réciproque. 
-  
-==== Narration Interactive ==== 
- 
-Selon le site [[http://www.duodaki.com/narration-interactive-vous-allez-comprendre/| Duodaki]], dans le cadre d'une narration, le contenu agit sur le spectateur et réciproquement le spectateur peut agir sur le contenu. Ces actions réciproques vont ainsi influer l’histoire et la narration.  
- 
-Selon [[http://www.benhoguet.com/|Benjamin Hoguet]], éditeur d'un site sur les nouvelles narrations, la [[http://www.benhoguet.com/quest-ce-que-la-narration-interactive/|narration interactive]] est l’art de raconter des histoires qui incorporent des formes d’interactions technologiques, sociales ou collaboratives pour proposer des contenus adaptés aux transformations des comportements du public dans un nouvel écosystème technologique. 
- 
-===== Mise en œuvre technique : HTML/CSS ===== 
- 
-Le langage de représentation HTML/CSS est le plus approprié pour effectuer de la narration interactive. En effet, les fichiers HTML/CSS peuvent être visionné sur tous les supports numériques doté d'un navigateur web: ordinateurs, tablettes et smartphones. 
-==== Prérequis === 
-Le développement d'une narration interactive nécessite la maîtrise préalable du HTML/CSS. Vous trouverez un tutoriel complet sur le [[wiki:tutoriels:html:accueil|wiki HTML/CSS]].  
- 
-==== Méthodologie : Construction de l'arborescence narrative === 
-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 
- 
-{{ :wiki:ressources:bandersnatch_arborescence.png?600 |Image issue du site Benhoquet}} 
- 
-Dans cet exemple chaque case sont représentées par des pages HTML qui contiennent un fragment de l'histoire et dans lesquelles des choix sont proposés. **Chaque choix est un lien vers une autre page qui représente la suite de l'histoire**. 
- 
-==== Programmation HTML/CSS : Étude d'un exemple ==== 
-Une fois l'algorigramme de la narration effectuée, il est possible de coder chacune des pages HTML qui correspondent à des nœuds narratifs. 
- 
-L'exemple de la bande dessinée "[[http://thunderpaw.co/|Thunderpaw - In the ashes of fire mountain]]" est une illustration simple dont nous allons nous inspirer. 
- 
-=== La page de garde === 
- 
-{{ :wiki:ressources:page_de_garde_thunderpaw.png?800 |}} 
- 
-Comme vous pouvez le remarquer, certaines images sont animées (Gif):  
----- 
-{{:wiki:ressources:mainimg.gif?400 |}} 
----- 
-{{ :wiki:ressources:redtwit.gif?50 |}} 
----- 
-{{ :wiki:ressources:rss.gif?50 |}} 
----- 
-{{ :wiki:ressources:treat.gif?100 |}} 
 ---- ----
  
-les fichiers HTML/CSS de la page sont disponibles sur le lien suivant : {{ :wiki:ressources:thunderpaw.zip |}} 
- 
-== Code source HTML == 
-Le code source de la page est relativement simple: 
- 
-<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> 
- <title>THUNDERPAW: IN THE ASHES OF FIRE MOUNTAIN</title> 
- <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> 
-  
- <script type="text/javascript" src ="../JS/JS.js"></script> 
-  
- <link rel="stylesheet" type="text/css" href="CSS/style.css"> 
- </head> 
- <body> 
- <div id="logo"></div> 
- <div id="divMainImage" > 
- <img id="mainImage" src="images/mainimg.gif" > 
- </div>  
- 
- <ul id="nav"> 
-   <li class="on"><a href="http://thunderpaw.co/comic">&gt;&gt;BEGIN&lt;&lt;</a></li> 
-   <li><a href="http://thunderpaw.co/comic/new.html">CONTINUE</a></li> 
-   <li><a href="http://tpaw-news.tumblr.com/">NEWS</a></li> 
-   <li><a href="#">OPTIONS</a>  
-     <ul> 
-       <li><a href="http://thunderpaw.co/chselect.html">CHAPTER SELECT</a></li> 
-       <li><a href="http://thunderpaw.co/about.html">ABOUT</a></li> 
-       <li><a href="http://society6.com/repoghost">STORE</a></li> 
-        <li><a href="http://www.patreon.com/repoghost">SUPPORT</a></li> 
-     </ul> 
-   </li> 
- </ul> 
- <h1> 
- <a href="http://twitter.com/repoghost" target="top" border="0"><img src="images/redtwit.gif"></a>  
- <a href="http://feeds.feedburner.com/thunderpaw"><img src="images/rss.gif"></a>  
- <a href="http://www.patreon.com/repoghost"><img src="images/treat.gif"></a> 
- </h1> 
- <h2> * WARNING *  
- <br>Thunderpaw can contain flashing colors + patterns.  
- <br>Please be safe. 
- </h2> 
- </body> 
-</html> 
-</code> 
- 
-== Code CSS == 
-<code> 
-/*general stuff*/ 
-body { 
-  background: #333 url(../images/redbg.gif) fixed repeat-x bottom; 
- margin-bottom: 0%; 
- margin-left: 0%; 
- margin-top: 0%; 
- margin-right: 0%; 
- font-family: "Courier New", Courier, monospace; 
- font-size: 12px; 
-} 
- 
-a:link { 
- color: #ffffcc; 
- text-decoration: none; 
-} 
-a:visited { 
- text-decoration: none; 
- color: #ffffcc; 
-} 
- 
-a:hover { 
- text-decoration: none; 
- color: #f60; 
- text-indent:6px; 
-} 
- 
-a:active { 
- text-decoration: none; 
- color: #f60; 
-} 
- 
-h1 { 
- position: absolute; 
- bottom: 0%; 
- left: 3%; 
- font-size: 12px; 
- color: #f60;  
-} 
- 
-h2 { 
- position: absolute; 
- bottom:7%; 
- left:3%; 
- font-size: 12px; 
- color: #f60;  
-} 
- 
-#logo { 
- width: 503px; 
- height: 165px; 
- margin: auto; 
- background: url(../images/thunderpawtitle.png) no-repeat center scroll; 
-} 
- 
-img { 
- border: none; 
-} 
-/***********************************************/ 
-@charset "utf-8"; 
-/* CSS Document */ 
- 
- 
-ul { 
- margin:0; 
- padding:0; 
- list-style: none; 
- width:200px; 
-} 
- 
-ul li { /*MAIN MENU*/ 
- position: relative; 
- width:200px;  
-} 
-/* keep folowing styles together..........................*/ 
-* html ul ul { 
- margin-left:-16px;/* ie5 fix */ 
- voice-family: "\"}\"";  
- voice-family: inherit; 
-}  
-* html ul li {float:left;/* hide float from ie5*/} 
-* html ul ul { 
- width:relative;  
- w\idth:200px; 
- voice-family: "\"}\"";  
- voice-family: inherit;  
-} 
-* html ul ul {margin-left:0;/* hide margin from ie5*/} 
- 
-/* keep above styles together .............*/ 
- 
-li ul { /* sublink container ...*/ 
- margin-left: 10%; 
- padding: 10px; 
- position: relative; 
- display:none; 
-  
-  
-} 
-li ul li { /* sublinks ....*/ 
-    width:150px; 
- height:17px; 
- border-left:1px solid white; 
- border-bottom:1px solid white; 
- text-align: right; 
-} 
- 
-/* Styles for Menu Items */ 
-ul li a { 
- display: block; 
- text-decoration: none; 
- line-height: none; 
- height: 20px;  
- padding: 2px; 
-} 
-li li a {background:none} 
- 
-/* set dropdown to default */ 
-li:hover li a, li.over li a { 
-   background-color: none; 
-   font-weight:normal; 
-   text-decoration:none; 
-} 
- 
-/* this sets all hovered lists to red */ 
-li a:hover, 
-li:hover a, li.over a, 
-li:hover li a:hover, li.over li a:hover { 
- text-decoration: inherit; 
- text-indent: 6px; 
- background-color: none; 
- font-weight: bold; 
-} 
- 
-li ul li  {  } /* Sub Menu Styles */ 
- li.on ul { display: block } /* The magic */ 
-li.off ul{display:none} 
- 
-  
-#nav { 
-  
-  position:fixed; 
-  bottom: 15%; 
-  left: 3%; 
-}  
-#divMainImage { 
- height:100%;  
- width:100%; 
-} 
-#mainImage{ 
- position:absolute; 
- float:right; 
- right:0px; 
- bottom:0px; 
-} 
-</code> 
- 
-== Code Javascript == 
-<code> 
-startList = function() { 
- 
-if (document.getElementById) { 
- navRoot = document.getElementById("nav"); 
- for (i=0; i<navRoot.childNodes.length; i++) { 
- node = navRoot.childNodes[i]; 
- if (node.nodeName=="LI") { 
- node.onclick=function() { 
-  
-this.className = (this.className == "on") ? "off" : "on"; 
- 
- } 
-    } 
-  } 
- } 
-} 
-window.onload=startList; 
-</code> 
-===== Ressources et exemples ===== 
----- 
 ==== Logiciels ==== ==== Logiciels ====
  
Ligne 310: Ligne 14:
  
 ---- ----
 +
 ==== Diagramme de narration et Algorigramme ==== ==== Diagramme de narration et Algorigramme ====
  
wiki/ressources/narration-interactive.1605894282.txt.gz · Dernière modification: 2020/11/20 18:44 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