Tag: encodage

MacOS : résoudre le problème d’encodage Unicode des accents sous WordPress (ou autre CMS)

12 March 202206 juin 2017 by Matt Biscay · Lecture: 3 minutes

Des espaces après chaque caractère accentué

Pour le site du Kriya Yoga France, on me transmet régulièrement des fichiers PDF que je dois transformer en articles. Je fais donc la plupart du temps un copié-collé et ensuite je m’attèle à la mise en page dans l’éditeur WordPress.

Le hic, c’est que depuis l’année dernière, je travaille sous MacOS pour tout ce qui est développement web.

J’ouvre donc chaque PDF avec Preview – la visionneuse PDF installée par défaut – mais lorsque l’on colle le contenu du PDF dans un autre document, tous les caractères accentués sont suivis d’une espace (oui, on dit bien une espace en typographie) et des sauts de ligne apparaissent de nulle part. Clairement improductif.

Un conflit Unicode

Le problème réside entre un conflit lors de l’encodage Unicode entre caractères précomposés et caractères décomposés.

Un caractère précomposé ou caractère composite ou caractère décomposable est une entité Unicode qui peut aussi être définie comme une combinaison de plus de deux caractères.

Un caractère précomposé peut typiquement représenter une lettre surplombée d’un accent, comme é (lettre e avec accent aigu).

Techniquement, é (U+00E9) est un caractère qui peut être décomposé en son équivalent unicode à base de la lettre e (U+0065) et du caractère combinant accent aigu (U+0301).

La solution : UnicodeChecker

Heureusement, il existe un petit utilitaire, UnicodeChecker, qui permet de régler le problème très simplement. Voici la marche à suivre.

1. Lancez UnicodeChecker > File > New Utilities Window.

2. Copiez le texte de votre fichier PDF en mémoire (sélectionnez le texte puis Cmd+C ou Ctrl+C au clavier).

3. Dans UnicodeChecker, choississez l’option Normalize (6ème icône) et collez votre texte dans le champ Input puis appuyez sur Entrée. Cela donne :

MacOS : résoudre le problème d'encodage Unicode des accents sous Preview photo

Quatre champs sont proposés avec le résultat de la normalisation. Les deux champs qui nous importent sont NFC et NFKC, qui utilisent tout deux de l’Unicode précomposé, dans lequel l’accent fait partie intégrante du caractère accentué et non une entité à part.

4. Sélectionnez et copiez le texte contenu dans le champ NFC:

MacOS : résoudre le problème d'encodage Unicode des accents sous Preview photo 1

5. Collez maintenant le texte précédemment copié dans votre document ou l’éditeur de texte de votre CMS. A l’œil nu, rien ne change mais dans le rendu, votre texte est désormais correctement accentué, sans espaces inopportunes.

Séries TV: la scène délaisse le conteneur MP4 et passe au MKV

22 August 202113 avril 2016 by Matt Biscay · Lecture: 37 minutes

Quatre ans après le passage du codec XviD au codec x264, voici que la “scene” change de nouveau les règles du jeu : les fichiers SD et HD seront maintenant en .MKV (Matroska) et non plus en .MP4 pour les séries TV.

Depuis le 10 avril 2016, les nouvelles règles sont entrées en vigueur : si le codec x264 est bien gardé, le conteneur va lui changer – finis les fichiers portant l’extension MP4, ce seront maintenant des fichiers MKV (Matroska) que l’on pourra trouver sur la toile.

Les raisons du changement de conteneur

Concrètement, la scène justifie ce changement de conteneur avec les évolutions des standards et de la qualité des encodages.

Dans l’introduction des règles, on peut lire que “depuis la dernière révision du document qui date de 2012, TV-X264-SD a évolué et est devenu une section majeure à laquelle beaucoup de gens contribuent et dont beaucoup dépendent. Cette nouvelle révision vise à mettre à jour les standards pour 2016 et après.”

Ces règles sont à l’intention des groupes de la scène uniquement (qui s’échangent les fichiers entre eux via des topsites) mais la plupart des fichiers finiront entre les mains du grand public, partagés sur des sites publics.

Cela signifie donc que ces changements vont impacter des centaines de millions de personnes à travers le monde, indirectement, par simple effet domino.

Les règles sont très exhaustives et abordent tous les aspects techniques de l’encodage des fichiers : normes audio, vidéo, formats, sous-titres… jusqu’au nom des tags des fichiers mais ce qui importe avec la mouture 2016 est la partie concernant le conteneur.

Bash : réparer les tables MySQL en cas de crash photo

Bash : convertir une liste de fichiers MP3 en Ogg Vorbis (et vice-versa)

29 March 202208 juin 2015 by Matt Biscay · Lecture: 2 minutes

