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) - 5 jetons de couleurs (3 jetons de 5 couleurs différentes) - 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 dépendance couleur de la carte (colorisation syntaxique) dépendance de la carte (optionnel) 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 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: - h balise d en tête - permet de définir des titres et une importance (de à 6) - h balise d en tête - permet de définir des titres et une importance (de à 6) - h3 balise d en tête - permet de définir des titres et une importance (de à 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 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 «ipsum». Si une carte «ipsum» est posée derrière une carte vous encaissez un bonus d un point.
Les cartes attributs class= > class 3 href= > href style= > 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 Browser Update Firebug Firebug error 404 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 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. - 4: la carte ultime, remplace n importe quelle carte, même la carte /html - F5: refresh, vous pouvez échanger de à 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 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 prochains tours. - Firebug: permet de contrer une attaque directe contre votre navigateur (Crash Navigateur, Bug Flash) pendant 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 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 à 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) 3 href= > href Ces cartes peuvent se placer n importe où... sauf devant une balise qui commence une ligne. Cartes attributs href= > alt= > 3 href alt <em > <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 > <em> 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 <em > <em> 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. Pascal Mabille et ses merveilleuses illustrations - v0.9.a 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