Sébastien Warin

Creative Technologist
& Chief Technology Officer

Author page

About Sebastien Warin

Issue de l'école SUPINFO, vainqueur en 2008 et 2009 de la finale française de l'Imagine Cup, gagnant du « British Telecom Innovation Award » et du « Live Services Award » lors des finales mondiale de 2008 et 2009, Sébastien Warin est actuellement Creative Technologist chez Publicis ETO et enseignant à l'ISEN (école d'ingénieur).

Ses compétences couvrent aussi bien les domaines de l’électronique, du développement (technologies .NET) et de l'IT (Infrastructure et Cloud Computing) reconnues par différentes certifications (MCP, MCTS, MCPD, CCNA) et comme Microsoft MVP (Most Valuable Professionnal) en 2011 sur la technologie Windows Azure. Speaker pour Microsoft et auteur dans des magazines spécialisés, ses centres d'intérêts portent sur le Cloud, l'intelligence artificielle, la domotique, la cryptologie, la robotique et plus généralement les nouvelles technologies.

Depuis 2014, il travaille activement sur la plateforme Constellation, plateforme d'interconnexion des applications, services et objets connectés.

Feb.26

26 février 2006

9 Sebastien

AJAX

Dans le cadre de mon projet Dotnet, je me suis mis a utiliser AJAX ^^ C’est pourquoi, je vais brievement vous exposer ce qu’est AJAX avec un petit exemple d’utilisation car je sais que tout le monde préfere la pratique que la théorie !!

AJAX késako ??
Non non je ne fais pas le ménage à l’eau de javel ^^ AJAX c’est tout simplement l’avenir du Web (concept Web 2.0) ! AJAX pour Asynchronous JavaScript And XML (en francais : « XML et Javascript asynchrones ») est une méthode de développement des applications Web !
En effet tous les échanges client<>serveur se font en arrière plan dans des fichiers XML pilotés avec des scripts JS !

Sans AJAX : actuellement, quand vous êtes sur une page A d’un site et que vous demandez la page B, votre navigateur web (IE, Firefox, ..) renvoie une requête HTTP demandant la page B, le serveur vous reponds en vous envoyant tout le code HTML (+ JS, images, CSS, …) de cette page !

Deux inconvenients :

on renvoie une requete HTTP, c’est long, le navigateur devient tout blanc, faut le temps qu’il charge la nouvelle page !!!
et surtout, c’est bête de tout recharger car en général sur un site, la difference entre 2 pages n’est que le contenu; les menus, l’habillage graphique (design) reste identique !!

Avec AJAX : maintenant grâce a AJAX on resoud ces deux problemes :

Avec navigateur charge tout le code HTML de la page A (+ images, css, et scripts JS nottament pour gérer l’AJAX)
Quand vous demandez la page B, votre navigateur ne bouge pas, c’est un script JS qui derrière va venir telecharger un fichier XML contenant juste le contenu de la novelle page !

Deux avantages :

Impression d’instantané, le contenu arrive sans voir le chargement !
Impression d’instantané renforcé par le fait que seul le fichier XML contenant le contenu de la nouvelle page transite par le reseau, ce qui reduit enormement les echanges client<>serveur (le design n’est chargé qu’une seule fois pour la 1er page !)

En une phrase, AJAX va donc révolutionner les applications Web 🙂

Pour plus d’info sur AJAX :http://fr.wikipedia.org/wiki/AJAX
Des exemples AJAX: http://fr.wikipedia.org/wiki/AJAX#Liens_externes

Bon passons à la pratique

Pour cet exemple, on nous allons créer une page qui liste les éléves de ma classe 🙂 Pour cela, nous créons un fichier XML contenant les données :

<?xml version="1.0" ?>
  <supinfo>
  	<student id="48759" sex="M" age="19">Sébastien Warin</student>
  	<student id="45813" sex="M" age="18">Kévin Drouvin</student>
  	<student id="47934" sex="M" age="18">Benoit Scourion</student>
  	<student id="47715" sex="M" age="19">Amaury Balmer</student>
  </supinfo>

<?xml version="1.0" ?>

