191 pages trouvées :
| N° | Page | Étiquettes et résumé |
|---|---|---|
| 1 | Apprendre le développement Web | Apprendre, Débutant, 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 | HTML : une bonne base pour l'accessibilité | |
| You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will also fill in some gaps in this knowledge, but this article has taken care of the basics. Next up we'll explore CSS and JavaScript, and how accessibility is affected by their good or bad use. | ||
| 4 | Qu'est ce que l'accessibilité? | Accessibilité, Aide technique, Apprendre, Article, CSS, Clavier, HTML, JavaScript, Lecteur d'écran, Outils, Utilisateurs |
| This article should have given you a useful high level overview of accessibility, shown you why it's important, and looked at how you can fit it into your workflow. You should now also have a thirst to learn about the implementation details that can make sites accessible, and we'll start on that in the next section, looking at why HTML is a good basis for accessibility. | ||
| 5 | Apprendre le HTML : guides et didacticiels | Apprentissage, Débutant, Guide, HTML, Introduction, Rubrique |
| No summary! | ||
| 6 | 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. | ||
| 7 | 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 : | ||
| 8 | 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. | ||
| 9 | Ajouter des images vectorielles à une page web | Graphics, Guide, HTML, Intermediate, Learn, SVG |
| No summary! | ||
| 10 | 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. | ||
| 11 | 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. | ||
| 12 | 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 . | ||
| 13 | 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é. | ||
| 14 | Annoter des images et graphiques | Accessibility, Beginner, Guide, HTML, Learn |
| Une figure est une unité de contenu indépendante : | ||
| 15 | 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. | ||
| 16 | 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. | ||
| 17 | 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. | ||
| 18 | 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 ? | ||
| 19 | 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 : | ||
| 20 | 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 : | ||
| 21 | 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 : | ||
| 22 | 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 : | ||
| 23 | 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. | ||
| 24 | 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. | ||
| 25 | 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. | ||
| 26 | 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. | ||
| 27 | 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(). |
||
| 28 | 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. | ||
| 29 | 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. | ||
| 30 | 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. | ||
| 31 | 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. | ||
| 32 | 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. | ||
| 33 | 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. |
||
| 34 | 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. | ||
| 35 | 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. | ||
| 36 | Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML | |
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. |
||
| 37 | 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 : | ||
| 38 | 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. | ||
| 39 | 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.). | ||
| 40 | 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. | ||
| 41 | 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. | ||
| 42 | 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. | ||
| 43 | 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. | ||
| 44 | Multimédia et Intégration | Apprentissage, Audio, Codage, Débutant, Evaluation, Flash, Guide, HTML, Images, Interactivité, SVG, Video, iframes, imagemaps |
| Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : introduction au HTML. Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer. | ||
| 45 | Contenu audio et video | 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 video 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. |
||
| 46 | 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. |
||
| 47 | Les images en HTML | |
Au début, le Web n'était que texte et c'était vite 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 . |
||
| 48 | É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 ! | ||
| 49 | É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. | ||
| 50 | 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. | ||
| 51 | Coder et scripter | CodingScripting |
| REDIRECT Learn | ||
| 52 | 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. | ||
| 53 | 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. | ||
| 54 | 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. | ||
| 55 | 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. | ||
| 56 | 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 ! | ||
| 57 | 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 : | ||
| 58 | 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 : | ||
| 59 | 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. | ||
| 60 | 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. | ||
| 61 | 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. | ||
| 62 | 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. | ||
| 63 | 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 : | ||
| 64 | Apprendre à utiliser CSS pour résoudre des problèmes | Apprendre, CSS, Débutant |
| No summary! | ||
| 65 | 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. | ||
| 66 | 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. | ||
| 67 | 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. | ||
| 68 | 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. | ||
| 69 | 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. | ||
| 70 | 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. | ||
| 71 | 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. | ||
| 72 | 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. | ||
| 73 | 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. | ||
| 74 | Introduction aux CSS | Apprendre, CSS, Cascade, Codage, Couleurs, Débutant, Feuilles de styles, Héritage, Introduction, Modules, Propriétés, Règles, Site Web, Styles, Sélecteurs, Unités |
| CSS est utilisé pour styliser et composer des pages Web — par exemple, pour modifier la police, la couleur, la taille et l'espacement du contenu, le diviser en plusieurs colonnes ou ajouter des animations et d'autres éléments décoratifs. Ce module vous permet de commencer sur le chemin de la maîtrise du CSS avec les bases de son fonctionnement, y compris les sélecteurs et les propriétés, l'écriture des règles CSS, l'application du CSS au HTML, comment spécifier la longueur, la couleur et d'autres unités en CSS, la cascade et l'héritage, et le débogage du CSS. | ||
| 75 | Cascade et héritage | Apprendre, Article, CSS, Cascade, Codage, Débutant, Feuilles de style, Guide, Héritage, Mise en page, Style, importance, ordre du source, spécificité |
| Dans un article précédent, nous avons vu les divers sélecteurs CSS. Au fur et à mesure de leur utilisation, il pourra arriver que plusieurs règles, plusieurs sélecteurs s'appliquent au même élément. Dans un tel scénario, quelle règle CSS sera finalement appliquée à l'élément ? La chose est contrôlée par un mécanisme nommé Cascade ; il est également lié à la notion d'héritage (éléments prenant des valeurs de propriétés de leur parent, mais pas d'autres). Dans cet article, nous définirons ce qu'est la cascade dans les CSS, quelles sont ses particularités, son importance et comment les propriétés sont héritées à partir des diverses règles. | ||
| 76 | Combinaisons et groupes de sélecteurs | Apprendre, Article, CSS, Débutant, Guide, Sélecteurs |
| Dans notre dernier article à propos des sélecteurs, nous examinerons les combinaisons et les groupes de sélecteurs — deux moyens de combiner plusieurs sélecteurs entre eux pour des capacités de sélection plus poussées. | ||
| 77 | Compréhension des fondements des CSS | CSS, Codage, Commentaires, Débutant, Evaluation, Règles, Style, Syntaxe, Sélecteurs, modèle de boîte |
| Beaucoup de choses ont été passées en revue dans ce module, donc il est bon d'avoir atteint la fin ! La dernière étape avant de passer à la suite est de tenter une évaluation sur les thèmes de ce module — elle comprend un certain nombre d'exercices connexes à compléter pour créer la composition finale — une carte de visite / carte de joueur / un profil de média social. | ||
| 78 | Débogage des CSS | Article, CSS, Codage, Guide, Inspecteur, Inspecteur DOM, débogage, linting, validateur, Éditeur de CSS |
| Dans le dernier article de ce module, nous examinons les principes du débogage des CSS, y compris l'exploration de la CSS appliquée à une page et autres outils pouvant vous aider à trouver des erreurs dans le code CSS. | ||
| 79 | La disposition en CSS | Apprendre, CSS |
| Pour organiser un document en positionnant ses éléments pour que la forme corresponde aux spécifications, on utilisera différentes propriétés CSS afin d'organiser la disposition des élément. | ||
| 80 | La syntaxe CSS | CSS, Codage, Commentaires, Débutant, Règles, Syntaxe, Sélecteurs, blancs, blocs, condensats, declarations |
| En continuant, nous plongeons dans la syntaxe CSS de manière beaucoup plus détaillée, en examinant comment les propriétés et leurs valeurs forment des déclarations, des déclarations multiples forment des blocs de déclarations et les blocs de déclarations et les sélecteurs forment des règles CSS complètes. Nous complétons l'article en examinant d'autres caractéristiques syntaxiques CSS telles que les commentaires et les blancs. | ||
| 81 | Le fonctionnement des CSS | CSS, Codage, DOM, Externe, Guide, Interne, Learn, Link, Syntaxe, ligne |
| CSS (Cascading Style Sheets) permet de créer de belles pages web. Mais qu'en est-il sous le capot ? Cet artice explique ce que sont les CSS, comment le navigateur transforme le HTML en Modèle d'Objet Document (Document Object Model — DOM), comment les CSS sont appliquées aux parties du (DOM). Nous verrons également quelques exemples de syntaxe élémentaire et quel est le code utilisé pour incorporer réellement les CSS dans la page web. | ||
| 82 | Le modèle de boîte | Apprendre, Apprentissage, Article, Bloc, Boîte, Boîtes, CSS, Codage, Contenu, Débutant, En ligne, Guide, Hauteur, Largeur, Learn, Modèle, débordement, découpage du fond, encadrement, marge, remplissage |
 |
