Design Tech Academie

Vous retrouverez les principales informations (concernant les procèdures d'admission, le déroulement de la formation, les moyens pédagogiques mis en oeuvre, les débouchés...) sur la formation Design Tech Académie organisée par Telecom Saint Etienne en partenariat avec Zoomacom.

Cette page permettra de présenter les différents supports pédagogique utilisés au cours de ce cycle de formation sur l'apprentissage du code et de la programmation.

Cette formation se déroule sur 10 mois en continu et se compose d'une formation scolaire, pour une durée de 6 mois) et de 4 mois de stage en milieu professionnel.

Les contenus pédagogiques doivent favoriser l'apprentissage par la pratique !

Déroulé

Les 6 mois de formation en milieu scolaire sont composés de 10 cycles de 2 semaines pour apprendre les bases pratiques de la programmation (5 mois). Les 4 semaines restantes sont : une semaine d'accueil pour une rentrée en douceur, apprendre à se connaître et découvrir la programmation et configurer son matériel et 3 semaines permettant d'organiser des temps de bilan, d'évaluation et de suivi des évolutions de la formation ainsi que l'organisation des soutenances et des examens.

Semaine d'accueil

Mardi 4/10 : Travail en groupe avec la mallette pédagogique Thymio

OBJECTIF : découvrir la notion d'algorithme dans une démarche ludique

Objectifs secondaires :

• Apprendre à documenter et partager son projet
• Se familiariser à la programmation de manière progressive
• Echanger et débattre pour collaborer dans une démarche de projet
• Aborder les notions de licence

Présentation de JP des notions théoriques d'algorithme et de variables.

Prise en main de Thymio en suivant le guide de fréquence écoles dans un premier temps. Commencer par analyser les 6 comportements prédéfinis en relation avec les blocs. prévoir des exemples de blocs et comportements pas a pas + des blocs mélangés à remettre dans le bon ordre pour avoir la bonne démarche.

Dans un second temps, explorer 2 à 3 projets de programmations présents sur le site ( création avec Thymio) avec une prise en main du logiciel asebia studio.

L'après-midi devra permettre à chaque groupe de réaliser un programme et de le coder, les différentes étapes de ce travail devront-être rédigées sur Movilab afin de permettre à d'autres utilisateurs de Thymio de se l'accaparer !

RESSOURCES pour utiliser Thymio et le programmer :

Inirobot : guide d'initiation à la robotique avec Thymio

Liste des capteurs et actionneurs de Thymio

Exercices pour apprendre à programmer Thymio comme par exemple : Apprendre à Thymio à parler

Guide du mode texte

Thymio et la notion d'algorithme

Mercredi 5/10 : Configurer son ordinateur et découvrir ses différents composants

Le matin, découverte du hardware à l'OpenFactory : Démonter et remonter une tour de PC, par groupe de 5, en analysant le contenu d'un ordinateur (rôle et caractéristique technique). Restitution et échange en groupe, présentation du projet Jerry serveur nomade Temps de veille sur l'actualité numérique Présentation de l'OpenFactory

OBJECTIF : Installer un OS Linux sur un ordinateur et le configurer en installant les logiciels nécessaires à son bon fonctionnement

Objectifs secondaires :

• Connaitre le fonctionnement d'un ordinateur d'un point de vue software et hardware
• Configurer un ordinateur

Jeudi 6/10 : TRE 2.0 - Apprendre les langages de programmation

OBJECTIFS :

• Construire son identité numérique et la valoriser professionnellement
• Connaitre les composants d'un ordinateur et leurs rôles
• Favoriser l'apprentissage des langages de programmation en autonomie

• TRE 2.0 : Travail sur la rédaction individuelle de son CV et son accessibilité en ligne ( doyoubuzz permettant une harmonisation des CV pour réaliser un book ou seeqle de l'emploistore, au choix des étudiants s'ils veulent etre un peu plus original dans la présentation visuelle de leur CV).

Si temps disponible : aller plus loin en explorant la question des réseaux sociaux pro et de la recherche en ligne (du boncoin à pole emploi et son emploistore) Sinon, à reprogrammer pour plus tard dans le cursus.
Pour ceux qui ont finit avant, travail en autonomie sur codeacademy : learn the HTML

• Apprendre les langages de programmation

Avant de rentrer dans le vif du sujet, présentation rapide de framapad pour la prise de note collaborative. Des élèves expliquent qu'ils ont créé un IRC pour communiquer (nom : DTA).
Manifeste pour le développement Agile de développement de logiciels.

Editeur de texte : Atom

Hyper Text Markup Langage : Ressources

• Tour d'horizon des première balises HTML principales (liste des balises W3C).
• Tour d'horizon du CSS liste CSS
• jsbin.com
• codepen.io
• jsfiddle.net
• cssdeck.com

Défi : défi du jour réaliser sa carte de visite

Outils recensant les sites permettant l'apprentissage du code et de la programmation en autonomie :

• Symbaloo
• carte heuristique comprenant les outils pour s'exercer au code

Vendredi 7/10 : Travail en binôme sur "l'innovation numérique

Travail en binome pour réaliser une présentation sur une thématique autour de l'innovation numérique. Présentation des exposés (10 minutes par binome + 5 minutes d'échanges et questions).

Cycle "Déploiement d'un OS sur une machine physique ou virtuelle"

Semaine 1

Lundi 10/10/2016

Fin des présentations sur l'innovation numérique.
quelques remarques d'ordre général :

  * Attention à l'orthographe : pour vous aider, un outil de correction de l'orthographe
  * Pensez à faire un sommaire de vos présentation
  * Vous êtes légitimes sur un sujet soyez confiant en vous !

