From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: Prepare Learning Area section for Markdown conversion (#2738) * Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area --- .../available_text_editors/index.html | 4 +- .../index.html | 26 +++++------ .../common_questions/common_web_layouts/index.html | 21 +++++---- .../design_for_all_types_of_users/index.html | 19 ++++---- .../how_does_the_internet_work/index.html | 22 +++++---- .../how_much_does_it_cost/index.html | 6 +-- files/fr/learn/common_questions/index.html | 52 +++++++++++----------- .../index.html | 4 +- .../set_up_a_local_testing_server/index.html | 22 +++++---- .../thinking_before_coding/index.html | 24 ++++------ .../upload_files_to_a_web_server/index.html | 28 ++++++------ .../common_questions/using_github_pages/index.html | 16 +++---- .../what_are_browser_developer_tools/index.html | 26 +++++------ .../what_are_hyperlinks/index.html | 12 +++-- .../what_is_a_domain_name/index.html | 14 +++--- .../common_questions/what_is_a_url/index.html | 30 ++++++------- .../what_is_a_web_server/index.html | 8 ++-- .../what_is_accessibility/index.html | 7 +-- .../what_software_do_i_need/index.html | 16 +++---- 19 files changed, 160 insertions(+), 197 deletions(-) (limited to 'files/fr/learn/common_questions') 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 ---
{{IncludeSubnav("/fr/Apprendre")}}
-

Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.

-
- +
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 --- -

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.

-
-
Prérequis :
+
@@ -29,7 +27,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web
Prérequis :
-

Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?

+

Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?

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é.

@@ -49,11 +47,11 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web

Allons sur notre site web : http://demozilla.hebergeurexemple.net/. L'image n'apparaît pas alors qu'il y aurait du y en avoir une !

-

Oops, the ‘unicorn’ image is missing

+

Oops, the ‘unicorn’ image is missing

Ouvrons les outils de développement et plus particulièrement ceux qui portent sur le réseau (Outils ➤ Développement Web ➤ Réseau) puis rechargeons la page :

-

The image has a 404 error

+

The image has a 404 error

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.

@@ -62,7 +60,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web

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 :

-
200 : OK
+
 200 : OK
La ressource demandée a bien été transmise.
301 : Déplacée de façon permanente (Moved permanently)
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.
@@ -87,15 +85,15 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web

Où est donc le problème ?

-

Le list of images in our project

+

Le list of images in our project

À 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 licornes.png plutôt que licorne.png. En corrigeant cette erreur avec l'attribut src

-

Deleting the ‘s’

+

Deleting the ‘s’

-

Puis en sauvegardant et en envoyant le fichier vers le serveur, on peut ensuite recharger la page dans le navigateur :

+

Puis en sauvegardant et en envoyant le fichier vers le serveur, on peut ensuite recharger la page dans le navigateur :

-

The image loads corectly in the browser

+

The image loads corectly in the browser

Et voilà, revenons sur les status {{Glossary("HTTP")}} :

@@ -114,7 +112,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web

Dans la capture suivante, nous avons voulu accéder à http://demozilla.hebergeurexemple.net/ mais nous avons oublié un « m » :

-

Address unreachable

+

Address unreachable

L'adresse est introuvable… en effet.

@@ -128,7 +126,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web

Pour voir ces erreurs, ouvrez la console (Outils ➤ Développement web ➤ Console web) and puis rechargez la page:

-

A Javascript error is shown in the Console

+

A Javascript error is shown in the Console

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 une autre série d'articles).

@@ -140,7 +138,7 @@ original_slug: Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web

Est-ce que la page charge suffisamment vite ? Pour le savoir, vous pouvez utiliser des outils comme webpagetest.org ou des modules complémentaires comme YSlow qui peuvent fournir des indications intéressantes :

-

Yslow diagnostics

+

Yslow diagnostics

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.

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 ---
{{IncludeSubnav("/fr/Apprendre")}}
-
+

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.

-
- +
@@ -53,19 +52,19 @@ original_slug: Apprendre/Concevoir_page_web

Dispostion à une colonne : particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.

-

Example of a 1 column layout: Main on top and asides stacked beneath it.

+

Example of a 1 column layout: Main on top and asides stacked beneath it.

Disposition à deux colonnes : souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.

-

 Example of a basic 2 column layout: One aside on the left column, and main on the right column. Example of a basic 2 column layout: One aside on the right column, and main on the left column.

+

 Example of a basic 2 column layout: One aside on the left column, and main on the right column. Example of a basic 2 column layout: One aside on the right column, and main on the left column.

Disposition à trois colonnes : 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).

