Categories
Apprentissage CSS Database Formation HTML PHP SQL Web

Quand PHP dynamise les pages Web

code sur un écran

PHP dynamise les pages web grâce à des variables injectées directement dans le code HTML des pages.
Découvrons ce qui se cache derrière ces variables dites dynamiques…

Les superglobales

Une page web contient de nombreuses données qui peuvent être récupérées en PHP. Pour cela on va utiliser des variables techniques dites superglobales. Elles sont toujours disponibles, quel que soit le niveau où elles sont déclarées.

SuperglobaleDescription
$GLOBALSListe les variables disponibles dans le contexte global de l’application
$_SERVERContient des informations comme les en-têtes, dossier, chemin du script. Informations générées par le serveur
$_REQUESTUn tableau associatif qui contient par défaut le contenu des variables $_GET$_POST et $_COOKIE.
$_POSTContient les variables POST passées via une requête HTTP
$_GETElle contient les variables GET passées via une requête HTTP
$_FILESElle contient les fichiers uploadés au serveur passés par la méthode POST
$_ENVContient les variables d’environnement qui gravitent autour du script PHP : les variables shell, le système d’exploitation…
$_COOKIETableau de cookies envoyés par HTTP
$_SESSIONTableau de valeurs stockées en session, c’est-à-dire n’existant que pour l’utilisateur courant et durant une période limitée (son temps de connexion environ par défaut)

La transmission des données d’une page à l’autre se fait via le protocole HTTP. Deux méthodes sont alors utilisées :
GET : qui permet de récupérer un contenu, transmis par un paramètre get via l’URL.
POST : qui permet d’envoyer plus de contenu. Cette méthode est principalement utilisée pour gérer l’envoi de formulaires (lien avec HTML).

Voyons ces deux superglobales en détail…

Les variables GET

Lors d’une requête GET, on peut créer des variables directement dans l’adresse URL. La transmission se fait alors avec une paire de key=value contenue dans l’URL. Les données sont donc récupérables.
Pour ce faire, à la fin de l’adresse on écrit : url?parametre1=valeur1&parametre2=valeur2

Attention, le ? entre le nom du fichier et la variable est très important car c’est lui qui détermine les variables à transmettre.

Pour récupérer les données, on utilisera ensuite la superglobale $_GET.
Cette variable est un tableau d’objets qui contient toutes les données sous le format key => value .

Les variables POST

La méthode POST est principalement utilisée pour les formulaires. Pour gérer ces données, il faudra avoir 2 pages : une page contenant le formulaire et une autre permettant le traitement des variables.
La superglobale $_POST se comporte exactement comme $_GET : elle revoie un tableau d’objets. Il ne faut donc pas oublier dans le formulaire d’ajouter à chaque input un name !

Par exemple :
Page form.php

<html>
<body>
    <form action="login.php" method="post">
        <input type="email" placeholder="Adresse e-mail" name="email">
        <input type="password" placeholder="Mot de passe" name="password">
        <button type="submit">Connexion</button>
    </form>
</body>
</html>

Page traitement.php

<?php

echo "Votre e-mail est " . $_POST['email']  . ". Vous êtes bien connecté ! Votre mot de passe est secret, mais au cas où, il s'agit de " . $_POST['password'];

?>

Utiliser PHP avec du HTML, c’est possible !

Dans le doc HTML, on va pouvoir considérer les données PHP comme étant des données dynamiques. Il va donc être possible d’ajouter des conditions, ou des boucles directement dans le HTML.
Pour cela, on va inclure les données PHP en les écrivant dans les balises PHP : <?php   ...    ?> .

Les bonnes pratiques :
<?= correspond à <?php echo. Cette notation va permettre d’abstraire encore plus le php !
– au lieu de l’accolade dans les conditions, on va mettre deux points et terminer avec end... .
Par exemple :

<?php foreach($articles as $article => $donnee) : ?>
    <div>
        <a href="article.php?id=<?= $article ?>"><?= $donnee['title'] ?> </a>
        </div>
<?php endforeach ; ?>

On va donc écrire toute la page en HTML. Et s’il y a des variables spécifiques à déclarer en PHP, on va créer un bloc PHP tout en haut du document (avant la déclaration du HTML).

Conseils pratiques :
– avant de mettre les variables PHP dynamiques, écrire d’abord en dur le HTML ce que l’on veut obtenir,
– ne pas oublier d’ouvrir et fermer directement la balise PHP pour éviter les problèmes.

Insertion de fichier

Il est aussi possible d’insérer des fichiers directement dans la page PHP/HTML. Pour cela, on va utiliser la fonction include( ) (ou required() ).

PHP va lire le fichier, prendre tout son contenu pour le copier dans la page HTML. A noter que toute cette partie n’apparaîtra pas dans le code source : le fichier va rester sur serveur, et PHP va l’analyser pour le compiler (tout en restant transparent pour le client !).

Cette fonction d’ajout permet aussi de gérer les fichiers comme les componants externes : on peut faire un fichier contenant juste la navbar, juste le header, juste le footer, etc…
Cela évite d’écrire la même chose de partout, et les changements seront alors plus simples.
Le code PHP de la page web devient donc plus facile à maintenir !

Différence entre include et required

Avec include( ) , si le fichier n’est pas trouvé, on aura un warning (cela n’empêche donc pas le script de s’exécuter).
A noter que les erreurs ne s’affichent pas pour les clients du site, elles s’affichent uniquement en mode développeur.

Avec require( ) , si le fichier n’est pas trouvé, on aura alors une fatal-error entraînant l’arrêt d’exécution du script !

Connexion avec les bases de données

Il est possible de récupérer les données depuis une base de données. Pour cela, il faut créer une connexion à la base de données ($bdd), puis créer une requête comme avec SQL ($response), pour ensuite avoir une réponse ($variablesRecuperees).

Extraire tous les éléments de la base de données
// On créée une connexion à la base de données que l'on stocke dans $bdd
$bdd = new PDO('mysql:host=localhost;dbname=nomDeLaBdd;charset=utf8;port=3306', 'login', 'password');

// On écrit notre requête MySQL. On peut aussi concaténer des variables PHP dedans si besoin !
$request = "SELECT * FROM table";

// On demande à notre base de données, $bdd, d'exécuter la requête. On stocke la réponse de MySQL dans $response 
$response = $bdd->query($request);

// On demande à la réponse de nous retourner TOUTES les données (grâce à fetchAll).
// De plus, ces données seront retournées sous forme de tableau associatif, grâce au paramètre PDO::FETCH_ASSOC. 
$variablesRecuperees= $response->fetchAll(PDO::FETCH_ASSOC);

$variablesRecuperees est alors un tableau associatif. On peut alors extraire toutes les données grâce à un foreach :

<?php foreach ($variablesRecuperees as $variableRecuperee) : ?>
  <h1>
      L'élément est <?= $variableRecuperee['champs'] ?>
  </h1>
<?php endforeach; ?>
Extraire un seul élément

Il est possible d’extraire un seul élément de la base de données.
Pour cela, il existe deux façons de faire :

1 – en cherchant via l’id de l’élément (ou en incluant des variables précises)
Par exemple :

$idMovie = 34; // cet ID peut venir de GET par exemple !
$request = "SELECT * FROM movies WHERE id = " . $idMovie;

// ou encore

$search = "science-fiction"; // Ce paramètre peut venir de GET si on a cliqué sur le lien d'une catégorie, ou de POST pour un moteur de recherche par exemple !
$request = "SELECT * FROM movies WHERE category LIKE '%" . $search . "%'";

2 – via une requête paramétrée

$response = $bdd->query($request);

// Si on n'attend qu'un élément (par exemple: un film trouvé par ID), on utilise fetch :
$variableRecuperee = $response->fetch(PDO::FETCH_ASSOC);

