Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

 

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Fiche de synthèse

Présentation de l'activité en entreprise

L'entreprise d'accueil

Nom :
Mutieg
Activité :
Mutuelle des Industries Electriques et Gazières
Nombre d'employés :
17 (+ 88 % entre 2005 et 2008)
Nombre d'adhérents :
25 000 (+ 66 % entre 2005 et 2008)
Adresse :
37 Rue de Châteaudun 75009 PARIS
Département :
Informatique

Le maître d'apprentissage

Nom et prénom :
SOUCHU-BERTRAND Sylvie
Fonction :
Responsable finance et comptabilité
Département :
Finance et comptabilité
Le logo de MUTIEG

Résumé des travaux proposés par l'entreprise

Les travaux proposés s'articulent autour d'un apprentissage de trois ans en qualité de responsable du système d’information non-métier, incluant la gestion du parc informatique, la maintenance des matériels et logiciels existants, la migration de bases de données, la conception et le développement de nouveaux applicatifs, notamment un logiciel de simulation de remboursement de frais dentaires ainsi qu’un outil de gestion du temps de travail pour le personnel à temps partiel.

Résumé des travaux effectués en entreprise

Les travaux effectués en entreprise sont sensiblement identiques aux tâches proposées par l’entreprise, entrecoupés de missions ponctuelles selon différents évènements intervenant au cours de l’année (mise à jour de fin d’année, élection des délégués…etc.). Les travaux décrits ci-dessus, réalisés en quasi totale autonomie, m’ont offert une visibilité sur des aspects qui ne sont en principe pas traités par notre formation et à fortiori complémentaires, notamment l’administration de comptes utilisateurs via la prise en main des serveurs de la mutuelle.

Matière
Technologies manipulées en entreprise
Technologies enseignées à l'université
Système d'exploitation
Windows 2000 / XP / Vista / Server 2003
-
Logiciels
Office 2003 / 2007, Exchange 2003
-
Conception
Uml
Uml
Développement
Javascript / Ajax, Php 5, Vba
Javascript / Ajax, Java
Bases de données
MySql 5
XPath, XQuery
Autres technologies
Xhtml / Html, Css
Xhtml / Html, Css, Xml, Xsl, Soap

La conception, le développement et les tests sont la trinité du processus de création de logiciels au sein de la mutuelle. Cette partie est toutefois reléguée au second plan lorsqu’une urgence d’exploitation est à traiter. Le nombre de lignes de code n’est pas un indicateur pertinent (un simple bloc d’instructions if / else peut être écrit en huit lignes, comme en une ligne). Le résultat et la qualité priment sur la quantité. La qualité est évaluée subjectivement sur la réutilisabilité et la facilité de maintenance.

En effet, la maintenance peut se révéler particulièrement chronophage et nuire au développement. Celle-ci peut notamment être rendue accessible par les commentaires et le morcellement du code, mais avant tout par la maîtrise cognitive des logiciels dont on a la responsabilité.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Présentation et synthèse du sujet de mémoire de l'apprenti

Présentation du sujet de mémoire

Le sujet du mémoire est : « Quel futur pour Internet ? ». Il s’agit de mettre en lumière, par le croisement de différentes sources d’information, une nouvelle approche d’un avenir probable d’Internet.

Bien que le sujet soit éloigné du cœur de métier de Mutieg, il n’en reste pas moins utile : généralement par sa partie synthétique et spécifiquement par sa partie portant sur les standards du web (Xhtml, Html, ...etc.), ainsi que la compatibilité du code produit avec les différents navigateurs et l’importance de l’accessibilité (Wcag) des sites Internet aux personnes handicapées.

En effet, la majorité des applications développées au sein du système d’information non-métier de Mutieg reposant sur les technologies du web, il semble réaliste de penser que la connaissance de l’orientation future de ces outils soit une information nécessairement bénéfique pour le développement de la mutuelle.

Sources d'information

Les sources d’information sont nombreuses et variées, toutes fiables et issues d’organismes respectables, qu’elles soient de Renater, du W3c ou de Freenet.

Innovation

Le sceau « Live Test »Live test !

Ce que ce mémoire apporte de nouveau, c’est un croisement inédit d’informations elles-mêmes méconnues du grand public, axant Internet dans une direction originale, étayée par une analyse matérielle, logicielle et sécuritaire.

En outre, dans le cadre du Master Miage Ilw (Ingénierie Logicielle pour le Web) de l'université d'Evry Val d'Essonne, la rédaction d'un mémoire sur le futur d'Internet est une occasion particulièrement intéressante de réaliser ce travail à l'aide des technologies qui y sont décrites.

C'est la raison pour laquelle il a été décidé que ce mémoire serait intégralement produit à l'aide des technologies Xhtml 1 et Xhtml 5. Cette initiative garantit que l'intégralité du mémoire pourra être consultée en ligne à l'adresse http://www.denistruffaut.com/memoire. Les exemples frappés du sceau « Live Test », indiquant qu'une expérience utilisateur est disponible, pourront également être retrouvés en ligne via le navigateur Opera, seul navigateur lors la rédaction de ce mémoire à supporter complètement Xhtml 5.

Utilisation potentielle des travaux

Outre l’utilisation incontournable des technologies du web de demain, les domaines d’application s’étendent à l’amélioration de la compréhension du développement des réseaux mondiaux (où s’implanter pour avoir un service de qualité ?), ainsi qu’à la recherche fondamentale dans le domaine des réseaux sécurisés pouvant fonctionner avec ou en autarcie vis-à-vis d’Internet.

Perspectives

Traiter un sujet aussi vaste que le futur d’Internet ne peut se faire sans oubli volontaire de pans entiers de réflexion. Les axes étudiés dans ce mémoire sont importants et fondateurs d’une certaine vision d’Internet, mais ne sont pas les uniques opportunités à étudier. Un mémoire plus complet s’appuierait donc sur d’autres aspects, quand bien même il serait impossible de prévoir la destinée d’un mastodonte tel qu’Internet, tant le nombre de variables à considérer se révèle être grand.

J’espère toutefois être en mesure de couvrir une majeure partie de mon plan initial de travail, mais ne peux assurer y parvenir. A contrario, je pourrai ajouter des éléments de réflexions supplémentaires si le temps me le permet.

A l’avenir je pense que chaque titre traité dans ce mémoire me sera utile, que ce soit pour ma culture générale, ma passion ou mon métier. L’informatique est chez moi une vocation, et traiter un mémoire sur un sujet en relation avec celle-ci est une expérience des plus enrichissantes.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Introduction