-

Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column. Another example of a 3 column layout: Aside side by side on the left, Main on the right column. Another example of a 3 column layout: Aside side by side on the right, Main on the left column.

+

Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column. Another example of a 3 column layout: Aside side by side on the left, Main on the right column. Another example of a 3 column layout: Aside side by side on the right, Main on the left column.

Il est aussi possible de mélanger tous ces modèles classiques :

-

Example of mixed layout: Main on top and asides beneath it side by side. Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main. 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.…

+

Example of mixed layout: Main on top and asides beneath it side by side. Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column Example of a mixed layout: one aside on the left column and main in the right column with a aside beneath main. 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.…

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.

@@ -83,7 +82,7 @@ original_slug: Apprendre/Concevoir_page_web

Invision : un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page.

-

Example of a 1 column layout in the wild        1 column layout with header, main content, a stack of aside contents and a footer

+

Example of a 1 column layout in the wild        1 column layout with header, main content, a stack of aside contents and a footer

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.

@@ -91,7 +90,7 @@ original_slug: Apprendre/Concevoir_page_web

Abduzeedo, 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).

-

Example of a 2 column layout for a blog        A 2 column layout with the main content on the left column

+

Example of a 2 column layout for a blog        A 2 column layout with the main content on the left column

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 directement relié.

@@ -99,7 +98,7 @@ original_slug: Apprendre/Concevoir_page_web

MICA. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes…

-

Example of a false 3 columns layout        It looks like a 3 columns layout but actually, the aside content is floating around.

+

Example of a false 3 columns layout        It looks like a 3 columns layout but actually, the aside content is floating around.

…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (float en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}.

@@ -111,7 +110,7 @@ original_slug: Apprendre/Concevoir_page_web

L'Opéra de Paris.

-

An example of a tricky layout.        This is a 2 column layout but the header is overlaping the main content.

+

An example of a tricky layout.        This is a 2 column layout but the header is overlaping the main content.

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).

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 ---
{{IncludeSubnav("/fr/Apprendre")}}
-
+

Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.

-
-
Prérequis :
+
@@ -32,7 +31,7 @@ original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs

Pédagogie active

-

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

+

Il n'y a, pour le moment, pas de matériau pour la pédagogie active. Cependant, vous pouvez contribuer.

Aller plus loin

@@ -45,12 +44,12 @@ original_slug: Apprendre/Concevoir_site_tous_types_utilisateurs

Pour contrôler le contraste, vous pouvez télécharger et installer l'analyseur de contraste du Groupe Paciello.

-

Note : Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : Color Contrast Checker. 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.

+

Note : Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : Color Contrast Checker. 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.

Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :

-

Colour contrast on this page: excellent!

+

Colour contrast on this page: excellent!

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..

@@ -147,7 +146,7 @@ span.subheading { font-size:1rem; }

C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'Internet Explorer 9 et dans n'importe quel autre navigateur récent, n'hésitez pas à l'utiliser.

-

Note : Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.

+

Note : Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police.

Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ?

@@ -162,7 +161,7 @@ span.subheading { font-size:1rem; }
-

Note : 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 ems, quitte à faire un peu de mathématique en chemin.

+

Note : 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 ems, quitte à faire un peu de mathématique en chemin.

Largeur de ligne

@@ -220,7 +219,7 @@ span.subheading { font-size:1rem; }

Si l'image peut être décrite succintement, vous pouvez fournir un attribut alt 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 longdesc. 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.

-

Note : L'utilisation voire l'existence de longdesc ont toujours été débatues. Veuillez vous référer à la page du W3C' Image Description Extension (longdesc) pour une explication complète et des exemples détaillés.

+

Note : L'utilisation voire l'existence de longdesc ont toujours été débatues. Veuillez vous référer à la page du W3C' Image Description Extension (longdesc) pour une explication complète et des exemples détaillés.

Audio/Vidéo

