Calculer le Time To First Byte (TTFB) d'un serveur photo

Calculer le Time To First Byte (TTFB) d’un serveur

Le Time to First Byte (TTFB) est le temps de chargement du premier octet, c’est la mesure qui nous permet d’évaluer la vitesse d’accès à un serveur.

Plus la mesure est basse et plus le serveur commencera à servir les ressources rapidement.

Calculer le Time To First Byte (TTFB) d'un serveur photo

Le ping comme moyen de contrôle

A l’origine le “ping” vient du bruit effectué par l’écho d’un sonar, le temps entre deux ping indiquant la distance parcourue par le signal pour détecter les fonds marins et revenir vers un navire.

Les sons courts n’étaient pas de bons signaux pour un capitaine, puisqu’ils indiquaient que le danger se rapprochait de la coque du navire.

Le ping correspond pour nous au TTFB car il nous permet de mesurer la réactivité d’un serveur ou d’une ressource réseau.

Le ping comme mesure du Time To First Byte

Le TTFB mesure le temps écoulé entre la requête d’un client qui effectue une requête HTTP et le premier octet de la page reçu dans le navigateur du client.

Ce temps se compose du temps de connexion au socket, du temps pris pour envoyer la requête HTTP, et du temps pris pour recevoir le premier octet de la page.

Le calcul du TTFB inclut toujours la latence du réseau lorsqu’il calcule le temps que prend une ressource avant de se charger.

Ce temps varie en fonction de plusieurs critères: l’éloignement entre le serveur et le client, la qualité de la connexion, ou les questions de connexion directe (réseau filaire) ou indirecte (WI-FI, 3G, etc) sont des facteurs modifiant le ping.

Un TTFB faible est perçu comme une indication d’un serveur bien configuré. Cela signifie que moins de calculs dynamiques sont effectués par le serveur ou alors que le cache (DNS, serveur, ou applicatif) est en place.

Calcul to TTFB avec curl

Il existe pas mal de services en ligne qui permettent de calculer le TTFB mais il est aussi très simple de le calculer soi-même, avec un simple terminal avec curl :

curl -o /dev/null -w "Connect: %{time_connect} TTFB: %{time_starttransfer} Total time: %{time_total} \n" https://www.skyminds.netCode language: JavaScript (javascript)

Ce qui nous donne le résultat suivant depuis chez moi:

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 54616    0 54616    0     0   153k      0 --:--:-- --:--:-- --:--:--  153k

Connect: 0,039729 TTFB: 0,269024 Total time: 0,347745Code language: CSS (css)

A titre indicatif, si on lance la requête depuis le serveur:

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 54616    0 54616    0     0   797k      0 --:--:-- --:--:-- --:--:--  808k

Connect: 0.001645 TTFB: 0.066232 Total time: 0.066848Code language: CSS (css)

On peut voir une sacrée différence, dû au temps de latence et à l’éloignement géographique.

Une autre raison pour laquelle il faut travailler sur la baisse du TTFB : si le TTFB met 270ms en France, à combien sera-t-il pour un visiteur Américain ou Australien ?

Concrètement, plus la connexion au serveur est rapide et plus le site se chargera tôt, ce qui a un fort impact sur le ranking du site. A surveiller donc !

Changement de design : SkyMinds 2016 photo 1

Changement de design : SkyMinds 2016

Ce week-end, pour fêter la nouvelle année et les 17 ans du site (et oui, déjà !), je me suis amusé à changer radicalement le thème graphique du site.

Nouvelle année, nouveau thème

Cela fait des années que je n’ai pas changé de thème : apparemment, mon thème précédent remonte à 2010, soit 6 ans. A l’échelle d’Internet, cela remonte quasiment à la préhistoire !

Il aura bien évolué : de XHTML transitional à strict, puis HTML5. D’abord basique puis responsive, avec microdata… on peut dire que je l’ai bien usé, sous toutes les coutures mais que j’ai envie maintenant de quelque chose d’autre.

La charte graphique convenait à une certaine époque mais il faut savoir faire table rase et se remettre en question pour essayer des choses différentes.

A titre de comparaison, voici à quoi ressemblait le site le 1er janvier au petit matin:

Changement de design : SkyMinds 2016 photo

