par Anne-Laure DELPECH | 31 Juil 2017 | développement web
Dans cet article, j’explore pour la première fois l’optimisation d’un site web pour en améliorer la rapidité, tant sur mobile ou tablette que sur un ordinateur. Ce premier article d’une série, Optimiser la vitesse d’un site web, vise seulement à lister quelques tentatives d’amélioration avec les outils, et les connaissances, dont je dispose aujourd’hui. Il sera complété par d’autres articles au fur et à mesure de mes essais, réussites et échecs.
Optimiser un site web, pourquoi ?
Je lis partout (et je l’observe dans ma pratique d’internaute) qu’un site lent à charger perd des visiteurs.
Un bon site doit s’afficher de manière quasi instantanée pour tous les visiteurs, qu’ils aient un faible débit internet ou pas, qu’ils utilisent un ordinateur, une tablette ou un téléphone.
Par ailleurs, la vitesse d’affichage d’un site est un des critères de référencement par les moteurs de recherche.
Est-ce que mon site est rapide ?
Plusieurs outils de test existent. Voici ceux que j’ai utilisés :
Optimiser un site web, comment ?
Fort heureusement, les outils de test cités donnent tous des recommandations.
Ainsi si je teste l’url « https://parcours-performance.com » avec PageSpeed Insights, j’obtiens une note, mais aussi une liste des critères d’optimisation. Pour chaque critère, j’ai des recommandations d’amélioration, et une liste précise de ce qui ne va pas, le cas échéant. Les critères sont les suivants :
Premiers essais d’optimisation
Pour le site « Parcours Performance« , j’ai commencé l’optimisation et les critères suivants sont bons, pour mobile comme pour desktop :
- Afficher en priorité le contenu visible
- Optimiser les images
- Réduire la taille des ressources CSS
- Réduire la taille des ressources HTML
- Réduire la taille des ressources JavaScript
- Éviter les redirections sur la page de destination
Les autres critères ne sont pas encore entièrement bons mais la note globale s’est considérablement améliorée :
| |
Avant |
Après |
| temps de chargement Test My Site |
11 secondes (insuffisante) |
9 secondes (médiocre) |
| Page speed Insights Mobile |
54/100 (Poor) |
70/100 (Needs Work) |
| Page speed Insights Desktop |
63/100 (Poor) |
79/100 (Needs Work) |
Voici ce que j’ai fait pour y arriver :
Passage en PHP 7.1
Fin juillet 2017, plus de 85% des sites WordPress fonctionnaient encore avec des versions de PHP 5.6 et antérieures (voir les statistiques WordPress ici) alors que la version 7 a été lancée en décembre 2016. Il est indispensable de passer tous les sites WordPress à PHP 7 (et même 7.1) car cette nouvelle version contient des améliorations spectaculaires en matière de rapidité et de sécurité.
Ca se fait dans l’espace client (sur OVH ou Infomaniak). Auparavant, on aura pris soin de vérifier la compatibilité du site en installant l’extension « PHP Compatibility Checker » qui permet de mettre en lumière des difficultés.
Activation d’une extension de mise en cache
J’utilise « WP Super Cache« , qui est proposée par défaut sur les installations WordPress d’Infomaniak. Si on ne l’a pas, Il suffit de l’installer et activer. Les réglages par défaut sont satisfaisants.
Comprimer les images
Pour comprimer les images, j’utilise depuis longtemps l’extension gratuite « Smush » et même maintenant l’extension payante (abonnement annuel wpmudev) « Smush Pro » qui apporte quelques avantages supplémentaires.
Autoriser la compression
Sur un serveur Infomaniak, il suffit d’activer la compression des fichiers (cf FAQ Infomaniak).
Evidemment, celà ne comprime pas les fichiers provenant d’autres sources, tels que https://s3.amazonaws.com/…ownloads.mailchimp.com/js/mc-validate.js, que mon site Parcours Performance charge systématiquement.
L’amélioration est significative puisque l’outil de test http://www.whatsmyip.org/http-compression-test/ m’indique que la page d’accueil de Parcours Performance faisait 57.9 KB, en fait maintenant 14.8 KB, soit une amélioration de 74.5% !
Activer le module Google Page Speed
Sur Infomaniak, il suffit également d’activer ce module (cf FAQ 1341 d’Infomaniak). PageSpeed Tools est un module proposé par Google qui permet d’optimiser la performance d’un site côté serveur en fonction de bonnes pratiques recommandées par le moteur de recherche. Sur d’autres hébergements, il faudra voir cette page de Google et faire les réglages à la main si c’est possible.
Activation et réglage de Hummingbird Pro
Avec l’abonnement annuel wpmudev, j’ai accès à de nombreuses extensions, que je peux installer sur autant de sites que je veux. Dans le cadre de l’amélioration de la performance de mon site Parcours Performance, j’ai activé et réglé Hummingbird Pro. Il en existe une version gratuite dans le dépôt d’extensions WordPress. Ici je décris ce que j’ai fait avec la version Pro.
A l’activation de Hummingbird Pro, j’ai réalisé un test du site. La note est 68/100. J’ai réalisé les opérations suivantes :
- leverage browser caching : l’extension propose de régler le cache (set expiry ) à 8 jours et d’aller mettre l’instruction correspondante dans le .htaccess.
- remove render blocking ressources : Hummingbird liste 10 fichiers javascript et 14 fichiers css qui pourraient être chargés après l’apparition du contenu « au dessus de la ligne de flottaison ». Ensuite, il propose « configure script deferring » : on arrive alors dans un menu de « minification », qui permet pour chaque fichier javascript ou css de définir l’option de minification (création d’un fichier de taille réduite), et aussi de dire si le fichier doit être chargé dans le header (donc avant la « ligne de flottaison » de la page) ou le footer. J’ai tout « minifié », sauf le css de font Awesome, chargé de l’extérieur, mais j’ai laissé les fichiers se charger dans le header car il faut que je fasse des essais avant de décider que faire.
- « Host my files on the WPMU DEV CDN » : wpmudev stocke mes fichiers sur un serveur rapide externe.
La note est du test d’Hummingbird est maintenant à 75/100, avec des améliorations à apporter à
- Improve server response time
- Enable compression : Compressing https://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js could save 92.2KiB (66% reduction)
- Remove render blocking resources
Et maintenant ?
Je suis plutôt contente du résultat, ou du rapport temps passé / amélioration. Mais il va falloir que j’aille regarder comment faire encore mieux.
Dans un second article de cette série, Optimiser la vitesse d’un site web, je vais réaliser toutes les opérations précédentes pour ce site, knowledge.parcours-performance.com et mesurer systématiquement les gains avec les trois outils de test cités en introduction.
Il me reste, selon PageSpeed Insights, à améliorer les critères suivants :
- Éliminer les codes JavaScript et CSS qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison : Votre page contient 11 ressources de script et 13 ressources CSS qui bloquent l’affichage de votre page, et donc le retardent. Il faut que je teste ce qui se passe pour chacun des 24 fichiers si, via Hummingbird, je demande à ce qu’ils soient chargés dans le footer…
- Autoriser la compression : Autorisez la compression des ressources suivantes afin de réduire le volume de données transférées de 92,2 Ko (réduction de 66 %). La ressource concernée est https://s3.amazonaws.com/…ownloads.mailchimp.com/js/mc-validate.js qui n’est pas compressée.
- Réduire le temps de réponse du serveur : Lors de notre test, votre serveur a répondu en 0,76 secondes.
- Exploiter la mise en cache du navigateur : Si vous définissez une date d’expiration ou une durée de validité maximale pour les ressources statiques dans les en-têtes HTTP, vous indiquez au navigateur d’aller chercher les ressources déjà téléchargées sur le disque local plutôt que sur le réseau. Les ressources concernées sont https://s3.amazonaws.com/…ownloads.mailchimp.com/js/mc-validate.js (délai d’expiration non spécifié) et https://www.google-analytics.com/analytics.js (2 heures)
Je pense qu’il faut que je voies aussi les éléments suivants :
- Pour les mobiles, activer le mode « AMP ».
- voir l’impact de la version MySQL (cf statistiques WordPress) sur la vitesse et la sécurité : il faut peut-être que je passe en version 10.x (je suis actuellement en version 5.6.35).
par Anne-Laure DELPECH | 3 Juil 2017 | Hébergement web
J’ai fait le choix d’héberger les sites que je gère sur un serveur Infomaniak. Mais j’ai préféré laisser les noms de domaine chez OVH (plus simple, surtout si je retourne chez OVH lorsqu’ils se seront un peu améliorés !). Lorsque je transfère un hébergement (perso ou pro) d’OVH vers Infomaniak, je dois aussi voir comment gérer les emails.
Si le nom de domaine est utilisé par plus d’une personne, il faut autant d’adresses que d’utilisateurs. Dans ce cas, je choisis un hébergement mail (un « MX plan » chez OVH, un « hébergement mail » chez Infomaniak). Mais si il y a un seul utilisateur, l’hébergement gratuit associé à un nom de domaine chez OVH suffit.
J »explique ici comment activer l’hébergement gratuit d’OVH et régler l’adresse mail principale ainsi que ses alias éventuels.
Supprimer l’hébergement « pro » ou « perso » d’origine
Evidemment, cette étape ne sert que si on a préalablement acheté chez OVH un hébergement pour le nom de domaine.
Une fois que le site est transféré sur son nouvel hébergement (voir l’article « Transfert d’un site vers un hébergement Infomaniak« ), il faut le supprimer. Ca se fait en 2 ou 3 étapes :
- Prendre note des réglages liés aux mails dans l’hébergement actuel ;
- sauvegarder (optionnel) les mails précédents avec son client de messagerie ;
- supprimer l’hébergement.
Prendre note
Le plus simple est de faire une copie d’écran de la page emails de l’espace client d’OVH :
Copie d’écran onglet email de l’espace client OVH
Comme ça, je sais quelles sont les adresses à recréer, et je vois aussi d’un coup d’oeil si la boîte mail OVH contient ou non des mails. Dans le cas présent, les mails sont supprimés au fur et à mesure par le client de messagerie qui sert à l’utilisatrice pour lire ses mails.
Il peut également être utile de faire une copie de toutes les redirections créées.
Copie d’écran onglet email, gestion des redirections, de l’espace client OVH
Ici, les deux adresses sont toutes deux redirigées sur une adresse gmail.
Sauvegarde des mails
La méthode varie selon les clients de messagerie. Pour GMail, c’est comme ça :
sur gmail : bouton « mon compte »
sauvegarde des mails de Gmail : accès au menu « sauvegarde »
Puis lien « définir votre contenu »
sauvegarde des mails de Gmail : accès au compte
Puis créer une archive
sauvegarde des mails de Gmail : créer une archive
Ensuite, il suffit de sélectionner les données à archiver puis lancer.
Supprimer l’hébergement
Avant de réaliser l’opération, on vérifie :
- On a soigneusement noté les caractéristiques des adresses mails et leurs redirections éventuelles ?
- On a sauvegardé les mails dans le client de messagerie ?
- Le site web fonctionne correctement dans son nouvel hébergement ?
- Il ne reste aucun fichier non sauvegardé sur l’hébergement (accès FTP) ?
Si c’est oui, on peut supprimer l’hébergement !
Dans l’espace client OVH,
Dans l’espace client OVH, aller dans facturation puis choisir le menu « Mes Services ». Il faut taper une partie du nom de domaine dans le champs en haut à droite du tableau.
OVH : supprimer un hébergement, étape 1
Ensuite, en cliquant sur le +, à gauche de hébergement web + domaine, on voit comment se décompose ce service :
OVH : supprimer un hébergement, étape 2
Puis en cliquant sur le petit engrenage à droit dans la ligne « hébergement web », on a accès à l’option « supprimer l’hébergement ».
OVH : supprimer un hébergement, étape 3
On clique sur « supprimer l’hébergement ». On valide en suivant le lien dans le mail que l’on reçoit immédiatement.
Si on retourne à l’accueil, puis au menu domaine, les infos liées au domaine indiquent une erreur. Ca dure environ 1 heure pour moi de 9h50 à 10h26. Ce n’est qu’à ce moment qu’on peut réaliser la prochaine étape. Pendant ce temps, il est possible que des mails ne soient plus reçus. Mais en principe l’expéditeur en est informé…
Activer l’hébergement gratuit
Toujours dans l’espace client d’OVH, on va dans l’onglet « informations générales » du menu domaines du domaine concerné.
Activer l’hébergement web et email gratuit en cliquant sur le bouton « activer » :
OVH : activer l’hébergement web et mail gratuit
choisir seulement la modification des enregistrements MX (on ne crée pas d’hébergement web) :
OVH : activer l’hébergement gratuit pour les mails uniquement
La commande (gratuite) est traitée par OVH. 2 minutes après, on reçoit un mail nous informant que l’hébergement est créé.
5 minutes après, on a accès au menu « email » pour le domaine. Mais avant, il faut vérifier que OVH a correctement réalisé les modifications :
- Les zones DNS des enregistrements A et AAAA doivent toujours pointer vers l’IP de l’hébergement tiers,
- Le champ TXT commençant par « »google-site-verification= » doit toujours être présent (si on l’avait créé avant)
- Le champ SPF du domaine doit être réglé sur « v=spf1 include:mx.ovh.com ~all »
Il y a eu une période où je rencontrais systématiquement des problèmes à ce stade. Il semblerait que ce soit du passé !
Régler l’adresse mail et ses alias
Créer l’adresse mail
Dans l’espace client OVH, menu « emails » du domaine, cliquer sur le bouton « créer une adresse e-mail ». Avec l’hébergement gratuit, on ne pourra en créer qu’une. On lui affectera la taille de compte la plus élevée (5Go). Pour définir le mot de passe, on pourra utiliser le générateur de mot de passe CompariTech.
Voilà, nous avons défini une adresse mail principale, il nous reste à savoir la lire avec un client de messagerie. Mais nous souhaitons peut-être aussi disposer d’autres adresses, pour le même utilisateur. Nous allons donc créer des « alias ».
Définir des alias
Nous avons comme adresse principale isabelle@domaine.com. Ce sera notre adresse courante et nous ne voulons pas qu’elle devienne trop polluée par des spam, ni qu’elle soit connue de tous.
C’est là qu’interviennent les alias de messagerie ! Ce sont des adresses de messagerie qui n’ont pas de compte dédié et qui doivent donc obligatoirement être redirigée sur une « vraie » adresse.
Par défaut OVH crée un alias intitulé « postmaster@domaine.com » et le redirige sur l’adresse principale (isabelle@domaine.com).
Nous pouvons créer un alias, par exemple test@domaine.com :
Cliquer sur le bouton « Gestion des redirections ».
OVH : créer un alias d’email
Une fois qu’on a validé, on peut expédier des mails à test@domaine.com et il est automatiquement reçu par l’adresse vers laquelle on a redirigé l’alias.
Lire les messages
On peut lire les mails en ligne avec la solution OVH pour l’accès webmail, sur https://mail.ovh.net/roundcube/
Pour lire des emails autrement, il faut utiliser un « client de messagerie ». Ils sont nombreux et OVH a rédigé des guides bien fait sur leur réglage, disponibles ici.
Si vous utilisez Gmail, vous pouvez suivre ces instructions :
Et maintenant ?
Et vous, est-ce que vous avez d’autres solutions pour héberger des comptes email à faible coût ?
par Anne-Laure DELPECH | 3 Juil 2017 | Thèmes
Dans l’article précédent de cette série Un thème enfant de Twenty Seventeen, nous avons vu comment créer un thème enfant pour le thème Twenty Seventeen de WordPress et créer des modèles de page. Aujourd’hui, nous allons voir comment modifier les caractéristiques de l’image d’en-tête du thème et ajouter des sections à la page d’accueil.
Pour réaliser ces modifications, je me suis beaucoup inspirée de cet excellent article, sur Kinsta.com : A Developer’s Introduction to the Twenty Seventeen Theme.
Modifier les caractéristiques de l’image d’en-tête
Le thème Twenty Seventeen utilise une image de 2000 px de large, 1200 de haut. Je préfère une image moins haute, pour voir le contenu de la page sans avoir à utiliser la barre de défilement dès le début.
Je veux régler la hauteur de l’image à 350 px et utiliser par défaut une autre image. Et il faudra modifier la feuille de style pour supprimer le réglage qui met l’image à 100% de la hauteur d’écran.
Dans functions.php du thème enfant, ajouter :
add_filter( 'twentyseventeen_custom_header_args', 'al17_custom_header_args' );
function al17_custom_header_args( $args ) {
// source https://kinsta.com/blog/twenty-seventeen-theme/
$args['default-image'] = get_theme_file_uri( '/images/al_domotic-2000x350.png' );
$args['height'] = 350 ;
return $args;
}
J’ai ainsi défini une nouvelle image par défaut et réglé la hauteur des images à 350 px.
Dans le répertoire /images/ du thème enfant, ajouter l’image (qui doit faire 2000 x 350 px au lieu de ce qui est défini par le thème twentyseventeen (2000 x 1200 px)
Ensuite, on va dans « personnaliser » le thème et on sélectionne la nouvelle image suggérée. Cependant, elle ne s’affiche pas correctement à ce stade, puisque des règles de style l’interdisent.
Je modifie donc style.css du thème enfant
.has-header-image .custom-header-media img {
height: 350px ;
object-fit: none;
min-height: 0;
}
@media screen and (min-width: 48em) {
.twentyseventeen-front-page.has-header-image .custom-header-media {
max-height: 550px;
}
}
On notera que je n’ai pas modifié le style pour les petits écrans. Je verrai ça plus tard.
Maintenant, l’image d’en-tête s’affiche comme je le voulais :
Modifier le nombre de sections de la page d’accueil
C’est très simple à réaliser, il suffit d’ajouter cette ligne dans functions.php du thème enfant :
add_filter( 'twentyseventeen_front_page_sections', function(){ return 6; } );
Et maintenant, au lieu de 4 sections paramétrables dans le menu « personnaliser », on en a 6 :
Autres modifications
Si je veux avoir une page d’accueil défilante, je m’inspirerai de l’article cité en introduction et de ces deux articles de wpmudev.com :
Et maintenant ?
Je vais utiliser ce thème enfant pour construire un tableau de bord domotique pour ma maison (voir la série d’article Un tableau de bord domotique).
par Anne-Laure DELPECH | 10 Mai 2017 | Thèmes
J’ai besoin d’utiliser un thème enfant du thème WordPress Twenty Seventeen. Dans cet article, j’explique comme le créer et le modifier légèrement. D’autres articles de cette série Un thème enfant de Twenty Seventeen expliqueront des modifications plus importantes.
Création d’un thème enfant
A l’aide de Filezilla (ou autre accès en FTP) créer un répertoire 2017-child dans wp-content/themes/ du site WordPress utilisé.
Y placer les trois fichiers suivants :
- functions.php
- style.css
- screenshot.png (optionnel) : une image de votre choix, au format 600 px de large et 450 px de haut.
Dans functions.php, placer le code suivant (source Codex WordPress) :
<?php
add_action( 'wp_enqueue_scripts', 'tw17_child_enqueue_styles' );
function tw17_child_enqueue_styles() {
$parent_style = 'twentyseventeen-style-css'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'tw17-child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
?>
Dans style.css , il doit y avoir l’en-tête suivant :
/*
Theme Name: Twenty Seventeen Child
Theme URI:
Description: Thème enfant de twenty seventeen
Author: ALD
Author URI: https://knowledge.parcours-performance.com/
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Tw17-child
-------------------------------------------------------------- */
Et voilà, maintenant le tableau de bord WordPress me propose le thème « Twenty Seventeen Child ».
Modifier le contenu de la page d’accueil
Par défaut, le thème est réglé avec la page « Accueil » comme page d’accueil statique. Je n’y touche pas.
Par contre, je veux modifier le contenu automatique de cette page.
La page d’accueil statique de Twenty Seventeen
Elle contient d’abord le contenu de la page réglée comme page d’accueil statique puis les contenus des 4 sections définies dans le menu « apparence / Personnaliser / Options du thème ».
Je crée 4 pages, intitulées « Caméra », « Nest », « Eedomus » et « Autres » et je les publie.
Ensuite dans le tableau de bord WordPress, je choisis « apparence / Personnaliser / Options du thème » puis j’affecte chacune des pages créées à l’une des 4 sections.
Pour aller plus loin, voir « How to Customize the Free Twenty Seventeen WordPress Theme« .
Créer des modèles de page
A l’aide de Filezilla (ou autre accès en FTP) copier le fichier page.php du thème Twenty Seventeen (répertoire wp-content/themes/twentyseventeen ).
Placer ce fichier dans un répertoire pages dans wp-content/themes/2017-child/ du site WordPress utilisé. Le renommer (pour moi al-dashboard-1.php) et en modifier le contenu pour que l’en-tête contienne un « template name » :
<?php
/**
* Template Name: maquette section 1 (caméra)
*/
Maintenant, si je vais modifier (ou créer) une page dans le site, dans la barre latérale de droite, dans le bloc « Attributs de la page », la liste déroulante « modèles » me propose « maquette section 1 (caméra) ».
Mais attention, si cette page doit être insérée dans la page d’accueil, seul le contenu créé avec l’éditeur WordPress s’affiche…
Et maintenant ?
Je vais utiliser ce thème enfant pour construire un tableau de bord domotique pour ma maison. J’en explique les étapes de construction dans la série d’article Un tableau de bord domotique. Lorsque je ferai des modifications du thème enfant que je viens de créer, je les expliquerai dans les articles suivants de cette série Un thème enfant de Twenty Seventeen
par Anne-Laure DELPECH | 6 Mai 2017 | Electronique - domotique
Je poursuis le travail pour créer un tableau de bord domotique de ma maison (série d’article Un tableau de bord domotique. Aujourd’hui, je veux afficher les données de mon thermostat Nest sur une page web.
Ce que je veux faire
J’ai un thermostat Nest auquel j’accède à distance (application android) avec l’email EMAIL et le mot de passe PASSNEST.
Je veux afficher les données de ce thermostat sur une page web hébergée sur Infomaniak. Cette page web est codée en PHP.
J’ai fait de nombreux essais infructueux avant de décider d’essayer d’utiliser le code créé par Guillaume Boudreau sur GitHub. Ca fonctionne à la perfection.
Comment faire ?
La première étape est de télécharger le code de Guillaume Boudreau sous forme d’un fichier zip. Ensuite on le décompresse et on place le fichier nest.class.php dans le répertoire principal de notre site.
Dans le répertoire /pi/ (en droits 740), je crée le fichier pw.php, avec droits 664. Il contient les infos suivantes (remplacer les données en majuscules par vos codes d’accès au thermostat) :
<?php
/*************************
Thermostat Nest
*************************/
// mail ety pw de home.nest.com
$nest_user = 'MAIL_NEST@MAIL' ;
$nest_pw = 'NEST_PW' ;
Ensuite, je crée un fichier fichier nest-test.php dans le répertoire principal de mon site et je lui attribue les droits d’accès 644. Ce fichier contient :
<?php
$path = dirname( __FILE__ );
define( 'ROOT',dirname( __FILE__ ) );
define( 'FILE_URL', "https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]" );
define( 'BASE_URL', "https://$_SERVER[HTTP_HOST]" );
$title = "Test suivi des Pi";
include ROOT . '/header-2016.php';
// contient les infos d'id et mot de passe des différents équipements
include_once ROOT . '/pi/pw.php';
// https://github.com/gboudreau/nest-api
require_once 'nest.class.php';
?>
<section class="capteurs">
<h2>Nest thermostat</h2>
<?php
// see https://github.com/gboudreau/nest-api/blob/master/examples.php
// Your Nest username and password.
$username = $nest_user ;
$password = $nest_pw ;
// The timezone you're in.
// See http://php.net/manual/en/timezones.php for the possible values.
date_default_timezone_set('Europe/Paris');
// Here's how to use this class:
$nest = new Nest($username, $password);
// Location information
$locations = $nest->getUserLocations();
// Devices list (thermostats)
$devices_serials = $nest->getDevices();
// Device information
$infos = $nest->getDeviceInfo($devices_serials[0]);
// Last 10 days energy report
$energy_report = $nest->getEnergyLatest();
function jlog($json) {
echo json_encode($json, JSON_PRETTY_PRINT) . "\r\n";
}
?>
<p>Location information : <?php jlog($locations); ?></p>
<p>Devices list (thermostats) : <?php jlog($devices_serials); ?></p>
<p>Device information : <?php jlog($infos); ?></p>
<h4>température : <?php printf("%.02f °%s\n", $infos->current_state->temperature, $infos->scale); ?></h4>
<p>Last 10 days energy report : <?php jlog($energy_report); ?></p>
</section>
<!-- div container ENDS here -->
<?php include_once ROOT . '/footer-2016.php'; ?>
Quant à header-2016.php , il contient :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title><?php echo $title ; ?></title>
<?php
// http://blog.lavoie.sl/2013/02/php-document-root-path-and-url-detection.html
$base_dir = __DIR__; // Absolute path to your installation, ex: /var/www/mywebsite
$doc_root = preg_replace("!${_SERVER['SCRIPT_NAME']}$!", '', $_SERVER['SCRIPT_FILENAME']); # ex: /var/www
$base_url = preg_replace("!^${doc_root}!", '', $base_dir); # ex: '' or '/mywebsite'
$protocol = empty($_SERVER['HTTPS']) ? 'http' : 'https';
$port = $_SERVER['SERVER_PORT'];
$disp_port = ($protocol == 'http' && $port == 80 || $protocol == 'https' && $port == 443) ? '' : ":$port";
$domain = $_SERVER['SERVER_NAME'];
// $full_url = "${protocol}://${domain}${disp_port}${base_url}"; # Ex: 'http://example.com', 'https://example.com/mywebsite', etc.
$full_url = "${protocol}://${domain}${base_url}";
// echo $full_url . "\n" ;
?>
<link rel="stylesheet" href="<?php echo $full_url . '/css/pi-stylesheet.css' ; ?>">
<!--
<script src="script.js"></script>
-->
</head>
<header>
<a data-flickr-embed="true" href="https://www.flickr.com/photos/mattwareham/9109691433" title="Raspberry Pi"><img src="https://c2.staticflickr.com/3/2888/9109691433_292d2aac49_m.jpg" width="240" height="160" alt="Raspberry Pi"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
<h1><a href="<?php echo $full_url ?>">suivi des Pi</a></h1>
</header>
<body>
<div class="container">
et footer-2016.php contient
</div> <!-- END container div -->
<footer>
<p>2017 Suivi des alertes et autres infos Pi</p>
</footer>
</body>
</html>
Le résultat
Ca n’est pas très lisible en l’état, sauf la température du couloir car il s’agit de données au format Json. Si je passe la première chaine de caractère dans https://jsonlint.com/, le texte devient plus lisible :
{
"name": "Lzo",
"address": null,
"city": "Tr\u00e9ogat, FR",
"postal_code": "29720",
"country": "FR",
"outside_temperature": 13.3,
"outside_humidity": 88,
"away": false,
"away_last_changed": "2015-03-16 17:51:33",
"thermostats": ["0XXXXXXXXXXXK"],
"protects": []
}
Et si je veux par exemple afficher la température et l’humidité extérieure selon le Nest, je place le code suivant dans ma page web :
<h4>température et humidité ext : <?php printf("%.02f °%s\n", $locations[0]->outside_temperature, $infos->scale); ?>, <?php printf("%.02f %s\n", $locations[0]->outside_humidity, "%"); ?></h4>
Ca m’affiche :
température et humidité ext : 13.30 °C , 87.00 %
Et voilà !
Et maintenant ?
Avant de voir comment stocker les données dans une base de données, je vais continuer à explorer la manière d’afficher les mesures de tous les capteurs de la maison. Les prochains articles à ce sujet seront également dans la série Un tableau de bord domotique.
par Anne-Laure DELPECH | 26 Avr 2017 | Raspberry Pi
Dans cette série d’articles, Caméra de surveillance et Raspberry Pi, nous avons vu comment diffuser le flux vidéo d’une caméra de surveillance sur une page web générée par un Raspberry Pi. Mais cette page ne peut être vue que de l’intérieur du réseau local puisque l’adresse IP du Pi, 192.168.10.134, est locale et n’existe pas à l’extérieur. Il en va de même pour le flux vidéo créé par ce Pi.
Attention : sécurité !
Avant de faire ce qui suit, il faut :
- changer le mot de passe du routeur ou de la box pour qu’il soit aussi compliqué que possible : on peut utiliser le générateur de mot de passe de LastPass pour en générer un.
- Dans la caméra de surveillance, supprimer l’utilisateur généré automatiquement par l’appareil et créer deux comptes utilisateurs, avec des identifiants et mots de passe complexes. L’un des comptes a les privilèges d’administrateur, l’autre de visiteur. Le mot de passe ne devrait pas contenir de caractères spéciaux.
- Dans motion.conf, s’assurer que l’url d’accès à la caméra est bien celle d’un simple visiteur, pas d’un administrateur.
Accès : adresse IP fixe ou dynamique
Pour accéder de l’extérieur à un appareil du réseau local, il faut remplir deux conditions :
- connaître l’IP publique du réseau local. Les fournisseurs d’accès à internet, tels que Orange ou Free, fournissent en général des adresses IP variables, mises à jour quotidiennement. Dans ce cas, on ne sait jamais quelle est l’adresse IP publique. Il faut donc un système pour mettre à jour l’IP publique à chaque changement. Quelques fournisseurs d’accès, comme OVH, attribuent une adresse publique fixe et c’est alors plus simple.
- Connaître le port de diffusion HTTP de l’équipement auquel on veut se connecter et indiquer à la box ou au routeur du réseau local qu’il est possible de s’y connecter de l’extérieur.
Connaître l’IP publique du réseau local
Lorsqu’on a un fournisseur d’accès qui n’attribue pas une adresse IP fixe, il faut utiliser des systèmes tels que décrits dans les trois article suivants :
Je n’ai pas vraiment essayé ces solutions puisque mon fournisseur d’ADSL est OVH, qui attribue des adresses IP fixes. Pour savoir quelle est cette IP, on peut soit aller dans son tableau de bord client (OVH pour moi), soit utiliser l’un ou l’autre de ces sites : http://www.portchecktool.com/ ou http://www.canyouseeme.org/
Dans mon cas, l’IP fixe est du genre 109.197.17.66, mais fort heureusement, si un internaute tape http://109.197.17.66 dans son navigateur, il arrive à une page lui demandant un identifiant et un mot de passe (celui de la box ou du routeur).
autoriser l’accès au port de diffusion à partir de l’extérieur
Le pi ‘Nautilus’ émet sur le port 80 son flux HTTP mais le flux vidéo qu’il récupère avec Motion émet sur le port 65535. Ce port est défini dans motion.conf (ou threadx.conf s’il y a plusieurs caméras), paramètre stream_port .
Normalement, même sur IP fixe, il est impossible pour un appareil externe d’accéder au contenu d’un appareil à l’intérieur du réseau local. Notre routeur (ou notre box) interdit qu’une requête HTTP entrante accède à un appareil qui lui est connecté. Si quelqu’un tape http://109.197.17.66:65635 , il arrive à une page d’erreur.
Il faut donc dire au routeur, ou à la box internet, d’ouvrir le port 65535 de l’appareil que l’on veut pouvoir atteindre de l’extérieur.
Pour celà, sur un routeur Netgear DGN2200v4, on va dans le menu ‘paramètres avancés’ du routeur, on choisit « configuration avancée » puis « ouverture de port/déclenchement de port ». On clique sur « ajouter un service » et on crée un service TCP et UDP comme suit :
Maintenant, si je tape http://109.197.17.66:65635 dans un navigateur internet, même à l’extérieur de chez moi, j’accède au flux vidéo généré par le nautilus, dont l’adresse IP interne est 192.168.10.134.
Je peux aussi vérifier la bonne ouverture du port avec les sites http://www.portchecktool.com/ ou http://www.canyouseeme.org/.
Et maintenant ?
Je peux accéder au flux vidéo de ma maison depuis n’importe où dans le monde. Il me reste maintenant à sécuriser la page web d’accès et à y récupérer d’autres informations de la maison.
par Anne-Laure DELPECH | 2 Avr 2017 | Raspberry Pi
Comment envoyer, à partir d’un Rasberry Pi, un fichier txt toutes les 20 minutes à un serveur distant ? La réponse passe par une connexion FTP et un cronjob, ou tâche planifiée.
Mes objectifs
Sur un Raspberry Pi, j’ai créé un script Shell qui relève la température, la date et l’heure, le nom du Pi et les écrit dans un fichier txt avec la chaîne de caractère définie dans la commande. Ce script, est décrit dans l’article « Raspberry Pi : Mesurer la température avec un capteur DS18B20. Le fichier texte créé s’appelle [hostname]-status.txt.
Maintenant je veux envoyer ce fichier texte à un serveur distant, en FTP.
Et je veux que cet envoi soit réalisé automatiquement toutes les 20 minutes.
Envoyer un fichier à un serveur distant en FTP
Pour connecter un Pi comme client à un serveur, il faut lui installer une application.
Pour installer le package FTP (j’ai choisi celui qui paraissait le plus léger) :
apt-get install ftp
Maintenant, je peux me connecter à un serveur distant.
Je crée le script send-status.sh, avec droits 744 (exécutable) :
#!/bin/bash
printenv
# check my Hostname variable
ThisHost=$(hostname)
date=$(date)
# There should be no ECHO in a CRON job
echo $ThisHost
# $1 is the variable appended to the file when executed
# example : ./send-status.sh essai would put "essai" in $1
# local file to send
FILE=$ThisHost"-status.txt"
# local directory to pick the file for upload
REPERTOIRE="/home/jf/temp/"
echo $REPERTOIRE$FILE
# https://www.raspberrypi.org/forums/viewtopic.php?t=68541&p=500070
# https://www.raspberrypi.org/forums/viewtopic.php?f=91&t=51222
#credentials to access the remote directory
USERNAME="USERNAME"
PASSWORD="PWORD"
SERVER="URL-DU-SERVEUR"
# remote server directory to upload backup
BACKUPDIR="/My-pi/"
echo "Attempting ftp upload~, ..."
cd $REPERTOIRE
ftp -in $SERVER <<EOMYF
user $USERNAME $PASSWORD
pwd
cd $BACKUPDIR
put $FILE
bye
EOMYF
Lorsque je l’éxécute en ligne de commande (), le serveur reçoit bien le fichier texte.
Le Pi affiche un message de succès (mais si) :
Attempting ftp upload~, ...
257 "/" is the current directory
Donc cette opération est correctement réalisée par la ligne de commande.
Réaliser cette action automatiquement (tâche planifiée)
Nous avons déjà essayé le script à la main avec
cd /home/jf/exec
./send-status.sh OK
Et ça fonctionnait. Maintenant, il faut définir l’environnement d’abord, puis indiquer la commande à exécuter et sa fréquence.
Planifier l’exécution du script
Sur le pi, éditer /etc/crontab avec crontab –e :
Y ajouter à la fin (utiliser SHIFT INS pour coller) :
#env
SHELL=/bin/bash
HOME=/home/jf
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
*/20 * * * * bash /home/jf/exec/send-status.sh OK > /dev/null 2>&1
@reboot bash /home/jf/exec/send-status.sh REBOOT
Attention : il doit obligatoirement y avoir une ligne vide à la fin de crontab….
Il faut créer une première fois /home/jf/snd/cron.log et lui donner des droits d’accès en écriture (664).
Le crontab ne démarrera pas tant qu’on aura pas fait un reboot, donc
reboot
Remarques sur les cron jobs et leur debogage, sur Pi
Un cron job se déclenche dans un environnement différent de celui d’un lancement manuel !
Dans le script j’ai ajouté printenv, qui affiche toutes les variables d’environnement.
Et en principe on peut envoyer le cron vers un fichier log mais sur le Pi en cours, je n’y arrive pas.
Comme le cronjob fonctionne, ça n’est pas grave.
Le fichier /var/log/syslog contient également beaucoup d’informations sur ce qui se passe dans le pi.
le cron job @reboot
la ligne @reboot bash /home/jf/exec/send-status.sh REBOOT exécute la tâche lors du reboot du Pi.
Si je reboot le pi ‘pi-name’, le serveur distant reçoit un fichier pi-name-status.txt contenant
pi hostname, time, statut, temperature
pi-name, Sun 2 Apr 17:13:35 CEST 2017, REBOOT, 21.875
Et maintenant
J’ai terminé cette opération. A vous maintenant !
par Anne-Laure DELPECH | 2 Avr 2017 | Electronique - domotique, Raspberry Pi
Le capteur DS18B20 est un capteur à coût réduit (10 € les 5 capteurs étanches avec câble de 1 mètre ou 8 € les 10 capteurs de base), qui utilise le protocole 1-wire. On peut connecter plusieurs capteurs DS18B20 en série sur un même port du Raspberry Pi. Nous allons voir ici comment connecter un seul thermomètre et en écrire la valeur dans un fichier txt par un script Shell ou PHP.
Connecter le capteur DS18B20
Une description détaillée du capteur DS18B20 est disponible en anglais ici. Le capteur peut mesurer des températures entre -55°C et +125°C et reste précis à 0.5°C sur l’intervalle -10°C à +85°C. Chaque capteur a un numéro de série unique (64 bits) et peut donc être identifié précisément.
Pour une seule sonde, on câble comme dans le schéma de droite (note du 29/12/2019 : ATTENTION, le schéma de droite est faux, le connecteur 1 est raccordé à GND, le connecteur 3 à VCC 3.3V !).
On peut mettre plusieurs capteurs en série (en théorie autant qu’on veut, en pratique il semble qu’il vaille mieux se limiter à 10 capteurs). Dans ce cas, on connecte une seule résistance 4.7 K et plusieurs sondes selon le schéma ci-dessous (note du 29/12/2019 : qui est juste, connecteur 1 raccordé à GND, 3 à VDD 3.3 V).
Paramétrer le Pi pour lire la / les températures
Editer /boot/config.txt pour qu’il contienne la ligne suivante puis redémarrer le Pi :
dtoverlay=w1-gpio
Tester le/les capteurs
En ligne de commande, taper les lignes suivantes
sudo modprobe w1-gpio
sudo modprobe w1-therm
cd /sys/bus/w1/devices
ls
cd 28-xxxx (changer pour correspondre aux numéros de série qui s'affichent)
cat w1_slave
Si le capteur est correctement câblé, on voit apparaître quelque chose qui ressemble à ce qui suit, où t=20187 signifie que la température est 20.187°C :
43 01 4b 46 7f ff 0d 10 bd : crc=bd YES
43 01 4b 46 7f ff 0d 10 bd t=20187
S’il y a plus d’un capteur de température, ls dans /sys/bus/w1/devices affichera plusieurs répertoires.
Installer les drivers sur le Pi
modprobe w1-gpio et modprobe w1-therm sont les drivers pour les capteurs de température. Ils doivent démarrer lorsque le Pi démarre. Pour celà, ajouter les lignes suivantes à /etc/modules :
w1‐gpio
w1‐therm
On redémarre le Pi et les drivers sont maintenant chargés.
Un script PHP pour lire les différentes températures
Noter que pour exécuter un script PHP en ligne de commande, il faut avoir préalablement installé PHP-CLI, avec la commande apt-get install php5-cli .
Le script read-temperature.php (exécutable) contient :
#!/usr/bin/env php
<?php
if (!defined("THERMOMETER_SENSOR_PATH")) {
define("THERMOMETER_SENSOR_PATH", "/sys/devices/w1_bus_master1/28-0000046766b0/w1_slave");
}
// Open resource file for thermometer
$thermometer = fopen(THERMOMETER_SENSOR_PATH, "r");
// Get the contents of the resource
$thermometerReadings = fread($thermometer, filesize(THERMOMETER_SENSOR_PATH));
// Close resource file for thermometer
fclose($thermometer);
// We're only interested in the 2nd line, and the value after the t= on the 2nd line
preg_match("/t=(.+)/", preg_split("/\n/", $thermometerReadings)[1], $matches);
$temperature = $matches[1] / 1000;
// Output the temperature
print $temperature . " °C. \n\r";
?>
On l’exécute avec la commande en ligne php read-temperature.php .
Dans mon cas, il affiche 20.875 ▒C.
Un script Shell pour lire la température
Voir ce projet, en anglais. Il lit plusieurs températures à la fois et les affiche à l’écran du Pi sous la forme 28-0000046766b0=20.937 .
Pour ma part, je n’ai qu’une seule température à lire et je veux l’écrire dans un fichier texte que j’enverrai ultérieurement à un serveur distant.
Je crée le script read-status.sh, (avec encodage UTF8 sans BOM, retours chariot UNIX et droits d’accès 744) qui contient :
#!/bin/bash
# afficher les variables d'environnement (utile pour un cron job)
printenv
# check my Hostname variable
ThisHost=$(hostname)
# Get UTC time
UtcNow= date -u
# There should be no ECHO in a CRON job, so comment this !
echo $ThisHost
# $1 is the variable appended to the file when executed
# example : ./send-status.sh essai would put "essai" in $1
# local file to write into
FILE=$ThisHost"-status.txt"
# local directory to write to file and pick it for upload
REPERTOIRE="/home/jf/temp/"
echo $REPERTOIRE$FILE
#Read last temperature
temperature=$(find /sys/bus/w1/devices/ -name "28-*" -exec cat {}/w1_slave \; | grep "t=" | awk -F "t=" '{print $2/1000}')
# create file and add content to it
cd $REPERTOIRE
cat > $FILE <<EOF # single > will empty and overwrite the file
pi hostname, time, statut, temperature
$ThisHost, $UtcNow, $1, $temperature
EOF
Attention, ce script ne lit que le dernier des capteurs de température.
On l’exécute avec la commande en ligne ./read-status.sh OK .
Dans le répertoire temp, j’ai maintenant un fichier piname-status.txt, qui contient :
pi hostname, time, statut, temperature
piname, Sun 2 Apr 15:01:44 CEST 2017, OK, 21.312
Et maintenant ?
Je peux lire la température mesurée par le Pi et la noter dans un fichier texte à chaque fois que j’exécute ./read-status.sh OK en commande en ligne.
La prochaine étape sera d’envoyer les informations du fichier texte à un serveur externe de manière automatique. J’ai déjà décrit l’utilisation d’un cron job dans l’article « Cron Job sur un hébergement mutualisé OVH » mais je vais le réaliser sur un Raspberry Pi. Cest l’objet de l’article « Raspberry Pi : envoyer en ftp un fichier à un serveur, par Cron Job ».
par Anne-Laure DELPECH | 31 Mar 2017 | Hébergement web
Excédée par le mauvais fonctionnement du serveur cloud managé de mon ancien fournisseur, je me suis tournée vers l’offre d’Infomaniak. Je suis stupéfaite par la clarté et la simplicité d’accès. Les prix sont plus élevés mais comme je dispose d’une solution satisfaisante de sauvegardes, je n’ai plus besoin d’acheter une solution complémentaire. Je m’y retrouve donc.
J’explique ici comment transférer un site existant vers son nouvel hébergement. Cet article est rédigé comme aide-mémoire pour moi mais il pourra également être utile à d’autres.
Situation initiale
Domaine testal.com géré par OVH, avec un hébergement sur un serveur cloud OVH. Le site est sous WordPress, avec un certificat SSL.
Je laisse les domaines sur OVH mais je transfère les sites sur des hébergements d’un serveur cloud managé d’Infomaniak.
Les grandes lignes du transfert
On procède en grandes étapes :
- sauvegarde des fichiers spécifiques et de la base de données du site initial ;
- création d’un site WordPress « blanc » sur l’hébergement Infomaniak ;
- Réglages du site WordPress Infomaniak ;
- Pointage des DNS vers le nouvel hébergement ;
- Activation d’un certificat SSL Let’s Encrypt.
C’est seulement durant la quatrième étape que les internautes sont dirigés vers la nouvelle version du site. Pendant la phase de réglages du site, on peut y accéder (visualisation et tableau de bord WordPress) grâce à un lien de prévisualisation très efficace.
Au fur et à mesure du processus, on note les informations importantes dans un fichier, par exemple la check-list de transfert que j’ai créée en divers formats :
Etape 1 sauvegarde du site initial ;
On veut conserver des fichiers spécifiques et la base de données.
Dans l’ancien hébergement, sauvegarder le contenu de wp-content (hors sauvegardes, on peut zapper les répertoires « langages », « cache » et « upgrade » ) et la base de données (avec un dump, ou directement via phpMyAdmin de l’hébergeur).
On a donc deux fichiers :
- Le contenu de la base de données, au nom du type exemple_2017-03-30_11-41-38.sql.zip
- Les fichiers spécifiques, au nom du type exemple_file_2017_03_30.zip
Etape 2 création d’un site WordPress « blanc » sur l’hébergement Infomaniak ;
2.1 Console d’administration
Accès à la console d’administration Infomaniak avec l’adresse mail et l’identifiant noté sur la check-list (dans les informations à conserver).
2.2 Créer un compte FTP dans l’hébergement infomaniak correspondant
Aller dans l’hébergement défini pour le site à transférer (Anne-Laure pour moi). Créer un utilisateur (accès à l’ensemble du répertoire ou un répertoire spécifique), dans l’onglet FTP/SSH, bouton « AJOUTER ».
Noter les informations suivantes dans la check- list (dans les informations à conserver, partie A) :
| Serveur hôte |
abcd.vps.infomaniak.com |
| Nom compte |
abcd_exemple |
| Mot de passe |
mot-de-passe2 |
2.3 Avec filezilla, transférer les fichiers dans le nouvel hébergement
Les fichiers zip de plus de 40 Mo doivent être uploadés avec filezilla et pas le gestionnaire de fichier en ligne d’infomaniak.
Dans Filezilla, on paramètre le compte comme dans cette copie d’écran, avec les informations notées lorsqu’on a créé le compte FTP de l’hébergement Infomaniak :
dans le compte FTP infomaniak, créer un répertoire ald-utils et y placer le fichier zippé des fichiers de l’ancien site (le répertoire wp-content, exemple_file_2017_03_30.zip). Ca prend du temps. En attendant, on peut créer le site wordpress.
2.4 Création du site WordPress Infomaniak ;
Dans le tableau de bord Infomaniak, cliquer sur le bouton « ajouter un site »
(en fait j’ai créé testal.com et pas test.com) Puis « enregistrer »
On arrive alors à une page « assistant de démarrage ». Cliquer sur « installer mon site wordPress » puis « installation avancée »
Puis installer
Noter l’identifiant WordPress et son mot de passe dans la check-list (partie B).
Nota si on avait déjà créé le site, mais pas installé WordPress, il suffit de cliquer sur le bouton « OFF » de la colonne WordPress pour le site concerné, directement dans l’écran Tableau de bord Infomaniak.
2.5 Créer une base de données à partir du tableau de bord Infomaniak
La base de données créées automatiquement par Infomaniak est malheureusement affublée d’un nom illisible, de type abcd_WP124026, et il n’est pas possible de modifier les informations textuelle pour spécifier à quel site se rapporte la base.
Je préfère donc créer une nouvelle base de données, avec un nom clair du type ‘abcd_testal’ que j’associe ensuite au site WordPress testal.com.
Pour cela, c’est l’onglet « bases de données » puis le bouton « ajouter une base de données ».
lui donner un nom intelligible, ici abcd_testal et activer « créer un nouvel utilisateur ».
Noter qu’on peut créer un mot de passe de bonne qualité simplement en cliquant sur le cadenas ouvert à droite de « mot de passe ». Le cadenas devient alors fermé et vert.
On note soigneusement les informations :
| serveur hôte |
abcd.myd.infomaniak.com |
| Nom de la base |
abcd_testal |
| Nom compte |
abcd_testal |
| Mot de passe |
mot-de-passe3 |
Puis cliquer sur Enregistrer
2.6 paramétrage du site WordPress Infomaniak
Pour prévisualiser le site avant de faire le transfert de DNS, Infomaniak a une url de prévisualisation très bien faite.
Pour pouvoir voir et modifier ce site qui n’existe pas pour les internautes, il faut signifier au serveur Infomaniak d’utiliser le lien preview plutôt que l’url habituelle du site.
Aller dans Site Web / Mon Site WordPress. La liste des sites de l’hébergement s’affiche. Cliquer sur le bouton « Configurer » du site en cours de transfert.
On voit que l’adresse du site est http://testal.com, (et aussi que la base de données est celle créée par Infomaniak).
Cliquer sur le bouton « paramètres ».
Dans « site internet à utiliser », choisir l’adresse preview, de type ‘’ http://abcdgalg.preview.infomaniak.website puis « valider ».
Dans paramètres du site, sélectionner le site internet à utiliser en mode preview, et pas l’adresse normale du site.
Copier-coller l’adresse dans la check-list. On peut par exemple cliquer sur le nom de la base de données et copier le nom du site dans la table prefix_options, champ siteurl
2.7 Modifier la base de données nouvellement créée
https://h2-phpmyadmin.infomaniak.ch/MySQLAdmin/
ouvrir la base de données créée manuellement (pas celle créée par infomaniak)
Y importer la bdd du site d’origine (exemple_2017-03-30_11-41-38.sql.zip)
dans la table prefix_options, modifier :
- siteurl site de prévisualisation http://abcdgalg.preview.infomaniak.website
- home site de prévisualisation http://abcdgalg.preview.infomaniak.website
Copier le prefixe utilisé, par exemple Zzr4ez_, pour les tables et le coller dans la checklist (zone D).
2.8 Décompresser et déplacer les fichiers zippés avec le ftp infomaniak
ftp en ligne https://admin2.infomaniak.com/ftp/index.php?sServer=abcd.vps.infomaniak.com
Dans ald-utils, décompresser exemple_file_2017_03_30.zip.
Ensuite, déplacer les fichiers au bon endroit dans le répertoire wp-content du site en cours de transfert. Je laisse les extensions et thèmes installés automatiquement par infomaniak. Je supprime le sous-répertoire 2017 créé par infomaniak dans le répertoire uploads.
2.9 modifier wp-config
Avec le FTP en ligne Infomaniak éditer wp-config.php
Il contient
define('DB_NAME', DB_NAME');
/** MySQL database username */
define('DB_USER', 'DB_USER');
/** MySQL database password */
define('DB_PASSWORD', 'DB_PASSWORD');
/** MySQL hostname */
define('DB_HOST', 'DB_HOST');
et plus loin
$table_prefix = 'table_prefix';
Remplacer les contenus par les informations suivantes, notées dans la checklist (parties C et D) :
- DB_NAME par le Nom de la base – abcd_testal
- DB_USER par le Nom compte – abcd_testal
- DB_PASSWORD par le Mot de passe – mot-de-passe3
- DB_HOST par le serveur hôte – abcd.myd.infomaniak.com
- et $table_prefix par le Préfixe de base de données – Zzr4ez_
Puis Enregistrer.
Maintenant, lorsqu’on visualise le site, on a le site initial.
2.10 Tester la vitesse du site avant transfert (optionnel)
On peut tester la vitesse des sites dans l’hébergement initial avant de le quitter. On peut utiliser les sites suivants et faire une copie d’écran pour conserver l’information.
Etape 3 Réglage du site (peut être fait après aussi)
Infomaniak installe automatiquement deux extensions intéressantes (les autres ne me semblent pas intéressantes) :
- Count Per Day, qui permet de suivre le nombre de visiteur et le nombre de fois où une page a été lue.
- WP Super Cache, qui accélère les sites.
On peut accéder au tableau de bord WordPress du futur site en suivant le lien de preview et en ajoutant wp-login à la fin. On se connecte avec les informations notées dans la partie B de la check-list.
Je réactive ces deux extensions (elles sont désactivées du fait du changement de base de données).
Etape 4 Pointage des DNS vers le nouvel hébergement
4.1 Pointer vers les bonnes adresses IP
Dans le tableau de bord Infomaniak, un bandeau indique que certains noms de domaines ne sont pas correctement liés à cet hébergement.
C’est normal puisqu’on n’a pas encore indiqué la nouvelle adresse IP de l’hébergement. Pour tous les internautes, l’url du site pointe toujours vers l’ancien hébergement.
Il suffit de cliquer sur « afficher les diagnostics » pour visualiser les recommandations d’Infomaniak :
| testal.com |
AAAA |
2001:db8:0:85a3:0:0:ac1f:8001 |
| testal.com |
A |
81.174.114.61 |
| www. testal.com |
CNAME |
testal.com. |
On peut suivre la propagation avec le tableau de bord Infomaniak ou whatsmydns.
4.2 Modifier l’URL du site
Comme dans le paragraphe 2.6 (paramétrage du site WordPress Infomaniak), on modifie le « site internet à utiliser » pour qu’il redevienne http://testal.com
Etape 5 Activation d’un certificat SSL Let’s Encrypt.
Installation d’un certificat SSL Let’s Encrypt
Cette action ne peut être réalisée que lorsque la propagation des nouveaux DNS est suffisante. Il y aura donc une période d’une durée variant entre quelques dizaines de minute et quelques heures (24 heures max) durant laquelle le site ne sera accessible qu’en http.
Dans le tableau de bord Infomaniak, choisir Certificats SSL dans le menu vertical à gauche.
Sélectionner le site pour lequel on veut un certificat puis cliquer sur « installer ».
Tant que les DNS ne sont pas suffisamment propagé (jusqu’au serveur Let’s Encrypt), on a un message d’erreur comme ci-dessous pour le certificat SSL gratuit :
Une fois que l’erreur a cessé, on sélectionne ce certificat et on l’installe.
Régler l’url utilisée pour le site (https)
Comme dans le paragraphe 2.6 (paramétrage du site WordPress Infomaniak), on modifie le « site internet à utiliser » pour qu’il redevienne https://testal.com . Cette option n’est proposée que lorsqu’on a installé un certificat SSL.
Autres réglages
Je n’ai pas eu besoin de modifier le .htaccess puisqu’Infomaniak gère tout seul.
Optionnel : mesurer la vitesse du site après transfert
https://gtmetrix.com/
https://testmysite.thinkwithgoogle.com/
Il n’y a aucune amélioration liée au nouvel hébergement.
Si maintenant j’active WP Super Cache, avec ses réglages par défaut. Les résultats sont les mêmes, assez décevants…
Et maintenant ?
Je vais maintenant travailler sur le transfert des serveurs de mail et sur l’optimisation de la vitesse des sites.
par Anne-Laure DELPECH | 10 Jan 2017 | astuces rapides, bureautique
Pour partager un contenu ou faire du dépannage, nous pouvons avoir besoin de partager notre écran avec d’autres personnes. C’est très simple si vous avez un compte GMail, il suffit d’utiliser Google Hangout.
Ce qu’il vous faut
Un compte Gmail et c’est tout.
Comment faire
Dans Gmail, cliquer sur la caméra dans la colonne de gauche de l’écran :
Inviter les destinataires
Un écran Google Hangout s’ouvre. Au bout de quelques secondes, l’écran nous invite à envoyer des invitations.
Les destinataires recoivent un mail avec un lien de connexion. c’est très simple pour eux.
Régler le type de partage d’écran
Une fois les invitations lancées, en attendant que tout le monde se connecte, on règle le type de partage d’écran :
- écran entier (onglet par défaut)
- fenêtre d’une application spécifique, choisie parmi celles qui sont déjà ouvertes (deuxième onglet)
Et voilà, notre écran, ou la fenêtre choisie, devient visible de nos invités.
Autres sources d’information
Le document d’aide de Google qui m’a aidé la première fois est Partager votre écran au cours d’un Hangout.
Commentaires récents