<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Informatique 1 Introduction au Cours</title>
<meta name="cours-n" content="1">
<meta name="author" content="Rémi Emonet">
<meta name="venue" content="L2SPICHI">
<meta name="date" content="2018">
<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(function() {
});</script>
</head>
<body>
<div class="deck-container">
<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
## Informatique <span>{var-cours-n}</span> : Plan {#plan overview}
- Introduction et logistique {intro why}
- Comment profiter de ce cours {success}
- Sondages, etc {survey}
- Notre première carte conceptuelle {conceptmap}
- Classe inversée {classeinv}
- Quelques outils {outils}
## Logistique <a style="font-size: 50%" class="then" href="https://learn.heeere.com/2018-infospichi-8a82/" target="_blank"> https://learn.heeere.com/2018-infospichi-8a82/</a>
- Créneaux et Intervenants
- Cours et TD (jeudi 8h, et lundi 15h45) : Rémi Emonet
<br/> ~35 personnes
- TP (mercredi) : Kevin Bascol
- Autres intervenants principaux : *VOUS* {slide}
- posez des questions,
- interrompez en cas de problème,
- **proposez des projets, des directions, etc.**
- Règles du jeu {c4 slide left}
- travaillez régulièrement
- participez
- questionnez
- interrompez
- Évaluation {c8 slide right}
- QCMs papiers, contrôles écrits
- utilisation de la plateforme
- note pratique : rendu TP, exam TP
- *@chunk: chunks/tp-implies-ok.md* {no}
- @anim: .then
- Ressources {slide}
- Claroline Connect (liens et infos live)
- Page du cours
- Site référence
- Et plus : plateforme d'exercices, vidéos
<!-- Pourquoi la prog -->
# @copy:#plan: %+class:inred: .why
// utilisé partout, mieux comprendre le monde
## Calculs et Estimations {image-fit bottom-left darkened /black-bg /no-status no-print}
<div class="img" style="background-image: url('media/web/simu-pi.gif')" data-attribution="https://commons.wikimedia.org/wiki/File:Pi_30K.gif" data-attribution-content="wikipedia" data-scale=""></div>
## Physique des Particules {image-full bottom-left darkened /black-bg /no-status no-print}
<div class="img" style="background-image: url('media/web/lhcb-1.jpg')" data-attribution="https://www.flickr.com/photos/29477734@N07/16284718232/sizes/h/" data-attribution-content="CC by x70tjw (Flickr)" data-scale=""></div>
## Simulation en chimie {image-full bottom-left darkened /black-bg /no-status no-print}
<div class="img" style="background-image: url('media/web/simu-chem-1.jpg')" data-attribution="https://www.flickr.com/photos/argonne/6240914617/sizes/o/" data-attribution-content="CC by Argonne National Laborato
ry (Flickr)" data-scale=""></div>
## Simulation physique {image-full bottom-left darkened /black-bg /no-status no-print}
<div class="img" style="background-image: url('media/web/simu-shuttle-1.jpg')" data-attribution="https://www.flickr.com/photos/nasa_nas/6679914847/sizes/l" data-attribution-content="CC by NASA Advanced Supercom
puting (Flickr)" data-scale=""></div>
<!--
## Mécanique des Fluides {image-fit bottom-left darkened /black-bg /no-status no-print}
<div class="img" style="background-image: url('media/web/simu-racing-1.jpg')" data-attribution="https://www.flickr.com/photos/royversteeg/14876902390/sizes/l" data-attribution-content="CC by roy_skate (Flickr)" data-scale=""></div>
-->
## Visualisation de Données {image-fit bottom-left darkened /no-status no-print}
<div class="img" style="background-image: url('media/web/plot-multivar-ttm.jpg')" data-attribution="https://www.flickr.com/photos/walkingsf/5341944218/sizes/l" data-attribution-content="CC by Eric Fischer (Flickr)" data-scale=""></div>
## Visualisation de Données {image-fit bottom-left darkened /black-bg /no-status no-print}
<div class="img" style="background-image: url('media/web/hydrogen-waves.jpg')" data-attribution="https://www.flickr.com/photos/oskay/4498896878/sizes/l" data-attribution-content="CC by oskay (Flickr)" data-scale=""></div>
## Applications (web) {image-full top-right darkened /black-bg /no-status no-print}
<div class="img" style="background-image: url('media/unsplash/webapp.jpg')" data-scale=""></div>
## Applications Mobiles {image-full bottom-left darkened /black-bg /no-status no-print}
<div class="img" style="background-image: url('media/pixabay/pokemon-go.jpg')" data-scale=""></div>
## Robotique {image-full top-right darkened /black-bg /no-status no-print}
<div class="img" style="background-image: url('media/pixabay/wall-e.jpg')" data-scale=""></div>
<!-- Comment réussir -->
# @copy:#plan: %+class:inred: .success
# Réussir ce Cours {no-print}
## Au sujet de ce cours {libyli}
- Programmer n'est pas facile
- programmation, comme apprendre une nouvelle langue
- nouvelle culture / façon de penser
- tout en anglais en plus... (sauf qtido)
- Cette compétence est à votre portée, en travaillant **bien**
- éviter le par-cœur
- chercher à comprendre
- pratiquer et expérimenter
- Rythme du cours
- selon les cas, au début, « perdus » ou « cours trop lent »
- ⇒ le dire
- Participer, faire des retours
## Bien Apprendre (en général) {libyli}
- Travail régulier plutôt que d'un bloc
- répéter les exercices
- pratiquer, refaire (pas juste lire)
- Être super-concentré lors du travail personnel
- limiter les interruptions
- se fixer une durée (blocs de 25 minutes)
- … mais faire des vraies pauses
- se dégourdir
- faire du sport
- bien dormir
## Bien Réussir ce Cours
- Accepter de faire des choses « simple », juste pour apprendre
- « *solve it yourself first* »
- exemple : on écrite une fonction « somme » alors que « sum » existe
- Amener des idées, questions <br/> ⇒ la motivation est le meilleur facteur de succès
- Chercher de l'information (auprès de moi, des autres, ...)
- Pratiquer !
- installation sur votre ordinateur pour travailler
- faire les exercices automatiques
- *@chunk: chunks/tp-implies-ok.md* {no}
# Divers {no-print}
- Papiers de couleurs « <a href="cours-quizz.html" target="_blank">clickers</a> » {no}
- soit un questionnaire sur ce qu'ils veulent créer etc... {comment}
- soit un autre exercice de description (e.g., description de comment retracer une figure géométrique) {comment}
- puis clickers [click](../../2014-prog-imperative/public/cours/quizz-1.html) {comment}
<!-- Survey -->
# @copy:#plan: %+class:inred: .survey
# Sondage Papier
# Sondage : applications, jeux, simulations ?
# Sondage : type de jeux ?
# Sondage : type de simulation ?
# Sondage : … ?
<!-- Concept Map -->
# @copy:#plan: %+class:inred: .conceptmap
## Carte Conceptuelle : définition
@svg: media/carte-conceptuelle.svg 700 500
@anim: #cc |#noeud |#lien |#compose1 |#compose2 |#compose3 |#connecte |#exprime |#proposition |#formee
## Carte Conceptuelle : but et méthode {libyli}
@svg: media/carte-conceptuelle.svg 300 200 {floatright}
- Mettre à plat vos connaissances
- Dresser une liste visuelle
- des concepts principaux
- des connexions entre eux
- Servir de support pour communiquer <br/>sur votre compréhension du sujet
- Démarche pour l'écriture d'une carte conceptuelle
- lister les concepts principaux
- chercher et matérialiser les relations entre ces concepts
- ajouter les concepts (et liens) qui manquent
- toujours vérifier que l'on forme des « phrases conceptuelles »
- NB :
- papier+stylo/crayon suffisent (pas besoin de logiciels)
- ne pas hésiter à remettre en forme la carte
- liberté de notation, par ex
- utiliser différentes formes pour les concepts de différents types
- idem pour les liens
- liens entre plus de 2 nœuds
- important : garder l'aspect « phrases conceptuelles »
<!-- Classe Inversée -->
# @copy:#plan: %+class:inred: .classeinv
## Classe inversée {libyli}
- Constat
- cours « encyclopédiques » ⇒ baisse d'attention
- liberté ⇒ travail à la dernière minute ⇒ seul avec ses problèmes ⇒ é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
## Pour la semaine "prochaine" (lundi 17) {libyli}
- Inversion de classe : réviser les bases
- [https://learn.heeere.com/python/](https://learn.heeere.com/python/)
- Revoir : variables, listes, boucles, ...
- Prendre des notes : questions, points importants, surprenant
- Installer Python et les outils (si vous utilisez un ordinateur personnel)
- *Possiblitité d'examen court*
- Faire une carte conceptuelle (elle sera *ramassée*)
- choisir un thème (quelques « épisodes »)
- lister les concepts (4 à 10)
- tracer les relations
- (re)mettre en forme
- vérifier que les relations forment des propositions
@svg: media/carte-conceptuelle.svg 700 200
<!-- Outils -->
<!--
# @copy:#plan: %+class:inred: .outils
## Quelques Outils {libyli}
- `python3 inter.py` : programmation interactive {slide}
- crée 2 fenêtres (nécessite « qtido »)
- une pour afficher résultats / erreurs
- une pour taper un programme « en live »
- il a accès à toutes fonctions qtido
- il a accès à une variable `f` (l'autre fenêtre)
- juste une expression (ex. `1 + int('11')`) ⇒ affiche la valeur en bas
- attention: `F1`/`F2` charge des exemples, `Echap` quitte
- `pytohtml.py` : structure d'un programme
- `python3 pytohtml.py monfichier.py`
- crée une page web montrant la structure du programme
- aussi `pytoroad.py` (nécessite « graphviz »)
- <a hrfe="https://pythontutor.com/live.html#mode=edit" target="_blank">Python Tutor</a> {anim-continue}
```python
def quoidonc(x, y):
print(x)
if x < y:
return 1
else:
return y * quoidonc(x-1, y+1)
print(quoidonc(6, 4))
{slide dense}
```
## Points Clés {key deck-status-fake-end}
-->
</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="https://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 -->
<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 = ('//s10.histats.com/js15_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<noscript><a href="//www.histats.com" target="_blank"><img src="//sstatic1.histats.com/0.gif?2767123&101" alt="javascript hit counter" border="0"></a></noscript>
<!-- Histats.com END -->
</body>
</html>