et voici maintenant le nouveau thème, sobrement intitulé “SkyMinds 2016” :

Changement de design : SkyMinds 2016 photo 1

Les nouveautés

Pas mal de nouveautés sont apparues. Tout d’abord, le site est désormais entièrement responsive, ce qui n’était pas tout à fait le cas avant. J’avais – bonant malant – utilisé des responsive queries mais on ne peut pas dire que l’affichage était optimal sur toutes les tailles d’écran. Là, c’est bien mieux géré.

Ensuite, le thème utilise beaucoup moins d’images que le précédent : adieu l’image de fond pour le header, le dégradé en PNG de 1600 pixels de hauteur et les dégradés CSS pour les colonnes de contenus et le footer.

Je n’ai gardé que le logo, le reste n’est composé que de couleurs unies. Mine de rien, cela influe énormément sur le rendu des pages.

En ce qui concerne la CSS, je n’ai gardé que quelques styles que j’affectionne mais le principal a changé.

Ce changement graphique est pour moi l’occasion de donner un petit coup de peinture et surtout de faire le ménage dans ma feuille de style et les fichiers du thème de WordPress.

J’ai également désactivé certains plugins comme le plugin qui créait un menu responsive – maintenant géré nativement par le thème, ainsi que d’autres qui s’ajoutaient à la feuille de style principale.

Le rendu est donc plus moderne et devrait se charger plus rapidement, faisant appel à moins de ressources.

What’s next?

Pour l’instant, ce nouveau thème est clair et me convient plutôt bien. J’y apporte quelques petites touches çà et là afin d’harmoniser le tout mais je trouve que le résultat n’est pas trop mal.

Et vous, vos impressions?

Serveur dédié : réduire les connexions TIME_WAIT des sockets et optimiser TCP photo

Serveur dédié : optimiser la couche TCP

Aujourd’hui, nous allons mettre quelques petites astuces qui permettent d’optimiser un peu le temps de réaction du serveur Apache.

Nous allons commencer par réduire le nombre de connexions TIME_WAIT des sockets TCP et nous verrons ensuite comment optimiser un peu la couche TCP.

Réduire le TIME_WAIT des sockets TCP

De temps à autre, on tombe sur un serveur Apache qui possède des tonnes de connexions TIME_WAIT qui semblent errer dans les limbes. Même si ces connexions ne prennent pas autant de ressources que des connexions ESTABLISHED, il n’est pas vraiment utile de les garder aussi longtemps.

Commençons par faire un petit état des lieux de nos connexions :

netstat -nat | awk '{print $6}' | sort | uniq -c | sort -nCode language: JavaScript (javascript)

Résultat :

      1 established)
      1 Foreign
      2 ESTABLISHED
      3 FIN_WAIT1
     20 LISTEN
    228 TIME_WAIT

Nous avons donc 228 connexions dans les limbes en TIME_WAIT, qui sont totalement inutiles. Voyons donc comment nous pouvons réduire ce nombre.

Vérifiez ces valeurs:

cat /proc/sys/net/ipv4/tcp_fin_timeout
cat /proc/sys/net/ipv4/tcp_tw_recycle
cat /proc/sys/net/ipv4/tcp_tw_reuse

Vous devriez obtenir, respectivement, les valeurs 60 pour le timeout, 0 pour le reyclage et 0 pour la réutilisation.

Nous allons modifier ces valeurs pour réduire le timeout à 30 secondes, et recycler et réutiliser nos connexions :

echo 30 > /proc/sys/net/ipv4/tcp_fin_timeout
echo 1 > /proc/sys/net/ipv4/tcp_tw_recycle
echo 1 > /proc/sys/net/ipv4/tcp_tw_reuseCode language: JavaScript (javascript)

Pour que les changements soient persistants, il faut ajouter ces valeurs au fichier sysctl.conf.

Lire la suite

Serveur dédié : migration de MySQL vers MariaDB photo

Serveur dédié : migration de MySQL vers MariaDB

Aujourd’hui, on aborde la migration du serveur de base de données : nous passons de l’historique MySQL à son fork libre MariaDB.

Les raisons de remplacer Oracle MySQL avec MariaDB sont nombreuses.

MySQL vs MariaDB