||
| 83 | Les sélecteurs | Apprendre, Article, CSS, Classe, Combinaison, Débutant, Guide, Identifiants, Pseudo-classe, Pseudo-element, Sélecteurs, universel |
| Dans les CSS, les sélecteurs sont utilisés afin de cibler les éléments HTML d'une page web à mettre en forme. Il y a une grande variété de sélecteurs disponibles dans les CSS, permettant une grande précision dans le choix d'un élément à composer. Dans les quelques articles suivants, nous allons parcourir les divers types dans le détail en montrant comment ils fonctionnent. | ||
| 84 | Pseudo-classes et pseudo-éléments | Apprendre, Article, CSS, Débutant, Guide, Pseudo, Pseudo-classe, Pseudo-element, Sélecteurs |
| Dans cet article, le troisième de notre série sur les sélecteurs, nous parlerons des pseudo-sélecteurs. Ces derniers ne sélectionnent pas des éléments à proprement parler, mais plutôt des parties d'éléments, ou des éléments dans un certain contexte uniquement. Ils comportent deux types principaux : les pseudo-classes et les pseudo-éléments. | ||
| 85 | Sélecteurs d'attribut | |
Les sélecteurs d'attribut sont une variété particulière de sélecteurs qui font correspondre des éléments selon leur attribut attributes ou leur valeur d'attribut. Leur syntaxe de base est composée de crochets ([]) entourant un nom d'attribut suivi d'une condition optionnelle sur la concordance de la valeur de l'attribut. Les sélecteurs d'attribut comportent deux catégories selon la manière dont ils font correspondre les valeurs d'attribut : sélecteurs d'attribut Présence et valeur et sélecteurs d'attribut Valeur de sous-chaîne. |
||
| 86 | Sélecteurs simples | Apprendre, Article, CSS, Classe, Débutant, Element, Guide, Sélecteurs, Type, id, universel |
| Ce sélecteur, insensible à la casse dans son écriture, établit une correspondance entre nom d'élément HTML donné et nom de sélecteur. C'est le moyen le plus simple pour cibler tous les éléments d'un type donné. Voyons un exemple. | ||
| 87 | Valeurs et unités CSS | Article, CSS, Codage, Composition en HTML, Couleurs HTML, Couleurs dans les CSS, Débutant, Fonctions, Guide, Longueur, Styles HTML, Unités, Unités dans les CSS, couleur |
| Il existe plusieurs types de propriétés CSS à considérer : des valeurs numériques aux couleurs, jusqu'aux fonctions accomplissant une action particulière (comme charger une image de fond ou appliquer une rotation sur un élément). Certaines d'entre elles attendent des unités particulières pour définir les valeurs exactes qui les représentent — voulez-vous que la boîte ait une largeur de 30 pixels, de 30 centimètres, ou de 30 ems ? Dans ce guide, nous examinerons les valeurs les plus courantes, comme la longueur, la couleur et les fonctions simples. Nous aborderons aussi d'autres unités moins courantes, telles que les degrés et même les valeurs numériques sans unité. | ||
| 88 | 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à : | ||
| 89 | Cours normal | |
| Cet article expose le cours normal (déroulement normal) ou la façon dont les éléments de la page Web se présentent si vous ne modifiez pas leur mise en page. | ||
| 90 | 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. | ||
| 91 | 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 unidimensionnelle pour 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. | ||
| 92 | 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. |
||
| 93 | 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. |
||
| 94 | 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. |
||
| 95 | 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. | ||
| 96 | Trames | 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. | ||
| 97 | 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). | ||
| 98 | 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. | ||
| 99 | Style de boîtes | Arrières-plans, Bordures, Boîtes, CSS, Débutant, Style, Tableaux |
| Bonjour et bienvenue dans les styles de boîtes CSS — dans le précédent module, nous avons examiné le contenu des boîtes ; dans ce module, nous verrons le style de la boîte elle-même, en manipulant couleur de fond et images, bordures et autres parties de la boîte. Nous aborderons également d'autres sujets, de la création de tableaux HTML de bel aspect à l'application d'effets avancés tels que les filtres et les modes de fusion. | ||
| 100 | Arrière-plan & CSS | Article, CSS, Codage, Couleurs, Débutant, Dégradés, Guide, Images, Liaisons, Position, arrière-plans |
| En CSS vous pouvez faire beaucoup de choses pour styliser l'arrière-plan du contenu. Nous avons déjà vu quelques utilisations simples, comme couleurs et images de fond ; dans cet article, nous vous disons tout et examinons quelques fonctionnalités avancées telles que arrière-plans à plusieurs images et dégradés de couleur. | ||
| 101 | Creation d'un en-tête de papier à lettre élégant | Arrière‑plan, Boîte, Boîtes, CSS, Codage, Débutant, Evaluation, encadrement, en‑tête de lettre, lettre, lettre avec en‑tête, papier |
| Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à en-tête peut vraiment être un bon début. Dans cet execice, le défi à relever consiste à créer un modèle en ligne pour obtenir ce bel aspect. | ||
| 102 | 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. | ||
| 103 | Encadrements et CSS | Article, CSS, Cadres, Codage, Débutant, Guide, Images, Rayon, encadrement, rayons |
| Nous avons déjà vu les encadrements un peu plus haut dans la Zone d'apprentissage — une utilisation simple comme la définition de leur couleur et de leur style. Dans cet article, nous allons faire une brève récapitulation, puis donner une idée de ce qu'il est encore possible de faire, comme les coins arrondis et les images d'encadrement. | ||
| 104 | Le modèle de boîte : récapitulatif | Article, Boîtes, CSS, Codage, Débutant, Guide, Mise en page, modèle de boîte |
| Nous avons examiné les bases du modèle de boîte CSS dans notre module Introduction à CSS. Cet article en est une récapitulation tout en donnant plus de détails sur le sujet. | ||
| 105 | 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. | ||
| 106 | Une boîte d'aspect rafraîchissant | Apprentissage, Arrière‑plans, Boîte, CSS, Débutant, Evaluation, effets, encadrement, modèle de boîte |
| Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création de boîtes d'aspect rafraîchissant en faisant en sorte qu'elles attirent le regard. | ||
| 107 | 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. | ||
| 108 | 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. | ||
| 109 | 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 : | ||
| 110 | 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. | ||
| 111 | 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 : | ||
| 112 | 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. | ||
| 113 | 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. | ||
| 114 | 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. | ||
| 115 | 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. | ||
| 116 | 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 : | ||
| 117 | 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) : | ||
| 118 | Index | Index, Learn, MDN, Meta |
| 167 pages trouvées : | ||
| 119 | 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é. | ||
| 120 | 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. | ||
| 121 | APIs tierces | API, Apprendre, Codage, Débutant, Google Maps, NYTimes, youtube |
| Les APIs que nous avons vu jusqu'à présent sont intégrées dans le navigateur, mais ce n'est pas le cas de toutes. De nombreux gros sites web tels que Google Maps, Twitter, Facebook, PayPal, etc, fournissent des APIs permettant aux développeurs d'utiliser leurs données (par exemple pour afficher un flux twitter sur un blog) ou service (par exemple afficher une carte Google Maps sur un site, ou utiliser Facebook pour permettre aux utilisateurs de se connecter). Cet article compare les APIs du navigateur aux APIs tierces et montre quelques utilisations typiques de ces dernières. | ||
| 122 | 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. |
||
| 123 | 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. |
||
| 124 | 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. | ||
| 125 | 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. |
||
| 126 | 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. | ||
| 127 | 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 sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur, et plus encore. Cet article explique les fondamentaux pour y parvenir. | ||
| 128 | 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 de pratiques 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. | ||
| 129 | Ajouter des fonctionnalités à notre démo de balles rebondissantes | |
| In this assessment, you are expected to use the bouncing balls demo from the previous article as a starting point, and add some new and interesting features to it. | ||
| 130 | 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! | ||
| 131 | 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é. | ||
| 132 | 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. | ||
| 133 | 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. | ||
| 134 | 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 le JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON. | ||
| 135 | 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. | ||
| 136 | 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 : | ||
| 137 | 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 ! | ||
| 138 | 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. | ||
| 139 | 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. | ||
| 140 | 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 aucun 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 repose sur le traitement de données numériques, le calcul de nouvelles valeurs, etc. ; et donc, vous ne serez pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques. | ||
| 141 | 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. | ||
| 142 | 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 fonctionne (et d'autres langages de programmation). Dans les articles suivants, vous reviendrez sur toutes ces fonctionnatés de manière plus détaillée ! | ||
| 143 | 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. | ||
| 144 | Qu’est-ce que le JavaScript? | |
| 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 parties de la Learning Area. | ||
| 145 | 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. | ||
| 146 | 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 donc les détailler. | ||
| 147 | Construire vos propres fonctions | Apprentissage, Article, Débutant, Fonctions, Guide, I10n, JavaScript, Paramètres, Scripting, Tutoriel |
| Nous avons traité essentiellement de la théorie dans l'article précédent, celui-ci 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. | ||
| 148 | 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. | ||
| 149 | Galerie d'images | |
| Maintenant que nous avons examiné les blocks fondamentaux de construction de JavaScript, nous testerons 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 | ||
| 150 | Introduction aux évènements | Article, Codage, Débutant, Gestionnaire d'évènements, Guide, JavaScript, évènements |
| 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'informations. 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. | ||
| 151 | 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. | ||
| 152 | Prendre des décisions dans le code — conditions | Article, CodingScripting, Conditionnel, Débutant, JavaScript, Switch, conditions, else, if, ternaire |
 |
||
| 153 | Valeurs de retour des fonctions | |
| 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 valeurs 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 par la suite. | ||
| 154 | Résoudre des problèmes communs dans vos codes Javascript | Apprendre, Débutant, JavaScript |
| The following links point to solutions to common everyday problems you'll need to fix in order to get your JavaScript code to run correctly. | ||
| 155 | 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. | ||
| 156 | 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é. | ||
| 157 | 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. | ||
| 158 | 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. | ||
| 159 | 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. | ||
| 160 | 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. | ||
| 161 | 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. | ||
| 162 | 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. | ||
| 163 | 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 coutourner les problèmes, faire fonctionner les fonctionnalités modernes de Javascript sur des vieux navigateurs, et plus encore. | ||
| 164 | 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?" | ||
| 165 | 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 ?" | ||
| 166 | Ouvrir un fichier dans un navigateur web | Beginner, CodingScripting, NeedsActiveLearning, WebMechanics |
| Pour ouvrir un fichier dans votre navigateur web, il existe deux méthode : | ||
| 167 | 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 wite 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. | ||
| 168 | Django Web Framework (Python) | Apprendre, Débutant, Python, django |
| Django est une infrastructure d'application (aussi appelé framework) coté serveur extremement populaire et doté de beaucoup de fonctionnalités, écrit en Python. Ce module vous montrera pourquoi Django fait partie des frameworks web les plus populaire ainsi que comment l'installer, le mettre en place et s'en servir afin de créer vos propres applications web. | ||
| 169 | Django Tutorial Part 9: Working with forms | |
| Creating and handling forms can be a complicated process! Django makes it much easier by providing programmatic mechanisms to declare, render and validate forms. Furthermore, Django provides generic form editing views that can do almost all the work to define pages that can create, edit, and delete records associated with a single model instance. | ||
| 170 | Django introduction | |
| Congratulations, you've completed the first step in your Django journey! You should now understand Django's main benefits, a little about its history, and roughly what each of the main parts of a Django app might look like. You should have also learned a few things about the Python programming language, including the syntax for lists, functions, and classes. | ||
| 171 | Express Web Framework (Node.js/JavaScript) | |
| 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. | ||
| 172 | Introduction Express/Node | |
| 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! | ||
| 173 | Premiers pas dans la programmation d'un site côté serveur | Débutant, Encodage, Guide, Intro, Programmation côté serveur |
| Dans notre module de programmation côté serveur, 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 (aussi appelé frameworks) web côté serveurs les plus populaires, ainsi que des conseils sur la façon de selectionner celui qui sera le plus approprié pour créer votre premier site. Enfin nous vous fournirons un article d'introduction concernant la sécurité d'un serveur web. | ||
| 174 | Introduction to the server side | 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 d'un point de vue de haut niveau, 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 la puissance disponible aux sites web grâce à la programmation côté serveur. | ||
| 175 | La relation Client-Serveur | |
| At this point you should have a good overview of the operations that server-side code has to perform, and know some of the ways in which a server-side web framework can make this easier. | ||
| 176 | La sécurité d'un site Web | Débutant, Guide, Sécurité, Sécurité Web |
| La sécurité des sites 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. | ||
| 177 | 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. | ||
| 178 | 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). | ||
| 179 | 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. | ||
| 180 | 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. | ||
| 181 | 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 lu de manière indépendante. | ||
| 182 | Comment configurer un serveur de test local ? | Apprendre, Débutant, Express, Flask, Node, PHP, Python, Serveurs, django, lamp |
| Dans la plupart de la section apprentissage du site, nous vous disons simplement d'ouvrir vos exemples directement dans votre 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. | ||
| 183 | 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. | ||
| 184 | 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 : | ||
| 185 | 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 ? | ||
| 186 | 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). | ||
| 187 | 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. | ||
| 188 | Tutoriels | Index, NeedsTranslation, TopicStub |
| No summary! | ||
| 189 | 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. | ||
| 190 | 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é. | ||
| 191 | 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. | ||
Étiquettes et contributeurs liés au document
Étiquettes :
Contributeurs à cette page :
SphinxKnight
Dernière mise à jour par :
SphinxKnight,