Pour le premier post sur le graphisme, je vous propose de nous amuser un peu avec.. de l'alcool! (c'est vendredi soir après tout), mais pas que !

La célèbre bière "Desperados" vous propose de créer votre bière en 3 étapes :

• Choisissez 3 nouveaux parfums. Parmi eux, vous y trouverez des saveurs classique tel que fraise, orange citron, mais aussi des goûts plus exotique tel que cactus, irish blend ou menthe!
• Designer votre bouteille ! Choisissez parmi les éléments disponible et disposez les comme bon vous semble, régler l'opacité, rajouter des effets
• Participer au concours de la nouvelle desperados : Vous serez en concurrence avec d'autres internautes. Celui qui aura le plus de j'aime, verra sa bière fabriquée et pourra la déguster dans son bar préféré ! Vous pourrez également achetez 3 bouteille de votre création.

A vous de jouer !

http://www.desperadosbeer.com/fr/fr/#home

Par défaut, le protocole HTTP utilisé par les navigateurs n'est pas sécurisé, ce qui signifie que n'importe qui espionnant votre connexion peut voir tout ce que vous transmettez. Il est donc relativement facile de récupérer les mots de passe des autres internautes sur un réseau wi-fi public s'ils se connectent à des site en HTTP non-sécurisés^[1].

C'est pourquoi le protocole HTTPS a été créé en 1994 afin d'éviter ce genre de problème. HTTPS utilise le protocole SSL et un certificat numérique pour vérifier l'identité du site et chiffrer la connexion entre le navigateur et le serveur.

Votre navigateur vous signale généralement qu'un site utilise HTTPS en affichant un petit cadenas ou le nom du site en bleu/vert^[2].

Cependant, ce certificat ayant un coût, HTTPS est loin d'être utilisé par défaut sur la majorité des sites. Jusqu'il y a peu, même Facebook n'activait pas HTTPS par défaut !
Mais nous allons voir que des solutions gratuites existent et que, si la sécurité de vos utilisateurs vous tient à cœur, il n'est pas si difficile de mettre en place HTTPS sur votre site.

Comment ça marche ?

Lors que vous vous connectez à un site en HTTPS, le navigateur reçoit le certificat du site et vérifie qu'il est valide. Ce certificat a été préalablement signé par une autorité de certification et votre navigateur ne peut le vérifier que si cette autorité de certification est dans sa liste de confiance.
Le problème c'est que ces autorités de certification vendent généralement ces certificats au prix fort.
Il est, en théorie, possible de signer vous-même le certificat ou d'utiliser une autorité de certification gratuite comme CAcert, mais le certificat ne pourra pas être vérifié par le navigateur et vos visiteurs auront droit à une énorme erreur effrayante. Autant dire que cela fera fuir la grosse majorité de vos visiteurs.

Comment faire alors ?

Heureusement, il existe une autorité de certification qui délivre des certificats gratuits. Il s'agit de StartSSL. Vous pouvez demander en quelques clics un certificat valide reconnu par tous les navigateurs.

Attention cependant si votre site utilise des sous-domaines^[3], il vous faudra un certificat par sous-domaine. De plus, les certificats sont à renouveler tous les ans, ce qui peut être contraignant si vous avez beaucoup de domaines.

Mettre en place le certificat

La plupart des serveurs Web ont dans leur documentation un chapitre consacré à HTTPS. Cependant, si l'administration de serveur n'est pas votre tasse de thé, il est possible que votre hébergeur propose de vous installer un certificat (moyennant finance, bien entendu). Vous pouvez également demander à StrasWeb de vous donner un coup de main !

Voici un exemple basique de configuration pour apache:

Listen 443
SSLEngine on
SSLCertificateFile /etc/apache2/rudloff.crt
SSLCertificateKeyFile /etc/apache2/server.key
SSLCACertificateFile /etc/apache2/ca.pem

Il suffit en fait simplement d'ouvrir le port 443 (le port par défaut pour HTTPS), d'activer SSL et d'indiquer le certificat, la clef^[4], ainsi que le certificat de l'autorité de certification^[5].

Le nom de domaine est l'adresse qui identifie votre site (strasweb.fr, par exemple). Il est généralement constitué d'un domaine de premier niveau (fr) et d'un domaine de second niveau (strasweb), ainsi que parfois d'un sous domaine (ex. : blog.strasweb.fr). Le domaine de premier niveau permet d'identifier le pays^[1] ou le type d'activité ^[2] du site.