Tout d’abord, MariaDB assure la compatibilité et la continuité de service avec MySQL. Les librairies sont exactement équivalentes et permettent d’utiliser les APIs et commandes de MySQL.

Les performances de MariaDB sont souvent meilleures que celles de MySQL, notamment grâce à l’amélioration de l’optimiseur de requêtes et l’intégration du moteur XtraDB de Percona, qui vise à remplacer InnoDB.

Un nouveau moteur de stockage, Aria, a été écrit pour devenir un moteur à la fois transactionnel et non-transactionnel pour remplacer MyISAM. Il pourrait même être inclus dans de prochaines versions de MySQL.

Dans un autre registre, Oracle semble ne pas vouloir garder le modèle libre de MySQL : pas mal de choses (rapports de bugs, scénarios de test) sont maintenant disponibles uniquement pour les grands comptes payants.

Michael “Monty” Widenius, le fondateur de MySQL AB, a quitté Sun Microsystems lors de son rachat par Oracle pour créer Monty Program AB puis la Fondation MariaDB. Il est rapidement rejoint par de nombreux développeurs originaux de MySQL.

Ces développeurs maîtrisent donc parfaitement le code source du système de gestion de base de données, cela promet encore de nombreuses nouveautés et optimisations pour les versions suivantes.

Installation de MariaDB

Avant toute chose, faîtes une sauvegarde de vos bases de données. On ne sait jamais.

Notre serveur dédié tourne toujours sur Debian stable et les paquets de MariaDB sont disponibles dans les dépôts officiels.

mariadb-seal-logo

MariaDB est un “drop-in replacement” pour MySQL, c’est -à-dire qu’il suffit de désinstaller MySQL et d’installer MariaDB : rien ne change, pas de pertes de données, pas de lignes de code à changer, tout est compatible.

L’installation est donc très simple :

apt-get install mariadb-serverCode language: JavaScript (javascript)

Résultat:

Reading package lists... Done
Building dependency tree       
Reading state information... Done
The following extra packages will be installed:
  mariadb-client-10.0 mariadb-client-core-10.0 mariadb-common
  mariadb-server-10.0 mariadb-server-core-10.0
Suggested packages:
  mariadb-test tinyca
The following packages will be REMOVED:
  mysql-client-5.6 mysql-client-core-5.6 mysql-server mysql-server-5.6
  mysql-server-core-5.6
The following NEW packages will be installed:
  mariadb-client-10.0 mariadb-client-core-10.0 mariadb-common mariadb-server
  mariadb-server-10.0 mariadb-server-core-10.0
0 upgraded, 6 newly installed, 5 to remove and 0 not upgraded.
Need to get 11.8 MB of archives.
After this operation, 18.4 MB disk space will be freed.Code language: CSS (css)

L’installation vous demandera de donner un mot de passe pour l’utilisateur root. De manière à assurer la continuité avec MySQL, j’ai redonné le même mot de passe que pour mon utilisateur root sous MySQL.

Lire la suite

hourglass

Serveur dédié : optimiser toutes les images GIF avec GIFsicle

Après avoir vu comment optimiser les fichiers JPG et PNG sur le serveur, voici comment optimiser les fichiers GIF.

hourglass

Comme dans le tutoriel précédent, nous allons optimiser toutes nos images d’un seul coup, de manière à charger nos pages plus rapidement et à consommer moins de bande passante.

Pour optimiser les fichiers GIF, j’ai choisi GIFsicle.

L’installation et la compression de vos répertoires d’images prend à peine quelques minutes.

Installation de GIFsicle

On installe le paquet :

apt-get install gifsicleCode language: JavaScript (javascript)

et on RTFM :

man gifsicle

Optimisation des PNG

Pour optimiser les fichiers GIF, il suffit de lancer :

gifsicle --batch -O3 *.gifCode language: CSS (css)

L’argument --batch permet de gérer plusieurs fichiers et -O3 permet la meilleure optimisation possible, en essayant plusieurs combinaisons de compression pour trouver le ratio le plus intéressant.

Lire la suite

MySQL : convertir les tables MyISAM au format InnoDB photo

MySQL : convertir les tables MyISAM au format InnoDB

MySQL : MyISAM et InnoDB

A ses débuts, MySQL utilisait le moteur de stockage MyISAM.