Pour les besoins du Centre de Kriya Yoga France, j’ai été amené à devoir convertir toute une floppée de fichiers MP3 au format Ogg Vorbis afin qu’il soient lus nativement en HTML5 dans les navigateurs compatibles avec la balise audio.

J’ai utilisé la commande avconv dans un terminal.

Convertir des MP3 en Ogg Vorbis

Voici le script que j’ai écrit pour me simplifier la vie et convertir ma liste de MP3 au format Ogg Vorbis:

for i in *.mp3; do avconv -i $i -codec:a libvorbis -aq 4 ${i/%mp3/ogg}; doneCode language: PHP (php)

Cela recherche tous les fichiers MP3 du répertoire dans lequel on se trouve, utilise le codec libvorbis, encode dans une qualité supérieure ou égale à 128Kbps et nomme le fichier avec la bonne extension (.ogg pour l’Ogg Vorbis).

Convertir des Ogg Vorbis en MP3

Si vous souhaitez convertir des fichiers Ogg Vorbis au format MP3 :

for i in *.ogg; do avconv -i $i -codec:a libmp3lame -aq 2 ${i/%ogg/mp3}; doneCode language: PHP (php)

Cela recherche tous les fichiers OGG du répertoire dans lequel on se trouve, utilise le codec libmp3lame, encode dans une qualité supérieure ou égale à 192Kbps et nomme le fichier avec la bonne extension (.mp3).

WordPress : afficher les accents dans des blocs texte colorisés par Crayon Syntax Highlighter

29 March 202215 janvier 2015 by Matt Biscay · Lecture: 2 minutes

Jusqu’à très récemment, il m’était tout à fait possible d’avoir des caractères accentués dans des blocs de texte sous WordPress en utilisant le plugin Crayon Syntax Highlighter pour coloriser le code.

Or depuis quelques temps tous les blocs en lang="text" ne permettent plus d’afficher les accents : je me retrouve avec des mots tronqués comme si le texte n’était pas encodé en UTF-8.

Problème : des caractères non-Unicode

Voici ce que donne la phrase “j’ai mangé une tarte à la crème à Noël” avec une colorisation par défaut avec Crayon Syntax Highlighter :

J'ai mangé une tarte à la crème à Noël.

Gloups! C’est totalement illisible, les accents deviennent un caractère mal encodé et certaines lettres adjacentes sont littéralement supprimées. Pas glop.

Solution : créer un alias

La solution que je propose est plus une rustine d’appoint qu’une véritable solution.

Je pense que le problème réside dans l’expression régulière des langages du plugin : certains langages (shell par exemple) n’acceptent pas les accents alors que d’autres (HTML par exemple) oui.

Je me suis rendu compte en changeant la langue du bloc que le langage batch affichait correctement les accents.

Comme je n’allais pas éditer tous mes articles pour changer le langage des blocs texte que j’ai utilisé jusqu’à maintenant, j’ai opté pour la création d’un alias.

Linux: convertir une video MPEG4 (mp4) au format Webm

8 April 202201 octobre 2013 by Matt Biscay · Lecture: 3 minutes

Aujourd’hui, si veut publier une vidéo sur Internet qui soit lisible sur quasiment toutes les plateformes nativement, il peut être très intéressant d’utiliser le format WebM (proposé pour HTML5).

WebM est un format multimédia ouvert basé sur un conteneur dérivé de Matroska, qui regroupe des flux vidéos encodés en VP8 et des flux audios encodés en Vorbis1. Ce format fait partie des formats vidéos proposés pour la balise video de HTML5.

Après avoir encodé nos vidéos H.264 (MP4) avec qt-faststart pour la lecture progressive, nous allons désormais proposer deux formats de vidéo lorsque nous intégrerons nos propres vidéos : le MP4 (format propriétaire) et le WebM (format libéré) pour un accès universel sur toutes les plateformes.

Encoder une seule vidéo MP4 en WebM

Il suffit d’utiliser avconv comme ceci :

avconv -i example.mp4 example.webmCode language: CSS (css)

ce qui nous donne comme résultat :

avconv version 0.8.6-4:0.8.6-0ubuntu0.12.04.1, Copyright (c) 2000-2013 the Libav developers
  built on Apr  2 2013 17:02:36 with gcc 4.6.3
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'example.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 1
    compatible_brands: mp42avc1
    creation_time   : 2013-09-24 10:52:45
  Duration: 00:43:27.39, start: 0.000000, bitrate: 294 kb/s
    Stream #0.0(eng): Video: h264 (Main), yuv420p, 320x240, 217 kb/s, 14.97 fps, 14.97 tbr, 2500 tbn, 5k tbc
    Metadata:
      creation_time   : 2013-09-24 11:23:01
    Stream #0.1(eng): Audio: aac, 32000 Hz, stereo, s16, 73 kb/s
    Metadata:
      creation_time   : 2013-09-24 11:23:01
