public-courses / 2017-pwa-public

Download as
Browse Code »

Commit 84e8550dc000ae860a4af55769ddf6f0ce0b29c2

Authored by Rémi Emonet
1 parent 5a29c8c43c
Exists in master

cm9 pro

Showing 3 changed files with 238 additions and 0 deletions

cours-09.html View file @ 84e8550
  1 +<!DOCTYPE html>
  2 +<html>
  3 + <head>
  4 + <meta charset="utf-8">
  5 + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 +
  7 + <title>Programmation Web Avancée   fin</title>
  8 + <meta name="cours-n" content="9">
  9 +
  10 + <meta name="author" content="Rémi Emonet">
  11 + <meta name="venue" content="PWA M1 DSC">
  12 + <meta name="date" content="2017">
  13 + <meta name="affiliation" content="Université Jean Monnet − Laboratoire Hubert Curien">
  14 +
  15 + <style type="text/css">
  16 + .slide.densish>ul {font-size: 70%;}
  17 + .commented-fs p {margin: 1em; }
  18 + .frflag {
  19 + background-image: url(media/frflag.svg);
  20 + width: 1em;
  21 + height: .75em;
  22 + display: inline-block;
  23 + background-size: contain;
  24 + }
  25 + </style>
  26 +
  27 + <!--
  28 + <script src="deck.js/extensions/includedeck/load.js"></script>
  29 + <script src="extensions/slides-dev.js"></script>
  30 + -->
  31 + <script src="extensions/deck-packed.js"></script>
  32 + <script src="extensions/slides.js"></script>
  33 + <script>go()</script>
  34 + </head>
  35 +
  36 +<body>
  37 +
  38 +<div class="deck-container">
  39 +
  40 + <div class="deck-loading-splash" style="background: black; color: chartreuse;"><span class="vcenter" style="font-size: 30px; font-family: Arial; ">Please wait, while our marmots are preparing the hot chocolate…</span></div>
  41 +
  42 +<section class="smart">
  43 +
  44 +# @chunk: chunks/title.md
  45 +
  46 +# Questions ? {no-print}
  47 +
  48 +# @chunk: chunks/objectives.md
  49 +
  50 +## Programmation Web Avancée <span>{var-cours-n}</span> : Plan {#plan overview}
  51 +- Questions ?
  52 +- Déroulement des soutenances {sout}
  53 +- Avancement du projet {projects}
  54 +# @copy:#plan
  55 +
  56 +
  57 +
  58 +<!-- ################################### -->
  59 +# @copy:#plan: %+class:inred: .sout
  60 +
  61 +## Projets {libyli}
  62 +- Soutenances le vendredi 2 décembre, 9h-...
  63 +- Planning ? ordre des groupes ?
  64 +- Code et documents 24h+ avant
  65 +- Rendu par github
  66 +- Évaluation et instructions <a target="_blank" href="more-projects.html">...</a>
  67 +
  68 +<!-- ################################### -->
  69 +# @copy:#plan: %+class:inred: .projects
  70 +
  71 +## Suivi de projet
  72 +- Rappel de votre sujet
  73 +- Organisation du travail
  74 +- *Avancement des parties*
  75 +- Objectifs pour la fin
  76 +- Questions
  77 +
  78 +
  79 +
  80 +</section>
  81 +
  82 + <!-- deck.status snippet -->
  83 + <p class="deck-status deck-progress-10"> <span class="deck-status-current"></span> / <span class="deck-status-total"></span> − <span class="var-author">will be replaced by the author</span> − <span class="var-title">will be replaced by the title</span></p>
  84 +
  85 + <a data-progress-size=": spe.top(15, 555); height: 45*designRatio; left: slide.right - 90*designRatio; width: 90*designRatio" class="ccby" href="http://en.wikipedia.org/wiki/Creative_Commons_license" title="This work is under CC-BY licence." target="_blank"></a>
  86 +
  87 + <a class="ujm" data-progress-size=": spe.top(15, 525); height: 65*designRatio; left: slide.left; width: 130*designRatio" target="_blank"></a>
  88 +
  89 +</div>
  90 +<!-- clicky Cla -->
  91 +<script type="text/javascript">
  92 +var clicky_site_ids = clicky_site_ids || [];
  93 +clicky_site_ids.push(100779706);
  94 +(function() {
  95 + var s = document.createElement('script');
  96 + s.type = 'text/javascript';
  97 + s.async = true;
  98 + s.src = '//static.getclicky.com/js';
  99 + ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
  100 +})();
  101 +</script>
  102 +<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100779706ns.gif" /></p></noscript>
  103 +
  104 +
  105 +<!-- Histats.com START (aync)-->
  106 +<script type="text/javascript">var _Hasync= _Hasync|| [];
  107 +_Hasync.push(['Histats.start', '1,2767123,4,0,0,0,00010000']);
  108 +_Hasync.push(['Histats.fasi', '1']);
  109 +_Hasync.push(['Histats.track_hits', '']);
  110 +(function() {
  111 +var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
  112 +hs.src = ('http://s10.histats.com/js15_as.js');
  113 +(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
  114 +})();</script>
  115 +<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?2767123&101" alt="javascript hit counter" border="0"></a></noscript>
  116 +<!-- Histats.com END -->
  117 +</body>
  118 +</html>
index.html View file @ 84e8550
... ... @@ -95,6 +95,7 @@
95 95 <a class="tile" href="raw/test.mp4">A test video to download¹</a>
96 96 <a class="tile" href="tp2.pdf">TP 2 (SPRING) <br/>Sujet</a>
97 97 <a class="tile" href="more-installation.html">Installation <br/>sur votre laptop</a>
  98 + <a class="tile" href="more-projects.html">PROJETS</a>
98 99 <!--
99 100 <a href="tp3.pdf">TP 3 (REST+React) <br/>Sujet</a>
100 101 <a href="raw/libs-1.zip">TP 3 (REST+React) <br/>Bibliothèques JS</a>
more-projects.html View file @ 84e8550
  1 +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 +<html xmlns="http://www.w3.org/1999/xhtml">
  3 +<head>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 + <meta http-equiv="Content-Style-Type" content="text/css" />
  6 + <meta name="generator" content="pandoc" />
  7 + <title></title>
  8 + <style type="text/css">code{white-space: pre;}</style>
  9 + <link rel="stylesheet" href="media/picnic.min.css" type="text/css" />
  10 +</head>
  11 +<body>
  12 +<style>
  13 +html { margin: 2em;}
  14 +ol li em { margin-right: 1em; }
  15 +</style>
  16 +<!-- ## Updates -->
  17 +<h1 id="attentes-pour-le-projet">Attentes pour le projet</h1>
  18 +<p>Le projet sera évalué sur votre capacité à montrer que vous avez acquis des compétences dans les différentes technologies considérées dans ce cours. Il sera attendu de tous les membres d'un groupe (même s'ils n'ont pas tous passé autant de temps sur chaque partie du projet) de comprendre l'ensemble du projet (et de pouvoir expliquer n'importe quelle partie).</p>
  19 +<p>Un bon ensemble « projet, document et soutenance » devra montre que vous avez compris et savez comment :</p>
  20 +<ul>
  21 +<li>générer des pages dynamique coté serveur, avec Spring (et Thymeleaf),</li>
  22 +<li>exposer une API REST pour vos données,</li>
  23 +<li>écrire un client riche avec Vue,</li>
  24 +<li>gérer correctement la potentielle authentification des utilisateurs,</li>
  25 +<li>présenter votre travail efficacement,</li>
  26 +<li>utiliser git pour une réelle collaboration (pas seulement quelques commits à la fin).</li>
  27 +</ul>
  28 +<h2 id="bonnes-pratiques">Bonnes Pratiques :</h2>
  29 +<p>Au sujet de git:</p>
  30 +<ul>
  31 +<li>commit/push souvent, pour ne pas avoir peur de faire des changements,</li>
  32 +<li>utiliser des messages de commit qui décrivent le changement et surtout la raison du changement,</li>
  33 +<li>utiliser des messages en anglais,</li>
  34 +<li>ne pas commiter les fichiers générés (utiliser un <code>.gitignore</code> de façon à ce que <code>git status</code> soit propre),</li>
  35 +<li>écrire les documents demandés en markdown (.md) pour qu'ils s'affichent correctement dans github.</li>
  36 +</ul>
  37 +<p>Au sujet de votre code:</p>
  38 +<ul>
  39 +<li>écrire votre code en anglais,</li>
  40 +<li>indenter/formatter votre code correctement,</li>
  41 +<li>ne pas mélanger espaces et tabulations (idéalement, ne pas utiliser de tabulations),</li>
  42 +<li>garder votre code propre: pas de variables globales/statiques, choisir des noms correctement (packages, classes, etc), suivre les conventions (e.g., <a href="http://www.oracle.com/technetwork/java/codeconventions-135099.html">java convention</a>), utiliser des constantes pour les valeurs constantes, ...</li>
  43 +</ul>
  44 +<p>Vous écrivez du logiciel donc :</p>
  45 +<ul>
  46 +<li>tester beaucoup et souvent,</li>
  47 +<li>automatiser les tests qui peuvent l'être,</li>
  48 +<li>documenter comment utiliser, compiler, tester et lancer votre projet,</li>
  49 +<li>documenter comment comprendre et reprendre votre projet.</li>
  50 +</ul>
  51 +<h2 id="réutilisation-et-attribution-et-plagiat">Réutilisation et Attribution et Plagiat</h2>
  52 +<p>Quand vous ré-utilisez du code/texte/définitions/... venant de sources externes, <strong>vous devez absolument citer ces sources</strong>. En particulier, vous devez spécifier dans votre README.md (sous git) la source du code externe que vous avez potentiellement utilisé, qui sont les auteurs, quelle est la licence, et quels efforts vous avez dû faire pour comprendre et intégrer le code. Ne pas faire cela (citez les sources) peut être illégal (termes de licences) et est contre la politique de l'université et peut vous faire expulser (<a href="http://www.universite-lyon.fr/plagiat" class="uri">http://www.universite-lyon.fr/plagiat</a>).</p>
  53 +<h2 id="rendu-du-projet-et-documents-29-novembre-23h59-via-github">Rendu du projet et documents (29 Novembre, 23h59, via github)</h2>
  54 +<p>Je vais cloner vos projet sur github (aucun rendu par email ne sera accepté). Cela sera fait environ à la date mentionnée ci-dessus (mais pas avant), c'est à dire environ 24h avant les soutenances.</p>
  55 +<p>Tous les documents textuels seront préférablement dans un format texte, tel que <code>.md</code> (markdown <a href="https://help.github.com/articles/github-flavored-markdown/" class="uri">https://help.github.com/articles/github-flavored-markdown/</a>).</p>
  56 +<p>Votre repository <strong>doit</strong> contenir, au minimum, les choses suivantes:</p>
  57 +<ul>
  58 +<li><code>README.md</code>
  59 +<ul>
  60 +<li>un paragraphe au moins sur le sujet de votre projet</li>
  61 +<li>les instructions pour obtenir, compiler, lancer, tester, ..., votre projet</li>
  62 +<li>une description de l'architecture (quelle partie interagit avec quelle partie, par ex., database, pages spring, spring REST, Vue, ...)</li>
  63 +<li>si c'est le cas, où est déployée une instance de votre service (serveur perso, ou sur un PAAS (comme heroku))</li>
  64 +</ul></li>
  65 +<li><code>retrospective.md</code>, au sujet de <em>l'organisation du travail</em>, des technologies, etc
  66 +<ul>
  67 +<li>comparé à votre objectif : qu'est ce qui a bien fonctionné, qu'est ce qui ne marche pas</li>
  68 +<li>les difficultés que vous avez rencontré</li>
  69 +<li>ce que vous avez appris</li>
  70 +<li>ce que vous feriez différemment la prochaine fois</li>
  71 +<li>ce que vous garderiez à tout prix la prochaine fois</li>
  72 +</ul></li>
  73 +<li><code>auto-evaluation.md</code>, qui doit contenir
  74 +<ul>
  75 +<li>le temps passé (en heures) par chaque membre du projet</li>
  76 +<li>sur quelles parties chacun a travaillé</li>
  77 +<li>pour chaque élément de la partie « Bonnes Pratiques », une évaluation de à quel point vous votre projet se conforme aux bonnes pratiques (copier par exemple la liste, et pour chaque point mettez une note de 0 à 20, avec un commentaire du pourquoi cette note)</li>
  78 +</ul></li>
  79 +</ul>
  80 +<h2 id="soutenances-de-projet-1er-décembre-9h-12h-b03">Soutenances de Projet (1<sup>er</sup> Décembre, 9h-12h, B03)</h2>
  81 +<p>La première partie de votre soutenance doit être une présentation de votre projet en tant que produit, comme si vous le vendiez à un client semi-technique, sans détailler trop les aspects bas niveau (ne surtout pas montrer de code). La partie « retrospective » sera une évaluation honête de votre travail.</p>
  82 +<h3 id="soutenance-typique-recommandée-temps-indicatifs">Soutenance typique recommandée (temps indicatifs)</h3>
  83 +<ul>
  84 +<li>3 minutes: installation dans la salle (avoir testé le projecteur avant)</li>
  85 +<li>5 minutes avec slides: présentation du sujet du project, de ce qui a été fait, vos choix architecturaux/techniques (haut niveau), ...</li>
  86 +<li>5 minutes: project démo</li>
  87 +<li>5 minutes avec slides: rétrospective, comment vous vous êtes organisé dans le groupe, auto-évaluation, ce qui a bien/mal marché, ce qui était difficile, ce que vous avez appris, les points forts/faibles de votre projet (sur la méthode et sur les résultats)</li>
  88 +<li>2 minutes: partie libre (des choses importantes selon vous mais qui ne seraient pas dans les points précédent)</li>
  89 +<li>5 minutes: questions</li>
  90 +</ul>
  91 +<!-- clicky Cla -->
  92 +<script type="text/javascript">
  93 +var clicky_site_ids = clicky_site_ids || [];
  94 +clicky_site_ids.push(100779706);
  95 +(function() {
  96 + var s = document.createElement('script');
  97 + s.type = 'text/javascript';
  98 + s.async = true;
  99 + s.src = '//static.getclicky.com/js';
  100 + ( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
  101 +})();
  102 +</script>
  103 +<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100779706ns.gif" /></p></noscript>
  104 +
  105 +
  106 +<!-- Histats.com START (aync)-->
  107 +<script type="text/javascript">var _Hasync= _Hasync|| [];
  108 +_Hasync.push(['Histats.start', '1,2767123,4,0,0,0,00010000']);
  109 +_Hasync.push(['Histats.fasi', '1']);
  110 +_Hasync.push(['Histats.track_hits', '']);
  111 +(function() {
  112 +var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
  113 +hs.src = ('http://s10.histats.com/js15_as.js');
  114 +(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
  115 +})();</script>
  116 +<noscript><a href="http://www.histats.com" target="_blank"><img src="http://sstatic1.histats.com/0.gif?2767123&101" alt="javascript hit counter" border="0"></a></noscript>
  117 +<!-- Histats.com END -->
  118 +</body>
  119 +</html>