PHP aide à dynamiser les pages web en injectant des données qui sont modifiables en fonction contexte.
Mais PHP est avant tout un langage de programmation orienté objet !
Nous découvrirons la POO avec PHP dans les prochains cours !

Categories
Apprentissage Formation HTML PHP Web

La programmation en PHP

Logo PHP

La programmation en PHP courante se fait comme en JS : des boucles, des conditions, des fonctions…
Allons voir de plus près !

Dans cet article, je vais faire beaucoup de liens avec JavaScript. En effet, la réflexion de programmation est toujours la même. Seule la syntaxe change d’un langage à l’autre…
Je ne détaillerais donc pas tout. Toutefois, vous pouvez trouver quelques explications sur les articles écrits lors de mon apprentissage du JS :
pour les variables et tableaux
pour les fonctions

Conditions

IF

La structure est la suivante :

if (condition) {
    echo "Condition vraie";
}
elseif (condition2) {
    echo "2ème condition vraie";
}
else {
    echo "Condition fausse";
}

Attention : PHP va considérer que tout ce qui n’est pas équivalent à 0 est vrai et tout ce qui l’est est faux.

Le résultat d’une condition va être interprétée par PHP comme une variable booléenne. Il va chercher à chaque fois à déterminer si la condition est vraie ou fausse.
Lorsque l’on utilise un double égal, PHP va essayer de trans-typer les variables pour les comparer entre elles. Il est alors nécessaire d’utiliser le triple égal (que l’on utilisera donc par défaut).

Avec if, tout ce qui se passe dans le bloc, sort du bloc et est alors récupérable.

AutreS manièreS d’écrire :

l’écriture ternaire
Tout comme en JS, on met l’action à effectuer avant la condition :

echo (condition) ? "si vrai" : "si faux" ;
// ou
$variable = (condition) ? "si vrai" : "si faux" ;

On l’utilisera peu car en intégrant les conditions dans du HTML, la lecture et l’écriture ne seront alors pas aisées.

le switch
Il est utilisé lorsqu’il y a plusieurs choix possibles (comme en JS).
On passe alors successivement par toutes les étapes.
S’il n’y a pas de break, la lecture des cas continue. S’il y a un break, cela permet de sortir de la condition.
Le résultat de chaque case est fixe car on vérifie une égalité simple.

OU / ET

L’écriture de ces opérateurs est la suivante :
OU => OR ou ||
ET => AND ou &&

Leur utilisation est la même qu’en JS.

Les tableaux

Array simple

Ils permettent de stocker dans une variable plusieurs données.
Il y a deux façons d’écrire un tableau :

$array = ["a", true, 42, $variable, ["autre tableau"]]; // date de PHP5.3 - 2009
$array = array(); // avant 2009 - ne pas s'en servir !

A noter : echo permet uniquement d’afficher des string ou variable simple. Par contre, il ne permet pas afficher un tableau.
Pour afficher les infos du tableau, on utilisera donc var_dump( )

Pour afficher une donnée du tableau, on utilise son index (se comporte comme en JS)

echo $array[0];
Tableau associatif

Au lieu d’utiliser les index, on associe une clé à une valeur. Le tableau simple devient alors un tableau associatif.
Pour associer la clé à la valeur, on va utiliser une grosse flèche : =>

$user = [
    "firstname" => "john",
    "lastname"  => "doe",
    "age"       => "54",
    "job"       => "developpeur"
];

Pour afficher une donnée du tableau associatif, on utilise alors sa clé :

echo $user["job"];

Les boucles

Les boucles dédiées aux tableaux

Pour pouvoir lire successivement les données dans un tableau, on va utiliser une boucle spécifique : foreach(argument) {}

foreach($tableau as $elementsDuTableau) {
    //instructions;
}

La boucle va alors scanner tous les éléments du tableau et les instructions porteront sur ces éléments.
Par exemple :

$nbPairs = [2, 4, 6, 8];

foreach($nbPairs as $nombre) {
    echo $nombre;
}

// écrira : 2 puis 4 puis 6 puis 8

$user = [
    "firstname" => "john",
    "lastname"  => "doe",
    "age"       => "54",
    "job"       => "developpeur"
];

foreach($user as $cle => $valeur) {
    echo "<li>" . $cle . " : " . $valeur . "</li>";
}

// écrira sous forme de liste chaque clé puis ":" puis chaque valeur associée

Conventions
Le singulier et le pluriel sont très importants lors de la désignation des variables :
– le singulier représente 1 seule chose
– le pluriel représente plusieurs choses (comme par exemple pour un tableau simple qui contient 2 tableaux)

Les boucles while

Les boucles while fonctionnent en PHP comme en JS…

$i = 0;

while($i < 10) {
    var_dump($i);
}

Dans l’exemple ci-dessus, la boucle est infinie.

En PHP, le navigateur ne se crashe pas car le serveur (Apache) va stopper l’exécution . En effet, le serveur limite les capacités de mémoire au client ce qui permet de ne pas le faire planter lorsqu’une boucle infinie est exécutée…
Il y a donc 2 limites par défaut qu’on peut paramétrer dans le fichier php.ini
– un temps d’exécution de 30sec max
– la mémoire allouée de 128Mo

Pour stopper une boucle infinie, il faut alors stopper le serveur et le relancer !

$i = 0;

while($i < 10) {
    var_dump($i);
    $i = $i + 1;
}

Il y a trois manières d’écrire l’incrémentation de la boucle :
$i = $i + 24
$i += 24
$i++ (rajoute uniquement 1) / On préférera cette notation sauf quand l’incrémentation est différente de 1.

L’ordre d’écriture de la boucle est important. En effet, selon le placement de l’incrémentation, le résultat obtenu ne sera pas le même.

$i = 0;

while($i < 10) {
    var_dump($i);
    $i++;
}

// on va de 0 à 9
$i = 0;

while($i < 10) {
    $i++;
    var_dump($i);
}

// on va de 1 à 10

La boucle while vérifie une vérité, il n’y a donc pas forcément besoin d’une incrémentation. On peut parcourir une liste par exemple.

Les boucles for

Les boucles for fonctionnent aussi en PHP comme en JS…

for($i = 0; $i < 10; $i++) {
    var_dump($i);
}

On va privilégier cette boucle.

Demander des nombres pairs

Pour vérifier qu’un nombre est pair, on va passer par un modulo pour être sûr du résultat. Et ce, quelque soit la valeur initiale de la variable testée.

for($i = 0; $i < 10; $i++) {
    if($i%2 === 0) {
        var_dump($i);
    }
    $i++;
}

Les fonctions

C’est un bloc contenant une série d’instructions qui pourra être rappelé lorsque l’on en a besoin. Cela évite de se répéter, évite les erreurs et que l’on peut l’utiliser à différents endroits.
Il permet lorsqu’il y a une modification à faire (lors de la maintenance par exemple) d’avoir un seul endroit à modifier (et évite de chercher de partout!).

Si à un moment on recopie au moins 2 fois la même chose, il faudra bien se poser la question si cela mérite ou non une variable ou une fonction.

Une fonction est un répertoire, une recette de cuisine. Tant qu’on ne l’exécute pas (on ne l’appelle pas), les instructions contenues à l’intérieur restent en « sommeil ».

Dès qu’on appelle une fonction, elle va alors juste exécuter les instructions.
Il faut donc obligatoirement demander à la fonction de retourner quelque chose pour qu’elle puisse afficher un résultat.

//déclaration
function sayHello() {
    //instructions
    $texte = "hello world";
    return $texte;
}

//appel
echo sayHello();

Attention, dans les instructions on va éviter de mettre des instructions d’affichage. Ce qui permet de décider par la suite ce que l’on veut faire du résultat de la fonction.

PORTÉE DES VARIABLES

