HTML / CSS 2020

CC-BY-NC-4.0 / Jul. 2020 / Loïc TRUCHOT

L'arbre qui cache la forêt

Pré-requis de l'apprenti

  • Accepter le rôle d'apprenti
  • Travail d'équipe, solidarité
  • Curiosité, autonomie
  • Anglais correct
  • Une rigueur extrême
  • Ordinateur: souris, clavier, windows, création de dossiers/fichiers, navigateur (télécharger, installer nouveaux logiciels)
  • Maths: fonctions et logique booléenne
  • Aimer résoudre des problèmes, organiser les idées
  • Acharnement et endurance

La bonne question

  • D'où vient une frame de jeu vidéo en HD à 60 FPS ?
  • Qu'est-ce qu'un film, pour l'ordinateur ?
  • Qu'est-ce qu'une image ?
  • Qu'est-ce qu'un pixel ?
  • Qu'est-ce qu'un bit ?

Tout est arbre

On ne peut pas lutter contre sa nature

Workshop

  • S'assurer que les extensions de fichier sont visibles
  • Dans le dossier un fichier index.html
  • Grâce au bloc note, éditer ce fichier:
    • <html>
    •   <body>
    •     <h1>Prénom</h1>
    •     <p>Présentation</p>
    •   </body>
    • </html>
  • Remplacer "Prénom" et 1
  • Ouvrir ce fichier avec chrome, et l'inspecter dans l'outil de développement

html basics

  • Créer un nouveau dossier sur le bureau

Un petit Makisu

  • Un site pour commander
  • Un logiciel pour cuisiner
  • Une app dans le pipe
  • Un server pour partager les données
  • Quelle architecture ?

Comment fonctionne le web ?

 

IP -> TCP -> HTTP -> HTML/CSS/JS

Server <--> Client

Comme un restaurant

Comme des poupées russes

Web Developer en 2020

 

 

 

 

 

 

@see https://prezi.com/cgshxpe2vlms/web-developer-2020/

Workshop

  • Adopter une rigueur extrême
  • Dans VSCode
    • Créer un fichier index.html
    • Créer un fichier style.css
    • Créer un fichier script.js
  • Dans le HTML, taper [!] puis [Entrée]
    • En quoi est-ce un arbre ?
  • Entre les deux balises body, ajouter...
    • une balise <h1></h1> et entre les deux, donner un nom au burger de vos rêves
    • une balise <ul></ul> contenant
      • des balises <li></li> contenants
        • les ingrédients du burger parfait dans l'ordre (ex: pain, fromage, steak,  etc. , pain)

burger party 1/3 

HyperText Markup Language

  • C'est un langage de balise: 
    • Chaque balise s'ouvre et se ferme et contient du texte ou d'autres balises:
    • <button>clic ici !</button>
    • Chaque caractère compte
    • Les balises s'imbriquent les unes dans les autres et forment un arbre dont la racine est <html></html>
  • Les balises donnent du sens, mais ont une influence limitée et incontrôlable
  • Chaque logiciel sait lire des formats/langages différents
  • Les navigateurs (browsers) lisent le HTML (+ CSS et JS)

Elements HTML

  • Chaque élément est sémantique
  • Elements en blocs:
    • <div>, <h1>, <p>, <ul>, <li>, <table>, <blockquote>, <pre>, <form>,<header>, <footer>, <section>, <main>, <article>...
  • Elements en lignes:
    • <span>, <a>, <strong>, <em>, <img>, <br>, <input>, <abbr>...
  • Certaines balises sont auto-fermantes
    • <img />, <input />,  <br /> @see XHTML et comportements inattendus)
  • Certaines balise de la head sont même "void":
    • <link>, <meta>...
  • Il y a une balise générique en bloc: 
    • <div>....</div>
  • Il y a une balise générique en ligne:
    • <span>....</span>

Attributs HTML

 

  • Les attributs sont des informations bonus a propos d'un balise précise
  • Il y en a des dizaines, et peuvent contenir toutes sortes de valeurs
  • Leur forme est
    • <balise attribut1="valeur1" attribut2="valeur2"></balise>
  • Chaque élément a ses attributs spécifiques, et des attributs communs
    • <img src="http://image.com" />
    • <input type="text" />
    • <div title="ceci est un élément html> </div>
    • <a title="ceci un autre" href="http://google.com">google</a>
  • title est commun à tous, comme class, ou id
  • href ou src seront spécifiques à des balises contenant des ressources externes
  • type sera spécifique à des balises ayant besoin d'un précision

Workshop

  • Maintenir une rigueur extrême
  • Dans la head du HTML, ajouter
  •  
  • Dans le fichier CSS, ajouter:
  •  

burger party 2/3

h1 {
  color: blue;
  background-color: red;
  font-size: 16px;
}
  • Sauver, les fichiers, ouvrir le HTML avec chrome
    •  Qu'est-ce qui à changé ?
  • S'arranger pour changer la couleur du texte, du fond et la taille.
  • Changer un autre style du h1
  • Pour chacun de vos ingrédients, trouvez une image sur internet (jpg/jpeg, png ou gif only !), et sauver la dans un dossier "images", dans le même dossier que l'index.html

Text

<link rel="stylesheet" type="text/css" href="style.css">

Cascading Style Sheets

  • Un fichier « .css »
  • Le lien est fait dans dans la <head>
  •  
  • L'attribut href indique un chemin (path) vers un fichier, en partant de la même racine
<link rel="stylesheet" type="text/css" href="index.css">

La feuille de style donne une série de propriétés (properties) pour chaque balise

body {
  background-color: yellow;
}
h1 {
  color: pink;
  text-transform: uppercase;
}

Comment avoir la class ?

  • Chaque éléments HTML n'a qu'un seul style dans le CSS
  • Pour que
    • deux <p>, ou deux <div> aient un style différent
    • un <p> et une <div> aient le même style
    • on utilise l'attribut class 
<p class="bg-blue">test</p>
<div class="bg-blue">test</div>
<div id="division-1">test</p>
.bg-blue {
  background-color: blue;
  color: white;
}
#division-1 {
  text-transform: uppercase;
}

...aucune id.

  • Pour cibler un élément du manière unique (CSS, JS) on utilise l'attribut id

Le . indique la class, le # indique l'id

Workshop

  • Augmenter sa rigueur extrême
  • Après la liste <ul>, créer les balises suivantes:
    • header
    • main
    • footer

burger party 3/3

  • Dans la balise <main>, ajouter autant de balises <div> que vous avez d'ingrédients
  • Donner à chaque balise une class
  • Changer le CSS pour chacune de ces class, ainsi que pour header et footer, et donner une image de fond à ces contenants
.pain {
  background-image: url(pain.jpg);
  background-size: 100% 100%;
  width: 200px; height: 50px;
}
  • Composer un burger appétissant
  • Bonus: réussissez l'exercice sans classes 
<div class="pain"></div>

