Category

Web/Tech

Category

Tous les tutoriels et articles de barbus orientés technique.

Voici un résumé du reportage du Gadget Show, une émission diffusée sur Channel 5 au Royaume-Uni, sur la construction d’un simulateur de jeu pour un FPS :

Ce simulateur, unique en son genre, transforme le jeu Battlefield 3 en réalité : vous pouvez bouger, viser, tirer et être touché, immergé dans un environnement à 360 degrés.

Le simulateur vous permet de contrôler les mouvements du personnage avec votre corps grâce au tapis à bille multi-directionnel.

Il y a également le dôme de projection Igloo Vision, 12 marqueurs de paintball qui permettent au joueur, en temps réel, de ressentir les coups de l’ennemi, un système d’arme sans fil, des lumières d’ambiance LED et une caméra Kinect hackée pour l’occasion.

Impressionnant comme système. Cela me rappelle la veste pour ressentir les impacts de balles. Pour un fan de FPS, ce doit être le pied total.

Dropbox ou la synchronisation des fichiers sur de multiples supports

Dropbox fait partie de ces outils que j’utilise quotidiennement et qui me facilite la vie. Ce logiciel de stockage de données en ligne vous permet de synchroniser des fichiers et dossiers entre votre ordinateur et un serveur de Dropbox. Vous pourrez ensuite consulter ces fichiers et dossiers depuis n’importe quel ordinateur, tablette ou smartphone.

dropbox

Pour moi, par exemple, cela m’évite d’avoir à me promener avec ma clé USB. Mes fichiers sont sur mon ordinateur, synchronisés et je peux y avoir accès dans n’importe quelle salle de classe pourvu que j’ai accès à internet. Pareil sur mon téléphone (en 3G) ou ma tablette (en wifi). Extrêmement pratique.

Installer Dropbox

Commencer par créer un compte sur le site de Dropbox.

Vous pouvez ouvrir un compte gratuit qui vous donne droit à 2 Go de stockage sur le site, extensibles à 18 Go grâce au parrainage (2 Go + 16 Go). Si vous avez besoin de plus d’espace, cela sera payant.

Après inscription sur le site et installation du logiciel, un nouveau dossier « Dropbox » est créé dans votre répertoire utilisateur. C’est dans ce répertoire que vous devez mettre tous les fichiers et dossiers que vous voulez synchroniser. Dès que vous placez un fichier dans ce répertoire, il est automatiquement uploadé sur votre compte sur le site de Dropbox.

Grandement recommandé. Inscrivez-vous ici et gagnez 500 Mo supplémentaire en devenant mon filleul.

Un groupe de chercheurs du Massachusetts Institute of Technology (MIT) et de la New York University (NYU) ont créé une carte interactive de la langue anglaise en utilisant plus de 7,5 millions d’images trouvées sur internet.

Ces images sont triées selon les relations sémantiques entre les mot et, selon les chercheurs, ce projet explore « la relation entre les similarités visuelles et sémantiques ».

Voici ce que cela donne au final :

english-visual-map

Chaque pixel de l’image est relatif à un des 53 464 noms communs et représente environ 140 images, donnant les caractéristiques visuelles de chaque mot : cela peut être une image précise, un résumé, une définition. La liste des noms vient de Wordnet.

C’est assez génial je trouve : essayez la carte.

transmission-iconAujourd’hui, on apprend comment monter une seedbox sur un serveur dédié avec Transmission.

Une seedbox est un serveur privé dédié au téléchargement et à l’émission de fichiers, utilisant le protocole BitTorrent, connecté à des réseaux à très haut débit symétrique, souvent à 100 MBits/s et plus.

Les fichiers sont envoyés à la Seedbox par les autres utilisateurs du réseau BitTorrent, et de là ils peuvent être récupérés depuis un ordinateur personnel, à la vitesse maximale de sa connexion (ADSL, fibre optique, 3G…) et ceci par les protocoles FTP, HTTP, SFTP, rsync, SSH.

Etape 1 : installation de Transmission

Sur le serveur, dans le terminal, on installe Transmission :

apt-get install transmission-daemon

Le serveur se lance dès l’installation, on l’arrête :

/etc/init.d/transmission-daemon stop

Etape 2 : configurer Transmission

On édite sa configuration :

nano /etc/transmission-daemon/settings.json

Eléments à modifier selon votre configuration :

  • « download-dir »: « /home/files »,
  • « incomplete-dir »: « /home/files/tmp »,
  • « rpc-password »: « votre-mot-de-passe »,
  • « rpc-username »: « votre-login »,
  • « rpc-whitelist »: « 254.254.254.254 »,