<student id="48759" sex="M" age="19">Sébastien Warin</student>

<student id="45813" sex="M" age="18">Kévin Drouvin</student>

<student id="47934" sex="M" age="18">Benoit Scourion</student>

<student id="47715" sex="M" age="19">Amaury Balmer</student>

</supinfo>

Vous remarquerez que les ID, Sexe et Age sont contenu dans les attributs de la balise studient alors que les noms sont dans la balise ! (ps: désolé pour les autres éléves, je n’ai pas tout mis, ca veux pas dire que je ne vous aimes pas :-)) L’on nommera ce fichier : eleves.xml

Créons maintenant la page HTML de base doctypé en XHTML 1.0 Strict :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  	<title>Test AJAX by Sebeuh</title>
  	<SCRIPT LANGUAGE="JavaScript">
  		function update()
  		{
  			// Script AJAX
  		}
  	</SCRIPT>
  </head>
  <body>
  	<h1>Test AJAX</h1>
  	<div id="contenu"></div>
  	<input type="button" name="update" value="Mise a jour AJAX" onclick="javascript:update();" />
  </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Test AJAX by Sebeuh</title>

function update()

{

// Script AJAX

}

</SCRIPT>

</head>

<body>

</body>

</html>

Cette page contient une fonction Javascript : update() qui contiendra tout le code JS pour l’ AJAX, une balise DIV nommé contenu où sera affiché la liste des éléves ainsi qu’un bouton nommé update qui appelera notre fonction update().

Il nous reste plus qu’a ecrire le code de notre fonction update() ! Commencons par definir quelques variables que nous initialiserons :

var objXMLHTTP = null;
var objXML = null;
var browser = null;
if(window.XMLHttpRequest) // Pour Firefox
{
 	objXMLHTTP = new XMLHttpRequest();
 	objXML = document.implementation.createDocument('','doc',null);
 	browser = "FF";
}
else if(window.ActiveXObject) // Pour IE
{
 	objXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");
 	objXML = new ActiveXObject('Microsoft.XMLDOM');
 	browser = "IE";
}
else
 	alert("Votre navigateur ne supporte pas les objets XMLHTTP et XMLDOM... Utilisez IE ou Firefox !!");

var objXMLHTTP = null;

var objXML = null;

var browser = null;

if(window.XMLHttpRequest) // Pour Firefox

{

objXMLHTTP = new XMLHttpRequest();

objXML = document.implementation.createDocument('','doc',null);

browser = "FF";

}

else if(window.ActiveXObject) // Pour IE

{

objXMLHTTP = new ActiveXObject("Microsoft.XMLHTTP");

objXML = new ActiveXObject('Microsoft.XMLDOM');

browser = "IE";

}

else

alert("Votre navigateur ne supporte pas les objets XMLHTTP et XMLDOM... Utilisez IE ou Firefox !!");

La variable browser nous permet de savoir si l’on utilise IE ou Firefox (and co comme Opera, etc…) ! En fonction du navigateur, l’on utilise soit l’ActiveX Microsoft XMLHTTP et XMLDOM pour IE ou XMLHttpRequest et createDocument pour les amis de Firefox !

Nous allons maintenant télécharger le XML grace a notre objet objXMLHTTP et stocker dans notre objet objXML grace au code :

objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false);
objXMLHTTP.send(null);
objXML = objXMLHTTP.responseXML;

objXMLHTTP.open("GET", "http://localhost/demo_ajax/eleves.xml", false);

objXMLHTTP.send(null);

objXML = objXMLHTTP.responseXML;

Il nous reste plus qu’a exploiter le contenu du XML pour l’afficher ! Pour cela nous allons définir une variable out qui contiendra le code HTML a afficher dans notre balise DIV contenu ainsi qu’une variable nbEleves pour contenir le nombre d’eleves afin d’en faire une boucle.

var out = "";
var nbEleves = objXML.documentElement.getElementsByTagName("student").length;

1 2	var out = ""; var nbEleves = objXML.documentElement.getElementsByTagName("student").length;

Nous allons maintenant faire une boucle pour le nombre d’eleves de notre fichier XML et remplir notre variable out par le code :

