journal-promo-ada

Avril 2020

Mardi 1er

J’ai continué tout doucement la refonte de Codevores. Difficile d’y voir clair dans tous le code produit avant. J’ai l’impression que repartir de 0 aurait été plus simple.

Cet après midi reprise du cours Animation sur OpenClassRoom. j’ai appris:

Il faut optimiser les performances du navigateurs pour les animations CSS :

• Il faut essayer de garder un nombre idéal de 60 FPS (Frame per seconds/Images par seconde).
• FPS = une seconde / durée de calcul.
• Pour passer du code html/css à une page web le navigateur fait plusieurs étapes :
  • Style : interprète le code pour comprendre la structure du DOM et déterminer quelles règles s’appliquent à quels élèments.
  • Layout : détermine la taille des élèments et où les placer.
  • Paint : transforme les élèments en pixels en appliquant le style et le placement des élèments
  • Composition : combine tous les élèments pour composer la page.
• Pour des animations fluides il faut que le navigateur calcul le moins possible. Donc passer uniquement par composition. (pas utilisation de width ni de background color mais par transform et opacity).
• quand le mouvement “rouille” on parle de “jank”.

Créer des animations fluides avec transform :

• on peut déplacer des éléments avec les fonctions translate :
  • translate()
  • translateX()
  • translateY()
  • translate3d()
• on peut agrandir avec les fonctions scale :
  • scale()
  • scaleX()
  • scaleY()
  • scale3d()
• on peut les faire pivoter grâce aux fonctions rotate :
  • rotate()
  • rotateX()
  • rotateY()
  • rotateZ()
• si on ajoute une deuxième propriété transform, elle annule la première. On ne peut donc définir qu’une seule propriété transform dans un même sélecteur ;
• pour effectuer plusieurs transformations, on peut les lister dans une même propriété transform
• une propriété avec plusieurs fonctions exécute les fonctions dans l’ordre, de droite à gauche ;
• les fonctions de transformations en 3D comme translate3d(), rotateZ() et scale3d() ont également besoin de la fonction perspective pour indiquer au navigateur la distance à laquelle l’utilisateur se trouve : plus la distance est grande, moins l’animation sera marquée.

Modifier le point d’ancrage d’un élèment grâce à transform-origin:

• transform-origin permet de repositionner le point d’ancrage, qui se trouve par défaut au centre de l’élément.
• on peut régler ce point d’origine en :
  • utilisant des unités comme px, rem, vh, etc. ;
  • utilisant des pourcentages pour X et Y ;
  • utlisant des mots clés : left et right pour l’axe X, top et bottom pour l’axe Y, et center pour les deux;
  • il est possible de ne pas indiquer la valeur de l’axe Y ou, quand on utilise des mots clés, de mettre uniquement une valeur : le navigateur comprend de lui-même à quel axe la valeur s’applique ;
  • quand on change le point d’origine en 3D, la valeur de Z doit être exprimée en unités (et non en pourcentages) !

Analyser la performances des animations avec Chrome DevTools :

• l’outil Performance de Chrome DevTools permet d’analyser les performances d’une page, notamment le taux d’images par seconde d’une animation;
• On peut brider la performance de notre machine pour simuler un appareil plus lent (activer l’option “CPU throttling”) ;
• zoomer sur une image précise d’une animation permet de détailler les calculs effectués par le navigateur.

Animer les couleurs avec opacity :

• animer la couleur d’une propriété déclenche des calculs de paint ; La propriété opacity permet de faire des transitions entre des couleurs en évitant ces calculs ;
• la propriété opacity reçoit une valeur entre 0 et 1 (0 étant complètement transparent et 1 complètement opaque) ;
• pour éviter d’avoir à ajouter des <div> supplémentaires, on peut utiliser le pseudoélément ::before ou ::after
• ::before et ::after créent un élément qui est respectivement le premier ou le dernier enfant de l’élément sélectionné;
• il est possible de créer des dégradés de couleur. Il suffit d’attribuer un dégradé au background-color de l’élément d’arrière-plan. On fera ensuite disparaître l’élément superposé avec opacity: 0.

