Pages

🪳LA PANIQUE en SALLE C201

Les groupes de TDs en Salle C201 sont confrontés à un gros problème ! 

🪳La magie de emmet ne marche pas ! 

Normalement lorsque je tape !TAB, un snippet de base devrait apparaitre.

📈Mais en C201 (en tout cas sur la machine de M. Dupont) il ne se passe rien !



🆘Vous êtes mon seul espoir ! 


🥷Avez vous des idées pour corriger ce problème.





🥇Projet en entreprise !

Regardez la vidéo pour préparer votre projet (simulation de l'entreprise)




🥷Dans le fichier HTML, vous mettrez dans la balise style de head

<head> 
...

    <style>

        html {

            scroll-behavior: smooth;

        }


        #partie_definition {

            background-color: yellow;

        }

    </style>

</head>

...

Les balises de base

 TD 2 : Les balises de base


Plan du Cours

 Plan : 

  1. Editeur
  2. Balises de base
  3. Attribut
  4. Sélecteur
  5. Inspecteur
  6. Projet
  7. Flex box
  8. Flexible
  9. Empilement
  10. DS
  11. Bootstrap


Les références de cours :

https://web.dev/learn/
https://www.w3schools.com/
https://developer.mozilla.org/en-US/docs/Learn

🥷OUBLIEZ LE COPIER/COLLER



🔧Mais comment déplacer 200 pages sans utiliser Copier/Coller/Couper ! 


🥷Pour changer la strucutre d'un document Word (sans faire couper/coller), on utilise le mode plan !


🪛Essayez par vous même.

Suivez les 3 étapes indiquées ci-dessous en démarrant par 1️⃣ : l'onglet Affichage

Ajoutez à votre document vierge la structure suivante : 
  • Conclusion
  • Chapitre
  • Introduction
(On comprend que Conclusion et Introduction devront être déplacés) 

🥇Modifiez la structure d'un document devient un jeu d'enfant :


Utilisez la fléche ^ pour déplacer tout un chapitre (peut importe le nombre de pages qu'il contient) en un clic. C'est une des forces du logiciel.

Mettez vous sur Introduction et utilisez la flèche ^ pour modifier votre plan.



🔧En action

Il faut comprendre que lors du déplacment les pages des chapitres sont déplacées.


Objectif du Cours

🚀Aprrendre l'autonomie ! Ce n'est pas Copilot 

 Illustration

Je vais illustrer mon propos avec un exemple concret ( lien )

Mimétisme  : 

Voici un effet classique d'animation lorsque vous passez votre souris sur un bloc.


Mon premier objectif est de vous donnez envie de découvrir cet effet par vous même

Mais surtout, il faut que vous soyez convaincu que vous pouvez trouver par vous même les trucs utilisés pour réaliser cet effet génial !

Je parle de trucs, ou de coups de génie des designers qui inventent avec une technologie donnée des effets devenus aujourd'hui "des classiques". C'est ce que j'appelle la créativité.

L'objectif du cours est de vous faire découvrir ces effets par vous même. Je parle de découvrir et non de pouvoir immédiatement mettre en place ces effets.


Mon but est donc de vous permettre d'être autonome dans votre découverte.


Mais comment allez vous découvrir la magie de cet effet ?

En cours ou en TD, je vous montrerai un formidable outil qui permet de simuler la position de votre souris sur un élément. Cette information facilitera votre recherche.

Lorsque vous aurez déjà bien avancé dans votre recherche, nous pourrons faire le point en tentant de formaliser les choses car nous aurons compris à quoi cela sert concrètement.

Mémorisation :  

Après l'observation viendra le temps de la formalisation.

Je vous donnerai des informations pour mieux comprendre ( lien ) et assimiler vos nouvelles connaissances.

Maîtrise :

Nous pourrons alors tenter de mettre en place notre propres effet 

( lien )

Bilan : 

En comprenant par l'exemple cet effet, vous apprendrez la propriétée overflow et la pseudo classe hover.


L'important est de vous donner les moyens de retrouver ces informations rapidement si vous en avez besoin en entreprise. Nul besoin donc de tout mémoriser ! Pour cela, la maîtrise d'un outil d'inspection du code sera obligatoire !

Remarques

Vous êtes allergique à mon cours, voici une liste de liens que je vous recommande : 

 👍 Apprendre le HTML et le CSS

Travail Maison

 Travail Maison

 Dans une page WEB : 

🤡integrer la vidéo https://youtu.be/JziVTS_Epzw 

😡intégrer la vidéo https://www.cinematheque.fr/video/1469.html




🆘 Une API ?

https://developers.google.com/youtube/youtube_player_demo

Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Plan du cours 2024

Plan : 

  1. Editeur
  2. Balises de base
  3. Attribut
  4. Sélecteur
  5. Inspecteur
  6. Projet
  7. Flex box
  8. Flexible
  9. Empilement
  10. DS
  11. Bootstrap


Les références de cours :

https://web.dev/learn/
https://www.w3schools.com/
https://developer.mozilla.org/en-US/docs/Learn


TD 1

 


Cours un éditeur : 

"les éditeurs 👉(lien )"


 TD1 éditeur :



Hackeur de Google !


Injecter ce code dans la console : 

const newLogo=document.createElement('img')

, oldLogo = document.querySelector(".lnXdpd");

newLogo.src="https://www.ibisc.univ-evry.fr/~dupont/Images/denis.jpg";

oldLogo.parentNode.replaceChild(newLogo,oldLogo);

Organisation 2024 !

Les 3M de l'apprentissage !
  1. Minétisme
  2. Mémorisation
  3. Maîtrise


Nous utiliserons un grand nombre de sites hors e-campus.

Les sites

Sites

liens

Notre blog

http://dupontl1.blogspot.com/

Cours

Vidéos

Cours

HTML

CSS

DOM

Divers

TD

Quizz

Test


Mes attentes 

Autonomie

Programme

Semaine 1-3/4

IA : Github copilot

🆘Aide à l'écriture de code 

Tapez 
function findLowerValue(tab, callback) {

🚀Copilot comprend et vous propose le code !



🥇Mieux encore, copilot  propose des tests ! 

🥇Code généré par copilot ! 
const tab = [4, 6, 1, 3, 2, 5];
const lowerValue = findLowerValue(tab, (value) => value);
console.log(lowerValue); // 1

const lowerValue2 = findLowerValue(tab, (value) => -value);
console.log(lowerValue2); // 6

Voici un code généré étape par étape par copilot ! 
C'est le pilot qui doit guider le copilot.

function calculator(str){
  // regexp to match the numbers and operators
  const regexp = /(\d+)(\+|\-|\*|\/)(\d+)/;
  //use match method to get the numbers and operators
  const match = str.match(regexp);
  //use parseInt to convert the string to number
  const num1 = parseInt(match[1]);
  const num2 = parseInt(match[3]);

  //use switch to do the calculation
  switch(match[2]){
    case '+':
      return num1 + num2;
    case '-':
      return num1 - num2;
    case '*':
      return num1 * num2;
    case '/':
      if(num2 === 0){
        return 'Cannot divide by 0';
      }
      return num1 / num2;
  }
}

// given test cases
console.log(calculator('1+1')); // 2

🥇Pythontutor