cours-01.html 10.4 KB
   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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Programmation Web Avancée   General Introduction</title>
<meta name="cours-n" content="1">

<meta name="author" content="Rémi Emonet">
<meta name="venue" content="PWA M1 DSC">
<meta name="date" content="2017">
<meta name="affiliation" content="Université Jean Monnet − Laboratoire Hubert Curien">
<style type="text/css">
</style>

<!--
<script src="deck.js/extensions/includedeck/load.js"></script>
<script src="extensions/slides-dev.js"></script>
-->
<script src="extensions/deck-packed.js"></script>
<script src="extensions/slides.js"></script>
<script>go()</script>
</head>

<body>

<div class="deck-container has-clones">

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

<section class="smart">

# @chunk: chunks/title.md

# @chunk: chunks/objectives.md

## Programmation Web Avancée <span>{var-cours-n}</span> : {#plan overview}
- Introduction globale au cours
- Applications Web : vue d'ensemble {webapp}
- Pourquoi ce cours? {why}
- Les technologies prévue en PWA {techs}
- Plus… {more}

# @copy:#plan

# Avertissement / Disclaimer {no-print}

# Avant de commencer {no-print}

## Sondage <a target="_blank" href="cours-quizz.html">...</a> {libyli no-print}
- Java?
- Java Servlets?
- Web pages using PHP? // what framework?
- HTML?
- CSS?
- JavaScript ?
- Système de gestion de version ?
- Git ?
- GitHub, Gitlab, bitbucket ?
- Design patterns ? // heard of it, master it?
- Laptop perso pour les TP etc ?