Le mot de passe est hashé au redémarrage du serveur, vous pouvez le rentrer en clair. Le serveur tourne par défaut sur le port 51413 et le webadmin sur le port 9091. Pensez à whitelister votre adresse IP.

Sommaire de la série Monter un serveur dédié de A à Z

  1. Serveur dédié : installation d’Apache, PHP, MySQL et Webmin
  2. Serveur dédié : créer la base de données MySQL et importer WordPress
  3. Serveur dédié : créer et activer un Virtual Host sous Apache
  4. Serveur dédié : changer les DNS du nom de domaine et le faire pointer vers le serveur
  5. Serveur dédié : sécurisation des services avec iptables et fail2ban
  6. Serveur dédié : sécurisation de la couche TCP/IP
  7. Serveur dédié : création d’un serveur mail Postfix (sécurisé avec Saslauthd et certificat SSL) et Courier (accès POP et IMAP) utilisant une base MySQL d’utilisateurs/domaines virtuels
  8. Serveur dédié : sécuriser Apache 2 avec ModSecurity
  9. Serveur dédié : CHMOD récursif sur des fichiers ou répertoires en ligne de commande
  10. Serveur dédié : installer APC comme système de cache et configurer Varnish comme reverse-proxy pour Apache pour améliorer les performances
  11. Serveur dédié : afficher la véritable IP derrière un reverse-proxy comme Varnish
  12. Serveur dédié : intégrer SSH à WordPress pour mettre à jour le core, les plugins et les thèmes
  13. Serveur dédié : installer la dernière version d’APC par SVN
  14. Serveur dédié : analyse des performances du serveur
  15. Serveur dédié : mettre à jour le noyau Debian de la Kimsufi
  16. Serveur dédié : sauvegarde automatique des fichiers avec Backup Manager sur le serveur de sauvegarde OVH
  17. Serveur dédié : configurer la limite mémoire pour PHP et Suhosin
  18. Bash : supprimer tous les fichiers et sous-répertoires d’un répertoire
  19. Serveur dédié : impossible de se connecter à un port distant
  20. Rsync: rapatrier les fichiers du serveur à la maison
  21. Bash : réparer les tables MySQL en cas de crash
  22. Serveur dédié : création d’une seedbox avec Transmission
  23. Serveur dédié : des paquets LAMP à jour sous Debian
  24. Serveur dédié : mise à jour vers Debian 7 Wheezy
  25. Serveur dédié : activer X11 forwarding pour SSH
  26. Serveur dédié : optimiser toutes les images JPG et PNG avec OptiPNG et JpegOptim
  27. Postfix : résoudre l’erreur « fatal: www-data(33): message file too big »
  28. Serveur dédié : mise en place de l’IPv6
  29. WordPress : accorder les bonnes permissions aux fichiers et dossiers avec chown et chmod
  30. WordPress : héberger les images sur un sous-domaine
  31. Serveur dédié : ajouter l’authentification SPF, Sender-ID et DKIM à Postfix et Bind9 avec opendkim
  32. Apache : lorsque le domaine seul (sans WWW) renvoie une erreur 403
  33. Serveur dédié : sécuriser Apache avec HTTPS (HTTP avec la couche TLS/SSL) en Perfect Forward Secrecy
  34. Serveur dédié : passer WordPress en HTTPS (TLS/SSL)
  35. Serveur dédié : configurer Webmin en TLS avec un certificat SSL
  36. Serveur dédié : configurer Transmission pour accéder au WebUI via TLS-SSL
  37. Serveur dédié : installer et configurer Varnish 4
  38. Serveur dédié : passage au mod FastCGI et PHP-FPM avec Apache MPM Worker
  39. J’ai planté le serveur… ou comment récupérer un serveur Kimsufi après un plantage de kernel avec le mode rescue OVH
  40. Serveur dédié : configurer Postfix et Courier pour utiliser TLS-SSL en Perfect Forward Secrecy
  41. Serveur dédié : retirer Varnish, devenu inutile avec HTTPS
  42. Serveur dédié : ajout de mod_spdy pour accélérer la connexion TLS-SSL sous Apache
  43. Serveur dédié : installer la dernière version d’OpenSSL sous Debian
  44. Serveur dédié : activer l’IP canonique du serveur sous Apache
  45. Serveur dédié : mise à jour vers PHP 5.6
  46. MySQL : convertir les tables MyISAM au format InnoDB
  47. Serveur dédié : optimiser toutes les images GIF avec GIFsicle
  48. Serveur dédié : migration de MySQL vers MariaDB
  49. BASH : lister, bloquer et débloquer des adresses IP avec iptables
  50. Serveur dédié : produire une meilleure réserve d’entropie avec haveged
  51. Serveur dédié : mettre en place DNSSEC pour sécuriser les DNS du domaine
  52. Serveur dédié : mise en place du protocole DANE
  53. 8 règles d’or pour bien déployer DNSSEC et DANE
  54. Serveur dédié : installer PHP7 FPM avec FastCGI sous Debian
  55. Serveur dédié : réduire les connexions TIME_WAIT des sockets et optimiser TCP
  56. Fail2Ban: protéger Postfix contre les attaques DoS de types AUTH, UNKNOWN et EHLO
  57. Serveur dédié : mettre à jour Apache et configurer le mod_http2 pour HTTP/2
  58. Serveur dédié : ajouter le domaine à la liste HSTS preload
  59. Serveur dédié : ajouter l’authentification DMARC à Postfix et BIND
  60. Serveur dédié : à la recherche de l’inode perdue ou comment résoudre le problème « no space left on device »
  61. Serveur dédié : installer NginX avec support HTTP2 et certificat SSL, PHP, MariaDB sous Debian

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

