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.
0# Création d'un site Web Wordpress de A à Z
Dans cette série de vidéos, je vais vous montrer : 1. Comment acheter et configurer un nom de domaine. 2. Comment acheter et configurer un espace d'hébergement. 3. Comment installer et mettre en oeuvre un site Web Wordpress
Wordpress - Installation et aperçu sur ses fonctionnalités #1 - 2020
Le CMS Wordpress est le plus populaire du monde car il est simple d'utilisation. Il permet de créer et de mettre en production des sites Web très rapidement. Cette vidéo montre : 1. Comment télécharger et installer Wordpress en local 2. Accès à l'interface d'administration de Werdpress. 3. Quel est la différence entre un Post et une Page. 4. Aperçu générale sur les fonctionnalités de base de Wordpress.
Git, et Github Classroom, comment assigner aux étudiants des devoirs à distance.
Cette vidéo montre les fondamentaux de git et de github, puis elle donne une approche aux enseignants pour assigner des travaux aux étudiants, suivre leurs progressions. La solution utilise Github Classroom en combinaison avec Google Classroom. La vidéo traite : 1. Git et comment initialiser et utiliser un dépôt en local 2. Github comme dépôt central, comment créer, cloner un dépôt 3. Aperçu sur Github for Education et les packs proposés. 4. Utilisation de Classroom dans une organisation (université) pour assigner des travaux aux étudiants. 5. Importations des étudiants à partir d'une classe Google Classroom. 6. Assigner un devoir aux étudiants (Point de vue de l'enseignant) 7. Comment l'étudiant accède au dépôt, le clone, le modifie puis le pousse vers le dépôt central. 8. Comment l'enseignant récupère les travaux de tous les étudiants. En détail et avec des exemples, apprendre à utiliser Git et Github : https://youtu.be/ajQpILOuqcw
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.