Semaine 5 - SimplonSt-Gaudens/programme-web-dev-promo-2 GitHub Wiki

Semaine 5

Objectifs

Encore et toujours du javascript
Découvrir Canvas
Entretiens individuels

Lundi

Correction des exercices

Restitution de la semaine : Qui? Quoi?

Découvrir Canvas en douceur

Qu'est-ce que Canvas ?

Il s'agit d'un espace de pixels prédéfini dans le html et initialement transparent. Cela fonctionne en symbiose avec du code JavaScript pour réaliser un bon nombre de fonctions graphiques directement dans notre page. Canvas permet donc la création de dessins 2D voir 3D (mais pour l'instant nous allons rester sur un tutoriel 2D) directement dans le navigateur, allant du simple tracé jusqu’à des animations.

Présentation détaillée

[Lien vers le diaporama de présentation] (http://boulogne.simplon.co/wp-content/uploads/2015/12/Tutoriel-HTML5JS-Canvas-partie-1.pdf)
[Des simploniens vous présentent Canvas] (http://www.rxlabz.com/simplon/canvas/home.html)

Liens

[Un exemple simple] (https://gomix.com/#!/project/crabby-border)
[Un tuto rapide] (https://openclassrooms.com/courses/la-balise-canvas-avec-javascript)
[API] (https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
[Un autre tuto] (http://sebastien-dupire.info/javascript-jouer-avec-canvas-episode-1.html)

Entraînement

Dessinez le logo de Simplon Occitanie avec canvas. => à rendre pour ce soir minuit!

Mardi

Kata : nombre unique

Grâce à une fonction findUniqNumber(), trouvez le nombre unique dans une liste de nombres. Exemple :

   findUniqNumber([ 1, 1, 1, 2, 1, 1 ]) === 2
   findUniqNumber([ 0, 0, 0.55, 0, 0 ]) === 0.55    
   findUniqNumber([ 1, 3, 1, 2, 3, 1 ]) === 2

Projet : paint canvas

Par groupes de 3, avec la méthodo Scrum, développez votre version du logiciel Paint en HTML/CSS/Js grâce à Canvas. Projet à rendre pour dimanche 15/01.
Découpez le projet en étapes : quelles fonctionnalités? A quoi ressemble l'IHM? -> un seul wireframe
Regardez du côté de ce genre d'outils pour voir ce que vous pouvez faire.
Déduisez-en les tâches à effectuer et répartissez-les dans le groupe.
Et si vous utilisiez HyperDev pour bosser ensemble en direct?
Lundi prochain on compare ce qu'ont fait les différents groupes!
**Bonus : ** est-ce que votre Paint fonctionne sur mobile? Pouvez-vous enregistrer ce que vous avez fait?

Groupes Paint canvas

Groupe 1 : Jérôme, Jef, Julien.
Groupe 2 : David, Aymeric, Lesly.
Groupe 3 : Thibault, Raphaël, Odile.
Groupe 4 : Cyril, Carole, Quentin.
Groupe 5 : Patrick, Gena, Kevin.

Mercredi

Paint canvas : les fonctionnalités

Rapide tour de table pour liste l'ensemble des fonctionnalités auxquelles chacun a pensé, histoire d'être sûr de n'avoir rien oublié.

Révisions

jQuery et événements

Révisions chez Simplon Toulouse

Jeudi

Randori : String unique

Grâce à une fonction findUniqString(), trouvez le string unique qui n'est pas composé des mêmes caractères que les autres strings de la liste.

findUniqString([ 'Aa', 'aaa', 'aaaaa', 'BbBb', 'Aaaa', 'AaAaAa', 'a' ]) === 'BbBb'
findUniqString([ 'abc', 'acb', 'bac', 'foo', 'bca', 'cab', 'cba' ]) === 'foo'