Calculateur de dur\u00e9e – Article<\/title>\n <style>\n h1 {\n color: #ffffff;\n font-size: 2em;\n margin-bottom: 0.5em;\n border-bottom: 3px solid #27ae60;\n padding-bottom: 10px;\n }\n h2 {\n color: #ffffff;\n font-size: 1.5em;\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n }\n h3 {\n color: #e0e0e0;\n font-size: 1.2em;\n margin-top: 1em;\n }\n h4 {\n color: #d0d0d0;\n font-size: 1.1em;\n margin-top: 1em;\n }\n p {\n color: #ffffff;\n }\n a {\n color: #2ecc71;\n text-decoration: none;\n font-weight: bold;\n }\n a:hover {\n color: #27ae60;\n text-decoration: underline;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n margin: 20px 0;\n box-shadow: 0 2px 8px rgba(0,0,0,0.3);\n }\n th, td {\n padding: 12px;\n text-align: left;\n border: 1px solid #555;\n color: #ffffff;\n }\n th {\n background-color: #27ae60;\n color: white;\n font-weight: bold;\n }\n tr:nth-child(even) {\n background-color: rgba(255, 255, 255, 0.05);\n }\n tr:hover {\n background-color: rgba(46, 204, 113, 0.1);\n }\n .example-box {\n background-color: rgba(46, 204, 113, 0.15);\n border-left: 4px solid #27ae60;\n padding: 15px;\n margin: 20px 0;\n border-radius: 4px;\n color: #ffffff;\n }\n .cta-button {\n display: inline-block;\n background-color: #27ae60;\n color: white;\n padding: 15px 30px;\n text-decoration: none;\n border-radius: 5px;\n font-weight: bold;\n margin: 20px 0;\n transition: background-color 0.3s;\n }\n .cta-button:hover {\n background-color: #229954;\n }\n .tech-badge {\n display: inline-block;\n padding: 5px 12px;\n margin: 5px;\n border-radius: 15px;\n font-size: 0.9em;\n font-weight: bold;\n }\n .html-badge {\n background-color: #e34c26;\n color: white;\n }\n .css-badge {\n background-color: #2ecc71;\n color: white;\n }\n .js-badge {\n background-color: #f0db4f;\n color: #333;\n }\n ul, ol {\n margin: 15px 0;\n padding-left: 25px;\n color: #ffffff;\n }\n li {\n margin: 8px 0;\n color: #ffffff;\n }\n .highlight {\n background-color: #27ae60;\n color: white;\n padding: 2px 6px;\n border-radius: 3px;\n font-weight: bold;\n }\n hr {\n border: none;\n border-top: 2px solid #555;\n margin: 30px 0;\n }\n strong {\n color: #2ecc71;\n }\n em {\n color: #b0b0b0;\n }\n <\/style>\n<\/head>\n<body>\n\n <h1>Bonjour \u00e0 tous ! \ud83d\udc4b<\/h1>\n \n <p>J’ai r\u00e9cemment d\u00e9velopp\u00e9 un nouvel outil que je souhaitais partager avec vous : un <strong>calculateur de dur\u00e9e<\/strong> en ligne.<\/p>\n\n <h2>\ud83c\udf10 Un site web d\u00e9di\u00e9<\/h2>\n \n <p>Cet outil est h\u00e9berg\u00e9 sur son propre site web, accessible \u00e0 l’adresse suivante :<br>\n \ud83d\udc49 <a href=\"https:\/\/emilesnyers-outil-de-calcul-de-duree.ovh\/\" target=\"_blank\">emilesnyers-outil-de-calcul-de-duree.ovh<\/a><\/p>\n \n <p>J’ai choisi de cr\u00e9er un site d\u00e9di\u00e9 uniquement \u00e0 cet outil pour qu’il soit simple \u00e0 retrouver et \u00e0 utiliser.<\/p>\n\n <h2>\ud83c\udfaf Le but de cet outil<\/h2>\n \n <p>L’id\u00e9e est assez simple : <strong>calculer pr\u00e9cis\u00e9ment des dur\u00e9es et des horaires<\/strong> pour mieux organiser votre temps.<\/p>\n \n <p>Personnellement, j’en avais besoin pour mes <strong>impressions 3D<\/strong>. Quand je lance une impression qui dure plusieurs heures, j’aime savoir exactement \u00e0 quelle heure elle se terminera pour pouvoir m’organiser. Mais cet outil peut servir dans bien d’autres situations : cuisine, planification de t\u00e2ches, voyages, maintenance, etc.<\/p>\n\n <hr>\n\n <h2>\u2699\ufe0f Les 3 fonctions de l’outil<\/h2>\n \n <p>L’outil propose <strong>trois modes de calcul<\/strong> diff\u00e9rents pour s’adapter \u00e0 tous vos besoins :<\/p>\n\n <table>\n <thead>\n <tr>\n <th>Mode<\/th>\n <th>Description<\/th>\n <th>Exemple<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>\ud83d\udfe2 <strong>Heure de fin<\/strong><\/td>\n <td>Calculer l’heure de fin \u00e0 partir d’une heure de d\u00e9but et d’une dur\u00e9e<\/td>\n <td>Je d\u00e9marre \u00e0 14h30 pour 3h45 \u2192 Fin \u00e0 18h15<\/td>\n <\/tr>\n <tr>\n <td>\ud83d\udd35 <strong>Heure de d\u00e9but<\/strong><\/td>\n <td>Calculer l’heure de d\u00e9but n\u00e9cessaire \u00e0 partir d’une heure de fin et d’une dur\u00e9e<\/td>\n <td>Je veux finir \u00e0 19h00, dur\u00e9e 2h30 \u2192 D\u00e9but \u00e0 16h30<\/td>\n <\/tr>\n <tr>\n <td>\ud83d\udfe1 <strong>Dur\u00e9e<\/strong><\/td>\n <td>Calculer la dur\u00e9e entre deux horaires diff\u00e9rents<\/td>\n <td>De 10h15 \u00e0 14h50 \u2192 Dur\u00e9e de 4h35<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n\n <hr>\n\n <h2>\ud83d\udca1 Comment l’utiliser – Exemples concrets<\/h2>\n\n <div class=\"example-box\">\n <h3>\ud83d\udda8\ufe0f Exemple 1 : Impression 3D<\/h3>\n <p><strong>Situation<\/strong> : Vous lancez une impression qui dure <span class=\"highlight\">4h37min<\/span> \u00e0 <span class=\"highlight\">14h20<\/span>.<\/p>\n \n <p><strong>Utilisation<\/strong> :<\/p>\n <ol>\n <li>S\u00e9lectionnez \u00ab\u00a0<strong>Calculer l’heure de fin<\/strong>\u00ab\u00a0<\/li>\n <li>Heure de d\u00e9but : <strong>14h20<\/strong><\/li>\n <li>Dur\u00e9e : <strong>4h 37min<\/strong><\/li>\n <li><strong>R\u00e9sultat<\/strong> : L’impression se terminera \u00e0 <strong>18h57<\/strong> \u2705<\/li>\n <\/ol>\n \n <p><em>Parfait ! Vous savez que vous pouvez partir faire vos courses et revenir avant la fin.<\/em><\/p>\n <\/div>\n\n <div class=\"example-box\">\n <h3>\ud83c\udf70 Exemple 2 : P\u00e2tisserie<\/h3>\n <p><strong>Situation<\/strong> : Votre g\u00e2teau doit \u00eatre pr\u00eat pour <span class=\"highlight\">16h00<\/span> et n\u00e9cessite <span class=\"highlight\">1h15<\/span> de cuisson.<\/p>\n \n <p><strong>Utilisation<\/strong> :<\/p>\n <ol>\n <li>S\u00e9lectionnez \u00ab\u00a0<strong>Calculer l’heure de d\u00e9but<\/strong>\u00ab\u00a0<\/li>\n <li>Heure de fin souhait\u00e9e : <strong>16h00<\/strong><\/li>\n <li>Dur\u00e9e : <strong>1h 15min<\/strong><\/li>\n <li><strong>R\u00e9sultat<\/strong> : Vous devez mettre le g\u00e2teau au four \u00e0 <strong>14h45<\/strong> \ud83d\udc68\u200d\ud83c\udf73<\/li>\n <\/ol>\n \n <p><em>Vous \u00eates s\u00fbr(e) qu’il sera pr\u00eat pile \u00e0 l’heure pour vos invit\u00e9s !<\/em><\/p>\n <\/div>\n\n <div class=\"example-box\">\n <h3>\ud83d\ude97 Exemple 3 : Road trip<\/h3>\n <p><strong>Situation<\/strong> : Vous partez \u00e0 <span class=\"highlight\">9h30<\/span> pour un trajet de <span class=\"highlight\">2h45<\/span>.<\/p>\n \n <p><strong>Utilisation<\/strong> :<\/p>\n <ol>\n <li>S\u00e9lectionnez \u00ab\u00a0<strong>Calculer l’heure de fin<\/strong>\u00ab\u00a0<\/li>\n <li>Heure de d\u00e9part : <strong>9h30<\/strong><\/li>\n <li>Dur\u00e9e du trajet : <strong>2h 45min<\/strong><\/li>\n <li><strong>R\u00e9sultat<\/strong> : Vous arriverez \u00e0 <strong>12h15<\/strong> \ud83c\udf89<\/li>\n <\/ol>\n \n <p><em>Parfait pour pr\u00e9voir votre pause d\u00e9jeuner !<\/em><\/p>\n <\/div>\n\n <div class=\"example-box\">\n <h3>\ud83c\udfae Exemple 4 : Gaming<\/h3>\n <p><strong>Situation<\/strong> : Votre t\u00e9l\u00e9chargement a commenc\u00e9 \u00e0 <span class=\"highlight\">21h10<\/span> et s’est termin\u00e9 \u00e0 <span class=\"highlight\">00h32<\/span>. Combien de temps a-t-il dur\u00e9 ?<\/p>\n \n <p><strong>Utilisation<\/strong> :<\/p>\n <ol>\n <li>S\u00e9lectionnez \u00ab\u00a0<strong>Calculer la dur\u00e9e<\/strong>\u00ab\u00a0<\/li>\n <li>Heure de d\u00e9but : <strong>21h10<\/strong><\/li>\n <li>Heure de fin : <strong>00h32<\/strong><\/li>\n <li><strong>R\u00e9sultat<\/strong> : Le t\u00e9l\u00e9chargement a pris <strong>3h 22min<\/strong> \ud83c\udfae<\/li>\n <\/ol>\n \n <p><em>Utile pour estimer vos prochains t\u00e9l\u00e9chargements !<\/em><\/p>\n <\/div>\n\n <hr>\n\n <h2>\ud83d\udcca Tableau r\u00e9capitulatif des usages<\/h2>\n\n <table>\n <thead>\n <tr>\n <th>Domaine<\/th>\n <th>Besoin<\/th>\n <th>Mode \u00e0 utiliser<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>\ud83d\udda8\ufe0f <strong>Impression 3D<\/strong><\/td>\n <td>Savoir quand r\u00e9cup\u00e9rer la pi\u00e8ce<\/td>\n <td>Heure de fin<\/td>\n <\/tr>\n <tr>\n <td>\ud83d\udc68\u200d\ud83c\udf73 <strong>Cuisine<\/strong><\/td>\n <td>Savoir quand commencer la cuisson<\/td>\n <td>Heure de d\u00e9but<\/td>\n <\/tr>\n <tr>\n <td>\ud83d\ude97 <strong>Transport<\/strong><\/td>\n <td>Pr\u00e9voir l’heure d’arriv\u00e9e<\/td>\n <td>Heure de fin<\/td>\n <\/tr>\n <tr>\n <td>\u2699\ufe0f <strong>Maintenance<\/strong><\/td>\n <td>Planifier une intervention<\/td>\n <td>Heure de d\u00e9but<\/td>\n <\/tr>\n <tr>\n <td>\ud83d\udcda <strong>R\u00e9visions<\/strong><\/td>\n <td>Mesurer le temps d’\u00e9tude effectif<\/td>\n <td>Dur\u00e9e<\/td>\n <\/tr>\n <tr>\n <td>\ud83c\udfac <strong>Production<\/strong><\/td>\n <td>Calculer les temps de rendu<\/td>\n <td>Heure de fin<\/td>\n <\/tr>\n <tr>\n <td>\ud83c\udfc3 <strong>Sport<\/strong><\/td>\n <td>Analyser vos performances<\/td>\n <td>Dur\u00e9e<\/td>\n <\/tr>\n <tr>\n <td>\ud83d\udcbc <strong>R\u00e9unions<\/strong><\/td>\n <td>V\u00e9rifier la dur\u00e9e \u00e9coul\u00e9e<\/td>\n <td>Dur\u00e9e<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n\n <hr>\n\n <h2>\ud83d\udcbe Fonctionnalit\u00e9 : Historique des calculs<\/h2>\n \n <p>L’outil int\u00e8gre un <strong>historique<\/strong> qui enregistre automatiquement tous vos calculs ! \ud83d\udccb<\/p>\n\n <h3>Avantages :<\/h3>\n <ul>\n <li>\u2705 <strong>Retrouvez vos calculs pr\u00e9c\u00e9dents<\/strong> sans avoir \u00e0 les refaire<\/li>\n <li>\u2705 <strong>Comparez plusieurs sc\u00e9narios<\/strong> (diff\u00e9rentes heures de d\u00e9but, par exemple)<\/li>\n <li>\u2705 <strong>Gardez une trace<\/strong> de vos planifications<\/li>\n <li>\u2705 <strong>Stockage local<\/strong> : vos donn\u00e9es restent sur votre appareil (pas de serveur)<\/li>\n <\/ul>\n\n <h3>Comment \u00e7a marche ?<\/h3>\n <p>Chaque fois que vous effectuez un calcul, il est automatiquement ajout\u00e9 \u00e0 l’historique visible en bas de page. Vous pouvez le consulter \u00e0 tout moment et m\u00eame effacer les entr\u00e9es dont vous n’avez plus besoin.<\/p>\n\n <hr>\n\n <h2>\ud83d\udd27 Aspects techniques : sous le capot<\/h2>\n \n <p>Pour les curieux et les passionn\u00e9s de d\u00e9veloppement web, voici comment l’outil fonctionne :<\/p>\n\n <h3>Technologies utilis\u00e9es<\/h3>\n \n <p>L’outil est d\u00e9velopp\u00e9 avec <strong>trois technologies web fondamentales<\/strong> :<\/p>\n\n <p>\n <span class=\"tech-badge html-badge\">HTML<\/span>\n <span class=\"tech-badge css-badge\">CSS<\/span>\n <span class=\"tech-badge js-badge\">JavaScript<\/span>\n <\/p>\n\n <h4>\ud83d\udfe0 HTML (HyperText Markup Language)<\/h4>\n <p>C’est le <strong>squelette<\/strong> de l’outil. Le HTML structure le contenu : les champs de saisie, les boutons, les zones de r\u00e9sultat, etc. C’est comme les murs et les pi\u00e8ces d’une maison.<\/p>\n\n <h4>\ud83d\udfe2 CSS (Cascading Style Sheets)<\/h4>\n <p>C’est l’<strong>habillage<\/strong> de l’outil. Le CSS g\u00e8re tout l’aspect visuel : les couleurs, les polices, l’espacement, les animations, le design responsive. C’est comme la d\u00e9coration et la peinture de la maison.<\/p>\n\n <h4>\ud83d\udfe1 JavaScript<\/h4>\n <p>C’est le <strong>cerveau<\/strong> de l’outil. JavaScript effectue tous les calculs en temps r\u00e9el, g\u00e8re les interactions (clics, saisies), met \u00e0 jour l’affichage et enregistre l’historique. C’est comme l’\u00e9lectricit\u00e9 et la domotique de la maison.<\/p>\n\n <h3>Pourquoi ces technologies ?<\/h3>\n <ul>\n <li>\u2705 <strong>Simplicit\u00e9<\/strong> : Pas besoin de serveur complexe ou de base de donn\u00e9es<\/li>\n <li>\u2705 <strong>Rapidit\u00e9<\/strong> : Tout fonctionne directement dans votre navigateur<\/li>\n <li>\u2705 <strong>S\u00e9curit\u00e9<\/strong> : Aucune donn\u00e9e n’est envoy\u00e9e sur internet<\/li>\n <li>\u2705 <strong>Universalit\u00e9<\/strong> : Compatible avec tous les navigateurs modernes<\/li>\n <li>\u2705 <strong>L\u00e9g\u00e8ret\u00e9<\/strong> : Le site charge tr\u00e8s rapidement<\/li>\n <\/ul>\n\n <hr>\n\n <h2>\ud83d\udcf1 Compatible mobile, tablette et ordinateur<\/h2>\n \n <p>L’outil est <strong>enti\u00e8rement responsive<\/strong>, ce qui signifie qu’il s’adapte automatiquement \u00e0 la taille de votre \u00e9cran :<\/p>\n\n <h3>\ud83d\udcf1 Sur smartphone<\/h3>\n <ul>\n <li>Interface optimis\u00e9e pour les petits \u00e9crans<\/li>\n <li>Boutons tactiles adapt\u00e9s<\/li>\n <li>Saisie facilit\u00e9e avec le clavier num\u00e9rique<\/li>\n <li>Navigation fluide<\/li>\n <\/ul>\n\n <h3>\ud83d\udcdf Sur tablette<\/h3>\n <ul>\n <li>Mise en page \u00e9quilibr\u00e9e<\/li>\n <li>Confort de lecture optimal<\/li>\n <li>Utilisation en mode portrait ou paysage<\/li>\n <\/ul>\n\n <h3>\ud83d\udcbb Sur ordinateur<\/h3>\n <ul>\n <li>Interface spacieuse et claire<\/li>\n <li>Saisie rapide au clavier<\/li>\n <li>Affichage de toutes les informations simultan\u00e9ment<\/li>\n <\/ul>\n\n <p><strong>Testez-le sur vos diff\u00e9rents appareils !<\/strong> L’exp\u00e9rience est optimis\u00e9e pour chacun d’eux. \ud83d\ude0a<\/p>\n\n <hr>\n\n <h2>\ud83d\udccb Conditions d’utilisation<\/h2>\n \n <p>L’outil est <strong>gratuit<\/strong> et accessible sans inscription. Je le mets \u00e0 disposition pour un <strong>usage non commercial<\/strong>, et je demande simplement une <strong>attribution<\/strong> si vous le partagez ou l’utilisez dans un cadre public (mention de mon nom : Emile SNYERS).<\/p>\n \n <p>Le site comprend \u00e9galement toutes les <strong>mentions l\u00e9gales<\/strong> n\u00e9cessaires, ainsi qu’une page expliquant en d\u00e9tail les conditions d’utilisation.<\/p>\n\n <hr>\n\n <h2>\ud83d\udcac Vos retours sont les bienvenus<\/h2>\n \n <p>Si vous testez l’outil, n’h\u00e9sitez pas \u00e0 me faire part de vos remarques ou suggestions en commentaire. C’est toujours utile pour am\u00e9liorer ce genre de projet ! \ud83d\ude0a<\/p>\n\n <p><strong>Quelques questions pour vous :<\/strong><\/p>\n <ul>\n <li>\ud83e\udd14 Dans quel contexte l’utiliseriez-vous ?<\/li>\n <li>\ud83d\udca1 Quelles fonctionnalit\u00e9s suppl\u00e9mentaires aimeriez-vous voir ?<\/li>\n <li>\u2b50 Trouvez-vous l’interface intuitive ?<\/li>\n <\/ul>\n\n <hr>\n\n <h2>\ud83d\udd17 Acc\u00e9der \u00e0 l’outil<\/h2>\n \n <p style=\"text-align: center;\">\n <a href=\"https:\/\/emilesnyers-outil-de-calcul-de-duree.ovh\/\" class=\"cta-button\" target=\"_blank\">\n \ud83d\udc49 Essayer le calculateur de dur\u00e9e maintenant\n <\/a>\n <\/p>\n\n <hr>\n\n <p style=\"text-align: center;\">\n Bonne journ\u00e9e \u00e0 tous et bon calcul ! \u23f0<br>\n <strong>Emile SNYERS<\/strong>\n <\/p>\n\n <p style=\"text-align: center; font-size: 0.9em; color: #999;\">\n \ud83d\udccc <em>Mots-cl\u00e9s : calculateur dur\u00e9e, calcul horaire, outil gratuit, impression 3D, planification, HTML CSS JavaScript<\/em>\n <\/p>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Calculateur de dur\u00e9e – Article Bonjour \u00e0 tous ! \ud83d\udc4b J’ai r\u00e9cemment d\u00e9velopp\u00e9 un nouvel outil que je souhaitais partager […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,4],"tags":[],"class_list":["post-45","post","type-post","status-publish","format-standard","hentry","category-article-de-blog","category-site-web"],"_links":{"self":[{"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=\/wp\/v2\/posts\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45"}],"version-history":[{"count":4,"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=\/wp\/v2\/posts\/45\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":45,"date":"2025-10-27T07:57:00","date_gmt":"2025-10-27T07:57:00","guid":{"rendered":"https:\/\/emilesnyers.fr\/?p=45"},"modified":"2025-10-26T17:29:32","modified_gmt":"2025-10-26T17:29:32","slug":"annonce-nouveau-site-web-disponible-en-ligne","status":"publish","type":"post","link":"https:\/\/emilesnyers.fr\/?p=45","title":{"rendered":"[Annonce] Nouveau site web disponible en ligne"},"content":{"rendered":"\n\n\n\n \n \n Calculateur de dur\u00e9e – Article<\/title>\n <style>\n h1 {\n color: #ffffff;\n font-size: 2em;\n margin-bottom: 0.5em;\n border-bottom: 3px solid #27ae60;\n padding-bottom: 10px;\n }\n h2 {\n color: #ffffff;\n font-size: 1.5em;\n margin-top: 1.5em;\n margin-bottom: 0.5em;\n }\n h3 {\n color: #e0e0e0;\n font-size: 1.2em;\n margin-top: 1em;\n }\n h4 {\n color: #d0d0d0;\n font-size: 1.1em;\n margin-top: 1em;\n }\n p {\n color: #ffffff;\n }\n a {\n color: #2ecc71;\n text-decoration: none;\n font-weight: bold;\n }\n a:hover {\n color: #27ae60;\n text-decoration: underline;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n margin: 20px 0;\n box-shadow: 0 2px 8px rgba(0,0,0,0.3);\n }\n th, td {\n padding: 12px;\n text-align: left;\n border: 1px solid #555;\n color: #ffffff;\n }\n th {\n background-color: #27ae60;\n color: white;\n font-weight: bold;\n }\n tr:nth-child(even) {\n background-color: rgba(255, 255, 255, 0.05);\n }\n tr:hover {\n background-color: rgba(46, 204, 113, 0.1);\n }\n .example-box {\n background-color: rgba(46, 204, 113, 0.15);\n border-left: 4px solid #27ae60;\n padding: 15px;\n margin: 20px 0;\n border-radius: 4px;\n color: #ffffff;\n }\n .cta-button {\n display: inline-block;\n background-color: #27ae60;\n color: white;\n padding: 15px 30px;\n text-decoration: none;\n border-radius: 5px;\n font-weight: bold;\n margin: 20px 0;\n transition: background-color 0.3s;\n }\n .cta-button:hover {\n background-color: #229954;\n }\n .tech-badge {\n display: inline-block;\n padding: 5px 12px;\n margin: 5px;\n border-radius: 15px;\n font-size: 0.9em;\n font-weight: bold;\n }\n .html-badge {\n background-color: #e34c26;\n color: white;\n }\n .css-badge {\n background-color: #2ecc71;\n color: white;\n }\n .js-badge {\n background-color: #f0db4f;\n color: #333;\n }\n ul, ol {\n margin: 15px 0;\n padding-left: 25px;\n color: #ffffff;\n }\n li {\n margin: 8px 0;\n color: #ffffff;\n }\n .highlight {\n background-color: #27ae60;\n color: white;\n padding: 2px 6px;\n border-radius: 3px;\n font-weight: bold;\n }\n hr {\n border: none;\n border-top: 2px solid #555;\n margin: 30px 0;\n }\n strong {\n color: #2ecc71;\n }\n em {\n color: #b0b0b0;\n }\n <\/style>\n<\/head>\n<body>\n\n <h1>Bonjour \u00e0 tous ! \ud83d\udc4b<\/h1>\n \n <p>J’ai r\u00e9cemment d\u00e9velopp\u00e9 un nouvel outil que je souhaitais partager avec vous : un <strong>calculateur de dur\u00e9e<\/strong> en ligne.<\/p>\n\n <h2>\ud83c\udf10 Un site web d\u00e9di\u00e9<\/h2>\n \n <p>Cet outil est h\u00e9berg\u00e9 sur son propre site web, accessible \u00e0 l’adresse suivante :<br>\n \ud83d\udc49 <a href=\"https:\/\/emilesnyers-outil-de-calcul-de-duree.ovh\/\" target=\"_blank\">emilesnyers-outil-de-calcul-de-duree.ovh<\/a><\/p>\n \n <p>J’ai choisi de cr\u00e9er un site d\u00e9di\u00e9 uniquement \u00e0 cet outil pour qu’il soit simple \u00e0 retrouver et \u00e0 utiliser.<\/p>\n\n <h2>\ud83c\udfaf Le but de cet outil<\/h2>\n \n <p>L’id\u00e9e est assez simple : <strong>calculer pr\u00e9cis\u00e9ment des dur\u00e9es et des horaires<\/strong> pour mieux organiser votre temps.<\/p>\n \n <p>Personnellement, j’en avais besoin pour mes <strong>impressions 3D<\/strong>. Quand je lance une impression qui dure plusieurs heures, j’aime savoir exactement \u00e0 quelle heure elle se terminera pour pouvoir m’organiser. Mais cet outil peut servir dans bien d’autres situations : cuisine, planification de t\u00e2ches, voyages, maintenance, etc.<\/p>\n\n <hr>\n\n <h2>\u2699\ufe0f Les 3 fonctions de l’outil<\/h2>\n \n <p>L’outil propose <strong>trois modes de calcul<\/strong> diff\u00e9rents pour s’adapter \u00e0 tous vos besoins :<\/p>\n\n <table>\n <thead>\n <tr>\n <th>Mode<\/th>\n <th>Description<\/th>\n <th>Exemple<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>\ud83d\udfe2 <strong>Heure de fin<\/strong><\/td>\n <td>Calculer l’heure de fin \u00e0 partir d’une heure de d\u00e9but et d’une dur\u00e9e<\/td>\n <td>Je d\u00e9marre \u00e0 14h30 pour 3h45 \u2192 Fin \u00e0 18h15<\/td>\n <\/tr>\n <tr>\n <td>\ud83d\udd35 <strong>Heure de d\u00e9but<\/strong><\/td>\n <td>Calculer l’heure de d\u00e9but n\u00e9cessaire \u00e0 partir d’une heure de fin et d’une dur\u00e9e<\/td>\n <td>Je veux finir \u00e0 19h00, dur\u00e9e 2h30 \u2192 D\u00e9but \u00e0 16h30<\/td>\n <\/tr>\n <tr>\n <td>\ud83d\udfe1 <strong>Dur\u00e9e<\/strong><\/td>\n <td>Calculer la dur\u00e9e entre deux horaires diff\u00e9rents<\/td>\n <td>De 10h15 \u00e0 14h50 \u2192 Dur\u00e9e de 4h35<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n\n <hr>\n\n <h2>\ud83d\udca1 Comment l’utiliser – Exemples concrets<\/h2>\n\n <div class=\"example-box\">\n <h3>\ud83d\udda8\ufe0f Exemple 1 : Impression 3D<\/h3>\n <p><strong>Situation<\/strong> : Vous lancez une impression qui dure <span class=\"highlight\">4h37min<\/span> \u00e0 <span class=\"highlight\">14h20<\/span>.<\/p>\n \n <p><strong>Utilisation<\/strong> :<\/p>\n <ol>\n <li>S\u00e9lectionnez \u00ab\u00a0<strong>Calculer l’heure de fin<\/strong>\u00ab\u00a0<\/li>\n <li>Heure de d\u00e9but : <strong>14h20<\/strong><\/li>\n <li>Dur\u00e9e : <strong>4h 37min<\/strong><\/li>\n <li><strong>R\u00e9sultat<\/strong> : L’impression se terminera \u00e0 <strong>18h57<\/strong> \u2705<\/li>\n <\/ol>\n \n <p><em>Parfait ! Vous savez que vous pouvez partir faire vos courses et revenir avant la fin.<\/em><\/p>\n <\/div>\n\n <div class=\"example-box\">\n <h3>\ud83c\udf70 Exemple 2 : P\u00e2tisserie<\/h3>\n <p><strong>Situation<\/strong> : Votre g\u00e2teau doit \u00eatre pr\u00eat pour <span class=\"highlight\">16h00<\/span> et n\u00e9cessite <span class=\"highlight\">1h15<\/span> de cuisson.<\/p>\n \n <p><strong>Utilisation<\/strong> :<\/p>\n <ol>\n <li>S\u00e9lectionnez \u00ab\u00a0<strong>Calculer l’heure de d\u00e9but<\/strong>\u00ab\u00a0<\/li>\n <li>Heure de fin souhait\u00e9e : <strong>16h00<\/strong><\/li>\n <li>Dur\u00e9e : <strong>1h 15min<\/strong><\/li>\n <li><strong>R\u00e9sultat<\/strong> : Vous devez mettre le g\u00e2teau au four \u00e0 <strong>14h45<\/strong> \ud83d\udc68\u200d\ud83c\udf73<\/li>\n <\/ol>\n \n <p><em>Vous \u00eates s\u00fbr(e) qu’il sera pr\u00eat pile \u00e0 l’heure pour vos invit\u00e9s !<\/em><\/p>\n <\/div>\n\n <div class=\"example-box\">\n <h3>\ud83d\ude97 Exemple 3 : Road trip<\/h3>\n <p><strong>Situation<\/strong> : Vous partez \u00e0 <span class=\"highlight\">9h30<\/span> pour un trajet de <span class=\"highlight\">2h45<\/span>.<\/p>\n \n <p><strong>Utilisation<\/strong> :<\/p>\n <ol>\n <li>S\u00e9lectionnez \u00ab\u00a0<strong>Calculer l’heure de fin<\/strong>\u00ab\u00a0<\/li>\n <li>Heure de d\u00e9part : <strong>9h30<\/strong><\/li>\n <li>Dur\u00e9e du trajet : <strong>2h 45min<\/strong><\/li>\n <li><strong>R\u00e9sultat<\/strong> : Vous arriverez \u00e0 <strong>12h15<\/strong> \ud83c\udf89<\/li>\n <\/ol>\n \n <p><em>Parfait pour pr\u00e9voir votre pause d\u00e9jeuner !<\/em><\/p>\n <\/div>\n\n <div class=\"example-box\">\n <h3>\ud83c\udfae Exemple 4 : Gaming<\/h3>\n <p><strong>Situation<\/strong> : Votre t\u00e9l\u00e9chargement a commenc\u00e9 \u00e0 <span class=\"highlight\">21h10<\/span> et s’est termin\u00e9 \u00e0 <span class=\"highlight\">00h32<\/span>. Combien de temps a-t-il dur\u00e9 ?<\/p>\n \n <p><strong>Utilisation<\/strong> :<\/p>\n <ol>\n <li>S\u00e9lectionnez \u00ab\u00a0<strong>Calculer la dur\u00e9e<\/strong>\u00ab\u00a0<\/li>\n <li>Heure de d\u00e9but : <strong>21h10<\/strong><\/li>\n <li>Heure de fin : <strong>00h32<\/strong><\/li>\n <li><strong>R\u00e9sultat<\/strong> : Le t\u00e9l\u00e9chargement a pris <strong>3h 22min<\/strong> \ud83c\udfae<\/li>\n <\/ol>\n \n <p><em>Utile pour estimer vos prochains t\u00e9l\u00e9chargements !<\/em><\/p>\n <\/div>\n\n <hr>\n\n <h2>\ud83d\udcca Tableau r\u00e9capitulatif des usages<\/h2>\n\n <table>\n <thead>\n <tr>\n <th>Domaine<\/th>\n <th>Besoin<\/th>\n <th>Mode \u00e0 utiliser<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>\ud83d\udda8\ufe0f <strong>Impression 3D<\/strong><\/td>\n <td>Savoir quand r\u00e9cup\u00e9rer la pi\u00e8ce<\/td>\n <td>Heure de fin<\/td>\n <\/tr>\n <tr>\n <td>\ud83d\udc68\u200d\ud83c\udf73 <strong>Cuisine<\/strong><\/td>\n <td>Savoir quand commencer la cuisson<\/td>\n <td>Heure de d\u00e9but<\/td>\n <\/tr>\n <tr>\n <td>\ud83d\ude97 <strong>Transport<\/strong><\/td>\n <td>Pr\u00e9voir l’heure d’arriv\u00e9e<\/td>\n <td>Heure de fin<\/td>\n <\/tr>\n <tr>\n <td>\u2699\ufe0f <strong>Maintenance<\/strong><\/td>\n <td>Planifier une intervention<\/td>\n <td>Heure de d\u00e9but<\/td>\n <\/tr>\n <tr>\n <td>\ud83d\udcda <strong>R\u00e9visions<\/strong><\/td>\n <td>Mesurer le temps d’\u00e9tude effectif<\/td>\n <td>Dur\u00e9e<\/td>\n <\/tr>\n <tr>\n <td>\ud83c\udfac <strong>Production<\/strong><\/td>\n <td>Calculer les temps de rendu<\/td>\n <td>Heure de fin<\/td>\n <\/tr>\n <tr>\n <td>\ud83c\udfc3 <strong>Sport<\/strong><\/td>\n <td>Analyser vos performances<\/td>\n <td>Dur\u00e9e<\/td>\n <\/tr>\n <tr>\n <td>\ud83d\udcbc <strong>R\u00e9unions<\/strong><\/td>\n <td>V\u00e9rifier la dur\u00e9e \u00e9coul\u00e9e<\/td>\n <td>Dur\u00e9e<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n\n <hr>\n\n <h2>\ud83d\udcbe Fonctionnalit\u00e9 : Historique des calculs<\/h2>\n \n <p>L’outil int\u00e8gre un <strong>historique<\/strong> qui enregistre automatiquement tous vos calculs ! \ud83d\udccb<\/p>\n\n <h3>Avantages :<\/h3>\n <ul>\n <li>\u2705 <strong>Retrouvez vos calculs pr\u00e9c\u00e9dents<\/strong> sans avoir \u00e0 les refaire<\/li>\n <li>\u2705 <strong>Comparez plusieurs sc\u00e9narios<\/strong> (diff\u00e9rentes heures de d\u00e9but, par exemple)<\/li>\n <li>\u2705 <strong>Gardez une trace<\/strong> de vos planifications<\/li>\n <li>\u2705 <strong>Stockage local<\/strong> : vos donn\u00e9es restent sur votre appareil (pas de serveur)<\/li>\n <\/ul>\n\n <h3>Comment \u00e7a marche ?<\/h3>\n <p>Chaque fois que vous effectuez un calcul, il est automatiquement ajout\u00e9 \u00e0 l’historique visible en bas de page. Vous pouvez le consulter \u00e0 tout moment et m\u00eame effacer les entr\u00e9es dont vous n’avez plus besoin.<\/p>\n\n <hr>\n\n <h2>\ud83d\udd27 Aspects techniques : sous le capot<\/h2>\n \n <p>Pour les curieux et les passionn\u00e9s de d\u00e9veloppement web, voici comment l’outil fonctionne :<\/p>\n\n <h3>Technologies utilis\u00e9es<\/h3>\n \n <p>L’outil est d\u00e9velopp\u00e9 avec <strong>trois technologies web fondamentales<\/strong> :<\/p>\n\n <p>\n <span class=\"tech-badge html-badge\">HTML<\/span>\n <span class=\"tech-badge css-badge\">CSS<\/span>\n <span class=\"tech-badge js-badge\">JavaScript<\/span>\n <\/p>\n\n <h4>\ud83d\udfe0 HTML (HyperText Markup Language)<\/h4>\n <p>C’est le <strong>squelette<\/strong> de l’outil. Le HTML structure le contenu : les champs de saisie, les boutons, les zones de r\u00e9sultat, etc. C’est comme les murs et les pi\u00e8ces d’une maison.<\/p>\n\n <h4>\ud83d\udfe2 CSS (Cascading Style Sheets)<\/h4>\n <p>C’est l’<strong>habillage<\/strong> de l’outil. Le CSS g\u00e8re tout l’aspect visuel : les couleurs, les polices, l’espacement, les animations, le design responsive. C’est comme la d\u00e9coration et la peinture de la maison.<\/p>\n\n <h4>\ud83d\udfe1 JavaScript<\/h4>\n <p>C’est le <strong>cerveau<\/strong> de l’outil. JavaScript effectue tous les calculs en temps r\u00e9el, g\u00e8re les interactions (clics, saisies), met \u00e0 jour l’affichage et enregistre l’historique. C’est comme l’\u00e9lectricit\u00e9 et la domotique de la maison.<\/p>\n\n <h3>Pourquoi ces technologies ?<\/h3>\n <ul>\n <li>\u2705 <strong>Simplicit\u00e9<\/strong> : Pas besoin de serveur complexe ou de base de donn\u00e9es<\/li>\n <li>\u2705 <strong>Rapidit\u00e9<\/strong> : Tout fonctionne directement dans votre navigateur<\/li>\n <li>\u2705 <strong>S\u00e9curit\u00e9<\/strong> : Aucune donn\u00e9e n’est envoy\u00e9e sur internet<\/li>\n <li>\u2705 <strong>Universalit\u00e9<\/strong> : Compatible avec tous les navigateurs modernes<\/li>\n <li>\u2705 <strong>L\u00e9g\u00e8ret\u00e9<\/strong> : Le site charge tr\u00e8s rapidement<\/li>\n <\/ul>\n\n <hr>\n\n <h2>\ud83d\udcf1 Compatible mobile, tablette et ordinateur<\/h2>\n \n <p>L’outil est <strong>enti\u00e8rement responsive<\/strong>, ce qui signifie qu’il s’adapte automatiquement \u00e0 la taille de votre \u00e9cran :<\/p>\n\n <h3>\ud83d\udcf1 Sur smartphone<\/h3>\n <ul>\n <li>Interface optimis\u00e9e pour les petits \u00e9crans<\/li>\n <li>Boutons tactiles adapt\u00e9s<\/li>\n <li>Saisie facilit\u00e9e avec le clavier num\u00e9rique<\/li>\n <li>Navigation fluide<\/li>\n <\/ul>\n\n <h3>\ud83d\udcdf Sur tablette<\/h3>\n <ul>\n <li>Mise en page \u00e9quilibr\u00e9e<\/li>\n <li>Confort de lecture optimal<\/li>\n <li>Utilisation en mode portrait ou paysage<\/li>\n <\/ul>\n\n <h3>\ud83d\udcbb Sur ordinateur<\/h3>\n <ul>\n <li>Interface spacieuse et claire<\/li>\n <li>Saisie rapide au clavier<\/li>\n <li>Affichage de toutes les informations simultan\u00e9ment<\/li>\n <\/ul>\n\n <p><strong>Testez-le sur vos diff\u00e9rents appareils !<\/strong> L’exp\u00e9rience est optimis\u00e9e pour chacun d’eux. \ud83d\ude0a<\/p>\n\n <hr>\n\n <h2>\ud83d\udccb Conditions d’utilisation<\/h2>\n \n <p>L’outil est <strong>gratuit<\/strong> et accessible sans inscription. Je le mets \u00e0 disposition pour un <strong>usage non commercial<\/strong>, et je demande simplement une <strong>attribution<\/strong> si vous le partagez ou l’utilisez dans un cadre public (mention de mon nom : Emile SNYERS).<\/p>\n \n <p>Le site comprend \u00e9galement toutes les <strong>mentions l\u00e9gales<\/strong> n\u00e9cessaires, ainsi qu’une page expliquant en d\u00e9tail les conditions d’utilisation.<\/p>\n\n <hr>\n\n <h2>\ud83d\udcac Vos retours sont les bienvenus<\/h2>\n \n <p>Si vous testez l’outil, n’h\u00e9sitez pas \u00e0 me faire part de vos remarques ou suggestions en commentaire. C’est toujours utile pour am\u00e9liorer ce genre de projet ! \ud83d\ude0a<\/p>\n\n <p><strong>Quelques questions pour vous :<\/strong><\/p>\n <ul>\n <li>\ud83e\udd14 Dans quel contexte l’utiliseriez-vous ?<\/li>\n <li>\ud83d\udca1 Quelles fonctionnalit\u00e9s suppl\u00e9mentaires aimeriez-vous voir ?<\/li>\n <li>\u2b50 Trouvez-vous l’interface intuitive ?<\/li>\n <\/ul>\n\n <hr>\n\n <h2>\ud83d\udd17 Acc\u00e9der \u00e0 l’outil<\/h2>\n \n <p style=\"text-align: center;\">\n <a href=\"https:\/\/emilesnyers-outil-de-calcul-de-duree.ovh\/\" class=\"cta-button\" target=\"_blank\">\n \ud83d\udc49 Essayer le calculateur de dur\u00e9e maintenant\n <\/a>\n <\/p>\n\n <hr>\n\n <p style=\"text-align: center;\">\n Bonne journ\u00e9e \u00e0 tous et bon calcul ! \u23f0<br>\n <strong>Emile SNYERS<\/strong>\n <\/p>\n\n <p style=\"text-align: center; font-size: 0.9em; color: #999;\">\n \ud83d\udccc <em>Mots-cl\u00e9s : calculateur dur\u00e9e, calcul horaire, outil gratuit, impression 3D, planification, HTML CSS JavaScript<\/em>\n <\/p>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Calculateur de dur\u00e9e – Article Bonjour \u00e0 tous ! \ud83d\udc4b J’ai r\u00e9cemment d\u00e9velopp\u00e9 un nouvel outil que je souhaitais partager […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,4],"tags":[],"class_list":["post-45","post","type-post","status-publish","format-standard","hentry","category-article-de-blog","category-site-web"],"_links":{"self":[{"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=\/wp\/v2\/posts\/45","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45"}],"version-history":[{"count":4,"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=\/wp\/v2\/posts\/45\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=\/wp\/v2\/posts\/45\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emilesnyers.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}