Jeudi 2 Avril

J’ai repris tous le bloc 2 du cours Animation d’Openclassroom en essayant de refaire les exercices. Je me rends compte que je bloque sur certaine traduction de Scss en Css.

Gauthier partage une application permettant de traduire en direct le scss en css : SassMeister.

Vendredi 3 Avril

Visioconférence d’Olivier, développeur dont les langages favoris sont Javascript et Java! :) J’apprends que :

• GWT transforme le Java en Javascript;
• Rust serait une passerelle entre Front et Back.
• CMS signifie : Content management system. (Wordpress en est un). Cela permet au client de modifier son site sans intervenir en codant.
• A list appart est un bon site.
• Le site de Sara Soueidan aussi!

Samedi 4 Avril

Je continue le cours Animations d’OpenClassRoom.

Des animations plus complexes avec la règle CSS @keyframes

• les animations @keyframes permettent de construire des animations complexes en créant plusieurs étapes pour les propriétés tout au long de l’animation ;
• les keyframes CSS sont mise en place à l’aide de la règle @keyframes suivie d’un nom pour l’ensemble des keyframes;
• chaque keyframe peut être établi en utilisant comme valeur le pourcentage d’animation réalisé : 33% {…} ;
• si on n’a besoin que d’un keyframe de début et de fin, on peut utiliser « from » et « to »;
• si aucun keyframe de début ou de fin n’est fourni, l’animation commence et/ou se termine avec les valeurs de propriété assignées au sélecteur. Si aucune valeur n’est explicitement assignée dans le sélecteur, c’est la valeur par défaut qui est choisie ;
• une animation @keyframes peut contenir différents keyframes avec des propriétés distinctes ;
• plusieurs pourcentages peuvent être assignés à un seul keyframe. Les valeurs de ce keyframe seront appliquées à ces pourcentages dans l’animation ;

Utiliser les propriétés de l’animation CSS

• Comme les transitions, les animations @keyframes peuvent être déclenchées avec des pseudoclasses (:hover, etc.);
• les @keyframes peuvent aussi être déclenchés par le chargement des éléments auxquels ils sont assignés, comme un sélecteur. Par exemple, dès le chargement d’une page ;
• On peut retarder le démarrage en utilisant la propriété animation-delay (s ou ms);
• on peut étendre les valeurs du début à la fin des animations en utilisant la propriété animation-fill-mode :
  • « backwards » prolonge les valeurs de départ d’une animation avant son lancement. Cela couvre le délai avant que l’animation ne commence.
  • « forwards » prolonge les valeurs finales d’une animation jusqu’à ce que la page soit rechargée ou que le navigateur soit fermé.
  • « both » prolonge l’animation dans les deux sens ;
• on peut définir une fonction de timing des @keyframes en utilisant la fonction animation-timing-function sur le sélecteur où l’animation a été assignée ;
• on peut aussi définir un timing spécifique keyframe par keyframe, en assignant la propriété animation-timing-function aux keyframes en question.

Manipulez et réutilisez les animations CSS

• la propriété animation-iteration-count permet de répéter un ensemble de keyframes autant de fois qu’on veut.
  • On met le nombre de cycles comme valeur ;
  • la valeur « infinite » répètent les keyframes à l’infini;
• la propriété animation-direction permet de :
  • lire un ensemble de keyframes normalement, avec « normal » ;
  • lire un ensemble de keyframes vers l’arrière avec « reverse » ;
  • lire un ensemble de keyframes avec des allers-retours avec « alternate » ;
  • lire un ensemble de keyframes avec des allers-retours, mais en commençant par la fin avec « alternate-reverse » ;
• la propriété animation-play-state permet de
  • de mettre en pause une animation avec la valeur « paused » ;
  • on peut reprendre la lecture d’une animation avec la valeur « running ».

Lundi 6 Avril

Début du cours Openclassroom PHP.

