récupérer des données sur une page web Résolu/Fermé

Question

Bonjour à tous, Je viens vous demander de l'aide. Je ne connais presque rien a l'html et je veux créer une page sur un site internet du club (via e-monsite) J'ai récupéré des lignes de code en cherchant sur le net, pour avoir des informations actualisées de balises FFVL (balises météo parapente) Sur la page que j'ai créée, apparait bien le logo de la balise actualisé mais je ne sais comment faire apparaître les valeurs qui sont données sur le site de la FFVL. Je vous copie le code que j'ai mis:

Poët-Laval

avec le résultat en image: je souhaite voir apparaitre aussi les valeurs de cette balise N°2089 que l'on peut retrouver sur cette page: http://www.balisemeteo.com/balise.php?idBalise=2089 Les valeurs que je souhaite récupérer sont: orientation du vent et vitesse du vent et les placer comme indiquées sur l'image, qui provient du site de la FFVL: Vous pouvez peut-être trouver les valeurs sur cette page aussi: https://balisemeteo.com/balise_json.php?idBalise=2089 J'espère avoir été assez clair dans mes explications et que quelqu'un pourra m'aider Dans l'attente d'une réponse, bien cordialement Yvan

Anis_web · Answer

Bonjour, pour mettre les données d'un site web sur ton site, ce dernier doit te fournir une API. C'est bien le cas : https://federation.ffvl.fr/pages/opendata Il faut bien sûr lire les conditions avant de pouvoir l'utiliser sur ton site. Le(s) fichier(s) JSON permettent de traiter cette procédure en renvoyant ces données du serveur à un poste client en utilisant le langage PHP. Prenant l'exemple de : La liste des balises météo : https://data.ffvl.fr/json/balises.json Le fichier JSON est constitué de groupe de code comme ci-dessous (après ouverture du fichier sur ton navigateur) : On prend par exemple idBalise=2091 que toi tu veux {"idBalise":"2091","nom":"Mont Rachas","latitude":"44.502334","longitude":"5.009848","altitude":"811","departement":"26","remarques":"Balise du Site de Rachas.Orientation Nord et Sud. Acc\u00e8s en voiture par Le Po\u00ebt-Laval ou \u00e0 pieds par La Roche Saint Secret.","decalageHoraire":"0","struId":"0","station_type":"PIOUPIOU","en_maintenance":"0","url":"http://www.balisemeteo.com/balise_mob.php?idBalise=2091","url_histo":"http://www.balisemeteo.com/balise_histo_mob.php?idBalise=2091"} On vas récupérer la liste éléments de idBalise=2091 en utilisant PHP. Voici le code ci-dessous : '; echo 'latitude : '.$item['latitude'].'
'; echo 'longitude : '.$item['longitude'].'
'; echo 'altitude : '.$item['altitude'].'
'; echo 'departement : '.$item['departement'].'
'; echo 'remarques : '.$item['remarques'].'
'; echo 'decalageHoraire : '.$item['decalageHoraire'].'
'; echo 'struId : '.$item['struId'].'
'; echo 'station_type : '.$item['station_type'].'
'; echo 'en_maintenance : '.$item['en_maintenance'].'
'; echo 'url_histo : '.$item['url_histo'].'
'; } } ?> On obtient bien les résultats : Une fois les informations affichés dans ton site il ne te reste plus qu'à faire une page stylé avec de l'HTML et CSS comme on utilise PHP la page doit être nom_de_la_page.php Voir code ci-dessous d'un exmple de page php utilisant ces résultats : '; $latitude = $item['latitude'].'
'; $longitude = $item['longitude'].'
'; $altitude = $item['altitude'].'
'; $departement = $item['departement'].'
'; $remarques = $item['remarques'].'
'; $decalageHoraire = $item['decalageHoraire'].'
'; $struId = $item['struId'].'
'; $station_type = $item['station_type'].'
'; $en_maintenance = $item['en_maintenance'].'
'; $url_histo = $item['url_histo'].'
'; } } ?>

Lien

