project/media/ppp/presentation.html

   1 <!DOCTYPE html>
   2 <!--
   3   Copyright 2010 Google Inc.
   4
   5   Licensed under the Apache License, Version 2.0 (the "License");
   6   you may not use this file except in compliance with the License.
   7   You may obtain a copy of the License at
   8
   9      http://www.apache.org/licenses/LICENSE-2.0
  10
  11   Unless required by applicable law or agreed to in writing, software
  12   distributed under the License is distributed on an "AS IS" BASIS,
  13   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14   See the License for the specific language governing permissions and
  15   limitations under the License.
  16
  17   Original slides: Marcin Wichary (mwichary@google.com)
  18   Modifications: Ernest Delgado (ernestd@google.com)
  19                  Alex Russell (slightlyoff@chromium.org)
  20
  21   landslide modifications: Adam Zapletal (adamzap@gmail.com)
  22                            Nicolas Perriault (nperriault@gmail.com)
  23 -->
  24 <html>
  25 <head>
  26     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  27     <meta http-equiv="X-UA-Compatible" content="chrome=1">
  28     <title>Semaine tech AUF</title>
  29     <!-- Styles -->
  30
  31     <link rel="stylesheet" media="print" href="theme/css/print.css">
  32     <link rel="stylesheet" media="screen, projection" href="theme/css/screen.css">
  33
  34
  35     <!-- /Styles -->
  36     <!-- Javascripts -->
  37
  38     <script type="text/javascript" src="theme/js/slides.js"></script>
  39
  40
  41     <!-- /Javascripts -->
  42 </head>
  43 <body>
  44   <div id="blank"></div>
  45   <div class="presentation">
  46     <div id="current_presenter_notes">
  47       <div id="presenter_note"></div>
  48     </div>
  49     <div class="slides">
  50
  51       <!-- slide source: django.md -->
  52       <div class="slide-wrapper">
  53         <div class="slide">
  54           <div class="inner">
  55
  56             <header><h1>Semaine tech AUF</h1></header>
  57
  58
  59             <section><p><strong>Atelier</strong>: Django</p>
  60 <p><strong>Présentateur</strong>: Olivier Larchevêque</p>
  61 <p><strong>Date et heure de passage</strong>:</p>
  62 <ul>
  63 <li>29 Août 2011 à 13h00 TU</li>
  64 <li>1er Septembre à 13h00 TU </li>
  65 </ul>
  66 <p><strong>Durée prévue</strong>: 45 minutes de présentations (max) + 15 minutes de questions</p>
  67 <p><strong>Pré-requis</strong> : <a href="http://wiki.auf.org/wikiteki/Projet/SemaineTech/Ateliers/Django">WikiTeki</a></p></section>
  68
  69           </div>
  70           <div class="presenter_notes">
  71             <header><h1>Presenter Notes</h1></header>
  72             <section>
  73
  74             </section>
  75           </div>
  76           <footer>
  77
  78             <aside class="source">
  79               Source: <a href="django.md">django.md</a>
  80             </aside>
  81
  82             <aside class="page_number">
  83               1/9
  84             </aside>
  85           </footer>
  86         </div>
  87       </div>
  88
  89       <!-- slide source: django.md -->
  90       <div class="slide-wrapper">
  91         <div class="slide">
  92           <div class="inner">
  93
  94             <header><h1>Plan</h1></header>
  95
  96
  97             <section><ul>
  98 <li>Présentation des concepts du framework Web Django (10min)</li>
  99 <li>Création d'un modèle de données (10min)</li>
 100 <li>Création d'une interface d'administration (10min)</li>
 101 <li>Création d'une vue accompagnée de sa template pour le portail (10min)</li>
 102 <li>Questions (15min)</li>
 103 </ul></section>
 104
 105           </div>
 106           <div class="presenter_notes">
 107             <header><h1>Presenter Notes</h1></header>
 108             <section>
 109
 110             </section>
 111           </div>
 112           <footer>
 113
 114             <aside class="source">
 115               Source: <a href="django.md">django.md</a>
 116             </aside>
 117
 118             <aside class="page_number">
 119               2/9
 120             </aside>
 121           </footer>
 122         </div>
 123       </div>
 124
 125       <!-- slide source: django.md -->
 126       <div class="slide-wrapper">
 127         <div class="slide">
 128           <div class="inner">
 129
 130             <header><h1>Qu'est-ce qu'un framework Web?</h1></header>
 131
 132
 133           </div>
 134           <div class="presenter_notes">
 135             <header><h1>Presenter Notes</h1></header>
 136             <section>
 137
 138             </section>
 139           </div>
 140           <footer>
 141
 142             <aside class="source">
 143               Source: <a href="django.md">django.md</a>
 144             </aside>
 145
 146             <aside class="page_number">
 147               3/9
 148             </aside>
 149           </footer>
 150         </div>
 151       </div>
 152
 153       <!-- slide source: django.md -->
 154       <div class="slide-wrapper">
 155         <div class="slide">
 156           <div class="inner">
 157
 158             <header><h1>Le modèle MVC</h1></header>
 159
 160
 161             <section><h2>Définition (ultra-courte)</h2>
 162 <p>Méthode de conception visant à créer une séparation
 163 logique des données, de leur manipulation et de leur visualisation.
 164 <a href="http://fr.wikipedia.org/wiki/Mod%C3%A8le-Vue-Contr%C3%B4leur">Wikipedia</a></p>
 165 <h2>Intérêts</h2>
 166 <ul>
 167 <li>Maintenance</li>
 168 <li>Évolutivité</li>
 169 </ul>
 170 <h2>M : model</h2>
 171 <p>Données métiers, souvent directement lié à la base de donnée.</p>
 172 <h2>V : view</h2>
 173 <p>Interface qui fait le lien entre l'utilisateur et l'application, généralement la page HTML.</p>
 174 <h2>C : contoler</h2>
 175 <p>Passerelle entre les models et les views : il adapte, traite, préparent les données.</p></section>
 176
 177           </div>
 178           <div class="presenter_notes">
 179             <header><h1>Presenter Notes</h1></header>
 180             <section>
 181
 182             </section>
 183           </div>
 184           <footer>
 185
 186             <aside class="source">
 187               Source: <a href="django.md">django.md</a>
 188             </aside>
 189
 190             <aside class="page_number">
 191               4/9
 192             </aside>
 193           </footer>
 194         </div>
 195       </div>
 196
 197       <!-- slide source: django.md -->
 198       <div class="slide-wrapper">
 199         <div class="slide">
 200           <div class="inner">
 201
 202             <header><h1>Traitement d'une requête</h1></header>
 203
 204
 205             <section><ul>
 206 <li>HTTP/GET</li>
 207 <li>URL dispatcher</li>
 208 <li>Invocation de la vue</li>
 209 <li>Traitements divers</li>
 210 <li>Combinaison des données avec la template</li>
 211 <li>Réponse HTTP</li>
 212 </ul></section>
 213
 214           </div>
 215           <div class="presenter_notes">
 216             <header><h1>Presenter Notes</h1></header>
 217             <section>
 218
 219             </section>
 220           </div>
 221           <footer>
 222
 223             <aside class="source">
 224               Source: <a href="django.md">django.md</a>
 225             </aside>
 226
 227             <aside class="page_number">
 228               5/9
 229             </aside>
 230           </footer>
 231         </div>
 232       </div>
 233
 234       <!-- slide source: django.md -->
 235       <div class="slide-wrapper">
 236         <div class="slide">
 237           <div class="inner">
 238
 239             <header><h1>Concrêtement dans Django c'est où?</h1></header>
 240
 241
 242           </div>
 243           <div class="presenter_notes">
 244             <header><h1>Presenter Notes</h1></header>
 245             <section>
 246
 247             </section>
 248           </div>
 249           <footer>
 250
 251             <aside class="source">
 252               Source: <a href="django.md">django.md</a>
 253             </aside>
 254
 255             <aside class="page_number">
 256               6/9
 257             </aside>
 258           </footer>
 259         </div>
 260       </div>
 261
 262       <!-- slide source: django.md -->
 263       <div class="slide-wrapper">
 264         <div class="slide">
 265           <div class="inner">
 266
 267             <header><h1>Application "support"</h1></header>
 268
 269
 270             <section><h2>URL dispatcher</h2>
 271 <ul>
 272 <li>project/support/urls.py</li>
 273 </ul>
 274 <h2>Modèles de données</h2>
 275 <ul>
 276 <li>project/support/models.py</li>
 277 </ul>
 278 <h2>Controlers</h2>
 279 <ul>
 280 <li>project/support/views.py</li>
 281 </ul>
 282 <h2>Views</h2>
 283 <ul>
 284 <li>project/support/templates/*.html</li>
 285 </ul></section>
 286
 287           </div>
 288           <div class="presenter_notes">
 289             <header><h1>Presenter Notes</h1></header>
 290             <section>
 291
 292             </section>
 293           </div>
 294           <footer>
 295
 296             <aside class="source">
 297               Source: <a href="django.md">django.md</a>
 298             </aside>
 299
 300             <aside class="page_number">
 301               7/9
 302             </aside>
 303           </footer>
 304         </div>
 305       </div>
 306
 307       <!-- slide source: django.md -->
 308       <div class="slide-wrapper">
 309         <div class="slide">
 310           <div class="inner">
 311
 312             <header><h1>Partie pratique</h1></header>
 313
 314
 315             <section><p>Pour chaques étapes, vous pouvez jouer dans le projet pendant 10min.
 316 À la fin de chacune des étapes, si vous êtes en difficultés, on propose
 317 une solution pour passer à l'étape suivante.</p>
 318 <p><em>Remarque</em> : le projet est déjà commencé, vous pouvez vous inspirer de ce
 319 qui est déjà fait. J'ai laissé quelques commentaires dans le code source
 320 pour vous guider.</p>
 321 <h2>Étapes</h2>
 322 <ul>
 323 <li>Créer un modèle</li>
 324 <li>Créer une interface d'administration pour ce modèle</li>
 325 <li>Créer une vue avec sa template</li>
 326 </ul></section>
 327
 328           </div>
 329           <div class="presenter_notes">
 330             <header><h1>Presenter Notes</h1></header>
 331             <section>
 332
 333             </section>
 334           </div>
 335           <footer>
 336
 337             <aside class="source">
 338               Source: <a href="django.md">django.md</a>
 339             </aside>
 340
 341             <aside class="page_number">
 342               8/9
 343             </aside>
 344           </footer>
 345         </div>
 346       </div>
 347
 348       <!-- slide source: django.md -->
 349       <div class="slide-wrapper">
 350         <div class="slide">
 351           <div class="inner">
 352
 353             <header><h1>Questions</h1></header>
 354
 355
 356           </div>
 357           <div class="presenter_notes">
 358             <header><h1>Presenter Notes</h1></header>
 359             <section>
 360
 361             </section>
 362           </div>
 363           <footer>
 364
 365             <aside class="source">
 366               Source: <a href="django.md">django.md</a>
 367             </aside>
 368
 369             <aside class="page_number">
 370               9/9
 371             </aside>
 372           </footer>
 373         </div>
 374       </div>
 375
 376     </div>
 377   </div>
 378
 379   <div id="toc" class="sidebar hidden">
 380     <h2>Table of Contents</h2>
 381     <table>
 382       <caption>Table of Contents</caption>
 383
 384       <tr id="toc-row-1">
 385         <th><a href="#slide1">Semaine tech AUF</a></th>
 386         <td><a href="#slide1">1</a></td>
 387       </tr>
 388
 389
 390       <tr id="toc-row-2">
 391         <th><a href="#slide2">Plan</a></th>
 392         <td><a href="#slide2">2</a></td>
 393       </tr>
 394
 395
 396       <tr id="toc-row-3">
 397         <th><a href="#slide3">Qu'est-ce qu'un framework Web?</a></th>
 398         <td><a href="#slide3">3</a></td>
 399       </tr>
 400
 401
 402       <tr id="toc-row-4">
 403         <th><a href="#slide4">Le modèle MVC</a></th>
 404         <td><a href="#slide4">4</a></td>
 405       </tr>
 406
 407
 408       <tr id="toc-row-5">
 409         <th><a href="#slide5">Traitement d'une requête</a></th>
 410         <td><a href="#slide5">5</a></td>
 411       </tr>
 412
 413
 414       <tr id="toc-row-6">
 415         <th><a href="#slide6">Concrêtement dans Django c'est où?</a></th>
 416         <td><a href="#slide6">6</a></td>
 417       </tr>
 418
 419
 420       <tr id="toc-row-7">
 421         <th><a href="#slide7">Application "support"</a></th>
 422         <td><a href="#slide7">7</a></td>
 423       </tr>
 424
 425
 426       <tr id="toc-row-8">
 427         <th><a href="#slide8">Partie pratique</a></th>
 428         <td><a href="#slide8">8</a></td>
 429       </tr>
 430
 431
 432       <tr id="toc-row-9">
 433         <th><a href="#slide9">Questions</a></th>
 434         <td><a href="#slide9">9</a></td>
 435       </tr>
 436
 437
 438     </table>
 439   </div>
 440
 441   <div id="help" class="sidebar hidden">
 442     <h2>Help</h2>
 443     <table>
 444       <caption>Help</caption>
 445       <tr>
 446         <th>Table of Contents</th>
 447         <td>t</td>
 448       </tr>
 449       <tr>
 450         <th>Exposé</th>
 451         <td>ESC</td>
 452       </tr>
 453       <tr>
 454         <th>Full screen slides</th>
 455         <td>e</td>
 456       </tr>
 457       <tr>
 458         <th>Presenter View</th>
 459         <td>p</td>
 460       </tr>
 461       <tr>
 462         <th>Source Files</th>
 463         <td>s</td>
 464       </tr>
 465       <tr>
 466         <th>Slide Numbers</th>
 467         <td>n</td>
 468       </tr>
 469       <tr>
 470         <th>Toggle screen blanking</th>
 471         <td>b</td>
 472       </tr>
 473       <tr>
 474         <th>Show/hide slide context</th>
 475         <td>c</td>
 476       </tr>
 477       <tr>
 478         <th>Notes</th>
 479         <td>2</td>
 480       </tr>
 481       <tr>
 482         <th>Help</th>
 483         <td>h</td>
 484       </tr>
 485     </table>
 486   </div>
 487   <script>main()</script>
 488 </body>
 489 </html>