Introducing jQuery dice plugin

jQuery dice plugin is a jQuery plugin that ease the inclusion of dice inside your jQuery-based website. It is based on CSS3 and Javascript and allow you to draw 2D dice of any size without using any image.

dice build using jQuery dice plugin

>> project page on GitHub <<

How to use

Include both the css and the javascript plugin into your html page :

You can then turn any <DIV> into a die by calling the dice function :

$("#die").dice({
    size: 100, // in pixels
    val: 3, // 1, 2, 3, 4, 5, 6
    rotation: 0 // O to 359 deg
});

The dice function accepts three options :

size :

The dimensions of the die in pixels (height and width are equals)

default : 100px

val :

The face of the die (1, 2, 3, 4, 5 or 6)

default : random

rotation :

The rotation of the die in degrees. The anchor point is the middle of the die.

default : 0

Test it with the jQuery mobile demo page bellow :

demo page source code

Only the following browser are supported yet :

• Firefox
• Chrome (including Android 2.3+)
• Safari (including iPhone and iPad)

De jolis dés en CSS3 et HTML

Grâce au CSS3, il est maintenant possible d'utiliser des effets avancés permettant de réaliser des mises en pages HTML poussées qui soient scalables et qui ne nécessitent plus de connaitre en profondeur Photoshop, Illustrator et autres Gimp, ... La seule limite reste votre créativité et votre imagination. Pour les stimuler un peu, voici comment réaliser simplement les six faces d'un dé en HTML et CSS3 :

Dés en CSS3 et HTML

Structure HTML d'une face

Prenons l'exemple du six. Pour composer cette face du dé, nous utilisons le markup HTML suivant :

<div class="dice-container">
    <div class="dice dice-6">
        <div class="dice-indicator indicator-1"></div>
        <div class="dice-indicator indicator-2"></div>
        <div class="dice-indicator indicator-3"></div>
        <div class="dice-indicator indicator-4"></div>
        <div class="dice-indicator indicator-5"></div>
        <div class="dice-indicator indicator-6"></div>
    </div>
</div>

Un conteneur pour le dé

Ce DIV sera utilisé pour appliquer la projection de l'ombre du dé sur la surface.

Un conteneur pour la face du dé

Ce DIV sera utilisé pour appliquer le dégradé de lumière relatifs à la face visible du dé.

Un conteneur par indicateur

Ce DIV sera utilisé pour chaque rond noir servant à indiquer la valeur de la face du dé. Un reflet plastique blanc lui sera appliqué afin de simuler une impression de creux dans la face du dé.

Styles appliqués

Pour simplifier la lecture des styles ci dessous, seules les compatibilités Firefox et Webkit ont été conservées. Pour une compatibilité étendue aux autres navigateurs : internet explorer 9 et opéra, il faut adapter les -webkit et -moz à leurs équivalents -ie pour internet explorer et -o pour opéra.

Dans un premier temps, nous allons appliquer au conteneur du dé, une ombre projetée :

div.dice-container {
    color: white;
    height: 100px;
    width: 100px;
    border: none;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    box-shadow: -1px 1px 5px #888888;
    -webkit-box-shadow: -1px 1px 5px #888888;
}

ombre projetée du dé

Puis il faut appliquer à la face du dé deux effets distincts :

1. Une ombre interne pour simuler l'arrondi des arrêtes du dé qui délimitent la face du dé.
2. Une ombre radial pour simuler un effet de reflet de la lumière à la surface de la face du dé.