Résultat : Toi tu veux ca "Les valeurs que je souhaite récupérer sont: orientation du vent et vitesse du vent et les placer comme indiquées sur l'image, qui provient du site de la FFVL:" Tu dois utilisé cet URL : Les relevés météo (mis à jour toutes les 5 minutes) pour toutes les balises : https://data.ffvl.fr/json/relevesmeteo.json {"idbalise":"2091","date":"2020-04-12 09:08:05","vitesseVentMoy":"12","vitesseVentMax":"15","vitesseVentMin":"6","directVentMoy":"180","directVentInst":"180","temperature":null,"hydrometrie":null,"pression":null,"luminosite":null,"LUM":null} Et bien tu fais la même choses voici le code php de la récupération des éléments : '; echo 'vitesseVentMax : '.$item['vitesseVentMax'].'
'; echo 'vitesseVentMin : '.$item['vitesseVentMin'].'
'; echo 'directVentMoy : '.$item['directVentMoy'].'
'; echo 'directVentInst : '.$item['directVentInst'].'
'; } } ?> Résultat : Fait attention ici pour ce fichier JSON dans idbalise le b de balise est en minuscule pour ne pas avoir de BUG. Bon courage Fréro

vanvan68_0410 · Answer

Bonjour Anis-web.
Tout d'abord merci pour ton aide et cette solution que je vais étudier.
En parallèle j'avais fait une demande sur un autre forum et grâce à l'aide d'un gars formidable nous avons bien avancé sur mon projet.
Il a réussi a presque satisfaire toute mes demandes et il bloque un peu sur la mise en forme des données sur la page.
Pour l'instant il a réussi à me proposer des modules qui se présentent les uns en dessous des autres et moi je souhaitais pour avoir une page un peu plus compacte, les modules côte à côte par 3.
Ce qui aurait donné 3 X 3 car j'ai pour l'instant 9 modules à afficher.
Si tu veux bien m'aider à finir cette mise en forme je peux te faire suivre le code que cette personne à encodé.
Dans l'attente je jette un oeil à ce que tu m'as proposé et si tu veux on se recontacte.
Je surveillerais ce forum.
Je te met une image de ce que je souhaite faire.
Encore merci,

Cordialement
Yvan

vanvan68_0410 · Answer

sauf erreur 430px .box { width: 430px; border: 4px solid rgb(50, 205, 50); border-radius: 10px; padding-bottom: 0px; display : table; margin : 0 auto; margin-top: 30px; } seulement je ne sais pas comment c'est affiché, je pense que ca vient de ces lignes ici.. const getLinksData = function () { const LinksData = [ [ "2071", "Léoncel", "261630" ], [ "156", "Les Limouches", "262320" ], [ "51", "Roynac", "262870" ], [ "28", "St-Jean-en-Royans", "263070" ], [ "2169", "Lesches-en-Diois", "261640" ], [ "33", "Luc-en-Diois", "261670" ], [ "2168", "Solaure", "262050" ], [ "105", "Montagne de Ruy-Vesc", "263730" ], [ "2089", "Le Poët-Laval", "262430" ] ]; return LinksData; };

Anis_web · Answer

attention le box a une bordure de 4px border: 4px solid rgb(50, 205, 50); donc le container doit avoir (430px * 3) + ((4*2) * 3) = 1314px donc : #container{ width: 1314px !important; } et non pas : #container{ width: 1290px !important; } dit moi si c'est OK Après si tu veux que le même affichage s'affiche sur tous les appareils sans te casser la tête avec le responsive tu ajoute cette balise HTML entre les balises head "Méthode ZOOM" Et tu teste sur ton mobile et tablette. Sinon si tu veux faire le responsive tu as le choix tu mets container entre media query comme ca @media screen and (min-width: 1314px) { #container{ width: 1314px !important; } } @media screen and (max-width: 1313px) { #container{ width: 100% !important; } } Choisit comme tu veux mais si tu utilise cette méthode il faut enlever la balise et mettre à la place et vérifie bien si elle existe pour ne pas la mettre deux fois (dans les deux cas)