for(var a = 0 ; a < nbEleves ; a++) {
 	var id = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("id");
 	var sexe = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("sex");
 	var age = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("age");
 	if(browser == "IE")
 		var name = objXML.documentElement.getElementsByTagName("student").item(a).text;
 	else
 		var name = objXML.documentElement.getElementsByTagName("student").item(a).textContent;
 	out= out + "ID: " + id + " Sexe: " + sexe + " Age: " + age + " Nom : " + name + " <br />";
}

for(var a = 0 ; a < nbEleves ; a++) {

var id = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("id");

var sexe = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("sex");

var age = objXML.documentElement.getElementsByTagName("student").item(a).getAttribute("age");

if(browser == "IE")

var name = objXML.documentElement.getElementsByTagName("student").item(a).text;

else

var name = objXML.documentElement.getElementsByTagName("student").item(a).textContent;

out= out + "ID: " + id + " Sexe: " + sexe + " Age: " + age + " Nom : " + name + " <br />";

}

Vous remarquerez que pour récuperer le contenu d’une balise (et non ses attributs) soit ici le nom de l’eleve, cela differt selon le navigateur que l’on utilise. Sous IE nous utilisons la proprieté text alors que sous Firefox & Co c’est la proprieté textContent.

Il nous reste plus qu’a afficher notre variable out dans notre DIV :

var today = new Date();
var heure = today.getHours() + ":" +today.getMinutes() + ":" +today.getSeconds();
if (document.getElementById)
 	document.getElementById("contenu").innerHTML =  "Mise a jour : " + heure + "<br/>" + out;

var today = new Date();

var heure = today.getHours() + ":" +today.getMinutes() + ":" +today.getSeconds();

if (document.getElementById)

document.getElementById("contenu").innerHTML = "Mise a jour : " + heure + "<br/>" + out;

J’ai rajouté l’heure, cela est biensur facultatif !!

Vous pouvez vous amusez à modifier le contenu dans notre fichier XML (eleves.xml) et cliquez sur le bouton « Mise a jour AJAX » de notre page pour voir que celle ci se met a jour sans pour autant faire un allé-retour sur le serveur 🙂

Cet exemple est certe très simple mais ouvre les pleins de voie, a vous de faire marcher votre imagination… Moi je dis, vive AJAX 😀

(Page complete : https://sebastien.warin.fr/…/ajax.txt)

Perso,Dev

AJAX,Javascript,Web 2.0

Feb.26

26 février 2006

4 Sebastien

XGL

Déjà repris sur le blog de Benuts et Mick (ajout de son blog dans les liens !), je vous présente XGL car je trouve le concept plutot sympa !!

Pour ceux qui ne connaissent, XGL est un serveur X entierement 3D ! Concretement sur votre ecran vous avez un beau cube 3D que vous pouvez faire pivoter dans tout les sens et où chaque face represente un bureau !!

Ce serveur X, developpé chez Novell, n’est disponnible que sur plateforme Linux, et sera disponnible dans la SUSE 10.1 beta 4 et en avril dans la Ubuntu 6.04 !

De quoi mettre sur le banc de touche l’interface de Windows Vista et celle de Mac OS X !! Seul probleme : avoir une bonne carte 3d !!

Ti’ apercu:

Plus d’info :

La video de présentation (a voir absolument !!) : http://www.freedesktop.org/…/xgl-demo1.xvid.avi
Tutoriel pour SUSE : http://en.opensuse.org/Xgl
Tutoriel pour Ubuntu : http://www.ubuntuforums.org/…

Info

Linux,Vista,XGL

Feb.17

17 février 2006

1 Sebastien

LFS – Part II

Pour donnez suite (et fin) a mon message d’hier, c’est bon ma 1er LFS est opérationnelle 🙂

Apres 2/3 jours de galére, de compilation a n’en plus finir, c’est bon, elle est la, elle boote et marche nikel 😉

Tite image Just For Fun :

Un systeme vraiment de base (~50 paquets) certe mais qui va maintenant etre enrichi (serveur X, services, utilitaires, etc..) donc retour aux compils ^^

ps kinji : alors yé où l’accro M$ ?? Vive Linux ^^

Info,Perso

LFS,Linux LUNA,SupInfo

Feb.15

15 février 2006

0 Sebastien

LFS

Preque qu’une semaine que je n’ai pas posté sur ce blog, raison : JE BOSSE 🙂 ^^

Apres avoir fini le projet Oracle, je suis sur le projet Linux qui consiste a réaliser une distribution Linux : pas de la tarte 🙂 En effet c’est trop trop long, surtout la compilation des paquets comme gcc, binutils ou Glibc !

Voila a quoi ressemble mon ecran depuis 3jours :

Bon allez, j’y retourne…

@ bientot pout un prochain post 🙂

Info,Perso

LFS,Linux LUNA

Feb.09

9 février 2006

5 Sebastien

La galère des Threads sous .NET 2.0 :-)

