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.

Nov.02

2 novembre 2006

1 Sebastien

MSP Day 2006

Petit feedback de la journée des MSP (Microsoft Student Partner) qui s’est déroulé vendredi dernier (27/10) dans les locaux de Microsoft rue de l’université à Paris.

Journée très sympathique qui ma permis de rencontrer d’autres MSP, des gens de Microsoft, avec la notable présence de Caroline Phillips responsable EMEA du programme MSP :

Au programme de la journée :

Présentation des nouveaux MSP et de l’équipe Education
Présentation des programmes Microsoft pour les étudiants (MSDNAA, IT Academy, programmes RH, Imagine Cup)
Lancement du programme MSP en France par Caroline Phillips
Démo Vista & Office
Et remise des diplômes :

(je ne suis pas tout bô ?!?! 🙂 )

La MSP’Family 2006 :

Plus d’info sur la journée sur le blog de Neodante
Plus d’info sur le programme MSP : http://student-partners.com/

Perso

Microsoft,MSP

Oct.22

22 octobre 2006

2 Sebastien

[Atlas] UpdatePanelAnimation : la galere des animations OnUpdating/ed

Est-ce un bug, un oublie ou juste moi qui me prend la tête pour rien ? Les UpdatePanelAnimation sont des extendeurs du controle UpdatePanel nous permettant de jouer une animation au rafraichissement d’un UP.

Je mets donc un ScriptManager, 2 UpdatePanel en mode Conditional et 2 UpdatePanelAnimationExtender mappés sur les UP respectifs (TargetControlID= »…. »). Je remplis en suite une animation sur le OnUpdating pour faire un FadeOut de l’UP et sur le OnUpdated un FadeIn.

Wahou c’est beau… La page disparait en fondu, se met à jour et hop reapparait 🙂

OUI, mais voila, le problème est que ces animations sont joués à chaque AsyncPostBack pour tous les UpdatePanels.
Dans mon cas les animations s’executés sur les deux UpdatePanels alors qu’un seul d’entre eux etaient mis a jour ! 🙁

On peux tester cela très facilement en rajoutant un Button sur la page qu’on enregistre à son chargement comme controle AsyncPostBack (ScriptManager1.RegisterAsyncPostBackControl(monButton)).
Sur le code du bouton on change le contenu d’un labelA d’un UpdatePanelA et met à ajout un UpdatePanelB (UpdatePanelB.Update()).
On constatera que le labelA n’a pas changé (vu que le UpdatePanelA n’a pas été Update()) mais l’animation sur celui ci c’est quand même executé.

Alors là, expliquez moi l’interet de jouer les animations qui portent le nom: OnUpdating et OnUpdated sur un UpdatePanel qui ne s’est pas Updating/Updated ?!?!?%% J’utilise la beta 1 fraichement téléchargé de vendredi, avait-on ce probleme avant ?

Enfin soit, ma petite astuce pour pouvoir me sortir de cette galere et controler l’execution des animations à été de poser une condition dans la sequence des animations:

<Condition ConditionScript="ToPlay('UpdatePanel1')">
    <FadeOut duration=".25" Fps="30" minimumOpacity=".2" />
</Condition>

</Condition>

Et dans ma page un petit script JS :

     <script language="javascript" type="text/javascript">
         var _UPtoPlay;
         function setUPtoPlay(sender) {
             _UPtoPlay = sender;
         }
         function ToPlay(sender) {
             return sender == _SenderCallback ? true:false;
         }
     </script>

var _UPtoPlay;

function setUPtoPlay(sender) {

_UPtoPlay = sender;

}

function ToPlay(sender) {

return sender == _SenderCallback ? true:false;

}

</script>

Enfin j’ajoute l’attribut OnClick sur les triggers de mon UpdatePanel A et B pour appeler la fonction setUPtoPlay :

Button1.Attributes.Add("onClick",
       "UPtoPlay('UpdatePanel1');");

1 2	Button1.Attributes.Add("onClick", "UPtoPlay('UpdatePanel1');");

De tel maniere chaque controle émettant un ASyncPostBack appele la fonction setUPtoPlay() qui stoque coté client le nom de l‘UpdatePanel qui est mis à jour et doit jouer l’animation.

Pour revenir sur ce que je disais au debut : Est-ce un bug, un oublie ou juste moi qui me prend la tête pour rien ??? 🙂

Dev,Atlas

ASP.NET AJAX,Javascript,UpdatePanel

Oct.21

21 octobre 2006

0 Sebastien

[Atlas] Microsoft ASP.NET AJAX Beta 1