Internet (source : http://www.opte.org)La carte mondiale des noms de domaine sur Internet

Révolution initiée dans la seconde moitié du siècle dernier, Internet est de nos jours si profondément ancré dans les moeurs de chacun qu'il est devenu en l'espace de quelques années un outil d'échange et de partage indispensable au fonctionnement de toute société moderne.

Média de masse au contenu sans cesse renouvelé, Internet doit avant tout son succès au père du World Wide Web, Tim BERNERS-LEE, convaincu que l'essor d'un tel support ne se ferait que sur la base d'une liberté totale d'accès et de modification de l'information.

Si Internet est aujourd'hui unanimement plébiscité, il convient de nous interroger sur son développement futur. Afin de définir quelques unes des grandes orientations probables d'Internet, nous appuyons notre réflexion sur trois axes.

La première direction que nous empruntons est la découverte des prochaines dorsales dédiées à l'éducation et à la recherche. Si celles-ci ne reflètent pas exactement l'Internet de demain, elles sont cependant un excellent moyen de comparaison de l'avancée technologique prise par les nations, au niveau des architectures et par conséquent au niveau du support matériel d'Internet.

Le second point que nous abordons détaille les possibilités offertes par l'utilisation des prochaines recommandations du W3c, et plus particulièrement le brouillon de travail de Xhtml 5. Dans cet embryon de spécification déjà très prometteur, nous avons notamment choisi de traiter le renouveau des formulaires web (web forms 2.0) et l'introduction d'une partie graphique vectorielle et animée (Canvas) au sein même du brouillon de travail.

La troisième orientation que nous explorons s'inscrit dans l'actualité numérique, puisqu'il s'agit d'une part de la volonté de filtrage des contenus impliquant les gouvernements, et d'autre part d'une réponse cryptée et anonymisante émanant des défenseurs de la liberté d'expression. Sans remonter dans le temps pour expliquer l'origine de cette querelle, nous nous attachons à décrire les moyens en notre possession afin de lutter contre ces mesures liberticides, via une solution logicielle que nous comparons brièvement à deux de ses concurrents potentiels.

Fort de l'analyse succinte de ces grandes tendances, nous concluons sur l'un des avenirs probables d'Internet, avant de laisser le soin au lecteur intéressé d'approfondir davantage cette reflexion au travers d'annexes soigneusement choisies pour leur connexité au sujet de ce mémoire.

En vous souhaitant une agréable lecture,

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

L'évolution des architectures

Un réseau de réseaux

Internet, désigné à juste titre comme un réseau de réseaux, est un ensemble de dorsales (ou backbones) reliées entre elles par des connexions transcontinentales, dont le débit avoisine les 10 Gb/s.

Historiquement, les dorsales sont dédiées dans un premier temps à l’éducation et la recherche. Puis, lorsque les techniques évoluent et que le réseau s’agrandit, les dorsales sont partagées avec le domaine public. Aujourd’hui, une nouvelle vague de dorsales se prépare à voir le jour ; parmi elles le réseau nord-américain Internet2, le réseau sud-américain Alice, le réseau européen Géant2, le réseau méditerranéen Eumedconnect et les réseaux asiatiques Orient, Tein2 et Cernet2.

La carte mondiale des dorsalesLa carte mondiale des dorsales

La plupart de ces réseaux sont développés en coopération avec l’organisme européen Dante, à l’exception d’Internet2 et de Cernet2, respectivement financés par les Etats-Unis et la Chine. Si il est possible d'observer une certaine concordance entre les dorsales et le nombre d'utilisateurs d'Internet par pays, on notera que le développement d'Internet semble particulièrement limité sur le continent africain et le centre eurasiatique.

La carte mondiale des utilisateurs d'Internet (chiffres : Wikipedia)La carte mondiale des utilisateurs d'Internet

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Internet2

Initié en 1996, le projet Internet2 entre actuellement en phase de test. Désignée sous le nom de code Abilene, l'infrastructure se positionne comme l’évolution naturelle du premier Internet, utilisant le territoire nord-américain comme base opérationnelle.

En tant que programme d'envergure nationale, le consortium Internet2 réunit à lui seul plus de 210 universités, 70 corporations et 45 agences gouvernementales des Etats-Unis.

Le consortium Internet2 est également connu sous le nom officiel d'Ucaid (University Corporation for Advanced Internet Development) et opère avec des partenaires gouvernementaux tels que Esnet (Energy Sciences Network), Nren (Nasa Research and Education Network), Nisn (Nasa Integrated Services Network), Dren (Defense Research and Engineering Network), Darpa (Defense Advance Research Projects Agency), et Vbns (Very high speed Backbone Network Service).

La topologie d'Internet2 (source : http://www.internet2.edu)La topologie d'Internet2

Le réseau Internet2 a été conçu dans l'optique de proposer des débits de 100 Gb/s entre deux noeuds, avec une estimation de 100 Mb/s de poste à poste. Dépendant autrefois de l'infrastructure louée par Qwest, Internet a rapidement su s'émanciper et dépasser les limites géographiques de son partenaire d'autrefois, permettant ainsi au réseau de croître au niveau national.

Internet2 dessert actuellement une grande partie des Etats-Unis, mais quelques états tels que le Montana, le Dakota nord, le Dakota sud, le Minesota, le Wisconsin ou le Maine ne profitent pas des avancées technologiques offertes par Internet2.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Alice

Le réseau Alice a été bâti de 2003 à 2007, et fut achevé avec près d'un an de retard sur la date initiale. Financé à 80 % par la Commission Européenne et à concurrence de 10 000 000 € (source : http://alice.dante.net), Alice fut développé sur les bases du réseau RedClara.

La topologie d'Alice (source : http://www.renater.fr)La topologie d'ALICE

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Géant2

La construction du réseau Géant2 s’est étalée sur quatre ans, de septembre 2004 à septembre 2008. Géant2, financé par la Commission Européenne à hauteur de 93 000 000 € (source : http://www.geant2.net), est conçu pour desservir 34 pays et relier 30 réseaux nationaux pour la recherche et l’éducation. La particularité de Géant2 est de proposer des « Dark Fibres » permettant d’atteindre des débits inégalés (320 Gb/s).

La topologie de Géant2 (source : http://www.renater.fr)La topologie de GÉANT2

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Eumedconnect

Le réseau Eumedconnect a débuté en 2001 pour achever sa construction six ans plus tard, en 2007. Son évolution, Eumedconnect2, est d’ores et déjà planifiée (source : http://www.eumedconnect.net).

La topologie d'Eumedconnect (source : http://www.renater.fr)La topologie d'EUMEDconnect

Eumedconnect dessert actuellement le nord de l'Afrique et le Proche-Orient, via des relais Géant2 placés en Angleterre, en Espagne, en France, en Grèce, en Italie, en Israël et en Turquie.

Le cas de l'Italie est remarquable puisqu'il s'agit du seul pays à fournir à la fois les réseaux Eumedconnect et Géant2. De son côté Chypre, pays desservi dans le réseau Géant2, est ici un serveur du réseau Eumedconnect.

Il est intéressant de remarquer que certains pays participant au projet Eumedconnect, tels que Malte ou Chypre, sont également présents dans le plan architectural de Géant2. Cette ambiguïté, également ressentie sur la plan politique, ne favorise pas l'éclaircissement de la situation de ces deux nations.

D'autres pays tels que la Grèce sont des pierres angulaires des dorsales. En effet, en plus d'intégrer les réseaux Eumedconnect et Géant2, cette nation fait également partie du modeste réseau centre européen Sereen2 composé de l'Albanie, de la Bosnie, de la Macédoine, du Monténégro et de la Serbie.

En tant que « réseau d'appoint », les débits proposés par Eumedconnect sont relativement faibles en comparaison de ceux offerts par Géant2, mais restent néanmoins suffisants au regard des besoins des pays membres.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Tein2

Le réseau Tein2 a débuté sa construction en Mai 2004 et achevé fin 2007. Distribuant à la fois l’est asiatique et l’Océanie, Tein2 a été financé par l’Union Européenne à hauteur de 10 000 000 € (source : http://www.tein2.net). L'une des particularités du réseau est sa proximité avec Géant2, assurée par 4 liens à 622 Mb/s.

La topologie de Tein2 (source : http://www.renater.fr)La topologie de TEIN2

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Cernet2

Le réseau Cernet2 a commencé sa construction en 2004 avec un budget avoisinant les 56 770 000 € (source : http://www.chinadaily.com.cn). Le réseau chinois, qui relie près de 900 institutions éducatives, a pour particularité de proposer une connexion à 40 Gb/s entre les villes de Beijing et Tianjin, lorsque le reste du réseau est annoncé à un débit maximum de 10 Gb/s.

La topologie de Cernet2 (source : http://www.nrc.tsinghua.edu.cn) La topologie de CERNET2

Possédant des liaisons transdorsales avec Géant2, Internet2, Tein2, le Japon et la Corée, le réseau Cernet2 est, à l’instar de son homologue Géant2, une plaque tournante des échanges virtuels dédiés à l’éducation et à la recherche. Ceci est d’autant plus vrai qu’un prochain réseau Orient, unissant exclusivement la Chine et l’Europe, est en cours d’élaboration.

Compte tenu des barrières inhérentes à la langue et à la politique locales, les organismes internationaux tels que Dante attendent du gouvernement chinois une pleine coopération, notamment en matière de transparence et de liberté d’expression, le filtrage et l'écoute des données –inscrits dans les moeurs des autorités chinoises– pouvant nuire au transit des informations sur le réseau mondial.

Comme le lecteur attentif l’aura remarqué, le schéma ci-dessus n'a fait l'objet d'aucune traduction ou normalisation. Habituée à gérer des problématiques nationales, la Chine aura besoin d'une politique d'ouverture si tant est qu'elle souhaite travailler à l'échelle internationale.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Un développement inégal

Les réseaux présentés sont tous connectés à l’échelle internationale, formant ainsi un vaste ensemble de points d’accès desquels il est possible d’accéder aux réseaux nationaux. Cependant, le développement de chacun des systèmes s’est effectué de manière inégale.

Ainsi, si l’on oublie l’espace d’un moment les quatre réseaux promus par l’organisme Dante, il reste deux organisations qui ont fait le choix d’une croissance indépendante : Cernet2 et Internet2. Respectivement mus par la Chine et les Etats-Unis, ces deux réseaux ont bénéficié de la puissance financière colossale de leurs nations hôtes, mais aussi des acquis technologiques inhérents aux deux nations.

Nom
Débit min.
Débit max.
Couverture
source de financement
Montant
Internet2
10 Mb/s
100 000 Mb/s
Amérique du nord
Etats-Unis
inconnu
Alice
10 Mb/s
622 Mb/s
Amérique du sud
Commission Européenne
10 000 000 €
Géant2
34 Mb/s
320 000 Mb/s
Europe
Commission Européenne
93 000 000 €
Eumedconnect
8 Mb/s
622 Mb/s
Méditerranée
Commission Européenne
inconnu
Tein2
45 Mb/s
2 500 Mb/s
Asie de l'est + Océanie
Commission Européenne
10 000 000 €
Cernet2
155 Mb/s
40 000 Mb/s
Chine
Chine
56 770 000 €

Le réseau nord-américain Internet2, fort de la puissance financière et de l’avancée technologique des Etats-Unis, implique de nombreux acteurs privés tels que Microsoft, Ibm, Hp, Cisco et Juniper Networks. Internet2 couvre actuellement la majorité du territoire des USA. Fidèle à la politique d’isolationnisme des Etats-Unis, Internet2 commence tout juste à ouvrir son réseau au Canada, tandis que le ralliement du continent sud américain n'est toujours pas planifié.

Le réseau Cernet2, au-delà du mutisme caractéristique du système chinois, se calque sur les réussites étrangères et tente de combler son retard. Véritable carrefour de l’Asie, Cernet2 est bien desservi à l’international, mais beaucoup moins au niveau national. En effet, à l’intérieur du pays les disparités restent importantes et si les côtes bénéficient d'un service intéressant, de nombreuses zones géographiques ne font pas partie du plan d’urbanisme de Cernet2.

Les réseaux latin Alice et méditerranéen Eumedconnect, en cours de développement, bénéficient du soutien des nations européennes et des connexions proposées par Géant2. La fragilité du réseau Alice est inquiétante, puisque celui-ci repose sur une unique connexion, maritime de surcroît, à Géant2.

Le réseau est-asiatique Tein2, propulsé par quatre connexions à Géant2, une connexion à Internet2 et une connexion à Cernet2, est un défi technologique compte tenu du nombre d’archipels à desservir. En effet, le problème de cablage de Tein2 n'est pas seulement le changement fréquent de support terre / mer, mais également la traverse d'une zone riche en activité sismique et donc dangereuse pour le maintient d'une connectivité continue.

Le réseau européen Géant2 est toutefois le système le plus intéressant à étudier. Dominant technologiquement toutes les autres dorsales, Géant2 est le seul réseau à proposer un niveau de performance aussi élevé, notamment grâce à la mise en place de « Dark Fibres », mais également un niveau d’intégration avancé dans lequel, hormis les connexions à destination des archipels, le débit minimum proposé est de 2.5 Gb/s. Notablement redondant à l’intérieur de sa structure, Géant2 est également le seul réseau à proposer une connexion directe avec toutes les autres dorsales.

Il se pourrait ainsi que dans un avenir proche, Géant2, d’ores et déjà perçu comme le cœur des réseaux dédiés à l’éducation et à la recherche, devienne le centre névralgique des réseaux grand public.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Un contenu libre et standardisé

La maturité des recommandations du W3c

Le logo du W3C

Le W3c est un organisme chargé de promouvoir la compatibilité des technologies du World Wide Web, et d’émettre des recommandations gratuites et libres de droit, à valeur de standard industriel.

Fondé en 1994 par Tim BERNERS-LEE, le W3c est aujourd’hui administré par le Mit aux Etats-Unis, par le Ercim en Europe et par l’université Keio au Japon. Les recommandations suivent un processus de standardisation dont les tâches sont ordonnées ainsi :

  1. Working Draft
    (Brouillon de travail)
  2. Last Call Working Draft
    (Brouillon de travail, dernier appel aux modifications)
  3. Candidate Recommendation
    (Candidat à la recommandation)
  4. Proposed Recommendation
    (Recommandation officieuse)
  5. Recommendation
    (Recommandation officielle)

Une recommandation peut être mise à jour par errata édité séparément, jusqu'à l'accumulation de suffisamment de modifications ; une nouvelle version de la recommandation est alors publiée (Xml en est aujourd'hui à sa troisième version). Parfois, une recommandation réitère le processus, comme Rdf. Le W3c publie aussi des remarques informatives qui ne sont pas destinées à être traitées en tant que norme.

Le consortium laisse le soin aux fabricants de suivre les recommandations. Contrairement à l'Iso (International Organization for Standardization) ou d'autres corps internationaux de standardisation, le W3c ne propose pas systématiquement de programme de certification.

Lorsque qu'aucun processus de certification n'est disponible, les spécifications techniques du W3c suffisent à définir la conformité par rapport à la recommandation étudiée. Lorsque qu'un processus de certification est disponible, des outils sont rendus accessibles à la communauté : c'est le cas du validateur de langage de balisage (http://validator.w3.org/) permettant de valider des documents balisés (Html, Xhtml, Smil, MathMl, ...etc), du validateur de feuilles de styles Css (http://jigsaw.w3.org/css-validator/) ou du validateur de flux Atom / Rss (http://validator.w3.org/feed/).

Le niveau d'implémentation des spécifications a récemment été amélioré par la production d'un rapport d'implémentation pendant la phase de Candidate Recommendation, permettant de vérifier la bon avancement des travaux de prise en charge des nouvelles fonctionnalités par les navigateurs.

En l’espace de douze ans, le W3c a été particulièrement productif, la plupart des standards du Web recevant une excellente critique de la part des navigateurs et des développeurs. Parmi les dizaines de recommandations élaborées, les plus remarquables sont :

  • Css
    (Feuilles de style, utilisées pour décrire la présentation des documents)
  • Dom
    (Le modèle arborescent du document, largement utilisé par Javascript)
  • Html
    (Un langage balisé de description de document contenant des liens hypertexte)
  • Http
    (Le protocole de transfert des documents hypertexte)
  • Owl
    (Un langage balisé de description d'une ontologie, basé sur XML)
  • Rdf
    (Un langage de description de ressources, à l'origine du Dublin Core)
  • Png
    (Un format d'image supportant la transparence graduelle)
  • Svg
    (Un format d'image vectoriel supportant la transparence graduelle, basé sur XML)
  • Soap
    (Un protocole d'accès aux objets distants, basé sur XML)
  • Uri
    (Le concept d'identifiant unique, à l'origine des adresses web)
  • Xhtml
    (Un langage balisé de description de document contenant des liens hypertexte, basé sur XML)
  • Xml
    (Un métalangage à balises permettant la description de document)

La recommandation Xhtml, et plus particulièrement sa cinquième version, est étudiée ci-après.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

L'évolution de Xhtml

Xhtml 1 : Un succès en demi-teinte

Initialement prévu pour remplacer le vieillissant Html 4, Xhtml 1 devait jeter les bases d'une nouvelle famille de langages de balisage, combinant les avantages multimédia de Html avec la rigueur et l'extensibilité caractéristiques de Xml. Bien qu'intelligemment construit, Xhtml 1 ne fut pas massivemment adopté par les développeurs web.

Une première explication tient du support incomplet de Xhtml 1 par le navigateur dominant en terme de parts de marché, Microsoft Internet Explorer. En effet, Microsoft Internet Explorer ne prend en compte qu'un mimetype text/html en lieu et place du l'officiel application/xhtml+xml, et ne supporte pas nativement les inclusions de sources Xml variées (MathMl, Svg, ...etc). L'un de ses concurrents, Mozilla Firefox, est seulement capable d'offrir une version allégée de Svg (Tiny Svg) et exclut de ce fait toutes les possibilités d'animation offertes par SMIL. Opera reste à ce jour le seul navigateur offrant un support complet de Xhtml 1.1. Un second reproche que l'on peut faire à Xhtml 1 est de ne pas être allé plus loin dans l'évolution de Html, notamment dans deux des piliers du Web, à savoir les formulaires (quasiment inchangés depuis Html 2, en 1996) et la partie multimédia, pour lesquels les besoins sont croissants.

L'évolution de XhtmlL'évolution de XHTML

Xhtml 2 : Un brouillon de travail

Tout d'abord désigné comme l'héritier naturel de Xhtml 1, Xhtml 2 s'est enlisé dans une orientation document plutôt que multimédia, c'est à dire dans un domaine qui n'était pas en adéquation avec la demande utilisateur. Massivemment rejeté par les navigateurs, et malgré quelques bonnes idées, Xhtml 2 restera au stade de brouillon pour être remplacé par Xhtml 5.

Xhtml 5 : Le retour aux sources

Comme le lecteur attentif l'aura remarqué, il n'y a pas eu de la part du W3c de recommandation concernant Xhtml 3 ou Xhtml 4. Et pour cause, ces recommandations n'existent tout simplement pas. La désignation Xhtml 5 est en fait un retour aux sources surprenant, que l'on peut expliquer par l'équation : Xhtml 5 = Xml + Html 5.

Le Xhtml 1 et ses satellites Xml ayant difficilement percé en raison de l'attentisme de certains navigateurs, et le Xhtml 2 ne rencontrant pas le succès espéré, le W3c décida de faire machine arrière en proposant la recommandation du Html 5, pouvant être servie sous forme Xml, c'est à dire du Xhtml 5.

Le brouillon de travail du Xhtml 5 n'est en réalité pas issu du W3c, mais d'un consortium formé dans l'ombre par les navigateurs ayant rejeté Xhtml 2. C'est ainsi que Firefox, Opera et Safari créèrent le Whatwg, groupe de travail officieux du Xhtml 5. Ce n'est que lors de la présentation des travaux du Whatwg que le W3c comprit que le Xhtml 5, poussé par les navigateurs et répondant aux demandes des développeurs et des utilisateurs, serait le véritable successeur de Xhtml 1. Le Xhtml 5 embarque à la fois les acquis de Html 4 et de Xhtml 1, tout en épurant leur contenu et en étendant largement leurs possibilités, notamment par le biais des web forms 2.0 et du support de l'élément <canvas>.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 2, un brouillon de travail

Xhtml 2 est une évolution de Xhtml 1. Cette recommandation se propose de simplifier Xhtml au travers d’une orientation document. Ainsi au lieu d’écrire le code Xhtml 1 :

<ul>
  <li><a href='home.php'>Home</a></li>
  <li><a href='products.php'>Products</a></li>
  <li><a href='contact.php'>Contact</a></li>
</ul>

Il est possible d’utiliser les listes de navigation Xhtml 2 :

<nl role='menu'>
  <li href='home.php'>Accueil</li>
  <li href='products.php'>Products</li>
  <li href='contact.php'>Contact</li>
</nl>

En effet, le Xhtml 2 autorise chaque élément à être utilisé comme hyperlien, concrétisant ainsi la vision originelle de Tim BERNERS-LEE, créateur du concept d'hypertexte. Etrangement, l’élément <a>, bien que rendu obsolète par cette mise à jour, fait toujours partie de la spécification Xhtml 2. On notera également l'attribut role, ajoutant une valeur sémantique aux éléments qui l'utilisent.

Les listes de définition sont désormais plus claires grâce à l’ajout de l'élément <di> :

<dl>
  <di>
    <dt>Center</dt>
    <dd>A point equidistant from its ends</dd>
  </di>
  <di>
    <dt>key</dt>
    <dd>A metal device used to open a lock</dd>
  </di>
</dl>

La citation de code informatique est sémantiquement exprimée avec l’élément <blockcode> :

<blockcode>
  function fork_bomb() {
    while(1) {
      pcntl_fork();
    }
  }
</blockcode>

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 2, un brouillon de travail (suite)

Le modèle de construction des titres <h1>, <h2>, ... , <h6> a été changé au bénéfice d’une organisation en sections, dans laquelle le niveau du titre est fonction de sa profondeur et où le nombre de niveaux de titre est par conséquent infini :

<h>1 - The story of XHTML</h>
<section>
  <h>1.1 - The beginning : XHTML 1</h>
  <h>1.2 - The evolution : XHTML 2</h>
  <h>1.3 - The revolution : XHTML 5</h>
  <section>
    <h>1.3.1 - The web forms</h>
    <h>1.3.2 - The canvas</h>
  </section>
  <h>1.3 - The future : XHTML 6</h>
</section>
<h>2 - Another story</h>

Bien que rendus obsolètes par ce nouveau modèle, les éléments <h1>, <h2>, ... , <h6> font toujours partie de la spécification Xhtml 2.

L’élément <img> est changé au profit de l’élément <object>. Ainsi au lieu d’écrire :

<img src='http://www.example.com/foo.jpg'/>

On écrira :

<object src='http://www.example.com/foo.jpg' type='image/jpeg'>
  <!-- You can place alternative content here -->
</object>

Curieusement, l’élément <img> fait toujours partie de la spécification Xhtml 2.

Les éléments <del> et <ins> sont remplacés par l’élément <span>, utilisé conjointement avec l’attribut edit et valeurs deleted ou inserted :

<p>
  This is a
  <span edit='deleted'>cool</span>
  <span edit='inserted'>pretty cool</span>
  idea!
</p>

Actuellement en cours d’élaboration et pour le moins paradoxale sur un certain nombre de choix, la spécification complète du Xhtml 2 est disponible en brouillon de travail à l’adresse http://www.w3.org/TR/xhtml2. Il est probable que cette spécification ne reste qu’une ébauche, le W3c et ses partenaires axant leurs efforts autour de Xhtml 5.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, un renouveau sémantique

Xhtml 5 est à la fois une évolution de Xhtml 1 et le penchant Xml de Html 5 (d’où son nom). Cette recommandation se destine à la sémantique et au multimédia, de part ses implémentations de nouveaux éléments sémantiques, de l’élément canvas ou encore la complétion des web forms.

L'intérêt des balises sémantiques est d'une part d'obtenir une meilleure lisibilité du code, mais également de spécifier certains éléments au lieu d'utiliser un élément générique tel que <div>. Cette aspect est très utile aux crawlers des moteurs de recherche, tels que Yahoo ou Google.

En effet, le comportement d'un crawler est de scanner en mode texte les pages d'un site Internet, afin d'en cibler directement les balises intéressantes pour le référencement. Sans élément sémantique, il est impossible de déterminer que tel ou tel élément est associé à telle ou telle partie du document, ce qui signifie que l'information donnée est moins pertinente qu'espérée, et donc que la page scannée sera moins bien classée.

Les éléments <header>, <nav>, <article>, <aside> et <footer> font partie du nouveau paradigme sémantique :

<header>Welcome everybody !</header>
<nav>
  <ul>
    <li><a href='home.php'>Home</a></li>
    <li><a href='products.php'>Products</a></li>
    <li><a href='contact.php'>Contact</a></li>
  </ul>
</nav>
<article>
  <h1>NVIDIA's 1.4 billion transistor GPU: GT200 arrives as the GeForce GTX 280</h1>
  The chip is codenamed GT200 and it’s the successor to NVIDIA’s G80 and G92 families.
  Why the change in naming? The GT stands for « Graphics Tesla » and this is the second
  generation Graphics Tesla architecture, the first being the G80. The GT200 is
  launching today in two flavors, the die of the larger one is pictured below (...)
</article>
<aside>
  <a href='http://www.nvidia.com'>See more on the nVIDIA website</a>
<aside>
<footer>Goodbye everybody !</footer>

L'élément <header> détermine le haut de page, tandis que <footer> définit de pied de page. Il est important de noter qu'il est possible de placer le haut de page en bas et vice-versa. L'indidence d'un tel changement est uniquement une inversion de positionnement dans le document, la sémantique restant intacte.

L'élément <nav> indique qu'une liste de navigation, également appelée plus simplement "menu", est disponible dans cette partie du document. On regrettera que les listes de navigations ne soient pas aussi développées que dans la recommandation Xhtml 2, où elles simplifiaient grandement la lecture du document.

L'élément <article> encadre un morceau de texte, et l'élément <aside> en étend le contenu, ici avec un lien hypertexte pointant vers une ressource détaillée.

L'élément <aside> précise que le contenu de la section est thématiquement lié au reste de la page, mais qu’il est néanmoins possible de le séparer de la structure de la page. Cet élément est généralement représenté comme un encadré sur la page. L’une des motivations principales de <aside> est la publication d’articles connexes, d’archives ou encore de publicités ciblées, sans pour autant intégrer ces à-côtés aux articles placés dans la page. La signification de l'élément <aside> est fonction de sa position dans le document. Placé dans un article, il donnera des informations supplémentaires sur celui-ci. Placé dans une page, sa signification s'en trouvera généralisée.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, un renouveau sémantique (suite)

D'autres éléments sémantiques ont été ajoutés, bien que leur prise en charge soit pour le moment relativement limitée. L'élément <progress> doit permettre l'affichage de la progression d'un chargement, actualisé par Javascript :

<head>
  <script type='text/javascript'>
  <![CDATA[
    function update() {
      var percent = document.getElementById('percent');
      if (percent) {
        percent = parseInt(percent) + 1;
        setTimeout('update()', 1000);
      }
    }
    update();
  ]]>
  </script>
</head>
<body>
  <progress id='percent'>0</progress> %
</body>

L'élément <time> définit une heure ou une date :

We open at <time>10:00</time> every morning.
I have a date on <time datetime='2008-02-14'>Valentines day</time>.

L'élément <meter> spécifie une distance ou une mesure :

The world record for triple jump is about <meter>18.29</meter> meters.

L'élément <q> permet de faire une citation, celle-ci étant automatiquement mise entre guillemets par le navigateur :

The judge rightly said: <q>Dura lex, sed lex !</q>.

L'élément <dialog> encadre un dialogue et détourne les éléments <dt> et <dd> de leur sens premier, en leur donnant le rôle d'identification des orateurs :

<dialog>
  <dt>Hi ! How are you ?</dt>
  <dd>Fine, and you ? ;)</dd>
</dialog>

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, une mise à jour des web forms

Les web forms 2.0 constituent une des innovations majeures de Xhtml 5, remettant au goût du jour des formulaires inchangés depuis Html 2 (1996). L’enjeu des web forms 2.0 est principalement d'alléger la charge de travail des développeurs, mais également d'automatiser certains comportements et de proposer de nouvelles fonctionnalités.

L'élément <input> est le premier à bénéficier de cette extension, grâce à une panoplie de nouveaux types :

Type
Effet immédiat
date
Commande l'affichage d’un outil de sélection de date (ex : calendrier).
time
Commande l'affichage d’un outil de sélection de date (ex : calendrier).
datetime
Commande l'affichage d’un outil de sélection de date (ex : calendrier).
datetime-local
Commande l'affichage d’un outil de sélection de date (ex : calendrier).
month
Commande l'affichage d’un outil de sélection de date (ex : calendrier).
week
Commande l'affichage d’un outil de sélection de date (ex : calendrier).
range
Commande l’affichage d’un outil graduel (ex : volume sonore).
number
Vérification automatique de la validité du nombre.
url
Vérification automatique de la validité de l’url.
email
Vérification automatique de la validité de l’e-mail.

De nouveaux attributs sont également au rendez-vous :

Attribut
Effet immédiat
min
Définit la portée minimum d'une entrée.
max
Définit la portée maximum d'une entrée.
step
Définit le pas d’une entrée (ex : augmentation de deux en deux).
wrap
Insère (hard) ou non (soft) des sauts de ligne dans le flux reçu, si le texte saisi dans l’entrée est automatiquement mis à la ligne à cause d’une limitation en largeur (ex : <textarea>). Utile pour conserver la mise en forme.
autocomplete
Active ou désactive l'autocomplétion des entrées. La désactivation de l’autocomplétion est importante pour les données sensibles (numéros de carte bancaires, ...etc.).
autofocus
Etablit le focus sur une entrée dès le chargement du formulaire.
accept
Définit les types mime acceptés en upload.
list
Permet de faire référence à une suggestion de données pour une entrée.
required
Rend obligatoire le remplissage d’un champ.
pattern
Définit un motif de validation (expression régulière) pour une entrée.
title
Définit un message d’erreur personnalisé en cas d’échec de la validation.
form
Spécifie l’appartenance d’une entrée à un formulaire particulier.
size
Déprécié : la taille des champs doit être fixée par mise en forme CSS.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, une mise à jour des web forms (suite)

Les web forms 2.0 proposent aussi de nouveaux évènements :

Évènement
Effet immédiat
onchange
Déclenché lorsqu'une entrée reçoit un changement de valeur.
onformchange
Déclenché lorsqu'un formulaire reçoit un changement de valeur.
onDOMControlValueChanged
Déclenché lorsque qu'une valeur est modifiée et quelle qu'en soit la raison, par exemple par action de l'utilisateur ou par script..
oninput
Déclenché lorsqu'une entrée reçoit une saisie.
onforminput
Déclenché lorsqu'un formulaire reçoit une saisie.
oninvalid
Déclenché lorsqu'une entrée est invalide.
onreceived
Déclenché quand le formulaire soumis est reçu. Il s'agit d'un acquittement destiné à se prémunir des annulations.
onreset
Déprécié : cet évènement s'avère inutilisé en pratique.

Le comportement par défaut est de laisser la gestion des erreurs au navigateur. Il est néanmoins possible de manipuler soi-même les exceptions à remonter à l’utilisateur, à la manière d'un bloc try / catch :

<head>
  <script type='text/javascript'>
  <![CDATA[
    function failed(event) {
      var form = event.target.form;
      form.error.value = 'The value is wrong for a reason I did not expect.';
      if (event.target.validity.typeMismatch)
        form.error.value = 'You must enter a number.';
      else if (event.target.validity.stepMismatch)
        form.error.value = 'Fractional numbers are not allowed.';
      else if (event.target.validity.rangeUnderflow)
        form.error.value = 'The number must be zero or greater.';
      else if (event.target.validity.rangeOverflow)
        form.error.value = 'The number must be 5 or less.';
      else if (event.target.validity.valueMissing)
        form.error.value = 'You must enter a number.';
      event.preventDefault(); // The User Agent won't do its own reporting.
    }
  ]]>
  </script>
</head>
<body>
  <form id='test' action='test.php' method='post'>
    <label>order:</label>
    <input name='order' type='number' min='0' max='5'
           required='required' oninvalid="javascript:failed(event);" />
    <output name='error' />
  </form>
</body>

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, une mise à jour des web forms (suite)

Voici quelques exemples de ce qu'il est possible de réaliser à partir de ces nouveautés, en commençant par un formulaire doté de champs de type email, date et text et des attributs required, autocomplete, pattern et title :

<form id='test' action='#' method='post'>
  <input name='email'  type='email' required />
  <input name='date'   type='date' value='2014-04-22' />
  <input name='phone'  type='text' autocomplete='off' maxlength='10'
         pattern='^0[1-68][0-9]{8}$' title='Wrong phone number !' />
  <input name='submit' type='submit' value='OK' />
</form>

Live test !

Le formulaire, à essayer sous Opera pour une expérience optimale, est le suivant :





Une première observation montre que les contrôles sont désormais à charge du navigateur, ce qui représente un gain de temps considérable pour le développement (notamment pour la gestion des dates). En d'autres termes, ce qui se faisait autrefois en Javascript sera désormais géré directement par le navigateur. Conséquence directe, il est impossible pour un utilisateur de désactiver Javascript et les contrôles qui y sont associés. Cette initiative n'exonère en rien d'une validation du côté serveur, afin de prévenir les failles Xss.

L'attribut form, qui spécifie le formulaire d'attache d'une entrée, et évite à chacun l'envoi de données hors de propos, offre des opportunités de développement inédites :

<form id='nowhereform' action='#' method='post'>
  <input type='text' name='query' form='googleform yahooform' /> <!-- Look here ! -->
  <input type='submit' name='nowhere' value='Nowhere' />
</form>
<form id='googleform' action='google.php' method='post'>
  <input type='submit' name='google' value='Google' />
</form>
<form id='yahooform' action='yahoo.php' method='post'>
  <input type='submit' name='yahoo' value='Yahoo' />
</form>

Live test !

Le formulaire, à essayer sous Opera pour une expérience optimale, est le suivant :

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, une mise à jour des web forms (suite)

Une entrée, ici de type url, équipée de l’attribut list et couplée à un élément <datalist>, commande l’affichage d’une liste suggestive :

<form id='test' action='#' method='post'>
  <input type='url' name='location' list='urls' />
  <datalist id='urls'>
    <option label='W3C'           value='http://www.w3c.org' />
    <option label='W3C Validator' value='http://www.validator.w3.org' />
  </datalist>
  <input name='submit' type='submit' value='OK' />
</form>

Live test !

Le formulaire, à essayer sous Opera pour une expérience optimale, est le suivant :


L’élément <datalist> peut être utilisé avec une grande variété de types d’entrées dont –en théorie– le type range.

<form id='test' action='#' method='post'>
  <input type='url' name='location' list='urls' />
  <datalist id='powers'>
    <option label='+50' value='+50' /> <!-- Invalid values are not displayed -->
    <option label='30'  value='30'  />
    <option label='0'   value='0'   />
    <option label='-30' value='-30' />
  </datalist>
  <output onformchange="value=power.value">0</output>
  <input name='submit' type='submit' value='OK' />
</form>

Live test !

Le formulaire, à essayer sous Opera pour une expérience optimale, est le suivant :

0


L'élément <output>, opposé par définition à l'élément <input>, peut être employé à des fins d'affichage dans le cadre des web forms 2.0. Son importance reste cependant limitée, étant donné que d'autres éléments tel que <div> sont tout aussi efficaces dans ce type d'utilisation.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, une mise à jour des web forms (suite)

Une des fonctionnalités des web forms 2.0 les plus étonnantes est l’apparition d’un modèle de mouvement avec les attributs move-up et move-down (non présenté ici), et d’un modèle de répétition, basé sur les attributs add et remove. Le modèle de répétition peut générer une portion d'arbre Dom en première passe ou agir en temps réel sur la page courante après une action émanant de l'utilisateur. Il est donc possible via ce modèle de manipuler dynamiquement l'arbre, en lui ajoutant ou retirant des noeuds à l'aide de contrôles ad-hoc.

Il est possible de définir le nombre de répétitions, en gardant à l'esprit que pour n occurences, l'indice de répétition varie de 0 à n - 1. Il est possible de définir, le cas échéant, des exceptions à la génération (c'est-à-dire des valeurs par défaut) en nommant explicitement les indices de répétition qui leurs sont associés : le modèle ignore alors ces indices dans son processus de génération.

Ainsi pour le modèle de répétition, le contenu suivant :

<form id='test' action='test.php' method='post'>
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <!-- This is the repetition template -->
      <tr id='order' repeat='template' repeat-start='6'>
        <td><input  type='text'   name='row[order].product'  value=''/></td>
        <td><input  type='number' name='row[order].quantity' value='1'/></td>
        <td><button type='remove'>Remove This Row</button></td>
      </tr>
      <!-- This is an exception to the repetition template -->
      <tr id='1'>
        <td><input  type='text'   name='row1.product'  value=''/></td>
        <td><input  type='number' name='row1.quantity' value='64'/></td>
        <td><button type='remove'>Remove This Row</button></td>
      </tr>
      <!-- This is another exception to the repetition template -->
      <tr id='5'>
        <td><input  type='text'   name='row5.product'  value=''/></td>
        <td><input  type='number' name='row5.quantity' value='42'/></td>
        <td><button type='remove'>Remove This Row</button></td>
      </tr>
    </tbody>
  </table>
  <p><button type='add' template='order'>Add Row</button></p>
  <p><button type='submit' name='submit'>Submit</button></p>
</form>

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, une mise à jour des web forms (suite)

... générera l’arbre suivant :

<form id='test' action='test.php' method='post'>
  <table>
    <thead>
      <tr>
        <th>Product</th>
        <th>Quantity</th>
      </tr>
    </thead>
    <tbody>
      <tr id='0'>
        <td><input  type='text'   name='row0.product'  value=''/></td>
        <td><input  type='number' name='row0.quantity' value='1'/></td>
        <td><button type='remove'>Remove This Row</button></td>
      </tr>
      <tr id='1'>
        <td><input  type='text'   name='row1.product'  value=''/></td>
        <td><input  type='number' name='row1.quantity' value='64'/></td>
        <td><button type='remove'>Remove This Row</button></td>
      </tr>
      <tr id='2'>
        <td><input  type='text'   name='row2.product'  value=''/></td>
        <td><input  type='number' name='row2.quantity' value='1'/></td>
        <td><button type='remove'>Remove This Row</button></td>
      </tr>
      <tr id='3'>
        <td><input  type='text'   name='row3.product'  value=''/></td>
        <td><input  type='number' name='row3.quantity' value='1'/></td>
        <td><button type='remove'>Remove This Row</button></td>
      </tr>
      <tr id='4'>
        <td><input  type='text'   name='row4.product'  value=''/></td>
        <td><input  type='number' name='row4.quantity' value='1'/></td>
        <td><button type='remove'>Remove This Row</button></td>
      </tr>
      <tr id='5'>
        <td><input  type='text'   name='row5.product'  value=''/></td>
        <td><input  type='number' name='row5.quantity' value='42'/></td>
        <td><button type='remove'>Remove This Row</button></td>
      </tr>
    </tbody>
  </table>
  <p><button type='add' template='order'>Add Row</button></p>
  <p><button type='submit' name='submit'>Submit</button></p>
</form>

Si les fonctionnalités offertes par le modèle de mouvement peuvent se révéler séduisantes, il est un point d’interrogation quand à la génération de données, habituellement déléguée à un langage de programmation venant se greffer en qualité de préprocesseur, comme c’est le cas par exemple avec Php. C’est donc une orientation programmation que prend le Xhtml, à l’instar des feuilles de style Xsl dotées de boucles. Peut-être verrons-nous à l’avenir une fusion de ces deux langages ?

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, un kit d'imagerie et d'animation vectorielles

La gestion de l'élément <canvas>, par le biais de Javascript, est un des apports majeurs de Xhtml 5. Introduit dans le dashboard d'Apple Mac OS X, puis rapidement adopté par les navigateurs Mozilla Firefox et Opera, l'élément <canvas> est un support numérique dédié au dessin vectoriel.

A l'instar de son cousin Svg avec lequel il partage un grand nombre de fonctionnalités, <canvas> permet de tracer des formes primitives variées (arc de cercle, ligne, courbe de bézier, ...etc.), des masques de fusion, ou encore des dégradés. L'élément <canvas> permet également de travailler directement sur les images en effectuant importations, redimensionnements et animations. Ce dernier point, particulièrement attendu, ouvre la voie à la concurrence de technologies propriétaires telles que Adobe Flash.

Voici ce qu'il est possible de réaliser à l'aide de quelques arcs de cercle :

<head>
  <script type='text/javascript'>
    function drawCanvas1() {
      var canvas = document.getElementById('canvas1');
      if (canvas && canvas.getContext) {
        var ctx = canvas.getContext('2d');  // Get the context : 2 dimensions
        ctx.beginPath();                    // Open the path
        ctx.arc(75,75,50,0,Math.PI*2,true); // Create the head
        ctx.moveTo(110,75);                 // Move
        ctx.arc(75,75,35,0,Math.PI,false);  // Create the mouth (right to left)
        ctx.moveTo(65,65);                  // Move
        ctx.arc(60,65,5,0,Math.PI*2,true);  // Create the left eye
        ctx.moveTo(95,65);                  // Move
        ctx.arc(90,65,5,0,Math.PI*2,true);  // Create the right eye
        ctx.closePath();                    // Close the path
        ctx.stroke();                       // Draw the path
      }
    }
    window.onload = function() {
      drawCanvas1();
    }
  </script>
</head>
<body>
  <canvas id='canvas1' width='150px' height='150px'></canvas>
</body>


Live test !

Le dessin, à essayer sous Opera pour une expérience optimale, est le suivant :

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, un kit d'imagerie et d'animation vectorielles (suite)

L'élément <canvas> offre la possibilité, en plus de tracer le contour des formes, de remplir leur contenu avec la couleur de son choix. La couleur de remplissage par défaut est fixée à rgba(0,0,0,1), ce qui correspond à la couleur « noir » avec une opacité de 100%. Autre exemple, la couleur rgba(255,255,255,0.7), correspond à la couleur « blanc » avec une opacité de 70%. Lorsque la méthode fill() est invoquée, celle-ci ferme automatiquement le chemin courant en traçant une ligne du point actuel vers le point d'origine du chemin.

Voici ce qu'il est possible de réaliser à l'aide de quelques lignes :

<head>
  <script type='text/javascript'>
    function drawCanvas2() {
      var canvas = document.getElementById('canvas2');
      if (canvas && canvas.getContext) {
        var ctx = canvas.getContext('2d');  // Get the context : 2 dimensions
        // Black triangle
        ctx.beginPath();                    // Open the path
        ctx.moveTo(25,25);                  // Move
        ctx.lineTo(105,25);                 // Create a line
        ctx.lineTo(25,105);                 // Create a line
        ctx.fill();                         // Close and fill the path
        // White triangle
        ctx.beginPath();                    // Open the path
        ctx.moveTo(125,125);                // Move
        ctx.lineTo(125,45);                 // Create a line
        ctx.lineTo(45,125);                 // Create a line
        ctx.closePath();                    // Close the path
        ctx.stroke();                       // Draw the path
      }
    }
    window.onload = function() {
      drawCanvas2();
    }
  </script>
</head>
<body>
  <canvas id='canvas2' width='150px' height='150px'></canvas>
</body>


Live test !

Le dessin, à essayer sous Opera pour une expérience optimale, est le suivant :

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, un kit d'imagerie et d'animation vectorielles (suite)

L'élément <canvas> permet d'utiliser les courbes, objets graphiques à la fois puissants et complexes. Deux types de courbe sont proposés par <canvas> : La courbe quadratique, bénéficiant d'un point de contrôle, et sa version améliorée la courbe de bézier, disposant de deux points de contrôle.

Voici ce qu'il est possible de réaliser à l'aide de quelques courbes :

<head>
  <script type='text/javascript'>
    function drawCanvas3() {
      var canvas = document.getElementById('canvas3');
      if (canvas && canvas.getContext) {
        var ctx = canvas.getContext('2d');       // Get the context : 2 dimensions
        // Dialog bubble
        ctx.beginPath();                         // Open the path
        ctx.moveTo(75,25);                       // Move
        ctx.quadraticCurveTo(25,25,25,62.5);    ctx.quadraticCurveTo(25,100,50,100);
        ctx.quadraticCurveTo(50,120,30,125);    ctx.quadraticCurveTo(60,120,65,100);
        ctx.quadraticCurveTo(125,100,125,62.5); ctx.quadraticCurveTo(125,25,75,25);
        ctx.fillStyle = 'rgba(31,100,141,1)';    // Set blue 100% opacity
        ctx.strokeStyle = 'rgba(0,0,0,1)';       // Set black 100% opacity
        ctx.fill(); ctx.stroke();                // Fill & draw the path
        // Heart
        ctx.beginPath();                         // Open the path
        ctx.moveTo(155,40);                      // Move
ctx.bezierCurveTo(155,37,150,25,130,25);   ctx.bezierCurveTo(100,25,100,62.5,100,62.5);
ctx.bezierCurveTo(100,80,120,102,155,120); ctx.bezierCurveTo(190,102,210,80,210,62.5);
ctx.bezierCurveTo(210,62.5,210,25,180,25); ctx.bezierCurveTo(165,25,155,37,155,40);
        ctx.fillStyle = 'rgba(105,172,212,0.7)'// Set blue 70% opacity
        ctx.strokeStyle = 'rgba(0,0,0,1)';       // Set black full opacity
        ctx.fill(); ctx.stroke();                // Fill & draw the path
      }
    }
    window.onload = function() {
      drawCanvas3();
    }
  </script>
</head>
<body>
  <canvas id='canvas3' width='235px' height='150px'></canvas>
</body>

Live test !

Le dessin, à essayer sous Opera pour une expérience optimale, est le suivant :

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, un kit d'imagerie et d'animation vectorielles (suite)

La manipulation d'images via l'élément <canvas> est simple et intuitive. Il est par exemple possible d'ajouter des objets graphiques pendant le chargement de l'image, comme le montre l'exemple suivant :

<head>
  <script type='text/javascript'>
    function drawCanvas4() {
      var canvas = document.getElementById('canvas4');
      if (canvas && canvas.getContext) {
        var ctx = canvas.getContext('2d');          // Get the context : 2 dimensions
        var img = new Image();                      // Create the image
        img.src = './images/canvas/grid.png';       // Set the source of the image
        img.onload = function() {                   // Define loading process
          ctx.drawImage(img, 0, 0);                 // Draw the image
          ctx.beginPath();                          // Open the path
          ctx.moveTo(6, 144);                       // Move
          ctx.lineTo(50, 66);                       // Create a line
          ctx.lineTo(83, 76);                       // Create a line
          ctx.lineTo(135, 15);                      // Create a line
          ctx.lineTo(135, 144);                     // Create a line
          ctx.fillStyle = 'rgba(105,172,212,0.7)';  // Set light blue 70% opacity
          ctx.fill();                               // Close and fill the path
          ctx.beginPath();                          // Open the path
          ctx.moveTo(6, 144);                       // Move
          ctx.lineTo(50, 66);                       // Create a line
          ctx.lineTo(83, 76);                       // Create a line
          ctx.lineTo(135, 15);                      // Create a line
          ctx.strokeStyle = 'rgba(34,122,255,0.7)'// Set dark blue 70% opacity
          ctx.stroke();                             // Close and fill the path
        }
      }
    }
    window.onload = function() {
      drawCanvas4();
    }
  </script>
</head>
<body>
  <canvas id='canvas4' width='150px' height='150px'></canvas>
</body>

Live test !

Le dessin, à essayer sous Opera pour une expérience optimale, est le suivant :

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, un kit d'imagerie et d'animation vectorielles (suite)

L'élément <canvas> autorise la création de dégradés, qu'ils soient opaques ou translucides, radiaux ou linéaires. Ces dégradés peuvent contenir une infinité de couleurs, dans le sens où il est possible d'ajouter un nombre infini de crans d'arrêt, chacun étant associé à une couleur. Lorsqu'un dégradé est créé, il peut être utilisé à volonté afin de remplir n'importe quelle forme. Il est conseillé de calquer les dimensions du dégradé sur les formes qui y font référence.

<head>
  <script type='text/javascript'>
    function drawCanvas5() {
      var canvas = document.getElementById('canvas5');
      if (canvas && canvas.getContext) {
        var ctx = canvas.getContext('2d');            // Get the context : 2 dimensions
        // Blue sky
        var g1 = ctx.createLinearGradient(0,5,0,75);  // Create the gradient
        g1.addColorStop(0,'rgba(0,135,255,1)');       // Set blue 100% opacity
        g1.addColorStop(1,'rgba(255,255,255,1)');     // Set white 100% opacity
        ctx.fillStyle = g1;                           // Fill with the gradient
        ctx.fillRect(5, 5, 140, 75);                  // Fill the rectangle
        // Green grass
        var g2 = ctx.createLinearGradient(0,75,0,145);// Create the gradient
        g2.addColorStop(0,'rgba(102,204,51,1)');      // Set green 100% opacity
        g2.addColorStop(1,'rgba(255,255,255,1)');     // Set white 100% opacity
        ctx.fillStyle = g2;                           // Fill with the gradient
        ctx.fillRect(5, 75, 140, 75);                 // Fill the rectangle
        // Brown box
        var g3 = ctx.createLinearGradient(0,50,0,100);// Create the gradient
        g3.addColorStop(0.6,'rgba(88,60,52,1)');      // Set brown 100% opacity
        g3.addColorStop(1,'rgba(88,60,52,0)');        // Set brown 0% opacity
        ctx.fillStyle = g3;                           // Fill with the gradient
        ctx.fillRect(50, 50, 50, 50);                 // Fill the rectangle
      }
    }
    window.onload = function() {
      drawCanvas5();
    }
  </script>
</head>
<body>
  <canvas id='canvas5' width='150px' height='150px'></canvas>
</body>

Live test !

Le dessin, à essayer sous Opera pour une expérience optimale, est le suivant :

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, un kit d'imagerie et d'animation vectorielles (suite)

En combinant plusieurs éléments graphiques, il est possible d'obtenir des formes aux styles intéressants, comme cet histogramme dégradé de bleu à bleu, bordé de blanc et posé sur fond grillagé :

<head>
  <script type='text/javascript'>
    function drawCanvas6() {
      var canvas = document.getElementById('canvas6');
      if (canvas && canvas.getContext) {
        var ctx = canvas.getContext('2d');               // Get the context
        var img = new Image();                           // Create the image
        img.src = './images/canvas/grid.png';            // Set the source of the image
        img.onload = function() {                        // Define loading process
          ctx.drawImage(img, 0, 0);                      // Draw the image
          var g = ctx.createLinearGradient(0,0,150,150); // Create the gradient
          g.addColorStop(0,'rgba(0,155,208,0.97)');      // Set light blue 97% opacity
          g.addColorStop(1,'rgba(0,111,163,0.97)');      // Set dark blue 97% opacity
          ctx.strokeStyle = 'rgba(150,150,150,0.7)';     // Set blue 70% opacity
          drawStatRectangle(ctx, 15,  74, 31,  70, g);   // Draw the first rectangle
          drawStatRectangle(ctx, 55, 124, 31,  20, g);   // Draw the second rectangle
          drawStatRectangle(ctx, 95,  24, 31, 120, g);   // Draw the third rectangle
        }
      }
    }
    function drawStatRectangle(ctx, x, y, lx, ly, g) {
      ctx.strokeRect(x-2, y-2, lx+4, ly);                // Draw the outer border
      ctx.fillStyle = 'rgba(255,255,255,0.7)';           // Set white 70% opacity
      ctx.fillRect(x-2, y-2, lx+4, ly+2);                // Draw the inner border
      ctx.fillStyle = g;                                 // Fill with the gradient
      ctx.fillRect(x, y, lx, ly);                        // Fill the rectangle
    }
    window.onload = function() {
      drawCanvas6();
    }
  </script>
</head>
<body>
  <canvas id='canvas6' width='150px' height='150px'></canvas>
</body>

Live test !

Le dessin, à essayer sous Opera pour une expérience optimale, est le suivant :

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, un kit d'imagerie et d'animation vectorielles (suite)

L'élément <canvas> apporte une dimension temporelle aux dessins en introduisant les animations. Le processus d'animation consiste à effacer la zone de dessin, créer des éléments graphiques et rappeler la fonction d'animation.

<head>
  <script type='text/javascript'>
    function drawCanvas7() {
      var canvas = document.getElementById('canvas7');
      if (canvas && canvas.getContext) {
        var ctx   = canvas.getContext('2d');      // Get the context : 2 dimensions
        var time  = new Date();                   // Get the current date information
        var space = new Image();                  // Declare the space image
        var sun   = new Image();                  // Declare the sun image
        var earth = new Image();                  // Declare the earth image
        var moon  = new Image();                  // Declare the moon image
        space.src = './images/canvas/space.png';  // Set the space source image
        sun.src   = './images/canvas/sun.png';    // Set the sun source image
        earth.src = './images/canvas/earth.png';  // Set the earth source image
        moon.src  = './images/canvas/moon.png';   // Set the moon source image
        ctx.globalCompositeOperation = 'destination-over';
        ctx.clearRect(0, 0, 673, 673);            // Clear the canvas
        ctx.save();                               // Save the context
          defineSunPositionOnOrbite(ctx);         // Define sun position on orbite
          createEarthOrbite(ctx);                 // Create earth orbite around sun
          defineEarthPositionOnOrbite(ctx, time); // Define earth position on orbite
          createMoonOrbite(ctx);                  // Create moon orbite around earth
          createEarthShadow(ctx);                 // Create the earth shadow
          ctx.save();                             // Save the context
            createMoonShadow(ctx, time);          // Create the moon shadow
          ctx.restore();                          // Restore the context
          ctx.save();                             // Save the context
            createEarth(ctx, earth, time);        // Create the earth
          ctx.restore();                          // Restore the context
          ctx.save();                             // Save the context
            createMoon(ctx, moon, time);          // Create the moon
          ctx.restore();                          // Restore the context
        ctx.restore();                            // Restore the context
        ctx.save();                               // Save the context
          defineSunPositionOnOrbite(ctx);         // Define sun position on orbite
          createSun(ctx, sun, time);              // Create the sun
        ctx.restore();                            // Restore the context
        ctx.drawImage(space, 0, 0, 673, 673);     // Draw the space
        setInterval('drawCanvas7()', 100);        // Refresh the canvas every 100 ms
      }
    }
    function defineSunPositionOnOrbite(ctx) {
      ctx.translate(336.5, 336.5);                // Go on the middle of the screen
    }
    function defineEarthPositionOnOrbite(ctx, time) {
      ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() +
                  ((2*Math.PI)/60000)*time.getMilliseconds() );
      ctx.translate(270,0);                       // Set orbite point for the earth
    }

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, un kit d'imagerie et d'animation vectorielles (suite)

    function defineMoonPositionOnOrbite(ctx, time) {
      ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() +
                  ((2*Math.PI)/6000)*time.getMilliseconds() );
      ctx.translate(25, 0);                     // Set orbite point for the moon
    }
    function createEarthOrbite(ctx) {
      ctx.strokeStyle = 'rgba(0,153,255,0.4)';  // Set the stroke to blue 40% opacity
      ctx.beginPath();                          // Open the path
      ctx.arc(0, 0, 270, 0, Math.PI*2, false);  // Create the earth orbite
      ctx.closePath();                          // Close the path
      ctx.stroke();                             // Draw a circle around the sun
    }
    function createMoonOrbite(ctx) {
      ctx.beginPath();                          // Open the path
      ctx.arc(0, 0, 25, 0, Math.PI*2, false);   // Create the moon orbite
      ctx.closePath();                          // Close the path
      ctx.stroke();                             // Draw a circle around the earth
    }
    function createEarthShadow(ctx) {
      ctx.fillStyle = 'rgba(0,0,0,0.7)';        // Set the fill to black 70% opacity
      ctx.fillRect(0, -12, 35, 24);             // Fill the earth shadow rectangle
    }
    function createMoonShadow(ctx, time) {
      defineMoonPositionOnOrbite(ctx, time);    // Define moon position on orbite
      ctx.fillStyle = 'rgba(0,0,0,0.5)';        // Set the fill to black 50% opacity
      ctx.rotate( (2*Math.PI) - ( ((2*Math.PI)/6)*time.getSeconds() +
                                  ((2*Math.PI)/6000)*time.getMilliseconds() ) );
      ctx.fillRect(0, -4.5, 25, 9);             // Fill the moon shadow rectangle
    }
    function createSun(ctx, sun, time) {
      ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() +
                  ((2*Math.PI)/60000)*time.getMilliseconds() );
      ctx.drawImage(sun, -336.5, -336.5);       // Draw the sun
    }
    function createEarth(ctx, earth, time) {
      ctx.rotate( ((2*Math.PI)/2)*time.getSeconds() +
                  ((2*Math.PI)/2000)*time.getMilliseconds() );
      ctx.drawImage(earth, -12, -12);           // Draw the earth
    }
    function createMoon(ctx, moon, time) {
      defineMoonPositionOnOrbite(ctx, time);    // Define moon position on orbite
      ctx.drawImage(moon, -4.5, -4.5);          // Draw the moon
    }
    window.onload = function() {
      drawCanvas7();
    }
  </script>
</head>
<body>
  <canvas id='canvas7' width='300px' height='300px'></canvas>
</body>

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Xhtml 5, un kit d'imagerie et d'animation vectorielles (suite)

Live test !

D'après le code source précédent, qui combine trois images de corps célestes (soleil, terre, lune), il est possible d'obtenir une animation dans laquelle sont successivement affichées les étapes de la rotation de la terre autour du soleil et de la lune autour de la terre. L'élément <canvas> autorise uniquement la rotation en radians, d'où l'apparition de la valeur Math.PI. Etant donné l'ordre d'apparition des éléments graphiques et le fait que nous souhaitons que l'ombre d'un corps céleste couvre l'autre mais ne couvre pas le tracé de son orbite, nous dessinons en premier lieu les orbites, puis les ombres, et enfin les corps célestes. Le lecteur attentif notera le caractère purement illustratif du dessin.

Le dessin, à essayer sous Opera pour une expérience optimale, est le suivant :

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Des réseaux cryptés et anonymisants

Le besoin d'anonymat

Depuis la création d'Internet, qui reste à ce jour le moyen de diffusion d'information par excellence, nombre de nations ont tenté de prendre le contrôle de ce média et d'en épurer les flux. Ce filtrage est généralement opéré par des entités politiques dont le souhait est d'assurer à ses compatriotes l'accès aux documents reconnus d'intérêt général et d'interdir, par tous les moyens possibles, l'accès à tous les autres documents.

Le schéma ci-dessous nous montre, fait inquiétant, qu'un grand nombre de pays animés par un principe démocratique ont opté pour une surveillance des flux d'informations transitant sur leur territoire. Cette surveillance est généralement justifiée par la prévention du terrorisme et par la volonté des dirigeants politiques d'éviter à leurs compatriotes des échanges avec la réalité, parfois crue, du terrain.

La carte du monde des nations censurant Internet (source : http://www.rsf.org)La carte du monde des nations censurant Internet

Contrairement à ce qu'il pourrait être entendu, la France et plus généralement l'Europe ne sont à ce jour pas à l'abri de basculer vers un filtrage massif d'Internet, rejoignant ainsi des dictatures telles que Cuba, la Chine ou la Corée du Nord.

En effet, le gouvernement français a récemment émis le projet de loi Hadopi (Haute Autorité pour la Diffusion des Oeuvres et la Protection des Droits sur Internet), également connu sous la dénomination « Création et Internet ». Bien que maintes fois critiqué et dénoncé par la Cnil, l'Arcep ou encore le Parlement Européen, le projet de loi vise à imposer au public la sécurisation des leurs réseaux par tous les moyens imaginables (blocage de tous les ports, utilisation de mouchards officiels, ...etc.) et en cas de récidive de conviction de téléchargement illégal, la coupure de l'accès à Internet pendant une période de un an couplée à l'interdiction de pouvoir souscrire à un autre abonnement chez un quelconque fournisseur d'accès. En outre, les opérateurs sont invités à communiquer les coordonnées de leurs abonnés aux organismes chargés de surveillance, sans exiger d'ordonnance du tribunal de grande Instance, court-circuitant de ce fait le garde-fou judiciaire instauré auparavant.

Ces mesures, extrêmement liberticides, pourraient être en mesure de tuer l'interropérabilité et le logiciel libre. En effet, le blocage des ports empêchera les applications tierces de fonctionner correctement, tandis que les mouchards seront probablement destinés à un système d'exploitation unique. En outre, la suspension d'un abonnement Internet –qualifié de service universel par le Parlement Européen, au même titre que l'eau et l'électricité– n'est décemment pas envisageable.

Toutefois cette position française, malgré les récents écueils infligés par le Parlement Européen, vient s'immiscer dans la refonte du Paquet Télécom, c'est-à-dire dans le cadre réglementaire européen des télécommunications visant à rendre le secteur des communications électroniques plus concurrentiel. Une prise de position dans la refonte du Paquet Télécom pourrait donc avoir des conséquences dramatiques sur l'avenir d'Internet, et cela dans les vingt-sept états membres de l'Union Européenne.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

La solution proposée par freenet

Ian CLARKE, créateur de Freenet (2002)Ian CLARKE, créateur de Freenet

Freenet, littéralement « le réseau libre », est un système de stockage et de récupération d'information, à la fois décentralisé et crypté. Ce projet est un prolongement des travaux de l’irlandais Ian CLARKE, publiés en 1999 (source : http://freenetproject.org/papers/ddisrs.pdf).

La mise en place de Freenet intervint peu après les premières apparitions de censure sur Internet, notamment lorsque la Chine vint à investir considérablement dans la mise en place de filtres et de pare-feux à l’échelle nationale, décidant ainsi à la place des utilisateurs l’information qui serait ou ne serait pas consultable.

L’objectif premier de Freenet est de proposer à chacun un espace de liberté d’expression totale, sans crainte de jugement (moral, judiciaire, ...etc.), ou de représailles, quel que soit le lieu d’utilisation (pays, organisation, machine, ...etc.).

Les orientations souhaitées du réseau sont les suivantes :
  • Anonymat (Résistance à l'identification)
  • Robustesse (Résistance aux attaques)
  • Redondance (Résistance à la censure)

Pour atteindre certaines de ces orientations, Freenet possède un mode manuel : Darknet, dit « le réseau de l’ombre », ou plus mystérieusement « le réseau invisible ». Le concept de Darknet a notamment été une source d'inspiration du roman de J. D. LASICA.

Dans le mode Darknet, l’anonymat des utilisateurs est poussé à son extrême. Par exemple, les membres d'un réseau Darknet ne sont pas annoncés sur Freenet (à moins d'activer en parallèle le mode Opennet, auquel cas ils seront déclarés en tant que noeud Opennet). En outre, l'entrée dans ces réseaux est soumise à accord bilatéral : la machine invitante doit accepter le machine invitée et vice-versa. On observe l'établissement d'un processus proche du contrat.

Du point de vue de Freenet, chaque utilisateur du réseau est à fois client et serveur : client par son navigateur, serveur par sa machine. Freenet permet ainsi de :
  • Surfer sur des Freesites
  • Envoyer des Freemails
  • Converser sur des groupes de discussion
  • Partager des fichiers

Dans cette optique, on ne sera pas surpris que le but avoué de Freenet ressemble à s'y méprendre a une reconstruction d'Internet, mais utilisant cette fois des moyens poussés d'anonymisation (cryptage, routage) comme concept de base assurant la liberté d'expression, là où le web imaginé par Tim BERNERS-LEE reposait sur une confiance aveugle dans le genre humain. Il est par ailleurs de notoriété publique qu'en raison de son architecture, Freenet ne saurait être arrêté par une quelconque entité, pas même par ses concepteurs.

Sans enlever le mérite de la conception de Freenet, particulièrement intéressante et novatrice, nous tenons à faire remarquer que Freenet propose à chaque nœud la possibilité de se mettre automatiquement à jour. Pour tous les nœuds ayant activé cette option, il s'agit d'une faille de sécurité évidente, dans la mesure où si l'un des accès des concepteurs de Freenet venait à être usurpé, une personne malintentionnée pourrait distribuer à large échelle une version modifiée de Freenet, propageant ainsi le chaos à travers le réseau.

Malgré un développement peu avancé et une méconnaissance du grand public, Freenet demeure le moyen le plus réaliste de défense de la liberté d'expression pour ces prochaines années. En qualité de poulain, Freenet est donc régulièrement la proie d'attaques visant à étouffer dans l'œuf la croissance du projet. Etant donné la solidité du protocole, ces attaques se basent en grande partie sur des faiblesses algorithmiques et conceptuelles (d'importance toute relative), dont nous allons tenter d'expliquer les fondements. Afin de comprendre le fonctionnement de Freenet, nous avons choisi d'étudier les trois grands piliers du réseau, à savoir les nœuds, les clés et les positions.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Les nœuds

Chaque machine faisant partie du réseau (appelée « nœud ») partage une partie de son espace disque afin de stocker une portion des informations du réseau. Chaque nœud est connecté à un nombre limité d’autres nœuds (20 au maximum).

Les noeuds dans FreenetLes noeuds dans Freenet

Lorsqu’un nœud souhaite une information, il la demande à ses voisins immédiats. Si l’un d’eux possède l’information, il la lui donne, sinon, il demande à ses propres voisins, ...etc. Dans l’exemple ci-dessus, le nœud A souhaite une information détenue par le nœud F. Un déroulement possible de l’algorithme est :

Suivit de B Suivit de C Suivit de B Suivit de D Suivit de E Suivit de B Suivit de E Suivit de D Suivit de F Suivit de D Suivit de B Suivit de A.

Chaque nœud de la chaîne sait seulement qui lui a demandé l’information et à qui il l’a lui-même demandée. Par exemple, le nœud B sait uniquement que le nœud A lui a demandé l’information et qu’il a obtenue celle-ci du nœud D. Le nœud B ignore si le nœud A souhaitait cette information pour lui ou s’il ne faisait que la relayer. Le nœud B ignore également si le nœud D détenait l’information, ou s’il l’a obtenu d’un autre nœud.

Cet aveuglement volontaire constitue une première forme de protection contre la traçabilité de l’information.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Les clés

Dans Freenet, les fichiers (image d’un Freesite, message de discussion,…etc.) sont identifiés par des clés et découpés en morceaux de 32 Ko. Lorsqu’un fichier pèse plus de 32 Ko, sa clé pointe vers un fichier contenant la liste des clés de chaque morceau qui le compose (ce fichier obéit par ailleurs à la même loi de segmentation). Il existe plusieurs types de clés : Les Chk (Content Hash Key), les Ssk (Signed Subspace Key) et les Usk (Updateable Subspace Key)

Une Chk identifie un fichier :

CHK@SVbD9~HM5nzf3AX4yFCBc-A4dhNUF5DPJZLL5NX5Brs,bA7qLNJR7IXRKn6uS5PaySjIM6azPFvK~18kSi6bbNQ,AAEA--8

Elle se compose de trois parties :
  • SVbD9~HM5nzf3AX4yFCBc-A4dhNUF5DPJZLL5NX5Brs
    (Le hash SHA-256 du fichier)
  • bA7qLNJR7IXRKn6uS5PAySjIM6azPFvK~18kSi6bbNQ
    (La clé de chiffrement)
  • AAEA--8
    (Des métadonnées dont l'algorithme de chiffrement)


Une Ssk correspond à une liste de clés (Chk) utilisant un chiffrement asymétrique. Une clé privée permet l’insertion d’une nouvelle Ssk, tandis qu'une clé publique autorise sa récupération :

SSK@GB3wuHmtxN2wLc7g4y1ZVydkK6sOT-DuOsUo-eHK35w,c63EzO7uBEN0piUbHPkMcJYW7i7cOvG42CM3YDduXDs,AQABAAE/testinserts-3/

Elle se compose de cinq parties :
  • GB3wuHmtxN2wLc7g4y1ZVydkK6sOT-DuOsUo-eHK35w
    (Le hash de la clé publique)
  • c63EzO7uBEN0piUbHPkMcJYW7i7cOvG42CM3YDduXDs
    (La clé de chiffrement)
  • AQABAAE
    (Des métadonnées dont l'algorithme de chiffrement)
  • testinserts
    (Le chemin de la ressource)
  • 3
    (Le numéro de version)


Une Usk est une sorte d’alias sur une Ssk :

USK@GB3wuHmtxN2wLc7g4y1ZVydkK6sOT-DuOsUo-eHK35w,c63EzO7uBEN0piUbHPkMcJYW7i7cOvG42CM3YDduXDs,AQABAAE/testinserts/3/

Une Usk rend possible l'accès à la dernière version de la ressource Ssk demandée. C'est-à-dire que même si la clé Usk a été bâtie sur une clé Ssk obsolète, son utilisation permet d’accéder à la dernière version la ressource demandée. La différence notable entre une Ssk et une Usk est située en fin de clé :

testinserts-3/  Devient  testinserts/3/

Dans le cadre d'un partage de fichier (ou d'un Freesite) et dans un souci d'accessibilité, l'utilisateur détenant l'information préfèrera donc diffuser, plutôt qu'une clé Ssk, la clé Usk correspondant au fichier à partager.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Les positions

Les clés et nœuds sont placés sur un cercle dont la plage de valeur s’échelonne de 0 à 1, les nouveaux arrivants étant placés en bordure (1) et les réguliers au centre (0). La position des clés et nœuds n’est, pour des raisons d’anonymisation, pas géographique.

Plus précisément :
  • La position des clés est déterminée selon leur hash
  • La position des nœuds est déterminée aléatoirement au moment de leur création

Un algorithme de permutation de position (location swapping) permet aux nœuds d’échanger leur position pour se rapprocher de leurs pairs. Les nœuds ont ainsi tendance à se rapprocher selon leurs affinités pour un certain type de clé. Ce comportement est notamment remarquable dans le schéma ci-dessous, dans lequel nous superposons le graphe des pairs au graphe des noeuds découverts durant la session.

Les positions dans FreenetLes positions dans Freenet

Un nœud consacre la moitié de son entrepôt de données aux clés qu’il voit passer (cache) et la moitié aux clés dont il est proche (store), améliorant ainsi la recherche d’informations. Lorsque qu’une information est demandée, elle est trouvée relativement rapidement si la chaîne de pairs nécessaire à son transfert est proche du nœud demandeur. Lorsque l’entrepôt de données d’un nœud est plein, celui-ci efface progressivement ses clés, par ordre d'ancienneté décroissant.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Les connexions

Freenet propose principalement deux modes de connexion, pouvant être utilisés exclusivement ou simultanément, selon le choix de l’utilisateur.

Ces modes sont :
  • Opennet
  • Darknet

Opennet est le mode par défaut de Freenet, dans lequel tous les nœuds sont visibles y compris celui de l’utilisateur. Les nœuds utilisant Opennet sont régulièrement annoncés sur le réseau, aussi Freenet trouve-t-il automatiquement des pairs pour l’utilisateur afin que celui-ci puisse immédiatement utiliser les possibilités du réseau. Les pairs sont régulièrement échangés avec d’autres afin de satisfaire le principe de positionnement des nœuds.

Les connexions dans Freenet (source : Freenet 0.7)Les connexions dans Freenet

Darknet est le mode expert de Freenet, dans lequel l’utilisateur indique les pairs auquel il souhaite se connecter, de manière permanente (bien que l’utilisateur puisse à tout moment retirer un pair de sa liste d’amis). Contrairement à Opennet, les nœuds utilisant exclusivement Darknet ne sont pas annoncés sur le réseau.

Le mode mixte, combinant Darknet et Opennet, fonctionne comme un Opennet dans lequel le nombre de pairs trouvés automatiquement équivaut à la limite de pairs (20 pairs maximum dans la version 0.7), minorée du nombre de connexions Darknet (celles-ci étant permanentes).

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Les attaques et contre-mesures

L’anonymat des utilisateurs est un des enjeux majeurs de Freenet. Le fonctionnement intrinsèque du réseau fait qu’il est impossible de connaitre la source ou la destination d’un transit du point de vue d’un nœud. En outre, les données stockées sur un nœud sont chiffrées de telle manière que la clé permettant de les déchiffrer se trouve dans le texte de la clé, et non sur le disque dur. En d’autres termes, à moins de demander soi-même ces données, il est impossible de déchiffrer les données transitant sur un nœud : c’est le principe du déni plausible. Le nœud se comporte comme un transporteur, n'ouvrant jamais les colis qu'il convoie. La robustesse est une autre fonctionnalité à laquelle Freenet répond, notamment dans le cas des trois types d’attaque dont il est fréquemment la cible : la collecte des adresses IP, l’échange de position et les attaques légales.

Freenet étant décentralisé, il est nécessaire de s’attaquer à l’ensemble du réseau dans une optique de coupure. La première étape de cette attaque est la localisation des nœuds, qui s’effectue en faisant tourner une version modifiée du logiciel et en collectant un maximum d’adresses Ip en vue de blocage. En supposant qu’une organisation dispose des ressources nécessaires à l’accomplissement d’une telle attaque, la réponse de Freenet serait le Darknet.

Début 2007, Freenet a été la cible d’une attaque particulièrement audacieuse s’en prenant à l’algorithme d’échange de position. En se faisant passer pour un nœud différent à chaque itération de l’attaque, le nœud modifié demande d’échanger sa place avec l’un de ses voisins puis efface son entrepôt de données, et par la même occasion créé un trou dans le réseau. Cette attaque est handicapante dans le sens ou elle ralentit l’accès aux données, mais n’est pas fatale. Désormais toutes les deux mille permutations, un nœud a la possibilité de créer une nouvelle position aléatoire, permettant ainsi d’uniformiser (désordonner) la répartition des nœuds.

L'attaque des positions dans FreenetL'attaque des positions dans Freenet

La menace d’attaques légales sur des réseaux anonymisant est peu probable dans les démocraties occidentales (encore que…). Toutefois, Freenet a été conçu pour fonctionner en environnement hostile et particulièrement dans les dictatures, où l’information est strictement contrôlée. Les possibilités envisageables sont le blocage de ports (Freenet utilise un numéro de port aléatoire), le blocage par filtrage de paquet (Les paquets Freenet sont cryptés et peuvent être masqués par encapsulation), l’interdiction du cryptage (impensable dans un pays utilisant le commerce électronique), la pénalisation de Freenet (Darknet subsistera).

La redondance est la troisième caractéristique de Freenet, dans lequel la notion de partage de fichier n’existe pas. En revanche, chaque membre du réseau possède la capacité d’insérer des fichiers dans le réseau. La différence est fondamentale, car la notion de source est abolie. Chaque fichier inséré dans le réseau est automatiquement dupliqué selon la demande sur un nombre inconnu de machines (les machines décidant ou non d’en conserver une copie dans leur cache). Ainsi plus un fichier est demandé, plus le nombre de copies de ce fichier augmente. De même, tant qu’un fichier est demandé, il est impossible d’obtenir sa suppression.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

LE PARTAGE DE DONNÉES

Freenet étant un réseau crypté proposant le téléchargement de données, nous comparons son système de partage de fichier à des solutions concurrentes, comme les populaires Bittorrent et Usenet.

Nom
Usenet / Newsgroups
Bittorrent
Freenet
Coût
Gratuit (Free)
Payant (Giganews)
Gratuit
Payant
Gratuit
Hébergement
Fournisseurs d'accès
Utilisateurs (P2p)
Utilisateurs (P2p)
Rétention
     7 jours (Free)
200 jours (Giganews)
Tant que le fichier est partagé
Tant que le fichier est téléchargé
Sécurité
Aucun cryptage (Free)
Cryptage Ssl 256 bits (Giganews)
Cryptage Rc4 optionnel
Cryptage 4096 bits + routage + cryptage Ssl optionnel
Vitesse
Très rapide (4 Mb/s) sur tous les fichiers
Très rapide (4 Mb/s) sur les fichiers populaires. Nulle sur les fichiers impopulaires.
Très lent (40 kb/s) sur tous les fichiers.
Contenu
Logiciels, vidéos, jeux
Logiciels, vidéos, jeux
Politiquement incorrect
Popularité
Moyenne
Très grande
Très faible

Chaque solution fournit un moyen d’accès gratuit aux données à télécharger. Deux solutions proposent, en parallèle, un accès payant à des fonctionnalités supplémentaires. Ainsi, un abonnement au fournisseur d’accès Giganews permettra d’utiliser les newsgroups avec une connexion sécurisée par un cryptage Ssl, tandis qu’un abonnement à un jeu vidéo tel que World Of Warcraft autorisera les joueurs à télécharger du contenu via Bittorrent. D’autres offres comme la Vod (Video On Demand) font partie des abonnements utilisant commercialement la technologie Bittorrent.

L’hébergement des données est un critère aussi bien avantageux que discriminant. Un fournisseur d’accès s’assure de la disponibilité des données (maintenance de l'accès ou des serveurs effectuée par le fournisseur d’accès) et prend en charge la responsabilité de l’hébergement de données illégales. Toutefois, si le fournisseur d’accès ‒unique source de données‒ décide la cessation de ses activités, le téléchargement est rendu impossible.

Les politiques de rétention sont toutes différentes. Dans le cas de Usenet, la rétention des données est assurée par un fournisseur d’accès, lequel, pour des raisons d’espace disque, limite en nombre de jours la persistance des données. Dans le cas de Bittorrent, la rétention est soumise aux utilisateurs partageant une source du fichier. Pour Freenet, la duplication automatique du contenu assure la rétention, jusqu’à ce que le fichier ne soit plus demandé, auquel cas le fichier disparait progressivement du réseau.

Toutes les solutions de téléchargement offrent en option une forme de cryptage, mais seul Freenet propose de manière automatique et gratuite un cocktail anonymisant (cryptage + routage) réellement efficace. Le cryptage Ssl, utilisé par de nombreuses banques pour les opérations en ligne, est disponible pour les réseaux Usenet et Freenet.

Le débit de téléchargement est une combinaison de plusieurs facteurs issus de l’hébergement, de la rétention et de la sécurité. Dans le cas de Usenet, le téléchargement est centralisé et donc très rapide sur la totalité des fichiers proposés. Pour le réseau Bittorrent, la vitesse de téléchargement est fonction de la popularité du fichier, c’est à dire très rapide si beaucoup de monde le partage, nulle si personne ne le partage. Freenet, avant tout axé sur l’anonymat et offrant des moyens de cryptage et de routage très lourds (près de 50 % des données échangées) ne peut rivaliser en termes de débit.

Usenet et Bittorrent offrent un contenu plus ou moins identique, axé sur les médias et capable de satisfaire la demande de masse. Freenet, le réseau libre, se démarque de ses concurrents en proposant un contenu politiquement incorrect ; entendons par ce terme tout ce qui pourrait être susceptible d’être censuré par un gouvernement. A titre d’exemple pour l’année 2000, les trois types de fichiers les plus populaires étaient le texte (37 %), l’audio (21 %), et l’image (14 %). Ces fichiers étaient respectivement composés de discussions relatives à la drogue (59 %), de musique rock (71 %), et d’images à caractère pornographique (89 %).

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Conclusion

Au regard des différentes tendances profilant l'Internet de demain, il en est certaines qui expriment une volonté d'ouverture. En effet, si Internet est définitivement perçu par chacun comme un formidable vecteur de communication, la liberté des usages fait que chaque nation, soutenue par son peuple, dispose de la capacité de bâtir un Internet à son image.

Ce concept de liberté des usages n'a rien d'anodin, puisqu'il ouvre intrinsèquement la voie à la censure et au verrouillage d'un réseau conçu à l'origine comme une oasis de liberté, ce que Tim BERNERS-LEE rappelait récemment :

« Lorsque j'ai créé le web, il y a dix-sept ans, je n'ai demandé à personne la permission. La nouvelle application a été déployée à travers Internet sans que celui-ci ne soit modifié. J'ai essayé, et beaucoup de personnes y travaillent encore, de faire de la technologie web une plateforme à la fois neutre et universelle. Celle-ci ne doit pas discriminer un matériel, un logiciel, un réseau, un langage, une culture, un handicap ou des données spécifiques.

Internet devient de plus en plus le support dominant assurant notre connectivité. La neutralité des supports de communication est essentielle à notre société. C'est la base d'une économie de marché compétitive. C'est la base de la démocratie, au travers de laquelle une communauté choisit les actions à engager. C'est la base de la science, qui permet au genre humain de décider où se trouve la vérité. »

Afin de préserver la neutralité d'Internet, les partisans du libre se sont attelés à créer des consortiums de recommandations et des instruments d'anonymisation aptes à protéger leurs semblables de prédateurs avides de pouvoir et de contrôle de l'information.

C'est dans ce contexte que se pose un étonnant parallèle darwinien : la survie d'Internet ne dépendrait-elle finalement pas de l'évolution, fusse-t-elle technologique ?

Aujourd'hui plus que jamais, le futur des réseaux interconnectés semble incertain. La seule certitude du spectateur est qu'une bataille se prépare, opposant les sympathisants du verrouillage numérique aux défenseurs de la liberté d'expression, et dont l'enjeu n'est ni plus ni moins... l'avenir d'Internet !

Denis TRUFFAUT

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Glossaire

Alice

Acronyme de America Latina Interconnectada Con Europa. Le réseau sud américain Alice, en cours de développement et basé sur le réseau RedClara (Cooperación Latino Americana de Redes Avanzadas), bénéficie du soutien des nations européennes et des connexions proposées par Géant2.

Arcep

Acronyme de Autorité de régulation des communications électroniques et des postes. L'Arcep est une autorité administrative française indépendante chargée de veiller au respect de la concurrence dans le secteur des télécommunications. Dotée d'un effectif de 160 personnes, cette organisation assure la plupart du temps un rôle de médiateur dans les conflits opposant les opérateurs de téléphonie, et plus récemment dans la gestion de la fin du monopole de France Télécom et du déploiement de la fibre optique.

Bittorrent

Bittorent est un protocole d'échange de fichiers multisource et orienté P2p, distinguant les clients possédant le fichier complet (seeds) des clients qui n'en possèdent qu'une partie (peers). Bittorrent établit également un système de récompense en permettant aux seeds de télécharger plus rapidement. Les sources de Bittorent étant en libre circulation, ce système peut être contourné par des logiciels utilisant une version modifiée du protocole.

Canvas

L'élément <canvas> est l'une des nouvelles fonctionnalités de Xhtml 5. Support d'un outil de dessin vectoriel manipulable par Javascript, l'élément <canvas> autorise également la création d'animations offrant ainsi, à l'instar du Svg, une alternative libre et gratuite à l'environnement Adobe Flash. De nombreuses ressources sont d'ores et déjà disponibles et certaines, telle que le déplacement dans un labyrinthe 3D, sont de très bonne augure pour l'avenir de cette technologie.

Cernet

Acronyme de China Education and Research NETwork. Le réseau chinois, qui relie près de 900 institutions éducatives, a pour particularité de proposer une connexion à 40 Gb/s entre les villes de Beijing et Tianjin, lorsque le reste du réseau est annoncé à un débit maximum de 10 Gb/s. Possédant des liaisons transdorsales avec Géant2, Internet2, Tein2, le Japon et la Corée, le réseau Cernet2 est, à l’instar de son homologue Géant2, une plaque tournante des échanges virtuels dédiés à l’éducation et à la recherche.

Chk

Acronyme de Content Hash Key. Issue du mécanisme d'échange de Freenet, une Chk identifie un fichier à l'aide de trois composantes : le hash Sha-256 du fichier, la clé de chiffrement et des métadonnées telles que l'algorithme de chiffrement utilisé. Si le fichier pointé pèse plus de 32 ko, une SSK est utilisée en lieu et place d'une Chk.

Cnil

Acronyme de Commission Nationale de l'Informatique et des Libertés. La Cnil est une autorité administrative française indépendante chargée de veiller à la protection des données à caractère personnel et de la vie privée. Elle a été créée par la loi n° 78-17 du 6 janvier 1978 relative à l'informatique, aux fichiers et aux libertés. Bien que disposant de moyens répressifs, la Cnil repose sur un effectif de 95 agents, et reste dans les faits incapable de traiter le flot de données numériques créé chaque jour, dont la majeure partie n'est même pas déclarée.

Css

Acronyme de Cascading Style Sheets. Recommandation du W3c, les feuilles de style permettent de décrire la présentation relative à un document indépendament de sa structure. Il est donc possible de changer radicalement l'aspect d'un document en permutant une feuille de style avec une autre. Outre cet avantage confortable, les feuilles de style assurent la centralisation des données de présentation et par ce biais l'uniformisation et la légèreté des documents associés.

Dante

Acronyme de Delivery of Advanced Network Technology to Europe. Dante est une organisation à but non lucratif créée 1993 et dont la mission est de définir, bâtir et gérer des réseaux dédiés à la recherche et l'éducation. Dante gère actuellement le réseau sud américain Alice, le réseau méditerranéen Eumedconnect, le réseau européen Géant2, le réseau sino-européen Orient2 et le réseau asiatique Tein2.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Glossaire (suite)

Darknet

Darknet, dit « le réseau de l'ombre » (ou plus mystérieusement « le réseau invisible »), est le mode expert de Freenet, dans lequel l’utilisateur indique les pairs auquel il souhaite se connecter, de manière permanente (bien que l’utilisateur puisse à tout moment retirer un pair de sa liste d’amis). Contrairement à Opennet, les nœuds utilisant exclusivement Darknet ne sont pas annoncés sur le réseau.

Ercim

Acronyme de European Research Consortium for Informatics and Mathematics. L'Ercim est un regroupement européen des plus grands laboratoires de recherche nationaux en informatique tels que l'INRIA (Institut National de Recherche en Informatique et en Automatique). L'Ercim s'est notamment illustré en accueillant la gouvernance européenne du W3c.

Eumedconnect

Acronyme de European Union to Mediterranean connection. Le réseau méditerranéen Eumedconnect, en cours de développement, bénéficie du soutien des nations européennes et des connexions proposées par Géant2.

FAI

Acronyme de Fournisseur d'Accès à Internet. Ces opérateurs sont le maillon permettant la délivrance d'un accès à Internet aux tiers tels que les particuliers ou les entreprises. La plupart des Fai proposent désormais une offre triple play (télévision, téléphone et Internet) à leurs abonnés. Les usages nécessitant un débit toujours plus important, certains FAI ont opté pour la création d'une offre Ftth (Fiber To The Home), déroulant ainsi la fibre optique au pied du logement de l'abonné.

Firefox

Firefox est un navigateur relativement populaire en Europe où il dispose d'une bonne notoriété et d'une communauté très active. Firefox, bien que plus avancé qu'Internet Explorer, reste toutefois en retrait face à Opera dans la prise en charge des nombreux standards du W3c.

Freenet

Freenet, littéralement « le réseau libre », est un système de stockage et de récupération d'information, à la fois décentralisé et crypté. Ce projet est un prolongement des travaux de l’irlandais Ian Clarke, publiés en 1999. Freenet possède deux modes de fonctionnement (Opennet et Darknet) selon le degré de confiance que l'on accorde à ses pairs. Ces deux modes peuvent également être combinés en un mode hybride, utilisant les propriétés de l'un comme de l'autre.

Géant

Acronyme de Gigabit European Academic Network. Dominant technologiquement toutes les autres dorsales, Géant2 est le seul réseau à proposer un niveau de performance aussi élevé, notamment grâce à la mise en place de « Dark Fibres », mais également un niveau d’intégration avancé dans lequel, hormis les connexions à destination des archipels, le débit minimum proposé est de 2.5 Gb/s. Notablement redondant à l’intérieur de sa structure, Géant2 est également le seul réseau à proposer une connexion directe avec toutes les autres dorsales.

Giganews

Giganews est un fournisseur d'accès à Usenet populaire. Proposant 200 jours de rétention binaire (soit la plus longue rétention du marché), Giganews décline son offre en quatre catégories : Bronze (2 Go / mois, 10 connexions, $7.99 / mois), Argent (25 Go / mois, 10 connexions, $12.99 / mois), Platine (Illimité, 10 connexions, $25.99 / mois) et Diamant (Illimité + cryptage SSL 256 bits, 20 connexions, $29.99 / mois). Des comptes d'essai de trois jours sont disponibles (10 Go, 10 connexions, Gratuit) pour les utilisateurs souhaitant se familiariser avec Usenet.

Hadopi

Acronyme de Haute Autorité pour la Diffusion des Oeuvres et la Protection des Droits sur Internet. Récemment renommé "Création et Internet", ce projet de loi vise à intégrer le filtrage des réseaux en France et à en imposer la charge aux Fai. Le particulier doit, selon ce même projet, mettre tout en oeuvre afin de sécuriser son accès sous peine de voir sa ligne suspendue pendant un an dans le cas où il serait suspecté de piratage. Ce projet de loi a créé une énorme polémique, en raison de mesures liberticides qu'il impose, de son coût exorbitant, et des techniques utilisées pour convaincre les internautes de piratage.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Glossaire (suite)

Hash

Le hash est la valeur résultant d'une opération de hachage, c'est-à-dire le calcul d'une empreinte réprésentée sous la forme d'une chaîne de caractère alphanumérique dont la particularité est d'être unique (sauf en de très rares cas de collision) et à taille fixe. Le hash est utilisé régulièrement dans tous les cas qui nécessitent la conservation d'un équivalent à une valeur unique dont ne veut pas conserver la substance, mais seulement l'empreinte. C'est par exemple le cas de nombreuses données à caractère personnel telles que le numéro de sécurité sociale, le numéro de carte bancaire, ...etc. On notera à ce propos que la CNIL encourage l'emploi du hachage (source : http://www.cnil.fr/index.php?id=1536&print=1#hachage) en tant que procédé d'anonymisation des données.

Html

Acronyme de HyperText Markup Language. Créé en 1991 par Tim BERNERS-LEE, Html est l'une des trois inventions à la base du World Wide Web, avec Http (Hypertext Transfer Protocol) et Uri (Uniform Resource Identifier). Décliné en version 2 en 1995, en version 3 en 1996, et en version 4 en 1997, Html ne connu pas d'évolution majeure pendant une décennie, avant l'introduction du brouillon de travail de la version 5 en 2007. Parallèlement aux montées de version, Html connaît des déclinaisons applicatives de Xml, donnant ainsi naissance aux instances de la branche Xhtml.

Internet Explorer

Internet Explorer est le navigateur Internet de Microsoft. Largement répandu en raison de sa livraison systématique avec les produits Windows, Internet Explorer accuse l'immobilisme et l'indolence caractéristiques de son créateur. Véritable fléau du développement web, Internet Explorer fait pâle figure à côté de ses concurrents en termes de fonctionnalités et de respect des recommandations établies par le W3c.

Javascript

Langage s'exécutant du côté client, Javascript est avant tout orienté script bien que permettant le paradigme objet. Ayant connu une renaissance après l'adoption massive d'Ajax (Asynchronous Javascript And Xml), Javascript souffre d'un défaut inhérent à son côté d'exécution. En effet, l'utilisateur avec pouvoir peut à tout moment désactiver Javascript et contourner le cas échéant les contrôles réalisés à l'aide de cette technologie, ou ne pas réussir à atteindre des ressources dont l'accès serait conditionné par Javascript.

Mit

Acronyme de Massachusetts Institute of Technology. Fondé en 1861, le Mit est à ce jour considéré comme la meilleure école d'ingénierie et de sciences occidentale. Disposant de ressources considérables, le Mit a su se différencier par l'apprentissage, la pratique en laboratoire et l'implication des professeurs et étudiants dans des projets scientifiques de grande envergure.

Newsgroups

Les newsgroups sont historiquement une branche de Usenet, mais par abus de langage sont ajourd'hui devenus synonymes de cette architecture. De plus en plus populaire, les newsgroups bénéficient du travail de référencement de bénévoles qui annoncent et archivent les nouveautés distribuées sur le réseau, permettant à chacun de se tenir au courant et de consulter l'historique de Usenet.

Opennet

Opennet est le mode par défaut de Freenet, dans lequel tous les nœuds sont visibles y compris celui de l’utilisateur. Les nœuds utilisant Opennet sont régulièrement annoncés sur le réseau, aussi Freenet trouve-t-il automatiquement des pairs pour l’utilisateur afin que celui-ci puisse immédiatement utiliser les possibilités du réseau. Les pairs sont régulièrement échangés avec d’autres afin de satisfaire le principe de positionnement des nœuds.

Opera

Opera est actuellement le navigateur le plus avancé du marché, et paradoxalement l'un des moins utilisés. Se conformant aux derniers standards du W3c, quand bien même leur spécification ne serait pas définitivement établie (à ce jour Opera est le seul navigateur à supporter complètement le Svg, les webs forms 2.0 et l'élément <canvas>), Opera entretient une longueur d'avance sur ses concurrents. Le principal atout d'Opera réside en la personne d'Håkon WIUM LIE, son Cto (Chief Technology Officer) depuis 1999. On rappelera qu'Håkon WIUM LIE fut anciennement responsable du développement des CSS (Cascading Style Sheets) avec Tim BERNERS-LEE, l'actuel président du W3c.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Glossaire (suite)

Orient

Acronyme de Oriental Research Infrastructure to European NeTworks. Le réseau Orient est une dorsale dédiée à l'établissement d'une liaison directe entre la Chine et l’Europe. En cours d’élaboration, très peu d'informations filtrent si ce n'est qu'Orient possèdera à minima une connectivité avec les réseaux Géant2 et Cernet2.

P2p

Acronyme de Peer To Peer. Dans un réseau P2p, chaque utilisateur est à la fois receveur et donneur. On pourra voir dans ce mode d'échange une sorte de troc moderne, quand bien même certains utilisateurs ne feraient que parasiter le réseau sans l'enrichir (on parle alors de leecheur). Face aux menaces de répression gouvernementales, les réseaux P2p dessinent aujourd'hui une tendance allant vers la décentralisation des architectures et le cryptage des données.

Php

Acronyme récursif de Php : Hypertext Preprocessor. Langage serveur hétéroclite, Php se dinstigue des autres langages par son histoire. Créé à l'origine comme un langage de script à typage dynamique et générant du code Html, Php est désormais capable d'un paradigme objet avancé et ses applications, bien qu'historiquement liées à la création de sites Internet, dépassent largement ces préjugés et permettent de concevoir rapidement des applications fiables et performantes (On rappelera que Php est intimement lié au langage C).

Rc4

Acronyme de Rivest Cipher 4. Rc4 est un algorithme de chiffrement conçu en 1987 par Ronald RIVEST, l'un des trois fondateurs de l'algorithme Rsa. Rc4 est utilisé dans des protocoles tels que Wep, Wpa ou Bittorrent.

Sha

Acronyme de Secure Hash Algorithm. Sha est une famille de fonctions de hachage cryptographique fournissant une empreinte de longueur caractéristique à sa déclinaison. Sha-1 donne une empreinte de 160 bits, Sha-256 de 256 bits, Sha-512 de 512 bits, ...etc.

Ssl

Acronyme de Secure Socket Layer. Ssl est un mécanisme de sécurisation des transactions effectuées via Internet, reposant sur une étape d'identification. Ssl est indépendant du protocole utilisé, c'est-à-dire qu'il agit comme un module de sécurisation optionnel, pouvant ainsi fonctionner avec des protocoles tels que Http, Ftp, Pop, Imap, ...etc.

Ssk

Acronyme de Signed Subspace Key. Issue du mécanisme d'échange de Freenet, une Ssk correspond à une liste de clés (Chk) utilisant un chiffrement asymétrique. Une clé privée permet l’insertion d’une nouvelle Ssk, tandis qu'une clé publique autorise sa récupération. Elle est composée de cinq parties : le hash de la clé publique, la clé de chiffrement, des métadonnées telles que l'algorithme de chiffrement, le chemin de la ressource et le numéro de version.

Svg

Acronyme de Scalable Vector Graphics. Langage de balisage graphique vectoriel, permettant la création d'animations. Véritable révolution graphique, on regrettera que cette recommandation ait été évincée au profit de l'élément <canvas>.

Tein

Acronyme de Trans-Eurasia Information Network. Distribuant à la fois l’est asiatique et l’Océanie, Tein2 est assuré d'une proximité avec Géant2 par le biais de 4 liens à 622 Mb/s.

Usenet

Usenet est l'un des plus anciens réseaux de distributions de messages. Utilisant le protocole Nntp (Network News Transfer Protocol) et scindé en neuf catégories (alt.*, comp.*, humanities.*, misc.*, news.*, rec.*, sci.*, soc.*, talk.*), Usenet commence à regagner en popularité en raison de sa capacité à héberger des fichiers binaires, chacun étant fragmenté en une série de messages postés sur un groupe de discussion. A l'aide de logiciels adéquats, il devient donc donc possible de partager des fichiers via ce mode d'échange, tout en bénéficiant de débits intéressants puisque les fichiers sont directement hébergés sur les serveurs d'un réseau mondial. Si Usenet ne sauraît être coupé, les FAI filtrent habituellement l'accès à certains groupes de discussions, incitant ainsi leurs abonnés à utiliser un prestataire spécialisé.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Glossaire (suite)

Usk

Acronyme de Updateable Subspace Key. Issue du mécanisme d'échange de Freenet, une Usk rend possible l'accès à la dernière version de la ressource Ssk demandée. C'est-à-dire que même si la clé Usk a été bâtie sur une clé Ssk obsolète, son utilisation permet d’accéder à la dernière version la ressource demandée. Dans le cadre d'un partage de fichier et dans un souci d'accessibilité, l'utilisateur détenant l'information préfèrera donc diffuser, plutôt qu'une clé Ssk, la clé Usk correspondant au fichier à partager. Cette possibilité s'avère particulièrement intéressante dans le cadre de la gestion d'un Freesite.

W3c

Acronyme de World Wide Web Consortium. Le W3c est un organisme chargé de promouvoir la compatibilité des technologies du World Wide Web, et d’émettre des recommandations gratuites et libres de droit, à valeur de standard industriel. Fondé en 1994 par Tim BERNERS-LEE, le W3c est aujourd’hui administré par le Mit aux Etats-Unis, par le Ercim en Europe et par l’université Keio au Japon. En l’espace de douze ans, le W3c a été particulièrement productif, la plupart des standards du Web recevant une excellente critique de la part des navigateurs et des développeurs. Parmi les dizaines de recommandations élaborées, les plus remarquables sont : Css, Dom, Html, Http, Owl, Rdf, Png, Svg, Soap, Uri, Xhtml, Xml, ...etc.

Wcag

Acronyme de Web Content Accessibility Guidelines. Les lignes de conduites pour l'accessibilité aux contenus web, telles qu'établies par le W3c, font figure de césame ultime pour les concepteurs de site Internet. La conformité avec le label Wcag, qui s'établit sur trois niveaux (A, AA et AAA) donne l'assurance que les personnes handicapées (aveugles, malvoyants, ...etc.) ou utilisant un dispositif similaire (tablette de braille, lecteur de texte à retransmission vocale) peuvent accéder avec moindre mal aux contenus déployés sur un site Internet.

Web forms 2.0

Les web forms 2.0 sont l'un des apports majeurs de Xhtml 5, mettant au goût du jour des formulaires inchangés depuis Html 2 (1996). Désactivation de l'autocomplétion, Autofocus, nouveaux types de champs, contrôle par expression régulière, champs obligatoires et système de levée d'exception... Les web forms 2.0 apportent beaucoup et devraient permettrent un développement plus rapide de fonctionnalités autrefois gérées artisanalement en Javascript.

Whatwg

Acronyme de Web Hypertext Application Technology Working Group. Le Whatwg est un organisme de travail officieux destiné à la rédaction de spécifications permettant le déploiement d'applications web. Mené de front par Mozilla, Opera et Apple, le Whatwg est à l'origine du brouillon de travail de Html 5, lequel sera repris de manière officielle par le W3c. Ce renversement du processus de travail, où les navigateurs ne subissent plus les spécifications mais participent à leur rédaction autour d'une table ronde, est actuellement perçu comme la meilleure manière de produire rapidement des avancées significatives dans le domaine du web. On remarquera que Microsoft, bien qu'invité, n'a jamais daigné participer à ce groupe de travail.

Xhtml

Acronyme de eXtended HyperText Markup Language. Fusion des langages Xml et Html, Xhtml semble réunir le meilleur des deux mondes dans un puissant langage de balisage multimédia. Exigeant une grammaire stricte héritée de Xml (fermeture obligatoire des balises, attributs en minuscules, ...etc.) et proposant un système de modules Xml novateurs en plus des caractéristiques de Html, Xhtml offre aux développeurs des possibilités et une richesse de création inédites.

Xml

Acronyme de eXtended Markup Language. Xml est un langage de balisage conçu pour être utilisé en tant que méta-langage. En effet, la seule appropriation du concept de balisage et l'utilisation d'un schéma ou d'une Dtd font qu'un langage est orienté Xml. Il s'agit donc plus d'un paradigme que d'un langage à proprement parler.

Xsl

Acronyme de eXtended Stylesheet Language. Xsl utilise Xml comme mode d'expression et se base sur des règles d'inférence (système de règles et sous règles récursives) afin de transformer tout ou partie d'un document en autre chose. Généralement, Xsl est utilisé pour transformer des documents Xml en formats plus courants (Pdf, Word, Excel,...etc.)

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Sources

La FAQ de Freenet

Freenet - faq

La Faq (Frequently Asqued Questions) de Freenet est un outil précieux pour le profane, qui y trouvera réponse à des questions concernant l'histoire, l'utilité, le fonctionnement et l'installation de Freenet.

Expliqués de manière très didactique, ces quatre pôles peuvent être complétés par un échange sur le canal de discussion Irc #freenode-fr, où des bénévoles utilisant et / ou ayant participé à la construction de Freenet se font une joie de répondre au néophyte. Bien qu'incomplet, ce premier essai de documentation répond à la plupart des interrogations des utilisateurs, et sinon leur donne les premières pistes pour y parvenir.


Le projet Opte

The opte project

Le projet Opte fut créé en réponse au projet de cartographie Internet Mapping Project. Créant des représentations du réseau Internet, ce projet a opté pour une colorisation en fonction des extensions de noms de domaine afin d'améliorer la lisibilité de ses cartes. Les documents produits sont générés dans plusieurs formats (dont Png) et en plusieurs résolutions, la plus grande étant 4000x4000.

Au délà de la simple prouesse technique, le projet Opte est à même d'offrir des indicateurs de développement ou de récession d'Internet dans ses différentes branches géographiques, permettant ainsi de recouper l'actualité du réseau (congestion, destruction, ...etc.) avec les évènements du monde réel.


La FAQ de Qwest

Qwest - faq

La Faq (Frequently Asqued Questions) de Qwest est un intéressant jeu de questions-réponses sur le projet Internet2, et plus particulièrement sur son infrastructure Abilene.

En effet, si Qwest était autrefois un partenaire privilégié d'Internet2, permettant au projet de louer ses architectures de distribution optique au travers de onze villes des Etats-Unis, il ne l'est aujoud'hui plus. Il s'agit donc d'une empreinte du passé ; un court recueil couvrant les premières orientations d'Abilene et les partenaires initiaux associés au projet Internet2.



Renater

Renater

L'organisme Renater (Reseau National de télécommunications pour la Technologie, l'Enseignement et la Recherche) est chargé de gérer les interconnexions entre les centres de recherches, universités, lycées et collèges au niveau français.

Renater est également partie prenante dans la construction de la dorsale Géant2, elle-même reliée aux autres dorsales exposées dans ce mémoire.

C'est donc tout naturellement que Renater propose sur son site les topologies des réseaux Alice, Eumedconnect, Géant2 et Tein2.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

Sources (suite)

Comment utiliser HTML 5 aujourd'hui

Comment utiliser html 5 aujourd'hui

Dans ce document, Simon PIETERS a tenté de décrire par de brefs mais éloquents exemples les possibilités offertes par le Html 5. A la fois pratique et pragmatique, le document est-lui-même rédigé en Html 5.

Les cas d'études proposés dans cette démonstration ont été une source d'inspiration directe pour ce mémoire, qui en étend le domaine d'application. Les passages sur les web forms 2.0 ont permis de découvrir que la prétendue avancée de certains navigateurs sur la concurrence (Opera notamment) était solidement fondée, et que Html 5 est un langage aujourd'hui prêt à l'emploi.



PC Inpact

Pc Inpact

Pc Inpact, site généraliste d'actualité informatique personnelle, s'est brillament illustré cette année en révélant en exclusivité le projet de loi Hadopi aux internautes français, montrant au passage que le journalisme informatique n'avait rien à envier à son homologue papier.

Décorticant point par point le projet de loi et multipliant les interviews avec les responsables des industries cinématographiques et phonographique, Pc Inpact s'est attaché à imaginer les implications de l'adoption du projet de loi Hadopi, tant financièrement qu'éthiquement.



Le W3C

W3c

Le W3c (World Wide Web Consortium) propose un grand nombre de ressource à destination des acteurs du web, notamment les navigateurs et les développeurs. Les navigateurs seront très intéressés par les recommandations et les règles permettant de les respecter, tandis que les développeurs seront essentiellement invités à utiliser les quelques outils de validation de ces mêmes recommandations. Rien n'empêche cependant le développeur curieux de regarder le contenu des brouillons et recommandations, comme cela a été le cas dans le cadre de ce mémoire, afin de découvrir la teneur des travaux officiels du W3c à propos du futur du web.



Le blog d'Hakon Wium Lie sur Opera

Le blog d'håkon wium lie sur opera

Håkon WIUM LIE, le Cto (Chief Technology Officer) d'Opera Software, est un véritable gourou du web. Håkon WIUM LIE, qui officie toujours dans les aspects techniques du web, propose via un aggrégateur de flux Rss une sélection de ses interviews et prises de positions.

Les sujets abordés sont vastes, mais tournent bien entendu autour du sujet qui lui tient à coeur, c'est-à-dire le respect des recommandations du W3c : Les capacités d'Internet Explorer 8, le passage de l'Acid Test 3, l'utilisation des Css pour l'impression, ... et l'avance prodigieuse d'Opera sur ses concurrents.

Mémoire de Master MIAGE

Copyright © 2008 Denis TRUFFAUT

ANNEXES

Brouillon de travail du W3C à propos du HTML 5

BROUILLON DE TRAVAIL DU W3C A PROPOS HTML 5

Le brouillon de travail du W3c à propos du Html 5 profile les orientations espérées du web de demain. Le nom officieux du brouillon de travail, à savoir les « web applications », est suffisament éloquent pour refléter l'ambition du W3c concernant l'utilisation de ces travaux.

S'appuyant sur un renouveau sémantique, un remaniement des web forms et l'introduction de graphismes vectoriels animés par le biais de l'élément <canvas>, Html 5 se met à jour en offrant un nombre important de nouvelles fonctionnalités, dont certaines sont parfois réclamées depuis plus de dix ans.



Projet de loi Hadopi sur le filtrage d'Internet au niveau français

PROJET DE LOI HADOPI SUR LE FILTRAGE D'INTERNET AU NIVEAU FRANÇAIS

Rédigé par une commission chapeautée par M. OLIVENNES, ex-Pdg de la Fnac, et activemment supporté par Mme ALBANEL, actuelle ministre de la culture, le projet de loi Hadopi est un texte explosif par le pouvoir conféré à cette nouvelle autorité.

En effet, la relative indépendance donnée à Hadopi lui permet d'agir en marge de la justice, invitant les Fai à collaborer aux collectes d'adresses Ip et aux identifications de leur propriétaires, en se passant d'une ordonnance du Tribunal de Grande Instance, et donc en court-circuitant les garde-fou instaurés par la Cnil.



Avertissements de La Quadrature du Net sur le filtrage d'Internet au niveau européen

AVERTISSEMENTS DE LA QUADRATURE DU NET SUR LE FILTRAGE D'INTERNET AU NIVEAU EUROPÉEN

Œuvrant pour le respect des libertés numériques, La Quadrature du Net est une organisation qui vise à faire respecter le principe de neutralité d'Internet, c'est-à-dire en tant que support et non en tant que partie prenante.

Ainsi, les bénévoles de la Quadrature du Net utilisent les moyens numériques à leur disposition (rédactions de notes, envoi d'e-mails, ...etc.) afin de sensibiliser les cybercitoyens et personnalités de loi sur les questions relatives à l'idéologie de Tim BERNERS-LEE, lorsque celle-ci se trouve menacée.



Synthèse des travaux de Ian Clarke sur un réseau crypté et décentralisé

SYNTHÈSE DES TRAVAUX DE IAN CLARKE SUR UN RÉSEAU CRYPTÉ ET DÉCENTRALISÉ

Fruit des années d'études de Ian Clarke, cette thèse révèle l'ébauche d'un outil d'anonymisation des télécommunications. Basée sur un réseau crypté et décentralisé, l'idée suggérée par Ian Clarke dessine une nouvelle ère d'échange et de partage. Récemment implémentés, ces travaux donnèrent naissance au logiciel Freenet qui, bien qu'étant peu véloce, est une réussite sur le plan de l'anonymisation. De l'aveu même de ses utilisateurs, Freenet représente aujourd'hui le meilleur espoir d'un Internet neutre et libre de toute censure.