Mais à quoi ça sert ?

Sur Internet, un serveur est identifié par une adresse IP (ex. : 213.186.33.19). Malheureusement, cette suite de chiffre n'est pas franchement facile à mémoriser pour un humain. C'est pourquoi on a créé les noms de domaine. Chaque nom de domaine est un alias correspondant à une adresse IP (ex : strasweb.fr renvoie sur 213.186.33.19).

Vous pouvez vous rendre compte de ça en tapant 74.125.230.87 dans la barre d'adresse de votre navigateur. Comme vous le verrez 74.125.230.87 est l'IP vers laquelle renvoie le domaine google.fr.

Comment ça fonctionne ?

Je ne rentrerais pas ici dans les détails techniques de la gestion des noms domaine, je vais par contre vous parler de l'aspect administratif.

Au début, chaque ordinateur maintenait sa propre liste de domaines, mais avec l’accroissement d'Internet, cette gestion a été centralisée. C'est aujourd'hui l'ICANN qui gère l'attribution des noms de domaines. Cette responsabilité est souvent déléguée à des organismes locaux pour les domaines de premier niveau géographiques^[3].

Acheter un nom de domaine

Si vous voulez un nom de domaine pour votre site, il faudra donc que l'un de ces organismes vous l'attribue. Dans la pratique, il n'est pas possible de demander un domaine directement à l'ICANN, il faudra en fait passer par un bureau d'enregistrement comme OVH ou Gandi.
Cette prestation a un coût^[4] et vous payez généralement votre domaine à l'année. Le prix varie selon le domaine choisi, cela peut aller d'une dizaine d'euros pour un .fr ou un .com à plus de 60 € pour un .xxx^[5]. Sachez également que les bureaux d'enregistrement font souvent des promotions sur tel ou tel domaine^[6], cela vaut donc le coup de comparer les prix.

La plupart des hébergeurs font aussi bureau d'enregistrement donc il est courant de prendre le domaine et l'hébergement chez le même prestataire. Cependant, sachez que la vente liée est interdite et que vous pouvez très bien prendre le domaine seul^[7].

Quel nom domaine choisir ?

Votre nom de domaine sera généralement le nom de votre association. Faites attention à ce qu'il ne soit pas trop long et facile à retenir. Évitez, par exemple, les domaines du genre association-étudiante-solidarité-internationale.fr qui peuvent, parait-il, améliorer le référencement mais sont difficiles à retenir pour vos visiteurs.

Le domaine de premier niveau a un sens et peu influer sur le référencement^[8], bien que cette influence soit difficile à mesurer.
De plus certains domaines sont réservés aux habitants d'un pays ou à une profession, vérifiez donc bien que vous avez les autorisations nécessaires avec d'acheter un domaine.
Voici les domaines de premier niveau qui peuvent vous convenir en tant qu'association:

• .net : domaine générique pour Internet, ouvert à tous
• .org : organismes à but non-lucratif, ouvert à tous
• .fr : pour les personnes physiques ou morales résidant en France
• .asso.fr : réservé aux associations
• .eu : pour les personnes physiques ou morales résidant au sein de l'Union européenne
• .info : pour les sites d'information, ouvert à tous

Conclusion

Avoir son propre domaine est un gage de sérieux, monasso.fr sera toujours plus crédible que monasso.free.fr ou e-monsite.com.
De même, vous pouvez utiliser votre domaine pour vos e-mails^[9], president@monasso.fr étant tout de même plus présentable que choupinette36@hotmail.fr.

Bref, même si vous estimez que votre site n'est pas très important, prenez un nom de domaine, ça ne coûte pas cher et ce sera un pas de plus pour l'évolution de votre association.

(Cet article a été à la base rédigé pour MozFR.)

De plus en plus de sites utilisent des systèmes de connexion sans mot de passe comme Facebook Connect ou OpenID. Ces systèmes permettent à l'utilisateur de se connecter rapidement en un ou deux clics.

Mozilla a sorti il y a quelques temps BrowserID^[1], un système de connexion similaire, simple à mettre en place et peu contraignant pour l'utilisateur puisqu'il suffit de fournir une adresse e-mail valide pour se connecter.

L'intérêt d'un tel système est de permettre aux utilisateurs de se connecter rapidement sans avoir à taper leur mot de passe à chaque fois. De plus, il simplifie pour vous la gestion des comptes et renforce la sécurité de votre site puisque vous n'aurez pas à stocker les mots de passe de vos utilisateurs.
L'autre intérêt de BrowserID, c'est que contrairement aux autres systèmes qui transmettent tout un tas d'information sur l'utilisateur^[2], BrowserID n'utilise lui que l'adresse e-mail et ne piste pas l'utilisateur^[3].