En général, les variables déclarées dans un bloc de fonction ne sont utilisables que dans ce bloc. C’est ce que l’on appelle la portée des variables (ou scop). le scop global correspond à ce qui se trouve partout dans le code (hors d’un bloc).

Les variables sont utilisables de partout (même dans des blocs de conditions par exemple).

Dans les blocs de conditions ou de boucles, dès que l’on rentre dedans on peut récupérer toutes les variables après.

Les fonctions elles, n’ont pas accès au scop global. On ne peut donc pas utiliser de variables externes dans une fonction. Et inversement, les variables de la fonction ne peuvent pas être utilisées après l’exécution de la fonction.
C’est pour cette raison qu’on utilise return pour récupérer une variable de fonction dans le scop global.

Les paramètres (ou arguments)

Il est possible d’attribuer des paramètres (ou arguments) à une fonction.

function addition($nombre1, $nombre2) {
    $calcul = $nombre1 + $nombre2;
    return $calcul;
}

echo addition(42, 58);

Cet exemple permet de montrer que, quelque soit les paramètres que l’on va mettre dans la fonction, on aura un résultat.

Les fonctions récursives

Une fonction récursive est une fonction qui s’appelle elle-même.
Par exemple une fonction qui prend un nombre $nombre et additionne tous les nombres un par un jusqu’à ce nombre :

function somme($nombre) {
    // Si mon nombre est différent de zéro, je fais mon calcul :
    if ($nombre != 0) {
        // La somme est :
        // le nombre actuel +
        // la fonction somme() sur le nombre précédent
        // Qui elle même prend le nombre précédent...
        // Et lui ajoute la fonction somme sur le nombre encore précédent...
        // et ainsi de suite !
        $somme = $nombre + somme($nombre - 1);
        return $somme;
    }
    else {
        return $nombre;
    }
}

On vient de faire un tour rapide des fonctionnalités de PHP qui nous servirons ensuite lors de son utilisation pour les page web.
D’ailleurs, en parlant pages web, comment PHP permet de les dynamiser ?
C’est ce que j’ai découvert dans la suite des cours…

Categories
Apprentissage Formation HTML PHP Web

Langage PHP

Logo PHP

Après avoir vu comment gérer une base de données, nous apprenons un nouveau langage : PHP.
Plus connu sous son sigle PHP (Hypertext Preprocessor), est un langage de programmation qui est principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP.

Généralités

PHP va compiler et transformer les fichiers en HTML (ou autre) en petits exécutables qui ne sont pas lisibles tel quel. On va donc utiliser un serveur Web (Apache, Ngnix, etc.) pour les afficher.

Pour travailler en PHP, il faut donc :
– un exécutable PHP (outil en ligne de commande) qui permet de lire et compiler les requêtes,
– un serveur web (Apache par ex.) qui est capable de lire les fichiers compilés par PHP.

Les versions de PHP

Créé en 1994 par Rasmus Lerdorf, PHP a connu plusieurs rénovations. La plus utilisée est PHP5 qui a été mise en place en 2005.
Depuis il y a eu beaucoup de tentatives de rénovation de PHP. En 2005, la sortie de PHP6 n’a pas marché.

Il a fallu attendre 2015 et l’arrivée de PHP7 pour une remise à plat et une ré-écriture complète de tout le langage. Ce qui a permis notamment de doubler les performances. La contrainte fût une mise à jour massive et rapide des sites codés en PHP5… Depuis, ces mises à jour sont plus régulières et plus stables.

Pour en savoir plus, il suffit d’aller faire un tour sur Wikipédia ! 😉

Alors PHP ça ressemble à quoi ?

Rentrons dans le vif du sujet…
PHP peut s’intégrer partout dans du HTML et permet de travailler avec des variables directement dans la page.
Pour cela il suffit d’ouvrir une balise de code PHP :

<?php

?>

A noter que quand on écrit un fichier uniquement en PHP et qu’il n’y a rien d’autre, on n’est pas obligé de fermer la balise PHP ?> .

Et il est important de retenir que toutes les instructions finissent avec un point-virgule. Sinon, elles ne marchent pas !

Les variables
Déclaration

La déclaration se fait avec un dollar : $nomVariable
Pour le moment, on typera les variables uniquement grâce à la valeur qu’on leur donnera. Il faut bien retenir que PHP est très permissif dans le typage des variables.

Concaténation

On peut concaténer les variables entre elles avec un point :

$hello = "Hello";
$world = "World";

$result = $hello . $world;

Une autre façon de faire :

$stringAge = $stringAge . "ans"
//ou 
$stringAge .= "ans"

Il est aussi possible de faire des calculs :

$calcul = $number + 14; 
// les opérateurs possibles sont : + - / * %
Affichage

On va utiliser echo, puis on déclare derrière tout type de données (chiffres, caractères, variables, HTML).

Si on déclare plusieurs echo les uns à la suite des autres, toutes les valeurs seront mises les unes à côté des autres (chiffre et caractères indifféremment).
Il est possible d’ajouter du HTML entre, il suffit de bien ouvrir et fermer les balises PHP comme il faut.

Divers
  • var_dump( ) permet quant à lui de débugger.
    Il va afficher : à quel endroit il y a l’erreur, quel type de donnée est à l’origine de l’erreur et sa valeur.
  • ! quand on le met devant un booléen, il permet d’avoir l’inverse.

Hello World

Premiers essais, premières lignes de code… Affichons « Hello World » !

<?php
echo 'Hello World';
?>

Dans la suite des cours, nous verrons comment utiliser le langage PHP en programmation

Categories
Apprentissage CSS Découverte Formation HTML Javascript Web

Les bibliothèques logicielles

Les bibliothèques logicielles (libraries en anglais) sont là pour aider le développeur à coder un site plus rapidement. Les libraries sont donc des facilitateurs de travail. En effet, elles permettent en très peu de lignes de code d’ajouter de multiples fonctions lors du développement d’un site (ou application) web.

Je vais donc vous faire une liste (non exhaustive) des différentes bibliothèques logicielles – basées sur JavaScript – que j’ai vu lors de la formation.

jQuery

Une des bibliothèques logicielles les plus connues pour JavaScript est jQuery. Et son slogan illustre très bien ce qu’une library apporte au développeur :

write less, do more

jQuery

Ajouter jQuery consiste à charger un script supplémentaire dans le fichier HTML.
C’est un fichier qui a déjà plein de fonctions écrites et dont on pourra se servir pour nos propres scripts (on ajoute donc ce script avant le script de notre propre fichier JS).

Tout comme en JavaScript, jQuery permet de cibler des éléments du DOM pour leur ajouter une action (événement, modification du CSS, etc.). Il permet aussi d’ajouter des animations pré-construites permettant de dynamiser encore plus le site.

jQuery UI

Cette bibliothèque logicielle permet entre-autre de venir compléter jQuery.
En effet, cette library apporte des interactions avec l’utilisateur, des widgets et des effets pré-construits qui ciblent plus particulièrement les formulaires (mais peuvent aussi être utilisées autrement !).
Elle propose aussi des thèmes dont on peut s’inspirer.

Bootstrap

J’en ai déjà parlé, Boostrap est un framework CSS.
Et c’est aussi une library JavaScript.
Elle fonctionne avec les scripts jQuery et PoperJS et permet d’ajouter de nombreux components aux pages HTML.
Ces derniers sont dynamiques, ils utilisent des classes spéciales ; ce qui évite donc d’ajouter des scripts perso.

FancyBox

Cette bibliothèque permet de créer un zoom en cliquant sur une image ou une vidéo et de faire un déroulé d’images.
Elle fonctionne simplement : les images sur toute la page sont de basse qualité. Puis quand on clique dessus, un effet zoom se déclenche et ouvre une image de qualité supérieure.
Cette library permet d’optimiser les temps de chargement des pages contenant de nombreux fichiers multimédias.