pagespeed-99-201301

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.

BashIl arrive que parfois une table SQL soit complètement plantée, ce qui peut bloquer l’accès à la base de données et donc l’accès au site.

Pour éviter cela, j’ai écrit un petit script bash qui me permet de stopper le serveur MySQL, procéder à la réparation de toutes les tables de toutes les bases de données puis relancer le serveur MySQL, Apache et Varnish.

#!/bin/sh
# MySQL Auto-Repair
# Written by Matt - skyminds.net

# stop the MySQL server
/etc/init.d/mysql stop

# check for errors
myisamchk /var/lib/mysql/*/*.MYI

# ask permission to repair
read -p "Repair tables ? (y/n)" -n 1 -r
if [[ $REPLY =~ ^[Yy]$ ]]
then
	# repair everything
	myisamchk -r /var/lib/mysql/*/*.MYI

	# restart servers
	/etc/init.d/mysql restart
	/etc/init.d/apache2 restart
	/etc/init.d/varnish restart
else
	/etc/init.d/mysql restart
fi

C’est le genre de petit fichier bash à garder au frais sur le serveur, facile à lancer en SSH depuis n’importe quel terminal en cas de besoin.

Sommaire de la série Monter un serveur dédié de A à Z

  1. Serveur dédié : installation d’Apache, PHP, MySQL et Webmin
  2. Serveur dédié : créer la base de données MySQL et importer WordPress
  3. Serveur dédié : créer et activer un Virtual Host sous Apache
  4. Serveur dédié : changer les DNS du nom de domaine et le faire pointer vers le serveur
  5. Serveur dédié : sécurisation des services avec iptables et fail2ban
  6. Serveur dédié : sécurisation de la couche TCP/IP
  7. Serveur dédié : création d’un serveur mail Postfix (sécurisé avec Saslauthd et certificat SSL) et Courier (accès POP et IMAP) utilisant une base MySQL d’utilisateurs/domaines virtuels
  8. Serveur dédié : sécuriser Apache 2 avec ModSecurity
  9. Serveur dédié : CHMOD récursif sur des fichiers ou répertoires en ligne de commande
  10. Serveur dédié : installer APC comme système de cache et configurer Varnish comme reverse-proxy pour Apache pour améliorer les performances
  11. Serveur dédié : afficher la véritable IP derrière un reverse-proxy comme Varnish
  12. Serveur dédié : intégrer SSH à WordPress pour mettre à jour le core, les plugins et les thèmes
  13. Serveur dédié : installer la dernière version d’APC par SVN
  14. Serveur dédié : analyse des performances du serveur
  15. Serveur dédié : mettre à jour le noyau Debian de la Kimsufi
  16. Serveur dédié : sauvegarde automatique des fichiers avec Backup Manager sur le serveur de sauvegarde OVH
  17. Serveur dédié : configurer la limite mémoire pour PHP et Suhosin
  18. Bash : supprimer tous les fichiers et sous-répertoires d’un répertoire
  19. Serveur dédié : impossible de se connecter à un port distant
  20. Rsync: rapatrier les fichiers du serveur à la maison
  21. Bash : réparer les tables MySQL en cas de crash
  22. Serveur dédié : création d’une seedbox avec Transmission
  23. Serveur dédié : des paquets LAMP à jour sous Debian
  24. Serveur dédié : mise à jour vers Debian 7 Wheezy
  25. Serveur dédié : activer X11 forwarding pour SSH
  26. Serveur dédié : optimiser toutes les images JPG et PNG avec OptiPNG et JpegOptim
  27. Postfix : résoudre l’erreur « fatal: www-data(33): message file too big »
  28. Serveur dédié : mise en place de l’IPv6
  29. WordPress : accorder les bonnes permissions aux fichiers et dossiers avec chown et chmod
  30. WordPress : héberger les images sur un sous-domaine
  31. Serveur dédié : ajouter l’authentification SPF, Sender-ID et DKIM à Postfix et Bind9 avec opendkim
  32. Apache : lorsque le domaine seul (sans WWW) renvoie une erreur 403
  33. Serveur dédié : sécuriser Apache avec HTTPS (HTTP avec la couche TLS/SSL) en Perfect Forward Secrecy
  34. Serveur dédié : passer WordPress en HTTPS (TLS/SSL)
  35. Serveur dédié : configurer Webmin en TLS avec un certificat SSL
  36. Serveur dédié : configurer Transmission pour accéder au WebUI via TLS-SSL
  37. Serveur dédié : installer et configurer Varnish 4
  38. Serveur dédié : passage au mod FastCGI et PHP-FPM avec Apache MPM Worker
  39. J’ai planté le serveur… ou comment récupérer un serveur Kimsufi après un plantage de kernel avec le mode rescue OVH
  40. Serveur dédié : configurer Postfix et Courier pour utiliser TLS-SSL en Perfect Forward Secrecy
  41. Serveur dédié : retirer Varnish, devenu inutile avec HTTPS
  42. Serveur dédié : ajout de mod_spdy pour accélérer la connexion TLS-SSL sous Apache
  43. Serveur dédié : installer la dernière version d’OpenSSL sous Debian
  44. Serveur dédié : activer l’IP canonique du serveur sous Apache
  45. Serveur dédié : mise à jour vers PHP 5.6
  46. MySQL : convertir les tables MyISAM au format InnoDB
  47. Serveur dédié : optimiser toutes les images GIF avec GIFsicle
  48. Serveur dédié : migration de MySQL vers MariaDB
  49. BASH : lister, bloquer et débloquer des adresses IP avec iptables
  50. Serveur dédié : produire une meilleure réserve d’entropie avec haveged
  51. Serveur dédié : mettre en place DNSSEC pour sécuriser les DNS du domaine
  52. Serveur dédié : mise en place du protocole DANE
  53. 8 règles d’or pour bien déployer DNSSEC et DANE
  54. Serveur dédié : installer PHP7 FPM avec FastCGI sous Debian
  55. Serveur dédié : réduire les connexions TIME_WAIT des sockets et optimiser TCP
  56. Fail2Ban: protéger Postfix contre les attaques DoS de types AUTH, UNKNOWN et EHLO
  57. Serveur dédié : mettre à jour Apache et configurer le mod_http2 pour HTTP/2
  58. Serveur dédié : ajouter le domaine à la liste HSTS preload
  59. Serveur dédié : ajouter l’authentification DMARC à Postfix et BIND
  60. Serveur dédié : à la recherche de l’inode perdue ou comment résoudre le problème « no space left on device »
  61. Serveur dédié : installer NginX avec support HTTP2 et certificat SSL, PHP, MariaDB sous Debian

