posts

Oct

Windows 10 Technical Preview

Categories: Dossiers

Tags: aperçu, fonctionnalités, gratuit, nouveautés, technical preview, video, windows 10

Depuis le 1 Octobre 2014, la version Technical Preview de Windows 10 est librement téléchargeable sur le site http://windows.microsoft.com/fr-fr/windows/preview-download?ocid=tp_site_downloadpage.

Comme vous le voyez, cette préversion n’est disponible qu’en Anglais (US et UK), chinois et portugais, en version 32 et 64 bits.

Installation de Windows 10 Technical Preview dans une machine virtuelle Hyper-V

Dans ce tuto, nous allons installer une version américaine 64 bits dans une machine virtuelle Hyper-V. Le système hôte sera Windows 8.1 Update français 64 bits. Pour être en mesure vous aussi de réaliser cette installation, assurez-vous :

Que vous utilisez une version 64 bits de Windows. Pour cela, appuyez simultanément sur les touches Windows et Pause.
Que votre ordinateur est équipé d’un processeur qui supporte la virtualisation et que cette fonctionnalité est activée dans le BIOS.

Ces deux vérifications effectuées, téléchargez l’image ISO de Windows 10 (32 ou 64 bits peu importe). Vous pouvez maintenant passer à l’étape suivante : la création de la machine virtuelle.

Commencez par exécuter le Gestionnaire Hyper-V. Lancez la commande Nouveau/Ordinateur virtuel dans le menu Action :

Cliquez sur Suivant et donnez un nom à l’ordinateur virtuel : Windows 10 Technical Preview.

Cliquez sur Suivant et choisissez un ordinateur virtuel de génération 1.

Cliquez sur Suivant et affectez 2 ou 3 Go de mémoire à cette machine virtuelle :

Cliquez sur Suivant et indiquez comment la machine virtuelle se connectera à Internet :

Cliquez sur Suivant et indiquez l’emplacement et la taille du disque virtuel :

Cliquez sur Suivant. Choisissez l’option Installer un système d’exploitation à partir d’un CD/DVD-ROM de démarrage. Dans le groupe d’options Media, choisissez Fichier image (.iso) et désignez l’image ISO que vous avez téléchargée en cliquant sur Parcourir :

Cliquez sur Suivant, vérifiez que toutes les informations sont correctes puis cliquez sur Terminer. Quelques instants plus tard, la machine virtuelle que vous venez de créer apparaît dans la zone Ordinateurs virtuels :

Double-cliquez dessus pour ouvrir l’ordinateur virtuel puis cliquez sur l’icône Démarrer pour déclencher l’installation de Windows 10 Technical Preview dans votre machine virtuelle :

Une fois l’installation terminée, vous aurez tout le loisir de tester cette nouvelle mouture de Windows sans nuire à votre Windows actuel.

Découverte de Windows 10 Technical Preview

Nous allons passer en revue les principales nouveautés de cette preview.

Premiers pas – Le menu Démarrer et les fenêtres des applications Modern UI

Dès le démarrage de Windows 10, vous vous retrouvez sur le Bureau. Est-ce que cela veut dire que l’interface Modern UI a disparu ? Pour en avoir le cœur net, appuyez sur la touche Windows du clavier. Surprise ! Ce n’est pas l’écran d’accueil qui s’affiche, mais le menu Démarrer qui se déroule, comme si vous étiez sous Windows 7 :

Regardez d’un peu plus près : la partie droite du menu Démarrer contient des vignettes d’applications Modern UI. Ces dernières n’ont donc pas disparu. Pour en savoir un peu plus, cliquez (par exemple) sur l’icône Musique. L’application Musique s’ouvre en plein écran, comme dans Windows 8.

Remarquez les icônes de minimisation, d’agrandissement et de fermeture dans l’angle supérieur droit de la fenêtre. Si l’icône de minimisation et de fermeture étaient disponibles dans Windows 8.1 Update, l’icône d’agrandissement est une nouveauté. Cliquez dessus. Comme vous pouvez le voir, la fenêtre de l’application Modern UI est redimensionnée, comme s’il s’agissait d’une application de Bureau. Vous pouvez d’ailleurs agir sur ses bordures pour la redimensionner comme bon vous semble et la déplacer sur l’écran en agissant sur sa barre de titre :

