Affichage des articles dont le libellé est epsi. Afficher tous les articles
Affichage des articles dont le libellé est epsi. Afficher tous les articles
5/03/2014

[Fr] {StretchText} Retour sur ma première soutenance en tant qu'examinateur

Contexte: La rédaction de ce billet à débutée un vendredi soir (le 2 Mai 2014). Au fur et à mesure de l'écriture une idée vieille d'au moins 4 ans m'est revenue. J'ai toujours voulu permettre aux lecteurs de sélectionner le niveau des détails dans mes articles. C'est d'ailleurs ainsi que nous communiquons, nous commençons par aborder une première couche d'information (la surface) pour petit à petit descendre dans les "strates" afin d'être le plus précis et intelligible possible.


J'ai donc quitté temporairement l'écriture de ce billet afin de démarrer une autre écriture, celle du code. Après quelques minutes, content d'avoir enfin pu concrétiser ce rêve cette idée. J'ai décidé d'aller lire la définition d'HyperText sur Wikipédia (pourquoi ? Parce que j'avais secrètement nommé ce Proof-of-Concept HyperText). Et c'est à ce moment là que j'ai (re-)découvert le concept de StretchText. Mince ! Dès 1967 Ted Nelson avait eu l'idée de permettre le zoom-in et zoom-out sur le niveau de détail d'un texte. J'avais donc implémenté StretchText avec 47 ans de retard ! La note de T. Nelson sur StretchText est vraiment passionnante, je voulais aussi utiliser des liens (e.g. soulignés en pointillé) pour étendre et réduire le texte mais par soucis de simplicité et par manque de temps j'ai choisi d'utiliser un "[+]" pour remplacer ce comportement.


J'en ai aussi profité pour ajouter un slider et une estimation du temps de lecture. Il serait maintenant intéressant de développer un éditeur (en utilisant contenteditable) qui facilite l'écriture de texte StretchText mais cela sera pour un autre jour !

TL;DR Complet
Temps de lecture : 0 sec

Aujourd'hui j'ai eu la chance de faire passer à des élèves de seconde année de l'EPSI Nantes leurs premières soutenances. Le mot soutenance est sans doute un peu galvodé ici. Il s'agit plutôt d'une présentation de leurs projets suivi d'une séance de questions/réponses.

Ayant moi même passé ce type de soutenance dans un passé relativement proche, j'ai pu y appliquer quelques modifications qu'il me semble intéressant de partager ici. Ce billet a aussi pour but de me servir de compte-rendu sur mes différentes "expériences". Cette trace écrite me permettra au fil des années, je l'espère, de prendre du recul sur ce qui fonctionne et ce qui ne fonctionne pas.


Voici donc les quelques modifications apportée par rapport à ma propre expérience des soutenances :

  • Toute la classe était présente à la soutenance. Le premier avantage logique et que cela permet aux élèves de s'entrainer à maintenir l'attention d'une audience ainsi que de les former à la présentation de projets. Un autre avantage auquel je tiens personnellement beaucoup est que cela permet de partager aux autres les parties intéressantes de son projet, tant d'un point de vue du code que fonctionnel. C'est une forme de récompense que de pouvoir faire découvrir quelque chose de nouveau aux autres. Mieux, l'orateur prends du plaisir à partager et l'audience prends du plaisir à découvrir. Cette approche vertueuse stimule la curiosité intellectuelle qui est pour moi l'une des composantes principales de l'esprit Hacker par "esprit Hacker" j'entends Hacker au sens culturel.
  • Les élèves devaient présenter l'architecture du système et les choix opéré. Obliger les élèves à décrire le projet sur une échelle macroscopique permet de démarrer une critique vis à vis des choix opérés. Comme toujours en informatique, tout est une question de balance e.g. CPU vs consommation mémoire dans le cas des algorithmes. Pouvoir expliquer pourquoi un choix à été fait dans un sens et non dans un autre montre qu'il y a eu une étape de réflection dans le cas inverse, cela montre qu'il faut simplement sensibiliser l'élève à séparer les différentes entitées de son projet. Enfin cela oblige à penser composants ou services suivant l'échelle avant de penser à l'implémentation erreur habituelle lorsque l'on découvre la programmation. L'idée est de former l'élève à penser les composants de son projet en terme de séparation d'intérêts à cette échelle on parlerait de nos jours de Service-Oriented Architecture, SOA n'étant qu'une application du principe SoC à une plus grande échelle.
  • Il était conseillé aux élèves de montrer des parties intéressantes de leurs codes.Cette approche m'a permis parfois de stopper la soutenance, demander au groupe ou à la classe s'ils voyaient un problème à la ligne X, d'expliquer quel était le problème en question et ensuite de reprendre la soutenance. Nous avons ainsi pu découvrir et corriger une faille par Denial of Service (DOS) ce problème DOS venait d'un require dynamique en NodeJS dont les entrées n'avaient pas été contrôlée et simplifier l'implémentation d'un algorithme du déplacement des pions d'un jeu de dame en changeant simplement la structure de données gérant l'echiquier.
  • Même si les projets étaient techniques, mes remarques à la fin des soutenances ont aussi portée sur les techniques d'expression et de présentation. Ces petites astuces pleines de bon sens que l'on apprends avec le temps comme par exemple: répéter en groupe avant la soutenance, répartir à l'avance le temps de parole, utiliser les slides plus comme un support visuel que textuel, regarder au loin plutôt que ses pieds etc. ... Bref, du bon sens.

Ce que j'ai repris :

  • Limitation temporelle et visuelle. 12 minutes de présentation, 12 minutes de questions/réponses, 5 slides maximum pour poser le contexte. Cela force les élèves à rester succinct à s'exprimer clairement.
  • ... tout le reste finalement.

Il est encore trop tôt pour tirer des conclusions, cet article sera donc tenu à jour au fur et à mesure des soutenances mais d'après les premiers retours cette approche a été satisfaisante pour la majorité des élèves. Cette première soutenance a donc été l'occasion de continuer à partager sur diverses technologies et aussi à guider les choix architecturaux de certains projets dont, je l'espère, le développement ne s'arrêtera pas à cette soutenance. Peut-être est-ce trop d'optimisme, le temps nous le dira !

11/28/2013

Scrolling animated EPSI logo with SASS/JS

I was kind of tired yesterday night to do any more work on Bringr or Redsmin. So while procrastinating on the internet I discovered the picture below of my old graduate school (EPSI Nantes) where I now teach JavaScript and NoSQL from time to time.



...  I wondered how fast I could write this logo in CSS/HTML, so I started to do it. Then once it I was done, I wondered how I could animate it while scrolling. In order to do that I used skrollr and skrollr-stylesheet and here we are:

I find the result kind of neat for a small one night project like that!

Notes:
  • It was only tested on Chrome 31+
  • The animation is really slow on iPhone 4 but works well on later version.
11/22/2008

[Mini-Projet VB6] Machine à sous - Jackpot

Dans le cadre d’un cours de VB6 à l’EPSI Nantes, il nous a été demandé de créer une machine à sous en VB6.
Le cahier des charges était le suivant :
  • Au démarrage l’utilisateur entre la somme à versée en banque
  • 3 libellées qui feront défiler des chiffres de 1 à 9
  • L’utilisateur choisit sa mise
    • 7x1 : on gagne 5 fois la mise
    • 7x2 : on gagne 10 fois la mise
    • 7x3 : on gagne 100 fois la mise
    • Aucun 7 : on perds la mise
  • Afficher le taux de réussite
  • Lorsque l’utilisateur perds, si son taux de réussite est supérieur à 25% on lui propose d’enregistrer son score
Mini-projet VB6 JackPot - Machine à sous
Interface du jeu une fois lancé
Mini-projet VB6 JackPot - Machine à sous
Ici aucun 7, on perds donc la mise.
En réalité, j’ai d’abord réalisé une version répondant exactement au cahier des charges lors du cours. La version que je vous propose ici est un peu plus “fantaisiste” et comme vous pouvez le voir j’en ai profité pour me remettre à Photoshop. L’installeur du mini-projet peut être téléchargé ici, d’autres captures sont disponibles sur mon flickr.
10/01/2008

Algorithme et code C d’une fonction de tri croissante

Dans le cadre d’un cours de C à l’EPSI Nantes, il nous a été demandé de créer une fonction qui permettra de trier de façon croissante (ou décroissante, c’est simplement l’algorithme inverse) une série de 5 nombres entrée par l’utilisateur. Il est à noter que la fonction ne pourra pas utiliser de tableau, ni de pointeur, ni les fonctions de tris disponibles en C.

Je vais donc vous proposer dans cet article un des algorithmes possible pour répondre à cette problématique.

procedure tri
   E: entier : x1,x2,x3,x4,x5;
debut
   Si x1 > x2 Alors
      tri(x2,x1,x3,x4,x5)
   SinonSi x2 > x3
      tri(x1,x3,x2,x4,x5)
   SinonSi (x3 > x4)
      tri(x1,x2,x4,x3,x5)
   SinonSi (x4 > x5)
      tri(x1,x2,x3,x5,x4)
   FinSinonSi
   //Test si x1 > x2 et x2 > x3 ...
   //Afficher les nombres dans le bon ordre

Et le code C :

void tri(float x1, float x2, float x3, float x4, float x5){

   if(x1 > x2)
      tri(x2,x1,x3,x4,x5);
   else if(x2 > x3)
      tri(x1,x3,x2,x4,x5);
   else if(x3 > x4)
      tri(x1,x2,x4,x3,x5);
   else if(x4 > x5)
      tri(x1,x2,x3,x5,x4);
   //Test si x1 > x2 et x2 > x3 ...
   //Afficher les nombres dans le bon ordre

Il est alors facilement imaginable d’améliorer l’algorithme : avec un nombre x d’entier ou de réel au lieu de 5, d’utiliser un tableau et des pointeurs.

5/29/2008

Synchronisation entre deux bases de données (Access/Mysql)

La première phase de mon stage consiste à mettre en place un script, un programme, qui permettra de synchroniser une partie de la base de données CIEL (qui contient l'ensemble des articles, famille, fournisseur, ventes, etc...) avec la base de donnée du site (Mysql).

CIEL repose sur une base de données ACCESS, le script devra donc être capable d'effectuer des requêtes sur cette base de données. La synchronisation est unidirectionnel (Ciel -> Site) lorsqu'il s'agit des articles, et bidirectionnel lorsqu'il s'agit des stocks.


Voici donc la façon dont j'effectue la synchronisation (dans cet exemple pour les articles).

Le serveur web du magasin accueil un mini-site, qui effectue via des requêtes AJAX les différents traitements de synchronisation. Le dialogue entre les deux serveurs s'effectue exclusivement en JSON, plus léger que XML et très facilement lisible en cas de debuggage.

Les requêtes AJAX envoyées depuis le serveur web du magasin peuvent être dirigées :

  1. soit vers un script php interne au serveur qui va permettre de créer un interface entre les données de la base de donnée ACCESS et le reste de l'application
  2. soit vers un script php "proxy" qui va effectuer une requête POST sur le serveur web e-commerce et retournera le résultat de cette requête. La requête POST ne contient qu'un seul champs : "data". Ce champs "data" - qui sera envoyé au serveur e-commerce - contient l'intégralité des variables POST ($_POST) envoyées au script proxy. Ainsi, le mini-site envoie une requête AJAX de type POST sur le script "proxy", le script proxy transforme toutes ces variables en JSON (serialisation) et les inclus dans la variable "data" qu'il envoi par POST au serveur web e-commerce, le serveur web e-commerce va alors déserialiser la variable $_POST['data'] et effectuer les traitements en fonction des paramètres transmis.


Ps : J'utilise CURL pour l'envoi de requête POST sur le serveur ainsi que PDO pour la communication avec la base de donnée ACCESS.

4/28/2008

Convertisseur adresse disque dur CHS <> LBA [MAJ]

Lors d'un cours d'architecture ordinateur, je me suis amusé à créer un petit programme permettant de convertir une adresse C.H.S (Cylindre, Tête, Secteur) en LBA (Logic Block Adressing) et inversement.

Voici donc le code que j'ai écrit pour ma calculatrice casio Graph 35+ :


Lbl 0
"1:CHS->LBA"
"2:LBA->CHS"
?->T:ClrText
T=1=>Goto 1
T=2=>Goto 2
Lbl 1
"CHS(C,T,S)->LBA"
?->C:?->T:?->S
"NOMBRE(C,T,S)"
?->A:?->B:?->D
((CxBxD)+(TxD)+(S-1))->L
"LBA"
L(TRIANGLE)
Goto 0
Lbl 2
"LBA"
?->L
"NOMBRE(C,T,S)"
?->A:?->B:?->D
Int (L/(BxD))->C
Int ((Int L-(CxBxD))/D)->H
Int ((1+Int L)-(CxBxD)-(HxD))->S
"CHS(C,H,S)"
C(TRIANGLE)
H(TRIANGLE)
S(TRIANGLE)
Goto 0



Remarque :
  • (TRIANGLE) : n'est autre que le caractère disponible sous la calculatrice et qui permet d'afficher le contenu d'une variable (SHIFT+VARS+F5)
  • -> : correspond au caractère d'affectation sous casio (touche L)
  • => : caractère de saut sous casio, disponible via le menu SHIFT+VARS+(F3)JUMP
  • x : opérateur de multiplication sous casio
  • / : opérateur de division sous casio

[MAJ] Une version développée en C est compilée sous Windows est disponible ici.
4/03/2008

MiniProjet langage C : Menu déroulant

Dans ma promotion 2007/2008 de l'EPSI Nantes, 2 groupes ont été créé dans la matière algorithme/programmation en fin ...

Voici le dossier contenant les différentes versions
12/12/2007

Recherche de stage

Étudiant en première année de prépa école d'ingénieur à l'EPSI à Nantes, je cherche actuellement un stage dans l'informatique (de préférence dans le développement web, mais toutes les propositions seront étudiées ) pour la période du 13 mai au 4 juillet 2008.

Mon CV mis à jour est disponible au format PDF .

Vous pouvez me contacter va twitter, ziki, vistarc ou facebook.

»
 
 
Made with on a hot august night from an airplane the 19th of March 2017.