[et_pb_section admin_label= »section »]
[et_pb_row admin_label= »row »]
[et_pb_column type= »4_4″]
[et_pb_text admin_label= »Text »]
Il y a quelques mois, je me suis amusé à transformer mon script javascript maison qui me permet d’afficher certaines zones de textes sur le site, notamment dans les articles de la catégorie Music/Séries.

Étant donné que jQuery est présent sur toutes les pages du site, j’ai adapté le script pour qu’il utilise jQuery. Cela fera aussi une librairie maison de moins à maintenir (et à charger).

Important : si vous voulez gérer plusieurs blocs, utilisez le script JQuery toggle pour afficher et cacher de multiples blocs HTML

Un script Javascript répondant à des besoins précis

J’écris pas mal de code afin de répondre à mes besoins sur le site, le but étant de me simplifier la vie au maximum.

Dans certains articles, il existe des zones de textes qui ne sont pas tout public et qui nécessitent une authentification préalable à leur lecture. La zone de texte doit apparaître lorsque l’on clique sur un des liens présents dans l’article.

Démo

Pour voir ce script en action, il suffit de cliquer sur ce lien.

Ce texte apparaît et disparaît grâce à un script javascript
écrit pour jQuery et qui utilise la fonction toggle().

Il vous est peut-être déjà arrivé de tomber sur ce message d’avertissement :