Exerice sur les commandes sous Linux : A partir du terminal, copier un dossier en effectuant une recherche de fichiers, puis supprimer les dossiers copiés.
Pour les plus avancés, réaliser un script qui supprime les fichiers contenant un certain préfixe.
Aide : Les commandes fondamentales de Linux

Introduction à Java Script :
Live coding : quelques notions de base abordées pour commencer sous Java Script :
Les variables, les opérateurs, les commandes (alert et prompt), les conditions, les fonctions et les commentaires.
vous retrouverez le code commenté concernant ces différentes notions Github exemple JavaScript Workshop : Pour visualiser le contenu de vos scripts, vous pouvez utiliser le site suivant : Voici la liste des exercices à réaliser :
- Dessiner c'est gagner : Ardoise magique
- Ecrire un script/programme qui demande :

• De quelle couleur est le cheval blanc d’Henri 4 ?
  
• Puis combien y a-t-il de 7 nains ?
  

  les scripts doivent autoriser 2 tentatives par question 

• Deviner un chiffre : Ecrire un programme qui demande de deviner un chiffre généré aléatoirement compris entre ... et ... avec un nombre d'essai limité.
  
• Réaliser une calculatrice :
  Le programme demande les éléments suivants :

   de choisir une opération (+ / - * ) 

   un 1er chiffre 

   un second chiffre 

   Le programme affiche ensuite le résultat de l'opération 

Correction proposée par les étudiants des différents exercices proposés sur la journée

Mardi 11/10

Inscription Maison de l'Université En parallèle accueil des étudiants pour répondre à leurs questions sur les problèmes rencontrés au cours des différents exercices réalisés jusque-là.

Travail en autonomie sur les CVs, puis retour-discussion sur les problèmes rencontrés avec les premiers exercices JavaScript la veille

Inscription sur Slack, dans le groupe DTA_TSE

Installer un OS sur une machine virtuelle :

• Tuto 1
• On préférera VirtualBox depuis les dépots Ubuntu (sudo apt update, puis sudo apt install virtualbox-qt)
• Tuto 2
• Bien lire les pré-requis système : [1]
• Installer Fedora sur la machine virtuelle

Constitution des groupes pour le fil rouge de la quinzaine - Distributions Linux

• Production 1 : Quelques pages HTML/CSS présentant les avantages/inconvénients/caractéristiques de la distribution en question
• Production 2 : Un tutoriel vidéo présentant l'installation de la distribution sur une machine physique ou virtuelle

• Groupe 1 (Debian) : Yacine - Clément J. - Flavien - Jimmy - Thomas - Antoine
• Groupe 2 (Ubuntu) : Patricia - Enzo - Levon - Nicolas - Jean
• Groupe 3 (Mint) : Valérie - Christian - Vincent - Christophe - Julien
• Groupe 4 (Arch-Linux) : Damien - Kevin - Baptiste - Clément B. - Yassine
• Groupe 5 (Fedora) : Germain - Tamime - Alex - Yann - Mouhtard

Mercredi 12/10

Les métiers du web : en dataviz

Ces jeux permettront aux étudiants de se dévoiler et de se faire connaitre auprès des autres membres de la promotion, tout en leur permettant d'appréhender la notion de "donnée" au sens large du terme. Le principe de la dataviz tangible sera appliquée (en s'inspirant de cet exemple de l'infolab du CRIJ Rhône-Alpes, et en le réadaptant). Cet exercice permettra également aux étudiants de s'approprier des notions de design en terme de présentation graphique de sa dataviz et de licence pour les illustrations).

En 3 minutes... 10 perspectives de métiers : Matériel nécessaire : post-it + gommettes Les étudiants ont 3 minutes pour proposer 10 métiers qu'ils penseraient pouvoir effectuer après la formation. Les gommettes permettront de pondérer l'envie des étudiants de faire ce métier :

• une valeur de 5 pour les 3 principaux métiers qu'on souhaiterait faire (représentés soit par une couleur de gommettes / une grande taille)
• une valeur de 3 pour les 3 métiers secondaires qu'ils souhaiteraient faire (représentés soit par une couleur de gommettes / une moyenne taille)
• une valeur de 1 pour les 4 derniers métiers (représentés soit par une couleur de gommettes / une petite taille).
  

La dataviz c'est quoi ? Quelle plus-value ? 2 objectifs : comprendre l'intérêt de collecter des données ? & ensuite comprendre l'intérêt de traiter ces données ?

• TED : La beauté de la visualisation des données
• TEDx : A la découverte de Viztada
• Un exemple de dataviz dans le domaine de l'orientation.
  

Ensuite, les post-it seront centralisés et répartis par métier. Un tableau sera réalisé dans un tableur en prenant en compte le poids du métier (indiqué par les gommettes) afin de rendre visible leurs perspectives de métiers, mais aussi le poids de leurs envies pour chacun des métiers ! Pour visualiser et analyser ces données, on importera le tableur sur datawrapper Infographie à réaliser avec un tableur (enregistrer votre fichier en csv) et le site datawrapper ou piktochart.
RESSOURCES :

• Infolab scenario peda pour dataviz tangible sur la fréquentation d'un événement

A la rencontre d'une start-up : rmopportunities.eu/fr et prodigo
A la rencontre de ses fondateurs pour échanger sur leurs parcours professionnels et leurs cursus, de connaitre le cheminement entre l'idée d'un projet et sa concrétisation administrative et la dynamique partenariale. les créateurs de rmopportunities

Travail HTML & CSS :

