dupontL1: 2018

Nous allons mettre en place un télé-travail, le dom est representé
JS Bin on jsbin.com
introduction au DOM

Completer un code JS sur un exemple

introduction au JS

Comment obtenir les figures suivantes ?

Pour chaque figure indiquer le code CSS à écrire !

Exemple :

code I

Solution I:
.flex-conteneur {
display : flex; flex-direction : row-reverse; }

code A

code B

code C

code D

code E

Utiliser le simulateur !

Travail maison

Bootstrap est en environnement de conception qui vous propose "en autre" de créer des grilles

Pour pouvoir utiliser cet environnement, il vous suffit d'ajouter dans le <head> la bibliothèque.

<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>

JS Bin on jsbin.com

Mais pourquoi ne pas créer sa propre grille ?

Création d'une grille en flex !

DM de we

Comment faire pour obtenir un texte centrer

JS Bin on jsbin.com

Contrôle continue

nth-child and Co

Etude de cas

Création de notre propre code

Les cartes en flex !

front-end component library

Game : pour apprendre le flex

http://flexboxfroggy.com/#fr

Projet : chalenge

En utilisant le simulateur ( ici ) flex , trouvez les propriétés pour obtenir le résultat suivant :

Aide :

Plus d'infos »

Etude de position

Rechercher dans google

vincennes1900

Etudier le code de positionnement.

Etude de position

Modal : how to

quizz

balise area

https://vincennes1900.blogspot.fr/2017/12/les-sites-historiques-de-pathe.html

Quizz

quizz

CAS contrait d'utilisation des selecteurs

Code source

Étudions le fichier suivant Source ( voir détails )

Améliorations du code

Nous pouvons observer que nous avons factorisé les propriétés communes dans une même classe item et utilisé une classe spécifique "word" et "ppt" pour définir l'image de l'icône.

Cette conception facilite la maintenance du code.

Mais, comment modifier le css pour réduire le code HTML à

<body>

...

</div>

<a href="pos/pos.doc"> posit</a>

<a href="bureau/bur.doc"> bureau</a>

<a href="imprimer/index.html">Impression</a>

<a href="dir">Folder </a>

<a href="lien/lien.html"> liens </a>

</div>

</div>

</body>

Les sélecteurs de base ! HOW TO

Nous allons revenir sur plusieurs sélecteurs.

First-child

Le comportement est celui attendu.

JS Bin

First-of-type

JS Bin

Pour comprendre la différence entre ces deux sélecteurs, il suffirait d'introduire une balise </br> pour modifier l’arborescence.

JS Bin
JS Bin

Attention au comportement de JSbin.

Il s’avère nécessaire de lancer Run with JS pour obtenir le résultat attendu.

JS Bin

Attention :

écrire la règle
/*test 5*/

:not(:last-child){
color : red;
}

le résultat n'est pas celui attendu : vérifier avec F12, le type du dernier enfant.

:first-child

Objectif

L'utilisation des speudo-classes first (lire le commentaire) est particulièrement efficace dans la construction de menu. Elle permet de distinguer le premier élément de la liste et de lui affecter un style particulier.

La figure ci-dessus montre le résultat de l'application d'un bord arrondi au lien du premier élément de la liste du menu.

nav li:first-child a {

border-bottom-left-radius: 10px;

border-bottom-right-radius: 0;

border-top-left-radius: 10px;

border-top-right-radius: 0;

}

Code en action

Fichier pour tester les selecteurs

Fichier Test

Entraînez vous ( ici )

Test : selector

JS Bin on jsbin.com

Quizz !

A. La balise <img> est une balise

block-img
in-line
show
visible-block

B. Les balises <p> <h1> <a> sont

des balises in-line
des balises blocs
une balise est de type iblocs
deux balises sont de type blocs

C. Une balise p peut contenir une balise

des balises in-line
des balises bloc
la balise <p>
autre

D. une expression est elle invalide?

<div><ul><ul><li></li></ul></ul></div>
<ul><li><ul></ul></li></ul><div></div>
<div><ul><li><ul></ul></li></ul></div>

E. Quelle est la syntaxe correcte pour insérer un lien hypertexte ?

<a name="http://www.w3schools.com">W3Schools.com</a>
<a url="http://www.w3schools.com">W3Schools.com</a>
<a href="http://www.w3schools.com">W3Schools</a>
<a>http://www.w3schools.com</a>

F. Entre quelles autres balises les balises <link> se trouvent-elles ?

<body> </body>
<head> </head>
<title> </title>
<script> </script>

G. Quelle balise permet d’aller à la ligne ?

<b>
<b />
<br>
<br />

H. Comment insérer une image ?

<img src = "image.png">
<img href = "image.png">
<a img = "image.png">
<div img = "image.png">

Concerver votre travail

Créer un fichier HTML sur votre bureau et editer le avec Chrome !

Chrome

Top site

http://discover-devtools.codeschool.com/

Simulation de téléphone et tablette

Extention pour chrome

On va hacker la page de Google !

http://filmetonjob.blogspot.fr/

FaceBook.
https://www.youtube.com/watch?v=ZJu4SeFEGGE

code

var newLogo=document.createElement('img');

var oldLogo = document.getElementById("hplogo");

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

oldLogo.parentNode.replaceChild(newLogo,oldLogo);

Les attentes du prof !

Nous avons vu dans notre premier cours l'inspecteur. Le seul outil de développement que vous devez maîtriser. Mais quel outil !

Nous avons découvert une propriété intéressante "overflow". Elle est très utile dans bien des effets.

overflow en action

Mes attentes :

Dans quelque temps, suite à ce genre de cours, vous devrez travailler par vous même.
C'est à dire rechercher des informations sur la propriété CSS overflow.

Mon rôle :

Mon but est de vous permettre d'être autonome dans votre recherche.

Je ne peux pas travailler pour vous et faire la 1/2 heure de travail personnel quotidien.

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

Simuler la présence de la souris sur un élément

Pages

Comment obtenir les figures suivantes ?

Mais pourquoi ne pas créer sa propre grille ?

Création de notre propre code

front-end component library

Code source

Améliorations du code

First-child

First-of-type

Attention au comportement de JSbin.

Attention :

Objectif

Code en action

A. La balise <img> est une balise

B. Les balises <p> <h1> <a> sont

C. Une balise p peut contenir une balise

D. une expression est elle invalide?

E. Quelle est la syntaxe correcte pour insérer un lien hypertexte ?

F. Entre quelles autres balises les balises <link> se trouvent-elles ?

G. Quelle balise permet d’aller à la ligne ?

H. Comment insérer une image ?

Top site

On va hacker la page de Google !

code

var newLogo=document.createElement('img'); var oldLogo = document.getElementById("hplogo"); newLogo.src="https://www.ibisc.univ-evry.fr/~dupont/Images/denis.jpg"; oldLogo.parentNode.replaceChild(newLogo,oldLogo);

Mes attentes :

Mon rôle :

var newLogo=document.createElement('img');

var oldLogo = document.getElementById("hplogo");

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

oldLogo.parentNode.replaceChild(newLogo,oldLogo);