Hop la, depuis hier est sortie la version Beta 1 du projet Atlas maintenant renommé en Microsoft ASP.NET AJAX ainsi qu’une nouvelle release du AJAX Control ToolKit avec 3 nouveaux controls (DropDown, MutuallyExlcusiveCheckBox et ValidatorCallout).

Des deux cotés l’on remarque pas mal de gros changements au niveau des proprietes des controls. Déjà le ScriptManager ne propose plus de ErrorMessage. Les Triggers des UpdatePanel ont eux aussi changés. On retrouve deux types de triggers : PostBackTrigger et AsyncPostBackTrigger. Ex:

<asp:AsyncPostBackTrigger
         ControlID="imgGalerie" EventName="Click" />

1 2	<asp:AsyncPostBackTrigger ControlID="imgGalerie" EventName="Click" />

Vous remarquez aussi le changement du TagPrefix des controls d‘atlas à asp. De même l’assembly à renommé en Microsoft.Web.Extensions.

Du coté des Controls Toolkits, les proprietes de plusieurs controls sont à mettre directement dans la balise mère et non dans des balises filles du type « …..Details » ou « …Property ». Exemple :

<atlasToolkit:RoundedCornersExtender ID="rcViewer"
                runat="server" Color="White" Radius="6"
                TargetControlID="plViewer" />

<atlasToolkit:RoundedCornersExtender ID="rcViewer"

runat="server" Color="White" Radius="6"

TargetControlID="plViewer" />

Bref, compter de 10min à une bonne heure, en fonction de la taille de votre projet pour migrer votre code pour la beta 1 de ce magifique Framework 🙂

Microsoft ASP.NET AJAX :

http://ajax.asp.net/

Microsoft ASP.NET AJAX Beta 1 :

http://www.microsoft.com/downloads/……

ASP.NET AJAX Controls ToolKit :

http://ajax.asp.net/ajaxtoolkit/

Dev,Atlas

ASP.NET AJAX,dotNET,Microsoft

Oct.21

21 octobre 2006

5 Sebastien

[WPF] S’amuser avec le MediaElement sous WPF

Le contrôle MediaElement que j’ai decouvert au cours de cette semaine a revolutionné ma petite vie de developpeur 🙂 Ce contrôle permet de contenir des images, sons ou videos.
Pour charger un media, rien de plus simple :

MediaElement monMedia = new MediaElement();
monMedia.Source = new Uri("monURI");

1 2	MediaElement monMedia = new MediaElement(); monMedia.Source = new Uri("monURI");

Sachant que mon Uri peut pointer sur un fichier local (c:\….) ou distant (http://…..) que se soit une video, une image ou un son….

Le media sera joué immédiatement. Bien que vous disposez des methodes Play(), Stop() et Pause() pour contrôler le media, utilisez plutot la proprieté LoadedBehavior qui permet de definir et/ou obtenir l’etat du media :

monMedia.LoadedBehavior = MediaState.Pause; //Pause
monMedia.LoadedBehavior = MediaState.Stop; //Arret
monMedia.LoadedBehavior = MediaState.Play; //Play

monMedia.LoadedBehavior = MediaState.Pause; //Pause

monMedia.LoadedBehavior = MediaState.Stop; //Arret

monMedia.LoadedBehavior = MediaState.Play; //Play

A ce sujet, pour pouvoir jouer une video (ou son) en boucle, la seule doc que j’avais trouvé sur le msdn2 était de mettre un MediaTimeline. Chose un peu tordu dans le code alors qu’il y a une solution toute simple :
1) Abonnez-vous à l’evenement MediaEnded (fin du media) :

monMedia.MediaEnded +=
          new RoutedEventHandler(monMedia_MediaEnded);

1 2	monMedia.MediaEnded += new RoutedEventHandler(monMedia_MediaEnded);

2) Remettez la position du media à zero (debut) et relancez le media :

void monMedia_MediaEnded(object sender, RoutedEventArgs e) {
     ((MediaElement)sender).LoadedBehavior = MediaState.Stop;
     ((MediaElement)sender).Position = new TimeSpan(0);
     ((MediaElement)sender).LoadedBehavior = MediaState.Play;
}

void monMedia_MediaEnded(object sender, RoutedEventArgs e) {

((MediaElement)sender).LoadedBehavior = MediaState.Stop;

((MediaElement)sender).Position = new TimeSpan(0);

((MediaElement)sender).LoadedBehavior = MediaState.Play;

}

Ce qui est quand même beaucoup plus simple 🙂

C’est bien beau tout ca, mais la vous n’avez aucun apercu à l’ecran ce qui est quand meme un peu dommage ^^ Mais là où ca devient fort bien interressant, c’est qu’un VisualBrush peut prendre en parametre un MediaElement pour pouvoir remplir un rectangle par exemple :

