Mot-clé - développement web

Fil des billets

lundi 27 juin 2016

CSS pour Select2 et Bootswatch 3.3.6 Flatly

Si vous utilisez Select2 et une CSS Bootswatch Flatly, vous déplorez peut-être la non homogénéité des apparences. Le petit fragment de CSS ci-dessous permet d'optimiser l'affichage des champs Select2 :

/* Optimize Select2 css to work with the Bootswatch Flatly theme */
.select2-selection {
    border-width: 2px !important;
    box-shadow: none !important;
    color: #2c3e50 !important;
    border-color: #0054a0 !important;
    border: 2px solid #dce4ec !important;
    border-radius: 4px !important;
    height: 45px !important;
    padding: 10px 15px !important;
    font-size: 15px !important;
    line-height: 1.42857143 !important;
    font-family: inherit !important;
}

.select2-container--default .select2-selection:focus{
    border-bottom-width: 2px !important;
    outline: none !important;
}

.select2-dropdown {
  border: 2px solid #dce4ec !important;
}

.select2-selection__rendered{
    color: #2c3e50 !important;
    padding-left: 0px !important;
}

lundi 10 novembre 2014

StartSSL pour des certificats SSL "wildcard" à petit prix

Disposant de plusieurs domaines pour mes activités personnelles et professionnelles, j'utilisais jusqu'ici des certificats auto-signés pour sécuriser mes connexions avec SSL/TLS. Cependant, habituer l'utilisateur à "ajouter une exception de sécurité" sans réfléchir me déplaisait au plus haut point. J'ai donc finalement, poussé aussi par mon beau-frère, mis en place de jolis certificats validés par StartCom Ltd. (StartSSL).

Les tarifs pratiqués par StartCom Ltd./StartSSL sont beaucoup plus doux que ceux pratiqués par d'autres acteurs du domaine. Chez eux, on paye en effet le processus de validation d'identité mais ensuite l'émission des certificats est gratuite. Voilà qui est tout à fait intéressant et économique pour couvrir plusieurs domaines !

Ouvrir un compte chez StartSSL

La première étape consiste à se connecter sur http://startssl.com et à choisir "Sign-up" pour ouvrir un nouveau compte. On saisit ses informations personnelles (il faut qu'elles soient exactes si l'on prévoit de faire valider son identité !) puis le site installe automatiquement dans le navigateur un certificat/clé qui autorise ce seul navigateur à se connecter au site. Une bonne pratique consistera à sauvegarder de manière sûre ce certificat pour conserver l'accès au site StartSSL !

Profiter des certificats de niveau 1

Sans rien payer, il est alors possible de faire valider un domaine via le 'Validations Wizard' (la validation d'un domaine consiste à recevoir un courriel envoyé par exemple à postmaster@le-domaine-en-question.fr et à saisir le code de validation reçu) puis de créer des certificats de niveau 1.

Les certificats de niveau 1 sont une bonne base pour débuter mais il n'est notamment pas possible avec ce niveau de disposer de certificats "wildcard" (i.e. pour tous les sous-domaines d'un domaine). Pour bénéficier de cette fonctionnalité, il faut disposer d'un niveau 2.

Obtenir le niveau 2