vanvan68_0410 · Answer

Ok ca fonctionne nickel! par contre les modules sont collés, comment mettre un espace entre chacun horizontalement? ensuite je veux rajouter 3 widgets en dessous, a la fin suivant cette présentation: comment les agencer et ou mettre le code? Dans après

? ci joint le code des widgets:

Heure actuelle
Paris, France

Super job!!! merci

Anis_web · Answer

tu mets cela à la fin du code du div container

tu mets ca

Heure actuelle
Paris, France

et tu joute les classes ci-dessous dans le CSS : .innerbox1{ width:100%; position:relative; display:table; } .innerbox2{ width:1310px; position:relative; display:table; margin:auto; } .box2{ width:650px; position:relative; display:table; float:left; margin:10px 10px 0 0; } .box3{ width:640px; position:relative; display:table; float:left; margin:10px 0 0 0; }

Anis_web · Answer

attend je viens de voir la présentation pour le code du widget tu mets ca

Heure actuelle
Paris, France

pour le code css tu mets ca .innerbox1{ width:1310px; position:relative; display:table; margin:auto; } .box2{ width:650px; position:relative; display:table; float:left; margin:10px 10px 0 0; } .box3{ width:640px; position:relative; display:table; float:right; margin:10px 0 0 0; } AU LIEU DE CE QUE JE T'AI ENVOYÉ ET DIT MOI SI TOUT ET OK...

vanvan68_0410 · Answer

OK OK OK!!!
ca marche super
par contre j'ai pas encore bien analysé pour l'affichage sur une tablette ou un mobile mais déjà je vois un léger problème sur un ordi:
Peut-on réduire la totalité de l'emprise de la page car elle met le menu du site (situé à droite) en dehors de l'écran...
Merci

vanvan68_0410 · Answer

Bonjour ci dessous l'intégralité du code html et css de la page que nous construisons. merci d'avance...

Heure actuelle
Paris, France

D'avance merci Message modifié par la modération Pour une lecture plus facile du code, à l'avenir utilisez les balises, VOIR CETTE PAGE

Anis_web · Answer

J'AI RÉDUIT LE container à 1023px
mais il faut modifier la largeur et hauteur de l'iframe des box bpour qu'il n'y ai plus de scroll bar horizontal. Voir si c'est toi qui a accès au code des iframes des 9 box pour modifier la largeur et la hauteur. Et dit moi...

vanvan68_0410 · Answer

Bonsoir j'avais déjà testé de réduire le container ainsi que les box, mais les Iframes sont fournies par météo France et quand je réduis leur taille ça crée un scroll bar en effet... la ligne qui correspond aux Iframes qui posent problème( ligne 62) thisNewDiv.innerHTML += '

'; peut-on les réduire sans que ça ne crée de scrollbar? mettre à l'échelle 0,9 ? je cherche un peu partout mais pour l'instant je n'ai pas trouvé.. merci!

Anis_web · Answer

C'est bon j'ai trouvé le code était dans le javascript Voici le code FINALE avec 1023px de container "pour ne plus avoir de problème dans l'affichage du PC"

Heure actuelle
Paris, France

vanvan68_0410 · Answer

Ouahhh!!!! quel super boulot tu as fais!!! tu ne dors jamais? : ) Bon j'ai modifié à ma sauce pour mettre la disposition un peu plus grande sur le site e-monsite avec l'ordi (1216 pix ) ainsi mes box peuvent être plus grandes et plus lisibles.(et ca ne dépasse pas) J'édite les codes avec Visual Studio Code et je les ouvre dans Safari. Les marges et mise en page ne correspondent pas tout a fait avec le rendu sur e-monsite, donc j'ai fait quelques ajustement. La version mobile fonctionne très bien aussi, génial!!! J'ai oublié de te parler d'un problème que j'avais.il y avait un problème de relevé d'heure entre Firefox, Safari et Chromium J'ai modifié et maintenant ca fonctionne avec Safari et Chromium mais 2 heures de décalage avec Firefox...??? Ancien code: thisData.date = baliseList[i].date == null ? "NC" : new Date(baliseList[i].date.replace(" ","T")).toLocaleString();



