# Apprendre à coder en ligne

## Résumé
Dans la continuité de nos ateliers et compte tenu de la situation actuelle 🤷, Les Bricodeurs proposent de vous aider à découvrir ou renforcer vos compétences en programmation. Apprendre à coder en ligne ce sont des [articles](https://lesbricodeurs.fr/articles/),des ateliers [live les
jeudis](https://www.facebook.com/events/2876113685783817/), des [vidéos](https://www.youtube.com/playlist?list=PLFaGPFMou9FPzdU_X4MpLGPGz0xkbEFpv), et bien sûr des échanges sur [slack](https://join.slack.com/t/bricodeurs/shared_invite/zt-3sxsf81w-Rvwn~LcyLi1ekAln6qCl1Q).

[toc]

## Organisation

### Liens importants
- [Page de présentation générale](https://lesbricodeurs.fr/apprendre-a-coder-en-ligne/)
- [Document avec elements de communication](https://hackmd.io/7FjEz_E5QkyUXrJ2B_zPsA)
- [Guide pratique sur comment faire le livestream](https://hackmd.io/4iG1WzToSS6AeaxJq-WHGA)

### Todo

- [ ] Rédifer l'article "Animer des pages avec Javascript"
- [ ] Préparer la prochaine présentation (Appel d'API en Python?)
- [ ] Communiquer pour l'événement
- [ ] Améliorer la visibilité de la page "apprendre à coder en ligne"

### Prochaines sessions live
Tous les jeudis à 18h une petite session de livecoding par un des bricodeurs sur son langage de predilection.

| Titre| date | Animateur | Moderateur | lien video| lien article |
| -------- | -------- | -------- | -------- | -------- | -------- |---- |
| C'est quoi une page Web? | jeudi 19 | Sylvain | Flavien | | |
| Premier programme, un pendu | jeudi 26 mars | Xavier | Flavien | | |
| Javascript dans ton navigateur | jeudi 2 avril | Flavien | Sylvain | | |
| Les données texte en Python | jeudi 9 avril | Xavier | Flavien/Sylvain? | | |
| Intégration de maquette web | jeudi 16 avril | sylvain | Xavier | | |
| Découvrir la Ligne de commande? | jeudi 23 avril| Martin | Xavier | | |
| | jeudi 30 avril| ? | ?? | | |

| Appels Ajax (frontend) | | | ?? | | |
| L'analyse de langage naturel en Python| |Xavier | ?? | | |
| Les bases de données| | | ?? | | |
| Requettes et API en Python| |Xavier | ?? | | |

#### 1. Expliquer le web, la communication, avec un serveur, guider vers un article pour une page simple

::: spoiler Pitch
> Que sont les "pages Web", et comment sont-elles crées? Si tu t'es déjà posé ces questions, alors tu es le/la bienvenue lors du premier _live Youtube des Bricodeurs_ ! En un peu moins d'une heure, Flavien et Sylvain t'expliquent comment le Web s'est strucutré autour des pages HTML et feront la démonstration en direct de l'écriture d'une de ces pages. Ca t'intéresse ? Alors rendez-vous Jeudi soir à 18h.
:::

::: spoiler Objectifs:

- Explication du Web: Le protocole HTTP, requêtes et réponses
- (?) Circuler sur le Web: IP et URLs
- Une page web simple en HTML et CSS
- (?) Mettre en ligne sa page: github pages / netlify
- (?) codepen.io> exercice a faire une page
:::

:::spoiler Article publié

Code source: https://github.com/raaaahman/LesGeeksDuDimanche.github.io/blob/creer-premiere-page-web/_posts/articles/2020-03-21-creer-premiere-page-web.md

- [x] Introduction
- [x] Relecture
- [x] Comment gérer les solutions des TPs?
- [ ] balises "spoiler"?
- [ ] script?
- [x] footnotes
- [x] Ajouter le lien vers le formulaire
- [x] Remplace les points par des points médians

:::

#### 2. Découvrir la programmation avec un jeu en Python
::: spoiler Pitch
▶ Et si nous découvrions le code en faisant un petit jeu textuel ?

Python est aujourd'hui un des langages de programmation les plus utilisés au monde. Il permet de réaliser des scripts, des sites Web, d'analyser des données et même de construire des intelligences artificielles ! Nous apprendrons pas-à-pas les bases du langage en réalisant un jeu du pendu. Le programme vous fera deviner un mot en moins de 7 étapes, sinon...

Envie de découvrir la programmation en général où Python en particulier ? Alors rendez vous jeudi à 18h sur Youtube !
:::
:::spoiler notes
preciser le public...
- idee Martin faire un bot slack
- Ressources:
> - itch.io (héberger et publier)
> - [open game art](https://opengameart.org/) (ressources graphiques et sonores libres de droit)
> - [game jam Open Game Art sur itch.io](https://itch.io/jam/opengameart-spring-2020-game-jam)
:::

#### 3. Animer une page en JavaScript
:::spoiler
JavaScript est l'un des langages de programmation les plus sollicités de part sa grande couverture. Il est disponible dans les navigateurs, sur les serveurs et même dans les systèmes d'exploitation. C'est un langage prisé des développeurs qui souhaitent ajouter du dynamisme à une page Web, créer des applications Web, créer des application mobiles ou développer un serveur.

>> Au programme
- Découverte de JavaScript (les bases du langage)
- Exercice pratique dans le navigateur

➤ Infos pratique
• Pour aider l'association, pensez à adhérer (2€) : http://bit.ly/2rELkek
• Ouvert à toutes et à tous.
• Restons connectés sur Slack ! https://bit.ly/2My1qAc
• Plus d'info sur l'association : https://lesbricodeurs.fr
:::

#### 4. Analyser des données texte en Python

Prérequis: _2. Découvrir la programmation en Python_
:::spoiler
Comment regrouper les données d'un sondage? Quels sont les mots les plus courants dans "La peste" d'Albert Camus? Combien de caractères comporte la Macarena?

A cette occasion nous découvrirons les notions de listes et dictionnaire en Python.

Doc preparation https://colab.research.google.com/drive/1HtkldPE84cAIBa_NeUWYbASEQIUO1dXd

:::

#### 5. Intégration d'une maquette web

Prérequis: _1. Créer une page Web_

Suite à notre présentation des langages HTML et CSS, il est temps de passer à la pratique en intégrant une maquette fournie par un web designer.

- Trouver une maquette libre en ligne: [Dating Website sur dribble](https://dribbble.com/shots/3066130-Dating-Website-Theme-Free-Psd)

#### 6. Ligne de commande

#### 7. Analyser des données chiffrées en Python?

Prérequis: _2. Découvrir la programmation en Python_ et 4.
:::spoiler
Une des principaux usages du langage Python est d'analyser des données textuelles. Nous découvrirons comment compter les caractères, les fréquences de mots, sur un texte connu et sur les résultats d'un sondate

X. Python un peu de web (scraping et API) + deploy
:::spoiler
> Xavier, Pakal

> seance les gens choisissent un projet

:::

#### 8. Les bases de données

Explication de la persistance des données et du langage SQL

[Plan de l'atelier](https://hackmd.io/93eI6ZhqSnWpsnbzNRQ3hQ)

### Methode pedagogique
- A la fin petit projet proposé
- Horaire 18h pour la premiere, et on demandera ce qui convient le mieux.
- [Document cursus](https://docs.google.com/presentation/d/1QLUJ9q7qbukCFI3NeVoIhSI-01XAGhMRUA36HPxNZxM/edit?usp=sharing )
- Suivi sur le canal #Apprendre a coder en ligne

## Format et idées

### Public visé
[Premiers retour du sondage
](https://lesbricodeurs.typeform.com/report/nlyRQK/iy60w0HhTgrv0tr0)

Cela semble plutot debutants, oriente web, un peu de script et jeux
Retour flavien: il faut bien decrire l'event: public, ce qu'on va faire

Parmi les publics de apprendre a coder ensemble:
- Debutants : plutot web, en reconversion
- Juniors: Cherche a renforcer ses competences, plutot sujet transverses (mise en prod, agilité...)
- Confirmés : plutot ponctuel sur un truc, genre docker

### Une série d'articles de présentation de plateformes d’apprentissage en détail.

#### Articles publiés

1. Sylvain, Martin :
- Khan Academy
- exercism
- Codingame

#### Articles en préparation:

1. Christophe
- [Fun Mooc (gratuit), Ensemble des Mooc de l'Enseignement supérieur](https://www.fun-mooc.fr/cours/#filter/subject/informatique?page=1&rpp=50)
- [God is a Cube (payant), Serious game](http://godisacube.com/?lang=fr) (possibilité de donner 20 clés)

### Autres idees live
- Javascript++
- La POO
- Le DOM
- AJAX
- Et maintenant? Framework, apps, pwa,
- Accélérer le développement: librairies (bootstrap?), frameworks (Django?) et CMS (Pelican?)
- Ligne de commande
- Le point sur les formations: Les Bricodeurs reviennent sur leurs formations de développeurs/designers/marketeux... L'idéal serait de couvrir les différentes modalités de formation:
- Cursus universitaire
- Formation professionnalisante (Sylvain, ...)
- Formation continue
- Formation en alternance (Sylvain, ...)
- Auto-formation/MOOC
- Les bases de données:
- SQL, Entités et relations:
- [x] un dictionnaire des inventions et leurs inventeurs
- [ ] une bibliothèque de citations, avec livres et auteur
- Cassandra(?): un serveur d'enregistrement de "high-scores"

### Idées d'articles:
- un article pour résumer chaque atelier
- énoncé des ateliers type "activité", sans la réponse. Avec les ressources et lien vers un "groupe" d'apprenants en ligne
- les projets de démo des Bricodeurs: qu'est-ce que vous avez présenté aux entreprises lorsque vous cherchiez votre premier job?
- le syndrôme de l'imposteur: peut-on le combattre? Doit-on s'empêcher de postuler? (peut-être un live stream twitch en format table ronde, à voir)
- les différents métiers du web: idéalement un bricodeur pour présenter chaque métier
- Les designers:
- web designer
- UI/UX designer
- Les techniciens:
- intégrateur web (Alexandre ?)
- développeur front (Flavien ?)
- développeur back (Sylvain ?)
- administrateur système (Nicolas ?)
- administrateur de base de données (ça existe encore?)
- Bonus: Le paradoxe du développeur Full-Stack
- Tous les devs sont "fullstack"...
- Aucun dev n'est VRAIMENT "fullstack" ...
- Les éditoriaux:
- webmaster
- éditeur de contenu
- Les stratèges:
- architecte des système d'information
- spécialiste SEO
- digital marketer
- data scientist/data analyst
- L'agilité, qu'est-ce que c'est?
- Les principaux editeurs de texte
leger (sublime, notepad++), lourd visual code

### Format des ateliers live

#### Leçon

Temps Moyen : 1h30 (présentation + exercice + questions)
Avoir un deroule pas à pas
Prevoir un temps question a la fin
Carrement assistant sur le chat

#### Activité

Temps Moyen: 1h30
Prévoir des étapes intermédiaires téléchargeables pour le spectateurs qui rejoignent en cours de route
Utiliser des éditeurs de code en ligne (et créer des groupes/salles de cours/étiquettes) pour faciliter le partage entre apprenants

### Autres idées d'ateliers
- Le nocode, coder sans coder (appeler contournement pour faire un atelier?)
- https://bubble.io/ (jamais testé)
- scrapping et interactions d'API en Python > Xavier
- git , github desktop, apprendre a interagir
Modele de video sympa https://youtu.be/hPfgekYUKgk
-> video sur le sujet par Martin
- Jeu en python (pygame)
- Jeu Javascript
- Un idle game/jeu incrémental: (type [Candy Box](https://candybox2.github.io/candybox/))
- Un Sudoku
- niveau 2: grille du jour (appel vers une API)
- Jeux web VUEJS (genre http://xalava.github.io/SupplyLine/ ou https://xalava.github.io/WireWorld/#Infos )
- Rappel des bases de HTML et CSS
- Faire un site static de photos javascript + generateur> Xavier
- Faire un script de tri en python > ?
- jeux dont vous êtes le héros?
:::spoiler
Sylvain: possibilité de le faire en HTML/CSS également
:::
- conversion monétaire (pas très fun)
- conversation tinder (plus fun)
- [Php, l'éléphant du web (mise en place d'un environnement WAMP)](https://hackmd.io/@MzZAER16SmOzYj7mHXqQDA/S1QYA8aBL) > Sylvain
- Table ronde WordPress > Flavien, Sylvain, Yann
- Etre independant
- Travailler en remote:
- https://www.youtube.com/watch?v=oOE36iJ7xFk

- Tous les mercredi de 14h à 16h, sur twitch une session de découverte de scratch, minecraft ou la creation 3D (confirmation?)
- TDD, clarté du code, refactoring, contribuer a un projet open source > Martin
:::spoiler
Sylvain: inviter des gens de Software Crafters Lyon
:::

### Idees Pratique

Organisation via Framadate
Plateforme: YouTube (live et rediffusions)
https://www.loom.com/
Format:
- live meetup filmé
- Workshop
- Video

Martin souleve la notion d'asynchronisme

## Communication graphique

Proposition d'Alexandre:


- Trouver un moyen de décliner selon les ateliers: programmation, web, formation...
- Agrandir l'écran et y insérer un picto qui change
- Changer les couleurs d'ambiance (triangles dans le fond, vêtements du personnage, saison des plantes)
- Changer le personnage
- Ajouter du dynamisme

## Objectif a terme

- Page claire avec quelques choix qui guident vers les langages, une plateforme, une formation ou un evenement
- Une plateforme de recommandations de ressources de formation: receuiller des témoignages et les consigner par plateforme poru diriger les débutants
- Question generale de la methode pedagogique