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