En Amphi
https://www.w3schools.com/cssref/sel_nth-child.php
Les astuces de superDupont
Comment dans visual studio écrire le texte suivant (ce n'est pas du latin, mais si vous comptez il y à 100 mots)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis eius, unde animi voluptate impedit aliquam magni cum quis ducimus quasi! Debitis libero, hic voluptates impedit blanditiis esse labore optio vero explicabo, tenetur velit! Totam excepturi, aliquid ullam, vero tempora provident quis assumenda ab quasi quo quod soluta mollitia. Voluptas placeat at, doloribus, quod eligendi iusto reprehenderit ex inventore molestias porro alias molestiae quis quos, corrupti autem perspiciatis. Cum, hic laborum! Accusamus neque iste impedit quisquam animi unde quam asperiores perspiciatis cumque atque, alias dicta porro omnis fugiat quidem enim illum voluptatibus recusandae ab totam ea excepturi itaque! Iste, laudantium consectetur?
Réponse :
Objectifs du cours
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
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
INFO Word : mode plan
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 en commançant par l'onglet Affichage.
Ajoutez à votre document vierge la structure suivante :
- Conclusion
- Chapitre
- Introduction
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 force du logiciel.
Mettez vous sur Introduction et utilisez la flèche ^ pour modifier votre plan.
Organisation
Nous utiliserons un grand nombre de sites hors e-campus.
Voici leur lien.
Mes attentes
Programme
Semaine 1-3/4
Visual studio
Editeur Visual studio code
J'aime être un fainéant !
Et, oui, mais pour cela, il me faut des outils à la hauteur de la situation !
Introduction
VS tire sa force de IntelliSense, nous verrons cela plus tard.
Pour le moment découvrons quelques "fainéantise"
Pour le moment découvrons quelques "fainéantise"
Emmet
Créer un nouveau fichier avec l'extension .html.
Dans la fenêtre d'édition qui s'ouvre, tapez uniquement : ! (le point d'exclamation)
Votre curseur collé à ! tapez la touche tab ⇆
Le corps d'un fichier HTML apparaît, allez dans la balise <body> puis écrire le code
ul>.item{ liste $}*3
Votre curseur collé à 3 tapez la touche tab ⇆
En action
Multi-Cursor Editing
C'est super pratique. Votre curseur clignote à un endroit, pressez la touche Alt, allez sur un autre endroit en maintenant la touche ALT pressée puis cliquez sur votre souris 🐭 ou touchpad : vous avez deux curseurs !
La documentation officielle :
To edit multiple instances of text within different sections of a document, you can use multi-cursor editing. This allows multiple cursors to be placed in different spots so text can be added, modified, or deleted.
To engage multi-cursor editing, press the Alt key (or Option key on a Mac) and use the mouse to place cursors throughout the document. Every click creates a cursor resulting in multiple cursors.
Emmet : A fond la forme !
En TD, j'ai écrit une drôle de ligne de code pour créer mon HTML :
main>section*2>h2+ul>li*2>article>h3+p⭾
> signifie contient
+ signifie avec
* signe nombre
⭾ la touche tab
Nous verrons la signification très précise de ces sigles lorsque nous verrons les sélecteurs en CSS.
En action !
hacker 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);
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
Inscription à :
Articles (Atom)