• J’ai installé MAMP avec Apache et MySQL.
• J’ai créé un dossier “Sites” et un dossier “tests” pour mes pages.php.
• J’ai créé un premier script avec l’instruction echo.
• J’ai configuré Php pour qu’il indique les erreurs en modifiant le fichier php.ini.
  • Pour savoir où se trouve ce fichier on créé un fichier php contenant le script <?php phpinfo();.
  • On l’ouvre et on regarde le chemin indiqué à la ligne “Loaded configuration file”.
  • On modifie le fichier php.ini en vérifiant deux clés de configuration:
  • error_reporting = E_ALL
  • display_errors = On
• On enregistre le fichier et on relance MAMP pour que la modification soit prise en compte.

fonctionnement d’un site écrit en PHP.

Il existe deux types de sites web :

• les sites statiques : réalisés en HTML et CSS, leur contenu ne peut être mis à jour que par le webmaster ;
• les sites dynamiques : réalisés avec d’autres outils comme PHP et MySQL en plus de HTML et CSS, ils permettent aux visiteurs de participer à la vie du site, de poster des messages;

Les visiteurs du site sont appelés les clients. Ils demandent au serveur qui héberge le site de leur transmettre les pages web.

PHP est un langage exécuté par le serveur. Il permet de personnaliser la page en fonction du visiteur, de traiter ses messages, d’effectuer des calculs, etc. Il génère une page HTML.

MySQL est un système de gestion de bases de données. Il se charge du stockage des informations (liste des messages, des membres…).

Ecrire son premier script

• Les pages web contenant du PHP ont l’extension.php.
• Une page PHP est en fait une simple page HTML qui contient des instructions en langage PHP.
• Les instructions PHP sont placées dans une balise ouvrante et fermante : <?php ?>.
• Pour afficher du texte en PHP, on utilise l’instruction echo.

Les variables

• Une variable est une petite information qui reste stockée en mémoire le temps de la génération de la page PHP. Elle a un nom et une valeur.
• Il existe plusieurs types de variables qui permettent de stocker différents types d’informations : du texte (string), des nombres entiers (int), des nombres décimaux (float), des booléens pour stocker vrai ou faux (bool), etc.
• En PHP, un nom de variable commence par le symbole dollar :$agepar exemple.
• La valeur d’une variable peut être affichée avec l’instruction echo.
• Il est possible de faire des calculs mathématiques entre plusieurs variables : addition, soustraction, multiplication et modulo (le reste d’une division avec le symbole %).

Mercredi 8 Avril

J’ai continué les modifications de mon site Codevores en ajoutant un input slider et je l’ai relié en javascript pour afficher le prix choisi par l’utilisateur. J’ai participé à la réunion Descodeuses pour réfléchir ensemble sur les modalités de reprise de la formation en le 2 Mai.

Jeudi 9 Avril

J’ai continué les modifications de mon site codevores. J’ai reconnecté les boutons hamburger dont j’avais changé les classes. Il faut encore que je réorganise pour afficher correctement le menu.

J’ai assisté au Meet-up sur le Sketchnoting organisé par les Duchesses (Mathilde. L) et Flutter. Pierre Tibulle présente le sketch noting ou “facilitation graphique” :

• associer le dessin et la prise de notes permet une meilleure concentration et plus de connections neuronales;
• permet de partager une vision avec un groupe de personnes;
• Il faut noter toutes les idées principales;
• Si tu sketchnotes tu es un “facilitateur”;
• Pour Sketchnoter on peut utiliser :
  • des balises de bases
  • des pictos
  • des personnages
  • des lettres
  • des cadres
  • des connecteurs
  • des ombres
  • deux couleurs maximum en plus du noir
  • il faut organiser sa page.
  • on peut signer en bas à droite
  • mettre la date de la conférence en haut à gauche.
• le site “un picto par jour” propose d’apprendre un pictogramme par jour pour être plus réactif lors du sketchnoting.

Vendredi 10 Avril

Reprise des cours de PhP

Les boucles :

