Ci-dessous, les différences entre deux révisions de la page.
Prochaine révision | Révision précédente Dernière révision Les deux révisions suivantes | ||
wiki:ressources:narration-interactive [2019/09/19 11:24] 127.0.0.1 modification externe |
wiki:ressources:narration-interactive [2020/11/20 19:21] damien.muti [Programmation HTML/CSS : Étude d'un exemple] |
||
---|---|---|---|
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:// | ||
- | ===== Logiciels | + | Dans la définition de [[https:// |
+ | |||
+ | Le schéma narratif le plus simple d'une œuvre est généralement le suivant : | ||
+ | |||
+ | - 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=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <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: | ||
+ | left:3%; | ||
+ | font-size: 12px; | ||
+ | color: #f60; | ||
+ | } | ||
+ | |||
+ | #logo { | ||
+ | width: 503px; | ||
+ | height: 165px; | ||
+ | margin: auto; | ||
+ | background: | ||
+ | } | ||
+ | |||
+ | img { | ||
+ | border: none; | ||
+ | } | ||
+ | / | ||
+ | @charset " | ||
+ | /* CSS Document */ | ||
+ | |||
+ | |||
+ | ul { | ||
+ | margin: | ||
+ | padding: | ||
+ | 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: | ||
+ | } | ||
+ | # | ||
+ | position: | ||
+ | float: | ||
+ | right: | ||
+ | bottom: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | == Code Javascript == | ||
+ | < | ||
+ | startList = function() { | ||
+ | |||
+ | if (document.getElementById) { | ||
+ | navRoot = document.getElementById(" | ||
+ | for (i=0; i< | ||
+ | node = navRoot.childNodes[i]; | ||
+ | if (node.nodeName==" | ||
+ | node.onclick=function() { | ||
+ | this.className = (this.className == " | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | window.onload=startList; | ||
+ | </ | ||
+ | |||
+ | Ce code en Javascript lance la fonction // | ||
+ | L' | ||
+ | |||
+ | < | ||
+ | if (document.getElementById) | ||
+ | </ | ||
+ | Si la fonction // | ||
+ | |||
+ | < | ||
+ | navRoot = document.getElementById(" | ||
+ | </ | ||
+ | Récupérer tous les éléments de la bare de navigation identifiée par // | ||
+ | |||
+ | < | ||
+ | for (i=0; i< | ||
+ | </ | ||
+ | Pour l' | ||
+ | < | ||
+ | node = navRoot.childNodes[i]; | ||
+ | </ | ||
+ | Récupérer le nœud d' | ||
+ | |||
+ | < | ||
+ | if (node.nodeName==" | ||
+ | </ | ||
+ | Tester si le nœud précédent vaut //" | ||
+ | |||
+ | < | ||
+ | if (node.nodeName==" | ||
+ | </ | ||
+ | Tester si le nœud précédent vaut //" | ||
+ | |||
+ | < | ||
+ | node.onclick=function() { | ||
+ | this.className = (this.className == " | ||
+ | } | ||
+ | </ | ||
+ | Lorsqu' | ||
+ | < | ||
+ | this.className = (this.className == " | ||
+ | </ | ||
+ | **Si** le nom de la classe (// | ||
+ | |||
+ | |||
+ | === La page d' | ||
+ | Lorsqu' | ||
+ | {{ : | ||
+ | |||
+ | Cette page contient un seul bouton //" | ||
+ | |||
+ | == Code HTML == | ||
+ | Le code HTML est le suivant : | ||
+ | < | ||
+ | < | ||
+ | <html xmlns=" | ||
+ | < | ||
+ | <meta http-equiv=" | ||
+ | < | ||
+ | <style type=" | ||
+ | #text { | ||
+ | vertical-align: | ||
+ | border: 0px; | ||
+ | width: | ||
+ | margin-left: | ||
+ | margin-right: | ||
+ | margin-bottom: | ||
+ | } | ||
+ | body { | ||
+ | background: url(0bg.gif) fixed repeat-x bottom; | ||
+ | margin-bottom: | ||
+ | margin-left: | ||
+ | margin-top: | ||
+ | margin-right: | ||
+ | |||
+ | } | ||
+ | </ | ||
+ | <link rel=" | ||
+ | |||
+ | </ | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | < | ||
+ | |||
+ | < | ||
+ | <div id=" | ||
+ | <img src=" | ||
+ | <a href=" | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | |||
+ | On remarque que le bouton " | ||
+ | < | ||
+ | <a href=" | ||
+ | </ | ||
+ | |||
+ | Ce lien renvoie vers la page " | ||
+ | |||
+ | ===== Ressources et exemples ===== | ||
+ | ---- | ||
+ | ==== Logiciels | ||
* https:// | * https:// | ||
Ligne 7: | Ligne 412: | ||
* ... | * ... | ||
- | ===== Ressources | + | ---- |
+ | ==== Diagramme de narration et Algorigramme | ||
+ | |||
+ | * https:// | ||
+ | * https:// | ||
+ | * https:// | ||
+ | * ... | ||
+ | |||
+ | ---- | ||
+ | |||
+ | ==== Exemples ==== | ||
+ | |||
+ | * [[http:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | ]] | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | |||
+ | ---- | ||
- | * https://heros.ws/ | + | [[wiki:ressources: |