Masonry

Cette bibliothèque permet, lorsqu’il y a des images de tailles différentes, de réorganiser les éléments pour les placer de la meilleure façon.
Cette library recalcule donc les tailles de toutes les images.

Isotope

C’est une bibliothèque qui permet de faire du tri visuel dans les éléments.
(Elle permet aussi d’ajouter une mise en page d’images.
)

Hammer.js

Cette bibliothèque permet de gérer des gestures tactiles : elle créée de nouveaux événements entièrement dédiés au tactile.

Autres librairies 

  • Animate CSS et Anime JS
    Ces deux bibliothèques logicielles permettent d’ajouter des animations très poussées sur un site.
  • Leaflet
    C’est une library qui permet d’ajouter de la cartographie sur un site.
  • PixiJS
    Cette bibliothèque permet de faire de la gestion 2D pur les images, les jeux. C’est un moteur de rendus qui utilise les canvas.
    (elle est assez complexe à prendre en main, je la recommande à des développeur plus aguerris !).
  • AOS (Animate On Scroll)
    Comme son acronyme le mentionne, cette library permet d’ajouter des animations lors d’un scroll.
  • Container player
    C’est une bibliothèque qui permet d’ajouter des vidéos en background.
  • Progressively
    Cette library permet tout simplement de charger progressivement les images.

Voici donc un petit tour d’horizon des différentes libraries que j’ai pu voir lors de ma formation.
Si vous en connaissez ou utilisez d’autres, venez les partager en commentaires ! 🙂

Categories
Apprentissage Formation HTML Javascript Web

La manipulation du DOM

La manipulation du DOM est le sujet de la dernière partie du cours de JavaScript… J’ai alors pu voir plus en détail comment cibler des éléments pour les rendre dynamiques (en leur ajoutant un événement) !

Et dans un premier temps, faisons connaissance avec le DOM…

Le DOM, qu’est ce que c’est ?

D’après Wikipedia, le Document Object Modele (DOM) ou « modèle d’objets de document » concerne la page Web qui sera affichée dans le navigateur.
Le DOM représente le document affiché par une structure en arbre, comportant des nœuds. La représentation suivante permet alors de mieux visualiser ce qu’est le DOM pour une page web :