Rectangle monRectangle = new Rectangle();
monRectangle.Fill = new VisualBrush(monMedia);

1 2	Rectangle monRectangle = new Rectangle(); monRectangle.Fill = new VisualBrush(monMedia);

Et hop la, votre video (par exemple) sera joué dans ce rectangle. Enfin pour rajouter votre rectangle à un canvas que vous aurez au préalable placé dans votre code XAML :

monCanvas.Children.Add(monRectangle);

1	monCanvas.Children.Add(monRectangle);

A partir de la on peut vraiement s’amuser et aller plus loin dans la démarche.. Par exemple, les rectangles ont une proprieté Clip qui va nous permettre de clipper notre media, OpacityMask pour appliquer un masque d’opacité, et bien d’autre chose pour appliquer differents effets a notre rectangle/video, … Et encore je ne parle que des rectangles, a partir du moment où votre controle pourra etre remplit par un VisualBrush on pourra tout y mettre 🙂
Je ne vais pas vous devoiler sur ce quoi je travaille en ce moment, mais il faut bien se rendre compte de tout ce qu’on peut faire avec car c’est carrement dément…

Dev,WPF

dotNET 3,WPF

Oct.18

18 octobre 2006

7 Sebastien

[JS] Le scrolling : Plein de scrollers prêt à l’emploi

Bon je ne vais pas revenir sur ce qu’est le scrolling ou un scroller mais rapidement c’est qu’il vous permez de faire défiler du contenu (texte, image, etc…) à l’ecran 🙂
Certe votre navigateur préféré vous offrent de belles barres grises pour pouvoir faire défiler les pages mais dans certains sitse, pour mieux intégrer le design, l’on developpe notre propre systeme de scrolling… C’est ce que je fais nottament avec un site d’un client où je propose de belles petites fleches (qui ne sont ni plus ni moins que des images) pour pouvoir faire defiler le contenu (en fait je deplace juste un div).

J’avais déjà developpé un petit systeme de scrolling pour mon projet SUPINFO DotNet l’an dernier, mais devant souvent reprendre le code pour l’integrer dans mes developpements en cours j’ai décidé de faire un script complet et générique pour pouvoir l’intégrer dans n’importe quel site.

Je vous met donc ici à disposition mon code (vive l’open source 🙂 ). Bon biensur, merci vous faire connaitre si vous l’utilisez dans vos developpements ^_^

Mon script contient (entre autre) :

RegisterScroller(name,parentSize,initial_position,reload_postback). Le 1er parametre est le nom (id) du DIV a scroller, le parentSize est un objet Point qui definit la taille du parent (partie visible), initial_position est aussi un Point qui définit les coordonnées initiales du DIV et reload_postback est un booléan qui défini si le DIV doit etre remplacé à sa derniere position lors de l’appel de la fonction refixPosition (que nous verrons ci-après)

refixPosition() : permet de repositionner les scrollers marqués de reload_postback à True. (Utile dans le cas d’une utilisation avec Atlas. cf ce post)

resetPosition(sender) : où sender est l’id du DIV/Scroller à remettre à sa position d’origine (initial_position)

startScroll(sender, direction) : sender etant l’ID du DIV/Scroller et direction peut etre UP, DN, GT, LT. La fonction permet donc de demarrer le scrolling (à placer sur le click de la fleche)

stopScroll(sender) : permet d’arreter le scroll (à placer sur le mouseout de la fleche)

scroll(sender, direction) : fonction qui vient scroller le sender en fonction de sa direction. (à placer sur le mouseover de la fleche).

Exemple dans mon load de ma page je retrouve :

RegisterScroller("pellicule_content",
              new Point(295,65), new Point(13,0), true);

1 2	RegisterScroller("pellicule_content", new Point(295,65), new Point(13,0), true);

Qui me permet d’enregistrer le sroller sur le DIV pellicule_content qui sera visible dans un rectangle de 275x65px, qui démarre à 13px du bord gauche et qui est repositionné à sa derniere postion lors de l’appel de la fonction refixPostion()
Puis dans mon code HTML je retrouve quelque chose du type :

<img id="img_btLeft" src="..." alt="" onclick="scroll('pellicule_content','LT')" onmouseover="startScroll('pellicule_content','LT')" onmouseout="stopScroll('pellicule_content')" />
<img id="img_btRight" src="..." alt="" onclick="scroll('pellicule_content','GT')" onmouseover="startScroll('pellicule_content','GT')" onmouseout="stopScroll('pellicule_content')" />
<div id="pellicule_content">
    <!-- mes Images -->
</div>

</div>

Bon biensur à vous de vous débrouillez avec le CSS et les ZIndex pour faire quelque chose potable 🙂