• Les boucles demandent à PHP de répéter des instructions plusieurs fois.
• Les deux principaux types de boucles sont :
• while: à utiliser de préférence lorsqu’on ne sait pas par avance combien de fois la boucle doit être répétée ;
• for : à utiliser lorsqu’on veut répéter des instructions un nombre précis de fois.
• L’incrémentation est une technique qui consiste à ajouter 1 à la valeur d’une variable. La décrémentation retire au contraire 1 à cette variable. On trouve souvent des incrémentations au sein de bouclesfor.

Les arrays

Les tableaux (ou arrays) sont des variables représentées sous forme de tableau. Elles peuvent stocker de grandes quantités d’informations.

Chaque ligne d’un tableau possède une clé (qui permet de l’identifier) et une valeur.

Il existe deux types de tableaux :

• les tableaux numérotés : chaque ligne est identifiée par une clé numérotée. La numérotation commence à partir de 0 ;
• les tableaux associatifs : chaque ligne est identifiée par une courte chaîne de texte.

Pour parcourir un tableau, on peut utiliser:

• la boucle “for”
• la boucle “foreach”;

Il existe de nombreuses fonctions permettant de travailler sur des tableaux et notamment d’effectuer des recherches :

• “array_key_exists” pour savoir si un clé est dans un tableau
• “in_array” pour savoir si une valeur est dans un tableau
• “array_search” pour chercher la clé qui correspond à une valeur dans le tableau

Les Fonctions

PHP propose des centaines et des centaines de fonctions prêtes à l’emploi pour tous types de tâches : envoyer un e-mail, récupérer l’heure, crypter des mots de passe, etc.

Si PHP ne propose pas la fonction dont on a besoin, il est possible de la créer avec le mot-clé “function”.

Les erreurs en PHP

Les erreurs les plus courantes