C’est la raison pour laquelle on retrouve beaucoup d’exemples de création de tables sur Internet avec l’instruction engine=MyISAM (ce qui, au passage, peut faire planter pas mal de créations de bases/tables).

Aujourd’hui, le moteur de stockage par défaut de MySQL est InnoDB.

MyISAM n’est plus activement développé, à l’inverse d’InnoDB. Il est donc recommandé de convertir les tables MyISAM au format InnoDB, afin de bénéficier des dernières optimisations de performance du nouveau moteur.

innodb-myisam-mysql

Le moteur InnoDB

InnoDB est un moteur de stockage inclus d’origine dans toutes les distributions fournies par MySQL AB. Son principal avantage par rapport aux autres moteurs de stockage de MySQL est qu’il permet des transactions ACID (Atomiques, Cohérentes, Isolées et Durables), ainsi que la gestion des clés étrangères (avec vérification de la cohérence).

Toutes les bases de données sont stockées au même endroit. Par défaut dans le fichier ibdata1 qui, sous les systèmes de type unix, se trouve généralement dans /var/lib/mysql. Il est également possible d’utiliser plusieurs fichiers ou même d’utiliser directement une ou plusieurs partitions sur le disque en mode RAW.

Ce moteur de base de données utilise aussi deux fichiers de logs, d’habitude ib_logfile0 et ib_logfile1. Les fichiers de définitions de table .frm sont également dans un dossier au nom de la base comme pour MyISAM.

Depuis sa version 5.5, MySQL utilise InnoDB comme moteur par défaut.

Comment connaitre le format actuel de vos tables ?

Pour faire un petit état des lieux du format actuel des tables de votre base de données, il suffit de vous identifier sur le serveur SQL et de lancer cette requête :

SHOW TABLE STATUS FROM `database`;Code language: JavaScript (javascript)

Il vous suffit de remplacer database par le nom de votre base de données et de regarder la valeur de la colonne Engine.

Convertir les tables MyISAM au format InnoDB

Pour convertir des tables MyISAM au format InnoDB, il suffit de lancer une requête SQL va grandement nous simplifier la vie:

SELECT CONCAT('ALTER TABLE ',table_schema,'.',table_name,' ENGINE=InnoDB;')
FROM information_schema.tables
WHERE 1=1
    AND engine = 'MyISAM'
    AND table_schema NOT IN ('information_schema', 'mysql', 'performance_schema');Code language: JavaScript (javascript)

Le résultat de cette requête est une liste bien formatée de requêtes à lancer pour que toutes nos tables soient converties au format InnoDB.

Voici le résultat de cette requête sur le serveur :

+-----------------------------------------------------------+
| CONCAT('ALTER TABLE ',table_schema,'.',table_name,' ENGINE=InnoDB;')   |
+-----------------------------------------------------------+
| ALTER TABLE blog.blog_wc_comments_subscription ENGINE=InnoDB;
| ALTER TABLE blog.blog_wc_phrases ENGINE=InnoDB;
| ALTER TABLE blog.blog_wc_users_voted ENGINE=InnoDB;
+-----------------------------------------------------------+Code language: JavaScript (javascript)

Toutes les tables des bases de données qui sont au format MyISAM au format InnoDB sont listées, à l’exception des tables utilisées dans la gestion de MySQL (‘information_schema’, ‘mysql’, ‘performance_schema’) qui doivent rester en MyISAM.

Etape de Conversion

Il vous suffit ensuite de lancer cette liste de requêtes ALTER TABLE sous MySQL, Adminer ou PHPMyAdmin pour convertir vos tables. Lancez la liste de commandes que vous venez de trouver :

ALTER TABLE blog.blog_wc_comments_subscription ENGINE=InnoDB;
ALTER TABLE blog.blog_wc_phrases ENGINE=InnoDB;
ALTER TABLE blog.blog_wc_users_voted ENGINE=InnoDB;

Et voilà, vos tables MyISAM sont maintenant devenues des tables InnoDB.

Lire la suite

PHP : résoudre l'erreur "Redefining already defined constructor for class ..." photo

Serveur dédié : mise à jour vers PHP 5.6

php-logo

Je viens de mettre à jour la version de PHP sur le serveur, histoire de tourner sur une version plus récente et bénéficiant des dernières nouveautés.