[buffer @ 0x183ec80] w:320 h:240 pixfmt:yuv420p
[libvpx @ 0x183a4c0] v1.0.0
Output #0, webm, to 'example.webm':
  Metadata:
    major_brand     : mp42
    minor_version   : 1
    compatible_brands: mp42avc1
    creation_time   : 2013-09-24 10:52:45
    encoder         : Lavf53.21.1
    Stream #0.0(eng): Video: libvpx, yuv420p, 320x240, q=-1--1, 200 kb/s, 1k tbn, 14.97 tbc
    Metadata:
      creation_time   : 2013-09-24 11:23:01
    Stream #0.1(eng): Audio: libvorbis, 32000 Hz, stereo, s16
    Metadata:
      creation_time   : 2013-09-24 11:23:01
Stream mapping:
  Stream #0:0 -> #0:0 (h264 -> libvpx)
  Stream #0:1 -> #0:1 (aac -> libvorbis)
Press ctrl-c to stop encoding
frame=39032 fps= 39 q=0.0 Lsize=   86385kB time=2607.34 bitrate= 271.4kbits/s    
video:63500kB audio:21841kB global headers:4kB muxing overhead 1.217530%Code language: PHP (php)

Cela prend un peu de temps suivant la taille du fichier mais c’est assez simple.

Encoder toutes les vidéos d’un dossier en Webm

Allez, plus efficace : voyons maintenant comment nous pouvons traiter tout un lot de fichiers. Nous allons encoder tous les fichiers MP4 d’un dossier pour faire des fichiers WebM.

Tout d’abord, on exporte la liste des fichiers à traiter dans un fichier nommé list :

ls -1 *.mp4 | sed -e 's:\.[^./]*$::' > listCode language: PHP (php)

La commande sed nous permet ici de récupérer la liste des fichiers tout en omettant l’extension des fichiers.

Ensuite, on lance une boucle qui convertit chaque fichier au format WebM :

for i in `cat list`; do avconv -i "$i".mp4 "$i".webm ; doneCode language: JavaScript (javascript)

Et voilà! Simple et efficace.

Encoder une vidéo H.264 : utiliser qt-faststart pour la lecture progressive

1 April 202210 juin 2013 by Matt Biscay · Lecture: 2 minutes

Dernièrement, j’ai eu l’occasion de jouer avec l’intégration d’un lecteur vidéo en HTML5 pour jouer des vidéos encodées en H.264 (format .MP4) pour un client.

Il se trouve qu’aucune vidéo ne se lançait directement : le lecteur chargeait le fichier entièrement (plus de 60 Mo) avant de daigner jouer la vidéo.

La solution est toute simple : de la même manière que l’on peut créer un fichier JPG progressif (qui se charge de haut en bas, sans attendre le chargement total du fichier), il est possible de commencer à lire une vidéo sans que cette dernière soit totalement chargée, grâce à qt-faststart.

qt-faststart

qt-faststart est un outil inclus avec FFmpeg qui ré-arrange un fichier H.264 de manière à ce que le “moov atom” soit devant les données, ce qui facilite la lecture sans attendre le chargement complet.

Si votre fichier MP4 est déjà créé, lancez la commande ainsi :

qt-faststart source_file.mp4 destination_file.mp4Code language: CSS (css)

Si vous souhaitez créer un fichier avec l’option faststart nativement, lancez l’encodage FFmpeg avec l’option :

-movflags +faststart

Et voilà! Les vidéos streament proprement, avec une lecture progressive, sans attendre que le fichier complet soit téléchargé.

Performance du site : PageSpeed à 99%

8 April 202224 janvier 2013 by Matt Biscay · Lecture: 1 minute

Ah, ce moment magique durant lequel tu constates que ta note PageSpeed monte à 99%, via GTmetrix :

C’est beau, sachant qu’au niveau CSS, c’est la barre WordPress du haut qui génère l’overhead.

Prochaine étape : mettre les fichiers statiques sur un sous-domaine cookieless.

Séries TV: la scène plébiscite le x264 au détriment du XviD

26 July 202120 mars 2012 by Matt Biscay · Lecture: 18 minutes

Il y a quelques semaines, la “scene” s’est réunie pour discuter des standards des releases et a décidé d’abandonner le format XviD (.avi) au profit du format x264 (.mp4) pour les releases en SD (Simple Definition).

Analyse de la situation.

Pourquoi ce changement ?

La raison invoquée dans le document intitulé The SD x264 TV Releasing Standards 2012 est que “le x264 est devenu le codec vidéo le plus avancé de ces dernières années, capable de fournir une meilleure qualité et une meilleure compression que le XviD à de plus grandes résolutions SD. Il permet aussi un meilleur contrôle et une grande transparence des réglages d’encodage”.