Ce système est relativement facile à intégrer à un site web. Cependant, sachez qu'il vous faudra quand même de bonnes bases en PHP et en JavaScript. Si ce n'est pas votre cas, sachez qu'il existe tout un tas de plugins pour des CMS comme Drupal, SPIP ou WordPress.

Côté client, il suffit de charger le script include.js^[4] et de lier la fonction navigator.id.get au clic du bouton de connexion.

Exemple en JavaScript :

var login, connect, loginBtn;
login = function (assertion) {
    "use strict";
    if (assertion) {
        document.location = "login.php?assertion=" + assertion;
    }
};
connect = function () {
    "use strict";
    navigator.id.get(login);
};
loginBtn = document.getElementById("login");
if (loginBtn.addEventListener) {
    loginBtn.addEventListener("click", connect, false);
} else if (loginBtn.attachEvent) {
    loginBtn.attachEvent("onclick", connect);
}

Exemple avec jQuery :

/*global $*/
var login, connect;
login = function (assertion) {
    "use strict";
    if (assertion) {
        document.location = "login.php?assertion=" + assertion;
    }
};
connect = function () {
    "use strict";
    navigator.id.get(login);
};
$(".loginBtn").bind("click", connect);

Quand l'utilisateur cliquera sur le bouton, une fenêtre va s'ouvrir et lui demander d'entrer son adresse e-mail. Si c'est la première fois qu'il utilise BrowserID, il devra la valider (en cliquant sur un lien dans un mail) et sinon, il pourra se connecter directement.

Une fois que l'utilisateur a validé sa connexion, le script envoie une assertion (un hash contenant les informations de connexion) à la page indiquée (login.php dans l'exemple ci-dessus). Il faut donc récupérer cette assertion côté serveur et la renvoyer au serveur de BrowserID qui va vérifier qu'elle est valide.
L'assertion doit être envoyée à https://browserid.org/verify avec une requête POST. Le serveur renvoie ensuite un objet JSON contenant l'adresse e-mail de l’utilisateur et l'état de la connexion.

Exemple en PHP avec curl :

$url = "https://browserid.org/verify";
$curl = curl_init($url);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt(
    $curl, CURLOPT_POSTFIELDS, "assertion=".strval(
        $_GET["assertion"]
    )."&audience=".$_SERVER["HTTP_HOST"]
);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$response=json_decode(strval(curl_exec($curl)));
curl_close($curl);
 

if ($response->status==="okay") {
    //C'est bon
    echo "Vous êtes connecté en tant que ".$response->email.".";
} else {
    //C'est pas bon
    echo "Erreur : ".$response->reason;
}

Exemple avec jQuery :

/*global $*/
function login(assertion) {
    "use strict";
    $.ajax({
        type: "POST",
        url: "https://browserid.org/verify",
        data: {
            assertion: assertion
        },
        success: function (res) {
            var response = JSON.parse(res);
            if (response.status === "okay") {
                alert(response.email);
            } else {
                alert("Erreur : " + response.reason);
            }
        }
    });
}

Et voilà, c'est tout. Si le statut est okay, vous n'avez plus qu'à ouvrir une session pour le compte qui utilise cette adresse e-mail.

Vous trouverez ici une petite démonstration qui montre comment se passe la connexion. (Le code de la démo est disponible sur le serveur SVN de StrasWeb.)

Il est vrai que la législation en matière de traitement des données sur Internet est relativement souple pour les particuliers. En effet, pas besoin de déclaration à la CNIL ou de mentions légales pour votre blog personnel.

Cependant, les choses se compliquent quand il s'agit d'une association et nous allons voir qu'il y a un certain nombre d'informations à ne pas oublier sur votre site web.

Données à caractère personnel

Si votre site enregistre des données à caractère personnel (nom, date de naissance, adresse, numéro de sécurité sociale, etc) sur les membres, vous devez tout d'abord en informer les personnes concernées lors de leur inscription. Vous devez aussi préciser si telle ou telle information est facultative ou obligatoire, ainsi que la durée de conservation des informations et l'utilisation (commerciale ou non) qui en sera faite.

A noter que ceci ne s'applique pas aux données de connexion (adresse IP, heure de connexion, etc) tant qu'elles ne sont utilisées que pour faire des statistiques et conservées pendant une durée raisonnable.

