Tutoriels Vidéo
Parcourez ma collection de tutoriels vidéo sur le développement web, JavaScript, PHP, les bases de données et bien plus encore.
Javascript pour les débutants #2 - 2020
Cette vidéo traite certains aspects fondamentaux qui permettent la compréhension du fonctionnement du moteur Javascript dans un browser : 1. Comment programmer des tâches répétitives (setInterval()) 2. Comment programmer l'exécution d'une tâche dans le futur ou tâche retardée (setTimeout()) 3. Comment arrêter les Timers dans les deux cas des tâches répétitives et des tâches retardées (clearInterval() et clearTimeout()) 4. Comment fonctionne le cœur du moteur Javascript : l'Event Loop, la pile, les files, les Web APIs et leurs séquencements. 5. Quelques exemples permettant de visualiser, le débordement de la pile et le blocage contrôlé du moteur Javascript. 6. Comment ajouter ou supprimer un écouteur d'événement dynamiquement (addEventListener() et removeEventListener()) 7. Comment stopper la propagation d'un événement DOM 8. Comment annuler le comportement par défaut d'un élément DOM HTML. 9. Comment accéder aux information associées au type d'événement déclenché. Lien des slides de cette vidéo : https://js2.daaif.net
Google Classroom pour l'enseignement à distance - 2020
Google Classroom permet de créer des cours et des devoirs aux apprenants. cette vidéo montre les aspects suivants : : 1. Généralités sur l'application (conditions d'utilisation) 2. Comment Accéder à google Classroom avec le browser et avec le mobile 3. Comment créer et personnaliser un cours avec Google Classroom. 4. Comment ajouter et organiser des travaux et devoirsavec Google Classroom. 5. Comment l'enseignant invite les étudiants à rejoindre le cours. 6. Comment un étudiant rejoint son cours. 7. Comment interagir avec les étudiants via les flux. Les slides de cette vidéo : https://gc.daaif.net Pour voir l'intégration de Google Classroom avec Github Classroom : https://youtu.be/wQl8ZfIPYw0 Merci d'ajouter vos remarques en commentaires.
Javascript pour les débutants #1- 2020
A- Introduction à Javascript pour le Web : B - Généralités (Moteurs de script, standards, Devtools) C - Browser Object Model et Document Object Model, D - Quelques exemples qui ajoutent la couche Javascript dans une page Web E - Interagir avec la page Web par la pratique : 1 - Récupérer la référence d'un élément HTML : GetElementById et querySelector 2 - Modifier le contenu d'un élément HTML : innerHTML et innerText 2 - Récupérer la référence de plusieurs éléments HTML : querySelectorAll 3 - Ajouter, modifier ou supprimer des attributs HTML : getAttribute, setAttribute, removeAttribute 4 - Modifier les styles CSS d'un élément : element.style 5 - Ajouter/supprimer des classes CSS à un élément : element.classList Lien des slides de cette vidéo : https://js.daaif.net Les slides présentent en bas, un bouton en rouge qui mène directement à la séquence concernée de la vidéo.
bootstrap 4 - 2020
Un aperçu général sur l'utilisation du framework CSS Bootstrap 4 : 0 - Rappel sur les media queries 1 - Comment installer bootstrap en local (CDN, NPM) 2 - Le système de grid layouts 3 - Les éléments (Headings, Tableaux, Images, etc...) 4 - Les composants : Barre de navigation (Navbar) 5 - Les composants : Carousel 6 - Etc...
Graphique à barres avec CSS Flexbox
Cette vidéo montre à quel point il est devenu facile de disposer du contenu dans un conteneur adaptable. L'exemple illustre la création d'un graphique à barres en utilisant des données fictives et en se basant sur le modèle des boites flexibles (Flexbox). Pour en savoir plus sur les layouts en CSS : Présentation : https://layouts.css.daaif.net Vidéo : https://youtu.be/O5WYZ1eliWM
Simple CSS Navbar
Comment créer une barre de navigation simple avec CSS. Cette barre se base sur une liste non ordonnée et montre les modes d'affichage CSS (display) : 1 - display: inline, 2 - display: bloc, 3 - display: inline-block, 4 - display: flex Le code est disponible sur Github : https://github.com/daaif/css-menu Pour voir les concepts CSS associés à cette vidéo : https://layouts.css.daaif.net
Le positionnement en css: absolute, fixed, relative et Sticky.
Cette vidéo présente les différents modes de positionnement en CSS : 1 - Le positionnement absolute, 2 - Le positionnement fixed, 3 - Le positionnement relative, 4 - Le positionnement sticky L'utilisation des quatre repères pour se positionner par rapport au document, au viewport ou à l'élément lui même. Le cours est illustré par plusieurs exemples et démonstrations. Lien des slides : https://layouts.css.daaif.net/#16 Télécharger les slides en local : https://github.com/daaif/css-layout-slides
CSS Layouts.
Comment créer des layouts avec CSS : - Généralités sur la typographie et les unité em et rem. - Généralités sur l'imbrication et la juxtaposition des boites html. - Disposition de contenus en colonnes. - Mise en page en utilisant le flottement (float, clear). - Mise en page en utilisant le modèle Flexbox. - Positionnement en CSS : absolute, fixed, relative, sticky Lien des slides : https://layouts.css.daaif.net Télécharger les slides en local : https://github.com/daaif/css-layout-slides
Javascript - Comprendre l'Event Loop
Javascript est mono-thread, ce qui signifie que tout le code s'exécute dans la même pile. Faire de grandes boucles peut bloquer la pile et donc le navigateur. Dans une telle situation, tous les événements du DOM, le rafraîchissement des styles de la page seront interrompus. Cette vidéo montre les constituants qui permettent à Javascript de fonctionner, et par là même d'apprendre à éviter de bloquer l'Event Loop. Ces concepts sont des préalables à l'étude des Promesses en Javascript.
ES6 - Array.fill() comment initialiser de grands tableaux
D'apparence Array.fill() permet uniquement de remplir un tableau. Cependant, sans cette méthode et dans le cas de grands tableaux ou tableaux multidimensionnels, nous aurons à revenir à la méthode traditionnelle des boucles for pour initialiser un tableau, ce qui est souvent fastidieux. Dans cette vidéo, je montre des cas d'utilisation pour initialiser de grands tableaux et des tableaux multidimensionnels ainsi que l'implémentation interne de cette méthode.
ES6 - Array.reduce() utiliser un accumulateur dans une boucle
La méthode reduce permet de parcourir en interne un tableau et nous expose pour l'appel de chaque élément un accumulateur. Dans cette vidéo, je donne des exemples d'utilisation de cette méthode, ainsi qu'un exemple d'implémentation de cette méthode. Cette série de vidéos sur ES6 utilise intensivement les arraow functions. Pour apprendre l'essentiel sur ces fonctions, je vous suggère cette vidéo : https://www.youtube.com/watch?v=jg6Jr4SZoA0 Aussi pour l'utilisation de const et let au lieu de var : https://www.youtube.com/watch?v=FBuCVhha1Mw
ES6 - Array.map() ou transformer un tableau.
La méthode map() est très utile lorsqu'on veut faire une projection d'un tableau. La projection renvoie un tableau transformé selon les besoins. Dans cette vidéo, je donne un aperçu sur l'utilisation de cette méthode ainsi que l'implémentation interne de celle-ci. Cette série de vidéos sur ES6 utilise intensivement les arraow functions. Pour apprendre l'essentiel sur ces fonctions, je vous suggère cette vidéo : https://www.youtube.com/watch?v=jg6Jr4SZoA0 Aussi pour l'utilisation de const et let au lieu de var : https://www.youtube.com/watch?v=FBuCVhha1Mw