1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
---
title: Tutoriels
slug: Web/Tutorials
tags:
- CSS
- Code
- Design
- Débutant
- Fondamentaux du Web
- JavaScript
- MDN
- Tutoriel
translation_of: Web/Tutorials
original_slug: Web/Tutoriels
---
<p><font><font>Les liens présents sur cette page mènent à un grand nombre de tutoriels et d'outils pédagagiques. </font><font>Que vous soyez débutant ou expérimenté, vous pourrez trouver ici de précieuses ressources sur les meilleurs pratiques du développement web. Ces ressources sont écrites par des entreprises visionnaires </font><font>et des développeurs qui ont adoptés des normes ouvertes et de bonnes pratiques en développement web qui fournissent ou autorisent la traduction de ces informations, au travers de licences libres tel que celle de Creative Commons. </font></font></p>
<table class="topicpage-table">
<tbody>
<tr>
<td>
<h2 class="Documentation" id="Documentation" name="Documentation"><font><font>Tutoriels HTML</font></font></h2>
<h3 id="Introduction"><font><font>Introduction</font></font></h3>
<dl>
<dt><a href="https://webplatform.github.io/docs/guides/the_basics_of_html/" lang="en">Introdution à HTML</a> <font><font>(WebPlatform.org)</font></font></dt>
<dd>Qu'est-ce que le HTML ? Origine, utilité et structure d’un document HTML. Cet article présente les principaux éléments qui composent une page HTML. Les suivants présentent les éléments individuels qui composent HTML plus en profondeur.</dd>
<dt><a href="http://reference.sitepoint.com/html/page-structure" lang="en" rel="external"><font><font>Structure de base d'une page web</font></font></a><font><font> (SitePoint)</font></font></dt>
<dd><font><font>Apprendre comment les éléments HTML s'assemblent pour former une page web.</font></font></dd>
<dt><a href="http://reference.sitepoint.com/html/elements" lang="en" rel="external"><font><font>Balises HTML de base</font></font></a><font><font> (SitePoint)</font></font></dt>
<dd><font><font>Description des différents types d'éléments utilisés pour les documents HTML.</font></font></dd>
<dt><a href="http://htmldog.com/guides/htmlbeginner/" lang="en" rel="external"><font><font>Guide HTML pour débutant</font></font></a><font><font> (HTML Dog)</font></font></dt>
<dd><font><font>Articles et exercices pour apprendre les bases.</font></font></dd>
<dt><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" lang="en" rel="external"><font><font>Challenges HTML</font></font></a><font><font> (Wikiversity)</font></font></dt>
<dd><font><font>Améliorer ses compétences avec des challenges HTML.</font></font></dd>
<dt><a href="/fr/docs/Web/HTML/Element"><font><font>Référence des balises HTML sur le MDN</font></font></a></dt>
<dd><font><font>Référence complète des balises HTML et leur support par Firefox et les autres navigateurs.</font></font></dd>
<dt><a href="http://codeavengers.com/" hreflang="en" lang="en" title="http://codeavengers.com/"><font><font>CodeAvengers</font></font></a><font><font> (CodeAvengers.com)</font></font></dt>
<dd><font><font>Une introduction au développement d'application ou de jeux web avec HTML, CSS et JavaScript.</font></font></dd>
</dl>
<h3 id="Niveau_intermediaire">Niveau intermediaire</h3>
<dl>
<dt><a href="/fr/docs/Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide"><font><font>Astuces pour accélerer les pages HTML</font></font></a></dt>
<dd><font><font>Optimiser les pages pour un site plus réactif et réduire la charge du serveur web.</font></font></dd>
<dt><a href="http://diveintohtml5.info/" lang="en" rel="external"><font><font>Plonger dans HTML5</font></font></a><font><font> (Mark Pilgrim)</font></font></dt>
<dd><font><font>Découverte des fonctionnalités d'HTML5, la dernière version de la spécification HTML.</font></font></dd>
<dt><a href="http://www.html5rocks.com/tutorials/" lang="en" rel="external"><font><font>Tutoriel HTML5</font></font></a><font><font> (HTML5 Rocks)</font></font></dt>
<dd><font><font>Laissez-nous vous guider dans le labyrinthe HTML5.</font></font></dd>
<dt><a href="http://www.alistapart.com/articles/semanticsinhtml5/" lang="en" rel="external"><font><font>La sémantique HTML5</font></font></a></dt>
<dd><font><font>Apprendre les balises HTML, leur usage actuels et leur équivalent passé et à venir.</font></font></dd>
<dt><a href="/fr/docs/Tutoriel_canvas"><font><font>Tutoriel sur les Canvas</font></font></a></dt>
<dd><font><font>Apprendre à dessiner des éléments en utilisant les canvas.</font></font></dd>
<dt><a href="http://html5doctor.com/" lang="en" rel="external"><font><font>HTML5 Doctor</font></font></a></dt>
<dd><font><font>Utiliser HTML5 maintenant.</font></font></dd>
<dt><a href="http://www.elated.com/articles/html5-audio/" lang="en" rel="external"><font><font>Intégration audio avec HTML5</font></font></a></dt>
<dd><font><font>Introduction de la balise HTML5 audio pour inclure facilement du son sur votre page web. </font><font>L'article comprend plusieurs exemples d'utilisation.</font></font></dd>
</dl>
</td>
<td>
<h2 class="Documentation" id="Documentation" name="Documentation"><font><font>Tutoriels Javascript</font></font></h2>
<h3 id="Introduction_2"><font><font>Introduction</font></font></h3>
<dl>
<dt><a href="http://www.codecademy.com/?locale_code=fr"><font><font>Codecademy</font></font></a><font><font> (Codecademy)</font></font></dt>
<dd><font><font>Codecademy est le moyen le plus simple pour apprendre le développement avec JavaScript. </font><font>Interactif, amusant et collaboratif.</font></font></dd>
<dt><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript"><font><font>Démarrer avec JavaScript</font></font></a></dt>
<dd><font><font>Présentation de Javascript et de son utilisation</font></font></dd>
<dt><a href="http://docs.webplatform.org/wiki/concepts/programming/programming_basics" rel="external"><font><font>Programming - The real fundamental</font></font></a><font><font> (WebPlatform.org)</font></font></dt>
<dd><font><font>Introduction à JavaScript, ses possibilités, les bonnes pratiques, pour l'apprecier, et davantage.</font></font></dd>
<dt><a href="http://dev.opera.com/articles/view/javascript-best-practices/" rel="external"><font><font>JavaScript Best Practices</font></font></a><a href="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices" title="http://docs.webplatform.org/wiki/tutorials/javascript_best_practices"> </a><font><font> (WebPlatform.org)</font></font></dt>
<dd><font><font>Consultez les bonnes pratiques les plus courantes, mais pas seulement, pour écrire du JavaScript.</font></font></dd>
<dt><a href="http://codeavengers.com/" lang="en" title="http://codeavengers.com/"><font><font>CodeAvengers</font></font></a><font><font> (CodeAvengers.com)</font></font></dt>
<dd><font><font>Avengers Code est une introduction amusante au développement d'applications web et aux jeux avec HTML, CSS et JavaScript.</font></font></dd>
</dl>
<h3 id="Niveau_intermediaire_2"><font><font>Niveau intermediaire</font></font></h3>
<dl>
<dt><a href="/fr/docs/Web/JavaScript/Une_réintroduction_à_JavaScript"><font><font>Ré-introduction au JavaScript</font></font></a></dt>
<dd><font><font>Résumé de JavaScript destiné aux développeurs intermédiaires.</font></font></dd>
<dt><a href="http://eloquentjavascript.net/" rel="external"><font><font>Eloquent JavaScript</font></font></a></dt>
<dd><font><font>Guide JavaScript complet comprenant des pratiques de niveau intermédiaire et avancé.</font></font></dd>
<dt><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external"><font><font>Les Design Patterns essentiels en Javascript</font></font></a><font><font> (Addy Osmani)</font></font></dt>
<dd><font><font>Les <em>design patterns</em> de base pour JavaScript.</font></font></dd>
<dt><a href="http://www.yuiblog.com/blog/2007/01/24/video-crockford-tjpl/" rel="external"><font><font>The JavaScript programming language</font></font></a><font><font> (YUI Blog)</font></font></dt>
<dd><font><font>Douglas Crockford étudie la position actuelle de JavaScript et son avenir.</font></font></dd>
<dt><a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet"><font><font>Introduction à JavaScript orienté objet</font></font></a></dt>
<dd><font><font>Apprendre la modélisation objet dans Javascript.</font></font></dd>
</dl>
<h3 id="Niveau_avancé"><font><font>Niveau avancé</font></font></h3>
<dl>
<dt><a href="http://ejohn.org/apps/learn/" rel="external"><font><font>Apprendre le JavaScript avancé</font></font></a><font><font> (John Resig)</font></font></dt>
<dd><font><font>Guide JavaScript par John Resig.</font></font></dd>
<dt><a href="http://www.elated.com/articles/javascript-dom-intro/" rel="external"><font><font>Introduction au JavaScript DOM</font></font></a><font><font> (Elated)</font></font></dt>
<dd><font><font>Qu'est-ce que le <em>Document Object Model</em>, et pourquoi il est utile? </font><font>Cette article vous donnera un petit aperçu de la puissance de cette fonctionnalité de JavaScript.</font></font></dd>
<dt><a href="http://yuiblog.com/blog/2006/10/20/video-crockford-domtheory/" rel="external"><font><font>An Inconvenient API: The Theory of the DOM</font></font></a><font><font> (YUI Blog)</font></font></dt>
<dd><font><font>Douglas Crockford explique le "Document Object Model" (DOM).</font></font></dd>
<dt><a href="http://yuiblog.com/blog/2006/11/27/video-crockford-advjs/" rel="external"><font><font>JavaScript avancé</font></font></a><font><font> (YUI Blog)</font></font></dt>
<dd><font><font>Douglas Crockford étudie les modèles que les développeurs peuvent choisir pour la création de leur application.</font></font></dd>
<dt><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external"><font><font>JavaScript Garden</font></font></a></dt>
<dd><font><font>Documentation des fonctionnalités étranges de Javascript.</font></font></dd>
<dt><a href="http://stackoverflow.com/questions/394601/which-javascript-framework-jquery-vs-dojo-vs" rel="external"><font><font>Which JavaScript framework to choose?</font></font></a><font><font> (StackOverflow)</font></font></dt>
<dd><font><font>Conseil pour le choix d'un framework Javascript.</font></font></dd>
<dt><a href="http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/" rel="external"><font><font>Non-blocking JavaScript Downloads</font></font></a><font><font> (YUI Blog)</font></font></dt>
<dd><font><font>Conseil pour accèlerer le chargement des pages avec JavaScript.</font></font></dd>
<dt><a href="/fr/docs/Web/JavaScript/Guide"><font><font>JavaScript Guide</font></font></a></dt>
<dd><font><font>Un guide régulièrement mis à jour qui explique dans le détail les opérations de JavaScript. Il est destiné à tous les niveaux, du néophyte aux utilisateurs plus avancés.</font></font></dd>
</dl>
</td>
</tr>
<tr>
<td colspan="2">
<h2 class="Documentation" id="Documentation" name="Documentation"><font><font>Tutoriels CSS</font></font></h2>
</td>
</tr>
<tr>
<td>
<h3 id="Introduction_3"><font><font>Introduction</font></font></h3>
<dl>
<dt><a href="/fr/Apprendre/CSS"><font><font>Démarrer avec CSS</font></font></a></dt>
<dd><font><font>This tutorial will introduce you to Cascading Style Sheets (CSS). </font><font>It will guide you through the CSS features, using concrete examples that you can try for yourself on your own computer.</font></font></dd>
<dt><a href="https://developer.mozilla.org/fr/Apprendre/CSS" rel="external"><font><font>Les bases de CSS</font></font></a></dt>
<dd><font><font>What is the CSS, learning from its use, key selectors and properties</font></font></dd>
<dt><a href="http://docs.webplatform.org/wiki/guides/getting_started_with_css" rel="external"><font><font>CSS Basics</font></font></a><font><font> (WebPlatform.org)</font></font></dt>
<dd><font><font>What is the CSS, how to apply it in HTML and looks like the basic syntax of CSS.</font></font></dd>
<dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_Classes" rel="external"><font><font>Selectors CSS classes</font></font></a><font><font> (Wikiversity)</font></font></dt>
<dd><font><font>What is a class in CSS?</font></font></dd>
<dt><a href="http://en.wikiversity.org/wiki/Web_Design/External_CSS" rel="external"><font><font>External CSS</font></font></a><font><font> (Wikiversity)</font></font></dt>
<dd><font><font>Use CSS to an external stylesheet.</font></font></dd>
<dt><a href="http://www.w3.org/MarkUp/Guide/Style" rel="external"><font><font>Add a touch of style</font></font></a><font><font> (W3C)</font></font></dt>
<dd><font><font>Realizing this beginner's guide to learn how to put CSS in your pages.</font></font></dd>
<dt><a href="/fr/docs/CSS/CSS_questions_frequentes"><font><font>Frequently asked questions about CSS</font></font></a></dt>
<dd><font><font>Questions and answers for beginners.</font></font></dd>
<dt><a href="http://codeavengers.com/" title="http://codeavengers.com/"><font><font>CodeAvengers</font></font></a><font><font> (CodeAvengers.com)</font></font></dt>
<dd><font><font>Avengers Code is an effective and fun way to learn to code web applications and games with HTML, CSS and JavaScript.</font></font></dd>
</dl>
<h3 id="Niveau_intermediaire_3">Niveau intermediaire</h3>
<dl>
<dt><a href="https://developer.mozilla.org/fr/docs/Web/CSS/Reference" lang="fr"><font><font>CSS Reference</font></font></a></dt>
<dd><font><font>Complete CSS reference with support details of Firefox and other browsers.</font></font></dd>
<dt><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" lang="en" rel="external"><font><font>CSS Challenges</font></font></a><font><font> (Wikiversity)</font></font></dt>
<dd><font><font>Practice your skills in CSS, and see where you need the most practice.</font></font></dd>
<dt><a href="http://www.html.net/tutorials/css/" lang="fr" rel="external"><font><font>Intermediate concepts in CSS</font></font></a><font><font> (HTML.net)</font></font></dt>
<dd><font><font>Group, pseudo-classes, and more.</font></font></dd>
<dt><a href="http://www.alistapart.com/articles/css-positioning-101/" lang="fr" rel="external"><font><font>CSS positioning bases</font></font></a><font><font> (A List Apart)</font></font></dt>
<dd><font><font>Using positioning to meet the standards, the layout without tables.</font></font></dd>
<dt><a href="http://www.alistapart.com/articles/progressiveenhancementwithcss/" lang="en" rel="external"><font><font>Progressive Enhancement with CSS</font></font></a><font><font> (A List Apart)</font></font></dt>
<dd><font><font>The gradual improvement of your web pages with CSS.</font></font></dd>
<dt><a href="http://www.alistapart.com/articles/fluidgrids/" lang="en" rel="external"><font><font>Fluid Grids</font></font></a><font><font> (A List Apart)</font></font></dt>
<dd><font><font>Creating models that smoothly resize with of the browser window while using a typographic grid.</font></font></dd>
</dl>
</td>
<td>
<h3 id="Niveau_avancé_2"><font><font>Niveau avancé</font></font></h3>
<dl>
<dt><a href="http://addyosmani.com/blog/css3-screencast/" rel="external"><font><font>CSS3 in less than 5 minutes</font></font></a><font><font> (Addy Osmani)</font></font></dt>
<dd><font><font>Une courte introduction du coeur des innovations apportées par CSS3.</font></font></dd>
<dt><a href="/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS"><font><font>Use of CSS transformations</font></font></a></dt>
<dd>
<div class="g-unit" id="gt-src-c">
<div id="gt-src-p">
<div id="gt-src-wrap">
<div style="width: 100%;"><span class="short_text" id="result_box" lang="fr" style="font-size: 14px; line-height: 1.5;"><span class="hps"><font><font>Appliquer la rotation, le détournement, la mesure et la translation</font></font></span></span><font><font> d'élement avec </font></font><span class="hps" style="font-size: 14px; line-height: 1.5;"><font><font>CSS </font></font></span><span style="font-size: 14px; line-height: 1.5;"><font><font>.</font></font></span></div>
</div>
</div>
</div>
</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions"><font><font>CSS transitions</font></font></a></dt>
<dd><font><font>CSS3 inclue dans sa spécification de contrôler l'animation lors du changement d'une propriété CSS. </font><font>Ceci ajuste progressivement la transition visuelle de la proprieté liée.</font></font></dd>
<dt><a href="http://www.alistapart.com/articles/understanding-css3-transitions/" rel="external"><font><font>Understanding CSS3 transitions</font></font></a><font><font> (A List Apart)</font></font></dt>
<dd><font><font>Débutez avec les transitions CSS et apprenez à choisir attentivement dans quelle situation les utiliser.</font></font></dd>
<dt><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external"><font><font>Quick guide to implement Web Fonts with @ font-face</font></font></a><font><font> (HTML5 Rocks)</font></font></dt>
<dd><font><font>La fonction @font-face de CSS3 proposée parmi les modules vous permet l'utilisation de polices de caractère personnelles sur le web, de manière flexible et accessible</font><font>.</font></font></dd>
</dl>
</td>
</tr>
</tbody>
</table>
|