Nouveau code:
thisData.date = baliseList[i].date == null ? "NC" : new Date(baliseList[i].date.replace(" ","T")).toLocaleString('fr-FR', { timeZone: 'UTC' });

donc ce nouveau code indique la mauvaise heure de relevé sur Firefox...!!! mais fonction avec Safari et Chromium???

A quoi correspondent les 3 différents formats? média screen 533px ça je pense que c'est téléphone portable mais quelle différence entre min 1044px et max 1043px?

Encore un immense merci

Anis_web · Answer

@media screen and (min-width: 1044px) {
ici on mets les classes CSS correspondant avec les écrans dont la largeur est comprise
entre 1044px et l'infini
ici le container est de 1023px donc s'affiche correctement car il est inférieure à 1044px
donc il y aura pas de blocs qui s'affichera à l'extérieur de l'écran
}
@media screen and (max-width: 1043px) {
ici on mets les mêmes classes CSS correspondant à une largeur comprise
entre 534px et 1043px
ici le container devient 100% il s'adapte à toute la largeur de l'écran et le bloc à l'intérieur qui est le box
a une largeur de 500px donc il s'affichera correctement entre 534px et 1043px puisque dans cet interval il est plus petit
et ne va pas déborder
}
@media screen and (max-width: 533px) {
ici on mets les mêmes classes CSS correspondant à une largeur comprise
entre 0px et 533px
ici le container reste 100% pour prendre la totalité de la largeur de la page
et le box à l'intérieur du container a une largeur de 325px qui est la largeur minimal d'un téléphone portable
et n'y aura pas de décalage puisque c'est la taille minimal
}
Pour les classes à l'extérieur de ces conditions media query il vont rester les mêmes pour toutes les largeurs du sites
comme par exemple : .red { color: red; } .blue { color: blue; }
Pour que tu puisse voir la largeur de la fenetre en pixel tu inspecte l'élément et tu réduit la fenetre at automatiquement
en haut à droite tu vas voir la largeur en pixel qui change en réduisant la fenêtre du navigateur



Ensuite pour l'affichage de l'heure il faut noter que du moment que c'est fonctionnel sur chromium il n'y a pas de problème au niveau
du code et Dans le navigateur Firefox c'est du soit à la configuration du serveur soit
au protocole https certificat avec des dates de validité qui ne correspondent pas à ce qu’indique l’horloge de votre système
car moi j'ai testé en serveur virtuel local wampserver
Sur Firefox et Chromium il y a pas de décalage donc cela vient du serveur ou est hebergé le site.
Chrome :

Firefox :

vanvan68_0410 · Answer

Bonjour Anis_web Tout d'abord un grand merci pour ton super boulôt!!! J'ai mis la page web sur notre site et ça fonctionne super bien. Je suis en train de tester une modification en rajoutant une nouvelle Iframe que j'ai intercalée avant les autres.(class=boxiframe2) J'ai repris ton code et j'ai crée de nouveau styles. Je voulais modifier la taille de l'Iframe et faire comme tu avais procédé avec un width:100% et un height:auto avec un scale:1.19 mais l'affichage ne fonctionne pas. j'ai donc laissé les valeurs d'origine et appliqué le scale:1.19, ca marche en mode plein écran (min-with 1044px) mais avec les modes max-width 1043px et max-width 533px ça bug!! Si tu as un peu de temps pour jeter un oeil merci... pas facile le code css et les codes en général!!! Ton code que j'ai repris et modifié: et l'Iframe que j'ai rajouté et déplacé le reste...

Heure actuelle
Paris, France

le visu du problème sur Chromium: en plein écran ok: si je réduis voila le résultat!!!: Encore un très grand merci pour ce que tu as déjà fait... Yvan

Anis_web · Answer

