TONER KEBAB WIKI

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Jeu Web imprimable ======
  * Porteur du projet : Caroline Brun
  * Date : 1/03/2016
  * Licence : libre !



//Principe : Gestion des flux, version numérique/version imprimable, deux pratiques sur un même support.//

Ce prototype présente une expérimentation d'une narration interactive "cross-plateforme".
Il s'agit d'utiliser les flux d'informations afin de produire un document utilisable en ligne comme sur papier, depuis la même base (cf. le workshop sur les **flux de production** avec **F. Adebiaye\\**).

Il s'agit d'évoluer sur un jeu narratif en ligne, avec des hyperliens, comme on pourrait en trouver sur le site http://twinery.org/ (TWINE) par exemple : puis, lorsqu'on effectue un CTRL+P ou CMD+P pour imprimer la page Web, une mise en forme spécifique est utilisée pour supprimer les hyperliens et ajouter des mentions telles que "Pour faire X action, rendez-vous page X" (qui n'apparaissent pas dans la version Web).

Quelques images du prototype basé sur le texte Howling Dogs de Porpentine : \\
(source : http://slimedaughter.com/games/twine/howlingdogs/ )

**PAGE TITRE :** \\

{{:wiki:memoires:jeu-video:capture_d_e_cran_2015-12-28_a_22.40.42.jpg?200|}} {{:wiki:memoires:jeu-video:capture_d_e_cran_2015-12-28_a_22.41.56.jpg?200|}}



**EXEMPLE DE PAGES AVEC PLUSIEURS HYPERLIENS :** \\

{{:wiki:memoires:jeu-video:capture_d_e_cran_2015-12-28_a_22.40.54.jpg?200|}} {{:wiki:memoires:jeu-video:capture_d_e_cran_2015-12-28_a_22.41.46.jpg?200|}}

\\
\\


Exemple illustrant la technique :

HTML
<code>
<a NAME = "03"><table id="page-table"><tr><td id="page-td"></a>
    <div id="global">
<pre>A room of dark metal. Fluorescent lights embedded in the ceiling.

The <a href="#04">activity room</a> is in the north wall. 
The <a href="#05">lavatory</a> entrance, west, next to the <a href="#06">trash disposal</a> and the <a href="#07">nutrient
dispensers</a>. The <a href="#08">sanity room</a> is in the east wall.

Her <a href="#12">photograph</a> is pinned to the side of your bunk. 
A red LCD reads 367 a few inches over.

<div class="choices">If you go to the activity room, turn to page #.
If you go to the lavatory, turn to page #.
If you go to the trash disposal, turn to page #.
If you go to the nutrient dispensers, turn to page #.
If you go to the sanity room, turn to page #.
If you look at the photograph, turn to page #.</div>
</pre>
    </div><!-- #global -->
    
</code>

<a href="#04">activity room</a> : transforme le texte "activity room" en lien, marqué par une ancre (href="#04") qui, au clic, mène au résultat de l'ancre marqué par <a NAME = "04">

Il faut utiliser un lien de ce type pour chaque choix disponible, menant tous à un numéro d'ancre différent. \\
Il faut ensuite créer une div "choices" qui proposera l'alternative imprimé indiquant de se rendre à la page X pour poursuivre l'histoire. Listez tous les choix, et les pages correspondantes.

C'est dans le CSS que nous allons définir l'un ou l'autre des usages (lien ou renvoi de page). \\
Il est nécessaire de créer deux sheets CSS, appelés dans le header :

<code>
<link rel="stylesheet" type="text/css" href="css_print.css" media="print" />
<link rel="stylesheet" type="text/css" href="css_screen.css" id="mycss" media="screen">
</code>

La page css_print fera apparaître les renvois de page et disparaître les liens hypertextes. \\
La page css_screen fera disparaître les renvois de pages et apparaître les liens hypertextes. \\

css_print :
<code>
.choices {
    font-size:100%;
    
a {
    color:black;
    text-decoration: none;
}

@page { size:21cm 29.7cm; margin: 2cm }

</code>

La div "choices" est apparente ;
Les liens ("a") sont en noir comme le reste du texte, sans habillage (comme le soulignement des liens) ; \\
La mention @page définie l'ensemble des caractéristiques de la page imprimée. \\
Il est également possible de masquer des éléments comme le footer par exemple, au besoin. \\

css_screen :
<code>
.choices {
    display:none;
}
</code>

La div "choices" est masquée.
TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Outils de la page