Cette constatation est valable pour toutes les applications Modern UI : vous pouvez désormais les redimensionner et les déplacer comme s’il s’agissait de fenêtres traditionnelles.

Etendre le menu Démarrer

Pour ajouter des icônes dans le menu Démarrer, vous pouvez :

Cliquer du bouton droit sur une des icônes affichées dans la partie gauche du menu et sélectionner Pin to Start dans le menu.
Cliquer sur All Apps pour afficher toutes les applications installées, cliquer du bouton droit sur l’une d’entre elles et sélectionner Pin to Start dans le menu.

Vous pouvez également ouvrir l’Explorateur de fichiers et glisser-déposer un fichier quelconque sur le bouton Démarrer. Ce fichier sera ajouté aux éléments épinglés, dans la partie gauche du menu.

Remarquez également que vous pouvez réorganiser les icônes du menu Démarrer par un simple glisser-déposer, aussi bien dans la partie droite que dans la partie gauche du menu.

L’écran d’accueil est toujours là

Que les nostalgiques de Windows 8 ou ceux qui se trouvent à l’étroit dans le menu Démarrer se rassurent, l’écran d’accueil est toujours là.

Cliquez sur Démarrer, tapez navigation et cliquez sur Navigation properties. Cette action affiche la boîte de dialogue Taskbar and Start Menu Properties. Basculez sur l’onglet Start Menu, décochez la case Use the Start menu instead of the Start screen et validez en cliquant sur OK :

La modification n’est prise en compte qu’après la fermeture et la rouverture de session. Cliquez sur Sign out and change settings :

Maintenant, lorsque vous appuyez sur la touche Windows du clavier ou que vous cliquez sur le bouton Démarrer, l’écran d’accueil s’affiche :

Basculer entre les applications ouvertes

Lorsque plusieurs applications sont ouvertes, vous pouvez basculer de l’une à l’autre en utilisant le raccourci clavier Alt+Tab, comme vous le faisiez dans les versions précédentes de Windows.

Dans Windows 10, vous pouvez également cliquer sur l’icône Task view de la barre des tâches pour afficher les icônes de toutes les applications ouvertes. Utilisez les touches fléchées du clavier et appuyez sur la touche Entrée pour basculer sur l’application entourée d’un cadre blanc :

Bureaux multiples

Une autre innovation dans Windows 10 : les bureaux multiples.

Cliquez sur l’icône Task view dans la barre des tâches puis cliquez sur Add a desktop. Un deuxième bureau est créé et automatiquement activé. Vous pouvez l’utiliser pour travailler avec une ou plusieurs autres applications.

Pour changer de bureau, cliquez sur l’icône Task view et cliquez sur le bureau à atteindre dans la partie inférieure de l’écran :

Pour fermer un bureau, cliquez sur l’icône Task view, pointez le bureau à fermer et cliquez sur sa case de fermeture. Si le bureau hébergeait des applications, leurs fenêtres sont transférées sur le bureau précédent :

Enfin, les applications affichées sur un bureau peuvent être transférées sur un autre bureau. Cliquez sur l’icône Task view. Si nécessaire, pointez le bureau qui héberge l’application à déplacer dans la partie inférieure de l’écran pour lui donner le focus. Cliquez du bouton droit sur l’application à transférer, pointez Move to dans le menu et choisissez le bureau destinataire :

Snap multiple

Désormais, il est possible d’ancrer jusqu’à quatre applications sur l’écran en utilisant les raccourcis Windows + Gauche, Windows + Droite, Windows + Haut et Windows + Bas. Ici par exemple, quatre fenêtres de l’Explorateur de fichiers se partagent l’écran :

Feedback, feedback, feedback

Avant de terminer cette vidéo, précisons qu’à terme, Windows 10 sera multiplateforme : il pourra s’exécuter dans des PC, des tablettes, des smartphones et probablement dans des objets connectés. Quel que soit votre écran, vous ferez donc le plein d’applications sur un store unifié.