@@ -245,4 +244,4 @@ span.subheading { font-size:1rem; }

Prochaines étapes

-

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 les bases de l'ergonomie ou UX (User Experience en anglais).

+

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 les bases de l'ergonomie ou UX (User Experience en anglais).

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 --- -

Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.

-
-
Prérequis :
+
@@ -44,38 +42,38 @@ original_slug: Apprendre/Fonctionnement_Internet

Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un câble Ethernet), soit sans fil (par exemple, via WiFi ou Bluetooth). Tous ces types de connexions sont possibles sur les ordinateurs modernes.

-

Note : À 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.

+

Note : À 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.

-

Two computers linked together

+

Two computers linked together

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!

-

Ten computers all together

+

Ten computers all together

Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle routeur. Ce routeur 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.

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.

-

Ten computers with a router

+

Ten computers with a router

Un réseau de réseaux

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 routeur ne pourrait suffire pour tant de connexions. Cependant, si vous avez lu attentivement, vous aurez constaté qu'un routeur n'est en réalité qu'un ordinateur. Serait-ce alors possible de lier deux routeurs ? Oui, absolument, et en voici le résultat!

-

Two routers linked together

+

Two routers linked together

En liant les ordinateurs à des routeurs, puis les routeurs entre eux, nous avons la capacité d'étendre le réseau indéfiniment.

-

Routers linked to routers

+

Routers linked to routers

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é modem. Ce modem convertit l'information de notre réseau en information décodable par l'infrastructure téléphonique et vice-versa.

-

A router linked to a modem

+

A router linked to a modem

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 routeurs 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).

-

Full Internet stack

+

Full Internet stack

Localiser un ordinateur

@@ -83,7 +81,7 @@ original_slug: Apprendre/Fonctionnement_Internet

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é nom de domaine, est souvent associé aux adresses IP. Par example, google.com est le nom de domaine associé à l'adresse IP 173.194.121.32. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet.

-

Show how a domain name can alias an IP address

+

Show how a domain name can alias an IP address

L'Internet et le web

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 --- -

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.

-
-
Prérequis :
+
@@ -154,7 +152,7 @@ original_slug: Apprendre/Publier_sur_le_Web_combien_ça_coûte

Prochaines étapes

-

Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de préparer un environnement de travail.

+

Maintenant que la question du coût est résolue, il est temps de commencer à concevoir ce site web et de préparer un environnement de travail.

Prérequis :
+
@@ -74,7 +74,7 @@ original_slug: Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche
-

Note : Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers PDF ou des images, mais le terme page web désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme document.

+

Note : Les navigateurs peuvent afficher d'autres types de documents tels que des fichiers PDF ou des images, mais le terme page web désigne spécifiquement des documents HTML. Si nous parlons d'un autre type de contenu, nous utiliserons le terme document.

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 :

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 --- -

Cet article explique comment configurer un serveur de test local simple sur votre machine, et les bases pour l'utiliser.

-
-
Prérequis :
+
- + @@ -44,7 +42,7 @@ original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local

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 :

@@ -70,12 +68,12 @@ original_slug: Apprendre/Common_questions/configurer_un_serveur_de_test_local

  • 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 :

    - 
    python -V
    + 
    python -V

  • Elle devrait retourner un numéro de version. Si c'est le cas, en utilisant la commande cd, placer votre répertoire de travail dans le dossier contenant l'exemple.

    - 
    #inclure le nom du dossier pour y s'y rendre,
+  
    #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 ..
    
  
  • 
   
    Entrer la commande pour démarrer le serveur dans ce dossier.
    
 
-  
    # Si la version de Python retournée est ultérieur à 3.X
+  
    # 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 SimpleHTTPServer
    
+python -m SimpleHTTPServer
    
  
    • 
  
  • 
   
    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 localhost:8000 dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter.
    
