Développement WEB

niveau 3

7h

Mars, 2024

Bachelor 3 – Créalise

Plan pédagogique

Partie I

Algorithmique

Pratique de Snap!

Partie II

CSS GRID

TAILWIND

AlpineJs

Notion d’algorithme

• une liste d’instructions chronologiques
  • DEMANDER une question
  • AFFICHER une réponse
• des mécanismes de branchement
  • SI <condition> ALORS … SINON …
• des mécanismes de répétition
  • TANT QUE <condition> RÉPÉTER …

Métaphore de la recette de cuisine

• exemple: le rougail saucisse

Algorithme ajustable

en fonction des paramètres de départ

Compilation Vs Interprétation

Métaphore : traduction d’un roman en anglais vers le français

Le traducteur ou l’interprète ?

Compilation

• Traduit un langage informatique vers du langage machine
  • plus rapide
  • Difficulté à remonter au code source
    • rétro-ingénierie

Interprétation

• Interprète ligne par ligne
  • Plus lent
  • Accès facile au code source
    • exemple de page HTML et F12 webdeveloper

Snap!

Construire le jeu du nombre mystère

Déterminer un nombre au hasard entre 1 et 100

Poser indéfinement la question : "Deviner le nombre mystère ? "

Si le mystère est plus grand que la réponse, répondez : “plus grand”

Si le mystère est plus petit que la réponse, répondez : “plus petit”

Si trouvé, Terminer le jeu

Et préciser : Fécilitations, vous avez trouvé en <n> coups !

⬇

AIDE

Quelques blocs utiles

Des algorithmes

+ ou -

performants

Exemple : Tri stupide

  fonction tri_stupide (liste) :
    
    tant que la liste n'est pas triée
    
        mélanger aléatoirement les éléments de la liste

Quelques algorithmes primitifs

• chercher un mot dans une page

• chercher un mot dans un livre

  • lent, méthode dîte force brute

• chercher un mot dans le dictionnaire

  • parce que trié !
  • on peut utiliser la fameuse méthode de la dichotomie

HTML/CSS/GRID

Vous vous rappelez de Flexbox Froggy ?

Grid Garden

version française

Solution pour le niveau 26

car la question difficile à comprendre !

grid-template-rows: repeat(4, 12.5px) 1fr ;

EXO3 : Dessiner une calculatrice

en utilisant Grid CSS

Remarquez le dimensionnement des touches

• 0
• Enter
• +

Personnaliser les touches du clavier grace à Tailwind

par exemple, en utilisant les classes

• couleur de texte, ex: text-white
• couleur de fond, ex: bg-slate-600
• taille de la police en fonction de l’écran, ex: 10vh
• border
• ring

ajouter de l’interaction frontale

avec

Donner vie à votre calculatrice

• executer une fonction à chaque touche
  1. appuyerChiffre(chiffre)
  2. appuyerPlus()
  3. appuyerEgal()
• utiliser la console pour afficher les événements
  • ex: console.log('touche pressée : 1')

réfléchir à un algorithme permettant d’afficher un nombre

• afficher un nombre après la succession de plusieurs clics sur les chiffres

  • ex: j’appuie
    • sur le chiffre 1
    • puis sur le chiffre 0
    • puis sur le chiffre 0
    • puis sur le chiffre 9
  • => l’écran affiche le nombre 1009

• implémenter l’algorithme sur le papier

• coder en Javascript avec AlpineJs

réfléchir à un algorithme permettant d’additionner

• que faire quand on appuie sur la touche + ?
• que faire quand on appuie sur la touche = (Entrée) ?
• implémenter/code

JEU SAIS TOUT

Principe

choisissez un thème (1 parmi 5)

En se basant sur une recherche active sur Internet, vous devez mettre en commun vos connaissances, puis présenter à l’oral à l’ensemble de la classe, comme si vous êtiez un expert du sujet.

Règles

• 20mn de recherche active
• 10mn de mise en commun avec son binôme (ou trinôme)
• 5 mn de présentation à l’oral
• Ne pas oublier de parler des MOTS CLEFS !

Les cartes (en binome ou trinome)

1. Algorithmique

2. La loi de Moore

3. Les fractales

4. Générateur de nombres pseudo aléatoires

5. Zero-Proof-Knowledge