représentation du DOM par Birger Eriksson
DOM Model by Birger Eriksson / CC BY-SA (https://creativecommons.org/licenses/by-sa/3.0)

Affichage des éléments du DOM

L’affichage des différents éléments peut se faire grâce aux class :
ciblage.className affichera le nom des class
ciblage.classList affichera un tableau. Cela permet alors d’utiliser  contains( ) qui va récupérer ce qui est contenu dans le tableau. Ce qui permettra ensuite de vérifier si oui ou non il possède déjà la class.
Par exemple :

<h1> </h1>
const titre = document.querySelector('h1');

titre.className = "text-right color-primary";
console.log(titre.className);
console.log(titre.classList);

if(titre.classList.contains("text-right")){
    console.log("oui");
} else {
    console.log("non);
}

Ajouter des éléments

Lors de la manipulation du DOM, il est aussi possible d’ajouter des éléments au fichier HTML. Pour cela on va principalement se servir des balises.

L’ajout va se faire en 2 temps :
– création de l’élément avec document.createElement( )
– ajout de l’élément comme enfant avec .appendChild( )

const nouveauTitre = document.createElement('h1');
const conteneur = document.getElementById('conteneur');
conteneur.appendChild(nouveauTitre);

Modifier un attribut

Il est aussi possible de modifier l’attribut d’une balise HTML directement depuis le fichier JS.
On utilisera le ciblage suivant :

setAttribute('attribute', 'value')

Par exemple, pour changer l’attribut défini sur une image voici le type de code que l’on pourrait alors trouver :

<img id="image" src="img/image.jpg" data-test="test">
const monImage = document.getElementById('image');
monImage.setAttribute('data-test', 'Nouveau texte alternatif');

Il est aussi possible de récupérer l’attribut d’une balise HTML en utilisant getAttribute('attribute')

Les événements

Pour dynamiser encore plus les pages HTML, on va ajouter des événements. On appelle événement une action dynamique qui s’effectue par exemple lorsque l’on clique avec la souris, lors de l’utilisation du clavier, etc.
Les événements peuvent ainsi se déclencher via la souris, le clavier, la fenêtre, le formulaire ou le document.

Ajouter un événement

Lorsque l’on souhaite ajouter un événement, on dit alors que l’on ajoute un événement d’écoute. En effet, la page va « écouter » ce que l’utilisateur fait avec .addEventListener.
Pour cela, on va indiquer quel événement doit être « écouté » (un clic de souris, un scroll, etc.) et on indiquera ensuite dans une fonction quelle sera l’action à exécuter lors de cet événement.

maVariable.addEventListener('click', maFonction);

Pour faciliter la lecture, on va privilégier l’écriture de la fonction en fonction fléchée. Ce choix est d’autant plus pertinent que la fonction n’inclue aucun paramètre et qu’elle ne sera pas forcément utilisée ailleurs.

maVariable.addEventListener('click', () => {
    //instructions de la fonction
})

Il est enfin possible de supprimer l’écoute d’un événement avec .removeEventListener. Dans ce cas, il faudra donc bien penser à externaliser la fonction !

maVariable.removeEventListener('click', maFonction);
Les différents événements

Il existe de nombreux événements. Je vous liste ici les principaux événements que l’on peut ajouter sur une page HTML :

1. Souris
click
mouseenter : la souris entre dans l’élément
mouseleave : la souris sort de l’élément

2. Clavier
keydown : lorsque l’utilisateur appuie sur une touche
keyup : lorsque l’utilisateur relâche la touche
Pour les événements clavier, chaque touche du clavier doit porter un numéro. Pour retrouver le numéro de la touche, il faut d’abord le chercher avec un événement d’écoute :

document.addEventListener('keydown', clavier);

function clavier(e) {
    console.log(e.which);
}

Il faut aussi bien se souvenir que l’utilisateur ne pense pas à se servir de son clavier quand il va sur un site. Il faut donc bien le mentionner pour qu’il utilise son clavier !

3. Fenêtre
L’écoute de l’événement doit donc cibler la fenêtre (window)
scroll : apparition d’un élément lors du scroll par exemple

window.addEventListener('scroll', maFonction);

resize : l’élément se réadapte par rapport à la taille de l’écran

4. Formulaire
change : dédié aux input, select ou textarea, il est relié à une value. Cet événement est pris en compte uniquement lorsque l’utilisateur change de champs (dès qu’on est plus focus sur ce champs)
submit : relié à la balise <form> (donc au formulaire dans son ensemble). Il se déclenche au moment où l’on envoie le formulaire.

ciblage.addEventListener('submit', e => {
    e.preventDefault( );
})

5. Document
DOM Content Loaded : s’exécute quand le document HTML est chargé et analysé (et pas lorsque les images et le CSS le sont).
load : s’exécute quand la page (ou ce qu’on a visé) est totalement chargée. On peut aussi le mettre sur la fenêtre pour vérifier que tout est bien chargé.

La gestion du temps

Lorsque l’on ajoute des événements sur une page HTML, il peut aussi être nécessaire de gérer le temps de ces événements.
Pour cela, il existe différentes solutions.

setTimeout

Cette méthode est équivalente à un délai.
L’inconvénient de cette méthode est qu’elle ne permet pas de faire un affichage/non affichage continuel car cela ferait alors une énorme boucle.

setTimeout(maFonction, temps);

Attention, le temps est alors exprimé en millisecondes (ms).

setInterval

Cette méthode permet les répétitions jusqu’à ce qu’on lui dise d’arrêter (c’est une boucle). Le temps est aussi exprimé en ms.

const repet = setInterval(maFonction, 1000);

Pour arrêter la boucle, on utilise alors clearInterval()

clearInterval(repet);
Date

Cette classe permet de récupérer des informations sur les dates, des informations générales sur le jour.

const maintenant = new Date();

maintenant.getDay(); // affiche le numéro du jour (Dimanche = 0)
maintenant.getDate(); // affiche le jour
maintenant.getMonth(); // affiche le numéro du mois (Janvier = 0)
maintenant.getFullYear(); // affiche toute l'année (2020 par exemple)

Mathématiques

Il existe enfin une fonctionnalité en JavaScript qui permet des opérations mathématiques : Math (il est défini comme un objet).

Math.round() : créé un arrondi du chiffre.
Math.floor() : donne un arrondi du chiffre, à l’entier inférieur.
Math.ceil() : fait un arrondi du chiffre, à l’entier supérieur.
variable.toFixed(*digits*) : détermine le nombre de chiffre après la virgule (digits) pour arrondir un chiffre.

const nombre = 4.328;
nombre.toFixed(2); // affiche 4.33

Math.random() donne un nombre aléatoirement entre 0 et 1.

Je vous mets ci-dessous une écriture qui permet alors d’être au plus juste par rapport aux probabilités :

Math.floor(Math.random() * (max + 1))

max est la valeur maximale à atteindre, auquel on ajoute 1 car sinon elle ne sera jamais obtenue.
Par exemple, si on a un max de 10 et un nombre aléatoire de 0.999999, Math.floor(0.99999) donnerai 9 (et on n’aurait jamais 10).

Math.isNaN() : ce n’est pas un nombre, c’est un booléen.
Number(nombre) : permet de convertir une valeur en numérique.
Math.min() : donne le minimum parmi les valeurs et Math.max() donne le maxi.
Attention : si on a un tableau de valeurs, il faudra le convertir en liste en utilisant bien l’opérateur de décomposition « .. » .

const numbers = [1, 2, 3, 4];
Math.max(..numbers); //donnera 4
Math.min(..numbers); //donnera 1

Les cours de JavaScript suivis pendant ma formation prennent donc fin. Ils m’ont permis de découvrir comment dynamiser une page HTML. Maintenant, il va me falloir faire encore des exercices supplémentaires pour mieux maîtriser ce langage… Et je compte bien le faire en mettant au point mon portfolio (c’est le premier projet que je me suis fixé ! ).

[spoiler] La suite portera sur les librairies… 🙂

Categories
Apprentissage Formation HTML Javascript Web

Interactions entre JavaScript et HTML

Logo JavaScript

Pour continuer l’apprentissage de JavaScript, nous allons voir les interactions entre JavaScript et HTML.

Pour rappel, une page HTML est un document contenant du texte et des balises structurantes. En JavaScript, il est possible de manipuler ce document grace aux interactions entre les fichiers JS et HTML.

Manipulation du document HTML

Depuis le fichier JavaScript, il est possible d’ajouter du texte directement sur la page (document) HTML. Pour cela, on utilisera la propriété .write :

document.write('Text');

document permet de cibler le document (page HTML) dans son ensemble.

Depuis le fichier JS, on peut aussi modifier ou récupérer du texte avec la propriété .innerText :

document.innerText; //permet de récupérer de l'information
document.innerText = 'Un texte'; //permet de modifier l'information

Il est aussi possible de manipuler le HTML (et ses balises) avec la propriété .innerHTML. Cela permet de rajouter, en plus du texte, les balises que l’on veut.

Toutes ces manipulations se font directement sur le document.
Il est toutefois possible de modifier uniquement certaines parties de ce document. Pour cela, on va cibler spécifiquement ses éléments.

Ciblage par id

L’id est unique dans une page HTML. Il est donc facile de le cibler pour modifier le contenu de la balise identifiée. Pour cela, on utilisera la propriété getElementById( ) :

<p id="txt"> </p>
document.getElementById('txt').innerText = 'Texte à insérer';

Dans l’exemple ci-dessus, on a ciblé la balise contenant l’id ‘txt’ puis on a ajouté (ou modifié) du texte à l’intérieur.

Lorsque l’on code, il est possible que l’on répète plusieurs fois le même ciblage. Dans ce cas il est possible de créer une variable const. Cela permet de simplifier le code, de le rendre plus lisible. De plus, si l’id change, il sera plus facile de le modifier (on n’aura pas à parcourir toutes les lignes de code pour le changer !) :

const txt = document.getElementById('txt');
Ciblage par class

Le ciblage peut se faire en fonction des class ajoutées aux balises.

<p class="rouge"> </p>
document.getElementsByClassName('rouge');

Dans l’exemple ci-dessus, la class ‘rouge’ a été ciblée.
Attention à l’écriture : il ne faut pas oublier le ‘s’ après ‘Element’. En effet, la console considère le résultat de la recherche par class comme un tableau.
Il faudra aussi bien penser à indiquer l’indice visé entre crochets après le getElementsByClassName( ) .

Ciblage par balise

Le ciblage peut se faire en fonction des balises.

const NumDeux = document.getElementsByTagName('p');

NumDeux[1].innerText = 'Nouveau Texte';

Tout comme pour le ciblage par class, le résultat de la recherche par balise est considérée comme un tableau.
Dans l’exemple ci-dessus, le texte sera donc ajouté au niveau de la 2ème balise <p> du document.

Autres ciblages

Il est possible de cibler plus généralement un élément. On utilisera querySelector :

querySelector('element') // ciblera le 1er élément désigné
querySelectorAll('element') // ciblera tous les éléments désignés (=> tableau)

A noter que l’écriture de l’élément se fait comme sur le fichier CSS.
Ces ciblages sont à utiliser de préférence lorsqu’il n’y a pas la possibilité d’utiliser les autres ciblages.

Modification d’une source

Avec JavaScript, il est possible de modifier la source d’une image, d’un lien, etc.
Pour cela, on va utiliser la propriété .src pour une image, .href pour un lien, etc.
Par exemple, pour modifier la source d’une image :

<img id="IdImg" src="">
<p> Texte </p>
document.getElementById('IdImg').src = 'image.jpg';
Modification du CSS

JavaScript interprète le CSS comme un objet (alors qu’il considère le HTML comme un tableau). Lorsque l’on modifie le CSS en JS, on ne modifie pas le fichier CSS source. On vient juste inscrire les nouvelles règles de style dans le HTML (les modifications seront visibles uniquement depuis l’inspecteur !).
Il faut alors écrire les propriétés CSS en camelCase.
Par exemple :

document.getElementsByClassName('rouge')[1].style.backgroundColor = 'blue';

Il est possible d’écrire plusieurs propriétés CSS (s’il y a de nombreuses modifications, il sera préférable de passer directement par le fichier CSS !) :

document.getElementsByClassName('rouge')[0].style.cssText = 'font-family: Arial, sans-serif ; color: red ;' ;

Voici un récapitulatif des interactions de base qu’il est possible d’avoir entre les fichiers JavaScript et HTML/CSS.
La formation continuera sur des fonctions plus avancées en JavaScript…

Categories
Apprentissage Formation HTML Javascript Web

On reparle de JavaScript…

Logo JavaScript

Après avoir revu les bases de HTML, CSS et découvert Bootstrap, les cours se poursuivent avec JavaScript !
C’est l’occasion de revoir les bases que j’avais déjà abordé avec Openclassrooms… Et de découvrir comment JavaScript fonctionne avec les pages web.

Comment JavaScript fonctionne ?

Pour intégrer du JavaScript dans les pages web, il faut l’ajouter au fichier HTML.
JS est un script que l’on peut ajouter de trois façons différentes.

  • Soit directement sur un élément.
    Par ex:
<button onclick = 'codeJS'> OK </button>

ici, onclick indique que le code JS sera actif uniquement lorsqu’il y aura un clic que le bouton.

  • Soit à l’aide des balises <script> </script> que l’on ajoute juste avant la fermeture du <body> .
    Ici deux cas de figure se présentent :

– Soit en écrivant complètement le code JS dans le fichier HTML

<script> CodeJS à écrire </script>

– Soit en externalisant le fichier

<script scr = "js/scripts.js"> </script>

C’est cette dernière méthode que nous favoriserons.

Tous les scripts s’exécutent dans l’ordre dans lesquels on les a écrits. La seule façon d’afficher un message à l’infini (sans recharger la page) est de lier directement le script à un élément.
En JavaScript, on écrit toujours avec des guillemets simples. Cela évite des confusions si le code est écrit directement dans la page html (le code ajouté serait alors considéré comme un attribut !).

Message d’alerte

Nous l’avons déjà vu, il est possible d’ajouter des messages d’alerte qui s’affichent sur la page. Ces derniers sont utilisés uniquement lorsque l’on met au point une page. Ils sont ensuite à supprimer avant de mettre en production le code !

window.alert('...');

window sert à cibler la fenêtre,
.alert donne l’action à réaliser, c’est à dire afficher un message dans une fenêtre « popup ». On ajoute ensuite le contenu du message (ou de la variable) à récupérer.
Le point virgule permet de passer à l’instruction suivante.

Attention : le message d’alerte est spécifique à window. Il est donc possible d’écrire le message d’alerte sans cibler la fenêtre :

alert('...');
La console

Lors de la rédaction de scripts pour les pages HTML, il est plus facile d’utiliser la console qui est disponible dans le navigateur pour vérifier leurs exécutions. Pour mémoire, la console est disponible lorsque l’on utilise l’inspecteur du navigateur (son raccourci clavier est la touche F12).

On peut voir apparaître différents types de messages :
– ceux qu’on s’envoie à soi même
– les warning
– et les erreurs

La communication avec la console se fait directement en intégrant dans le code JS :

console.log('test');   // affiche un texte
console.log(test);   // affiche une variable

Les principales erreurs rencontrées sont :
ReferenceError => la variable n’existe pas, il y a une erreur de référence.
SyntaxError => il y a une erreur de syntaxe dans le code JS, quelque chose a mal été noté.

Bien qu’on utilise la plupart du temps console.log pour vérifier notre code, il est aussi possible de simuler des problèmes.
On peut alors utiliser différentes lignes de code dans le fichier JavaScript :

console.info('...');
console.warn('...');   // avertissement qu’il serait mieux de corriger
console.error('...');   // erreur réelle (non simulée), la suite du code ne sera pas lue
Les variables

Petit rappel sur les variables ! Elles permettent de stocker des informations. Une variable est une définition à un instant T.
Il y a 3 façons de déclarer les variables :
– avant ES6, on utilisait var
– depuis ES6, on utilise 2 types de déclaration :
° const pour déclarer une variable uniquement disponible en lecture, qui ne sera jamais modifiée. C’est l’abréviation de constante.
° let pour une variable qui est amenée à être modifiée.

La déclaration des variables se fait uniquement avec des caractères alphanumériques (majuscules ou minuscules), le underscore et le tiret. On ne met pas de caractères spéciaux, ni de chiffre seul et on ne
commence jamais avec un chiffre.
Caractères autorisés : a -> z A -> Z 0 -> 9 _ et –

let numero1 = 'un';   // variable qui sera modifiée
const numero2 = 'deux';   // constante 'string'
const vrai = true;   // booleen
const numeroTrois = 3;   // constante numérique

A noter : JavaScript est « Case Sensitive ». C’est à dire que c’est un langage sensible à la casse. Il est donc impératif de faire attention à l’écriture des variables !

Conventions de nommage :
camelCase : on met une majuscule à chaque début de mot (sauf pour le premier) et tout est attaché
snake_case : on ajoute un underscore entre chaque mot (sans majuscules)
kebab-case : on met des tirets entre les mots (sans majuscules)

Enfin, on peut définir une variable let en début de document et lui attribuer une valeur plus tard dans le code.

let numero1;
//
// déroulé du code
//
numéro1 = 'un';
// suite du code et utilisation de la variable
La concaténation en JavaScript

La définition sur Wikipédia nous indique que la concaténation désigne l’action de mettre bout à bout au moins deux chaines de caractères.
Il y a différentes façons de concaténer plusieurs valeurs entre-elles :
– Le plus simple est d’utiliser le + car il permet d’associer les valeurs. Attention : si les variables ne sont que des chiffres, alors c’est une addition qui s’effectuera.
– On peut aussi utiliser une virgule. Dans ce cas, les chiffres s’ajoutent les uns à côté des autres. La virgule créé alors un espace entre les deux.
– Toutefois, on privilégiera la méthode mise en place depuis ES6 qui permet d’écrire à la fois du texte et des variables. Tout est écrit entre des ‘faux-accents’ : `` , et les variables sont écrites avec ${ } (tout le
reste est alors considéré comme du texte).

console.log(variable1 + variable2);   // variable1variable2
console.log(variable1 , variable2);   // variable1 variable2
console.log(`${variable1} + ${variable2}`);   // variable1 + variable2
Les tableaux (Array)

Les tableaux sont des listes qui permettent de stocker des valeurs. L’écriture des tableaux se fait avec des crochets :

const slides = ['image1.png', 'image2.jpg', 'image3.png'];
Naviguer dans un tableau

Pour appeler une valeur dans un tableau, on utilise son index. IMPORTANT : les index d’un tableau commencent toujours par 0 !

const slides = ['image1.png', 'image2.jpg', 'image3.png'];

console.log(slides[1]);   // affichera image2.jpg
Taille d’un tableau

Lorsque l’on ne connait pas la taille d’un tableau, il est possible de l’afficher. On utilise alors .length. On peut alors utiliser cette propriété pour afficher un élément d’un tableau.

const slides = ['image1.png', 'image2.jpg', 'image3.png'];

console.log(slides.length);   // affichera 3
console.log(slides[slides.length - 1]);   // affichera image3.png
Manipulation de tableau

Il est aussi possible de modifier un tableau pour :

  • ajouter un élément à la fin d’un tableau avec .push
nomVariable.push('nouvelleValeur')
  • modifier la valeur d’un élément du tableau grâce à son index.
table[0] = 'nouvelleValeur'    // modifie l'élément situé à l'index 0
  • supprimer ou ajouter un élément à l’endroit que l’on souhaite avec .slice . Il faut alors ajouter 3 paramètres :
    – l’index où se situer pour commencer
    – le nombre d’index à supprimer (si on souhaite ajouter un élément cette valeur sera égale à zéro)
    – la nouvelle valeur à ajouter
array.splice(index, combien);   // suppression
array.splice(index, combien, valeur);   // ajout
Les objets (ou tableaux d’objets)

Les objets sont stockés sous forme de tableaux et sont définis par leurs déférentes clés. L’écriture d’objets se fait avec des accolades :

const etudiant = {prenom: 'Jean', nom: 'Dupont', note:'15'};
Naviguer dans un tableau d’objet

Pour parcourir un tableau d’objet, on utilise un point (index textuel).

const etudiant = {prenom: 'Jean', nom: 'Dupont', note:'15'};

console.log(etudiant.prenom);   // affichera Jean
Autres généralités sur les tableaux

Un tableau peut contenir différents objets. Pour améliorer la lisibilité, il est alors possible d’écrire les tableaux et les objets sur plusieurs lignes.

const etudiant1 = {prenom: 'Jean', nom: 'Dupont', note:'15'};
const etudiant2 = {prenom: 'Piere', nom: 'Dupond', note:'16'};
// const etudiants = [etudiant1, etudiant2];
const etudiants = [
   {
      prenom: 'Jean',
      nom: 'Dupont',
      note:'15'
   }, {
      prenom: 'Piere',
      nom: 'Dupond',
      note:'16'
   }
];

console.log(etudiants);   // affichera le détail des 2 objets etudiant1 et etudiant2

Il est aussi possible qu’un objet ait pour valeur des tableaux :

const frigo = {
   fruit: ["banane", "mangue", "cerise"],
   legume: ["courgette", "tomate", "poireau"]
};

console.log(frigo.fruit[0]);   // affichera banane

C’est donc une mise à plat (et un peu d’approfondissement) que j’ai fait lors de mon cours.
La suite est à venir, avec beaucoup plus d’interaction avec la page HTML…

Categories
Apprentissage CSS Formation Framework HTML Web

Bootstrap

Qu’est ce que c’est ?

Logo Bootstrap

Bootstrap est un Framework CSS.
Les frameworks sont des règles préétablies dans lesquelles on peut venir piocher. Ils permettent de simplifier la reprise du code par quelqu’un d’autre et de gagner du temps.

La base

Bootstrap est basé sur un principe de grilles.
On ne réfléchit plus en termes d’espacement, mais de colonnes de la grille à utiliser.
Bootstrap est basé sur 12 colonnes (car il y a de nombreux multiples possibles). Et entre les colonnes, il y a ce qu’on appelle des gouttières (ce sont les espacements entre les colonnes).

Par exemple, pour placer un élément sur toute la largeur de la page, on lui dit d’occuper 12 colonnes. Pour en placer 2, il faudra indiquer à chaque élément d’occuper 6 colonnes (ou en fonction de la disposition, par exemple 25% /75% deviendront 4 colonnes / 8 colonnes).

Les composants

Dans Bootstrap, il y a des composants : ce sont des outils CSS et JavaScript qui permettent d’ajouter directement dans la page de petits éléments (barres de recherche, pop up stylisé, etc.) déjà fonctionnels. L’inconvénient, c’est qu’on se retrouve rapidement avec les mêmes composants de partout (tous les sites se ressemblent alors !)
Il faut donc modifier le CSS pour styliser chaque élément à sa façon.

L’installation

Bootstrap est un fichier de style à charger.
Le téléchargement peut se faire sur le site de Bootstrap puis [Download].

Une autre méthode, plus simple, permet de ne pas télécharger Bootstrap (et donc d’alléger la page !) : ajouter directement au fichier HTML un lien vers le fichier Boostrap.
Toujours sur le site de Bootstrap, cliquez sur [Get Started] puis dans la section [Quick Start], récupérez le lien CSS à mettre dans le head du fichier HTML :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Il faut bien mettre ce lien avant celui de notre propre fichier de style CSS. En effet, nos règles CSS sont déclarées en dernier, elles seront donc prioritaires. Ce qui permettra de contrer celles de Bootstrap.

Comment fonctionne Bootstrap ?

Bootstrap permet de faire de la mise en page directement dans le fichier HTML (et avec très peu de règles CSS à ajouter).

Il y a des class prédéfinies que l’on peut ajouter au HTML. Elles permettent d’intégrer automatiquement des fonctionnalités aux balises ciblées.
On rajoute donc des class seulement s’il y a des modifications a apporter sur la balise.
La règle de nommage des class est : .nomdelaregle-taille-valeur

Bon à savoir : par défaut, tous les éléments Bootstrap ont des padding de 15px (les gouttières sont alors de 30px).

Breakpoints

Bootstrap intègre des breakpoints, permettant de rendre la page responsive automatiquement :
xs ou xtrasmall (< 576px) : .col-
Attention, cela correspond au mobile-first. Il sera donc la valeur par défaut (depuis la version 4 de Bootstrap)
sm ou small (>=576px) : .col-sm-
md ou medium (>=768px) : .col-md-
lg ou large (>=992px) : .col-lg-
xl ou xtralarge (>=1200px) : .col-xl-

Containers

Bootstrap est composé de deux containers généraux :
container fluid qui occupe toute la page

<div class="container-fluid"> </div>

container qui occupe la page avec un maximum de 1170px

<div class="container"> </div>

On utilise ensuite la notation des colonnes sur des éléments suivants.

Flex

Bootstrap est basé sur du flex. Il ne faut donc pas oublier de donner comme règle aux parents la class row (fait devenir flex sans prendre en compte l’espacement des cotés).
L’architecture des balises sera alors :
– grand parent => container
– parent => row
– enfant => col
Attention : il ne faut pas d’enfant row après un parent row.

Comme Bootstrap applique le style flex à la page, les class permettent d’appliquer toutes les règles du flex (elles sont toutes listées sur le site Bootstrap)

Alignement horizontal
justify-content-start
justify-content-center
justify-content-end

Le nomage se fait de la façon suivante :
.{propriété}-{breackpoint}-{valeur}
Par exemple :

<div class="row justify-content-start justify-content-lg-center"> </div>
Alignement vertical
 align-items-start
 align-items-center
 align-items-end

Par exemple :

<div class="row align-items-start align-items-lg-center"> </div>
Ordre les éléments
 order-2
 order-md-1

Ce qui permet de changer d’ordre et de le faire aussi en fonction de la taille de l’écran.

Saut de colonne

offset-nb : permet de placer un nombre (nb) de colonnes vides avant mon élément
offset-taille-nb : idem, en fonction de la taille de l’écran

Cela permet de faciliter la mise en page, car les calculs d’espacement se font tout seuls. cet outil gère automatiquement les espaces que doit avoir chaque élément et l’espace entre eux.

Remplacement du visible

C’est l’équivalent du display. il est noté d.

d-none : l’élément est caché
d-block : il est affiché

L’élément peut s’afficher ou se cacher en fonction de la taille de l’écran : d-lg-none ou d-lg-block

Espacement (padding / margin)

Le nommage se fait de la façon suivante :
.{propriété}{coté}-{breackpoint}-{taille}

Par exemple :

<div class="pr-md-0"> </div>

– propriété :
m margin
p padding

– coté :
a toutes les directions
t en haut
r à droite
l à gauche
b en bas
x horizontal (gauche et droite)
y vertical (haut et bas)

– breakpoint (cf. plus haut)
(rien) à partir de la taille mobile
sm
md
lg
xl

– taille
0
1 (0.25rem)
2 (0.5rem)
3 (1rem)
4 (1.5rem)
5 (3rem)

A savoir : il y a un gros gap entre 4 et 5. Il est donc possible de rajouter des règles CSS.
Pour rappel : l’unité de mesure rem est fonction de la taille du body.


Règles générales

Sans écrire une seule règle de CSS, on a déjà une mise en page en blocs avec des tailles différentes, etc.

Toutes les règles de mise en forme sont sur le site de Bootstrap.


Divers

Il est possible de modifier graphiquement les titres.
Il existe des classes qui permettent qu’un titre ressemble à un autre titre :

<h1 class="h2"> titre h1 qui ressemble à des h2 </h1>
<h2 class="h4"> titre h2 qui ressemble à des h4 </h2>
Categories
Apprentissage CSS Formation HTML Web

Un peu de « Responsive »

Le Responsive, qu’est ce que c’est ?

Aujourd’hui, nous utilisons beaucoup plus nos smartphones que nos ordinateurs. Nous nous sommes donc rendu compte que l’affichage sur ces 2 types d’écrans ne pouvaient pas être le même.

To be Responsive, or not to be ?

Le principe du Responsive est donc de créer du contenu qui va s’adapter à la taille de l’écran de l’utilisateur (il est possible alors de le faire varier un peu).
La logique, depuis ces dernières années, est de créer les pages en « mobile first ». C’est à dire les développer pour un affichage sur smartphones. Puis d’adapter le contenu pour les ordinateurs.
De plus, il faut garder à l’esprit que dans 94% des cas on utilise son mobile en mode portrait !

Comment ça marche ?

Dans un premier temps, et ce depuis HTML5, pour que les règles « Responsive » (ou Media Query) soient prises en compte, il faut obligatoirement ajouter dans le <head> de la page la meta suivante :

<meta name=”viewport” content=”width=device-width, initial-scale=1”/>

Dans un deuxième temps, dans le fichier CSS, on écrit toutes nos règles pour un affichage sur mobile. Puis à la fin on vient rajouter les nouvelles règles qui seront uniquement valables pour les autres tailles d’écran.

@media (taille écran) [
   selecteur {
      propriété1: valeur;
      ...
   }
   ...
}

On indiquera uniquement les propriétés qui sont modifiées par taille d’écran.
Les tailles d’écran (ou breakpoint) sont les suivantes :

Media Queries (tailles d’écrans)

Il est possible de cumuler les règles de « média query ». On a alors des créneaux de tailles d’écran. Et les règles ne s’appliqueront alors que pour ce créneau.
Par exemple :

@media (min-width:768px) and (max-width:960px) {
    // règles à appliquer uniquement pour les écrans ayant un largeur entre 768 et 960px
}

A noter qu’il est préférable de mettre les règles « Responsive » à partir des breackpoint (min-width), comme ça elles s’appliqueront pour toutes les tailles à partir de celle définie.

Pour aller un peu plus loin

Ratio de taille d’écran

On peut aussi mettre des règles en fonction d’un ratio de pixels de la taille d’écran :

@media (-webkit-min-device-pixel-ratio: 2) {
   // règles à appliquer
}

Par exemple pour les images, lorsque l’on augmente la taille de l’écran, la qualité de l’image peut devenir meilleure (haute def.)

Impression

Pour paramétrer précisément des impressions, on peut utiliser :

@media print { 
   // règles spécifiques pour l'impression
}

C’est dans le cas où l’utilisateur imprime la page (billetterie, facturation, devis, etc.). On peut indiquer des valeurs par défaut pour l’impression : noir & blanc pour diminuer l’utilisation des cartouches, imprimer uniquement ce qui est nécessaire, etc.

Categories
Apprentissage CSS Formation HTML Web

Animation des pages

Animation, vous avez dit animation ?

Animation ? Vous avez dit animation ?
Et oui, avec le CSS, il est possible d’animer des pages en donnant aux éléments du mouvement.

Qu’est ce qu’une animation en CSS ?

Il existe 3 concepts d’animations en CSS :

  • les transitions qui permettent le passage d’un état A à un état B. Elles nécessitent alors une action de l’utilisateur et se déclenchent seulement après,
  • les animations pour lesquelles l’action de l’utilisateur n’est pas nécessaire pour permettre le passage d’un état A à un état B,
  • et les transformations qui modifient l’aspect d’un élément.

A noter qu’il est aussi possible de mixer ces 3 concepts.

Pour les animations et les transitions, le passage d’un état A vers un état B peut donc se faire de 4 façons différentes :

  • linear : permet d’aller de façon constante de A vers B
  • ease-in : l’animation va lentement au début puis s’accélère dans le temps
  • ease-out : permet d’aller rapidement au début puis de ralentir
  • ease-in-out : l’animation va lentement puis rapidement puis ralenti.

Les transitions

Les transitions permettent de passer de manière fluide d’un état à un autre.
En CSS, une transition regroupe 4 paramètres :

transition-property : {propriété} ;
transition-duration : {valeur} ;
transition-timing-function : {valeur} ;
transition-delay : {valeur} ;

Dans le fichier CSS, il est possible d’écrire les propriétés les unes à la suite des autres. Ou bien en une seule ligne :

transition : {transition-property} {transition-duration} {transition-timing-function} {transition-delay}

La transition se met dans l’élément initial. Ce qui permet ensuite d’avoir la même façon d’être à l’aller et au retour.
Par exemple :

.mydiv {
      opacity : 0.25 ;
      color : #FFFFFF ;
      transition : opacity 0.5s ease-in 1s, color 1s 0.5s ;
}

.mydiv :hover {
      opacity : 1 ;
      color : #BBBBBB ;
}

Les animations

On considère une animation comme étant un passage d’un état à un autre sans intervention de l’utilisateur.
Elles doivent alors être déclarées avant d’être utilisées.

Il y a deux types de déclarations :

  • Lorsque l’on passe de l’état A à l’état B directement
from {
      // propriétés
}

to {
    // propriétés
}
  • Ou bien, lorsque l’on passe par plusieurs étapes entre les 2 états. On indique alors un pourcentage de temps écoulé avant que l’animation ne se lance (va de 0 à 100%)
0% {
      // propriétés
}
35% {
      // propriétés
}
100% {
      // propriétés
}

Les différentes propriétés que l’on peut appliquer à une animation sont les suivantes :

animation-name : {monAnimation};
animation-duration : {temps};
animation-delay : {temps};
animation-iteration-count : {nombre};
animation-direction : {valeur}; 
animation-mode : {valeur};
  • animation-name : permet de récupérer l’animation déclarée auparavant
  • animation-duration : indique combien de temps dure l’animation (en secondes)
  • animation-delay : c’est le délai avant le lancement de l’animation (en secondes)
  • animation-iteration-count : indique combien de fois l’animation s’exécute (soit un nombre soit à l’infini (infinite))
  • animation-direction : défini comment se passe l’animation.

Ses valeurs sont alors :
    normal   : va de 0 à 100% puis recommence à l’infini
reverse    : va de 100 à 0% puis recommence à l’infini
alternate : s’anime dans les 2 sens (effet yoyo)
alternate-reverse

  • animation-mode : détermine comment l’animation se comporte

Ses valeurs sont alors :
    none   : arrête l’animation, ne respecte plus ses règles et reprend les règles de l’élément
backwards : va reprendre les règles définies à 0%
forwards : va reprendre les règles définies à 100%
both  : va reprendre les règles du moment où l’animation s’est arrêtée

Dans le fichier CSS, on peut aussi écrire une animation sur une seule ligne :

animation : {animation-name} {animation-duration} {animation-delay} {animation-iteration-count} {animation- direction} {animation- mode}

Les transformations

Les transformations modifient l’état d’un élément. Il existe différents types de transformations.

L’élément peut se déplacer dans l’espace (en pixel, les valeurs peuvent être négatives) en utilisant la propriété translate.

transform : translate(x,y); 
            translateX(valeur);
            translateY(valeur) ;

On peut aussi changer l’échelle de l’élément (qui est par défaut de 1) en le faisant soit grandir, soit rapetisser. On utilisera alors la propriété scale.

transform : scale(x,y) ;    
            scaleX(valeur) ;
            scaleY(valeur) ;

Il est aussi possible de faire faire des rotations à un élément (selon l’axe des X, des Y ou des Z). On utilisera la propriété rotate (dont la valeur est en degrés).

transform : rotateX(valeur) ;
            rotateY(valeur) ;
            rotateZ(valeur) ;  

A noter que 360° correspond à un tour complet.

Enfin, on pourra déformer un élément sur son axe des X ou des Y en utilisant la propriété skew (sa valeur est en degrés).

transform : skew(valeur) ;
            skewX(valeur) ;
            skewY(valeur) ;         

Il y a la possibilité de mettre plusieurs transformations sur un même élément. Il faudra alors mettre un espace entre chaque.
Par exemple:

transform : scale(2) translate(20px) ;

Toutes les transformations se font par rapport au point d’origine de l’élément.
Il est alors possible de changer ce point en utilisant : transform-origin .