En moins de 3 minutes, je suis passé de PHP 5.4.39 à PHP 5.6.7 sur ma Debian, tout en douceur.

Voici la marche à suivre.

Ajout des dépôts Dotdeb

Si vous ne l’avez déjà fait, ajoutez les dépôts Dotdeb de Guillaume Plessis:

nano /etc/apt/sources.listCode language: PHP (php)

et ajoutez-y:

# Dotdeb default
deb http://packages.dotdeb.org stable all
deb-src http://packages.dotdeb.org stable all
# PHP 5.6 on Debian 7 (without Zend thread safety)
deb http://packages.dotdeb.org wheezy-php56 all
deb-src http://packages.dotdeb.org wheezy-php56 allCode language: PHP (php)

Mise à jour de PHP

On met à jour nos dépôts :

apt-get updateCode language: JavaScript (javascript)

et on met à jour notre version de PHP-FPM avec:

apt-get install php5-fpm php5-ssh2 php-pear php5 php5-devCode language: JavaScript (javascript)

Résultat :

The following packages will be REMOVED:
  libssh2-php
The following NEW packages will be installed:
  libvpx1 php5-ssh2
The following packages will be upgraded:
  php5-cli php5-common php5-curl php5-fpm php5-gd php5-mcrypt php5-mysqlnd php-pear php5 php5-devCode language: PHP (php)

Cela met à jour les paquets PHP qui dépendent de la nouvelle version.

Bientôt PHP7!

Au passage, l’installation demande quoi faire avec les fichiers de configuration : j’ai choisi de garder les miens, pour ne pas avoir à tout reconfigurer.

Je pense que je partirai sur une configuration de base lorsque l’on passera à PHP7, qui devrait enfin faire décoller les performances et dont la sortie est prévue le 15 novembre 2015.

Il ne reste plus qu’à redémarrer Apache et PHP :

service apache2 restart && service php5-fpm restart

Et voilà! Une mise à jour toute en douceur et sans accrocs.

WordPress : valider le code des meta oEmbeds de YouTube, DailyMotion, Vimeo et SlideShare photo

WordPress : valider le code des meta oEmbeds de YouTube, DailyMotion, Vimeo et SlideShare

Allez, je continue ma petite série sur la gestion de l’intégration oEmbed sous WordPress.

WordPress gère nativement plusieurs services : copiez-collez l’adresse d’une vidéo YouTube dans un article et hop, vous obtenez une vidéo entièrement intégrée, avec un code plutôt propre mais pas entièrement valide.

oembed-all-service

Je vous propose donc de valider le code généré par WordPress lorsqu’il vient de sites tiers comme YouTube, DailyMotion, Vimeo ou SlideShare.

Valider le code oEmbed de YouTube

Il suffit de lancer les quatre requêtes SQL suivantes :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" allowfullscreen', 'style="border: none"');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, "wmode=transparent' frameborder='0'", "wmode=transparent' style='border: none'");Code language: JavaScript (javascript)

Valider le code oEmbed de Dailymotion

Pour le code de Dailymotion, ces deux requêtes suffisent :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0">', 'style="border: none">');Code language: JavaScript (javascript)

Valider le code oEmbed de Vimeo

Quatre requêtes pour Vimeo :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" title=', 'title=');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, ' webkitallowfullscreen mozallowfullscreen allowfullscreen', '');Code language: JavaScript (javascript)

Valider le code oEmbed de SlideShare

Et deux requêtes pour SlideShare :

UPDATE wp_postmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');
UPDATE wp_commentmeta SET meta_value = REPLACE (meta_value, 'frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen>', 'style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px;overflow:auto;border:none">');Code language: JavaScript (javascript)

Et voilà, le code est plus propre, plus valide et utilise CSS plutôt que des balises propriétaires.

WordPress : remplacer le vieux code Dailymotion de vos articles par une URL oEmbed photo 1

WordPress : mettre à jour le code Dailymotion

Cet article est le pendant de l’article pour remplacer le vieux code YouTube de vos articles WordPress par une URL oEmbed mais pour Dailymotion.

Voici donc les manipulations à effectuer pour transformer les vieux codes d’intégration avec les URL oEmbed de WordPress.