Sa commercialisation est prévue mi-2015. D’ici-là, amusez-vous bien avec Windows 10 Technical Preview et n’hésitez pas à faire remonter vos observations en utilisant l’application Windows Feedback :

Visualisez tout ce qui vient d’être dit en vidéo. Pour cela, il suffit de rejoindre la zone membres en cliquant sur ce bouton :

Août

PDF – Ce que vous devez savoir

Categories: Dossiers

Tags: addon, créer des pdf, créer pdf, draw, Google Docs, gratuit, htm2pdf, LibreOffice, office 2010, office 2013, pdf, pdf converter, pdf-xchange-viewer, pdf995, plugin, saveaspdf, télécharger, web2pdf, web2pdfConverter, zamzar

Comments: 11

icône Adobe PDF
Aujourd’hui, l’impression papier est en perte de vitesse, au profit de « l’impression numérique ». Entendez par là la manipulation de documents sous la forme de fichiers informatiques. Dans ce domaine, Adobe règne en maître avec son format propriétaire PDF (Portable Document File). Les fichiers au format PDF conservent leur mise en forme initiale, et ce, quel que soit l’ordinateur et le système d’exploitation utilisé. Ils sont donc parfaitement adaptés à la diffusion multiplateforme.

Dans ce tutoriel, je vais vous montrer comment créer, lire et modifier des documents PDF en utilisant vos applications de tous les jours. Au fil des sections, vous verrez comment créer des documents PDF à partir :

de documents Office, LibreOffice et Google Docs;
d’images ;
de pages Web ;
d’applications Windows quelconques capables d’imprimer.

Je vous montrerai également comment effectuer le chemin inverse, c’est-à-dire, convertir des documents PDF en des documents au format Office et LibreOffice.

Créer des fichiers PDF

Cette section va vous montrer comment créer des fichiers PDF avec les suites Microsoft Office, LibreOffice et Google Docs et comment utiliser un pilote d’imprimante pour créer des fichiers PDF à partir de toutes les applications capables d’imprimer.

Créer des PDF avec Office 2010 et 2013

Les versions 2010 et 2013 des applications Word, Excel et PowerPoint sont capables d’exporter les documents qu’elles manipulent dans des fichiers au format PDF.

A titre d’exemple, pour exporter un document Word dans un fichier PDF :

Sélectionnez l’onglet Fichier dans le Ruban.
Cliquez sur Enregistrer sous.
Déroulez la liste Type et choisissez PDF.
Cliquez sur Options, dans la partie inférieure de la boîte de dialogue et précisez quels éléments doivent être inclus dans le fichier PDF.
Validez en cliquant sur OK, choisissez le dossier et le nom du fichier puis cliquez sur Enregistrer.

Créer des PDF avec LibreOffice

Si la suite bureautique LibreOffice n’est pas encore installée sur votre ordinateur, rendez-vous sur la page https://fr.libreoffice.org/. Cliquez sur Télécharger maintenant, sur TELECHARGER LA VERSION 4.X.X et installez LibreOffice en suivant les consignes de l’Assistant d’installation :

Les applications Writer, Calc et Impress (équivalentes à Word, Excel et PowerPoint dans la suite Office) peuvent être utilisées pour créer des fichiers PDF. Notez également que l’application de dessin vectoriel Draw est capable d’exporter les documents manipulés au format PDF. Quelle que soit l’application utilisée, la technique est similaire : il vous suffit de lancer la commande Exporter au format PDF dans le menu Fichier. Cette action déclenche l’affichage de la boîte de dialogue Options PDF :

Si nécessaire, modifiez les paramètres par défaut, puis cliquez sur Exporter. Vous devrez alors choisir un dossier et un nom pour le fichier puis cliquer sur Enregistrer pour sauvegarder le document au format PDF.

Créer des PDF avec Google Docs

L’application en ligne Google Docs est très pratique pour créer et partager des documents texte, des feuilles de calcul et des présentations.

