forked from wet-boew/codefest
-
Notifications
You must be signed in to change notification settings - Fork 0
/
sprints-de-codage.html
283 lines (258 loc) · 15.5 KB
/
sprints-de-codage.html
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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<!--[if IE 7]><html lang="fr" class="no-js ie7"><![endif]-->
<!--[if IE 8]><html lang="fr" class="no-js ie8"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="fr" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
wet-boew.github.io/wet-boew/License-eng.html / wet-boew.github.io/wet-boew/Licence-fra.html -->
<title>Sprints de codage — Journées de codage de la Boîte à outils de l’expérience Web édition 2013</title>
<link rel="shortcut icon" href="wet-boew/dist/theme-wet-boew/images/favicon.ico" />
<meta name="description" content="French description / Description en français" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]>
<script src="wet-boew/dist/js/jquery-ie.min.js"></script>
<script src="wet-boew/dist/js/polyfills/html5shiv-min.js"></script>
<link rel="stylesheet" href="wet-boew/dist/grids/css/util-ie-min.css" />
<link rel="stylesheet" href="wet-boew/dist/js/css/pe-ap-ie-min.css" />
<link rel="stylesheet" href="wet-boew/dist/theme-wet-boew/css/theme-ie-min.css" />
<noscript><link rel="stylesheet" href="wet-boew/dist/theme-wet-boew/css/theme-ns-ie-min.css" /></noscript>
<![endif]-->
<!--[if gt IE 8]><!-->
<script src="wet-boew/dist/js/jquery.min.js"></script>
<link rel="stylesheet" href="wet-boew/dist/grids/css/util-min.css" />
<link rel="stylesheet" href="wet-boew/dist/js/css/pe-ap-min.css" />
<link rel="stylesheet" href="wet-boew/dist/theme-wet-boew/css/theme-min.css" />
<noscript><link rel="stylesheet" href="wet-boew/dist/theme-wet-boew/css/theme-ns-min.css" /></noscript>
<!--<![endif]-->
<!-- CustomCSSStart -->
<!-- CustomCSSEnd -->
</head>
<body><div id="wb-body">
<div id="wb-skip">
<ul id="wb-tphp">
<li id="wb-skip1"><a href="#wb-cont">Passer au contenu principal</a></li>
<li id="wb-skip2"><a href="#wb-nav">Passer au pied de page</a></li>
</ul>
</div>
<div id="wb-head"><div id="wb-head-in"><header>
<!-- HeaderStart -->
<section><div id="wet-fullhd"><h2>Langues</h2>
<div id="wet-fullhd-in">
<ul>
<li id="wet-fullhd-lang-current">Français</li>
<li id="wet-fullhd-lang-2"><a href="codesprints.html" lang="en">English</a></li>
</ul>
</div>
</div></section>
<div id="wet-bnr" role="banner"><div id="wet-bnr-in">
<div id="wet-title"><p id="wet-title-in" style="width: 100%;"><a href="accueil.html" lang="fr"><object data="wet-boew/dist/theme-wet-boew/images/logo.svg" role="img" tabindex="-1" type="image/svg+xml"><img src="wet-boew/dist/theme-wet-boew/images/logo.png" alt="" /></object> <span>Journées de codage de la Boîte à outils de l'expérience Web édition 2013 <small>Projet à source ouverte collaboratif dirigé par le Gouvernement du Canada</small></span></a></p></div>
</div></div>
<nav role="navigation">
<div id="wet-psnb"><h2>Menu du site</h2><div id="wet-psnb-in"><div class="wet-boew-menubar mb-mega"><div>
<ul class="mb-menu">
<li><div><a href="accueil.html">Accueil</a></div></li>
<li><div><a href="emplacements.html">Emplacements</a></div></li>
<li><div><a href="index-eng.html">Horaire</a></div></li>
<li><div><a href="activites.html">Activités</a></div></li>
</ul>
</div></div></div></div>
</nav>
<!-- HeaderEnd -->
</header></div></div>
<div id="wb-core"><div id="wb-core-in" class="equalize">
<div id="wb-main" role="main"><div id="wb-main-in">
<!-- MainContentStart -->
<h1 id="wb-cont"><em lang="en">Sprints</em> de codage</h1>
<section>
<h2>Qu'est-ce qu'un <em lang="en">sprint</em> de codage?</h2>
<p>Un <em lang="en">sprint</em> de codage est <q cite="https://en.wikipedia.org/wiki/Sprint_%28software_development%29">un rassemblement de gens qui travaillent sur un projet dans le but de travailler sur une tâche particulière relative au projet.</p>
</section>
<section>
<h2>Diriger un <em lang="en">sprint</em> de codage</h2>
<p>Diriger un <em lang="en">sprint</em> de codage lors des Journées de codage est simple :</p>
<ol>
<li>Donnez une présentation de 10‒15 minutes pour présenter les attentes du <em lang="en">sprint</em>.</li>
<li>Séparez les gens en groupes et divisez les tâches à accomplir. Si une tâche est complexe, prévoyez faire un essai à blanc avec une partie du travail pour vous assurer que tout le monde avance dans la bonne direction.</li>
<li>Codez, assistez les participants et répondez aux questions.</li>
</ol>
</section>
<section>
<h2>Participer à un <em lang="en">sprint</em> de codage</h2>
<p>Participer à un <em lang="en">sprint</em> de codage implique du codage, il vous faudra donc apporter un ordinateur.</p>
<p>Les logiciels suivant devront aussi être installés sur votre ordinateur :</p>
<ul>
<li>Un navigateur Web avec des outils de déboguage, tel que :
<ul>
<li><a href="http://www.mozilla.org/fr/firefox/new/">Firefox</a> with the <a href="http://getfirebug.com/">Firebug (en anglais uniquement)</a> add-on.</li>
<li><a href="https://www.google.com/intl/fr/chrome/browser/">Google Chrome</a>.</li>
<li><a href="http://www.apple.com/ca/fr/safari/">Safari</a>.</li>
<li><a href="http://windows.microsoft.com/fr-ca/internet-explorer/ie-10-worldwide-languages">Internet Explorer 10</a>.</li>
</ul>
</li>
<li>Un éditeur de texte ou un environnement de développement intégré, tel que :
<ul>
<li><a href="http://notepad-plus-plus.org/fr/">Notepad++</a>.</li>
<li><a href="http://www.aptana.com/">Aptana (en anglais uniquement)</a>.</li>
<li><a href="http://www.eclipse.org/">Eclipse (en anglais uniquement)</a>.</li>
<li><a href="https://netbeans.org/index_fr.html">Netbeans</a>.</li>
</ul>
</li>
<li>Un <a href="http://git-scm.com/downloads">client git (en anglais uniquement)</a>.</li>
<li><a href="http://nodejs.org/">Node.js (en anglais uniquement)</a>.</li>
<li><a href="http://gruntjs.com/">Grunt (en anglais uniquement)</a>.</li>
<li><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java JRE 7 ou SDK 7 (en anglais uniquement, pour le <em lang="en">sprint</em> de codage au sujet de Cordova)</a>.</li>
</ul>
<p>Nous vous recommandons de tout installer avant l'événement. Mais, si jamais vous éprouvez des difficultés à préparer votre ordinateur, nous auront des gens qui pourront vous aider sur place.</p>
</section>
<section>
<h2><em lang="en">Sprints</em> de codage programmés</h2>
<div class="equalize">
<div class="span-4 module-info module-simplify">
<section>
<h3>Nouvelle fonctionalité de pagination pour la Boîte à outils de l'expérience Web</h3>
<p>Le but est d'ajouter un plugiciel en jQuery appelé simplePagination.js à la Boîte à outils de l'expérience Web pour gérer la pagination.</p>
<ul class="button-group margin-top-none margin-left-medium">
<li><a href="http://flaviusmatis.github.io/simplePagination.js/" class="button button-accent">simplePagination.js (en anglais uniquement)</a></li>
<li><a href="PaginationExample.zip" class="button button-accent">Démo (ZIP, 87 <abbr title="kilooctets">ko</abbr>, en anglais uniquement)</a></li>
<li><a href="http://voyage.gc.ca/nouvelles-mises-en-garde/mises-en-garde" class="button button-accent">Exemple réel</a></li>
</ul>
</section>
</div>
<div class="span-4 module-info module-simplify">
<section>
<h3>Nouveau design pour l'interface à onglets</h3>
<p>Ce <em lang="en">sprint</em> s'adresse à quiconque est intéressé à améliorer l'interface à onglets de la Boîte à outils de l'expérience Web. Nous travaillerons sur le design de nouveaux panneaux d'onglet réactifs, sur le remplacement des codes ringards en JavaScript par des beaux codes en CSS3 et sur la préparation du plugiciel à la version 4.0 de la Boîte à outils.</p>
<ul class="button-group margin-top-none margin-left-medium">
<li><a href="http://learn.shayhowe.com/advanced-html-css/responsive-web-design" class="button button-accent"><em lang="en">Responsive Web design</em> (en anglais uniquement)</a></li>
<li><a href="http://www.sitepoint.com/css3-tabs-using-target-selector/" class="button button-accent"><em lang="en">CSS-only tabs</em> (en anglais uniquement)</a></li>
</ul>
</section>
</div>
</div>
<div class="clear"></div>
<div class="equalize">
<div class="span-4 module-info module-simplify">
<section>
<h3>Extension du plugiciel des graphiques</h3>
<p>Utilisation et ajout du plugiciel Flot au plugiciel des graphiques de la Boîte à outils de l'expérience Web. Source de données représentée par des tableaux HTML. Utilisation de paramètres CSS, attribut HTML data-* et de paramètres JSON.</p>
<ul class="button-group margin-top-none margin-left-medium">
<li><a href="http://slides.universallabs.org/CodeFest2.0-WxT/ChartGraph.html#/1" class="button button-accent">Présentation<span class="wb-invisible"> pour le <em lang="en">sprint</em> de codage au sujet de l'extension du plugiciel des graphiques</span></a></li>
<li><a href="http://www.flotcharts.org/" class="button button-accent">Flot (en anglais uniquement)</a></li>
<li><a href="http://www.flotcharts.org/flot/examples/" class="button button-accent">Exemples du l'utilisation de Flot (en anglais uniquement)</a></li>
<li><a href="http://www.flotcharts.org/plugins/" class="button button-accent">Plugiciels pour Flot(en anglais uniquement)</a></li>
<li><a href="https://github.com/wet-boew/wet-boew/wiki/Charts-and-graphs" class="button button-accent">Plugiciel des graphiques (en anglais uniquement)</a></li>
</ul>
</section>
</div>
<div class="span-4 module-info module-simplify">
<section>
<h3>Variante Apache Cordova (Phonegap) de la Boîte à outils de l'expérience Web pour les applications mobile natives</h3>
<p>Le but est de déveloper et maintenir un projet Cordova pour le développement d'applications pour les téléphones et les tablettes et se servant de la Boîte à outils de l'expérience Web comme cadre Web. L'objectif est d'ajouter des fonctionalités multi-platformes pour la manipulation de la caméra, du stockage de données locale, des notifications <em lang="en">Push</em> et des autres services qui ne sont pas présentement supportés par le HTML5.</p>
<ul class="button-group margin-top-none margin-left-medium">
<li><a href="http://developer.android.com/sdk/index.html" class="button button-accent">Android SDK (en anglais uniquement)</a></li>
<li><a href="http://nodejs.org/" class="button button-accent">Node.js (en anglais uniquement)</a></li>
<li><a href="http://cordova.apache.org/" class="button button-accent">Apache Cordova (en anglais uniquement)</a></li>
</ul>
</section>
</div>
</div>
<div class="clear"></div>
<div class="equalize">
<div class="span-4 module-info module-simplify">
<section>
<h3>Rafiner le cache d'application de la Boîte à outils de l'expérience Web</h3>
<p>Faisons un <em lang="en">sprint</em> afin de s'assurer que la Boîte à outils de l'expérience Web prenne avantage de cette importante fonctionalité du HTML5 pour le stockage hors ligne et pour la performance de chargement.</p>
<ul class="button-group margin-top-none margin-left-medium">
<li><a href="http://www.html5rocks.com/en/tutorials/appcache/beginner/" class="button button-accent">Guide du débutant pour l'utilisation du cache d'application (en anglais uniquement)</a></li>
<li><a href="http://appcachefacts.info/" class="button button-accent">Faits au sujet du cache d'application (en anglais uniquement)</a></li>
</ul>
</section>
</div>
<div class="span-4 module-info module-simplify">
<section>
<h3>PJAX pour la Boîte à outils de l'expérience Web</h3>
<p>Explorons la possibilité d'ajouter ce plugiciel jQuery à la Boîte à outils de l'expérience Web pour une navigation plus rapide.</p>
<ul class="button-group margin-top-none margin-left-medium">
<li><a href="https://github.com/defunkt/jquery-pjax" class="button button-accent">jquery-pjax (en anglais uniquement)</a></li>
</ul>
</section>
</div>
</div>
<div class="clear"></div>
<div class="equalize">
<div class="span-4 module-info module-simplify">
<section>
<h3>Les blocs superposés réactifs</h3>
<p>Au cours de ce <em lang="en">sprint</em> de codage, nous effectuerons la conception et le codage d'un objet Web générique pour les blocs superposés réactifs qui pourra servir à créer n'importe quel type de bloc superposé, tel que des panneaux, des fenêtres flash, des fenêtres-dialogue et des barres d'outils.</p>
<p><a href="http://thomasgohard.github.io/responsive-web-objects/JourneesDeCodage2013-AguicheBlocsSuperposesReactifs.html" class="button button-accent">Présentation<span class="wb-invisible"> pour le <em lang="en">sprint</em> de codage au sujet des blocs superposés réactifs</span></a></p>
</section>
</div>
<div class="span-4 module-info module-simplify">
<section>
<h3>Le menu de navigation réactif</h3>
<p>Au cours de ce <em lang="en">sprint</em> de codage, nous effectuerons la conception et le codage d'un menu de navigation réactif accessible qui est flexible, léger et rapide.</p>
<p><a href="http://thomasgohard.github.io/responsive-web-objects/JourneesDeCodage2013-AguicheMenuDeNavigationReactif.html" class="button button-accent">Présentation<span class="wb-invisible"> pour le <em lang="en">sprint</em> de codage au sujet du menu de navigation réactif</span></a></p>
</section>
</div>
</div>
<div class="clear"></div>
</section>
<dl id="wet-date-mod" role="contentinfo">
<dt>Date de modification :</dt><dd><span><time>2013-07-19</time></span></dd>
</dl>
<div class="clear"></div>
<!-- MainContentEnd -->
</div></div>
</div></div>
<div id="wb-foot"><div id="wb-foot-in"><footer><h2 id="wb-nav">Pied de page</h2>
<!-- FooterStart -->
<nav role="navigation"><div id="wet-sft"><h3>Pied de page du site</h3><div id="wet-sft-in">
<section><div class="span-2"><h4 class="wet-col-head">À propos</h4>
<ul>
<li><a href="http://wet-boew.github.io/wet-boew/accueil.html#apropos">À propos de la Boîte à outils de l’expérience Web</a></li>
<li><a href="http://www.tbs-sct.gc.ca/ws-nw/index-fra.asp">À propos des normes Web</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="wet-col-head">Nouvelles</h4>
<ul>
<li><a href="https://github.com/wet-boew/wet-boew/pulse">Activité du projet récente</a></li>
<li><a href="https://github.com/wet-boew/wet-boew/graphs">Statistiques du projet</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="wet-col-head">Contactez-nous</h4>
<ul>
<li><a href="https://github.com/wet-boew/wet-boew/issues/new">Questions ou commentaires?</a></li>
</ul>
</div></section>
<section><div class="span-2"><h4 class="wet-col-head">Restez branchés</h4>
<ul>
<li><a rel="external" href="https://twitter.com/BoiteExpWeb">Twitter</a></li>
</ul>
</div></section>
</div></div></nav>
<section><div id="wet-fullft"><h3>Secteur de pied de page de plein-largeur</h3>
<div id="wet-fullft-in"></div>
</div></section>
<!-- FooterEnd -->
</footer>
</div></div></div>
<!-- ScriptsStart -->
<script src="wet-boew/dist/js/settings.js"></script>
<!--[if lte IE 8]>
<script src="wet-boew/dist/theme-wet-boew/js/theme-ie-min.js"></script>
<script src="wet-boew/dist/js/pe-ap-ie-min.js"></script>
<script src="wet-boew/dist/js/jquerymobile/jquery.mobile-ie.min.js"></script>
<![endif]-->
<!--[if gt IE 8]><!-->
<script src="wet-boew/dist/theme-wet-boew/js/theme-min.js"></script>
<script src="wet-boew/dist/js/pe-ap-min.js"></script>
<script src="wet-boew/dist/js/jquerymobile/jquery.mobile.min.js"></script>
<!--<![endif]-->
<!-- ScriptsEnd -->
<!-- CustomScriptsStart -->
<!-- CustomScriptsEnd -->
</body>
</html>