Nous utilisons toujours le plugin Search Regex pour WordPress avec la case regex activée et le signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer les liens swf/video de Dailymotion

J’appelle ces liens “swf/video” parce qu’on retrouve cela dans l’URL de l’intégration Flash. Il vaut mieux lancer cette substitution en premier.

On recherche :

#<object data="http://www.dailymotion.com/swf/video/(.*)" width="300" height="150">(.*)</object>#Code language: HTML, XML (xml)

Et on remplace par :

https://www.dailymotion.com/video/$2Code language: JavaScript (javascript)

Remplacer les liens swf de Dailymotion

On s’occupe maintenant des liens qui contiennent juste le terme “swf”.

On recherche :

#<object data="http://www.dailymotion.com/swf/(.*)" width="300" height="150">(.*)</object>#Code language: HTML, XML (xml)

Et on remplace par :

https://www.dailymotion.com/video/$2Code language: JavaScript (javascript)

Voilà, vous venez de nettoyer les anciens codes d’intégration Flash pour les remplacer par des URI oEmbed natives. Propre.

WordPress : remplacer le vieux code YouTube de vos articles par une URL oEmbed photo

WordPress : mettre à jour le code Youtube

Le code des plateformes – vidéos ou autre – évolue et il n’est pas rare de tomber sur de vieux articles qui embarquent un vieux code embed pour afficher des vidéos.

Si votre site a quelques années, il y a plusieurs méthodes d’intégration – plus ou moins optimisées – dont certaines ne s’afficheront pas (celles utilisant le plugin Flash par exemple) sur une tablette ou un smartphone.

youtube

Sur SkyMinds, je me suis dit que ce serait sympa d’avoir un système unifié : toutes les vidéos YouTube seront automatiquement insérées par WordPress en utilisant la méthode native, à savoir oEmbed.

Pour ce faire, j’utilise le plugin Search Regex qui permet d’intervenir facilement sur la base de données pour effectuer des changements en masse, tout en proposant la visualisation des changements avant que ces derniers ne soient appliqués.

Toutes les manipulations sont à effectuer avec Search Regex, en activant la case regex. Je me sers du signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer le vieux code d’intégration flash de YouTube

Avec Search Regex, on cherche :

<object [^>]*><param name="movie" value="https:\/\/www\.youtube\.com\/v\/([^"&?]+)">.*?<\/object>Code language: HTML, XML (xml)

Et on remplace par :

https://www.youtube.com/watch?v=$1Code language: JavaScript (javascript)

Lire la suite

Mise à jour du site du Centre de Kriya Yoga France : v4.0 photo

Mise à jour du site du Centre de Kriya Yoga France : v4.0

Il y a quelques mois de cela, le site du Centre de Kriya Yoga France a eu droit à un léger rafraichissement de son style : un peu plus de lisibilité, moins de fonds colorés, un peu plus de finesse dans les traits.

C’était juste un petit coup de plumeau mais comme j’ai oublié de vous en parler, voici une petite capture d’écran :

Mais cette semaine, j’ai retroussé mes manches et suis totalement passé à l’offensive :

  • redéfinition des couleurs
  • création du logo et des favicons
  • création de la boutique totalement intégrée à WordPress
  • mode responsive/adaptive pour smartphones et tablettes
  • conversion des pages de contenus en articles et classement des articles par catégories, en silos
  • modification des permaliens pour n’utiliser que le nom des articles
  • intégration des réseaux sociaux avec les comptes dédiés au CKYF
  • et de multiples essais en trial and error !

Note pour plus tard : si, lors de la prévisualisation d’un thème WordPress, rien ne s’affiche ou si la personnalisation (customizer) ne répond pas, c’est qu’un plugin met la zone au niveau du javascript. Dans mon cas, c’était pdf-js.

Without further ado, je suis assez content de vous présenter la version 4.0 :

Pas mal de changements mais je pense que cela en vaut vraiment le coup. Le site devenait vieillissant et n’était plus adapté aux smartphones et tablettes, et l’ancienne boutique (Cubecart) était une horreur à gérer.

Tout est beaucoup plus simple maintenant, avec de jolis graphiques pour les commandes, la gestion du stock… bref, c’est bien mieux pour moi à gérer et plus simple pour le CKYF.

Qu’en pensez-vous ?