## Logistique (prévue)
- Cours et travail personnel
- cours+exercices ~20h, TP/pratique ~10h // theoretical volume
- **projet**, avec quelques suivis brefs
- mixed sessions: courss/demo/exercices/TP {slide}
- classe inversée {slide}
- Planning indicatif: 3h Vendredi matin {slide}
- Évaluation {slide}
- « théoriques » : QCM + questions ouvertes et exercices
- « pratique », projet : rapport, présentation, et démo
- Règles du jeux {slide}
- soyez actifs, participez
- posez des questions
- interrompez quand nécessaire
- Proposez des sujets de cours et des idées de projet {slide} // we cannot do everything, ...
- Référence du cours [http://learn.heeere.com/2017-pwa-7c99](http://learn.heeere.com/2017-pwa-7c99) {slide}

<!-- Classe Inversée -->
## Classe inversée {libyli #classeinv}
- Constat
- cours « encyclopédiques » &rArr; baisse d'attention
- liberté &rArr; travail à la dernière minute &rArr; seul avec ses problèmes &rArr; échec // parfois aussi insuffisant
- Principe de la classe inversée
- acquisition de connaissances avant le cours
- clarification et approfondissement en cours
- Travail avant le cours
- regarder une vidéo, lire une partie de cours, ... // chacun à son rythme
- faire des exercices
- prendre des notes, noter vos interrogations
- En cours
- questions de votre part
- discussions
- QCM, exercices

# @copy:#plan: %+class:inred: .webapp

## Web Application?
- What does the wikipedia website do when you do a search?
- type `wikipedia.com` in the address bar
- type “higggs” (3 g) in the search box and click on the `&rarr;` button
- in response, you get <br/> <a href="https://en.wikipedia.org/wiki/Special:Search?search=higggs&go=Go&searchToken=af3wuzmjeeu4iy22ma34n3jly" target="_blank">https://en.wikipedia.org/wiki/Special:Search?search=higggs&go=Go&searchToken=af3…</a> {slide}
- C: {comment}
- those who never did web programming, imagine what a program should do to achieve what you observe
- those who did, comment and explain to us
- C: {comment}
- the goal is make a figure on the board (and take a picture of it)

## User, Browser (Client), Server
- The Browser (firefox, chrome, internet explorer, edge, safari, ...) {libyli}
- displays pages (HTML+CSS+…) // SVG, images, videos, webgl, …
- executes scripts (JavaScript)
- sends requests to the server
- user actions (links, forms, …) // references that are contained in the HTML
- automated scripts (automatic refresh, etc)
- The Server {slide libyli}
- receives requests
- executes code depending on the requests
- may send back static resources (fixed pages, images, …) // in the past, only this
- loads and updates data // from a database
- generates response pages
- sends pages to the client

# @copy:#plan: %+class:inred: .why

## Why Learning to Build Web Apps? {libyli}
- As a web app user
- understand how things work behind the scene
- feel empowered to build things
- understand privacy and security implications
- As a software engineer
- more and more applications are web based // fewer and fewer desktop applications
- convergence of mobile and web
- As a scientist (researcher or R&amp;D engineer)
- generate ad hoc visualizations of results <a href="file:///home/twilight/projects/GPUNewTest/test-4/motifs-gif-default.xhtml" target="_blank"></a> <a href="http://bost.ocks.org/mike/nations/" target="_blank"></a> <a href="http://twitwi.github.io/angular-d3-network-example/" target="_blank"></a>
- do attractive visualization for communications

# @copy:#plan: %+class:inred: .techs

## Technologies From Today and Yesterday

<div style="position:relative">
<img src="media/frameworks-raible.png" data-attribution="http://raibledesigns.com/rd/page/publications" data-attribution-content="Matt Raible">
</div>

## Potential Technologies in this course
- Dans ce cours de PWA {libyli}
- coté server, principalement du Java
- coté client, les bases techs (HTML, CSS, javascript)
- coté client, framework (Angular, React, Vue)
- JEE : Java Entreprise Edition {slide dense} // J2EE before renaming
- a standard for Java servers
- Java: portability, security, standardization
- JEE web container {slide}
- runtime environment providing services
- portability between containers
- JEE platform specification {slide}
- tens of individual specifications (JSR) // Java Specification Requests, http://www.oracle.com/technetwork/java/javaee/tech/index.html
- servlets, JSP, JPA, … // some we'll see
- Spring (Pivotal) {slide} // VMware -> joint venture with GE : pivotal
- additional framework around JEE
- Java and Groovy {slide} // G2One bought by SpringSource
- not a standard &rArr; sometimes faster advances {slide}
- JEE and Spring {slide}
- both huge // a lot of things
- evolve in parallel and interact positively

# @copy:#plan: %+class:inred: .more

<!--
# Let's have… <a href="lesson-quizz.html" target="_blank">quizzes</a>
-->

## Learning to Learn (in general) {libyli}
- Work regularly (not a big rush before the deadline)
- repeat exercises
- practice (don't just re-read things)
- Be extremely focused
- limit interruptions
- work for fixed-duration slots (e.g., 25 minutes)
- … but make real and regular breaks
- stretch or have a walk
- practice sport
- sleep well

## Succeeding in this Course {libyli}
- Be pro-active in lessons and practical sessions
- Embrace the proposed technologies
- Bring your own objectives and ideas
- Look and ask for complement (me, other students, online, ...)
- Practice!
- make room on your computer to install things
- install the required software
- practice regularly

# Idée de Projets ? <br/> Accent sur certaines Technologies ?

# Commencez à penser au<br/> Projet et aux Équipes (de 3)

## Key Points {key deck-status-fake-end}
- Course Objectives
- understanding web apps principles and evolution
- mastering some technologies
- “full-stack”: both client and server side techs
- Logistics
- sessions de (cours + demo + TP)
- suivi de projet
- exam + qcm + projet
- Learn to learn efficiently!
- Course reference : <br/> http://learn.heeere.com/2017-pwa-7c99/

# 6-minute break <a target="_blank" href="cours-02.html"></a> <a target="_blank" href="cours-03.html"></a>


# @copy:#classeinv

## Pour la prochaine fois (mercredi) {libyli}
- Au sujet de CSS
- Comprendre les sélecteurs (slides « cours-02 »)
- Comprendre la notion de spécificité
- Comprendre le box-model (slides « cours-02 »)
- Prendre des notes
- Arriver avec des questions
- Lire (en ignorant possiblement les aspects parallèles) <br/> https://blog.mozfr.org/post/2017/09/Au-coeur-moteur-CSS-super-rapide-Quantum-CSS-stylo

</section>

<!-- deck.status snippet -->
<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>

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

<a class="ujm" data-progress-size=": spe.top(15, 525); height: 65*designRatio; left: slide.left; width: 130*designRatio" target="_blank"></a>

</div>
<!-- clicky Cla -->
<script type="text/javascript">
var clicky_site_ids = clicky_site_ids || [];
clicky_site_ids.push(100779706);
(function() {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = '//static.getclicky.com/js';
( document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0] ).appendChild( s );
})();
</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100779706ns.gif" /></p></noscript>


<!-- Histats.com START (aync)-->
<script type="text/javascript">var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.start', '1,2767123,4,0,0,0,00010000']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('http://s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<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>
<!-- Histats.com END -->
</body>
</html>