Goufablog

Geek, nouvelles technologies, société et jeux vidéos!
29
mars
2018
Proposition de nouvelle media-query : regarder un site web le 30 du mois pendant une pleine lune en faisant face au Nord-Est et en faisant des squats
Technique - par Goufalite - 215 hits

J'ai découvert récemment les nouvelles media-queries version 5 qui proposent des mises en situation qui dépassent la taille ou l'orientation de l'écran. On parle par exemple de la gestion de la luminosité ou si la page contient des scripts. En cette période propice je propose donc une nouvelle media-query qui gère les gens qui font des squats le 30 du mois en faisant face au Nord-Est pendant la pleine lune, un public très souvent oublié !

Un media-query, c'est quoi ?

Quand les téléphones portables capables d'afficher un site web sont arrivés, les webmasters ont dû s'adapter pour aider les développeurs à ne pas s'arracher les cheveux. L'idée était de récupérer via Javascript la taille de l'écran et d'adapter le style en fonction.

Avec les media-queries, en quelques lignes on peut imposer des règles de style CSS en fonction d'une certaine configuration :

/* écran d'ordintateur */ @media screen { div { width:100%; } } /* imprimante */ @media print { div { width:50%; } } /* écran de moins de 480 pixels de long */ @media max-width:480px { div { width:30%; } }

L'idée est donc d'avoir une balise permettant d'afficher le site dans la circonstance que j'ai décrit dans le titre, elle aurait donc pour titre :

on30thfullmoonfacingnewhilesquatting

Poisson d'Avr... quoi ?!?

Bien entendu cette media-query n'existe pas, mais on a tout ce qu'il faut en Javascript pour la réaliser

Mise en application

En ce mois d'Avril 2018, la pleine Lune arrive le 30 du mois, et bon, j'aime faire des squats le soir quand je rentre afin de rester en forme, et il s'avère que mon équipement sportif est disposé de telle sorte à ce que sois dirigé vers le Nord-Est. Il est donc important que je puisse regarder mes sites web préférés dans ces conditions !

Le 30Attente de démarrage
Pleine luneAttente de démarrage
Face au N-EAttente de démarrage
En faisant des squatsAttente de démarrage

Le 30 du mois

Javascript gère très bien les dates, mais pas le formattage...

(new Date()).getDate()==30;

Pendant la pleine lune

Un peu plus difficile En fait c'est le bordel ! La Lune n'est pas en orbite fixe donc les phases ne sont pas cycliques dans le temps. Le mieux est d'utiliser une API permettant de récupérer cette information comme wunderground par exemple. Pour le besoin de cet exercice, on va faire de l'approximation : chaque pleine Lune arrive tous les 29.530588853 jours (à peu près), il suffit de compter le temps passé entre la dernière pleine Lune (le 02 Mars à 1:51) et faire un modulo de cette période.

date = (new Date()).getTime(); lastFullMoon = (new Date("2018-03-02 01:51")).getTime(); cycle = 2551442.8768992; // 29.530588853 jours * 86400 secondes // 0 => pleine lune, 50 => nouvelle lune ageOfMoon = (((date-lastFullMoon)/1000)%cycle)/cycle *100

Faisant face au Nord-Est

Petite contrainte en approche : il faut que l'appareil qui lise le site web ait une boussole. On peut le vérifier et exploiter le résultat qui sera sous forme d'angle.

if (window.DeviceOrientationAbsoluteEvent) { // position plus précise, mais pas générique window.addEventListener('deviceorientationabsolute', processOrientation, false); } else if (window.DeviceOrientationEvent) { window.addEventListener('deviceorientation', processOrientation, false); } else { // pas d'orientation possible ! } function processOrientation(event) { where = ""; //l'angle est inversé sur mon téléphone angle = (360 - event.alpha)%360; valid[2].isValid = false; if (angle < 78.75 || angle > 281.25) { where = " Nord"; } else if (angle > 101.25 && angle < 258.75) { where = " Sud"; } if (angle > 11.25 && angle < 168.75) { where += " Est"; } else if (angle >191.25 && angle < 348.75) { where += " Ouest"; } }

En train de faire des squats

Alors là ça se complique ! Il faut que l'appareil fasse des mouvement continus de haut en bas, et occasionnellement qu'il ait un accéléromètre. Comme pour la boussole on va vérifier ça avant, ensuite il faudra construire un algorithme afin de détecter les mouvements et en déduire une répétition... Malheureusement pour compliquer le tout, l'appareil est en accélération permanente même à l'arrêt à cause de la gravité terrestre !

Pour simplifier le problème, on va prendre l'accélération sur l'axe d'altitude de l'appareil et en étudier la variation.

if(window.DeviceMotionEvent) { window.addEventListener("devicemotion", processMotion, false); } else { // impossible de mesurer le mouvement } function processMotion(event) { date = (new Date().getTime()); newval = event.acceleration.y; if (newval < -1 || newval > 1) { change = newval > lastval ? "i":"d"; lasttime = date; } if (date-lasttime > 3000) { times = [lasttime]; times.push(date); lasttime = date; rendertable(); } if (change != lastchange) { times.push(date); if (times.length > 20) { times.shift(); } rendertable(); } lastval = newval; lastchange = change; } function rendertable() { moy1 = []; totalmoy = 0; if (times.length > 1) { for (i = 1; i< times.length; i++) { diff = times[i]-times[i-1]; moy1.push(diff); totalmoy += diff; } truemoy = totalmoy/moy1.length; date = (new Date()).getTime(); if (truemoy >= 3000) { text = "Bah alors ?"; } else if (truemoy > 1000) { text = "Trop lent !"; } else if (truemoy < 300) { text = "Continue comme ça !"; } else { text = "Allez du nerf !"; } } }

Vous pourrez trouver le code de ce programme sur mon Github, et si vous avez des propositions d'améliorations simples (ne pas tout réécrire ;)) vous pouvez le proposer en pull request.

Conclusion

Quelqu'un a dit un jour : aujourd'hui on teste la robustesse d'un appareil uniquement avec le navigateur web. Et on peut voir que de plus en plus de fonctionnalités sont accessibles aux browsers, il suffit juste d'attendre un peu pour les voir arriver dans nos poches.

Et un jour, vous pourrez dire que votre téléphone fait le café !


Vous pouvez aussi lire :

GoufaliteGoufalite - Site Web - Steam - Twitter
Rédacteur et programmeur principal du Goufablog. Ingénieur de profession et avide de connaissances technologiques et scientifiques il partage son savoir à travers ces différents articles. Plus de renseignements sur la page de contact.
RSS Voir ses articles...
CC-BY-SACet article est protégé par une licence CC-BY-SA.


Tags : css, html, media-query, responsive
Delicious   Facebook   Commentaires(0) | Permalink
Sans commentaires!
Votre avis?
(Obligatoire)

Site et style réalisé par Goufalite
Reproduction interdite sans l'accord de l'auteur.
Valid XHTML 1.0 Transitional Optimisé pour FireFox 2
avec une résolution 1024*768