@@ -96,7 +94,7 @@ python -m SimpleHTTPServer
    • -

    Note : Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple python -m http.server 7800 (Python 3.x) ou python -m SimpleHTTPServer 7800 (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse localhost:7800.

    +

    Note : Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple python -m http.server 7800 (Python 3.x) ou python -m SimpleHTTPServer 7800 (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse localhost:7800.

    Faire fonctionner localement des langages serveur

    @@ -104,7 +102,7 @@ python -m SimpleHTTPServer

    Le module SimpleHTTPServer 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 :

      -
    • 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 Django Web Framework (Python). Flask est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'installer Python/PIP, puis Flask en utilisant pip3 install flask.  À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple python3 python-example.py, puis consulter localhost:5000 dans votre navigateur.
      • -
    • 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 Express Web Framework (Node.js/JavaScript).
      • +
    • 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 Django Web Framework (Python). Flask est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'installer Python/PIP, puis Flask en utilisant pip3 install flask.  À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple python3 python-example.py, puis consulter localhost:5000 dans votre navigateur.
      • +
    • 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 Express Web Framework (Node.js/JavaScript).
    • 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 MAMP (Mac and Windows) , AMPPS (Mac, Windows, Linux) and LAMP (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.
    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 ---
    {{IncludeSubnav("/fr/Apprendre")}}
    -

    Cette article présente l'étape primordiale de n'importe quel projet  définir ce qu'on souhaite accomplir avec.

    -
    -
    • Prérequis :Vous devez au préalable savoir comment Internet fonctionne et ce qu'est un serveur Web.Vous devez au préalable savoir comment Internet fonctionne et ce qu'est un serveur Web.
    Objectif:
    +
    @@ -43,7 +41,7 @@ original_slug: Apprendre/Commencez_votre_projet_web

    Pédagogie active

    -

    Il n'y a pas la pédagogie active disponible pour l'instant. S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !

    +

    Il n'y a pas la pédagogie active disponible pour l'instant. S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !

    Aller plus loin

    @@ -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.

    -

    Remarque  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 l'idéation, la planification et la gestion de projet.

    +

    Note : 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 l'idéation, la planification et la gestion de projet.

    Qu'est-ce que je veux accomplir exactement ?

    @@ -114,7 +112,7 @@ original_slug: Apprendre/Commencez_votre_projet_web - + - + - + - + - +
    Prérequis 
    Permettre aux gens d'écouter votre musiquePermettre aux gens d'écouter votre musique
    1. Enregistrer de la musique
      2. @@ -124,7 +122,7 @@ original_slug: Apprendre/Commencez_votre_projet_web
    Parler de votre musiqueParler de votre musique
    1. Écrire quelques articles pour lancer la discussion
      2. @@ -134,7 +132,7 @@ original_slug: Apprendre/Commencez_votre_projet_web
    Rencontrer d'autres musiciensRencontrer d'autres musiciens
    1. Permettre aux gens de vous contacter (e-mail ? Twitter ? Facebook ? Téléphone ? Adresse ?)
      2. @@ -143,23 +141,19 @@ original_slug: Apprendre/Commencez_votre_projet_web
    Vendre des goodiesVendre des goodies
    1. Créer les goodies
    2. Stocker les goodies
    3. Trouver un moyen de gérer l'expédition
      4. -
    4. -
      -
      Trouver un moyen de gérer le paiement
      -
      -
      5. +
    5. Trouver un moyen de gérer le paiement
    6. Faire un système sur votre site pour que les gens passe des commandes
    Enseigner la musique à travers des vidéosEnseigner la musique à travers des vidéos
    1. Enregistrer vos leçons vidéos
      2. 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 --- -

      Cet article illustre comment publier votre site en ligne grâce à des outils {{Glossary("FTP")}}. 

      -
      - +
      @@ -25,11 +23,11 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web
      Prérequis :
      -

      Maintenant que vous avez construit une page web, vous voulez peut être la mettre en ligne grâce à un serveur web. Dans cet article, nous verrons comment faire en utilisant {{Glossary("FTP")}}.

      +

      Maintenant que vous avez construit une page web, 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édagogie active

      -

      Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. Vous pouvez néanmoins contribuer.

      +

      Il n'y a, pour le moment, pas d'élément de pédagogie active pour cette section. Vous pouvez néanmoins contribuer.

      Aller plus loin

      @@ -38,19 +36,19 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web

      Il existe de nombreux clients FTP. Dans cette démonstration, nous utiliserons FireFTP. Celui-ci est simple à installer avec Firefox car c'est un module complémentaire.

      -

      Il existe de nombreuses autres options, voir les outils de publications : les clients FTP pour plus d'informations.

      +

      Note : Il existe de nombreuses autres options, voir les outils de publications : les clients FTP pour plus d'informations.

      Pour ouvrir FireFTP dans un nouvel onglet de Firefox, il existe deux méthodes :

        -
      1. Menu de Firefox ➤ Developer ➤ FireFTP
        2. +
      2. Menu de Firefox ➤ Developer ➤ FireFTP
      3. Outils ➤ Développement web ➤ FireFTP

      Vous devriez voir apparaître cette fenêtre :

      -

      FireFTP : the interface, not connected to a server

      +

      FireFTP : the interface, not connected to a server

      Se connecter

      @@ -77,7 +75,7 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web

      Tout d'abord, jetons un coup d'œil à http://demozilla.hebergeurexemple.net/ — pour le moment, comme vous pouvez le voir, il n'y a pas grand chose :

      -

      Our demozilla personal website, seen in a browser: it's empty

      +

      Our demozilla personal website, seen in a browser: it's empty

      Note : 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] ».

      @@ -85,13 +83,13 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web

      Pour connecter votre client FTP au serveur distant, cliquez sur le bouton « Créer un compte » de FireFTP, puis remplissez les informations telles qu'elles vous ont été fournies par votre hébergeur :

      -

      FireFTP: creating an account

      +

      FireFTP: creating an account

      Ici et là-bas : la vue locale et la vue distante

      Vous pouvez ensuite vous connecter sur ce nouveau compte :

      -

      The FTP interface, once logged

      +

      The FTP interface, once logged

      Examinons cet écran :

      @@ -105,19 +103,19 @@ original_slug: Apprendre/Transférer_des_fichiers_vers_un_serveur_web

      Comme nous l'avons vu plus tôt, notre hébergeur nous a indiqué que les fichiers devaient être stockés sous Public/htdocs pour être visible sur le Web. Déplaçons-nous donc dans ce dossier grâce au volet droit :

      -

      Changing to the htdocs folder on the remote server

      +

      Changing to the htdocs folder on the remote server

      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 :

      -

      The files show in the remote view: they have been pushed to the server

      +

      The files show in the remote view: they have been pushed to the server

      Est-ce que mes fichiers sont bien en ligne ?

      Jusqu'ici tout va bien, vérifions quand même en tapant http://demozilla.hebergeurexemple.net/ dans la barre d'URL du navigateur :

      -

      Here we go: our website is live!

      +

      Here we go: our website is live!

      -

      Et voilà ! Notre site est en ligne !

      +

      Et voilà ! Notre site est en ligne !

      D'autres méthodes pour transférer des fichiers

      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 --- -

      GitHub 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 Git. Par défaut, le système est open source, 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 gh-pages) qui sont une des fonctionnalités de GitHub.

      +

      GitHub 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 Git. Par défaut, le système est open source, 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 gh-pages) qui sont une des fonctionnalités de GitHub.

      Publier du contenu

      @@ -48,13 +48,13 @@ original_slug: Apprendre/Utiliser_les_pages_GitHub

      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 :

      -

      Interface en ligne de commande

      +

      Interface en ligne de commande

      -

      Note : Il existe également des interfaces graphiques pour Git 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.

      +

      Note : Il existe également des interfaces graphiques pour Git 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.

      -

      Chaque système d'exploitation possède sa propre interface en ligne de commande  :

      +

      Chaque système d'exploitation possède sa propre interface en ligne de commande  :

      • Windows : l'invite de commande. Celle-ci peut être lancée en utilisant la touche Windows et en tapant Invite de commande 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 \ pour indiquer un sous-répertoire alors que Linux et OS X utiliseront /).
        • @@ -70,9 +70,9 @@ original_slug: Apprendre/Utiliser_les_pages_GitHub
      • 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 New Repository (qui signifie « Créer un nouveau dépôt »).
      • Sur la page qui s'affiche, dans le champ « Repository name », entrez un nom pour votre dépôt. Vous pouvez par exemple saisir mon-premier-depot.
      • 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 :
        -
        • +
      • Ensuite, cliquez sur « Create repository » (pour créer le dépôt). Vous arrieverez alors sur la page suivante :
        -
        • +

    Envoyer vos fichiers vers GitHub

    @@ -80,7 +80,7 @@ original_slug: Apprendre/Utiliser_les_pages_GitHub
    1. Sur cette page, une section vous intéresse particulièrement : « …or push an existing repository from the command line » (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 à : - 
      git remote add origin https://github.com/chrisdavidmills/mon-premier-depot.git
      + 
      git remote add origin https://github.com/chrisdavidmills/mon-premier-depot.git
    2. 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. 
      git add --all
@@ -90,7 +90,7 @@ git commit -m 'ajout des fichiers au dépôt'
      git push -u origin master
    3. Votre code est publié sur GitHub. Pour avoir une page GitHub, vous devrez créer une branche gh-pages 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 « Branch: master » (GitHub indique que vous êtes sur la branche master de votre dépôt). Dans la liste qui s'affiche, saisissez le texte gh-pages puis cliquez sur Create branch: gh-pages (« 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 nom-utilisateur.github.io/nom-du-depot. Dans mon exemple, l'URL est donc https://chrisdavidmills.github.io/my-repository. La page qui est affichée à cette URL est la page index.html contenue dans le dépôt.
      -
      4. +
    4. Utilisez votre navigateur préféré pour visiter cette URL. Voici votre site ! Partagez le lien avec vos amis pour leur montrer :)
    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
    {{Previous("Apprendre/Commencer_avec_le_web")}}
    -

    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 « devtools »).

    -

    Note : Avant de poursuivre avec les exemples présentés ci-après, nous vous conseillons d'utiliser l'exemple construit dans la série d'articles Commencer avec le Web et d'ouvrir le site dans votre navigateur pour poursuivre avec les étapes suivantes.

    @@ -29,7 +27,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs

    Les devtools s'affichent généralement dans une sous-fenêtre du navigateur, de la façon suivante (cela peut varier légèrement) :

    -

    Affichage de la fenêtre principale avec les devtools ouverts

    +

    Affichage de la fenêtre principale avec les devtools ouverts

    Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes :

    @@ -38,27 +36,27 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs
    • Internet Explorer. F12
      • -
    • Mac OS X. ⌘ + ⌥ + I
      • +
    • Mac OS X. ⌘ + ⌥ + I
    -
  • Via les menus. +
  • Via les menus.
      -
    • Firefox. Menu ➤ Développement ➤ Outils de développement ou Outils ➤ Développement Web ➤ Outils de développement
      • -
    • Chrome. Affichage ➤ Développement ➤ Outils de développement
      • -
    • Safari. Développement ➤ Afficher l'inspecteur web. Si vous ne pouvez pas voir le menu Développement, aller sous Safari ➤ Préférences ➤ Avancé et vérifiez que l'option Afficher le menu de développement est bien coché. 
      • -
    • Opera. Développement ➤ Inspecteur web
      • +
    • Firefox. Menu ➤ Développement ➤ Outils de développement ou Outils ➤ Développement Web ➤ Outils de développement
      • +
    • Chrome. Affichage ➤ Développement ➤ Outils de développement
      • +
    • Safari. Développement ➤ Afficher l'inspecteur web. Si vous ne pouvez pas voir le menu Développement, aller sous Safari ➤ Préférences ➤ Avancé et vérifiez que l'option Afficher le menu de développement est bien coché. 
      • +
    • Opera. Développement ➤ Inspecteur web
  • Via un menu contextuel. Cliquez-droit sur un élément de la page web (ou ctrl+clic sur Mac) et sélectionnez Examiner l'élément dans le menu qui apparait (Bonus : cette méthode ouvrira l'inspecteur et sélectionnera directement l'élément en question !).
    • -

    Menu contextuel suite au clic-droit

    +

    Menu contextuel suite au clic-droit

    L'inspecteur : explorateur du DOM et éditeur CSS

    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.

    -

    Affichage de la fenêtre principale avec les devtools ouverts

    +

    Affichage de la fenêtre principale avec les devtools ouverts

    Si vous n'arrivez pas sur l'inspecteur :

    @@ -72,7 +70,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs

    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 :

    -

    Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM

    +

    Menu contextuel ouvert suite à un clic-droit sur un élément HTML dans l'explorateur du DOM

    • Supprimer le nœud (parfois Supprimer l'élément) : supprime l'élément sélectionné du document.
      • @@ -88,7 +86,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs

      Par défaut, l'éditeur CSS affiche les règles CSS qui s'appliquent à l'élément qui est sélectionné :

      -

      +

      Ces fonctionnalités sont plutôt pratiques :

      @@ -124,7 +122,7 @@ original_slug: Apprendre/Découvrir_outils_développement_navigateurs

      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 Ctrl + 2.) Cela affichera une fenêtre qui ressemblera à :

      -

      Console JavaScript

      +

      Console JavaScript

      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 :

      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 --- -

      Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.

      -
      - +
      - + @@ -40,13 +38,13 @@ original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web

      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.

      -

      Example of a basic display and effect of a link in a web page

      +

      Example of a basic display and effect of a link in a web page

      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édagogie active

      -

      Cette section a besoin d'être enrichie, n'hésitez pas à contribuer !

      +

      Cette section a besoin d'être enrichie, n'hésitez pas à contribuer !

      Aller plus loin

      @@ -71,7 +69,7 @@ original_slug: Apprendre/Le_fonctionnement_des_liens_sur_le_Web

      La plupart des liens lient deux pages différentes. Les ancres 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.

      -

      Example of a basic display and effect of an anchor in a web page

      +

      Example of a basic display and effect of an anchor in a web page

      Les liens et les moteurs de recherche

      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 --- -

      Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.

      -
      -
      Prérequis :Vous devriez, au préalable, comprendre comment Internet fonctionne et distinguer une page web, un site web, un serveur web et un moteur de recherche.Vous devriez, au préalable, comprendre comment Internet fonctionne et distinguer une page web, un site web, un serveur web et un moteur de recherche.
      Objectifs :
      +
      - + @@ -27,13 +25,13 @@ original_slug: Apprendre/Comprendre_noms_de_domaine
      Prérequis :Pour commencer, vous devez comprendre comment Internet fonctionne et ce que sont les URL.Pour commencer, vous devez comprendre comment Internet fonctionne et ce que sont les URL.
      Objectif :
      -

      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.

      +

      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.

      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 173.194.121.32). Avec IPv6, on a 128 bits, soit huit groupes de quatre chiffres hexadécimaux séparés par deux points (par exemple 2001:0db8:85a3:0042:1000:8a2e:0370:7334). 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édagogie active

      -

      Ce contenu a besoin d'être enrichi, n'hésitez pas à contribuer !

      +

      Ce contenu a besoin d'être enrichi, n'hésitez pas à contribuer !

      • Qu'est-ce qu'un nom de domaine sur le site de l'AFNIC
        • @@ -46,7 +44,7 @@ original_slug: Apprendre/Comprendre_noms_de_domaine

        Un nom de domaine est composé de plusieurs parties, séparées par des points. Ces différents composants sont lus de droite à gauche :

        -

        Anatomy of the MDN domain name

        +

        Anatomy of the MDN domain name

        Chacune de ces parties fournit des informations sur le nom de domaine dans son ensemble.

        @@ -146,7 +144,7 @@ Registrant Phone:+1.6509030800
      • Une fois que l'ordinateur connaît l'adresse IP demandée, le navigateur peut commencer à échanger du contenu avec le serveur web.
        • -

        Explanation of the steps needed to obtain the result to a DNS request

        +

        Explanation of the steps needed to obtain the result to a DNS request

        Note : 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.

        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 --- -

        Cet article aborde les Uniform Resource Locators (URL) en expliquant leur rôle et leur structure.

        -
        - +
        @@ -27,7 +25,7 @@ original_slug: Apprendre/Comprendre_les_URL
        Prérequis :
        -

        Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les URL 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.

        +

        Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les URL 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.

        URL signifie Uniform Resource Locator (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.

        @@ -52,17 +50,17 @@ https://developer.mozilla.org/fr/search?q=URL 
        http://www.exemple.com:80/chemin/vers/monfichier.html?clé1=valeur1&clé2=valeur2#QuelquePartDansLeDocument
        -
        Protocol
        +
        Protocol
        http:// 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 mailto: (qui permet d'ouvrir un client de messagerie électronique) ou ftp: qui permet de transférer des fichiers. Ne soyez pas surpris donc si vous rencontrez ces autres protocoles.
        -
        Domaine Name
        +
        Domaine Name
        www.exemple.com 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).
        -
        Port
        +
        Port
        :80 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.
        -
        Path to the file
        +
        Path to the file
        /chemin/vers/monfichier.html 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 ».
        -
        Parameters
        +
        Parameters
        ?clé1=valeur1&clé2=valeur2 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.
        -
        Anchor
        +
        Anchor
        #QuelquePartDansLeDocument 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.
        @@ -101,19 +99,17 @@ https://developer.mozilla.org/fr/search?q=URL
        URL complète
        -
        +

        Exemple :

        https://developer.mozilla.org/fr/docs/Apprendre
        Protocole implicite
        -
        +

        Exemple :

        //developer.mozilla.org/fr/docs/Apprendre
        -

        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.

        Nom de domaine implicite
        -
        +

        Exemple :

        /fr/docs/Apprendre
        -

        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.

        @@ -128,12 +124,12 @@ https://developer.mozilla.org/fr/search?q=URL
        Sous-ressources
        -
        +

        Exemple :

        Compétences/Infrastructure/Comprendre_les_URL
        L'URL ne commence pas pas /, 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 : https://developer.mozilla.org/fr/docs/Apprendre/Compétences/Infrastructure/Comprendre_les_URL
        Remonter dans l'arborescence des dossiers
        -
        +

        Exemple :

        ../CSS/display

        Dans ce cas, on utilise la convention, héritée du monde UNIX :  ../ indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display, qui peut être simplifiée en : https://developer.mozilla.org/fr/docs/CSS/display

        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 --- -

        Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.

        -
        - +
        @@ -34,7 +32,7 @@ original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web

        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 (matériel), le serveur HTTP (logiciel) renvoie le document demandé, également grâce à HTTP.

        -

        Basic representation of a client/server connection through HTTP

        +

        Basic representation of a client/server connection through HTTP

        Pour publier un site web, vous aurez besoin d'un serveur web statique ou dynamique.

        @@ -98,7 +96,7 @@ original_slug: Apprendre/Qu_est-ce_qu_un_serveur_web
      • 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é les pages d'erreurs 404 de leurs sites).
        • -

        Une page d'erreur HTTP, en l'occurrence la page 404 de MDN

        +

        Une page d'erreur HTTP, en l'occurrence la page 404 de MDN

        Contenu statique et contenu dynamique

        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é --- -

        Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.

        -
        -
        Prérequis :
        +
        @@ -49,8 +47,7 @@ original_slug: Apprendre/Accessibilité
        Déficience auditive
        -
        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.
        +
        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.
        Déficience visuelle
        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.
        Mise en pause
        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 --- -

        Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.

        -
        -
        Prérequis :
        +
        @@ -127,17 +125,17 @@ original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_si

        Voici une capture d'écran qui illustre l'allure d'un éditeur de texte avancé (ici Notepad++) :

        -

        Screenshot of Notepad++.

        +

        Screenshot of Notepad++.

        Transférer des fichiers vers un serveur web

        -

        Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (uploader) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article combien ça coûte de publier quelque chose sur le Web ?). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour File Transfer Protocol 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 RSync et Git/Github.

        +

        Lorsque votre site web est peaufiné, testé et est prêt à être publié, vous devrez téléverser (uploader) vos fichiers vers votre serveur web (pour l'achat de l'espace serveur, voir l'article combien ça coûte de publier quelque chose sur le Web ?). Une fois que vous disposez d'un serveur via votre fournisseur, celui-ci vous enverra les informations d'accès FTP (pour File Transfer Protocol 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 RSync et Git/Github.

        -
        -

        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 (Secure FTP) ou via RSync avec SSH.

        +
        +

        Note : 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 (Secure FTP) ou via RSync avec SSH.

        -

        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 dans un article à part. Voyons tout de même une liste de clients FTP basiques :

        +

        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 dans un article à part. Voyons tout de même une liste de clients FTP basiques :

        Prérequis :
        @@ -184,7 +182,7 @@ original_slug: Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_si

        Prochaines étapes

        -- cgit v1.2.3-54-g00ecf