Donc vous voila parrez pour faire pleins de scrollers dans vos sites, en haut/bas, gauche/droite. Elles est pas belle la vie ? ^_^

Télécharger mon script Scroll.js

Tous commentaires sont les bienvenues 🙂

Perso,Dev

Javascript,scrollers

Oct.18

18 octobre 2006

1 Sebastien

[JS] Surcharge de parametres JavaScript

C’est en lisant le code source JS d’Atlas que j’ai decouvert la surcharge de parametres Javascript. Ok cela vous parrez peut être idiot mais comme dirait un certain B.Watterson : L’idiotie est l’essence des hommes et je n’ai d’honte à apprendre 🙂

Alors voila, je lisais le code et un moment donné je vois une fonction du type :

function test(arg1, arg2) {
     // Code.....
}

function test(arg1, arg2) {

// Code.....

}

Qui était appellé par une ligne de type :

test("ceci", "est", "un", "test");

1	test("ceci", "est", "un", "test");

A ce moment j’ai senti mes petits neuronnes s’exciter dans tous les sens avec la question : Je ne comprends pas, ma fonction attend deux arguments et moi je lui en passe quatre.. Qu’est ce qu’il se passe ? 🙂
Dans le code de la fonction j’ai vu à plusieurs reprises le mot arguments. En fouillant un peu plus, impossible de trouver la déclaration de cette variable. Serait-ce une variable propre à JS ???
J’ai donc créé une page html entierement vide pour faire un alert() dans une fonction de cette fameuse variable arguments. Suspense jusqu’a l’execution de la page : vais-je tomber sur un undefined ?? => Et ben non, une belle alerte avec inscrit [object Object] et mes petits neuronnes reprirent une activité normale 🙂

En effet, tous les parametres passés à une fonction javascript sont contenu dans un tableau (Array) nommé arguments.
Exemple simple :

function test() {
 	var output = "";
 	for(var a=0;a<arguments.length;a++) {
 		output += arguments[a] + " ";
 	}
 	alert(output);
}
test("1er argument (normal non ?)",
        "et un 2eme.... etonnant",
        "allez, un dernier pour la route :)");

function test() {

var output = "";

for(var a=0;a<arguments.length;a++) {

output += arguments[a] + " ";

}

alert(output);

}

test("1er argument (normal non ?)",

"et un 2eme.... etonnant",

"allez, un dernier pour la route :)");

Vous affichera un beau message :

1er argument (normal non ?) et un 2eme.... etonnant allez, un dernier pour la route :)

1	1er argument (normal non ?) et un 2eme.... etonnant allez, un dernier pour la route :)

Et pourtant ma fonction ne prend aucun parametre explicitement 🙂 Genial non ?

Dev

Javascript

Oct.12

12 octobre 2006

0 Sebastien

[WPF] Z-Index dans WPF

Tout comme en CSS, on retrouve une notion de ZIndex en WPF, qui permet de spécifier l’empilement des différents calques.

Sous WPF, les ZIndex s’appliquent uniquement sur des objets ‘conteneurs’ comme les Panels, Grid, StackPanels et Canvas.

En XAML, la syntaxe est :

<Canvas>
    <Image Name="Image1" Canvas.ZIndex="2" Height="60" Width="60" Source="test1.png" />
    <Image Name="Image2" Canvas.ZIndex="1" Height="50" Width="70" Source="test2.png" />
</Canvas>

</Canvas>

Ici, l’image 1 se trouvera au dessus de l’image 2. On remarque l’ attribut Canvas.ZIndex placé dans la balise Image.

Dans le code, ici en C#, cela se déclare de cette manière :

Canvas.SetZIndex(Image1, 2);
Canvas.SetZIndex(Image2, 1);

1 2	Canvas.SetZIndex(Image1, 2); Canvas.SetZIndex(Image2, 1);

Vous avez aussi la possibilité de récupérer la proprièté ZIndex d’un element par :

int image1_ZIndex = Canvas.GetZIndex(Image1)

1	int image1_ZIndex = Canvas.GetZIndex(Image1)

WPF

dotNET 3,WPF

Previous Next

Page 17 of 24

Sébastien Warin

Creative Technologist& Chief Technology Officer

About Sebastien Warin

Nov.02

MSP Day 2006

Oct.22

[Atlas] UpdatePanelAnimation : la galere des animations OnUpdating/ed

Oct.21

[Atlas] Microsoft ASP.NET AJAX Beta 1

Oct.21

[WPF] S’amuser avec le MediaElement sous WPF

Oct.18

[JS] Le scrolling : Plein de scrollers prêt à l’emploi

Oct.18

[JS] Surcharge de parametres JavaScript

Oct.12

[WPF] Z-Index dans WPF

Creative Technologist
& Chief Technology Officer