On s’est retrouvé, ben et moi, lors de l’ecriture de notre logiciel Skin.be dans une petite galère avec l’utilisation des Threads sous le .NET 2.0 !

C’est quoi un thread ?
Lorsque vous démarrez une application, Windows crée automatiquement un nouveau « thread » d’exécution spécialement pour votre application. Ce « thread » permet d’isoler votre application dans son propre environnement unique, bien séparé de tout autre application. Attention, il ne faut pas les confondre avec les AppDomain ! Un thread est une « unité d’execution » alors qu’un domaine d’application et une « unité d’isolation d’execution » !! J’eclaircirai tout cela plus tard…

A quoi ca sert un thread ?
Les threads permettent d’effectuer plusieurs taches dans votre programme en même temps : le multi-tache ! Imaginez un serveur web mono-thread où 2 clients se connecte en meme temps : 1er arrivé, 1er servi : 1 seul client à la fois ce qui n’est pas super !! Hors avec les threads, dès qu’un client se connecte, un nouveau thread est lancé independement des autres pour pouvoir « s’occuper » de nouveau client !

Rapport entre Skin.be et les threads
Dans notre petit logiciel, quand vous cliquez sur « Télécharger », une fonction est appellée et vient faire une boucle pour télécharger toutes les images. Seulement cette fonction étant très gourmande et étant executée dans le meme thread fige l’interface graphique !
Notre programme devient donc tout « blanc » (plus de rafraichissement graphique) et on peut plus le controler a moins d’attendre la fin du téléchargement ! Pas génial hein !
Donc pour remedier a cela, nous executons la fonction de téléchargement dans un autre thread ce qui permet de garder le contrôle sur notre GUI (interface graphique du programme).

La où ca devient galère !
Le probleme dans notre cas, c’est qu’a chaque image téléchargée, notre fonction de Telechargement rafraichit la GUI au moyen d’une ProgressBar (10%..20%..30%…) et d’un petit label: « Telechargement de la photo 2/8 ».
Seulement sous .NET 2.0, si vous modifiez un controle d’un autre thread vous aurez un beau message de votre compilateur :

Illegal cross-thread operation: Control ‘ProgressBar’ accessed from a thread other than the thread it was created on

Le .NET framework 2.0 détecte lui même que l’on cherche a modifier une propriété du label dans un autre thread que le thread principal ce qui provoque cette erreur !

Comment fait on alors ?
Il faut en fait demander au contrôle d’effectuer lui même la resynchronisation ! Pour cela on va utiliser des délégués.
Déclarons-le au debut de notre programme :

Private Delegate Sub SyncroControl(ByVal sender As System.Object, ByVal e As System.EventArgs)

1	Private Delegate Sub SyncroControl(ByVal sender As System.Object, ByVal e As System.EventArgs)

Puis dans votre code, créez une fonction pour la mise a jour de votre contrôle (ou vos contrôles) :

Private Sub UpdateControlProgress(ByVal sender As System.Object, ByVal e As System.EventArgs)
          Dim i As Integer = CInt(sender)
          Dim progress As Decimal = 100 / nb_photos
          ProgressBar.Value = CInt(progress * (i + 1))
          Label4.Text = "Téléchargement photo " & (i + 1) & "/" & nb_photos
