Le pingouin des @lpes

Assigner une lettre à une touche du clavier

Patrice Blondel Matériel matériel, debian Aucun commentaire

J'ai récupéré un portable avec un clavier en mauvais état : certaines touches ne fonctionnent plus.
Les touches Fn, les flèches d'orientation, le w et le 0 sont défectueux.
On peut utiliser les flèches en désactivant le pavé numérique, le 0 avec les majuscules, enfin les touches Fn ne sont pas indispensables.
Me restait le problème du w. Il fallait donc attribuer ce caractère à une touche qui présentait peu d'utilité.
J'ai choisi la touche windows

Repérer le keycode de la touche "windows"

Dans une console, lancez xev et presser la touche à renseigner
$ xev
par exemple, la touche windows a pour keycode 133
KeyRelease event, serial 37, synthetic NO, window 0x2400001,
    root 0x498, subw 0x0, time 1315996, (133,229), root:(727,552),
    state 0x40, keycode 133 (keysym 0x77, w), same_screen YES,
    XLookupString gives 0 bytes: 
    XFilterEvent returns: False
Créez un fichier .xmodmaprc dans votre répertoire personnel puis renseignez-le en indiquant la lettre ou le signe que vous souhaitez attribuer à cette touche.
Chez moi, la touche w ne fonctionnait plus.
Pour l'afficher grâce à la touche windows (keycode 133) j'écris donc :
keycode 133 = w

Activation

Pour qu'il soit pris en compte à chaque démarrage, il faut renommer le fichier .xmodmaprc en .Xmodmap

Vérifions

Désormais, lorsque je lance xev et que je presse la touche windows, la console me renvoie :
KeyPress event, serial 37, synthetic NO, window 0x2400001,
    root 0x498, subw 0x0, time 3900069, (-313,170), root:(591,435),
    state 0x0, keycode 133 (keysym 0x77, w), same_screen YES,
    XKeysymToKeycode returns keycode: 52
    XLookupString gives 1 bytes: (77) "w"
    XmbLookupString gives 1 bytes: (77) "w"
    XFilterEvent returns: False
Maintenant, je peux utiliser cette touche windows dans la console et dans les traitements de textes.

Les couleurs en HTML

Patrice Blondel Webmaster html5, css3, webmaster Aucun commentaire

Codage des couleurs avec HSL et HLSA

Le codage HSL se rapproche de la perception humaine des couleurs, il est donc approprié au codage web.
Chaque couleur est associée à 3 nombres (un angle et deux pourcentages).
  • Le premier nombre correspond à la teinte indiquée par un angle (en degrés) dans le cercle chromatique des couleurs : 0 : rouge, 60 : jaune, 120 : vert, cyan : 180 et bleu : 240
  • Le deuxième nombre correspond à la saturation qui donne la pureté de la couleur : du gris (0%) à la couleur la plus vive (100%)
  • Le troisième est également un pourcentage qui correspond à la luminosité : du noir (0%) au blanc (100%)
Une liste des couleurs et leur codage est disponible à l'adresse suivante : http://fr.wikipedia.org/wiki/Liste_de_couleurs.
Mais vous pouvez vous aider de petits outils très pratiques qui capturent les couleurs.
J'utilise gcolor2 sous Linux.

Utilisation dans le CSS

Le magenta sera écrit pour un titre sous la forme :
titre {
   color : hsl (328,100%,43%); 
}
Ce codage HSL s'accompagne de va variante HSLA. Le A représenta la couche Alpha ; c'est à dire le degré d'opacité compris entre 0 et 1.
Voici le codage pour une couleur verte avec un effet translucide :
h2 {
   background-color : hsla(141,79%,40%,0.5); 
}

Vacances de rêve
/*  Opacité ---------------------------------------------*/ 
div.pub {
	width: 250px;
	font-size:1.8em;
	text-align:center;
   	background-color:hsla(320,100%,48%, 0.2);	
	padding: 0.2em;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;	
}

Remarquez la différence :

Ici tout le bloc est transparent (y compris le texte).
Dans la première solution l'opacité n'agit que sur la couleur de fond

Vacances de rêve
/* Opacité -----------------------------------------------*/ 
div.pub {
	width: 250px;
	font-size:1.8em;
	text-align:center;
   	background-color:hsl(320,100%,48%);
	opacity: 0.2;	
	padding: 0.2em;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;	   	
}

Multicolonnage en HTML5 et CSS3

Patrice Blondel Webmaster html5, css3, webmaster Aucun commentaire

