les règles readMe_fr_v4

ReadMe_fr
Le but
Le but du jeu est simple: créer avec les autres joueurs LA page HTML... mais surtout la
page HTML qui soit le plus proche des standards du Web: respectant la sémantique
HTML et sans erreur (tous les tags fermés, etc...). Chaque joueur apporte donc ses cartes
à LA page et marque plus ou moins de point.
La boîte contient
- 5 plateaux navigateurs (qui caractérisent les 5 joueurs différents)
- 15 jetons de couleurs (3 jetons de 5 couleurs différentes)
- 112 cartes
La mise en place
Le joueur qui a installé ou mis à jour le plus récemment un des 5 navigateurs (IRL)
distribue les plateaux (et les jetons associés) aux autres joueurs. Chaque joueur joue le
«rôle» d’un navigateur (ou browser) qui va interpréter la page web en cours de création.
Recherchez la carte balise HTML, placez la en haut de la table.
Battez et mélangez les cartes, distribuez 6 cartes à chaque joueur.
La partie peut commencer.
Les règles
Chaque joueur joue à tour de rôle et peut effectuer les actions suivantes:
- poser de une à trois cartes sur la table (voir les explications plus loin).
- se débarrasser de une à 5 cartes (il est obligé de garder au moins une carte, qui vont se
placer sous la pioche) seule la carte balise /HTML ne peut pas être défaussée.
- poser une carte interactive (qui va dans la défausse dès que l’effet de la carte est passé)
si cette carte est posée en dehors de son tour (carte d’attaque), cette pose n’est pas
comptabilisé comme une action.
Chaque joueur doit avoir 6 cartes en main à chaque tour et prend donc le nombre de
cartes qu’il a besoin dans la pioche au début de son tour.
La fin du jeu
Le jeu se termine quand un joueur pose la carte /HTML sur la table de jeu.
Le joueur qui a en main cette carte peut la poser à n’importe quel moment, mais si la
pioche est épuisée (et donc qu’il s’agit du dernier tour), il est obligé de la poser.
On compte les lignes «valides» (toutes les balises sont fermées, etc...) et celles-ci lui
rapportent chacune 3 points, qu’il ajoute à son score.
On compte ensuite les lignes «non valides» (toutes les balises ne sont pas fermées, etc...)
et celles-ci lui coûtent 5 points qu’il déduit de son score.
Le joueur qui a le score le plus important gagne la partie.
Description du matériel
Les navigateurs
ligne de positionnement des attributs
balise de la carte
<img />
couleur de la carte
(colorisation syntaxique)
dépendance
2
dépendance de la carte
(optionnel)
<img />
aide au placement des attributs
points associés à la carte
balise de la carte (rappel)
Il existe cinq navigateurs, un par joueur: Firefox, Safari, Chrome, Opera et IE. Certains
navigateurs ont des spécificités, des cartes associées...
Le navigateur vous permet aussi de noter votre score avec les jetons associé. Dès que
votre score dépasse 30, empilez un autre jeton (chaque jeton marque un intervalle de 0 à
30 points).
Les cartes
Il existe 4 sortes de cartes
- les cartes balises (simples, ouvrantes, fermantes)
- les cartes textes
- les cartes attributs
- les cartes interactives
Les cartes balises HTML
<img />
2
<img />
</a>
<a >
2
+
<a>
<a>
</a>
Les cartes balises permettent de créer votre page HTML, elles donnent un sens au texte
de votre page (mise en gras, titre, liens, images, etc.).
Il existe trois types de balises HTML
- les balises simples (comme la balise image ou saut de ligne), elles sont caractérisées
par un « /» au sein de la balise, dans le jeu elles sont de couleur bleu.
- les balises ouvrantes, sont de couleur vertes et permettent de caractériser du texte,
comme un lien. Pour être valide, ce type de balise doit être fermé.
- les balises fermantes, sont de couleur orange et permettent de fermer une balise
ouverte.
Les différentes balises et leurs significations
Les différentes cartes balises (ou tag) présentes et leur signification:
- h1 | balise d’en tête - permet de définir des titres et une importance (de 1 à 6)
- h2 | balise d’en tête - permet de définir des titres et une importance (de 1 à 6)
- h3 | balise d’en tête - permet de définir des titres et une importance (de 1 à 6)
- a | balise d’ancre - permet de définir une ancre, un lien
- em | balise d’emphase de texte - permet de mettre une partie du texte en italique
- strong | balise d’importance de texte - permet de mettre une partie du texte en gras
- img | balise image - affiche une image
- p | balise de paragraphe - permet de définir un paragraphe
- hr | balise de séparateur horizontal - permet de mettre un séparateur horizontal sur la
page
- br | balise de retour à la ligne - permet d’aller à la ligne suivante
Les cartes textes
ipsum
lorem
1
lorem
1
lorem = +1
ipsum
C’est le texte qui permet de créer une page HTML, elles sont de couleur grises et
reprennent le blabla latin que tous les développeurs web utilisent pour monter leurs pages:
le «lorem ipsum». Si une carte «ipsum» est posée derrière une carte «lorem» vous
encaissez un bonus d’un point.
Les cartes attributs
class=”” >
1
class
href=”” >
3
href
style=”” >
1
style
Les cartes attributs sont des cartes qui sont associées à des balises HTML, elles peuvent
être de différents types: nom, identifiant, style, etc. Elles rapportent toutes un point.
Certaines cartes attributs sont spécifique à une balise HTML, par exemple l’attribut «href»
est lié à la balise ancre «a» et vaut trois points.
Les cartes attributs sont de couleur blanche
Les différents attributs et leur signification
- style | permet d’appliquer un style au tag
- id | permet d’attribuer un identifiant au tag
- name | permet d’attribuer un nom spécifique au tag
- alt | permet d’attribuer une définition alternative au tag
- class | permet d’attribuer une classe au tag
- href | permet d’attribuer un lien à la balise ancre «a»
- src | permet de définir la source d’une image pour la balise image «img»
Les cartes interactives
Browser
Update
date
Browser Up
Firebug error 404
Firebug
error 404
Elles sont de couleur rouge ou jaune ou vert et permettent d’interagir avec les différents
joueurs, en échangeant des cartes, en supprimant une ligne de la page HTML, en faisant
bugger un navigateur, en protégeant contre des actions malveillantes des autres joueurs,
etc...
Les différentes cartes interactives
- Crash Browser: Le navigateur ciblé quitte de manière imprévue, vous pouvez piocher
deux cartes dans son jeu (le joueur vous les montre face cachée) et de les échanger
contre deux de vos cartes.
- Bug Apache: le serveur Apache tombe, la page est perdue, vous enlevez toutes les
cartes posées sur la table sauf la carte HTML.
- Debian 0 Day: faille massive, tous les joueurs se défaussent de toutes leurs cartes (les
cartes retournent sous la pioche, sauf celui qui a la carte /html) et reprennent chacun 6
cartes.
- Freeze Flash: le joueur ciblé est hors jeu pendant 2 tours, le temps que son navigateur
re-démarre.
- Error 403: Forbidden (interdit), permet de retirer n’importe quelle carte sur la table (sauf
la carte HTML et de la placer dans la pile de défausse).
- Error 404: Not Found (page non trouvée), permet de retirer une ligne complète de la
table
- iFrame: la version dev web d’inception, une page web dans une page web, chacun
donne ses cartes à son voisin de droite.
- Erreur FTP: le joueur ciblé par cette attaque distribue de façon plus ou moins égale ses
cartes entre les différents joueurs et se ressert de 6 nouvelles cartes.
- 42: la carte ultime, remplace n’importe quelle carte, même la carte /html
- F5: refresh, vous pouvez échanger de 1 à 6 cartes sans perdre votre tour
- Browser Update: mise à jour du navigateur - vous piochez 4 cartes dans la pioche et en
prenez une, vous pouvez ordonner les cartes comme bon vous semble et les replacer
dans la pioche. Si vous êtes Chrome, cette option est valable pendant 2 tours (mais
nécessite au deuxième tour de sacrifier une carte) vous ne perdez pas votre tour et
pouvez jouer une autre carte.
- AddOn: vous pouvez avoir 7 cartes au lieu de 6 dans votre main pour vos 2 prochains
tours.
- Firebug: permet de contrer une attaque directe contre votre navigateur (Crash
Navigateur, Bug Flash) pendant 1 tour. Ce nombre de tours est doublé si vous êtes
Firefox
- W3C: permet de contrer une attaque directe contre votre navigateur (Crash Navigateur,
Bug Flash) pendant 1 tour, attention cette carte ne peut pas être utilisée si vous êtes IE.
Placement des cartes
Le placement des cartes se fait de la façon suivante:
vous pouvez placer de 1 à 3 cartes en observant les règles suivantes:
- les cartes doivent se suivre (par exemple une balise ouvrante, un attribut et un texte, 3
attributs sur la même balise, trois textes, deux textes et une balise fermante, les
possibilités sont multiples)
- les cartes doivent se trouver sur la même ligne
- vous ne pouvez pas ouvrir et fermer une balise dans le même tour
Cartes texte et balise seule (cartes grises et vertes)
lorem
<img />
2
1
lorem
<img />
</a>
<a > href=”” >
2
3
<a>
<a>
+
href
</a>
Ces cartes peuvent se placer n’importe où... sauf devant une balise qui commence une
ligne.
Cartes attributs
href=”” >
3
alt=”” >
1
href
<a >
2
<a>
1
<em>
alt
<a >
2
<a>
1
<em>
<em >
<em >
Elles se placent à l’emplacement prévu sur une carte balise ou à la suite d’une autre carte
attribut. Attention certains attributs (href, src) sont spécifiques à certains tags... les
indicateurs (rond, étoile, carré) vous aideront à poser les cartes attributs de façon correcte.
Ces cartes peuvent se placer sur n’importe quelle carte balise ouvrante ou balise seule,
même si la balise a été déjà fermée.
Cartes balises ouvrantes
<em >
1
<em>
<a >
2
1
<a>
<a >
2
1
<a>
<a>
+
lorem
</a>
</a>
lorem
<a >
2
</a>
lorem
<a>
+
lorem
</a>
lorem
1
<a>
lorem
Ces cartes peuvent se placer en début d’une nouvelle ligne, ou à l’intérieur d’une ligne, si
elle n’est pas placée devant une balise déjà fermée.
Cartes balises fermantes
<a >
2
<a>
lorem
1
<a >
2
<a>
lorem
<em >
1
<em>
lorem
1
lorem
<a >
2
<a>
</a>
<a>
+
</a>
Ces cartes permettent de fermer un balise et répondent aux règles suivantes:
- la balise fermante est posée sur la même ligne que la balise ouvrante
- la balise fermante ne peut être posée que si toutes les autres balises incluses ont déjà
été fermées.
- vous ne pouvez fermer une balise que si il y a du contenu (du texte, une image), vous ne
pouvez pas fermer une balise vide (puisqu’une balise enrichi du contenu).
Il est possible de déplacer les différentes lignes déjà posées vers le haut ou le bas sans
problème.
Lexique
Quelques mots et abréviations qui peuvent vous être utiles durant la partie.
Browser: c’est le logiciel que vous utilisez pour naviguer sur Internet (le navigateur), il en
existe plusieurs, disponibles sur différentes plateformes, que ce soit Firefox, Chrome,
Opéra, Safari ou IE, leur but est toujours de vous emmener là où vous le souhaitez sur
Internet. Chaque navigateur a sa réputation, lent, rapide, stable, plante tout le temps,
cauchemard pour les développeurs web, et ils font tous partie du paysage du Web.
Apache: c’est le serveur sur lequel sont stockés les fichiers HTML qui permettent aux
visiteurs d’accéder aux pages web. C’est une composante essentielle, libre et
OpenSource de l’Internet d’aujourd’hui qui permet à tous de s’installer un serveur web.
Crash: c’est une erreur qui fait quitter de façon inopinée votre programme (ici un
navigateur)
Freeze: très proche du Crash, cette erreur ne fait pas quitter l’application, mais la rend
lente voir inutilisable pendant quelques minutes.
Flash: technologie propriétaire massivement utilisée dans les années passée pour
«animer» les pages web: vidéo, son, interactions compliquées, avant l’arrivée du HTML5
et de certaines librairies Javascript. Encore très présent dans le parc informatique, elle est
la cause de beaucoup de Crash et Freeze de navigateurs.
HTML5: c’est la norme qui régit le langage HTML (dans sa cinquième version) et qui
définit les différentes balises, attributs, etc... utilisables.
Debian: c’est un système d’exploitation Linux, libre et OpenSource très utilisé dans les
architectures de serveur web pour sa stabilité et sa communauté de développeurs.
0 Day: exploit (le fait de pouvoir faire quelque chose qu’on n’est pas censé faire) qui utilise
une faille encore inconnue du logiciel.
AddOn: c’est un petit programme qui permet d’installer une extension à votre navigateur.
Il en existe de toutes sortes: retirer les publicités, ajouter des fonctionnalités, etc.
Firebug: outil de debuggage spécialisé pour les pages Web, disponible dans un premier
temps pour Firefox, puis pour les autres navigateurs (en mode light)
W3C: World Wide Web Consorcium - est un organisme de normalisation (378 entreprises
en font partie) qui se charge de promouvoir la comptabilité des technologies utilisées sur
Internet. C’est lui qui rédige les recommandations pour le langage HTML par exemple.
HTML: HyperText Markup Language, langage de représentation des pages Web, qui est
basé sur l’hypertext, c’est à dire un texte, enrichi de différentes balises. Ce langage est
interprété, c’est à dire lu et exécuté ligne par ligne.
Changelog:
- v0.9.1 Pascal Mabille et ses merveilleuses illustrations
- v0.9.2a Pym et Cécile alpha-testent le jeu et m’aident à prototyper la première version
physique du jeu.
- v0.9.3.b Krillin et Sabrina testent le jeu et me donnent pleins d’idées super cool
- v0.9.3.m Krillin me refait d’autres retours bienvenus sur la mécanique et les cartes