• Retour sur la carte de visite : 2 à 3 élèves proposent leur correction (en évoquant les problèmes rencontrés et les questions qu'ils se sont posées!)
  
• Exercice HTML-CSS :
  

- Faire un point sur l'avancement du travail pour l'exercice des fruits
- S'exercer en autonomie avec learnlayout.com (vous pouvez consulter leurs tutoriels
Commencer à aborder les notions de colones et de tableau en reproduisant ces modèles :
modele 1
modèle 2

Utiliser Placehold pour des images à la taille voulue.

Bilan de mi-semaine :

Jeudi 13/10

Veille, configuration adresse Télécom et Use Panda

Installation d'un serveur web Debian sur une machine virtuelle :

• Création d'une nouvelle machine virtuelle
• Ressources : 2Go de RAM, 8Go d'espace disque, 2 coeurs de processeur
• Installation de Debian : [2]
• Installation de sudo puis openssh-server
• Ajout d'une deuxième carte réseau pour pouvoir se connecter sur la machine virtuelle depuis l'extérieur
• Le serveur est maintenant fonctionnel

Live coding Java Script :

• Les tableaux
• Les chaînes de caractères
• Les boucles
• Les fonctions prédéfinies pour les types de données

Workshop autour de plusieurs défis

  Login/password :
      * Vérifier que le login contient pus de 3 caractères
      * Vérifier qu'il contient un @ puis un nom de domaine et une extension
      * Vérifier que le mot de passe correspond (à vous de le définir au début du programme)
      * Pour aller plus loin, vous pouvez avoir un tableau d'utilisateurs et un tableau de mots de passe

  Calcul mental :
      * Le programme tire au hasard deux chiffres et une opération
      * Il l'affiche et demande sa réponse à l'utilisateur
      * Il vérifie si la réponse est exacte

Retour sur les points bloquants de la journée

Vendredi 14/10

Préparation à la réalisation de tutoriel vidéo en groupe

Dans un premier temps amener les étudiants à se questionner sur ce qu'est pour eux un bon tutoriel ? Après leur présenter des regles de base Aborder ensuite quelques aspects techniques de script cadrage et plans et enfin leur présenter des exemples de tutoriels propres et pédagogiques.

Par groupe, ils commenceront à écrire le script de ce premier tutoriel en le découpant par étape, en précisant les plans choisis et la façon de capturer l'écran...

Autonomie collective : travail sur leurs projets individuels et collectifs du cycle

Différentes fonctions en JavaScript à préparer pour le Coding Dojo :

     * max_2(a,b) renvoie le maximum entre a et b
     * max_3(a,b,c) renvoie le maximum entre a, b et c
     * voyelle(c) renvoie true si c est une voyelle, false sinon
     * contient_voyelle(str) renvoie true si la chaîne de caractères str contient une voyelle, false sinon
     * translate(str) prend une chaîne str et, pour chaque consonne, renvoie la consonne doublée avec un o au milieu.
    Par exemple, translate("this is fun") renvoie "tothohisos isos fofunon"
     * reverse(str) renvoie la chaîne str inversée
     * sum(tab) et mult(tab) renvoient respectivement la somme et le produit de tous les éléments du tableau tab
     * longueur_max(tab) renvoie la chaîne de longueur maximale dans le tableau tab
     * longueur_sup(tab,i) renvoie un tableau contenant toute les chaînes de tab de longueur au moins égale à i
     * premieres_lettres(tab) renvoie une chaîne contenant la première lettre de chacune des chaînes du tableau tab

Récupérer le fichier Exercices.js pour le compléter et utiliser les batteries de test pour valider son code.

Semaine 2

Lundi 17/10

Petit moment de veille intellectuelle et technologique : ça parle du câble déployée par Facebook (avec Google) pour relier Los Angeles à Hong-Kong, d'une application pour avions en papier, d'Intelligence Artificielle et la possibilité d'être "conservé" numériquement, ou bien encore de Sprayscape... mais derrière tout ça sont évoquées des questions d'éthique, d'algorythme, d'enjeu économique

Coding Dojo sur les exercices Javascript, construction collective de la correction

Après-Midi :

• Autonomie collective : travail en groupe sur leur projet
• Entretien individuel :

Retour sur la présentation de leur projet de la semaine d'accueil
Un bilan sur le ressenti des stagiaires au sein de la formation sur leurs envies, leurs motivations, leurs attentes vis à vis de la formation et toutes les questions qu'ils souhaitent aborder... On évoque aussi leur projection sur ce qu'ils souhaiteraient faire professionnellement ou scolairement après la formation

Mardi 18/10

• Réalisation d'un CV en CSS
• Autonomie collective : travail en groupe sur leur projet
• Workshop collectif sur la suite des exercices Javascript
• Poursuite des entretiens individuels

Mercredi 19/10

• Echanges professionnels : Eddie, médiateur numérique et community manager pour l'association Zoomacom.
  • Lire Le paradoxe du veilleur – et comment s’en sortir
• Autonomie collective : travail en groupe sur leur projet

Jeudi 20/10

• Veille, discussion autour de l'intelligence artificielle et des algorithmes de reconnaissance vocale / reconnaissance de caractères manuscrits
• Installation d'un serveur web sur sa propre machine avec David
• Lien entre une page HTML et du code Javascript
• Coding dojo sur d'autres fonctions, correction collective
• Début de la réalisation des tutoriels vidéo (vidéoprojecteur disponible)

Vendredi 21/10

• Fin de la réalisation des tutoriels vidéo
• Suite des entretiens individuels
• Poursuite du projet en fil rouge avec David (installation wordpress et installation seveur web sur VPS distant)
• Exercices en autonomie autour de Javascript / HTML / CSS

Migration Debian 7 vers Debian 8

Défis Javascript :

    * conversion(x) qui convertit une somme x des francs en euros : conversion(100) = 15.24
    * heures_to_secondes(h,m,s) qui convertit un horaire des heures, minutes et secondes en secondes :
 heures_to_secondes(2,17,54) = 8274
    * difference(h1,m1,s1,h2,m2,s2) qui renvoie le temps écoulé entre 2 horaires (vous pouvez utiliser la fonction précédente)
    * somme(m,n) qui renvoie la somme de tous les éléments de m à n (inclus) : somme(5,8) = 5+6+7+8
    * fact(n), qui renvoie le produit de tous les éléments de n à 1 : fact(5) = 5*4*3*2*1
    * moyenne(tab) qui renvoie la moyenne des éléments d'un tableau (contenant des valeurs numériques)
    * moyenne_longueur(tab) qui renvoie la longueur moyenne des chaînes de caractères d'un tableau
    * Créer ensuite une page HTML qui permet de faire l'interaction entre l'utilisateur, qui rentre les valeurs à calculer
(avec des prompt par exemple) et les différentes fonctions, déclenchées par des boutons
    * hasard(n,m) qui renvoie un chiffre au hasard entre n et m
    * Demander ensuite à l'utilisateur les chiffres à donner en paramètre à hasard et lui faire deviner le nombre choisi, 
 en comptant le nombre de tentatives (vous pouvez aussi le limiter)
    * Faire ensuite un programme où l'ordinateur tente de deviner un nombre que vous avez choisi. Vous répondez à chaque
 tentative : plus grand ou plus petit
    * Faire un programme qui demande à l'utilisateur son identifiant, vérifie s'il apparait dans un tableau que vous aurez
 défini auparavant et si le mot de passe correspond (avec les mots de passe dans un autre tableau). Si l'utilisateur n'apparait
 pas, rajoutez-le dans le tableau

Semaine 3 cycle 2 : A la découverte des fabLabs

Sur ce cycle on part à la rencontre du protypage , ce cycle va permettre de réaliser un objet qui vous servira de fil rouge pour toute la suite de la formation. Si vous avez un peu de temps hésitez pas à aller regarder le blog d'Eskimon, la partie tuto arduino peut vous aider pour les séances à venir et la partie bricolage vous montrera une partie du champs des possibles avec les cartes électroniques programmables. Hésitez pas non plus à aller découvrir sur le net les différentes possibilités de réalisation avec arduino ou raspberry pi (comme sur instructables )!

Lundi 24/10

• A la découverte de Python
  

    Tutoriels :
    * OpenClassrooms
    * Developpez.com
    * Débuter avec Python

• Découverte du Raspberry Pi
  

    * Déballage et premier démarrage
    * Raspberry Pi 2 sous Raspbian
    * Premier démarrage sous Raspbian
    * Sense Hat

Mardi 25/10

• Exercices en Python avec capteur et matrice Led sur Raspberry Pi
  

    * Emulateur en ligne
    * Découverte du Sense Hat
    * Allumer une LED par degré de température au-dessus de 0°C : Correction simple Correction optimisée Python
    * Faire une boussole numérique (une LED s'allume pour pointer le Nord) Correction
    * Faire un jeu de Pong : bien consulter la documentation Sense Hat

Mercredi 26/10

Suite avec Raspberry Pi :

• Correction du Pong (cf Slack)
• Série d'exercices pour feu tricolore : https://files.slack.com/files-pri/T2K2V7Y48-F2UE27N9Y/download/raspberrypi-cobbler.zip
• Informations autour des LEDs :

  * Introduction
  * Base d'expérimentation
  * Principe de cablage
  * Petit test

Jeudi 27/10

• Le matin : suite des exercices autour des feux tricolores
• L'après-midi : mise en place du NodeMCU

  * Montage
  * Installation de l'IDE : [3]
  * Injection des premiers codes (relevé et affichage de température : [4], ajouter ensuite l'humidité)

Semaine 4 cycle 2 : A la découverte des fablabs

Mercredi 2/11

• Rencontre avec Aurélien Rodot, fondateur de GameBuino (http://gamebuino.com/)
  
• Montage du NodeMCU
  
• Reproduction de l'exercice du feu tricolore
  

Jeudi 3/11

• Suite de l'exercice du feu tricolore, mise en place des boutons
• Première connexion au WiFi
• Envoi d'informations et traitement avec IFTTT

Vendredi 4/11

• Appronfondissement en autonomie
  
• Ecriture d'un tutoriel présentant la logique des codes du feu tricolore (étapes 5 et 7)
• Publication du tutoriel sur WordPress

Cycle "Déploiement de site web, CMS et Cloud"

Semaine 5

Lundi 07/11

• Veille technologique
• Présentation de l'UML, diagramme global d'interactions
• Exercices autour d'UML

• Publier un site sur le web ?
• Corrections collectives HTML / JS

Mardi 08/11

• Structuration HTML 4

  *Mémento des balises HTML

• Les principales balises HTML 5

  * Structurer sa page
  * Structuration d'une page HTML 5

• Les formulaires

  * Les formulaires
  * Exemple de formulaire

• Exercices autour de HTML

  * Reproduire le formulaire suivant [5]
  * Reproduire le formulaire suivant [6]

Mercredi 09/11

• Visite du quartier créatif
• Gestion de l'identité numérique et de l'e-reputation
  

pourquoi s'occuper de son identité numérique
gérer son identité numérique et protéger sa vie privée
comment fonctionne google

• Travail autour de CSS :

  * Différences entre attributs de display
  * Apprendre les fondamentaux
  * Supports et tutoriels
  * Mémento des propriétés CSS
  * Les 30 sélecteurs à connaître absolument

• Exercices :

  * Petit jeu autour des sélecteurs
  * En partant de ce code, reproduire ceci en ne modifiant que les styles !
  * En partant de ce code, reproduire ceci (icones [7] et [8]) en ne modifiant que les styles !
  * Reproduire au plus proche la page suivante [9] (sans les animations et sans faire défiler)

Jeudi 10/11

• Rappels CSS

  * La mise en page avec des div
  * Encore des boîtes
  * Utiliser l'attribut position
  * (Encore) utiliser l'attribut position
  * Utiliser Flexbox

• Exercices autour de HTML / CSS

  * Jeu autour de Flexbox
  * Reproduire la page d'accueil de [10] (jusqu'au bas de la première photo)

• Introduction aux CMS
• Parcours du Back-Office de WordPress
• Bilan de la semaine

Semaine 6

Lundi 14/11

• Introduction à la programmation orientée objet

  * Définitions / Instances
  * Encapsulation
  * Héritage
  * Intérêts

• La POO en Javascript
• La POO en Javascript bis
• Exercices avec JS

  * Créer un objet Personne avec les propriétés suivantes : nom, prénom et age et une fonction presentation()
  * Créer deux objets fils de Personne : Etudiant et Professeur
  * Etudiant possède comme propriétés supplémentaires un tableau de notes et une filière, et comme action moyenne()
  * Professeur possède comme propriétés supplémentaires une filiere et comme action liste_etudiants()
  * Créer un objet Cours qui possède comme propriétés un Professeur et un tableau d'Etudiants et comme actions inscription() et moyennes()

• Manipulation de CMS
  

Lancement du projet de tutoriel, vous retrouverez le résultat du tirage au sort en suivant ce lien Tirage au sort tuto wordpress

Mardi 15/11

• Autonomie autour du projet
  

Travail en autonomie sur leur projet de tutoriel Wordpress. Chaque étudiant doit réaliser un wordpress adapté à un contexte professionnel pour mettre en place un CMS.

Le travail demandé est le suivant :

• Réaliser une page en HTM-CSS, servant de tutoriel pour installer et configurer un wordpress contenant à minima les éléments suivants:

 * une page d'accueil
 * une page de contact
 * un formulaire
 * 3 articles rédigés en lien avec le sujet
 * un caroussel multimédia
 * installer un template
 * et toute(s) extension(s) pertinente(s) pour le sujet proposé

• réaliser un wordpress adapté à la situation proposée
  

• Exercices POO

  * Créer une classe Membre, représentant le membre d'une équipe, ayant comme propriétés un pseudo, un mot de passe et un grade
  * Créer une fonction Membre.toString() renvoyant une chaîne de caractères contenant les informations du Membre
  * Créer une fonction Membre.connexion(motdepasse) renvoyant un message pour indiquer la validité du mot de passe
  * Créer une classe Equipe, contenant un tableau de Membres
  * Créer des fonctions Equipe.ajoutMembre(Membre), Equipe.SuppressionMembre(Membre) et Equipe.afficherMembres
  * Créer une classe Administrateur, héritant de Membre. Y ajouter une fonction creationMembre(pseudo,motdepasse,grade)

• Exercices de manipuation de formulaires avec JS

  * Comment accéder aux champs d'un formulaire ?
  * Insérer du code Javascript dans votre page de formulaire pour effectuer les vérifications d'usage
    (bon format d'adresse e-mail, majuscule dans mot de passe...) Exemple
  * Proposer un outil de conversion Euros->Dollars et Dollars->Euros avec un champ à remplir par l'utilisateur
  * Proposer un outil calculatrice, qui récupère deux entiers et une opération passés dans 3 champs et effectuer l'opération attendue

• Manipuler le CSS avec Javascript

Mercredi 16/11

• Introduction à PHP
• Exercices autour de PHP

  * Récupérer les données passées par un formulaire puis les afficher en travaillant la mise en page
  * Traiter les données et afficher un résultat en fonction (age > 18 : Vous êtes majeur, Monsieur ou Madame en fonction
    d'une case à cocher, votre nom contient n caractères)
  * Vérifier si les données passées dans le formulaire respectent bien les contraintes (nom et prénom, e-mail, numéro de téléphone)
  * Vérifier que le mot de passe contient au moins une majuscule et un chiffre (utiliser les expressions régulières)
  * Ecrire les données récupérées dans un fichier (Exemple)

• Autonomie autour du projet

Jeudi 17/11

• Exercices JS et/ou structurer et alimenter son Wordpress DTA
• Intervention de Roland Niccoli (OpenScop') autour de WordPress

• Autonomie autour du projet

Vendredi 18/11

• Exercices JS

  * Voir programme de mardi

• Exercices PHP

  * Voir programme de mercredi
  * Faire une page PHP Devine un nombre, avec un champ rempli par l'utilisateur. Le formulaire contenant ce champ rappelle la même
    page qui répond si le chiffre rentré est plus grand ou plus petit que celui attendu par l'ordinateur
  * Rajoutez ensuite un nombre d'essais limité (rappelez-vous que vous pouvez envoyer des données par le protocole GET)
  * Faire une page PHP Conversation qui renvoie un message différent suivant le message que vous envoyez : question, exclamation,
    message vide ou autre chose

• Présentation de Drupal
• Installation et utilisation de Drupal (après connexion ssh au VPS)

  * cd /var/www/html
  * rm -R -f drupal
  * wget https://ftp.drupal.org/files/projects/drupal-8.2.3.tar.gz
  * tar -xvzf drupal-8.2.3.tar.gz
  * mv /var/www/html/drupal-8.2.3 /var/www/html/drupal
  * rm drupal-8.2.3.tar.gz

Cycle "Site web programmé"

Semaine 7

Lundi 21/11

Rappels PHP :

• Récupérer et traiter les données d'un formulaire
• Manipulation de fichiers
• Défi : faire une page PHP de quizz (questions type QCM et questions ouvertes)

Mardi 22/11

CK Editor :

• Découverte
• Documentation
• Défi : insérer CK Editor dans une page web

Présentation des tutoriels des premiers cycles

• Développer un "mini-CMS" : une page web incluant CK Editor, pour créer des documents et les enregistrer au format html sur le serveur dans un dossier spécifique (les étudiants cha ngent d'ordinateurs toutes les 15 minutes pour reprendre le code d'un autre)
• Créer un script listant les fichiers html présents dans ce dossier spécifique et proposer un menu pour les afficher

Mercredi 23/11

Matinée banalisée pour recherche de stage :

• Aller à la rencontre des entreprises
• Venir sur place et structurer sa recherche

Présentation des tutoriels des premiers cycles

Jeudi 24/11

• Veille technologique
• Installation d'Eclipse
• Découvrir Xdebug
• Modifier son code du "mini-CMS" pour se diriger vers du PHP orienté objet

Vendredi 25/11

• Présentation des tutoriels du premier cycle
• Tutoriel sur le PHP orienté objet
• Transformer le "mini-CMS" en orienté objet

• La librairie GD
• Installation manuelle (on préférera utiliser sudo apt install php-gd)
• Exercices
• Documentation

Semaine 8

Lundi 28/11

• Corrections collectives
• Lancement du projet du cycle : re-développer Thingspeak par groupes avec récupération des données du nodeCMU, enregistrées dans un fichier au format CSV et restitution sous forme de tableaux et graphiques, avec choix du style

  * Le NodeMCU envoie ses relevés de température et d'humidité à intervalles réguliers à un script PHP, chargé de les enregistrer
  dans un fichier CSV (données séparées par des virgules)
  * Un script PHP récupère les données contenues dans le fichier
  * Une interface graphique propose les données sous forme de tableau et de courbe (avec GD), avec sélection de la plage de dates
  * Pour aller plus loin, des statistiques sont disponibles (minimum, maximum, moyenne...)
  * Les relevés de plusieurs appareils peuvent être proposés
  * Différents styles CSS sont disponibles, modifiables par un bouton
  * La programmation s'effectuera sous forme orientée objet

Mardi 29/11

• Autonomie autour du projet et des tutoriels
• Suite du "mini-CMS"

Mercredi 30/11

• Autonomie autour du projet et des tutoriels
• Exercices JS

  * Créer un gestionnaire de contacts (qui sera un objet) contenant un tableau de contacts (nom, prénom, mail, téléphone)
  * Créer dans cette classe une fonction ajoutContact, une fonction afficherContacts, une fonction supprimerContact
  * Créer un formulaire dans une page HTML permettant d'ajouter un nouveau contact (pas de doublons, le mail doit être unique)
  * Afficher la liste des contacts et la mettre à jour à chaque nouvel ajout
  * Ajouter un bouton supprimer à côté de chaque contact et mettre à jour la liste affichée après suppression

Jeudi 01/12

• Autonomie autour du projet et des tutoriels
• Enregistrement des tutoriels vidéo : expliquer la POO et son utilité autour d'un exemple

Vendredi 02/12

• Enregistrement des tutoriels vidéo
• Autonomie autour du projet et des tutoriels

Cycle 5 : L'environnement de développement et de gestion de codes

Semaine 9

Lundi 05/12

• Découverte d'un outil et de ses usages : Git (logiciel de gestion de versions décentralisé) et Github (service web d'hébergement et de gestion de développement de logiciels)

  * Présentation
  * Commandes courantes
  * Tutoriel
  * Learn Git Branching
  * Try Git
  * Mémo Git

• Lancement du projet collectif FabAccess
  

  Un petit descriptif du projet du cycle avant la remise de votre cahier des charges par le client :

  Votre client, OpenFactory, souhaite mettre en place un outil permettant l'accès au FabLab et à ses équipements pour les personnes
  adhérentes de l'association et habilitées par des formations internes, à accèder à ces équipements. Cet outil permettra également de
  gérer les cotisations et les adhésions, le suivi des consommables...
  Pour permettre l'accès, vous utiliserez des badges RFID .

  Bien entendu, on a corsé l'affaire pour favoriser la prise en compte et l'intérêt de pouvoir collaborer sur un projet ! Chaque jour,
  un membre du groupe s'en ira rejoindre un autre groupe.

Mardi 06/12

• Petit déjeuner à la Pré-Fabrique de l'Innovation, à la rencontre d'entreprises en recherche de stagiaires
• Découverte de JQuery (bibliothèque JS et multiplateforme pour faciliter l'écriture de scripts JS pour la manipulation du DOM et l'animation de pages web)

  * Le DOM d'une page web
  * Site officiel
  * Documentation
  * JQuery User Interface
  * Tutoriel

• Lancement du fil rouge individuel autour de JQuery pour la semaine 1 : vérification pas-à-pas de la validité des champs d'un formulaire

  * Construction d'un formulaire contenant tous les types de champs (nom, mail, téléphone, code postal...)
  * Vérification de la validité après chaque changement de champ
  * Indication visuelle de la validité ou non du champ + message à l'utilisateur si la validité n'est pas vérifiée

• Autonomie autour des projets

Mercredi 07/12

• Découverte de la méthode AGILE (qui permet de piloter la réalisation d'un projet)
  

La matinée commence par la lecture de deux articles sur les méthodes agiles, un premier sur le cadre et l'état d'esprit de ces méthodes et un second sur la mise en place au sein d'une entreprise
Elle s'est poursuivi par deux vidéos sur le challenge du chamallow et une seconde Scrum pour les nuls
Pour aller plus loin vous pouvez également visionnez cette vidéo la gestion de projet AGILE

• Découverte d'un outil et de ses usages : Trello

Ensuite un travail a été élaboré pour réaliser le tableau sous Trello pour décomposer le projet collectif en tâche, évaluer leur poids avec scrum for trello, se répartir les tâches, et évaluer son travail avec une mêlée quotidienne. Pour la journée un Scrum Master sera désigné, pour chaque groupe ce sera la personne référente pour traiter les demandes exterieurs (poser une question aux formateurs, échanger avec d'autres groupes....)

• Autonomie autour des projets

Jeudi 08/12

• Veille technologique
• Coding Dojo : Katas JavaScript
• Approfondissement de la POO : l'héritage
• Défi PHP

  * Récupérer la classe Fichier en PHP
  * Récupérer la classe FichierCSV qui hérite de la classe Fichier et contient le nouvel attribut $_charSepar
  * Compléter la méthode changeChar($newChar) de cette classe
  * Faire une classe FichierHTML qui hérite de la classe Fichier
  * Ajouter une méthode changeBalise($oldBalise,$newBalise) à cette classe

• Autonomie autour des projets

Vendredi 09/12

• Découverte des enjeux du travail collaboratif

• Autonomie autour des projets

Semaine 10

Lundi 12/12

• Découverte de Bootstrap

• Autonomie autour des projets

Mardi 13/12

• Approfondissement des notions de POO et exercices

• Autonomie autour des projets

Mercredi 14/12

• Approfondissement des notions de POO et exercices

• Autonomie autour des projets

Jeudi 15/12

• Approfondissement de la POO : les classes abstraites

• Autonomie autour des projets : documentation du code

Vendredi 16/12

• Autonomie autour des projets : documentation du code

• Découverte de PhpDocumentor

Débriefing

Semaine 11

Lundi 19/12

Coding Dojo et reprise des éléments non maitrisés
Installation de l'extension Git au sein d'Eclipse et prise en main en utilisant les fichiers créés pour le projet "Fabacces". Vous retrouverez le tutoriel d'installation en suivant ce lien.

Mardi 20/12

Coding Dojo et reprise des éléments non maitrisés

Mercredi 21/12

Coding Dojo et reprise des éléments non maitrisés
Présentation de l'événement "Super Demain"
Réflexion sur leur participation

Semaine 12

Mardi 03/01

• Temps de veille
• Corrections collectives
• Auto-apprentissage de Bootstrap

  * https://openclassrooms.com/courses/prenez-en-main-bootstrap
  * http://www.w3schools.com/bootstrap/default.asp
  * https://www.grafikart.fr/tutoriels/html-css/bootstrap-twitter-182
  * http://www.opentuto.com/informatique/maitriser-bootstrap-3-par-la-pratique/

Mercredi 04/01

Entraînement à la programmation (le résultat attendu dans chaque variable ou fonction est indiqué en commentaire)

  * Fonctions à compléter
  * Utiliser des fonctions prédéfinies
  * Exercism
  * Programmez les fonctions suivantes : la somme de tous les chiffres d'un nombre passé en paramètre, le tri d'un tableau d'entiers,
  le calcul de rendu de monnaie en fonction d'un prix et d'une paiement (pour augmenter la difficulté, on pourra préciser les pièces
  et billets utilisés pour rendre la monnaie), l'affichage d'un losange de 2*n lignes avec n passé en paramètre, le décodage d'un
  message en morse...

Manipulation du DOM en Javascript

  * Tutoriel
  * Changer la couleur du fond
  * Masquer des éléments sur un clic
  * Maquer des éléments sur un clic et afficher les autres

Retour sur la POO en PHP

  * Séries de tutoriels
  * Exercice
  * Exercices en anglais

Défis JS

  * Réaliser un jeu de mémo : utiliser  setTimeInterval / clearInterval & setTimeOut / clearTimeOut et addEventListener
  * Réaliser un jeu de morpion

Jeudi 05/01

Corrections collectives autour de CKEditor et du mini-jeu PHP

Vendredi 06/01

Retour sur Bootstrap

Cycle 6 : Web complexe et bases de données

Semaine 13

Lundi 06/02

• Introduction aux structures de bases de données et à leur représentation
• Prendre en main phpMyAdmin
• Présentations et retours sur les stages
• Défis en autonomie et corrections collectives
• Défi individuel sur les deux semaines : développer son propre Trello (plusieurs utilisateurs, possibilité de créer ses propres colonnes, commentaires associés au billet...)

Mardi 07/02

• Les différents systèmes de gestion de bases de données
• La communication PHP/MySQL
• Présentations de l'événement "Super Demain" et des modalités de participation envisageable (atelier, exposition)
• Défis en autonomie

Mercredi 08/02

• Réflexion collective pour élaborer le schéma de la base de de données pour un Trello avec un seul utilisateur
• Travail en autonomie sur la production d'un tableau de bord pour une To Do List

• Présentations et retours sur les stages
• Défis en autonomie (transfert des projets CSV vers la BdD)
• Echange autour du code To Do List

Jeudi 09/02

• Les requêtes SQL
• Tutoriels sur les jointures : [11] et [12]
• Défis en autonomie (carnets d'adresses, inscriptions/authentifications, chat...)
• Présentations et retours sur les stages

Vendredi 10/02

• Défis en autonomie
• Démarrage du projet de forum
• Mémo SQL

Semaine 14

Lundi 13/02

• Temps de veille
• Corrections collectives autour de SQL
• Autonomie autour du projet Trello
• Présentation des stages

Mardi 14/02

• Autonomie autour du projet Trello
• Corrections collectives PHP/MySQL (requêtes préparées/directes)
• Présentation des stages

Mercredi 15/02

• Elaboration de propositions d'ateliers ou d'expositions permettant la découverte de la programmation pour Super Demain
• Présentation des stages
• Autonomie autour du projet Trello
• Poursuite des entretiens individuels

Jeudi 16/02

• Présentation du débogueur d'Eclipse
• Matinée "Pomodoro" autour d'un mini-chat
• Dictionnaire HTML avec rendus visuels
• Dictionnaire CSS avec rendus visuels
• Présentation des stages
• Autonomie autour du projet Trello

Vendredi 17/02

• Travail en autonomie sur le projet Trello (réalisation d'un tutoriel permettant de présenter la création, l'organisation et la gestion de votre base de données)
• Poursuite des entretiens individuels

Cycle 7 : Web et API

Semaine 15

Lundi 27/02

• Temps de veille collective
• Coding dojo PHP
• Démarrer avec les API
• Retours sur les stages
• Intégrer une API à son code PHP
• Documentation Google Maps API

Mardi 28/02

• poursuite des tutoriels sur les API
• L'architecture MVC
• Évoluer vers une architecture MVC en PHP
• Retours sur les stages
• Défi : poster un message sur un mur Facebook depuis un script PHP

Mercredi 01/03

• Poursuite de la préparation des ateliers a Super Demain
• Intégrer une API à son Trello
• Défi du cycle : Réaliser en binôme un jeu de morpion (3 niveaux de difficulté de l'IA : jouer au hasard, jouer pour ne pas perdre, jouer pour gagner)
• Mémo PHP POO

Jeudi 02/03

• Corrections collectives : algo

  * prix_TTC(prix, tva) qui prend un prix et un taux de TVA et renvoie le prix après application de la TVA
  * produit(x,y) qui prend deux variables x et y, calcule leur produit et renvoie à l'utilisateur un message pour lui indiquer si le produit est négatif ou positif
  * catégorie(age) qui prend un âge en paramètre et renvoie la catégorie correspondante (poussin de 6 à 7 ans, pupille de 8 à 9 ans, minime de 10 à 11 ans, cadet ensuite)
  * carres(tableau) qui prend un tableau de nombres et renvoie le tableau contenant le carré de chacun de ces nombres

• Autonomie autour de Trello et du morpion
• Expressions régulières (Testeur en ligne)

Vendredi 03/03

• Autonomie autour des projets (API Facebook)
• Les parseurs XML

Semaine 16

Lundi 06/03

• Développer une API sur le VPS qui reçoit les données du NodeMCU
• Corrections collectives

Mardi 07/03

• Autonomie autour des projets
• Présentation de Gaël Blondelle de la fondation Eclipse

Mercredi 08/03

• Journée de lancement et rencontre avec les entreprises

Jeudi 09/03

• Temps de veille

  * multiples_3(n) renvoyant le tableau contenant tous les multiples de 3 compris entre 1 et n
  * premiere_lettre(tableau,lettre) qui parcourt le tableau (contenant des chaines de caractères) et renvoie le nombre de chaines commençant par la lettre passée en paramètre
  * notes(n) qui demande à l'utilisateur de rentrer n notes (n étant le paramètre de la fonction) et renvoie un tableau contenant la note minimale, la note maximale et la moyenne
  * tri(tableau) prenant un tableau en paramètre et renvoyant le même tableau trié par ordre croissant

• Développement de l'API pour le NodeMCU

Vendredi 10/03

• Développement de l'API pour le NodeMCU
• Retour collectif sur la proposition de poursuite d’étude pour obtenir un diplôme reconnu par un Bac +2 par le CNAM

Cycle 8 : IHM et design

Semaine 17

Lundi 13/03

• Temps de veille
• Le CSS 3

  * Les transformations 2D
  * Les transitions
  * Quelques exemples de transitions
  * Les animations

• Défi programmation : Roman to Number et Number to Roman
• Exemples de CSS 3

  * Un super menu
  * Des éléments de chargement animés
  * Des barres de progression

Mardi 14/03

Hackathon dans l'Atrium

Mercredi 15/03

Hackathon dans l'Atrium

Jeudi 16/03

Hackathon dans l'Atrium

Vendredi 17/03

• Le design mobile

  * Responsive Design AC
  * Responsive Design OC
  * Trouver de l'inspiration
  * Les composants de Bootstrap

• Utiliser JQuery et JQuery UI

  * Site officiel
  * Tutoriel
  * Démos JQuery UI

• Défi : développer un jeu simple en JavaScript (mémo, solitaire, pacman...)

Semaine 18

Lundi 20/03

• Temps de veille
• Pratique Front-End : développement d'un petit jeu
• Présentation du projet DayTripper par Clément Dupuis
• Découverte du format SVG
• Deux beaux exemples en CSS3

  * Une horloge animée
  * Un chronomètre

Mardi 21/03

• Travail en autonomie
• Exercices autour de JQuery UI et Bootstrap

Mercredi 22/03

• Suite des ateliers Super-Demain
• Travail en autonomie

Jeudi 23/03

• Temps de veille
• Présentation d'AJAX (Tutoriel)
• Mise en application

  * Créer une page qui liste les comics à l'aide de l'API Marvel
  * Afficher la description d'un comic de manière dynamique sur la même page lorsque l'on clique dessus

• Exercices algorithmiques

  * lettre_unique(mot) qui vérifie qu'un mot ne contient pas deux fois la même lettre
  * palindrome(mot) qui vérifie si un mot est un palindrome
  * anagramme(mot1,mot2) qui vérifie si mot1 et mot2 sont des anagrammes

Vendredi 24/03

• Corrections collectives
• Travail en autonomie

Cycle 9 : Projet en mode professionnel

Semaine 19

Lundi 27/03

• Temps de veille
• Corrections collectives

  * minuscule(lettre) vérifie si un caractère est une lettre minuscule
  * chaine_minuscule(mot) vérifie si un mot est entièrement composé de lettres minuscules
  * Deux fonctions permettant de crypter et décrypter un mot codé avec le chiffre de César (on passe en paramètre le chiffre)

• Discussion autour des applications mobiles

  * 

• Lancement du projet Thingspeak 2

Mardi 28/03

• Initiation au développement d'applications mobiles
• Autonomie autour du projet

Mercredi 29/03

• Suite des ateliers Super-Demain
• Autonomie autour du projet

Semaine 20

Vendredi 07/04

‏‎