Workshop

  • Trouver le plus rapidemment possible la bonne combinaison de cartes
  • Ex: un titre avec une bordure bleue

Static

  • HTML et CSS sont des langages qui produisent des pixels statiques, agencés de façon déclarative.
  • Différence avec Word ? Google Doc ? WYSIWYG ? Print ?
  • Oui: web = sémantique et responsive.
  • Et même utilisables hors navigateur
  • Quelques pixels statiques:
    • idéal pour faire la promo d'un jeu
  • 1 million de pixels sont-ils-importants ?
  • Et concernant les pixels dynamiques ? 
    • idéal pour faire un jeu
  • Langages importants:
    • omnipotence du web
    • terminaux partout, en attendant la singularité

L'essence du web

  • sérendipité / hypertextualité
  • autrement dit: les liens
  • d'une balise à l'autre...
  • ... ou d'un site à l'autre
  • un savoir encyclopédique, mise en ligne du monde
  • une nouvelle norme semi-démocratique: le PageRank (©2007 Google
  • ...ou d'une page à l'autre...
<a href="#bas">go to footer</a>
<a name="bas"></a>
<a href="contact.html">contact me !</a>
<a href="https://fr.wikipedia.org/wiki/PageRank">En savoir plus</a>

Workshop

Créer les 3 types de liens sur votre page web:

  • un lien en bas de page, pour remonter en haut
  • créer une autre page HTML et un lien vers cette page
  • Dans une liste, créer 3 liens vers vos 3 sites préférés

Bonus 2: trouver une manière pour que le liens vers un site externe ouvre une nouvelle fenêtre

le portail d'hyperliens

  • le titre du site est "portail de favoris"
  • il y a une paragraphe d'introduction qui explique que c'est un portail de liens
  • Il y a une image qui rappelle la notion lien
<img src="https://autocollant-sticker.com/flocon-neige.jpg" />

Bonus 1 : la taille de votre image est contrôlée grâce à CSS

↓ Alternative ↓

Workshop

  • créer un lien en bas de page, pour remonter en haut
  • créer un paragraphe proposant des choix 
    • ces choix sont des liens vers un autre <p>
    • ces autres <p> proposent des choix
    • cela compose un aventure complète
    • on peut gagner ou mourir en cours de route
    • la conclusion de l'aventure est sur une autre page. Il y a aussi un lien vers le wp de loup solitaire

Bonus 2: musique sur ce site, et images selon les moments de l'aventure

la sérendipité dans les années 80

  • le titre du site est "Louve solitaire"
  • il y a un header d'introduction qui explique que c'est un livre dont on est l'héroïne
  • Il y a une image médiévale fantastique 
<img src="https://lone-wolf.com/warrior-girl.jpg" />

Bonus 1: taille et bordure des images contrôlée grâce à CSS

CSS en bloc

Principaux Blocks

  • div
  • h1...h6, p
  • header, main, footer, nav
  • ul, ol, table
    • li, tr, td
  • form
  • section, article
  • pre
  • audio, video

Principaux Inlines

  • span
  • a
  • strong, em
  • img
  • abbr, sub, sup
  • input, label, textarea
  • button
  • select
    • option

Le CSS associé

display: block;

display: inline;

display: inline-block;

width, height, margin, padding, border, background, text-align, position...
color, font, text-decoration, text-transform, line-height, letter-spacing...

Un arbre

Dont les autres branches sont en block

Dont les rameaux terminaux sont « inlines »

Dont les feuilles sont de la donnée textuelle (inline par nature)

 

dont le tronc est <html>

dont les deux principales branches sont <head> et <body>

Les élements en ligne ne devraient pas contenir de blocks...

Workshop

  • Choisir 1 créatures mythique
  • La présenter de la façon suivante:
    • Elle est présentée sous forme d'article
    • L'article comprend
      • une section description
        • avec un paragraphe, dont les mots importants sont mis en valeur, et les liens sont bien visible, mais pas souligné.
      • une section info
        • avec une image (display en bloc), et une liste de caractéristiques
    • Cet page a une "ambiance" qui correspond à l'animal choisi

Encyclopédie des créatures 1 / 2

Bonus: trouvez une façon de mettre la liste à gauche de l'image

Tooling

VS code extension et format on save:

Prettier - Code formatter  + settings

 

 

 

 

 

"editor.formatOnSave": false,
"[css]": {
  "editor.formatOnSave": true
},
"[html]": {
  "editor.formatOnSave": true
},
"editor.renderWhitespace": "all"

Styles de block

  • border
    • border-color: X11color / hexadecimal / rgb / rgba
    • border-width: 1px / 2em / 3rem / 1vw / 5%...
    • border-style: solid / dotted /dashed....
    • border: 1px solid red; (shorthand)
  • whitespace
    • margin: 3px; (espaces exterieurs) / padding: 5px; (intérieurs)
  • size:
    • width: 50px; (largeur) height: 100px (hauteur)
  • text-align: left / center / right / justify;
  • background:
    • background-image: url(...);
    • background-color: idem
    • repeat(no-repeat), size (contain, cover), position...

Workshop

  • Stylisez les block de votre créatures, en respectant votre thème
    • image en block
    • bordures avec radius
    • background-image, color ou gradient
    • padding, margin
    • le texte des paragraphe doit être justifié

Encyclopédie des créatures 2 / 2

Bonus: ayez une classe globale. Tous vos sélecteurs dépendent de cette classe

↓ Alternative ↓

Workshop

  • Faire un usage pertinent des blocks
  • Faire un site flat, pepsy et flashy
  • Aucune marges blanches: 100% coloré
  • Votre page optimisée pour mobile contient
    • Un header
      • a gauche un titre "Art à bxl" / à droite une icône de menu burger
    • une série de 5 liens sous forme de gros blocs colorés, qui mènent aux différents musées d'art de bruxelles
    • Un footer fait de liens vers 2 autres pages vides : contact, mentions légales

Portail des musées

Bonus: le footer contient des liens vers 3 réseaux sociaux, sous formes d'icônes cliquables

Bonus 2: trouvez en ligne des générateurs gratuits de chartes de couleurs et de logos

Effets de block

  • la propriété box-shadow
  • la propriété border-radius
    • ​rend les bords arrondis
  • la propriété box-sizing
    • ​facilite calculs en ajoutant padding + border à la width
background-image: linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
box-sizing: border-box;
border-radius: 10px 5px;
border-radius: 50%;
/* offset-x | offset-y | blur | spread | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Position

  • Concerne les élements de type "block"
  • Permet de "sortir du flux" un élément, avec
    • position: absolute;
  • Permet de dire en fonction de quel élément un position est absolue
    • position: relative;
  • Permet même de garder un élément à un même niveau: comme un header en haut
    • position: fixed;
/* Toto's cheatsheet: center */
.soleil {
  position: absolute;
  left: 50%;
  transform: translateY(-50%);
}

Workshop

Un coucher de soleil

Bonus: animez vos éléments au survol

Bonus 2: le seul fichier à la racine est index.html (les autres sont tous dans des sous-dossiers)

Concours du plus beau coucher de soleil avec

  • une section ciel, avec dedans en absolu:
    • un soleil, un nuage, un oiseau ou une étoile
  • une section mer avec:
    • un bateau et un mammifère marin
  • une section plage avec
    • un élement surprise que vous choisissez
      • ex: un parasol oublié

WS modale et header fixed

flexboxes

  • Concerne un block parent d'élements de type "block"
  • Permet de controller l'alignement horizontal, vertical 
    • display: flex;

 

 

  • Permet aussi de controller les espaces séparants les éléments
    • justify-content: between;

 

  • Permet aussi de controller les espaces séparants les éléments
    • align-items: center;

 

  • On peut combiner ces 3 règles, mais aussi controller le wrap, le grow, le shrink...

 

un peu de souplesse

Workshop

  • Dessiner un wireframe de SPA d'animal domestique digital
  • Procéder à son intégration, sous forme de page HTML/CSS statique
  • L'essentiel de votre organisation est en flexboxes
  • L'animal est un gif animé

Tamagotchi 1/2

Bonus: lorsqu'on clique sur les boutons, des alertes javascript indiquent ce qu'on aimerait qu'il se passe

CSS en ligne

Des styles bien alignés

  • color: X11 / hexa / rgb / rgba
  • text-decoration: underline / none
  • text-transform: uppercase / lowercase / capitalize
  • line-height (bloc aussi): 20px;
  • letter-spacing, word-spacing...
  • font
    • font-style: normal / italic / oblique
    • font-size: 16px / 3rem
    • font-weight: normal / bold / 500;
    • font-family: serif / sans-serif / monospace / cursive;

Inline / text CSS

Custom Font family

police partout, compatibilité nulle-part

@font-face {
font-family: 'Roboto';
src: url('roboto.eot?') format('eot'),
     url('roboto.otf') format('truetype'),
     url('roboto.woff') format('woff'),
     url('roboto.svg#Roboto') format('svg');
font-weight: normal;
font-style: normal;
}	

h4 {
  font-family: 'Roboto', sans-serif;
  font-size:3em;
}
  • fontsquirrel.com
  • transfonter.org

Workshop

Styliser le texte du précédent projet

  • Trouver un police adaptée sur dafont et la charger
  • Ajouter différents effets de texte (couleur, ombre, transformation, gras, italiques, etc...)
  • Trouver un autre site de partage de police, et partagez le

Tamagotchi 2/2

Bonus: toutes vos classes de texte commencent par text-... , toutes vos classes de block sont imbriquées et finissent par ...-container

Une icône

du web

  • L'icône à la mano
    • non vectorielle
    • placement vertical difficile
    • effet de hover difficile
  • Les polices d'icônes
    • règles tous ces problèmes
    • font-awesome
    • icomoon
    • etc
<link
  rel="stylesheet"
  href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
  integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
  crossorigin="anonymous">

Workshop

  • Télécharger le kit de base de font-awesome
  • Faire une interface de lecture de musique
    • un input de type "range" pour simuler l'avancement de la musique
    • une barre d'icône en flex
      • un bouton "j'aime"
      • un bouton "aléatoire"
      • un bouton "repeat"
      • des boutons "suivant" / "precedent"
      • un bouton "play" 

Police d'icône

Bonus 1: lorsqu'on clique sur play, ça lance votre chanson préférée

Bonus 2: lorsqu'on clique sur le bouton "play", cela devient un bouton "pause" et vice versa

Bonus 3: lorsqu'on clique sur play, le range avance tout seul !

Tooling:

la cour des grands

  • Task runners
  • Application bundlers
  • Parcel.js
  • Alternatives:
    • webpack
    • rollup
    • gulp
    • grunt
    • framework CLI

 

# install git bash
# bind to VSCode terminal
mkdir parcel_test
cd parcel_test
npm init
npm install --save parcel-bundler
touch index.html
touch style.css
# edit index.html with ! & style:css
# edit package.json scripts
# start: "parcel index.html"

Workshop

  • Inventez un charte graphique pour le site du magasin "vegasme", qui vend des produits véganes, bio et locaux
  • Votre index.html présente les classes utilisables
    • 4 couleurs sous forme de 4 carrés juxtaposés de 100x100px
      • bg-primary, bg-secondary, bg-warning, bg-error
    • 3 typographies sous forme d'une liste à puce
      • title, subtitle, text
    • 3 boutons instanciés
      • btn-primary, btn-secondary, btn-rainbow

charte graphique végane

Bonus: dans plusieurs balises <pre>, on peut voir comment utiliser la charte, avec des exemples de code HTML

Workshop

  • A l'aide de toute vos connaissances actuelles en HTML/CSS, reproduisez le site web suivant du mieux possible :

Epreuve blanche

  • Choisir une des trois sections
  • Retrouver les images sur le dossier partagé
  • N'oubliez pas les dépendances utiles:
    • prettier
    • parcel
    • font-awesome

CSS: théorie générale

Vue d'ensemble des selecteurs

  • tous les élements:    * {   }
  • via l'élément:               button {   }
  • via l'id:                             #toto {   }
  • via la class:                    .toto {   }
  • via les attributs:         [attr=value] {   }
  • via les pseudo-selectors:
    • div:last-child { }
    • .toto:first-child { }
    • a:hover, button:disabled
    • li:nth-child( even )

Workshop

  • Vous n'avez pas droit à l'usage de class ni de id, ni de <table>
  • Grâce à flexbox, construisez une présentation en grille des données suivantes:

sans aucune classe

Bonus: Corriger les 2 erreurs

Bonus 2: Le HTML est 100% généré par JavaScript

Binaire Décimal Hexadécimal
0000 0 0
0001 1 1
0010 2 2
0011 3 3
0100 4 4
0101 5 5
0110 6 6
0111 7 7
1000 8 8
1001 9 9
1010 NUMBER INPUT TEXT INPUT
1011 11 B
1100 12 C
1101 13 D
1110 14 E
1111 15 F
0111 16 G
  • tout est border-box
  • la ligne de titre est n&b
  • 1 ligne sur 2 a un fond gris
  • la dernière ligne est r&b
  • les inputs ont des bg =/=

Imbrication et combinaison

de sélecteurs

  • ", "     pour appliquer à plusieurs sélecteurs
  • "  "      pour tous les enfants
  • ">"    pour les enfant directs
  • "div.toto" pour la div ayant la class "toto"
  • un peu plus: +, ~...
  • ::after, ::before

Selector: La loi du plus fort précis

  • Qui gagne ?
  • Sélecteurs imbriquées et niveau de précision
    • !important (interdit)
    • style dans le HTML (interdit)
    • celui qui a le plus d'id (interdit)
    • celui qui a le plus de class
    • celui qui a le plus de balises
    • en cas d'égalité, le dernier déclaré
    • celui du navigateur
  • Ces règles sont la raison du "C" dans CSS
  • Attention: l'implémentation peut varier selon les navigateurs

Propriétés combinées

En général, lorsqu'il existe plusieurs propriété commençant par le même mot, on peut les combiner:

  • font: Arial 30px italic;
  • border: 1px dotted green;
  • background: url("toto.png") red no-repeat;
  • margin: 1px 4px 1px 4px;
  • padding: 3px 6px;
  • flex: 1 1 0;

Unités

dans leur diversité

  • liées aux valeurs : 50 quoi ? 50 pixels, 50 centimètres, 50%... 
    • width: 50px; height: 50cm; background-size: 50%;
  • Elle sont collées aux nombres: 3em,  90vh, 12pt
  • Soit elles sont "absolues":
    • ​cm, mm, pt: pas beaucoup de sens sur le web
    • px: très utilisée et "scalée" sur le écran HD, rétina
  • Soit elles relative à la taille:
    • em: de la police de l'élément
    • rem:  de l'élément racine (<html>)
    • %:  du parent
    • vh, vw: de la fenetre visible (viewport)

Rares: ex, pc, in...

Uniques: deg, rad, turn, s, ms... 

Vides

et valeurs par défaut

  • Pour les unités, le zéro est suffisant pour dénoter le vide
    • width: 0; margin: 5px 0 10px 0; top: 0;
  • Plus généralement:
    • tous: initial / inherit --> unset;
    • couleur: transparent;
    • taille: 0, auto;
    • valeur parmi une liste: none;
  • Très important: display: none;
  • Pour les shorthands properties.... ça dépend
    • border: 0; 
    • background: none; background: transparent;
    • flex: initial;

HTML: intéractions

Formulaires

I/O -> Formulaire = input / Page = output

C, U & D du C.R.U.D.

Data -> Or gris du nouveau monde

Implique un serveur et une base de données

Le laisser passer A38 du web

  • Balise: <form></form>
  • Où envoyer ? <form action="traitement.php">
  • Requête: <form method="post">
  • Comment envoyer ? <button type="submit">
  • Balises bonus:
    • <label for="nom">Nom:</label>
    • <input name="nom" /> ou autres contrôles
    • <fieldset>, <legend>

Contrôles

 Widgets

  • Saisie: balise auto-fermante <input /> (type: text, number, email, url, password, tel, search...)
  • Binaire ou choix multiples: <input type="checkbox" />
  • Liste connues d'états:
    • Un peu: <input type="radio" />
    • Plus: <select><option>1</option><option>2</option></select>
    • Plein: <input type="range" />
  • Widget spécial <input type="range/date/file/hidden" />
  • Champ libre: <textarea rows="10" cols="12"></textarea>
  • C'est quoi le problème ? Le reste, et les graphistes !

de formulaires

Workshop

Nous travaillons sur l'app interne de gestion de stock d'une célèbre chaîne d'articles de sport.

À fond le form

Bonus 2: cliquer sur "enregistrer" rempli un array javascript contenant les noms d'articles, et le loggue dans la console

Le  vendeur  déballe les cartons et saisit les nouveaux articles chaque jour:

  • nom
  • catégorie
    • vélo, course, art martiaux, natation, indoor, outdoor
  • pour femme / homme
  • prix unitaire
  • quantité
  • bouton enregistrer
// bonus
btn.addEventListener("click", function (e) {
  e.preventDefault();
});

Bonus: il y a un bouton pour vider tous les champs

Validation de formulaire

Attributs impliquants une contrainte:

max,min,maxlength,minlength,pattern,readonly,required

 

et attributs liés aux formulaires

  • Attributs liés aux forms :
    • value
    • disabled, checked, selected...
    • placeholder, size...

Le bouton submit implique une validation de ces restrictions

Vocabulaire associé: pristine, dirty, touched, valid, invalid

Workshop

  • Pour que les passagers puissent monter dans l'avion, demandez leur:
    • prénom, nom, sexe, âge, n° de passport
    • Classe: VIP, 1ère, 2ème, Eco
    • Repas: tout, halal, casher, végétarien, végan
    • Case de validation finale
  • Ajouter les attributs suivant à votre form: action="mailto:mail@domaine.com" method="post" enctype="text/plain"
  • Tous les champs sont requis et doivent être valide

check-in

Bonus:  Repas contient le champ "allergie", si on clique dessus, un nouveau textarea "précisez" apparaît...

Workshop

  • Nous travaillons sur une grille de 4x4
  • Certaines cases peuvent être pleines, donc inutilisable
  • Les autres cases sont des inputs de texte
  • Sur papier, trouver assez de mots allant ensemble pour cette grille
  • Il y a une liste donnant les définitions/énigmes par ligne/colonne en dessous de la grille
  • L'utilisateur peut remplir la grille comme il le souhaite, mais uniquement une lettre par input, qui apparaît en majuscule

maux croisés

Bonus:  Utilisez "pattern" pour "une seule lettre entre a et z". Outch

Bonus 2:  JavaScript vérifie que l'utilisateur à vraiment gagné !!! OMG

media et contrôles

  • Les trois seuls langages du web "interprétés": HTML, CSS et JS
  • Tous le restes = fichiers statiques = inchangés, sans "runtime"
    • images: jpg (jpeg), gif, png + officieux: svg, bmp, webp
      • <img src="..." />
    • audio:  mp3, wav, ogg + officieux: midi, wma
<audio controls>
  <source src="monAudio.mp3" type="audio/mpeg">
  <source src="monAudio.ogg" type="audio/ogg">
  <p>Votre navigateur ne prend pas en charge l'audio HTML. Voici un
     un <a href="myAudio.mp4">lien vers le fichier audio</a> pour le 
     télécharger.</p>
</audio>
  • video: mp4, ogg, webm + officieux: avi, wmv, mpg, flv, mov
<video width="400" controls>
  <source src="mon_mariage.mp4" type="video/mp4">
  <source src="mon_mariage.ogg" type="video/x-msvideo">
  Your browser does not support HTML video.
</video>

Workshop

  • L'école de musique Tchaïkovski a besoin d'un blog
  • Elle souhaite partager auprès des familles:
    • descriptif d'évènement (titre, date, paragraphe) + un média parmi les suivant:
      • une photo jpg
      • un enregistrement audio mp3
      • un enregistrements vidéo mp4
    • Chaque article est séparé avec un <hr/>
  • L'ambiance du blog rappelle la musique
  • les contenus sont disponibles dans  le repo suivant:

swan's lake 1/3

Bonus: Il y a un menu fixed à droite, pour scroll vers les articles, et le scroll est smooth, même sur Safari

Workshop

  • L'informaticien le l'école de musique est très mécontent: Ce n'est pas D.R.Y !
  • Faire en sorte qu'une collection javascript contienne toutes les données, et que chaque article soit généré depuis ce script
  • Les dates sont sous formes de timestamp dans la collection, mais bien affichées sur le site

swan's lake 2/3

Bonus: On peut trier les articles par dates, dans le sens chronologique ou antéchronologique

iframe & embed

  • <iframe>, ou l'inception du HTML
    • une page chargée dans la page, avec son propre contexte d'exécution
<iframe 
	src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2518.2356139506705!2d4.358573615494672!3d50.86383767953446!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c3c37b0b18e0ab%3A0xa7dcedc9c29a0d35!2sInterface3%20asbl!5e0!3m2!1sfr!2sbe!4v1597835334639!5m2!1sfr!2sbe" 
	width="600" 
	height="450" 
	frameborder="0" 
	style="border:0;" 
	allowfullscreen="" 
	aria-hidden="false" 
	tabindex="0"></iframe>
  • Une occasion de mise en page partagée 
  • Le standard pour youtube, maps, open street map, vimeo...
  • <object> et <embed> permettent des  options similaires, mais moins standardisées

Workshop

  • Ajouter un article avec vidéo youtube à votre site !
  • Ajouter un page avec la google map centrée sur l'école de musique Tchaikovsky, ainsi que se coordonnées.
  • Ajouter un formulaire d'inscription présenté dans un iframe
    • nom, prenom, age, select d'instrument

swan's lake 3/3

Bonus: Les articles  avec liens youtubes sont aussi généré par JS

a11y

pour a...ccessibilit...y

La loi, c'est moi

Accessible par défaut

  • mon site est "bien formé"
  • ma langue est annoncée
  • mes balises sont sémantiques
  • un menu utile apparaît vite
  • mes titres ont une hiérarchie logique
  • mes infos arrivent par ordre d'importance
  • mes styles sont simples, mes couleurs sont limitées
  • mes images ont un alt, mes vidéos une track
  • rien d'important ne dépend exclusivement de CSS ou de JavaScript
  • rien ne bloque la navigation au clavier 
  • pas de WYSIWYG
  • zoomabilité de base

80% du job !

a11y tips

  • tabindex ordonnés
  • roles: banner, navigation, main, complementary, contentinfo, search, form, application
  • évènements clavier JavaScript
  • attributs ARIA
    • aria-hidden
    • aria-label (description)
    • aria-labelledby (id d'un élément contenant la description)
    • aria-owns...
  • skip link: un href="#main-content" stratégique

pour les 20% restant !

Workshop

  • Nous travaillons sur le sites des parcs de Bruxelles
  • L'interface est une liste de parc avec  pour chaque item:
    • à gauche une photo (et le nom du parc a dessus: forest, tenbosh...)
    • à droite 4 div carrées, pour le 4 saisons: vert rouge marron blanc
    • chaque saison est cliquable et lance une action javascript:
      • une popup contenant des horaires

crazy designers 1/2

Bonus: le formulaire arrive sur une page PHP !

  • Un bouton ouvre une popup avec un formulaire sans label (infos dans placeholder) permet de s'inscrire à une visite du parc:
    • nom, prénom, nombre de personne, date
    • select: matin ou aprem
  • Rendre cette interface a11n

Tester, c'est douter

  • couper javascript et HTML
  • lighthouse
    • et extension
  • axe en command line interface (axe-cli)
    • npm i -g axe-cli
  • synthétiseur vocal (screen reader)
    • chromevox et extension
    • apple voice over
    • et nombreux équivalents
  • accessibility checkers en tous genres:

Et douter, c'est très très bien

Workshop

Tester votre site via tous les moyens cités précédemment...

crazy designers 2/2

Bonus: Testez un de vos anciens sites et corrigez le !

w3c validator

Be conservative in what you produce; be liberal in what you accept.

SEO

Search

Engine

Optimization

  • Il ne peut en rester qu'un: Google
  • Concurrents ( =/= Portails): Qwant, Bing, DuckDuckGo
  • Métriques de google
    • Non-blacklisté:
      • ne jamais faire n'imp
      • pas de contenus dupliqués
    • Page Rank: la note du site
      • nombre de liens pointants sur votre site
      • page rank des pages contenant ces liens
      • mots clés de ces liens
    • Bounce Rate: ma page satisfait-elle les users ?
    • Mes choix de devs:
      • l'URL
      • le title et les balises métas
      • Titres (h1, h2...) et sémantique
      • Contenu plein-texte
      • Qualité, responsive, performance

 

metadata,

analytics

  • Les balises meta (et associées) utiles
  • Le script google analytics
<html lang="fr">
<title>Best site ever</title>
<meta name="description" content="The best site ever">
<!-- keywords ? -->
<meta name="robots" content="index, follow"> 
<meta name="viewport" 
      content="width=device-width,initial-scale=1.0">
<link rel="canonical" 
      href="http://example.com/" />

<!-- open graph -->
<meta property="og:type" content="" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<!-- twitter, dublin core, domaines... -->
 
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-40583718-3">
</script>

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", "UA-40583718-3");
</script>

Favicons

  •  

 

 

 

  1. Trouver une icône carrée, transparente, en 128px minimum
  2. Générer un favicon:
    • ex: https://realfavicongenerator.net/
  3. Placer ces assets dans le dossier racine du site
  4. Donner les liens vers les favicons dans la <head>
  • Une icône pour l'onglet sur le navigateur
  • Mais pas que....
    • bookmarks
    • icône sur le téléphone
    • PWA...

Workshop

  • Faire un micro-portefolio 100% optimisé SEO
  • Ajouter une favicon
  • Tester avec Lighthouse
  • Choisir une URL en .if3.io, et s'enregistrer sur google analytics... utiliser le script

meta cagoule

Bonus: Trouver un outil de partage sur facebook, twitter, instagram... ou utilisez https://sharingbuttons.io/

Canvas

  • Dessiner au coeur de HTML 
    • mais SVG est meilleur pour cela
  • Animer quelques images
    • mais CSS + sprite est meilleur pour cela
  • Avoir une scène 2d/3d pour développer des petits jeux visuels
    • là d'accord !
    • Mais ça reste une simple porte ouverte vers JavaScript
    • Attention: JS pour 2D et 3D (webgl) très "bas niveau"
<canvas id="mon-canvas" width="150" height="150"></canvas>

https://www.w3schools.com/graphics/tryit.asp?filename=trygame_default_gravity

Mini-workshop: trouver un jeu HTML fait dans un canvas

Workshop

cheatsheets addict

  • créer un compte github
  • créer un repo github "cheatsheets"
  • cloner ce repo 
  • installer parcel et highlight.js
  • créer README.md, .gitignore
  • créer un fichier style.css
  • créer un dossier HTML
  • créer un fichier index.html
  • lier à la feuille de style
  • faire une  cheatsheet HTML
    • introduction: balises et attrs
    • principales balises en bloc
    • principales balises en ligne
    • ressources
  • add, commit & push
# commandes utiles
git clone https://...
cd cheatsheets
touch README.md
touch .gitignore
touch style.css
npm i parcel --save 
npm i highlight.js --save
mkdir HTML
cd HTML
touch index.html
git add .
git commit -m "mon copion v1"
git push

CSS: théorie avancée

frameworks CSS

  • CSS = hautement réutilisable
    • de page en page, de site en site, et pourquoi pas plus ???
  • Charger une feuille de style externe, et utiliser ses classes
    • framework: ensemble de fonctionnalité suffisante pour couvrir tous les besoins CSS d'un site web !
  • Les plus importants:
    • bootstrap, foundation, tailwindcss (+ materialize, prime...)
  • Qualité:
    • Mobile first, POC, rapidité, toujours joli, petit goût de reviens-y
  • Défault:
    • Poids, identité visuelle cheap, petit goût de déjà-vu

Workshop

  • Choisir un des 3 grands frameworks CSS:
    • bootstrap
    • foundation
    • tailwindcss
  • Produire 3 cartes (cards) présentant succinctement vos 3 films préférés
  • chaque carte contient un badge (horreur, romantique, action, sf)

Getting started

Bonus: c/c ces cartes 3x. Elles se wrap automatiquement à la ligne si l'écran est trop petit: 100% responsive ! Et en masonry?

Bootstrap grid

  • La "grille" bootstrap nous force à penser le monde en lignes de 12 cases
  • on utilise des classes, liées à des tailles d'écran, et à un nombre de case sur 12

mettez m'en une douzaine

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-lg-3">col</div>
    <div class="col-sm-6 col-lg-3">col</div>
    <div class="col-sm-6 col-lg-3">col</div>
    <div class="col-sm-6 col-lg-3">col</div>
  </div>
</div>
  • Il suffit d'additionner le nombre de colonnes pour chaque taille sm, md, lg, xl (ou rien pour xs: col-12)
  • Parfaitement responsive + adaptative (breakpoints)
  • On place souvent le tout dans une class "container"

Workshop

Bonus 2: Générer ce HTML via javascript

exercice élémentaire

Bonus 1: Comment faire un effet de similaire aux vrais, avec une case de chaque côté sur la première ligne ?

Bootsrap components

Tout en un

Les components les plus utilisés sont souvent:

  • La carte (card): une présentation multimédia succincte
  • Le bouton (button)
  • Le badge (badge): utile pour le hashtags/filtres de recherche
  • Les éléments de formulaires (forms)
  • Les éléments de navigation (nav/navbar) 
  • La pagination
  • Les spinners (roues de chargement)

Les «utilities» sont les "one-liners" très utile pour des petites rectifications visuelles:

.rounded-circle, .d-flex, .shadow-sm, .p-0, .text-center...

Workshop

  • Nous travaillons sur un site de fanfictions, parfois un peu « olé-olé »
    • Le site est interdit au mineur
    • Faire un formulaire 100%  bootstrap
    • nom, prenom, age
    • bouton "entrer"
    • légère ombre autour de ce bloc
  • 2 modales bootstrap sont cachées
  • En cliquant sur "enter", soit l'une soit l'autre s'ouvre
    • Site interdit au mineur: veuillez quitter cette page: [OK].
    • Ce site propose des contenus qui peuvent choquer: [ANNULER] ou [CONTINUER]

Fan fictions

Bonus: Si le nom ou le prénom ou l'âge sont vides, une troisième popup prévient que ce ou ces champs sont vides, et empêche de continuer [RETOUR].

Librairies CSS

  • Réutilisation d'un bout spécifique de code
    • base pour tous les projets (ex: reset, icônes)
  • Bibliothèque (library): fonctionnalités limitées, liées à un domaine précis du CSS
  • Les plus importants:
    • fontawesome, icomoon, normalize, flexboxgrid, basscss, milligram, masonry...
  • Domaines
    • icône, reset, flex, animations, gradient, responsive... tout en fait !

Flex avancé

  • On peut utiliser les propriétés géométriques de flex... en colonne !
    • flex-direction: column;
  • Dans ce cas, tout s'inverse
    • justify-content s'applique aux espaces verticaux
    • align-items s'applique au méridien vertical
    • flex-grow s'applique en hauteur
  • flex-wrap est l'outils ideal pour un flex "responsive" basic
  • Il existe aussi un possibilité de "reverse" pour l'axe et pour le wrap

Warning

 flex-direction: column;

seul ne sert à rien: c'est le comportement natif des blocs !

Workshop

  • Faire une route au centre de l'écran  (width: 50%), qui le traverse de bas en haut
  • Son fond est gris, et des marques blanches séparées occupe l'axe vertical central
  • Vers le bas, il y a un passage piéton
  • 6 voitures de 200px de large occupent sur une ligne tout l'espace de cette route en largeur
  • Si l'écran est réduit, la route est réduite, mais pas les voitures, qui se mettent à la file

embouteillage

Bonus: Les voitures bougent toute seules ensemble, grâce à une animation provoquée par un "setInterval" jouant sur le style de la div qui les contients

alternative...

Workshop

  • Reproduire ce tapis de roulette
  • Flex partout, <br /> nulle part
  • Les chiffres de 1 à 36 sont dans un flex-wrap
  • Les div de ces chiffres peuvent (doivent ?) être générées via JavaScript (ou PHP)

flex roulette

Bonus: cliquer sur un case fait apparaître une pièce brillante de 1€ sur cette case. Elle devient 2 puis 3, et enfin 5€ max si on reclique encore

media queries

  • La recherche de breakpoints utiles
  • Equivalent de la grid bootstrap (xs, sm, md, lg, xl) mais manuelle
  • Règle n°1: ne pas les utiliser
  • Règle n°2: ne les utiliser qu'en mode "mobile first"

L'art du compromis

/* Medium devices (landscape tablets) */
@media only screen and (min-width: 768px) {
  header {
    display: none;
  }
}

/* Large devices (laptops/desktops) */
@media only screen and (min-width: 992px) {
  header {
    display: block;
  }
}

/* Extra large devices (large laptops) */
@media only screen and (min-width: 1200px) {...}

Workshop

media queries: baby steps

Bonus:  profils issus d'un array JS. Ils ont une notes sur 5* visible

  • Notre application "babyday" sert à  trouver un babysitter le jour même
  • Il y a 4 champs dans un header:
    • un code postal
    • un horaire dans un select, entre 17h00 et 21h00
    • un salaire horaire libre
    • une checkbox "pro only"
  • en cliquant sur [rechercher], 3 profils apparaissent dans des cartes
  • mobile+tablette: tout est à la ligne, le fond est rose (#eeaeca)
  • desktop, les champs sont côte à côte, de même que les profiles, et le fond est un gradient de rose:
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);

Workshop

  • La grille bootsrap n'a jamais été intuitive:
    • on divise tout en 12 mais...
    • lorsqu'on dit col-sm-4 cela veut dire "3 cases" (case prenant 4/12)
    • lorsqu'on dit col-xl-3 cela veut dire "4 cases" (case prenant 3/12)
  • 10 ans après, tailwind a enfin trouvé une solution
    • w-4/12, w-3/12, w-12/12...
    • avec les variations suivantes:
      • sm:w-4/12, lg:w-6/12...
  • Implémenter vos propres sm et lg pour 1/6, 2/6... 6/6, façon tailwind
    • Attention, les : et les / doivent être échapé avec un \ dans le CSS

blowing in the tailwind

Bonus:  Quid de md ? xl ? Quid de 1/12 ou encore 1/2, 1/3 ?

Transformations

  • au delà des propriétés classiques: une re-transformation finale
  • se fait sur le blocks uniquement
  • fonctions CSS avec 1-3 args: x, y, z (tout, abscisses, ordonnées, profondeur, autre)
  • Par ordre d'importance
    • transform: translate(-50%, -50%);
    • transform: rotate(45deg);
    • transform: scale(2, 2); échelle
    • skew (distorsion), matrix (complexe), 3d
  • Souvent, l'unité est
    • une proportion, un %, un angle
  • La transformation peuvent être multiples, et/ou sur un seul axe:
    • transform: translateX(-50%) rotateZ(0.5turn) scaleY(2);

Workshop

  • "Volez" ces images
  •  site "nuage" d'acteurs, dont tailles proportionnelles aux popularités
  • Images sous forme de profil en rond, dans une "bulle"
  • Dans un container de 1000/500 parfaitement centré h/v :
    • Les bulle sont en position absolute: top + left + une transformation de l'échelle, selon votre goût
  • ajoutez transition: transform 3s; au CSS des images
  • il y un input number qui représente la popularité de Léonardo
  • selon le nombre entré dedans, sont scale augmente

dix-formes

Bonus: Tout fait en javascript, random, depuis tableau de score par id

Préprocesseurs de CSS

Syntactically Awesome Style Sheets

LESS, Stylus... et

Prépro - quoi ?

  • Compiler (AOT) : converti  le code en AST et trouve les erreurs avant le démarrage du programme (ex: Rust)
  • Interpreter (JIT) : converti en live le code en AST, trouve les erreurs au runtime seulement (ex: JavaScript, PHP)
  • Assembler : converti l'AST en code machine (hexadecimal, binaire)
  • Transpiler : converti l'AST en autre language (ex: JS -> Typescript)
  • Preprocessor : converti l'AST dans le même langage, avec transformant les macros en code (ex: Sass -> CSS, Pug -> HTML)

AOT: Ahead Of Time

JIT: Just In Time

AST: Abstract Syntax Tree

Macros: Code généré par du code

  • s'organiser en plusieurs fichier, en avoir un seul à la fin
  • avoir des variables, des "macros", des "mixins": générer du code
  • avoir automatiquement un support multi-navigateur
  • installation
    • npm i -g sass
  • process un fichier
    • ​sass test.scss
    • sass travail.scss style.css --watch
  • ou directement avec parcel
    • ​npm i -g parcel-bundler
    • parcel index.html
      • ​import "style.scss";

SASS install

SASS power

  • Variables (constantes)
    • reutilisable
    • propre
    • évolutif
  • Nesting
    • scope claire
  • Modules
    • organisation par élément
@use "autre_fichier";
$color: "red";

.fond-rouge { 
  background-color: $color; 
}

div {
  p {
    border: 1px solid $color ;
    .liens {
      text-transform: none;
      &:hover {
        text-transform: underline;
      }
    }
  }
}

Workshop

  • Nous re-fondons le site de la brasserie de l'ermitage à saint-gilles
    • https://ermitagesaintgilles.be/
  • Nous décidons d'organiser parfaitement les styles avec SASS
  • Nous travaillons avec parcel
  1. Reproduire la page d'accueil avec 3 couleurs et une nouvelle police dans des variables
  2. Dans carte.html, proposer une mosaïque de quelques bières. Le style d'une tuile de mosaïque est dans un fichier à part:  https://untappd.com/v/lermitage-saintgilles/9641702
  3. Builder ce site avec parcel

sass de décompression

Bonus: En arrivant sur le site, un bandeau "covid" + overlay gris dit que le bar est fermé, mais qu'on peut acheter sur la carte. On peut vraiment...

SASS super-power

// macro, façon SCSS
@mixin bg($color) {
  .bg-#{$color} {
    background-color: $color;
  }
}
@include bg(red);
@include bg(green);

// listes et boucle façon SCSS
$sizes: 0, 5, 10;
@each $size in $sizes {
  .p-#{$size} {
    padding: #{$size}px;
  }
}