div.dice {
    color: white;
    height: 100px;
    width: 100px;
    border: none;
    border-radius:15px;
    -webkit-border-radius:15px;
    background: -moz-radial-gradient(right top, circle, #FFFFFF, #F6F6F6);
    background: -webkit-radial-gradient(right top, circle, #FFFFFF, #F6F6F6);
    -webkit-box-shadow: inset 2px -2px 3px 3px #EEEEEE;
    box-shadow: inset 2px -2px 3px 3px #EEEEEE;
}

Arrondi de la face du dé et reflet

L'étape suivante consiste à créer un rond noir donnant l'impression d'être creusé dans la face du dé. Pour cela, on utilise un gradient radial que l'on décale vers le bord inférieur gauche du rond noir :

div.dice div.dice-indicator {
    width: 18px;
    height: 18px;
    -webkit-box-shadow: inset 0 0 1px 1px #111111;
    box-shadow: inset 0 0 1px 1px #111111;
    background: -moz-radial-gradient(left bottom, circle, #FFFFFF, #000000, #000000); 
    background: -webkit-radial-gradient(left bottom, circle, #FFFFFF, #000000, #000000);
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    position: relative;
}

rond noir incurvé

Pour terminer, il ne reste plus qu'à positionner les ronds noirs sur la face du dé selon la valeur souhaitée :

div.dice-1 div.indicator-1, div.dice-5 div.indicator-1, div.dice-3 div.indicator-1 {
    top: 41px; /* 41 */
    left: 41px; /* 41 */
}

div.dice-5 div.indicator-2, div.dice-3 div.indicator-2 {
    top: -2px; /* 16 */
    left: 16px; /* 16 */
}

div.dice-5 div.indicator-3 {
    top: -20px; /* 16 */
    left: 66px; /* 66 */
}

div.dice-5 div.indicator-4 {
    top: 12px; /* 66 */
    left: 16px; /* 16 */
}

div.dice-5 div.indicator-5 {
    top: -6px; /* 66 */
    left: 66px; /* 66 */
}

div.dice-2 div.indicator-1, div.dice-4 div.indicator-1 {
    top: 16px; /* 16 */
    left: 16px; /* 16 */
}

div.dice-2 div.indicator-2, div.dice-4 div.indicator-2 {
    top: 48px; /* 66 */
    left: 66px; /* 66 */
}

div.dice-3 div.indicator-3 {
    top: 32px; /* 66 */
    left: 66px; /* 66 */
}

div.dice-4 div.indicator-3 {
    top: -20px; /* 16 */
    left: 66px; /* 66 */
}

div.dice-4 div.indicator-4 {
    top: 12px; /* 66 */
    left: 16px; /* 16 */
}

div.dice-6 div.indicator-1 {
    top: 16px; /* 16 */
    left: 16px; /* 16 */
}

div.dice-6 div.indicator-2 {
    top: 23px; /* 41 */
    left: 16px; /* 16 */
}

div.dice-6 div.indicator-3 {
    top: 30px; /* 66 */
    left: 16px; /* 16 */
}

div.dice-6 div.indicator-4 {
    top: -38px; /* 16 */
    left: 66px; /* 66 */
}

div.dice-6 div.indicator-5 {
    top: -31px; /* 41 */
    left: 66px; /* 66 */
}

div.dice-6 div.indicator-6 {
    top: -24px; /* 66 */
    left: 66px; /* 66 */
}

Les dés peuvent alors être directement ajoutés au code HTML de la page au moyen du code suivant :

<div class="dice-container">
    <div class="dice dice-1">
        <div class="dice-indicator indicator-1"></div>
    </div>
</div>

<div class="dice-container">
    <div class="dice dice-2">
        <div class="dice-indicator indicator-1"></div>
        <div class="dice-indicator indicator-2"></div>
    </div>
</div>

<div class="dice-container">
    <div class="dice dice-3">
        <div class="dice-indicator indicator-1"></div>
        <div class="dice-indicator indicator-2"></div>
        <div class="dice-indicator indicator-3"></div>
    </div>
</div>

<div class="dice-container">
    <div class="dice dice-4">
        <div class="dice-indicator indicator-1"></div>
        <div class="dice-indicator indicator-2"></div>
        <div class="dice-indicator indicator-3"></div>
        <div class="dice-indicator indicator-4"></div>
    </div>
</div>

<div class="dice-container">
    <div class="dice dice-5">
        <div class="dice-indicator indicator-1"></div>
        <div class="dice-indicator indicator-2"></div>
        <div class="dice-indicator indicator-3"></div>
        <div class="dice-indicator indicator-4"></div>
        <div class="dice-indicator indicator-5"></div>
    </div>
</div>

<div class="dice-container">
    <div class="dice dice-6">
        <div class="dice-indicator indicator-1"></div>
        <div class="dice-indicator indicator-2"></div>
        <div class="dice-indicator indicator-3"></div>
        <div class="dice-indicator indicator-4"></div>
        <div class="dice-indicator indicator-5"></div>
        <div class="dice-indicator indicator-6"></div>
    </div>
</div>

Authentification SSL client avec Apache

Dans ce billet, nous allons voir comment sécuriser une application WEB afin qu'elle soit accessible uniquement à des terminaux autorisés. Pour cela, nous allons utiliser des certificats clients et faire en sorte que le serveur impose au client de lui présenter un certificat signé par une autorité de certification particulière.

Création des certificats

Création d'une autorité de certification

La première étape consiste à créer notre propre autorité de certification. Nous générons pour cela une clé RSA que nous stockons sous ca.key. A partir de cette clé, nous allons générer un certificat auto-signé. Grace aux commandes openssl ci dessous, nous obtenons les éléments suivants :

ca.key

La clé RSA de notre autorité de certification

ca.crt

Le certificat auto-signé de notre autorité

ca.public.key

La clé publique de notre autorité de certification

openssl genrsa -out ca.key
openssl req -new -key ./ca.key -out ./ca.csr
openssl x509 -req -days 365 -in ./ca.csr -out ./ca.crt -signkey ./ca.key
openssl x509 -in ca.crt -text
openssl rsa -in ca.key -passin pass:XXXX -pubout -out ca.public.key

Création et signature du certificat serveur

Il faut ensuite créer la clé et le certificat qui seront utilisé par le serveur. Le certificat serveur sera signé par notre propre autorité de certification créée à l'étape précédente. Lors de la création de la certificate signing request, il est demandé de renseigner un Distinguished Name (DN). La valeur de ce champ devra être identique à la valeur du ServerName utilisé dans le fichier de configuration Apache httpd.conf. En plus de la clé et du certificat, il peut être intéressant de générer une clé qui ne soit pas protégée par un mot de passe. Cela permet de ne pas avoir à saisir de mot de passe à chaque démarrage du serveur Apache.

openssl genrsa -des3 -out server.key
openssl req -new -key ./server.key -out server.csr
openssl x509 -req -in ./server.csr -CA ./ca.crt -CAkey ./ca.key -CAcreateserial -out ./server.crt -days 365
openssl pkcs12 -export -in server.crt -inkey server.key -out server.p12 -name "server certificate"
openssl pkcs12 -info -in server.p12
openssl rsa -in server.key -passin pass:XXXX -pubout -out server.public.key
openssl rsa -in server.key -out server.nopassphrase.key

Création et signature du certificat client

Nous allons maintenant créer de manière similaire un certificat client qui sera utiliser par le client pour s'authentifier auprès du serveur distant. Le certificat client sera signé par la même autorité de certification que le certificat du serveur.

openssl genrsa -des3 -out client.key
openssl req -new -key ./client.key -out client.csr
openssl x509 -req -in ./client.csr -CA ./ca.crt -CAkey ./ca.key -CAcreateserial -out ./client.crt -days 365
openssl pkcs12 -export -in client.crt -inkey client.key -out client.p12 -name "client certificate"
openssl pkcs12 -info -in client.p12
openssl rsa -in client.key -passin pass:XXXX -pubout -out client.public.key

Configuration du serveur Apache

Il convient maintenant de configurer le serveur Apache que seuls les clients disposant d'un certificat signé par notre propre autorité de certification soient autorisés à se connecter. Dans le VirtualHost du port SSL par défaut, il suffit d'utiliser les directives suivantes :

# Doit correspondre au DN du certificat server
ServerName domain

# Encryption et certificat serveur
SSLEngine On
SSLCertificateFile conf/certs/server.crt
SSLCertificateKeyFile conf/certs/server.nopassphrase.key

# Impose la présentation d'un certificat client
SSLVerifyClient require
SSLVerifyDepth 2

# Certificat de l'autorité de certification reconnue pour les clients
SSLCACertificateFile conf/certs/ca.crt

SSLVerifyClient

La valeur require permet d'imposer au client la présentation d'un certificat X509 lors de la phase de négociation SSL.

SSLVerifyDepth

Indique le nombre maximum de niveau que le serveur va analyser pour décider s'il juge le certificat client acceptable. Une valeur de 0 permet de n'autoriser que les certificats clients auto-signés. Une valeur de 1 permet d'accepter les certificats clients auto-signés ou certifiés par une autorité de certification directement connue par le serveur. Dans notre cas, nous utilisons la valeur 2 afin de n'accepter que les certificats clients signés par une autorité de certification directement connue par le serveur.

SSLCACertificateFile

Cette directive permet de spécifier le certificat de l'autorité de certification reconnue par le serveur. Seuls les certificats clients signés par l'autorité de certification identifiée par ce certificat seront acceptés.

Dans un prochain article, nous verrons comment configurer un client Android pour accéder à ce serveur sécurisé.