Puzzle Image - Le site
Contents
1. Le format iso 8859 1 aussi nomm iso latin 1 est un encodage usuel de fichier texte Dans ce cas on placera dans l en t te le code suivant lt meta http equiv content type content text html charset iso 8859 1 gt Mais si on dispose d un diteur de texte qui le permet on pr f re utiliser l encodage UTF 8 plus moderne et qui donne acc s tous les caract res Unicode On placera donc alors dans l en t te le code suivant lt meta http equiv content type content text html charset utf 8 gt On peut aussi d finir dans l en t te le texte qui est affich dans la barre de titre de la fen tre du navigateur l aide des balises lt title gt et lt title gt Le code HTML de l en t te du document peut ainsi prendre la forme suivante lt html gt lt head gt lt meta http equiv content type content text html charset utf 8 gt lt title gt Puzzle lt title gt lt head gt lt body gt Corps du document lt body gt lt html gt partir de maintenant le code tant ainsi r dig il est fortement conseill d ouvrir le fichier index html dans un navigateur Internet pour voir ce qui est affich puis de recommencer de m me la suite de chaque nouvelle modification apport au code pour contr ler si tout se passe comme pr vu Attention il est indispensable de v rifier en permanence le travail effectu Pour cela on enregistre les fichiers modifi s et on ouvre le fichier index htm2. e on ne fait rien SINON la cellule cliqu e n est pas pas vide elle contient une image e la cellule cliqu e est s lectionn e D bug Si vous rencontrez des difficult s de mise au point n oubliez pas de programmer des alertes de d bug comme celle propos e page 17 au paragraphe 4 3 3 vos clavier 4 3 7 Que faire de plus Votre projet est termin Il ne vous reste plus qu jouer et r soudre le Puzzle Ce n est peut tre pas aussi facile que pr vu De nombreuses autres possibilit s d am liorations de l interface sont possibles en modifiant la page Web index html ou la feuille de style style css 21 21
3. 5 6 4 12 10 2 7 Le langage JavaScript fournit quelques fonctions math matiques qui permettent d obtenir des nombres pseudo al atoires Math random cette fonction retourne nombre d cimal compris entre 0 inclus et 1 exclu et diff rent chaque appel Math random gt 0 63141422881744832 Math random gt 0 09417965123429894 Math random gt 0 70837463880889121 Math floor x retourne le plus grand entier inf rieur x Math floor 0 09417965123429894 0 Math floor 631 041422881744832 gt 631 On pourra ainsi obtenir des nombres entiers al atoires compris entre 0 et 15 l aide de expression suivante Math floor Math random 16 Fin du jeu Compte tenu du mod le choisi les morceaux du Puzzle sont plac s au d part al atoirement dans les cellules de la table de gauche num rot es de O 15 et la solution est trouv e si les pi ces num rot es de 0 15 sont mises dans cet ordre dans les cellules num rot es de 16 31 celle de la table de droite Jouons enfin Lorsque l utilisateur clique sur une cellule la fonction clicCellule est appel e avec pour arguments le num ro de la cellule cliqu e videment pour que le puzzle fonctionne la fonction clicCellule doit modifier l tat des cellules Il ne faut pas oublier non plus de v rifier chaque clic si le but est atteint c est dire que l image est reconstitu e Dans ce cas il est bon d afficher un message
4. Cr ation des fichiers du projet 4 1 index html une page Web cod e en HTML On commence par cr er un fichier de texte au format HTML qui sera la page d entr e de l application Comme il est d usage sur le Web on nomme ce fichier index html Si on ouvre ce fichier dans un navigateur Internet on verra la page Web que l on d sire publier 4 1 1 Le langage HTML Le langage HTML HyperText Markup Language est un langage qui permet de structurer un texte ordinaire l aide de balises tag en anglais Cette section propose une initiation au langage HTML limit e ce qui est utile pour le projet On trouvera de nombreuses informations sur Internet Dans la rubrique Page Web du site ISN une application Web interactive permet d ef fectuer des tests simples sur le langage HTML http mathmac free fr PageWeb AppliHTML index html L ensemble du code est compris entre lt htm1 gt la balise qui marque le d but du document et lt html gt la balise de fin du document Un document est constitu d un en t te plac entre les balises lt head gt et lt head gt suivie d un corps de texte plac entre les balises lt body gt et lt body gt Le code HTML du document a donc la forme suivante lt html gt lt head gt En t te du document lt head gt lt body gt Corps du document lt body gt lt html gt On pr cise page 5 quelles indications techniques fournir dans l en t te du document pou
5. HTML index html notre feuille de style style css Pour cela on va ajouter dans l en t te de notre document HTML une balise lt link gt lien avec sa liste attributs valeurs sous la forme lt link rel stylesheet type text css href style css gt Les diff rents attributs sont rel stylesheet indique qu il s agit d une feuille de style type text css pr cise le type de codage href style css donne le nom du fichier de la feuille de style Maintenant l ouverture du fichier index html dans un navigateur Internet le fichier auxiliaire style css est aussi automatiquement ouvert et interpr t 4 2 1 Le langage CSS Une feuille de style CSS est un fichier texte qui contient des r gles de d clarations de style appliquer aux l ments d une page Web Chaque r gle de d clarations de style est compos e d un s lecteur suivi d une liste de d clarations de propri t s entre accolades sous la forme s lecteur propri t valeur propri t valeur S lecteur Le s lecteur indique sur quels objets du DOM va porter le style d fini Il y a trois types de s lecteurs tag un simple nom de balise ou tag identificateur un nom pr c d de 10 21 classe un nom pr c d de le point Chaque s lecteur fournit une liste d un ou plusieurs objets s lectionn s dans le DOM Si le s lecteur est est un nom de balise ou tag le style s applique au contenu de
6. HTML est cr un objet JavaScript associ au DOM avec sa liste de propri t s Chaque attribut de balise correspond une propri t de l objet et le texte contenu entre les deux balises est la valeur de la propri t innerHTML Ensuite partir de chaque objet du DOM un l ment graphique widget est affich dans la fen tre du navigateur Ainsi dans la suite de cette documentation quand on fait r f rence un l ment du DOM on consid re indiff remment l objet du DOM la balise et son contenu ou le widget graphique qui le repr sente Nous avons vu dans ce paragraphe 4 1 comment d finir la page HTML On verra dans le paragraphe suivant 4 2 page 10 comment modifier le style de l affichage et ensuite au 9 21 FIGURE 3 Fen tre associ e au DOM 600 Fen tre gt Titre Clic paragraphe 4 3 page 16 comment r agir aux interactions de l utilisateur et animer la page Web 4 2 style css une feuille de styles cod e en CSS On va maintenant cr er un nouveau fichier de texte que l on va nommer par exemple style css Il sera cod au format CSS Le langage CSS Cascading Style Sheets est un langage qui permet de d clarer le style d affichage des divers l ments d une page HTML On travaillera donc sur deux fichiers en parall le index html d crit au paragraphe pr c dent et style css Avant de commencer la r daction de notre feuille de style on va d abord lier notre page
7. en d tail au paragraphe 4 2 3 page 13 La balise lt button gt On veut que l utilisateur dispose d un bouton sur lequel cliquer pour m langer les pi ces du Puzzle et jouer une nouvelle partie Le texte figurant dans le bouton sera crit entre les balises lt button gt et lt button gt Pour modifier le style du bouton voir paragraphe 4 2 page 10 Pour d finir l action ex cuter lorsque l utilisateur effectue un clic sur le bouton on se reportera au paragraphe 4 3 5 page 18 4 1 4 Le DOM Document Object Model Remarque Le mod le du DOM pr sent dans ce document est simplifi Il s agit du mod le contr l par le langage JavaScript Le code html affich ci dessous gauche peut tre repr sent sch matiquement par un arbre sous la forme affich e droite Les lt html gt lt head gt lt title gt Fen tre lt title gt head lt head gt title lt body gt innerHTML Fen tre body lt hi gt Titre lt h1 gt lt div id commande gt lt button gt Clic lt button gt h1 div lt div gt innerHTML Titre id commande lt body gt lt html gt button innerHTML Clic Cet arbre constitue ce qu on appelle le Mod le Objet du Document en anglais Document Object Model et en abr g le DOM Le rendu associ au DOM et affich par le navigateur est visible Figure 3 En r sum partir de chaque balise du document
8. sur la pi ce s lectionn e o la placer Il y a maintenant deux instructions dans la fonction init 1 document est une variable globale pr d finie de JavaScript qui donne acc s au DOM La m thode getElementByld message qui est appel e retourne l objet du DOM identifi par le couple attribut valeur id message d une balise HTML L objet obtenu est affect la variable globale div_message d clar avant la fonction en d but de programme 2 en affectant la propri t innerHTML de cet objet du DOM div_message le texte html contenu entre les balises lt div gt et lt div gt de la division est modifi ainsi que l aspect graphique de son widget 4 3 5 Action du bouton Le principe est le m me que pour l initialisation on ajoute cette fois dans la balise lt button gt du fichier index html un nouvel attribut onclick qui a pour valeur une instruction JavaScript ici un appel de la fonction nouvellePartie lt button onclick nouvellePartie gt M langer les pi ces du Puzzle lt button gt Cet appel de fonction sera ex cut si l utilisateur clique sur le bouton Ensuite on d finit dans le fichier code js une nouvelle fonction JavaScript function nouvellePartie rien pour l instant Pour coder l action de ce bouton il est n cessaire de cr er un mod le abstrait du jeu comme nous allons le voir maintenant 4 3 6 Mod lisation du jeu Pour jouer il faut pouvoir d placer fa
9. tous les objets du DOM associ s aux balises portant ce nom Par exemple la r gle p 1 color red provoque laffichage en rouge de tous les paragraphes c est dire les textes crits entre lt p gt et lt p gt Si le s lecteur est un nom pr c d de le style s applique au contenu de l unique objet du DOM associ la balise quelque soit son tag dont l attribut id a pour valeur le nom pr fix par le Cet identificateur ne doit figurer que dans une unique balise de la page HTML Par exemple si on a la r gle vert 1 background color green et si dans le code HTML on a une balise identifi e par vert son contenu sera affich sur fond vert Comme cette division par exemple lt div id vert gt lt div gt Si le s lecteur est un nom pr c d de le style s applique au contenu de touts les objets du DOM associ s aux balises quelque que soit leurs tags dont l attribut class a pour valeur le nom pr fix par le point Par exemple si on a la r gle gras font weight bold le texte contenu dans toutes les balises de classe gras quelque soit les tags sera affich en gras Comme les balises suivantes lt p class gras gt lt p gt ou lt table class gras gt lt table gt 4 2 2 Balises HTML objets du DOM widgets graphiques Revenons sur l exemple qui pr sente le DOM affich Figure 3 Dans cet exemple le navi gateur utilise un style par d faut Comment peut on modifier
10. Projet ISN Puzzle Image Une application Web de jeu interactif 14 septembre 2013 Ce document propose un projet pour les l ves de Terminale S inscrits en sp cialit Infor matique et Sciences du Num rique Les langages HTML CSS et JavaScrip sont bri vement pr sent s et seuls les l ments de ces langages n cessaires la r alisation de ce projet y sont d crits plus en d tails Table des mati res 1 2 Puzzle Image 3 Projet 3 Plan de travail 4 3 1 Les outils n cessaires 4 5 2 Les fichiers amp Cr er 4 es aia due mt t une r d a 4 Cr ation des fichiers du projet 5 4 1 index html une page Web cod e en HTML 5 4 1 1 Lelangage HTML racs 44 cacera rad nd phases 5 4 1 2 En t te du document s ce sosa mea ma baa e 5 413 Corps dudocument ssec 4 nu mo de adu g da me gum ge 6 4 14 Le DOM Document Object Model 4 4 ss su a du sim ut 9 42 style css une feuille de styles cod e en CSS 10 AE Lelana CoS e s Li Lili LR Rs LR Rates A es 10 4 2 2 Balises HTML objets du DOM widgets graphiques 11 42 3 D claration de propri t bhia da a 0 12 424 D finition dessivles ereire i Du hs de gs d g e b ena Re tas 15 4 3 code js un programme cod en JavaScript 16 4 3 Le lanvase Javascript lt re 4 hope t pue dunes du 16 4 3 2 Initialisation du
11. cation sera constitu e de 3 fichiers 1 une page HTML pour visualiser le puzzle 2 une feuille de style CSS pour enjoliver l affichage 3 un programme JavaScript pour simuler le jeu et g rer les venements On trouvera des informations utiles dans la rubrique Page Web du site ISN Sp cialit Informatique et Sciences du Num rique http mathmac free fr PWAccueil html 3 21 3 Plan de travail Une application Web se pr sente comme un dossier qui peut tre t l vers sur un serveur distant contenant un site Web Cependant cette application peut fonctionner et tre mise au point en local sur un ordinateur personnel Le dossier cr er contiendra au minimum trois fichiers de textes cod s selon des formats diff rents et que l on va r diger successivement 3 1 Les outils n cessaires Pour r aliser ce projet et cr er ces fichiers il faut utiliser Un diteur de texte brut c est dire sans option de mise en page Il est cependant pr f rable d utiliser un diteur pr vu pour la programmation de code et qui offre au moins la colorisation syntaxique Un navigateur Internet dans lequel on ouvre le projet pour en contr ler le fonctionne ment La plupart de navigateurs Internet disposent de divers outils de d veloppement qui peuvent se r v ler utiles lors de la mise au point du projet Comme navigateur Internet on conseille d utiliser Firefox http www mozilla org fr firefox Pour
12. ce style pour obtenir le rendu de droite de la Figure 4 FIGURE 4 Rendus obtenus sans style ou avec style eoo Fen tre e 600 Fen tre si Avant Titre Apr s Clic Clic Il suffit d crire ce code dans la feuille de style h1 margin 10px 25px 10px 25px border 5px blue solid padding 20px background color yellow text align center color maroon Par d faut le navigateur affiche dans la fen tre les widgets comme un flot continu de gauche droite et de haut en bas de rectangles de diff rentes tailles Sur la Figure 5 on voit 11 21 un widget contenant le mot Texte et sur lequel sont not es les diff rentes propri t s qui permettent de pr ciser les dimensions de son rectangle Cette figure permet de comprendre la r gle de d claration de style pr sent e ci dessus FIGURE 5 Structure d un widget graphique Ses es ee rr ir ss a See Er i margin a border padding background color P PASS O E l A asar i eb Texte a le D PASSE NE eee lt 7 gt Chaque navigateur donne toutes ces propri t s des valeurs par d faut qu il est possible de modifier dans la feuille de style Pour bien comprendre cet exemple voici maintenant une description des d clarations de propri t s usuelles 4 2 3 D claration de propri t Les noms des propri t s sont des noms pr d finis du langage CSS On va donc d crire les propri
13. cilement avec la souris les pi ces du Puzzle d un cellule de grille l autre Il faut aussi pouvoir facilement corriger les erreurs ventuelles L image carr e tant d coup e en 16 morceaux on conseille de pr voir 2 grilles 4 x 4 comme sur la Figure 2 page 3 La grille de gauche dont les cellules sont espac es contiendra au d part les pi ces dans le d sordre La grille de droite dont les cellules sont jointives contiendra la fin la solution comme on peut le voir Figure 1 page 2 18 21 Le mod le abstrait du jeu doit d crire l tat du Puzzle On conseille d utiliser une table de 2 x 16 32 cellules Les 16 premi res cellules contiendront les pi ces m lang es au d part et les 16 derni res cellules contiendront les pi ces ordonn es de la solution Nous allons d abord fixer la valeur de l attribut id et ajouter un attribut onclick chaque cellule lt td gt de la premi re table associ e la grille de gauche lt td id C0 onclick clicCellule 0 gt lt td gt lt td id C1 onclick clicCellule 1 gt lt td gt lt td id C15 onclick clicCellule 15 gt lt td gt De m me pour la seconde table associ e la grille de droite lt td id C16 onclick clicCellule 16 gt lt td gt lt td id C17 onclick clicCellule 17 gt lt td gt lt td id C31 onclick clicCellule 31 gt lt td gt Ainsi la fonction init va pouvoir r cup rer l aide de document getElementByld le
14. ckground Nous allons pr senter ici quelques astuces permettant d afficher des images d coup es comme l exige notre Puzzle Nous avons vu ci dessus qu il est possible d affecter une couleur au fond d un widget Il est aussi possible d afficher une image sur le fond d un widget Voici les propri t s qui permettent de contr ler cet affichage sur le fond 13 21 background image image du fond du widget valeur url Nom du fichier image exemple background image url monImage png background repeat mode d affichage valeurs no repeat repeat x repeat y exemple background repeat no repeat background position position de l image dans le fond valeur coordonn es top left exemple background position Opx 10px Le fichier image doit tre dans le dossier contenta les autres fichiers L image est affich e par d faut de fa on remplir compl tement le fond du widget concern partir du coin en haut gauche top left Si l image est trop grande elle est tronqu e Si l image est trop petite par d faut elle est r p t e ligne par ligne de gauche droite puis de haut en bas La propri t background position permet de pr ciser le cadrage de l image en fixant la position du coin en haut gauche top left de cette image dans le rectangle du widget Exemples Pour expliquer le fonctionnement du background prenons cette image de 40 x 20 pixels d affichage de la division vide suivan
15. d gt AAAAA lt td gt lt td gt B lt td gt lt tr gt lt table gt Tia On peut ajouter dans la balise lt table gt une liste attributs valeurs qui permet de modifier le rendu de l affichge L attribut align permet de fixer l alignement horizontal de la table dans la fen tre du navigateur Il peut prendre les valeurs left qui est la valeur par d faut right ou center Les principaux attributs pr d finis de mise en forme sont les suivants border d finit l paisseur du trait qui encadre les cellules cellspacing d finit l espace entre les cellules de la grille cellpadding d finit l espace entre le cadre de la cellule et le texte La valeur de ces attributs est un entier entre guillemets qui repr sente un nombre de pixels Par exemple lt table border 1 cellspacing 5 cellpadding 2 gt lt tr gt lt td gt Ligne 1 Colonne 1 lt td gt lt td gt Ligne 1 Colonne 2 lt td gt lt tr gt lt tr gt lt td gt Ligne 2 Colonne 1 lt td gt lt td gt Ligne 2 Colonne 2 lt td gt lt tr gt lt table gt Ligne 1 Colonne 1 Ligne 1 Colonne 2 ce code va afficher Ligne 2 Colonne 1 Ligne 2 Colonne 2 Pour notre Puzzle on peut par exemple d couper une image carr e de 400 x 400 pixels en 16 pi ces carr es de 100 x 100 pixels Ainsi la solution sera affich e sur une grille 4 x 4 Les pi ces du Puzzle m lang es au d part s
16. de victoire 20 21 Il ne reste donc plus qu coder cette fonction function clicCellule x ici on modifie l gat des cellules en respectant la r gle du jeu verifierSiCestFini On ne donnera pas le code du programme fournir mais seulement quelques pr cisions utiles sur les v nement que chaque clic peut provoquer Le d placement de chaque pi ce du Puzzle se fait en deux temps 1 on s lectionne une cellule contentant une pi ce ou morceau d image 2 on clique ensuite sur une cellule vide qui va recevoir la pi ce s lectionn e Donc lors de chaque clic il faut prendre en compte l tat actuel de la grille c est dire si une pi ce est d j ou non s lectionn e Ce probl me assez d licat exige d ajouter au mod le une variable globale suppl mentaire celluleSelectionnee contentant le num ro de la cellule s lectionn e entier entre 0 et 31 ou par exemple 1 s il n y a pas de s lection Pr cisons les diff rentes situations que doit prendre en compte la fonction clicCellule SI une cellule contentant une image est d j s lectionn e SI la cellule cliqu e est la cellule s lectionn e e on d s lectionne la cellule SINON la cellule cliqu e n est pas la cellule s lectionn e SI la cellule cliqu e est vide e la s lection passe de cellule s lectionn e la cellule cliqu e SINON aucune cellule n est s lectionn e SI la cellule cliqu e est vide
17. dex html notre fichier code js Pour cela on va ajouter dans l en t te de notre document HTML une balise lt script gt avec sa liste attributs valeurs sous la forme lt script charset utf 8 type text javascript src code js gt lt script gt Les diff rents attributs sont charset utf 8 indique le mode d encodage du fichier type text javascript pr cise le langage src code js donne le nom du fichier JavaScript louverture du fichier index html dans un navigateur Internet les deux fichiers auxi liaires style css et code js sont aussi ouverts automatiquement et interpr t s 4 3 1 Le langage JavaScript Le langage JavaScript est un langage de programmation interpr t par le navigateur Il comporte deux aspects la programmation g n rale et des fonctions d acc s au DOM Il permet donc de consulter et de modifier volont les propri t s de tous les objets du DOM et comme 16 21 toute modification se r percute imm diatement sur l affichage dans la fen tre du navigateur des changements d affichage dynamiques sont possibles De plus JavaScript permet de prendre en compte les v nements comme les clics de souris que l utilisateur peut provoquer sur la page Web Ainsi il devient possible de modifier l aspect graphique de la page en fonction des actions de l utilisateur On ne va pas faire un cours de programmation mais seulement indiquer comment proc der partir d exemples
18. eront plac es sur une autre grille 4 x 4 Pour obtenir l aspect visuel pr sent Figure 2 page 3 il est possible de placer d aligner deux tables en les pla ant dans les cellules d une autre table comme sur ce mod le lt table cellspacing 10 gt lt tr gt lt td gt lt table gt lt table gt lt td gt lt td gt lt table gt lt table gt lt td gt lt tr gt lt table gt La balise lt img gt Cette balise permet d ins r un image dans un document HTML Pour cela il faut pr ciser la valeur de certains attributs pr d finis src d finit le nom du fichier image utiliser alt d finit un texte affich en cas d absence du du fichier image width d finit la largeur de l image affich e optionnel height d finit la hauteur de l image affich e optionnel Exemple lt img src monlmage png alt Mon image gt 8 21 Ici le fichier monImage png doit tre disponible dans le m me dossier que celui qui contient index html En cas d absence du fichier le texte Mon image sera affich Comme les attributs width et height ne sont pas sp cifi s l image sera affich e dans sa taille originale Remarque Notre Puzzle exige le d coupage d une image Ce d coupage assez d licat peut tre effectu l aide d un logiciel de dessin sp cialis Cependant il y a une autre m thode qui permet d viter ce d coupage en utilesant le langage CSS comme on l expliquera
19. insi en utilisant la m me image mais en changeant sa position d origine et en fixant les propri ts height et height il est possible d effectuer un d coupage virtuel de cette image Propri t s de transparence opacity opacity fixe le niveau de transparence du widget valeur un nombre compris entre 0 et 1 avec 0 invisible et 1 opaque exemple opacity 0 5 4 2 4 D finition des styles Passons maintenant la r daction de la feuille de style qui va contenir une liste de r gles comme celle qu on vient de voir ci dessus On ne va pas donner de solution mais simplement donner des conseils suivre Dans la rubrique Page Web du site ISN une application Web interactive permet d ef fectuer des tests simples sur le langage CSS http mathmac free fr PageWeb AppliCSS index html On rappelle qu il va falloir modifier en parall le les deux fichiers index html et style css et v rifier continuellement Pour le titre de la page plac entre lt h1 gt et lt h1 gt une r gle de la forme hi sera directement crite dans le fichier style css Par contre pour s lectionner le message de mode d emploi probablement plac dans une division il faudra identifier cette division en ajoutant un attribut id dans la balise lt div gt et donc modifier d abord le fichier index html Par exemple lt div id message gt Ensuite on pourra ajouter au fichier style css une nouvelle r gle de d clarat
20. ions de style de la forme Hmessage On sait maintenant comment il est possible de d couper virtuellement l image de notre Puzzle Prenons par exemple une image image png de 400 x 400 pixels que l on d sire d couper en 16 morceaux de 100 x 100 pixels On va d finir les propri t s de la classe piece commune toutes les pi ces On va ensuite d finir 16 classes nomm es de pO p15 pour pr ciser la position d ancrage de chacun des 16 morceaux d images piece background image url image png whidth 100px height 100px p0 1 background position Opx Opx p1 1 background position 100px Opx p15 background position 300px 300px Ainsi par exemple pour visualiser dans une cellule de table le morceau num ro 4 le premier de la seconde ligne on aura le code HTML suivant lt td class piece p4 gt lt td gt 15 21 On remarque que quand l attribut class a pour valeur deux noms de classes s par s par un espace les propri t s des deux classes sont cumul es Comme un clic de l utilisateur pourra s lectionner une pi ce il faut pr voir un style sp cifique pour que la pi ce s lectionn e soit visuellement diff rente de la pi ce non s lectionn e par exemple pour la pi ce ci dessus lt td class pieceSelectionnee p4 gt lt td gt On ajoutera une r gle de la forme pieceSelectionnee au fichier style css du m me type que celle de piece ci dessus la
21. l dans le navigateur Internet pour contr ler le rendu 4 1 3 Corps du document Le corps du document contient tout ce que l on d sire afficher dans notre page Web titres textes images boutons etc On d crira uniquement dans ce paragraphe les balises HTML utiles la r alisation du projet Les l ments indispensables au puzzle seront d abord d finis simplement puis leur style graphique sera am lior ensuite comme on le proposera au paragraphe 4 2 page 10 6 21 Mise en page du texte Tout le texte plac dans le corps d une page HTML est affich sur une seule ligne en flot continu c est dire sans tenir compte des espaces en surnombre ou des sauts de lignes pr sents dans le code Les seuls retours la ligne sont ceux qui sont effectu s automatiquement quand le bord droit de la fen tre est atteint Quelques balises pr d finies permettent cependant un peu mise en page Il est possible de fractionner la page du document en paragraphes en pla ant les diff rents textes entre les balises lt p gt et lt p gt Il est aussi possible de fractionner la page en divisions en crivant entre les balises lt div gt et lt div gt Une division peut contenir non seulement du texte mais aussi d autres l ments graphiques comme les listes les tables les images les boutons etc Il y a aussi des balises pr d finies pour afficher six niveaux de titres lt h1 gt section lt h1 gt lt h2 gt sous sectio
22. n lt 2 gt et ainsi de suite jusqu lt h6 gt lt h6 gt Le navigateur attribue tous ces textes plac s entre des balises des styles d affichage particuliers pr d finis On verra plus loin au paragraphe 4 2 page 10 que le mode d affichage ou rendu du code HTML peut toutefois tre modifi l aide d une feuille de style L application Web disponible sur le site ISN et d j signal e page 5 permet de tester rapidement le rendu propos par d faut par votre navigateur Internet pour les diff rentes balises HTML http mathmac free fr PageWeb AppliHTML index html On peut commencer coder la page du projet crire le titre crire un message de mode d emploi ou de compte rendu de jeu Ne pas oublier de tester chaque tape Il reste maintenant placer les l ments du jeu c est dire une grille de jeu de 5 lignes de 5 colonnes un bouton permettant de lancer une nouvelle partie La balise lt table gt Elle permet d aligner des textes sur une grille structur e en lignes et colonnes Entre les balises lt table gt et lt table gt chaque ligne est d finie ente des balises lt tr gt et lt tr gt et dans chaque ligne les colonnes sont d finies entre des balises lt td gt et lt td gt Par exemple le code HTML suivant lt table gt lt tr gt lt td gt a lt td gt lt td gt bbbb lt td gt ee ce code va afficher a ABRE lt tr gt AAAAA B lt t
23. programme 17 4 3 3 D bug Alerte JavaScript 17 4 3 4 Modification d un objet du DOM 18 ido Aeon du BOOM a sos 4 gie Die die muet dans den ne 18 4 3 6 Mod lisation du jeu 4 444 4444444 a ae a 18 43 7 Que faired plus ss 2 4 44 44 bata beau a gain gas 21 Table des figures 1 Bravo c est SAM 4 o 0 ae e ae a a y a rea aa 2 2 Page d accueil du Puzzle s coros 4 44 ea aa ra a a e 3 3 Fen tre associ e au DOM 10 4 Rendus obtenus sans style ou avec style 11 5 Structure d un widget graphique 12 FIGURE 1 Bravo c est gagn 800 Puzzle a EL ta QE ER 2 21 1 Puzzle Image Le jeu se pr sente comme une image d coup e en plusieurs morceaux Ces morceaux sont m lang s et il faut le remettre en ordre pour reconstituer l image On pourra par exemple prendre une image carr e de 400 x 400 pixels d coup e en 16 morceaux 100 x 100 pixels Les morceaux seront donn s gauche dans le d sordre et il faudra les r ordonner pour reconstituer l image droite 2 Projet On demande de r aliser une application Web interactive qui permet de jouer avec ce puzzle FIGURE 2 Page d accueil du Puzzle eoo Puzzle e Puzzle Clic sur la pi ce s lectionn e puis Clic sur la zone vide o la placer Solution Cette appli
24. quelle on ajoutera par exemple une propri t de transparence opacity Pour proc der la reconstitution de l image des cellules vides seront necessaires sur les grilles de jeu On pourra d finir une r gle de calsse de la forme celluleVide On peut aussi d finir un style comme une couleur de fond qui s applique tout le corps du texte avec une r gle de la forme body ou pr ciser le style des boutons avec button Attention Ne pas attendre d avoir termin le codage pour effectuer des v rifications Il est imp ratif apr s chaque modification de sauvegarder les deux fichiers index html et style css puis de recharger imm diatement le fichier index html dans votre navigateur Internet pour contr ler tout de suite la validit du code modifi Vous tes maintenant satisfait du rendu de votre page Web Cependant vos styles semblent fig s On va voir maintenant qu il est possible de modifier l affichage par programme 4 3 code js un programme cod en JavaScript On va maintenant cr er un nouveau fichier de texte que l on va nommer par exemple code js Il va contenir un programme crit dans le langage JavaScript et qui est interpr t par les navigateurs Internet On travaillera encore sur deux fichiers en parall le index html d crit au paragraphe 4 1 page 5 et code js notre nouveau fichier Avant de commencer la programmation on va d abord lier notre page HTML in
25. r afficher correctement la page Web On pr sente page 6 les balises HTML utiles pour le codage du corps du document qui d finit la page Web 4 1 2 En t te du document L en t te du document contient des informations techniques concernant le mode d affichage du texte de la page Web dans la fen tre du navigateur Les balises lt meta gt permettent de donner des indications au navigateur pour lui permettre d afficher correctement la page propos e Il est fortement conseill de placer dans l en t te au moins une balise lt meta gt pour pr ciser le mode d encodage du texte ce qui est important pour que les caract res accentu s soient correctement affich s dans le navigateur 5 21 Cette balise doit contenir ce qu on appelle une liste attribut valeur Une liste attribut valeur peut figurer dans toute balise HTML C est un texte ins r entre le nom de la balise et le signe gt qui la termine Un couple attribut valeur est un nom d attribut suivi du signe suivi d une valeur d attribut crite entre guillemets doubles Les diff rents couples attribut valeur doivent tre s par s par des espaces Dans notre projet http equiv content type sera le premier couple attribut valeur de notre balise lt meta gt il pr cise que cette balise concerne le contenu du document Un second couple attribut valeur pr cise le type et l encodage du contenu du document par exemple content text html charset iso 8859 1
26. s objets du DOM que notre programme doit contr ler dans des variables globales Par exemple div_message pour la zone de message et td_cellule pour les 32 cellules des grilles de jeu Les cellules des grilles sont identifi es par CO C1 C31 On peut construire ces noms par programme Par exemple la cellule de num ro x aura pour identificateur C String x On peut ainsi r cup rer les widgets des cellules dans une variable globale td_cellule td_cellule for x 0 li lt 32 x 1 td_bascule x document getElementByld C String x Une variable globale suppl mentaire etat_cellule pourra contenir l tat actuel de chaque cellule par exemple le nombre 1 pour une cellule vide un entier n compris entre 0 et 15 pour repr senter le pi ce num ro n du Puzzle Ne pas confondre le tableau de 32 l ments td_cellule des objets ou widgets du DOM repr sentant les cellules du jeu avec le tableau de 32 l ments etat_cellule repr sentant par des nombres entiers le contenu de ces cellules Ainsi td_cellule 3 r f rence le widget de la troisi me cellule index e partir de 0 en haut droite de la grille de gauche et etat_cellule 3 caract rise le num ro de la pi ce qu elle contient ou 1 si elle est vide La fonction init pourra ainsi r cup rer les l ments du DOM et ensuite initialiser le mod le du jeu puis lancer une nouvelle partie function init var X div_message documen
27. s le navigateur et on utilise la console d erreur de l outil de d veloppement pour v rifier que tout s est bien pass M me s il ne s est rien pass il y aurait pu y avoir une erreur si le code avait t mal crit 4 3 3 D bug Alerte JavaScript Voici une petite astuce Pour tre certain que l initia lisation a bien eu lieu remplacer le commentaire dans la fonction init par le code alert init a t ex cut Ceci provoquera lors du chargement du fichier index html l afichage d un dialogue d alerte JavaScript init a t ex cut L instruction alert message peut ainsi tre plac e dans toute zone de programme chaque fois qu il est utile de la tester 17 21 4 3 4 Modification d un objet du DOM Nous avons pr vu dans la page d accueil un message de mode d emploi ou de compte rendu de jeu qui sera donc modifi en cours de jeu Nous avons pu cr er une division identifi e pour en d finir le style par exemple lt div id message gt Bonjour lt div gt Pour afficher au d part le mode d emploi du Puzzle Clic sur la pi ce s lectionn e puis Clic sur la zone vide o la placer plut t que Bonjour il nous faut trouver l objet du DOM qui repr sente cette division et en modifier le contenu On peut faire a ainsi dans la fonction init var div_message function init div_message document getElementByld message div_message innerHTML Clic
28. simples Le projet pourra alors tre termin en s inspirant de ces exemples Attention Ne pas oublier apr s chaque modification de sauvegarder les trois fichiers et de recharger imm diatement le fichier index html dans le navigateur Internet pour contr ler le bon fonctionnement de l ensemble Les outils de d veloppement sont ici indispensables pour cela 4 3 2 Initialisation du programme La gestion de ce Puzzle est un programme relativement d licat On donnera des indications pour orienter la r alisation du projet sans toutefois donner de r ponse toutes les difficult s La premi re chose faire est d initialiser le programme Pour cela il faut cr er une fonction JavaScript nomm e par exemple init et l appeler d s que la page HTML est charg e On va ajouter dans la balise lt body gt du fichier index html un nouvel attribut onload qui a pour valeur une instruction JavaScript ici un appel de la fonction d initialisation lt body onload init gt Cet appel de fonction sera ex cut apr s chargement de de la page Web Ensuite on d finit dans le fichier code js la fonction JavaScript function init rien pour l instant Pour l instant cette fonction ne fait rien comme l indique le commentaire En JavaScript tout ce qui suit jusqu la fin de la ligne est un commentaire ignor l ex cution Apr s enregistrement des deux fichiers index html et code js on recharge la page dan
29. t getElementByld message td_cellule for x 0 li lt 32 x 1 td_cellule x document getElementByld C String x nouvellePartie 19 21 La fonction nouvellePartie vue au paragraphe pr c dent va alors placer al atoirement les morceaux de l image sur la grille de gauche cellules de num ro n avec 0 lt n lt 15 et vider les cellules de la grille solution droite cellules de num ro n avec 16 lt n lt 31 et Gestion des cellules Donnons quelques indications suppl mentaires pour vider une cellule ou y placer une pi ce du Puzzle en JavaScript On pourra relire avec profit le paragraphe 4 2 4 D finition des styles On peut par exemple vider la cellule num ro x avec le code suivant etat_cellulelx 1 td_cellule x className celluleVide On peut placer dans la cellule num ro x la pi ce num ro n de l image avec le code suivant etat_cellule x n td_cellule x className piece p String n On peut s lectionner la cellule num ro x avec le code suivant td_cellule x className pieceSelectionnee p String etat_cellule x Ou la d s lectionner avec le code suivant td_cellule x className piece p String etat_cellulelx M lange al atoire des pi ces du Puzzle Un m lange de pi ces peut tre mod lis par une liste de 16 entiers compris entre 0 et 15 dans un ordre al atoire comme par exemple 13 11 3 8 1 15 14 9 0
30. t s CSS usuelles et les valeurs qu elles peuvent prendre Propri t s g om triques Elles permettent de fixer les dimensions des widgets selon le mod le pr sent Figure 5 et repris ci dessous Par d faut le rectangle du widget adapte ses dimensions pour se coller autour du texte qu il encadre On peut cependant modifier tous les param tres width largeur unit s mm cm px pixels exemple width 55mm height hauteur exemple height 25px padding espace entre le texte et la bordure unit s mm cm px et exemple padding 20px margin espace autour de la bordure exemple margin 10px 25 10px 254 12 21 Pour padding et margin il y a deux formes possibles Si une seule mesure est fournie elle s applique aux 4 c t s de rectangle Mais il est possible de donner 4 valeurs distinctes qui repr sentent successivement les espaces top right bottom left au dessus droite au dessous et gauche Si on utilise comme unit cela repr sente un pourcentage de la largeur de la fen tre ce qui significatif uniquement gauche et droite Propri t s typographiques Elles permettent de modifier le mode d criture et l aspect des textes text align alignement horizontal du texte dans le rectangle cette propri t concerne les balises lt div gt valeurs center left right exemple text align center font style style typographique du texte valeurs normal i
31. talic exemple font style italic font weight graisse paisseur typographique des caract res du texte valeurs normal bold bolder et lighter exemple font weight bold font size taille des caract res du texte valeurs xx small x small smaller small medium large larger x large et xx large exemple font size x large font family famille des caract res du texte valeurs serif sans serif monospace et fantasy exemple font family monospace Propri t s d coratives Elles permettent de d finir des encadrement ou de modifier les couleurs des widgets color couleur du texte couleur voir ci dessous exemple color red background color couleur du fond du widget exemple background color yellow border bordure du widget exemple border 1px blue solid Les valeurs de couleurs sont aqua black blue fushia gray green lime marron navy olive purple red silver teal white yellow mais on peut aussi d finir la couleur par son code RVB hexad cimal On crit le caract re suivi de 3 chiffres hexa 0 F pour Rouge Vert et Bleu Par exemple rouge F00 vert 0FO bleu 00F blanc FFF noir 000 Pour la bordure la propri t border est suivie de trois param tres l paisseur du trait la couleur du trait et le type de trait choisi parmi les valeurs suivantes dotted pointill dashed tiret ou solid plein Compl ments sur les propri t s du fond ba
32. te d finie en HTML par lt div id test gt lt div gt Voici en fonction du code CSS pr sent gauche ce qui sera affich droite Htest background image url monlmage png border 1px black solid whidth 150px height 50px d finie dans le fichier monImage png et pr sentons quelques exemples Par d faut si l image est trop petite elle est r p t e de gauche droite puis de bas en haut Mais on peut emp cher a avec la propri t background repeat Htest background image url monlmage png background repeat no repeat border 1px black solid whidth 150px height 50px Regardons maintenant comment on peut d couper une image virtuellement Notre fichier monImage png contient une image de 40 x 20 pixels que je veux afficher comme deux image de 20 x 20 pixels dans deux divisions cod es ainsi lt div id testA gt lt div gt lt div id testB gt lt div gt Voici le code CSS pr sent gauche et ce qui sera affich droite testA background image url monlmage png border 1px black solid whidth 20px height 20px e m testB background image url monImage png O background position 20px 0px border 1px black solid whidth 20px height 20px On remarque que c est la m me image qui est utilis e mais d cal e de 20 pixels vers la gauche dans le second cas et comme le widget est de 20 x 20 pixels l image est tronqu e 14 21 A
33. v rifier les codes et les programmes cr s on peut ajouter Firefox le module Firebug qui fournit des outils de d veloppement http www getfirebug com Ces outils sont indispensables pour la mise au point d une application Web En effet pour ne pas interrompre trop souvent la navigation sur Internet les navigateurs sont extr mement robustes Ils ne signalent pas la plupart de erreurs provoqu es par des pages HTML incorrectes ou par les bugs dans les programmes Le programme ne se bloque pas m me s il peut faire n importe quoi Il faut donc contr ler attentivement son travail l aide de ces outils de d veloppement qui proposent entre autres une console d erreurs 3 2 Les fichiers cr er Il y a trois fichiers de texte cr er dans un m me dossier 1 Le fichier index html cod en HTML contient la description de la page Web affich e dans le navigateur Cette page devra pr senter au moins un titre un message de mode d emploi ou de compte rendu de jeu une grille de jeu interactive un bouton permettant de lancer une nouvelle partie Voir paragraphe 4 1 page 5 2 Le fichier style css cod en CSS contient les d clarations des styles des diff rents l ments affich s dans la page Web Voir paragraphe 4 2 page 10 3 Le fichier code js cod en JavaScript contient le programme qui g re le fonctionne ment de l application Web interactive 4 21 Voir paragraphe 4 3 page 16 4
Download Pdf Manuals
Related Search