Différences

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

--- wiki:ressources:narration-interactive [2020/11/20 15:31]
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 ======
-* 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.
-{{ :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 |}}
-=== Code source HTML ===
-Le code source de la page est très simple:
-<code>
-</code>
-===== Ressources et exemples =====
-----
 ==== Logiciels ====
@@ Ligne 87: / Ligne 14: @@
 ----
 ==== Diagramme de narration et Algorigramme ====

TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Différences

Outils de la page