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/12/08 10:30] damien.muti [Programmation HTML/CSS : Étude d'un exemple] |
wiki:cours:cours:narration:accueil [2021/01/20 09:00] (Version actuelle) tomaok02 [Narration Interactive] |
* 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 ==== |
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}} |
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 |}} |
---- | ---- |
| |
| |
=== La page 2 === | === La page 2 === |
La 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. | {{ :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== | ==Code HTML== |
Le code est le suivant : | Le code est le suivant : |