Les nouvelles règles sont donc édictées et les groupes qui ne s’y conformeront pas prennent le risque de voir leurs releases “nuked”.

Ce document est signé par les groupes ASAP, BAJSKORV, C4TV, D2V, DiVERGE, FTP, KYR, LMAO, LOL, MOMENTUM, SYS, TLA et YesTV. Autant dire qu’à partir de maintenant, ce sera x264 pour tout le monde.

Qu’est-ce que cela change pour nous ?

Alors c’est simple, tout dépend de votre lecteur. Si vous lisez vos séries sur un iPod/iPhone/iPad, le MP4 ne posera aucun problème. Si votre platine DivX lit le MP4, aucun problème.

Si vous avez une Freebox, aucun problème non plus, avec les dernières mises à jour. Pensez à rebooter votre box pour récupérer le dernier firmware.

En gros, la scene a choisi un nouveau format bien moins répandu/lisible/universel que l’ancien. La raison évoquée (qualité d’image) me semble un peu éculée, étant donné que l’on reste en SD.

Toujours est-il que toutes les releases sont maintenant en x264, ce qui signe l’arrêt de la diffusion des séries en XviD à moyen et long terme.

Serveur dédié : changer les DNS du nom de domaine et le faire pointer vers le serveur

9 April 202224 février 2011 by Matt Biscay · Lecture: 4 minutes

Notre site est opérationnel sur le serveur en local, il ne nous reste plus qu’à faire pointer notre nom de domaine vers l’IP de notre serveur. Pour cela, nous devons changer l’adresse des serveurs DNS du domaine.

Cela prend à peu près 30 minutes à tout configurer. La propagation DNS peut prendre plusieurs heures toutefois.

Changer les serveurs DNS du nom de domaine

Cette opération s’effectue chez le registrar chez qui nous avons réservé le nom de domaine. Dans mon cas, il s’agit de GANDI.

Après s’être identifié sur le site, il suffit de cocher le domaine à modifier et de sélectionner l’option “changer/modifier les DNS” :

Serveur dédié : créer et activer un Virtual Host sous Apache

7 April 202220 février 2011 by Matt Biscay · Lecture: 2 minutes

Dans le tutoriel précédent, nous avons importé notre base de données et uploadé nos fichiers sur le serveur.

Il nous faut maitenant indiquer au serveur Apache où se trouvent nos fichiers pour qu’il puisse les servir.

L’ajout d’un virtual host (hôte virtuel) ne prend que quelques minutes.

Création du VirtualHost

Nous créons un fichier sous /etc/apache2/sites-available/ qui porte le nom de domaine de notre site, cela permet de s’y retrouver :

nano /etc/apache2/sites-available/www.skyminds.net

Serveur dédié : créer la base de données MySQL et importer WordPress

5 April 202217 février 2011 by Matt Biscay · Lecture: 2 minutes

Dans ce tutoriel, nous allons voir comment créer la base de données MySQL et importer notre base WordPress existante.

Ce tutoriel prend environ 15 minutes à réaliser. Tout se fait dans le terminal via une session SSH.

Création d’une base de données

On se connecte au serveur MySQL :

mysql -p -h localhost

Entrez votre mot de passe du compte root pour MySQL. Vous obtenez un prompt.

On crée une base de données UTF-8, avec une collation utf8_unicode_ci :

CREATE DATABASE skyminds_wp CHARACTER SET utf8 COLLATE utf8_unicode_ci;

Je vous recommande très fortement d’utiliser l’UTF-8 dès le départ. Cela évite bien des soucis qui pourraient survenir ultérieurement avec les caractères accentués.

Ecouter une webradio Icecast sur un iPhone ou iPod Touch

8 April 202213 décembre 2010 by Matt Biscay · Lecture: 2 minutes

Je me suis posé la question de savoir si ma webradio pouvait être écoutée sur un iPhone ou iPod Touch. Et bien sachez que ce n’est pas possible nativement : le lecteur Quicktime intégré à l’iPhone ou iPod Touch attend un protocole de flux (RTSP, MMS…) et non le protocole HTTP.

Il est toutefois possible de lire un flux Icecast avec une application, FStream.

Installation de l’application FStream

Rendez-vous dans l’AppStore et installez l’application FStream, qui a le gros avantage d’être gratuite ce qui est idéal pour les tests (je vous encourage à donner un tip aux développeurs des applications que vous utilisez).

FStream est capable de lire les formats audio OGG Vorbis (via HTTP), AAC/AAC+ (via HTTP), MP3 (via HTTP), WMA (via MMS/MMSH – ASF). Il reconnaît les playlists M3U – PLS – ASX et peut encoder des flux aux formatx MP3, AAC, AIFF, WAV.