Pages

  Les DS sont programmés en TD.


Présence obligatoire.

Cours 7

 

Vidéos

Lles placement de base https://sites.google.com/view/dupontrvisionsl2/grid

Passons aux algorithmes https://sites.google.com/view/dupontgrid/algorithmes?authuser=0


Lecture

https://dupontcss.blogspot.com/2017/03/ordre-des-blocs-places-automatiquement.html

 https://dupontcss.blogspot.com/2018/09/grid-dense.html



TD 6 : Trombinoscope

🪛Trombinoscope


🛩️Contraintes : comportement responsive ! 

🚀Trombinoscope en action 


Plus d'infos »

DS type : ⏱️30minutes


Sujet de ⏱️ 30 minutes

Préparation au DS : Création de drapeau





https://dupontdenis.github.io/flag/

Cours : Placement des blocs


Le BA-BA des grid

Comprendre les grilles et placement explicite

Préparation au DS


🅰️ Pour toutes les questions, les blocs dans le conteneurs sont des <div>.

Bloc 1 : Bloc Rouge



Bloc 2 : Bloc Bleu



Bloc 3 : Bloc Vert



Bloc 4 : bloc Noir

🪛Dessinez les quatres blocs (R,B,V,N) dans le conteneur.

.conteneur {
    display: grid;
    grid-template-columns: repeat(2, 1cm);
    grid-auto-flow: column
}


Autre test : 


.conteneur {
    display: grid;
    grid-template-columns: repeat(4, 2cm);
    grid-auto-rows: 1cm;
    grid-auto-flow: row;
}

 div:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

div:nth-child(2) {
    grid-column: 3/5;
    grid-row: 2 / 5;
}

div:nth-child(3) {
    grid-row-end: span 2;
}

div:nth-child(4) {
    grid-column-end: span 2;
}



🆘 Pour vérifier votre réponse, vous pouvez utilisez un simulateur ! 

Couleur pleine !


Couleur hachée

have fun !

 https://cssgridgarden.com/#fr

Préparation à l'examen !

🪛Trombinoscope en action 

Préparation à l'examen : 🆘

🐧 Guide pour la réalisation du trombinoscope

les plus du Simu : Grid

 🥷Mettre une grille comme dans l'inspecteur ! 


https://dupontcss.blogspot.com/2025/02/quadriller-le-body.html

Copilot : vous êtes mon seul espoir

 

Créez ce logo à l'aide d'une grille et de quatres blocs.

Vous pouvez (utiliser) copilot !




have FUN !

 Copilot ne peut vous donner la solution : faites vous confiance !


TEST

Dans les deux articles qui suivent, notre seul espoir de faire disparaître l'étoile de la mort est d'inspecter le code à la recherche d'indice permettant de débloquer un code secret et un bouton.

La vidéo montre que le bouton est bloqué ! 
En cherchant, on arrive à débloquer la situation et faire disparaître l'étoile noire ! 



Cliquez pour accéder à la page où le bouton permet la destruction de l'étoile. Mais le bouton semble vérouillé !

🆘Trouvez une faille dans la protection de l'étoile


🪛
Autre défi ! trouve le code secret a injecter dans le formulaire ?




5 minutes : Quizz

CSS selecteurs


Vidéos Grid

 https://sites.google.com/view/dupontrvisionsl2/grid

Grid by examples



Les infos de la semaine : Damier.css


travail PersoTravail Perso pour ceux qui veulent en savoir plus !

Création d'un damier étape par étape !

Pas si facile, en effet !


Il y a deux canvas identiques décalés et superposés, voici le truc dévoilé en vidéo :


Mais comment le réaliser en CSS ?

DM 1 : level 🥷🥷🥷

Créer un blog sous blogger
    1. Ajouter un article
      1. intégrer la vidéo de https://www.cinematheque.fr/video/1469.html
      2. intégrer la vidéo avec démarrage automatique
      3. intégrer la vidéo avec démarrage à la 13'30
    2. Ajouter une page
      1. étude de iframe
      2. Intégrer la carte disponible dans un article

🆒Préparation au DS


Voici la liste des sélecteurs : Révision !

Code HTML

<div class="top">div : class top
          <h1>h1</h1>
          <ul id="tmpPlants" class="tmpExample">
             <li class="A B tmpExample" id="item.A">li : class =A et B id=item.A</li>
             <li class="A tmpExample" id="b">li : class =A id=b</li>
             <li class="B tmpExample" id="c">li : class =B id=c</li>
          </ul>
          <footer> footer </footer>
</div>

Pour chaque sélecteur, encadrer les éléments sélectionnés

Selecteurs ('ul, li')
Selecteurs ('li:not(#b)')
Selecteurs ( "#item.A" )
Selecteurs ( ".A.B" )
Selecteurs ( ".top :first-child" )
Selecteurs ( "ul:first-child" )
Selecteurs ( "li:not(:hover)" )
Selecteurs ( "li.B + *" )
Selecteurs (".top :nth-child(2)")
Selecteurs (".top :nth-of-type(1)")
Selecteurs (".top :not(:last-child)")

Exemple : 

Selecteurs ('h1')


------------- Auto correction
div : class top

h1

  • li : class =A et B id=item.A
  • li : class =A id=b
  • li : class =B id=c

footer

Préparation au DS : selecteurs

Indiquez les lignes selectionnées par le selecteur

