Index

209 pages trouvées :

N° Page Étiquettes et résumé
1 Apprendre le développement web Apprendre, CSS, Débutant, HTML, Index, Introduction, Landing, Web
Si vous êtes un débutant complet, le développement web peut être un réel défi — notre but est de simplifier suffisamment le sujet pour que vous appreniez facilement, tout en vous fournissant assez de détails pour que vous soyez autonome. Vous devriez vous sentir chez vous, que vous soyez un étudiant apprenant le développement web (de votre propre gré ou dans le cadre de vos études), un enseignant recherchant des supports de cours, un amateur ou quelqu'un qui souhaite simplement comprendre la manière dont fonctionnent le web et ses technologies.
2 Accessibilité ARIA, Accessibilité, Apprendre, CSS, Débutant, HTML, JavaScript
Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du HTML, du CSS et du JavaScript), effectuer des tests sur les différents navigateurs et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail.
3 Accessibilité mobile Accessibilité, Article, Débutant, Mobile, responsive, toucher
No summary!
4 Accessible multimedia Accessibilité, Apprendre, Audio, Débutant, HTML, Images, JavaScript, Multimedia, Video
Le multimédia est une autre catégorie de contenu susceptible de créer des problèmes d'accessibilité: les contenus vidéo, audio et images doivent disposer de solutions de remplacement textuelles appropriées pour être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment.
5 HTML : une bonne base pour l'accessibilité Accessibilité, Article, Clavier, Débutant, Forms, HTML, Liens, a11y, boutons, sémantique
Une grande partie des contenus web peut être rendue accessible simplement en s'assurant d'utiliser les éléments HTML appropriés systématiquement. Cet article détaille comment HTML peut être utilisé pour un maximum d'accessibilité.
6 Les bases de WAI-ARIA ARIA, Accessibilité, Apprendre, Article, Débutant, Guide, HTML, JavaScript, WAI-ARIA, sémantique
This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.
7 Meilleures pratiques d'accessibilité CSS et JavaScript Accessibilité, Apprendre, Article, CSS, Codage des scripts, Guide, JavaScript, contraste, couleur, discret
CSS et JavaScript, lorsqu'ils sont utilisés correctement, peuvent également permettre des expériences web accessibles... ou peuvent nuire considérablement à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines des meilleures pratiques CSS et JavaScript à prendre en compte pour garantir que même un contenu complexe soit aussi accessible que possible.
8 Qu'est ce que l'accessibilité? Accessibilité, Aide technique, Apprendre, Article, CSS, Clavier, HTML, JavaScript, Lecteur d'écran, Outils, Utilisateurs
Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela comprend les groupes de personnes que l'on a besoin de considérer et pourquoi, quels outils ils utilisent afin d'intéragir avec les pages web et comment rendre accessible la partie de notre espace de travail web.
9 Évaluation: dépannage d'accessibilité Accessibilité, Apprendre, CSS, Débutant, HTML, JavaScript
Dans l’évaluation de ce module, nous vous présentons un site simple, qui présente un certain nombre de problèmes d’accessibilité que vous devez diagnostiquer et résoudre.
10 Apprendre le HTML : guides et didacticiels Apprentissage, Débutant, Guide, HTML, Introduction, Rubrique
L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire Introduction au HTML. Vous pouvez ensuite passer à l'étude de sujets plus avancés comme :
11 Apprendre à utiliser HTML pour résoudre des problèmes CodingScripting, HTML
Une fois les bases acquises, il n'existe pas de voie idéale pour apprendre HTML. Vous pouvez ensuite progresser à votre rythme, en utilisant les balises qui vous sont utiles. HTML n'est qu'un ensemble de balises que vous pouvez utiliser pour structurer votre document et lui ajouter des fonctionnalités supplémentaires. Dans les articles suivants, nous travaillerons sur différents exemples illustrant comment utiliser HTML pour résoudre des problèmes fréquents qu'on rencontre lorsqu'on développe pour le Web. Si vous avez besoin d'explications détaillées sur une balise HTML donnée, n'hésitez pas à consulter notre référence HTML.
12 Afficher du code informatique avec HTML Beginner, Guide, HTML, Learn
HTML a été conçu par des informaticiens et il sert donc particulièrement bien ce domaine. De nombreux éléments HTML sont apparus et/ou ont disparu au cours des années. Ici, nous n'aborderons que ceux qui sont en vigueur actuellement :
13 Ajouter des citations sur une page web Beginner, Guide, HTML
Très souvent, nous évoquons ce qui a été dit ou écrit par d'autres. Nous construisons des arguments logiques à partir de ces textes, notamment en littérature technique, en journalisme ou en philosophie. Étant donné que ce sont les scientifiques qui ont conçu HTML, il existe les mécanismes nécessaires pour faire des citations dans un document HTML.
14 Ajouter des images vectorielles à une page web Graphics, Guide, HTML, Intermediate, Learn, SVG
No summary!
15 Ajouter des images à une page web Beginner, Composing, HTML, NeedsActiveLearning, OpenPractices
Les images permettent de faire passer des messages plus simplement et plus directement. Elles attirent l'œil du visiteur lorsqu'il consulte le site. Dans cet articles, nous allons voir comment ajouter, simplement, des images à une page web.
16 Ajouter du contenu Flash dans une page web Accessibility, Advanced, Flash, Guide, HTML
Un plugin est un logiciel qui permet d'accéder à un contenu que le navigateur ne peut pas lire/décoder nativement. Il était une fois, les plugins étaient indispensables sur le Web. Il y a quelques années, installer Adobe Flash Player était un passage obligé pour regarder un film en ligne. À cette époque, on avait également de (trop) nombreuses alertes pour mettre à jour Flash Player ou Java Runtime Environment.
17 Ajouter du contenu audio ou vidéo à une page web Audio, Beginner, Guide, HTML, Video
Depuis toujours, les développeurs web ont intégré (ou tenté d'intégrer) des vidéos et des sons sur le Web. Après une longue période d'expérimentation, HTML5 offre aujourd'hui la meilleure solution et tire parti de nouvelles API JavaScript .
18 Ajouter une carte de zones cliquables sur une image Guide, HTML, Intermediate, Navigation
Auparavant, les cartes imagées était assez populaires mais, malgré cette popularité, elles posent quelques problèmes en termes de performances et d'accessibilité.
19 Annoter des images et graphiques Accessibility, Beginner, Guide, HTML, Learn
Une figure est une unité de contenu indépendante :
20 Appliquer du CSS à une page web Beginner, CSS, Guide, HTML
Un document HTML bien écrit peut être utilisé quel que soit le contexte de présentation. Il est possible de le consulter visuellement (avec un navigateur), auditivement (avec un lecteur d'écran) ou tactilement (avec un affichage Braille). CSS permet de contrôler l'aspect visuel d'un site web. Le navigateur pourra utiliser une feuille de style CSS par défaut, qui se traduira par une mise en forme générique (voire un peu austère) et il est donc préférable de déclarer une mise en forme propre à votre site web afin que celui-ci soit plus agréable à consulter.
21 Créer un document HTML simple Beginner, Guide, HTML, Learn
Pour créer un site web, on commence par rédiger un document HTML. Les navigateurs actuels sont plutôt tolérants mais pour éviter quelques maux de tête, mieux vaut l'assembler correctement dès le début.
22 Créer un hyperlien Beginner, HTML, Learn, Navigation
Dans cet article, nous verrons comment créer des liens accessibles et utiles  au référencement.
23 Créer une liste d'éléments avec HTML Beginner, Guide, HTML
Comment donc construire une liste avec HTML ? Pour commencer, il faudra répondre à une question : si on mélange les éléments de la liste, est-ce que le sens de la liste change également ?
24 Découper une page web en sections logiques Beginner, DesignAccessibility, HTML, Learn
Les sites web ont chacun leur style mais tous ont tendance à partager des composants communs :
25 Définir des termes avec HTML Beginner, Guide, HTML, Learn
Lorsqu'on souhaite définir un terme, on utilise généralement un dictionnaire ou un glossaire. Les dictionnaires et glossaires permettent d'associer formellement des termes clés avec une ou plusieurs descriptions. Par exemple :
26 Identifier et expliquer des abréviations avec HTML Beginner, HTML, Learn, OpenPractices
Il est nécessaire de s'assurer que l'abréviation puisse être comprise par les visiteurs de la page. Sur le papier, on explicite généralement la première occurence de l'abréviation en utilisant la forme complète et abrégée avant d'utiliser la forme abrégée pour les occurences suivantes :
27 Intégrer une page web au sein d'une autre page web Beginner, Guide, HTML, Learn, Security
Imbriquer des pages entre elles peut sembler étrange voire contre-nature mais cela existe depuis les débuts du Web. Lorsque la bande passante était utilisée par des modems 56k (voire moindre), pour réduire le temps de téléchargement, les pages web étaient fragmentées en morceaux appelés frames, tous intégrées dans un frameset. Malheureusement, les frames ont apporté plus de problèmes que de solutions et le concept de frame/frameset a disparu depuis l'apparition d'AJAX.
28 Mettre en place une hiérarchie de titres Beginner, HTML, Learn
Dans cet article, nous verrons comment ajouter des titres de différents niveaux à un document web afin que les lecteurs puissent identifier le contenu et trouver les réponses à leurs questions plus efficacement.
29 Mettre l'accent sur un contenu ou indiquer qu'un texte est important Beginner, Composing, Guide, HTML, Learn, OpenPractices
Dans cet article, nous verrons comment baliser des passages caractéristiques, selon leur importance, leur pertinence ou un changement de ton.
30 Utiliser JavaScript au sein d'une page web Beginner, HTML, JavaScript, OpenPractices
JavaScript est un langage de programmation principalement utilisé côté client et qui peut également être utilisé côté serveur. Il permet entre autres de rendre les pages web interactives. JavaScript offre une myriade de possibilités.
31 Utiliser les attributs de données Guide, HTML, Web
HTML5 est conçu avec le souci de l'extensibilité pour les données qui doivent être associées avec un élément particulier sans qu'on leur donne une signification spécifique. Les attributs data-* nous permettent de stocker des informations supplémentaires sur les éléments sémantiques standard sans avoir recours à des attributs non-standard ni à des propriétés supplémentaires du DOM, ni à Node.setUserData().
32 Cheatsheet HTML Cheatsheet, HTML, Intermediate, Learn
Lorsqu'on utilise HTML, une antisèche, une page rapide et récapitulative (cheatsheet) peut s'avérer plutôt pratique pour se souvenir rapidement de quelle balise HTML utiliser dans quel cas. MDN possède également une documentation HTML exhaustive ainsi que différents tutoriels HTML détaillés. Toutefois, dans la plupart des cas, il suffit juste d'une rapide vérification afin de pouvoir continuer. Cet article, sous la forme d'une antisèche synthétique, est là pour fournir des exemples de codes concis pour les usages les plus fréquents des éléments les plus utilisés.
33 Introduction au HTML Codage, HTML, Introduction au HTML, Landing, Liens, Structure, Texte, head, sémantique
Dans son cœur, HTML est un langage vraiment simple, composé d’éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.
34 Commencer avec le HTML Attributs, Codage, Commentaires, Débutant, Elements, Entités, Guide, HTML, espace
Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous  définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.
35 Création d'hyperliens Apprendre, Codage, Débutant, Guide, HTML, Liens, Title, URL, absolu, hyperliens, relatif
Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web une toile. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.
36 Déboguer de l'HTML Codage, Débutant, Erreur, Guide, HTML, Validation, débogage, validateur
Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.
37 Faire une lettre Codage, Débutant, Evaluation, HTML, Liens, Texte, en-tête
Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <head> en HTML.
38 Fondamentaux du texte HTML Apprendre, Débutant, Guide, HTML, Introduction à l'HTML, Listes, Paragraphes, Texte, Titres, sémantique
L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la sémantique) afin que le navigateur puisse l'afficher correctement. Cet article explique comment HTML peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.
39 Formatage avancé du texte Apprendre, Citation, Codage, Débutant, Guide, HTML, Texte, abréviation, listes descriptives, sémantique
Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article Les concepts fondamentaux du HTML liés au texte. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.
40 Qu'avez-vous dans la tête ? Métadonnées en HTML
L'en-tête head dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre (<title>) de la page, des liens aux CSS (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.
41 Structure de Site Web et de document Codage, Disposition, Débutant, Guide, HTML, Page, Site, blocs, sémantique
Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée :
42 Structurer une page de contenu
Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.
43 Les balises HTML et leur rôle Beginner, CodingScripting, HTML
HTML (HyperText Markup Language) est un langage descriptif utilisé pour structurer le contenu d'une page (ses textes, ses images, ses liens, etc.).
44 Les tableaux en HTML Article, CodingScripting, Débutant, Guide, HTML, Landing, Module, Tableaux
Une tâche assez courante en HTML consiste à structurer des données sous forme de tableaux. HTML dispose d'un certain nombre d'éléments avec attributs à cet effet. Couplé avec un peu de CSS pour styliser ces tableaux, HTML facilite l'affichage d'informations dans des tableaux sur le web comme les emplois du temps de l'école par exemple, les horaires d'ouverture de la piscine du quartier ou des statistiques à propos de votre équipe de football ou de dinosaures favorite. Ce module parcourt tout ce que vous devez savoir pour structurer des données sous forme de tableaux en utilisant HTML.
45 Revue : structurer les données des planètes
Dans notre évaluation, nous vous fournissons des données sur les planètes de notre système solaire pour vous permettre de les structurer dans un tableau HTML.
46 Tableaux HTML : dispositions avancées et accessibilité Accessibilité, Apprentissage, Article, Avancés, Codage, Débutant, En-têtes, HTML, Imbrication, Portée, Tableaux, caption, resume, tbody, tfoot, thead
Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants.
47 Tableaux HTML : notions de base Apprentissage, Article, Bases, Codage, Débutant, En-têtes, HTML, Tableaux, cellule, col, colgroup, colspan, rangées, rowspan
Un tableau est un ensemble structuré de données (table de données) présentées en lignes et colonnes. Un tableau vous permet de retrouver rapidement et facilement des valeurs au croisement entre différents types de données, par exemple : une personne et son âge, ou un jour et la semaine, ou les horaires d'ouverture de la piscine du quartier.
48 Multimédia et Intégration Apprentissage, Audio, Codage, Débutant, Evaluation, Flash, Guide, HTML, Image Vectorielle, Images, Interactivité, SVG, Video, iframes, imagemaps
Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte.  Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières.
49 Contenu audio et vidéo Article, Audio, Débutant, Guide, HTML, Légendes, Video, pistes (audio ou texte), sous‑titres
Maintenant que nous sommes à l'aise pour ajouter de simples images dans une page web, nous passons à l'étape suivante : ajouter de la vidéo et un lecteur audio à vos documents HTML. Dans cet article, nous nous contenterons de le faire avec les éléments <video> et <audio>. Nous terminerons en apprenant comment ajouter des légendes et des sous-titres à vos vidéos.
50 Des objets aux « iframe » — autres techniques d'intégration Apprentissage, Article, Codage, Débutant, Flash, Guide, HTML, Integration, Multimédia et intégration, Object, embed, iframe
Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments <iframe>, <embed> et <object>. Les  <iframe> servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement.
51 Images adaptatives Design, Débutant, Graphics, Guide, HTML, Image, Intermediate, Intermédiaire, img, picture, sizes, srcset
Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site Web classique a probablement une image d'en-tête pour flatter le regard du visiteurs, plus peut-être quelques images de contenu plus loin. Vous voulez probablement que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voyons un exemple simple :
52 Les images en HTML Débutant, Guide, HTML, Image, Title, alt text, figcaption, figure, img, src
Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée.  Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément <img>,  utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant <figure>, et en analysant sa relation avec les images d'arrière-plan du CSS .
53 Évaluation : page d'accueil Mozilla
Dans cette partie, nous testerons vos connaissances des quelques techniques abordées dans les articles de ce module, en vous demandant d'ajouter des images et des vidéos à une super page d'accueil entièrement dédiée à Mozilla !
54 Écrire une simple page HTML Beginner, CodingScripting, Guide, HTML, Learn, Web Development
La plus simple des pages web est simplement un fichier HTML valide. Il suffit donc d'un fichier HTML valide, d'un éditeur de texte et d'un navigateur web. Dans cet article, nous verrons comment utiliser quelques balises HTML et comment voir la page dans un navigateur.
55 Choisir, installer et paramétrer un éditeur de texte Beginner, Composing, Guide, NeedsActiveLearning, Tools
Un site web est, pour une grande partie, composé de fichiers texte. Pour cette raison, afin de développer dans les meilleures conditions, vous devriez choisir votre éditeur de texte soigneusement.
56 Commencer avec le Web CSS, Conception, Débutant, Guide, HTML, Index, Theorie, Web, publication
Créer un site web professionnel nécessite beaucoup de travail. C'est pourquoi, si vous débutez, nous vous encourageons à commencer par quelque chose de simple. Vous n'allez pas bâtir un nouveau Facebook dès le départ, mais il n'est pas bien compliqué de mettre en ligne votre propre site web. C'est par là que nous allons commencer.
57 Gérer les fichiers Création site, Débutant, Fichiers, Guide, HTML, Site Web, Theorie
Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous les fichiers liés au site devraient être présents dans un dossier dont le contenu reflète la structure des fichiers sur le serveur. Ce dossier peut être n'importe où sur votre ordinateur, l'idéal étant qu'il soit simple à retrouver, par exemple sur votre Bureau ou dans votre dossier personnel, voire à la racine du disque dur.
58 Installation des outils de base Apprendre, Débutant, Navigateurs, Outils, Setup, Web, Éditeurs de texte
Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer dans le développement web sans rien savoir de tout cela. Dans cet article nous allons vous présenter le minimum : un éditeur de texte et quelques navigateurs web modernes.
59 Le fonctionnement du Web Apprendre, Client, DNS, Débutant, HTTP, IP, Infrastructure, Serveur, TCP, Web
Ces éléments théoriques ne sont pas strictement nécessaires pour commencer à faire du développement web dans un premier temps. Cependant, ils seront plus qu'utiles pour mieux comprendre comment le Web fonctionne en arrière-plan.
60 Les bases de JavaScript Apprendre, Code JavaScript, Débutant, JavaScript, Web
JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore !
61 Les bases des CSS Apprendre, CSS, Code CSS, Débutant, Styles, Web
De la même façon que HTML, CSS n'est pas vraiment un langage de programmation. C'est un langage de feuille de style, c'est-à-dire qu'il permet d'appliquer des styles sur différents éléments sélectionnés dans un document HTML. Par exemple, on peut sélectionner tous les éléments d'une page HTML qui sont paragraphes et afficher leurs textes en rouge avec ce code CSS :
62 Les bases du HTML Apprendre, Bases HTML, Code HTML, Débutant, HTML, Site Web
HTML n'est pas un langage de programmation. C'est un langage de balises qui définit la structure de votre contenu. HTML se compose d'une série d'éléments, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les balises entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante :
63 Publier votre site web Apprentissage, Codage, Débutant, FTP, GitHub, Google App Engine, Learn, Web, publier, serveur web
La publication d'un site web n'est pas une chose simple, essentiellement du fait qu'il y a multiples façons de le faire. Dans cet article, notre objectif n'est pas de documenter toutes les méthodes possibles. Nous discuterons plutôt des avantages et des inconvénients des trois principales stratégies du point de vue d'un débutant,  puis nous vous présenterons une méthode actuellement fonctionnelle.
64 Quel sera l'aspect de votre site web ? Apprendre, Composition, Conception, Débutant, Planification, Polices de caractères
Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre site web doit-il réellement faire ? Un site web peut pratiquement faire tout ce que vous voulez, mais pour un premier essai, vous devez garder les choses simples. Nous allons commencer par créer une simple page web avec un en-tête, une image et quelques paragraphes.
65 Commencez votre projet Web Beginner, Composing, Web
Lors du démarrage d'un projet web, beaucoup de gens se concentrent sur l'aspect technique. Bien sûr, vous devez être familier avec la technique, mais ce qui importe vraiment est ce que vous voulez accomplir. Oui, cela semble évident, mais de trop nombreux projets échouent, pas à cause d'un manque de savoir-faire technique, mais à cause d'un manque d'objectifs et de vision.
66 Comment contribuer à l'Espace d'apprentissage du MDN Apprendre, Documentation, Débutant, Guide, contribuer
Sur cette page, vous trouverez tout ce dont vous aurez besoin pour aider à améliorer le contenu pédagogique sur MDN. Vous pouvez contribuer de nombreuses façons, selon le temps que vous avez ou que vous souhaitez y passer, que vous soyez un débutant, un développeur web, ou un enseignant.
67 Composer le HTML avec les CSS Article, CSS, Codage, Débutant, Longueur, Nécessite du contenu, Renvois, Style, débogage, particularités
Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module Introduction au HTML — vous pourrez ensuite en apprendre davantage au sujet :
68 Apprendre à utiliser CSS pour résoudre des problèmes Apprendre, CSS, Débutant
No summary!
69 Contenu CSS, CSS:Premiers_pas
No summary!
70 Créer de belles boîtes Apprendre, CSS, Débutant
Les boîtes CSS sont des blocs de base pour la construction des pages web. Créer des boîtes agréables à regarder est un défi complexe et intéressant. C'est un défi intéressant parce qu'on peut implémenter une idée de concept, de design, grâce à du code qui fonctionne. C'est un défi complexe car CSS possède à la fois plein de contraintes et de libertés. Dans cet article, nous allons voir de quoi il en retourne en dessinant quelques belles boîtes.
71 Mettre en forme du texte Apprendre, CSS, Débutant
La mise en forme du texte est au cœur de CSS. Celui-ci fournit de nombreuses propriétés permettant de modifier l'apparence du texte. En quelque sorte, CSS est le prolongement, sur le Web, de la typographie qui existe depuis plusieurs siècles.
72 personnaliser une liste
Les listes sont des structures très répandues en HTML et les CSS apportent un ensemble complet de propriétés pour leur donner l'apparence que vous voulez. Comprendre comment utiliser et modifier les styles par défaut est une compétence ordinaire dont vous aurez besoin dès que vous utiliserez les listes.
73 Blocs de base en CSS CSS, Débutant, Tutoriel
Ce cours fait suite aux premiers pas avec CSS : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses.

L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme le style de texte et la mise en page CSS.
74 Arrière-plans et bordures
Dans cette leçon, nous verrons quelques unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.
75 Cascade et héritage Apprendre, CSS, Cascade, Débutant, Héritage, Règles, ordre dans le source, spécificité
L'objectif de cette leçon est de développer votre compréhension de concepts parmi les plus fondamentaux de CSS — cascade, spécificité et héritage — qui contrôlent comment CSS s'applique au HTML et comment les conflits de règles sont résolus.
76 Définir la taille des éléments en CSS
HTML Elements have a natural size, set before they are affected by any CSS. A straightforward example is an image. An image has a width and a height defined in the image file it is embedding into the page. This size is described as the intrinsic size — which comes from the image itself.
77 Effets de boîte avancés Article, Boîtes, CSS, Codage, Débutant, Filtres, Modes de mélange de couleurs, Stylisation, effets, ombres de boîtes
Cet article est une sorte de boîte à malices : elle introduit certaines des fonctions avancées disponibles pour styliser les boîtes, fonctions n'entrant pas dans catégories vues plus haut — comme les ombres, les mélanges de couleurs ou les filtres.
78 Le modèle de Boîte Boîte, CSS, Disposition, Débutant, Mise en page, Model, Modèle, Position, Positionnement, border, box, display, margin, padding
En CSS, tout élement est inclus dans une boîte ("box" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des élements d'une page HTML. Dans cette leçon, nous verrons en détails le Modèle de Boîtes CSS - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.
79 Mise en page de tableaux Article, CSS, Codage, Débutant, Guide, HTML, Style, Tableaux
Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais ... quelquefois nous devons le faire. Cet article est un guide pour donner un bel aspect aux tableaux HTML à l'aide des fonctionnalités détaillées dans les articles précédents.
80 Overflow - Débordements de contenu
Dans ce cours nous allons étudier un autre concept important en CSS — overflow (débordement). Un overflow (débordement de contenu) correspond à ce qui se produit lorsque le contenu à insérer dans une boîte occupe trop d'espace pour s'y insérer confortablement. Dans ce guide vous allez apprendre à gérer cela.
81 Sélecteurs CSS
Dans CSS, les sélecteurs sont utilisés pour cibler les éléments HTML à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.
82 Pseudo-classes et pseudo-éléments Apprendre, CSS, Débutant, Pseudo, Pseudo-class, Pseudo-element, Sélecteurs
Voyons maintenant les sélecteurs de pseudo-classes et de pseudo-éléments. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur.
83 Sélecteurs d'attribut Apprendre, Attribut, CSS, Débutant, Sélecteurs
Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.
84 Sélecteurs de type, de classe et d'ID
Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail.
85 Introduction au style de texte CSS, Débutant, Liens, Listes, Mise en page, Module, Polices de caractères, Style, Texte
Une fois acquises les bases du langage CSS, la prochaine étape pour vous est la mise en forme de texte, une des choses les plus commune mais essentielle du CSS. Nous étudierons ici les principes de base de la mise en forme de texte : choix de polices de caractères, gras ou italique, interlignes et espacement de caractères, ajouter des ombres et autres fonctionnalités. Nous terminerons le module en détaillant l'intégration de polices personnalisées à votre page, ainsi que la mise en forme de listes et de liens.
86 Composition de la page d'accueil d'une école de communauté CSS, Codage, Composer du texte, Débutant, Evaluation, Fontes, Fontes web, Liens, Listes
Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours.
87 Fontes Web
Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte.
88 Initiation à la mise en forme du texte Alignement, CSS, Débutant, Guide, Polices de caractères, Style, Texte
Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec CSS. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.
89 Mise en forme des liens Article, Beginner, CSS, Focus, Guide, Learn, Links, Pseudo-class, hover, hyperlinks, menus, tabs
Lors de la mise en forme de liens, il est important de comprendre comment utiliser les pseudo-classes pour mettre en forme efficacement les états des liens, et comment créer des liens pour les utiliser dans diverses fonctionnalités d'interface courantes, telles que les menus de navigation et les onglets. Nous allons examiner tous ces sujets dans cet article.
90 Style de listes CSS, Débutant, Guide, Listes, Numeros, Puces, Styles, Texte
Les listes se comportent comme la plupart des autres textes, mais il existe des propriétés CSS propres aux listes que vous devez connaître, et quelques bonnes pratiques à prendre en compte. Cet article explique tout.
91 La mise en page avec le CSS CSS, Débutant, Floating, Guide, Landing, Layout, Learn, Module, Positionnement, colonne multiple, flexbox, float, grid
Avant de commencer ce module, vous devriez déjà :
92 Compréhension fondamentale de la mise en page
Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques.
93 Cours normal
Cet article décrit le déroulement normal, c'est-à-dire la façon dont les éléments d'une page web se présentent si vous ne modifiez pas leur mise en page.
94 Disposition sur plusieurs colonnes Apprendre, Apprentissage, CSS, Colonnes multiples, Disposition, Débutant, Guide, Multi-col
Une mise en page à colonnes multiples est une méthode de disposition du contenu sur plusieurs colonnes juxtaposées, telle dans un journal. Cet article explique comment utiliser cette fonction.
95 Exemples pratiques de positionnement
So that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to build some interesting UI features. Don't worry if you didn't get this all immediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding. The next subject we'll turn to is Flexbox.
96 Flexbox Apprentissage, Article, Boîtes modulables, CSS, Codage, Disposition, Débutant, Guide, Mise en page avec les CSS, Mises en page, flexbox
Flexbox est une méthode de mise en page selon un axe principal, permettant de disposer des éléments en ligne ou en colonne. Les éléments se dilatent ou se rétractent pour occuper l'espace disponible. Cet article en explique tous les fondamentaux.
97 Grilles Apprendre, Article, CSS, Codage, Didacticiel, Débutant, Guide, Mise en page, Trames, Trames CSS, quadrillage du design, structure du quadrillage, système de trames
Une trame est simplement un ensemble de lignes horizontales et verticales créant un quadrillage dans lequel nous pouvons agencer les éléments à afficher. Elles nous aident à créer des compositions dans lesquelles les éléments ne sautent pas ou ne changent pas de largeur au fur et à mesure que nous nous déplaçons d'une page à l'autre, ce qui assure une plus grande cohérence des sites Web.
98 Guide du débutant des Media Queries
In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design.
99 Introduction à la mise en page en CSS Apprendre, Article, Boîtes flexibles, CSS, Débutant, Flottants, Flux, Grille, Intro, Mise en page, Positionnement, Tableaux
Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a déjà côtoyées dans les modules précédents — telles que les différentes valeurs de display — et en introduit de nouveaux que nous aborderons dans ce module.
100 Le positionnement Agencement, Article, CSS, Codage de script, Disposition, Débutant, Guide, Mise en page, Positionnement, absolu, fixe, relatif, statique
Le positionnement permet de sortir les éléments du cours normal de composition du document, et faire qu'ils se comportent différemment, par exemple de se placer sur un autre, ou de toujours rester à la même place dans le cadre d'affichage (viewport) du navigateur. Cet article explique les diverses valeurs de position, et comment les utiliser.
101 Les boîtes flottantes Article, Boîtes flottantes, CSS, Codage, Débutant, Dégagement, Flotteurs, Guide, Mise en page, colonnes, multi‑colonne
À l'origine conçue pour faire flotter des images à l'intérieur d'un bloc de texte, la propriété float est devenue un des outils les plus communément utilisés pour créer des dispositions sur plusieurs colonnes dans des pages web. Avec la venue de Flexbox et de Grid, il est maintenant revenu à sa destination initiale, comme l'explique l'article.
102 Méthodes de mises en page traditionnelles Apprendre, Boîtes flottantes, CSS, Disposition, Débutant, Guide, Héritage, systèmes de trames
Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame.
103 Prise en charge des anciens navigateurs
You now have the knowledge to confidently use techniques such as Grid and Flexbox, create fallbacks for older browsers, and make use of any new techniques that might come along in the future.
104 Responsive design Images, Media Queries, RWD, Responsive web design, Typographie, flexbox, grid, grille fluide
Aux débuts de la conception Web, les pages étaient construites pour cibler une taille d'écran particulière. Si l'utilisateur avait un écran plus grand ou plus petit que celui du concepteur, les résultats attendus pouvaient aller de barres de défilement indésirables, à des longueurs de lignes trop longues, et à une mauvaise utilisation de l'espace. À mesure que des tailles d'écran plus variées devenaient disponibles, le concept de responsive web design (RWD) est apparu, un ensemble de pratiques qui permet aux pages Web de modifier leur disposition et leur apparence pour s'adapter à différentes largeurs d'écran, résolutions, etc. C'est une idée qui a changé notre façon de concevoir pour un web multi-périphériques, et dans cet article nous vous aiderons à comprendre les principales techniques que vous devez connaître pour la maîtriser.
105 Testez vos compétences : Flexbox
Le but de cette tâche est de vous faire travailler avec Flexbox et de démontrer votre compréhension du comportement des éléments flexibles. Vous trouverez ci-dessous quatre modèles de conception courants que vous pourriez utiliser pour créer avec Flexbox, votre tâche est de les construire.
106 Les propriétés CSS et comment s'en servir Beginner, CSS, CodingScripting, NeedsActiveLearning
Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps).
107 Mise en forme basique du texte avec CSS Beginner, CSS, CodingScripting, Example, Guide, Learn, NeedsActiveLearning
Depuis sa première mouture, CSS s'est spécialisé dans la mise en forme (autrement dit l'apparence) des sites web, permettant au HTML de se concentrer uniquement sur la structure du document.
108 Premiers pas avec CSS Apprendre, CSS, Débutant, Module, premiers pas
Avant de commencer ce module, vous devriez avoir :
109 CSS, comment ça marche ? Apprendre, CSS, DOM, Débutant
Jusqu'ici, nous avons appris les bases du CCS, ses objectifs et comment écrire des feuilles de style élémentaires. Dans cette leçon, nous allons voir comment un navigateur prend du HTML et du CSS pour les transformer en une page web.
110 Comment CSS est structuré Apprendre, CSS, Commentaires, Débutant, HTML, Propriétés, Structure, Sélecteurs, espace, raccourci, valeurse
Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.
111 Démarrer avec CSS
Dans cet article nous montrons comment appliquer CSS à un document HTML simple. Ce faisant, vous apprendrez des choses pratiques concernant CSS.
112 Mettre en œuvre vos connaissances Apprendre, CSS, Débutant, Playground
Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS.
113 Qu'est ce que CSS ? Apprendre, CSS, Débutant, Modules, Specifications, Syntaxe
CSS (Cascading Style Sheets) permet de créer des pages web à l'apparence soignée. Cet article vous propose de lever le voile en expliquant ce qu'est CSS ; un exemple simple en présentera la syntaxe puis quelques termes clé du langage seront introduits.
114 Utiliser le CSS dans une page web Beginner, CSS, CodingScripting, HTML, NeedsActiveLearning
Il existe deux méthodes permettant d'appliquer du code CSS à vos documents HTML : écrire du CSS directement dans le document HTML ou bien appeler un fichier CSS externe à partir du document HTML.
115 Comprendre les URL et leur structure Beginner, Infrastructure, Learn, NeedsActiveLearning, URL
Avec les concepts d'hypertexte et de 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.
116 Comprendre les différences entre une page web, un site web, un serveur web et un moteur de recherche Beginner, Web
Le Web, comme tout autre champ de connaissance, est associé à un vaste vocabulaire technique. Ne vous inquiétez pas, nous n'avons pas l'intention de vous submerger avec tout cela (toutefois, si vous êtes curieux, vous pouvez consulter notre glossaire). Nous nous devons toutefois de clarifier dès maintenant certaines notions de base, car elles reviendront fréquemment dans vos prochaines lectures. Ces notions peuvent parfois être confondues, car elles réfèrent à des fonctions apparentés, mais néanmoins distinctes. Nous approfondirons bientôt ces notions, mais vous pouvez commencer par vous familiariser avec ces définitions simples :
117 Comprendre les noms de domaine Beginner, Domain names, Infrastructure, Learn, Web
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.
118 Compétences Index
Lorsqu'il s'agit d'apprendre le développement Web, il existe plusieurs compétences, listées par WebMaker dans la littéracie web : une carte destinée aux débutants pour apprendre les bases. Sur MDN, les articles de cette section sont consacrés au développement de sites web et sont destinés à tous publics :
119 Conception d'une page web Beginner, CSS, Design, HTML, NeedsActiveLearning
Nous avons une bonne raison de vous initier à la conception web. Vous commencez avec une page vierge, puis vous devez choisir entre tellement de possibilités… Si vous avez peu d'expérience, la page blanche initiale pourrait vous paraître intimidante. Comme nous avons plus de 25 ans d'expérience dans le domaine, nous allons vous présenter quelques règles générales qui pourront vous aider dans la conception de votre site web.
120 Concevoir un site pour tous les types d'utilisateurs Accessibility, Beginner, Design, Mobile, NeedsActiveLearning
Lors de la construction d'un site, il faut entre autres garder à l'esprit qu'un site doit être accessible à tous, quelles que soient les contraintes de handicap, les contraintes techniques, la culture, le lieu depuis lequel le site est consulté, etc.
121 Confidentialité, intégrité et disponibilité Beginner, Security, Tutorial
En sécurité de l'information, le modèle classique définit trois objectifs : maintenir la confidentialité, l'intégrité et la disponibilité des données. Chacun de ces objectifs porte sur un aspect différent de protection des informations.
122 Contrôles de sécurité Beginner, Security, Tutorial
Il n'y a pas encore de matériau interactif pour cet article. N'hésitez pas à contribuer.
123 De quels logiciels ai-je besoin pour construire un site web ? Beginner, Learn, NeedsActiveLearning, WebMechanics
La plupart des logiciels nécessaires au développement d'un site web peuvent être téléchargés gratuitement sur Internet. Quelques liens seront fournis au fur et à mesure de l'article. Vous aurez besoin d'outils pour :
124 Découvrir les outils de développement des navigateurs Beginner, Browser, CSS, CodingScripting, DevTools, HTML, JavaScript, Learn
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) :
125 Index Index, Learn, MDN, Meta
209 pages trouvées :
126 JavaScript Débutant, Développement, JavaScript, Modules, scripts
JavaScript est un langage de programmation qui vous permet de mettre en œuvre des éléments complexes sur des pages Web (une page Web contenant plus que de simples informations statiques). Chaque fois qu'une page affiche des mises à jour de contenu en temps réel, des cartes interactives, des animations graphiques 2D / 3D ou un juke-box vidéo défilant, etc. — vous pouvez parier que JavaScript est probablement impliqué.
127 API web utilisées côté client API, API Web, Apprendre, Articles, Codage, DOM, Débutant, Graphismes, JavaScript, Localisation, Media, Module, données
Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des applications, vous n'irez pas très loin avant d'utiliser des API - des interfaces pour manipuler différents aspects du navigateur et du système d'exploitation sur lesquels le site opère, ou même des données provenant d'autres sites web ou services. Dans ce module, nous allons explorer ce que sont les API, et comment utiliser certaines API les plus courantes que vous rencontrerez souvent dans votre travail de développement.
128 API tierces API, Apprendre, Débutant
Les API tierces sont des API qui sont fournis par des tiers, généralement des entreprises comme Facebook, Twitter ou Google, qui permettent d'accéder à leurs données et/ou leurs fonctionnalités grâce à JavaScript afin de les utiliser sur son site. Utiliser une API de cartographie afin d'afficher une carte sur une page est un exemple.
129 APIs vidéo et audio API, Apprendre, Article, Audio, Codage, Débutant, Guide, JavaScript, Video
HTML5 fournit des éléments pour intégrer du multimédia dans les documents — <video> et <audio> — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc. Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés.
130 Dessiner des éléments graphiques API, Apprendre, Articles, Canvas, Codage, Débutant, Graphismes, JavaScript, WebGL
Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML <canvas>, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.
131 Introduction aux API du Web API, API Web, Apprentissage, Article, Codage, Débutant, Navigateur, Objet, Tierce partie, côté‑client
Tout d'abord, nous survolerons le concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées ? Nous verrons également quelles sont les principales APIs et leur utilisation.
132 Manipuler des documents API, Apprendre, Article, Codage, DOM, Document Object Model, Débutant, JavaScript, Navigator, WebAPI, Window
Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet Document. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement.
133 Récupérer des données du serveur API, Apprendre, Article, Codage, Débutant, Fetch, JavaScript, XHR, data
Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch.
134 Stockage côté client API, Apprendre, Codage, Débutant, Guide, IndexedDB, JavaScript, Storage
Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir.
135 Introduction aux objets JS Apprendre, Article, Auto-évaluation, Débutant, Guide, JavaScript, Objets, Tutoriel
En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets.
136 Ajouter des fonctionnalités à notre exercice des balles rebondissantes Apprentissage, CodingScripting, Débutant, Evaluation, JavaScript, OOJS, Objet, Orienté objet
Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes.
137 L'héritage au sein de JavaScript Apprendre, Article, Débutant, Héritage, JS Orienté Objet, JavaScript, Objet, Programmation orientée objet, Prototype
No summary!
138 La construction d'objet en pratique Apprendre, Article, Canvas, Débutant, JavaScript, Manuel, Objets, Tutoriel
Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré.
139 Le JavaScript orienté objet pour débutants Apprendre, Débutant, Guide, JavaScript, OOJS, OOP, POO
Après avoir parcouru les fondamentaux, nous allons aborder en détail le JavaScript orienté objet (JSOO). Cet article présente une approche simple de la programmation orientée objet (POO) et détaille comment JavaScript émule des classes objet au travers des méthodes constructeur et comment instancier ces objets.
140 Les bases de JavaScript, orienté objet API, Apprendre, Débutant, JavaScript, Objet, Syntaxe, this
Dans ce premier article sur les objets JavaScript, nous verrons la syntaxe des objets JavaScript ainsi que quelques fonctionnalités JavaScript déjà aperçues dans les cours précédents, rappelant que beaucoup de fonctionnalités que vous utilisez sont en fait des objets.
141 Manipuler des données JSON Apprendre, Article, Débutant, JSON, JavaScript, Manuel, Objets, Tutoriel
Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON.
142 Prototypes Objet Constructeur, JavaScript, Prototype
Les prototypes sont un mécanisme au sein de JavaScript qui permettent aux objets JavaScript d'hériter des propriétés d'autres objets. Les prototypes implémentent un héritage différent de celui rencontré dans les langages de programmation objets habituels. Dans cet article, nous allons aborder ces différences, nous allons aussi voir comment la chaîne de prototypage fonctionne. Nous verrons aussi comment les propriétés prototypes peuvent être utilisées afin d'ajouter des méthodes à des constructeurs existants.
143 Premiers pas en JavaScript Article, Auto-évaluation, Chaînes de caractères, Débutant, Guide, JavaScript, Module, Nombres, Opérateurs, Tableaux, Variables
Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable en JavaScript, mais vous devriez être familier avec HTML et CSS. Nous vous conseillons de lire les modules suivants avant d'aller plus loin :
144 Générateur d'histoires absurdes
Dans cette évaluation, vous aurez pour tâche d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer dans le but de créer une appli ludique qui génère des histoires absurdes au hasard. Amusez-vous bien !
145 Gérer du texte — les chaînes de caractères en JavaScript Article, Attacher, Codage, Débutant, Guide, Guillemets, JavaScript, chaînes, concatenation
Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes.
146 Les tableaux Apprendre, Article, Codage, Débutants, JavaScript, Lier, Pop, Push, Tableaux, décalage, séparer
Dans le dernier article de ce module, nous examinerons les tableaux — une façon de stocker proprement une liste d'éléments de données sous un seul nom de variable. Ici nous verrons pourquoi c'est utile, puis nous apprendrons comment créer un tableau, y retrouver, y ajouter ou en enlever les éléments dedans, et quelques à‑côtés en bonus.
147 Mathématiques de base en JavaScript — nombres et opérateurs Apprendre, Article, Codage de scripts, Débutant, Guide, Incrémentation, JavaScript, Math, Opérateurs, augmenté, maths, modulo
Mouais, peut‑être pas. Certains parmi nous aiment les maths, d'autres les détestent depuis qu'il leur a fallu apprendre les tables de multiplication et les longues divisions à l'école, d'autres se situent entre les deux. Mais personne ne peut nier que les mathématiques sont une connaissance fondamentale dont il n'est pas possible de se passer. Cela devient particulièrement vrai lorsque nous apprenons à programmer en JavaScript (ou tout autre langage d'ailleurs) — une grande part de ce que nous faisons reposant en effet sur le traitement de données numériques, le calcul de nouvelles valeurs, etc. ; vous ne serez donc pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques.
148 Méthodes utiles pour les chaînes de caractères Apprentissage, Article, Codage, Débutant, JavaScript, Longueur, cas, couper, indexof, majuscule, minuscule, remplacer
À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore.
149 Notre premier code JavaScript Apprendre, Article, CodingScripting, Débutant, Fonctions, JavaScript, Objets, Opérateurs, Variables, structures conditionnelles
Ne vous attendez pas à comprendre tout le code en détail immédiatement — nous voulons simplement vous présenter les grands concepts pour le moment, et vous donner une idée de la façon dont JavaScript (et d'autres langages de programmation) fonctionne. Dans les articles suivants, vous reviendrez plus en détails sur toutes ces fonctionnalités !
150 Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript Apprentissage, Article, Codage, Débutant, Erreur, JavaScript, Tutoriel, console.log, débogage, outils de développement
Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous avez peut-être constaté qu'il ne fonctionnait pas. Pas de panique — cet article vise à ce que vous ne vous arrachiez pas les cheveux sur ces problèmes en donnant quelques conseils simples sur la façon de trouver et corriger les erreurs dans les programmes JavaScript.
151 Qu’est-ce que le JavaScript ? API, Apprendre, Article, Commentaires, Defer, Débutant, JavaScript, Navigateur, Script, async, inline
JavaScript est un langage de programmation qui permet d’implémenter des mécanismes complexes sur une page web. À chaque fois qu’une page web fait plus que simplement afficher du contenu statique — afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, etc... — JavaScript a de bonnes chances d’être impliqué. C’est la troisième couche des technologies standards du web, les deux premières (HTML et CSS) étant couvertes bien plus en détail dans d’autres tutoriels sur MDN.
152 Stocker les informations nécessaires — les variables Booléens, Declaration, Initialisation, JavaScript, Mise à jour, Nombres, Objets, Tableaux, Typage faible, Variables, chaînes
Après lecture des deux articles précédents, vous savez maintenant ce qu'est JavaScript, ce qu'il peut vous apporter, comment l'utiliser aux côtés d'autres technologies web et l'aspect de ses principales fonctionnalités vues de haut. Dans cet article, nous revenons aux fondements réels en examinant comment travailler avec le bloc de construction le plus basique du JavaScript — les variables.
153 Principaux blocs en JS Auto-évaluation, Boucles, Débutant, Fonctions, Guide, Modules, conditions, évènements
Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails.
154 Construire vos propres fonctions Apprentissage, Article, Débutant, Fonctions, Guide, I10n, JavaScript, Paramètres, Scripting, Tutoriel
Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions.
155 Fonctions — des blocs de code réutilisables
Les fonctions sont un autre concept essentiel de la programmation, qui permettent de stocker dans un bloc défini une partie de code qui effectue une seule tâche afin de l'appeler plus tard lorsque nous en avons besoin en utilisant une seule commande courte — au lieu de ré-écrire l'intégralité de ce code à chaque fois. Dans cet article nous explorons les concepts fondamentaux inhérents aux fonctions tels que la syntaxe de base, comment les définir et les invoquer, leur portée et leurs paramètres.
156 Galerie d'images Apprendre, Boucles, Débutant, Evaluation, Gestionnaire d'événement, JavaScript, conditions, l10n:priority, Écriture de code, évènements
Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript,  nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements  en vous aidant à créer un élément assez commun que vous verrez  sur de nombreux sites web. Une galerie JavaScript animée.
157 Introduction aux évènements Article, Codage, Débutant, Evènement, Gestionnaire d'événement, Guide, JavaScript
Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information. Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que vous devez savoir à ce stade.
158 Les boucles dans le code Article, CodingScripting, DO, Débutant, Guide, JavaScript, Learn, Loop, break, continue, for, l10n:priority, while
Les langages de programmation sont très utiles pour effectuer des tâches répétitives, allant de calculs basiques à à peu près n'importe quelle autre situation où vous avez un certain nombre d'actions similaires à répéter. Ici, nous allons étudier les structures de boucle disponible dans JavaScript qui répondent à un tel besoin.
159 Prendre des décisions dans le code — conditions Article, CodingScripting, Conditionnel, Débutant, JavaScript, Switch, conditions, else, if, ternaire
Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript.
160 Valeurs de retour des fonctions Apprendre, Article, Débutant, Fonctions, Guide, JavaScript, Return, Valeurs de retour, Écriture de code
Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article.
161 Le fonctionnement de l'Internet Beginner, Internet, WebMechanics
L'Internet est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres.
162 Le fonctionnement des liens sur le Web Beginner, Infrastructure, Navigation, NeedsActiveLearning
Comme on peut le voir avec ces trois piliers, tout ce qui tourne autour du Web consiste en des documents et à la façon d'y accéder. Le but originel du Web était de fournir un moyen simple et efficace pour lire et naviguer entre différents documents textuels. Depuis, le Web a évolué et permet désormais d'accéder à des images, des vidéos, des données binaires. Toutefois, ces améliorations n'ont pas bouleversé ces trois piliers qui restent toujours d'actualité.
163 Les vulnérabilités Beginner, Learn, Security
Une vulnérabilité est une faiblesse d'un système qui peut être exploitée de façon négative pour compromettre la confidentialité, l'intégrité ou la disponibilité d'un système et/ou de des données. Il existe de nombreuses méthodes pour catégoriser les vulnérabilités. Dans cet article, nous les classerons dans trois grands groupes : les erreurs logicielles, les erreurs de configuration des systèmes de sécurité et la mauvaise utilisation d'une fonctionnalité d'un logiciel. Ces catégories sont décrites ci-après.
164 Mettre en place un environnement de travail Beginner, CodingScripting, Guide, Learn
En développement web, mieux vaut tester son site localement avant de le publier aux yeux du monde entier. Pour effectuer des tests sur votre ordinateur, vous pouvez installer un serveur local. Dans cet article nous verrons comment faire et comment organiser une hiérarchie de fichiers afin que ceux-ci soit organisés, même si le projet devient plus volumineux.
165 Outils et tests Accessibilité, Apprendre, Automatisation, CSS, Déboguage, Débutant, HTML, JavaScript, Outils, tests
Une fois que vous commencerez à être à l'aise avec les langages de programmation web (comme le HTML, le CSS, et le JavaScript), et acquerrez plus d'expérience, lirez plus de ressources, et apprendrez plus de choses, vous commencerez à tomber sur toute sorte d'outils, comme par exemple des scripts CSS et JavaScript, des outils de tests et d'automatisation, et bien plus encore. Au fur et à mesure que vos projets web deviendront de plus en plus grands et complexes, vous allez vouloir savoir comment utiliser certains de ces outils et élaborer des tests fiables pour votre code. Cette partie de la zone d'apprentissage cherche à vous donner tout ce dont vous avez besoin afin de commencer sur de bonnes bases et faire des choix informés.
166 Cross browser testing Accessibility, Automation, Beginner, CSS, CodingScripting, HTML, JavaScript, Landing, Learn, Module, NeedsTranslation, Testing, Tools, TopicStub, cross browser
This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.
167 Gérer les problèmes courants d'accessibilité Accessibilité, Apprentissage, Article, CSS, Clavier, Débutant, HTML, JavaScript, Outils, navigateur croisé, test
Tournons maintenant notre attention vers l'accessibilité, les informations sur les problèmes communs, comment faire des tests simples, et comment faire pour utiliser les outils d'audit/automatisation pour trouver les problèmes d'accessibilités.
168 Gérer les problèmes courants en HTML et CSS Apprentissage, CSS, Débutant, HTML, Sélecteurs, linting, navigateur croisé, test
Maintenant que les bases sont posées, nous allons nous concentrer sur les problèmes courants en navigateur croisé que vous allez rencontrer en code HTML et CSS, et quels outils peuvent être utilisés pour prévenir l'arrivée de ces problèmes, ou résoudre les problèmes qui surviennent. Cela inclut le linting code, la gestion des préfixes CSS, l'utilisation des outils de dev des navigateurs pour localiser les problèmes, utiliser des polyfills pour apporter du support dans les navigateurs, se confronter aux problèmes de responsive design et plus encore.
169 Gérer les problèmes courants en JavaScript Apprentissage, Débutant, JavaScript, Librairies, détection de fonctionnalité, linting, navigateur croisé, polyfills, test
Nous allons maintenant aborder les problèmes Javascript en navigateur croisé et comment les résoudre. Cela comprend des informations sur l'utilisation  des outils de dev des navigateurs pour localiser et fixer les problèmes, l'utilisation des Polyfills et de librairies pour contourner les problèmes, utiliser les fonctionnalités modernes de Javascript sur des vieux navigateurs, et plus encore.
170 Introduction au test en navigateur croisé Apprentissage, Débutant, multi navigateur, navigateur croisé, test
Cet article commence en donnant un aperçu sur le sujet des test sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé?", "Quels sont les problèmes les plus communs que vous allez rencontrer?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes?"
171 Stratégies pour mener à bien vos tests
Cet article commence en donnant un aperçu sur le sujet des tests sur navigateurs (croisé), répondant aux questions telles que "qu'est-ce que le test en navigateur croisé ?", "Quels sont les problèmes les plus communs que vous allez rencontrer ?", et "quelles sont les principales approches pour tester, identifier, et fixer les problèmes ?"
172 Understanding client-side JavaScript frameworks Beginner, Frameworks, JavaScript, Learn, NeedsTranslation, TopicStub, client-side
JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience.
173 GettHello Reacting started with React
This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.
174 Understanding client-side web development tools Beginner, CSS, Deployment, HTML, JavaScript, Learn, NeedsTranslation, Tools, TopicStub, Transformation, client-side, linting
Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.
175 Cours express sur la ligne de commande Débutant, Terminal
That brings us to the end of our brief tour of the terminal/command line. Next up we’ll be looking in more detail at package managers, and what we can do with them.
176 Ouvrir un fichier dans un navigateur web Beginner, CodingScripting, NeedsActiveLearning, WebMechanics
Pour ouvrir un fichier dans votre navigateur web, il existe deux méthode :
177 Programmation de Sites Web côté serveur Beginner, CodingScripting, Intro, Landing, Learn, NeedsTranslation, Server, Server-side programming, Topic, TopicStub
Le sujet abordant les sites web dynamiques / la programmation coté serveur est une série de modules vous montrant comment créer un site web dynamique (sites web intereagissant avec vous de manière à vous donner des informations personnelles en réponse aux requêtes HTTP). Les modules fournissent une introduction universelle à la programmation coté serveur à travers des guides spécifiques pour les debutants vous montrant comment vous servir des infrastructure d'application (aussi appelé frameworks) Django (fait en Python) et Express(fait en Node.js/JavaScript) afin de créer des applications basiques.
178 Django Web Framework (Python) Apprendre, Débutant, Python, django
Django est une infrastructure d'application (aussi appelé framework) côté serveur extremement populaire et dotée de beaucoup de fonctionnalités, écrite en Python. Ce module vous montrera pourquoi Django fait partie des frameworks web les plus populaires ainsi que comment l'installer, le mettre en place, et s'en servir afin de créer vos propres applications web.
179 Django Didactique: Site web "Bibliothèque locale" Apprentissage, Article, Didacticiel, Débutant, Guide, django
Le premier article de cette série didactique explique ce que vous apprendrez et donne un aperçu du site Web "Bibliothèque locale", un exemple, qui va être utiliser et évoluer dans les articles suivants.
180 Django Tutorial Part 10: Testing a Django web application Beginner, CodingScripting, Django Testing, Testing, Tutorial, django, server-side, tests, unit tests
Quant un site web grandit, il devient plus difficile à tester manuellement. Non seulement il y a plus de choses à tester, mais encore, comme les interactions entres ses composants deviennent plus complexes, un léger changement dans une partie de l'application peut affecter les autres parties, si bien qu'il va être nécessaire de faire beaucoup de modifications pour s'assurer que tout continue de fonctionner, et qu'aucune erreur ne sera introduite quand il y aura encore plus de modifications. Une façon de limiter ces problèmes est d'écrire des tests automatiques qui puissent être lancés d'une manière simple et fiable à chaque fois que vous faites une modification. Ce tutoriel montre comment automatiser des tests unitaires sur votre site web en utilisant le framework de tests de Django.
181 Django Tutorial Part 9: Working with forms Beginner, CodingScripting, DjangoForms, Forms, HTML forms, Learn, Tutorial, django, server side
Dans cette formation nous allons vous montrer comment travailler avec les formulaires HTML sous Django afin de créer, modifier et supprimer des instances de modèle. Pour illustrer le raisonnement, nous allons étendre le site web LocalLibrary pour permettre aux bibliothécaires d'utiliser nos formulaires (plutôt que l'application d'administration par défaut) pour prolonger la durée de prêt des livres, et également pour ajouter, mettre à jour et supprimer des auteurs.
182 Django didactique Section 2: Créer le squelette du site web Apprentissage, Article, Didactitiel, Débutant, Guide, Intro, Programmation, Tutoriel, django
Ce second article de la série didactique Django va décrire comment créer le squelette du site web du projet. Ensuite, vous pourrez paramètrer et développer les composants spécifiques comme les modèles de données, les vues, les gabarits, les formulaires...
183 Django didactique Section 3: Utilisation des modèles de données
Ce troisième article est consacré aux modèles de données pour les sites web générés avec Django. Après une définition et une présentation de la notion de modèle de données, il explique comment les déclarer, choisir le type de champs et quelques méthodes d'accès au modèle de données via Django.
184 Django didactique Section 4: Site d'administration de Django Apprentissage, Article, Didacticiel, Débutant, Python, django, django_admin
Nous avons créé le modèle de données pour le site web de la bibliothèque locale. Dans ce chapitre nous allons utiliser le site d'administration pour introduire des données réelles pour les livres. Dans un premier temps, nous aborderons la manière d'enregistrer les données des objets sur le site d'administration et comment se connecter au site et créer des données. La fin de ce chapitre sera dédié à des éléments d'amélioration possible du site d'administration.
185 Django didactique Section 5: Créer la page d'accueil Article, Cadriciel, Code, Didactique, Django (Vues), Django (gabarits), Débutant, Programmation, Python, django
Le travail préparatoire pour nous permettre de créer une page d'accueil pour le site web de la bibliothèque locale est réalisé. La page d'accueil montera le nombre d'enregistrements pour chacun des objets décrits dans la base et les liens à l'aide d'une barre latérale de navigation. Dans la progression de l'article, nous apprendrons à gérer les vues et à présenter les données à l'aide de gabarits.
186 Introduction à Django Débutant, Python, django
Dans ce premier article sur Django, nous allons répondre à la question suivante "Qu'est ce que Django ?", et nous vous montrerons en quoi cette infrastructure d'application (aussi appelée framework) est spéciale. Nous allons ensuite voir les principales fonctionnalités, mais aussi quelques fonctionnalités avancées que nous n'aurons malheureusement pas le temps de voir en détails dans ce module. Nous allons aussi vous montrer comment fonctionne une application Django (bien que nous n'ayons pas d'environnement où le tester)
187 Mettre en place un environnement de développement Django
Maintenant que vous savez à quoi sert Django, nous allons vous montrer comment mettre en place et tester un environnement de développement Django sous Windows, Linux (Ubuntu) et macOS — Peu importe votre système d'exploitation, cet article devrait vous fournir de quoi commencer à développer des applications Django.
188 Tutoriel Django - 6e partie : Vues génériques pour les listes et les détails Beginner, Learn, Tutorial, django, django templates, django views
Congratulations, our basic library functionality is now complete!
189 Express Web Framework (Node.js/JavaScript) Apprentissage, Débutant, Express, Express.js, Programmation côté client, Programmation côté serveur
Express est une infrastructure d'application (framework), écrit en JavaScript et hébergée dans l'environnement d'exécution node.js. Cette section explique certains de ses principaux avantages, comment configurer votre environnement de développement et comment effectuer des tâches courantes de développement et de déploiement.
190 Introduction Express/Node Débutant, Express, Node, Serveur, nodejs
Congratulations, you've completed the first step in your Express/Node journey! You should now understand Express and Node's main benefits, and roughly what the main parts of an Express app might look like (routes, middleware, error handling, and template code). You should also understand that with Express being an unopinionated framework, the way you pull these parts together and the libraries that you use are largely up to you!
191 Premiers pas dans la programmation d'un site côté serveur Débutant, Encodage, Guide, Intro, Programmation côté serveur
Dans ce module nous répondrons à quelques questions fondamentales sur la programmation côté serveur — "Qu'est-ce que c'est ?", "En quoi diffère-t-elle de la programmation côté client ?" et "Pourquoi est-ce si utile ?". Nous fournirons ensuite un aperçu de certaines infrastructures d'applications web (aussi appelé frameworks) côté serveurs parmi les plus populaires, ainsi que des conseils pour sélectionner la plus approprié pour créer votre premier site. Enfin un article vous présentera les questions de sécurité pour un serveur web.
192 La relation Client-Serveur
À ce stade, vous devez avoir une bonne vue d'ensemble des opérations que le code côté serveur doit effectuer et connaître certaines des manières dont une infrastructure Web côté serveur peut faciliter cela.
193 La sécurité d'un site Web Débutant, Guide, Sécurité, Sécurité Web
La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes.
194 Les frameworks web côté serveur Débutant, Guide, Server, Web
This article has shown that web frameworks can make it easier to develop and maintain server-side code. It has also provided a high level overview of a few popular frameworks, and discussed criteria for choosing a web application framework. You should now have at least an idea of how to choose a web framework for your own server-side development. If not, then don't worry — later on in the course we'll give you detailed tutorials on Django and Express to give you some experience of actually working with a web framework.
195 Présentation du côté serveur Apprendre, Débutant, Guide, Intro, Programmation côté serveur, Serveur
Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web.
196 Publier sur le Web : combien ça coûte ? Beginner, Learn, WebMechanics
Lorsqu'on lance un site web, on peut très bien ne rien payer ou, au contraire, dépenser de façon astronomique. Dans cet article, nous verrons les coûts associés à chaque étape et ce à quoi s'attendre en fonction de ce qu'on paye (ou qu'on ne paye pas).
197 Qu'est-ce que l'accessibilité ? Accessibility, Beginner, Intro, NeedsActiveLearning, Web
Que ce soit en raison de limitations physiques ou techniques, il peut arriver que les visiteurs de votre site web ne peuvent l'utiliser comme vous le pensiez. Dans cet article, vous trouverez quelques principes généraux à propos de l'accessibilité, ainsi que quelques règles que nous expliquerons.
198 Questions fréquentes Learn, Web, WebMechanics
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 HTML ou CSS.) Ces articles sont conçus pour être lus de manière indépendante.
199 Comment configurer un serveur de test local ? Apprendre, Débutant, Express, Flask, Node, PHP, Python, Serveurs, django, lamp, localhost
Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant Fichier > Ouvrir... et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver.
200 Qu'est-ce qu'un serveur web ? Beginner, Infrastructure, Learn
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.
201 SSL et TLS Security, Tutorial
Les protocoles Secure Sockets Layer (SSL) (ou Couche de sockets sécurisée) et Transport Layer Security (TLS) (ou Couche de transport sécurisée) sont des protocoles universellement acceptés pour l'établissement de communications authentifiées et chiffrées entre des clients d'une part et des serveurs d'autre part. L'authentification liée au serveur et celle liée au client utilisent toutes les deux SSL/TLS.
202 Sécurité TCP/IP Beginner, Networking, Security, Tutorial
TCP/IP est très largement utilisé afin de transmettre les communications sur le réseau. Les communications TCP/IP se composent de quatre couches qui fonctionnent ensemble. Lorsqu'un utilisateur souhaite transférer des données sur un/des réseau(x), les données sont passées de la couche la plus haute à la couche la plus basse et chaque couche ajouter des informations. À chaque niveau, l'unité logique qui est manipulée est généralement composées d'un en-tête et d'une charge utile. La charge utile correspond à l'information passée depuis la couche précédente. L'en-tête contient des informations spécifiques à la couche courante (telles que les adresses utilisées). Au niveau de la couche applicative, la charge utile correspond aux données transmises. La couche la plus basse envoie les différentes données via le réseau physique. Une fois arrivée à destination, les données repassent vers les couches les plus hautes. En résumé, les données produites par une couche sont encapsulées dans un conteneur plus grand dans la couche inférieure. Les quatres couches qui permettent à TCP/IP de fonctionner sont présentées ci-après, de la plus haute à la plus basse :
203 Tester le bon fonctionnement de votre site web Beginner, Document, Guide, NeedsActiveLearning, Web, Web Development, WebMechanics
Vous avez donc publié votre site web en ligne. Bien. Mais êtes-vous sûr-e que celui-ci fonctionne correctement ?
204 Threats Beginner, Learn, Security, Tutorial
Une menace correspond à toute circonstance ou événement qui peut impacter négativement des données ou des systèmes à cause d'un accès non-autorisé, d'une destruction (partielle ou totale), d'une divulgation ou de la modification d'informations. Cela peut aussi être un déni de service. Les menaces peuvent impliquer des acteurs intentionnels (par exemple un attaquant qui souhaite accéder à des informations sur un serveur) ou accidentels  (par exemple un administrateur qui oublie de désactiver le compte d'un ancien employé).  Les menaces peuvent être locales (un employé mécontent par exemple) ou éloignées (un attaquant à distance sur un autre continent).
205 Transférer des fichiers vers un serveur web Beginner, NeedsActiveLearning, WebMechanics
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 FTP.
206 Tutoriels Index, NeedsTranslation, TopicStub
No summary!
207 Comment construire un site web Beginner, Index, NeedsContent
Lorsqu'il s'agit d'apprendre la conception et le développement web, beaucoup souhaitent construire leur site web le plus rapidement possible. Pour faciliter votre progression, nous avons organisé et listé ici les connaissances minimales à acquérir.
208 Les bases de la sécurité informatique Beginner, Landing, Learn, Security
Comprendre les bases de la sécurité informatique vous permettra de réaliser l'importance et le rôle de la sécurité au cours du développement d'un projet. Cela vous aidera à éviter d'utiliser des logiciels superflus qui seraient dangereux et qui permettraient à des attaquants d'exploiter des faiblesses à des fins malhonnêtes. Protégez-vous et vos utilisateurs en mettant en pratique les concepts de bases liés à la sécurité.
209 Utiliser les pages GitHub Débutant, GitHub, Guide, Web, git
GitHub est un outil très populaire et important à l'heure actuelle. Git est un logiciel de gestion de version reconnu, utilisé par de nombreuses entreprises. GitHub possède notamment une fonctionnalité : les pages GitHub. Celles-ci vous permettent de publier un site web sur Internet.