Commencez par vous connecter sur votre compte Google Drive en allant sur la page https://drive.google.com/. Cliquez sur CRÉER :

Choisissez le type du document à créer :

A titre d’exemple, nous allons créer un document texte en cliquant sur Document texte.

Définissez votre document en y insérant du texte, des images, des formes, etc. Vous utiliserez pour cela la barre d’outils et les commandes de menu. Lorsque le document est finalisé, vous pouvez en télécharger une version PDF avec la commande Télécharger au format/Document PDF dans le menu Fichier :

Cette commande est également disponible dans les applications Présentation, Feuille de calcul, Formulaire et Dessin. Vous pouvez donc sauvegarder dans des fichiers PDF les présentations, les feuilles de calculs, les formulaires et les images réalisées dans ces quatre applications.

Imprimer dans un fichier PDF

Pour terminer ce dossier, je vais vous montrer comment installer un pilote de périphérique qui vous permettra de créer des fichiers PDF à partir d’une application Windows quelconque, à condition qu’elle soit capable d’imprimer. Je vous propose d’utiliser deux applications: Pdf995 et PDFCreator.

Pdf995

L’installation se passe en deux temps. Rendez-vous sur la page http://www.pdf995.com/download.html et téléchargez le fichier Pdf995 Printer Driver en cliquant sur le lien Download correspondant :

Installez Pdf995 Printer Driver. A la fin de l’installation, une boîte de dialogue vous propose de télécharger l’application Free Converter. Cliquez sur Oui :

La page http://www.pdf995.com/download.html s’affiche à nouveau. Cliquez sur le lien Download, en face de Free Converter :

Une fois ces deux applications installées, toutes les applications capables d’imprimer peuvent créer des fichiers PDF. Il suffit pour cela de lancer la commande d’impression (en utilisant le menu Fichier ou l’icône Imprimer par exemple) et de choisir l’imprimante PDF995 :

Sauvegarder des pages Web au format PDF

Saviez-vous qu’il est possible de sauvegarder vos pages Web préférées au format PDF afin de faciliter leur consultation ? Pour cela, vous pouvez utiliser un service en ligne ou un plugin dans votre navigateur.

Tous les sites Web de sauvegarde au format PDF fonctionnent selon le même principe. Vous devez :

Copier l’adresse de la page à sauvegarder dans le presse-papiers de Windows.
Aller sur le site de sauvegarde et coller le contenu du presse-papiers dans une zone de texte.
Cliquer sur un bouton pour créer le fichier PDF correspondant.

Nous avons testé deux sites (Web2PDF et HTM2PDF) et deux navigateurs (Firefox et Google Chrome).

Web2PDF

http://www.web2pdfconvert.com/

HTM2PDF

http://www.htm2pdf.co.uk/

Utiliser un plugin dans Firefox

Allez sur la page https://addons.mozilla.org/fr/firefox/addon/web2pdf-converter/, puis ajoutez l’extension Web2PDF Converter en cliquant sur Ajouter à Firefox :

Lorsque cette extension est installée, une icône est affichée à droite de la barre d’adresse de Firefox :

Pour sauvegarder une page Web dans un fichier PDF, rendez-vous sur cette page et cliquez sur l’icône Web 2 PDF. Quelques instants plus tard, un lien vous permet de télécharger le fichier PDF correspondant :

web2pdfconverter - télécharger un fichier pdf

Utiliser un plugin dans Google Chrome

Allez sur la page https://chrome.google.com/webstore, puis recherchez et installez l’extension Save as PDF :

Une fois l’extension Save as PDF installée, une icône est ajoutée à droite de la barre d’adresse de Google Chrome :

Pour sauvegarder une page Web dans un fichier PDF, rendez-vous sur cette page et cliquez sur l’icône Save as PDF. Quelques instants plus tard, la page sera automatiquement sauvegardée dans votre dossier de téléchargement par défaut :

Editer des fichiers PDF

Vous savez maintenant créer des fichiers PDF à partir de toutes les applications Windows installées sur votre ordinateur. Dans cette section, je vais vous montrer comment modifier le contenu d’un fichier PDF.

