Site en Vedette

Le Site www.meteostours et son look jeune et dynamique

Site personnel au look jeune et dynamique. Information sur St-Ours-sur-Richelieu

Site Ressources

Station Météo - L'heure juste sur la météo!

- Station Météo - (taille réelle)

Nom du Module : Station Météo
Description : Cette jauge affiche sous une forme familière, l'essentiel de l'information météo : Température (°C et °F), humidité (en %) et Vent (en Km/h).
Taille : 500 x 550 pixels (avec l'avis Cumulus)
Difficulté : Niveau 1 : Débutant
(Installation simple, adaptation optionelle)
Adaptabilité : Ce module comporte de grande possibilité de peronnalisation.
- Un utilisateur débutant réussira à adapter la taille et la couleur de fond.
- Un utilisateur avancé réussirait à changer la forme et les composants pour faire son propre affichage.
Liens utiles : - Téléchargement dans notre Nouvelle Section!
- Installation de votre module.
- Intégration dans votre Site Web.
- Personnalisation de votre module.
Variantes :
Nouveau !
Pour démontrer les possibilités d'adaptations de ce module par le simple remplacement d'un fichier, Météo du Québec offre 4 nouvelles variantes :
Disponibles
sur cette page.

Météo Station - Installation

Installer votre module

Ce module est un ensemble de fichiers que vous devez copier sur votre site.

Étape 1 : Extraction de l'archive

Ce module est compressé en format .zip pour commodité. Décompressez le contenu du fichier mqc_station_Fr_v1.zip sur votre ordinateur. Vous vous retrouverez avec un dossier meteoqc comprenant le module d"affichage et toutes ses composantes.

Contenu de l'archive :
Arborescence du fichier archive

  • meteoqc - Ce dossier est créé pour regrouper les éventuels ajouts. Vous retrouverez dans ce dossier :
  • mapage.html - Page d'exemple contenant la commande iframe à utiliser.
  • stationmeteo.htm - Le fichier à faire traiter par Cumulus
  • lib - Dossier de librairies essentielles au fonctionnement du module. Ici 3 fichiers .js
  • meteo_station - Ce dossier contient le(s) fichier(s) cadrans (ici, station.xml)

Étape 2 : Copie des fichiers :

  • Copiez le dossier meteoqc et tout son contenu à la racine de votre site.
  • Copiez le fichier mapage.html... à la racine de votre site!

Étape 3 : On automatise

Pour que votre Station Météo soit mise à jour en même temps que vos autres pages météo, vous devez configurer Cumulus pour qu'il transforme les Balises Cumulus (Webtag) en données météorologiqies réelles.

  • À l'écran principal de Cumulus, ouvrez le menu Configuration.
  • Dans le menu Configuration, choisissez l'option Internet.
  • Au haut de l'écran Internet Settings, choisissez l'onglet Files


Ce qui vous amènera à l'écran de configuration des transferts et transformations : Arborescence du fichier archive

Pour traiter notre module, Cumulus a besoin de 4 informations:

  • Local filenames : - Le chemin d'accès vers le fichier stationmeteo.htm
  • Remote Finenames : - L'adresse url de destination pour le fichier stationmeteo.htm.
  • Process? : - À cocher pour transformer les Balises Cumulus en données réelles.
  • Ftp? : - Commande le téléversement de la page sur votre Site Web.

Donc, dans notre exemple : (le gras indique un paramètre essentiel)

  • Local filenames :C:\meteoqc\stationmeteo.htm
  • Remote Finenames : MonSite/meteoqc/stationmeteo.htm
  • Process? : - Coché
  • Ftp? : - Coché

Vous devez simplement remplacer le chemin d'accès vers le fichier stationmeteo.htm, sur votre Pc ("C:" dans notre exemple), puis sur votre Site Web ("MonSite" dans notre exemple)

Finalement, il ne vous reste plus qu'à sélectionner les cases "Process?" et "Ftp?" ... pour que le plaisir commence!

Et Voilà !

Votre Station Météo sera sur votre Site Web au prochain téléversement automatique de Cumulus.
(Si vous ne voulez pas attendre, lancez un téléversement manuel avec l'option "Web Update" dans le menu "File" de Cumulus)

Notez que nous n'avons jamais fais référence au fichier mapage.htm, il ne sert qu'à contenir le cadre (iframe) nécessaire à l'affichage de ce module. Ainsi votre page reste indépendante de ce module

Jacques Desroches, Webmaster

© 2010 Météo du Québec

Station Météo - Intégration

Intégrer le module dans sa propre page

Fichier mapage.html :

Le fichier mapage.htm est une page html très simple. contenant le cadre qui génère le cadran de votre module Station Météo.

Vous pouvez utiliser mapage.htm comme base pour créer votre propre page Web. Vous n'avez qu'à modifier à votre guise cette page et à la renommer, au besoin.

Votre propre page :

Vous pouvez aussi décider d'utiliser votre propre page Web et de simplement y ajouter les lignes de code nécessaires au fonctionnement de votre module Station Météo. Pour se faire suivez les étapes suivantes :

Ouvrez le fichier mapage.htm et repérez la ligne suivante

<iframe src="meteoqc/stationmeteo.htm" width="502px" height="550px" marginheight="0px" marginwidth="0px" scrolling ="no" ></iframe>

Ce cadre iframe permet d'afficher le module Station Météo. Vous n'avez qu'à copier cette ligne dans votre page Web pour avoir cet encadré de 502 x 550 points

Alors, je vous souhaite de profiter de votre nouveau module Station Météo!

si vous désirez allez un peu plus loin, continuez avec la Personnalisation de votre module.

Station Météo - Personnalisation

Modifier l'apparence de votre module Station Météo


- AVERTISSEMENT - Vous entrez en zone dangeureuse!

Vous devez DÈS MAINTENANT faire une copie de votre module actuel! Des modifications érronées pourraient éventuellement faire disparaître votre cadre Station Météo

La méthode facile : Les variantes ! (Nouveauté !)

Météo du Québec offre depuis peu des variantes de ce module. Par le simple remplacement d'un fichier vous pouvez désormais changer radicalement l'affichage de votre module Station Météo. Remplacez simplement le Thème par défaut, par un des modèles offerts. Entre autre, un Thème transparent vous permet des possibilité infinies, en le placant simplement sur une photo !

Pour plus de détails, cliquez sur ce lien..

Prérequis :

Pour la personnalisation de vos modules Météo du Québec, je vous conseille le logiciel Notepad++. Ce logiciel a l'avantage de respecter les petits "codes inhabituels" qui font tout le travail dans Cumulus. Vous ne devez pas utiliser Notepad de Windows!

Changer la couleur du cadre :

Votre nouveau module "Station Météo" est intégré dans un cadre de couleur beige. Ce cadre n'a pour but que de vous montrer les différents composants de votre module. Vous pouvez bien sûr définir une couleur de cadre s'harmonisant mieux avec votre page web.

Pour ce faire, suivez les étapes suivantes :

  • Répérer le fichier stationmeteo.htm dans votre répertoire meteoqc
  • Dans le fichier stationmeteo.htm, repérer la balise <body bgcolor= "#FFFFDB">
  • Changez simplement la couleur #FFFFDB, par une valeur de votre choix.

Changer la taille du module :

La taille de l'encadré est définissable facilement en spécifiant les valeurs de hauteur et de largeur de la commande iframe. Le module peut avoir une taille variant jusqu'à 1000 points! La proportion et la qualité d'affichage des composants sont recalculés automatiquement pour obtenir un cadran parfait!

Pour ce faire, vous devez éditer 2 fichiers :

- stationmeteo.htm -
Ce fichier contient les paramètres du cadran.

  • Éditez le fichier stationmeteo.htm dans le répertoire meteoqc de votre site Web.
  • Repérez la commande <div id="MeteoStation" style="width: 500px; height: 500px"></div>>
  • Modifiez les valeurs de width et de height selon les indications suivantes :
    • Le cadran est un cercle parfait de 1000px X 1000px, réduit à une échelle de 500px
    • Pour modifier l'échelle, indiquez le même nombre pour height et width

- mapage.htm -
Ce fichier contient les paramètres de l'encadré.

  • Éditez le fichier mapage.htm situé à la racine de votre site Web.
  • Repérez la commande <iframe src ="meteoqc/stationmeteo.htm" width="502px" height="550px" marginheight="0px" marginwidth="0px" scrolling ="no"</iframe>
  • Modifiez les valeurs de width et de height selon les indications suivantes :
    • Pour la valeur de width, le cadre doit avoir un minimum de 2px de plus (pour éviter que certain navigateurs ajoutent des barres de défilement à votre encadré)
    • Pour la valeur de height, le cadre doit avoir 50px de plus, pour les 2 lignes Mise à jour et Généré par au bas de l'encadré.

Changer le titre du module :

Présentement, le titre du module Station Météo affiche Meteo du Quebec. Ce titre peut être personnalisé pour afficher ce que vous souhaitez, par l'édition du fichier station.xml.

Éditer un fichier XML : La composante principale du module Station Météo est un fichier de description du module en langage XML. Ces fichiers ressemblent beaucoup à un fichier html en ce sens qu'il décrit le contenu via des balises ouvrante et fermante (ex. <p>></p>)

Pour modifier votre module :

  • Trouvez le fichier station.xml dans votre dossier meteoqc/station_meteo/
  • Éditez station.xml avec un bon éditeur! (jamais Notepad de Windows!)
    (Notepad++ entre autre, permet la "coloration syntaxique" pour différencier plus facilement les balises xml et le contenu via des couleurs différentes)
  • Repérez les 2 lignes : <Gauge2Label text="Meteo du Quebec" font="48 bold"...
    • Remplacez le texte Meteo du Quebec par le texte de votre choix.(*)
    • Au besoin, changez la taille de la police en modifiant le 48 bold actuel
    • Les 2 ligne créent un effet de 3D par superposition décalé.

...Voilà !
Votre module Station Météo affiche désormais votre texte, à la taille souhaitée !

Remarque : Malheureusement, vous ne devez pas mettre d'accents!

D'ici peu, Météo du Québec mettra en ligne un nouvel atelier de niveau Avancé, sur la librairie de jauges Bindows. Cet atelier prendra en exemple votre module Station Météo pour démontrer les capacités de ces jauges.

Vous pourrez ainsi redéfinir complètement l'apparence de votre module en modifiant, supprimant ou insérant des balises simples à manipuler!

... C'est un Rendez-vous !

Si vous avez besoin d'aide, de soutien, ou si vous souhaitez mettre un lien pour votre nouveau module "adapté", n'hésitez pas laisser un message sur notre Forum !

Jacques Desroches, Webmaster

© 2010 Météo du Québec
N'oubliez pas que les développements de Météo du Québec son sous licence "LinkWare", ce qui implique que vous deviez indiquer sur notre Forum un lien vers votre module !