Le pingouin des @lpes

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.

l337 5p34k p0ur l35 633k5

Patrice Blondel Humour humour, internet, geek Aucun commentaire

C'est quoi ?

Le Leet speak (en leet speak : 1337 5p34k), de l'anglais « elite speak » (littéralement, « langage de l'élite »), est un système d'écriture utilisant les caractères alphanumériques ASCII d'une manière peu compréhensible pour le néophyte (appelé noob ou newbie) pour s'en démarquer.
Le principe est d'utiliser des caractères graphiquement voisins des caractères usuels, par exemple « 5 » au lieu de « S », « 7 » au lieu de « T » et, pour les extrémistes, « |_| » au lieu de « U » ou « |< » au lieu de « K », sans respect de l'orthographe ou des majuscules.
Ce système d'écriture se retrouve chez certains geeks ou utilisateurs de jeux en réseau.

Vous voulez jouer les geeks ?

Voici un convertisseur qui vous permettra de prendre une certaine distance avec les noobs :p. 80n 4mU53m3n7 !

Convertisseur Leet speak


Tapez votre texte :
Résultat en Leet speak :