LE WIKI A JOUR EST LA BAS: https://github.com/simplonco/WikiDev

Jour 1

• Ice breaking (petit papier avec nom prenom, notre présentation et leur présentation en pair presentation )
  Gamifier les présentations par binôme

• Installation d'Ubuntu 16.04

• La console ça se mange

Jour 2 :

• Création et prise en main de Slack, Trello, Mypads,...

  • Slack (Présentation channels, création du chan Narbonne)

  • Creation d'un compte sur le board de Narbonne

  • Openclassroom (demande Prenium)

• Présentation de Linux :
  Plus de 300 distributions Linux disponible QuebecOS et Distrowatch
  Présentation d'Ubuntu
  Introduction au scrum
  Exercice Bash : Créer un dossier sur le bureau, à l'intérieur créer un fichier texte qui contient le texte "Hello simplon" pour voir tous les repetoire taper la commande ls

• Tutoriel de l'éditeur Nano :
  Installation / Prise en main
  ctrl a (allez en début de ligne)
  ctrl e (allez en fin de ligne)
  crtl o (sauvegarder un fichier)
  ctrl x (quitter)
  ctrl w (rechercher une occurence)

Jour 3:

• cd, ls, mkdir, rmdir, rm , cat, history, apropos, mv, cp
• Challenge jeu commandes bash
• Guide de survie Simplon.pdf ( document épinglé dans le channel #teamnarbonne2017 )
• CheatSheet Commandes Bash
• Cours BASH
• Tutoriel BASH

Jour 4:

• Faire tout le parcours : HTML / CSS sur OpenClassRoom

• Les bases de HTML - Mozilla

• HTML/CSS3 Coda Ales

• [HTML 5 Caprio]

• Cours de dactylo en ligne, placement des doigts sur le clavier, techniques : http://www.typingstudy.com/fr-french-2/lesson/1/part/2

• Exercice de dactylo pour tester sa vitesse de frappe :

• https://10fastfingers.com/typing-test/french

• http://solodactylo.com/test/

• Exercice de carte de visite

• GIMP initiation

• Installation Atom

• Film Linux : Nom de code Linux

Jour 5:

• Reset CSS d'Eric Meyer
• Position : Static, Fixed, Absolute, Relative - Tutoriel sur Alsacréations
• En apprendre un peu plus sur les layout et le positionnement
• Sauvegarde du système

Semaine 2

Jour 6:

• Installation du serveur APACHE
  sudo apt update
  sudo apt install apache2

• Changement du propriétaire et des modes(r=read, w=write, x=eXecute) sur les répertoires dans /var/www/html/
  sudo chown -R www-data:www-data /var/www/html/
  sudo chmod -R 775 /var/www/html/
  sudo usermod -a -G www-data nico

• Les tableaux HTML

Jour 7:

• Terminal:
  ls -l -> ll
  ls -l -> la
  Ctrl + a = revenir au début de la ligne
  Ctrl + e = aller à la fin de la ligne
  Flèche du haut = revenir à une commande précédente
  Ctrl + c = Arrêter une commande ou un programme

Flexbox

• Apprendre à l'utiliser en jouant en ligne:
  FlexBox Froggy Flexbox defense

• L'importance des balises h1, h2,...h5 Explications

Jour 8:

• GIMP : Modification d'une map du jeu hedgewars:

• Tutoriel de modification d'une map

• Utilisation de sudo updatedb pour mettre à jour la base de donnée stockant le nom des répertoires et fichiers contenus sur le système.

• Puis utilisation juste après la commande updatedb de la commande locate qui permet de retrouver les fichiers sur le disque:
  locate Battlefield

• Addon Firefox : Pixel Perfect

• Ajout d'un utilisateur à un groupe existant :

• Tutoriel en anglais

• Inscription sur MyPads

Jour 9:

• Installation et test du logiciel AlgoBox et la vidéo de prise en main d'Algobox
• Test de Hour of Code avec minecraft en vue des prochains ateliers avec des collégiens ou écoliers...
• Exercice CSS (float, display, last-child, nth-child...) https://github.com/Boyquotes/exocss/archive/team2017.zip

Jour 10:

• Debugueur Firefox, mode responsive -> Ctrl + Shift + M
• Addon Atom : Emmet Vidéo de l'installation fonctionnement
  La CheatSheet Emmet : http://docs.emmet.io/cheat-sheet/

Semaine 3

Jour 11:

• Aller jusqu'à l'activité : Activity: Créez un mini-jeu de devinette Cours JS
• Eloquent JS

Jour 12:

• Finir la partie 1 de https://openclassrooms.com/courses/apprenez-a-coder-avec-javascript
• Exercice sur le tableau de fruits et légumes
• Trouver des images en ligne pour votre site ou blog (vérifier que la licence permette l'usage voulu):
  https://visualhunt.com/
  https://unsplash.com/
  D'autres ressources
  Icones : FontAwesome
  IconFinder

Jour 13:

DOM:
Schéma simplifié du DOM
Explication du DOM simplifiée
Plongez au coeur du DOM
Addon Firefox pour "voir" et inspecter le DOM

Jour 14:

Rappel JS avec Jordan

• Site pour harmoniser les couleurs

Jour 15:

• Blog tous le matin pour relater la semaine JS
• Introduction/Présentation de Jquery

Semaine 4

Jour 16:

Rappel JS avec un exo sur le DOM

Jour 17:

• Présentaion du projet d'énigmes sur le pays narbonnais

Jour 18:

• Intégration HTML à partir du modèle de ce site, à refaire en utilisant uniquement flexbox

Jour 19:

• Preparation d'un mockup et gabarit HTML/CSS pour créer la version numérique du jeu 'dont vous êtes le héros' pour l'atelier de Razimbaud

Jour 20:

• Journée à Razimbaud avec les enfants pour l'atelier code + histoire dont vous êtes les héros ( Histoire Numérique Interactive )

Semaine 5

Jour 21:

• Algorithmie sans ordinateur : Algo pour cuire des oeufs de différentes manières, la machine à café et la station essence automatique
• Lexique : tour de table des différents mots (KISS, YAGNI, DRY, Moscow, apache, ...)
• Anglais/Français : Traduction collective/collaborative de 3 vidéos TedX sur un pad puis dans des fichiers de sous-titre .srt pour visionner plus tard la vidéo sous-titré en français

Jour 22:

• Remise en forme des pages HTML/CSS de l'histoire de vendredi réalisée avec les enfants.

Jour 23:

• Intervention du parrain Jacques au sujet de l'intégration depuis un design Photoshop vers le HTML/CSS du site minecraft hosting
• Animation CSS3 : Coverflow
  Effet Hover sur un menu
  D'autres animations

Jour 24:

• Intervention de Julie pour présenter ces prochains cours au CFA, il faudra réaliser un gabarit(bootstrap) pour cela puis lui expliquer comment faire les autres fichiers/cours
  Les cours à utiliser

• Exercice JS pour le combat en JS :

• 1er exercice :
  Sur une page html :
  Faire une fonction JS qui lorsqu'on clique sur un bouton "Se battre" affiche dans la page HTML(pas dans un console.log) une 1 fois sur 2 soit:
  "Vous avez perdu"
  soit
  "Vous avez gagné puis 4 secondes plus tard une redirection vers une autre page html
  Etape 1 : Créer un bouton dans le fichier html avec un id combat et qui affiche "Se battre"
  Etape 2 : En JS(vanilla) ou jQuery
  Récupérer l'élément combat grâce à son id:
  soit avec
  getElementById('combat') ou $("combat") Etape 3 : Ajouter l'événement click sur le bouton combat avec en DOM-2 -> addEventListener ou la fonction click() de Jquery
  Etape 4 : Sortir un nombre aléatoire: soit 0, soit 1(gagné) à chaque click
  Etape 5 : Si égal à 1 afficher "Vous avez gagné"" et si 0 "Vous avez perdu" dans une div id=resultat
  Etape 6 : Créer un cookie avec vie=20 et afficher la valeur du cookie dans la div id=vie dans le HTML
  Etape 7 : Décrémenter d'une valeur le cookie et afficher dans le HTML sa nouvelle valeur, voir le tutoriel en anglais ou (en français)[http://ppk.developpez.com/tutoriels/javascript/gestion-cookies-javascript/]
  Etape 8 : Quand on gagne, rediriger sur une nouvelle page HTML et y afficher dessus le nombre de vie restante en lisant le contenu du cookie.

• 2eme exercice:
  Pareil que le 1er exercice mais seulement on gagne 1 fois sur 4 seulement à l'étape 4 :
  quand on perd, sa redirige vers une page fail

Jour 25:

• Regarder le cour openclassroom "Comprendre le web"
• Configuration de virtualhost avec apache
  Créez un fichier /etc/apache2/sites-available/blog.conf Ajouter la configuration par défaut en regardant le contenu du fichier 000-default.conf
  Modifier le valeur de ServerName avec votre pseudo slack ou le nom de votre site
  Mettez le bon chemin sur votre système de vers votre site sur la ligne DocumentRoot
  Utilisez la commande apache "a2ensite" pour activer ce nouveau site dans apache
  a2ensite blog
  Comme indiquez en retour de la commande ci-dessus : réchargez la configuration d'apache avec la commande "service apache reload" pour que ce nouveau virtualhost soit pris en compte
• Pour ne pas lister le contenu du répertoire web il faut configurer le virtualhost en ajoutant au fichier blog.conf l'option Indexes précédé d'un -
  <Directory /usr/local/apache2/htdocs/dontlistme>
  Options -Indexes

[Tutoriel pour le listing des fichiers/dossiers(en US)](https://wiki.apache.org/httpd/DirectoryListings)

Jour 26:

• Correction exercice JS combat
• Suite virtualHost sous apache et fichier /etc/hosts
• Travail sur les gabarits avec Bootstrap
• Fin histoire dont vous etes le heros

Jour 27:

• La vidéo d'introduction à git, regarder seulement jusqu'à 36 minnutes
• La CheatSheet FR
• Installer git "apt install git" #Configurer git avec votre nom d'user et votre mail git config --global user.name "MON_USER" git config --global user.email "MON_EMAIL@DOMAINE.fr"

Créer et se déplacer dans un nouveau dossier dans /var/www/html/

mkdir projet_versionner
cd projet_versionner# Initialiser le projet avec Git
git init

Vérifier le status

git status

Ajouter le premier fichier (modifié avec nano par exemple)

git add index.html
git status

Le fichier est maintenant ajouté dans la zone de stage mais pas encore validé

Git commit pour valider ces changements

git commit -m "Un message de commit clair"
#Commande pour voir l'historique de vos commits:
git log

Jour 28:

• Reprise de git (add, commit, branch)
• Présentation de FTP avec Filezilla pour l'upload de l'histoire de l'atelier des enfants
• SSH avec les raspberry
• Activité / Jeu SSH
• Mise en place du planning de la semaine suivante