• Parse error :
  • oubli ; à la fin d’une instruction
  • oubli de “
  • oubli d’un . dans une concaténation
  • oubli d’une {
• Undefined function : on a utilisé une fonction qui n’existe pas.
  • vérifier l’orthographe de la fonction
  • la fonctionse trouve dans une extension de php que l’on a pas activée
• Wrong parameter count : on a oublié d’utiliser certains paramètres pour la fonction ou on en a trop mis.
• Il faut regarder la documentation php pour véréifier les paramètres de la fonction.

Les erreurs rares

• Header already sent by : Les Headers en Php sont des informations envoyées avant tout autre chose au navigateur. Si elles ne sont pas placées en tout début du code php avec rien avant alors l’erreur s’affiche.
• L’image contient des erreurs. Cette erreur s’affiche dans le navigateur si on a fait une parse error dans le code en utilisant la bibliothèque GD. L’erreur sera inscrite dans l’image. on peut alors supprimer la ligne <?php header (“Content-type: image/png”); ?> et le vrai message d’erreur appraitra.
• Maximum execution time exceeded : souvent à cause d’une boucle infinie.

Mardi 14 avril

Reprise du cours php d’OpenClassRoom

Transmettre des données avec L’URL

• Une URL représente l’adresse d’une page web (commençant généralement parhttp://).
• Lorsqu’on fait un lien vers une page, il est possible d’ajouter des paramètres sous la “nomdufichier.php?nom=Dupont&prenom=Jean” qui seront transmis à la page.

• La page nomdufichier.php recevra ces paramètres dans un array nommé $_GET:

  • $_GET['nom'] aura pour valeur « Dupont » ;
  • $_GET['prenom'] aura pour valeur « Jean ».
• Cette technique est pratique pour transmettre des valeurs à une page, mais il faut prendre garde au fait que le visiteur peut les modifier très facilement. Il faut donc tester prudemment leur valeur avant de les utiliser.
• La fonction isset()permet de vérifier si une variable est définie ou non.
• Le transtypage est une technique qui permet de convertir une variable dans le type de données souhaité. Cela permet de s’assurer par exemple qu’une variable est bien unint(nombre entier).

Transmettre des données avec un formulaire

• Les formulaires sont le moyen le plus pratique pour le visiteur de transmettre des informations à un site.
• Les données envoyées via un formulaire se retrouvent dans un array $_POST.
• il faut contrôler les données qu’envoie l’utilisateur. Il pourrait très bien ne pas remplir tous les champs voire trafiquer le code HTML de la page pour supprimer ou ajouter des champs.
• il faut s’assurer qu’aucun texte qui est envoyé ne contient du HTML si celui-ci est destiné à être affiché sur une page. Sinon, on ouvre une faille XSS. Pour éviter la faille XSS, il suffit d’appliquer la fonction “htmlspecialchars” sur tous les textes envoyés par les visiteurs que l’on affiche.

Jeudi 16 avril

J’ai continué à modifier mon site Codevores.

J’ai avancer d’un chapitre le cours de PHP et j’ai réussi le tp consistant à créer deux pages php dont l’une est protégée par un mot de passe qui doit être donné par l’utilisateur dans le champ input password de la première page php.

<?php
htmlspecialchars($_POST['mdp']);

if (isset($_POST['mdp'])){
  if ($_POST['mdp'] == 'kangourou') {
    echo('voici les informations confidentielles');
  } else {
    echo('Vous n'avez pas les autorisations');
  }
} else {
    echo('Vous n'avez pas les autorisations');
    }
?>

Vendredi 17 avril

Je continue le cours de PHP

Les variables superglobales

Les variables superglobales sont des variables automatiquement créées par PHP. Elles se présentent sous la forme d’arrays contenant différents types d’informations.

• $_SERVER : ce sont des valeurs renvoyées par le serveur. Elles sont nombreuses et quelques-unes d’entre elles peuvent nous être d’une grande utilité.
• $_SERVER['REMOTE_ADDR'] nous donne l’adresse IP du client qui a demandé à voir la page (utile pour l’identifier).
• $_SESSION : on y retrouve les variables de session. Ce sont des variables qui restent stockées sur le serveur le temps de la présence d’un visiteur.
• $_COOKIE : contient les valeurs des cookies enregistrés sur l’ordinateur du visiteur. Cela nous permet de stocker des informations sur l’ordinateur du visiteur pendant plusieurs mois, pour se souvenir de son nom par exemple.
• $_GET : elle contient les données envoyées en paramètres dans l’URL.
• $_POST : elle contient les informations qui viennent d’être envoyées par un formulaire.
• $_FILES : elle contient la liste des fichiers qui ont été envoyés via le formulaire précédent.

Samedi 18 Avril

J’ai recommencé à travailler sur le projet de site de Clément.

- J'ai construit une page sous forme de grille d'images regroupant tout ses projets. J'ai utilisé la propriété `grid`de CSS. C'est très responsive. Même s'il est dit que cela soit mal supporté par Internet Explorer. Il y a apparemment des tutos pour adapter la grid sous IE donc il faudra que je me plonge là dedans. 

• J’ai mis en place un script mettant en place un slideshow sur une page.

## Dimanche 19 Avril

Je continue à travailler sur le site de Clément.

J’ai mis en place un filtre de couleur au hover d’une image de la page works.html. J’ai mis du temps à comprendre comment faire car Clément voulait une couleur qui ne faisait pas partie des filterproposé par css. J’ai donc filouté en changeant l’opacité de l’image au hoveret en mettant un background-color avec la couleur choisie.

J’ai tenté de modifier mon script slideshow pour qu’au passage de la souris le slideshow se stoppe sur l’image choisie. C’est plus compliqué que prévue. Le setTimeOut de mon script doit être stoppé avec clearTimeOutprenant comme argument la valeur retournée par SetTimeOut. Mais je n’y arrive pas. :(

## Lundi 20 Avril

Je continue le site de Clément.

Olivier m’a aidé a trouver une solution alternative pour mon slideshow :

• utiliser css animation et la propriété animation-play-state pour stopper puis continuer le slideshow au passage de la souris.
• ça fonctionne parfaitement.

• J’ai juste eu du mal avec la position absolute de mes images qui cassait toute ma mise en page. Voici la réponse d’Olivier:

  T’as une partie du fix mais pas tout :slightly_smiling_face:. En gros, quand tu mets un élément en position: absolute;, tu le “sors” du flux normal du document. Et tu peux le positionner par rapport au premier élément parent qui est lui aussi positionné. Donc l’idée de mettre l’element englobant en position: relative; est bonne. Le seul truc c’est que comme ton image n’est plus dans le flux normal du document, sa taille n’est plus prise en compte. Il faut donc que tu remettes un width et un height sur l’élément en position: relative;

Lundi 27 Avril

Je reprends le cours Openclassroom de PHP

Lire et écrire dans un fichier

PHP permet d’enregistrer des informations dans des fichiers sur le serveur.

Il faut au préalable s’assurer que les fichiers autorisent PHP à les modifier. Pour cela, il faut changer les permissions du fichier (on parle de CHMOD) à l’aide d’un logiciel FTP comme FileZilla. Il faut donner la permission 777 au fichier (et parfois au dossier) pour permettre à PHP de travailler dessus.

• fopen permet d’ouvrir le fichier;
  • r ouvre le fichier en lecture seule.
  • r+ ouvre le fichier en lecture et écriture.
  • a ouvre le fichier en écriture seule, si le fichier n’existe pas il est créé.
  • a+ ouvre le fichier en lecture et écriture, si le fichier n’existe pas il est créé mais le répertoire parent doit avoir un CHMOD à 777. Si le fichier existe déjà le texte sera ajouté à la fin.)
• fgetsde le lire ligne par ligne;
• fputs d’y écrire une ligne.

<?php
$monfichier = fopen('compteur.txt', 'r+'); // 1 : on ouvre le fichier 

$pages_vues = fgets($monfichier); // On lit la première ligne du fichier (nombre de pages vues). Si on voulait lire plusieurs lignes il faudrait faire une boucle.
$pages_vues += 1; // On augmente de 1 ce nombre de pages vues
fseek($monfichier, 0); // On remet le curseur au début du fichier
fputs($monfichier, $pages_vues); // On écrit le nouveau nombre de pages vues

fclose($monfichier); // 3 : quand on a fini de l'utiliser, on ferme le fichier

echo '<p>Cette page a été vue ' . $pages_vues . ' fois !</p>';
?>

À moins de stocker des données très simples (ex: nombres de visites sur le site), l’utilisation des fichiers n’est pas la technique la plus adaptée. Mieux vaut faire appel à une base de données.

Qu’est ce qu’une base de données

Une base de données est un outil qui stocke les données de manière organisée et permet de les retrouver facilement.

On communique avec MySQL grâce au langage SQL. Ce langage est commun à tous les systèmes de gestion de base de données (avec quelques petites différences pour certaines fonctionnalités plus avancées).

PHP fait l’intermédiaire entre nous et MySQL.

Une base de données contient plusieurs tables.

Chaque table est un tableau où les colonnes sont appelées « champs » et les lignes « entrées ».

Mardi 28 Avril

Je continue les cours Openclassroom PHP

Ecrire des données

Pour dialoguer avec MySQL depuis PHP, on fait appel à l’extension PDO de PHP.

Avant de dialoguer avec MySQL, il faut s’y connecter. On a besoin de :

• l’adresse IP de la machine où se trouve MySQL,
• du nom de la base de données
• un login
• d’un mot de passe.

<?php
try
{
	$bdd = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'root', '');
}
catch(Exception $e)
{
        die('Erreur : '.$e->getMessage());
}
?>

Les requêtes SQL commençant par SELECT permettent de récupérer des informations dans une base de données.

$reponse = $bdd->query('SELECT nom FROM jeux_video LIMIT 0, 10');

Il faut faire une boucle en PHP pour récupérer ligne par ligne les données renvoyées par MySQL.

while ($donnees = $reponse->fetch())
{
	echo $donnees['nom'] . '<br />';
}

Le langage SQL propose de nombreux outils pour préciser nos requêtes, à l’aide notamment des mots-clés :

• WHERE(filtre)
• ORDER BY(tri)
• LIMIT(limitation du nombre de résultats).

Pour construire une requête en fonction de la valeur d’une variable, on passe par un système de requête préparée qui permet d’éviter les dangereuses failles d’injection SQL.