Du moment que tu as choisit 1216px comme largeur de container sur PC le @media screen and (min-width: 1044px) et @media screen and (max-width: 1043px) doivent aussi changer pour qu'il n'y est pas de décalage comme ci-dessous donc pour envlever le décalage on remplace la vaeur des deux conditions par : @media screen and (min-width: 1216px) et @media screen and (max-width: 1215px) Ensuite tu as fait une erreur dans l'ouverture et la fermeture des acolades T'as oublié de fermet l'acolade de la première conditions @media screen and (min-width: 1044px){ il n'y a pas de fermeture en accolade de cette condition si tu as pu le constater dans ton code et dans la condition @media screen and (max-width: 533px) { T'as fermé l'accolade deux fois } } Ensuite il ny'a pas de balise div fermente pour le

Ce genre d'erreur peut entrainer différents Bugs, on vas nettoyer un peu tout ca Maintenant je vais corrigé cela et corriger l'affichage de la section que tu veux Voici la section complète corrigée du code CSS (Code CSS complét ci-dessous) Code CSS complet : body { margin: 0; padding: 0; text-align: center; } iframe{border:none;} .red { color: red; } .blue { color: blue; } @media screen and (min-width: 1216px) { #container{ width: 1216px !important; margin: auto; display: table; position:relative; } .box { width: 389px; height: 540px; border: 4px solid rgb(50, 205, 50); border-radius: 10px; padding-bottom: 0px; display: table; margin: 30px 4px 0 4px; float: left; position: relative; } .box > div.right{ width:389px !important; } .box > div.right > a > img{ width: 200px !important; } .box > div.down{ width: 358px !important; position: absolute; bottom: 0; height: 256px; } .boxiframe{ transform: scale(0.9); width: 425px; height: 266px; margin: 0 0 0 -18px; } .date { margin: 10px 0 0 0; font-size: 16px; } .left { width: 140px; height: 200px; border: solid 2px gray; border-radius: 6px; float: left; margin-left: 20px; } .releve { font-size: 14px; } .first { font-size: 20px; margin-top: 20px; } .name { font-size: 28px; margin-bottom: 6px; } .boxslim { width: 250px; height: 540px; border: 4px solid rgb(50, 205, 50); border-radius: 10px; padding-bottom: 0px; display: table; margin: 30px 4px 0 4px; float: left; position: relative; } .innerbox1{ width:1216px; position:relative; display:table; margin:auto; } .box2{ width:930px; height:540px; position:relative; display:table; float:right; margin: 34px 10px 0 0px; } .box3{ width:900px; height:574px; position:relative; display:table; float:left; margin:10px 0 0 0; } .box4{ width:300px; position:relative; display:table; float:right; margin:10px 0 0 0; } .boxiframe2{ transform: scale(1.19); width: 200px; height: 445px; margin: 45px 0 0 0; position: relative; } } @media screen and (max-width: 1215px) { #container{ width: 100% !important; margin: auto; display: table; position:relative; } .box { width: 500px; height: 579px; border: 4px solid rgb(50, 205, 50); border-radius: 10px; display: table; padding: 20px 4px 0 4px; float: none; position: relative; margin: auto; margin-bottom: 10px; margin-top: 10px; } .box > div.right{ width:500px !important; } .box > div.right > a > img{ width: 178px !important; } .box > div.down{ width: 500px !important; position: absolute; bottom: 0; height: 368px; } .boxiframe{ transform: scale(1.19); width: 425px; height: 266px; margin: 78px 0 0 0; } .date { margin: 0 0 5px 0; font-size: 16px; } .left { width: 181px; height: 180px; border: solid 2px gray; border-radius: 6px; float: left; margin-left: 20px; } .releve { font-size: 14px; } .first { font-size: 20px; margin-top: 10px; } .name { font-size: 35px; margin-bottom: 10px; } .boxslim { width: 250px; height: 540px; border: 4px solid rgb(50, 205, 50); border-radius: 10px; padding-bottom: 0px; display: table; margin: auto; float: none; position: relative; padding-top:10px; } .innerbox1{ width: 100%; position: relative; display: table; margin: auto; } .box2{ width:500px; height:540px; position:relative; display:table; float:none; margin: auto; padding-top:10px; } .box3{ width: 500px; border: 1px solid #000; height: 574px; position: relative; display: table; float: none; margin: auto; top: 10px; } .box4{ width: 512px; position: relative; display: table; float: none; margin: auto; } .boxiframe2{ transform: scale(1.19); width: 200px; height: 445px; margin: 36px 0 0 0; } } @media screen and (max-width: 533px) { #container{ width: 100% !important; margin: auto; display: table; position:relative; } .box { width: 325px; height: 465px; border: 4px solid rgb(50, 205, 50); border-radius: 10px; padding-bottom: 0px; display: table; margin: auto; float: none; margin-top:20px; margin-bottom:0px; position: relative;; } .box > div.right{ width:325px !important; } .box > div.right > a > img{ width: 158px !important; } .box > div.down{ width: 325px !important; position: absolute; bottom: 0; height: 234px; } .boxiframe{ transform: scale(0.77); width: 425px; height: 266px; margin: 0 0 0 -50px; } .date { margin: 0 0 0px 0; font-size: 16px; } .left { width: 100px; height: 160px; border: solid 2px gray; border-radius: 6px; float: left; margin-left: 20px; } .releve { font-size: 12px; } .first { font-size: 16px; margin-top: 0px; } .name { font-size: 28px; margin-bottom: 6px; } .boxslim { width: 250px; height: 540px; border: 4px solid rgb(50, 205, 50); border-radius: 10px; padding-bottom: 0px; display: table; margin: auto; float: none; position: relative; padding-top:10px; top:10px; } .innerbox2{ width:100%; position:relative; display:table; margin: 10px 0 0 0; } .box2{ width: 325px; position: relative; display: table; float: none; margin: auto; top:10px; } .box3{ width: 325px; height:574px;; position: relative; display: table; float: none; margin: auto; top:20px; } .box4{ width: 325px; position: relative; display: table; float: none; margin: auto; } .boxiframe2{ transform: scale(1.19); width: 200px; height: 446px; margin: 39px 0 0 0; } } Et voici le code html complet à mettre entre le body Code html complet :

Heure actuelle
Paris, France

Et dit moi...

Anis_web · Answer

Du moment que tu as choisit 1216px comme largeur de container sur PC
le @media screen and (min-width: 1044px) et @media screen and (max-width: 1043px)
doivent aussi changer pour qu'il n'y est pas de décalage comme ci-dessous

vanvan68_0410 · Answer

Bonjour,
En effet des erreurs et des choses mal encodés de ma part...
Quand on débute, c'est compliqué.
Je viens de voir un bug dans l'affichage, en mode plein écran:OK, en mode plus petite taille:OK 
par contre en mode intermédiaire les formats des box (.box) présentent des problèmes d'affichage
Sur mon téléphone en mode portrait:OK, mais en mode paysage, problème d'affichage:
Vue avec Chromium ou Safari:


Vue depuis le téléphone:


lien vers notre page web:https://www.tichodromes.com/pages/balises/

Merci et bonne journée

Anis_web · Answer

Mais tu t'en sort pas mal BRAVO
Dans la classe .box ligne 125 mets height:613px; au lieu de height:579px;
Et dit moi

vanvan68_0410 · Answer

Super!!!
Bon cette nuit j'ai pensé à cette solution mais je pense que mon cerveau n'en pouvait plus et je ne l'ai pas testé.
je n'ai pas appliqué la valeur de 613px car ça ne suffisait pas sur ma page web, mais j'ai agrandi le box et le cadre des valeurs et j'y ai aussi réduit la marge et tout ça fonctionne parfaitement.
(c'est quand même étrange que je n'ai pas le même rendu que sur une page test locale!!!) 

Mille merci pour cette aide précieuse, ça marche à merveille 
Je suis ravi!!!
Bravo pour ton super job et ton infinie patience...

MERCI 
Yvan

HachadAbderrahmane@gmail.com · Answer

merci de votre jentiésse

Récupérer des données sur une page web

21 réponses

Discussions similaires