{"id":2353,"date":"2018-03-21T18:39:50","date_gmt":"2018-03-21T17:39:50","guid":{"rendered":"http:\/\/mother3vf.free.fr\/?p=2353"},"modified":"2026-05-20T20:57:11","modified_gmt":"2026-05-20T18:57:11","slug":"decouvrez-nos-widgets-mother-3-au-format-web","status":"publish","type":"post","link":"https:\/\/mother3vf.pages.dev\/index.php\/bonus\/decouvrez-nos-widgets-mother-3-au-format-web\/","title":{"rendered":"D\u00e9couvrez nos widgets Web de MOTHER 3"},"content":{"rendered":"<p style=\"text-align: justify;\">Si vous me connaissez un peu, vous devez probablement savoir que je prends plaisir \u00e0 me lancer des d\u00e9fis techniques inutiles, ou du moins, chronophages (sinon je ne me serais jamais lanc\u00e9 dans cette traduction)\u202f! En tant que d\u00e9veloppeur Web du dimanche, j\u2019ai r\u00e9cemment \u00e9t\u00e9 tent\u00e9 d\u2019utiliser certaines technologies r\u00e9centes des navigateurs <strong>pour reproduire quelques \u00e9crans de MOTHER 3 sous forme de mini-pages Web interactives<\/strong>.<\/p>\n<p style=\"text-align: justify;\">L\u2019id\u00e9e m\u2019a \u00e9t\u00e9 inspir\u00e9e notamment par une envie de tester certaines fonctionnalit\u00e9s de mise en forme (la propri\u00e9t\u00e9 image-rendering: pixelated du CSS, les polices Web, et les animations CSS, pour ceux qui s\u2019int\u00e9ressent \u00e0 la technique), mais aussi par mon d\u00e9sir de faire d\u00e9couvrir MOTHER 3 \u00e0 un plus grand nombre, de m\u00eame que ses textes en fran\u00e7ais\u202f!<\/p>\n<p style=\"text-align: justify;\">Ces mini-applications Web, appelons-les\u00a0<em>widgets<\/em>, sont actuellement au nombre de deux. Ils sont pens\u00e9s pour pouvoir \u00eatre partag\u00e9s et int\u00e9gr\u00e9s sur vos sites Web et autres blogs.<\/p>\n<h2 style=\"text-align: justify;\">Le Bestiaire de MOTHER 3<\/h2>\n<p style=\"text-align: justify;\">Le premier <em>widget<\/em> reprend un menu qui est \u00e0 l\u2019origine tr\u00e8s bien cach\u00e9 dans les sous-\u00e9crans de pause de MOTHER 3\u202f: <strong>le Bestiaire ! Il r\u00e9pertorie tous les ennemis rencontr\u00e9s dans le jeu.<\/strong><\/p>\n<p style=\"text-align: center;\"><iframe loading=\"lazy\" style=\"border: 0; overflow: hidden;\" src=\"\/dev\/widgets\/bestiaire\/\" width=\"480\" height=\"320\" scrolling=\"no\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p style=\"text-align: justify;\">Plut\u00f4t sympathique, non\u202f? L\u2019interface se veut intuitive\u202f; <strong>il peut s\u2019utiliser \u00e0 la souris ou au clavier, ou encore avec vos doigts si vous utilisez un appareil tactile<\/strong>. Un menu d\u2019options vous permet de choisir la couleur (comme dans le jeu\u202f!), ou d\u2019activer les bruitages et la musique de fond.<\/p>\n<p style=\"text-align: justify;\">Gr\u00e2ce aux options de partage, vous pouvez \u00e9galement partager un ennemi sp\u00e9cifique, avec ou sans le reste de l\u2019interface. \u00c0 titre d\u2019exemple, je vous pr\u00e9sente ici cet ennemi rigolo qu\u2019est la Patatueuse cuite, sur un fond violet du meilleur go\u00fbt\u202f:<!--more--><\/p>\n<p style=\"text-align: center;\"><iframe loading=\"lazy\" style=\"border: 0; overflow: hidden;\" src=\"\/dev\/widgets\/bestiaire\/?mode=reduit&amp;lang=fr&amp;init=32,raisin\" width=\"254\" height=\"272\" scrolling=\"no\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p style=\"text-align: justify;\">L\u2019int\u00e9gration est tr\u00e8s simple, elle se fait sous la forme d\u2019un code \u00e0 copier-coller pour l\u2019insertion sur votre site ou blog. Pour les r\u00e9seaux sociaux, les options de partage proposent \u00e9galement un simple lien, qui proposera directement un aper\u00e7u pour Facebook ou Twitter. M\u00eame si je mets g\u00e9n\u00e9ralement plut\u00f4t en avant la traduction fran\u00e7aise, le\u00a0<em>widget<\/em> saura aussi s\u2019afficher en anglais si vos r\u00e9glages syst\u00e8me l\u2019exigent.<\/p>\n<p style=\"text-align: justify;\">J\u2019ai \u00e9galement ajout\u00e9 quelques bonus pour les fans\u202f: deux ennemis cach\u00e9s qui ne sont jamais visibles dans le jeu, et\u00a0quelques images d\u2019ennemis de dos qu\u2019on ne voit jamais, alors qu\u2019elles sont pr\u00e9sentes dans la ROM du jeu. Je vous laisse les d\u00e9couvrir\u202f!<\/p>\n<h2>Le lecteur audio<\/h2>\n<p style=\"text-align: justify;\">L\u00e0 on arrive \u00e0 quelque chose qui peut \u00eatre plus int\u00e9ressant sur la dur\u00e9e\u202f! Mon second\u00a0<em>widget<\/em> est <strong>un lecteur audio qui vous permettra d\u2019\u00e9couter toutes les musiques de MOTHER 3<\/strong> dans une interface qui vous rappellera le charme pixelis\u00e9 des menus du jeu. Probablement la meilleure fa\u00e7on de r\u00e9\u00e9couter les musiques de MOTHER 3\u202f!<\/p>\n<p style=\"text-align: center;\"><iframe loading=\"lazy\" style=\"border: 0; overflow: hidden;\" src=\"\/dev\/widgets\/lecteur\/#001\" width=\"480\" height=\"320\" scrolling=\"no\"><\/iframe><\/p>\n<p style=\"text-align: justify;\"><strong>Exactement comme dans le jeu, vous pouvez profiter d\u2019un choix d\u00e9licieux de 250 musiques et cr\u00e9er une liste de lecture avec vos morceaux favoris.<\/strong> Votre liste de lecture sera m\u00eame sauvegard\u00e9e automatiquement pour que vous puissiez la retrouver \u00e0 votre prochaine session\u202f!<\/p>\n<p style=\"text-align: justify;\">\u00c7a s\u2019utilise au clavier, \u00e0 la souris ou via l\u2019\u00e9cran tactile, et les possibilit\u00e9s de partage\/int\u00e9gration sont les m\u00eames que pour le Bestiaire (voir la partie pr\u00e9c\u00e9dente). De m\u00eame, le lecteur audio saura s\u2019afficher en anglais ou en fran\u00e7ais selon vos r\u00e9glages syst\u00e8me.<\/p>\n<p style=\"text-align: justify;\">Pour ce qui est des musiques elles-m\u00eames, elles ont \u00e9t\u00e9 extraites du jeu par mes propres soins, via deux m\u00e9thodes diff\u00e9rentes. Une option vous permet de basculer entre un \u00ab\u202fSon restaur\u00e9\u202f\u00bb, d\u2019une qualit\u00e9 sup\u00e9rieure, et le \u00ab\u202fSon d\u2019origine\u202f\u00bb de la GBA, plus fid\u00e8le mais avec le l\u00e9ger cr\u00e9pitement qui fait tout son charme. Concernant le son restaur\u00e9, vous pouvez consulter\u00a0<a href=\"https:\/\/forum.starmen.net\/forum\/Games\/Mother3\/The-NEW-Ultimate-Music-Rip-for-MOTHER-3\">ce post<\/a>\u00a0(en anglais) pour en savoir plus sur la fa\u00e7on dont je l\u2019ai extrait depuis la ROM.<\/p>\n<p style=\"text-align: justify;\">En bonus, ce widget vous permet \u00e9galement de d\u00e9couvrir, via le menu d\u2019options, <strong>quelques musiques \u00ab\u202fcach\u00e9es\u202f\u00bb<\/strong> du jeu\u202f! Ces musiques n\u2019\u00e9taient pas pr\u00e9sentes dans le lecteur audio original, soit parce qu\u2019elles sont totalement absentes dans le jeu (mais bel et bien pr\u00e9sentes dans la ROM), soit parce qu\u2019elles ne sont tout simplement pas r\u00e9pertori\u00e9es dans le menu d\u2019origine. Voici par exemple un morceau cach\u00e9 intitul\u00e9 \u00ab\u202fLe d\u00e9fi du gardien du sanctuaire\u202f\u00bb (du moins, c\u2019est ainsi que je propose de l\u2019intituler)\u202f:<\/p>\n<p style=\"text-align: center;\"><iframe loading=\"lazy\" style=\"border: 0; overflow: hidden;\" src=\"\/dev\/widgets\/lecteur\/?mode=reduit&amp;init=B01\" width=\"480\" height=\"92\" scrolling=\"no\"><\/iframe><\/p>\n<hr \/>\n<ul>\n<li><a href=\"\/index.php\/le-bestiaire-de-mother-3-version-web\/\">Bestiaire MOTHER 3<\/a><\/li>\n<li><a href=\"\/index.php\/le-lecteur-audio-de-mother-3-version-web\/\">Lecteur audio<\/a><\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Pour les programmeurs dans l\u2019\u00e2me, sachez que le code qui fait fonctionner ces deux widgets se situe en grande majorit\u00e9 c\u00f4t\u00e9 client. Vous pouvez acc\u00e9der au code JavaScript (pas forc\u00e9ment bien structur\u00e9) via les outils de d\u00e9veloppement de votre navigateur Web. Vous \u00eates libres de le r\u00e9utiliser, de le modifier et de le redistribuer tant que vous en citez l\u2019auteur d\u2019origine. Quant \u00e0 la partie serveur, elle est optionnelle et ne sert qu\u2019\u00e0 des fonctions sp\u00e9cifiques, comme l\u2019enregistrement des listes de lecture.<\/p>\n<p style=\"text-align: justify;\">Si \u00e7a pla\u00eet, peut-\u00eatre que d\u2019autres widgets du m\u00eame genre arriveront \u00e0 l\u2019avenir. En attendant, sachez que les travaux sur MOTHER 3 et ses traductions se poursuivent encore aujourd\u2019hui dans la communaut\u00e9. L\u2019occasion peut-\u00eatre d\u2019un nouveau rendez-vous pour le douzi\u00e8me anniversaire du jeu\u202f? \u00c7a se pourrait\u2026 \u00c0 bient\u00f4t\u202f!<\/p>\n\t<div class=\"likeit-button likeit-canvote\" data-votes=\"<span class='userbullet' style='color: #2d01dc'>\u25cf<\/span>,<span class='userbullet' style='color: #e3d252'>\u25cf<\/span>,<span class='userbullet' style='color: #4a9f4d'>\u25cf<\/span>,<span class='userbullet' style='color: #102e1b'>\u25cf<\/span>,<span class='userbullet' style='color: #2ae0ee'>\u25cf<\/span>,<span class='userbullet' style='color: #e11d1d'>\u25cf<\/span>,<span class='userbullet' style='color: #c66897'>\u25cf<\/span>,<span class='userbullet' style='color: #62cc77'>\u25cf<\/span>,<span class='userbullet' style='color: #c3ced2'>\u25cf<\/span>,<span class='userbullet' style='color: #7b6ac8'>\u25cf<\/span>\">\n\t\t<div class=\"likeit-text\" id=\"likeit_2353\">\u2665\u00a0\u00a0Popularit\u00e9<\/div><div class=\"likeit-count\"><span><\/span><\/div><div class=\"likeit-votes\"><\/div>\n\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Si vous me connaissez un peu, vous devez probablement savoir que je prends plaisir \u00e0 me lancer des d\u00e9fis techniques inutiles, ou du moins, chronophages (sinon je ne me serais jamais lanc\u00e9 dans cette traduction)\u202f! En tant que d\u00e9veloppeur Web &hellip; <a href=\"https:\/\/mother3vf.pages.dev\/index.php\/bonus\/decouvrez-nos-widgets-mother-3-au-format-web\/\">Lire la suite <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[],"_links":{"self":[{"href":"https:\/\/mother3vf.pages.dev\/index.php\/wp-json\/wp\/v2\/posts\/2353"}],"collection":[{"href":"https:\/\/mother3vf.pages.dev\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mother3vf.pages.dev\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mother3vf.pages.dev\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mother3vf.pages.dev\/index.php\/wp-json\/wp\/v2\/comments?post=2353"}],"version-history":[{"count":41,"href":"https:\/\/mother3vf.pages.dev\/index.php\/wp-json\/wp\/v2\/posts\/2353\/revisions"}],"predecessor-version":[{"id":3590,"href":"https:\/\/mother3vf.pages.dev\/index.php\/wp-json\/wp\/v2\/posts\/2353\/revisions\/3590"}],"wp:attachment":[{"href":"https:\/\/mother3vf.pages.dev\/index.php\/wp-json\/wp\/v2\/media?parent=2353"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mother3vf.pages.dev\/index.php\/wp-json\/wp\/v2\/categories?post=2353"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mother3vf.pages.dev\/index.php\/wp-json\/wp\/v2\/tags?post=2353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}