// objets, façon SCSS
$colors: (
  primary: burlywood,
  secondary: gray,
  neutral: gray,
);
@mixin generateur($map, $attribute) {
  @each $key, $value in $map {
    &-#{$key} {
      #{$attribute}: $value;
    }
  }
}
.bg {
  @include generateur($colors, "background-color");
}

Workshop

Unlimited power

Bonus: faire cela grâce à une map de couleur, les classes ressemblent à .bg__<color> et .text__<color>

En vous inspirant de la slide précédente:

  • choisir une liste de 4 couleur
  • générer 4 classes ".bg-<color>" via un mixin
  • générer 4 classes ".text-<color>" via un mixin

CSS Animation

  • Toujours mieux que JS si possible en CSS
  • Très statiques: description d'une série d'états et des transitions qui les séparent
  • Très visuel, mais aussi parfois gadget, brouillon, non-a11n
  • Deux approches:

Animation programmée

Simple transition

Dans les deux cas, il s'agit de shorthand properties

Transitions

  • Décrite dans une pseudo-classe: hover, :focus, :checked, :active...
  • Parfois plus tordu... :not(:focus):invalid
  • transition: <prop> <temps> <type> <delai>;
    • transition: border 1s linear 0.1s;
    • transition: transform 300ms;
    • transition: color 1s, width 2s;
    • transition: all 4s;