🆘Exemple : 

  1.   <article>

  2.     <p title="Strophe1" id="st"></p>

  3.     <header>

  4.     <h1></h1>

  5.     <h2></h2> </header>

  6.     <p class="refrain"></p>

  7.     <p title="Strophe4" id="str"></p>

  8.     <p class="refrain" id="ref4"></p>

  9.     <footer> date (1880 - 1918) </footer></article>

sélecteur


p


article>h1





ligne(s)


2,6,7,8


rien


🪛A compléter

  1.   <article>

  2.     <p title="Strophe1" id="st"></p>

  3.     <header>

  4.     <h1></h1>

  5.     <h2></h2> </header>

  6.     <p class="refrain"></p>

  7.     <p title="Strophe4" id="str"></p>

  8.     <p class="refrain" id="ref4"></p>

  9.     <footer> date (1880 - 1918) </footer></article>

sélecteur

ligne(s)

p ~ p ~ p


p:nth-child(2)


article  :last-child:not(p)


[class $="n"]


article  :nth-of-type(-n+1)


Microsoft : inspection grid

Learn HowTo

Cours 5 : Grid

 

Cours : grid

Objectifs





 https://dupontdenis.github.io/grid-exemple/


Cours





liens

https://mozilladevelopers.github.io/playground/css-grid/02-first-grid/



TD 3 / Selecteurs

 

Sélecteurs

Vidéos

https://sites.google.com/view/duponthtml/selecteurs?authuser=0 


Cours

🛩️http://dupontcss.blogspot.com/p/selecteurs.html


Exemple de vidéo


Des outils sont disponibles pour simuler du CSS : Exemples


🪛TD Sélecteurs



Simulateur Maison !

🥷For free

https://dupontdenis.github.io/TestSelecteurDemo/

Cours 3 : CSS

 Avant de découvrir la technologie de placement GRID



https://microsoftedge.github.io/Demos/devtools-grid/


Nous devons apprendre les selecteurs ! 


CSS : les selecteurs

 

Cours


Questions



Liste des selecteurs

https://dupontcss.blogspot.com/p/selecteurs.html


Voici une sous liste de selecteurs à maîtriser.

SelectorExampleExample description

.class		.introSelects all elements with class="intro"
#id#firstnameSelects the element with id="firstname"
**Selects all elements
elementpSelects all <p> elements
element,elementdiv, pSelects all <div> elements and all <p> elements
element elementdiv pSelects all <p> elements inside <div> elements
element>elementdiv > pSelects all <p> elements where the parent is a <div> element
element+elementdiv + pSelects all <p> elements that are placed immediately after <div> elements
element1~element2p ~ ulSelects every <ul> element that are preceded by a <p> element
:nth-child(n)                     p:nth-child(2)           Selects every <p> element that is the second child of its parent

TD 2 : Fil rouge !

 

Inspecter le code https://microsoftedge.github.io/DevToolsSamples/a11y-testing/page-with-errors.html


Cours 2 : HTML base

 Clonage de : https://github.com/dupontdenis/HTMLCode




Cours 2 : inspecteur

Objectifs

Découvrir par vous même : https://tympanus.net/Tutorials/CaptionHoverEffects/index2.html


inspecteur


Help


Outils de développement

Tous les navigateurs possèdent aujourd’hui de formidables outils de développement.

Modification du DOM

A l’aide de code écrit en JavaScript on peut facilement modifier la structure d’une page WEB.

Nous allons nous amuser à remplacer le logo de google par notre photo !

Rendez-vous sur la page de google et tapez F12 ( ou rechercher les outils de développement ) Ctrl-Maj-I.

Dans la nouvelle fenêtre recherchez l’onglet console.

Dans la console tapez le code suivant  :

  1. const newLogo=document.createElement('img');
  2. //const oldLogo = document.getElementById("hplogo");
  3. const  oldLogo = document.querySelector(".lnXdpd ");
  4. newLogo.src="https://www.ibisc.univ-evry.fr/~dupont/Images/denis.jpg";
  5. oldLogo.parentNode.replaceChild(newLogo,oldLogo);

Ce code est écrit en Javascript, sa fonctionnalité peut se résumer ainsi

  1. Création d’une image
  2. Recherche du logo
  3. Mise de la source dans l’image
  4. Remplacement du logo par l’image

Etude du réseau

Tapez l’adresse https://www.ibisc.univ-evry.fr/~dupont/.

F12 et placez vous maintenant sur l’onglet NetWork, actualiser  la page et observer le temps de chargement des images.

Web SQL

On ne sera pas surpris d’apprendre que le navigateur disposent d’une base de données

Pour les anciennes versions :

Inspection des éléments

Par la suite nous allons utiliser le navigateur Mozilla.

La maîtrise du code HTML et CSS passe forcément par l'auto apprentissage. L’outil “inspecteur” facilite cette démarche. Cette partie est essentielle à la suite de votre formation.

Tapez l’adresse https://www.ibisc.univ-evry.fr/~dupont/NEW/CSS/etudiant/page/flux1.html

Inspecter les codes pour

  • Connaître combien de balises <DIV> sont contenues dans le code.
  • Donner la taille du div id=”Gauche”
  • Changer sa couleur en rouge, mettre un taille de 70%, retirez la propriété float
  • Ajouter à div id=”droite” la propriété border: solid 5px;

Simuler la position hover

Aller dans la démo sur l’effet hover.

Inspectez la liste et à droite cliquez sur la partie jaune. 

Ensuite, cocher hover pour simuler le comportement de la souris sur l’objet.




Inscription à : Articles (Atom)