Afin que le texte soit plus lisible, il est necessaire d'afficher le contenu sur plusieurs colonnes (comme dans la presse écrite).
Le CSS3 permet cette réalisation de façon très simple.
Il suffit de déterminer une classe pour ces nouveaux paragraphes et de les écrire sous la forme :
<p class="troiscolonnes">Contenu du texte réparti sur 3 colonnes</p>

Texte affiché avec trois colonnes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

Maintenant avec deux colonnes

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

Renseignons le css

/* Multicolonnage */ 

p.troiscolonnes {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 1.5em; /* Chrome, Safari, Opera */
    -moz-column-gap: 1.5em; /* Firefox */
    column-gap: 1.5em;
}

p.deuxcolonnes {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 2em; /* Chrome, Safari, Opera */
    -moz-column-gap: 2em; /* Firefox */
    column-gap: 2em;
}

Améliorations

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi ac elit faucibus, tempus arcu ac, sagittis arcu.
Curabitur purus neque, fermentum et nunc et, mollis convallis enim.
Fusce quis ante diam.
Nulla tristique sed sem id placerat.
Nam vestibulum tempus massa at rhoncus.
Donec feugiat, diam vitae consequat semper, nisl lectus accumsan nibh, vel condimentum nibh ex consectetur nisi.
Cras facilisis sit amet massa at cursus.
Quisque nisl mi, rutrum eu tristique nec, rutrum nec magna.
Duis aliquam dapibus risus, a maximus erat ultrices eu.
Cras eu justo in massa aliquam maximus.
Aliquam erat volutpat.
Sed in justo a sem ultrices venenatis porta ac leo.
Praesent sagittis mauris ac massa rhoncus, sit amet tristique nisi suscipit.
Aenean finibus ex nec sem accumsan malesuada.
Donec a eros at magna feugiat vulputate.
Quisque mollis pharetra mattis.
Suspendisse potenti.
Nulla sit amet massa nulla.
Phasellus laoreet tellus ex, vel luctus massa facilisis ut.
Sed eget justo ligula.
Aliquam erat volutpat.
Vivamus vitae tortor in nisl aliquam placerat.
Curabitur quis vulputate ipsum.
Aliquam orci elit, ultricies eu suscipit in, placerat sed ex.
Phasellus semper mollis tempus.
Nunc at sollicitudin nibh.
Mauris sed lacus dapibus, vestibulum sapien nec, tempus metus.
Quisque tristique porttitor rutrum.
Cras vitae aliquam dolor.

Les deux colonnes sont séparées, il suffit d'ajouter au CSS :

p.col_sep {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */
	column-count: 2;

	-webkit-column-gap: 2em; /* Chrome, Safari, Opera */
	-moz-column-gap: 2em; /* Firefox */
	column-gap: 2em;

	-webkit-column-rule: dotted 2px #ccc; /* Chrome, Safari, Opera */
	-moz-column-rule: dotted 2px #ccc; /* Firefox */
	column-rule: dotted 2px #ccc;	
}

Nginx

Patrice Blondel Webmaster internet, webmaster Aucun commentaire

Nginx c’est quoi ?

Nginx est un serveur web qui a vu le jour en 2002, en Russie.
Il s’est vraiment développé à partir de 2006 lorsqu'il a été traduit du russe en anglais.
Nginx représente 20 % des serveurs ; c’est bien moins que son principal concurrent Apache (60 %) mais ce n'est pas négligeable.
Alors pourquoi installer Nginx plutôt qu’Apache ?

La réponse est évidente : les performances !
Nginx est un serveur dit « asynchrone » cela signifie qu’il peut exécuter plusieurs actions simultanément, ce n’est pas le cas d’Apache.
  • Nginx est plus rapide ;
  • Il permet de supporter plus d’utilisateurs simultanément ;
  • Il consomme moins de mémoire.
J'ai donc décidé d'installer Nginx sur ma machine et de l'utiliser comme serveur web en local.

Installation de nginx et PHP 7.0 FPM

# apt-get install nginx php7.0 php7.0-fpm php7.0-gd php7.0-mysql php7.0-cli php7.0-common php7.0-curl php7.0-opcache php7.0-json php7.0-imap

Vérifiez votre version de PHP

$ php -v
Chez moi ça donne ça :
PHP 7.0.12-1 (cli) ( NTS )
Copyright (c) 1997-2016 The PHP Group
Zend Engine v3.0.0, Copyright (c) 1998-2016 Zend Technologies
    with Zend OPcache v7.0.12-1, Copyright (c) 1999-2016, by Zend Technologies