End Sub

Private Sub UpdateControlProgress(ByVal sender As System.Object, ByVal e As System.EventArgs)

Dim i As Integer = CInt(sender)

Dim progress As Decimal = 100 / nb_photos

ProgressBar.Value = CInt(progress * (i + 1))

Label4.Text = "Téléchargement photo " & (i + 1) & "/" & nb_photos

End Sub

Dans notre cas la fonction UpdateControlProgress récupérera l’avancement dans l’objet sender qui sera convertie en Integer, puis on viendra mettre a jour notre ProgressBar et label en fonction.
Il ne reste plus qu’a appeler cette fonction par notre délégué dans le code de votre Thread :

 Dim monDelegue As New SyncroControl(AddressOf UpdateControlProgress) 
 ProgressBar.Invoke(monDelegue, New Object() {i, EventArgs.Empty})

1 2	Dim monDelegue As New SyncroControl(AddressOf UpdateControlProgress) ProgressBar.Invoke(monDelegue, New Object() {i, EventArgs.Empty})

(nb: i est un Integer representant l’avancement du téléchargement dans notre application !)

C’etait simple non ? 🙂

Dev,.NET

dotNET,Thread

Feb.09

9 février 2006

0 Sebastien

AppDomain

Je m’étais intérressé il y a quelques semaines aux AppDomain sous .NET donc je vous en touche quelques mots 🙂

Les AppDomain ou domaines d’application sont des environnements dans lequelles vont s’executer votre programme. Ce sont en gros des processus mais au niveau du CLR .net !

Dés que vous lancez un programme .net il est chargé dans un nouveau domaine d’application qui contient votre programme .net (assembly) ainsi que les assembly qu’il a besoin pour fonctionner (réferences) ! .NET offre la possibilité, par System.AppDomain, de les controler.

Cela à 2 avantages :

la securite car le programme .net est dans un espace clos : le domaine.
les performances : tres utile dans le cas d’une application à plugins. On peut charger chaque plugins dans un domaine different du principal pour voir les décharger (tuer) a la volée !!

Pour plus d’infos, je vous conseille vivement 2 très bons articles et en francais s’il vous plaît :

Et sur ceux, bonne nuit 🙂

.NET

AppDomain,dotNET

Feb.08

8 février 2006

0 Sebastien

HDCP

HDCP !! késako ??? High-bandwidth Digital Content Protection !!

Retenez bien ce nom, dans les prochaines années il sera partout dans votre maison ! C’est une technologie développée par Intel qui vise a protéger les contenus multimédia par le biais des DRM (Digital Rights Management) entre l’emetteur et le recepteur par un cable HDMI (High-Definition Multimedia Interface) !!

Avant d’aller plus loin, si vous achetez une nouvelle TV, vérifiez bien qu’elle soit compatible HDCP sinon vous serez bon pour la changer quelques années plus tard^^

Donc, le but du HDCP, c’est d’envoyer un flux video vers un diffuseur de ‘confiance’ (ex : ecran lcd) qui permettra de diffuser l’image. (et seulement de diffuser – pas de stocker)

Pour cela l’emetteur (ex: lecteur blu-ray, démodulateur satellite) va crypter le flux video en HDCP et le diffuseur le decryptera.

C’est l’emetteur qui va ‘tester’ si le diffuseur est un terminal ‘agrée’ HDCP. Si oui les flux sont envoyées ‘cryptée’ ! Chaque terminal ‘agréé HDCP’ recoit d’un organisme ‘ad-hoc’ un jeu de 2 clés : 1 publique et 1 secrete qui vont ‘participer’ au mecanismes d’authentification.

Mais comment ca marche dans le concret ?
Comme dis ci-dessus, chaque terminal renferme une clé publique (noté P) et une clé secrete (noté S).
Prennons un exemple pour bien comprendre :
Je dispose d’un lecteur DVD blu-ray (emetteur : noté 1) et d’un ecran LCD (diffuseur : noté 2) !
Chacun dispose d’une clé publique et secrete : P1/S1 et P2/S2.
Ce qui va se passer dans notre cable HDMI entre notre lecteur blu-ray et notre TV, c’est qu’ils vont se mettre d’accord sur une clé commune (un peu comme l’algo de Diffie-hellman utilisé pour le SSL) pour crypter/décrypter le flux.
Chacun vont s’echanger leur clé publique et la multiplier avec leur clé secrete pour obtenir une clé commune :

