Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

HTML5 : Optimisation des flux de production

Effectuer les requêtes avec matchMedia

Testez gratuitement nos 1343 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
À l'instar des CSS, HTML5 fournit une API matchMedia qui permet avec JavaScript d'envoyer des requêtes médias. Ainsi, vos images seront affichées automatiquement à la résolution du périphérique.
06:46

Transcription

En travaillant avec du responsive web design, on utilise toujours les média query au niveau des css. Donc ce sont des @media, des règles @media qui vont nous permettre d’aller au travers de requêtes affiliées ou non des feuilles de style, en fonction du périphérique. En fait, il existe exactement la même chose en JavaScript, qui s’appelle MatchMedia, cette fonction. Et on voit que c’est bien répandu, c’est pris en compte par l’intégralité des navigateurs à ce jour. Et donc il serait un peu dommage de s’en passer. Si d’aventure, il arrivait que vous travaillez sur des navigateurs, sur des parcs un peu particuliers qui ne prennent pas en compte MatchMedia, sachez qu’il existe un polyfill qui est développé par Paul Irish ici, qui permet de faire la même chose, quoi. Et puis il existe une autre librairie qui s’appelle enquire.js, qui va permettre d’aller encore plus loin que MatchMedia. Donc c’est assez sympa, il y a des supers écouteurs. Donc je vous invite à vous rapprocher également de cette librairie-là si besoin était. Alors regardons pour la mise en place, de quoi il s’agit. Ici, je vais avoir préparé simplement une feuille html classique avec un simple background, une grille, pour pouvoir visualiser un peu les dimensions d’écran quoi. Mais toute cette partie-là, c’est purement pour pouvoir tester. Alors regardons du côté du Javasscript. Côté JavaScript, on va simplement, alors on va partir du principe qu’on travaille avec un navigateur qui gère MatchMedia. Donc si vous voulez, il faudrait mettre en place la gestion d’un polyfill. Ici je vais créer une variable mm, ici, variable MatchMedia, qui sera égale donc à Windows. Et je vais passer ma requête ici, MatchMedia directement sous forme de string ici. Et donc je vais dire que je vais chercher un minimum. Alors donc je vais écrire une pure requête classique, comme je le ferai dans mon fichier html pour des css. Et ici je vais dire : avec un min-width de 600 pixels, voilà. Donc je vais chercher à créer cet objet avec cette requête littérale, qui est placée dès le départ. Et ici, si je vais un verifimedia, je vais créer une fonction. Je vais passer dans ma fonction cet élément-là, ici, voyez. Si j’invoque verifimedia, je vais pouvoir créer maintenant une fonction, fonction verifimedia qui va recevoir donc un argument, et cette fonction va pouvoir tester quelque chose. Donc je vais dire par exemple console.log, donne-moi arg.matches, dis-moi si ça correspond, si c’est true ou false, d'accord? Et on pourrait par la suite pourquoi pas faire une if arg.match, au lieu d’avoir un simple console.log ici if arg.match, en fonction de ce que je te demande, tu pourrais faire ceci ou cela. Alors si je fais ça, CONTRÔLE-S ici, et que je passe dans un navigateur pour aller tester. Donc on voit bien ici notre grille ici, j'actualise Et il me dit : « ah, verifmedia is not defined at ». Alors je vais vérifier ce qui se passe dans cette partie-là. Il y a un petit « i » qui a été écrit. CONTRÔLE-S, je réactualise Au niveau du navigateur, j’actualise, et on voit bien, il me dit false. Par contre, si je grandis ou que je rapétisse ici, c’est terminé. C’est fini, ça a été exécuté qu’une fois. Alors ça peut être un souhait que de tester au chargement de la page, et puis après en fonction de données, contenus fermes et définitives. Maintenant on va pouvoir rajouter à cet objet mm ici, cet objet MatchMedia, un addListener directement ici. Et donc ça c’est assez sympa parce que ça nous permet de pouvoir directement ajouter cette fonction ici, directement à l’écouteur. Et là, regardez ce qui va se passer maintenant si je réactualise ma page ici. J’ai du False, et là j’ai du True. Et là j’ai du False, et là j’ai du True. Donc on va pouvoir checker comme ça, en fonction de la disponibilité d’écran ou en fonction de tout critère qu’on pourrait passer dans cette requête, dans cette string de requête, on pourra passer un contenu différent. Alors justement, pour pouvoir les mettre en place, je vais remettre ma fenêtre légèrement plus petite ici, et je vais repartir de cette partie-là, donc ici, et me dire : maintenant, par défaut j’affiche un contenu moins volumineux. Alors je vais venir visualiser directement ça dans le navigateur ici. Et qu’au lieu d’appeler le fichier n° 1, j’appelle le fichier n° 2 maintenant ici. J’actualise, on voit bien que j’ai un contenu moins volumineux, parfait. Et bien sûr que je pourrais avoir un fichier html ici qui contient un contenu volumineux cette fois-ci. Eh bien, qu’est-ce qui me reste à faire ici ? Il me reste à faire tout simplement de créer par exemple une fonction que je pourrais appeler chargeDatas. Cette fonction chargeDatas serait une fonction qui pourrait faire un appel à une requête XMLHttpRequest qui pointerait vers ce fichier html ici. Et au moment du chargement, me dirait : « écoute, je vais créer une fonction domaction, et sur cette fonction domaction, tu vas me placer le texte que tu reçois. » Il ne me reste plus qu’à créer une fonction domaction ici. Cette fonction domaction va recevoir des datas qui sera sous forme de texte ici. Je vais faire un document.getElementById cnt ici. Donc je vais récupérer cet élément-là. Et je vais mettre tout le contenu que j’ai récupéré à l’intérieur. Il me reste à faire quoi ? Simplement un appel chargeDatas que je vais pouvoir faire, à quel niveau, à ce niveau-là. Et regardez ce qui va se passer ici. Si je viens dans mon navigateur maintenant. Donc je repasse dans mon navigateur, j’actualise ma page. Que se passe-t-il ? J’ai toujours mon contenu moins volumineux, pourquoi? Parce que je suis en deçà des 600 pixels. On n’a pas mis la grille en arrière-boutique, mais vous comprenez le principe. Et dès que je vais augmenter par afficher, le contenu volumineux qui arrive. Que se passe-t-il si je reviens ? Je reviens, il ne se passe rien quoi. Mon contenu est déjà en place. Je n’ai pas besoin de le recharger ou de le décharger. Voyez donc, c’est très intéressant. Par contre, ici je n’ai pas filtré le fait que si le contenu est déjà chargé dans la page, là ici, que je veuille ou non, dès que je vais reagrandir, je vais réinvoquer chargeDatas et je vais recharger mon contenu. Donc pensez à mettre un petit filtre, un flag qui dira : « attention, ça a été chargé » Alors pour mettre le flag, on pourrait faire simplement un flag = 0 ici, ou false. Et puis ici on pourrait placer par exemple au moment du chargeDatas, alors plutôt unload ici, on pourrait marquer ici flag = true, voilà. Et à ce moment-là, on pourrait dire if arg.matches && flag == false, à ce moment-là tu charges les datas. Voilà donc, c’est très simple à mettre en place. Et ça nous permet en fonction du device, de charger des contenus différents, en fonction de tout autre critère parce qu’on parle toujours des dimensions d’écrans. Mais n’hésitez surtout pas à le regarder par rapport aux charges de la batterie du portable, par rapport à des préférences utilisateurs, par rapport à des phénomènes d’accessibilité, etc. Il n’est pas nécessaire que de regarder sur des largeurs d’écran.

HTML5 : Optimisation des flux de production

Optimisez vos flux de production lors de vos développements en HTML5. Explorez les méthodes et les éléments essentiels à la mise en place de processus automatisés.

5h29 (62 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :26 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !