diff options
Diffstat (limited to 'files/fr/learn/common_questions')
19 files changed, 160 insertions, 197 deletions
diff --git a/files/fr/learn/common_questions/available_text_editors/index.html b/files/fr/learn/common_questions/available_text_editors/index.html index 156fde4e17..42107015ba 100644 --- a/files/fr/learn/common_questions/available_text_editors/index.html +++ b/files/fr/learn/common_questions/available_text_editors/index.html @@ -11,11 +11,9 @@ translation_of: Learn/Common_questions/Available_text_editors original_slug: Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte --- <div>{{IncludeSubnav("/fr/Apprendre")}}</div> -<div class="summary"> <p>Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.</p> -</div> -<table class="learn-box nostripe standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> diff --git a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html index 3e49f7571d..179fa1519a 100644 --- a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html +++ b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -12,11 +12,9 @@ tags: translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web --- -<div class="summary"> <p>Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -29,7 +27,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web </tbody> </table> -<p id="Summary">Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?</p> +<p>Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?</p> <p>Un serveur web distant se comportera différemment d'un serveur local. Mieux vaut donc tester le bon fonctionnement d'un site web une fois qu'il est en ligne. Des problèmes « étonnants » peuvent survenir : les images peuvent ne pas apparaître, des pages ne se chargeront pas ou se chargeront lentement, etc. La plupart du temps, ce n'est pas un problème critique : il s'agit de corriger une erreur ou de paramétrer correctement la configuration du serveur hébergé.</p> @@ -49,11 +47,11 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web <p>Allons sur notre site web : <code>http://demozilla.hebergeurexemple.net/</code>. L'image n'apparaît pas alors qu'il y aurait du y en avoir une !</p> -<p><img alt="Oops, the ‘unicorn’ image is missing" src="https://mdn.mozillademos.org/files/11759/Capture%20du%202015-10-12%2017-21-20.png" style="height: 174px; width: 364px;"></p> +<p><img alt="Oops, the ‘unicorn’ image is missing" src="Capture%20du%202015-10-12%2017-21-20.png"></p> <p>Ouvrons les outils de développement et plus particulièrement ceux qui portent sur le réseau (<strong>Outils ➤ Développement Web ➤ Réseau</strong>) puis rechargeons la page :</p> -<p><img alt="The image has a 404 error" src="https://mdn.mozillademos.org/files/11763/Capture%20du%202015-10-12%2018-21-23.png" style="height: 299px; width: 681px;"></p> +<p><img alt="The image has a 404 error" src="Capture%20du%202015-10-12%2018-21-23.png"></p> <p>Le problème c'est ce 404 qu'on voit en bas. 404 signifie que la ressource n'a pas été trouvée et c'est pour ça que nous ne voyons pas l'image.</p> @@ -62,7 +60,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web <p>Le serveur répond avec une message de statut à chaque fois qu'il reçoit une requête. Voici les statuts les plus communs ainsi que leur code :</p> <dl> - <dt><strong><span id="cke_bm_110S" class="hidden"> </span>200 : OK</strong></dt> + <dt><strong> 200 : OK</strong></dt> <dd>La ressource demandée a bien été transmise.</dd> <dt><strong>301 : Déplacée de façon permanente (<em>Moved permanently</em>)</strong></dt> <dd>La ressource a été déplacée à un nouvel emplacement. Vous ne verrez cette erreur que rarement mais elle est utile à connaître car les moteurs de recherchee utilise cette information pour mettre à jour leurs index.</dd> @@ -87,15 +85,15 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web <p>Où est donc le problème ?</p> -<p><img alt="Le list of images in our project" src="https://mdn.mozillademos.org/files/11765/Capture%20du%202015-10-12%2018-45-07.png" style="height: 206px; width: 263px;"></p> +<p><img alt="Le list of images in our project" src="Capture%20du%202015-10-12%2018-45-07.png"></p> <p>À premièrve vue, l'image semble être au bon endroit mais l'outil d'analyse réseau affiche un code 404 renvoyé par le serveur. Le problème ici est une coquille dans le code de la page HTML <code>licornes.png</code> plutôt que <code>licorne.png</code>. En corrigeant cette erreur avec l'attribut <code>src</code></p> -<p><img alt="Deleting the ‘s’" src="https://mdn.mozillademos.org/files/11767/Capture%20du%202015-10-12%2018-50-56.png" style="height: 162px; width: 852px;"></p> +<p><img alt="Deleting the ‘s’" src="Capture%20du%202015-10-12%2018-50-56.png"></p> -<p>Puis en sauvegardant et <a href="/en-US/Learn/Upload_files_to_a_web_server">en envoyant le fichier vers le serveur</a>, on peut ensuite recharger la page dans le navigateur :</p> +<p>Puis en sauvegardant et <a href="/fr/Learn/Upload_files_to_a_web_server">en envoyant le fichier vers le serveur</a>, on peut ensuite recharger la page dans le navigateur :</p> -<p><img alt="The image loads corectly in the browser" src="https://mdn.mozillademos.org/files/11769/Capture%20du%202015-10-12%2018-53-50.png" style="height: 422px; width: 531px;"></p> +<p><img alt="The image loads corectly in the browser" src="Capture%20du%202015-10-12%2018-53-50.png"></p> <p>Et voilà, revenons sur les status {{Glossary("HTTP")}} :</p> @@ -114,7 +112,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web <p>Dans la capture suivante, nous avons voulu accéder à <code>http://demozilla.hebergeurexemple.net/</code> mais nous avons oublié un « m » :</p> -<p><img alt="Address unreachable" src="https://mdn.mozillademos.org/files/11771/Capture%20du%202015-10-12%2018-58-19.png" style="height: 511px; width: 803px;"></p> +<p><img alt="Address unreachable" src="Capture%20du%202015-10-12%2018-58-19.png"></p> <p>L'adresse est introuvable… en effet.</p> @@ -128,7 +126,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web <p>Pour voir ces erreurs, ouvrez la console (<strong>Outils ➤ Développement web ➤ Console web</strong>) and puis rechargez la page:</p> -<p><img alt="A Javascript error is shown in the Console" src="https://mdn.mozillademos.org/files/11773/Capture%20du%202015-10-12%2019-10-52.png" style="height: 391px; width: 461px;"></p> +<p><img alt="A Javascript error is shown in the Console" src="Capture%20du%202015-10-12%2019-10-52.png"></p> <p>Ici, nous voyons comment détecter une erreur, la console affiche sur quoi porte l'erreur et éventuellement comment la résoudre (nous verrons JavaScript dans <a href="/fr/Apprendre/JavaScript">une autre série d'articles</a>).</p> @@ -140,7 +138,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web <p>Est-ce que la page charge suffisamment vite ? Pour le savoir, vous pouvez utiliser des outils comme <a href="http://www.webpagetest.org/">webpagetest.org</a> ou des modules complémentaires comme <a href="https://addons.mozilla.org/en-US/firefox/addon/yslow/">YSlow</a> qui peuvent fournir des indications intéressantes :</p> -<p><img alt="Yslow diagnostics" src="https://mdn.mozillademos.org/files/9661/yslow-diagnostics.png" style="height: 766px; width: 637px;"></p> +<p><img alt="Yslow diagnostics" src="yslow-diagnostics.png"></p> <p>Les notes vont de A à F. La page actuelle est pluôt légère et respecte donc la plupart des critères. On voit ici qu'il aurait été préférable d'utiliser un {{Glossary("CDN")}}. Dans notre cas, cette remarque n'est pas très critique car notre site web n'est pas un site à forte audience qui sert des milliers d'images.</p> diff --git a/files/fr/learn/common_questions/common_web_layouts/index.html b/files/fr/learn/common_questions/common_web_layouts/index.html index 2b54571c67..5fba68714b 100644 --- a/files/fr/learn/common_questions/common_web_layouts/index.html +++ b/files/fr/learn/common_questions/common_web_layouts/index.html @@ -11,11 +11,10 @@ translation_of: Learn/Common_questions/Common_web_layouts original_slug: Apprendre/Concevoir_page_web --- <div>{{IncludeSubnav("/fr/Apprendre")}}</div> -<div class="summary"> + <p>Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.</p> -</div> -<table class="learn-box nostripe standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -53,19 +52,19 @@ original_slug: Apprendre/Concevoir_page_web <p><strong>Dispostion à une colonne : </strong>particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.</p> -<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="https://mdn.mozillademos.org/files/9501/1-col-layout.png" style="height: 100px; width: 160px;"></p> +<p><img alt="Example of a 1 column layout: Main on top and asides stacked beneath it." src="1-col-layout.png"></p> <p><strong>Disposition à deux colonnes :</strong> souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.</p> -<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="https://mdn.mozillademos.org/files/9499/2-col-layout-right.png" style="height: 100px; width: 160px;"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="https://mdn.mozillademos.org/files/9497/2-col-layout-left.png" style="height: 100px; width: 160px;"></p> +<p> <img alt="Example of a basic 2 column layout: One aside on the left column, and main on the right column." src="2-col-layout-right.png"> <img alt="Example of a basic 2 column layout: One aside on the right column, and main on the left column." src="2-col-layout-left.png"></p> <p><strong>Disposition à trois colonnes :</strong> adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).</p> -<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="https://mdn.mozillademos.org/files/9491/3-col-layout.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="https://mdn.mozillademos.org/files/9493/3-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="https://mdn.mozillademos.org/files/9495/3-col-layout-alt2.png" style="height: 100px; width: 160px;"></p> +<p><img alt="Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column." src="3-col-layout.png"> <img alt="Another example of a 3 column layout: Aside side by side on the left, Main on the right column." src="3-col-layout-alt.png"> <img alt="Another example of a 3 column layout: Aside side by side on the right, Main on the left column." src="3-col-layout-alt2.png"></p> <p>Il est aussi possible de mélanger tous ces modèles classiques :</p> -<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="https://mdn.mozillademos.org/files/9503/1-col-layout-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="https://mdn.mozillademos.org/files/9505/2-col-layout-left-alt.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="https://mdn.mozillademos.org/files/9507/2-col-layout-mix.png" style="height: 100px; width: 160px;"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="https://mdn.mozillademos.org/files/9509/2-col-layout-mix-alt.png" style="height: 100px; width: 160px;">…</p> +<p><img alt="Example of mixed layout: Main on top and asides beneath it side by side." src="1-col-layout-alt.png"> <img alt="Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column" src="2-col-layout-left-alt.png"> <img alt="Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main." src="2-col-layout-mix.png"> <img alt="Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside convering the whole second row." src="2-col-layout-mix-alt.png">…</p> <p>Sachez que ce ne sont que des exemples et que vous êtes libre de disposer les sections à votre façon. Vous remarquerez toutefois que l'en-tête demeure toujours en haut et le bas de page, en bas, peu importe les autres déplacements du contenu. Aussi, comme la section la plus importante est celle du contenu principal, assurez-vous d'y laisser le plus de place possible.</p> @@ -83,7 +82,7 @@ original_slug: Apprendre/Concevoir_page_web <p><strong><a href="http://www.invisionapp.com/" rel="external">Invision</a> </strong>: un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page.</p> -<p><img alt="Example of a 1 column layout in the wild" src="https://mdn.mozillademos.org/files/9523/screenshot-product.jpg" style="height: 643px; width: 200px;"> <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="https://mdn.mozillademos.org/files/9525/screenshot-product-overlay.jpg" style="height: 643px; width: 200px;"></p> +<p><img alt="Example of a 1 column layout in the wild" src="screenshot-product.jpg"> <img alt="1 column layout with header, main content, a stack of aside contents and a footer" src="screenshot-product-overlay.jpg"></p> <p>Un style simple et direct. N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également.</p> @@ -91,7 +90,7 @@ original_slug: Apprendre/Concevoir_page_web <p><strong><a href="http://abduzeedo.com/typography-mania-261" rel="external">Abduzeedo</a></strong>, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités).</p> -<p><img alt="Example of a 2 column layout for a blog" src="https://mdn.mozillademos.org/files/9527/screenshot-blog.jpg" style="height: 643px; width: 200px;"> <img alt="A 2 column layout with the main content on the left column" src="https://mdn.mozillademos.org/files/9529/screenshot-blog-overlay.jpg" style="height: 643px; width: 200px;"></p> +<p><img alt="Example of a 2 column layout for a blog" src="screenshot-blog.jpg"> <img alt="A 2 column layout with the main content on the left column" src="screenshot-blog-overlay.jpg"></p> <p>Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire). La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être <em>directement relié</em>.</p> @@ -99,7 +98,7 @@ original_slug: Apprendre/Concevoir_page_web <p><strong><a href="http://www.mica.edu/About_MICA.html" rel="external">MICA</a></strong>. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes…</p> -<p><img alt="Example of a false 3 columns layout" src="https://mdn.mozillademos.org/files/9531/screenshot-education.jpg" style="height: 267px; width: 200px;"> <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="https://mdn.mozillademos.org/files/9533/screenshot-education-overlay.jpg" style="height: 267px; width: 200px;"></p> +<p><img alt="Example of a false 3 columns layout" src="screenshot-education.jpg"> <img alt="It looks like a 3 columns layout but actually, the aside content is floating around." src="screenshot-education-overlay.jpg"></p> <p>…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (<em>float</em> en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.</p> @@ -111,7 +110,7 @@ original_slug: Apprendre/Concevoir_page_web <p><strong>L'<a href="https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini" rel="external">Opéra de Paris</a>.</strong></p> -<p><img alt="An example of a tricky layout." src="https://mdn.mozillademos.org/files/9535/screenshot-opera.jpg" style="height: 424px; width: 200px;"> <img alt="This is a 2 column layout but the header is overlaping the main content." src="https://mdn.mozillademos.org/files/9537/screenshot-opera-overlay.jpg" style="height: 424px; width: 200px;"></p> +<p><img alt="An example of a tricky layout." src="screenshot-opera.jpg"> <img alt="This is a 2 column layout but the header is overlaping the main content." src="screenshot-opera-overlay.jpg"></p> <p>Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts. L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif).</p> diff --git a/files/fr/learn/common_questions/design_for_all_types_of_users/index.html b/files/fr/learn/common_questions/design_for_all_types_of_users/index.html index 47881342ef..cecce85e86 100644 --- a/files/fr/learn/common_questions/design_for_all_types_of_users/index.html +++ b/files/fr/learn/common_questions/design_for_all_types_of_users/index.html @@ -11,11 +11,10 @@ translation_of: Learn/Common_questions/Design_for_all_types_of_users original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs --- <div>{{IncludeSubnav("/fr/Apprendre")}}</div> -<div class="summary"> + <p>Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.</p> -</div> -<table class="learn-box nostripe standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -32,7 +31,7 @@ original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs <h2 id="Pédagogie_active">Pédagogie active</h2> -<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="https://developer.mozilla.org/fr/docs/MDN/D%C3%A9buter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p> +<p><em>Il n'y a, pour le moment, pas de matériau pour la pédagogie active. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Cependant, vous pouvez contribuer</a>.</em></p> <h2 id="Aller_plus_loin">Aller plus loin</h2> @@ -45,12 +44,12 @@ original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs <p>Pour contrôler le contraste, vous pouvez télécharger et installer <a href="http://www.paciellogroup.com/resources/contrastanalyser/">l'analyseur de contraste</a> du Groupe Paciello.</p> <div class="note"> -<p><strong>Note :</strong> Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a>. Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.</p> +<p><strong>Note :</strong> Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a>. Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran.</p> </div> <p>Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :</p> -<p><img alt="Colour contrast on this page: excellent!" src="https://mdn.mozillademos.org/files/9671/colour-contrast.png" style="height: 575px; width: 799px;"></p> +<p><img alt="Colour contrast on this page: excellent!" src="colour-contrast.png"></p> <p>Le ratio de contraste pour la luminosité entre le texte est l'arrière plan est de 8.30:1, ce qui est mieux que le minimum recommandé par le standard (4.5:1). Avec cette valeur, de nombreuses personnes devraient être en mesure de lire le texte..</p> @@ -147,7 +146,7 @@ span.subheading { font-size:1rem; } <p>C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'<a href="http://caniuse.com/#search=rem">Internet Explorer 9 et dans n'importe quel autre navigateur récent</a>, n'hésitez pas à l'utiliser.</p> <div class="note"> -<p><strong>Note :</strong> Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.</p> +<p><strong>Note :</strong> Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.</p> </div> <h4 id="Pourquoi_aurais-je_besoin_d'utiliser_des_unités_proportionnelles">Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ?</h4> @@ -162,7 +161,7 @@ span.subheading { font-size:1rem; } </ul> <div class="note"> -<p><strong>Note :</strong> Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des <code>em</code>s, quitte à faire un peu de mathématique en chemin.</p> +<p><strong>Note :</strong> Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des <code>em</code>s, quitte à faire un peu de mathématique en chemin.</p> </div> <h3 id="Largeur_de_ligne">Largeur de ligne</h3> @@ -220,7 +219,7 @@ span.subheading { font-size:1rem; } <p>Si l'image peut être décrite succintement, vous pouvez fournir un attribut <code>alt</code> qui sera suffisant. En revanche, si l'image ne peut pas être décrite rapidement, il est préférable de fournir un contenu équivalent sous un autre format sur la page (par exemple, si l'image est un graphique en camembert, on pourra fournir le tableau des données numériques) ou sinon, on pourra recourir à un attribut <code>longdesc</code>. La valeur de cet attribut est un URL qui pointe vers une ressource dont le seul but est de décrire en détails le contenu de l'image.</p> <div class="note"> -<p><strong>Note :</strong> L'utilisation voire l'existence de <code>longdesc</code> ont toujours été débatues. Veuillez vous référer à la page du W3C' <a href="http://www.w3.org/TR/html-longdesc/">Image Description Extension (longdesc)</a> pour une explication complète et des exemples détaillés.</p> +<p><strong>Note :</strong> L'utilisation voire l'existence de <code>longdesc</code> ont toujours été débatues. Veuillez vous référer à la page du W3C' <a href="http://www.w3.org/TR/html-longdesc/">Image Description Extension (longdesc)</a> pour une explication complète et des exemples détaillés.</p> </div> <h4 id="AudioVidéo">Audio/Vidéo</h4> @@ -245,4 +244,4 @@ span.subheading { font-size:1rem; } <h2 id="Prochaines_étapes">Prochaines étapes</h2> -<p>Cet article ne décrit que les bases d'un design accessible et universel. Si vous souhaitez aller plus loin dan ce domaine, vous pouvez poursuivre avec <a href="/en-US/docs/Learn/Basics_of_UX_Design">les bases de l'ergonomie ou UX (<em>User Experience</em> en anglais)</a>.</p> +<p>Cet article ne décrit que les bases d'un design accessible et universel. Si vous souhaitez aller plus loin dan ce domaine, vous pouvez poursuivre avec <a href="/fr/docs/Learn/Basics_of_UX_Design">les bases de l'ergonomie ou UX (<em>User Experience</em> en anglais)</a>.</p> diff --git a/files/fr/learn/common_questions/how_does_the_internet_work/index.html b/files/fr/learn/common_questions/how_does_the_internet_work/index.html index fb05ae9679..8a6850c59d 100644 --- a/files/fr/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/fr/learn/common_questions/how_does_the_internet_work/index.html @@ -8,11 +8,9 @@ tags: translation_of: Learn/Common_questions/How_does_the_Internet_work original_slug: Apprendre/Fonctionnement_Internet --- -<div class="summary"> <p>Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -44,38 +42,38 @@ original_slug: Apprendre/Fonctionnement_Internet <p>Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un <a href="https://fr.wikipedia.org/wiki/Ethernet" rel="external">câble Ethernet</a>), soit sans fil (par exemple, via <a href="http://fr.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> ou <a href="http://fr.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a>). Tous ces types de connexions sont possibles sur les ordinateurs modernes.</p> <div class="note"> -<p><strong>Note :</strong> À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.</p> +<p><strong>Note :</strong> À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil.</p> </div> -<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> +<p><img alt="Two computers linked together" src="internet-schema-1.png"></p> <p>Un réseau comme celui illustré ci-haut n'est pas limité à deux ordinateurs. Vous pouvez y connecter autant d'ordinateurs que vous le souhaitez, mais le tout se complique très rapidement. Ainsi, si vous voulez relier, disons, dix ordinateurs entre eux, vous aurez besoin de 45 câbles et de neuf prises sur chaque ordinateur!</p> -<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> +<p><img alt="Ten computers all together" src="internet-schema-2.png"></p> <p>Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle <em>routeur</em>. Ce <em>routeur</em> n'a qu'une seule fonction : tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C.</p> <p>Vous voyez donc que lorsque nous ajoutons un routeur dans notre structure, notre réseau de dix ordinateurs ne requiert alors que de dix câbles, d'une prise par ordinateur et d'un routeur de 10 ports.</p> -<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> +<p><img alt="Ten computers with a router" src="internet-schema-3.png"></p> <h3 id="Un_réseau_de_réseaux">Un réseau de réseaux</h3> <p>Jusqu'ici tout est beau, mais comment fait-on pour relier des centaines, des milliers ou même des millards d'ordinateurs entre eux ? Bien évidemment, un seul <em>routeur</em> ne pourrait suffire pour tant de connexions. Cependant, si vous avez lu attentivement, vous aurez constaté qu'un <em>routeur</em> n'est en réalité qu'un ordinateur. Serait-ce alors possible de lier deux <em>routeurs</em> ? Oui, absolument, et en voici le résultat!</p> -<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> +<p><img alt="Two routers linked together" src="internet-schema-4.png"></p> <p>En liant les ordinateurs à des routeurs, puis les routeurs entre eux, nous avons la capacité d'étendre le réseau indéfiniment.</p> -<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> +<p><img alt="Routers linked to routers" src="internet-schema-5.png"></p> <p>Un tel réseau s'apparente de près à ce que nous appelons l'Internet, mais il y a un élément manquant. Ce réseau a été conçu pour répondre à nos besoins personnels, mais d'autres réseaux existent également. Vos amis, vos voisins et plein d'autres gens peuvent avoir leurs propres réseaux d'ordinateurs. Cependant, il vous est plutôt impossible de brancher des câbles entre votre maison et le reste de la planète, alors que faire ? Eh bien, il se trouve que votre maison est déjà câblée et liée aux réseaux électrique et téléphonique. L'infrastructure téléphonique, qui lie déjà votre maison au reste de la planète, répond parfaitement à nos besoins. Afin de lier notre réseau à l'infrastructure téléphonique, nous devons utiliser un appareil spécialisé appelé <em>modem</em>. Ce <em>modem</em> convertit l'information de notre réseau en information décodable par l'infrastructure téléphonique et vice-versa.</p> -<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> +<p><img alt="A router linked to a modem" src="internet-schema-6.png"></p> <p>Notre réseau est donc lié à l'infrastructure téléphonique. La prochaine étape consiste alors à transmettre avec succès nos messages au réseau cible. À cette fin, nous allons lier notre réseau à un Fournisseur d'accès à Internet (FAI). Un FAI est une entreprise qui gère des <em>routeurs</em> qui sont liés entre eux et qui ont des droits d'accès aux routeurs d'autres FAI. Le message transmis par notre réseau est ainsi transporté à travers le réseau de FAI afin d'atteindre le réseau cible. Voilà en quoi consiste l'Internet : il s'agit de toute cette infrastructure de réseaux (dans les schémas suivants, ISP signifie FAI, c'est le terme anglais pour fournisseur d'accès).</p> -<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> +<p><img alt="Full Internet stack" src="internet-schema-7.png"></p> <h3 id="Localiser_un_ordinateur">Localiser un ordinateur</h3> @@ -83,7 +81,7 @@ original_slug: Apprendre/Fonctionnement_Internet <p>C'est une méthode très efficace pour les ordinateurs, mais les humains ont un peu plus de difficulté à retenir de telles adresses numériques. Afin de se faciliter la tâche, un libellé alphabétique, appelé <em>nom de domaine, </em>est souvent associé aux adresses IP. Par example, <code>google.com</code> est le nom de domaine associé à l'adresse IP <code>173.194.121.32</code>. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet.</p> -<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> +<p><img alt="Show how a domain name can alias an IP address" src="dns-ip.png"></p> <h3 id="L'Internet_et_le_web">L'Internet et le web</h3> diff --git a/files/fr/learn/common_questions/how_much_does_it_cost/index.html b/files/fr/learn/common_questions/how_much_does_it_cost/index.html index 713508e03a..23d1f14f68 100644 --- a/files/fr/learn/common_questions/how_much_does_it_cost/index.html +++ b/files/fr/learn/common_questions/how_much_does_it_cost/index.html @@ -8,11 +8,9 @@ tags: translation_of: Learn/Common_questions/How_much_does_it_cost original_slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte --- -<div class="summary"> <p>Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -154,7 +152,7 @@ original_slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte <h2 id="Prochaines_étapes">Prochaines étapes</h2> -<p>Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">préparer un environnement de travail</a>.</p> +<p>Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de <a href="/fr/docs/Learn/Set_up_a_basic_working_environment">préparer un environnement de travail</a>.</p> <ul> <li>Vous pouvez lire <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">cet article sur comment choisir et installer un éditeur de texte</a>.</li> diff --git a/files/fr/learn/common_questions/index.html b/files/fr/learn/common_questions/index.html index f51f3427f8..5e0ed2d208 100644 --- a/files/fr/learn/common_questions/index.html +++ b/files/fr/learn/common_questions/index.html @@ -10,7 +10,7 @@ original_slug: Apprendre/Common_questions --- <div>{{LearnSidebar}}</div> -<p class="summary">Cette section de la zone d'apprentissage est là pour fournir des réponses aux questions fréquentes qui peuvent survenir et qui ne concernent pas nécesserairement l'apprentissage du code (par exemple les articles sur <a href="/en-US/docs/Learn/HTML">HTML</a> ou <a href="/en-US/docs/Learn/CSS">CSS</a>.) Ces articles sont conçus pour être lus de manière indépendante.</p> +<p>Cette section de la zone d'apprentissage est là pour fournir des réponses aux questions fréquentes qui peuvent survenir et qui ne concernent pas nécesserairement l'apprentissage du code (par exemple les articles sur <a href="/fr/docs/Learn/HTML">HTML</a> ou <a href="/fr/docs/Learn/CSS">CSS</a>.) Ces articles sont conçus pour être lus de manière indépendante.</p> <h2 id="Comment_le_Web_fonctionne">Comment le Web fonctionne</h2> @@ -18,27 +18,27 @@ original_slug: Apprendre/Common_questions <dl> <dt> - <h3 id="Comment_fonctionne_Internet"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">Comment fonctionne Internet?</a></h3> + <a href="/fr/docs/Learn/Common_questions/How_does_the_Internet_work">Comment fonctionne Internet?</a> </dt> <dd><strong>Internet</strong> est la colonne vertébrale du Web, l'infrastructure technique qui rend le Web possible. A sa base, Internet est un vaste réseau d'ordinateurs qui communiquent ensemble. Cet article traite de son fonctionnement, de manière basique.</dd> <dt> - <h3 id="Quelle_est_la_différence_entre_une_page_web_un_site_web_un_serveur_web_et_un_moteur_de_recherche"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Quelle est la différence entre une page web, un site web, un serveur web et un moteur de recherche?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">Quelle est la différence entre une page web, un site web, un serveur web et un moteur de recherche?</a> </dt> <dd>Dans cet article nous abordons les différents concepts liés au web : une page web, site web, serveur web, et moteur de recherche. Ces termes sont souvent confondus par les nouveaux internautes, ou mal utilisés. Voyons ce que chacun d'eux signifient.</dd> <dt> - <h3 id="Quest-ce_quune_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">Qu'est-ce qu'une URL?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_is_a_URL">Qu'est-ce qu'une URL?</a> </dt> <dd>Avec {{Glossary("Hypertext", "le lien hypertexte")}} et {{Glossary("HTTP")}}, l'URL est l'un des principaux concepts du Web. C'est le mécanisme utilisé par le {{Glossary("Browser","navigateur web")}} pour récupérer n'importe quelle ressource publiée sur le Web.</dd> <dt> - <h3 id="Quest-ce_quun_nom_de_domaine"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">Qu'est-ce qu'un nom de domaine?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_is_a_domain_name">Qu'est-ce qu'un nom de domaine?</a> </dt> <dd>Les noms de domaine sont une partie essentielle du fonctionnement d'Internet. Ils fournissent une adresse compréhensible pour un humain de n'importe quel serveur web disponible sur Internet.</dd> <dt> - <h3 id="Quest-ce_quun_serveur_Web"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">Qu'est-ce qu'un serveur Web?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_is_a_web_server">Qu'est-ce qu'un serveur Web?</a> </dt> <dd>Le terme "serveur Web" peut indiquer le matériel ou le logiciel qui fournissent les sites web aux clients à travers le web — ou les deux travaillant ensemble. Dans cet article nous verrons comment fonctionnent les serveurs web et quelle est leur importance.</dd> <dt> - <h3 id="Que_sont_les_liens_hypertextes"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">Que sont les liens hypertextes?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_are_hyperlinks">Que sont les liens hypertextes?</a> </dt> <dd>Dans cet article nous verrons ce que sont les liens hypertextes et pourquoi ils sont importants.</dd> </dl> @@ -49,43 +49,43 @@ original_slug: Apprendre/Common_questions <dl> <dt> - <h3 id="Combien_ça_coûte_de_créer_quelque_chose_sur_le_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Combien ça coûte de créer quelque chose sur le Web?</a></h3> + <a href="/fr/docs/Learn/Common_questions/How_much_does_it_cost">Combien ça coûte de créer quelque chose sur le Web?</a> </dt> <dd>Quand vous démarrez votre site web, vous pouvez ne rien dépenser ou alors complètement dépasser vos estimations. Dans cet article nous aborderons le prix de chaque chose et de ce que vous aurez si vous payez (ou ne payez pas).</dd> <dt> - <h3 id="Quel_logiciel_est_nécessaire_pour_construire_un_site_web"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">Quel logiciel est nécessaire pour construire un site web?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_software_do_I_need">Quel logiciel est nécessaire pour construire un site web?</a> </dt> <dd>Dans cet article nous expliquerons quel logiciel est nécessaire pour l'édition, l'upload, ou pour la visualisation d'un site web.</dd> <dt> - <h3 id="Quels_sont_les_éditeurs_disponibles"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">Quels sont les éditeurs disponibles?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Available_text_editors">Quels sont les éditeurs disponibles?</a> </dt> <dd>Dans cet article nous mettrons en avant quelques points à retenir concernant le choix et l'installation d'un éditeur de texte pour le développement web.</dd> <dt> - <h3 id="Comment_installer_un_environnement_de_base_pour_travailler"><a href="/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment">Comment installer un environnement de base pour travailler?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Set_up_a_basic_working_environment">Comment installer un environnement de base pour travailler?</a> </dt> <dd>Quand vous travaillez sur un projet web, vous souhaiterez le tester en local avant de l'exposer à tout le monde. Certains types de code nécessitent un serveur web pour tester, dans cet article nous allons vous montrer comment le configurer. Nous allons aussi voir une structure à mettre en place afin que les fichiers restent organisés quand le projet grandira.</dd> <dt> - <h3 id="Que_sont_les_outils_de_développement_du_navigateur"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Que sont les outils de développement du navigateur?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">Que sont les outils de développement du navigateur?</a> </dt> <dd>Chaque navigateur web possède un ensemble d'outils d'aide au développement du HTML, CSS, et des autres codes. Cet article explique comment utiliser les outils de développement de votre navigateur.</dd> <dt> - <h3 id="Comment_être_sûr_que_votre_site_fonctionne_correctement"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">Comment être sûr que votre site fonctionne correctement?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">Comment être sûr que votre site fonctionne correctement?</a> </dt> <dd>Alors vous avez publié votre site web en ligne — très bien ! Mais êtes vous sûr qu'il fonctionne correctement ? Cet article fourni quelques étapes de dépannage basique.</dd> <dt> - <h3 id="Comment_transférer_des_fichiers_vers_un_serveur_web"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">Comment transférer des fichiers vers un serveur web?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Upload_files_to_a_web_server">Comment transférer des fichiers vers un serveur web?</a> </dt> - <dd>Cet article montre comment mettre son site en ligne en utilisant un outil <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs.</dd> + <dd>Cet article montre comment mettre son site en ligne en utilisant un outil <a href="/fr/docs/Glossary/FTP">FTP</a> — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs.</dd> <dt> - <h3 id="Comment_utiliser_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">Comment utiliser GitHub Pages?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Using_GitHub_Pages">Comment utiliser GitHub Pages?</a> </dt> <dd>Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub.</dd> <dt> - <h3 id="Comment_héberger_son_site_sur_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Comment héberger son site sur Google App Engine?</a></h3> + <a href="/fr/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Comment héberger son site sur Google App Engine?</a> </dt> <dd>Vous recherchez un endroit pour héberger votre site web? Voici un guide pas-à-pas pour héberger votre site sur Google App Engine.</dd> <dt> - <h3 id="Quels_outils_sont_disponibles_pour_corriger_et_améliorer_les_performances_du_site_web"><a href="/en-US/docs/Tools/Performance">Quels outils sont disponibles pour corriger et améliorer les performances du site web?</a></h3> + <a href="/fr/docs/Tools/Performance">Quels outils sont disponibles pour corriger et améliorer les performances du site web?</a> </dt> <dd>Cette série d'articles vous montre comment utiliser les Outils de Développement de Firefox afin de déboguer et améliorer les performances de votre site web, en utilisant les outils pour vérifier l'utilisation de la mémoire, l'arbre d'appel de JavaScript, la quantité de noeuds DOM affichée, et plus encore.</dd> </dl> @@ -96,23 +96,23 @@ original_slug: Apprendre/Common_questions <dl> <dt> - <h3 id="Comment_démarrer_dans_la_conception_de_mon_site_web"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">Comment démarrer dans la conception de mon site web?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Thinking_before_coding">Comment démarrer dans la conception de mon site web?</a> </dt> <dd>Cet article couvre la première étape la plus importante de tous les projets: définir ce que vous voulez accomplir avec.</dd> <dt> - <h3 id="Que_contiennent_les_mises_en_page_classiques"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">Que contiennent les mises en page classiques?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Common_web_layouts">Que contiennent les mises en page classiques?</a> </dt> <dd>Lorsque vous concevez des pages pour votre site Web, il est bon d'avoir une idée des mises en page les plus courantes. Cet article présente quelques mises en page typiques du web, en analysant les parties qui composent chacune d'entre elles.</dd> <dt> - <h3 id="Quest-ce-que_laccessibilité"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">Qu'est-ce-que l'accessibilité?</a></h3> + <a href="/fr/docs/Learn/Common_questions/What_is_accessibility">Qu'est-ce-que l'accessibilité?</a> </dt> <dd>Cet article est une introduction aux concepts de base de l'accessibilité web.</dd> <dt> - <h3 id="Comment_concevoir_pour_tous_les_types_dutilisateurs"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">Comment concevoir pour tous les types d'utilisateurs?</a></h3> + <a href="/fr/docs/Learn/Common_questions/Design_for_all_types_of_users">Comment concevoir pour tous les types d'utilisateurs?</a> </dt> <dd>Cet article fournit quelques techniques de base afin de vous aider dans la conception de sites web adaptés à tous les types d'utilisateurs — de rapides astuces d'accessibilité, en quelque sorte.</dd> <dt> - <h3 id="Quelles_fonctionnalités_HTML_favorisent_laccessibilité"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">Quelles fonctionnalités HTML favorisent l'accessibilité?</a></h3> + <a href="/fr/docs/Learn/Common_questions/HTML_features_for_accessibility">Quelles fonctionnalités HTML favorisent l'accessibilité?</a> </dt> <dd>Cet article décrit les fonctionnalités spécifiques d'HTML qui peuvent être utilisées afin de rendre les pages accessibles aux personnes ayant certaines difficultées.</dd> </dl> @@ -122,7 +122,7 @@ original_slug: Apprendre/Common_questions <p>Pour les solutions fréquentes aux problèmes de HTML/CSS/JavaScript, essayez les articles suivants:</p> <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Utiliser HTML pour résoudre des problèmes courants</a></li> - <li><a href="/en-US/docs/Learn/CSS/Howto">Utiliser CSS pour résoudre des problèmes courants</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Howto">Utiliser JavaScript pour résoudre des problèmes courants</a></li> + <li><a href="/fr/docs/Learn/HTML/Howto">Utiliser HTML pour résoudre des problèmes courants</a></li> + <li><a href="/fr/docs/Learn/CSS/Howto">Utiliser CSS pour résoudre des problèmes courants</a></li> + <li><a href="/fr/docs/Learn/JavaScript/Howto">Utiliser JavaScript pour résoudre des problèmes courants</a></li> </ul> diff --git a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html index c317575c8b..9bbe2a62c4 100644 --- a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html +++ b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -8,7 +8,7 @@ original_slug: Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche --- <p>Dans cet article, nous démystifions plusieurs notions liées au Web : page web, site web, serveur web et moteur de recherche. Ces termes sont souvent une source de confusion ou utilisés incorrectement : voyons leur signification.</p> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -74,7 +74,7 @@ original_slug: Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche </ul> <div class="note"> -<p><strong>Note : </strong>Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers <a href="/fr/docs/Glossary/PDF">PDF</a> ou des images, mais le terme <strong>page web</strong> désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme <strong>document</strong>.</p> +<p><strong>Note :</strong> Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers <a href="/fr/docs/Glossary/PDF">PDF</a> ou des images, mais le terme <strong>page web</strong> désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme <strong>document</strong>.</p> </div> <p>Toutes les pages web sont associées à une adresse unique. Pour atteindre une page, il suffit d'entrer son adresse dans la barre d'adresse du navigateur :</p> diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html index ef5a5b62fd..c38eff9431 100644 --- a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html +++ b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.html @@ -16,15 +16,13 @@ tags: translation_of: Learn/Common_questions/set_up_a_local_testing_server original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local --- -<div class="summary"> <p>Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Vous devez au préalable savoir <a href="/en-US/docs/Learn/How_the_Internet_works">comment Internet fonctionne</a> et <a href="/en-US/docs/Learn/What_is_a_Web_server">ce qu'est un serveur Web</a>.</td> + <td>Vous devez au préalable savoir <a href="/fr/docs/Learn/How_the_Internet_works">comment Internet fonctionne</a> et <a href="/fr/docs/Learn/What_is_a_Web_server">ce qu'est un serveur Web</a>.</td> </tr> <tr> <th scope="row">Objectif:</th> @@ -44,7 +42,7 @@ original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local <p>Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont :</p> <ul> - <li><strong>Ils sont basés sur des requêtes asynchrones</strong>. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Récolter des données depuis le serveur </a>) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Sécurité des sites Web</a> pour en savoir plus).</li> + <li><strong>Ils sont basés sur des requêtes asynchrones</strong>. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez <a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Récolter des données depuis le serveur </a>) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Sécurité des sites Web</a> pour en savoir plus).</li> <li><strong>Ils mettent en œuvre un langage spécifique, tournant sur le serveur</strong>. Des langages côté-serveur (comme PHP ou Python) nécessitent un environnement spécifique fourni par le serveur pour interpréter le code et donner des résultats.</li> </ul> @@ -70,12 +68,12 @@ original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local <li> <p>Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante :</p> - <pre class="brush: bash notranslate">python -V</pre> + <pre class="brush: bash">python -V</pre> </li> <li> <p>Elle devrait retourner un numéro de version. Si c'est le cas, en utilisant la commande <code>cd</code>, placer votre répertoire de travail dans le dossier contenant l'exemple.</p> - <pre class="brush: bash notranslate">#inclure le nom du dossier pour y s'y rendre, + <pre class="brush: bash">#inclure le nom du dossier pour y s'y rendre, #par exemple cd Bureau # utiliser deux points pour remonter dans @@ -85,10 +83,10 @@ cd ..</pre> <li> <p>Entrer la commande pour démarrer le serveur dans ce dossier.</p> - <pre class="brush: bash notranslate"># Si la version de Python retournée est ultérieur à 3.X + <pre class="brush: bash"># Si la version de Python retournée est ultérieur à 3.X python3 -m http.server # Si la version de Python retournée est ultérieur à 2.X -python -m <code>SimpleHTTPServer</code></pre> +python -m SimpleHTTPServer</pre> </li> <li> <p>Par défaut, il affiche la liste des fichiers du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant l'URL <code>localhost:8000</code> dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.</p> @@ -96,7 +94,7 @@ python -m <code>SimpleHTTPServer</code></pre> </ol> <div class="note"> -<p><strong>Note </strong>: Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple <code>python -m http.server 7800</code> (Python 3.x) ou <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse <code>localhost:7800</code>.</p> +<p><strong>Note :</strong> Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple <code>python -m http.server 7800</code> (Python 3.x) ou <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse <code>localhost:7800</code>.</p> </div> <h2 id="Faire_fonctionner_localement_des_langages_serveur">Faire fonctionner localement des langages serveur</h2> @@ -104,7 +102,7 @@ python -m <code>SimpleHTTPServer</code></pre> <p>Le module <code>SimpleHTTPServer</code> de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples :</p> <ul> - <li>Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">installer Python/PIP</a>, puis Flask en utilisant <code>pip3 install flask</code>. À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple <code>python3 python-example.py</code>, puis consulter <code>localhost:5000</code> dans votre navigateur.</li> - <li>Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li> + <li>Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant <a href="/fr/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'<a href="/fr/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">installer Python/PIP</a>, puis Flask en utilisant <code>pip3 install flask</code>. À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple <code>python3 python-example.py</code>, puis consulter <code>localhost:5000</code> dans votre navigateur.</li> + <li>Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir <a href="/fr/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li> <li>Pour exécuter du code PHP côté serveur, vous aurez besoin d'une configuration serveur qui peut interpréter PHP. De bonnes options pour tester PHP localement sont <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac and Windows) , <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) and <a href="https://www.linux.com/learn/easy-lamp-server-installation">LAMP</a> (Linux, Apache, MySQL, et PHP/Python/Perl). Ce sont des paquets complets qui créent des configurations locales vous permettant d'exécuter un serveur Apache, PHP et des bases de données MySQL.</li> </ul> diff --git a/files/fr/learn/common_questions/thinking_before_coding/index.html b/files/fr/learn/common_questions/thinking_before_coding/index.html index 7ebcaffe6d..7756cfd9c5 100644 --- a/files/fr/learn/common_questions/thinking_before_coding/index.html +++ b/files/fr/learn/common_questions/thinking_before_coding/index.html @@ -10,11 +10,9 @@ original_slug: Apprendre/Commencez_votre_projet_web --- <div>{{IncludeSubnav("/fr/Apprendre")}}</div> -<div class="summary"> <p>Cette article présente l'étape primordiale de n'importe quel projet définir ce qu'on souhaite accomplir avec.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis </th> @@ -43,7 +41,7 @@ original_slug: Apprendre/Commencez_votre_projet_web <h2 id="Pédagogie_active">Pédagogie active</h2> -<p><em>Il n'y a pas la pédagogie active disponible pour l'instant. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !</a></em></p> +<p><em>Il n'y a pas la pédagogie active disponible pour l'instant. <a href="/fr/docs/MDN/Getting_started">S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !</a></em></p> <h2 id="Aller_plus_loin">Aller plus loin</h2> @@ -54,7 +52,7 @@ original_slug: Apprendre/Commencez_votre_projet_web Une discussion d'une heure avec des amis est un bon début, mais ce sera insuffisant. Vous devez vous asseoir et structurer vos idées pour avoir une vision claire du chemin que vous devrez parcourir afin de concrétiser vos idées. Pour ce faire, il vous suffit d'un stylo, de quelques feuilles de papier et d'un peu de temps pour répondre au moins aux questions suivantes.</p> <div class="note"> -<p><strong>Remarque </strong> Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent <a href="https://fr.wikipedia.org/wiki/Id%C3%A9ation">l'idéation</a>, <a href="https://fr.wikipedia.org/wiki/Planification">la planification</a> et <a href="https://fr.wikipedia.org/wiki/Gestion_de_projet">la gestion de projet</a>.</p> +<p><strong>Note :</strong> Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent <a href="https://fr.wikipedia.org/wiki/Id%C3%A9ation">l'idéation</a>, <a href="https://fr.wikipedia.org/wiki/Planification">la planification</a> et <a href="https://fr.wikipedia.org/wiki/Gestion_de_projet">la gestion de projet</a>.</p> </div> <h3 id="Qu'est-ce_que_je_veux_accomplir_exactement">Qu'est-ce que je veux accomplir exactement ?</h3> @@ -114,7 +112,7 @@ original_slug: Apprendre/Commencez_votre_projet_web </thead> <tbody> <tr> - <td style="vertical-align: top;">Permettre aux gens d'écouter votre musique</td> + <td>Permettre aux gens d'écouter votre musique</td> <td> <ol> <li>Enregistrer de la musique</li> @@ -124,7 +122,7 @@ original_slug: Apprendre/Commencez_votre_projet_web </td> </tr> <tr> - <td style="vertical-align: top;">Parler de votre musique</td> + <td>Parler de votre musique</td> <td> <ol> <li>Écrire quelques articles pour lancer la discussion</li> @@ -134,7 +132,7 @@ original_slug: Apprendre/Commencez_votre_projet_web </td> </tr> <tr> - <td style="vertical-align: top;">Rencontrer d'autres musiciens</td> + <td>Rencontrer d'autres musiciens</td> <td> <ol> <li>Permettre aux gens de vous contacter (e-mail ? Twitter ? Facebook ? Téléphone ? Adresse ?)</li> @@ -143,23 +141,19 @@ original_slug: Apprendre/Commencez_votre_projet_web </td> </tr> <tr> - <td style="vertical-align: top;">Vendre des goodies</td> + <td>Vendre des goodies</td> <td> <ol> <li>Créer les goodies</li> <li>Stocker les goodies</li> <li>Trouver un moyen de gérer l'expédition</li> - <li> - <div class="almost_half_cell" id="gt-res-content"> - <div dir="ltr" style="zoom: 1;">Trouver un moyen de gérer le paiement</div> - </div> - </li> + <li>Trouver un moyen de gérer le paiement</li> <li>Faire un système sur votre site pour que les gens passe des commandes</li> </ol> </td> </tr> <tr> - <td style="vertical-align: top;">Enseigner la musique à travers des vidéos</td> + <td>Enseigner la musique à travers des vidéos</td> <td> <ol> <li>Enregistrer vos leçons vidéos</li> diff --git a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html index a385e6afb0..56f5dbdfa3 100644 --- a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html +++ b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.html @@ -8,11 +8,9 @@ tags: translation_of: Learn/Common_questions/Upload_files_to_a_web_server original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web --- -<div class="summary"> <p>Cet article illustre comment publier votre site en ligne grâce à des outils {{Glossary("FTP")}}. </p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -25,11 +23,11 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web </tbody> </table> -<p>Maintenant que vous avez <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">construit une page web</a>, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.</p> +<p>Maintenant que vous avez <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">construit une page web</a>, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.</p> <h2 id="Pédagogie_active">Pédagogie active</h2> -<p><em>Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. <a href="https://developer.mozilla.org/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p> +<p><em>Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p> <h2 id="Aller_plus_loin">Aller plus loin</h2> @@ -38,19 +36,19 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web <p>Il existe de nombreux clients FTP. Dans cette démonstration, nous utiliserons FireFTP. Celui-ci est simple à installer avec Firefox car <a href="https://addons.mozilla.org/firefox/addon/fireftp/">c'est un module complémentaire</a>.</p> <div class="note"> -<p>Il existe de nombreuses autres options, voir <a href="/fr/Apprendre/How_much_does_it_cost#Publishing_tools.3A_FTP_client">les outils de publications : les clients FTP</a> pour plus d'informations.</p> +<p><strong>Note :</strong> Il existe de nombreuses autres options, voir <a href="/fr/Apprendre/How_much_does_it_cost#Publishing_tools.3A_FTP_client">les outils de publications : les clients FTP</a> pour plus d'informations.</p> </div> <p>Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes :</p> <ol> - <li><strong>Menu de Firefox <img alt="" src="https://mdn.mozillademos.org/files/9633/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> ➤ <img alt="Developer" src="https://mdn.mozillademos.org/files/9635/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 24px; vertical-align: middle; width: 27px;"> ➤ FireFTP</strong></li> + <li><strong>Menu de Firefox <img alt="" src="2014-01-10-13-08-08-f52b8c.png"> ➤ <img alt="Developer" src="Screenshot%20from%202014-11-26%2014:24:56.png"> ➤ FireFTP</strong></li> <li><strong>Outils </strong>➤ <strong>Développement web</strong> ➤ <strong>FireFTP</strong></li> </ol> <p>Vous devriez voir apparaître cette fenêtre :</p> -<p><img alt="FireFTP : the interface, not connected to a server" src="https://mdn.mozillademos.org/files/9613/fireftp-default.png" style="height: 800px; width: 1280px;"></p> +<p><img alt="FireFTP : the interface, not connected to a server" src="fireftp-default.png"></p> <h3 id="Se_connecter">Se connecter</h3> @@ -77,7 +75,7 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web <p>Tout d'abord, jetons un coup d'œil à <code>http://demozilla.hebergeurexemple.net/</code> — pour le moment, comme vous pouvez le voir, il n'y a pas grand chose :</p> -<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="height: 233px; width: 409px;"></p> +<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="demozilla-empty.png"></p> <div class="note"> <p><strong>Note :</strong> Selon l'hébergeur que vous avez choisi, vous pourriez ici voir une page avec un texte ressemblant à « Ce site web est hébergé par [Nom de l'hébergeur] ».</p> @@ -85,13 +83,13 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web <p>Pour connecter votre client FTP au serveur distant, cliquez sur le bouton <em>« Créer un compte »</em> de FireFTP, puis remplissez les informations telles qu'elles vous ont été fournies par votre hébergeur :</p> -<p><img alt="FireFTP: creating an account" src="https://mdn.mozillademos.org/files/9617/fireftp-createlogin.png" style="height: 436px; width: 578px;"></p> +<p><img alt="FireFTP: creating an account" src="fireftp-createlogin.png"></p> <h3 id="Ici_et_là-bas_la_vue_locale_et_la_vue_distante">Ici et là-bas : la vue locale et la vue distante</h3> <p>Vous pouvez ensuite vous connecter sur ce nouveau compte :</p> -<p><img alt="The FTP interface, once logged" src="https://mdn.mozillademos.org/files/9619/fireftp-logged.png" style="height: 800px; width: 1280px;"></p> +<p><img alt="The FTP interface, once logged" src="fireftp-logged.png"></p> <p>Examinons cet écran :</p> @@ -105,19 +103,19 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web <p>Comme nous l'avons vu plus tôt, notre hébergeur nous a indiqué que les fichiers devaient être stockés sous <code>Public/htdocs</code> pour être visible sur le Web. Déplaçons-nous donc dans ce dossier grâce au volet droit :</p> -<p><img alt="Changing to the htdocs folder on the remote server" src="https://mdn.mozillademos.org/files/9623/remote-htdocs-empty.png" style="height: 315px; width: 561px;"></p> +<p><img alt="Changing to the htdocs folder on the remote server" src="remote-htdocs-empty.png"></p> <p>Ensuite, pour transférer des fichiers de votre ordinateur vers ce dossier du serveur, il suffit de les glisser-déposer du volet gauche vers le volet droit :</p> -<p><img alt="The files show in the remote view: they have been pushed to the server" src="https://mdn.mozillademos.org/files/9625/files-dropped-onto-the-server.png" style="height: 800px; width: 1280px;"></p> +<p><img alt="The files show in the remote view: they have been pushed to the server" src="files-dropped-onto-the-server.png"></p> <h3 id="Est-ce_que_mes_fichiers_sont_bien_en_ligne">Est-ce que mes fichiers sont bien en ligne ?</h3> <p>Jusqu'ici tout va bien, vérifions quand même en tapant <code>http://demozilla.hebergeurexemple.net/</code> dans la barre d'URL du navigateur :</p> -<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="height: 442px; width: 400px;"></p> +<p><img alt="Here we go: our website is live!" src="here-we-go.png"></p> -<p>Et <em lang="fr">voilà</em> ! Notre site est en ligne !</p> +<p>Et <em>voilà</em> ! Notre site est en ligne !</p> <h3 id="D'autres_méthodes_pour_transférer_des_fichiers">D'autres méthodes pour transférer des fichiers</h3> diff --git a/files/fr/learn/common_questions/using_github_pages/index.html b/files/fr/learn/common_questions/using_github_pages/index.html index a20bed20d4..0a49b5cb64 100644 --- a/files/fr/learn/common_questions/using_github_pages/index.html +++ b/files/fr/learn/common_questions/using_github_pages/index.html @@ -10,7 +10,7 @@ tags: translation_of: Learn/Common_questions/Using_Github_pages original_slug: Apprendre/Utiliser_les_pages_GitHub --- -<p class="summary"><a href="https://github.com/">GitHub</a> est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version <a href="http://git-scm.com/">Git</a><strong>. </strong>Par défaut, le système est <em>open source</em>, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées <em>gh-pages</em>) qui sont une des fonctionnalités de GitHub.</p> +<p><a href="https://github.com/">GitHub</a> est un site de partage de code, sur lequel on peut publier des projets dont le code est géré avec le système de gestion de version <a href="http://git-scm.com/">Git</a><strong>. </strong>Par défaut, le système est <em>open source</em>, ce qui signifie que tout le monde peut consulter le code, l'utiliser pour apprendre ou l'améliorer et collaborer aux projets. Vous pouvez donc participer à d'autres projets ou, à l'inverse, des personnes peuvent collaborer à vos projets ! Dans cet article, nous verrons comment publier du contenu sur le web en utilisant les « pages GitHub » (aussi appelées <em>gh-pages</em>) qui sont une des fonctionnalités de GitHub.</p> <h2 id="Publier_du_contenu">Publier du contenu</h2> @@ -48,13 +48,13 @@ original_slug: Apprendre/Utiliser_les_pages_GitHub <p>La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface en ligne de commande de votre ordinateur. La ligne de commande est une fenêtre où on saisit des commandes au clavier pour créer des fichiers, lancer des programmes, plutôt que de cliquer avec la souris en utilisant une interface graphique. Une interface en ligne de commande ressemblera à quelque chose comme ceci :</p> -<p><img alt="Interface en ligne de commande" src="https://mdn.mozillademos.org/files/12271/commande.png" style="height: 309px; width: 499px;"></p> +<p><img alt="Interface en ligne de commande" src="commande.png"></p> <div class="note"> -<p><strong>Note : </strong>Il existe également des <a href="http://git-scm.com/downloads/guis">interfaces graphiques pour Git</a> qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.</p> +<p><strong>Note :</strong> Il existe également des <a href="http://git-scm.com/downloads/guis">interfaces graphiques pour Git</a> qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande.</p> </div> -<p><span id="command-line">Chaque système d'exploitation possède sa propre interface en ligne de commande :</span></p> +<p>Chaque système d'exploitation possède sa propre interface en ligne de commande :</p> <ul> <li><strong>Windows</strong> : <strong>l'invite de commande</strong>. Celle-ci peut être lancée en utilisant la touche Windows et en tapant <em>Invite de commande</em> avant de sélectionner l'option dans la liste qui apparaît. Windows utilise certaines conventions différentes de celles choisies par Linux et OS X, les commandes peuvent donc varier légèrement (par exemple, dans Windows, on utilisera <code>\</code> pour indiquer un sous-répertoire alors que Linux et OS X utiliseront <code>/</code>).</li> @@ -70,9 +70,9 @@ original_slug: Apprendre/Utiliser_les_pages_GitHub <li>Ensuite, vous aurez besoin de créer un dépôt GitHub sur lequel envoyer les fichiers de votre site. Quand vous êtes connecté-e sur GitHub, cliquez sur l'icône Plus (+) en haut à droite de la page d'accueil puis sélectionner l'option <em>New Repository</em> (qui signifie « Créer un nouveau dépôt »).</li> <li>Sur la page qui s'affiche, dans le champ « <em>Repository name</em> », entrez un nom pour votre dépôt. Vous pouvez par exemple saisir <em>mon-premier-depot</em>.</li> <li>Il y a également un champ qui décrit le projet qui sera placé dans ce dépôt. Votre écran devrait ressembler à quelque chose comme :<br> - <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li> + <img alt="" src="create-new-repo.png"></li> <li>Ensuite, cliquez sur « <em>Create repository</em> » (pour créer le dépôt). Vous arrieverez alors sur la page suivante :<br> - <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li> + <img alt="" src="github-repo.png"></li> </ol> <h3 id="Envoyer_vos_fichiers_vers_GitHub">Envoyer vos fichiers vers GitHub</h3> @@ -80,7 +80,7 @@ original_slug: Apprendre/Utiliser_les_pages_GitHub <ol> <li>Sur cette page, une section vous intéresse particulièrement : « <em>…or push an existing repository from the command line</em> » (ce qui signifie « ou pousser un dépôt existant grâce à la ligne de commande »). Vous devrez voir deux lignes de codes sous cette section. Copiez la première ligne et collez la dans votre interface en ligne de commande puis tapez sur Entrée. La commande devrait ressembler à : - <pre class="copyable-terminal-content js-zeroclipboard-target"><span class="user-select-contain">git remote add origin <span class="js-live-clone-url">https://github.com/chrisdavidmills/mon-premier-depot.git</span></span></pre> + <pre>git remote add origin https://github.com/chrisdavidmills/mon-premier-depot.git</pre> </li> <li>Ensuite, saisissez ces deux commandes en tapant sur la touche Entrée après chacune. Ces commandes permettent d'indiquer à Git qu'il doit gérer tous les fichiers du dossier et d'enregistrer cette action. <pre class="brush: bash">git add --all @@ -90,7 +90,7 @@ git commit -m 'ajout des fichiers au dépôt'</pre> <pre class="brush: bash">git push -u origin master</pre> </li> <li>Votre code est publié sur GitHub. Pour avoir une page GitHub, vous devrez créer une <em>branche</em> <code>gh-pages</code> sur votre dépôt. Actualisez la page web de votre dépôt, vous devriez obtenir une page semblable à celle présentée ci-dessous. Ensuite, cliquez que le bouton « <em>Branch: <strong>master</strong></em> » (GitHub indique que vous êtes sur la branche <code>master</code> de votre dépôt). Dans la liste qui s'affiche, saisissez le texte <strong>gh-pages</strong> puis cliquez sur <em>Create branch: gh-pages</em> (« créer la branche intitulée gh-pages »). Cela créera une nouvelle branche pour votre dépôt, cette branche s'appellera gh-pages et sera publiée à un endroit spécifique. L'URL du site sera <em>nom-utilisateur.github.io/nom-du-depot</em>. Dans mon exemple, l'URL est donc <em>https://chrisdavidmills.github.io/my-repository</em>. La page qui est affichée à cette URL est la page <code>index.html</code> contenue dans le dépôt.<br> - <img alt="" src="https://mdn.mozillademos.org/files/12145/repo-site.png" style="display: block; margin: 0 auto;"></li> + <img alt="" src="repo-site.png"></li> <li>Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :)</li> </ol> diff --git a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html index 5105d8fb6d..b8b05fb694 100644 --- a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html +++ b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.html @@ -17,9 +17,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs <div>{{Previous("Apprendre/Commencer_avec_le_web")}}</div> -<div class="summary"> <p>Tous les navigateurs modernes possèdent un ensemble d'outils destinés aux développeurs. Ces outils permettent de réaliser différentes actions : inspecter le code HTML, CSS ou JavaScript chargé à la volée dans la page, montrer les fichiers téléchargés et le temps de chargement, etc. Dans cet article, nous verrons comment utiliser les fonctionnalités basiques des outils de développements d'un navigateur (parfois appelés avec l'anglicisme « <em>devtools</em> »).</p> -</div> <div class="note"> <p><strong>Note :</strong> Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser <a href="http://mdn.github.io/beginner-html-site-scripted/">l'exemple construit</a> dans la série d'articles <a href="/fr/Apprendre/Commencer_avec_le_web">Commencer avec le Web</a> et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.</p> @@ -29,7 +27,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs <p>Les <em>devtools</em> s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :</p> -<p><img alt="Affichage de la fenêtre principale avec les devtools ouverts" src="https://mdn.mozillademos.org/files/11517/DSC02620.png" style="display: block; height: 804px; margin: 0px auto; width: 1438px;"></p> +<p><img alt="Affichage de la fenêtre principale avec les devtools ouverts" src="DSC02620.png"></p> <p>Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :</p> @@ -38,27 +36,27 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs <ul> <li><strong>Internet Explorer. </strong><em>F12 </em></li> - <li><strong>Mac OS X. </strong><em><span class="Unicode">⌘ + ⌥ + I </span></em></li> + <li><strong>Mac OS X. </strong><em>⌘ + ⌥ + I </em></li> </ul> </li> - <li><span class="Unicode"><em><strong>Via les menus. </strong></em></span> + <li><em><strong>Via les menus. </strong></em> <ul> - <li><strong>Firefox. </strong>Menu <span class="Unicode"><em><span class="Unicode">➤ </span></em><em><span class="Unicode">Développement ➤ Outils de développement </span></em><span class="Unicode">ou <em>Outils</em></span><em> ➤</em></span><em> Développement Web ➤ Outils de développement</em></li> - <li><strong>Chrome.</strong> <em>Affichage<span class="Unicode"> ➤</span> Développement ➤ Outils de développement</em></li> - <li><strong>Safari.</strong> <em>Développement<span class="Unicode"> ➤</span> Afficher l'inspecteur web.</em> Si vous ne pouvez pas voir le menu <em>Développement</em>, aller sous <em>Safari<span class="Unicode"> ➤</span> Préférences ➤ Avancé</em> et vérifiez que l'option <em>Afficher le menu de développement</em> est bien coché. </li> - <li><strong>Opera</strong>. <em><span class="Unicode">Développement ➤</span> Inspecteur web</em></li> + <li><strong>Firefox. </strong>Menu <em>➤ </em><em>Développement ➤ Outils de développement </em>ou <em>Outils</em><em> ➤</em><em> Développement Web ➤ Outils de développement</em></li> + <li><strong>Chrome.</strong> <em>Affichage ➤ Développement ➤ Outils de développement</em></li> + <li><strong>Safari.</strong> <em>Développement ➤ Afficher l'inspecteur web.</em> Si vous ne pouvez pas voir le menu <em>Développement</em>, aller sous <em>Safari ➤ Préférences ➤ Avancé</em> et vérifiez que l'option <em>Afficher le menu de développement</em> est bien coché. </li> + <li><strong>Opera</strong>. <em>Développement ➤ Inspecteur web</em></li> </ul> </li> <li><strong><em>Via un menu contextuel.</em></strong> Cliquez-droit sur un élément de la page web (ou ctrl+clic sur Mac) et sélectionnez <em>Examiner l'élément</em> dans le menu qui apparait (<em>Bonus : </em>cette méthode ouvrira l'inspecteur et sélectionnera directement l'élément en question !).</li> </ul> -<p><img alt="Menu contextuel suite au clic-droit" src="https://mdn.mozillademos.org/files/11505/devtools.png" style="display: block; height: 264px; margin: 0px auto; width: 350px;"></p> +<p><img alt="Menu contextuel suite au clic-droit" src="devtools.png"></p> <h2 id="L'inspecteur_explorateur_du_DOM_et_éditeur_CSS">L'inspecteur : explorateur du DOM et éditeur CSS</h2> <p>Lorsqu'ils s'ouvrent, les outils de développement s'affichent comme illustré dans la capture d'écran ci-après. Cet outil permet de voir le HTML présent sur la page au moment où celle-ci est affiché, de façon dynamique. Il permet aussi de voir quelles règles CSS sont appliquées pour chaque élément de la page. Grâce à cet outil, on peut modifier le HTML et le CSS de façon instantanée et voir les changements appliqués immédiatement à la page affichée dans le navigateur.</p> -<p><img alt="Affichage de la fenêtre principale avec les devtools ouverts" src="https://mdn.mozillademos.org/files/11517/DSC02620.png" style="display: block; height: 727px; margin: 0px auto; width: 800px;"></p> +<p><img alt="Affichage de la fenêtre principale avec les devtools ouverts" src="DSC02620.png"></p> <p>Si vous n'arrivez pas sur l'inspecteur :</p> @@ -72,7 +70,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs <p>Pour commencer, cliquez-droit sur un élément HTML dans l'inspecteur du DOM et regardez le menu contextuel qui s'affiche. Les options du menu qui apparaît peuvent varier d'un navigateur à un autre mais les options les plus importantes s'y trouvent toujours :</p> -<p><img alt="Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM" src="https://mdn.mozillademos.org/files/11519/menu_contextuel.png" style="display: block; height: 284px; margin: 0px auto; width: 244px;"></p> +<p><img alt="Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM" src="menu_contextuel.png"></p> <ul> <li><strong>Supprimer le nœud</strong> (parfois <em>Supprimer l'élément</em>) : supprime l'élément sélectionné du document.</li> @@ -88,7 +86,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs <p>Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9631/css-viewer-2.png" style="border: 1px solid black; display: block; height: 218px; margin: 0px auto; width: 326px;"></p> +<p><img alt="" src="css-viewer-2.png"></p> <p>Ces fonctionnalités sont plutôt pratiques :</p> @@ -124,7 +122,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs <p>La console JavaScript est un outil formidable pour déboguer du code JavaScript qui ne fonctionne pas comme on le souhaite. Elle permet d'exécuter des lignes de JavaScript sur la page qui est actuellement chargée dans le navigateur et de rapporter les erreurs rencontrées lorsque le navigateur souhaite exécuter le code. Pour accéder à la console dans n'importe quel navigateur, il suffit de cliquer/appuyer sur l'onglet Console (sous Internet Explorer, appuyez sur <em>Ctrl + 2</em>.) Cela affichera une fenêtre qui ressemblera à :</p> -<p><img alt="Console JavaScript" src="https://mdn.mozillademos.org/files/11521/console.png" style="border: 1px solid black; display: block; height: 319px; margin: 0px auto; width: 1433px;"></p> +<p><img alt="Console JavaScript" src="console.png"></p> <p>Pour voir comment la console se comporte, essayez de saisir les fragments de code suivants dans la console (un par un), en appuyant sur Entrée après chaque :</p> diff --git a/files/fr/learn/common_questions/what_are_hyperlinks/index.html b/files/fr/learn/common_questions/what_are_hyperlinks/index.html index 4c4c1b1658..584fc6b805 100644 --- a/files/fr/learn/common_questions/what_are_hyperlinks/index.html +++ b/files/fr/learn/common_questions/what_are_hyperlinks/index.html @@ -9,15 +9,13 @@ tags: translation_of: Learn/Common_questions/What_are_hyperlinks original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web --- -<div class="summary"> <p>Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Vous devriez, au préalable, comprendre <a href="/en-US/Learn/How_the_Internet_works">comment Internet fonctionne</a> et distinguer<a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche"> une page web, un site web, un serveur web et un moteur de recherche</a>.</td> + <td>Vous devriez, au préalable, comprendre <a href="/fr/Learn/How_the_Internet_works">comment Internet fonctionne</a> et distinguer<a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche"> une page web, un site web, un serveur web et un moteur de recherche</a>.</td> </tr> <tr> <th scope="row">Objectifs :</th> @@ -40,13 +38,13 @@ original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web <p>Par défaut, les liens apparaissent en bleu et en souligné. Cela permet de faire ressortir le lien du texte environnant. Pour activer le lien, il suffit de cliquer dessus ou de le toucher. Si vous utilisez un clavier, utilisez la touche tabulation jusqu'à ce que le lien soit sélectionné puis appuyez sur la touche Entrée.</p> -<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p> +<p><img alt="Example of a basic display and effect of a link in a web page" src="link-1.png"></p> <p>Les liens sont la clef de voute du Web, ils ont pu le rendre utile et prospère. Dans la suite de cet article, nous discutons des différents types de lien et de leur importance en conception web.</p> <h2 id="Pédagogie_active">Pédagogie active</h2> -<p><em>Cette section a besoin d'être enrichie, <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p> +<p><em>Cette section a besoin d'être enrichie, <a href="/fr/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p> <h2 id="Aller_plus_loin">Aller plus loin</h2> @@ -71,7 +69,7 @@ original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web <p>La plupart des liens lient deux pages différentes. <strong>Les ancres</strong> permettent d'accéder à une autre section du même document. Lorsque vous suivez un lien qui pointe vers une ancre, votre navigateur se déplace sur une autre partie du document courant plutôt que d'en charger un nouveau. Les ancres seront créées et utilisées de la même façon que les liens.</p> -<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p> +<p><img alt="Example of a basic display and effect of an anchor in a web page" src="link-2.png"></p> <h3 id="Les_liens_et_les_moteurs_de_recherche">Les liens et les moteurs de recherche</h3> diff --git a/files/fr/learn/common_questions/what_is_a_domain_name/index.html b/files/fr/learn/common_questions/what_is_a_domain_name/index.html index 8a97478c80..16bfb9f969 100644 --- a/files/fr/learn/common_questions/what_is_a_domain_name/index.html +++ b/files/fr/learn/common_questions/what_is_a_domain_name/index.html @@ -10,15 +10,13 @@ tags: translation_of: Learn/Common_questions/What_is_a_domain_name original_slug: Apprendre/Comprendre_noms_de_domaine --- -<div class="summary"> <p>Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Pour commencer, vous devez comprendre <a href="/fr/Apprendre/Fonctionnement_Internet">comment Internet fonctionne</a> et ce que sont les <a href="/en-US/Learn/Understanding_URLs">URL</a>.</td> + <td>Pour commencer, vous devez comprendre <a href="/fr/Apprendre/Fonctionnement_Internet">comment Internet fonctionne</a> et ce que sont les <a href="/fr/Learn/Understanding_URLs">URL</a>.</td> </tr> <tr> <th scope="row">Objectif :</th> @@ -27,13 +25,13 @@ original_slug: Apprendre/Comprendre_noms_de_domaine </tbody> </table> -<p><span class="seoSummary">Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur Internet.</span></p> +<p>Les noms de domaine jouent un rôle clé dans l'infrastructure d'Internet. Ils fournissent des adresses, humainement compréhensibles pour retrouver des serveurs web connectés sur Internet.</p> <p>Tout ordinateur relié à Internet peut être contacté via une adresse {{Glossary("IP")}} publique. En IPv4, cette adresse est constituée de 32 bits, souvent exprimés avec quatre groupes de chiffes, compris entre 0 et 225, séparés par des points (par exemple <code>173.194.121.32</code>). Avec IPv6, on a 128 bits, soit huit groupes de quatre chiffres hexadécimaux séparés par deux points (par exemple <code>2001:0db8:85a3:0042:1000:8a2e:0370:7334</code>). Les ordinateurs n'ont aucun problème pour mémoriser ces adresses mais ça peut être difficile pour quelqu'un de faire le rapprochement entre un site web/service et cette adresse. De plus, le site peut « déménager » sur un autre ordinateur, l'ordinateur peut changer d'adresse... Dans ces cas, l'adresse correspondante à un site sera modifiée au cours du temps : il faudra alors utiliser la nouvelle adresse pour l'atteindre. Afin de résoudre ces problèmes (mémorisation et stabilité), on utilise des adresses compréhensibles appelée noms de domaine.</p> <h2 id="Pédagogie_active">Pédagogie active</h2> -<p><em>Ce contenu a besoin d'être enrichi, <a href="/en-US/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p> +<p><em>Ce contenu a besoin d'être enrichi, <a href="/fr/docs/MDN/Getting_started">n'hésitez pas à contribuer !</a></em></p> <ul> <li><a href="http://www.afnic.fr/fr/votre-nom-de-domaine/qu-est-ce-qu-un-nom-de-domaine/">Qu'est-ce qu'un nom de domaine</a> sur le site de l'AFNIC</li> @@ -46,7 +44,7 @@ original_slug: Apprendre/Comprendre_noms_de_domaine <p>Un nom de domaine est composé de plusieurs parties, séparées par des points. Ces différents composants sont lus <strong>de droite à gauche</strong> :</p> -<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11241/structure_fr.png" style="height: 76px; width: 252px;"></p> +<p><img alt="Anatomy of the MDN domain name" src="structure_fr.png"></p> <p>Chacune de ces parties fournit des informations sur le nom de domaine dans son ensemble.</p> @@ -146,7 +144,7 @@ Registrant Phone:+1.6509030800 <li>Une fois que l'ordinateur connaît l'adresse IP demandée, le navigateur peut commencer à échanger du contenu avec le serveur web.</li> </ol> -<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p> +<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="2014-10-dns-request2.png"></p> <div class="note"> <p><strong>Note :</strong> Si c'est la première fois que quelqu'un demande l'adresse IP pour mozilla.org au serveur DNS, celui-ci ne la connaîtra pas. Il demandera alors au serveur faisant autorité qui possède l'information. Une fois l'adresse connue, il la transmettra à l'ordinateur.</p> diff --git a/files/fr/learn/common_questions/what_is_a_url/index.html b/files/fr/learn/common_questions/what_is_a_url/index.html index e3743de8e5..7f3cdf0877 100644 --- a/files/fr/learn/common_questions/what_is_a_url/index.html +++ b/files/fr/learn/common_questions/what_is_a_url/index.html @@ -10,11 +10,9 @@ tags: translation_of: Learn/Common_questions/What_is_a_URL original_slug: Apprendre/Comprendre_les_URL --- -<div class="summary"> <p>Cet article aborde les <em>Uniform Resource Locators</em> (URL) en expliquant leur rôle et leur structure.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -27,7 +25,7 @@ original_slug: Apprendre/Comprendre_les_URL </tbody> </table> -<p><span class="seoSummary">Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les <strong><dfn>URL</dfn></strong> sont une autre pierre angulaire du Web. Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.</span></p> +<p>Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les <strong><dfn>URL</dfn></strong> sont une autre pierre angulaire du Web. Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web.</p> <p><strong>URL</strong> signifie <em>Uniform Resource Locator</em> (ou, en français, « localisateur uniforme de ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la ressource et l'URL associée.</p> @@ -52,17 +50,17 @@ https://developer.mozilla.org/fr/search?q=URL</pre> <pre>http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur2#QuelquePartDansLeDocument</pre> <dl> - <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/11679/protocole_1.png"></dt> + <dt><img alt="Protocol" src="protocole_1.png"></dt> <dd><code>http://</code> correspond au protocole. Ce fragment indique au navigateur le protocole qui doit être utilisé pour récupérer le contenu. Généralement, ce protocole sera HTTP ou sa version sécurisée : HTTPS. Le « Web » fonctionne autour de ces deux protocoles mais le navigateur peut parfois gérer d'autres protocoles comme <code>mailto:</code> (qui permet d'ouvrir un client de messagerie électronique) ou <code>ftp:</code> qui permet de transférer des fichiers. Ne soyez pas surpris donc si vous rencontrez ces autres protocoles.</dd> - <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/11681/nom_de_domaine2.png" style="height: 204px; width: 380px;"></dt> + <dt><img alt="Domaine Name" src="nom_de_domaine2.png"></dt> <dd><code>www.exemple.com</code> correspond au nom de domaine. Il indique le serveur web auquel le navigateur s'adresse pour échanger le contenu. À la place du nom de domaine, on peut utiliser une {{Glossary("adresse IP")}}, ce qui sera moins pratique (et qui est donc moins utilisé sur le Web).</dd> - <dt><img alt="Port" src="https://mdn.mozillademos.org/files/11683/port_3.png"></dt> + <dt><img alt="Port" src="port_3.png"></dt> <dd><code>:80</code> correspond au port utilisé sur le serveur web. Il indique la « porte » technique à utiliser pour accéder aux ressources du serveur. Généralement, ce fragment est absent car le navigateur utilise les ports standards associés aux protocoles (80 pour HTTP, 443 pour HTTPS). Si le port utilisé par le serveur n'est pas celui par défaut, il faudra l'indiquer.</dd> - <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/11685/chemin_4.png"></dt> + <dt><img alt="Path to the file" src="chemin_4.png"></dt> <dd><code>/chemin/vers/monfichier.html</code> est le chemin, sur le serveur web, vers la ressource. Aux débuts du Web, ce chemin correspondait souvent à un chemin « physique » existant sur le serveur. De nos jours, ce chemin n'est qu'une abstraction qui est gérée par le serveur web, il ne correspond plus à une réalité « physique ».</dd> - <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/11693/parametres_5.png"></dt> + <dt><img alt="Parameters" src="parametres_5.png"></dt> <dd><code>?clé1=valeur1&clé2=valeur2</code> sont des paramètres supplémentaires fournis au serveur web. Ces paramètres sont construits sous la forme d'une liste de paires de clé/valeur dont chaque élément est séparé par une esperluette (&). Le serveur web pourra utiliser ces paramètres pour effectuer des actions supplémentaires avant d'envoyer la ressource. Chaque serveur web possède ses propres règles quant aux paramètres. Afin de les connaître, le mieux est de demander au propriétaire du serveur.</dd> - <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/11695/ancre_6.png"></dt> + <dt><img alt="Anchor" src="ancre_6.png"></dt> <dd><code>#QuelquePartDansLeDocument</code> correspond à une ancre, celle-ci désigne un endroit donné de la ressource. Une ancre représente, en quelque sorte, un marque-page à l'intérieur de la ressource. Ajouter une ancre à une URL permet au navigateur d'afficher la ressource à l'endroit de ce marque page. Pour un document HTML, par exemple, le navigateur défilera la page jusqu'au niveau de l'ancre. Pour un document audio ou vidéo, le navigateur ira se placer à l'instant représenté par l'ancre. On notera également que la partie de l'URL située après le # n'est jamais envoyée au serveur avec la requête.</dd> </dl> @@ -101,19 +99,17 @@ https://developer.mozilla.org/fr/search?q=URL</pre> <dl> <dt>URL complète</dt> - <dd> + <dd><p>Exemple :</p> <pre>https://developer.mozilla.org/fr/docs/Apprendre</pre> </dd> <dt>Protocole implicite</dt> - <dd> + <dd><p>Exemple :</p> <pre>//developer.mozilla.org/fr/docs/Apprendre</pre> - <p>Dans ce cas, le navigateur saura que l'URL utilise le même protocole que celui utilisé pour charger le document qui contient cette URL.</p> </dd> <dt>Nom de domaine implicite</dt> - <dd> + <dd><p>Exemple :</p> <pre>/fr/docs/Apprendre</pre> - <p>Voici le cas le plus fréquent d'une URL absolue dans un document HTML. Le navigateur utilisera alors le même protocole et le même nom de domaine que ceux utilisés pour charger le document qui contient l'URL.</p> <div class="note"> @@ -128,12 +124,12 @@ https://developer.mozilla.org/fr/search?q=URL</pre> <dl> <dt>Sous-ressources</dt> - <dd> + <dd><p>Exemple :</p> <pre>Compétences/Infrastructure/Comprendre_les_URL </pre> L'URL ne commence pas pas <code>/</code>, le navigateur essaiera de trouver le document visé dans un sous-répertoire de la ressource actuelle. Dans cet exemple, l'URL absolue correspondante du document auquel on souhaite accéder est : <code>https://developer.mozilla.org/fr/docs/Apprendre/Compétences/Infrastructure/Comprendre_les_URL</code></dd> <dt>Remonter dans l'arborescence des dossiers</dt> - <dd> + <dd><p>Exemple :</p> <pre>../CSS/display</pre> <p>Dans ce cas, on utilise la convention, héritée du monde UNIX : <code>../</code> indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici <code>https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display</code>, qui peut être simplifiée en : <code>https://developer.mozilla.org/fr/docs/CSS/display</code></p> diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.html b/files/fr/learn/common_questions/what_is_a_web_server/index.html index 2dbf668646..06cd177779 100644 --- a/files/fr/learn/common_questions/what_is_a_web_server/index.html +++ b/files/fr/learn/common_questions/what_is_a_web_server/index.html @@ -8,11 +8,9 @@ tags: translation_of: Learn/Common_questions/What_is_a_web_server original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web --- -<div class="summary"> <p>Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.</p> -</div> -<table class="learn-box standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -34,7 +32,7 @@ original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web <p>Au niveau le plus simple, à chaque fois qu'un navigateur a besoin d'un fichier hébergé sur un serveur web, le navigateur demande (on dit qu'il envoie une requête) le fichier via HTTP. Quand la requête atteint le bon serveur web (<em>matériel</em>), le serveur HTTP (<em>logiciel</em>) renvoie le document demandé, également grâce à HTTP.</p> -<p><img alt="Basic representation of a client/server connection through HTTP" src="https://mdn.mozillademos.org/files/11561/web-server.svg"></p> +<p><img alt="Basic representation of a client/server connection through HTTP" src="web-server.svg"></p> <p>Pour publier un site web, vous aurez besoin d'un serveur web <strong>statique</strong> ou <strong>dynamique</strong>.</p> @@ -98,7 +96,7 @@ original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web <li>Si le fichier n'existe pas ou que le traitement est impossible, le serveur web renvoie un message d'erreur au navigateur. Le message d'erreur le plus fréquemment rencontré est {{HTTPStatus("404", "404 Page non trouvée")}} (cette erreur étant plutôt fréquente, certains ont même personnalisé et adapté <a href="http://www.404notfound.fr/" rel="external">les pages d'erreurs 404</a> de leurs sites).</li> </ol> -<p><img alt="Une page d'erreur HTTP, en l'occurrence la page 404 de MDN" src="https://mdn.mozillademos.org/files/11563/Capture.PNG" style="height: 695px; width: 1623px;"></p> +<p><img alt="Une page d'erreur HTTP, en l'occurrence la page 404 de MDN" src="Capture.PNG"></p> <h3 id="Contenu_statique_et_contenu_dynamique">Contenu statique et contenu dynamique</h3> diff --git a/files/fr/learn/common_questions/what_is_accessibility/index.html b/files/fr/learn/common_questions/what_is_accessibility/index.html index a8b667f8eb..60991cfd2b 100644 --- a/files/fr/learn/common_questions/what_is_accessibility/index.html +++ b/files/fr/learn/common_questions/what_is_accessibility/index.html @@ -10,11 +10,9 @@ tags: translation_of: Learn/Common_questions/What_is_accessibility original_slug: Apprendre/Accessibilité --- -<div class="summary"> <p>Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.</p> -</div> -<table class="learn-box nostripe standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -49,8 +47,7 @@ original_slug: Apprendre/Accessibilité <dl> <dt>Déficience auditive</dt> - <dd>Comment une personne déficiente auditivement peut-elle profiter de la vidéo ? Il est nécessaire de fournir des sous-titres, voire mieux, une transcription écrite complète.</dd> - <dd>Assurez-vous également que les personnes puissent ajuster le volume à leur convenance.</dd> + <dd>Comment une personne déficiente auditivement peut-elle profiter de la vidéo ? Il est nécessaire de fournir des sous-titres, voire mieux, une transcription écrite complète. Assurez-vous également que les personnes puissent ajuster le volume à leur convenance.</dd> <dt>Déficience visuelle</dt> <dd>Ici aussi, il est préférable de fournir une transcription que l'utilisateur pourra consulter sans lancer la vidéo, ainsi qu'une audio-description décrivant, en voix off, ce qui se passe dans la vidéo.</dd> <dt>Mise en pause</dt> diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.html b/files/fr/learn/common_questions/what_software_do_i_need/index.html index 8a1a9271f1..61d1cefa8f 100644 --- a/files/fr/learn/common_questions/what_software_do_i_need/index.html +++ b/files/fr/learn/common_questions/what_software_do_i_need/index.html @@ -9,11 +9,9 @@ tags: translation_of: Learn/Common_questions/What_software_do_I_need original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web --- -<div class="summary"> <p>Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.</p> -</div> -<table class="learn-box nostripe standard-table"> +<table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> @@ -127,17 +125,17 @@ original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_si <p>Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé (ici Notepad++) :</p> -<p><img alt="Screenshot of Notepad++." src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="height: 311px; width: 450px;"></p> +<p><img alt="Screenshot of Notepad++." src="NotepadPlusPlus.png"></p> <h3 id="Transférer_des_fichiers_vers_un_serveur_web">Transférer des fichiers vers un serveur web</h3> -<p>Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (<em>uploader</em>) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article<a class="new" href="/en-US/docs/Learn/How_much_does_it_cost"> combien ça coûte de publier quelque chose sur le Web ?</a>). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour <em>File Transfer Protocol</em> ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a> et <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages">Git/Github</a>.</p> +<p>Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (<em>uploader</em>) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article<a href="/fr/docs/Learn/How_much_does_it_cost"> combien ça coûte de publier quelque chose sur le Web ?</a>). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour <em>File Transfer Protocol</em> ou protocole de transfert de fichiers), souvent en donnant une URL SFTP, un nom d'utilisateur, un mot de passe et d'autres informations nécessaires à la connexion au serveur. Sachez toutefois que le FTP est une technique vieillissante et que de nouveaux systèmes commencent à devenir populaires, comme <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a> et <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages">Git/Github</a>.</p> -<div class="blockIndicator note"> -<p>FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (<em>Secure</em> FTP) ou via RSync avec SSH.</p> +<div class="note"> +<p><strong>Note :</strong> FTP est par nature non sécurisé. Vous devez toujours vous assurer que votre fournisseur d'hébergement vous autorise à vous connecter de manière sécurisée, c'est-à-dire via SFTP (<em>Secure</em> FTP) ou via RSync avec SSH.</p> </div> -<p>Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">dans un article à part</a>. Voyons tout de même une liste de clients FTP basiques :</p> +<p>Le téléversement des fichiers vers un serveur web est une étape importante dans la publication d'un site web et nous la décrivons beaucoup plus en détails <a href="/fr/docs/Learn/Upload_files_to_a_web_server">dans un article à part</a>. Voyons tout de même une liste de clients FTP basiques :</p> <table class="standard-table"> <thead> @@ -184,7 +182,7 @@ original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_si <h2 id="Prochaines_étapes">Prochaines étapes</h2> <ul> - <li>Certains de ces logiciels sont libres et/ou gratuits, d'autres ne le sont pas. <a class="new" href="/en-US/docs/Learn/How_much_does_it_cost">En savoir plus sur le coût d'un site web.</a></li> + <li>Certains de ces logiciels sont libres et/ou gratuits, d'autres ne le sont pas. <a href="/fr/docs/Learn/How_much_does_it_cost">En savoir plus sur le coût d'un site web.</a></li> <li>Si vous souhaitez en apprendre plus sur les éditeurs de texte et choisir celui qui sera le plus adapté, consultez notre article sur <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">comment choisir, installer et paramétrer son éditeur de texte</a>.</li> <li>Si vous vous demandez comment publier votre site web sur le Web, jetez un coup d'œil à <a href="/fr/docs/Apprendre/Upload_files_to_a_web_server">« Comment transférer des fichiers vers un serveur web »</a>.</li> </ul> |