S1.P2 = S2.P1 = clé commune

1	S1.P2 = S2.P1 = clé commune

Pour information, la clé secrete (S) est un vecteur de 40 contenant des clés de 56bits et la clé publique une clé de 40bits.

S1.P2 = S2.P1 : magie ?
Il faut savoir que les clés secretes ne sont pas générées au hasard, elles sont issue de la MasterKey, une matrice de 40×40 contenant des clés de 56bits qui est gardée très très secretement par un organisme (notons la M) ! C’est a partir de cela qu’ils générent des clés par la formule :

S = P.M

S = P.M

Exemple :
Prennons 2 vecteurs de 2 bits pour nos 2 clés publiques P1 (0 1) et P2 (1 0) et une MasterKey, matrice de 2×2 pour faire simple. On a :

    P1    x      M      =   S1
 ( 0 1 )  x  ( 0  1 )  = ( 2 3 )
             ( 2  3 )

P1 x M = S1

( 0 1 ) x ( 0 1 ) = ( 2 3 )

( 2 3 )

Donc S1 ( 2 3 ) notre 1er clé secrete

      M     x   P2   =   S2
    ( 0  1 ) x ( 1 ) = ( 0 )
    ( 2  3 )   ( 0 )    ( 2 )

M x P2 = S2

( 0 1 ) x ( 1 ) = ( 0 )

( 2 3 ) ( 0 ) ( 2 )

Et S2 ( 0 2 ) notre 2eme clé secrete

Echange des clés publiques puis multiplication avec les clés secrètes, ce qui donne :

   S1   x   P2  = clé commune
 ( 2 3 ) x ( 1 ) = 2
           ( 0 )

S1 x P2 = clé commune

( 2 3 ) x ( 1 ) = 2

( 0 )

 S2   x   P1    = clé commune
( 0 ) x ( 0 1 ) = 2
( 2 )

S2 x P1 = clé commune

( 0 ) x ( 0 1 ) = 2

( 2 )

On trouve donc de chaque coté la meme clé commune (ici 2) pour crypter/décrypter grâce a un petit échange de clé publique.

Ce n’est donc pas de la magie, juste des proprietes mathematiques sur des calculs matricielles (associativité,commutativité,…)

Systeme de revoquation des clés
Autre point important de ce nouveau systeme c’est la révoquation des clés ! En effet, une liste contiendra les clés publique des terminaux a banir ! Celle ci sera diffusé par le satellite par exemple et/ou contenu dans les HD-DVD/Blu-ray ! En clair, si votre terminal HDCP est suspect (terminal capable de contourner le HDCP par exemple en renvoyant en clair le flux vers une sortie dvi), il se peut que ce dernier soit référencé dans la liste de révoquation des clés ! Votre terminal sera desactivé et vous pourrez plus rien faire avec !! Genial non ? 🙁

HDCP sûr à 100% ??
Mathématiquement parlant, le systeme est très bien pensé (enfin du moins d’après mon père ^^) ! A moins de découvrir la MasterKey (dans ce cas tout le systeme est foutu) c’est du solide !!
Mais apparament un cryptanaliste hollandais pretend pouvoir casser le systeme en disposant de 40 terminaux aggrée HDCP… Mais il n’ose pas publier ses recherches par peur de ne plus pouvoir aller aux USA !!!!

Affaire a suivre… 😀

HighTech

HDCP,HighTech,Securité

Previous Next

Page 23 of 24

Sébastien Warin

Creative Technologist& Chief Technology Officer

About Sebastien Warin

Feb.26

AJAX

Feb.26

XGL

Feb.17

LFS – Part II

Feb.15

LFS

Feb.09

La galère des Threads sous .NET 2.0 :-)

Feb.09

AppDomain

Feb.08

HDCP

Creative Technologist
& Chief Technology Officer