Introduction à la manipulation des préférences de style
Objectifs
Les objectifs de cette vidéo sont :
- Apprendre à utiliser l'API local storage de HTML5.
- Comprendre la manipulation du DOM avec jQuery.
- Implémenter une fonctionnalité de sauvegarde des préférences utilisateur.
- Créer une interface interactive pour la sélection de style.
Résumé
Ce tutoriel explique comment utiliser l'API local storage de HTML5 pour sauvegarder et restaurer les préférences de style de l'utilisateur.
Description
Dans ce tutoriel, nous allons apprendre à utiliser l'API local storage de HTML5 pour stocker et récupérer les préférences de style de l'utilisateur. Nous commencerons par créer une interface simple où l'utilisateur pourra sélectionner des couleurs pour le titre (<h1>) et l'arrière-plan du <body>. Une fois les choix validés, ces préférences seront enregistrées dans le local storage. Nous verrons ensuite comment lire ces données et appliquer les styles sélectionnés lors du chargement de la page. Ce processus inclut la gestion d'événements avec jQuery pour rendre l'interface interactive et fonctionnelle. Enfin, nous verrons comment ajouter une fonctionnalité pour fermer l'interface après la sélection.
Les étapes suivantes sont couvertes :
- Ouverture de la boîte de dialogue pour la sélection de style.
- Récupération et stockage des valeurs.
- Application des styles sélectionnés.
- Récupération des préférences depuis le local storage.
Ce tutoriel est adapté aux débutants en développement web qui souhaitent comprendre l'utilisation de l'API local storage pour améliorer l'expérience utilisateur sur les sites web.
Questions - réponses
display de none à block pour rendre la boîte de dialogue visible.
localStorage.setItem pour enregistrer les préférences de style sous un nom spécifique, par exemple styleApply.
localStorage.getItem, en les transformant en liste, puis en appliquant les styles au <h1> et au <body> avec css.
Programme détaillé
Module 1 - Introduction à la formation HTML5 et CSS3 Part 4
Module 2 - Initiation javascript et jQuery
Module 3 - Déplacements et apparition
Module 4 - Gestion audio et video
Module 5 - Réaliser des menus
Module 6 - Présenter des images
Module 7 - Technologie Ajax
Module 8 - Les formulaires
Module 9 - Les images
Module 10 - Autres
Dommage que M Audoux ne va pas toujours au terme de ses exemples. Il manque souvent un petit "clic" qui finaliserait le cours.
Je rejoins le commentaire précédent, à savoir qu'il manque les fichiers de travail avec lesquels il serait plus facile de s'exercer.
Est il possible d'avoir les exemples afin de pouvoir travailler dessus et ne pas être obliger de jongler entre l'éditeur et la vidéo.
Merci.