Ci-dessous, les différences entre deux révisions de la page.
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:42] damien.muti |
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, | ||
- | * Date : 20/11/2020 | ||
- | * Contexte : Formation DNMADE | ||
- | * Fichiers : | ||
- | * | ||
- | * Lien : | ||
- | * | ||
- | ===== Quelques définitions ===== | ||
- | ==== Narration ==== | ||
- | Selon le [[https:// | ||
- | Dans la définition de [[https:// | + | Quelques ressources concernant |
- | Le schéma narratif le plus simple d'une œuvre est généralement le suivant | + | Page complète à cette adresse: [[wiki: |
- | - 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. | ||
- | |||
- | {{ : | ||
- | |||
- | ==== Interactivité ==== | ||
- | La définition de l' | ||
- | |||
- | * Dans le dictionnaire [[http:// | ||
- | |||
- | * Dans la définition de [[https:// | ||
- | |||
- | Pour conclure, on retiendra que l' | ||
- | |||
- | ==== Narration Interactive ==== | ||
- | |||
- | Selon le site [[http:// | ||
- | |||
- | Selon [[http:// | ||
- | |||
- | ===== 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, | ||
- | ==== 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: | ||
- | |||
- | ==== Méthodologie : Construction de l' | ||
- | Une narration interactive peut se représenter par une arborescence. Chaque branche de l' | ||
- | |||
- | Une Narration interactive se prépare donc tout d' | ||
- | |||
- | {{ : | ||
- | |||
- | Dans cet exemple chaque case sont représentées par des pages HTML qui contiennent un fragment de l' | ||
- | |||
- | ==== Programmation HTML/CSS : Étude d'un exemple ==== | ||
- | Une fois l' | ||
- | |||
- | L' | ||
- | |||
- | === La page de garde === | ||
- | |||
- | {{ : | ||
- | |||
- | Comme vous pouvez le remarquer, certaines images sont animées (Gif): | ||
- | ---- | ||
- | {{: | ||
- | ---- | ||
- | {{ : | ||
- | ---- | ||
- | {{ : | ||
- | ---- | ||
- | {{ : | ||
---- | ---- | ||
- | les fichiers HTML/CSS de la page sont disponibles sur le lien suivant : | ||
- | |||
- | == Code source HTML == | ||
- | Le code source de la page est relativement simple:{{ : | ||
- | |||
- | < | ||
- | < | ||
- | <html xmlns=" | ||
- | < | ||
- | < | ||
- | <meta http-equiv=" | ||
- | |||
- | < | ||
- | |||
- | <link rel=" | ||
- | </ | ||
- | < | ||
- | <div id=" | ||
- | <div id=" | ||
- | <img id=" | ||
- | </ | ||
- | |||
- | <ul id=" | ||
- | <li class=" | ||
- | < | ||
- | < | ||
- | < | ||
- | <ul> | ||
- | < | ||
- | < | ||
- | < | ||
- | < | ||
- | </ul> | ||
- | </li> | ||
- | </ | ||
- | < | ||
- | <a href=" | ||
- | <a href=" | ||
- | <a href=" | ||
- | </ | ||
- | < | ||
- | < | ||
- | < | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | == Code CSS == | ||
- | < | ||
- | /*general stuff*/ | ||
- | body { | ||
- | | ||
- | margin-bottom: | ||
- | margin-left: | ||
- | margin-top: | ||
- | margin-right: | ||
- | font-family: | ||
- | font-size: 12px; | ||
- | } | ||
- | |||
- | a:link { | ||
- | color: #ffffcc; | ||
- | text-decoration: | ||
- | } | ||
- | a:visited { | ||
- | text-decoration: | ||
- | color: #ffffcc; | ||
- | } | ||
- | |||
- | a:hover { | ||
- | text-decoration: | ||
- | color: #f60; | ||
- | text-indent: | ||
- | } | ||
- | |||
- | a:active { | ||
- | text-decoration: | ||
- | 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: | ||
- | } | ||
- | |||
- | img { | ||
- | border: none; | ||
- | } | ||
- | / | ||
- | @charset " | ||
- | /* CSS Document */ | ||
- | |||
- | |||
- | ul { | ||
- | margin:0; | ||
- | padding:0; | ||
- | list-style: | ||
- | width: | ||
- | } | ||
- | |||
- | ul li { /*MAIN MENU*/ | ||
- | position: relative; | ||
- | width: | ||
- | } | ||
- | /* keep folowing styles together..........................*/ | ||
- | * html ul ul { | ||
- | margin-left: | ||
- | voice-family: | ||
- | voice-family: | ||
- | } | ||
- | * html ul li {float: | ||
- | * html ul ul { | ||
- | width: | ||
- | w\idth: | ||
- | voice-family: | ||
- | voice-family: | ||
- | } | ||
- | * html ul ul {margin-left: | ||
- | |||
- | /* keep above styles together .............*/ | ||
- | |||
- | li ul { /* sublink container ...*/ | ||
- | margin-left: | ||
- | padding: 10px; | ||
- | position: relative; | ||
- | display: | ||
- | |||
- | |||
- | } | ||
- | li ul li { /* sublinks ....*/ | ||
- | width: | ||
- | height: | ||
- | border-left: | ||
- | border-bottom: | ||
- | text-align: | ||
- | } | ||
- | |||
- | /* Styles for Menu Items */ | ||
- | ul li a { | ||
- | display: block; | ||
- | text-decoration: | ||
- | line-height: | ||
- | height: 20px; | ||
- | padding: 2px; | ||
- | } | ||
- | li li a {background: | ||
- | |||
- | /* set dropdown to default */ | ||
- | li:hover li a, li.over li a { | ||
- | | ||
- | | ||
- | | ||
- | } | ||
- | |||
- | /* 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: | ||
- | text-indent: | ||
- | background-color: | ||
- | font-weight: | ||
- | } | ||
- | |||
- | li ul li { } /* Sub Menu Styles */ | ||
- | li.on ul { display: block } /* The magic */ | ||
- | li.off ul{display: | ||
- | |||
- | |||
- | #nav { | ||
- | |||
- | position: | ||
- | bottom: 15%; | ||
- | left: 3%; | ||
- | } | ||
- | # | ||
- | height: | ||
- | width: | ||
- | } | ||
- | #mainImage{ | ||
- | position: | ||
- | float: | ||
- | right:0px; | ||
- | bottom: | ||
- | } | ||
- | </ | ||
- | ===== Ressources et exemples ===== | ||
- | ---- | ||
==== Logiciels ==== | ==== Logiciels ==== | ||
Ligne 289: | Ligne 14: | ||
---- | ---- | ||
+ | |||
==== Diagramme de narration et Algorigramme ==== | ==== Diagramme de narration et Algorigramme ==== | ||