> Exemples classiques ici <

// simple
a {
  color: lightgray;
  transition: color 1.5s;
}
a:hover {
  color: black;
}
// crazy
a {
  position: relative;
  display: inline-block;
  color: royalblue;
  overflow: hidden;
  background: linear-gradient(
    to right,
    midnightblue,
    midnightblue 50%,
    royalblue 50%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 0.75s ease;
}
a:hover {
  background-position: 0 100%;
}

Workshop

  • Dessiner deux billes couleur claire
  • Une bille noire est en pos absolue dans chaque oeil
  • Dessiner un sourire en dessous (border-radius ?)
  • Dessiner deux belles joues
  • Au survol du visage, les billes montent en haut à gauche en 2s
  • Les joues rougissent légèrement
  • Il y a un gros bouton "don't be shy!" qui a une transition originale au survol

Don't be shy !

Bonus: Les yeux ont un blanc, un iris et une pupille. L'iris change doucement de couleur aussi. Au clic sur le bouton, les yeux grossissent, le sourire s'accentue

Animations

  • Une transition à etape, définie hors des sélecteurs et nommée
  • Souvent lié à une "petite prouesse" démonstrative
  • animation: <nom> <time><func><delai><nb*><dir><fin><stop>
  • les keyframes sont les étapes (steps)
  • l'animation est l'usage de ces steps
  • quelques use-case réel:
    • loaders
    • transitions douces et infinies
    • MEA flash d'un contenu
    • mini-jeu à sprite
    • mini-schéma animé

> Un exemple très abouti ici <

// simple
body {
  animation: clignoter 5s infinite;
}

@keyframes clignoter {
  from {
    background-color: #001F3F;
  }
  to {
    background-color: #FF4136;
  }
}

Workshop

  • Récupérer ce sprite

 le sprite donne des ailes

Bonus: Plusieurs oiseaux traversent l'écran dans des temps et des directions différentes.

Source: https://fournier-pere-fils.com/home​

  • Trouver une belle image d'horizon en BG
  • Prévoyez un keyframe step pour chaque position de l'oiseau
  • Tester l'animation, et choisir un nombre de secondes optimum.
  • La combiner à une animation qui fait passer l'oiseau de gauche à droite de la page

Workshop

total freestyle

Bonus: Trouvez d'autres framework/lib/exemples d'animation à partager sur notre chat'. Prevoyez un démo succincte.

  • Une collègue m'a parlé à la machine à café d'une soit disant librairie CSS nommée: "animate.css" qui me permettrait de gagner du temps
  • Trouvez-la (la librairie)
  • Installez-la dans un dossier, via NPM
  • Chargez-la dans votre document
  • Utilisez-la en mode free-style: pro, fun, demo, projet perso....

features du futur

en cours d'adoption et de finalisation

Css variables

De leurs vrais noms: custom properties

  • Des données réutilisables, déclarée dans un scope
  • Préfixée de --
  • Le scope le plus global est :root { }
  • S'utilise avec la fonction "var()"
  • La fin de SASS ? En tout cas une nouvelle ère...
:root {
  --main-color: brown;
}

.bg-main {
  background-color: var(--main-color);
}

.text-main {
  color: var(--main-color);
}

Micro-workshop: palette de 3 variables, à utiliser dans 5 classes

Grid

  • Plus taguées "expérimental", mais bien moins utilisée que flex en 2020
  • Plus complexes, découvertes trop tard, encore en cours d'adoption
  • La fin de bootstrap ? En tout cas une nouvelle ère....
<div class="wrapper">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois</div>
  <div>Quatre</div>
  <div>Cinq</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base

Old stuff

or newsletter related

Versioning et XHTML

  • Internet Protocol VS World Wide Web
  • Loi de Postel: dur avec soi-même, tolérant avec les autres
  • SGML -> XML / HTML -> XHTML 
  • HTML5 / CSS3, Evergreen browsers
  • 2019: Fin du versioning, début d'une nouvelle histoire
  • IE7, emails, navigateurs anciens et/ou spécifiques/embarqués
  • React et JSX

Tableau

Une ombre au 

  • Ancêtre de flex/grid pour tout organiser en ligne
  • Mélange des genres entre fond et forme
  • Reste pertinent pour représenter des vrais tableaux...
    • ... mais souvent CSS trop limité, trop complexe
  • Penser en ligne (tr) et cellules (td)
<!-- simple -->
<table>
  <tr>
    <td>Javascript</td>
    <td>Senior</td>
    <td>50 000</td>
  </tr>
  <tr>
    <td>Python</td>
    <td>Junior</td>
    <td>60 000</td>
  </tr>
</table>
<!-- crazy -->
<table>
  <caption>
    Evolution des populations
  </caption>
  <thead>
    <tr>
      <th>COUNTRY</th>
      <th colspan="2">POPULATION</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">india</td>
      <td>1998</td>
      <td>85</td>
    </tr>
    <tr>
      <td>2000</td>
      <td>100</td>
    </tr>
    <tr>
      <td rowspan="2">USA</td>
      <td>1998</td>
      <td>30</td>
    </tr>
    <tr>
      <td>2000</td>
      <td>40</td>
    </tr>
  </tbody>
</table>

des Entités

plus vieilles que l'univers

  • Utilisée pour
    • remplacer les caractères non ASCII puis non ISO, puis non UTF8
    • remplacer les caractères réservé (<, >, &...)
    • remplacer les caractères introuvables sur le clavier 
  • Forme nommée "&euro;", forme chiffrée: &#8364;
  • Les plus communes: &nbsp; &lt; &gt; &amp; &quot; &apos; &copy;
  • S'accorde mal avec différent parser, désuet si charset UTF8

Tout: https://www.freeformatter.com/html-entities.html

Workshop

  • Présenter les données suivantes dans un tableau, avec des headers logiques :

Rich people

Bonus: Ce tableau est 100% généré depuis JavaScript

RANK #1 Jeff Bezos	
$178 000 MILLION
Jeff Bezos is an American philanthropist, businessman 
and space explorer who is probably best-known for creating Amazon.com.

RANK #2 Bill Gates	
$125 000 MILLION
Bill Gates is an American business magnate, chairman of Microsoft, philanthropist, author

RANK #3 Elon Musk	
$103 000 MILLION
Elon Musk is a South African-born Canadian-American businessman, inventor and investor

RANK #4 Mark Zuckerberg	
$97 000 MILLION
Mark Zuckerberg is an American technology entrepreneur
  • n'oubliez pas un copyright "entité" près des noms de marque. Le dollars, et les espaces liés aux chiffres en sont aussi

Deprecated

  • Balises/attributs à ne plus utiliser depuis HTML5 :
    • Les balises-CSS : center, font, s, u (remplacer par CSS)
      • sur la sellette: b, i (remplacer par strong/em et CSS)
    • Les attribut qui font référence a du CSS (align, bgcolor, width, height...)
    • les propriétés CSS ayant des successeurs plus efficaces:
      • float + clear -> utiliser flex
      • display: cell + vertical-align: middle -> utiliser flex
      • visibility: hidden -> utiliser display

Ou "so 2019", la lose...

Le point complet:

https://eev.ee/blog/2020/02/01/old-css-new-css/

Ressources

  • Références incontournables:
    • https://developer.mozilla.org/fr/
    • https://www.w3schools.com/
  • HTML
  • CSS​

THANKS EVERYONE
It's finally done ! See you soon

Et pour aller encore beaucoup plus loin...

HTML / CSS 2020

By Loïc TRUCHOT

Made with Slides.com

HTML / CSS 2020

Pragmatic HTML/CSS for non front-end devs (french version)

  • 3,421

More from Loïc TRUCHOT