Editer des fichiers PDF avec Word 2013

Dans les versions 2010 de Word, Excel et PowerPoint, vous pouviez sauvegarder vos documents sous la forme de fichiers PDF. Avec Word 2013, vous pouvez également ouvrir un fichier PDF quelconque, y apporter des modifications et l’enregistrer au format PDF ou dans un des autres formats supportés par Word 2013.

Pour ouvrir un fichier PDF dans Word 2013 :

Sélectionnez l’onglet FICHIER dans le ruban.
Cliquez sur Ouvrir.
Cliquez sur Ordinateur, puis sur Parcourir.
Ouvrez le dossier qui contient le fichier PDF à modifier, sélectionnez-le puis cliquez sur Ouvrir.
Un message vous informe que le fichier PDF va être converti en un document Word modifiable. Cliquez sur OK et patientez jusqu’à la fin de la conversion.

Selon le contenu du fichier PDF, il se peut que le document converti ne soit pas exactement identique à l’original. Par exemple, il se peut que les sauts de page se trouvent à des emplacements différents.

Après avoir effectué les modifications souhaitées dans le document, sauvegardez-le :

Sélectionnez l’onglet FICHIER dans le ruban.
Cliquez sur Enregistrer.
La boîte de dialogue Enregistrer sous s’affiche. Choisissez le type du fichier dans la liste déroulante Type.
Donnez un nom au fichier, puis cliquez sur Enregistrer pour l’enregistrer.

Editer des fichiers PDF avec Draw

Vous pouvez utiliser l’application Draw de la suite LibreOffice pour éditer des fichiers au format PDF, que ceux-ci aient été créés avec une application de la suite LibreOffice ou non !

Si LibreOffice n’est pas encore installé sur votre ordinateur, consultez la section intitulée « Créer des PDF avec LibreOffice » et installez cette suite logicielle.

Lancez LibreOffice, cliquez sur Ouvrir un fichier dans le volet gauche, choisissez le fichier PDF à ouvrir et cliquez sur Ouvrir :

Modifier un fichier PDF dans LibreOffice Draw

Quelques instants plus tard, le fichier PDF est ouvert dans LibreOffice Draw :

Vous pouvez le modifier et le sauvegarder les modifications avec la commande Exporter au format PDF dans le menu Fichier.

Remplir un formulaire au format PDF