et de nginx

# nginx -v
nginx version: nginx/1.10.2
Rendez-vous sur la page http://localhost pour vérifier que votre serveur web fonctionne :

Configuration de PHP 7.0 FPM

# nano /etc/php/7.0/fpm/pool.d/www.conf
On vérifie la bonne configuration du type :
user = www-data
group = www-data
listen = /run/php/php7.0-fpm.sock
listen.owner = www-data
Il nous reste à renseigner le fichier /etc/nginx/nginx.conf
user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	keepalive_timeout 65;
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;
	gzip_disable "msie6";

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}
Ainsi que le fichier /etc/nginx/sites-available/default
# Default server configuration
#
server {
	listen 80 default_server;
	listen [::]:80 default_server;
	root /var/www/html;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html index.php;

	server_name _;

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ =404;
	}
	# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
	
	location ~ \.php$ {
		include snippets/fastcgi-php.conf;
		fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
	}
}
nota : j'y ai ajouté la configuration pour la ré-écriture de Pluxml (mon CMS préféré) dans ce même fichier.
# re-ecriture url pour Pluxml
	rewrite ^/(?<pluxml>pluxml[^/]*)/(?<pattern>(?:(?:article|static|categorie)\d*|tag|archives)(/.*)?)$ /$pluxml/index.php?$pattern;
	rewrite ^/(?:<pluxml>pluxml[[^/]*)/feed/(?<feed>.*)$ /$pluxml/feed.php\?$feed;

	location ~ ^/pluxml[^/]*/(?:data/medias/|themes/[^/]*/(?:css|img)/|core/lib/js.src/).* {
		try_files $uri $uri/ =404;
	}
	location ~ ^/pluxml[^/]*/core/lib/.*\.js {
		try_files $uri $uri/ =404;
	}
	location ~ ^/pluxml[^/]*/(?:data/|themes/|core/lib/).* {
		deny all;
	}
	location ~ ^/pluxml[^/]*/config.php {
		deny all;
	}
Vérifions l'utilisation de PHP en créant un fichier phpinfo.php dans /var/www/html
# cd /var/www/html/
# nano phpinfo.php

Ajoutez-y le code :
<?php phpinfo(); ?>
Vérifions en allant chercher la page http://localhost/phpinfo.php avec votre navigateur
Chez moi ça donne ça :


Bluetooth BCM43142A

Patrice Blondel Matériel bluetooth

Nouveau portable Toshiba

Le Toshiba Satellite C70-B
  • Écran : 17.3 HD+ 200 CSV LD (1600 x 900)
  • Processeur : Intel Core i5 5200U /2.2 GHz – 2.7 GHz / 2 coeurs / 4 threads / 15W
  • Mémoire vive : 4 Go DDR3L
  • Disque dur : 750 Go 5400tpm
Pas de problèmes particuliers à l'installation de Debian Stretch. Sauf ... le bluetooth.

Repérer le matériel

$ dmesg | grep BCM | grep usb
[    9.327532] usb 2-6: Product: BCM43142A0

Récupération du dernier driver Windows : 2 solutions

Sur le net dans les windows update :
$ wget http://download.windowsupdate.com/d/msdownload/update/driver/drvs/2014/07/20662520_6c535fbfa9dca0d07ab069e8918896086e2af0a7.cab
Sur un système déjà installé (c'est mon cas), le voici : BCM43142A0_001.001.011.0311.0334.hex (57,4 ko)
Le fichier se trouve dans Windows/System32/drivers

Convertir le fichier 'hex' en 'hcd'

Récupérez le fichier .zip : hex2hcd (56,7 ko)
Utilisons hex2hcd et transformons le fichier :
$ unzip hex2hcd.zip
$ cd hex2hcd/
$ make
$ ./hex2hcd /home/govez/Téléchargements/BCM43142A0_001.001.011.0311.0334.hex BCM.hcd

Copie du 'firmware'

# cp BCM.hcd /lib/firmware/

Nettoyage et chargement du module

# modprobe -r btusb
# modprobe btusb
Parfois, il est nécessaire de refaire # modprobe -r btusb puis # modprobe btusb.

Encore plus simplement

Après plus de recherche sur internet, j'ai trouvé comment faire plus simple :
$ wget http://www.pingouindesalpes.com/data/documents/BCM43142A0-105b-e065.hcd

puis, sous root :
# cp BCM43142A0-105b-e065.hcd /lib/firmware/brcm/BCM.hcd

Après redémarrage de la machine, tout fonctionne parfaitement.