Function eregi() is deprecated.

En fait, « deprecated » signifie que PHP 5.3 considère cette fonction comme obsolète, c’est un peu comme si la fonction ereg() n’existait plus. Par conséquent, mieux vaut dorénavant utiliser la fonction qui a pris sa place.

La fonction ereg() ou eregi() est donc remplacée par la fonction preg_match() depuis PHP 5.3 :

$is_image = eregi( "jpg|gif",$file_type );

devient donc :

$is_image = preg_match( “~jpg|gif~i”,$file_type );

Voici la liste des fonctions devenues obsolètes sous PHP 5.3 :

call_user_method() (use call_user_func() instead)
call_user_method_array() (use call_user_func_array() instead)
define_syslog_variables()
dl()
ereg() (use preg_match() instead)
ereg_replace() (use preg_replace() instead)
eregi() (use preg_match() with the ‘i’ modifier instead)
eregi_replace() (use preg_replace() with the ‘i’ modifier instead)
set_magic_quotes_runtime() and its alias, magic_quotes_runtime()
session_register() (use the $_SESSION superglobal instead)
session_unregister() (use the $_SESSION superglobal instead)
session_is_registered() (use the $_SESSION superglobal instead)
set_socket_blocking() (use stream_set_blocking() instead)
split() (use preg_split() instead)
spliti() (use preg_split() with the ‘i’ modifier instead)
sql_regcase()
mysql_db_query() (use mysql_select_db() and mysql_query() instead)
mysql_escape_string() (use mysql_real_escape_string() instead)
Passing locale category names as strings is now deprecated. Use the LC_* family of constants instead.
The is_dst parameter to mktime(). Use the new timezone handling functions instead.

Référence.

Le problème : le code des vidéos n’est pas valide en HTML5

Voici ce que le code oEmbed de WordPress donne par défaut avec un lien Youtube :

Or le petit problème, c’est que tout cela n’est pas vraiment valide au niveau W3C et je commence à me lasser de voir ces erreurs de validation sur toutes les pages du site avec des vidéos :

Erreur 1 : Attribute allowfullscreen not allowed on element iframe at this point.
Erreur 2 : The frameborder attribute on the iframe element is obsolete. Use CSS instead.

La solution : filtrer le rendu oEmbed de WordPress pour purifier le code

Voici donc la solution que j’ai mise en place sur le site : je filtre le code oEmbed de WordPress de manière à retirer le tag allowfullscreen qui n’a rien à faire là et à supprimer l’attribut frameborder, que je remplace par un style="border: none" :

  1. éditez le fichier functions.php de votre thème
  2. ajoutez-y cette fonction :
  3. enregistrez le fichier.

Notez que WordPress cache les résultats oEmbed dans la table postmeta donc après avoir installé ce code et si vous voulez vérifier que cela fonctionne, éditez un article pour que le postmeta se mette à jour.

Voilà, vos pages avec vidéos YouTube devraient maitenant être valides.

Si vous avez besoin de joindre (ou concaténer) plusieurs fichiers qui ont été nommés en ordre alphabétique, comme par exemple file0001.dat, file0002.dat, file0003.dat…. file1000.dat, une commande s’impose sous Linux : cat.

Dans un terminal, vous pouvez juste lancer cat comme ceci pour rassembler tous vos fichiers en un seul :

cat file*.dat >all_files.dat

C’est une commande système, il n’y a rien à installer et c’est plutôt pratique.

Sur votre site ou blog, vous avez peut-être ajouté le widget ou bouton +1 de Google+, le réseau social de Google. Or le petit problème, c’est que le code fourni empêche la bonne validation du document.

Voici le code fourni par Google :

Google+

et voici l’erreur renvoyée par le validateur W3C :

Keyword publisher is not registered

HTML5 étant toujours en cours de réalisation, les valeurs de la balise rel sont assez restreintes et on ne peut pas mettre tout ce que l’on veut sans déclencher l’erreur.

La solution est toute simple : il faut ajouter la valeur du rel en argument dans le lien, comme ceci :

Google+

Et voilà, plus d’erreur lors de la validation.

Source.

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :