DOCUMENT TECHNIQUE Sujet : Réalisation d une plate-forme Web de type «Jeu» d exploitation du portail Sud
Langage de programmation 1. HTML5/CSS3 Pour réaliser ce projet, nous avons eu le choix entre 2 langages : HTML5/CSS3 et WebGL. Le groupe n ayant aucune connaissance dans la deuxième technologie, le choix s est porté sur l utilisation de HTML5 et CSS3 qui est une technologie proche de HTML 4 et CSS2 dont tous les membres ont une certaine expérience. Dans la suite du projet, nous avons appris les nouvelles spécificités de HTML5 et CSS3 et avons tenté de mettre en pratique ces nouveautés dans l élaboration des pages Web du jeu. 2. jquery/javascript En complément du HTML5/CSS3, nous avons aussi eu recours à l utilisation de scripts Javascript mais aussi de plugins jquery. Sachant que l application sera utilisée principalement sur tablettes, smarphones mais aussi PC, nous avons essayé de développer une application hors du schéma habituel d un site web. Pour réaliser au mieux cette approche, l utilisation de scripts Javascript devient alors indispensable pour la suite. Ainsi, nous avons utilisé le plugin jquery dans sa version 1.8.3 mais aussi le plugin jquery-ui dans sa version 1.9.2 en customisant le thème des différents widgets offerts (notamment le widget dialog). Mise en place de l interface 1. Page d accueil La page d accueil est composée d un menu principal avec 3 icônes dont le code HTML est le suivant : M2 MIAGE 2COM - Année 2012/2013 1
Pour afficher le menu principal au démarrage du jeu, nous avons divisé la page en 2 blocs : bloc_accueil et bloc_jeu. Le bloc de jeu est alors masqué dans le script par le code suivant : Chacune des images peut être cliquée grâce au lien qui <a href= # ></a> qui les entoure. Le clic sur l une des images est pris en charge dans le script jeu.js par le code suivant : Ce code permet de lancer un widget dialog disponible grâce au plugin jquery-ui et de proposer le contenu lié à chacune des 3 images du menu principal. M2 MIAGE 2COM - Année 2012/2013 2
En cliquant sur l icône «Contact», l utilisateur déclenchera l ouverture du dialog qui est initialisé en début de script et dans la page index.html : Le script se charge alors d ouvrir un dialog en utilisant la mise en forme du formulaire HTML ainsi que les propriétés (taille et boutons disponibles) définis cidessus. En cliquant sur l icône «Aide au jeu», un autre dialog s ouvrira suivant le même mode fonctionnement que pour l icône «Contact». Voici le code associé à cette icône : M2 MIAGE 2COM - Année 2012/2013 3
Quant à l icône centrale, elle permet de lancer le jeu. En cliquant dessus, une fonction javascript est appelée start() : Cette fonction start() va permettre de masquer le menu principal et d afficher le bloc de jeu : 2. Page de jeu 2.1 Le carrousel Pour permettre aux tablettes et smartphones de profiter au mieux de l application Web, nous avons abandonné l interface classique d un site web pour disposer le jeu sous la forme d un carrousel. Ce carrousel permet de faire défiler les photos des vierges pour permettre à l utilisateur de choisir la photo sur laquelle il souhaite y jouer. Par le manque de temps pour réaliser ce projet, nous avons décidé d utiliser un plugin jquery téléchargeable sur www.bkosborne.com/jquery-feature-carousel dont le nom est «featurecarousel». Ce plugin, bien qu en cours d évolution, nous apporte une solution satisfaisante pour réaliser l application au plus près des données du cahier des charges. M2 MIAGE 2COM - Année 2012/2013 4
Pour définir ce carrousel dans notre page, il faut utiliser le code HTML suivant : Il faut d abord définir un bloc conteneur, ici carousel-container, et définir les images que l on souhaite y afficher en définissant d autres blocs carousel-feature. Enfin, en ajoutant un lien au fichier js fournit avec le plugin, le carrousel est prêt à être utiliser. 2.2 Les formulaires 2.2.1 Contact Une icône «Contact» est aussi rajouté dans la page de jeu, elle reprend exactement la même image en résolution plus petite et est placé en bas à gauche grâce au CSS. Le mode de fonctionnement est le même que pour l icône du menu principale mais est appelé «jeu_aide» au lieu de «menu_aide». Les codes sont ainsi similaires. 2.2.2 Aide De même que pour l icône «Contact» de la page de jeu, l icône «Aide au jeu» est placé en bas a droit de la page avec le CSS : M2 MIAGE 2COM - Année 2012/2013 5
Le fonctionnement reste aussi similaire à l icône du menu principal et est appelé «jeu_aide» au lieu de «menu_aide». 2.2.3 Indices Les indices sont mis à disposition des utilisateurs lorsqu il compare la photo sélectionnée avec la photo originale par le biais d un widget dialog et du bouton associé «Indices» dont la fonctionnalité est définie dans le script js. Tout d abord, il faut définir le bloc HTML qui contiendra l image avec les indices : Il faut ensuite définir le widget dialog avec les propriétés souhaitées dans le fichier de script : C est seulement en cliquant sur le bouton «Indices» du widget dialog lors de la comparaison qu il est possible de visualiser les indices pour la photo sélectionnée : M2 MIAGE 2COM - Année 2012/2013 6
Chaque indice correspond à une image PNG disponible dans le dossier images du projet et est simplement ajoutée dans le widget dialog en tant que fond d image en utilisant le CSS : 2.3 Gestion des erreurs sur les photos Lorsque l utilisateur clique sur la photo centrale du carrousel, un widget dialog s ouvre et affiche la photo originale ainsi que celle qui est sélectionnée dans le carrousel. Cette fonction est implémentée dans le script js par le code suivant : Selon le choix de l utilisateur, les images sont chargées comme les dialog précédents en prenant en compte le code HTML et le script js associé. Dans la suite du jeu, pour pouvoir gérer les clics des utilisateurs et afficher les résultats lorsque ceux-ci sont corrects, nous avons décidé d afficher sur la photo sélectionnée des images transparentes aux emplacements des erreurs. En calculant les zones cliquables et celle des erreurs, nous avons procédé de la manière suivante pour afficher chacune des photos : Ainsi, la photo qui sera sélectionnée par l utilisateur contiendra aussi des images transparentes sur les bons emplacements grâce à la fonction affichagevierge() qui va se charger d effectuer les placements et de mettre à jour les données pour la gestion des clics. M2 MIAGE 2COM - Année 2012/2013 7
Comme pour la photo n 0, dont le code est présenté ci-dessus, nous avons définis la gestion du clic sur les 3 zones calculées et positionnées précédemment. Une fonction initclic est alors appelée et permet d initialiser le clic et de transmettre les données à une autre fonction verifiererreur afin de vérifier l état de la photo (1, 2 ou 3 erreurs trouvées ou non) pour la mettre à jour. C est la fonction verifiererreur qui va contrôler les erreurs de chaque photo et afficher les erreurs trouvées sur la photo. Elle affichera aussi le message bonus, via la fonction alert de javascript, et se chargera de remplacer la photo par celle de fin pour signaler que la photo est complète (3 erreurs trouvées). Ces fonctions mettent à jour un tableau contenant l état des photos des Vierges à comparer et permettent ainsi de mettre à jour l interface à chaque action de l utilisateur. M2 MIAGE 2COM - Année 2012/2013 8
2.4 Gestion de la fin du jeu Lors de chaque clic sur une bonne zone de la photo, une fonction findujeu() est appelée pour vérifier s il ne s agit pas du dernier clic sur la dernière erreur à retrouver. S il s agit de la dernière erreur, un message s affichera pour demander au joueur s il souhaite ou non rejouer une partie. Si oui, la page est rechargée via la fonction location.reload() et toute les données actuelles seront réinitialisée. M2 MIAGE 2COM - Année 2012/2013 9