De plus en plus de formulaires administratifs (comme ceux que vous trouvez sur le site http://www.service-public.fr/formulaires/ par exemple) peuvent être téléchargés sous la forme de fichiers PDF. Plutôt que de les imprimer, les remplir à la main et les envoyer par courrier postal, je vous propose de les compléter sur votre ordinateur. Vous pourrez ensuite les envoyer par e-mail.

Vous vous dites certainement que vous pourriez utiliser Word 2013 ou LibreOffice Draw pour vous acquitter de cette tâche. Il est vrai que ces deux solutions fonctionnent, mais elles s’avèrent peu pratiques à l’usage.

Dans Word, les lignes qui contiennent des pointillés sont autant de paragraphes. Après vous être mis en mode Refrappe, vous pouvez saisir le texte à insérer au clavier. Il remplacera automatiquement les pointillés. Pour ceux qui ne sauraient pas comment passer en mode Refrappe, cliquez droit dans la barre d’état de Word, sélectionnez Refrappe dans le menu et cliquez si nécessaire sur INSERER dans la barre d’état. Là où les choses se corsent, c’est quand vous voulez cocher une case. Le plus simple consiste à remplacer le caractère « case à cocher non cochée » par le caractère « case à cocher cochée ». Ce caractère se trouve par exemple dans la police WingDings 2, et il peut être inséré en cliquant sur l’icône Symbole, dans le groupe Symboles de l’onglet INSERTION. Je vous avais prévenu, la technique n’est pas optimale !

Dans Draw, les lignes qui contiennent des pointillés sont des zones de texte. Pour insérer du texte dans une zone de texte, double-cliquez dessus, supprimez les pointillés et tapez le texte au clavier. Les cases à cocher ne sont pas mieux loties que dans Word. Pour cocher une case, vous devez double-cliquer sur la case et taper la lettre X au clavier. Pas de chance, la taille de la police utilisée sera certainement trop grande et vous devrez la changer en utilisant la liste déroulante Taille de police de la barre d’outils. Ici encore, la technique n’est pas optimale !

Je vous propose plutôt de passer par un lecteur de PDF tiers nommé PDF XChange Viewer. Pour télécharger cette petite merveille, rendez-vous sur la page http://www.tracker-software.com/product/downloads et cliquez sur DOWNLOAD NOW, dans le cadre PDF-Xchange Viewer :

Installez puis lancez l’application PDF-Xchange Viewer. Cliquez sur l’icône Ouvrir dans la barre d’outils et choisissez le fichier à ouvrir. Lancez la commande Outils de commentaires et Annotations/Outil Machine à écrire dans le menu Outils. Vous pouvez maintenant cliquer à un endroit quelconque du formulaire et le remplir en utilisant le clavier. Si vous avez plusieurs informations à entrer, il vous suffit de cliquer à un autre endroit (l’outil Machine à écrire reste actif).

Pour cocher une case, il vous suffit de cliquer sur la case et de taper la lettre X majuscule au clavier. Avouez que cette application est bien mieux adaptée à l’édition de formulaires PDF que Word ou Draw.

Convertir au format PDF en ligne

Pour convertir des fichiers PDF en documents Word, Excel, PowerPoint ou image (PNG, JPG ou TIF) et inversement, sans rien installer sur votre ordinateur, vous pouvez faire appel à des services en ligne.

Nous avons testé deux services : PDF Converter et ZamZar :

PDF Converter

Rendez-vous sur la page http://www.freepdfconvert.com/.
Selon le type de conversion souhaité, sélectionnez un onglet dans la partie supérieure de la page.
Cliquez sur Select files et sélectionnez le fichier à convertir.
Choisissez un format de conversion dans la liste déroulante Convert to.
Cliquez sur Convert.

Ici par exemple, nous convertissons le fichier PowerPoint Decision tree.pptx en un fichier PDF.

Après quelques instants, le fichier converti peut être téléchargé en cliquant sur Download :

Zamzar

Rendez-vous sur la page http://www.zamzar.com/.
Choisissez le fichier ou le site à convertir en sélectionnant l’onglet URL Converter ou Convert Files.
Fournissez les informations demandées et cliquez sur Convert. Ici par exemple, nous convertissons le site https://www.mediaforma.com dans un fichier PDF et nous l’envoyons à l’adresse mail adresse@fai.com :

Ce site est plus complet que le précédent. Il permet de transformer des pages Web et de nombreux types de fichier dans d’autres formats de fichiers tout aussi nombreux. Consultez la page http://www.zamzar.com/conversionTypes.php pour avoir un aperçu des formats possibles :

A vous la parole

C’est le premier dossier complet de Mediaforma Learning. J’espère qu’il vous a plu. Si vous avez une minute, dites-nous ce que vous en avez pensé en postant un commentaire.

Vous pouvez également vous manifester si une des techniques citées ne fonctionne pas sur votre ordinateur, ou encore si vous utilisez un autre logiciel ou service Web pour créer ou modifier des fichiers PDF. Toute remarque est la bienvenue.

Mai

Memory – Etape 9

Categories: Memory

Tags: css3, HTML5, javascript, jeu, jquery, memory, nombre de retourne, temps de jeu

Comments: No

Etape 9 – Détection du nombre de coups joués et du temps en fin de partie

Nous arrivons déjà à la neuvième et dernière étape du jeu : la détection du nombre de coups joués et l’affichage du temps écoulé en fin de partie.

Commencez par définir quatre nouvelles variables dans l’en-tête du document :

…

var visible = new Array(0,0,0,0,0,0,0,0,0,0,0,0);

var nombre_clics = 0; // Nombre de cartes retournées

var d = new Date(); // Pour obtenir l’heure de début de partie

var heure_depart; // Heure de début de partie

var ns; // Nombre de secondes écoulées depuis le début de la partie

Pour afficher le nombre de clics pendant la partie, insérez une balise <span> d’identifiant ncr à la fin du code, juste avant la balise </body> :

<br><br>Nombre de cartes retournées : <span id= »ncr »>0</span>

</body>

Lorsque le joueur clique sur une carte, le nombre de cartes cliquées est incrémenté d’un, et le nombre de clics est affiché dans la balise <span> d’identifiant ncr :

else {

nombre_retourne++;

nombre_clics++;

document.getElementById(‘ncr’).innerHTML = nombre_clics;

Nous allons maintenant nous intéresser au temps de jeu. Commencez par mémoriser l’heure de début de jeu dans la variable heure_depart en faisant appel à la fonction getTime(). Cette instruction est insérée au début du script. Elle sera donc exécutée dès l’affichage de la page :

heure_depart = d.getTime();

Pour ceux qui voudraient en savoir plus sur la fonction getTime(), sachez qu’elle retourne le nombre de millisecondes écoulées depuis le 1 janvier 1970 à minuit.

Nous allons maintenant nous intéresser au temps nécessaire pour terminer une partie.

Commencez par ajouter une balise <span> d’identifiant temps_ecoule à la fin du document, juste avant la balise </body> :

<br><br>Nombre de cartes retournées : <span id= »ncr »>0</span>

</body>

Pour savoir quand le jeu est terminé, nous allons mémoriser chaque appariement de cartes dans la variable nombre_apparies :

if (memo_carte == name) { // Deux cartes identiques retournées

$(‘#bravo’)[0].play();

nombre_apparies = nombre_apparies + 2;

Pour savoir si la partie est terminée, il suffit de tester la valeur de la variable nombre_apparies. Une valeur égale à 12 indique que la partie est terminée :

if (nombre_apparies == 12) {

Dans ce cas, le son d’identifiant superbravo est émis :

$(‘#superbravo’)[0].play();

Pour calculer le temps écoulé depuis le début de la partie, nous définissons un deuxième objet Date() :

var d2 = new Date();

La quantité d2.getTime() donne le nombre de millisecondes écoulées depuis le 1 janvier 1970 à minuit. En soustrayant la valeur mémorisée au début de la partie dans la variable heure_depart et en divisant le résultat par 1000, nous obtenons le nombre de secondes écoulées depuis le début de la partie :

ns = (d2.getTime() – heure_depart) / 1000;

Il suffit maintenant d’afficher cette valeur dans la balise <span> d’identifiant temps_ecoule :

document.getElementById(‘temps_ecoule’).innerHTML = ‘Partie terminée en ‘ + ns + ‘ secondes !’;

Nous allons terminer ce jeu en ajoutant un lien dans le bas de la page pour rafraîchir la page, et donc pour recommencer une partie. Ce code doit être ajouté juste avant la balise </body> :

<br><br><a href= »memory.htm »>Recommencer le jeu</a>

Mai

Memory – Etape 8

Categories: Memory

Tags: audio, css3, HTML5, javascript, jeu, jquery, memory, son

Comments: No

Etape 8 – Ajout de sons pour réagir au jeu

Pour rendre le jeu un peu plus sympathique, nous allons lui ajouter du son. Pour cela, nous ferons appel aux balises HTML5 <audio>.

Vous pouvez télécharger des sons et effets spéciaux sur le site http://www.universal-soundbank.com/.

Internet Explorer sait lire les sons au format MP3. Quant à Chrome et Firefox, ils savent lire les sons au format OGG. Pour assurer la compatibilité avec ces trois navigateurs, vous devrez donc fournir chaque son aux formats MP3 et OGG. Le navigateur choisira le format qui lui convient.

Pour convertir des sons, je vous conseille d’utiliser le freeware Free MP3 WMA Converter en vous rendant sur la page http://www.koyotesoft.com/.

Pour insérer un son dans le document, vous utiliserez le code suivant. Ici, le son a pour identifiant « oui ». Il est fourni aux formats MP3 et OGG via deux balises <source> :

</audio>

Le jeu va utiliser quatre sons d’identifiants oui, non, bravo et superbravo :

Le son d’identifiant oui sera joué lorsque le joueur clique sur une carte qui peut être rendue visible. Le son d’identifiant non sera joué lorsque le joueur essaye de rendre plus de deux cartes visibles simultanément. Le son d’identifiant bravo sera joué lorsque le joueur apparie deux cartes. Enfin, le son d’identifiant superbravo sera joué lorsque la partie est terminée.

Les balises <audio> sont insérées dans le code HTML, juste après le titre H1 :

<body>

<h1>Memory – Evaluez votre mémoire</h1>

</audio>

</audio>

</audio>

</audio>

Pour jouer un son, le plus simple consiste à utiliser une instruction jQuery. Par exemple, pour jouer le son d’identifiant oui, vous utiliserez cette instruction :

$('#oui')[0].play();

Avant de pouvoir utiliser ce type d’instruction, vous devez faire référence à la bibliothèque jQuery dans l’en-tête du document en utilisant une balise <script>.

Ici, la bibliothèque jQuery vient du CDN jQuery. Pour ceux qui ne le sauraient pas, CDN signifie Content Delivery Network. Ce terme fait référence à des ordinateurs reliés à Internet qui mettent à disposition du code (ici jQuery) aussi rapidement que possible. Il existe trois « gros » CDN pour jQuery : jQuery, Google et Microsoft. Ici, nous avons choisi d‘utiliser le CDN jQuery, mais rien ne vous empêche de choisir un des deux autres, ou pourquoi pas, d’héberger la bibliothèque jQuery sur votre propre site.

Pour l’instant, nous allons insérer le code qui permet de jouer les sons d’identifiants oui, non et bravo. Nous nous intéresserons au son d’identifiant superbravo par la suite, lors de l’implémentation du code qui détecte la fin de la partie.

Lorsque le joueur clique sur une carte, le son d’identifiant non doit être joué si deux cartes sont déjà visibles. Dans le cas contraire, le code défini à l’étape précédente peut être exécuté :

if (nombre_retourne==2)

$(‘#non’)[0].play();

else {

…

Lorsqu’une carte peut être rendue visible, le son d’identifiant oui doit être joué :

else {

nombre_retourne++;

document.getElementById(id).src = name; // On montre la carte

$(‘#oui’)[0].play();

…

Enfin, lorsque deux cartes viennent d’être appariées, le son d’identifiant bravo doit être joué :

if (memo_carte == name) {

$(‘#bravo’)[0].play() ;

Exécutons ce code. Comme vous pouvez le constater, les trois sons sont maintenant opérationnels. Ici, nous utilisons le navigateur Google Chrome, mais le résultat est identique dans Internet Explorer 10 et Firefox.

posts

Windows 10 Technical Preview

Installation de Windows 10 Technical Preview dans une machine virtuelle Hyper-V

Découverte de Windows 10 Technical Preview

Premiers pas – Le menu Démarrer et les fenêtres des applications Modern UI

Etendre le menu Démarrer

L’écran d’accueil est toujours là

Basculer entre les applications ouvertes

Bureaux multiples

Snap multiple

Feedback, feedback, feedback

PDF – Ce que vous devez savoir

Créer des fichiers PDF

Créer des PDF avec Office 2010 et 2013

Créer des PDF avec LibreOffice

Créer des PDF avec Google Docs

Imprimer dans un fichier PDF

Pdf995

Sauvegarder des pages Web au format PDF

Web2PDF

HTM2PDF

Utiliser un plugin dans Firefox

Utiliser un plugin dans Google Chrome

Editer des fichiers PDF

Editer des fichiers PDF avec Word 2013

Editer des fichiers PDF avec Draw

Remplir un formulaire au format PDF

Convertir au format PDF en ligne

PDF Converter

Zamzar

A vous la parole

Memory – Etape 9

Etape 9 – Détection du nombre de coups joués et du temps en fin de partie

Memory – Etape 8

Etape 8 – Ajout de sons pour réagir au jeu

En promotion cette semaine

Inscrivez-vous à la zone membre

Cliquez ici pour vous inscrire