Pour passer niveau 2, il faut d'une part :

  • soumettre des documents pour prouver son identité (photocopies de 2 pièces d'identité, éventuellement justificatif de domicile, éventuellement recevoir un appel de StartSSL sur son numéro de téléphone)
  • s'acquitter de la somme de 59,90$ (environ 48 euros)

Tout le processus s'effectue en ligne via le 'Validations Wizard', catégorie 'Personal identity validation'. Les gens de StartCom StartSSL sont extrêmement réactifs.

Dans mon cas, après quelques heures et quelques échanges par courriel et téléphone, mon identité a été vérifiée et mon niveau 2 validé.

Créer un certificat 'wildcard'

Une fois niveau 2, voici la marche à suivre :

  • sur le serveur que l'on souhaite protéger, nous allons générer une clé privée et un Certificate Sining Request (CSR) par la commande
openssl req -nodes -newkey rsa:4096 -sha256 -keyout cle-privee.key -out serveur.csr

Il est à noter que ce processus génère une clé privée sans mot de passe. Il est tout à fait possible de générer une clé avec mot de passe mais il faudra alors préciser le mot de passe correspondant aux logiciels serveurs qui utiliseront la clé pour crypter les échanges.

Au cours du processus, OpenSSL va demander quelques informations d'identité. Il est important de préciser dans le champ 'Common Name' le nom d'hôte à protéger : en l'occurrence *.le-domaine-en-question.fr si l'on souhaite bénéficier d'un certificat 'wildcard' pour le-domaine-en-question.fr.

Country Name (2 letter code) [AU]: FR
State or Province Name (full name) [Some-State]: Ile-de-France
Locality Name (eg, city) []: Mary-sur-Marne
Organization Name (eg, company) [Internet Widgits Pty Ltd]: MaSociété
Organizational Unit Name (eg, section) []: 
Common Name (eg, YOUR name) []: *.le-domaine-en-question.fr
Email Address []: postmaster@le-domaine-en-question.fr
A challenge password []: 
An optional company name []:
  • on peut alors afficher le contenu du CSR par
cat serveur.csr

et le conserver précieusement

  • de retour sur le site de StartSSL, se rendre dans le 'Certificates wizard'
  • choisir 'Webserver SSL/TLS certificate'
  • passer (bouton SKIP) l'étape de génération d'une clé privée puisque nous avons créé nous-même notre clé privée sur le serveur
  • copier alors le contenu du CSR dans le champ texte
  • sélectionner le domaine à protéger : seuls les domaines déjà validés peuvent être utilisés. On pourra par exemple saisir *.le-domaine-en-question.fr.
  • et voilà le certificat qui apparaît à l'écran. Il convient de copier ce certificat précieusement, par exemple dans un fichier wildcard.le-domaine-en-question.fr.crt.

Utiliser son tout nouveau certificat

Cette étape dépend ensuite du serveur utilisé (Apache, Pound, Nginx, ...). La plupart du temps, on regroupera le certificat obtenu de la part de l'autorité de certification et la clé privée dans un même fichier .pem. On pourra également inclure les certificats intermédiaires de l'autorité : https://www.startssl.com/certs/ca.pem et https://www.startssl.com/certs/sub.class2.server.ca.pem.

cat wildcard.le-domaine-en-question.fr.crt cle-privee.key ca.pem sub.class2.server.ca.pem > wildcard.le-domaine-en-question.pem

On pourra alors utiliser ce .pem sur son serveur, en s'assurant toutefois de bien le garder secret, car il contient notre clé privée !

Bon courage pour votre génération de certificats !

dimanche 17 août 2014

Nouvelle version d'atom (0.124) compilée pour Debian Jessie

Je viens de compiler la dernière version d'atom, l'éditeur de texte évolué créé par les équipes de GitHub. La version 0.124 est donc disponible sous la forme d'un paquet Debian : atom-0.124.0-amd64.deb.

Ce paquet devrait fonctionner sur Debian Jessie 64 bits.

Il a été généré en suivant les instructions de compuilation officielles et certains pré-requis doivent peut-être être remplis sur des machines qui n'ont jamais été confrontées à atom.

Bon téléchargement !

dimanche 11 mai 2014

Atom, l'éditeur texte de GitHub, compilé sous Debian Jessie

GitHub a récemment annoncé la publication des sources d'Atom, son éditeur texte moderne qui se veut une alternative à d'autres outils comme LightTable ou Brackets. Réjouissons-nous de la publication de cet outil en open source et espérons qu'il ne s'agisse pas, comme certains (pessimistes ?) le disent, une libération avant abandon !

Une version compilée pour Linux n'étant pas encore disponible, il est nécessaire d'effectuer la compilation soi-même. Je détaille ici les opérations nécessaires pour aboutir à une version compilée d'Atom sous Debian Jessie 64 bits.

Pré-requis :

  • Debian Testing/Jessie 64 bits
  • node.js v0.10.x (aptitude install nodejs)
  • npm v1.4.x (aptitude install npm)
  • libgnome-keyring-dev (aptitude install libgnome-keyring-dev)
  • exécuter la commande suivante en root ou avec sudo : npm config set python /usr/bin/python2 -g

Avant de commencer :

La compilation ne passe par défaut chez moi car il semble que node_gyp ne comprenne pas l'option 'no-parallel' envoyée par le script de compilation. Je vous conseille donc de lancer une première fois la compilation et si l'erreur "--no-parallel" est rencontrée alors effectuer l'opération suivante : modifier le fichier atom/build/node_modules/npm/node_modules/node-gyp/lib/configure.js en commentant la ligne :

argv.push('--no-parallel')

Compilation :

On récupère d'abord le code d'Atom :

git clone https://github.com/atom/atom

puis

cd atom
script/build

La version compilée se trouve dans /tmp/atom-build. Si l'on souhaite installer Atom sur le système (dans /usr/local/bin/atom) :

sudo script/grunt install

et pour générer un paquet .deb (génération du fichier dans /tmp/atom-build):

script/grunt mkdeb

Avant d'exécuter Atom, il semble qu'il faille également régler un lien de dépendance cassé :

sudo ln -sf /lib/x86_64-linux-gnu/libudev.so.1 /lib/x86_64-linux-gnu/libudev.so.0

Et voilà !

Atom est maintenant exécutable sur votre système. Mon paquet .deb est disponible au téléchargement ici (atom-0.95.0-amd64.deb). Il devrait fonctionner sur les machines Debian Testing/Jessie 64 bits.

IMPORTANT: la version 0.124 est désormais disponsible dans ce nouvel article.

Il n'y a plus qu'à découvrir ce nouvel éditeur de texte, assez sympathique il faut le reconnaître, mais dont seul l'usage prolongé pourra faire découvrir les vraies qualités !

Apache, protéger par mot de passe tout un hôte virtuel sauf certaines adresses : utilisation de LocationMatch

Il est assez classique d'utiliser les fonctions d'authentification d'Apache, par exemple auth_digest, pour sécuriser l'accès à un répertoire ou une application web propulsée par Apache.

Toutefois, il est parfois souhaitable de laisser en accès sans mot de passe une adresse spécifique, correspondant par exemple à une page publique ou à une fonctionnalité de l'application qu'un utilisateur lambda doit pouvoir déclencher.

Apache permet cela grâce à la direction "LocationMatch" et à des expressions régulières.

Par exemple, avec l'exemple ci-dessous placé dans un hôte virtuel correspondant à mon-app.domaine.tld :

<LocationMatch "^(?!/zone-publique)">
        AuthType Digest
        AuthName "mon-app"
        AuthDigestProvider file
        AuthUserFile /path/to/digest-password-file
        Require valid-user
</LocationMatch>

tout accès à l'hôte virtuel sera protégé par mot de passe sauf l'adresse http://mon-app.domaine.tld/zone-publique qui sera accessible à tous sans mot de passe.

Bons paramétrages !

vendredi 16 août 2013

Des cartes avec Kartograph

Nous allons décrire ici comment générer une carte de France à partir de Kartograph.py et l'afficher avec des données à l'aide de Kartograph.js.

Logo Kartograph

Kartograph.py et Kartograph.js sont deux librairies libres (open source et sous licence LGPL) développées par Gregor Aisch et disponibles ici : http://www.kartograph.org.

La première, Kartograph.py écrite en python, permet de générer des fonds de carte sous forme vectorielle (fichier *.svg) avec des tracés géoréférencés.

La seconde, Kartograph.js écrite en javascript, qui s'appuie sur la librairie de manipulation d'objets vectoriels RaphaelJS, parcourt le fichier vectoriel généré par Kartograph.py et affiche la carte au sein d'une page web. Il est également possible d'ajouter des données géographiques sur la carte à l'aide de l'API Kartograph.js.

Générer un fond de carte de France

Les données géographiques source sont disponibles sur GADM. L'archive française contient 5 niveaux d'information : FRA_adm0 contient les frontières nationales, FRA_adm1 contient les frontières des régions françaises, FRA_adm2 contient les tracés des départements, FRA_adm3 inclut les tracés des arrondissements, FRA_adm4 les tracés des cantons et enfin FRA_adm5 les tracés des villes.

La génération de la carte s'effectue à l'aide de l'outil Kartograph.py en lui spécifiant un certain nombre de paramètres à l'aide d'un fichier .json.

Voici un exemple de fichier :

{
    "layers": {
        "boundaries": {
		      "src": "FRA_adm0.shp",
		      "simplify": 3,
		      "attributes": ["ISO", "NAME_ISO"]
	      },
        "regions": {
		      "src": "FRA_adm1.shp",
		      "simplify": 3,
		      "attributes": ["ISO", "NAME_1"]
	      },
	      "departments": {
		      "src": "FRA_adm2.shp",
		      "simplify": 3,
		      "attributes": ["ISO", "NAME_1"]
	      },
	      "background": {
          "special": "sea"
        }
    },
    "proj": {
        "id": "laea",
        "lon0": 2.37556359389,
        "lat0": 49.9701576233
    }
}

On voit que ce fichier définit 2 catégories d'objet : des calques (layers) et une projection. On note que plusieurs calques sont créés et que pour chacun on précise : - "src" : la source de données sous la forme d'un fichier ShapeFile (*.shp) - "simplify" : un degré de simplification du tracé pour réduire la taille du svg généré - "attributes" : la liste des méta-données (informations) que l'on souhaite voir inclus dans le fichier vectoriel. Les données inclues dans le vectoriel seront accessibles depuis Kartograph.js. Chaque calque pourra être traité séparément par Kartograph.js, notamment avec des styles différents pour chacun.

Quand les paramètres de la carte sont satisfaisants, on lance la génération à l'aide de :

kartograph mes_parametres.json -o fichier_genere.svg

Le traitement peut prendre plusieurs minutes et le fichier est généré.

Dans le cade de l'exemple, voici le fichier .svg généré : Carte de France, svg

Utilisation du fond de carte dans une page web

La page web à créer doit contenir les librairies Javascript RaphaelJS, JQuery et Kartograph.

        <script src="lib/jquery.min.js"></script>
        <script src="lib/raphael.min.js"></script>
        <script src="lib/kartograph.min.js"></script>


Le fichier doit également contenir un bloc div dans lequel la carte sera placée :

    <body>
        <div id="map"></div>
    </body>

et le javascript suivant permet de générer la carte :

          var map = kartograph.map('#map'); // #map fait référence au div répondant à id="map"
          map.loadMap('fr.svg', function() {
            // ici, on précisera toutes les options pour l'affichage sur le carte
          }, {padding: "20"} );

Comme on peut le voir avec l'option {padding: "20"}, certains paramètres d'affichage peuvent être placés sous forme de dictionnaire après la fonction de génération.

Au sein de la fonction de génération, on ajoute la définition des couches à construire :

            map.addLayer('departments', {
                styles: {
                  'stroke-width': 1,
                  'stroke': "#C0C0C0",
                  'fill': "#fff"
                }
            });


L'exemple précédent récupère la couche 'departments' (qui avait été créé dans le fichier .json défini plus haut) et l'affiche avec les options de style (couleur et épaisseur du trait, couleur de remplissage) définies ici.

On peut ensuite ajouter des objets sur le carte à l'aide de la fonction 'addSymbols'. Par exemple, pour ajouter une bulle,

            map.addSymbols({
                type: kartograph.Bubble,
                data: myData,
                location: function(item) {
                    return [item.lon, item.lat];
                },
                radius: function(item) {
                    return item.radius;
                },
                sortBy: 'radius desc',
                style: function(item) {
                    return 'fill:'+item.color+';';
                },
            });

Dans l'exemple précédent, on récupère les données depuis un tableau myData contenant une collection d'objets aux caractéristiques lon/lat/radius/color. D'autres types sont possibles : kartograph.Label, kartograph.PieChart, kartograph.StackedBar...

Pour ajouter des formes diverses, on peut utiliser la fonction :

map.addGeoPath([kartograph.LonLat(lon1, lat1),kartograph.LonLat(lon2, lat2)]).attr( 'stroke-width', '2');

Les objets sont des objets RaphaelJS et il est donc possible d'utiliser toutes les fonctions de RaphaelJS pour attribuer des styles ou des comportements.

L'outil permet d'obtenir de jolies cartes et représentant les jeux de données que l'on souhaite. De nombreux exemples (avec le code source correspondant) sont disponibles ici : http://kartograph.org/showcase/.

Exemple Kartograph sur carte UK

mercredi 26 décembre 2012

Demander aux robots de ne pas indexer un site internet

Il y a certains sites que l'on ne souhaite pas voir apparaître sur les moteurs de recherche - il faut donc expliquer aux moteurs de recherche qu'ils n'ont pas être indexés.

Facile, il suffira de créer un fichier robots.txt à la racine du site avec ce contenu :

User-agent: *
Disallow: /