Ensuite, vous devez permettre aux personnes de modifier les informations les concernant (que ce soit via une interface dédiée ou simplement par e-mail) et devez les informer de ce droit. Si vous respectez toutes ces conditions (accord de la personne, accès aux données), vous pouvez enregistrer et diffuser des informations sur les membres de votre site. Mais attention, celles-ci ne doivent pas être discriminantes (religion, opinion politique, origines raciales, sexualité).
(Note : il est vrai que plein de gens expriment librement ces informations sur Internet, mais la CNIL estime qu'elles « n’ont pas vocation à être diffusées sur internet ».)

Déclaration à la CNIL

Donc, si vous enregistrez/publiez des informations personnelles sur des personnes, vous devez les déclarer votre site web auprès de Commission Nationale de l'Informatique et des Libertés.
Vous pouvez le faire gratuitement et facilement sur le site de la CNIL. Il vous faudra préciser les informations collectées et l'utilisation qui en est faite.

Dispense

Vous êtes peut-être en train de vous dire que cela va être l'horreur de déclarer toutes les données que vous collectez sur les membres de votre association à la CNIL. Heureusement, un certain nombre de situations sont dispensées de déclaration, notamment les listes de membres et de salariés nécessaires au bon fonctionnement de l'association.
Le plus simple est de regarder la liste des dispenses sur le site de la CNIL pour voir si l'une d'elle correspond à votre cas.

Autres cas

Nous parlons ici d'un site web, mais sachez que les règles de la CNIL s'appliquent à tous les fichiers informatiques. Vous êtes donc censés prévenir vos membres que vous gardez des informations sur eux dans un simple fichier Excel.

Par contre, tout ceci s'applique uniquement aux personnes physiques et non aux personnes morales, vous pouvez donc allègrement conserver des informations sur vos partenaires (institutions, entreprises, associations, etc).
Attention tout de même à ne pas commettre d'autres infractions (diffamation, par exemple).

Mentions légales

Conformément à la loi pour la confiance dans l'économie numérique, si votre site met en place un « un service de communication au public », il doit contenir un certain nombre de mentions légales dans un format ouvert (généralement HTML) :

• Concernant votre association :
  • Son nom
  • L'adresse de son siège (figurant dans les statuts)
  • Un numéro de téléphone
  • Le nom du directeur de la publication (le représentant légal de l'association)
• Concernant l'hébergeur :
  • Sa raison sociale
  • Son adresse
  • Son numéro de téléphone

Ce n'est pas obligatoire, mais il peut être bien d'indiquer également une adresse e-mail ainsi que votre numéro SIRET.

Ces dispositions ne sont dans la pratique pas respectées par nombre de petits sites, mais vous risquez 75000 € d'amende si vous ne les respectez pas.

De plus, si votre site utilise des cookies pour gérer les sessions des utilisateurs (ce qui est probable), vous devez le signaler et leur indiquer qu'ils peuvent les supprimer dans les préférences de leur navigateur.

Responsabilité des utilisateurs

Si votre site permet aux utilisateurs de publier des images, des articles, etc, vous n'êtes pas tenus de contrôler tout le contenu publié par les internautes et ne pouvez pas être responsable d'un contenu dont vous n'aviez pas connaissance.

Cependant, si vous remarquez un contenu illégal (incitation à la haine, pédopornographie, etc), vous devez le retirer.
De même, vous devez mettre en place un moyen pour les visiteurs de vous signaler un contenu choquant ou illicite (adresse e-mail, formulaire de contact, etc).

Il est également recommander d'avoir des conditions générales d'utilisation indiquant que vous vous réservez le droit de retirer un contenu qui vous semble inapproprié ou potentiellement illicite.

Droit de réponse

Toute personne nommée dans un article dispose d'un droit de réponse. Dans ce cas elle doit s'adresser au directeur de la publication dans un délai de trois mois après la publication de l'article. Le directeur de la publication dispose ensuite de trois jours pour publier la réponse, sous peine d'une amende de 3750 €. La publication de la réponse ne peut pas être facturée.

Commerce en ligne

Si vous faites du commerce en ligne (qu'il s'agisse de biens ou de services), vous devez indiquer, en plus des mentions légales habituelles, si vos prix sont hors-taxes ou TTC et si les frais de port sont compris.
Et si votre association est soumise à la TVA, vous devez indiquer votre numéro de TVA intracommunautaire.

De plus, c'est à vous de faire en sorte que le paiement en ligne soit sécurisé. (Il est donc recommandé de faire appel à un service fiable comme PayPal.)

Espaces de discussion

Si votre site contient un forum ou des commentaires, vous devez indiquer s'ils sont modérés et surtout permettre aux utilisateurs de retirer leurs contributions sur simple demande.

Sous-traitance

Il est possible que vous fassiez appel à une agence pour la réalisation de votre site et il est encore plus probable que vous passiez par un hébergeur professionnel pour le mettre en ligne.
Sachez que ces professionnels ont un devoir d'information et de conseil concernant toutes ces dispositions légales. De plus, ils sont normalement tenus au secret professionnel concernant les informations auxquelles ils auraient accès durant le développement ou la mise en ligne du site.
Vérifiez bien que le contrat avec votre hébergeur ne l'autorise pas à utiliser les données du site pour son propre compte !

Droit d'auteur

Le droit d'auteur est souvent bafoué sur Internet, la quantité d'informations publiées rendant tout contrôle. Sachez néanmoins qu'en tant qu'association, votre visibilité est accrue et vous risquez des sanctions si vous utilisez un contenu sans l'accord de son auteur.

Afin de pouvoir réutiliser une image, un texte, une vidéo, etc, vous devez obtenir l'autorisation explicite de son auteur. Cette autorisation doit fixer les conditions de cette utilisation (support, durée, etc) et peut être monnayée.

Si l'auteur est mort depuis plus de 70 ans (en France ; la durée varie selon les pays), l’œuvre tombe dans le domaine public et est utilisable par tout le monde.

Photos

Attention, dans le cas d'une photo, il vous faudra l'accord de l'auteur et du sujet. En effet, si le sujet de la photo est une personne identifiable, il vous faudra son autorisation pour la publier.
De même, s'il agit d'une photo d'une œuvre d'art ou d'un bâtiment, il vous faudra également l'accord de l'artiste ou de l'architecte.

Logos

L'utilisation d'un logo ne vous appartenant pas est permise à des fins non-commerciales d'illustration ou d'enseignement.
Vous pouvez donc utiliser le logo d'une entreprise pour illustrer un article parlant d'elle. Vous pouvez aussi bien sûr placer les logos de vos partenaires sur votre site.

Texte

Le droit de citation permet, en France, de diffuser un extrait d'un texte protégé par le droit d'auteur si cet extrait ne dépasse pas 10 % de la page utilisée et sous réserve d'indiquer l'auteur et l'ouvrage.

Licences libres

Il est évident que cela restreint sérieusement les possibilités d'illustration de vos articles. Heureusement, de plus en plus d'auteurs publient leurs documents sous une licence libre, autorisant ainsi n'importe qui à réutiliser sans demander d'autorisation d'abord (mais en respectant les conditions de la licence).
Les licences libres les plus connues sont les licences Creative Commons, qui permettent de spécifier clairement les conditions de réutilisation (utilisation commerciale ou non, citer l'auteur, réutiliser tel quel, etc). Une de ces licences est notamment utilisée par Wikipédia.

Il existe de nombreuses base de données de contenus libres comme Wikimedia Commons (images), Freesound (sons), Jamendo (musique), etc. Flickr permet également de restreindre la recherche aux images libres.

En tant qu'association, il est probable que vous ne viviez pas de la vente de vos photos ou de vos textes, pensez donc à considérer leur publication sous licence libre, qui pourrait permettre à d'autres associations de les réutiliser pour leurs projets.

Conclusion

Toutes ces dispositions peuvent paraître très contraignante, cependant, il ne s'agit au final que de quelques phrases dans le pied-de-page de votre site ou sur une page dédiée.
Il est tentant de passer outre, mais vous vous exposeriez bêtement à des amendes de plusieurs milliers d'euros qui auraient pu être facilement évitées.

Sources

• Loi n° 2004-575 du 21 juin 2004 pour la confiance dans l'économie numérique (mentions légales)
• Loi n° 82-652 du 29 juillet 1982 sur la communication audiovisuelle (définition du directeur de publication)
• Guide pratique de la CNIL
• Association Française pour le Nommage Internet en Coopération
• Site de la CNIL
• Liste des dispenses de la CNIL pour les associations
• Informations sur les cookies
• Article L122-5 du code de la propriété intellectuelle (droit de citation)
• Article L513-6 du code de la propriété intellectuelle (utilisation de logos)